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

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

پی‌نوشت: اگر می‌خواهید در مورد ایجاد بازی‌های واقعی بخوانید، پست ما در مورد UI بازی را بررسی کنید.

یکی از جنبه‌های اساسی طراحی دکمه، اطمینان از قابل کلیک به نظر رسیدن دکمه است. کاربران باید بتوانند یک دکمه را بلافاصله شناسایی کرده و درک کنند که می‌توان با آن تعامل کرد. اشکال آشنا مانند مستطیل‌های گرد با سایه‌ها مؤثر هستند زیرا عمق می‌افزایند و نشان‌دهنده قابلیت کلیک هستند. اضافه کردن میکروتعاملات، مانند تغییر رنگ یا حرکات جزئی در زمان هاور، این احساس را تقویت می‌کند. یک الگوی کلاسیک UI که اغلب دست‌کم گرفته می‌شود را دوباره کشف کنید: UI‌های لیست.

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

استفاده از متن واضح و توصیفی روی دکمه‌ها، وب‌سایت‌ها و اپلیکیشن‌ها را آسان‌تر می‌کند. به جای برچسب‌های عمومی مانند “تأیید” یا “لغو”، از عبارات خاصی مانند “حذف دائمی” یا “لغو رزرو” استفاده کنید. این وضوح به کاربران کمک می‌کند تا عمل دکمه را درک کنند و تعاملات را نرم‌تر می‌کند.

مطمئن شوید که دکمه‌ها به اندازه کافی بزرگ هستند که بتوان به راحتی روی آن‌ها ضربه زد یا کلیک کرد. به‌ویژه در گوشی‌ها، دکمه‌های کوچک می‌توانند استفاده از آن‌ها دشوار باشد. مهم‌ترین دکمه‌ها را بزرگتر از دکمه‌های کمتر مهم کنید تا کاربران بتوانند به سرعت آن‌ها را پیدا کنند. آزمایشگاه لمسی MIT در سال 2003 یک مطالعه منتشر کرد که نشان می‌دهد بیشتر نوک انگشتان 8 تا 10 میلی‌متر عرض دارد.

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

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

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

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

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

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

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

“سایه‌ها نشانه‌های بی‌نظیری هستند که به مغز انسان می‌گویند ما به کدام عناصر رابط کاربری نگاه می‌کنیم.”

Erik D. Kennedy - طراح UX

ارائه بازخورد بصری در هر مرحله از سفر کاربر، آن‌ها را مشغول و آگاه نگه می‌دارد. به یاد داشته باشید که دکمه‌ها اشیاء یک‌حالت نیستند؛ آن‌ها باید همیشه در مورد وظیفه‌ای که کاربر در حال انجام یا به‌تازگی انجام داده، بازخورد دهند.

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

کاربرد: تأکید بر مهم‌ترین اقدامات.

طراحی: رنگ‌های پررنگ و اندازه بزرگ‌تر.

مثال: ارسال، ذخیره.

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

طراحی: رنگ‌های ملایم و اندازه‌های کوچکتر.

مثال: لغو، برگشت.

کاربرد: اقدامات اختیاری، معمولاً برای ویژگی‌های اضافی.

طراحی: استایل حداقلی، معمولاً مبتنی بر متن.

مثال: بیشتر بدانید، جزئیات.

کاربرد: اقدامات رایج که می‌توان آن‌ها را به راحتی با آیکون‌ها نمایش داد.

طراحی: آیکون‌های واضح و قابل شناسایی.

مثال: ویرایش، حذف.

کاربرد: تأکید بر اقدامات اصلی در رابط‌های موبایل.

طراحی: دکمه‌های گرد و برجسته با سایه برای ارتفاع.

مثال: افزودن، نوشتن.

کاربرد: اطمینان از اندازه‌گیری یکسان در کل رابط کاربری.

طراحی: اندازه کوچک، متوسط، بزرگ.

کاربرد: از شلوغی‌زدایی و حفظ وضوح با ایجاد فضای اطراف دکمه جلوگیری کنید.

کاربرد: از دستورالعمل‌های حداقلی ناحیه لمسی پیروی کنید تا اندازه کافی برای تعاملات لمسی اطمینان حاصل کنید.

کاربرد: با بهره‌گیری از رنگ‌های اولیه، ثانویه و ثالث، انسجام برند و سلسله‌مراتب بصری را حفظ کنید.

کاربرد: با اطمینان از خوانایی و دسترسی با کنتراست کافی بین متن و پس‌زمینه، محدودیت‌ها را در نظر بگیرید.

کاربرد: از متن واضح و خوانا روی دکمه‌ها با سبک، اندازه و وزن مناسب استفاده کنید.

طراحی: ظاهر طبیعی با رنگ و اندازه استاندارد.

طراحی: ظاهر قدری تغییر می‌کند زمانی که نشان‌گر ماوس بر روی دکمه هاور می‌شود، معمولاً با تغییر جزئی رنگ یا سایه.

طراحی: ظاهر طبیعی با رنگ و اندازه استاندارد.

طراحی: ظاهر قدری تغییر می‌کند زمانی که نشان‌گر ماوس بر روی دکمه هاور می‌شود، معمولاً با تغییر جزئی رنگ یا سایه.

طراحی: ظاهر زمان کلیک بر روی دکمه نشان‌دهنده یک رنگ تیره‌تر یا اثر فشردگی.

طراحی: نشان‌دهنده زمانی که دکمه غیر فعال است، معمولاً با رنگ محو و عدم امکان تعامل.

طراحی: حاشیه یا درخشش برای نشان دادن زمانی که دکمه فوکوس شده است.

کاربرد: ارائه بازخورد بر روی اقدامات کاربر از طریق انیمیشن‌های کوچک و تعاملی.

کاربرد: نشان دادن فرآیندهای جاری با استفاده از چرخش‌ها یا نشان‌گرهای پیشرفت روی دکمه‌ها.

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

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

2. دکمه عمل شناور گسترش‌یافته: این دکمه هنگام ضربه زدن به چندین گزینه گسترش می‌یابد، اما مهم است که گزینه‌ها مربوط و حداقلی (نه بیشتر از سه) باشند. برای مثال، در یک اپلیکیشن یادداشت‌برداری، دکمه می‌تواند گسترش یابد و گزینه‌هایی مانند “ایجاد یادداشت جدید” یا “ویرایش یادداشت” را ارائه دهد و به کاربران کمک کند تا وظایف مرتبط را بدون سردرگمی انجام دهند. این روش امکان انتقال‌های نرم‌تر و عملکرد شهودی را تضمین می‌کند.

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

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

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

نمونه را دانلود کنید

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

نمونه را دانلود کنید

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

نمونه را دانلود کنید

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

نمونه را دانلود کنید

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

نمونه را دانلود کنید

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

نمونه را دانلود کنید

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

نمونه را دانلود کنید

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

نمونه را دانلود کنید

در اینجا یک مثال از طراحی دکمه وب‌سایت برای انتخاب مهمان وجود دارد که آسان و فهیم است. دکمه‌های “+” و “–” به کاربران اجازه می‌دهد تعداد بزرگسالان و کودکان را تنظیم کنند و همه چیز را ساده و واضح نگه می‌دارند. دکمه “انجام شد” در قسمت پایین به اندازه کافی مشخص است و به کاربران اجازه می‌دهد انتخاب‌های خود را بدون فکر اضافی تأیید کنند. این یک روش عملی و کاربرپسند برای مدیریت انتخاب‌ها در وب‌سایت‌های رزرو است و اطمینان حاصل می‌کند که همه می‌توانند به راحتی تغییرات را اعمال کنند.

نمونه را دانلود کنید

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

نمونه را دانلود کنید

این دکمه‌ها دو انتخاب واضح ارائه می‌دهند: “شروع کن” به رنگ سیاه پررنگ و “ویدیو را ببین” به رنگ نارنجی گرم. کنتراست بین آن‌ها توجه را جلب و آیکون پخش در دکمه ویدیو حسی تعاملی به آن می‌دهد. لبه‌های گرد هر دو دکمه را دوستانه می‌کند و کاربران را راهنمایی می‌کند تا یا اقدام فوری را انجام دهند یا ابتدا بیشتر کنجکاوی کنند.

نمونه را دانلود کنید

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

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

نمونه را دانلود کنید

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

نمونه را دانلود کنید

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

نمونه را دانلود کنید

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

نمونه را دانلود کنید

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

نمونه را دانلود کنید

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

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