Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Wireframing

دليل المبتدئ للتخطيط الشبكي

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

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

A simple wireframe

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

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

a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

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

مثل أساسات البناء، يجب أن يكون قويا قبل التفكير بإعطائه تغطية مكلفة من الدهان.


الخطوة 1: الحصول على الوحي

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

I Heart Wireframes

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

cnncom with wirify

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


الخطوة 2: تصميم عمليتك

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

Wireframes Process

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

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

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

the 12-column cssgrid template

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

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

سبب استخدامي إلوستريتور عادة كأداة للتخطيط الشبكي عائدة لثلاثة أسباب:

  1. الأساليب – يمكنك حفظ أسلوب ونوع العنصر وإعادة استخدامها كليا، كثل css.
  2. من السهل تعديله، تحريك أو إعادة قياس العناصر المتعددة.
  3. يؤمن طريقة نقل سهلة لفوتوشوب لاحقا.

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


الخطوة 3: اختيار أدواتك

إليك بعض الأدوات الشائعة وبترتيب غير محدد:

بالساميك

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

Sample Balsamiq wireframe from the Balsamiq website

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

أومنيغرافل

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

youll like omnigraffle if you enjoy using beautiful stencils like this one

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

أكسور

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

فليربيلدر

وهو قادم جديد، يمتلك فليربيلدر دعما قويا للتفاعل.

from show hide to if-else interactions

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

تطبيقات الانترنت

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

كينوت/ بوربوينت

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

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

أدوب CS

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

فايرووركس

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

إلوستريتور

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

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

إنديزاين

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

Have you seen the interactive controls of InDesign

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

فوتوشير

"النمذجة القوية بأسلوب سهل". صدرت النسخة 9 مؤخرا مع لوحة ألوان جديدة مطابقة لما تراه. يستحق الاطلاع عليه.


الخطوة 4: إعداد شبكة

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

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

بداية، اضبط حجم المستند. استخدمت 1280×900 لأنني سأستخدم cssgrid والتي تسمح بتغيير مقاس موقعي الالكتروني بين دقة الهاتف المحمول إلى قيمة عظمى من 1140 بيكسل بسهولة.

ضع القالب المحمل من ccsgrid في مستندك.

ملاحظة:

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


الخطوة 5: حدد المخطط بواسطة الصناديق

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

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

هذا مخطط لمدونة، مع وجود حاويات منتقاة بعناية للإعلان وتعليمات مخصصة للزبون:


الخطوة 6: تحديد هرمية المعلومات مع الخطوط

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

ببساطة يعد استخدام قياسات خطوط مختلفة كنقطة بدء طريقة جيدة للتمييز بين المستويات المختلفة من المعلومات.

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

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

الخطوة 7: الضبط النهائي بدرجات الرمادي

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


الخطوة 8: المخطط الشبكي عالي الدقة

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

كما قد تحتوي الألوان:

الأفكار العامة هي أنه في مرحلة الكود/ المرئي سترغب بأن تكون في نمط الصقل ولن تعود في مرحلة الخربشة والتجربة. أنهي دورة المحاولات (استجابة <-> مخطط شبكي) بأسرع ما يمكن في تطبيق المخطط الشبكي الذي ترتاح للعمل معه، بدلا من تحريك البيكسلات والطبقات في فوتوشوب.

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

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


الخطوة 9: نقل المخطط الشبكي إلى المرحلة المرئية

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

Photoshop Export Options

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

Webwise 2010

خلاصة

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

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

من فضلك تمتع بالحرية لطرح الأسئلة التي تريدها في التعليقات، شكرا للقراءة!


مصادر إضافية

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.