أفضل أدوات التخطيط الشبكي لتطبيقك
نشرت: 2018-03-23لقد وضعنا لك قائمة بأدوات التخطيط الشبكي التي يمكن أن تساعد في جعل إنشاء تطبيقك أو موقع الويب الخاص بك أقل ترويعًا. إذا كنت تبحث عن أداة نموذج أولي رائعة ، فقد قمنا بتضمين بعض الاقتراحات لها أيضًا.
يعد إنشاء تطبيق أو موقع ويب جديدًا إنجازًا محترمًا لن ينجزه الكثيرون في حياتهم. هذا لا يعني أنه يجب عليك التخلي عن القيام بذلك ، ولكن يجب عليك البحث وفهم كل شيء قبل الغوص في ذهنك أولاً. يواجه العديد من المبتدئين صعوبة في معرفة الفرق بين الإطار السلكي والنموذج الأولي والنماذج بالأحجام الطبيعية ، لذا فإن هذا المنشور هنا لمساعدتك في فهم كل منها.
فهرس
ما هو WIREFRAME؟
أفضل أدوات تنعيم الأسلاك لعام 2018
ما هو النموذج الأولي؟
أفضل أدوات تظليل لعام 2018
قم بإنشاء نماذج مصغرة لمنتجك
ما هو WIREFRAME؟
لديك فكرة عبقرية لتطبيق أو موقع ويب جديد ، ولكن كيف تبدأ في تحويل هذا إلى منتج حقيقي؟ مع إطار سلكي! هذه هي الخطوة الأولى في عملية التخطيط ، لذا من المهم ألا تتجاوزها.
أساسيات الهيكل السلكي
قبل اتخاذ أي قرارات رئيسية تتعلق بالتصميم ، سيحتاج التطبيق أو موقع الويب الخاص بك أولاً إلى تخطيط وظيفي منطقي. هذا هو المكان الذي يأتي فيه الإطار السلكي. يبدأ معظم الأشخاص بعمل رسم تخطيطي يدويًا لما يريدون أن يبدو عليه تطبيقهم أو موقعهم على الويب. الخطوة التالية هي تحويل هذا الرسم التخطيطي إلى تخطيط رقمي أو مخطط تفصيلي يبدو أكثر تنظيماً واحترافية.
سيحتاج الإطار الشبكي الخاص بك إلى توصيل الهيكل الأساسي للصفحة دون تضمين أي عناصر تصميم أو محتوى فعلي.
سيسمح لك العمل من خلال الإطار السلكي قبل البدء في تزيين أي شيء بالتعرف على أي أخطاء في قابلية الاستخدام قد يكون من الصعب التعامل معها لاحقًا. في هذه المرحلة ، من المهم التأكد من أن العناصر المضمنة منطقية وعملية ، خاصة لجمهورك المستهدف. إذا كنت تحاول جذب انتباه المستثمرين ، فإن الإطار الشبكي سيساعدهم أيضًا على فهم منتجك بسهولة أكبر. في الواقع ، عدم وجود إطار شبكي جاهز على الأقل يمكن أن يجعل المستثمرين يفقدون الاهتمام بسرعة كبيرة. تميل العناصر المضمنة في الإطار السلكي إلى أن تكون مربعات للعناوين الرئيسية والأزرار ومربعات النص ومربعات الصور.
إطار سلكي مقابل نموذج بالحجم الطبيعي
من السهل الخلط بين الإطار السلكي والنموذج بالحجم الطبيعي لأنهما يحتويان على عناصر متشابهة جدًا. ومع ذلك ، عند العمل مع فريق من المطورين والمصممين والمستثمرين ، ستحتاج إلى فهم ما يميزهم.
للبدء ، يتم استخدام إطار سلكي لتنظيم محتوى وميزات تطبيقك ، ولكن بطريقة مجردة للغاية. فكر في الأمر كمخطط يوضح الهيكل الأساسي لما سيتم تضمينه في تطبيقك. بمجرد أن تبدأ في إضافة عناصر أخرى ، مثل اللون والرموز والصور والخطوط والصور ، ستبدأ في التحول إلى نموذج بالحجم الطبيعي.
يوفر نموذج بالحجم الطبيعي تمثيلًا متوسط الدقة لتطبيقك أو موقعك على الويب قيد التطوير. إنه تمثيل أكثر واقعية لما يتم تشكيل تطبيقك فيه. فكر في هذه الخطوة في العملية على أنها إضافة القليل من الجوهر للإطار السلكي المجرد أو إعطائه مزيدًا من الحياة.
أفضل أدوات تنعيم الأسلاك
بلسميق
MOCKPLUS
موكبس
WIREFRAME.CC
موكفلو
بلسميق
متاح لجميع أنظمة التشغيل لأنه يعتمد على الويب.
الميزات الرئيسية: Balsamiq هي أداة تخطيط شبكي موصى بها للغاية تتيح للمستخدمين إنشاء إطارات سلكية لتطبيقات سطح المكتب وتطبيقات الأجهزة المحمولة ومواقع الويب ونوافذ الحوار وتطبيقات الويب وتطبيقات الأجهزة اللوحية والمزيد . يشبه إنشاء الإطار السلكي الخاص بك من خلال Balsamiq الرسم على السبورة ، ويسمح لك البرنامج أيضًا بسحب عناصر واجهة المستخدم وإفلاتها ، والحصول على تعليقات على الرسومات من فريقك ، ومراجعة التصميمات ، وتحسين عملك في الوقت الفعلي.
التسعير: سيختلف سعر هذه الأداة اعتمادًا على عدد من المواقف. يمكنك البدء بتجربة مجانية لمدة 30 يومًا ، ولكن بعد ذلك سيتعين عليك دفع رسوم شهرية أو سنوية اعتمادًا على النظام الأساسي الذي تختاره. على سبيل المثال ، ستكلفك النسخة السحابية 9 دولارات شهريًا أو 90 دولارًا سنويًا لما يصل إلى مشروعين. سيكلفك إصدار سطح المكتب 89 دولارًا مقابل ترخيص مستخدم واحد.
المكافأة: تقدم Balsamiq دورات مجانية متاحة من خلال Udemy و Skillshare لمساعدتك على تعلم كيفية استخدام منتجهم والحصول على أفضل النتائج منه.
MOCKPLUS
متاح لأنظمة Mac OS و Windows و Android و iOS.
الميزات الرئيسية: نظرًا لأنه يمكن ربط المشاريع بالتخزين السحابي ، يتيح MockPlus لفريق كامل التعاون في مشروع واحد بسهولة. يمكن للمستخدمين التعليق مباشرة على المشروع وترميزه ليراه الآخرون. يمكنك أيضًا إرسال إشعارات بالبريد الإلكتروني إلى فريقك للبقاء على اتصال بشأن التغييرات. أفضل جزء هو أنه يمكنك القيام بكل هذا بدون تشفير أو برمجة ، لذلك من السهل التركيز على العمل الذي أمامك.
التسعير : هناك خيار مجاني متاح للمستخدمين الفرديين والذي يتضمن منتجات غير محدودة ، على الرغم من أنه محدود في جوانب أخرى. بعد ذلك ، سيتراوح السعر من 199 دولارًا سنويًا للفرد إلى 2999 دولارًا سنويًا للمؤسسة. يمكنك أيضًا شراء ترخيص يتراوح من 399 دولارًا لمستخدم واحد إلى 5999 دولارًا لمؤسسة (30 مستخدمًا).
المكافأة: تتمثل أكبر ميزة في MockPlus في أنها تتيح للمطورين إنشاء إطارات سلكية بسرعة أكبر بفضل الأدوات التي صمموها لتسريع العملية.
موكبس
متاح لجميع أنظمة التشغيل لأنه يعتمد على الويب.
الميزات الرئيسية: Moqups عبارة عن نظام أساسي قائم على الويب يمكن استخدامه لإنشاء إطارات سلكية لتطبيقات الويب وتطبيقات الأجهزة المحمولة لأنظمة iOS و Android و Bootstrap. نظرًا لأن النظام الأساسي يعتمد على الويب ، فلديك القدرة على الاتصال والعمل من أي مكان. النظام الأساسي ليس فقط للإطارات السلكية ، بل يمكنك أيضًا عمل مخططات ونماذج أولية. يمكنك بسهولة سحب العناصر وإفلاتها ، واستخدام مجموعات الاستنسل الخاصة بهم ، والاختيار من بين خطوط مختلفة ، وتحديد الكائنات ، وسحب الصور الخاصة بك وإفلاتها في كل ما تعمل عليه.
التسعير : مثل معظم أدوات التخطيط الشبكي ، تقدم Moqups نسخة تجريبية مجانية. بعد ذلك ، سيعتمد السعر على عدد من العوامل. على سبيل المثال ، سيكلف الاشتراك السنوي الذي يتضمن عددًا غير محدود من المشاريع والعناصر والتخزين والتعليقات 13 دولارًا أمريكيًا شهريًا لمستخدم واحد و 19 دولارًا أمريكيًا شهريًا لفريق Creative (3 أشخاص). سيتعين عليك الاتصال بـ Moqups مباشرة للحصول على عرض أسعار لحساب Enterprise.
المكافأة: إذا كنت تنتمي إلى منظمة غير حكومية أو مدرسة أو غير ربحية ، فستمنحك Moqups حسابًا مميزًا دون أي تكلفة.
WIREFRAME.CC
متاح على جميع أنظمة التشغيل لأنه يعتمد على الويب.
الميزات الرئيسية: يعتبر Wireframe.CC واحدًا من أبسط أدوات الهيكل الشبكي المتاحة. هذا ليس بالضرورة أمرًا سيئًا ، خاصة إذا كنت مبتدئًا. في الواقع ، نظرًا لتصميمه البسيط ، قد يجد المطورون أنه من الأسهل التركيز على عملهم في متناول اليد. يمكن استخدام هذا البرنامج المستند إلى الويب لإنشاء نوافذ المتصفح أو تطبيقات الأجهزة المحمولة أو تطبيقات الأجهزة اللوحية.
التسعير : يقدم Wireframe.CC نسخة تجريبية مجانية لمدة 7 أيام وحساب أساسي مجاني. بعد ذلك ، ستكلف 16 دولارًا في الشهر أو 144 دولارًا سنويًا للاستخدام الفردي ، أو 439 دولارًا في الشهر أو 390 دولارًا في السنة لثلاثة مستخدمين ، أو 99 دولارًا في الشهر أو 990 دولارًا سنويًا لمؤسسة (مستخدمون غير محدودين).
المكافأة: بساطة هذا البرنامج تجعل من الصعب تشتيت الانتباه والمماطلة. في الواقع ، ستظهر عناصر واجهة المستخدم كخيارات فقط عند الحاجة.
موكفلو
متوفر كتطبيق سطح مكتب لنظام التشغيل Mac OS و Windows أو كتطبيق ويب.
الميزات الرئيسية: يمكن استخدام هذا البرنامج لتصميم تطبيقات الويب وتطبيقات الجوال والواجهات والبرامج من بين خيارات أخرى. إنها توفر حزم مكونات للواجهة التي تختارها من أجل تسهيل عملك. تقدم MockFlow أيضًا ميزات تعاون تتيح لجميع أعضاء فريقك رؤية التغييرات في الوقت الفعلي مع السماح لك أيضًا بتقديم تعليقات توضيحية ليراها الجميع. يمكنك تصدير ملفاتك بعدد كبير من التنسيقات ، بما في ذلك DOC و PDF و HTML.
التسعير : حساب b asic ، الذي يتضمن مستخدمًا واحدًا ومشروعًا واحدًا كحد أقصى في كل أداة ، مجاني. حساب p remium لمستخدم واحد يكلف 14 دولارًا في الشهر. الجانب السلبي الوحيد هو قيود المشاركة. تبلغ تكلفة حزمة t eam لثلاثة مستخدمين 29 دولارًا في الشهر ، ولكن يمكنك إضافة مستخدمين إلى هذا الحساب مقابل رسوم إضافية. حساب e nterprise ليس له حدود من حيث المستخدمين وسيكلفك 160 دولارًا في الشهر.
المكافأة: إحدى مزايا استخدام MockFlow هي MockStore الخاصة بهم ، والتي تبيع قوالب واجهة المستخدم لجميع أنواع الواجهات. إذا كنت تشعر بعدم الإلهام ، فيمكنك تصفح متجرهم بحثًا عن أفكار أو حتى شراء نموذج.
ما هو النموذج الأولي؟
النموذج الأولي ليس المنتج النهائي بعد ، ولكن يجب أن يكون مشابهًا جدًا له من حيث شكله ووظائفه العامة. يجب استخدام هذا النموذج الأولي عالي الدقة لتطبيقك أو موقعك على الويب لاختبار منتجك والحصول على بعض تعليقات المستخدمين لمساعدتك على تحسين أي مشكلات قد تنشأ.
أساسيات النموذج الأولي
عادة ما يأتي النموذج الأولي في نهاية عملية التصميم ويعمل كجسر للمنتج النهائي. في هذه المرحلة ، سيتمكن المصممون من عرض أعمالهم واستخدامها للحصول على ملاحظات مفيدة. يجب ألا يشتمل النموذج الأولي على عناصر التصميم فحسب ، بل يجب أن يوضح أيضًا كيفية عمل المشروع عند اكتماله.
قد لا يتضمن النموذج الأولي جميع الرسوم المتحركة والتفاعلات النهائية للمشروع ، ولكن يجب أن يكون قادرًا على توضيح كيفية تدفق التطبيق. مما يسمح لك باختبار أدائها.
يمكنك أن تجعل المستخدمين يختبرونه ويعطونك ملاحظات من أجل تحسين تجربة المستخدم. قد تشعر أنك تستخدم تطبيقًا حقيقيًا ، لكن النموذج الأولي هو مجرد مجموعة من الصور المتصلة ببعضها البعض. هذه الأنواع من النماذج الأولية ، نماذج أولية تفاعلية ، مثالية لأنه يمكنك رؤية التصميم النهائي أثناء التفاعل معه أيضًا. قد يستغرق إنشاء نموذج أولي تفاعلي جيد بعض الوقت ويكلف بعض المال ، لكنه بالتأكيد يستحق الاستثمار.
أفضل أدوات التمثيل
PROTO.IO
مارفيلاب
PROTT
AXURE RP
إنفيجن
PROTO.IO
متوفر لنظام التشغيل Mac OS و Windows.
الميزات الرئيسية: شعار Proto.io هو " نماذج أولية تبدو حقيقية" ولسبب وجيه. يسمح منتجهم للمصممين بإنشاء نماذج أولية عالية الدقة قريبة من الشيء الحقيقي قدر الإمكان. يمكن استخدامه ل إنشاء نماذج أولية لتطبيقات الأجهزة المحمولة وكذلك تطبيقات الويب. تسمح أداة تسجيل الشاشة الخاصة بهم لفريقك برؤية كيفية تفاعل جمهورك بالضبط مع النموذج الأولي ، ويسمح لك الوضع غير المتصل بالتفاعل مع النموذج الأولي دون اتصال بالإنترنت ، كل هذا دون الحاجة إلى كتابة سطر واحد من التعليمات البرمجية.
التسعير : يمكنك بدء تجربة Proto.io الخاصة بك مع إصدار تجريبي مجاني لمدة 15 يومًا ثم لديك خيار الحصول على حساب مجاني ، على الرغم من أنه محدود للغاية. تتراوح الحسابات المدفوعة من 24 دولارًا في الشهر (اشتراك سنوي لمستخدم واحد يتضمن 5 مشاريع) إلى 160 دولارًا شهريًا (اشتراك سنوي ، 10 مستخدمين ، ويتضمن 30 مشروعًا نشطًا).
المكافأة: تتضمن بعض أحدث أدواتهم الرسوم المتحركة المتجهة التي يمكنك استيرادها بنفسك أو الاختيار من مكتبة الرسوم المتحركة المتجهة الخاصة بهم. كما قدموا مؤخرًا مكتبة مكونات VR تتيح لك دمج صور 360 بسهولة.
مارفيلاب
متوفر كتطبيق ويب لأنظمة Mac OS و iOS و Android و Windows.
الميزات الرئيسية: MarvelApp هو أداة نموذجية رائعة للمصممين بأقل خبرة. قد تبدو واجهته البسيطة بسيطة للغاية ، ولكن هذا جزء من جاذبيتها. إنها ليست نقطة انطلاق جيدة للمصممين الجدد فحسب ، بل إنها تقدم أيضًا النتائج الاحترافية التي يبحث عنها المصممون الأكثر خبرة. تسهل Marvel البقاء على اطلاع بالتغييرات والتعليقات الجديدة والتقدم بفضل خيار استيراد فريقك من Slack أو Asana. على الرغم من كونه تطبيقًا ، إلا أنه يمكنك استخدامه لإنشاء نماذج أولية للويب أو للجوال.
التسعير : MarvelApp متاح مجانًا لمستخدم واحد ويتضمن مشروعين. تبدأ اشتراكاتهم المدفوعة بـ 12 دولارًا شهريًا لمستخدم واحد ، ومشاريع غير محدودة ، ونماذج أولية محمية بكلمة مرور ، وخيار تنزيل النماذج الأولية الخاصة بك.
المكافأة: يعمل MarvelApp على جميع أجهزة iOS ، مما يعني أنه يمكنك عرض عملك بسرعة وسهولة على iPhone و iPad و Apple Watch وحتى Apple TV.
PROTT
متوفر كتطبيق iOS و Android.
الميزات الرئيسية: قد يبدو العمل على تطبيق جوال لإنشاء نموذج أولي محدودًا بعض الشيء ، لكن Prott يثبت أنه ليس من الضروري أن يكون كذلك. في الواقع ، هذا النظام الأساسي مليء بالميزات والأدوات التي يمكن استخدامها لإنشاء نماذج بالأحجام الطبيعية لواجهة المستخدم ، ونماذج أولية لبرامج سطح المكتب ، وتخطيطات مواقع الويب ، وإطارات سلكية تفاعلية ، ونماذج أولية. إذا كنت تعمل مع فريق مكثف ، فإن Prott يجعل من السهل مشاركة التغييرات معهم والحصول على تعليقات في الوقت الفعلي.
التسعير : يقدم Prott نسخة تجريبية مجانية تتحول إلى اشتراك مجاني بعد انتهاء فترة الثلاثين يومًا. هذا الخيار لمستخدم واحد ومشروع واحد. تبدأ خططهم المدفوعة بـ 19 دولارًا شهريًا لمستخدم واحد ، وثلاثة مشاريع ، وشاشات غير محدودة ، ومراجعين غير محدودين.
المكافأة: تتيح لك منصة Prott ترك التعليقات في أي مكان على المشروع ، مما يساعدك على التواصل مع فريقك بسهولة أكبر ووضوح. يمكن لأعضاء فريقك الرد مباشرة على تعليقاتك ، مما يضمن عدم ضياع أي شيء على طول الطريق.
AXURE RP
متاح لأجهزة Mac و Windows.
الميزات الرئيسية: تعتبر Axure RP واحدة من أكثر الأدوات شمولاً للنماذج الأولية ، لذا فليس من المستغرب فقط عدد المستخدمين الذين لديهم. على الرغم من كونها واجهة كاملة للغاية ، إلا أنها خيار أفضل لمن لديهم قدرًا كبيرًا من الخبرة. سبب آخر لشهرتها في الصناعة هو أنها كانت موجودة منذ فترة طويلة وهي الأداة التي تعلم معظم المصممين مهاراتهم عليها في أوائل العقد الأول من القرن الحادي والعشرين. من الجدير بالذكر أنك ستحتاج إلى بعض معرفة الترميز للحصول على ما تحتاجه من هذه الأداة.
التسعير : يمكنك البدء باستخدام نسخة تجريبية مجانية مدتها 30 يومًا. بعد ذلك ، تبدأ الاشتراكات من المستوى الاحترافي مقابل 29 دولارًا شهريًا لكل مستخدم وتصل إلى 99 دولارًا شهريًا لكل مستخدم على مستوى المؤسسة. تبدأ التراخيص الدائمة من 49 دولارًا شهريًا لكل مستخدم ، ولكنها غير متاحة على مستوى المؤسسة.
المكافأة: يوفر Axure RP للمصممين معظم الخيارات عند مقارنتها بأدوات النماذج الأولية الأخرى. في حين أن واجهته توفر معظم الوظائف ، إلا أنها تأتي بسعر نظام أكثر تعقيدًا. بمجرد إتقانه ، سوف يمنحك Axure RP نتائج رائعة.
إنفيجن
متاح على جميع أنظمة التشغيل لأنه يعتمد على الويب.
الميزات الرئيسية: InVision هي أداة معروفة ومعروفة للغاية في الصناعة تتيح للمصممين إنشاء نماذج أولية للويب و iOS و Android. تم تصميم هذه المنصة مع وضع فرق كبيرة في الاعتبار ، لذا فإن التعاون في غاية السهولة. إنه سهل الاستخدام للغاية ، ما عليك سوى تحميل ملفات التصميم الخاصة بك وإضافة عناصر مثل الرسوم المتحركة والإيماءات والانتقالات إليها. والنتيجة النهائية هي نموذج أولي موثوق وعالي الدقة.
التسعير : تقدم InVision خطة مجانية تتضمن نموذجًا أوليًا نشطًا واحدًا ، بعد أن تبدأ الخطط المدفوعة بـ 15 دولارًا شهريًا لثلاثة نماذج أولية لمستخدم واحد. سيكلف اشتراك الفريق لخمسة مستخدمين والذي يتضمن نماذج أولية غير محدودة 100 دولار شهريًا.
المكافأة: أصدرت InVision مؤخرًا برنامج Studio الذي طال انتظاره ، والذي يزعم أنه "أقوى أداة تصميم شاشة في العالم". تأمل هذه الأداة الجديدة في تبسيط العملية بين تصميم وإنشاء نماذج أولية وظيفية. أفضل جزء هو أنه مجاني!
قم بإنشاء نماذج مصغرة لمنتجك
بمجرد تعيين النموذج الأولي الخاص بك بالكامل والعودة لإصلاح أي مشكلات واجهتها أثناء عملية الاختبار ، فمن المحتمل أنك تقترب من تاريخ الإطلاق. ولكن ، قبل بدء البث المباشر ، تأكد من أن لديك الأدوات المناسبة لتسويق تطبيقك أو موقعك على الويب بشكل صحيح. يمكن أن يساعد استخدام النماذج بالأحجام الطبيعية التي تعرض الشكل الذي يبدو عليه تطبيقك أو موقع الويب الجديد على أجهزة حقيقية في جذب المزيد من الانتباه إليها.
ما هو نموذج بالحجم الطبيعي؟
ناقشنا سابقًا الفرق بين الإطار السلكي والنموذج بالحجم الطبيعي ، لكن نوع النموذج الذي نتحدث عنه هنا شيء مختلف تمامًا. يأتي هذا النوع من النماذج بالحجم الطبيعي في النهاية ، بمجرد أن يصبح التطبيق أو موقع الويب الخاص بك جاهزًا للبث المباشر. هذه هي الصور التي يمكنك تخصيصها بالصور أو لقطات الشاشة لمنتجك النهائي. على سبيل المثال ، يمكنك التقاط لقطة شاشة لتطبيقك وإفلاته على شاشة جهاز iPhone X.
تعتبر النماذج بالأحجام الطبيعية مهمة لأنه يمكن استخدامها لتسويق تطبيقك أو موقعك الإلكتروني والترويج لهما. يمكن استخدامها أيضًا عند إنشاء لقطات شاشة لتطبيقك لمتجر التطبيقات أو متجر Play. نماذج بلاسيت بالأحجام الطبيعية سهلة الاستخدام وتأتي في نطاق ضخم. يمكنك العثور على جميع أنواع نماذج بالأحجام الطبيعية بما في ذلك نماذج بالأحجام الطبيعية لـ iPhone ونماذج iPad ونماذج MacBook ونماذج بالأحجام الطبيعية للمتصفح ونماذج بالأحجام الطبيعية للأندرويد.
اعرض عملك على نموذج بالحجم الطبيعي
ربما تكون متحمسًا للانتهاء أخيرًا من المشروع الذي عملت بجد عليه لفترة طويلة. نحن نعلم أنه ربما لم يكن لديك الكثير من المال المتبقي للإعلان ، وهذا هو المكان الذي تلعب فيه نماذج بلاسيت بالأحجام الطبيعية. إنها سهلة الاستخدام ، وتنتج صورًا رائعة لمنتجك ، وبأسعار معقولة جدًا! بغض النظر عما تروج له ، أو تطبيق iPhone ، أو تطبيق iPad ، أو موقع ويب جديد ، فإن Placeit لديه أحدث نماذج للأجهزة التي قمت بتغطيتها!
إذا كنت قد استمتعت بهذا المنشور ، فيرجى تجربة قائمة أدوات تحسين متجر التطبيقات العشرة هذه أو إلقاء نظرة على 7 نصائح للترويج لتطبيقك.