أبيض وأسود: نظام تصميم مصمم للتركيز

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

لماذا قمنا بإزالة اللون عن قصد

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

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

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

الخلاصة: **إذا كنت تستخدم اللون لإصلاح مشكلة التسلسل الهرمي، فإن لديك مشكلة تسلسل هرمي، وليس مشكلة لون. ** يرفض اللون الأحادي السماح لك بالتغطية عليه.

التسلسل الهرمي بدون لون: ثلاث رافعات

مع وجود اللون بعيدًا عن الطاولة، تقوم ثلاث رافعات بكل العمل.

مقياس الكتابة. نقوم بتشغيل مقياس معياري بقفزات واضحة، وليس بتدرج مستمر للأحجام. الخطوات التي تكون قريبة جدًا تُقرأ على أنها ضوضاء ؛ العين تحتاج إلى رتبة لا لبس فيها. مقياس العمل لدينا هو تقريبًا 12 / 14 / 16 / 20 / 28 / 40 / 64 بكسل. يقع النص الأساسي في المرتبة 16، والبيانات الوصفية الثانوية في المرتبة 14، وكل شيء فوق 20 هو هيكلي. إذا كان هناك شيئين يحتاجان إلى الشعور بالاختلاف في الأهمية، فإنهما يحصلان على خطوات مختلفة، وليس نفس الخطوة أبدًا في درجتين من اللون الرمادي.

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

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

التباين هو نظام، وليس شعورا

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

--ink-000: #000000   /* primary text, headings */
--ink-700: #3d3d3d   /* body on light, secondary headings */
--ink-500: #6b6b6b   /* metadata, captions, disabled-adjacent */
--ink-300: #b0b0b0   /* borders, dividers, placeholder */
--ink-100: #e6e6e6   /* subtle fills, hover backgrounds */
--paper:   #ffffff   /* base surface */

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

يتم مسح النص بنسبة 4.5:1، ويتم مسح البنية بنسبة 3:1

يتم فحص كل اقتران للنص على السطح وفقًا لنسب تباين WCAG قبل شحنه. يصل معدل --ink-500 على --paper إلى حوالي 5.7:1، متجاوزًا بشكل مريح عتبة 4.5:1 للنص الأساسي. يفشل --ink-300 كنص، وبالتالي يُسمح به فقط للحدود والفواصل، حيث يتم تطبيق الحد غير النصي 3:1. إن تشفير القاعدة في الاستخدامات المسموح بها للرمز المميز، وليس قيمته فقط، هو ما يجعلها ثابتة.

أرباح إمكانية الوصول

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

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

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

كيف يسرع القيد القرارات

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

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

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

القواعد التي يمكنك اعتمادها غدا

إذا كنت تريد تجربة ذلك دون إعادة بناء كل شيء:

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

الفكر الختامي

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