الخريطة الباب ٣: الهوية البصرية
العمق والملمسDepth & texture
ظلال وطبقات تخبر المستخدم ما يمكن لمسه.
الشاشة مسطحة، لكن العين تبحث عن العمق: ما الذي فوق ماذا؟ ما الذي يمكن لمسه؟ الظلال والطبقات والإطارات وألوان الخلفيات تجيب عن هذه الأسئلة بصمت. والسر في الاعتدال — عمق خفيف يرتب الواجهة، وعمق مبالغ فيه يجعلها ثقيلة وقديمة.
الظل يقول: أنا فوق
القائمة المنسدلة بلا ظل تذوب في محتوى الصفحة خلفها، فلا يعرف المستخدم أين تنتهي. ظل ناعم واحد يرفعها فوق الصفحة ويفصلها، فتتركز العين على خياراتها. نفس المنطق ينطبق على النوافذ المنبثقة والتلميحات والعناصر العائمة فوق الخرائط والصور.
ظلال ناعمة بلون الخلفية
الظل القاسي — قريب وداكن وحاد — يبدو كملصق قديم. الظل الجيد بعيد قليلاً، واسع الانتشار، خفيف الشفافية. وهذه نصيحة يجهلها كثيرون: لا تستخدم ظلاً رمادياً على خلفية ملونة؛ لوّن الظل بدرجة من لون الخلفية فيبدو طبيعياً كأنه ظل حقيقي.
كل مكوّن نختاره بعناية لأجل بشرتك.
اعرف المزيدكل مكوّن نختاره بعناية لأجل بشرتك.
اعرف المزيدعناصر عائمة فوق خريطة متغيرة. أي نسخة تجعلها أوضح؟
الإطارات رفيعة وفاتحة — أو لا تكون
الإطارات وألوان الخلفيات تصنع عمقاً هادئاً: بطاقات بيضاء على خلفية رمادية فاتحة، أو خط رفيع يفصل الصفوف. لكن الإطارات السميكة الداكنة حول كل شيء تجعل الواجهة مزدحمة وقديمة، وتصرخ أعلى من البيانات نفسها. القاعدة: أقل ما يكفي للفصل، وغالباً الفراغ وحده يكفي.
بطاقة واحدة تستخدم ظلاً من عالم آخر. انقر عليها.
وضع التفتيش: مرّر على عناصر التصميم وانقر على موضع الخطأ — أو تنقّل بـ Tab واضغط Enter.
هذا الظل قاسٍ. اضبطه ليصبح ناعماً: انتشار واسع، شفافية خفيفة، وإزاحة معتدلة للأسفل.
كل مكوّن نختاره بعناية لأجل بشرتك.
اعرف المزيدbox-shadow0 4px 4px · 80%
الخصائص
اختبر نفسك
١. ما لون الظل الأنسب لبطاقة على خلفية بنفسجية فاتحة؟
٢. أي العناصر يستفيد أكثر من الظل؟
٣. ما المشكلة في الإطارات السميكة الداكنة حول كل قسم؟