رازهای طراحی گرادینت خوب

حتماً تابه‌حال به رنگین‌کمان نگاه کرده‌اید و متوجه شده‌اید که چگونه هر رنگ به‌آرامی به رنگ بعدی تبدیل می‌شود. گرادینت‌ها هم باید به همان خوبی تغییر رنگ‌های خود را نشان دهند تا ترکیبی چشم‌نواز به وجود آید.

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

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

در دنیای طراحی دیجیتال شاید مثال بهتری از صعود و افول گرادینت وجود نداشته باشد. گرادینت در دهه نود به‌عنوان یک‌ مهره کلیدی در طراحی تجربه کاربری در نظر گرفته می‌شد (احتمالاً شما هم وب‌سایت‌های geocities که از هِدرهای ورد آرت گرادینت استفاده می‌کردند را به خاطر دارید؟!)، اما این ترند به سال‌های قبل از آن بازمی‌گردد.

لوگوی قدیمی زیر را در نظر بگیرید:

«بازگشت به آینده» بهترین مثال برای این ترند طراحی است که به‌تازگی دوباره مد شده و همچنین در سال ۲۰۱۶ در طراحی مجدد لوگوی Instagram و نماد فهرست پخش Spotify هم دیده شد. گرادینت‌ها به‌تدریج در دنیای طراحی رابط کاربردی به‌شدت محبوب شده‌اند که البته دلایل خوبی هم برای این محبوبیت وجود دارد؛ آن‌ها عمق و بافت بیشتری به رابط کاربری تزریق می‌کنند؛ نقش‌های منحصربه‌فرد و حتی متضادی ایفا می‌کنند، واقع‌بینانه رنگ‌های طبیعی اطراف ما را منعکس می‌کنند (ما به‌ندرت با رنگ تک-توناژ در دنیای واقعی برخورد می‌کنیم) و البته می‌توانند در خلق زمینه‌های رنگی که تابه‌حال ندیده‌ایم هم استفاده شوند.

مقاله مرتبط: ١٠ دلیل برای استفاده از گرادینت (gradient) در طراحی

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

با بنیان قدرتمند آغاز کنید!

هر گرادینتی فقط به‌اندازه قدرت رنگ‌های پایه خود قدرت دارد و فرقی نمی‌کند که دو-توناژه است یا چند-توناژه. درست مثل همه انتخاب‌های طراحی هنگام انتخاب رنگ‌های مناسب شما می‌توانید از چرخه رنگ استفاده کنید.

نگران نباشید؛ شما مجبور نیستید که متخصص نظریه رنگ باشید تا انتخاب‌های مناسب رنگ برای گرادینت خود انجام دهید. قانون عمومی این است: رنگ‌هایی انتخاب کنید که به هم نزدیک هستند تا بتوانند باهم به‌صورت طبیعی ترکیب شوند.  UX Planet یک دیاگرام خیلی خوب دراین‌باره دارد؛ توجه کنید که انتقال از رنگ زرد به نارنجی تا چه اندازه در مقایسه با انتقال از رنگ سبز به بنفش نامحسوس است!

آیا تابه‌حال فکر کرده‌اید که چرا رنگ‌های مجاور در چرخه رنگ تا این اندازه جذابیت بصری دارند؟ شاید برای این است که آن‌ها گرادینت‌هایی هستند که اغلب به‌صورت طبیعی اتفاق می‌افتند و یادآور یک راز حرفه‌ای عالی برای طراحان رابط کاربری هستند؛ از طبیعت برای دریافت ایده و انگیزه استفاده کنید!

گرادینت‌ها در طبیعت

ما به‌صورت مداوم در زندگی روزمره خود با گرادینت‌ها برخورد می‌کنیم: آسمان، غروب خورشید، دریاها و رودخانه‌ها بهترین و بارزترین نمونه‌ها هستند! مهم نیست که کجای دنیا باشید؛ آسمان به‌تنهایی می‌تواند بهترین منبع گرادینت باشد. شاید آسمان در دسترس‌ترین منبع گرادینت باشد، اما محدودیتی برای نمونه‌های طبیعی هرگز وجود ندارد.

شاید در همین لحظه یک گرادینت طبیعی در کنار شما وجود داشته باشد! رنگ زندگی واقعی بین خطوط قرار نمی‌گیرد؛ بلکه به‌صورت نامحسوس ترکیب می‌شود!

بالا بردن سطح کیفیت گرادینت

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

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

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

منبع نور و شکل

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

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

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

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

کلام آخر

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

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

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