دليل شامل لتصميم واجهة المستخدم
نشرت: 2022-03-10( هذه مقالة برعاية .) مع إنشاء الصورة الكبيرة - رسم خرائط رحلات المستخدم وتحديد شكل ومظهر تصميمك - تتناول مقالتي الخامسة في هذه السلسلة المكونة من عشرة مقالات في تفاصيل تصميم مكونات واجهة المستخدم.
UX و IA و UI: قد تكون كل هذه الاختصارات محيرة. في الواقع ، بصفتنا مصممين ، سنعمل غالبًا عبر هذه التخصصات المختلفة: تصميم تجربة المستخدم الشاملة (UX) ، وتنظيم المعلومات منطقيًا كما نأخذ في الاعتبار هندسة المعلومات (IA) ، والنظر في التصميم الدقيق لواجهة المستخدم (UI) .
في دليلي لتصميم UX ، قمت باستكشاف الحاجة إلى فهم احتياجات المستخدمين والنظر في رحلات المستخدم ، والحاجة إلى التصميم مع مراعاة السلوك البشري ، والحاجة إلى إنشاء جمالية شاملة. في هذه المقالة ، سأستكشف التفاصيل ، وكيف نصمم واجهات متسقة وقابلة للتطوير . هدفنا في هذه المرحلة من عملية التصميم هو تطبيق ما تعلمناه على تصميم واجهة المستخدم من خلال:
استخدام القياس لتطوير قوائم جرد الواجهة التي تضمن مراعاة واجهة المستخدم الخاصة بك بطريقة متماسكة ومتسقة ؛
بناء مكتبة أنماط ، مدعومة بمخزون الواجهة ، للتأكد من أن ما تصممه فعال من حيث التكلفة ومتسق ؛ و
- احتضان الرسوم المتحركة كطريقة للتواصل مع المستخدمين ، وتحسين تصميمنا على مستوى كل من الوظيفة والبهجة.
باختصار ، تهدف هذه المقالة إلى مساعدتك في تطوير نهج منظم نحو تصميم واجهة المستخدم الذي يمكن تطبيقه على نطاق واسع عبر مجموعة من المشاريع ، وهو قابل للتطوير. من خلال بناء إطار عمل للتصميم ، يمكننا تطبيق الدروس المستفادة من الآخرين ، وبالتالي تحسين تصميماتنا وتحقيق نتيجة أفضل لمستخدمينا.
يعد تصميم واجهة المستخدم (UI) موضوعًا واسعًا ، لذا اعتبر هذه المقالة تمهيدًا قصيرًا ، ولكن - كما في مقالاتي السابقة - سأقدم بعض القراءة المقترحة لضمان تغطيتك جيدًا.
ابدأ مع واجهة جرد
قد تبدأ من قائمة نظيفة بمنتج جديد أو تعيد زيارة منتج موجود ، ولكن من المفيد أن تبدأ من خلال إنشاء مخزون الواجهة. تمامًا كما يساعد جرد المحتوى في ضمان اتساق المحتوى (أي الكلمات والصور وأنواع المحتوى الأخرى) ، يضمن مخزون الواجهة أيضًا تطوير واجهات المستخدم باستمرار ضمن إطار عمل شامل ومدروس.
إن قضاء القليل من الوقت في هذا مقدمًا سيوفر الكثير من الوقت على المدى الطويل من خلال إنشاء أنظمة تصميم متسقة عبر أعضاء الفريق وقابلة للتطوير بسهولة. يساعدك إنشاء قائمة جرد للواجهة على تركيز وقتك وجهدك على العناصر التي تحتاجها في الوقت الحالي ، ولكن - تمامًا مثل دليل الأسلوب - يجب أن يكون مستندًا حيًا قابل للتوسيع ، وينمو مع نمو منتجك.
إذن ، ما هو بالضبط "مخزون الواجهة"؟ حسنًا ، لقد صاغ هذا المصطلح وشاعه براد فروست. يأخذ الفكرة التي تدعم قوائم جرد المحتوى وتضعها في عالم تصميم واجهة المستخدم. كما يلخص فروست:
"مخزون الواجهة يشبه مخزون المحتوى ، فقط بدلاً من غربلة المحتوى وتصنيفه ، فأنت تقوم بتقييم وتصنيف المكونات التي يتكون منها موقع الويب الخاص بك [أو منتجك]. مخزون الواجهة عبارة عن مجموعة شاملة من الأجزاء والقطع التي تشكل واجهتك ".
- جرد الواجهة ، براد فروست
إذا كنت تعيد تصميم منتج حالي ، يبدأ مخزون الواجهة من خلال تعيين جميع مكوناتك - بغض النظر عن حجمها أو صغرها - بحيث يتم توثيقها بشكل منهجي. إذا كنت تشرع في مشروع جديد ، فقد ترغب في تصميم منتج منافس ، وإجراء تحليل لعمل الآخرين. يساعدك هذا في التعرف على مكونات الواجهة المختلفة التي ستحتاج إلى وضعها في الاعتبار.
تتمثل المرحلة الأولى في العملية في أخذ لقطات شاشة منهجية لكل شيء قمت بتصميمه . سيستغرق هذا وقتًا طويلاً ، لكنه مهم. في هذه المرحلة - خاصةً إذا كان لديك فريق تصميم كبير - قد تبدأ في رؤية التناقضات في كيفية تصميم العناصر المختلفة. سيساعدك مخزون الواجهة في تحديد هذه العناصر ، والتي يمكنك بعد ذلك إصلاحها.
ضع في اعتبارك جميع المكونات المختلفة التي تشكل واجهة المستخدم الخاصة بك ، بما في ذلك:
الطباعة
- العناوين والعناوين الفرعية
- عناصر النص (الاحتياطيات ، الفقرات)
- القوائم
الصور والوسائط
- الشعارات
- الايقونية
- الصور
نماذج
- مدخلات النص
- مدخلات الراديو / خانة الاختيار
- حدد القوائم
إذا كنت تشبهني قديمًا ( قبل أن أعرف بشكل أفضل! ) ، فربما تكون قد صممت هذه المكونات المختلفة عندما نشأت الحاجة ، دون أي نهج منهجي. فكرة جرد الواجهة هي فرض أمر على هذه العملية لضمان اتساق كل شيء.
تهدف المرحلة الثانية من العملية ، التي تصنف كل شيء ، إلى فرض بعض النظام على لقطات الشاشة التي التقطتها. يمكنك تنظيم لقطات الشاشة الخاصة بك باستخدام جميع أنواع الأدوات ، لكنني أقترح تنظيم كل شيء باستخدام Keynote أو PowerPoint ، وبهذه الطريقة يمكنك تقديم العمل عندما يكتمل لفريقك. لقد قدم Brad Frost المفيد دائمًا نموذجًا يمكنك استخدامه (ZIP).
من خلال العمل أعلاه ، من الجيد أن تجتمع كفريق واحد أو مع العميل والبدء في كل شيء. ستؤدي هذه المناقشة إلى فهم أفضل للمكونات المختلفة التي تحتاج إلى تصميمها. من المحتمل أيضًا أن يؤدي إلى بعض التبسيط لمكوناتك المختلفة من خلال تحديد الأنماط المشتركة - وهو مكسب كبير للكفاءة.
بناء مكتبة الأنماط
من خلال إجراء مخزون الواجهة وتنظيم جميع مكوناتك ، من المهم البدء في تحديد أنماط التصميم الشائعة والبناء عليها . من المحتمل أن يكون مخزون الواجهة قد كشف عن تناقضات صارخة في التصميم الخاص بك ، والآن هي النقطة في عملية التصميم التي تعالجها عن طريق إعادة بناء واجهة المستخدم الخاصة بك بطريقة معيارية. أجد أنه من المفيد التفكير في هذا النهج على أنه يشبه إلى حد ما LEGO.
باستخدام LEGO ، يمكنك (باستخدام مكونات صغيرة) بناء أشياء معقدة بشكل لا يصدق. واجهات متشابهة. على الرغم من أن الواجهة قد تكون معقدة بشكل لا يصدق للوهلة الأولى ، إلا أنها تتكون أساسًا من مكونات أصغر. هذه المكونات هي المكان الذي تأتي فيه مكتبات الأنماط. إذن ، ما هي مكتبة الأنماط؟
مكتبة الأنماط تحدد وتصنف أنماط التصميم التي تمثل حلولاً متكررة لمشاكل التصميم النموذجية. قد تكون هذه:
- منتقي التقويم
- مسارات التنقل
- دائري
مكتبة الأنماط تقسم الواجهة إلى عناصر أصغر يمكن استخدامها بعد ذلك كوحدات بناء قابلة لإعادة الاستخدام. تشمل فوائد هذا النهج ما يلي:
الاتساق في التصميم الخاص بك
من خلال بناء عناصر معقدة لواجهة المستخدم باستخدام مكونات أصغر قابلة لإعادة الاستخدام ، فإنك تضمن أن جميع عناصر واجهة المستخدم الخاصة بك متسقة لأنها كلها مبنية من نفس المكونات البسيطة.مفردات مرئية يمكنك مشاركتها بين أعضاء الفريق
من خلال إنشاء مكتبة أنماط لمنتجك ، يبني كل فرد في فريقك باستخدام ذلك كأساس ، بدلاً من بناء عناصر مخصصة خاصة بهم.الكفاءة بمرور الوقت مع تطور تصميماتك
حتى إذا كان منتجك ينمو بمرور الوقت ، فمن الأفضل صيانته لأنه مبني على مكتبة أنماط أساسية.
عند تصميم واجهة المستخدم الخاصة بك ، من المفيد الرجوع إلى أنماط التصميم الخاصة بالآخرين لمعرفة ما يعمل - وبشكل متساوٍ - ما لا يصلح. تعد أنماط واجهة المستخدم مصدرًا ممتازًا للقيام بذلك ، حيث تجمع ثروة من أنماط التصميم.
باستخدام مخزون الواجهة الخاص بك كنقطة بداية لتحديد أنماط التصميم الشائعة ، فأنت على بعد خطوة واحدة من إنشاء المكونات التي تحتاج إلى إنشائها لإنشاء نظام تصميم. سيساعد هذا في ضمان أن تكون واجهة المستخدم الخاصة بك متسقة وقابلة للتطوير.
احتضان التصميم الذري
قبل الغوص بشكل أعمق قليلاً واستكشاف مبادئ التصميم الذري ، من المهم إعطاء القليل من الفضل حيث يستحق الائتمان. كان آندي كلارك يكتب ويتحدث عن "تصميم الأنظمة ، وليس الصفحات" لبعض الوقت الآن.
إن رؤية كلارك - أننا بحاجة إلى التوقف عن تصميم الصفحات بمعزل عن غيرها والتركيز بدلاً من ذلك على إنشاء الأنظمة التي تُبنى منها تلك الصفحات - قد أبلغت كثيرًا عن الكتابة التي نشأت حول أهمية التركيز على أنماط التصميم.
نحن محظوظون لأن عددًا من المصممين قد تولى القيادة واستكشف هذا الخط من التفكير بعمق. كتاب براد فروست عن التصميم الذري وكتاب آلا خولماتوفا عن أنظمة التصميم يفيضان بالنصائح المفيدة ويجب أن تكونا مطلوبة للقراءة. أنا أوصي بهم بشدة على حد سواء.
مؤكدا على أهمية اعتماد نهج منهجي تجاه تصميم الواجهات ، يقول فروست:
"[أنا] مهتم بما تتكون منه واجهاتنا وكيف يمكننا إنشاء أنظمة تصميم بطريقة أكثر منهجية.
في البحث عن الإلهام والتوازي ، ظللت أعود إلى الكيمياء. […] تتكون كل المادة من ذرات. تترابط هذه الوحدات الذرية معًا لتكوّن جزيئات ، والتي بدورها تتحد لتشكل كائنات أكثر تعقيدًا لتنتج في النهاية كل المواد في كوننا.
وبالمثل ، تتكون الواجهات من مكونات أصغر. هذا يعني أنه يمكننا تقسيم الواجهات بالكامل إلى وحدات بناء أساسية والعمل من هناك. هذا هو الجوهر الأساسي للتصميم الذري ".
- التصميم الذري ، براد فروست
تحدد منهجية فروست خمسة مستويات متميزة تشمل التصميم الذري: الذرات والجزيئات والكائنات الحية والقوالب والصفحات. من خلال البناء من الذرة إلى أعلى ، نخلق اللبنات الأساسية للتصميم التي تسمح لنا ببناء أي شيء.
لم تكن الكيمياء قط نقطة قوتي ، ولكن في الأساس:
- تتجمع الذرات لتشكل جزيئات.
- تتحد هذه الجزيئات لتشكل كائنات حية.
- ثم يتم استخدام هذه الكائنات كأساس لإنشاء قوالب وصفحات (غير كيميائية بشكل واضح).
باختصار ، نقوم بإنشاء وحدات بناء صغيرة للواجهة ثم نجمعها معًا لإنشاء عناصر واجهة أكثر تعقيدًا بشكل تدريجي. تتمثل فوائد التصميم الذري في أنه يمكنك ضمان الاتساق من خلال الجمع بين العناصر على مستوى حبيبي ثم البناء عليها.
الحصول على السبق مع مجموعات واجهة المستخدم
بصفتنا مصممين يعملون - في الغالب - على الويب ، فنحن محظوظون للغاية لأن نكون جزءًا من مجتمع يحتفل بالنهج المشترك تجاه العمل الذي نقوم به. لقد شهدنا انفجارًا في مجموعة أدوات واجهة المستخدم - مجموعات مصممة بشكل منهجي من مكونات واجهة المستخدم - على مدار السنوات القليلة الماضية ، مما ساعد على جعل حياتنا أسهل قليلاً.
لا يوجد أي معنى في إضاعة الوقت في إعادة رسم مكونات واجهة المستخدم المشتركة عندما يمكنك استخدام مجموعة أدوات واجهة المستخدم لتوفير هذا الوقت والجهد. يمكن أن تشكل مجموعة أدوات واجهة المستخدم المصممة جيدًا حجر الزاوية لمنتج رقمي ، سواء كان موقعًا إلكترونيًا أو تطبيقًا ، مما يضمن اتساقها في الشكل والمظهر والهوية المرئية.
عقدت Adobe شراكة مع سلسلة من المصممين المشهورين عالميًا لإنشاء بعض مجموعات Adobe XD UI الرائعة ، والتي تستحق الاستكشاف. لقد قدموا أيضًا بعض البرامج التعليمية الرائعة حول بدء التصميم الخاص بك باستخدام UI Kits لتجعلك جاهزًا للعمل.
بالإضافة إلى تقديم عدد من مجموعات الرموز المجانية (التي صممها Lance Wyman و Buro Destruct و Anton & Irene) ، قاموا أيضًا بإنشاء مجموعة شاملة من مجموعات UI المجانية مع قوالب مسبقة الصنع لكل من مشروعات الويب والجوال.
تعد UI Kits مفيدة بشكل لا يصدق ويمكن أن توفر لك قدرًا كبيرًا من الوقت من خلال توفيرك من إعادة رسم العناصر شائعة الاستخدام. ومع ذلك ، يجب الانتباه إلى الحذر ، كما هو الحال مع أي مجموعة عامة ، هناك خطر الوقوع في نهج يحركه القوالب حيث يبدو أحد التصميمات مشابهاً إلى حد كبير لتصميم آخر. من المهم استخدام المجموعة الخاصة بك كنقطة بداية ، حيث تقوم بوضع طبقة الشكل والمظهر اللذين أنشأتهما عند إنشاء مجمعات العناصر الخاصة بك.
تصميم التفاعلات والرسوم المتحركة
أحد الاختلافات الرئيسية بين التصميم للشاشة والطباعة هو أنه عندما نصمم للشاشة ، فإننا نصمم لوسط مرن . هذا فرق حاسم بين التصميم التفاعلي والتصميم الجرافيكي.
بصفتنا مصممين تفاعليين ، فإننا لا نصمم مجموعات ثابتة من الصفحات ، فنحن نفكر في كيفية تفاعل هذه الصفحات والعناصر الموجودة داخل هذه الصفحات. هذا تمييز حاسم وغالبًا ما يتم تجاهله من قبل مجموعة فرعية من مصممي الجرافيك الذين يعتقدون أن دورهم هو مجرد تصميم مجموعات من الصفحات والتي سيتم بعد ذلك تمريرها و "تجميعها معًا" بواسطة "شخص تقني".
في خطر إطلاق العنان لعلبة "يجب على المصممين رمز" من الديدان التي ترفع رأسها بشكل دائم ، من الأهمية بمكان للمصممين الذين يعملون في هذه الوسيلة أن يفهموا كيفية عمل الوسيط. لتصميم تجارب لا تُنسى حقًا ، من المهم قضاء بعض الوقت في تعلم مبادئ الرسوم المتحركة. لحسن الحظ ، فإن أدوات مثل Adobe XD تجرد قدرًا كبيرًا من الكود الذي كان على المرء أن يتعامل معه في الماضي لتصميم تجارب تفاعلية غامرة.
عند التصميم للشاشات - وهي وسائط مرنة بطبيعتها - من الأهمية بمكان التفكير في كيفية تفاعل المستخدم مع ما تصممه ، مع الأخذ في الاعتبار كيفية التعامل مع الانتقالات من شاشة إلى شاشة وتقديم ملاحظات قيمة داخل مكونات واجهة المستخدم. نحتاج إلى النظر في التفاعلات الكلية (على مستوى الصفحة) والتفاعلات الدقيقة (على مستوى الكائن).
الانتقال من أ إلى ب
في مقالتي السابقة ، استكشفت كيف يمكننا استخدام قصص المستخدمين للبدء في تعيين المسارات من خلال التصميم الخاص بك على مستوى عالٍ. في هذه المرحلة من العملية ، نحتاج إلى التركيز على كيفية تنقل المستخدمين بين هذه الشاشات ، والانتقال من A → B → C.
في الماضي ، ربما كنا قد انتقلنا ببساطة بين الشاشات مع القليل من الرسوم المتحركة أو بدونها على الإطلاق ، وكانت مقيدة بالأجهزة التي استخدمناها في ذلك الوقت. ومع زيادة قوة المعالجة في أجهزة سطح المكتب والأجهزة المحمولة لدينا ، فقد ازداد عدد الفرص المتاحة لنا لتصميم تجارب أكثر شمولاً.
بالطبع ، نحتاج إلى استخدام هذه القوى المكتشفة حديثًا بضبط النفس ، لكن الأجهزة الموجودة تحت تصرف مستخدمينا توفر لنا الآن الفرصة لتصميم تفاعلات ممتعة. هذا هو السبب في أننا شهدنا زيادة في الاهتمام بالرسوم المتحركة خلال السنوات القليلة الماضية. كمصممين ، نستجيب للأدوات المتاحة لدينا ؛ مع تطور هذه الأدوات ، يجب أن تتطور تصميماتنا أيضًا.
عند تصميم انتقالات بين الشاشات ، نحتاج إلى مراعاة عدد من العوامل ، بما في ذلك:
كيف يبدأ المستخدم الانتقال للانتقال من صفحة إلى أخرى
من خلال النقر على زر أو عن طريق الضرب على الشاشة.ما نوع الانتقال الذي نستخدمه
يذوب ، يمسح ، قشور أو تأثيرات أخرى. سيتم إرسال النقل الذي نختاره إلى المستخدم ، لذلك من المهم اختياره بعناية.إلى متى يستمر الانتقال
هل هي سريعة أم بطيئة؟
عندما نصمم الرحلة من A → B → C ، ستؤثر الخيارات التي نتخذها (أي المحفزات والانتقالات والتوقيتات) على السرد ، لذلك من المهم التفكير فيها. كما هو الحال مع أي رحلة ، فإنها تمر بسلاسة أكبر إذا كانت ممتعة.
سيؤثر نوع المحتوى الذي نصممه أيضًا على هذه القرارات. في بعض الحالات ، نرغب في أن يتحرك المستخدم بشكل أبطأ قليلاً خلال سرد باستخدام الانتقالات والتوقيتات لتسريع الأمور. في حالات أخرى ، نود الابتعاد عن طريق تسريع التحولات.
عندما أطلقت Apple لأول مرة iBooks ، أدى انتقال الصفحة عند قراءة كتاب (تأثير "التفاف الصفحة") إلى إبطاء القراء. كان "التفاف الصفحة" ممتعًا للوهلة الأولى ، ولكن بمجرد رؤيته مئات المرات - عندما كان كل ما أردت فعله هو قراءة كتاب - أصبح الأمر محبطًا للغاية. يؤدي استخدام الميكروثانية في كل صفحة إلى تجربة محبطة.
عند تصميم انتقالات بين الشاشات ، من المهم عدم إغفال الوظيفة الأساسية. في نهاية المطاف ، هدفنا هو إسعاد مستخدمينا ، وليس إحباطهم .
يمكن أن تكون الرسوم المتحركة مبهجة بالطبع ، ولكن ليس إذا كانت على حساب الوظائف. تكتب Sophie Paxton عن هذا الموضوع بالذات في مقال ممتاز بعنوان Your UI isn't a Disney Movie ، والذي يسلط الضوء على كيف أن الرسوم المتحركة المجانية وواجهات المستخدم المتحركة بشكل مفرط يمكن ، إذا لم نكن حذرين ، أن تحبط المستخدمين. إنها تستحق القراءة.
التعامل مع الكائنات
من خلال تفاعلاتنا الكبيرة ، على مستوى الصفحة المحددة ، حان الوقت لتحويل انتباهنا إلى التفاعلات الدقيقة على مستوى الكائن.
مثلما نحتاج إلى مراعاة جميع العوامل التي تضيف ما يصل لتسهيل انتقال المستخدمين من صفحة إلى أخرى ، من المهم أيضًا الانتباه إلى تسهيل تفاعلات المستخدمين مع كائنات معينة داخل صفحاتنا. قد تشمل هذه الأزرار وحقول النموذج وعناصر أخرى حيث يمكن أن تساعد الرسوم المتحركة الحكيمة في تقديم ملاحظات لمستخدمينا.
يعد تقديم التغذية الراجعة المرئية أمرًا مهمًا للغاية في تصميم واجهة المستخدم: فهو يريح أذهان المستخدمين من خلال توفير إشارة تفيد بأن أفعالهم قد تم الاعتراف بها . عندما أقوم بالنقر فوق مفتاح الضوء في "العالم الحقيقي" ، أتلقى تعليقات من خلال سماع نقرة مرضية بالإضافة إلى نتيجة تشغيل الضوء أو إيقاف تشغيله. تتيح لي هذه التعليقات معرفة ما يحدث.
يمكننا تحسين تصميمات واجهة المستخدم من خلال تطبيق هذه الدروس من العالم الواقعي إلى عالم الشاشات. يجب أن تستجيب واجهة المستخدم المصممة جيدًا لإجراءات المستخدم ، مما يتيح لهم معرفة أن أفعالهم لها التأثير المطلوب ، مما يريح أذهانهم. هذا هو المكان الذي يمكن أن تلعب فيه الرسوم المتحركة دورًا مهمًا.
توفر مواقع مثل UI Movement ثروة من الإلهام ، حيث تعرض أمثلة فعالة للرسوم المتحركة المطبقة على واجهات المستخدم. من المهم التفكير في كيفية تقديم الملاحظات وفي أي سياق ، على سبيل المثال:
عندما تطلب كلمة مرور ، من المفيد الإشارة إلى قوة كلمة المرور أو ضعفها حيث يقوم المستخدم بإدخال المعلومات (اكتشاف فقط لاحقًا أن كلمة المرور ضعيفة للغاية أمر محبط).
عندما يتفاعل المستخدم مع زر ، فإنه يساعد في تقديم ملاحظات ، مما يسمح للمستخدم بمعرفة أن أفعاله قد تم الاعتراف بها.
عند التفاعل مع منتقي التواريخ والتقويمات ، هناك مجال كبير لتقديم ملاحظات مفيدة.
السيناريوهات المذكورة أعلاه ليست سوى غيض من فيض. في أي مكان يُطلب من المستخدم الخاص بك التفاعل مع العناصر الموجودة على الصفحة هو فرصة للنظر في استخدام الرسوم المتحركة لتقديم ملاحظات مفيدة. بالطبع ، كما أشرت أعلاه ، واجهة المستخدم الخاصة بك ليست أحد أفلام ديزني ، لذلك لا تسرف!
أخيرًا ، تجدر الإشارة إلى أن الرسوم المتحركة ليست مناسبة للجميع ويمكن - بالنسبة لبعض الأشخاص - أن تسبب مشاكل. بالنسبة للمستخدمين الذين يعانون من اضطرابات دهليزية ، يمكن أن تسبب الحركة دوارًا أو غثيانًا ، لذلك من المهم مراعاة إمكانية الوصول عند استخدام الرسوم المتحركة.
قد تكون فكرة تقديم خيار للمستخدمين ، ومن الرائع أن ترى مواقع مثل CodePen World's Fair تنبه المستخدمين إلى استخدامها للرسوم المتحركة وتعرض عليهم خيار الاستمرار في الوصول إلى الموقع مع الرسوم المتحركة أو بدونها. يعتبر هذا النوع من الاعتبار أمرًا رائعًا لرؤية: برافو لإمكانية الوصول!
في الختام
عند تصميم واجهة المستخدم الخاصة بك ، من المفيد أن يكون لديك نظام في مكانه. هذا يضمن أن كل ما تقوم ببنائه يعتبر متسقًا. سيساعدك البدء بجرد الواجهة - خاصةً عند إعادة زيارة منتج موجود كجزء من إعادة التصميم - على تحديد النقاط التي تحتاج فيها واجهتك إلى العمل. بمرور الوقت ، من الطبيعي أن تتسلل التناقضات ؛ توفر هذه الأداة طريقة مثالية لتحديد هذه.
عندما يحين وقت إنشاء واجهتك ، اقض بعض الوقت في إنشاء نظام تصميم مدروس. لا يضمن هذا اتساق تصميمك فحسب ، بل يساعد أيضًا في إبقاء فريقك على نفس الصفحة ويزود أي مستقلين يعملون في المشروع بالإرشادات التي يحتاجون إليها في موقع مركزي واحد.
أخيرًا ، من المهم التفكير في تصميم تفاعلاتك ورسومك المتحركة. بصفتنا مصممين يعملون للشاشات ، من المهم أن نفكر في كيفية استجابة ما نصممه لتفاعلات المستخدمين. نحن ، بعد كل شيء ، نصمم من أجل وسيط مرن ، فلنستخدم هذه المرونة لصالحنا! من خلال ربط كل ما سبق معًا ، ستحصل على أسس نهج واجهة مستخدم متين سيصمد أمام اختبار الزمن.
واقترح ريدينج
هناك العديد من المنشورات الرائعة ، سواء كانت متصلة بالإنترنت أو غير متصلة بالإنترنت ، والتي ستساعدك في مغامرتك. لقد قمت بتضمين القليل أدناه لبدء رحلتك.
ألَّا خولماتوفا كتابًا ممتازًا عن أنظمة التصميم ، أوصي به بشدة. يستكشف كيف يمكن لبناء أنظمة تصميم فعالة أن يمكّن الفرق من إنشاء منتجات رقمية رائعة.
كتب براد فروست بإسهاب عن عملية إجراء قوائم جرد الواجهة. وقد كتب أيضًا كتابًا جيدًا جدًا ، Atomic Design ، والذي يركز على إنشاء أنظمة تصميم واجهة فعالة. Frost هو ملف تعريف ارتباط ذكي ، وأنا أوصي بشدة بوضع إشارة مرجعية على مدونته.
إذا كنت مهتمًا بمعرفة المزيد حول تصميم التفاعلات والرسوم المتحركة ، فإنني أوصي بشدة بالرسوم المتحركة لـ Val Head وموارد UX. يدير Head ورش عمل ولديه رسالة إخبارية ممتازة عبر البريد الإلكتروني أيضًا.
إذا كان الويب هو الوسيط الخاص بك وكنت جديدًا في عالم الرسوم المتحركة ، فقم بإسقاط كل شيء والاشتراك في دورة الرسوم المتحركة CSS لـ Donovan Hutchinson. إنها دورة ممتازة ، وأسلوب التدريس في هاتشينسون لا يعلى عليه.
هذه المقالة جزء من سلسلة تصميم UX التي ترعاها Adobe. تم تصميم Adobe XD لعملية تصميم UX سريعة وسلسة ، حيث يتيح لك الانتقال من الفكرة إلى النموذج الأولي بشكل أسرع. التصميم والنموذج الأولي والمشاركة - كل ذلك في تطبيق واحد. يمكنك الاطلاع على المزيد من المشاريع الملهمة التي تم إنشاؤها باستخدام Adobe XD على Behance ، وكذلك الاشتراك في النشرة الإخبارية لتصميم تجربة Adobe للبقاء محدثًا ومطلعًا على أحدث الاتجاهات والرؤى لتصميم UX / UI.