363 lines
18 KiB
Markdown
363 lines
18 KiB
Markdown
|
# نظام التصميم المستوحى من Slack
|
||
|
|
|
||
|
|
> Category: الإنتاجية والبرمجيات كخدمة
|
||
|
|
> منصة التواصل في بيئة العمل. لون أساسي أوبيرجين، لوحة شعار متعددة النبرات، أسطح فاتحة مع شريط جانبي داكن، دافئة وودية.
|
||
|
|
|
||
|
|
## 1. الطابع البصري والأجواء
|
||
|
|
|
||
|
|
تبنى هوية Slack على فكرة أن العمل ينبغي أن يبدو إنسانياً بل ومرحاً بعض الشيء. السطح الأساسي **فاتح** — مناطق محتوى بيضاء مع شريط جانبي أوبيرجين عميق (`#4A154B`) — عكس الأدوات التي تُقدّم الأسطح الداكنة. هذا التباين مقصود: الشريط الجانبي هو مرساة تنقل هادئة ودائمة الحضور، بينما منطقة المحتوى مضيئة ومفتوحة.
|
||
|
|
|
||
|
|
لوحة الشعار — الأزرق والأخضر والأصفر والأحمر — تظهر أساساً في أيقونة الوسم وسياقات التسويق، وليست مبعثرة عبر واجهة المستخدم. في المنتج نفسه، يستخدم Slack نظام ألوان متحفظاً واحترافياً مع أوبيرجين كمرساة العلامة التجارية الوحيدة.
|
||
|
|
|
||
|
|
**الخصائص الرئيسية:**
|
||
|
|
- أسطح محتوى تُقدّم الفاتح: أبيض `#FFFFFF` وشبه أبيض `#F8F8F8`
|
||
|
|
- شريط جانبي أوبيرجين عميق `#4A154B` — العنصر الأكثر تميزاً في واجهة المستخدم للعلامة التجارية
|
||
|
|
- أربعة ألوان نبرة للشعار (أزرق، أخضر، أصفر، أحمر) تُستخدم باعتدال كنقاط تمييز فحسب
|
||
|
|
- Larsseit للعناوين (التسويق)، sans-serif النظامي لواجهة المستخدم
|
||
|
|
- مستدير لكن ليس كرتونياً: نصف قطر 4–8 بكسل في معظم المكونات
|
||
|
|
- كثيف لكن قابل للتنفس: صفوف رسائل مضغوطة مع تسلسل هرمي واضح للخيوط
|
||
|
|
- نبرة دافئة وتحادثية — الرموز التعبيرية والتفاعلات والرسوم التوضيحية من الدرجة الأولى
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 2. لوحة الألوان والأدوار
|
||
|
|
|
||
|
|
### اللون الأساسي للعلامة التجارية
|
||
|
|
| الرمز | Hex | الدور |
|
||
|
|
|---|---|---|
|
||
|
|
| `--color-aubergine` | `#4A154B` | خلفية الشريط الجانبي، لون العلامة التجارية الأساسي |
|
||
|
|
| `--color-aubergine-dark` | `#350d36` | حالات التمرير على أسطح الأوبيرجين |
|
||
|
|
| `--color-aubergine-light` | `#611f69` | تمييز العنصر النشط في الشريط الجانبي |
|
||
|
|
|
||
|
|
### ألوان النبرة في الشعار (استخدم باعتدال — للتمييز والأيقونات والتسويق فحسب)
|
||
|
|
| الرمز | Hex | الاسم | الدور |
|
||
|
|
|---|---|---|---|
|
||
|
|
| `--color-blue` | `#36C5F0` | الأزرق السماوي | أيقونات القنوات، الروابط، حالات المعلومات |
|
||
|
|
| `--color-green` | `#2EB67D` | الأخضر الزبرجدي | حالة الاتصال، حالات النجاح |
|
||
|
|
| `--color-yellow` | `#ECB22E` | الذهبي | حالة الغياب، التحذيرات، التمييزات |
|
||
|
|
| `--color-red` | `#E01E5A` | الياقوتي | الإشعارات، الأخطاء، شارة الإشارات |
|
||
|
|
|
||
|
|
### السطح والخلفية
|
||
|
|
| الرمز | Hex | الدور |
|
||
|
|
|---|---|---|
|
||
|
|
| `--bg-primary` | `#FFFFFF` | منطقة الرسائل الرئيسية، النوافذ المنبثقة |
|
||
|
|
| `--bg-secondary` | `#F8F8F8` | لوحات الخيوط، الأسطح الثانوية |
|
||
|
|
| `--bg-tertiary` | `#F1F1F1` | خلفيات الإدخال، حالات التمرير |
|
||
|
|
| `--bg-sidebar` | `#4A154B` | الشريط الجانبي الأيسر (أوبيرجين) |
|
||
|
|
| `--bg-sidebar-hover` | `rgba(255,255,255,0.1)` | تمرير عنصر الشريط الجانبي |
|
||
|
|
| `--bg-sidebar-active` | `rgba(255,255,255,0.2)` | العنصر النشط في الشريط الجانبي |
|
||
|
|
| `--bg-message-hover` | `#F8F8F8` | تمرير صف الرسالة |
|
||
|
|
|
||
|
|
### ألوان النص
|
||
|
|
| الرمز | Hex | الدور |
|
||
|
|
|---|---|---|
|
||
|
|
| `--text-primary` | `#1D1C1D` | نص المحتوى الأساسي (شبه أسود) |
|
||
|
|
| `--text-secondary` | `#616061` | الطوابع الزمنية، التسميات المخففة |
|
||
|
|
| `--text-sidebar` | `rgba(255,255,255,0.9)` | أسماء القنوات في الشريط الجانبي |
|
||
|
|
| `--text-sidebar-muted` | `rgba(255,255,255,0.6)` | العناصر غير النشطة في الشريط الجانبي |
|
||
|
|
| `--text-link` | `#1264A3` | الروابط المضمّنة في الرسائل |
|
||
|
|
| `--text-mention` | `#1264A3` | لون نص @الإشارة |
|
||
|
|
|
||
|
|
### الألوان الدلالية
|
||
|
|
| الرمز | Hex | الدور |
|
||
|
|
|---|---|---|
|
||
|
|
| `--color-success` | `#2EB67D` | إشعارات النجاح، الحالات الإيجابية |
|
||
|
|
| `--color-warning` | `#ECB22E` | حالات التحذير |
|
||
|
|
| `--color-danger` | `#E01E5A` | حالات الخطأ، الإجراءات التدميرية |
|
||
|
|
| `--color-info` | `#36C5F0` | التمييزات الإعلامية |
|
||
|
|
|
||
|
|
### الحدود والفاصل
|
||
|
|
| الرمز | Hex | الدور |
|
||
|
|
|---|---|---|
|
||
|
|
| `--border-default` | `#DDDDDD` | الفواصل القياسية، حدود البطاقات |
|
||
|
|
| `--border-subtle` | `#F1F1F1` | الفواصل الخفية بين الصفوف |
|
||
|
|
| `--border-focus` | `#1264A3` | لون حلقة التركيز |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 3. قواعد الطباعة
|
||
|
|
|
||
|
|
### الخطوط
|
||
|
|
| الدور | الرسمي | البديل على الويب |
|
||
|
|
|---|---|---|
|
||
|
|
| عناوين العرض / التسويق | Larsseit | `'Larsseit', 'Helvetica Neue', Arial, sans-serif` |
|
||
|
|
| واجهة المستخدم / المحتوى / Chrome | Slack Lato (مخصص) | `system-ui, -apple-system, BlinkMacSystemFont, sans-serif` |
|
||
|
|
| الكود / Monospace | — | `'Monaco', 'Menlo', 'Courier New', monospace` |
|
||
|
|
|
||
|
|
> يستخدم Slack **Larsseit** لعناوين التسويق ونسخة Lato المخصصة لواجهة المستخدم داخل المنتج. لاستخدام الويب، يُعدّ `system-ui` أكثر البدائل أماناً.
|
||
|
|
|
||
|
|
### مقياس الطباعة
|
||
|
|
|
||
|
|
| المستوى | الحجم | الوزن | ارتفاع السطر | تباعد الحروف | الاستخدام |
|
||
|
|
|---|---|---|---|---|---|
|
||
|
|
| عرض XL | 48px | 800 | 1.1 | -1px | عناوين hero التسويقية |
|
||
|
|
| عرض L | 36px | 700 | 1.15 | -0.5px | بطولات الأقسام |
|
||
|
|
| عنوان 1 | 28px | 700 | 1.25 | normal | عناوين النوافذ المنبثقة، رؤوس الصفحات |
|
||
|
|
| عنوان 2 | 22px | 700 | 1.3 | normal | عناوين البطاقات، أقسام الإعدادات |
|
||
|
|
| عنوان 3 | 18px | 700 | 1.35 | normal | رؤوس الأقسام الفرعية |
|
||
|
|
| محتوى L | 16px | 400 | 1.5 | normal | نص الرسالة، الأوصاف |
|
||
|
|
| محتوى | 15px | 400 | 1.46667 | normal | نص واجهة المستخدم الافتراضي (الحجم الأساسي لـ Slack) |
|
||
|
|
| محتوى SM | 13px | 400 | 1.38462 | normal | البيانات الوصفية الثانوية |
|
||
|
|
| تسمية توضيحية | 12px | 400 | 1.33 | normal | الطوابع الزمنية، التلميحات |
|
||
|
|
| كود | 12px | 400 | 1.5 | normal | الكود المضمّن، كتل الكود |
|
||
|
|
|
||
|
|
### قواعد الطباعة
|
||
|
|
- الحجم الأساسي لمحتوى Slack هو **15 بكسل** — أصغر قليلاً من 16 بكسل لزيادة الكثافة
|
||
|
|
- القنوات غير المقروءة: وزن 700 — الغامق هو المؤشر الأساسي لعدم القراءة
|
||
|
|
- الطوابع الزمنية: 12 بكسل `--text-secondary`، تظهر عند التمرير فحسب
|
||
|
|
- كتل الكود: خلفية `#F8F8F8`، حد `1px solid #DDDDDD`، border-radius 4px
|
||
|
|
- لا تستخدم أحجام خطوط أقل من 12 بكسل أبداً
|
||
|
|
- عناوين التسويق: letter-spacing `-1px` لأحجام العرض الكبيرة
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 4. تنسيقات المكونات
|
||
|
|
|
||
|
|
### الأزرار
|
||
|
|
|
||
|
|
```css
|
||
|
|
/* Primary */
|
||
|
|
.btn-primary {
|
||
|
|
background: #4A154B;
|
||
|
|
color: #FFFFFF;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 0 16px;
|
||
|
|
height: 36px;
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 700;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
.btn-primary:hover { background: #611f69; }
|
||
|
|
|
||
|
|
/* Secondary */
|
||
|
|
.btn-secondary {
|
||
|
|
background: #FFFFFF;
|
||
|
|
color: #1D1C1D;
|
||
|
|
border: 1px solid #DDDDDD;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 0 16px;
|
||
|
|
height: 36px;
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.btn-secondary:hover { background: #F8F8F8; }
|
||
|
|
|
||
|
|
/* Danger */
|
||
|
|
.btn-danger {
|
||
|
|
background: #E01E5A;
|
||
|
|
color: #FFFFFF;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
.btn-danger:hover { background: #B3114A; }
|
||
|
|
```
|
||
|
|
|
||
|
|
### حقول الإدخال
|
||
|
|
```css
|
||
|
|
.input {
|
||
|
|
background: #FFFFFF;
|
||
|
|
border: 1px solid #DDDDDD;
|
||
|
|
border-radius: 4px;
|
||
|
|
color: #1D1C1D;
|
||
|
|
font-size: 15px;
|
||
|
|
padding: 8px 12px;
|
||
|
|
height: 36px;
|
||
|
|
}
|
||
|
|
.input:focus {
|
||
|
|
border-color: #1264A3;
|
||
|
|
box-shadow: 0 0 0 2px rgba(18,100,163,0.25);
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### عنصر قناة الشريط الجانبي
|
||
|
|
```css
|
||
|
|
.channel-item {
|
||
|
|
height: 28px;
|
||
|
|
padding: 0 16px;
|
||
|
|
border-radius: 6px;
|
||
|
|
color: rgba(255,255,255,0.7);
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
.channel-item:hover {
|
||
|
|
background: rgba(255,255,255,0.1);
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
.channel-item.active {
|
||
|
|
background: rgba(255,255,255,0.2);
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
.channel-item.unread {
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### شارة غير المقروء
|
||
|
|
```css
|
||
|
|
.badge {
|
||
|
|
background: #E01E5A;
|
||
|
|
color: #FFFFFF;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 700;
|
||
|
|
padding: 1px 6px;
|
||
|
|
min-width: 18px;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### مرفقات الرسائل / البطاقات
|
||
|
|
```css
|
||
|
|
.attachment {
|
||
|
|
border-left: 4px solid #DDDDDD;
|
||
|
|
background: #F8F8F8;
|
||
|
|
border-radius: 0 4px 4px 0;
|
||
|
|
padding: 8px 12px;
|
||
|
|
margin: 4px 0;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### التفاعلات
|
||
|
|
```css
|
||
|
|
.reaction {
|
||
|
|
border: 1px solid #DDDDDD;
|
||
|
|
border-radius: 24px;
|
||
|
|
background: #F8F8F8;
|
||
|
|
padding: 2px 8px;
|
||
|
|
font-size: 13px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.reaction:hover { background: #F1F1F1; }
|
||
|
|
.reaction.active {
|
||
|
|
background: rgba(18,100,163,0.1);
|
||
|
|
border-color: #1264A3;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 5. مبادئ التخطيط
|
||
|
|
|
||
|
|
### تخطيط ثلاثي الأعمدة
|
||
|
|
```
|
||
|
|
┌──────────────┬──────────────────────────────┬─────────────┐
|
||
|
|
│ الشريط الجانبي│ منطقة الرسائل │ الخيط │
|
||
|
|
│ (240px) │ (flex: 1) │ (400px) │
|
||
|
|
│ #4A154B │ #FFFFFF │ اختياري │
|
||
|
|
└──────────────┴──────────────────────────────┴─────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### نظام التباعد (أساس 4 بكسل)
|
||
|
|
| الرمز | القيمة | الاستخدام |
|
||
|
|
|---|---|---|
|
||
|
|
| `--space-1` | 4px | الفجوات الضيقة |
|
||
|
|
| `--space-2` | 8px | حشو المكون |
|
||
|
|
| `--space-3` | 12px | حشو الإدخال |
|
||
|
|
| `--space-4` | 16px | الحشو القياسي |
|
||
|
|
| `--space-6` | 24px | حشو البطاقة |
|
||
|
|
| `--space-8` | 32px | فجوات الأقسام |
|
||
|
|
|
||
|
|
### هيكل الشريط الجانبي
|
||
|
|
```
|
||
|
|
[اسم مساحة العمل ▼]
|
||
|
|
────────────────────
|
||
|
|
الخيوط
|
||
|
|
جميع الرسائل المباشرة
|
||
|
|
المسودات والمُرسَل
|
||
|
|
────────────────────
|
||
|
|
▼ القنوات
|
||
|
|
# general
|
||
|
|
# random
|
||
|
|
# design ● (غير مقروء)
|
||
|
|
────────────────────
|
||
|
|
▼ الرسائل المباشرة
|
||
|
|
John Doe
|
||
|
|
Jane Smith
|
||
|
|
```
|
||
|
|
|
||
|
|
### محرر الرسائل
|
||
|
|
- مثبت في أسفل منطقة الرسائل
|
||
|
|
- `border: 1px solid #DDDDDD`، `border-radius: 8px`، `margin: 0 16px 16px`
|
||
|
|
- شريط الأدوات: رموز تعبيرية، إرفاق، تنسيق، زر إرسال
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 6. العمق والارتفاع
|
||
|
|
|
||
|
|
يستخدم Slack ظلالاً خفيفة على سطح فاتح:
|
||
|
|
|
||
|
|
| المستوى | الاستخدام | الظل |
|
||
|
|
|---|---|---|
|
||
|
|
| مسطح | صفوف الرسائل، عناصر الشريط الجانبي | none |
|
||
|
|
| منخفض | البطاقات، حقول الإدخال | `0 1px 3px rgba(0,0,0,0.08)` |
|
||
|
|
| متوسط | القوائم المنسدلة، النوافذ المنبثقة | `0 4px 12px rgba(0,0,0,0.12)` |
|
||
|
|
| مرتفع | النوافذ المنبثقة الكبيرة، الحوارات | `0 8px 24px rgba(0,0,0,0.15)` |
|
||
|
|
| طبقة تغطية | خلفيات النوافذ المنبثقة | `rgba(0,0,0,0.5)` |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 7. ما يجب فعله وما يجب تجنبه
|
||
|
|
|
||
|
|
### ✅ افعل
|
||
|
|
- استخدم أوبيرجين `#4A154B` للشريط الجانبي — إنه العنصر الأكثر تميزاً في واجهة Slack
|
||
|
|
- احتفظ بمنطقة المحتوى الرئيسية بيضاء وفاتحة
|
||
|
|
- استخدم `#1D1C1D` (شبه أسود) لجميع نصوص المحتوى، وليس الأسود الصريح
|
||
|
|
- اجعل أسماء القنوات غامقة لإظهار حالة عدم القراءة — الوزن هو المؤشر
|
||
|
|
- استخدم الألوان الأربعة للنبرة للأدوار الدلالية فحسب (نجاح، تحذير، خطر، معلومات)
|
||
|
|
- طبّق `border-left: 4px` على مرفقات الرسائل والمدمجات
|
||
|
|
- اعرض الطوابع الزمنية عند التمرير فحسب
|
||
|
|
- استخدم `#1264A3` للروابط وحالات التركيز
|
||
|
|
- احتفظ بعناصر الشريط الجانبي مضغوطة: ارتفاع 28 بكسل، border-radius 6 بكسل
|
||
|
|
|
||
|
|
### ❌ لا تفعل
|
||
|
|
- لا تستخدم منطقة محتوى رئيسية داكنة — Slack يُقدّم الفاتح
|
||
|
|
- لا تبعثر الأزرق/الأخضر/الأصفر/الأحمر كنبرات تزيينية
|
||
|
|
- لا تستخدم الأسود الصريح `#000000` للنص
|
||
|
|
- لا تستخدم فقاعات الكلام — الرسائل صفوف مسطحة
|
||
|
|
- لا تصنع أزراراً بنصف قطر كبير — 4 بكسل هو المعيار
|
||
|
|
- لا تعرض الطوابع الزمنية بشكل دائم
|
||
|
|
- لا تستخدم الحروف الكبيرة بالكامل لأسماء القنوات
|
||
|
|
- لا تستخدم أحجام خطوط أقل من 12 بكسل
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 8. السلوك المتجاوب
|
||
|
|
|
||
|
|
### نقاط الكسر
|
||
|
|
| نقطة الكسر | العرض | التخطيط |
|
||
|
|
|---|---|---|
|
||
|
|
| الجوال | < 768px | لوحة واحدة، الشريط الجانبي كدرج أيسر |
|
||
|
|
| الجهاز اللوحي | 768–1024px | الشريط الجانبي + منطقة الرسائل فحسب |
|
||
|
|
| سطح المكتب | > 1024px | تخطيط ثلاثي الأعمدة الكامل |
|
||
|
|
|
||
|
|
### التكيفات للجوال
|
||
|
|
- الشريط الجانبي: درج أيسر، اسحب لليمين للفتح
|
||
|
|
- شريط التبويب السفلي: الرئيسية، الرسائل المباشرة، النشاط، أنت
|
||
|
|
- لوحة الخيط: تغطية الشاشة بالكامل
|
||
|
|
- المحرر: مثبت فوق لوحة المفاتيح
|
||
|
|
- عناصر قائمة القنوات: ارتفاع منطقة اللمس 44 بكسل
|
||
|
|
- الحفاظ على شريط الرأس الأوبيرجين العلوي على الجوال
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 9. دليل مطالبات الوكيل
|
||
|
|
|
||
|
|
عند إنشاء تصميمات بأسلوب Slack، اتبع هذا النهج:
|
||
|
|
|
||
|
|
**تطبيق الألوان:**
|
||
|
|
> اضبط `background: #FFFFFF` كالقماش الرئيسي. استخدم `#4A154B` (أوبيرجين) للشريط الجانبي. جميع النصوص الأساسية هي `#1D1C1D`. الروابط وحلقات التركيز تستخدم `#1264A3`. الألوان الأربعة للشعار — `#36C5F0`، `#2EB67D`، `#ECB22E`، `#E01E5A` — دلالية فحسب: معلومات، نجاح، تحذير، خطر.
|
||
|
|
|
||
|
|
**الطباعة:**
|
||
|
|
> استخدم `system-ui, -apple-system, sans-serif` لجميع واجهات المستخدم. الحجم الأساسي هو 15 بكسل. القنوات غير المقروءة: وزن 700. نص المحتوى: وزن 400. الطوابع الزمنية: 12 بكسل `#616061`، عند التمرير فحسب. الكود: `Monaco, Menlo, monospace`، 12 بكسل، خلفية `#F8F8F8`.
|
||
|
|
|
||
|
|
**التخطيط:**
|
||
|
|
> ثلاثة أعمدة: شريط جانبي أوبيرجين 240 بكسل + منطقة رسائل بيضاء مرنة + لوحة خيط اختيارية 400 بكسل. عناصر الشريط الجانبي: ارتفاع 28 بكسل، نصف قطر 6 بكسل، غامق عند عدم القراءة. المحرر: مثبت في الأسفل، `border: 1px solid #DDDDDD`، `border-radius: 8px`.
|
||
|
|
|
||
|
|
**المكونات:**
|
||
|
|
> الأزرار: نصف قطر 4 بكسل، ارتفاع 36 بكسل، أوبيرجين أساسي. حقول الإدخال: حد `1px solid #DDDDDD`، حلقة تركيز `#1264A3`. صفوف الرسائل: مسطحة، بلا فقاعات، صورة رمزية دائرية 36 بكسل. التفاعلات: pill `border: 1px solid #DDDDDD`، `border-radius: 24px`.
|
||
|
|
|
||
|
|
**النبرة:**
|
||
|
|
> Slack دافئ واحترافي وإنساني. الحالات الفارغة تستخدم رسوماً توضيحية ودية. عبارات الدعوة للعمل مباشرة: "إرسال رسالة"، "ابدأ الآن". رسائل الخطأ واضحة ومفيدة. لا تثير القلق أبداً.
|
||
|
|
|
||
|
|
**الأنماط المضادة التي يجب تجنبها:**
|
||
|
|
> لا توجد منطقة محتوى داكنة. لا توجد فقاعات كلام. لا يوجد نص أسود صريح. لا توجد نبرات متعددة الألوان مبعثرة. لا توجد أسماء قنوات بالحروف الكبيرة. لا يوجد خط أصغر من 12 بكسل. لا يوجد نصف قطر زر كبير.
|