گرافیک گرافیک رابط کاربری هنرهای تجسمی

مراحل طراحی رابط کاربری اپلیکیشن

در طراحی رابط کاربری اپلیکیشن از مدل‌سازی اولیه تا تحویل نهایی آن، یک پروژه واحد محسوب می‌شود. در ادامه این مطلب مراحل طراحی رابط کاربری اپلیکیشن در هفت مرحله توضیح داده شده است.

 مرحله اول: پیش-تحلیل

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

مرحله دوم: طراحی نقشه گردش تعاملات در اپلیکیشن

طراحی رابط کاربری اپلیکیشن

طراحی رابط کاربری اپلیکیشن

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

در این مرحله، اولین بازبینی کار صورت می‌گیرد. کار به سهامداران آن ارائه شده و در ادامه آن تغییرات لازم اعمال می‌شود.

مرحله سوم: مدل‌سازی (Mockups)

طراحی رابط کاربری

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

دومین بازبینی مشابه بازبینی اول، در این مرحله رخ می‌دهد.

مرحله چهارم: استانداردسازی عناصر

در این مرحله باید لیستی از عناصری که در مدل‌ها استفاده شده است تهیه کرد. این عناصر ممکن است شامل نوارهای عنوان، منوها، پنجره‌های پاپ‌آپ (pop-up windows)، آیکن‌ها، دکمه‌ها، پیغام‌ها، عکس‌ها و موراد مشابه باشند. همه این عناصر باید تا حد ممکن استانداردسازی شوند تا در اپلیکیشن، عناصر متفاوت برای اهداف مشابه وجود نداشته باشد.

در ادامه، راهنمای اندازه و نوع قلم (Font) نوشته‌ها باید تهیه شود. در طراحی اپلیکیشن، هر چه تعداد و اندازه قلم‌ها محدودتر باشد بهتر است. تهیه راهنما، به کار سرعت می‌بخشد. بعد از انجام این مراحل می‌توان جزییات را به مدل‌ها اضافه کرد و پالت رنگی را نیز انتخاب کرد.

 مرحله پنجم: نمونه اولیه 

طراحی رابط کاربری

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

سومین بازبینی در این مرحله توسط کاربران آزمایشی (test users) صورت می‌گیرد.

مرحله ششم: شیوه‌نامه نهایی طراحی UI موبایل

طراحی رابط کاربری اپلیکیشن

طراحی رابط کاربری اپلیکیشن

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

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

در آخرین مرحله بازبینی باید از سهام‌داران در مورد شیوه‌نامه طراحی شده نظرخواهی کرد و در صورت لزوم، نمونه صفحات بیشتری از اپلیکیشن را طراحی کرد.

مرحله هفتم: فولدربندی

طراحی رابط کاربری

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

4

۲ دیدگاه

نظر بدهید

مطالب را هر روز در ایمیل خود دریافت کنید.

[انصراف]