01 · نظرة عامة
بيع البرمجيات بالبرمجيات
أدوات المراقبة يشتريها أناس سيحكمون على منتجك من p95 موقعك التسويقي نفسه. لذا فموقع Signalform ليس صفحة عن لوحة قيادة — بل يحتوي واحدة. لوحة الواجهة الافتتاحية SVG مبني يدويًا: إطار متصفح، ومخطط إنتاجية، وخط شراري لمعدل الأخطاء، وقراءة كمون p95، وذيل سجلات يتمرر. لا لقطة شاشة، ولا تصيير جاهز، ولا فيديو منتج.
هذا القرار تتوالى آثاره. مع انعدام التصوير يصبح وزن الصفحة كله ترميزًا، وعلى اللغة البصرية أن تأتي من البنية — نصف قطر 14 بكسلًا، وبنفسجي واحد، وسلّم محايدات داكن جدًا، وقدر كبير من ضبط النفس في تحديد متى يتوهج أي شيء.
02 · الفكرة
يجيب في ميلي ثوانٍ، فليقل ذلك في ميلي ثوانٍ
وعد المنتج هو كل إشارة، سطح واحد، صفر تخمين. كان على الموقع أن يبرهن ذلك لا أن يدّعيه، ما يعني أن تكون الواجهة في متناول اليد بالطريقة التي يمدّ بها المهندسون أيديهم فعلًا: لوحة أوامر على ⌘K، وتبويبات تتبدل دون تحميل صفحة، ومفتاح تسعير يجيب عن سؤال بدل فتح نموذج مبيعات.
لوحة المفاتيح أولًا
لوحة أوامر حقيقية بمصيدة تركيز وتنقّل بالأسهم واختصارات أرقام وقفل تمرير — لا صندوق بحث داخل نافذة منبثقة.
أرِ المنتج نفسه
أربعة عشر SVG مضمّنًا تحمل لوحة القيادة والمخططات وكل شعارات العملاء. لا شيء منقَّط.
داكن يبقى مقروءًا
سلّم محايدات من ثلاث درجات، ورمز النص الخافت مثبَّت عند 5.72:1 على الخلفية — موثَّق في ورقة الأنماط.
03 · الأهداف
الموجز، بوصفه قيودًا
أن يبدو كالمنتج
نصف القطر نفسه وظل اللوحات نفسه وسلّم الخط نفسه كما في التطبيق الذي يعلن عنه، فتغدو القفزة من الموقع إلى التجربة غير محسوسة.
بلا صور على الإطلاق
صفر تصوير وصفر أصول نقطية، فتكون الصفحة سريعة على شبكة مؤتمر مزدحمة وحادّة على أي شاشة.
قابل للتشغيل دون فأرة
اللوحة والتبويبات والأكورديون ومفتاح التسعير تُدار كلها من لوحة المفاتيح بحالة ARIA صحيحة.
ألّا يُحاصَر أحد أبدًا
الطبقة العلوية تقفل التمرير وتدوّر التركيز ما دامت مفتوحة، وتعيد التركيز إلى زر الفتح عند إغلاقها.
04 · ترتيب البناء
بُني في عشر وحدات مرقّمة
السكربت منظَّم في عشر كتل مرقّمة داخل IIFE واحدة، كل كتلة مكتفية بذاتها ومحروسة بحيث يصبح العنصر المفقود لا-عملية بدل خطأ يُرمى. تعمل الصفحة بأي مجموعة جزئية منها.
الرموز وسلّم المحايدات
اثنتان وعشرون خاصية مخصصة: خلفية، وسطحان، وصبغة غائرة، وثلاثة أوزان نص، وثلاثة بنفسجيات، وأربعة ألوان حالة.
لوحة قيادة SVG
مرسومة يدويًا في الترميز — الإطار والمحاور والسلاسل وذيل سجلات حي — فتتحجّم وتتلوّن ولا يكلف تنزيلها شيئًا.
التخطيط عند خمس نقاط توقّف
خمسة استعلامات وسائط فقط في 46 KB من CSS؛ فشبكتا البنتو والتسعير
auto-fitولا تحتاجان إلى مساعدة.وحدات التفاعل
حالة الترويسة، وتنقّل الجوال، ومراسٍ بإزاحة، وظهورات، وتوهج البنتو، وعدّادات تصاعدية، وتبويبات التعمّق، ومفتاح التسعير، وأكورديون الأسئلة الشائعة، ونموذج الدعوة.
لوحة الأوامر، أخيرًا
لم تُبنَ إلا بعد أن وُجد كل ما تحتاج الإبحار إليه — ففهرسها هو الصفحة الحقيقية، لا قائمة مثبتة في الكود.
05 · البنية
شكل الشيء
يحاكي الموقع خطّ أنابيب المنتج نفسه، ويقولها صراحة في قسم المنصة. ذلك المخطط SVG مضمّن: كل موصّل يحمل pathLength="100"، فتَرسم خاصيةٌ مخصصة واحدة مقادة بالتمرير الموصّلات الأربعة كلها عبر نوافذ calc(). كتابة واحدة، مخطط واحد.
├── index.html 52.4 KB — 7 أقسام، 14 SVG مضمّنًا، 0 صور
├── styles.css 46.1 KB — 22 خاصية مخصصة، 5 استعلامات وسائط
└── script.js 18.5 KB — 608 سطرًا، 10 وحدات مرقّمة
06 · ما عاندني
مشكلات، وما تغلّب عليها
قفل تمرير الخلفية للّوحة عبر overflow: hidden يزيل شريط التمرير، فتنزاح الصفحة كلها جانبيًا لحظة تنفتح الطبقة العلوية.
قياس عرض شريط التمرير قبل القفل وردّه حشوةً على العنصر نفسه. لا تتحرك الصفحة بكسلًا واحدًا.
لوحة قيادة SVG مرسومة يدويًا يجب أن تبقى مقروءة من 360 px إلى 2560 px، حيث يجعل viewBox الثابت التسميات ذات 7 بكسلات إما غير مقروءة وإما هائلة.
اللوحة مركّبة من عدة SVG صغيرة داخل شبكة CSS بدل واحدة كبيرة، فيتحجّم الإطار ولا يتحجّم الخط — كل مخطط يحفظ نسبته الخاصة وتبقى التسميات بخط المستند.
الإحصاءات التصاعدية كليشيه يكسر إتاحة الوصول أيضًا: يتحرك الرقم مع كل مرور تمرير، وتعلن قارئات الشاشة كل قيمة وسيطة.
كل عدّاد ينطلق مرة واحدة، من مراقب يفكّ مراقبة نفسه، ومع prefers-reduced-motion يطبع القيمة النهائية فورًا بدل التحريك إليها.
التنقل بالمراسي يُهبط الهدف تحت الترويسة اللاصقة، فيصبح العنوان الذي نقرته هو الشيء الوحيد الذي لا تراه.
دالة scrollToTarget() مشتركة تطرح ارتفاع الترويسة المقيس وتنقل التركيز إلى الوجهة، فيصل مستخدمو لوحة المفاتيح والفأرة إلى المكان نفسه.
07 · ما يستحق البقاء
الأجزاء التي تستحق البقاء
⌘K في كل مكان
اقفز إلى أي خدمة أو تتبّع أو لوحة من أي موضع في الصفحة، بمصيدة تركيز حقيقية واختصارات أرقام.
لوحة القيادة المرسومة
الإنتاجية ومعدل الأخطاء وكمون p95 والاستيعاب وذيل سجلات حي — كله ترميز، كله قابل للتلوين، كله حاد عند أي كثافة.
تبويبات التعمّق
التتبّعات والتنبيهات واللوحات تتبدل في مكانها مع aria-selected صحيحة وroving tabindex.
تسعير يجيب
مفتاح شهري/سنوي مع aria-pressed يعيد كتابة الأرقام بدل فتح نموذج تواصل.
ضوء المؤشر
مستمع مؤشر واحد وخاصيتان مخصصتان يضيئان ست بطاقات. معطَّل على المؤشرات الخشنة ومع تقليل الحركة.
لون الحالة، باقتصاد
السماوي والأخضر والكهرماني والأحمر لا توجد إلا حيث يُبلَّغ عن حالة. لا شيء زخرفي يأخذ لون حالة أبدًا.
لوحة الأوامر
اللوحة هي المكوّن الوحيد الصعب فعلًا في الصفحة. عليها أن تقفل تمرير الخلفية دون إزاحة التخطيط، وأن تدوّر Tab داخلها في الاتجاهين، وأن تعيد التركيز إلى ما فتحها، وأن ترشّح قائمة حيًا، وأن تقبل مفاتيح الأرقام اختصارات — وكل ذلك وهي تبقى قابلة للإعلان، أي role="dialog" وaria-modal وحقل إدخال موسوم بدل div منمّق.
- aria-modal
- Focus trap
- Scroll lock
- Live filter
- Number shortcuts
- Focus restore
توهج البنتو
ست بطاقات ميزات تتشارك توهجًا واحدًا يتتبع المؤشر. النسخة الساذجة تعلّق مستمع pointermove على كل بطاقة وتكتب موضع التدرج لكل واحدة — ستة مستمعين وست كتابات في الإطار. بدلًا من ذلك، مستمع واحد على الشبكة يكتب خاصيتين مخصصتين، والبطاقات الست كلها تقرؤهما في radial-gradient. الكلفة واحدة سواء أكانت البطاقات ستًا أم ستين.
- One listener
- Two properties
- radial-gradient
- pointer: fine only
السلّم
الواجهات الداكنة تسقط عند الرمادي الثالث. يستخدم Signalform ثلاثة أوزان نص بالضبط — #E6E8EE و#9CA1B2 و#868B9C — وأخفتها مشروح في ورقة الأنماط بالنسب التي اختير لأجلها: 5.72:1 على الخلفية و5.23:1 على السطح المرتفع. لا شيء أخفت من ذلك موجود في الملف، فلا يوجد شيء أخفت تمتد إليه اليد لاحقًا.
- 3 text weights
- 2 surfaces
- 4 status colours
- WCAG AA verified
08 · شغّله مباشرة
شغّله هنا
البناء الحقيقي، مضمَّن ويعمل — جرّب ⌘K بعد أن يُحمَّل. لا يُجلَب شيء حتى تطلبه.
البناء الحقيقي يعمل داخل الصفحة. المعاينة المباشرة صفحة مضمَّنة؛ اضغط Escape لمغادرتها.
افتح بملء الشاشة ↗
