Signalform بيع البرمجيات بالبرمجيات

01 · نظرة عامّة

بيع البرمجيات بالبرمجيات

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

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

02 · الفكرة

أجب بالمللي ثانية، وقل ذلك بالمللي ثانية

تخيّلت في هذا المفهوم أنّ Signalform شركة وعدها: كل إشارة على سطح واحد، بلا تخمين. وكان على الموقع أن يُظهر ذلك لا أن يدّعيه، ما يعني أن تكون الواجهة قابلة للبلوغ بالطريقة التي يمدّ بها المهندسون أيديهم فعلًا: لوحة أوامر على ⌘K، وتبويبات تتبدّل بلا تحميل صفحة، ومفتاح تسعير يجيب عن سؤال بدل أن يفتح نموذج مبيعات.

ونتجت عن ذلك ثلاثة قرارات، وبقيّة العمل هي هذه الثلاثة مطبَّقة في كل مكان.

• لوحة المفاتيح أولًا

  لوحة أوامر حقيقية — التركيز محتجَز داخلها ما دامت مفتوحة، وتنقّل بمفاتيح الأسهم، واختصارات رقمية، وقفل تمرير — لا صندوق بحث مُلقًى في نافذة منبثقة.

• اعرض المنتج

  أربعة عشر رسم SVG مضمّنًا تحمل لوحة التحكّم والرسوم البيانية وكل شعار عميل. لا شيء في الصفحة نقطي، ولا ملفات صور تُطلَب.

• داكن يبقى مقروءًا

  سلّم محايد بثلاث درجات، رمز النصّ الأخفت فيه مثبَّت عند 5.72:1 على الخلفية و5.23:1 على الألواح، والنسبتان مكتوبتان في ملف الأنماط إلى جانب القيمة.

03 · الأهداف

الموجز، بوصفه قيودًا

1. أن يبدو كالمنتج

   نصف القطر نفسه، وظلّ اللوح نفسه، وسلّم الحروف نفسه كالتطبيق الذي يعلن عنه، فلا تبدو الخطوة من الموقع إلى التجربة تغييرَ عنوان.

2. ألّا يُرسَل أي صورة

   صفر تصوير وصفر أصول نقطية، فتكون الصفحة سريعة على واي فاي المؤتمرات، وحادّة على أي شاشة وبأي تكبير.

3. أن يكون قابلًا للتشغيل بلا فأرة

   لوحة الأوامر، وتبويبات التعمّق، وقائمة الأسئلة المنسدلة، ومفتاح التسعير، كلّها مقادة من لوحة المفاتيح، وكلٌّ منها يحمل حالة ARIA التي تطابق ما يفعله فعلًا.

4. ألّا يُحبَس أحد أبدًا

   الطبقة تقفل تمرير الخلفية وتُدير التركيز في دورة ما دامت مفتوحة، وتعيد التركيز إلى المُطلِق لحظة إغلاقها.

04 · ترتيب البناء

مبنيّ في عشر وحدات مرقّمة

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

1. الرموز والسلّم المحايد

   اثنتان وعشرون custom property: خلفية، وسطحان، ودرجة غائرة، وثلاثة أوزان نصّ، وثلاثة بنفسجيات، وأربعة ألوان حالة، مع إبقاء نسب التباين في تعليقات إلى جانب القيم التي احتاجت فحصًا.

2. لوحة التحكّم المرسومة

   الإطار، والمحاور، والسلاسل، وذيل السجلّات، مكتوبة باليد داخل الوسوم لا مُصدَّرة، فتتّسع اللوحة وتتبع الرموز ولا تكلّف تنزيلًا.

3. تخطيط عند خمس نقاط انكسار

   خمسة media queries عبر 45.9 ك.ب من CSS. وشبكتا المزايا والأسعار auto-fit، فتتدفّقان دون أن يُطلَب منهما ذلك.

4. وحدات التفاعل

   حالة الترويسة، والتنقّل على الجوال، والمراسي المزاحة، والظهور عند التمرير، وضوء المؤشّر في شبكة المزايا، والعدّ التصاعدي، وتبويبات التعمّق، ومفتاح التسعير، وقائمة الأسئلة المنسدلة، والنموذج الختامي.

5. لوحة الأوامر، أخيرًا

   بُنيت فقط بعد أن صار كل ما تنتقل إليه موجودًا، ففهرسها هو الصفحة الحقيقية لا قائمة مثبّتة كانت ستنحرف أول مرّة يتحرّك فيها قسم.

05 · البنية

شكل الشيء

الموقع يحاكي خطّ أنابيب المنتج نفسه ويقول ذلك صراحةً في قسم المنصّة. وذلك المخطّط SVG مضمّن، وكل موصّل فيه يعلن pathLength بقيمة 100، فترسم custom property واحدة يقودها التمرير الأربعةَ جميعًا عبر نوافذ calc(). كتابة واحدة في الإطار، ومخطّط واحد.

وهو أثقل العشرة عند 118.4 ك.ب عبر ثلاثة ملفات، ومع ذلك بلا مُجمِّع وبلا اعتمادية وبلا خطوة بناء. والمتصفّح بيئة التشغيل الوحيدة التي احتاجها يومًا.

06 · ما الذي قاوم

مشكلات، وما تغلّب عليها

1. التحدّي

   قفل تمرير الخلفية للوحة الأوامر بـ overflow: hidden يزيل شريط التمرير، فتقفز الصفحة كلّها جانبًا لحظة فتح الطبقة.

   الحلّ

   قِس عرض شريط التمرير قبل القفل وأعِده حشوةً على العنصر نفسه. فلا تتحرّك الصفحة بكسلًا واحدًا، فتحًا ولا إغلاقًا.

2. التحدّي

   لوحة التحكّم المرسومة باليد عليها أن تبقى مقروءة من 360 بكسلًا إلى 2560، وviewBox ثابت واحد يجعل تسميات بسبعة بكسلات إمّا غير مقروءة وإمّا ضخمة، بحسب أي الطرفين أنت فيه.

   الحلّ

   اللوحة عدّة رسوم SVG صغيرة داخل شبكة CSS لا رسمًا واحدًا كبيرًا. الإطار يتّسع، والحرف لا: كل رسم بياني يحتفظ بنسبته، وكل تسمية تبقى بحرف المستند.

3. التحدّي

   إحصاءات العدّ التصاعدي كليشيه يكسر سهولة الوصول أيضًا — الرقم يبدأ من جديد عند كل مرور تمرير، والتقنيات المساعدة تعلن كل قيمة وسيطة في الطريق.

   الحلّ

   كل عدّاد يعمل مرّة واحدة، من مراقب يلغي مراقبته لنفسه، وتحت prefers-reduced-motion يطبع القيمة النهائية فورًا بدل التحرّك نحوها.

4. التحدّي

   التنقّل بالمراسي يُحطّ الهدف تحت الترويسة اللاصقة، فيكون العنوان الذي نقرت عليه للتوّ هو الشيء الوحيد الذي لا تراه.

   الحلّ

   دالة scrollToTarget() مشتركة تطرح ارتفاع الترويسة المقيس وتنقل التركيز إلى الوجهة، فيصل مستخدمو لوحة المفاتيح والمؤشّر إلى المكان نفسه لا إلى مكانين.

07 · ما يستحقّ البقاء

الأجزاء التي تستحقّ البقاء

• ⌘K من أي مكان

  انتقل إلى أي خدمة أو تتبّع أو لوحة من أي نقطة في الصفحة، بمصيدة تركيز حقيقية ومفاتيح أسهم واختصارات رقمية.

• لوحة التحكّم المرسومة

  الإنتاجية، ومعدّل الأخطاء، وزمن استجابة p95، والاستيعاب، وذيل سجلّات يتمرّر — كلّها وسوم، وكلّها تتبع رموز الصفحة، وكلّها حادّة عند أي كثافة بكسل.

• تبويبات التعمّق

  التتبّعات والتنبيهات واللوحات تتبادل في مكانها مع إبقاء aria-selected صحيحًا وtabindex متنقّل، فيكون شريط التبويبات محطّةً واحدة لا ثلاثًا.

• تسعير يجيب

  مفتاح شهري وسنوي يحمل aria-pressed ويعيد كتابة الأرقام في مكانها، بدل زرّ يفتح نموذج تواصل.

• ضوء المؤشّر

  مستمع مؤشّر واحد وcustom property اثنتان تُضيئان ستّ بطاقات. ومُطفَأ على المؤشّرات الخشنة وتحت تقليل الحركة.

• لون الحالة، باقتصاد

  السماوي والأخضر والكهرماني والأحمر لا توجد إلّا حيث يُبلَّغ عن حالة. ولا يُسمح لأي شيء زخرفي في الصفحة باستعارة لون حالة أبدًا.

08 · شغّله حيًّا

شغّله هنا

العمل الحقيقي، مضمّنًا ويعمل — جرّب ⌘K حالما يُحمَّل. لا يُجلَب منه شيء حتى تطلب، فتبقى الصفحة التي تقرأها خفيفةً كما تبدو.

signalform.dev

شغّله هنا

العمل الحقيقي، يعمل داخل الصفحة. المعاينة الحيّة صفحة مضمّنة. اضغط Escape لمغادرتها.

افتحه بملء الشاشة