إنشاء نموذج أولي لواجهة المستخدم الرسومية مع العميل [مغلق]

StackOverflow https://stackoverflow.com/questions/3781

  •  08-06-2019
  •  | 
  •  

سؤال

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

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

هل كانت مفيدة؟

المحلول

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

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

يناقش جيف النماذج الأولية الورقية في مقالته عن Coding Horror واجهة المستخدم الأولى لتطوير البرمجيات

انقر فوق "شاهد فيديو!" رابط في twitter.com لرؤية فكرة مثيرة للاهتمام حول الفكرة من الحرفة المشتركة.

نصائح أخرى

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

Napkin Look and Feel

على محمل الجد، كم هو رائع؟

أود أن أقترح عليك الجلوس مع عميلك واستخدام أداة مثل شاشات بالحجم الطبيعي وتطوير واجهة المستخدم بشكل تفاعلي.الميزة التي يتمتع بها على Napkin LAF هي أنه لا يتطلب أي أدوات برمجية أو تطوير من أي نوع

الدفع بالسميك

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

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

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

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

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

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

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

أعتقد أنه من الأفضل البدء بالورق/السبورات البيضاء/الجدران البيضاء.

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

أو يمكنك استخدام الدنيم (أداة غير رسمية لموقع ويب المرحلة المبكرة وتصميم واجهة المستخدم) مع كمبيوتر لوحي أو أجهزة Wacom اللوحية لتصميم واجهة المستخدم الرسومية وتشغيلها كموقع ويب بتنسيق HTML.

WireframeSketcher هي أداة تساعد في إنشاء إطارات سلكية ونماذج بالحجم الطبيعي ونماذج أولية بسرعة لتطبيقات سطح المكتب والويب والهاتف المحمول.ويأتي على حد سواء مستقل الإصدار وكما أ توصيل في لـ Eclipse IDEs.يحتوي على بعض الميزات المميزة مثل القصص المصورة والمكونات والربط وتصدير ملفات PDF المتجهة.من بين بيئات التطوير المتكاملة المدعومة Aptana وFlash Builder وZend Studio وRational Application Developer.

Sample WireframeSketcher mockup
(مصدر: wireframesketcher.com)

لقد استخدمت مؤخرًا تطبيق Windows لإنشاء نموذج أولي لأحد التطبيقات للعميل (يجب دمج الواجهة النهائية في موقع الويب).

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

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

منذ لقائي هذا، أشعر بالرعب دائمًا من النماذج الأولية والنماذج...ربما كان ينبغي عليّ أن أقدم لهم شيئًا مصنوعًا في برنامج Visio بدلاً من ذلك.

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

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

إنه مجاني - وإذا كان لديك حساب Gmail - فلا حاجة للتسجيل.

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

يعمل لصالحنا...

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top