كل ما تحتاج لمعرفته حول رسم UX

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

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

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

في هذا المنشور ، أعتزم تغطية كل ما تحتاج لمعرفته حول رسم UX ، بما في ذلك النقاط التالية:

• مقدمة لمخططات UX والإطارات الشبكية
• أساسيات وأدوات وتقنيات رسم UX
• توضيح الرسومات مع الملاحظات والتعليقات التوضيحية والأرقام
• نصائح وحيل رسم UX
• طرق مصغرة مصممة لتعزيز الجودة والإنتاجية
• كل ما تحتاج لمعرفته حول Wireflows
• دليل سريع لرسم تخطيط تدفق UX

رسم UX هو عملية من خطوتين

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

• توليد الأفكار

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

• إضافة التفاصيل والصقل

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

اسكتشات UX والأطر الشبكية: مقدمة وتصنيف

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

لقد خصصت أنواع الرسومات التالية:

• سكتش: توليد الفكرة

هذه رسومات أولية. يتم تسجيل التفاصيل ذات المستوى الأدنى ببساطة. تم استخدام عدد محدود من الألوان.

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

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

• الهيكل السلكي: المواصفات ، المرحلة التفصيلية

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

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

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

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

• مسودة التصميم المرئي

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

• المكونات / تفصيل العناصر

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

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

الابتداء مع الأساسيات

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

الآن ، أنت جاهز تمامًا ويمكنك البدء:

• ارسم الحواف. ارسم الإطارات أو المستعرض أو نافذة الهاتف وجزءًا من الواجهة وما إلى ذلك.

• أضف أكبر العناصر أو العناصر الأساسية: القائمة والتذييل والمحتوى الرئيسي.

• أضف التفاصيل. أضف التفاصيل ذات الصلة ، ولكن اجعلها بسيطة في هذه المرحلة.

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

• بدائل التخطيط. ارسم بعض البدائل السريعة للحل الخاص بك.

• اختر أفضل حل. اختر أفضل الخيارات.

• أضف الظل والشطبة. هذا مهم بشكل خاص لأغراض المشاركة. أضف ظلًا لجعل الرسم الخاص بك جذابًا بصريًا ، وهو أمر مهم إذا كنت تخطط لمشاركته مع أعضاء الفريق و / أو العملاء.

• احفظ الرسم. التقط صورة أو ضعها في مجلد. لدي بعض الأدراج الورقية على طاولتي للرسومات التخطيطية.

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

توضيح الرسومات مع عناصر إضافية

ابحث عن رسم تخطيطي مناسب أو ارسمه ، ثم أضف التفاصيل التالية إليه:

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

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

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

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

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

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

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

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

المزيد من النصائح والحيل المحددة

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

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

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

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

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

6. صواني الورق. فكر في وضع صواني الورق على منضدة العمل. على سبيل المثال ، لدي ثلاثة منهم: للمهام الواردة ، للرسومات ، وأوراق نظيفة.

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

8. استخدم القوالب. ستوفر القوالب الوقت وستأخذ في الاعتبار قيود التنسيق ضمنيًا ، مما يوفر مزيدًا من الوقت للتركيز على ما هو مهم.

طرق مصغرة إضافية لتحسين رسوماتك

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

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

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

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

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

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

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

تدفق الأسلاك: تحديد تدفق النظام والتفرع

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

يمكن تنظيم Wireflow ، أو ما ترسمه وطريقة توصيله ، وفقًا للطرق التالية:

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

أحاول بشكل عام تحديد أنواع التدفق السلكي التالية ، اعتمادًا على التنظيم والاستخدام العملي:

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

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

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

4. حالات الشاشة. ارسم الشاشة أو حالات العنصر (مثال قد يكون حوار تحميل ملف). في هذه الحالة ، على سبيل المثال ، ستحتوي الشاشة على الحالات التالية:

   • فارغ
   • يقوم المستخدم بسحب الملف في المنطقة النشطة
   • يتم تحميل الملف
   • تم تحميل الملف
   • هنالك خطأ

رسم تدفق UX: دليل إرشادي سريع

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

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

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

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

قرر ما سيأتي بعد ذلك. بعد رسم خطوات البداية ، حدد ما سيحدث بعد ذلك بالإجابة على الأسئلة التالية:

• ما هي الطريقة التي تقود بها هذه الخطوة المستخدمين؟
• في أي طريق تريدهم أن يذهبوا؟
• ماذا عليهم أن يفعلوا للوصول إلى هناك؟

رسم طرق بديلة ، مداخل. فكر في طرق بديلة يمكن للمستخدم من خلالها الوصول إلى كل خطوة:

• ماذا سيحدث إذا فشل اتصال المستخدم بالإنترنت؟
• ما هي الخيارات الأخرى التي لديهم؟
• ما الخطأ الذي يمكن أن يحدث في حالة خطأ المستخدم أو التطبيق ، ماذا سيحدث؟
• ماذا سيحدث إذا أغلق المستخدم التطبيق في هذه الخطوة؟
• من أين سيبدأ المستخدم في المرة القادمة التي يقوم فيها بتشغيل التطبيق؟

فكر في التدفقات البديلة. تحليل التاريخ وتصميم تدفق بديل ورسمه.

أضف التعليقات التوضيحية والملاحظات والتفاصيل. أضف العناصر التوضيحية التي ستوضح التفاصيل غير الواضحة.

يحفظ. قم بعمل نسخة رقمية من الرسم التخطيطي.

يشارك. شارك الرسم التخطيطي (على سبيل المثال ، عبر Evernote أو InVision).

نصائح وحيل أساسية لرسم UX Flow

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

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

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

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

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

استخدم القوالب. حاول استخدام القوالب. ستوفر الوقت وستمكنك من إنشاء المزيد من النماذج الأولية عالية الجودة والقابلة للنقر.

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

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

• الخطوط التي تتبع اتجاه الضوء - لا يبدو هذا جميلًا دائمًا ، ولكن يمكنك استخدام التدرج واختيار الأشياء إلى "ارتفاعات" مختلفة.
• تحديد جزء ما بلون أغمق (فقط الجزء السفلي أو السفلي والجانب الأيمن)
• استخدام Pro-marker (أو ما يعادله في التطبيق الذي تستخدمه للرسم)

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

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

يتم إحتوائه

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

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

الأمر متروك لك لاختيار النصائح والتقنيات التي ستكون الأنسب لمشروعك ونهجك في التصميم. هل لديك أي نصائح رسم إضافية لزملائك من مستخدمي UX؟ لا تتردد في مشاركتها في قسم التعليقات.

• • •

مزيد من القراءة على مدونة Toptal Design:

• تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
• أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• مبادئ ارشادية للواجهات المتنقلة
• التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية