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

13 النماذج الأولية لمصممي الويب

by
Length:LongLanguages:

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

دعنا نلقي نظرة على بعض أدوات النماذج الأولية المتاحة لمصممي الويب اليوم ، بدون ترتيب معين:

  1. المبروز
  2. أدوبي XD
  3. برنامج ادوبي افتر ايفيكت
  4. Adobe Animate CC
  5. حرفة النموذج
  6. المبدأ
  7. الذري
  8. هذا هو السبب
  9. JustinMind
  10. فن قص الورق
  11. Flinto
  12. Webflow
  13. تطبيق Marvel

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

حيث النماذج المناسبة

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

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

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

النماذج والمناظر الطبيعية تصميم ويب

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

مع العديد من الأدوات المتاحة في السوق، أي منهما ينبغي عليك استخدامه؟ دعونا نلقي نظرة.

1. المبروز

framer
المبروز
  • رخصة زائد: 15 دولار/شهر (ماك فقط)
  • ترخيص المؤسسة: الاتصال

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

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

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

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

 2.أدوبي XD

Adobe XD
أدوبي XD
  • السعر: يتطلب حساب سحابة الإبداعية أدوبي

ارسم وإعادة استخدام وإعادة تصميم العمل الفني المتجه والنقطي لإنشاء إطارات سلكية وتخطيطات الشاشة ونماذج تفاعلية وأصول جاهزة للإنتاج ، كل ذلك من نفس التطبيق. اعمل مع أدوات فعالة مثل Repeat Grid المصممة خصيصًا لـ XD ، ومع الطبقات والرموز وأدوات القلم لتصميم UX. إضافة التفاعلات باستخدام مجموعة متنوعة من الرسوم المتحركة لإنشاء انتقالات بين لوحات فنية لمحاكاة تدفق التطبيق/موقع الويب الخاص بك.

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

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

3-أدوبي رجعية

After Effects
أدوبي بعد آثار
  • السعر: يتطلب حساب سحابة الإبداعية أدوبي

بعد أن آثار ليس على وجه التحديد أداة النماذج للتطبيقات ومواقع الويب (على الرغم من أنه لا يزال يمكن أن تحصل بعيداً مع ذلك)، ولكنه يساعد اقتراح نموذج لأولئك الذين يبحثون عن وسيلة للرسوم المتحركة شركات/نموذج بالحجم الطبيعي للعملاء. إنشاء الرسوم المتحركة للفيديو أو إنشاء تأثيرات الحركة للويب. هنا مادة كبيرة على Tuts + بتشارلز ييغر:

كما دعا الخروج هذه السلسلة جزء عشرة Tuts + مرحبا بكم في After Effects.

4. أدوبي تحريك CC

Adobe Animate CC
أدوبي تحريك CC
  • السعر: يتطلب حساب سحابة الإبداعية أدوبي

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

5. الحرف النموذج الأولى

Craft Prototype
نموذج الحرف
  • السعر: مجاناً. يتطلب رسم $99.00

بناء نماذج هاي فأي مع ملفات التصميم الحقيقي. الحرف جزء من عائلة انفيجن؛ شركة اقتناء العديد من أدوات (مثل الببغاء وعاصي) هذه الأيام من كيانات خارجية.

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

6. مبدأ

Principle
مبدأ
  • السعر: $129.00 (ماك فقط)

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

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

7. الذري

Atomic
ذرية
  • كاتب الطبقة: 15 دولار/شهر
  • للمحترفين: 25 دولار/شهر
  • بلا حدود: 25 دولار/شهر

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

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

8. بروتو

Proto
بروتو
  • القطعة 24 دولار/شهر
  • بدء تشغيل 40 دولار/شهر
  • وكالة 80 دولار/شهر
  • الشركات 160 دولار/شهر

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

تعلم المزيد حول ميزات به على موقع بروتو.

9. JustinMind

JustinMind
JustinMind

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

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

10. أوريغامي

  • السعر: مجاناً ماك فقط.

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

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

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

11. فلينتو

Flinto
فلينتو
  • مجاناً 14 يوم المحاكمة
  • فلينتو لايت؛ المستندة إلى ويب اشتراك 20 دولار/شهر
  • ماك التطبيق: $99

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

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

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

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

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

12. Webflow

Webflow
Webflow
  • كاتب الطبقة: مجاناً
  • لايت: 16 دولار/شهر
  • للمحترفين: 35 دولار/شهر

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

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

Webflow يتركز بشكل كبير على الرسوم المتحركة ويب، والتفاعلات وتصميم ويب استجابة. التفاعلات 2.0 قريبا، وسوف نقدم المزيد من التحكم للرسوم المتحركة والتفاعل عبر نقاط فاصل (غالباً ألم نقطة المصممين إكسبريس)، وبالطبع سهولة بناء بصريا مقابل وكيل من التعليمات البرمجية.

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

نوعية التعليمات البرمجية التي يتم إنتاجها الدلالية ومقروءة وسهلة للعمل مع، إذا قمت بتصدير واستخدامه خارجياً أو تسليمه لمطور. هنا هي تجريبية قليلة عرض التعليمة البرمجية المنتجة.

يتوفر حاليًا تفاعلات V1 وسيتضمن الإصدار 2.0 من التفاعلات مزيدًا من التخصيصات مع الرسوم المتحركة من نوع المنظر والتفاعلية التي بنيت بشكل مرئي ؛ الرسوم المتحركة على أساس المؤشر / التمرير الحية. تأمل Webflow في إطلاق الإصدار التجريبي قريبًا جدًا ، لذا ستصبح Interactions 2.0 جزءًا كبيرًا من الواجهة وسببًا كبيرًا للعديد من المصممين والمطورين لاستخدام Webflow.

بفضل والدو Broodryk من Webflow الذي استغرق الوقت للإجابة على العديد من أسئلتي ومشاركته التجريبية والمعرفة.

13. مارفل التطبيق

  • مجاني (مستخدم واحد ، مشروعان)
  • برو 12 دولار / شهر
  • شركة $ 48 / شهر

يتيح لك المحرر المستند إلى مستعرض Marvel إمكانية ربط جميع تصميماتك معًا وإضافة الإيماءات والتحولات لجعل النموذج الأولي الخاص بك يبدو مثل التطبيق الحقيقي أو موقع الويب. أنشئ نماذج أولية لأجهزة iPhone و iPad و Desktop و Apple TV و Apple Watch و Android.

يأتي Marvel مع ميزات مثل التعاون والتعليق ، إلى جانب التصميم في متصفحك مع 'Canvas' ، بالإضافة إلى أنه يمكنك إضافة الصور باستخدام Photoshop أو Sketch أو القلم والورق. يمكن للمستخدمين النقر والسحب لإنشاء نقاط اتصال تفاعلية على التصميمات التي تتفاعل عند النقر عليها أو لمسها. تأتي Marvel مع ميزات رائعة أخرى مثل المكوّن الإضافي Sketch وحتى أداة iOS. يتضمن تطبيق iOS الآن Canvas (المذكورة سابقاً) ، وأداة التصميم السريع من Marvel والتي تسمح لك بإنشاء نماذج تطبيقات من البداية. يتضمن هذا التطبيق أيضًا برنامج Iconfinder و Unsplash الذي يزودك بقاعدة بيانات ملحمية تضم أكثر من مليون صورة من الصور والأيقونات لإدراجها في تصميماتك.

تتميز ميزات Marvel أيضًا بأدوار المستخدمين ، وتنظيم المشروع باستخدام المجلدات ، ومزامنة التصميمات من Google Drive ، وخيارات تضمين الفيديو والصوت من YouTube ، و Spotify ، و Vimeo ، و SoundCloud.

الاستنتاج

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

شكر خاص لهؤلاء الناس لمساهمتهم وتقاسم المعرفة والآراء خلال بحثي:

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.