تصميم مواقع نظام تصميم واجهة داكنة حركة وصوت

HUMAN OS تصميم الموقع

UX/UI لموقع تفاعلي لا تكون فيه الواجهة بطلة المشهد. 49 حالة شاشة بدل الصفحات والتمرير: مشهد واحد — نافذة عرض واحدة، وصورة أو خامة في المقدمة، والبيانات خطًّا رفيعًا على الجانب. صمّمتُ بنية المشهد والتنقل ونظام تصميم داكنًا بلون تمييز لكل وحدة وعناصر تحكم مسطحة وقواعد للحركة والصوت والتجاوب وإتاحة الوصول.

افتح الموقع ↗بطاقة المشروع →

01 / المهمة

موقع بلا صفحات: نافذة عرض واحدة و49 حالة وواجهة تتراجع أمام الجسد

يمكن عرض الموقع المعتاد كسلسلة أقسام. هنا لا يصلح ذلك: مسار المستخدم دراما من 49 شاشة بتحميل وأربعة فصول وعودات إلى الخريطة الرئيسية وخاتمة. على الواجهة أن تقود لا أن تأمر: لا تقييمات ولا تقدّم بالنسب المئوية ولا «أفضل خطوة تالية».

لذلك يقوم التصميم على ثلاثة قرارات: يشغل المشهد دائمًا شاشة واحدة، وتبقى الصورة أو الخامة العنصر الرئيسي، وتُختزل الواجهة كلها في سطر أحادي المسافة رفيع وأزرار مسطحة. وكل ما عدا ذلك — اللوحة الداكنة والطباعة والحركة — تابع لهذا.

49حالة شاشة بدل الصفحات

1نافذة عرض لكل مشهد، دون تمرير

4×8فصول من 8 مشاهد على قالب واحد

9درجات في سلّم الخطوط

5مدد للحركة

44 pxأصغر هدف لمس

02 / بنية المشهد

تشريح الشاشة: خمس مناطق تتكرر في كل مشهد من الـ 49

يُبنى كل مشهد من الإطار نفسه. لا يعيد المستخدم تعلّم الواجهة: يتغير محتوى المشهد فقط، أما موضع العنوان والمسرح والقراءات والأزرار فلا يتغير.

1HUMAN_OSPROCESS 01 / SLEEP

2SLEEP_03SLEEP ONSET

3المسرح: صورة أو خامة

CONSCIOUS CONTROLREDUCING

ONSET DETECTIONPENDING

DIRECT CONTROLUNAVAILABLE

5Sound offBackMain SystemContinue →

الترويسة. على اليسار شعار HUMAN_OS، وعلى اليمين وسم العملية («Process 01 / Sleep»). ولا شيء غير ذلك في الترويسة.
الرمز والعنوان. رمز المشهد الخدمي (SLEEP_03) بخط أحادي المسافة وعنوان كبير من سطر أو سطرين، وتحته عبارة تقريرية واحدة.
المسرح. صورة أو خامة بعرض الشاشة كله بحواف مُعتَّمة — الجسد أو الشيء أقوى من البيانات.
القراءات. ثلاثة أزواج «معامل — حالة» في صف: فئات وكلمات بدل الأرقام والنسب.
شريط التحكم. Sound وBack وعند الحاجة Main System، وزر رئيسي واحد Continue على اليمين — في المكان نفسه دائمًا.
أماكن ثابتة. لا تقفز الأزرار بين المشاهد: يمكن الرجوع في أي مشهد، ومخرج الخريطة الرئيسية في الموضع نفسه.

03 / التنقل

تدفق من 49 حالة يمكن الإمساك به ذهنيًا

التنقل آلة حالات منتهية. كل حالة قابلة للوصول والفحص، ولا يضيع المستخدم أبدًا: توجد دائمًا خطوة للخلف وعودة إلى الخريطة الرئيسية.

BOOTMAINSLEEPMAINFUELMAINCONNECTMAINPROTECTMAINOPTREVEAL

خط واحد. يسير المسار إلى الأمام فقط: Boot ← Main ← أربعة فصول ← Optimization ← Reveal؛ وتعود الخريطة الرئيسية بعد كل فصل.
الخريطة تتغير. تتحدث الخريطة الرئيسية بعد كل فصل: «structured» أولًا ثم «interdependent» و«permeable» و«incomplete» — وهذا هو التقدّم دون نسب مئوية.
الأحداث. NEXT وBACK وRETURN_MAIN وOPEN_MODULE: أربعة إجراءات تغطي التجربة كلها فتبقى الواجهة بسيطة.
بلا تنقل تلقائي. لا تختار المنظومة ترتيب الفصول عن المستخدم ولا تقترح فصلًا «أفضل» تاليًا.

04 / الشاشات

تسع شاشات رئيسية والأنماط التي تقوم عليها

اللقطات مأخوذة من الموقع العامل بقياس 1440×900. وتعرض كل شاشة نمط تفاعل واحدًا.

HUMAN OS — التحميل، أربع عمليات — 01 — Bootالتحميلالمشهد الأول: أربع عمليات بأشكال مجردة. مدخل بلا نص إرشادي.

HUMAN OS — الخريطة الرئيسية — 02 — Main Systemالخريطة الرئيسيةأربعة أشكال — أربع وحدات؛ وتحتها الحالة «not yet explored» وسطر الاعتماديات.

HUMAN OS — مشهد بدء النوم — 03 — Sleep onsetفقدان التحكمنمط «الشاشة السلبية»: لا أزرار فعل، والمستخدم يراقب فقط.

HUMAN OS — اختيار نافذة النوم — 04 — Sleep windowعنصر تحكم مقسّم2H وَ4H وَ6H وَ8H وَ10H — محور الاختيار الوحيد؛ ويُملأ الجزء النشط بلون التمييز.

HUMAN OS — مفاتيح التوافر — 05 — Fuel availabilityمفاتيحثلاث حالات NOW / LATER / SUSTAINED بدل الحقول الرقمية والمنزلقات.

HUMAN OS — إشارة متبادلة بين إنسانين — 06 — Connect mutual signalعنصران مستقلانزرّا إشارة متطابقان: لكل إنسان حالته وسحبه.

HUMAN OS — طبقات الحماية — 07 — Protect layersأكورديون الطبقاتثماني طبقات — قائمة كثيفة بعلامة «+»: تُفتح التفاصيل عند الطلب.

HUMAN OS — قائمة علاقات التحسين — 08 — Optimizationقائمة العلاقاتجدول نسبي «شرط — نتيجة»: بلا أسهم سببية.

HUMAN OS — المشهد الختامي — 09 — Revealخاتمة بلا واجهةتكاد الواجهة تختفي ويبقى عنوان وصورة.

05 / نظام التصميم

نظام تصميم داكن على متغيرات CSS: الألوان والخطوط والمسافات والحركة والمكوّنات

يعيش النظام كله في ملف رموز واحد ووحدات CSS: 45 مكوّنًا و33 وحدة أنماط. وفيما يلي تفكيكه بالكامل — هذا HTML حيّ بقيم من الشيفرة العاملة.

5.1

الألوان

قاعدة داكنة ونص رمادي دافئ؛ ولا يظهر اللون إلا كلون تمييز للوحدة

اللوحة بلا ألوان مشبعة عمدًا: ألوان تمييز الوحدات الأربع خافتة، ولون تمييز عناصر التحكم أفتح ويؤخذ من الوحدة النشطة. و«الأخضر = جيد» و«الأحمر = سيئ» محظوران في النظام.

الخلفية والنص

--bg-0#0b0c0d

--bg-1#111315

--bg-2#181b1e

--fg-0#f1f0ec

--fg-1#c9c7c1

--fg-2#8d8c88

--fg-3#64635f

الخطوط والشفافية

--line-1rgba(241,240,236,.18)

--line-2rgba(241,240,236,.08)

--focus#e7e4db

ألوان تمييز الوحدات

--sleep-accent#7a819f

--fuel-accent#b48b5a

--connect-accent#a67572

--protect-accent#a77b53

ألوان تمييز عناصر التحكم

sleep#c7c0d6

fuel#ccbda9

connect#b2c9d2

protect#c7b8ca

5.2

الطباعة

خطّان: Space Grotesk للنص وGeist Mono لوسوم النظام

العناوين كثيفة بتباعد أسطر ضيق؛ والوسوم والقراءات بخط أحادي المسافة بتباعد 0.16 em وبأحرف كبيرة. وللسلّم تسع درجات من 11 إلى 128 px (الأخيرة مرنة).

النص · Space GroteskSleep cannot be forced

يتراجع التحكم الواعي ولا يتوافر تحكم مباشر.

الوسوم · Geist MonoPROCESS 01 / SLEEP

SIMULATED SYSTEM MODEL

--fs-00 · 11 pxHuman OS

--fs-0 · 12 pxHuman OS

--fs-1 · 14 pxHuman OS

--fs-2 · 16 pxHuman OS

--fs-3 · 20 pxHuman OS

--fs-4 · 28 pxHuman OS

--fs-5 · 40 pxHuman OS

--fs-6 · 64 pxHuman OS

--fs-7 · 64–128 pxHuman OS

5.3

المسافات والزوايا والطبقات

عشر درجات للمسافات من 4 إلى 128 px

تتبع المسافات السلّم 4-8-12-16-24-32-48-64-96-128. والزوايا ضئيلة — 0 و2 و6 px (الأزرار 8 px)، والخطوط 1 px بمستويين من الشفافية، وست طبقات z-index من الخلفية إلى النافذة المنبثقة.

درجات المسافات

--sp-1 · 4

--sp-2 · 8

--sp-3 · 12

--sp-4 · 16

--sp-5 · 24

--sp-6 · 32

--sp-7 · 48

--sp-8 · 64

--sp-9 · 96

--sp-10 · 128

الزوايا

0 px

2 px

6 px

8 px

طبقات z-index

--z-bg	0
--z-media	10
--z-trace	20
--z-ui	30
--z-nav	40
--z-modal	50

5.4

الحركة

خمس مدد وثلاثة منحنيات — لكل حركة سبب

سريعة (160 مللي ثانية) — ردود عناصر التحكم، وواجهة (280 مللي ثانية) — عناصر الواجهة، ومشهد (700 مللي ثانية) — تبدّل المشاهد، وبطيئة (1.4 ثانية) — الحقول الخلفية، وبيولوجية (2.2 ثانية) — التنفس والأثر. والمنحنيات ثلاثة: واجهة ومشهد و«بيولوجي».

المدة

الرمز	المدة	الاستخدام
--dur-fast	160 ms	ردود عناصر التحكم
--dur-ui	280 ms	عناصر الواجهة
--dur-scene	700 ms	تبدّل المشاهد
--dur-slow	1400 ms	الحقول الخلفية
--dur-biological	2200 ms	التنفس والأثر

المنحنيات

--ease-ui	cubic-bezier(.22,.61,.36,1)
--ease-scene	cubic-bezier(.16,1,.3,1)
--ease-biological	cubic-bezier(.37,0,.63,1)

5.5

المكوّنات

عناصر تحكم مسطحة: تُقرأ الحالة من التعبئة لا من الظل

الأزرار بلا ظلال ولا تدرجات: الإجراء الرئيسي والحالة المختارة تعبئة صلبة بلون تمييز الوحدة، وغير المتاح رمادي خافت. والتركيز حدّ 2 px بإزاحة 3 px.

الزر الرئيسي

Continue →

مختار

Sound on

عادي

Back

غير متاح

Continue →

التركيز

Main System

عنصر تحكم مقسّم

2H4H6H8H

قراءة

Sleep window / 06:00Model confidence / Limited

وسم العملية

PROCESS 01 / SLEEP

06 / الحركة والصوت

القواعد التي تتحرك وتصدر الصوت بها الواجهة

الحركة هنا ليست زينة بل رسالة. وإن لم يكن للحركة سبب (ضوء أو تنفس أو فقدان التحكم بالمؤشر) فلا وجود لها.

القاعدة	كيف تُنفَّذ
السبب	كل حركة مرتبطة بحدث: يوقف النوم تأثير المؤشر، ويحدد التنفس إيقاع الأثر
واجهة أقل	كلما زاد عدم اليقين تختفي الواجهة أولًا ويبقى الجسد والخامة
بلا «أخطاء»	Optimization failed ليست شاشة حمراء ولا عطلًا بصريًا: تصمت الواجهة وتواصل المنظومة التنفس
تقليل الحركة	94 موضعًا تراعي prefers-reduced-motion؛ وفي كل مشهد زر «Pause motion» مستقل
الصوت عند الطلب	تبدأ المقاطع المحيطية الخمسة عند زر «Sound» فقط، دون نغمات نجاح أو إنذار

07 / التجاوب

الهاتف ليس مكتبًا مصغَّرًا: الإطار نفسه وأولويات مختلفة

يُعاد ترتيب المشهد عبر أربعة نطاقات (1440+ و1024–1439 و768–1023 وأقل من 768 px). وفي الجوال يُزال كل ما يحتاج إلى مؤشر ويشغل شريط التحكم الجزء السفلي من الشاشة.

اللمس. كل الأزرار لا تقل عن 44×44 px ولا منطق مؤشر على شاشات اللمس: يعمل مشهد النوم مثلًا بدونه.
المشاهد نفسها. يبقى إطار المشهد: العنوان والصورة والقراءات والشريط — من الأعلى إلى الأسفل؛ وتتحول القراءات إلى عمود.
Connect. لا يتحول الإنسانان إلى قائمة أولويات رأسية: يحتفظ كلاهما بالوضع نفسه.
الارتفاع المنخفض. قاعدة مستقلة للشاشات الأقل من 740 px كي لا يغطي شريط التحكم المشهد.

HUMAN OS — بدء النوم — نافذة النوم — بدء النوم — نافذة النوم

HUMAN OS — إشارة متبادلة — إشارة متبادلة

النطاق	ما الذي يتغير
1440+	مشهد كامل: صورة بعرض الشاشة وقراءات في ثلاثة أعمدة
1024–1439	ينضغط المشهد وتبقى القراءات في صف
768–1023	لوحي: القراءات في عمودين وشريط تحكم أكثف
< 768	هاتف: عمود واحد وشريط التحكم في الأسفل وبلا إجراءات تعتمد على المرور

08 / إتاحة الوصول

حُسب التباين وفق WCAG على خلفية #0B0C0D. والنص الرئيسي وألوان التمييز فوق 5:1؛ والاستثناء الوحيد مستوى النص الثالث «الشبحي» للوسوم الزخرفية.

الرمز	اللون	التباين
--fg-0	#F1F0EC	17.2 : 1
--fg-1	#C9C7C1	11.6 : 1
--fg-2	#8D8C88	5.8 : 1
--fg-3	#64635F	3.3 : 1 · زخرفة
sleep / fuel / connect / protect	#7A819F · #B48B5A · #A67572 · #A77B53	5.0–6.3 : 1
عناصر التحكم (4 وحدات)	#C7C0D6 · #CCBDA9 · #B2C9D2 · #C7B8CA	10.4–11.4 : 1

التركيز. حدّ 2 px بلون تمييز الوحدة وإزاحة 3 px؛ وللعناصر العادية 1 px بلون #E7E4DB وإزاحة 4 px.
أهداف اللمس. 44×44 px على الأقل لكل زر.
الحالات. تُعلَّم الأزرار المختارة بـ aria-pressed وتعبئة لا باللون وحده.
قارئات الشاشة. يُخفى النص الخدمي بصنف sr-only لكنه يبقى في شجرة إتاحة الوصول.
الحركة والصوت. يوجد إعداد النظام لتقليل الحركة وإيقاف يدوي؛ ولا يُشغَّل الصوت إلا بيد المستخدم.
لوحة المفاتيح. يمكن اجتياز المسار كله بلوحة المفاتيح ولا إجراءات تعتمد على المرور فقط.