الألوان (Colors)
الألوان مستلهمة من ألوان جرئية جنبا إلي جنب مع البيئات الهادئة،باخذ اشارات وتلميحات(cues) من الهندسة المعمارية المعاصرة(contemporary architecture)، وعلامات الطريق. وبالتأكيد الظلال الجريئة(bold shadows) والضوء .تقدم ألوان غير متوقعة ونابضة بالحياة.
لوحة ألوان واجهة المستخدم (UI Color Palette)
تبدأ لوحة الألوان بالألوان الأساسية وتملأ في سلم الألوان (spectrum) لإنشاء لوحة كاملة وصالحة للاستخدام للاندرويد، الويب، وIOS. الألوان الأساسية نطاقها (range) يكون 500 .
-
الأحمر (Red)
500
#e51c23 - #fde0dc
- 100#f9bdbb
- #f69988
- 300#f36c60
- #e84e40
- 500#e51c23
- #dd191d
- 700#d01716
- #c41411
- #b0120a
- A100#ff7997
- #ff5177
- #ff2d6f
- A700#e00032
-
الوردي (Pink)
500
#e91e63 - #fce4ec
- 100#f8bbd0
- #f48fb1
- 300#f06292
- #ec407a
- 500#e91e63
- #d81b60
- 700#c2185b
- 800#ad1457
- 900#880e4f
- A100#ff80ab
- #ff4081
- #f50057
- A700#c51162
-
اﻷرجواني (Purple)
500
#9c27b0 - #f3e5f5
- 100#e1bee7
- #ce93d8
- 300#ba68c8
- #ab47bc
- 500#9c27b0
- #8e24aa
- 700#7b1fa2
- #6a1b9a
- #4a148c
- A100#ea80fc
- #e040fb
- #d500f9
- A700#aa00ff
-
الأرجواني الغامق (Deep Purple)
500
#673ab7 - #ede7f6
- 100#d1c4e9
- #b39ddb
- 300#9575cd
- #7e57c2
- 500#673ab7
- #5e35b1
- 700#512da8
- #4527a0
- #311b92
- A100#b388ff
- #7c4dff
- #651fff
- A700#6200ea
-
النيلي (Indigo)
500
#3f51b5 - #e8eaf6
- 100#c5cae9
- #9fa8da
- 300#7986cb
- #5c6bc0
- 500#3f51b5
- #3949ab
- 700#303f9f
- #283593
- #1a237e
- A100#8c9eff
- #536dfe
- #3d5afe
- A700#304ffe
-
اﻷزرق (Blue)
500
#5677fc - #e7e9fd
- 100#d0d9ff
- #afbfff
- 300#91a7ff
- #738ffe
- 500#5677fc
- #4e6cef
- 700#455ede
- #3b50ce
- #2a36b1
- A100#a6baff
- #6889ff
- #4d73ff
- A700#4d69ff
-
اﻷزرق الفاتح (Light Blue)
500
#03a9f4 - #e1f5fe
- 100#b3e5fc
- #81d4fa
- 300#4fc3f7
- #29b6f6
- 500#03a9f4
- #039be5
- 700#0288d1
- #0277bd
- #01579b
- A100#80d8ff
- #40c4ff
- #00b0ff
- A700#0091ea
-
السماوي (Cyan)
500
#00bcd4 - #e0f7fa
- 100#b2ebf2
- #80deea
- 300#4dd0e1
- #26c6da
- 500#00bcd4
- #00acc1
- 700#0097a7
- #00838f
- #006064
- A100#84ffff
- #18ffff
- #00e5ff
- A700#00b8d4
-
الفيروزي (Teal)
500
#009688 - #e0f2f1
- 100#b2dfdb
- #80cbc4
- 300#4db6ac
- #26a69a
- 500#009688
- #00897b
- 700#00796b
- #00695c
- #004d40
- A100#a7ffeb
- #64ffda
- #1de9b6
- A700#00bfa5
-
الأخضر (Green)
500
#259b24 - #d0f8ce
- 100#a3e9a4
- #72d572
- 300#42bd41
- #2baf2b
- 500#259b24
- #0a8f08
- 700#0a7e07
- #056f00
- #0d5302
- A100#a2f78d
- #5af158
- #14e715
- A700#12c700
-
اﻷخضر الفاتح (Light Green)
500
#8bc34a - #f1f8e9
- 100#dcedc8
- #c5e1a5
- 300#aed581
- #9ccc65
- 500#8bc34a
- #7cb342
- 700#689f38
- #558b2f
- #33691e
- A100#ccff90
- #b2ff59
- #76ff03
- A700#64dd17
-
الليموني (Lime)
500
#cddc39 - #f9fbe7
- 100#f0f4c3
- #e6ee9c
- 300#dce775
- #d4e157
- 500#cddc39
- #c0ca33
- 700#afb42b
- #9e9d24
- #827717
- A100#f4ff81
- #eeff41
- #c6ff00
- A700#aeea00
-
اﻷصفر (Yellow)
500
#ffeb3b - #fffde7
- 100#fff9c4
- #fff59d
- 300#fff176
- #ffee58
- 500#ffeb3b
- #fdd835
- 700#fbc02d
- #f9a825
- #f57f17
- A100#ffff8d
- #ffff00
- #ffea00
- A700#ffd600
-
اﻷصفر اﻷكسيدي (الحمصي) Amber
500
#ffc107 - #fff8e1
- 100#ffecb3
- #ffe082
- 300#ffd54f
- #ffca28
- 500#ffc107
- #ffb300
- 700#ffa000
- #ff8f00
- #ff6f00
- A100#ffe57f
- #ffd740
- #ffc400
- A700#ffab00
-
البرتقالي (Orange)
500
#ff9800 - #fff3e0
- 100#ffe0b2
- #ffcc80
- 300#ffb74d
- #ffa726
- 500#ff9800
- #fb8c00
- 700#f57c00
- #ef6c00
- #e65100
- A100#ffd180
- #ffab40
- #ff9100
- A700#ff6d00
-
البرتقالي الغامق (السيموني) Deep Orange
500
#ff5722 - #fbe9e7
- 100#ffccbc
- #ffab91
- 300#ff8a65
- #ff7043
- 500#ff5722
- #f4511e
- 700#e64a19
- #d84315
- #bf360c
- A100#ff9e80
- #ff6e40
- #ff3d00
- A700#dd2c00
-
البني (Brown)
500
#795548 - #efebe9
- 100#d7ccc8
- #bcaaa4
- 300#a1887f
- #8d6e63
- 500#795548
- #6d4c41
- 700#5d4037
- #4e342e
- #3e2723
-
الرمادي (Grey)
500
#9e9e9e - #fafafa
- 100#f5f5f5
- #eeeeee
- 300#e0e0e0
- #bdbdbd
- 500#9e9e9e
- #757575
- 700#616161
- #424242
- #212121
- 1000#000000
- #ffffff
-
اﻷزرق الرمادي (Blue Grey)
500
#607d8b - #eceff1
- 100#cfd8dc
- #b0bec5
- 300#90a4ae
- #78909c
- 500#607d8b
- #546e7a
- 700#455a64
- #37474f
- #263238
تطبيق ألوان واجهة المستخدم
اختيار لوحة ألوانك (Color Palette)
حد من اختياراتك للألوان باختيار ثلاثة أشكال للون (color hues) من لوحة الألوان الأساسية ولون واحد من لوحة الألوان الثانوية.
استخدم قيم أولية للنص الرمادي ، والأيقونات والفواصل
للتعبير بشكل فعال في التسلسل الهرمي (hierarchy) للمعلومات استخدم أطياف(shades) مختلفة للنص. القيمة الأولية (alpha) الأساسية الموحدة للنص علي خلفية بيضة هي 87% (#000000) . النص الثانوي، والذي يكون أقل في التسلسل الهرمي البصري، ينبغي أن تكون قيمته الأولية 54% (#000000). نص التلميحات للمستخدمين ، مثل النصوص في حقول التسجيل، لها أهمية بصرية أقل وينبغي أن تكون قيمتها الأولية 26% (#000000).
العناصر الأخري مثل الأيقونات والفواصل، تستفيد أيضا من الحصول علي قيمة ألفا من الأسود بدلا من لون ثابت واحد،للتأكد من أنها ستكون جيدة علي الخلفيات الملونة.
للنص الأبيض والأسود علي الخلفيات الملونة، راجع جداول لوحات الألوان لنسب التباين (contrast ratios ) وقيم ألفا مناسبة.
استخدام البولد (bold) للون في واجهة المستخدم مفضل وجيد. العناصر المختلفة في واجهة المستخدم ستستولي علي مختلف أجزاء لون الثيم.
لون اللهجة والنبرة (Accent color)
لون اللهجة أو النبرة الحيوي يستخدم للأزرار الأساسية الخاصة بك وكذلك للمكونات مثل المحولات (switchers) والسلايدرز (sliders). عنوان السيكشن أيضا يمكن أن يأخذ لون اللهجة أو النبرة.
تراجع لهجة ونبرة الألوان (Fallback accent colors)
اذا كان لون اللهجة الخاص بك فاتح جدا أو داكن جدا عن لون الخلفية فتكون القاعدة العامة للتراجع هي اختيار لون أغمق أو أفتح من لون اللهجة. اذا لم ينفع لون اللهجة اطلاقا، تراجع إلي استخدام اللون الأساسي 500 علي خلفيات بيضاء. اذا كانت الخلفية هي اللون الأساسي 500 ، تراجع لاستخدام 100% أبيض أو أسود 54%.
الثيمات (Themes)
الثيمات هي وسيلة لتخصيص نغمة متناسقة (consistent tone) إلي التطبيق. يحدد الاستايل (Style) ظلام السطح ، ومستوي الظل ـ والتعتيم (opacity) المناسب لعناصر ink . لتعزيز تناسق أكبر بين التطبيقات ، يتوفر موضوعان (themes):
أحمد عبد الرحمن
مقال رائع جدا .