۱۰ نکته مهم برای طراحی دکمه UI وب سایت
0 دیدگاه
1 آذر 1398
نویسنده : پشتیبان
دسته بندی : مقاله ها
با سلام به همراهان و علاقمندان به آموزش طراحی وب سایت. امروز با مقاله ای پیرامون طراحی دکمه ها برای وب سایت در خدمتتون هستیم. در این مقاله قصد داریم به ۱۰ مورد از نکات مهم برای طراحی دکمه UI وب سایت اشاره کنیم. شاید دکمه ها از نظر فیزیکی کوچک و کم اهمیت به نظر برسند، اما در طراحی بسیار موثر و قابل توجه هستند.
طراحی دکمه چیزی است که اکثر کاربران وب سایت هرگز به آن فکر نمی کنند. زیرا وقتی به خوبی کار می کند، تقریبا کافی است. بهترین دکمه ها این ویژگی ها را دارند: که برای کلیک کردن و فشار دادن راحت هستند، یک عملکرد واضح دارند و به کاربران کمک می کنند تا بدون فکر کردن با طراحی در تعامل باشند.
این یک فرمول نسبتا ساده است، اما اگر شما آن را فراموش کنید، طراحی دکمه ها می تواند دشوار باشد. امروز، ما گرایش ها به علاوه چند نکته در طراحی دکمه UI وب سایت ارائه می دهیم؛ که به شما کمک می کند تا افراد بارها و بارها روی آن کلیک کنند.
طراحی دکمه تان را با این نکات و ایده ها بهبود دهید.
۱۰ نکته مهم برای طراحی دکمه UI وب سایت
۱- آن را ساده نگه دارید
همه این ها به این عبارت کلاسیک در تئوری طراحی برمیگردد: آن را ساده نگه دار. همچنین طراحی دکمه وب سایت هم هیچ تفاوتی ندارد. یک طراحی دکمه لازم نیست خیلی پیچیده باشد. آن باید واضح و کاربردی باشد. گاهی اوقات دیگرگرایش های طراحی میتوانند در این راه بدست آیند، و آن میتواند بر روی تغییر وب سایت شما تاثیر بگذارد. بنابراین زمانی که نوبت به طراحی دکمه میرسد، اینگونه فکر کنید – و فراتر از آن فکرنکنید. یک دکمه باید شبیه به یک دکمه به نظر برسد. این که خیلی ساده است.
۲- تضاد فراوان ایجاد کنید
یکی دیگر از نکته های مهم طراحی دکمه UI وب سایت آگاهی از این است تقریبا داشتن یک دکمه قابل شناسایی مهم، اطمینان می دهد که دیدن آن آسان است. ایده ی دکمه های مرئی در بالای تصاویر که به سرعت محو می شوند به این دلیل است که دکمه ها دارای تضاد کافی نیستند تا به راحتی قابل تشخیص باشند. کاربران نمی توانند فوراً آنها را پیدا کنند.
دکمه های با تضاد ضعیف را محو نکنید. آنها را ثابت نگه دارید و با تضاد رنگ و فضای زیاد آنها را نمایان کنید تا اینکه آنها از دیگر عناصر روی صفحه نمایش جدا شوند. PADDING زیادی در اطراف دکمه ها بگذارید تا اینکه آنها بتوانند نفس بکشند. این کار پیداکردن و شناسایی دکمه های قابل کلیک را برای کاربران آسان تر می کند و همچنین باعث کلیک بدون اشتباه عناصر می شود.
۳- از رنگ استفاده کنید
آیا تا به حال متوجه شده اید که چند دکمه قرمز یا نارنجی هستند؟ این به این دلیل است که رنگ های روشن چشم را به سمت این عناصرجلب می کنند و واکنش را تقویت میکند. استفاده از رنگ نیز یک روش طراحی بسیار مرسوم است. از رنگ های روشن با گرادیان های ساده برای دکمه ها. رنگ ممکن است یکی از راه های آسان برای کمک به افراد برای تعامل با طرح باشد.
۴- نوشتن میکروکپی(کلمه ی نوشته شده برروی دکمه) که ایجاد انتظار کند
این اشتباه را نکنید: یک دکمه با کلمات ” اینجا کلیک کنید” بر روی آن. (آن چه هرزنامه ای است؟) میکروکپی در یک طراحی دکمه باید یک انتظار واضحی از آنچه با یک کلیک ایجاد می شود را ایجاد کند. به کاربران بگوید که قدم بعد چه خواهد شد. این می تواند به همین سادگی باشد ” ارسال” برای وارد کردن داده، یا کلیک بر روی پیوند” بیشتر بدانید”، یا تماشا کردن یک ویدیو. صرف نظر از این ها، میکروکپی به کاربران می گوید که عملکرد چیست. این اطلاعات میتواند به ایجاد اعتماد با کاربران کمک کند .
۵- با انیمیشن های ظریف درگیر شوید
گرایشی در طراحی دکمه وجود دارد جایی که وب سایت ها از دو دکمه کنار هم استفاده می کنند. یکی توپر و یکی به سبک مرئی.
هر دو شامل یک انیمیشن هاور هستند که بیشتر بر انتخاب دو گزینه قابل کلیک تاکید می کنند. انیمیشن می تواند به جلب توجه دکمه ها کمک کند و حتی کلیک ها را تقویت کند. این یک دکمه کاربر پذیر عادی است که یک انیمیشن هاور بر روی دکمه ها را شامل می شود و یک نشانه ساده برای کاربرانی که باید درگیر شوند را فراهم می کند.
فقط به بالای صفحه نروید. دکمه های با حالت چرخان، چرخشی، چشمک زن ضرر بیشتری نسبت به مفید بودنشان دارند.
۶- دکمه برای کلیک کردن باید به اندازه کافی بزرگ باشد
یکی دیگر از نکات طراحی دکمه UI وب سایت این است که دکمه ها باید شامل یک مساحت قابل کلیک (قابل لمس) که حداقل ۱۰ میلی متر در قطر باشد باشند و مساحت بیشتر همیشه بهتر است.
بیایید این را در پرسپکتیو قرار دهیم. یک کلید بر روی کیبورد کامپیوتر ۱۵ میلی متر در ۱۵ میلی متر است. این یک هدف خوب است. (فقط فراموش نکنید که برای اندازه های صفحه نمایش مختلف حساب کنید که دکمه شما بر روی صفحه نمایش های کوچک از بین نرود. اگر شما نیازی
به استفاده از دکمه های کوچکتر دارید، یک شعاع قابل کلیک گسترده به آن اضافه کنید. به این ترتیب اگر کاربر دکمه های خود را از دست بدهد ، فضای کافی در اطراف آن وجود دارد تا عمل مورد نظر همچنان اتفاق بیفتد. (بازدیدکنندگان وب سایت شما، از شما متشکر خواهند شد).
۷- از یک سبک آشنا استفاده کنید
چند سبک دکمه وجود دارد که هر کسی با آنها آشنا هست. یکی از آنها را استفاده کنید.
- یک دکمه توپر مستطیل با لبه های مربع و متن داخل آن
- یک دکمه توپر مستطیل با لبه های گرد و متن داخل آن
- یک دکمه توپر مستطیل با یک drop shadow قابل رویت (در بالا)
- یک دکمه مرئی مستطیل
- دکمه های دایره ای ساده، که معمولا بیشتر در گوشه سمت راست پایین برای نشان دادن پشتیبانی ، کمک یا چت استفاده می شود.
۸- دکمه را در یک مکان مورد انتظار قرار دهید
نه نتها انتظار می رود که دکمه ها باید عملکرد و ظاهر مناسب داشته باشند، بلکه آنها نیز باید در مکانی که کاربران به دنبال آن ها هستند، قرار بگیرند.
- برای صفحه اصلی، این شامل قرار دادن دکمه در زیر عنوان اصلی یا بلوکی از متن است. دکمه ها معمولاهمراه با متن سمت چپ یا در مرکز صفحه نمایش قرار دارند.
- برای فرم ها، دکمه ها بعد از ورودی ها ظاهر می شوند. برخی از فرم های ورودی واحد، دکمه را در همان ردیف در سمت راست ورودی تراز می کنند.
- دکمه های عمومی CTA مستقیما در زیر محتویاتی که به آن ها بر میگر دند ظاهر می شوند.
- دکمه ها برای پخش یا شروع یک ویدیو یا بازی اغلب در مرکز صفحه پیش نمایش قرار می گیرند.
- دکمه های سبد خرید یا تجارت الکترونیک به طور کلی در گوشه بالا سمت راست قرار دارند.
۹- بازخورد را فراموش نکنید
یکی دیگر از نکات طراحی دکمه UI وب سایت این است که آیا دکمه به تعامل پاسخ می دهد؟ اطمینان حاصل کنید که یک حلقه بازخوردی واضح در طراحی اینترفیس دکمه وجود دارد. یک نشانه بصری یا آموزشی را ارائه دهید که دکمه کار آن را انجام می دهد. برخی دکمه ها به کار بیشتری نسبت به سایرین نیاز خواهند داشت.
برای مثال، دکمه هایی که به صفحه یا وب سایت دیگری پیوند می خورند، بازخوردی که در صورت بارگذاری صفحه جدید این دکمه کار کرده است را ارائه می دهد. دکمه ی یک فرم ثبت اطلاعات ممکن است یک پیام ” متشکرم” بر روی صفجه نمایش ارائه دهد، در صورتی که اطلاعات به درستی ارسال شوند.
۱۰- عمدا از دکمه ها استفاده کنید
بسیاری از دکمه ها هرج و مرج ایجاد می کنند. از دکمه هایی استفاده کنید که منطقی باشند. از یک طرح با دکمه های زیاد در سر تا سر آن استفاده نکنید. در این صورت کاربران یک ایده واضح از مکان و چیزی که اهمیت بیشتری برای کلیک کردن دارد نخواهند داشت.
دکمه هایی را برای استفاده نگه دارید که با هدف سایت شما همراه باشد. آنها باید بازدید کنندگان را به سمت عناصری که در طراحی کلی شما مهم هستند، سوق دهند.
نتیجه گیری
یک دکمه وب سایت عنصری است که فراخوانی شما را به واکنش نسبت به یک نتیجه تبدیل می کند. برای فکر کردن در مورد این طراحی، از رنگ گرفته تا توابع تا میکروکپی، وقت بذارید. تست طرح های دکمه برای مطمئن ساختن شما از اینکه شما بیشترین نسخه کاربردی در اینترفیس تان را دارید می باشد. اگر شما یک دکمه دارید که کار می کند، در دام نیفتید و طرح را تغییر دهید. وقتی صحبت از دکمه ها می شود، عملکرد باید اولویت اصلی باشد.
امیدوارم این ۱۰ نکته مهم برای طراحی دکمه UI وب سایت برای شما کاربردی و مفید باشد.
- منبع:
- designshack
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام مدرسه گرافیک پلاس عضو شوید.
آخرین دیدگاه های شما