وبلاگ - نکات و ترفندها

0
1.1K
الگوهای UI در متریال دیزاین اندروید

الگوهای UI در متریال دیزاین اندروید


الگوهای طراحی UI یا همان واسط کاربری چیست؟

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

نوار ناوبری در متریال دیزاین

1. کاربر خواهان دسترسی سریع به گزینه های اضافی است

1STراه حل

منوی کشویی در اکشن بار دسترسی سریع به فعالیت های کم استفاده را برای کاربر میسر می سازد، لذا افزودن آن به اکشن بار مانع از بریدگی واسط اصلی می شود. این قابلیت به طور گسترده در اندروید استفاده شده، برای مثال اپلیکیشن YouTube از دکمه ای برای افزودن گزینه هایی مانند تنظیمات، کمک و یا خروج بهره گرفته است و یا اپلیکیشن Gmail از منوی کشویی برای گزینه ی بازنشانی و تنظیمات استفاده کرده. این امکانات معمولا به دفعات توسط کاربران استفاده نمی شود، از این روی باید در منوی کشویی جایگذاری شوند، به علاوه کاربر به آنها دسترسی کامل دارد. در آخرین نسخه اندروید از این قابلیت بسیار بهره گرفته شده و می توانید از آن در متریال دیزاین خود استفاده نمایید.

2. کاربر می خواهد از چگونگی کار با اپلیکیشن اطلاع پیدا کند

3rdراه حل

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

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

3. کاربر نیاز به حرکت در بین قسمت های گوناگون اپلیکیشن دارد

2ndراه حل

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

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

در اغلب موارد منوی کناری توسط یک Hamburger menu مخفی شده است. مخفی کردن مطالب کم اهمیت تر، رویکردی کاربرپسند می باشد.

Inbox by Gmail مثالی بسیار گویا از به کار گیری آیکون hamburger برای قرار دادن اطلاعات اضافی برای دسترسی کاربر است. منو دارای قابلت اسکرول بوده و تنظیمات و بازخورد در قسمت پایین قرار داده شده اند.

4. کاربر به سرعت می خواهد مقداری را انتخاب کند

4thراه حل

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

گرفتن ورودی در متریال دیزاین

5. کاربر خواهان دستیابی سریع به فعالیت هایی است که بیشتر مورد استفاده او قرار دارند

5thراه حل

اکشن بار یک الگوی طراحی بسیار متداول در اپلیکیشن های موبایل است. این قابلیت به کاربران امکان می دهد به فعالیت های معمول و تکراری، در قسمت بالای اپلیکیشن دسترسی پیدا کنند.

اکشن بار چندین عملیات کلیدی را در اختیار قرار می دهد.

 – موقعیت جاری کاربر در اپلیکیشن

 – دسترسی سریع و قابل پیش بینی به فعالیت های مهم

 – پشتیبانی سازگار از نمایش و ناوبری بین اپلیکیشن ها

در این مثال شما می توانید اپلیکیشنی به نام QuickPic را مشاهده کنید که آیکون های گوناگونی را هنگام گردش در صفحات مختلف به نمایش می گذارد. اکشن بار به کاربران امکان به اشتراک گذاری، پاک کردن، بازنشانی و بازگشت به صفحه قبل را می دهد.

6. کاربر خواهان راهی سریع و آسان برای ثبت نام و وارد شدن به سیستم است

6thراه حل

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

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

این امکان ساده نیز به طور چشم گیری قادر به توسعه UX یا همان سابقه کاربران در اپلیکیشن ها است، بتابراین از انتظار کاربران جهت داشتن چنین امکانی متعجب نشوید.

7. کاربر خواهان کنترل یک محتوای خاص و تمرکز بر روی آن است

7thراه حل

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

مثال دیگر در این مورد اپلیکیشن Tinder است که در آن با جابجایی به سمت راست یا چپ، شما می توانید درباره تصویر شخص، نظر مثبت یا منفی دهید.

8. کاربر خواهان ورود سریع اطلاعات است

8thراه حل

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

مدیریت محتوا در متریال دیزاین

9. کاربر خواهان حرکت سریع در بین محتویات و اطلاعات خاص است

9thراه حل

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

10. کاربر خواهان داشتن اطلاعاتی مرتب و منظم است

10thراه حل

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

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

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

منبع:

http://mobirses.com

 

این نوشته را به گوگل توصیه کنید :

بسته های آموزشی جذاب!بیشتر