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

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

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

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

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

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

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

إطارات سلكية و نماذج بالأحجام الطبيعية مقابل نماذج أولية

الآن ، ومن المحتمل أن المصمم الذي كان موجودًا لفترة من الوقت قد عمل بالفعل مع إطارات سلكية ، و / أو مصمم بالأحجام الطبيعية في بعض محرر الصور. هل هذه ليست نماذج أولية؟

كلا. ليس دائما ، على أي حال.

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

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

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

متى تحتاج إلى نموذج أولي؟

كلما كنت بحاجة لإظهار كيف من المفترض أن يعمل شيء ما. هذا هو.

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

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

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

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

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

4 أنواع من النماذج

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

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

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

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

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

1: النماذج المفاهيمية

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

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

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

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

2: النماذج الأولية منخفضة

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

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

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

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

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

3: النماذج الأولية المتوسطة

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

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

ربما Yup و Bootstrap و Foundation هما من أكبر أدوات النماذج الأولية في الوقت الحالي.

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

هذه الأنواع من النماذج الأولية رائعة للمفكرين الأكثر حرفيًا الذين يحتاجون إلى رؤية تقريب قريب من كيفية ظهورها والعمل بها. من الأسهل عليهم تجاهل العنوان "لم ينتهِ بعد" ، من الشكل غير المرئي الذي لا يبدو وكأنه عنوان موقع ويب كما يعرفونه.

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

4: النماذج الأولية عالية

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

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

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

بناءً على التطبيق ، يمكنك أيضًا عرض هذه النماذج الأولية على الويب (أو على جهاز محمول ، إذا كنت تعمل على تطبيق).

طرق النمذجة

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

مرة أخرى ، يجب أن تعتمد الطريقة التي تختارها على ما تشعر به أنت والمستخدم.

نماذج الفيديو أو العرض التقديمي

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

عادةً ما تتبع النماذج الأولية المرئية والمبنية على العروض التقديمية التي يتم إجراؤها للمبيعات نماذج تجارية:

  1. قدّم مشكلة قد يتعرف عليها المشاهد.
  2. أظهر كيف سيحل منتجك هذه المشكلة.
  3. (خطوة اختيارية) تقوم شخصية تعويذة مؤرّخة رقمياً بأداء رقصة سعيدة بينما تصيح شعارات.

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

وهنا مثال رائع يمزج النماذج الأولية للفيديو مع النماذج الأولية للورق.

إطارات شبكية

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

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

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

قد يكون ذلك ممتعًا ، لكنه قد لا ينقل معانيك.

قد تختار استخدام كلٍّ من: الورق لتدوين أهم المفاهيم الأساسية ، والتطبيق لتجميعها ، ومشاركتها بسهولة.

نماذج ورقية

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

ﻋﺎدةً ﻣﺎ ﻳﺘﻢ رﺳﻢ ﻋﻨﺎﺻﺮ اﻟﻮﺻﻠﺔ وﺗﻘﻄﻌﻬﺎ وأﺣﻴﺎﻧًﺎ ﻳﺘﻢ ﻧﺴﺨﻬﺎ ﻹﺟﺮاء ﻣﺰاﻳﺎ إﺿﺎﻓﻴﺔ ﺛﻢ ﻳﺘﻢ ﺗﺠﻤﻴﻌﻬﺎ ﻋﻠﻰ ﻗﻄﻌﺔ أﺧﺮى. هذا يعطيهم ميزة المرونة. حيث يمكنك التخلص من ورقة كاملة باستخدام إطار سلكي ، يمكنك فقط إعادة ترتيب عناصر نموذج ورق حتى تصبح راضيًا. حصلت على عنصر بحجم خاطئ ، بعد إعادة ترتيب الأشياء عدة مرات؟ مجرد قطع نسخة جديدة بها.

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

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

النماذج الأولية متوسطة وعالية الدقة التي تم إنشاؤها باستخدام التطبيقات

هذه لديها الكثير من القواسم المشتركة مع النماذج الأولية للورق. تصنع النماذج الأولية المصممة باستخدام تطبيق مثل Invision ، أو أحد الخيارات الأخرى العديدة الموجودة (انظر القائمة أدناه) ، عادةً من عناصر واجهة مُصممة مسبقًا ، ثم يتم تجميعها معًا لتقليد المنتج النهائي.

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

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

الشفرة

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

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

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

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

النماذج الأولية مع الأطر

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

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

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

النماذج التعليمية والأدلة

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

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

(لن يتم تضمين برامج تعليمية خاصة بالتطبيقات لأن هناك عددًا كبيرًا جدًا).

تصميم أفضل وأسرع مع النماذج الأولية السريعة

هذا الدليل من مجلة Smashing تركز على منهجية لبناء النماذج السريعة ، وتكرارها في كثير من الأحيان.

كيف أنا بسرعة المواقع النموذج

هذا ال مزيد من المادة الشخصية بقلم Nick Pettit على مدونة Treehouse توضح منهجه الخاص في إنتاج النماذج الأولية.

كيفية بناء المواقع بسرعة ، مع سير العمل في النماذج الأولية السريعة

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

دليل Skeptic إلى النماذج الأولية منخفضة الدقة

مقال آخر من قبل Smashing Magazine ، هذا واحد يذهب إلى مزيد من التفاصيل حول النماذج الأولية منخفضة الدقة.

كيف نحن النموذج

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

كيفية اختبار قابلية الاستخدام للنماذج الأولية مثل المحترفين

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

الكتاب الاليكترونى الحرة: الدليل النهائي للنماذج الأولية ، من خلال UXPin

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

الآن ، صُنع من قبل الأشخاص الذين يقفون وراء UXPin ، وهو أحد تطبيقات النماذج الأولية ، لذا فقد يكونون متحيزين قليلاً بشأن التطبيق الذي يجب استخدامه. لا يزال ، لديها الكثير من المعلومات الجيدة.

أدوات وتطبيقات النماذج الأولية

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

الخبر السار: هناك الكثير من التطبيقات الرائعة للاختيار من بينها. الأخبار السيئة: هناك الكثير من التطبيقات الرائعة للاختيار من بينها.

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

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

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

Adobe Experience Design CC

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

إنه حاليًا يعمل بنظام التشغيل Mac فقط ، وفي مرحلة المعاينة عند ذلك ، ولكن إصدار Windows مطلوب قبل نهاية العام.

إصدار ما قبل النشر مجاني ، بمجرد أن يتم شحن الإصدار النهائي ، سيكون جزءًا من خطة اشتراك Adobe Creative Creative.

برنامج العرض

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

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

إنفجن

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

بالإضافة إلى ذلك ، قاموا مؤخراً بشراء Silver Flows ، وهي أداة تدمج وظائف النماذج الأولية مع Sketch. يعتزمون استخدامها لدمج Sketch مع برامجهم عبر الإنترنت.

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

Justinmind

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

يبدأ السعر حاليًا بسعر 19 دولارًا أمريكيًا لكل مستخدم في الشهر ، إذا كنت تدفع سنوياً.

تطبيق Marvel

تطبيق Marvel تطبيق ضخم (واحد من "الأسماء الكبيرة" في النماذج) مع خطة مجانية ، وأسعار معتدلة لجميع الترقيات. تتضمن الميزات البارزة: دعم Photoshop و Sketch ، والمزامنة مع Drive و Dropbox ، وتضمين نماذج أولية في صفحات الويب) والميزات التي تحول النماذج الخاصة بك إلى عروض تقديمية متحركة.

هذا واحد عن النماذج الأولية عالية الدقة بالتأكيد.

Axure

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

تأتي الإصدارات القياسية بسعر 289 دولارًا أمريكيًا لكل ترخيص.

HotGloo

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

حيث تركز التطبيقات الأخرى على تطبيقات النماذج ، بدأت HotGloo عملها مع مصممي الويب. لذا ، يمكنك القيام بذلك ، حقا.

تبدأ الخطط بمبلغ 14 دولارًا أمريكيًا في الشهر ، ويمكن أن تتضمن هذه الخطة ما يصل إلى 10 أشخاص يتعاونون.

Proto.io

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

ترسخ

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

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

POP

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

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

Flairbuilder

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

سعره في رسوم لمرة واحدة من 99 دولار أمريكي. هذا حاد ، بالتأكيد ، ولكن أرخص بكثير من Axure.

Flinto

Flinto يحتوي في الواقع على نسختين: هناك تطبيق Mac ، وإصدار Lite يستند إلى الويب. الاختلاف؟ يجلب إصدار نظام التشغيل Mac مزيدًا من الرسوم المتحركة المعقدة والميزات والتفاعلات إلى الجدول. كما يسمح لك باستيراد أصولك من Sketch ، والتي لا تستطيع إصدار الويب القيام بها.

يكلف $ 99USD كعملية شراء لمرة واحدة. ومن المثير للاهتمام أن الإصدار Lite (الذي يكلف 20 دولارًا أمريكيًا شهريًا) يتضمن ترخيصًا لإصدار سطح المكتب ، مما يمنحك أفضل ما في العالمين.

UXPin

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

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

يبدأ السعر من 19 دولارًا أمريكيًا في الشهر ، لكل مستخدم.