نگاهی سریع به دکمه‌های روحی یا Ghost Button

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 17 اسفند 1396
دسته بندی ها : طراحی وب , تجربه کاربری

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

بیاید شروع کنیم.

دکمه‌های روحی یا Ghost Button

شناسایی دکمه‌های روحی بسیار ساده است و از ابتدای ساخت آن تا هم اکنون استفاده‌های زیادی از آن می شود. در یک نگاه کلی دکمه‌های روحی به صورت ترانسپارنت و توخالی هستند. آن ها به ندرت از رنگ‌ استفاده می کنند -جدای از رنگ سفید- و معمولا روی تصاویر پس زمینه و تصاویر Hero قرار می‌گیرند. معمولا از آن‌ها به عنوان دکمه‌های Call To Action استفاده می شود. این دکمه‌ها ظاهری واضح و ساده دارند. 

برخی دیگر از مشخصات اینگونه دکمه‌ها عبارت است از موارد زیر:

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

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

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

منبع اصلی دکمه‌های روحی

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

در تصویر زیر می توانید این حالت را از مرورگر آی‌او‌اس مشاهده کنید:

Ghost Button

و یا صفحه بروزرسانی:

Ghost Button

تمام این موارد نمونه‌های بسیار خوبی برای دکمه‌های روحی هستند.

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

برخی از مزیت‌ها و معایب این دکمه‌ها :

همراه با هر تکنیک طراحی بسیار عالی است اگر بتوانیم مزیت‌ها و معایب مهم آن‌ را متوجه شویم:

برخی از مزایای دکمه‌های روحی عبارت است از موارد زیر:

  • طراحی واضح، ساده و مدرن
  • CTA واضح (درصورت که به درستی استفاده شود)
  • بدون سرخوردگی و پیچیدگی - نمایش پس‌زمینه
  • طراحی و پیاده سازی راحت
  • نمایی حرفه‌ای

برخی از معایب این دکمه‌ها عبارت است از:

  • ممکن است برای کاربران مبتدی کمی گیج کننده باشد.
  • ممکن است در برخی حالت‌ها باعث خراب شدن پس زمینه شود.

نمونه‌ها

Ghost Button

Ghost Button

Ghost Button

در پایان

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

نظر شما راجع به این دکمه‌ها چیست؟ در قسمت نظرات به ما بگویید.

منبع

مقالات پیشنهادی

  • ۴ متد تحقیقاتی تجربه کاربری ارزان و سریع

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

    ارسطو عباسی
  • 7 قاعده طلایی برای تجربه کاربری

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

    ارسطو عباسی
  • ۱۰ نکته ساده برای بهبود تست کاربر

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

    ارسطو عباسی