الظلال المسقطة والتدرجات: كن ثابتًا في الاستعارات البصرية
تعد الظلال المسقطة والتدرجات اللونية من أكثر عناصر التصميم شيوعًا على الويب.
ستجد لهم مصاحبة العديد من الأساليب المختلفة. إنها تأثيرات مفيدة لمصممي الويب لأنها جذابة ومفيدة وسهلة الإنشاء مع أي برنامج رسومات. لكن لديهم جانب مظلم: فهم كثيرًا ما يتعرضون للإساءة .
إن استخدام الظلال أو التدرجات الهادرية يماثل تقريبًا كتابة رسالة قرمزية على قميصك لتخبر العالم أنك مبتدئ أو قرصان. حتى الأخطاء الدقيقة والكادئة يمكن أن تحدث توترات تقوض التصاميم الجميلة والفعالة.
في هذه المقالة ، سنلقي نظرة على ما تفعله الظلال والتدرجات ، سنتحدث عن كيفية استخدامها بشكل فعال وسننظر في بعض الأمثلة على الأخطاء وكيفية إصلاحها.
ماذا تفعل الظلال والتدرجات الظلية؟
وظيفة مصمم الويب هي إنشاء أنماط للون متوهجة الشاشات ثنائية الأبعاد . (هناك بعض الاستثناءات لذلك: يمكن مشاهدة مواقع الويب على سبيل المثال ، شاشة كيندل ، التي لا تتوهج ، ويمكن طباعة مواقع الويب على الورق). هذه الشاشات لا تعكس العالم الحقيقي. انهم ليسوا حتى يشبهوا العالم الحقيقي. لهذا السبب ، ليس لدينا حتمية حقيقية لجعل الأنماط على مواقعنا الإلكترونية تحمل أي علاقة بأشياء في عالم ثلاثي الأبعاد الذي نعيش فيه.
تحتوي أنظمة التشغيل مثل Unix و DOS على واجهة ليست سوى نص ملون على الشاشة. تمتلئ أخرى ، مثل Windows و Mac OS X ، بأوهام الأشياء الحقيقية. على سبيل المثال ، يحتوي نظام OS X على رصيف يشبه طاولة ذات سطح لامع يتراجع في المسافة ، وهو شريط قوائم تجعل حوافه المشطوفة تبدو وكأنها تنتفخ قليلاً ، وأشرطة التمرير التي تبدو وكأنها تحتوي على معينات شفافة.
كل هذه الآثار هي الاستعارات. يعالجون عناصر معينة يمكننا التفاعل معها على الشاشة كما لو أنها كائنات ثلاثية الأبعاد تتفاعل مع مصادر الضوء بالطريقة التي تعمل بها الكائنات في العالم غير الرقمي. من المضحك أن تفعل ، بطريقة ما: كل هذه المصادر والحواف والأشكال الخفيفة هي خيال خالص. لأن الكائنات الموجودة على الشاشة خيالية ، فلماذا يجب أن نربطها بالكائنات الموجودة في العالم الحقيقي؟
ووصل الفضاء يربط بين الخيال وبين عالم نعيش فيه مريحًا.
إن أهم سبب لربطنا بين الأشياء الخيالية وبين الأشياء الواقعية هو أننا خبراء في التفاعل مع الأشياء في عالمنا الثلاثي الأبعاد. لدينا خبرة في التعامل مع الأجسام ثلاثية الأبعاد ، وقد تراكمت لدينا المعرفة بالشفرة البصرية التي تخبرنا عن علاقات الكائنات ببعضها البعض في الفضاء.
يعود ذلك جزئياً إلى أن إنجاز تأويل الضوء لافت للنظر لدرجة أننا نأخذ هذه المتعة في وهم ، أو في خلق مظهر الأشياء. غالبًا ما نكون أكثر تفاعلًا مع لوحات شبيهة بالحياة تشبه الأجسام الشائعة مثل المنازل والتفاح أكثر من الكائنات نفسها. نحن البشر خلقنا رسومات لآلاف السنين التي تهدف إلى تقديم أفكار الأشياء. لا تعتبر المستحضرات الوهمية والجداول على الشاشة سوى المظهر الأحدث لهذا التقليد الطويل.
هناك أكثر من ذلك من المتعة. يمنحنا الشكل والموضع معلومات حول كيفية ارتباط الكائنات ببعضها البعض. على سبيل المثال ، شكل الشكل العمودي الطويل لشريط التمرير في نافذة سفاري ، يخلق الوهم بأنه يجلس "أعلى" أو أقرب لي من العناصر المحيطة به. وهذا يعطي أهمية أكبر في التصميم ، وهو مناسب لأن شريط التمرير هو عنصر واجهة أساسي للتنقل في الصفحة.
الاستعارات البصرية تخلق القدرة على تحملها.
من خلال الظهور ككائن ، يقوم شريط التمرير بإنشاء "متصورة affordance وهذا يعني أنه يربط نفسه عن طريق استعارة بخصائص الأشياء الحقيقية التي تصلح لاستخدامات معينة. على سبيل المثال ، يشير زر مشطوف على صفحة ويب إلى أنه يتيح لك الضغط . يمكننا جعل أي شيء في صفحة قابلة للنقر ، ولكن ربط عنصر قابل للنقر مع صورة شيء يمكن الضغط عليه يوحي بوظائفه بطريقة واضحة وواضحة وحتى ممتعة.
الظلال والتدرجات هي أدوات أساسية لخلق وهم الفضاء.
ظلال الظلال والتدرجات هما أداتان تساعدان في خلق وهم ثلاثية الأبعاد وتقترح العلاقات المكانية للكائنات على الصفحة. عندما يتم عملها بشكل جيد ، تجعل هذه المعلومات ثلاثية الأبعاد التصميم أكثر جمالا وأكثر قابلية للفهم.
في العالم الحقيقي ، يتم إنشاء الظلال المسقطة عندما يقوم كائن بحظر مصدر الضوء من ضرب سطح خلفه . هذا هو أحد الأسباب التي تجعل الناس يقولون أن الظلال تجعل التصاميم ثنائية البعد "البوب": لأنها تجعل الأشياء تبدو وكأنها تلتصق ، أو تطفو فوق ، عناصر أخرى.
تظهر التدرجات عندما يكون جزء واحد من كائن أقرب إلى مصدر للضوء من جزء آخر. ونتيجة لذلك ، يبدو الجزء الأقرب أكثر خفوتًا ، ويظهر الجزء الأطول أكثر قتامة. (تصبح التدرجات أكثر تعقيدًا ، بالطبع ، عندما تتفاعل مصادر الضوء المتعددة أو عندما تكون مصادر الضوء لها ألوان مختلفة.)
لذا ، من خلال تقليد تأثيرات الضوء في العالم الحقيقي ، تقوم الظلال المسقطة والتدرجات بتوصيل معلومات حول الأشياء المجازية ومصادر الضوء الخيالية وعلاقاتها.
كيفية استخدام الظلال والمسقطات بفعالية
هنا أحد الاحتمالات: لا تستخدم الظلال المسقطة أو التدرجات على الإطلاق.
أعني هذا ، على محمل الجد. هذا هو أضمن طريقة لتجنب أخطاء الظل التدريجي ، وينبغي دائما النظر في الخيار.
نظرًا لأن رمي الظلال على الكائنات العشوائية سهل جدًا ، فيمكن أن يكون ذريعة لتجنب حلول أبسط وأفضل للمشاكل. للحصول على أجزاء من النص تحتاج إلى أن تكون أكثر وضوحًا ، على سبيل المثال ، غالباً ما يتجاهل المصممون اللون والحجم والوزن من النوع والعديد من العناصر الأخرى لصالح الظل المسقط.
وبالمثل ، غالباً ما يستخدم المصممون التدرجات لجعل حقل اللون يبدو أقل مللاً ، دون معرفة السبب في أن التركيب العام ليس ديناميكيًا.
إذا كنت تعمل على شركات لموقع ويب ، فقم بحفظ اللمسات ثلاثية الأبعاد مثل الظلال المسقطة والتدرجات للون ، إن أمكن. استخدم التباعد والتنسيب واللون لجعل التصميم فعالًا قبل إضافة الطبقة النهائية من الطلاء. إذا ركزت على جعل تصميماتك تعمل بدون هذه الحيل ، فقد تجد أنك لا تحتاج إليها كثيرًا ، وأن تكون أكثر فاعلية عندما تستخدمها.
قبل أن تسقط في ظل قطرة أو تدرج ، اسأل نفسك ، " هل استعارة ثلاثية الأبعاد ضرورية لهذا التصميم؟" أقوم باستخدامه لإضافة معلومات مفيدة حول الطريقة التي ترتبط بها الكائنات أو كمكون فعال للصوت النهج الجمالي ، أو أنا استخدامه كذريعة؟ "
The Subtler ، الأفضل
بالنسبة إلى الظلال المسقطة ، لا تستخدم إعدادات Photoshop الافتراضية مطلقًا تقريبًا. ظل ظل الإسقاط الافتراضي في Photoshop مظلل جدًا ويتم إرساله إلى الزاوية السفلية اليمنى لكائن ما (مصدر الإضاءة العالمي الافتراضي هو 120 درجة ، في الجزء العلوي الأيسر).
تخبرك الظلال عن الضوء في البيئة الخاصة بك. لنفترض أنك في غرفة مظلمة بدون نوافذ ، وأنك تشغل مصباحًا ضوئيًا. أي شيء تلمسه سوف يلقي بظلال سوداء تقريبًا. ذلك لأن الكائن يحجب الضوء من مصدر الضوء الوحيد ، مما يعني أنه لا يوجد ضوء آخر قادم من أي مكان آخر لسطع تلك المنطقة.
الآن ، لن يكون الظل أسود بالكامل بسبب الضوء المنعكس. بعض الضوء من مصباحك سوف يرتد عن الجدران ويضرب المنطقة المظللة من اتجاه لا يتم حظره بواسطة الكائن. وإذا قمت بتشغيل مصباح في زاوية أخرى من الغرفة ، فإن الظل سوف ينير بشكل كبير. سوف يلقي الكائن بظلال ثاني: سيظهر الظل الجديد حيث يتم حجب الضوء الصادر عن المصباح ولكن سيتم ملؤه بالضوء من المصباح ، بينما ستظل منطقة الظل الأول مسدودة بالضوء الصادر عن المصباح الكهربائي ولكن سوف تملأ بالضوء من المصباح.
عندما نضيف الظلال إلى تصميماتنا ، نقترح بيئة خيالية لصفحتنا على الويب. تشير الظلال الداكنة ذات الحواف الداكنة إلى غرفة مظلمة بها مصدر ضوء واحد. تشير الظلال الخفيفة ذات الحواف الخفيفة إلى غرفة غنية بالضوء المنتشر.
تعتبر الغرفة المضاءة جيدًا أكثر بيئة مريحة للمستخدمين ، لأنها تشبه نوع البيئة التي نستخدم فيها أجهزة الكمبيوتر لدينا: مكتب أو مكتب. ما لم نتعمد تجنب منطقة الراحة ، يجب أن نحضر إعدادات الظل المسقط في Photoshop إلى أسفل من الإعدادات الافتراضية. اجلب التعتيم إلى 30 أو 40٪ أو حتى أقل.
أيضا ، حافظ على الأشياء بسيطة حتى يفهم الناس الاستعارة دون التفكير فيها. مصدر الضوء عند 120 درجة لا معنى له. على سبيل المثال ، يضع نظام التشغيل Mac OS X مصدر الضوء الخاص به في 90 درجة ، أو على التوالي ، مما يبدو أكثر منطقية. أحب أن أجعله أكثر بساطة وأن أضع مصدر الضوء بشكل متعامد مباشرة على الشاشة. للقيام بذلك ، قم فقط بإعداد إعداد المسافة على ظل مسقط إلى الصفر (وهذا يمثل المسافة من الكائن الذي يلقي الظلال المسقط على الكائن أسفله). عند هذه النقطة ، لا يهم الضوء العالمي: إنه ببساطة كما لو أن مصدر إضاءة واسع الانتشار يأتي من خلف المستخدم لإضاءة التصميم.
هذا التأثير شائع جدًا في تصميمات "trompe-l'œil" ، وأكثرها شيوعًا هي صورة الخلفية أو إطار سطح المكتب ، كما لو كان أحدهم ينظر إليها من الأعلى مباشرةً. مخرجو الأفلام مثل ألفريد هيتشكوك ومارتن سكورسيزي و ويس أندرسون توظيف نفس التأثير على توقيعهم اللقطات رؤية الله. هذه التصاميم على شبكة الإنترنت لديها نوع من الفهم دون مجهود ، والحفاظ على الاتساق عبر التصميم يصبح أكثر سهولة بالنسبة للمصمم.
إذا كنت قد قمت بإعداد إعداد المسافة إلى 0 والعاوية إلى حوالي 30٪ ، فأنت في نقطة بداية جيدة للظل المسقط. تلعب مع حجم لتغيير مدى يبدو سطح الكائن من الخلفية التي يجلس عليها. تعيين الحجم إلى 1 بكسل ، على سبيل المثال ، يمنحك تأثيرًا جميلًا غير مرئي تقريبًا ولكنه ممتع تمامًا. مصمم دان سيدرهولم جعلت من آثار صغيرة وبسيطة مثل هذا جزءًا لا يتجزأ من أسلوبه (كما هو موضح في مقالته في A List Apart على " زوايا جبل ").
يمكنك بالتأكيد رفع مستوى التعتيم إذا كان التأثير غير مرئي ، ولكن البدء الدقيق ثم الاتصال به أفضل بكثير من العكس. لا ينبغي أن يكون التأثير هو الأقل عللاً أكثر مما ينبغي.
بالنسبة إلى التدرجات اللونية ، يحتوي Photoshop على الكثير من الافتراضات الفارهة. هذه قد يكون لها بعض الاستخدامات الجيدة ، لكنها بالتأكيد لها استخدامات غير محدودة سيئة ، لذلك التوجيه واضح منها عادة ما يكون حكيما.
بدلاً من ذلك ، حدد التدرج الأسود إلى الأبيض الافتراضي. ثم حدد كل من الأسود والأبيض وجعلهما كلاهما اللون الأساسي لعنصرك. الآن وبعد أن أصبح لديك قاعدة ، اختر إما الجانب المظلم أو الجانب الضوئي واضبطه ليكون أكثر قتامة أو أفتح قليلاً . مرة أخرى ، الطبل ، كان ذلك أفضل . (بعض من أفضل التدرجات التي مررت بها اضطررت إلى التحقق باستخدام أداة القطارة في Photoshop للتأكد من أنهم كانوا هناك على الإطلاق!)
كلما زاد التباين بين الضوء والظلام ، فإن السطح المستدير سوف يظهر. بالنسبة لبعض الأشياء ، مثل قوائم التنقل والأزرار ، فإن بعض الاستدارة مناسبة. ولكن بالنسبة للأشياء التي يجب أن تظهر مسطحة ، حافظ على انخفاض التباين.
وتذكر أن الجانب الأخف يجب أن يواجه اتجاه مصدر الضوء الخاص بك.
هذا النوع من التدرج رائع لأنه يحاكي التدرجات التي نراها من حولنا طوال الوقت. لا شيء في العالم الحقيقي هو حقًا لون واحد ، لأنه دائمًا ما يحتوي على نوع من العلاقة مع مصدر الضوء. انظر بعناية إلى الصفحات الموجودة في كتاب أو في السقف حول مصباحك العلوي: ستجد التدرجات في كل مكان.
أمثلة من الأخطاء وكيفية اصلاحها
تحتوي شبكة الإنترنت على العديد من التدرجات القبيحة ، ولكن لا يتم ذلك عادة من قبل مصممين محترفين. وبدلاً من إظهار أخطاء فاضحة ، سأوضح بعض الطرق التي يمكن للأخطاء الدقيقة أن تحدث توترات في تصميمات ممتازة.
الظلال الموحدة لتداخل الكائنات
تتضمن الكائنات المتداخلة اختلافًا في المسافة التي تفصلها عنك (تحدد جزئيًا بسُمكها). على الرغم من ذلك ، يستخدم المصممون في كثير من الأحيان ظلالًا متساوية للتشابك للكائنات المتداخلة. لذا ، فإن المعلومات التي تنقلها الظلال تتعارض مع المعلومات المنقولة عن طريق التداخل ، مما يقوض من وهم الأبعاد.
رؤية مثل هذه الصراعات تجعلني غير مرتاح ، وكلما ركزت عليها ، كلما زاد رأسي. يجب أن يستمتع المستخدمون بتصميمك ، ولا يشعرون بالألم!
يمكنك قراءة المزيد حول هذه المشكلة في " بناء أفضل انخفاض الظل ، "دليل من Jacci Howard Bear على About.com.
حواف مفاجئة
إن زوايا الظلال الحقيقية لن يكون لها حواف صلبة ما لم يكن لديها أي ضوء منعكس على الإطلاق - وهو وضع غير اعتيادي للغاية. بدلا من ذلك ، يتم تقريب أركانهم عادة بواسطة أشعة الضوء التي تتسلل من حولهم.
هنا ظل مستقطب ذو حافة صلبة غير واقعية:
هذا التصميم الجميل ليس لديه أي خداع في أي مكان في أي مكان إلا أنه يحتوي على ظل قطرة على طول الشريط الجانبي الأيمن. ربما أراد المصمم خفض التسلسل الهرمي للشريط الجانبي على الصفحة ، وهو ما يساعد على تحقيق الخلفية الزرقاء له. ليس فقط أنها مظلمة دون داع ، على الرغم من ذلك ، ولكن الحافة الصلبة غير المنطوقة تحدق الزائر في وجهه.
في الجزء السفلي من الشريط الجانبي ، يمكنك رؤية انتقال مستدير ، حيث أنشأ المصمم تأثيرًا أكثر معقولية. ولكنك تستطيع أن ترى لماذا لم يكررها في الأعلى ، لأنها قد تندفع مع الخط الأفقي النظيف الذي تحدده العناصر العلوية المتناسقة. بدلاً من المطالبة بواقعية هذا الانتقال المستدير ، دعنا نصلحه من خلال خفض الظل إلى أقصى حد ممكن.
هنا ، جعلت من الظل المظلم خفيفاً لدرجة أنه لا يفعل أكثر من مجرد اقتراح أنه يجلس بعيداً. نظرًا لأنه خفيف جدًا ، فإن خط النقل النظيف ليس قبيحًا أو مشتتًا.
ما الذي يحدث وراء هذا الشيء؟
في بعض الأحيان ، يظهر الظلال المكسور بدون سبب واضح ، كما هو الحال مع المربع الأزرق الذي يحيط بشعار W3C أدناه.
لماذا يعود الظل المسقط حتى الآن من الكائن ، ويتم تقريبه؟ كلما حاولت أن أفهم القصة التي يرويها هذا الظل ، كلما ازداد ارتباكي. تخميني هو أن المصمم يريد إعطاء مزيد من الأهمية والوزن للشعار ، والذي يساعد على تحقيقه الظل ، لكنه يعطل الانسجام في الصفحة لدرجة أنه لا يستحق كل هذا العناء.
لا تدع تدرجاتك تقترح مصادر إضاءة مختلفة.
في هذا التصميم الممتاز ل WolframAlpha ، تحتوي الكائنات الموجودة على الصفحة على تدرجات تتراوح من اللون الأبيض إلى البرتقالي الباهت. تكمن المشكلة في أن التدرج في منطقة الرأس يكون أبيض في الجزء العلوي ، مما يدل على الضوء من الأعلى ، في حين أن عناصر الصفحة السفلية لأسفل تكون بيضاء في الأسفل ، مما يدل على الضوء من الأسفل.
يمكنك القول إنني أفكر في هذا ، أن التدرجات لا يجب أن تتوافق مع مصادر الضوء. هذا ممكن ، ولكن التدرجات اللطيفة مثل هذه لها علاقة مجازية متأصلة مع التدرجات التي نراها في العالم الحقيقي. لنغير اتجاه التدرجات إلى أسفل على الصفحة بحيث تشير إلى مصدر ضوء من الأعلى:
ونحصل على وئام مصدر الضوء.
في النهاية ، أنت حر في أن تفعل ما تشاء.
لأن الكائنات على صفحة الويب ترتبط بالكائنات الحقيقية فقط عن طريق الاستعارة ، فعاليتها هي في الأساس ذاتية. الاتصال بين صورة زر وزر فعلي ليس واقعًا بعيدًا عن ذهن المستخدم.
نحن لا نطلب من المصممين أن نجعل استعاراتنا تتفق مع الواقع ، ولكن التفكير المدروس والحذر بشأن مستويات التواصل المتعددة في التصميم يساعدنا على جعل مواقعنا أكثر انسجاما.
كما أن رعايتنا واتساقنا يساعدان في جعل تجربة المستخدم في الموقع مريحة وممتعة.
مكتوبة حصرا ل WDD من قبل نيت النسر . درس الفلسفة في الكلية ، وهو التعليم الذي أعده بشكل مثالي لتصميم وتطوير صفحات الويب ل PBS KIDS. يمكنك قراءة المزيد منه ومن زملائه في برنامج تلفزيوني في Design.PBS .
هل تعتقد أن هذا المستوى من التفصيل مهم عند تصميم الظلال والمسافات؟ هل لديك مضايقات الحيوانات الأليفة الخاصة بك عن كيفية استخدام الظلال والتدرجات اللونية؟