قانون ۶۰-۳۰-۱۰ در تجربه کاربری

قانون ۶۰-۳۰-۱۰ هم برای ساخت وایرفریم سایت کاربرد داره و هم برای انتخاب رنگ. در وایرفریم می‌تونید بیشتر فضا رو به محتوای اصلی بدید، بخش کوچک‌تری رو برای اطلاعات پشتیبان کنار بذارید و مهم‌ترین اقدام، مثل دکمه خرید یا ثبت‌نام، رو در فضای محدود ولی مشخصی قرار بدید. بعد همین اولویت‌ها رو با یک رنگ غالب، یک رنگ ثانویه و یک رنگ تأکیدی واضح‌تر کنید.

در این راهنما، اول می‌بینید چطور نسبت ۶۰-۳۰-۱۰ رو در وایرفریم و محتوای سایت به کار ببرید. بعد نحوه انتخاب رنگ در طراحی سایت، ساخت یک پالت هماهنگ، هدایت نگاه کاربر و بررسی کنتراست رو قدم‌به‌قدم یاد می‌گیرید. این نسبت‌ها یک راهنمای انعطاف‌پذیر هستن؛ پس قرار نیست فضای صفحه یا رنگ‌ها رو با ماشین‌حساب دقیق اندازه بگیرید.

کاربرد قانون ۶۰-۳۰-۱۰ در وایرفریم و چیدمان محتوا

قانون ۶۰-۳۰-۱۰ یک روش ساده برای تقسیم‌بندی صفحه سایت و طراحی وایرفریم هست. وایرفریم یعنی طرح ساده و اولیه صفحه که قبل از طراحی نهایی، جای تیترها، متن‌ها، تصاویر، دکمه‌ها و بخش‌های مختلف رو مشخص می‌کنه.

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

تقسیم محتوای وایرفریم با نسبت ۶۰-۳۰-۱۰

• حدود ۶۰ درصد برای محتوای اصلی: تیتر اصلی، توضیح محصول یا خدمات، متن مقاله، تصاویر ضروری و هر چیزی که کاربر برای فهم موضوع صفحه بهش نیاز داره در این بخش قرار می‌گیره.
• حدود ۳۰ درصد برای محتوای پشتیبان: ویژگی‌ها، نمونه‌ها، نظر مشتری‌ها، لینک‌های مرتبط، پرسش‌های متداول یا توضیح‌هایی که تصمیم‌گیری رو راحت‌تر می‌کنن می‌تونن این نقش رو داشته باشن.
• حدود ۱۰ درصد برای اقدام اصلی: دکمه خرید، ثبت‌نام، درخواست مشاوره یا پیام مهم صفحه باید فضای محدود ولی مشخصی داشته باشه تا بین بقیه محتوا گم نشه.

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

بهتره اول وایرفریم رو بدون رنگ بررسی کنید. اگه کاربر از روی اندازه، جایگاه و ترتیب محتوا نتونه بخش اصلی و اقدام مهم رو تشخیص بده، رنگ هم به‌تنهایی مشکل رو حل نمی‌کنه. بعد از مشخص شدن سلسله‌مراتب محتوا، می‌تونید نقش‌های رنگی ۶۰، ۳۰ و ۱۰ رو هم با همون اولویت‌ها هماهنگ کنید.

قانون ۶۰-۳۰-۱۰ در انتخاب رنگ

از قانون ۶۰-۳۰-۱۰ میشه برای انتخاب رنگ‌ها استفاده کرد. طبق این روش، حدود ۶۰ درصد ظاهر صفحه به رنگ غالب، حدود ۳۰ درصد به رنگ ثانویه و حدود ۱۰ درصد به رنگ تأکیدی می‌رسه. این تقسیم‌بندی کمک می‌کنه صفحه هم منسجم بمونه و هم بخش‌های مهمش بین بقیه اجزا گم نشن.

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

رنگ غالب، ثانویه و تأکیدی چه نقشی دارن؟

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

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

چرا نسبت‌ها تقریبی هستن و نباید سخت‌گیرانه حسابشون کنید؟

عددهای ۶۰، ۳۰ و ۱۰ برای ایجاد تعادل بصری هستن، نه اندازه‌گیری دقیق مساحت صفحه. بعضی صفحه‌ها به فضای خالی بیشتری نیاز دارن و بعضی صفحه‌ها کارت‌ها یا جدول‌های زیادی دارن. پس ممکنه ترکیب ۷۰، ۲۰ و ۱۰ یا ۶۰، ۲۵ و ۱۵ برای طرحتون بهتر جواب بده.

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

نحوه انتخاب رنگ در طراحی سایت با قانون ۶۰-۳۰-۱۰

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

قدم اول: رنگ غالب رو برای پس‌زمینه و بخش‌های اصلی انتخاب کنید

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

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

قدم دوم: با رنگ ثانویه به صفحه تنوع بدید

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

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

قدم سوم: رنگ تأکیدی رو برای دکمه‌ها و بخش‌های مهم نگه دارید

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

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

یک نمونه ساده از اجرای قانون ۶۰-۳۰-۱۰ در سایت

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

تقسیم رنگ‌ها بین پس‌زمینه، بخش‌های ثانویه و دکمه اصلی

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

در این نمونه، لازم نیست سرمه‌ای دقیقاً ۳۰ درصد و نارنجی دقیقاً ۱۰ درصد صفحه رو بپوشونه. هدف اینه که خاکستری روشن فضای غالب رو بسازه، سرمه‌ای ساختار بده و نارنجی کاربر رو به اقدام اصلی برسونه.

بررسی مسیر نگاه کاربر بعد از چیدن رنگ‌ها

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

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

چطور یک پالت رنگ مناسب برای سایتتون بسازید؟

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

انتخاب رنگ بر اساس هویت برند و موضوع سایت

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

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

هماهنگ کردن رنگ‌های روشن، تیره و خنثی

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

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

استفاده از ابزارهای ساخت پالت رنگ

برای پیدا کردن ترکیب‌های اولیه می‌تونید از Adobe Color استفاده کنید.

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

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

نکات دسترس‌پذیری موقع انتخاب رنگ سایت

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

بررسی کنتراست متن، پس‌زمینه و اجزای رابط

در سطح AA راهنمای WCAG برای کنتراست متن، متن معمولی باید نسبت کنتراست حداقل ۴٫۵ به ۱ داشته باشه. برای متن بزرگ این حداقل ۳ به ۱ هست. در این معیار، متن بزرگ یعنی متنی با اندازه حداقل ۲۴ پیکسل یا متن ضخیم با اندازه حدود ۱۸٫۷ پیکسل. لوگوها و متن‌های غیرفعال هم استثناهای جداگانه دارن.

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

برای بررسی سریع می‌تونید از WebAIM Contrast Checker استفاده کنید. کد رنگ متن و پس‌زمینه رو وارد کنید تا نسبت کنتراست و نتیجه آزمون نمایش داده بشه. فقط حالت عادی رو نسنجید؛ دکمه در حالت ماوس، فوکوس با صفحه‌کلید و غیرفعال، لینک بازدیدشده و فیلد دارای خطا رو هم بررسی کنید.

چرا نباید پیام‌ها رو فقط با رنگ منتقل کنید؟

اگه فیلد اشتباه فرم رو فقط قرمز کنید، بعضی کاربران ممکنه متوجه خطا نشن. کنار رنگ، متن واضح یا آیکن هم بذارید؛ مثلاً بنویسید «شماره موبایل کامل نیست» و همون فیلد رو مشخص کنید.

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

انتخاب رنگ قابل‌تشخیص برای افراد دارای کوررنگی

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

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

اشتباه‌های رایج در اجرای قانون ۶۰-۳۰-۱۰

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

چک‌لیست نهایی انتخاب رنگ برای طراحی سایت

• یک رنگ غالب برای پس‌زمینه و سطح‌های اصلی مشخص کردید.
• رنگ ثانویه با رنگ غالب هماهنگه و بخش‌ها رو واضح‌تر جدا می‌کنه.
• رنگ تأکیدی رو فقط برای عناصر مهم به کار بردید.
• کنتراست متن و پس‌زمینه رو با معیار مناسب WCAG بررسی کردید.
• دکمه‌ها و فیلدهای مهم در حالت‌های عادی، ماوس، فوکوس و غیرفعال قابل‌تشخیص هستن.
• پیام خطا، موفقیت یا وضعیت فقط با رنگ منتقل نمی‌شه.
• پالت رو روی موبایل و نمایشگر دسکتاپ امتحان کردید.
• طرح رو با شبیه‌ساز کوررنگی و بدون اتکا به رنگ بررسی کردید.
• نسبت‌های ۶۰-۳۰-۱۰ رو راهنما در نظر گرفتید، نه فرمول اجباری.

سؤالات متداول

جمع‌بندی

برای شروع، سه نقش مشخص برای رنگ‌ها بسازید: رنگ غالب برای فضای اصلی، رنگ ثانویه برای جدا کردن بخش‌ها و رنگ تأکیدی برای مهم‌ترین اقدام صفحه. همین منطق رو در وایرفریم و چیدمان محتوا هم به کار ببرید؛ بیشتر فضا رو به محتوای اصلی، بخش کوچک‌تری رو به اطلاعات پشتیبان و کمترین فضا رو به اقدام مهم اختصاص بدید. بعد کنتراست، نمایش در موبایل و دسکتاپ و قابل‌فهم بودن پیام‌ها بدون اتکا به رنگ رو بررسی کنید. قانون ۶۰-۳۰-۱۰ قراره تصمیم‌گیری درباره رنگ و اولویت محتوا رو براتون ساده‌تر کنه، نه اینکه طرحتون رو داخل یک فرمول سخت محدود کنه.

تیم تولید محتوا

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