الخريطة الباب ٣: الهوية البصرية
الاتساقConsistency
ما يتشابه في الوظيفة يتشابه في الشكل.
الاتساق يعني أن ما يتشابه في الوظيفة يتشابه في الشكل. زر أساسي هنا يشبه الزر الأساسي هناك، وزوايا البطاقات بنفس الاستدارة، والأيقونات من نفس العائلة. المستخدم يتعلم واجهتك مرة واحدة، ثم يتوقع. وكل خروج عن التوقع يكلّفه لحظة تفكير — ويكلّفك قليلاً من ثقته.
زوايا بنفس الروح
صورة دائرية بجانب زر حاد الزوايا، وبطاقة ثالثة بصورة مربعة… كل قرار منفرد قد يبدو مقبولاً، لكن مجتمعة تجعل التصميم يبدو مجمّعاً من مصادر مختلفة. اختر لغة شكلية — مستديرة أو حادة — وطبّقها على الصور والأزرار والبطاقات.
ألوان الأزرار لغة، لا زينة
إعطاء كل بطاقة لون زر يناسب صورتها يبدو إبداعياً، لكنه يربك المستخدم: هل لكل لون وظيفة مختلفة؟ اجعل للأزرار نظاماً ثابتاً — مثلاً داكن للإجراء الأساسي ورمادي فاتح للثانوي — في كل بطاقة وكل شاشة.
عائلة أيقونات واحدة
خلط أيقونات مُفرغة بأخرى ممتلئة، أو أحجام وسماكات مختلفة، يجعل القائمة تبدو غير متقنة. اختر مكتبة واحدة وأسلوباً واحداً والتزم به. الاستثناء المقبول: حين يحمل التغيير معنى — مثل أيقونة ممتلئة للتبويب المحدد في شريط التنقل.
ثلاث بطاقات بنصوص مختلفة الطول. أي نسخة تبدو أكثر ترتيباً؟
أيقونة واحدة في هذه القائمة لا تنتمي لعائلة البقية. انقر عليها.
وضع التفتيش: مرّر على عناصر التصميم وانقر على موضع الخطأ — أو تنقّل بـ Tab واضغط Enter.
وحّد لغة البطاقات الثلاث: نفس استدارة الصور والأزرار، ونظام ألوان واحد للأزرار.
لغة واحدة؟✗
الخصائص
اختبر نفسك
١. لماذا يقلل الاتساق العبء على المستخدم؟
٢. متى يكون خلط أيقونات مُفرغة وممتلئة مقبولاً؟
٣. بطاقات بنصوص مختلفة الطول — كيف تبقيها منتظمة؟