يزدهر مجال صناعة تصميم واجهات المستخدم مع مرور الأعوام، مما يجعل الطلب المتزايد عليه ينطوي على تحديات جديدة كل مرة.
أنت كمختص في مجال تصميم الواجهات؛ تكون مطالباً بتطوير مهنتك والارتقاء بها لتبقى من المنافسين الأقوياء في السوق.
لذلك نطرح عليك ضمن هذا المقال دليلاً عملياً يساعدك في إنشاء واجهات جذابة للمواقع والتطبيقات.
نتوجه اليوم بكلامنا إلى الاختصاصيين المستعدين للارتقاء بعملهم إلى مكان أكثر إبداعاً وتميزاً. من خلال تجارب خالصة في المجال. اختصرنا فيها سنوات من التجربة والفشل للوصول إلى قواعد ذهبية تختصر عليك الوقت، وتتفادى من خلال تطبيقها الأخطاء التي يمكن أن تواجهك في عملك.
-
القاعدة الأولى:
? إسقاط الإضاءة من الجهة العلوية (مثلما يأتي ضوء الشمس من السماء):
تعتبر ظلال الأشياء كواجهة للإرشادات، حيث تخبرنا مكان العناصر التي ننظر إليها. ربما تكون هذه القاعدة الأهم في تصميم واجهة المستخدم. فعندما يأتي الضوء من الأعلى ينير المساحة السفلية، أما إذا كانت الإضاءة من الأسفل تجعل المظهر العام وكأن الضوء يتوهج من الأسفل؛ لكنك ستحصل على نتيجة كارثية. أليس كذلك؟
يمكننا أن نتخيل الشمس عندما تلقي بأشعتها على قمم الجبال. تكون قمم الجبال ذات لون فاتح، أما القاعدة تكون أغمق بفعل تأثير ظل الجبال.
بالتالي يمكننا استخدام هذا الفن الطبيعي وتطبيقه على واجهتنا المسطحة، وإدخال بعض الظلال على الجوانب السفلية، لتظهر وكأنها ثلاثية الأبعاد.
يمكننا ملاحظة الفرق بين الزر العلوي والسفلي، الزر السفلي المسطح يعطي مظهراً مسطحاً وكأنه مضغوط للداخل. بينما الزر العلوي بسبب بعض الظلال الخفيفة في الأسفل وبعض الإضاءة العلوية يعطي مظهراً ثلاثي الأبعاد، يحاكي بشكله الواقع تماماً.
الاختلاف واضح أيضاً من خلال المقطع العرضي الموضح أعلاه. بالرغم من بساطة ما قمنا به من خلال بعض التأثيرات الضوئية ولكنها أحدثت فرقاً شاسعاً. وهذه كانت قاعدتنا الأولى.
من خلال المثال الثاني يمكنك أن تلاحظ درجة الإشباع الضوئي في كل زاوية، وكلما زادت حدة الضوء انعكس على نظرك. بالتالي الأماكن المظللة أيضاً يمكنك ملاحظتها لتعطي هذا الشكل وكأن الواجهة حقيقية تماماً.
الانحناء العلوي ضمن التصميم وكأنه حافة جبل يلقي ظله على باقي أجزاء التصميم. حتى زر التشغيل الموجود على يمين التصميم يلقي ظلاً خفيفاً ليبدو وكأنه مقعر ليعكس المزيد من الإضاءة. تظهر الرموز ظاهرة إلى الأمام قليلاً، يمكنك ملاحظة السطوع حول العناصر العلوية، مما يجعلها كسطح متلقي للضوء بشكل عمودي. من الناحية العلوية لينعكس على العينين. أما الشقوق الفاصلة بين الرموز تكون بعيدة عن مصدر الضوء وبالتالي تبدو عاتمة أكثر.
-
القاعدة الثانية:
? الأبيض والأسود يأتيان بالمرتبة الأولى.
البدء بالتصميم بإضافة تدرجات اللون الرمادي قبل إضافة الألوان يعطيه لمسات من البساطة مهما كانت درجة تعقيده. مما يجعل التركيز على التباعد وتخطيط العناصر.
بما أن الاتجاه الأكبر الآن إلى تصميم واجهات الهواتف المحمولة. فإن التركيز يكون أكبر، لأنك تعمل على خاصيات سيتم وضعها على شاشة صغيرة. يمكنك استخدام هذه الميزة لصالحك، في المشاكل التي تتجنبها على الشاشات الصغيرة وجعلها قابلة للتطبيق؛ وإن وجدت أي مشكلة يمكنك حلها لجعلها فكرة قابلة للتطبيق على الشاشات الكبيرة.
حسناً هل ما زال الكلام غير مفهوم.. إليك هذا التوضيح:
اعتمد على تصميم أولي يحتوي على ألوان الأسود والأبيض. لأن المشكلة الأكبر تتمثل بجعل التصميم جميلاً وجذاباً وقابلاً للاستخدام من كافة النواحي، من دون الاعتماد على الألوان، إلى ذلك الحين (أي إضافة الألوان). يمكنك اعتماد الألوان الحيادية.
تعد هذه من أفضل الطرق للحفاظ على تصميم واضح وبسيط وخالٍ من التعقيد، لأنك تركز بالأساس على الأحجام والتباعد والتخطيط ضمن التصميم.
بعد الانتهاء من خطوة التصميم والوصول إلى المطلوب. كيف نضيف الألوان؟
أبسط خطوة يمكن القيام بها هي الاعتماد وإضافة لون واحد فقط. لأنه قادر على جذب العين بكل فاعلية.
أما إن أردت أن ترفع سقف التحدي قليلاً يمكنك استخدام تدرج الرمادي مع لونين مختلفين. أو تدرج الرمادي مع ألوان متعددة متدرجة من لون واحد.
بما أنك مختص بتصميم الواجهات عليك التدّرب على معرفة علم الألوان، وطريقة استخدام كل لون..
تفهم الخوارزميات الخاصة بالإنترنت الألوان على شكل رموز سداسية RGB، من المريح معرفة أنه أثناء تصميم الواجهات يمكنك تجاهل هذه الرموز لأنها لا تعطي النتيجة المطلوبة. حيث يمكنك الاعتماد على HSB المرادف ل HSV الذي يشبه HSL.
يعتبر HSB أفضل من RGB، لأنه يحاكي الألوان الطبيعية المناسبة لما اعتدناه. كما يمكنك التلاعب بالتأثيرات من خلال HSB.
من خلال التحكم بقوة اللون وسطوعه والعكس، يمكنك الحصول على أكثر من درجة لونية. ابتداءً من الساطع إلى الأقل سطوعاً لاستخدامها في الخلفيات والإضاءة وطريقة العرض. ولكن نعتقد بأنها لن تكون ملفتة للنظر.
إن كنت تبحث عن تصميم متناسق وغير فوضوي ما عليك سوى استخدام عدة ألوان من واحدة أو أكثر من التدرجات اللونية الأساسية، من أجل إبراز العناصر وتظليلها.
إن كنت ماهراً بتعديل الألوان لتتناسب مع واجهة المستخدم الخاصة بك فهنيئاً لك امتلاكك أهم مهارة يحتاجها أي مصمم.
بعض الملاحظات لمساعدتك على اختيار الألوان خلال تصميم الواجهات:
- تعلم تصميم واجهة المستخدم: وهذا ما نقدمه لك على منصتنا UX بالعربية مع خيرة المدربين، لتختار الدورة التي تناسب مهاراتك وطموحاتك.
- أداة Accessible Color Generator : أداة متميزة لاختيار لون واحد تضعه ضمن شعارك أو الثيمة الخاص بعملك theme، وتحويله إلى لوحة ألوان متكاملة.
- طريقة Dribbble Search-by–color: طريقة رائعة لتحديد الألوان المتناسقة مع بعضها، حتى إن اخترت لوناً تمنحك هذه الطريقة معرفة ما يناسب هذا اللون. هذا الموقع يرتاده أكثر المصممين شهرة. لا تتردد لمعاينة هذا الموقع.
-
القاعدة الثالثة:
? أظهر اللون الأبيض أثناء تصميم واجهة المستخدم:
اجعل واجهة المستخدم الخاصة بك يوجد بها مجال للتنفس والتركيز. القاعدة الثانية تكلمنا عن أهمية التخطيط والتباعد قبل التفكير باختيار اللون، حان الوقت للكلام عن التباعد والتخطيط.
إن كنت تستخدم برمجة html، من المفترض أنك تعلم كيفية عرضها على الصفحة بشكل افتراضي.
جميع التفاصيل على الصفحة تتركز على الجزء العلوي. الخطوط صغيرة جداً لا يوجد مسافة بين الفقرات. وتمتد إلى نهاية الصفحة. سواء كان ذلك 100 بكسل أو 10000بكسل.
طبعاً هذا لا يمت للجاذبية والجمال بأي صلة، أنت بحاجة إلى ترك مسافات وتصميم الواجهات بشكل جذاب أكثر ليكون هناك مجال للبصر أن يكون مرتاحاً.
يمكننا توضيح هذا المفهوم عن طريق واجهة مشغل الموسيقى Piotr Kwiatkowski
يمكنكم الانتباه إلى القائمة الموجودة على اليسار. إن المسافة الموجودة بين العناصر تعادل ضعف ارتفاع النص نفسه. كما استخدموا خط بقياس 12 بكسل وتركوا مسافة في الأعلى والأسفل.
كما تلاحظ بأن كلمة PLAYLISTS تحتوي على مسافة 15 بكسل بين كل حرف والتسطير الخاص بها. وهذا أكثر من الحد المسموح به. ناهيك عن مسافة الـ 25 بكسل الموجودة بين القوائم.
كما يعرض الشريط الجانبي الأيسر مسافات كبيرة بين السطور الموجودة في النص. كان المصمم هنا حريصاً على وضع مساحة، بقدر ما تتعلق هذه الحركة بالجمالية لكنها استطاعت منافسة أفضل الواجهات الموسيقية الموجودة.
الحرص على ترك بعض المساحات الخالية بشكل متناسق، يمكنها جعل أكثر الواجهات فوضوية تظهر بشكل جذاب وجميل.
لذا…..
ضع مسافات بين الأسطر، والعناصر، ومجموعات العناصر التي صممتها.
في الختام
تحدثنا في هذا المقال عن بعض القواعد التي تساعدك على إنشاء واجهة مستخدم جذابة من خلال بعض الحيل البسيطة، مثل إنشاء تصاميم بطريقة معينة لاستقبال الضوء الطبيعي ليرمي بعض الظل على الرموز لتظهر بشكل ثلاثي الأبعاد فقط من خلال التلاعب بالإضاءة وألوان التصميم. بالإضافة إلى قواعد استخدام الألوان المتباينة بطريقة ذكية وغيرها من القواعد التي سنتكلم عنها في مقالنا القادم.
هذا كان الجزء الأول من مقالنا …. سنتحدث في الجزء الثاني عن أربع قواعد أخرى
المراجع: ترجمة -وبتصرّف- للمقال 7 Rules for Creating Gorgeous UI