رفتن به مطلب
جامعه‌ی برنامه‌نویسان مُدرن ایران

طراحی و توسعه

  • نوشته‌
    9
  • دیدگاه
    4
  • مشاهده
    1,379

مشارکت‌کنندگان این وبلاگ

اصول طراحی: رنگ

الهه انصاری

132 بازدید


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

Stop.gif.ef9763a9c6dec821048938122802db5f.gif

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

طیف رنگ‌های گرم و سرد

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

382pxBYR_color_wheel.png.895222da8f34a2f09404933e653ecc29.png

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

طرح‌های رنگی تک رنگ (monochromatic)

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

Monochromatic.png.6b3a3573fe1ede12f299b877b97516b7.png

BlueMonochromatic.png.522d25e29922dda7b5ffe4564cee7a45.png

طرح تک رنگ با پایه‌ی آبی

RedMonochromatic.png.32c8877a05556d21d9bdfd5b272a20d8.png

طرح تک رنگ با پایه‌ی قرمز

طرح‌های رنگی مشابه (Analogous Color Schemes)

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

Analogous.png.1866daf2115b091ef4e12331fd5958a6.png

BlueAnalogous.png.6739142e34803dd041068408ba12a952.png

طرح رنگی مشابه با پایه‌ی آبی

طرح رنگی مکمل (Complimentary Color Scheme)

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

Complimentary.png.1d20c3d7af901cd4bb6c7dc26be99a72.png

GreenComplimentary.png.85775df46d7f9b6c065c276f57de84e8.png

طرح رنگی مکمل با پایه‌ی سبز روشن

طرح مکمل تقسیم شده (Split Complementary Scheme)

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

SplitComplimentary.png.49740d6194148a5007486ea645b4ec6a.png

BlueSplitComplimentary.png.32eb6bc6774008752a12191dfdf441f1.png

طرح‌های رنگ سه‌گانه

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

Triad.png.eb8d583d7a47f58324583214db3157ed.png

BlueTriad.png.76c8f482afc73ed89f3086ae75b2a023.png

طرح سه‌گانه‌ با پایه‌ی آبی

نکاتی برای استفاده از این طرح‌های رنگی

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

HungryDuck.png.66155da50c1a12e7cf2b1b4234673eb1.png

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

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

SurroundingColor.gif.3f5daa38af1cfdb3dc12a6c240d63b59.gif

الهام از طبیعت

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

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

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

با تشکر از همراهی شما دوستان.


عنوان منبع principle of design: Color
  • پسندیدن 4
  • تشکر شده 1


0 دیدگاه


نظرهای پیشنهاد شده

هیچ دیدگاهی برای نمایش وجود دارد.

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری
  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

×