نظام التصميم المرن

يتمثل الغرض من الضوء في لفت الانتباه وتوضيح المعلومات. ولذلك، يُنشئ الضوء علاقة بين واجهة المستخدم والمؤشر. ^{[ 21 ]}

• إظهار التمييز: عند تمرير المؤشر، يُضيء التمييز الحدود المخفية القريبة على العناصر مثل قوائم التنقل (مثل قائمة الهامبرغر) والأزرار. عند التحديد، كالنقر أو الضغط، يظهر تأثير إضاءة دائري أبيض بسرعة. ^{[ 21 ] [ 22 ]}
• إظهار التركيز: العناصر القابلة للتركيز مع توهج حدودي عبر خاصية التركيز المرئي. ^{[ 23 ]}

مع إصدار WinUI 2.6، أوقفت مايكروسوفت ميزة إظهار الشاشة لتتوافق مع تطبيقاتها على الويب والهواتف المحمولة، والتي لا تدعم هذه الميزة. ^{[ 24 ]} علاوة على ذلك، مع إصدار ويندوز 11، بدأت مايكروسوفت تدريجيًا في إزالة استخدام المؤثرات الضوئية بشكل عام، واستبدلتها بتوفير التفاعل من خلال الرسوم المتحركة. ^{[ 24 ]}

يُضاف العمق إلى المحتوى من خلال الطبقات على المحور Z. ويُعرض العمق عبر الظلال المسقطة وطبقات العمق على المحور Z. ^{[ 25 ] [ 26 ]} ويتضح هذا جليًا في تطبيق Office المُعاد تصميمه عام 2019. وفي نظام التشغيل Windows 11، تم توسيع نطاق استخدام العمق من خلال تراكب أسطح مختلفة ذات درجات عتامة متفاوتة من مادة الميكا.

• الطبقات: تقسم الطبقات التطبيق إلى قاعدة تمثل "اللوحة" ومحتوى يطفو فوقها. يمكن عرض المحتوى كسطح متصل أو كبطاقة. ^{[ 27 ]}
• الارتفاع: الارتفاع هو استخدام فصل العناصر عن سطح التطبيق من خلال استخدام الظلال. تشمل الأمثلة قوائم السياق ، والنوافذ المنبثقة، وتلميحات الأدوات . ^{[ 27 ]}

تُرسّخ الحركة علاقة بين عناصر واجهة المستخدم وتوفر استمرارية في التجربة. ^{[ 28 ]}

• رسوم متحركة للإضافة/الحذف: رسوم متحركة لعرض وإدراج العناصر في مجموعة. ^{[ 28 ]}
• الرسوم المتحركة المتصلة: هي انتقالات بين العناصر. أثناء تغيير المحتوى، يظهر عنصر ما وكأنه يستمر في التحرك عبر التطبيق. ^{[ 29 ]}
• انتقال المحتوى: يُستخدم عندما يتغير جزء فقط من محتوى الصفحة. ^{[ 28 ]}
• التعمق: يُستخدم التعمق عند التنقل إلى أعماق التطبيق. على سبيل المثال، عرض المزيد من المعلومات بعد تحديد عنصر ما. ^{[ 30 ]}
• التلاشي: التلاشي للداخل والتلاشي للخارج لإظهار العناصر وإخفائها عن الأنظار. ^{[ 28 ]}
• تأثير المنظر: يُحرّك تأثير المنظر العناصر بسرعات مختلفة. تتحرك الخلفية أبطأ من المحتوى الموجود فوقها. على سبيل المثال، ستتحرك القائمة أسرع من صورة الخلفية، مما يخلق تأثير عمق بالإضافة إلى الحركة. ^{[ 31 ]}
• ردود فعل الضغط: عند الضغط على عنصر ما، يختفي مؤقتًا في الخلفية ثم يعود إلى موضعه الأصلي. ومن أمثلة ردود فعل الضغط: مربعات قائمة ابدأ الحية، والإجراءات السريعة في مركز الإجراءات ، وأزرار شريط عناوين متصفح مايكروسوفت إيدج . ^{[ 32 ]}

المواد هي مؤثرات بصرية تُطبق على أسطح تجربة المستخدم. في التصميم الانسيابي، يوجد نوعان رئيسيان من المواد: مواد حاجبة ومواد شفافة. تشكل المواد الحاجبة، مثل الأكريليك والميكا، الطبقات الأساسية أسفل عناصر واجهة المستخدم التفاعلية. أما المواد الشفافة، مثل الدخان، فتُستخدم لإبراز الأسطح الغامرة: ^{[ 33 ]}

• الأكريليك: تُضفي مادة الأكريليك تأثيرًا شفافًا ضبابيًا مع تأثير تشويش طفيف. في نظام التشغيل ويندوز 10، كان الأكريليك يُستخدم في الأسطح الكبيرة (مثل اللوحات الجانبية). أما في ويندوز 11، فقد استُبدل الأكريليك في الأسطح الرئيسية بمادة الميكا. ويُستخدم الأكريليك الآن في الأسطح المؤقتة مثل قوائم السياق ، وتلميحات الأدوات ، وتوقعات مربعات البحث .
• الميكا: الميكا مادة جديدة معتمة أُضيفت في نظام التشغيل ويندوز 11، وتتخذ لون خلفية شاشة المستخدم. ^{[ 34 ]} على عكس الأكريليك، المصمم للأسطح المؤقتة (مثل قوائم السياق)، صُممت مادة الميكا للاستخدام على الأسطح الأساسية طويلة الأمد. وباستخدام درجات مختلفة من الشفافية، يمكن للتطبيقات إنشاء تسلسل هرمي بصري.
• الدخان: تم تقديم الدخان مع نظام التشغيل ويندوز 11. وهو عبارة عن خلفية سوداء شفافة، بغض النظر عن الوضع الفاتح أو الداكن، وذلك لإنشاء تسلسل هرمي بين النافذة الرئيسية والنافذة المنبثقة. ^{[ 33 ]}

يتم تعطيل كل من خاصية الأكريليك وخاصية الميكا في نافذة محددة عند إلغاء تحديد التطبيق. علاوة على ذلك، يتم تعطيلهما على مستوى النظام عند تعطيل الشفافية، أو عند تفعيل وضع توفير الطاقة، أو على الأجهزة ذات المواصفات المنخفضة. يتم تعطيل خاصية الأكريليك في الخلفية عند إلغاء تحديد نافذة أو في نظام التشغيل Windows 10 Mobile أو HoloLens أو وضع الجهاز اللوحي. ^{[ 35 ]}

تتكيف التطبيقات مع مختلف عوامل الشكل وأحجام الشاشة . ^{[ 36 ]} كما تُصنف عناصر التحكم الواعية ضمن فئة "التكيف" (مثل أشرطة التمرير والمدخلات التي تتكيف مع طرق الاستدعاء المختلفة) ^{[ 37 ] [ 38 ]}

تم تصميم أيقونات جديدة مصنوعة من مواد أكريليك لبرامج مايكروسوفت، بدءًا بتطبيقات أوفيس ومتصفح مايكروسوفت إيدج المبني على كروميوم في عامي 2018 و2019 على التوالي. ^{[ 39 ] [ 40 ] [ 41 ]} وقد رُصدت نسخ أولية من الأيقونات النهائية في فيديو "تعرّف على الأيقونات الجديدة لأوفيس 365 "، ^{[ 42 ]} قبل ظهور المزيد منها عند الكشف عن ويندوز 10X، ^{[ 43 ]} قبل الكشف الرسمي عنها في 12 ديسمبر 2019. ^{[ 44 ]} وبدأت هذه الأيقونات بالظهور من خلال ^{تحديثات} متجر مايكروسوفت لتلك التطبيقات، بدءًا من البريد والتقويم . ^{[ 45 ] [ 46} ]

MDL2

طلِق

تُشكّل أيقونات Segoe Fluent مجموعة الأيقونات التي صممتها مايكروسوفت لاستخدامها في منتجاتها وخدماتها، إلى جانب إعادة تصميم خط Segoe UI (Segoe UI Variable). ^{[ 47 ]} تتميز هذه الأيقونات بحوافها الدائرية، على عكس أيقونات Segoe MDL2 ذات الزوايا الحادة والمستقيمة التي كانت سائدة خلال حقبة ويندوز 10. ^{[ 48 ]}

طلِق

في 15 يوليو 2021، أعلنت مايكروسوفت عن إعادة تصميم كاملة لمكتبة الرموز التعبيرية الخاصة بها لتتوافق مع تصميمها المبتكر Fluent Design. ^{[ 49 ]} وسعيًا منها لجعل نظام ويندوز أكثر اتساقًا وسهولة في الاستخدام، أتاحت مايكروسوفت أكثر من 1500 رمز تعبيري كمصدر مفتوح في 10 أغسطس 2022. ^{[ 50 ] [ 51 ]} تتميز هذه الرموز التعبيرية الجديدة المتوافقة مع Fluent Design عن النمط المسطح والمحدد لمكتبة الرموز التعبيرية السابقة المستخدمة في ويندوز 10، حيث تتبنى بدلاً من ذلك مظهرًا ثلاثي الأبعاد يشبه معجون اللعب . ^{[ 49 ]} علاوة على ذلك، صرحت مايكروسوفت بخططها لتحريك معظم هذه الرموز. ^{[ 52 ]} بينما يمكن رؤية الرموز التعبيرية المتحركة ثلاثية الأبعاد في تطبيقات مثل مايكروسوفت تيمز وسكايب ، استخدم ويندوز 11 في البداية نسخًا مسطحة منها ، بينما تأخر إطلاقها الكامل حتى عام 2023. ^{[ 53 ]}