التصميم للهواتف التصميم للهواتف: التصميم البصري

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

الجانب المادي في عملية التصميم

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

التصاميم الصالحة للاستعمال

إن المساحة المحدودة التي توفرها شاشة الهاتف تقدم قيودًا مثيرة للاهتمام في كيفية عرض المحتوى والتفاعلات بشكل أفضل؛ وبشكل أدق، فإن على التصميم أن يكون بسيطًا ومركزًا.

هيكل التصميم:

لكي نقوم بتوفير أساس قوي للتصميم، فنحن بحاجة إلى استخلاص أفضل الطرق لاستخدام مساحة الشاشة المتاحة؛ ونطام الشبكة (grid system) يساعد المصممين في تحقيق ذلك؛ فهيكل الخطوط العمودية متساوية التباعد يُعدّ دليلًا لترتيب المحتوى، مما يسهل على المصممين تحديد المكان الأكثر فعالية للأزرار، العناوين، أو الصور؛ ولأن ترتيب المكونات بهذه الطريقة يرشد المستخدمين في رحلتهم، ويقدم في نفس الوقت صورة نظيفة وجميلة للمحتوى.

مساحة التمرير والسحب:

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

التفاعلات سهلة الاستخدام

إن وجود الشاشة اللمسية على واجهة الهواتف المحمولة يعني أن التصميم البصري يعزز من الإجراءات التفاعلية؛ بعبارة أخرى، ينبغي أن تضمن عملية تغيير حجم ومكان العناصر السهولة في الاستخدام، وأن تبين الأهمية والارتباط بين الإجراءات المختلفة.

مناطق ضغط الزر:

كما ناقشنا في الجزء الثاني من السلسلة: تصميم الإجراءات التفاعلية، فإن وجود حجم كافٍ، وتباعد مناسب بين الأزرار يُسهل من عملية تفعليها. من الناحية المثالية، فإن على الأزرار أن تكون بين 44px و57px على الشاشة القياسية، و88px إلى 114px على شاشة (retina) عالية الكثافة؛ وهذا يُعطي مساحة كافية للإصبع المتوسط أن يُفعّل هذه الأزرار بسهولة.

أدوات تحكم واضحة ومن السهل الوصول إليها:

إذا كانت العناصر التفاعلية المتصلة ببعضها، قريبة من بعضها وفي المتناول الوصول إليها، فإن هذا سيساعد المستخدم على التنقل السريع بينها؛ وهذا بدوره سيساعد في الحد من التشوش وقلة الوضوح التي يمكن أن تعتري المستخدم حول كيف ترتبط التفاعلات ببعضها، وسيسرع من إنجاز العمليات المعقدة.

الجانب التواصلي في عملية التصميم

إن القيود المادية تعتبر فقط نصف التحدي الذي نواجهه في تصميم الهواتف المحمولة، والنصف الآخر هو الجانب التواصلي. إن فلسفة الجوال أولًا (mobile first) تذكرنا أن مستخدمي الجوال لا بد أن يحصلوا على نفس القدر من الفائدة من المواقع كما يحصل عليها نظراؤهم من مستخدمي أجهزة سطح المكتب. بوضع ذلك في الاعتبار، فإن الجانب التواصلي في تصميم الهواتف سوف يؤثر على الطريقة التي سيعمل بها كل مصمم لإيصال رسالته التواصلية.
ولكي نحسن الجانب التواصلي، فنحن بحاجة إلى تحقيق أفضل استفادة من كيفية فهمنا للمعلومات وفك شفراتها. إن الدماغ البشري يفسر المعلومات البصرية أسرع بكثير من الكلمات؛ وهذا يعني أنه سيكون رائعًا استخدام المرئيات والصور لتحسين التواصل؛ فالتصميم البصري الجيد سوف يضيف قيمةً، ودعمًا لغرض المحتوى أو التفاعلات، ويحسن من تجربة المستخدم ككل (للهاتف وسطح المكتب).

الاتزان الرأسي (Vertical rhythm)

إن أول مُحسِّنٍ لعملية التواصل علينا اعتباره هو استخدام الاتزان الرأسي؛ ومع أن هندسة المعلومات تُنشأ تدفقًا معقولًا للمحتويات، فإنه يمكن استخدام التصميم البصري لخلق مزيد من الوضوح داخل التسلسل الهرمي البصري للمحتوى، وسيؤدي الاستخدام المناسب للحجم والتباعد بين عناصر المحتوى، إلى إنشاء اتزانٍ عموديٍّ يدعم التواصل بين أجزاء التسلسل الهرمي.

إضافةً إلى نظام الشبكة العمودية سالفة الذكر، فإن الشبكة الأساسية (baseline grid) تساعد كذلك في إنشاء اتزان عمودي مناسب، جاعلة قراءة وفهم المحتوى أكثر سهولة؛ خصوصًا وأنها تُنشأ بنيةً من خلال مواصفات ارتفاعات الأسطر، وهذا يعطي قواعد أفقية واضحة توضح المسافة بين قاعدة كل سطر (typography leading) وكذلك حجم الخطوط؛ كما أنها مفيدة في تحديد التباعد بين مجموعات المحتويات.
إن اتباع هذه القواعد يجعل قراءة الفقرات واضحة، ويجعل المستخدم قادرًا على التفريق بين الأقسام (sections) ومجموعات المميزات (feature groups)؛ وربما يكون من الصعب تنفيذ نظام الشبكة الرئيسية بدقة في كل من HTML وCSS، إلا أنها توفر إرشادات مفيدة فيما يتعلق بتطوير التحجيم والتباعد في عملية التصميم.

استخدام الألوان

تعد الألوان وسيلة أخرى رائعة للتواصل، ويمكن استخدامها بطرق متعددة لدعم المحتوى والتفاعلات.

درجة اللون وطرازه:

إن استخدام الألوان في التصميم يُعد ذوقًا شخصيًّا بالدرجة الأولى، ويعتمد على التجربة الشخصية والثقافة؛ ومع ذلك، فإن استخدام درجات متعددة للون وبعض الظلال يمكن أن يساعد في إيصال انطباع عام عن الهدف المطلوب؛ فمثلًا: الألوان الفاتحة المكتوبة بخط سميك عريض تعبر عن المرح، ودرجات الألوان الداكنة تخلق شعورًا من الأناقة، بينما الأشكال الانسيابية بدرجات من اللون الرمادي تعطي شعورًا عتيقًا يعبر عن الماضي. إن تعلمنا المزيد عن نظرية الألوان (color theory) يمنحنا القدرة على اختيار أفضل الألوان المناسبة لأهداف التصميم.

التفرقة بين الأقسام

يمكن استخدام الألوان لإعطاء أهمية لعناصر المحتوى، أو لتوضيح كيف أن العناصر مرتبطة ببعضها، أو لدعم بنية المحتوى، أو لتوضيح كيف أن عناصر المحتوى منفصلة عن بعضها.

التفرقة بين العناصر الثابتة والوظائف التفاعلية:

إن استخدام تباين قوي بين الألوان سوف يساعد المستخدم في فهم الاختلاف بين الأغراض، أو الربط بين أجزاء المحتوى، أو الوظائف؛ واستخدام مزيج من الألوان المحايدة والألوان الفاتحة أو الداكنة، سوف يضمن أن تلك العناصر المحددة قد ظهرت وبرزت للمستخدم؛ واستخدام لون ثابت محدد- على سبيل المثال- لكل من العناصر الثابتة، النشطة وغير النشطة، في جميع أنحاء التصميم، سوف يُظهر أيضًا الفرق بين المحتوى والوظائف بشكل أكثر وضوحًا.

التعريف بأحوال مختلفة:

يمكن استخدام الألوان بذكاء لتظليل الرسائل، الإشعارات، والأخطاء التقنية بعد تفاعل المستخدم معها؛ فعلى سبيل المثال، تستخدم العديد من المواقع اللون الأخضر للرسائل الناجحة، والأحمر لرسائل الخطأ؛ وهذا يساعد في سهولة فهم التصميم المخصص لنقل معلومات عبر استخدام الألوان المتسقة.

استخدام التجسيد أو التشبيه (Using metaphor)

أخيرًا، فإن استخدام التجسيد يمكن أن يكون حلًّا قويًّا في التصاميم البصرية؛ ويتيح للمستخدمين أن يفهموا المحتوى والوظائف بصورة أسرع من خلال استحضار عنصر بصري مألوف؛ ويُعتبر استخدام الـ Skeuomorphism (أي: التصميم الذي وُضع ليُحاكي عنصرًا آخر) هو أقصى استخدام للتجسيد البصري في الوسط التقنيّ؛ حيث يتم تصميم عناصر الواجهة لتبدو حقيقة تمامًا مثل نظيراتها في العالم الحقيقيّ؛ ورغم أن الاتجاه قد حصل مؤخرًا على سمعة سيئة في نظام Windows 8، وفي نظام iOS7 الذي بدأ بالتراجع عنه؛ فلا زالت هذه الأنظمة، والمواقع والتطبيقات المخصصة للهواتف تستخدم نموذجًا أبسط من التجسيد في واجهة المستخدم، مثل تجسيد سلة المهملات لوظيفة الحذف، وآلة تصوير لكاميرا الويب، ومظروف للبريد؛ فيمكن إذًا للتجسيد أن يُستخدم بأكثر من طريقة لدعم توصيل رسالة أو فكرة.

دعم موضوع أساسيّ:

أفضل من حصر التجسيد في عنصر واحد من عناصر التصميم، يمكن استخدامه ليكون الفكرة الأساسية للتصميم أو الوظائف؛ فداخل تطبيق Flipboard، تعتبر تحولات الشرائح جزءا مدمجًا في تفاعلات المستخدم، وهذا الأداء السلس كان عاملًا مهما في نجاح التطبيق؛ فاستخدام التجسيد بهذه الطريقة يُسرّع من عملية إيصال الفكرة للمستخدم، كما يساعد في جعل التطبيق فريدًا من نوعه.

الأزرار والتفاعلات:

إن استخدام تجسيدٍ بسيط في تصميم الأزرار يُعد طريقة سهلة لمحاكاة تفاعلات العناصر في الحياة الحقيقية وجعل الوظائف أكثر وضوحًا؛ فالأمر لا يساوي شيئا إذا طُلب من الأشكال السطحية غير المجسدة أن تتناسب داخل تصميم واختلفت ألوانها عن ألوان العناصر الثابتة؛ موقع Wunderlist مثلا يستخدم أزرارًا ذات تصاميم واقعية.

الرموز المصورَّة (Iconography):

يمكن للرموز أن تكون مفيدة في تصميم الهواتف، فمساحة الشاشة الصغيرة تسمح بتواصل سريع مع أكثر من عنصر في نفس الوقت؛ فاستخدام التجسيد البصري للرموز (وخصوصًا تلك الرموز التي صارت مَعَايِيرًا، مثل رمز الحذف، كاميرا الويب، والبريد) يعنى أنها يمكن استخدامها دون تسميتها؛ فمعناها يُفهم بمجرد رؤيتها. إن تصميم رموز بسيطة وواضحة يمكن أن يكون تحديًا؛ لذا من المهم أن تفهم كيف أن الرموز تؤثر على مدى وضوح التصميم الخاص بك.

مستقبل الهواتف المحمولة

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

ترجمة- وبتصرف- للمقال Designing for Mobile Part 3: Visual design لصاحبته Elaine McVicar

حقوق الصورة البارزة محفوظة لـ Freepik