دليل المحترفين لتصميم واجهة المستخدم

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

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



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



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

ماذا يفعل مصمم واجهة المستخدم؟

تصميم واجهة المستخدم: المجالات الرئيسية



يمكن تقسيم مهمة مصمم واجهة المستخدم تقريبًا إلى أربعة مجالات رئيسية

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

التواصل مع العميل

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



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

أثناء المشروع ، لا يتوقف الاتصال. كمصمم ، سوف تقدم عملك باستمرار. نحن في شركتنا فريق عمل عن بُعد ، لذلك ليس لدينا الكثير من الاجتماعات الشخصية. بدلاً من ذلك ، نستخدم مشاركة الشاشة بشكل مكثف من خلال مؤتمرات الفيديو. يتم استخدام أدوات الاتصال مثل Skype و Slack كل يوم.

من المفيد الجمع بين طرق الاتصال المتزامنة وغير المتزامنة. تعتبر المكالمة رائعة إذا كنت بحاجة إلى الكثير من المعلومات بسرعة ، ولكن يجب أن تكون متواجدًا في نفس الوقت. نعتقد أن Slack هو 'مبرد المياه الافتراضي' الخاص بنا ونستخدم Basecamp لإدارة مشاريع التصميم المعقدة. عندما نصمم نماذج أولية باستخدام HTML و CSS ، فإننا نستخدم GitHub Issues لمناقشة التعليمات البرمجية مباشرة.

بحث

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

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

يمكن أن يكون البحث واسعًا جدًا. غالبًا ما أختبر أجهزة جديدة لأغراض البحث أو اشترك في تطبيق ويب جديد لدراسة واجهة المستخدم الخاصة به.

التصميم والنماذج

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

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

تتضمن بعض أنظمة التشغيل برامج تحرير الفيديو والصوت.

تصميم واجهة المستخدم: الأدوات

بعض الأدوات التي نختارها: Sketch و Illustrator و InVision

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

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

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

الأدوات هي اختيار شخصي للغاية. طالما أنه يمكننا العمل معًا بسهولة ، فلكل فرد الحرية في اختيار ما يناسبه. لتسهيل التحدث عن تصميماتنا مع العملاء ، نصنع نماذج أولية باستخدام InVision. ومع ذلك ، لمزيد من النماذج الأولية المتقدمة ، نستخدم HTML و CSS. تعتمد الأداة التي تحتاجها جميعًا على الوظيفة التي تريد القيام بها بها.

تواصل المطور

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

تصميم واجهة المستخدم: gov.uk

يوفر GOV.UK دليلًا لتمكين المستخدمين من جعل خدمتهم متوافقة مع الموقع الرئيسي

يأتي توصيل التصميم بأشكال عديدة: المواصفات التفصيلية ، وتوفير الأصول ، ومراجعة التصميم معًا. ما هو منطقي لتقديمه في كل حالة يعتمد إلى حد كبير على ما إذا كان المشروع أصليًا أو تطبيق ويب.

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

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

الويب مقابل التطبيقات الأصلية

عند تصميم تطبيق محلي لمنصة (مثل iOS أو Android) ، فإنك تميل إلى الالتزام بإرشادات معينة. عندما تصمم للويب ، لا يوجد الكثير من الإرشادات. ما يحدث عادةً هو أن عميلك لديه مجموعة من الإرشادات الرسومية لعلامته التجارية التي تحدد كيف يجب أن تبدو الأشياء.

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

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

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

في تصميم الويب ، أنت مقيد أكثر بالقدرات التقنية للويب. كان من المعتاد أنه سيكون من الصعب تنفيذ ازدهار بصري بسيط مثل الزوايا الدائرية على موقع ويب. لقد ولت هذه الأيام منذ فترة طويلة - فأنت الآن حر في رسم واجهات المستخدم مع الكثير من الظلال والانتقالات والرسوم المتحركة وحتى ثلاثية الأبعاد.

كمصمم ، من الواقعي التحكم في العملية والتصميم في المتصفح. لم أرَ العديد من مصممي واجهة المستخدم يتولون برمجة واجهة المستخدم لتطبيق أصلي ، لكن المصمم الذي يقوم بـ HTML و CSS لتطبيق ويب هو أمر شائع. إذا كان بإمكانك ترميز تصميماتك الخاصة ، فستتفوق على أقرانك الذين لا يقومون بالترميز ، وهي بالنسبة لي الطريقة الوحيدة لفهم كيفية عمل الويب حقًا.

قيود الويب

ستكتشف قريبًا أنه ليست كل الحيل الرائعة التي تتعلمها مدعومة في كل متصفح ، وهذه هي حقيقة التصميم للويب. من الجيد اتباع المبادئ المعروفة مثل التحسين التدريجي ، حيث تقوم بتحميل محتوى محسّن كلما أمكن ذلك ، ولكن عليك أيضًا التفكير في كيفية تدهور المحتوى.

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

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

تحسين مجموعة مهاراتك

لذا ، كيف يمكنك مواكبة صناعة الويب سريعة الحركة وتحسين مجموعة مهاراتك؟ لنلقِ نظرة على بعض الطرق المختلفة لتعزيز مهاراتك ...

منصة المعرفة

الجمعة السوداء ماك بوك برو صفقات 2016

جزء كبير من ترسانة المصمم هو المعرفة بالمنصة. يجب أن تعرف أنظمة التشغيل المختلفة وكيف يستخدمها الناس. بصفتنا مصممين ، نميل إلى استخدام أجهزة Mac ، ولكن بعد ذلك يسهل نسيان أن غالبية الناس يستخدمون مربعات Windows لإنجاز عملهم.

أشعر أنه لا يمكنك فهم شيء ما حقًا إلا إذا كنت تستخدمه بنفسك. أفضل استخدام جهاز Mac الخاص بي للتصميم ، ولكني أقضي الكثير من الوقت في متابعة تطور العديد من الأنظمة الأساسية الأخرى. لدي عدة نسخ من Windows مثبتة على جهاز Mac الخاص بي كأجهزة افتراضية. لقد كنت مشغولًا باختبار الإصدارات الجديدة من Windows 10 باستخدام برنامج Insider من Microsoft للتحقق من التغييرات المختلفة في واجهة المستخدم.

أشتري أيضًا أجهزة جديدة بانتظام لاختبار كيفية عملها. اشتريت Apple Watch فقط لاختبار النظام الأساسي. ثم بعتها لأنني شعرت أنها لا تضيف الكثير إلى حياتي.

علاوة على ذلك ، يمكن اعتبار الويب على أنه نظام التشغيل الخاص به. إنه يتطور باستمرار ، مع إضافة ميزات جديدة إلى كل بائع متصفح كل أسبوع. من المفيد للغاية معرفة الجوانب الفنية للمتصفحات ، خاصة فيما يتعلق بقدرات CSS والرسومات. أنت بحاجة إلى معرفة SVG و WebGL ، وكيف يمكنك استخدام Web Animations API.

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

العودة إلى الأساسيات

ما نكافح معه اليوم لا يختلف كثيرًا عما كنا نكافح معه منذ 20 عامًا. هناك الكثير من النصائح الجيدة في الكتب. جرّب التصميم الدفاعي للويب بواسطة Jason Fried و Matthew Linderman ولا تجعلني أفكر بواسطة Steve Krug كبداية.

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

احصل على الإلهام من الألعاب والأفلام

تصميم واجهة المستخدم: Skyrim

واجهة المستخدم لعام 2006 Oblivion (على اليسار) زخرفية أكثر بكثير من واجهة Skyrim (على اليمين) ، والتي تم إصدارها في عام 2011

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

يمكن أن تشير الألعاب أيضًا إلى الاتجاهات. يذكرني البساطة الموجودة في قوائم Colin McRae Rally باتجاه نظام iOS7. بطريقة ما ، كان تصميم الرسوم المتحركة لواجهة المستخدم الذي أصبح الآن عصريًا يظهر في الألعاب منذ سنوات وسنوات. كان الانتقال من skeuomorphism إلى الواجهات الوظيفية المجردة و 'التصميم المسطح' واضحًا في الألعاب أيضًا. قارن فيلم Oblivion 2006 مع Skyrim لعام 2011. كلتا اللعبتين عبارة عن ألعاب تقمص أدوار في نفس السلسلة ، ولكن الفرق مذهل.

كانت الواجهات المستقبلية في أفلام Marvel مثل Iron Man مصدر إلهام لي أيضًا. إنها ليست أمثلة قابلة للاستخدام بالضبط ، لكنها تجعلني أفكر أكثر في الحوسبة ككل. هل نريد مستقبلًا من الشاشات أم نريد اختفاء الشاشات؟ ربما يكون هذا سؤالًا جيدًا يجب طرحه في حانة مليئة بالمصممين.

تنمو كمصمم من خلال العمل الجاد والمثابرة والتحدث إلى زملائك وقراءة الكثير. منذ حوالي عام قرأت مقالاً في صحيفة نيويورك تايمز عن أشخاص في الثمانينيات من العمر يواصلون صقل حرفتهم. أشعر أنني بدأت للتو. وماذا عنك؟

مقالات ذات صلة:

  • قابل الفريق الذي يدفع الويب إلى الأمام وتحسين العلاقات مع العملاء
  • لماذا يجب أن تكون متحمسًا بشأن صفر UI
  • 7 أدوات UX لتجربتها هذا العام