افتح أغلب تطبيقات تتبّع العادات وستجد الشيء نفسه قرب أعلى الشاشة: قائمة بعادات اليوم، ولكل عادة طريقة كبيرة وواضحة لتعليمها كمنجزة. ليس السبب أن المصمّمين ينسخون بعضهم. السبب أنهم جميعًا سألوا السؤال نفسه أولًا: ما الذي يحتاج من يفتح هذا التطبيق أن يفعله في الثواني الخمس القادمة؟
\nهذا السؤال هو قلب تصميم الواجهات. الشاشة ليست صورة؛ إنها سلسلة من القرارات، وكل قرار يجب أن يكون له سبب تستطيع قوله بصوت عالٍ. صوفيا رييس، مصمّمة منتجات رئيسية (principal) في Northwind وهي من تقدّم هذا الكورس، تقولها بصراحة في كل جلسة نقد: «قل لي الـ لأنّ». العنوان أكبر لأنه أول ما يجب أن تقرأه. زر التعليم على اليمين لأن الإبهام الأيمن يستقرّ هناك.
\nطوال هذا الكورس ستصمّم Steady، تطبيقًا صغيرًا لتتبّع العادات على الهواتف. فيه ثلاث شاشات أساسية ومجموعة components مصغّرة:
\nمهمّة المستخدم في شاشة Today سهلة الصياغة: أن يعلّم عادة كمنجزة في ثوانٍ، ثم يضع الهاتف جانبًا. أبقِ هذه الجملة قريبة منك. حين تجادل نفسك حول ما إذا كان شريط الاقتباس أو الرسم البياني الكبير أو الترويسة المزخرفة يستحق مكانًا في الأعلى، هذه الجملة تحسم الأمر.
\nالعمل التصميمي الحقيقي دورة متكرّرة، لا خطّ مستقيم. ستمرّ بها مرّات كثيرة في هذا الكورس، وكثيرًا ما ستعود خطوة إلى الوراء حين يغيّر شيء تعلّمته لاحقًا اختيارًا سابقًا.
\nالفهم يعني أن تكتب من يستخدم الشاشة وما الذي جاء ليفعله. الهيكلة تعني أن تقرّر ما يوضع على الشاشة وبأيّ ترتيب، وغالبًا تكون مربّعات رمادية. التنسيق يضيف الخط واللون والتفاصيل. الاختبار يعني أن تضع التصميم أمام أشخاص حقيقيين وتفحص إمكانية الوصول (accessibility). التسليم يعني أن تجعله قابلًا للبناء على يد المطوّرين. القسم 1 يغطّي المبادئ وراء الهيكلة والتنسيق؛ والقسم 2 للتخطيط؛ والقسم 3 يحوّل القطع المتكرّرة إلى نظام؛ والقسم 4 يغطّي الاختبار والتسليم.
\n\nتحتاج حسابًا على Figma وتطبيق سطح المكتب أو متصفّحًا حديثًا. أنشئ ملف تصميم جديدًا باسم Steady فيه ثلاث صفحات: Screens وKit وScratch. الصفحات تبويبات داخل ملف واحد؛ وإبقاء التجارب في Scratch يمنع تسرّبها إلى العمل الذي ستسلّمه.
يُصدر Figma تحديثات كثيرة. أسماء القوائم في هذا الكورس روجعت مقابل مركز مساعدة Figma وقت الكتابة؛ وإن انتقل أحد الأسماء، فالبحث في مركز المساعدة يجد مكانه الجديد بسرعة.
\nفي الدرس التالي تتعلّم المبادئ الثلاثة التي تحدّد ما إذا كانت الشاشة سهلة القراءة قبل أن يلمسها أي لون: التسلسل البصري (hierarchy) والمحاذاة (alignment) والمسافات (spacing).
\n","toc":[{"id":"sec-1","text":"تعرّف إلى Steady","level":2},{"id":"sec-2","text":"كيف يعمل المصمّمون فعلًا","level":2},{"id":"sec-3","text":"التجهيز","level":2}],"takeaways":["تصميم الواجهة سلسلة من القرارات، وكل قرار يجب أن يكون له سبب تستطيع قوله بصوت عالٍ.","ابدأ من مهمّة المستخدم ومن أهم إجراء واحد في الشاشة، لا من الألوان أو الخطوط.","يعمل المصمّمون في دورة متكرّرة من الفهم ثم الهيكلة ثم التنسيق ثم الاختبار ثم التسليم، ويعودون إلى خطوات سابقة كلما تعلّموا شيئًا جديدًا.","شاشة Today في Steady موجودة ليستطيع المستخدم تعليم عادة كمنجزة في ثوانٍ، وهذا الهدف يحسم معظم الخلافات حول التخطيط."],"further":[{"title":"What is Figma?","url":"https://help.figma.com/hc/en-us/articles/14563969806359-Figma-Design-for-beginners"},{"title":"Compare Figma plans and features","url":"https://help.figma.com/hc/en-us/articles/360040328273-Figma-plans-and-features"}],"quiz":[{"q":"يقول زميلك إن شاشة Today «تبدو فارغة» ويريد إضافة شريط باقتباس تحفيزي في أعلاها. ما أقوى ردّ أوّلي؟
","options":[{"text":"توافقه، لأن المساحة الفارغة تجعل التطبيق يبدو غير مكتمل.","why":"المساحة البيضاء ليست عيبًا. ملؤها دون سبب يدفع المهمّة الأساسية عادةً إلى أسفل الشاشة."},{"text":"تسأله عن المهمّة التي يؤدّيها هذا الشريط لشخص يحاول تعليم عادة كمنجزة.","why":"صحيح. ربط التغيير بهدف المستخدم يحوّل نقاشًا حول الذوق إلى قرار يمكنك اختباره."},{"text":"تضيفه، لكن تجعل الاقتباس أصغر من أسماء العادات.","why":"تصغيره ما زال قرارًا بلا سبب. السؤال الحقيقي هو هل يخدم المهمّة الرئيسية للشاشة أصلًا."},{"text":"ترفضه، لأن المصمّمين هم أصحاب القرار في التخطيط.","why":"الملكية ليست سببًا. النقد الجيد يجيب بهدف المستخدم، لا بالمسمّيات الوظيفية."}],"answer":1},{"q":"أيّ ترتيب يطابق الطريقة التي يبني بها معظم المصمّمين شاشة جديدة؟
","options":[{"text":"اختيار ألوان العلامة التجارية، ثم الخطوط، ثم تحديد ما يوضع على الشاشة.","why":"البدء بالتنسيق يثبّت قرارات قبل أن تعرف ما يحتاجه المحتوى."},{"text":"بناء الـ components، ثم نشر مكتبة، ثم رسم الشاشات.","why":"المكتبة تنشأ من أنماط متكرّرة وجدتها فعلًا في شاشات حقيقية، لا قبلها."},{"text":"صنع الحركات في الـ prototype أولًا، ثم ملء التخطيط.","why":"الحركة هي الطبقة الأخيرة. تحريك تخطيط سيتغيّر هدر للجهد."},{"text":"توضيح مهمّة المستخدم، ثم رسم الهيكل، ثم تطبيق الخط واللون والتفاصيل.","why":"صحيح. الهيكل قبل التنسيق يُبقي المحتوى المهم هو المتحكّم في التخطيط."}],"answer":3},{"q":"لماذا تصرّ صوفيا على أن يأتي كل قرار تصميمي ومعه «لأنّ»؟
","options":[{"text":"الأسباب تتيح لك الدفاع عن الاختيار واختباره ومراجعته حين يتغيّر السياق.","why":"صحيح. سبب مثل «لأن الإبهام يصل إلى أسفل الشاشة» يمكن التحقّق منه، أما «لأنه يبدو جميلًا» فلا."},{"text":"المطوّرون يرفضون بناء أي شيء ليس له مبرّر مكتوب.","why":"المطوّرون يريدون مواصفات واضحة، لكن السبب مهم للتصميم نفسه، لا كإجراء شكلي عند التسليم."},{"text":"يشترط Figma وصفًا على كل طبقة قبل أن تتمكّن من مشاركة الملف.","why":"لا يوجد شرط كهذا في Figma. الأسباب تعيش في تفكيرك وفي جلسات النقد والملاحظات التوضيحية."}],"answer":0}],"exercise":null,"words":547,"readMinutes":3}