الابتداء مع التخطيط الشبكي باستخدام Balsamiq

نشرت: 2018-04-11

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

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

    • ما هو بلسمك؟
    • كيف تبدأ معها؟
  • كيف يتم تصدير الإطار السلكي / النموذج بالحجم الطبيعي النهائي؟

جدول المحتويات

ما هو بلسمك؟

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

البدء مع Balsamiq

يتوفر Balsamiq لأنظمة Windows و Mac OS ويمكن تنزيله عبر الإنترنت . بمجرد تنزيل الأداة وفتحها ، سترى شاشة مثل:

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

    • الملاح
    • مكتبة واجهة المستخدم
    • مفتش
  • مساحة / منطقة الإطار السلكي

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

مكتبة واجهة المستخدم


يتم تصنيف مكتبة واجهة المستخدم بناءً على عناصر الشاشة المختلفة.
دعونا نتعرف على فئات عناصر الشاشة المختلفة المتوفرة في Balsamiq.

    • الكل - سيؤدي النقر فوق هذا الزر إلى إظهار جميع عناصر واجهة المستخدم التي تقدمها Balsamiq. يتيح لك التمرير أفقيًا عرضها أو استخدامها.
    • الأصول - يتضمن هذا القسم الأشياء التي يمكنك تحميلها ولاحقًا لاستخدامها في الإطارات الشبكية.
    • كبير - يتضمن ذلك عناصر الشاشة الأكبر حجمًا بشكل معقول مثل العناصر النائبة ونافذة المتصفح و iPhone و iPad.
    • الأزرار - يتضمن هذا القسم جميع عناصر التحكم في الأزرار التي ستحتاجها في إطار سلكي ، مثل - أزرار الإجراءات ومربعات الاختيار وما إلى ذلك.
    • مشترك - يتألف هذا القسم من الأشكال المستخدمة للإشارة إلى التفاعلات الأكثر شيوعًا.
    • الحاويات - تتضمن خيارات مثل Window و FieldSet و Browser وما إلى ذلك كما يوحي الاسم ، فهي تشمل Window و FieldSet و Browser وما إلى ذلك.
    • النماذج - تحتوي هذه الفئة على جميع عناصر التحكم المتعلقة بالنماذج ، مثل عناصر الإدخال وأزرار الاختيار وزر الإرسال وما إلى ذلك.
    • الرموز - تحتوي على مجموعة الرموز التي يمكنك استخدامها للإشارة إلى عملية معينة. على سبيل المثال ، رمز مرن بدلاً من زر حفظ ، إلخ. يقدم Balsamiq مجموعة ضخمة من الرموز المجانية التي يمكن استخدامها في العديد من الإجراءات.
    • iOS - يحتوي هذا على عناصر تحكم واجهة المستخدم الخاصة بنظام iOS.
    • التخطيط - التخطيطات مهمة للغاية عندما تحتاج إلى تمثيل صفحة / ميزة أساسية. تتضمن هذه الفئة معظم التخطيطات مثل علامات التبويب العمودية / الأفقية والأكورديون وما إلى ذلك.
    • العلامات - تستخدم لإضافة تعليق على عنصر تحكم معين في الإطار السلكي. يحتوي أيضًا على وسائل شرح تُستخدم لإظهار الاتصال في العديد من السيناريوهات.
    • الوسائط - تتوفر جميع عناصر التحكم في واجهة المستخدم المتعلقة بالوسائط في هذا القسم والتي تساعد في إظهار صورة / فيديو / صوت في الإطار السلكي.
    • الرموز - هذه مجموعة من المكونات التي يمكن إعادة استخدامها والتي يمكن أن تقلل من وقت إنشاء المكونات المشتركة.
  • نص - كما يشير الاسم ، يحتوي هذا على جميع عناصر تحكم واجهة المستخدم المتعلقة بالنص. تتوفر ميزات مثل كتلة نصية ومربع تحرير وسرد وشريط ارتباط وما إلى ذلك ضمن هذه الفئة.

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

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

ربط الصفحات

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

    • اذهب إلى الصفحة الرئيسية
  • انقر فوق شريط الارتباط في الزاوية اليمنى العليا

الرجوع إلى جزء الخصائص

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

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

تصدير الهيكل السلكي

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

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

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

تغليف…
ليس هناك من ينكر أهمية التخطيط الشبكي في عالم تطوير التطبيقات اليوم. إنها توفر العديد من الميزات التي ينتهي بها الأمر إلى تخفيف عبء العمل الإجمالي - ليس هناك على الإطلاق ندرة في أدوات التخطيط الشبكي ولكن Balsamiq هي واحدة من الأدوات القليلة التي تلبي متطلباتك الشاملة!

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

ما هي إيجابيات وسلبيات بالسمق؟

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

هل يجب أن أستخدم Balsamiq أو Sketch للتخطيط الشبكي؟

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

هل هناك بدائل للإطارات السلكية بلسمق؟

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