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

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

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

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

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

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

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

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

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

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

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

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

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

Ghost Button

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

Ghost Button

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

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

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

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

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

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

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

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

نمونه‌ها

Ghost Button

Ghost Button

Ghost Button

در پایان

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

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

منبع

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

چگونه به صورت سریع ریز تعاملات را به وبسایت اضافه کنیم؟

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

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

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

7 اصل مهم تجربه کاربری

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

10 نکته برای داشتن تجربه کاربری بهتر در موبایل

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