التصميم4 دقائق قراءة

أنظمة التصميم تقرر ما لا يجب إضافته

دليل التصميم المفيد يحدّ من الخيارات الزخرفية مع الحفاظ على العمق الكافي لشرح الواجهة.

01

القيود تصنع النظام البصري

يكسب نظام التصميم قيمته بتقليل عدد الخيارات القابلة للتبرير. إذا استطاعت أي شاشة إدخال نصف قطر جديد، أو ظل جديد، أو لون تمييز جديد، أو خطوة تباعد جديدة، يصبح كل قرار محليًا، ويبدو كل واحد منها معقولًا بمفرده، ويتوقف التسلسل الهرمي عن العمل دون أن يقرر أحد ذلك.

لا تُشحن أبدًا الشاشة التي كسرته. إنه ينكسر عبر أربعين شاشة.

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

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

01 مشكلة الواجهة
الحالةهل هذا حي أم في الانتظار
التجميعهل ينتمي هذا معًا
التمييزما الذي أقرأه أولًا
يحصل على واحد بالضبط
02 معالجة، ولا معالجة ثانية
الحالةوسم مملوء
التجميعدرجة سطح
التمييزمقياس النوع

المعالجة ذات المهمتين تتوقف عن أداء أيٍّ منهما بموثوقية.

ويُمنع
03 في كل مكان آخر
ليس للزخرفةليس للتسلسل الهرميليس للمزاج

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

وثّقوا مشكلة الواجهة التي تحلّها المعالجة، ثم امنعوها خارج ذلك الدور.

02

الأسطح تبقى شبه مسطحة

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

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

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

الاختبار هو هل توضّح المعالجة التجميع أو التفاعل. لا هل تبدو الشاشة منتهية.

03

للوسوم والأيقونات أدوار

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

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

ألوان الوسوم الخمسة المستخدمة عبر هذا الموقع، ولكل منها المهمة الواحدة المسموح بها. العيّنة هي القاعدة: إذا كسب لون منها صفًا ثانيًا في هذا الجدول، يكون قد توقف عن كونه إشارة.

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

لون الحالة يعزز الكلمة؛ لا يحل محلها. مسودة، ومجدولة، ومنشورة، ومؤرشفة تحمل معنى تشغيليًا يجب أن ينجو من قارئ لا يستطيع تمييز الألوان، وتحتاج اللوحة قاعدة لما يحدث حين يقع وسم حالة بجانب تحذير وحالة محددة في آن.

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

يجب أن تكون الأيقونات الزخرفية نادرة. إنها تستهلك الانتباه ولا تُعيد شيئًا.

04

التبسيط قد يُزيل المعنى

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

البرمجيات الإدارية تحمل حالات ذات عواقب وتبعيات واستثناءات. تنظيم ذلك هو مهمة التصميم. إخفاؤه ليس كذلك.

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

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

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

ContentFlow

تابعوا القراءة

المقالات الثلاث الأخرى.