أفضل الموارد لرسم شبكة Wireframes القائم

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

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

مفهوم UI / UX المبكر

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

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

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

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

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

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

أهداف ل Wireframing

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

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

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

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

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

شبكة Sketchpads

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

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

هناك العديد من المنتجات الرائعة هناك إذا كنت ترغب في ذلك بدء wireframing على الورق, على سبيل المثال تأتي لوحة Rhodia Dot Pad بأحجام مختلفة للاستخدام اليومي. إنه يأتي مع 80 صفحة فقط ولكن هذا نموذجي إلى حد ما لمعظم كراسات الرسم الشبكي.

منتج رائع جدًا وقابل للتخصيص هو Dotgrid. جميع سلع Dotgrid أغلى من كتب Rhodia ، ولكنها تأتي مع المزيد من المواد وتصميمات الأغطية المخصصة.

تقبل Dotgrid حتى الأوامر المفصلة التي تتيح لك تصميم لوحة الرسم المخصصة الخاصة بك. يحتوي كل كتاب على أقل من 100 ورقة ، لذا ، بما في ذلك الجزء الأمامي والخلفي ، تحصل على حوالي 200 صفحة لرسم الشبكة.

من بين رسومات كراش شبكة نقاط أخرى أود أن أذكرها ، تشمل شبكة Behance Dot Grid التي تحتوي على غلاف مجلّد وملتوي حلزوني ، على الرغم من أنها تحتوي على 50 ورقة.

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

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

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

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

تأتي الشبكات بأحجام A4 ورسالة أمريكية لأنماط مختلفة من ورق الطابعة. يمكنك الاختيار من بين العديد من الخيارات ، مثل القوالب لمستعرض ويب كامل الطول أو شاشات iPhone مختلفة.

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

الأدوات الرقمية وتطبيقات الويب

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

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

1. Moqups

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

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

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

2. شبكة Papr

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

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

3. Wireframe.cc

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

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

4. الطائر المحاكي

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

الطائر المحاكي لديه مكتبة لا نهاية لها من عناصر واجهة المستخدم مثل علامات التبويب ، الأكورديونات ، القوائم المنسدلة ، مشغلات الفيديو ، والروابط النصية البسيطة. تستخدم الشبكة الافتراضية نظام الشبكة 960g ، لكن يمكنك الاختيار من بينها 12 و 16 و 24 عمود.

الكلمات الأخيرة

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

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

(صورة الغلاف لأويكون يلماز)