بهترین شیوه های طراحی دکمه

در مقاله بهترین شیوه های طراحی دکمه به شما نکات مهم ux – ui که در طراحی دکمه همیشه باید رعایت شوند به ساده ترین روش توضیح می‌دهیم.

بهترین شیوه های طراحی دکمه – روش اول

وضعیت دکمه وضعیت خود را به کاربر اعلام می‌کند

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

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

دکمه ها در مقابل لینک ها

دکمه ها اقداماتی را که کاربران می‌توانند انجام دهند ارتباط برقرار می‌کنند.

آن‌ها معمولاً در سرتاسر UI شما قرار می‌گیرند، در مکان‌هایی مانند:

دیالوگ‌ها، فرم‌ها، نوار ابزار و غیره.

تمایز بین دکمه‌ها و پیوندها مهم است:

پیوندها زمانی استفاده می‌شوند که در حال پیمایش به مکان دیگری هستید، مانند:

صفحه «مشاهده همه»، نمایه «راجر رایت» و غیره.

هنگامی که شما در حال انجام یک عمل هستید، از دکمه استفاده می‌شود، مانند: «ارسال»، «ادغام»، «ایجاد جدید»، «آپلود» و غیره.

بهترین شیوه های طراحی دکمه – روش دوم

نرمال – ارتباط برقرار می‌کند که جزء تعاملی و فعال است.

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

شناور – هنگامی که کاربر مکان نما را بالای یک عنصر تعاملی قرار می‌دهد، ارتباط برقرار می‌کند.

حالت فعال — یا فشار داده شده نشان می‌دهد که کاربر روی دکمه ضربه زده است.

پروگرس / لودینگ _ زمانی استفاده می‌شود که عمل فوراً انجام نمی‌شود و نشان می‌دهد که جزء در حال تکمیل عمل است.

غیرفعال – نشان می‌دهد که مؤلفه در حال حاضر غیر تعاملی است، اما می‌تواند در آینده فعال شود.

تکنیک‌ های طراحی دکمه : روش سوم

دکمه ها در رنگ ها، شکل ها و اندازه های مختلف وجود دارند.

رایج ترین دکمه ها

مستطیل شکل با گوشه های گرد هستند که به راحتی قابل شناسایی هستند و در کنار فیلد ورودی خوب به نظر می‌رسند.

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

در اینجا برخی از محبوب‌ترین تغییرات سبک آورده شده است.

روش های طراحی دکمه – روش چهارم

سبک‌ها اهمیت یک عمل را بیان می‌کنند.

سبک‌ها عمدتاً برای متمایز ساختن اقدامات مهم‌تر از اقدامات کم‌اهمیت‌تر استفاده می‌شوند.

سلسله مراتبی از اقدامات ایجاد کنید که کاربر را در جایی که گزینه‌های زیادی وجود دارد راهنمایی کند. معمولاً می‌توانید یک دکمه برجسته داشته باشید (که معمولاً به آن سبک «اصلی» می‌گویند)

و چندین اقدام «ثانویه» متوسط و «ثالثه» با تأکید کم داشته باشید.

تکنیک در طراحی UI دکمه ها – روش پنجم

دکمه ها را برای تعامل قابل‌اعتماد

به‌اندازه کافی بزرگ کنید

فشار دادن یک دکمه باید کار ساده‌ای باشد و اگر کاربر نتواند با موفقیت روی یک دکمه ضربه بزند یا در این فرآیند به‌اشتباه روی یک element همسایه ضربه بزند، منجر به تجربه منفی و از دست دادن زمان می‌شود. برای اکثر پلتفرم‌ها، اهداف لمسی را حداقل 48×48 dp در نظر بگیرید. یک هدف لمسی با این اندازه منجر به‌اندازه فیزیکی حدود 9 میلی‌متر، صرف‌نظر از اندازه صفحه‌نمایش می‌شود. اندازه هدف توصیه‌شده برای عناصر صفحه لمسی حداقل 7 تا 10 میلی‌متر است.

برای دکمه‌های آیکون، مطمئن شوید که هدف لمسی فراتر از مرزهای بصری یک element است. این نه‌تنها برای موبایل یا تبلت صدق می‌کند، بلکه همان اندازه توصیه‌شده برای دستگاه‌های اشاره‌گر در وب مانند ماوس نیز صادق است.

تکنیک در طراحی UI دکمه ها – روش ششم

طراحی برای دسترسی این توصیه باید برای هر جزء تکرار شود.

اندازه منطقه هدف یکی از عواملی بود که دسترسی را تحت تأثیر قرارداد.

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

نقش دکمه باید برای element قابل کلیکی استفاده شود که در صورت فعال شدن توسط کاربر، پاسخی را ایجاد می‌کنند. افزودن role=”button” باعث می‌شود یک عنصر به‌عنوان کنترل دکمه در صفحه خوان ظاهر شود.

طراحی UX دکمه ها : روش هفتم

حرکات نسبتاً به‌طور گسترده پذیرفته می‌شوند.

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

طراحی UX دکمه ها – روش هشتم

خب بریم بحث بعدی label دکمه خوب کاربران را به اقدام دعوت می‌کند.

آنچه دکمه های شما می‌گویند به‌اندازه ظاهر آن‌ها مهم است.

استفاده از label اشتباه می‌تواند باعث سردرگمی کاربران، از دست دادن زمان و احتمالاً برخی از اشتباهات بزرگ شود.

یک label دکمه خوب، کاربران را به اقدام دعوت می‌کند. بهتر است از افعال استفاده کنید و دکمه را با آنچه که واقعا انجام می‌دهد label بزنید.

مثل این است که دکمه از کاربر می‌پرسد –

“آیا می‌خواهید (افزودن به سبد)؟”

یا «آیا می‌خواهید (سفارش را تأیید کنید)؟».

از استفاده از بله خیر یا label هایی که خیلی عمومی هستند خودداری کنید – مانند ارسال.

*به عکس توجه کنید*

Info: به معنی اطلاعات

Learn more: به معنی بیشتر بدانید

قطعاً Learn more در اینجا درست است

باید از برچسب درست استفاده کرد: این نکته رو باز هم میگم:

استفاده از label اشتباه می‌تواند باعث سردرگمی کاربران، از دست دادن زمان و احتمالاً برخی از اشتباهات بزرگ شود.

نکات مهم در طراحی دکمه ها – روش نهم

Ok/Cancel یا Cancel/Ok?

هر کدوم خوبه

هر دو فقط یک انتخاب هستند و طراحان می‌توانند ساعت ها در مورد ترجیحات خود بحث کنند.

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

ویندوز اول OK را قرار می‌دهد فهرست OK آخرین جریان را بهبود می‌بخشد.

برخی ممکن است استدلال کنند Ok زیرا دکمه بعدی کاربر را به جلو می‌برد. در آخر قراردادن OK، به کاربران کمک می‌کند تا همه گزینه‌ها را قبل از اقدام ارزیابی کنند و به جلوگیری از اشتباهات و تصمیم‌گیری‌های عجولانه کمک کنند.

اپل OK را در آخر قرار می‌دهد.

تکنیک طراحی دکمه ها در UX UI – روش دهم

دکمه‌های غیرفعال به درد می‌خورند

قبلاً همه در این شرایط بودند.

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

کنترل‌های غیرفعال برای نشان دادن این‌که مؤلفه در حال حاضر غیرتعاملی است استفاده می‌شود، اما در آینده می‌توان آن را فعال کرد.

از دکمه های غیرفعال استفاده می‌شود زیرا حذف دکمه از محل اصلی خود و نشان دادن آن در یک زمینه بعدی می‌تواند باعث سردرگمی کاربران شود.

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

جهت مطالعه آموزش های رایگان دیگر به وبلاگ اول باش بپیوندید.