كيف تُتّخذ قرارات تصميم الواجهات

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

هذا السؤال هو قلب تصميم الواجهات. الشاشة ليست صورة؛ إنها سلسلة من القرارات، وكل قرار يجب أن يكون له سبب تستطيع قوله بصوت عالٍ. صوفيا رييس، مصمّمة منتجات رئيسية (principal) في Northwind وهي من تقدّم هذا الكورس، تقولها بصراحة في كل جلسة نقد: «قل لي الـ لأنّ». العنوان أكبر لأنه أول ما يجب أن تقرأه. زر التعليم على اليمين لأن الإبهام الأيمن يستقرّ هناك.

تعرّف إلى Steady

طوال هذا الكورس ستصمّم Steady، تطبيقًا صغيرًا لتتبّع العادات على الهواتف. فيه ثلاث شاشات أساسية ومجموعة components مصغّرة:

• Today: قائمة العادات المستحقّة اليوم، لكل منها خانة اختيار (checkbox) وعدد أيام الاستمرار (streak)، مع ملخّص للتقدّم.
• Habit detail: تقويم بمرّات التسجيل السابقة، والـ streak الحالي، وزر للتعديل.
• New habit: لوحة سفلية (bottom sheet) فيها حقل للاسم، ومنتقي أيقونات، وشرائح (chips) للتكرار، ومفتاح تبديل للتذكير.
• المجموعة (kit): زر، وخانة اختيار، وصف عادة، وشريحة، وحقل نص، وشريط تبويبات (tab bar)، كلها بثيمين فاتح وداكن.

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

كيف يعمل المصمّمون فعلًا

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

الفهم يعني أن تكتب من يستخدم الشاشة وما الذي جاء ليفعله. الهيكلة تعني أن تقرّر ما يوضع على الشاشة وبأيّ ترتيب، وغالبًا تكون مربّعات رمادية. التنسيق يضيف الخط واللون والتفاصيل. الاختبار يعني أن تضع التصميم أمام أشخاص حقيقيين وتفحص إمكانية الوصول (accessibility). التسليم يعني أن تجعله قابلًا للبناء على يد المطوّرين. القسم 1 يغطّي المبادئ وراء الهيكلة والتنسيق؛ والقسم 2 للتخطيط؛ والقسم 3 يحوّل القطع المتكرّرة إلى نظام؛ والقسم 4 يغطّي الاختبار والتسليم.

التجهيز

تحتاج حسابًا على Figma وتطبيق سطح المكتب أو متصفّحًا حديثًا. أنشئ ملف تصميم جديدًا باسم Steady فيه ثلاث صفحات: Screens وKit وScratch. الصفحات تبويبات داخل ملف واحد؛ وإبقاء التجارب في Scratch يمنع تسرّبها إلى العمل الذي ستسلّمه.

يُصدر Figma تحديثات كثيرة. أسماء القوائم في هذا الكورس روجعت مقابل مركز مساعدة Figma وقت الكتابة؛ وإن انتقل أحد الأسماء، فالبحث في مركز المساعدة يجد مكانه الجديد بسرعة.

في الدرس التالي تتعلّم المبادئ الثلاثة التي تحدّد ما إذا كانت الشاشة سهلة القراءة قبل أن يلمسها أي لون: التسلسل البصري (hierarchy) والمحاذاة (alignment) والمسافات (spacing).