كيف تنجح في تصميم الهيكل السلكي

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

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

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

أولاً ، دعنا نحدد الشروط

Wireframe - يُعرف أيضًا باسم مخطط الصفحة أو مخطط الشاشة ، وهو دليل مرئي يمثل الإطار الهيكلي لموقع ويب أو تطبيق.

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

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

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

من تعريف الهدف يمكننا أن نرى مدى تأثير الإطارات الشبكية على كل من عملية التطوير والمنتج النهائي.

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

أخطاء الإطارات الشبكية التي نريد تجنبها

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

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

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

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

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

لماذا يجب عليك تصميم إطارات سلكية

ساعد فريقك في تقدير نطاق العمل وتحسينه

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

قم بإشراك جميع أعضاء الفريق في مرحلة تصميم المنتج

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

عقد عرض تجريبي للعملاء

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

قم بإجراء اختبار المستخدم

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

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

أفضل ممارسات التخطيط الشبكي

لتحقيق أفضل النتائج وتقديم أساس متين لمزيد من واجهة المستخدم ، عليك اتباع عدة قواعد بسيطة:

1. قلل من استخدام الألوان في الإطارات الشبكية

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

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

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

2. استخدام تصميم بسيط للمكونات

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

3. الحفاظ على الاتساق

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

4. استخدم المحتوى الحقيقي

من وقت لآخر ، يمكننا أن نرى أن مصممي UI / UX لا يضيفون محتوى حقيقيًا على الإطارات السلكية ويستخدمون lorem ipsum بدلاً من ذلك. هذا خطأ شائع يدرك قلة من المصممين أنهم يرتكبونه. يمكنك الاعتراض وتقول إن المحتوى غير متوفر في مرحلة التصميم. حسنًا ، يكفي استخدام الإصدار التمهيدي للمحتوى.

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

5. استخدم التعليقات التوضيحية

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

6. منخفضة إلى عالية الدقة

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

7. تمديد الإطارات السلكية للنماذج الأولية

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

الخبر السار هو أنه لدينا اليوم مجموعة واسعة من الأدوات البسيطة ولكن القوية جدًا مثل Figma و Invision و Adobe XD و UXPin و Axure و Moqups وما إلى ذلك ، ونحن بالتأكيد بحاجة إلى مراجعتها واختيار أفضل أداة لتصميم الإطارات السلكية و تطوير نماذج أولية بسيطة.

أدوات تصميم الهيكل السلكي

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

تم تصميم معظم أدوات الهيكل السلكي من أجل:

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

فيما يلي أكثر أدوات التخطيط الشبكي استخدامًا والمصممة خصيصًا للتعاون:

• فيجما
  أداة قوية قائمة على السحابة تتوفر في إصدار الويب وتطبيقات سطح المكتب لنظامي التشغيل Windows و macOS. تأتي Figma مع الكثير من الميزات القوية لبناء الإطارات السلكية والنماذج الأولية وواجهة المستخدم والمزيد (انظر الجدول أدناه).
• رسم
  تحظى هذه الأداة بشعبية كبيرة لدى مصممي UI / UX. إذا كنت بحاجة إلى تجاوز مجموعة أدوات Sketch الافتراضية ، فيمكنك استخدام العشرات من المكونات الإضافية للحصول على وظائف إضافية. على عكس العديد من منافسيها ، يتوفر Sketch فقط على macOS وستحتاج إلى حل جهة خارجية للتعاون.

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

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

دراسة حالة: كيف نقوم بإعداد عملية التخطيط الشبكي عبر فرق متعددة

سياق الكلام

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

انتقاء الأداة

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

إنشاء مكتبة المكونات

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

تدريب الفريق

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

نتيجة

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

تلخيص لما سبق

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

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

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

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

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

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