4 تکنیک در طراحی UI دکمه ها!

دکمه ها را چگونه طراحی کنیم؟

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

دکمه ها در طراحی UI ضروری هستند، چراکه بیشتر رابط های کاربری برای انجام و ادامه برنامه به درخواست از طرف ما نیاز دارند.

پس اگر موافق هستید با یادگیری تنها 4 تکنیک ساده و کاربردی کاری کنید که یک طراحی UI  موفق برای دکمه های پروژه تان داشته باشید. (قطعا  تکنیک های بیشتر دیگری نیز وجود دارد اما این 4 فاکتور بسیار ضروری هستند)

خب بیاید اول راجع به آناتومی دکمه شروع کنیم.

دکمه ها چند ویژگی تعریفی دارند،به عکس زیر دقت کنید.

به عنوان یک شکل معمولی، آن ها می توانند سایه، border  داشته باشند، فاصله بین آنها با padding  (یا همان حاشیه درونی)، و حاشیه خارجی که به عنوان ایجاد یک فضای امن برای دکمه عمل می کند.  برچسب روی دکمه ها هم معمولا متن به همراه آیکون مربوط به متن است.

حال که با موضوعات پایه دکمه آشنا شده اید سراغ طراحی UI  دکمه برویم.

4 تکنیک در طراحی UI دکمه :

1. یک دکمه باید شبیه به دکمه باشه!

این مورد از همه تکنیک ها ساده تر است، عموم مردم اکثرا به این که شکل یک دکمه یا مستطیل یا دایره است،عادت دارند.حال اگر طراحی دکمه  شکلی غیر از این دو باشد باعث سردرگمی کاربر می شود. اشکال و فرم های دیگر(مثلث، لوزی، ذوذنقه) به اندازه کافی برای کاربر قابل شناسایی نیستند. با احتیاط عمل کنید، تنها در زمانی می توانید از اشکال ارگانیک استفاده کنید که سبک کلی محصولات شما هم به انحراف از استانداردها نیاز دارد.

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

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

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

2. اندازه

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

طراحی UI  دکمه ها باید به اندازه کافی بزرگ باشند که استفاده از آنها راحت باشد، اما چقدر بزرگ؟

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

3. ترازبندی همه چیز است!

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

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

در طرفین حتی بهتر است که برای خوانایی بهتر از 2  تا W  استفاده کنید.

فضای امن بین دکمه هارا هم در طراحی UI  فراموش نکنید. اگر چند دکمه کنار هم قرار دارند، فضای امن باید برای هرکدام جداگانه اعمال شود.

4. برچسبی خوانا

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

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

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