مقتبس من كتابنا المستقبلي لإعادة بناء واجهة المستخدمهل رأيت هذه المولدات العصرية للوحات الألوان؟ عندما تختار لونًا ، اضبط بعض المعلمات بعبارات موسيقية مثل "ثالوث" أو "رابع تخصص" - واحصل على خمسة ألوان مثالية لموقعك على الويب؟
مثل هذا النهج الحسابي والعلمي لاختيار مخطط الألوان المثالي مغر للغاية ، ولكنه ليس مفيدًا للغاية.
حسنًا ، إذا كنت لا تريد أن يبدو الموقع هكذا:
ما تحتاجه حقا
لن تفعل أي شيء بخمس رموز سداسية. لبناء شيء حقيقي يتطلب لوحة أكثر اكتمالا.
يمكن تقسيم لوحة الألوان الجيدة إلى ثلاث فئات.
رمادي
النص والخلفية واللوحات وعناصر النموذج - كل هذا موجود تقريبًا في الواجهة الرمادية.
وستحتاج إلى ألوان رمادية أكثر مما تعتقد. يبدو أن ثلاثة أو أربعة ظلال كثيرة ، ولكن قريبًا جدًا ستحتاج إلى شيء أغمق قليلاً من الظل رقم 2 ، ولكن أخف قليلاً من الظل رقم 3.
في الممارسة العملية ، من المستحسن اختيار 8-10 ظلال (المزيد عن هذا لاحقًا). هذا ليس بقدر البحث عن الفرق بين الظلال رقم 77 ورقم 78 ، ولكن بقدر كافٍ.
الأسود الحقيقي ، كقاعدة عامة ، يبدو غير طبيعي ، لذلك ابدأ باللون الرمادي الداكن جدًا وانتقل تدريجيًا إلى الأبيض.
الألوان الأساسية
تحتاج معظم المواقع إلى لون واحد أو لونين للإجراءات الأساسية وعناصر التنقل وما إلى ذلك. تحدد هذه الألوان المظهر العام للموقع: تلك التي تجعلك تفكر في الفيسبوك على أنه "أزرق" ، على الرغم من أنه في الواقع رمادي.
كما هو الحال مع اللوحة الرمادية ، تحتاج إلى تحديد لوحة (5-10) من الظلال الأفتح والأغمق.
يمكن أن تكون الظلال الأفتح مفيدة كخلفية ملونة لأشياء مثل التنبيهات ، بينما تكون الألوان الداكنة رائعة للنص.
ألوان مميزة
بالإضافة إلى المواقع الرئيسية ، يحتاج كل موقع إلى عدة ألوان مميزة للتواصل مع المستخدم.
لذلك ، لإبراز وظيفة جديدة ، يمكنك اختيار لون جذاب ، على سبيل المثال ، الأصفر أو الوردي أو الأزرق والأخضر:
قد تكون هناك حاجة أيضًا إلى الألوان للتأكيد على الحالات الدلالية المختلفة ، على سبيل المثال ، اللون الأحمر لتأكيد الإجراءات المدمرة:
... أصفر للتحذيرات:
... أو أخضر للتأكيد على اتجاه إيجابي:
وبعض الظلال من هذه الألوان ، على الرغم من أنه يجب استخدامها بشكل مقتصد للغاية في واجهة المستخدم.
إذا قمت بإنشاء تصميم يساعد فيه اللون على تمييز أو تصنيف العناصر المتشابهة (على سبيل المثال ، الخطوط على الرسوم البيانية أو أحداث التقويم أو العلامات في المشروع) ، فقد يتطلب الأمر المزيد من الألوان المميزة.
بشكل عام ، تتطلب واجهة المستخدم المعقدة غالبًا ما يصل إلى عشرة ألوان مختلفة مع 5-10 ظلال لكل منها.
تحديد الظلال مقدما
عند الحاجة إلى ظل أفتح أو أغمق قليلاً ، لا تحتاج إلى استخدام وظائف المعالج المسبق لـ CSS مثل تفتيح أو تغميق. لذلك ينتهي بك الأمر مع 35
لونًا أزرق مختلفًا
قليلاً تبدو جميعها متشابهة.
بدلاً من ذلك ، حدد مجموعة ثابتة من الظلال للاختيار من بينها.
كيف تصنع مثل هذه اللوحة؟
اختر أولاً اللون الأساسي
ابدأ باللون
الأساسي الذي تستند إليه الظلال الفاتحة والداكنة.
لا توجد طريقة علمية حقيقية ، ولكن بالنسبة للألوان الأساسية واللهجة ، فإن القاعدة الجيدة هي اختيار الظل الذي يعمل بشكل جيد مع خلفية الزر.
من المهم أن نلاحظ أنه لا توجد قواعد حقيقية هنا ، مثل "تبدأ عند سطوع 50٪" أو ما شابه. يتصرف كل لون بشكل مختلف قليلاً ، لذلك عليك الاعتماد فقط على ذوقك.
ضع حدودًا
ثم حدد الظلال الأغمق والأفتح. هذا ليس أيضًا نهجًا علميًا ، ولكنه يساعد على تخيل مكان استخدام الألوان واختيارها وفقًا لهذا السياق.
عادةً ما يترك الظل الأغمق للنص ، والأخف وزنًا - لخلفية العنصر. التنبيه البسيط هو مثال جيد حيث يتم الجمع بين هذه الظلال.
ابدأ بلون يطابق نغمة اللون الأساسي ، ثم قم بتغيير التشبع والسطوع حتى تشعر بالرضا.
املأ الفراغات
إذا كنت قد قررت على الظلال الأساسية والظلام والضوء ، فسيظل هناك فقط لملء الفجوات بينهما.
بالنسبة لمعظم المشاريع ، تحتاج على الأقل إلى خمسة ظلال لكل لون ، ويفضل أن تكون أقرب إلى عشرة ، حتى لا تشعر بالحرج.
تسعة هو عدد كبير لأنه ينقسم بشكل جيد ، مما يجعل ملء الفراغات أسهل قليلاً. لنطلق على الظل الأغمق
900 والأساس
500 والأخف وزنًا
100 .
ابدأ باختيار ظلال
700 و
300 ، والتي تقع في منتصف الفاصل الزمني: ستكون الحل الوسط المثالي بين الظلال على كلا الجانبين.
يؤدي ذلك إلى إنشاء أربعة فواصل زمنية أخرى على المقياس (
800 و
600 و
400 و
200 ) ، يتم تعبئتها بنفس الطريقة.
في النهاية ، تحصل على مجموعة ألوان متوازنة إلى حد ما ، بما يكفي لتحقيق أفكار التصميم الخاصة بك.
ماذا عن الرمادي؟
مع الظلال الرمادية ، اللون الأساسي ليس مهمًا جدًا ، ولكن بخلاف ذلك تكون العملية هي نفسها. ابدأ من الحواف واملأ الفراغات حتى تحصل على اللوحة المناسبة.
اختر الظل الأغمق بلون النص الأغمق في المشروع ، والأفتح - الذي يعمل بشكل جيد كخلفية فاتحة ، بيضاء تقريبًا.
هذا ليس علمًا.
بغض النظر عن الطريقة التي تريدها ، يجب ألا تعتمد فقط على الرياضيات لاختيار لوحة الألوان المثالية.
يعد المنهج المنتظم مثل النهج أعلاه رائعًا كبداية ، ولكن لا تخف من تغييره إذا لزم الأمر.
بمجرد أن تبدأ حقًا في استخدام ألوانك في المشروع ، ستحتاج حتمًا إلى تغيير تشبع لون معين بشكل طفيف أو جعل ظلالين أفتح أو أغمق. ثق في عينيك وليس الأرقام.
فقط حاول ألا تضيف الكثير من الظلال الجديدة عندما تكون اختيارية. إذا لم تحدد لوحة الألوان ، يمكنك بشكل عام تركها بدون نظام ألوان.