نظرة عامة على رموز المواد - أين يمكنك الحصول عليها وكيفية دمجها في مشروعاتك.
ما هي رموز المواد؟
أيقونات نظام التصميم المتعدد الأبعاد بسيطة وحديثة ومحبوبة وغريبة في بعض الأحيان. يتم إنشاء كل أيقونة باستخدام إرشادات التصميم الخاصة بنا لتصوير المفاهيم العالمية المستخدمة بشكل شائع في واجهة المستخدم بأشكال بسيطة وبسيطة. بما يضمن سهولة القراءة والوضوح على كلا الحجمين الكبير والصغير، تم تحسين هذه الرموز للحصول على عرض جميل على جميع الأنظمة الأساسية الشائعة ودرجات دقة العرض.
يمكنك الاطّلاع على المجموعة الكاملة لرموز التصميم المتعدد الأبعاد في مكتبة رموز المواد.
جارٍ الحصول على الرموز
تتوفر الأيقونات بعدة تنسيقات ومناسبة لأنواع مختلفة من المشروعات والأنظمة الأساسية، للمطورين في تطبيقاتهم، وللمصممين في نماذجهم التجريبية أو نماذجهم الأولية.
الترخيص
وقد أتحنا لك استخدام هذه الرموز لدمجها في منتجاتك التي تندرج ضمن الإصدار 2.0 من ترخيص Apache. يمكنك إعادة مزج هذه الرموز والمستندات وإعادة مشاركتها في منتجاتك. نرغب في إدراج الإحالة في شاشة about في تطبيقك، ولكنها ليست مطلوبة.
تصفُّح الرموز الفردية وتنزيلها
تتوفّر المجموعة الكاملة من رموز المواد في مكتبة رموز المواد. تتوفر الرموز للتنزيل بتنسيق SVG أو PNG، وبتنسيقات مناسبة لمشاريع الويب وAndroid وiOS أو للتضمين في أي من أدوات المصمم.
جارٍ تنزيل كل المحتوى
احصل على أحدث أرشيف مضغوط بتنسيق ZIP (310 ميغابايت تقريبًا) من جميع الرموز أو النسخة الحديثة من النسخة الرئيسية.
مستودع Git
تتوفّر رموز المواد من مستودع git الذي يتضمّن المجموعة الكاملة من الرموز، بما في ذلك جميع التنسيقات المختلفة التي نوفّرها.
$ git clone https://github.com/google/material-design-icons/
خط الرمز للويب
خط أيقونة المواد هو أسهل طريقة لدمج أيقونات المواد مع مشروعات الويب. لقد جمَّعنا جميع رموز المواد في خط واحد يستفيد من إمكانات العرض الطباعي في المتصفحات الحديثة بحيث يمكن لمطوري الويب دمج هذه الأيقونات بسهولة باستخدام بضعة أسطر من التعليمات البرمجية.
إن استخدام الخط ليس الطريقة الأكثر ملاءمة فحسب، ولكنه فعال ويبدو رائعًا:
- أكثر من 900 رمز من ملف واحد صغير.
- يتم عرضه من خوادم Google Web Font أو يمكن استضافته ذاتيًا.
- مدعوم من جميع متصفّحات الويب الحديثة.
- ملوّنة وحجمها وموضعها بالكامل باستخدام CSS.
- مستند إلى المتجه: يبدو رائعًا على أي مقياس، شاشات ريتينا، شاشات عرض منخفضة النقاط لكل بوصة
يزن خط الرمز 42 كيلوبايت فقط في أصغر تنسيق woff2 و56 كيلوبايت بتنسيق woff القياسي. وبالمقارنة، سيصل حجم ملفات SVG المضغوطة بتنسيق gzip بشكل عام إلى حوالي 62 كيلوبايت، ولكن يمكن تقليل هذا الحجم إلى حد كبير من خلال تجميع الرموز التي تحتاجها فقط في ملف SVG واحد يتضمن رموزًا مدمجة.
طريقة الإعداد 1. الاستخدام عبر Google Fonts
أسهل طريقة لإعداد خطوط الرموز لاستخدامها في أي صفحة ويب هي من خلال Google Fonts. كل ما عليك فعله هو تضمين سطر واحد من HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
على غرار خطوط الويب من Google الأخرى، سيتم عرض لغة CSS الصحيحة لتفعيل خط "رموز المواد" الخاص بالمتصفّح.
سيتم الإعلان عن فئة CSS إضافية باسم .material-icons.
سيحتوي أي عنصر يستخدم هذه الفئة على لغة CSS الصحيحة لعرض هذه الرموز من خط الويب.
طريقة الإعداد 2: الاستضافة الذاتية
وبالنسبة إلى أولئك الذين يريدون استضافة خط الويب بأنفسهم، عليهم إجراء بعض الإعدادات الإضافية.
استضِف خط الرمز في مكان معيّن، مثل https://example.com/material-icons.woff، وأضِف قاعدة CSS التالية:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
بالإضافة إلى ذلك، يجب الإعلان عن قواعد CSS الخاصة بعرض الرمز بحيث تعرض الخط بشكل صحيح. يتم عادةً عرض هذه القواعد كجزء من ورقة أنماط Google Web Font، ولكن يجب تضمينها يدويًا في مشاريعك عند الاستضافة الذاتية للخط:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
استخدام الأيقونات في HTML
من السهل دمج الرموز في صفحة الويب. في ما يلي مثال صغير:
وجه
<span class="material-icons">face</span>
يستخدم هذا المثال ميزة مطبعية تسمى الحروف المزدوجة، والتي تسمح بعرض حرف رسومي للرمز من خلال استخدام اسمه النصي. يتم الاستبدال تلقائيًا باستخدام متصفح الويب ويوفر رمزًا قابلاً للقراءة أكثر من مرجع الأحرف الرقمية المكافئ.
وتتوفّر هذه الميزة في معظم المتصفّحات الحديثة على كلّ من أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة.
| المتصفح | الإصدار المتوافق مع الأحرف المتصلة |
|---|---|
| متصفح Google Chrome | 11 |
| Mozilla Firefox | 3.5 |
| Apple Safari | 5 |
| برنامج Microsoft IE | 10 |
| Microsoft Edge | 18 |
| أوبرا | 15 |
| متصفح Apple MobileSafari | الإصدار 4.2 من نظام التشغيل iOS |
| متصفح Android | 3.0 |
بالنسبة إلى المتصفحات التي لا تتيح الأحرف المزدوجة، عد إلى تحديد الرموز باستخدام مراجع الأحرف الرقمية كما في المثال أدناه:
<span class="material-icons"></span>يمكنك العثور على أسماء الرموز ونقاط الرموز في مكتبة رموز المواد من خلال اختيار أي رمز وفتح لوحة خط الرموز. يحتوي كل خط للرمز على فهرس نقاط رموز في مستودع git يعرض المجموعة الكاملة من الأسماء ورموز الأحرف (هنا).
تصميم الرموز في التصميم متعدد الأبعاد
تم تصميم هذه الرموز لاتّباع إرشادات التصميم المتعدد الأبعاد، وهي تظهر بأفضل شكل عند استخدام أحجام الرموز وألوانها المقترَحة. تسهل الأنماط أدناه تطبيق الأحجام والألوان وحالات النشاط الموصى بها.
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
مقاسات الشعار
وعلى الرغم من إمكانية تحجيم الرموز في الخط إلى أي حجم، وفقًا لإرشادات رموز التصميم متعدد الأبعاد، نوصي بعرضها إما 18 أو 24 أو 36 أو 48 بكسل. القيمة التلقائية هي 24 بكسل.
قواعد CSS لإرشادات تحديد المقاسات القياسية لتصميم المواد:
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
تبدو الرموز Material أفضل بـ 24 بكسل، ولكن إذا كانت هناك حاجة إلى عرض رمز بحجم بديل، فإن استخدام قواعد CSS المذكورة أعلاه يمكن أن يساعدك في:
<span class="material-icons md-18">face</span><span class="material-icons md-24">face</span><span class="material-icons md-36">face</span><span class="material-icons md-48">face</span>ألعاب التلوين
يسمح استخدام خط الأيقونة بتصميم الرمز بسهولة بأي لون. وفقًا لإرشادات رموز التصميم متعدد الأبعاد، بالنسبة إلى الرموز النشطة، ننصح باستخدام اللون الأسود بدرجة تعتيم 54% أو اللون الأبيض بنسبة تعتيم 100% عند عرضها على خلفيات فاتحة أو داكنة. إذا كان الرمز معطلاً أو غير نشط، فاستخدم اللون الأسود بنسبة 26% أو الأبيض بنسبة 30% للخلفيات الفاتحة والداكنة، على التوالي.
فيما يلي بعض الأمثلة، باستخدام أنماط CSS متعددة الأبعاد الموضحة أعلاه:
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
مثال لرسم رمز على خلفية فاتحة مع لون مقدمة داكن:
<span class="material-icons md-dark">face</span><span class="material-icons md-dark md-inactive">face</span>مثال لرسم رمز على خلفية داكنة مع لون مقدمة فاتح:
<span class="material-icons md-light">face</span><span class="material-icons md-light md-inactive">face</span>لتعيين لون رمز مخصص، حدد قاعدة CSS تحدد اللون المطلوب للخط:
.material-icons.orange600 { color: #FB8C00; }
ثم استخدم الفئة عند الإشارة إلى الرمز:
<span class="material-icons orange600">face</span>صور الرموز للويب
وتتوفر رموز Material أيضًا كصور عادية، بتنسيقين PNG وSVG.
SVG
يتم توفير رموز المواد على هيئة صور SVG مناسبة لمشاريع الويب. يمكن تنزيل الرموز الفردية من مكتبة رموز المواد. تتوفّر ملفات SVG أيضًا من مستودع git الخاص برموز التصميم المتعدد الأبعاد ضمن المسار:
material-design-icons/src/
على سبيل المثال، تتوفّر رموز الخرائط في src/maps:
material-design-icons/src/maps/
إذا كانت هناك أيقونات متعددة قيد الاستخدام على موقع ويب، فيوصى بإنشاء ورقة رموز متحركة من الصور. للحصول على مزيد من المعلومات، يمكنك مراجعة الوثائق في دليل تركيبات متحركة لمستودع git.
PNG
تنسيق PNG هو الطريقة الأكثر تقليدية لعرض الأيقونات على الويب. توفّر عمليات التنزيل من مكتبة رموز المواد كثافة فردية ومزدوجة لكل رمز. ويُشار إليهما بالرمز 1x و2x على التوالي في عملية التنزيل. تتوفر الأيقونات أيضًا في مستودع git ضمن:
material-design-icons/png/
إذا كانت هناك أيقونات متعددة قيد الاستخدام على موقع ويب، فيوصى بإنشاء ورقة رموز متحركة من الصور. للمزيد من المعلومات، يمكنك الرجوع إلى التوصيات الواردة في دليل تركيبات مدمجة في مستودع git.
الأيقونات لنظام Android
تتوفّر ملفات PNG المناسبة لنظام التشغيل Android في مكتبة رموز المواد. تتوفّر هذه الميزة بجميع كثافات الشاشة المتوافقة، لذا يجب أن تبدو جيدة على أي جهاز.
تتوفّر هذه الرموز أيضًا في مستودع git لرموز التصميم المتعدد الأبعاد بالتركيبة نفسها من الألوان والأحجام المذكورة على النحو التالي:
لا يتوفّر Vector Drawable حاليًا إلا كرمز أسود بحجم 24dp. وذلك من أجل التوافق مع معظم أحجام الرموز العادية. لعرض الرمز بلون مختلف، استخدِم درجة التلوين القابلة للرسم المتوفّرة على Android Lollipop.
عند استخدام Vector Drawable، قد لا يكون من الضروري تضمين كثافة xxxhdpi بتنسيق PNG نظرًا لأنه من غير المحتمل أن يكون الجهاز الذي يدعم كثافة الشاشة هذه لا يتوافق مع Vector Drawables.
رموز iOS
تعمل الرموز Material أيضًا بشكل جيد داخل تطبيقات iOS. في كل من مكتبة رموز المواد ومستودع جيت، يتم تجميع هذه الرموز في مجموعات صور Xcode التي ستعمل بسهولة مع كتالوجات مواد العرض في Xcode (xcassets). يمكن إضافة مجموعات الصور هذه إلى أي كتالوجات مواد عرض Xcode من خلال سحبها إلى Xcode على كتالوج مواد العرض أو عن طريق نسخ المجلد إلى مجلد xcasset.
تحتوي مجموعة الصور على صور أحادية الكثافة ومزدوجة وثلاثية الكثافة (1x، 2x، 3x) حتى تعمل على جميع كثافات شاشات iOS المعروفة. يتم توفير كل من الرمزين الأبيض والأسود، ولكننا ننصحك باستخدام ميزة UIImage's imageWithRenderingMode مع UIImageRenderingModeAlwaysTemplate والتي ستسمح باستخدام الصورة كقناع ألفا يمكن تلوينه بأي لون ممكن.
مثال على الهدف ج:
UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
[[UIImage imageNamed:@"ic_close"]
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];
مثال على Swift:
let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)
الرموز من اليمين إلى اليسار
تتم قراءة اللغات مثل العربية والعبرية من اليمين إلى اليسار (RTL). بالنسبة إلى اللغات التي تُكتب من اليمين إلى اليسار، يجب مزامنة واجهات المستخدم على الجهاز وفي السحابة الإلكترونية لعرض معظم العناصر المكتوبة من اليمين إلى اليسار. عند إجراء نسخ مطابق لواجهة المستخدم من أجل RTL، يجب أيضًا أن تتم مطابقة بعض الرموز. عند انعكاس النص والتخطيط والأيقنة لدعم واجهات المستخدم من اليمين إلى اليسار، يجب تصوير أي شيء يتعلق بالوقت على أنه ينتقل من اليمين إلى اليسار. على سبيل المثال، يشير الانتقال للأمام إلى اليسار والخلف إلى اليمين. ومع ذلك، ضع في اعتبارك أن السياق الذي يتم فيه وضع الأيقونة يؤثر أيضًا على ما إذا كان يجب عكس الأيقونة أم لا.
يجب أن تنعكس الرموز فقط إذا كان اتجاهها يطابق عناصر واجهة المستخدم الأخرى في وضع RTL. عندما يمثّل الرمز الميزات المرئية المختلفة لموقعك الإلكتروني من اليمين إلى اليسار، يجب أن ينعكس الرمز أيضًا من اليمين إلى اليسار. على سبيل المثال، إذا كانت الأرقام في قائمة مرقّمة موجودة على الجانب الأيمن بلغة RTL، يجب أن تكون الأرقام على الجانب الأيمن من الرمز الذي تتم مزامنته على الجهاز وفي السحابة الإلكترونية.
رموز RTL في Android
هذه المقالة الخاصة بمطوّر برامج Android: تقدّم بالتفصيل كيفية تنفيذ واجهات المستخدم من اليمين إلى اليسار (RTL). بشكل تلقائي على نظام التشغيل Android، لا يتم عكس الرموز عند عكس اتجاه التنسيق. عليك إجراء نسخ مطابق للرموز المناسبة عند الحاجة، إما من خلال توفير مواد عرض متخصّصة للغات التي تُكتب من اليمين إلى اليسار، أو من خلال استخدام وظائف إطار العمل لمحاكاة مواد العرض.
لتوفير مواد عرض متخصصة باللغات التي تُكتب من اليمين إلى اليسار، يمكنك استخدام المؤهِّل ldrtl في أدلة الموارد، مثل res/drawable-ldrtl/. ولن يتم استخدام الموارد داخل هذه الأدلة إلا للغات التي تُكتب من اليمين إلى اليسار. بالنسبة إلى الأجهزة التي تعمل بالإصدار 19 من واجهة برمجة التطبيقات Android API أو إصدار أحدث، يوفّر إطار العمل أيضًا سمة autoMirrored التي تتيح عرض الرسومات. وعند ضبط هذه السمة على "صحيح"، تتم مزامنة العنصر القابل للرسم تلقائيًا في اللغات ذات التنسيق من اليمين إلى اليسار.
استخدام ميزة "النسخ المطابق التلقائي":
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0"
android:tint="?attr/colorControlNormal"
android:autoMirrored="true">
<path
android:fillColor="@android:color/white"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>
إذا لم يكن استخدام ميزة autoMirrored أو توفير موارد بديلة قابلة للرسم من الخيارات المتاحة، يمكن أيضًا استخدام سمة ImageViewscaleX لمحاكاة العناصر القابلة للرسم (على سبيل المثال، من خلال توفير تنسيق خاص من اليمين إلى اليسار في دليل res/layout-ldrtl).
النسخ المطابق داخل ملف التخطيط:
<ImageView
android:id="@+id/my_icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:scaleX="-1" />
أخيرًا، يمكن انعكاس العناصر القابلة للرسم آليًا.
التحقق يدويًا من اتجاه التنسيق باستخدام getLayoutDirection:
if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
// custom code
}
النسخ المطابق لمحتويات ImageView آليًا:
imageView.setScaleX(-1);
رموز من اليمين إلى اليسار على نظام التشغيل iOS
يتضمن iOS مفهوم UISemanticContentAttribute المرتبط بكل ملف شخصي. يمكن أن يكون هذا الرقم unspecified أو forceLeftToRight أو forceRightToLeft أو playback أو spatial. يستخدم iOS هذه القيمة والإعدادات (LTR)/RTL من اليسار إلى اليمين (LTR)/RTL في الجهاز الذي يعرض الواجهة من أجل تحديد إرشادات فعالة لطريقة العرض. يحدد هذا الفعّال للتخطيط الفعال ما إذا كان سيتم عكس الصورة عند عرضها أم لا.
يتم ضبط المحتوى الدلالي للصور تلقائيًا على unspecified. ويؤدي ذلك إلى النسخ المطابق في وضع RTL. إذا كنت لا تريد أن يتم نسخ رمز على الجهاز وفي السحابة الإلكترونية على الإطلاق، عليك ضبطه على forceLeftToRight. تستدعي Apple بعض الاستثناءات التي يجب عدم النسخ المطابق لها، مثل تشغيل الوسائط (تقديم سريع وترجيع وغير ذلك) والنوتات الموسيقية والصور التي تشير إلى مرور الوقت وما إلى ذلك.
مثال على الهدف ج:
// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
UISemanticContentAttributeForceLeftToRight;
مثال على Swift:
// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;
للحصول على مستندات تفصيلية حول كيفية تطبيق RTL على نظامَي التشغيل iOS وmacOS، يُرجى مراجعة مستندات RTL في Apple.
تمّت إضافة المحتوى الدلالي في نظام التشغيل iOS 9. إذا كنت تتيح استخدام الإصدارات السابقة من نظام التشغيل iOS، يعمل إطار عمل تدويل المواد على نقل بعض الوظائف إلى الإصدار iOS 8.
رموز RTL على الويب
ننصحك بقراءة المقالة التالية كدليل تمهيدي لكتابة RTL على الويب: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2.
بشكل افتراضي على الويب، لا يتم عكس الرموز عند انعكاس اتجاه التنسيق. عليك إجراء نسخ مطابق للرموز المناسبة على وجه التحديد عند الحاجة.
يوضح المثال أدناه كيفية تطبيق قاعدة CSS بسيطة من اليمين إلى اليسار. يمكنك أيضًا عرضه على برنامج الترميز.
page.html
<html dir="rtl">
<img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>
page.css
html[dir="rtl"] .icon {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
أنشِئ رموزًا من اليمين إلى اليسار باستخدام ImageMagick
إذا لم يكن النسخ المطابق للرموز في الرمز البرمجي خيارًا، يمكنك استخدام ImageMagick لعكس الصورة أفقيًا.
convert -flop my_icon.png my_icon_rtl.png
ما هي الرموز التي يجب مزامنتها مع RTL؟
في ما يلي قائمة بالرموز التي يمكن مزامنتها بشكل آلي مع RTL:
| سهم إلى الخلف | سهم واحد () للخلف على iOS | سهم إلى الأمام |
| سهم للأمام على iOS | سهم لليسار | سهم "" لليمين |
| مهمة واحدة () | تم إرجاع مهمة واحدة (). | مفتاح Backspace |
| بطارية غير معروفة | تم إجراء مكالمة واحدة () | دمج المكالمات |
| مكالمة فائتة واحدة () | مكالمة صادرة واحدة () فائتة | تم استلام مكالمة واحدة (). |
| تقسيم المكالمة | سهم إلى اليسار | شارة شيفرون لليمين |
| وضع قارئ Chrome | جهاز واحد () غير معروف | مسجّل فيديو واحد () |
| ملاحظة عن حدث "" | قائمة تشغيل مميّزة واحدة () | فيديو مميّز واحد () |
| الصفحة الأولى: | هبوط رحلة الطيران "" | رحلة الطيران التي ستقلع |
| تقليل المسافة البادئة لتنسيق | زيادة المسافة البادئة للتنسيق | قائمة نقطية بتنسيق |
| انتقال واحد () إلى الأمام | دالة | إدخال |
| علامة تبويب لوحة المفاتيح | تصنيف واحد () | تصنيف واحد () مهم. |
| مخطط تصنيف | الصفحة الأخيرة: | إطلاق "" |
| قائمة واحدة () | المساعدة المباشرة لـ | مشاركة شاشة واحدة () للأجهزة الجوّالة |
| رسم بياني متعدد الأسطر | التنقل قبل | الانتقال إلى الصفحة التالية |
| الأسبوع المقبل | ملاحظة واحدة () | مفتوحة في نافذة جديدة |
| إضافة قائمة تشغيل واحدة () | إضافة الموسيقى إلى قائمة المحتوى التالي في "" | إعادة واحدة () |
| رد واحد () | رد على الكل | مشاركة شاشة واحدة () |
| إرسال | نص قصير واحد () | الرسم البياني لعرض "" |
| ترتيب العمود "" | نصف نجمة واحدة () | موضوع واحد () |
| ثابت في الرواج في | جدول زمني واحد () | انخفاض في معدّل |
| ارتفاع في شهر | تراجع عن "" | قائمة مشاهدة واحدة () |
| لحاف للعرض | التفاف النص |