ما هو تصميم واجهة المستخدم؟ أو ربما السؤال الأفضل ما الذي يدخل في الواقع في تصميم واجهة المستخدم؟ الجماليات؟ سهولة الاستخدام؟ إمكانية الوصول؟ أم جميعهم و كيف تتحد كل هذه العوامل لتحقيق تجربة مستخدم مثالية وأيها يجب أن يأتي أولاً؟
يجب أن تأتي إمكانية الوصول دائماً في المقام الأول، ووضع الأسس للاستخدام الأمثل وبعد ذلك، عندما تكون واجهة المستخدم سهلة الوصول وقابلة للاستخدام يجب أن تبدو بالفعل لائقة من الناحية الجمالية.
بعد ذلك للتأكد من أن تصميمك يعمل على جميع المستويات، ستحتاج إلى اختباره بدقة، وهو ما يمكنك القيام به من خلال أفضل أدوات اختبار المستخدم وفي المقالة هذه نظرة على العناصر التأسيسية لمعظم التصاميم وما يمكن فعله لضمان التناسق البصري.
اقرأ أيضاً: كيفية إنشاء موقع ووردبريس من البداية إلى النهاية
دليل تصميم واجهة المستخدم .. قائمة كاملة بالخطوات
ينطوي مفهوم تصميم واجهة المستخدم UI على العديد من العوامل والعناصر وهي على الترتيب التالي:
1. اختر أسلوب الطباعة الخاص بك
تتلخص طريقة الطباعة الرائعة (مثل العديد من جوانب التصميم) في إمكانية الوصول و يضيف التصميم المرئي بالتأكيد إلى تجربة المستخدم الإجمالية، ولكن يتفاعل المستخدمون مع واجهة المستخدم ولا ينظرون إليها على أنها فن و تؤدي الأحرف المقروءة إلى الوضوح والكلمات المقروءة هي التي تساعد المستخدمين على هضم المحتوى بكفاءة أي كلاهما أهم من أي جمالية بصرية.
ومع ذلك يمكن أن تظل الطباعة المصممة جيداً مرضية من الناحية الجمالية و يمكن أن تصبح Helvetica باللون الأسود على الأبيض (أو خط مشابه) شيئاً من الجمال بعد بعض التحسينات الطباعية البسيطة و من خلال التحسينات، وهنا يُعني تعديل حجم الخط وارتفاع السطر وتباعد الأحرف وما إلى ذلك – وليس الخط أو لون النص.
تكون الطباعة “الجميلة” قبيحة في الواقع عندما تكون غير قابلة للقراءة لأن الإحباط دائماً ما يتفوق على الجماليات و مثل العديد من جوانب تصميم واجهة المستخدم، فإن ضبط المرئيات لتحقيق التوازن بين إمكانية الوصول والجمال ليس هو التحدي بل التحدي هو الحفاظ على الاتساق في جميع أنحاء التصميم بأكمله.
ينشئ التناسق تسلسلاً هرمي واضح بين العناصر ذات الأهمية المتفاوتة، والذي بدوره يساعد المستخدمين على فهم واجهة المستخدم بشكل أسرع وحتى هضم المحتوى بكفاءة أكبر.
عندما يتعلق الأمر بالوضوح وسهولة القراءة فإن الحد الأدنى لحجم الخط المقبول كما هو محدد في إرشادات الوصول إلى محتوى الويب WCAG 2.0 هو 18 نقطة (أو 14 نقطة غامقة).
ويعتمد حجم الخط الأفضل للاستخدام إلى حد كبير على الخط نفسه لكن من المهم أن تضع في اعتبارك التسلسل الهرمي المرئي وكيف يميز هذا الحجم الأساسي نفسه عن الملخصات والعناوين (مثل <h1> ، <h2> ، <h3> ).
باستخدام أداة تصميم واجهة المستخدم التي تختارها، أنشئ سلسلة من طبقات النص ( T ) ثم اضبط جميع الأحجام لتتوافق مع النموذج التالي:
- h1>: 44px>.
- h2>: 33px>.
- h3>: 22px>.
- p>: 18px>.
باستخدام InVision Studio (وجميع أدوات تصميم واجهة المستخدم الأخرى)، يتم ذلك عن طريق ضبط الأنماط باستخدام لوحة Inspector على الجانب الأيمن.
بعد ذلك، اختر الخط الخاص بك، ولكن احذر لأن ما قد تلاحظه في بعض الخطوط هو أن 18px <p> و 22px <h3> لا يبدوان مختلفين تماماً وهنالك خياران إما تعديل أحجام الخطوط أو التفكير في خط مختلف للعناوين.
ملاحظات:
- غالباً ما يكون تصميم واجهة المستخدم المرئية نهج مثير للشعور.
- كل شيء معرض للتغيير.
ارتفاع الخط
يضمن ارتفاع السطر الأمثل وجود مسافات كافية بين سطور النص من أجل تحقيق مستويات مناسبة من إمكانية القراءة و أصبح هذا معترف به أكثر فأكثر كـ “معيار”و تقترح أداة Lighthouse Audit من Google ذلك كتحقق يدوي (أو حتى علامة إذا كان النص يحتوي على روابط قد تكون قريبة جداً من بعضها نتيجة لارتفاع السطر دون المستوى الأمثل).
يساعد WCAG في هذا حيث يعلن أن ارتفاع الخط يجب أن يكون 1.5x حجم الخط لذلك في أداة تصميم واجهة المستخدم الخاصة بك ضمن “Line” (أو غيرها) قم ببساطة بضرب حجم الخط بمقدار – على الأقل – 1.5.
على سبيل المثال، إذا كان النص الأساسي 18 بكسل فسيكون ارتفاع السطر 27 بكسل (18 * 1.5)، مع ذلك انتبه – إذا شعرت أن 1.6x أفضل، استخدم 1.6x وتذكر أن الخطوط المختلفة ستخرج نتائج مختلفة.
تباعد الفقرات
تباعد الفقرات ليس نمط يمكن التصريح به باستخدام InVision Studio’s Inspector بدلاً من ذلك ستحتاج إلى محاذاة الطبقات يدوياً باستخدام Smart Guides (⌥).
على غرار ارتفاع الخط، يكون المضاعف السحري 2x (ضعف حجم الخط) وعلى سبيل المثال، إذا كان حجم الخط 18 بكسل فيجب أن تكون هناك مسافة 36 بكسل على الأقل قبل الانتقال إلى كتلة النص التالية و يجب أن يكون تباعد الأحرف 0.12 على الأقل..
الأنماط المشتركة
إذا كانت أداة تصميم واجهة المستخدم الخاصة بك تدعمها ففكر في تحويل أنماط الطباعة هذه إلى “أنماط مشتركة” لجعلها قابلة لإعادة الاستخدام بسرعة مع ضمان الاتساق البصري.
اقرأ أيضاً: أفكار إبداعية لـ تصميم شعار في 2021
2. اختر اللوحة الصحيحة
يتجاوز اختيار الألوان المثالية لتصميم واجهة المستخدم الجوانب الجمالية ويمكن أن يُعلم التسلسل الهرمي الكامل لموقعك، عندما يتعلق الأمر بتصميم واجهة المستخدم، فإن اللون عادةً ما يكون من أول الأشياء المهمة، لكن الغوص مباشرة في التصميم المرئي أمر سيء و هذا صحيح بالتأكيد ولكن عندما يتعلق الأمر بالاتساق البصري، يجب أن يكون اللون هو الشغل الشاغل لأنه يلعب أدوار أخرى.
يمكن أن يكون اللون في تصميم واجهة المستخدم فعالاً للغاية ولكن نظراً لأن بعض المستخدمين يعانون من أنواع مختلفة من الإعاقات البصرية فلا يمكن الاعتماد عليه دائماً.
ومع ذلك لا يتعلق الأمر بالضرورة باللون المحدد الذي يتم استخدامه، بل يتعلق بنوع اللون و قد لا يكون هذا صحيح عندما يتعلق الأمر بالعلامة التجارية نظراً لاستخدام اللون للتأثير العاطفي في هذا الصدد، ولكن في تصميم واجهة المستخدم يتم استخدام اللون أيضاً للتعبير عن النية والمعنى وبالطبع التسلسل الهرمي المرئي.
ثلاثة أنواع من الألوان
تحمل الألوان معنى لذلك من المهم عدم وجود الكثير منها و ينتج عن المعاني الكثيرة جداً المزيد من الأشياء التي يجب على المستخدم فهمها وتذكرها و بشكل عام سيكون هذا هو التنسيق الموصى به:
- لون الحث على الشراء (اللون الرئيسي للعلامة التجارية أيضاً).
- لون غامق محايد (أفضل لعناصر واجهة المستخدم أو الوضع الداكن).
- لكل ما سبق، شكل أفتح قليلاً وأغمق.
يتيح ذلك ما يلي:
- سيكون الوضع الداكن قابلاً للتحقيق بسهولة.
- لن يتعارض لون CTA أبداً مع الألوان الأخرى.
قم بإعداد لوح الألوان الخاص بك
باستخدام أداة تصميم واجهة المستخدم التي تختارها قم بإنشاء لوحة رسم كبيرة إلى حد ما لكل لون (باسم “العلامة التجارية” و “محايد / فاتح” و “محايد / داكن”).
بعد ذلك، في كل لوح رسم قم بإنشاء مستطيلات إضافية أصغر تعرض الاختلافات الأغمق والأفتح للون وكذلك الألوان الأخرى نفسها.
قد يعتبر أفتح قليلاً وأغمق قليلاً مثل 10 في المائة من الأبيض الإضافي و 10 في المائة من الأسود الإضافي على التوالي وعند الانتهاء اعرض نسخة من أنماط الطباعة على كل لوح رسم و يجب أن يكون لون طبقات النص هذه فاتح محايد.
التباين
بعد ذلك ستحتاج إلى التحقق من الألوان لمعرفة تباين الألوان الأمثل و هناك مجموعة متنوعة من الأدوات التي يمكنها القيام بذلك على سبيل المثال المكون الإضافي Stark لـ Sketch و Adobe XD أو Contrast لنظام التشغيل macOS – ومع ذلك فإن الحل عبر الإنترنت مثل Contrast Checker أو Color Contrast Checker سيفي بالغرض وتحقق من تباين الألوان لكل مجموعة وقم بتعديل الألوان وفقاً لذلك.
اقرأ أيضاً: أفضل مصادر الإلهام عند تصميم الويب
3. نمط الروابط والأزرار
الأزرار والروابط مثل الطباعة يجب أن تحتوي على بعض الاختلافات و بعد كل شيء ليست كل الإجراءات على نفس المستوى من الأهمية فإن اللون هو وسيلة اتصال غير موثوقة لذلك لا يمكن أن يكون الطريقة الرئيسية للتأثير على التسلسل الهرمي البصري بل يجب اللعب بالحجم.
بشكل عام يوصي بأن يتم الإعلان عن نص الزر على أنه 18 بكسل (مثل النص الأساسي) ولكن الأزرار نفسها لها ثلاثة أشكال مختلفة في الحجم:
- عادي: ارتفاع 44 بكسل (زوايا دائرية: 5 بكسل).
- كبير: 54 بكسل في الارتفاع (الزوايا الدائرية : 10 بكسل) .
- كبير جداً: ارتفاع 64 بكسل (الزوايا الدائرية: 15 بكسل).
وهذا يمكّن من جعل بعض الأزرار تبدو أكثر أهمية دون الاعتماد على اللون وأيضاً لتداخل الأزرار.
العمق
بغض النظر عما إذا كان هدف النقر عبارة عن زر أو حقل نموذج يجب استخدام الظلال لزيادة العمق وبالتالي اقتراح التفاعل و نمط ظل واحد لجميع متغيرات الأزرار وحقول النموذج جيد.
التفاعل
يحتاج كل نوع زر إلى شكل مختلف للإشارة إلى حالة التمرير الخاصة به و يوضح هذا للمستخدم أن ما حاول القيام به جيد تماماً ويضمن استمراره دون تأخير.
هذا في الواقع أحد الجوانب الأكثر تعقيد للحفاظ على التناسق البصري لأن اللون غالباً ما يكون هو النمط المفضل للتغيير عندما يتعلق الأمر بإنشاء حالة.
لحسن الحظ يمكن أن تكون هذه التغييرات في الحالة طفيفة نسبياً، لذلك لا بأس من تغيير اللون إلى تباينه الأفتح قليلاً أو الأغمق وهذا ينطبق على الروابط أيضاً.
سيؤدي اتخاذ قرار ضد ذلك إلى استخدام لون له معنى مهم بالفعل، مما يؤدي إلى إرباك المستخدمين أو اتخاذ قرار بشأن ابتكار لون آخر و يعد اتخاذ قرار باستخدام لون ثانوي أمر جيد ولكن يجب حفظه للتسويق المرئي بدلاً من عناصر واجهة المستخدم.
اقرأ أيضاً: تسويق التجارة الالكترونية .. الدليل الكامل
4. إنشاء المكونات الخاصة بك
تعد المكونات موفر كبير للوقت وتوفر جميع أدوات تصميم واجهة المستخدم هذه الميزة (ومثلاً في Studio، يمكن إنشاء مكونات عن طريق تحديد جميع الطبقات التي يجب أن يتكون منها المكون واستخدام الاختصار ⌘ K.
اختبار الإجهاد
من الناحية المثالية فإن الطريقة الأسرع والأكثر فاعلية لضمان المتانة هي اختبار التحمل و اختبار التصميم يعني أن يكون قاسياً لتحقيق ذلك حاول تغيير هذه المتطلبات عن طريق إضافة المزيد من عناصر التنقل أو، لإلقاء مفتاح ربط بالفعل في الأعمال و حاول إضافة عنصر تنقل بتسلسل هرمي مرئي أعلى من الآخرين.
5. التوثيق والتعاون
يجب أن نجعل ملفات التصميم أسهل في الاستخدام لأنفسنا وأي مصممين آخرين قد يستخدمون ملف التصميم هذا ومن المهم الاحتفاظ بها مخزنة بأمان في تخزين سحابي مشترك وموثوق.
الألوان
تتمثل الخطوة الأولى في حفظ كل الألوان في حامل “ألوان المستند” فهذا سيجعل الوصول إليها أسهل عند الحاجة إلى تطبيقها في التصميم، للقيام بذلك افتح عنصر واجهة اختيار اللون من المفتش، واختر “ألوان المستند” من القائمة المنسدلة ثم انقر فوق رمز + لإضافة اللون إلى العينة و يعمل هذا بنفس الطريقة في معظم أدوات تصميم واجهة المستخدم.
المكتبات المشتركة
بعد ذلك يجب تحويل الوثيقة – كاملة مع الأنماط المطبعية والألوان والأزرار والمناطق العامة والمكونات الأساسية – إلى مكتبة مشتركة.
يعني هذا أن كل عنصر يجب أن يكون مكون حتى لو كان يتكون من طبقة واحدة فقط، مع تطبيق ذلك تصبح الوثيقة مكتبة وهي جاهزة للاستخدام في تصميم واجهات المستخدم باتساق مضمون.
تصميم على نطاق واسع
مع توسع التصميم تصبح إدارته أكثر صعوبة و هناك العديد من التعديلات التي قد ترغب في إجرائها للحفاظ على فعاليتها وقابليتها للصيانة.
على سبيل المثال قد ترغب في استخدام طبقات النص للتعليق كوسيلة لشرح حالات استخدام العناصر المختلفة و بالنسبة لأنماط الطباعة يمكن حتى تحرير النص ليكون أكثر مهارة في الوصف (على سبيل المثال “<h1> / 1.3 / 44px”) حيث يشير هذا إلى أن <h1> s يجب أن تكون 44 بكسل وأن يكون ارتفاع خطها 1.3.
تسليم التصميم
تعرض أدوات تسليم التصميم الأنماط المختلفة التي يستخدمها كل عنصر في التصميم بحيث يمكن للمطورين إنشاء التطبيق أو موقع الويب.
وتتضمن هذه الأدوات نظرة عامة على الأنماط وأيضاً نسخة من حامل “ألوان المستند” و يمكن للمطورين نسخ هذه الأنماط كرمز وهو أمر ممتاز إذا تقرر إنشاء أي وثائق تصميم مكتوبة وتريد تضمين تمثيلات مقتطفات التعليمات البرمجية للمكونات.
إذا كنت قلق بشأن استكشاف الأخطاء وإصلاحها وإدارة موقع ويب فإن التأكد من حصولك على خدمة استضافة الويب المناسبة سيساعدك.
اقرأ أيضاً: 4 أساسيات لـ تصميم موقع ويب بسيط
نحن في وثاق متخصصون بجميع ما يتعلق بعمليات التسويق والتصميم سواء كانت الـ جرافيك (graphic designer) أو التطبيقات أو الـ انفوجرافيك (infographic)، لدينا مكتبنا وموقعنا الذي يستحق الثقة يدعمه في ذلك طاقم العمل الخبير، أسلوب التعامل السلس، الأسعار المناسبة وكذلك الأفكار الإبداعية والمتطورة المساعدة له لـ تصميم أفضل التصاميم والأفكار الخاصة بالتسويق والـ إعلان لمتجرك و للعلامة التجارية خاصتك.
للاتصال والتواصل مع موقع وثاق من أجل الاستسفسار عن أي خدمة تصميم أو تطبيق فإن معلومات الاتصال هي:
اقرأ أيضاً:
