الشكل والوظيفة - دليل لأفضل أدوات الهيكل الشبكي

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

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

ولكن ما هو الهيكل السلكي في التصميم ، وما الغرض من وجوده؟

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

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

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

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

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

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

أفضل أدوات التخطيط الشبكي

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

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

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

بلسمق

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

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

يتم تقديم Balsamiq كإصدار سطح مكتب (Windows و Mac) ، أو خدمة سحابية ، أو كمكوِّن إضافي لـ Google Drive ، و Confluence ، و JIRA.

موكبس

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

الفرق الرئيسي بين Moqups و Balsamiq هو دقة الإطارات السلكية. بينما ينتج Balsamiq مظهرًا "مرسومًا باليد" ، توفر Moqups قوالب استنسل بالألوان الكاملة وأطقم لتطبيقات الهاتف المحمول وتصميم الويب بما في ذلك iOS و Android و Bootstrap.

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

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

بيدوكو

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

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

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

غليفي

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

مثل أدوات التخطيط الشبكي الأخرى ، يوفر Gliffy مكتبة من الأشكال والأيقونات والقدرة على مشاركة الإطارات الشبكية محليًا مع Atlassian's Confluence و Slack و Basecamp و Trello و WordPress.

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

Wireframe.cc

Wireframe.cc هي أداة تخطيط شبكي أساسية تشبه إلى حد كبير Balsamiq. يحتوي على واجهة نظيفة بدون الكثير من أشرطة الأدوات والرموز المشتتة للانتباه. على عكس الكثير من الأدوات الأخرى ، فإنه يسمح لك "برسم" إطارات سلكية باستخدام الماوس.

يوفر Wireframe.cc مكتبة من الإستنسل ومعالجة نظيفة وغير معقدة للكائنات. أحد العناصر المفيدة التي يقدمها Wireframe.cc عند العمل باستخدام lean UX ، هو عنوان URL لكل صفحة إطار سلكي بحيث يمكن مشاركتها للحصول على تعليقات بسرعة وسهولة.

لا توجد نماذج أولية أو تفاعلية مضمنة لأنها تركز فقط على إطارات سلكية منخفضة الدقة.

مرح

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

مثل Gliffy ، Whimsical هي أداة تخطيط سلكي متوسطة الدقة وتتضمن مكتبة كبيرة من العناصر القابلة للتكوين (الأزرار والمدخلات ومربعات الاختيار وما إلى ذلك).

يعد التعاون غير المحدود على نفس مستند الإطار السلكي في نفس الوقت ميزة مضمنة رائعة لفرق التصميم عن بُعد.

Adobe XD

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

هناك طريقتان لإنشاء إطارات سلكية في Adobe XD. يمكن بناؤها باستخدام الخطوط والأشكال لإنشاء كائنات وعناصر ، أو يمكن بناؤها باستخدام مجموعات UI معدة مسبقًا من مصادر مثل behance.net و XD Resources.

ميزة واحدة لتوفير الوقت في Adobe XD هي القدرة على إنشاء مكونات "رئيسية" (تسمى الرموز في Sketch) ، والتي تكون مفيدة عند إجراء التغييرات لأن جميع المكونات التي تم إنشاء مثيل لها من البرنامج الرئيسي سترث أي تغييرات.

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

رسم

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

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

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

UXPin

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

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

يوجد إصدار Windows و macOS وسحابة / متصفح. بالنسبة للإطارات السلكية عالية الدقة ، يعمل UXPin كثيرًا مثل Sketch و Adobe XD. إنه ليس السحب والإفلات مثل Balsamiq ، ولكنه يأخذ النماذج الأولية والنماذج بالأحجام الطبيعية إلى المستوى التالي للمصممين الذين يتطلعون إلى البقاء ضمن نظام بيئي واحد.

أعجوبة

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

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

أحد الأسباب التي تجعل المصممين يختارون Marvel for wireframing هو تكاملها مع منصات أخرى مثل Jira و Sketch و Confluence و Dropbox و Slack وغيرها الكثير. من أجل التعاون مع المطورين وفرق التصميم عن بُعد والعملاء ، توفر هذه الميزة الكثير من الوقت للمصممين.

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

المحور RP

كان Axure RP موجودًا منذ فترة طويلة وهو أداة رائعة لإنشاء إطارات سلكية ثابتة (بالإضافة إلى نماذج أولية تفاعلية للغاية). لا يعتمد على السحابة على الرغم من أنه يعمل على كل من Windows و macOS.

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

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

أدوات الإطار السلكي المفضلة لمصممي Toptal

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

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

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

"أستخدم Axure إلى حد كبير طوال الوقت في أعمال التصميم الخاصة بي. إنها أداة تم التقليل من شأنها إلى حد كبير لأعمال التصميم الشاملة ، مع درجة عالية من التعقيد "- Andi Omtvedt

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

ملخص

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

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

على الرغم من أنها تطورت من تسليم منخفض الدقة إلى تسليم متوسط ​​أو عالي الدقة ، فمن المؤكد أن Wireframing لن يختفي.

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

• رسم خرائط الإطار السلكي: كيفية تجنب زحف النطاق
• الموت للهيكل السلكي. مباشرة إلى الدقة العالية!
• مواجهة أداة التصميم - Adobe XD مقابل Sketch (2019)
• أتقن حرفتك باستخدام أفضل أدوات تجربة المستخدم هذه
• أفضل 10 تسليمات لتجربة المستخدم يستخدمها كبار المصممين