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

دليل المبتدئ للتخطيط الشبكي في أومنيغرافل

by
Read Time:7 minsLanguages:
This post is part of a series called UX Foundations.
A Beginner’s Guide to Wireframing
Defining And Applying Personas to UX Design

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

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

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

الجانب السيء الآخر أنها متوافرة في ماك فقط.

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

الواجهة التفاعلية

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

  • الشريط الجانبي للوحة والطبقات 
  • نافذة الرسومات
  • معدل الأسلوب
    • محرروا الاسلوب
      • الملء
      • الإطار
      • الظل
      • الصورة
      • النص
    • التراصف/الخصائص
    • التفاعلية

اللوحة والطبقات

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

Canvas Layer Sidebars

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

Canvas Sidebar

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

Layers Sidebar

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

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

Shared Layers

الطبقات المشتركة

الأشكال

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

Shape

هناك عدد من الخصائص التي يمكنك تغييرها بخصوص الشكل.

لون الملء

Shape Fill

الشكل الفعلي والحدود (اللون، حجم الخط، الخ.)

Shape Outline

الظل

Shadow

الخصائص الهندسية

Shape Properties

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

Favorite ShapeFavorite ShapeFavorite Shape

النص

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

Text within shape

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

Text outside shape

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

Text Edit

الرسومات والقوالب

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

TemplatesTemplatesTemplates

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

Edit StencilEdit StencilEdit Stencil

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

ستساعدك هذه على بناء مخطط شبكي بمظهر مذهل بسرعة كبيرة.

StencilsStencilsStencils

العناصر المشتركة

الآن بعض الغرابة

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

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

Copy as PDFCopy as PDFCopy as PDF

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

التراصف وخصائص المستند

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

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

Alignment

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

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

Canvas Properties

التفاعل

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

  1. فتح URL
  2. فتح ملف
  3. تشغيل مجموعة تعليمات
  4. الانتقال لمكان آخر
  5. إظهار/إخفاء الطبقات

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

Actions

تحذير: لم أقم بتشغيل خيار إظهار/إخفاء الطبقات ضمن PDF مسبقا. حيث يعمل ضمن نمط التفاعل في أومنيغرافل فقط (الاستمرار بالضغط على B).

الخلاصة

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

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

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.