Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Design
Code

5 گام برای Wireframing و کاغذ ساخت برنامه های موبایل

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called iPhone Design 101.
Killer Tips for iPhone and iPad Icon Design
How to Sell More Apps With Well Designed Screenshots

Persian (پارسی) translation by Muhamad Zulfiqor (you can also view the original English article)

این مقاله در مقاله قبلی ما در مورد فرایند طراحی موبایل حفاری عمیق تر به مرحله نمونه سازی و wireframing کاغذ از برنامه توسعه سازد. در پایان، من لیستی از ابزار های مختلف شما می توانید ایجاد wireframes و نمونه های اولیه داشته باشد.

5 Steps for Wireframing and Paper Prototyping Mobile Apps

طراحی تعامل برای موبایل موضوع مشترک گفتگو میان حرفه ای تجربه کاربر (UX) اما آنچه درباره آن دسته از ما که تنها با UX گاهی اوقات کار است؟ بسیاری از طراحان و توسعه دهندگان پروژه هایی که لوکس حفظ متخصص UX است اما انتظار می رود (البته) هنوز به محصول زیبا، بصری رابط های اختصاص داده شده.

Wireframing و نمونه سازی کاغذ

مقدار مناسبی از بحث در جامعه تجربه کاربر در سراسر ضرورت wireframing در طراحی وب سایت این روزها شده و من شروع به تعجب "همراه می کند این درخواست?" Wireframes فقط billable طراحی تحویل به مشتری به ما "کار" هستند؟ نه، من فکر می کنم بیش از آن است. نمونه سازی Wireframing و کاغذ است که قطعا به عنوان کاربر آنلاین سر تکامل و تبدیل به سلیقه تر تصفیه شده اما این عمل هنوز هم جزء بسیار با ارزش در طراحی تلفن همراه است.

نمونه سازی کاغذ می آید اولین

در تجربه من تفاوت گسترده در شکل و عملکرد wireframes در مقابل نمونه های کاغذ وجود دارد حتی اگر شرایط قابل استفاده ممکن است. در فرایند طراحی تلفن همراه من است اولین چیزی که اتفاق می افتد پس از ما کشف کردن که با استفاده از نرم افزار و چگونه، نمونه های کاغذ-wireframes نیست.

برخی که ادعای "کاغذ مرده است" وجود دارد و مشتری جلب کردن مزایای نمونه سازی دیجیتال. دیگران استدلال می کنند که مداد و کاغذ طراحی stregthens. هنگامی که من در مقابل کامپیوتر من شخصا, من با مایع بیشتر پوسته آمده. با این حال، ما همه افراد با سلایق متفاوتی و طرز تفکر است. شاید شما در مقابل کامپیوتر شما فقط به عنوان خلاق می تواند; این چیزی است که هر طراح این است که برای خود رقم است!

یکی از چیزهایی است که من در مورد نمونه سازی کاغذ نیست عشق سرعت که در آن شما می توانید طراحی باز گو می باشد. صفحه نمایش به اندازه مهم اشاره می کند که به سرعت خاموش، کشیده شود می تواند دوباره، بخواهند صفحاتی دوباره مرتب و غیره استفاده می کنم. هنگامی که جریان برای نرم افزار ایجاد شده است، این زمان به ناخن است بر روی صفحه نمایش عناصر در نسخه wireframed.

Wireframes دوم آمده و باید به اشتراک گذاشته

حتی اگر این برنامه را برای خود درونی "مشتری"، wireframes را به عنوان یکی دیگر از بررسی کنید برنامه در حال کار در راه است که هر دو کاربر و کسب و کار خدمت می کنند. شما می توانید جست و خیز روند و مستقیما از نمونه های کاغذ به فتوشاپ برای طراحی رابط کاربری گرافیکی حرکت. من می دانم آن وسوسه انگیز، اما این کار را نکنید! لحظه شروع به کار در یک حباب همان زمان شما را به "نفرین دانش" است.

در کتاب ساخته شده را به چوب نویسنده & برادران تراشه و دن هیت "نفرین دانش" و تاثیر آن در توانایی ما برای جدید، ایجاد ایده های "مهم" بحث در مورد. عنوان آن مربوط به طراحی تلفن همراه هنگامی که شما شروع به پایگاه دانش خود را از تلفن همراه طراحی و فن آوری، بیشتر به شما فاصله خود را از "کاربر معمولی برنامه" ساختمان فرض است. شما واقعا نمی توانید تصور کنید حتی اگر شما مشخصات کاملا مناسب آنچه در آن مانند به مخاطبان خود است. شما توانایی خود را در کفش خود را مخاطب قرار داده به همه چیز، شما می دانید درباره نرم افزار، چگونه کار می کند و آنچه شما فکر می کنم می خواهد مخاطب با ابر پوشیده می شود.

هنگامی که ما چیزی را می دانید، آن سخت به تصور آنچه در آن بود پیدا کنیم به آن می دانیم. دانش ما "ما نفرین است". -به چوب ساخته شده
همه که می گویند شما باید قاب و به اشتراک گذاری آن wireframes با مخاطبان خود را برنامه.

حالا که نمونه سازی wireframing و مقاله در زمینه تلفن همراه تعریف شده است، من می خواهم به بالا پنج چیز شما باید انجام در جلسات نمونه سازی wireframing و مقاله طرح. آسان به فقط با کف دست زدن کردن دسته ای از وقت خود را صرف و آن روز، به خصوص اگر شما اولیه تمرکز کاربر تجربه طراحی نیست.

امید من این است که این راهنمایی شما را به زمان به فکر می کنم از طریق تجربه کاربر app خود را با آن ساخت یک روند آسان، گام به گام است که تکرار و آسان به دنبال تشویق است!

1. تمرکز بر روی کار اصلی

اولین چیزی که به انجام قبل از شما حتی فکر قرار دادن قلم در مقاله این است که این سوال از خود بپرسید: app خود را وظیفه اصلی چیست؟ به طور خاص به نوشتن:

(شما تفاوت) (راه حل شما) برای (مخاطبان خود).

بیایید نگاهی به عنوان مثال برای app Evernote:

"Evernote برای آی فون شما ایجاد یادداشت ها، ضربه محکم و ناگهانی عکس و صدای ضبط یادداشت ها که شما سپس می توانید دسترسی هر زمان از آی فون خود را و کامپیوتر یا وب اجازه می دهد."

کپی بر روی وب سایت خود را به روشنی توضیح می دهد که وظیفه اولیه برای برنامه:

(Omni در دسترس) (چند ایجاد نوع فایل و ذخیره سازی) برای (کاربران آیفون های گاه به گاه).

Evernote Screenshot

این بیانیه برای نرم افزار خود را تعریف و رویه آن را در یک محل که در آن شما آن اغلب در حالی که کار بر روی نمونه های اولیه را ببینید. این کمک خواهد کرد که شما را به ماندن دقیقا متمرکز در یک چیز است که باید برنامه را انجام دهید.

2. ایجاد حالات مورد استفاده

پس از شما تعریف کرده اید که وظیفه اصلی خود را، شما احتمالا برخی از اندیشه را که می خواهد یک برنامه است که این کار را انجام می دهد! موارد استفاده بهترین راه برای گرفتن مقاله فرایند نمونه سازی آغاز شده است. در این مقاله من در مورد چگونه من تعریف سناریو های مورد استفاده برای نرم افزار روشن ابله ما بحث. هنگامی که آنها ممکن است یک برنامه مثل ابله روشن استفاده از "من مردم" نام و آدرس و شغل و سناریوی خاص دادم.

در اینجا مثالی آورده شده است:

جین در دفتر پزشکان به مدت 3 ساعت قرار ملاقات با پسرش 4 ساله، چاد انتظار است. او خود اپل فقط در مورد انتظار طولانی تر از حد انتظار است و البته آنها در اتاق انتظار برای نیم ساعت قبل از آنها به نام گیر آورده. در حالی که آنها منتظر ملاقات او جین گذشت زمان توسط کامیون و قطار با چاد نقاشی.

در این سناریو جین و چاد با هم، برنامه یعنی مادر او در مورد چگونگی ارتباط برقرار کردن با عناصر مختلف در صفحه نمایش اگر مطمئن نیستید از گام بعدی اعلام آمادگی می توانید بازی است.

حال بیایید نگاهی به این مثال:

جین در خط carpool انتخاب کنید تا او فرزند ارشد از مدرسه است. چاد در backseat بعد از یک روز خرید مایحتاج حوصله است. جین دست خود اپل به او با نرم افزار Doodle روشن راه اندازی شد. چاد می داند زیرا آنها حسی به 4 ساله که به فشار دکمه.

در این سناریو، کنترل را به راحتی قابل فهم برای کودک بدون نظارت می شود. این نوع کاغذ نمونه های اولیه برای این برنامه ایجاد می کنید تغییر دهید نیست? بله هک آن نیست! در حال حاضر، به جای طراحی برای مادر و پسر به درخواست تجدید نظر گسترده تر باید نمونه های اولیه که می بینیم اولیه نسبت به تنها فرزند بشود می شود.

واضح است که نیاز به یک برنامه مثل این "تفکر مثل یک کودک" اما بدون این استفاده از سناریو مورد تا این مدعا، در حال سقوط ممکن است به حالت پیش فرض"بالغ" از فکر کردن در مورد طراحی شود.

3-شناسایی مدل های ذهنی

در خود مقاله در مورد "راز طراحی رابط کاربری بصری" سوزان Weinschenk مذاکرات در مورد چگونه برای مطابقت با طراحی خود را به چه انتظار دارد که کاربر برای دیدن. بهتر شما می توانید انجام این کار، خود را رابط بصری بیشتر خواهد.

4. جریان را بررسی کنید.

من اغلب پیدا کردن که من جریان کامل تعریف شده برای برنامه، و سپس چیزی من بیرون را پیدا کنم. وجود دارد؟ اما یک چیزی که من پیدا کردم ام که می تواند سر کردن بسیاری از تشدید است "ترک استراحتی" تفکر خارج از سناریوی "کامل" است.

وقتی چاد ایجاد تصویر کاملا عالی جین میخواهد ذخیره و چاپ نمونه ای از سناریو ابله روشن است اما او طور تصادفی حدود Uh آه می بندد. حالا چه می شود؟ در نمونه کاغذ بود برای ذخیره خودکار حساب کنم؟ امیدوارم!

5. روش که با این نسخهها کار را برای شما پیدا کنید

همانطور که اشاره کردم قبل از هر کس منحصر به فرد و خلاقانه در راه خود است. شما باید برای پیدا کردن یک روش است که فشار بیشتر از شما. نمونه سازی کاغذ یکی از خلاق ترین تمرینات را در فرایند توسعه نرم افزار، شما باید در این کار در خود ساعت "نخست" محیط زیست و غیره.

منابع دیگر

بسیاری از مقالات وجود دارد با ده ها تن از منابع و ابزار برای ایجاد wireframes وجود دارد. امیدوارم که این مقاله به شما متقاعد شده است که این وظیفه شما مقابله با توان است حتی اگر شما تجربه کاربر متخصص. نگاهی به لینک های زیر و لطفا توجه داشته باشید هر یک از من بیرون را در نظرات زیر وارد نمایید.

برای یک مقاله بزرگ در مورد \به طور کلی، به 'مزایای Wireframing' بروید تا اصولی را که برای هر دو برنامه وب و تلفن همراه مورد استفاده قرار گیرد، بیاموزید.

بعد از بررسی یک سطح بسیار بالا در مورد فرایند \ که پشت برنامه اپل واشنگتن پست بود، پرداخت کنید. شخصا، دوست دارم اطلاعات بیشتر در مورد این یکی را ببینم!

سایر مراجع نکته:

مجموعه ای از الگوهای طرح قابل چاپ برای برنامه های تلفن همراه.

لیست عظیمی از ابزارهای مدل سازی و سرامیک سازی کاغذ.

درست مانند آن می گوید: 'منابع wireframing عالی'.

Advertisement
Advertisement
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.