عناصر رایج مورد استفاده در طراحی دکمه های رابط

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

ایجاد دکمه روبان الگو

بعد از ایجاد پس‌زمینه بافت‌دار با استفاده از تکنیک آموزش کوچک قبلی، با استفاده از ابزار Shape یک مستطیل بکشید و آن را با رنگ سبز آبی پر کنید. من از رنگ #008B8D استفاده کردم.

شکل دیگری با همان ارتفاع و رنگ بکشید.

با استفاده از ابزار Lasso، یک مثلث ایجاد کنید، همانطور که در زیر مشاهده می کنید. آن را روی لبه شکل جدید قرار دهید و کلید “حذف” را فشار دهید تا قسمتی که به آن نیاز نداریم حذف شود.

شکل را کپی کنید و به Edit → Transform → Flip Horizontally بروید تا آن را در جهت مخالف قرار دهید.

دو شکل را همانطور که در زیر مشاهده می کنید، زیر شکل بزرگتر قرار دهید.

روی یکی از اشکال خود کلیک راست کرده و پنجره Blending Options / Layer Style را باز کنید. یک Gradient Overlay مشابه تصویر زیر اعمال کنید. شما همچنین می توانید یک Drop Shadow ظریف اضافه کنید. پس از اتمام، روی لایه کلیک راست کرده و “Copy Layer Style” را انتخاب کنید. شکل بنر دیگر خود را انتخاب کنید. کلیک راست کرده و “Paste Layer Style” را انتخاب کنید. پنجره Layer Style را باز کنید و زاویه Gradient Overlay خود را از 180 درجه به 0 درجه تغییر دهید.

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

لایه را کپی کنید، آن را به صورت افقی برگردانید و آن را در سمت دیگر قرار دهید.

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

الگو را روی کل بنر خود بچسبانید. در حالی که Command + Shift را نگه داشته اید، روی ریز تصاویر لایه های تمام لایه های بنر خود کلیک کنید. این همه آنها را انتخاب می کند. کلیک راست کرده و “Select Inverse” را انتخاب کنید. با انتخاب لایه الگوی خط، کلید «حذف» را فشار دهید تا قسمت‌هایی از الگو که به آن نیاز ندارید حذف شود.

حالت ترکیب لایه الگو را به “Multiply” تغییر دهید تا رنگ سفید از لایه پنهان شود. حالا Opacity را بین 25 تا 75 درصد کاهش دهید. برای بهترین نتیجه آزمایش کنید.

با استفاده از ابزار Shape، خطوطی مشابه خطوط زیر ایجاد کنید.

مناطق موجود در پس‌زمینه تصویر را بردارید.

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

3. 3-D

دکمه‌های سه‌بعدی عالی هستند، زیرا دکمه‌ها را بسیار واقعی‌تر نشان می‌دهند. کلیک نکردن آنها تقریبا غیرممکن است! تنها ایراد آن این است که افکت نسبتاً بازیگوش است و بنابراین برای همه وب سایت ها (مانند وب سایت های شرکتی) مناسب نیست. در زیر مجموعه ای از چند دکمه سه بعدی دوست داشتنی وجود دارد.

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

عنصر دوم ما (الگوها) نیز در این طرح برای افزودن ابعاد به یک دکمه از قبل بسیار سه بعدی استفاده می شود.

این دکمه رویکردی کمی متفاوت دارد و برای ظاهر سه بعدی آن فقط بر شیب ها تکیه دارد.

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

مانند چند مثال دیگر در این بخش، ترکیبی از گرادیان ها و ضربه ها این دکمه ها را سه بعدی می کند.

این دکمه به دلیل طراحی “خارج از جعبه” آن که در اطراف رابط کاربری پیچیده شده است، سه بعدی به نظر می رسد.

ایجاد دکمه سه بعدی

با کشیدن یک شکل با ابزار Rectangle، با شعاع گوشه 7 پیکسل شروع کنید. پنجره Layer Style را باز کنید و Gradient Overlay را از قرمز تیره به قرمز روشن اعمال کنید. از قرمز روشن‌تر در انتهای نوار گرادیان استفاده کنید تا بالای دکمه 3 بعدی ما برجسته شود.

اکنون روی دکمه ضربه بزنید. نوع پر را به “Gradient” تغییر دهید تا بتوانید رنگ بالا و پایین ضربه را تغییر دهید. از رنگ قرمز روشن به قرمز تیره (برعکس Gradient Overlay) بروید.

تا اینجا باید چیزی شبیه به این باشد:

لایه Shape را کپی کنید. لایه اصلی را حدود 10 پیکسل به پایین هل دهید.

با استفاده از تنظیماتی که در تصویر زیر مشاهده می‌کنید، یک Drop Shadow را روی لایه اصلی اعمال کنید.

همچنین، با تیره کردن هر رنگ جداگانه در نوار گرادیان، همپوشانی گرادیان را تیره کنید.

شما باید چیزی شبیه این داشته باشید:

ابزار متن را انتخاب کنید و چیزی را روی دکمه تایپ کنید. پنجره Layer Style را باز کنید و یک Gradient Overlay مشابه تصویر زیر اعمال کنید:

با استفاده از این تنظیمات، یک سایه داخلی اعمال کنید:

با استفاده از این تنظیمات یک Drop Shadow اعمال کنید:

و ما تمام شدیم! شما باید با چیزی شبیه به این نتیجه بگیرید:

4. Pixel-Perfect Strokes

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

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

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

این دکمه‌های فقط CSS3 (مسلماً بدون فتوشاپ) دارای ضربه‌های 1 پیکسلی هستند که باعث می‌شود از پس‌زمینه متمایز شوند و با کلیک کردن به صورت تورفتگی ظاهر شوند.

نمونه دیگری از حرکت نور 1 پیکسلی در بالای دکمه برای عمل به عنوان برجسته.

این دکمه سبز رویکرد کمی متفاوت را نشان می دهد، با درخشش داخلی که به عنوان برجسته در بالای دکمه عمل می کند. ضربه در بیرون یک سایه بسیار ظریف ایجاد می کند.

یک دکمه دیگر که تکنیک های فوق را ترکیب می کند.

این دکمه اصلی دارای یک خط کشی نازک و سایه ظریف است تا آن را از طراحی ساده متمایز کند.

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

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

یک دکمه Pixel-Perfect ایجاد کنید

ابزار Rectangle Shape را انتخاب کنید (در نوار ابزار بالای فتوشاپ وقتی ابزار Shape انتخاب شده است) و شعاع گوشه ای 5 پیکسل به آن بدهید. یک مستطیل سیاه شبیه به شکل زیر بکشید.

پنجره Layer Style را باز کنید و یک Gradient Overlay روی شکل اعمال کنید. من از سبز تیره تا سبز کمی روشن تر استفاده کردم.

به شکل یک خط شیب بدهید، از سبز به سبزی که همیشه کمی تیره تر است.

حالا با استفاده از تنظیمات زیر به شکل یک سبک Inner Shadow سفید بدهید.

و اکنون یک Drop Shadow، با اندازه 0 پیکسل و کدورت فقط 5%.

یک نماد را در اینترنت پیدا کنید (یا نماد خود را ایجاد کنید)، و با رفتن به File → Place آن را در سند خود قرار دهید و آن را به درستی در موقعیت مکانی قرار دهید. روی آن یک Gradient Overlay اعمال کنید.

به Inner Shadow نماد خود 1 پیکسل و به Drop Shadow سفید فاصله 1 پیکسل بدهید. این باعث می شود که نماد به نظر برسد که در دکمه حک شده است.

متنی به دکمه اضافه کنید و با استفاده از پنجره Layer Style یک افکت Drop Shadow با شفافیت کم اعمال کنید. نتیجه این است:

 

5. پس زمینه های تورفته

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

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

شیب‌های معکوس در این پس‌زمینه، دکمه‌ها را تورفته نشان می‌دهند.

ترکیبی از strokes و drop shadow به این دکمه‌های فرورفته عمق بیشتری می‌دهد.

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

این پس‌زمینه دکمه فرورفته بسیار کوچک‌تر از آنچه دیده‌ایم است، اما همچنان از همان تکنیک‌ها پیروی می‌کند.

باز هم، از یک drop shadow و inner shadow برای ایجاد تورفتگی استفاده می شود.

 

6. می درخشد

درخشش تکنیک نسبتاً سختی در طراحی رابط است و معمولاً فقط در رابط‌های تاریک دیده می‌شود (اگرچه در زیر یک مثال روشن خواهیم دید). این مثال‌ها نشان می‌دهند که چگونه می‌توان از درخشش به روش‌های مختلف استفاده کرد.

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

درخشش ها به طور هوشمندانه ای برای متمایز کردن تایپوگرافی در این دکمه از پس زمینه تاریک استفاده می شوند. و درخشش باعث می شود نوارهای بارگیری واقعی به نظر برسند.

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

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

ایجاد دکمه درخشان نور

با استفاده از ابزار Rectangle Shape یک بار دیگر یک مستطیل بکشید، این بار با شعاع گوشه ای 3 پیکسل. یک Gradient Overlay مشابه تصویر زیر اعمال کنید. به رنگ‌های مرکزی خود یک موقعیت «49» و «50» بدهید.

سایه داخلی زیر را اعمال کنید.

دراپ سایه زیر را اعمال کنید.

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

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

 

7. نکات برجسته

هایلایت به دکمه ها عمق، علاقه بصری و قابلیت کلیک می دهد. مثال های زیر این را ثابت می کند.

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

مانند بسیاری از دکمه‌های دیگر در این پست، یک ضربه 1 پیکسلی این مورد را برجسته می‌کند.

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

این پست به طور انحصاری برای WDD توسط Callum Chapman، مرد پشت سر نوشته شده است فروشگاه Picmix و Circlebox Blog.

Which button designs do you use most and why? Did you find a higher click thru rate for some designs? Please share below…