نکات طراحی دکمه در اپلیکیشن

۷ قانون طلایی در طراحی دکمه های اپلیکیشن موبایل - بخش اول


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

 

اما چگونه میتوان دکمه هایی طراحی کرد که کاربران را کلافه نکنند؟ در این مقاله قصد داریم به 7 روش کاربردی در طراحی دکمه بپردازیم، با ما همراه باشید.

1. به قواعد اصلی در طراحی رابط کاربری پایبند بمانید

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

 

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

 

اندازه

عملیات تپ کردن، متد ورودی اصلی در اپلیکیشن های موبایل محسوب میشود و مطابق با دستورالعمل های متریال دیزاین اندروید، باید حداقل اندازه 48*48 dp را برای عناصر لمسی درنظر گرفت و بین آنها هم حداقل 8dp یا بیشتر فاصله گذاشت. به این ترتیب میتوان از بابت تعادل مناسب بین تراکم اطلاعات و کاربردپذیری اطمینان حاصل کرد.

 

شکل

شکل دکمه به چیزی که برای آن طراحی میکنید بستگی دارد. برای نمونه در طراحی رابط کاربری اندروید، دکمه های فلت و برجسته باید حداقل 36dp ارتفاع و 88dp عرض داشته باشند. 2dp برای شعاع گوشه های دایره مانند و 2dp نیز برای برجستگی مناسب است.

 

فاصله گذاری

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

 

2. از رنگ هایی استفاده کنید که دکمه ها را فعال نشان دهد

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

 

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

 

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

 

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

 

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

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

 

به کاربرد کانتراست بالا برای دکمه های فعال در زبانه ها که در تصویر زیر نمایش داده شده توجه کنید:

 

نکات طراحی دکمه در اپلیکیشن

 

3. به کاربر کمک کنید تا عملیات را اولویت بندی کند

به گفته Erik D. Kennedy سایه ها سرنخ های بسیار خوبی و ارزشمندی هستند که به ذهن انسان میگویند اجزای رابط کاربری که به آنها نگاه میکنیم چه چیزهایی هستند.

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

 

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

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

 

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

 

در زیر نمونه ای از Deliveroo آورده شده...

کاربر با استفاده از این گوشی موبایل در اپلیکیشن وارد شده و به احتمال زیاد مجددا برای ثبت نام با این گوشی وارد میشود. دکمه Log in های لایت شده و تاکید کمتری روی دکمه ثانویه Sign up شده است.

 

نکات طراحی دکمه در اپلیکیشن

در مطلب بعدی به سایر نکات در طراحی دکمه ها میپردازیم، با ما همراه باشید.

 

https://www.justinmind.com برگرفته از

اینها را هم بخوانید