مرحبا يا هبر! اسمي ساشا بريف ، أعمل كفريق من منصة الأعمال الرقمية في Sberbank و Sbertech ، وأنا منخرط في تصميم تطبيقات الهاتف المحمول ومشاريع الويب. يتكون معظم عملي من تجميع نماذج أولية بدرجات متفاوتة من التفاصيل لأغراض مختلفة. يتم إصدار أدوات وخدمات جديدة للتصميم والنماذج الأولية وتحديثها كل يوم. لقد أجريت دراسة كاملة ومتعمقة للأدوات الموجودة في السوق اليوم وسوف تساعد على فهمها.
قسمت القائمة إلى ثلاث مجموعات كبيرة حسب الوظيفة وسأقوم بتحليل كل منها على حدة:
في الواقع ، هناك العديد من الأدوات. هنا يتم جمع حلول قوية ومثيرة للاهتمام يمكن استخدامها بشكل موثوق نسبيًا في العمل. تحتوي جميعها على تسهيلات لعرض النماذج الأولية التي تم إنشاؤها وهي مناسبة بشكل متساوٍ لكل من مواقع الويب وتطوير الأجهزة المحمولة.
المفسدلم يقدموا حتى الآن أداة مثالية تغلق جميع المهام وتحتوي على جميع الوظائف. لا يزال يتعين المساومة واستخدام العكازات والدهاء. Axure في 2018 غير مطلوب.
المجموعة الأولى - الهيكل ، سيناريوهات منخفضة
تستخدم أدوات المجموعة الأولى صور الشاشة المرتبطة بالروابط. ترتبط الروابط بالنقاط الساخنة أو الأشياء. والنتيجة هي النماذج الأولية الثابتة التي يسهل مشاركتها وجمع الملاحظات وتعديلها.
بمساعدتهم ، يمكنك اختبار الفرضيات في بضع دقائق ، وتجميع نص برمجي للتحليل الأولي. ولكن بسبب الدرجة العالية للاتفاقية ، تتصرف النماذج الأولية بشكل مختلف تمامًا عن تطبيقات الهاتف المحمول ، مما قد يربك المستجيبين ويقلل من جودة الاختبار.
حتى الآن ، فإن أبرز الأدوات هي Marvel و Invision والأدوات الأصلية Adobe XD و Figma و Sketch (من الإصدار 49).
Marvel - هناك نسخة مجانية
أبسط خدمة النموذج الأولي عبر الإنترنت. يعمل كإضافة إلى محرري التصميم ، وبشكل مستقل كخدمة ويب. لقد حصلت مؤخرًا على محرر بسيط خاص بي. لا يسمح تطبيق الهاتف المحمول بالمشاهدة فحسب ، بل يسمح أيضًا بإنشاء النماذج الأولية وتحريرها. يحتوي الإصدار المجاني على حد لعدد المشاريع ، ولكن في التطبيق يتم إيقاف تشغيله ويمكنك إنشاء أي عدد من المشاريع بشكل قانوني.
الايجابيات+ البساطة والراحة
+ الاستقلالية (يمكنك العمل بدون محررين)
+ مشروط مجاني
+ أدوات التعاون والاختبار
سلبيات- لم أر
تطبيق Invision - من 13 دولارًا في الشهر
Invision (وليس Studio) هو أيضًا وظيفة إضافية للمحررين ، ولكن ، على عكس Marvel ، يسمح لك بربط الشاشات مباشرة في رسم تخطيطي وتصدير نموذج أولي منتهي بالفعل دون إعداد انتقالات وروابط. كما أن لديها عددًا كبيرًا من الوظائف المساعدة والبنية التحتية المتطورة. جنبا إلى جنب مع أداة النماذج الأولية ، هناك مجموعة واسعة من الخدمات للتعاون وتخزين المكتبة والمخزون الخاص بك وأكثر من ذلك بكثير.
الايجابيات+ تطوير النظام البيئي لخدمات إضافية
+ القدرة على تكوين الاتصالات مباشرة في الرسم
سلبيات- لم أر
Adobe XD - 644 ₽ شهريًا (هناك خطة بدء تشغيل مجانية تتيح لك البحث عن مشروع واحد فقط)
رسم - 99 دولارًا سنويًا
Figma - هناك نسخة مجانية
تعمل أدوات النماذج الأولية المضمنة في برامج تحرير التصميم على إغلاق وظائف خدمات الويب الفردية تمامًا. هناك اختلافات طفيفة تتعلق بتطوير المحررين. على سبيل المثال ، يتخلف Adobe XD نفسه كثيرًا عن منافسيه ، وفي الرسم التخطيطي (50) ، لا توجد حتى الآن آلية مشاركة ملائمة ، ولكن في اللحظات العامة ، يسعى الجميع جاهدين للحصول على تجربة مشتركة يتم تنفيذها بشكل أفضل في Figma.
الايجابيات+ الكل في واحد منصة - أداة واحدة لسير العمل بأكمله
+ لا تستحق المال الإضافي.
سلبيات- موروثة من الأداة. على سبيل المثال ، يعمل Sketch فقط على الخشخاش ، ولا تعمل Figma بدون الإنترنت.
المجموعة الثانية - التحولات بين الشاشات ، الرسوم المتحركة ذات الطبقات
تركز الأدوات في المجموعة الثانية على الرسوم المتحركة. بمساعدتهم ، يتم تنفيذ التحولات السلسة بين الشاشات ، ويتم تقليد سلوك عناصر الواجهة ، ويتم تجميع الرسوم المتحركة البسيطة. آلية التشغيل بسيطة - يتم تعيين الحالة الأولية والنهائية للشاشة والحدث الذي يتم فيه تشغيل الانتقال.
مثال على شاشة إعدادات الرسوم المتحركة في Invison Studioوالنتيجة هي نماذج أولية تنقل بدقة سلوك الواجهة ، ولكن لا يمكنها العمل مع البيانات ، وتذكر الخيارات المحددة ، ومحاكاة السلوك المعقد الآخر.
إنفيجنتم تجميع نموذج أولي قابل للنقر في Invision Studio
المبدأ - 129 دولارًا لكل ترخيص
واحدة من الأدوات الأولى والأكثر شعبية لتحريك الواجهات. مناسب للسيناريوهات الصغيرة في 2-3 شاشات وإعدادات تفصيلية للتفاعلات المعقدة. يحتوي على محرر تصميم محدود مع الميزات الأساسية. وهي غير مناسبة لتجميع النماذج الأولية المتفرعة المعقدة بسبب طريقة غير ناجحة لتنظيم الشاشات وعدم القدرة على إعادة استخدام العناصر والتحرير المعقد للرسوم المتحركة. لا تصدير إلى التعليمات البرمجية.
الايجابيات+ أداة جيدة للرسوم المتحركة البسيطة والسيناريوهات القصيرة
+ الكثير من المواد التدريبية ، المجتمع المتقدم
سلبيات- يتحول العمل مع السيناريوهات المعقدة إلى كابوس
- لا تصدير إلى التعليمات البرمجية
- يعمل فقط على ماك
- لا مشاركة عبر الإنترنت
ستوديو إنفيجن - الوصول المبكر
هناك أداة واعدة من Invision في الوصول المبكر. أعلن كمحرر تصميم آخر بوظائف رائعة. في الواقع ، على الرغم من مشاكل الاستقرار ، توفر الأداة عملًا مناسبًا مع نموذج أولي ومحرر رسوم متحركة ممتاز ودعم كامل لجميع خدمات Invision ، وفي هذه المرحلة يتم توزيعها مجانًا.
الايجابيات+ أداة جديدة من Invision ذات إمكانات ممتازة وبنية تحتية قوية.
+ في المستقبل ، قد تصبح أداة العمل الرئيسية للكثيرين.
+ يوجد إصدار لـ Windows
+ هناك مشاركة عبر الإنترنت
سلبيات- يرتبط بالوصول المبكر. حتى الآن هذا منتج غير مستقر بوظائف محدودة.
- لا تصدير إلى التعليمات البرمجية
Flinto لنظام التشغيل Mac - 99 دولارًا لكل ترخيص
تستخدم Flinto نفس مبدأ إنشاء النماذج الأولية وتحريكها مثل Invision Studio ، والذي يقارن بشكل إيجابي بـ Principle. إن الطريقة التي يتم فيها تكوين الرسوم المتحركة المفصلة المعقدة في واجهة منفصلة عن الشاشة العامة تجعل من السهل التحكم في العمليات وتحرير وإعادة استخدام المكونات في النماذج الأولية التالية.
الايجابيات+ سيتيح لك سير العمل المنظم بشكل ملائم العمل مع النصوص المعقدة والرسوم المتحركة
سلبيات- لا مشاركة عبر الإنترنت
- يعمل فقط على ماك
Kite Composer - 99 دولارًا لكل ترخيص
يعد Kite Composer بديلاً رائعًا لهذه الأدوات لأولئك الذين اعتادوا على تحريك الواجهات في After Effects. يتيح لك مبدأ التشغيل ، الذي يصبح فيه المخطط الزمني الأداة الرئيسية ، ويتم تعليق المعلمات والأحداث على كائنات مثل المرشحات ، للتركيز على جودة الرسوم المتحركة. هناك أيضًا تصدير كود إلى macOS \ iOS ومفتش مدمج.
الايجابيات+ سير عمل مشابه لـ AE كحد أدنى
+ تصدير إلى التعليمات البرمجية
سلبيات- لم أفهم ذلك
المجموعة الثالثة - السلوك القابل للبرمجة
توفر الأدوات الموجودة في هذه المجموعة نموذجًا أوليًا متحكمًا فيه بالكامل يستخدم بيانات المستخدم ووظائف الجهاز. هذا يسمح لك بمحاكاة تطبيق الاختبار والتطوير بدقة.
إعداد سلوك النموذج الأولي في Framerكل أداة لها نهجها الخاص في العملية ، وطريقة البرمجة الخاصة بها - من JavaScript مبسط في Framer إلى مرو الكوارتز المرئي في Origami Studio.
تم تجميع النموذج الأولي في Origami Studio. الرابط هو الملف المصدر الذي يمكن فتحه على الهاتف في تطبيق Origami Live.
هايكو بيتا مجاني
بالفعل في الإصدار التجريبي ، تقدم Haiku مجموعة واسعة من الميزات للرسوم المتحركة والتفاعل. باختصار ، تتصل الأداة بملف رسم أو شكل وتسمح لك بتحرير معلمات الكائنات على مخطط زمني مشترك. أكثر ملاءمة للرسوم المتحركة ، ولكن بفضل محرر الإجراءات ، الذي يعمل على JavaSript ، يمكنك كتابة منطق النموذج المعقد.
يتم تصدير النتيجة باستخدام مكتبة Lottie.js لجميع الأنظمة الأساسية والتنسيقات الممكنة.
الايجابيات+ براعة
سلبيات- تحتاج إلى معرفة جافا سكريبت للتعامل مع الأحداث والدول
- ماك بيتا فقط
Proto.io - من 24 دولارًا في الشهر
Atomic.io - هناك نسخة مجانية
خدمات ويب متعددة الوظائف تسمح لك بتسجيل منطق معقد مباشرة في المتصفح. ليس لديهم اختلافات جوهرية في الوظائف. المتغيرات والضبط الدقيق للحالات والأحداث يكمل المنطق المألوف لأدوات الرسوم المتحركة. لسوء الحظ ، في هذا التنسيق ، يكون جمع وتحرير الاتصالات أكثر صعوبة من الوسائل الخاصة. بالإضافة إلى ذلك ، فإن الحاجة إلى العمل في متصفح تفرض قيودها على العملية.
الايجابيات+ لا حاجة لمعرفة لغات البرمجة
سلبيات- نسخة الويب
Framer - من 12 دولارًا في الشهر
واحدة من أكثر الأدوات شعبية اليوم مع محرر التصميم الخاص بها وبيئة البرمجة على CoffeeScript - نسخة مبسطة من جافا سكريبت.
فرص وافرة ، ومجتمع ضخم ، ومواد تدريبية ميسورة التكلفة تجعل Framer حلاً مثاليًا للمصممين الذين يمكنهم أو يرغبون في تعلم كيفية البرمجة.
ومع ذلك ، في النماذج الأولية المعقدة ، يستغرق العمل مع التعليمات البرمجية والتحرير والتصحيح الكثير من الوقت. الإخراج هو html شرطي في مستعرض لا يمكن استخدامه في تطوير المحمول. لذلك ، لا يستطيع Framer استخدام الإمكانات الأصلية للأجهزة المحمولة ، وكاميرا ، واهتزاز ، وجيروسكوب وغيرها.
الايجابيات+ بيئة ملائمة لبرمجة منطق النموذج ومشاركة النتيجة
سلبيات- بحاجة إلى معرفة CoffeeScript
- المصمم يقضي الكثير من الوقت في تصحيح الأخطاء البرمجية
اوريغامي ستوديو - مجاني
تستخدم الأداة المجانية من Facebook بيئة البرمجة المرئية لـ Quartz Composer.
لقد حسنت التحديثات الأخيرة نوعيًا التجربة والواجهة ، مما جعل Origami ، في رأيي ، الأداة الأكثر ملاءمة ووظيفية لتصميم المنطق والاتصالات في النماذج الأولية لتطبيقات الهاتف المحمول.
لسوء الحظ ، فإن التحسين السيئ والمشكلات الدائمة مع المكوّن الإضافي لرسم الاستيراد غالبًا ما تكون مزعجة. ومع ذلك ، فإن السرعة والحدس التي يتم بها تجميع العمليات المعقدة تفوق جميع العيوب.
الايجابيات+ مجاني
+ وظائف غير محدودة - يمكنك استخدام كل من JSON وبيانات الدوران
+ عملية بسيطة لمنطق معقد
سلبيات- مشاكل التحسين
- عدم وجود مواد تدريب كافية
المرحلة - الانتظار
أداة واعدة ستصدر في يونيو 2018. يعلن المطورون عن عملية ثورية تجمع بين البرمجة المرئية والجدول الزمني. يبدو جيدًا جدًا ، يجب عليك تجربته بالتأكيد.
