البحث في الموقع

بمجرد حصولي على ساعة آبل Apple Watch، كنت قد رسلت للجميع رموزًا تعبيرية منذ اليوم الأول، لقد كنت مسحورًا بها. شعرت أيضًا بالإلهام كمصمم. لم أصمم من قبل لشاشات صغيرة جدًا، وقد جذبتني فكرة صنع شيء في مساحة تملك مجموعة فريدة من الحدود والميزات. قررت صنع تطبيق لساعة آبل كمشروع ثانوي، و كنقطة انتقال لتصميمي. نظرت لتطبيق الهاتف الذي استعمله لمراقبة استهلاك الكهرباء الخاص بي ودفع فاتورة البلدية الشهرية، بدى كأن بعض ميزات هذا التطبيق بإمكانها بالفعل أن تعمل بشكل جيد على الساعة. مقارنة استهلاك الأشهر، وإضافة دفعات، ومهام أخرى تُعرض بسهولة على الهاتف أو الجهاز اللوحي قد تشكل تحديًا مثيرًا عند عرضها على الساعة. وها هي نظرة عن قرب على أول محاولاتي في صنع نموذج لشاشة صغيرة جدًا. معالجة الوحش الصغير جدًا إن قمت من قبل بتصميم تطبيق iOS أو Android، فقد لاحظتَ بأنه من المهم تذكر تركيبهم المعروف وأخذه بالحسبان. مثلًا: علامات التبويب في الأعلى بالنسبة لـAndroid وفي الأسفل بالنسبة لـiOS. هكذا يتوقع المستخدمون أن يجدوهم. لا يمكنك إعادة صنع تطبيق هاتف محمول لساعة آبل. يجب أن يكون تطبيق الساعة امتدادًا لتطبيق الهاتف، كصديقٍ صغير الشاشة يساعد في تحسين تجربة الهاتف. مثل iOS و Android، ساعة آبل لديها نوعها الخاص من اللغة البصرية وطرقها التي يفترض على المستخدم أن يجربها. أردتُ أن أكون صادقًا بتجربة ساعة آبل، لذلك قرأت بعناية عبر مستندات تصميم آبل. أردت أن أعرف أي نوع من الانتقالات والتحكمات كانت تتميز بها ساعة آبل، وكل النواحي التقنية التي أحتاج لمعرفتها. خلال بحثي، اكتشفت بأن شركة آبل لديها انتقالات وأنماط تنسيق معينة ومصممة لمنصة الساعة. تمّ تصميم الأنماط مع التفكير المعمق في السيناريوهات التي سوف تستخدم فيها. تفصيل سريع: اللمحات السريعة: مجموعات قابلة للتصفح من اللحظات الوقتية والسياقية من التطبيقات المفضلة للمستخدم. نظرات قصيرة: إشعارات تظهر بشكل سريع وتعطي المستخدم وقتًا كافيًا لرؤية عن ماذا يدور الإشعار وأي تطبيق قام بإرساله. نظرات طويلة: تزوّد تفاصيل أكثر عن إشعار قادم. تظهر النظرة الطويلة عندما يبقى معصم المستخدم مرفوعًا أو عندما ينقر المستخدم على النظرة القصيرة. الانتقال القائم على الصفحة في مواجهة الانتقال الهرمي: يعتمد الانتقال القائم على الصفحة على السحب أو التحريك بشكل أفقي خلال الصفحات. لديه نفس السلسلة الأفقية من النقاط التي تراها في أسفل الصفحة الرئيسية في هاتف iPhone. أما الانتقال الهرمي فهو طريقة للنزول للأسفل للوصول للمعلومات. نقرك على عنصر قائمة رئيسية يأخذك للصفحة التالية. هنالك الكثير من الفروق البسيطة بين هذه التراكيب: اللمحة السريعة، والنظرة القصيرة، والنظرة الطويلة، والانتقال الهرمي والانتقال الأفقي. ومثل الهاتف المحمول، هنالك لحظات حيث تكون كل من هذه التراكيب مناسبةً، وإن استخدمتها في السياق المناسب فسوف يتعامل معها المستخدم بسهولة وبشكل بديهي. خلال محاولة فهم كيفية الانتقال في الأجهزة القابلة للارتداء، نصيحتي لك كالتالي: لا تقم بإعادة اختراع العجلة! أي لا تقم بمحاولة التصميم من الصفر. هذه الأنواع من الانتقالات وشاشات البيانات تم تصميمها لسيناريوهات معينة. اكتشف كيف بإمكانها التعامل مع المعلومات التي تحتاج أن توصلها للمستخدم. البحث بمجرد وصولي للفهم الأساسي لكيفية عرض ساعة آبل للمعلومات، بدأت التجريب بكيف يمكن تصوير او تجسيد البيانات في السيناريوهات المعروفة. على سبيل المثال، أي نوع من المعلومات يتم تجاهلها، بالمقابل أي المعلومات يتم ملاحظتها؟ لقد أضفت العديد من تطبيقات الساعة لكي أستطيع العبث بها ورؤية كيف قام الآخرون بحل مزايا الانتقال من الهاتف المحمول للصيغة الجديدة على الساعة. الجولة الأولى اعتقدت بالبداية بأنني أريد أن أصنع انتقالًا هرميًّا، باعتباره الطريقة التي وُضع فيها تطبيق الهاتف المحمول. وبالرغم من أنه ساهم في عمل تطبيق متكامل، أدركت بأنه لم يكن يعمل بالطريقة التي أردتها، فكان ينقصه الحياة والبهجة. بدى وكأنه مثقل بالنص على عكس كونه قادرًا على عرض المعلومات بسرعة. أدركت بأنه يجب علي أن أتبنى "رؤية آبل" في ساعة آبل: عرض رائع للبيانات بدون وجود الكثير من النص. قمت بعرض النموذج الأولي على فريق التصميم، حيث علمت بأن هناك تغييرات يجب عملها. حصلت على الكثير من ردود الفعل: "لا يبدو كثيرًا كتطبيق ساعة. لم لا تجرب أمثلة تصميم مبنية على البيانات؟" لقد كان فريق التصميم على حق. لذلك بدأت من جديد. عليك أحيانًا أن تفكك كل شيء وتبدأ من الصفر كنت قد اصبحت تائهًا في رسم تخطيط واحد لواحد (1:1 mapping) لمزايا من التطبيق للساعة الذكية، ولم أتّبع خطوات عمليتي الخاصة. يبدأ المشروع عادةً بقائمة من المزايا أو متطلبات العمل، ومنها أقوم تاليًا بتوليد تدفقات (flows) وإطارات شبكية (wireframes) ثم في النهاية أنتقل إلى التخطيط الشامل Comps (Comprehensive Layout) وإلى النمذجة (prototyping). لم أقم في محاولتي الأولى بتكوين خط أساسي لـMVP (المنتج الأدنى القابل للنمو لجعل تطبيقٍ ما فعالًا ومفيدًا). كل ما أردته هو الفحص ورؤية ما يحدث. وما حدث كان باهتًا وغير واضحًا. لم أكن لأتعامل مع عمل زبون هكذا، لذلك أخدت هذه المرة خطوةً للخلف وخططت منتج MVP. تعاونت مع مطورين لوضع مجموعة MVP حقيقية من الميزات للتصميم. ثم أخذت تلك القائمة، أمسكت بدفتر ملاحظاتي، وبدأت العمل. لدي كلمة بشأن الرسم التخطيطي: أنصح به بشدة كأسلوب حل مشاكل أولي. وأنا لا أتحدث تلك الرسومات المثالية والرائعة الموجودة في دفاتر مولسكين (Moleskines) الجلدية والتي تراها عادةً في منشورات المصممين على مدوناتهم. أنا أتحدث عن الرسومات القبيحة، السريعة والتي يمكن التخلص منها. تلك الرسومات التي تخاف من أن يراها الناس أو من الممكن أن يقولوا: "ظننت بأنك قلت أنك ذهبت لكلية الفنون؟" العمل بسرعة على سبورة بيضاء أو على دفترك يكوّن مجموعة من الميّزات. اجمع البيانات المتشابهة والأعمال سويًا. ارسم إطارات شبكية (wireframes) وتدفقات (flows) بسيطة. ليس من الضروري أن تكون مثالية. وبمجرد أن تستثمر جهدك في جعلها مثالية، ستكون أقل قابلية لأن تستغني عنها أو تتخلص منها وتبدأ من جديد في حال وجدت خطأً ما أو أردت أن تُجري تغييرًا. في النهاية أقوم بإنتاج نسخ جميلة في ما بعد لعرضها على العملاء وعادةً بشكل رقمي. المرور بكل تفصيل صغير يساعدني على رؤية طرق مختلفة لتجميع الميزات سويًا لتطبيق مبني على الصفحة (page-based). أقوم بتحليل وتجزئة الميّزات إلى مهام على شكل حبيبات، ثم أقوم بتجميعها سويًا في شاشات. لقد عملت بشكل حر وسريع لأنه بالأصل، هذه كانت مجرد لائحة بقالة (أداة تساعدني على ترتيب الميزات والمحاسبة عليها). الإلهام لقد كنت مفتونًا بالطريقة التي يستحضر فيها تطبيق الطقس في ساعة آبل واجهة ساعة بوساطة عرض بيانات الطقس بشكل دائري. حاولت أن أوضح بعض قصص المستخدمين سويًا في تنسيق دائري، كالأيام المتبقية حتى موعد دفع الفاتورة. إنّ استخدام التقويم وعرضه بأسلوب دائري أو تحويل شريط مقارنة لتصوير بياني دائري الشكل هو تحدٍ مثير. اغسل بالصابون، اشطف، كرر اعادة التفكير بالتطبيق واعتباره مبنيًا على الصفحة (page-based) مكنني من دمج العديد من القطع المختلفة من البيانات ونقاط الانطلاق المحتملة بشاشة واحدة. مكنني أيضًا من جعله مختصرًا وبصريًا بشدة. جعل التصفح (Paging) خلال تطبيق ساعة ذكية استخدام التطبيق أكثر سرعة وأكثر متعةً في الاستخدام وجعله أيضًا أكثر متعة بالتصميم. الدروس المستفادة أحد أكثر الدروس التي تعلمتها أهمية: انغمس ولا تتردد. ابنِ تصميمك من قصص المستخدمين. التدفق (flow)، الإطار الشبكي (wireframe)، النموذج (prototype). لن تتعلم إلا بهذه الطريقة. إن كنت تقدر على الحصول على ردود فعل من مبدعين آخرين ومن مطوري iOS فقم بطلبها. سوف يساعدوك باكتشاف أشياء تجاهلتها مسبقًا وسوف تصنع نموذجًا أفضل من عملك. بجانب ذلك، فإن امتلاكي لميّزات MVP واقعية ساعدني على تحديد ما احتجت ان أقضي وقتي فيه وما احتجت أن اركز عليه بشكل أفضل. قم بتجربة الأشياء، أعد تقييم عملك ولا تكن خائفًا من ترك شيءٍ ما عندما ترى خللًا. إبقاؤك لنسخة من الشاشات السابقة بإمكانه أن يكون ذو فائدة عندما تحتاج لعرض عملك على الزبائن أو على فريقك. حتى وإن لم يكن هنالك زبون يدفع لك مقابل تصميمك لتطبيق ساعة ذكية، فإن إكمال تصميم كهذا بوصفه تدريبًا سوف يعود عليك بالفائدة في المستقبل. بإمكانه أن يكون منشور على مدونة حول موضوع جديد ومثير يبيّن للزبائن المستقبليين بأنك على إطّلاع على كل ما هو جديد. بإمكانه أن يكون إضافةً رائعة لمعرض أعمالك الذي يُظهر كيف تتعامل مع المشروع. بالإضافة لذلك، فإنه فرصة لنقل مهارات تفكيرك الحساس والذي أراه نادرًا عندما أراجع طلبات التوظيف. بالرغم من أن هذا المشروع لم يكن لزبون، فقد استخدمت هذا التصميم لعرض على الزبون المستقبلي كيف تعاملت مع تجربة المستخدم وكيف قُمتُ بالتصميم باعتبار المنصة والمستخدم وقمت بالتفكير بكيف يمكن لتطبيق ساعة ذكية أن يندمج مع تطبيق هاتف محمول موجود بالفعل. وفي حال كنت تتساءل: لقد حصلت على العمل. ترجمة -بتصرف- للمقال ‎Prototyping for a tiny screen لصاحبه Marc Nischan

اصنع نموذج تصميم موقع تعليمي متكامل بدءًا ببناء التخطيط الأولي، ومن ثم الانتقال لتصميم العناصر الفردية للصفحة. والنتيجة هي نسق صفحةٍ إلكترونيةٍ عصرية وجذابة وناضرة وجاهزة للبرمجة. وبأخذ العبرة من العديد من التصاميم العصرية للمواقع الإلكترونية، سوف ننتج هذا التصميم الجذاب والناضر. تشمل المميزات الأساسية على الأشرطة الأفقية التي تقسّم المحتوى لمناطق محددة مثل أن تكون منطقة رأس الصفحة مفعمة بالألوان وتعرّف عن الموقع، أو أن يكون هنالك رسالة ترحيبية بها أمثلة عن الأعمال الخاصة بالموقع، أو حتى نسق رئيسي ذو عمودين وذيل صفحةٍ مليء بالمصادر. البداية الأمثل لأي تصميم هي الرسم التخطيطي على ورقة، إذ أن التملك والتحكم بالقلم يساعد على تجسيد النسق الصعب بسهولة. إيجاد تخطيط شبكي (Wireframe) يساعد على تطوير شكلٍ هرمي، بالإضافة إلى إعطاء رؤية عن أفضل الأماكن للعناصر الأساسية في التصميم. أنشئ ملفًا جديدًا في فوتوشوب. بالنسبة لي، فأنا أميل لجعل حجم العمل الفني مشابهًا للحجم المتداول للشاشات الكبيرة، حيث أن هذا يعطي توضيحًا أفضل للشكل الكلي للموقع. ضع خطوطًا إرشادية بعرض "960 بيكسل " في منتصف صفحة الويب. واصنع شبكةً بسيطة لتساعدك على وضع عناصر الصفحة عليها. إبدأ بصناعة شريط رأس الصفحة، وارسم تحديدًا (Selection) يحيط بعرض الصفحة كلها ومن ثم املأها (Fill) باللون الأبيض. إضغط بشكلٍ مزدوج على الطبقة (Layer) لعرض تنسيقات الطبقة وقم بإضافة تغطية بالتدرج اللوني (Gradient Overlay) من اللون الأبيض للون الرمادي متدرج بشكل عمودي. فيما بعد، ارسم منطقة الرأس الأساسية حيث سيتم وضع المحتوى المميز فيها، وفي طبقة جديدة، ارسم تحديدًا (selection) ومن ثم أضف تدرجًا لونيًا باستخدامك للونين فاقعين، وقم أيضًا بإضافة ظل داخلي رقيق لإضفاء العمق على التصميم. اللمسات الرقيقة لنسيج التصميم بإمكانها أن تضيف الحياة للتصميم. وبينما يتم تحديد منطقة الرأس بواسطة قناع (Mask)، قم بالضغط على كل من أزرار CMD+SHIFT+C للقيام بنسخها بشكل مندمج وموحد، ومن ثم قم بإلصاقها على طبقة جديدة. ثم بالذهاب لقائمة "Filter>‏ Noise>‏ Add Noise" لخلق نسيج بسيط، ثم قم بضبط وضع المزج (Blending Mode) على الاختيار (Multiply) وقم بتقليل التعتيم حتى يصل للدرجة المناسبة. ألصق شعار الشركة، ومن ثم قم بتحريكه على الشاشة حسب الشبكة التي سبق أن أنشأتها. أضف بعض اللمسات من خلال خيارات نسق الطبقة (Layer Style Options) وأضف تدرجًا لونيًا ليتناسب مع ألوان قائمة الرأس المميزة، ومن ثم اصنع ظلًا داخليًا ناعمًا جدًا. استخدم أداة الكتابة (Type Tool) لانشاء نص على شريط التنقل الرئيسي للموقع، اجعل الخط بلون رمادي متوسط، بينما تقوم باستخدام درجة أغمق للرابط النشط. يعد رأس الصفحة البارز أو المميز منطقةً رائعة للتعريف عن الموقع، ومع ألوانٍ فاقعة في الخلف، فإنه يجذب التركيز الأكثر من المستخدمين. استخدم هذه المساحة لكتابة عنوان تقديمي مفاجئ وغير متوقع بخط معدل يتناسب مع العلامة التجارية للشركة. استمر بتجسيد المحتوى التقديمي، ولكن هذه المرة استخدم خط (Arial) أو (Helvetica) حتى تتمكن من وضع النص بتنسيق "html" التقليدي وبدون أساليب استبدال الصور. ضع صورة حاسوب محمول في المنطقة المميزة (وهنا مجموعة من الأمثلة)، وهذا يتناسب بشكل تام مع طبيعة الشركة التخيلية، وتوفر منطقة مركزية ممتازة لعرض أمثلة على الأعمال على شاشة الجهاز المحمول. قم بلفت الانتباه والتأكيد على هذه المنطقة المركزية بوضعك لتدرج لوني دائري منبعث من خلف الحاسوب المحمول. فإن هذا يضيف تفصيلًا صغيرًا يبرز العنصر عن باقي الصفحة. أما أسفل المنطقة الرئيسية في الرأس، فقم بعمل تحديد جديد واملأه بتدرج لوني بين الأبيض والرمادي. قم بتجزئة القسم الأوسط من الصفحة لعمودين باستخدام خطوط الإرشاد حسب الشبكة التي قمت بعملها، بحيث يكون المحتوى الرئيسي في العمود الأيسر، بينما يحتوي العمود الأيمن على شريط جانبي أقل سماكة. وباستخدام أداة الكتابة، قم بإضافة محتوى وهمي. ثم قم بتغيير الحجم والاتجاه لتعطي قطعة من النص سهلة في القراءة والفهم. أسفل منطقة النص الرئيسي، بإمكانك صنع منطقة لعرض آخر منشورات المدونة. قسِّم العمود لعمودين آخرين وثم أنشئ تحديدًا لمثال عن واجهة المنشور. ويجب أن تكون روابط العنوان واضحة للمستخدم حتى يضغط عليها، لذلك غيّر ألوانها لجذب الانتباه. استخدم أداة المستطيل المدور (Rounded Rectangle Tool) لرسم صندوق في الشريط الجانبي. ولا يهم اللون الأساسي، إذ سنغيّره في المرحلة التالية. اضغط ضغطة مزدوجة على الطبقة وأضف مجموعة من تنسيقات الطبقة، بما فيها التدرج بين الأبيض والرمادي، والحد الخارجي (Stroke) وظل داخلي ناعم. استخدم هذا الشريط الجانبي لصنع قسم خاص للإعلان عن آخر المشاريع المميزة على الموقع. بإمكان العناصر أن تكون عبارة عن قصاصات صور صغيرة ونصوص. ارسم مستطيلًا دائريًا آخر ليتم استخدامه كزر، ثم قم بإضافة القليل من تنسيقات الطبقة مثل التدرج اللوني والحد الخارجي (stroke) لإعطاء تنسيق للزر يتناسب مع الشكل الكلي للصفحة ذو اللون الرمادي الجذاب. اصنع علامةً وصفية وقصيرة للزر الذي يدعوا المستخدم للاستمرار في تصفح الموقع ورؤية المشاريع والأعمال التالية. قم بالإشارة لنهاية المحتوى بواسطة رسم منطقة ذيل للصفحة، ثم قم بتعبئة المنطقة بلون رمادي باهت لتمييزها عن منطقة المحتوى الرئيسي. ارسم ستارًا دائريًا ومن ثم عبّئه بتدرج لوني دائري بين الأسود والشفاف. قم بالضغط على CMD+T لتستطيع التحكم بالتحديد، ثم قم بضغط أو تمديد التدرج اللوني للحصول على رسم شبيه بالظل. حرِّك الظل لمنتصف الشاشة، ثم احذف المنطقة الزائدة فوق ذيل الصفحة. سوف تحصل على ظل رقيق يبرز الصفحة الرئيسية ويضيف بعض التفصيل للتصميم. تعد منطقة ذيل الصفحة منطقةً مناسبة لعرض العناصر الثانوية للصفحة، على سبيل المثال: بإمكانك وضع بيانات تسجيل الدخول الخاصة بالعميل. قم بتجسيد التصميم باستخدام أداة الكتابة، ثم ارسم صندوقي إدخال صغيرين، وقم بتنسيق الصندوقين بظل داخلي خفيف. استخدم المنطقة الوسطى لذيل الصفحة لكي تعرض رسالة معينة عن الشركة. اضبط النص باستخدام نفس خطوط رأس وحاشية الصفحة. وفي النهاية، أضف بياناتٍ للتواصل في يمين المنطقة السفلية. هذه التفاصيل سوف تصبح مفيدة للمستخدم عند استخدامه للموقع. قم بإبراز أهم الجوانب من خلال الحجم أو اللون. يشمل التصميم النهائي على كل العناصر المطلوبة بعناية بداخل الصفحة من خلال إبقاء كل شيء حسب الشبكة التي أنشأناها في البداية. والنتيجة هي تنسيق منظم وجذاب مع الكثير من اللون الرمادي الرقيق لإضفاء العمق للموقع، وعندها يتم استخدام الألوان لتحديد المناطق المميزة والمحتوى المهم. ترجمة -بتصرف- للمقال ‎Create a Clean Modern Website Design in Photoshop