الفرق بين UI / UX Design ومفاهيم التمديد السلكي والنموذج والحجم الطبيعي

نموذج telframe بالحجم الطبيعي

ما الفرق بين السلك والنموذج والنموذج؟ قام مصمم متمرس بتحديد شروط التصميم لمصممي UI / UX.

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

ما هو السلكي؟

هذه بنية رسومية لموقع ويب أو تطبيق يحتوي على محتوى وعناصر. مثل تصميم المبنى ، يستغرق الأمر الكثير من العمل والمشاركين لجعله ناطحة سحاب. وبالمثل ، يبدو سلك السلك بسيطًا ويجب أن يقوم به مصممو UX و UI و IxD. ببساطة ، telframe هو تصميم تخطيط بسيط يحتوي على 3 أهداف بسيطة ولكنها مباشرة:

  • يحتوي على معلومات أساسية
  • ارسم هيكلًا وتخطيطًا
  • تصور واجهة المستخدم

الميزات البصرية للأسلاك السلكية

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

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

2. سلك سلك ناقل بسيط

تتضمن Symphrams البسيطة الصور ومقاطع الفيديو والنص

3. مزايا السلك الكهربائي

بناء الأسلاك سريع ورخيص.

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

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

4. Symphram التفاعلي

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

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

5. وجه السلك بعناية

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

أدوات التصميم السلكية

ورقة وقلم رصاص

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

بلسم

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

ما هو النموذج الأولي؟

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

1. الاستفادة من النموذج الأولي

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

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

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

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

2. الميزات البصرية للنموذج

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

3. اختبار النماذج

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

  • كيف يبدأ المستخدم؟ (بحث أم عرض؟)
  • ماذا يفعل المستخدم اولا؟ وبعد ذلك؟
  • كيف يتخذ القرار النهائي؟
  • هل يفهمون الغرض من التصميم؟ هل هناك أي تحديات؟

يعد إنشاء نموذج أولي لمنتج عملية مستمرة تتطلب التكرار والتحسين.

أدوات النماذج

موكبلس

Mockplus هو أداة نموذجية شاملة للضوضاء السريعة والتصميم السريع والعرض السريع. يسمح لك بإنشاء نماذج بالحجم الطبيعي للجوال (Android و iOS) ، سطح المكتب (PC و Mac) وتطبيقات الويب. أضاف Mockplus 3.2 وضع تصميم تدفق واجهة المستخدم ، وأجهزة التكرار ، والمشاريع التجريبية والقوالب ، وعمليات الاستيراد التخطيطي. الميزات الأخرى ، مثل وضع تصميم الخريطة الذهنية ، ستكون متاحة في الإصدارات بعد Mockplus 3.2.

https://www.mockplus.com

iDoc

التعاون مع iDoc كأداة لتقديم التصميم ، وتوفير موارد التصميم ، بالإضافة إلى نموذج أولي للضوء. تتيح العملية المستمرة لمصممي واجهة المستخدم تحميل البرامج النصية المرئية من مكونات Photoshop و Adobe XD و Sketch الإضافية.

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

UXPin

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

ما هو النموذج بالحجم الطبيعي؟

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

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

تدفق التصميم

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

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

نصائح

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

مهتم أيضًا بـ:

أفضل الأدوات والتطبيقات لتصميم النماذج بالحجم الطبيعي والتليفزيون لمصممي UI / UX 2017

UX vs UI vs IA vs IxD: 4 خلط شروط التصميم الرقمي

أفضل كتب ومصادر تصميم UI / UX للمصممين

نشر في الأصل على www.mockplus.com.