ملاحظة
يتطلب الوصول إلى هذه الصفحة تخويلاً. يمكنك محاولة تسجيل الدخول أو تغيير الدلائل.
يتطلب الوصول إلى هذه الصفحة تخويلاً. يمكنك محاولة تغيير الدلائل.
ينطبق على توصية قائمة مراجعة Power Platform Well-Architected Experience Optimization:
| XO:06 | حافظ على تخطيطات قابلة للاستخدام وجذابة بصريًا عبر أحجام الشاشة ودرجات الدقة. استخدم التقنيات التكيفية لعرض المحتوى ديناميكيًا بطرق مختلفة. |
|---|
يصف هذا الدليل التوصيات الخاصة بتصميم تخطيطات الشاشة التي يسهل التنقل خلالها وتكييفها بسلاسة عبر أجهزة مختلفة. يضمن هذا الأسلوب حصول المستخدمين على تجربة عرض متناسقة ومثالية بغض النظر عن الأجهزة التي يستخدمونها.
التعريفات
| المصطلح | تعريف |
|---|---|
| منفذ العرض | جزء مرئي من الواجهة الرقمية، مثل متصفح ويب أو تطبيق أجهزة محمولة، حيث يتم عرض المحتوى. غالبًا ما يتم ربط نطاقات منفذ العرض مع فئات الأجهزة (هاتف محمول، وكمبيوتر لوحي، و كمبيوتر مكتبي) استنادًا إلى أبعاد الشاشة ومستويات الدقة. |
| نقاط التوقف | يتم استخدام قيم بكسل معينة والتي تحدد نطاقات منافذ العرض لتحديد سلوك التخطيط التكيفي. |
استراتيجيات التصميم الأساسية
توفر التخطيطات المتفاعلة تجربة مستخدم مرنة وفعّالة عبر أحجام نوافذ مختلفة. فهي تتكيف من خلال تغيير حجم المحتوى وإعادة ترتيب العناصر وعرض النصوص والصور بشكل انتقائي. تلبي التخطيطات المسؤولة احتياجات المستخدمين بغض النظر عن حجم الشاشة.
تحديد إطار تطبيق ثابت
يتكون إطار التطبيق من مجموعة من عناصر التحكم المتوفرة باستمرار على كل شاشة. وهي تتألف من ثلاث مكونات فرعية رئيسية: رأس وتنقل ومنطقة محتوى. تتمتع التطبيقات البسيطة بالمرونة في استخدام مكون الرأس، بينما تستخدم التطبيقات الأكثر تطورًا التنقل الجانبي غالبًا لتمكين صفحات متعددة. المكونات ا الفرعية قابلة للتخصيص. على سبيل المثال، يمكنك تضمين بحث عام في الرأس أو عناصر المجموعة في التنقل الجانبي بما يتناسب مع متطلبات التطبيق.
المكونات الفرعية الثلاثة الرئيسية لإطار التطبيق هي:
يُعتبر الرأس مكونًا أساسيًا تم تصميمه ليكون جزءًا من كل تطبيق داخلي. وهو يتألف من مكونات فرعية تتيح للمستخدمين الوصول إلى الوظائف على مستوى النظام، وتساعد في توجيههم إلى واجهة المستخدم، وتُوفر التناسق عبر التجارب. ويظهر في الجزء العلوي من إطار التطبيق ويجب أن يستمر في جميع صفحات التطبيق. ويمكنه اختياريًا استضافة أوامر عمومية، مثل البحث أو الإعدادات أو الإشعارات أو التعليقات أو ملف التعريف أو المساعدة. يجب أن يتم عرض اسم التطبيق دائمًا، ويجب أن يكون بمثابة رابط قابل للنقر عليه للوصول إلى الصفحة الرئيسية أو الصفحة المقصودة. يجب أن يكون الرأس سريع الاستجابة، مع أوامر نقل إلى عنصر التحكم بالفائض في منافذ العرض التي يبلغ حجمها 600 بكسل أو أقل. يستجيب عرض إدخال البحث أيضًا عند 1023 بكسل أو أقل.
التنقل هو نظام من عناصر التحكم التي تعمل معًا لمساعدة المستخدمين في العثور على المعلومات وإكمال المهام. يساعد المستخدمين على الانتقال من قسم إلى قسم في التطبيق. من الناحية الهرمية، هو غير مرفق بأية صفحة أو مقطع، ولكنه موجود فوق كل المحتوى الآخر. إنه موجود دائمًا، ويمكن تصغيره إلى حالة مطوية (وتسمى أيضًا حالة السكة) لتحرير مساحة إضافية لمحتوى الصفحة. وفي أحجام النوافذ الأصغر، يمكن تصغيره داخل قائمة منبثقة. تتضمن أكثر أشكال التنقل شيوعًا التنقل العلوي والتنقل الجانبي. لا تستخدم الشكلين في وقت واحد.
تحتوي منطقة المحتوى على بؤرة تركيز الشاشة. يؤثر حجم نافذة المتصفح على إطار المحتوى والمساحة المتوفرة في منطقة المحتوى الرئيسية. يتكيف هذا الإطار بناءً على نقطة التوقف والسلوك المستجيب المقابل لكل مكون. اعرف المزيد في إنشاء مصفوفة نقاط توقف.
يمكن أن تحتوي منطقة المحتوى بشكل اختياري على العديد من المناطق الفرعية المتوفرة لوضع العناصر المتناسقة، مثل رأس الصفحة، أو الأجزاء الجانبية المضمنة، أو اللوحات التي تراكب المحتوى.
إن الالتزام بلغة تصميم متناسقة ذات أنظمة ألوان وطباعة وبنية تخطيط، يساعد المستخدمين على التعرف بسرعة على العناصر المختلفة والتفاعل معها دون أي إرباك. كلما تم استخدام نمط إطار التطبيق بشكل أكثر تناسقاً عبر جميع تطبيقات الأعمال الداخلية، أصبح تذكر المستخدم أو النموذج العقلي أقوى. إن التوافق مع معايير الصناعة أو أنماط النظام الأساسي المشتركة يعزز هذا التأثير.
بعد تحديد إطار التطبيق، يقيم تخطيط لكل شاشة داخل منطقة المحتوى ضمن إطار التطبيق.
استخدام منطقة المحتوى بعناية
يتوق المستخدمون إلى تجارب سلسة حيث يمكن الوصول إلى المعلومات بسهولة، والنص سهل القراءة، والجماليات تعزز سهولة الاستخدام بدلاً من إعاقتها. إعطاء الأفضلية للرؤية الأولية للمعلومات الأساسية، والتأكد من سهولة القراءة عبر الأعمدة، ومواءمة عناصر التصميم لتحقيق المظهر الجمالي.
تأكد من ظهور المعلومات الأساسية فورًا عند فتح الشاشة دون الحاجة إلى التمرير. قم بإعطاء الأولوية لعرض المعلومات الأساسية مثل خيارات التنقل والمحتوى المهم والعناصر القابلة للتنفيذ بالقرب من الجزء العلوي من الشاشة. يعد تحقيق التوازن بين عرض العناصر الكافية وتوفير معلومات مفصلة عن كل عنصر تحديًا مستمرًا. على العكس من ذلك، في حين أنه قد يكون من المغري تقديم جميع المعلومات الممكنة في العرض الأولي، فإن الكثير من المعلومات قد يؤدي إلى إرباك المستخدمين وتخفيف أهمية العناصر الأساسية. فكر في استخدام ملخصات أو معاينات موجزة تقدم لمحة عن محتوى أكثر تفصيلاً، مما يشجع المستخدمين على التعمق أكثر. تم تحسين لوحات المعلومات لخدمة هذا الغرض لتصور كميات كبيرة من البيانات.
قم بدمج أعمدة أو أقسام أو مجموعات متعددة لتنظيم المحتوى بشكل منطقي وزيادة المساحة. انتبه جيدًا لعرض العمود، مما يضمن بقاء النص مقروءًا دون إجهاد مفرط. تجنب الأعمدة الضيقة جدًا التي تجبر المستخدمين على التمرير أفقيًا باستمرار، مما يؤدي إلى تعطيل تدفق التفاعل. وعلى العكس من ذلك، يمكن أن تعيق الأعمدة الواسعة جدًا إمكانية القراءة، مما يتطلب من المستخدمين تتبع الخطوط عبر مسافات ممتدة. احرص على تحقيق التوازن الذي يلائم القراءة المريحة مع الاستخدام الفعال للمساحة المتاحة.
قم بتغيير حجم العناصر المرئية ووضعها بشكل مناسب لإنشاء واجهة ممتعة ومتوازنة. قم بمحاذاة التسميات التوضيحية مع العناصر المرئية أو العناوين المقابلة، وحافظ على تباعد ثابت بين العناصر، والتزم بالتدرج الهرمي بناءً على احتياجات المستخدم. قم بقص الزخارف غير الضرورية وخصص وحدات البكسل بحكمة للعناصر الأكثر أهمية. قم بإعطاء الأولوية للمحتوى وعناصر التنقل والتأكيد عليها، لا سيما في التطبيقات أو الصفحات الرئيسية التي تتطلب التنقل بشكل مكثف، وتجنب الزخرفة الزائدة التي تنتقص من سهولة الاستخدام.
يمكن أن تكون الشبكة الأساسية مفيدة لترتيب العناصر بشكل متناسق. يجب أن يكون سلوك خطوط الشبكة المختار متناسقًا عبر منطقة محتوى كل شاشة في التطبيق ويمكن تطبيقه أيضًا على مستوى المكون، مثل البطاقات أو الأجزاء الجانبية. النوع الأكثر شيوعًا لتخطيط خطوط الشبكة المستخدم في تطبيقات الويب هو خطوط شبكة الأعمدة. يوصى بسلوك خطوط الشبكة السائلة (أو الممتدة) لتنفيذ الشاشات المستجيبة.
استخدم التخطيطات وأنماط التجميع المحددة
استخدم الهياكل والترتيبات المعترف بها بشكل شائع لتنظيم المحتوى والعناصر داخل واجهة المستخدم. لقد تم تحسين هذه التخطيطات والأنماط وأثبتت فعاليتها بمرور الوقت، مما يجعلها مألوفة وبديهية للمستخدمين مع تسهيل تنفيذ الأنماط التكيفية أيضًا. بمجرد تحديد السيناريوهات والعناصر الأساسية، قم بتعيين كل منها على مخطط محدد يوفر أفضل تفاعل. تحديد أولويات المحتوى والميزات الهامة لإكمال المهمة. حدد العناصر التي يجب أن تكون مرئية دائمًا ويمكن الوصول إليها على الشاشة والعناصر التي يمكن إخفاؤها أو الوصول إليها من خلال القوائم أو الإجراءات الأخرى.
إن القائمة التالية، على الرغم من أنها ليست شاملة، تصف التخطيطات المنشأة شائعة الاستخدام لتطبيقات الأعمال أو الإنتاجية. يمكن وضع جميع العناصر داخل منطقة المحتوى الرئيسية.
الشاشة المنتقل إليها/الرئيسية
تعمل الشاشة المقصودة أو الشاشة الرئيسية بمثابة نقطة دخول إلى التطبيق، حيث يوفر للمستخدمين نظرة عامة على عروض التطبيق أو ميزاته. إنها تهدف عادةً إلى جذب انتباه الزائرين والتشجيع على اتخاذ إجراء محدد، مثل إكمال مهمة لأول مرة أو استكشاف المزيد من المحتوى. غالبًا ما يحتوي على صور رئيسية وخيارات تنقل نظيفة.
إنه مثالي للترحيب بالمستخدمين، وتوفير الوصول السريع إلى الوظائف الرئيسية، أو خيارات التنقل، أو العبارات التي تحث المستخدم على اتخاذ إجراء، وتحديد أسلوب تجربة التطبيق. قم بإعطاء الأولوية للوضوح والبساطة والتنقل البديهي لتوجيه المستخدمين بشكل فعال.
لوحة المعلومات
إن لوحة المعلومات هي عبارة عن مركز داخل التطبيق يقدم للمستخدمين نظرة عامة شاملة على البيانات أو المعلومات ذات الصلة. غالبًا ما يتكون من عناصر واجهة مستخدم أو وحدات قابلة للتخصيص، مما يسمح للمستخدمين بمراقبة مقاييس محددة أو تنفيذ إجراءات.
تعد لوحات المعلومات مناسبة للتطبيقات التي تحتوي على مجموعات بيانات معقدة أو وظائف متعددة الأوجه، مما يتيح للمستخدمين تتبع التقدم وتحليل الاتجاهات واتخاذ قرارات مستنيرة بلمح البصر. وهي مفيدة بشكل خاص في منصات التحليلات وأدوات إدارة المشاريع وتطبيقات الإدارة المالية.
نموذج
النموذج هو تخطيط منظم يسهل إدخال البيانات من قِبل المستخدمين، ويتكون عادةً من حقول لإدخال أنواع مختلفة من المعلومات مثل النص والأرقام والتواريخ والتحديدات. تعد النماذج ضرورية لجمع إدخالات المستخدم ومعالجة المعاملات وتسهيل التفاعلات داخل التطبيقات.
يتم استخدامها بشكل شائع في تدفقات التسجيل وعمليات الخروج ومهام إدخال البيانات وأي سيناريو يتطلب إدخال المستخدم أو تعليقاته.
عرض الكيان/ملف التعريف
تقدم طريقة عرض الكيان أو ملف التعريف معلومات تفصيلية حول كيان معين، مثل ملف تعريف المستخدم، أو قائمة المنتجات، أو عنصر المحتوى. ويتضمن عادةً نصًا وصفيًا وعناصر الوسائط المتعددة والإجراءات أو التفاعلات ذات الصلة.
إنها مناسبة تمامًا لعرض معلومات تفصيلية حول العناصر الموجودة داخل التطبيق. إنها توفر للمستخدمين رؤى متعمقة، وتسهل اتخاذ القرار، وتدعم المشاركة مع كيانات محددة مثل ملفات تعريف المستخدمين في تطبيقات الشبكات الاجتماعية أو قوائم المنتجات في منصات التجارة الإلكترونية.
صفحة القائمة
تعرض القائمة أو الجدول مجموعة من العناصر أو الكيانات بتنسيق منظم، وغالبًا ما يتم تقديمها في تخطيط خطي أو شبكي. ويتضمن عادةً ملخصات أو معاينات مختصرة لكل عنصر، إلى جانب عناصر التحكم في التنقل للتصفح أو التصفية.
تعد صفحات القائمة فعالة في تقديم مجموعات كبيرة من المحتوى أو البيانات بتنسيق سهل الفهم، مما يتيح للمستخدمين إجراء المسح والبحث والتنقل بكفاءة. إذا تم تمكين الإجراءات على صفوف معينة، فيجب أن تكون العملية واضحة. تُستخدم صفحات القائمة بشكل شائع في أنظمة إدارة المحتوى، وقوائم الدليل، ونتائج البحث، وموجزات الأخبار.
مراجعة مصغرة (شاشة مقسمة)
تقسم المراجعة المصغرة أو الشاشة المقسمة الواجهة إلى قسمين متميزين، مع قائمة معروضة على الجانب الأيسر وعرض العناصر على الجانب الأيمن. وتحتوي القائمة عادةً على مجموعة من العناصر، بينما توفر طريقة عرض العنصر معلومات تفصيلية حول العنصر المحدد في القائمة.
يكون هذا التخطيط فعالاً بشكل خاص في السيناريوهات التي يحتاج فيها المستخدمون إلى استعراض قائمة العناصر بسرعة وعرض معلومات تفصيلية حول كل عنصر في وقت واحد، كما هو الحال عند إجراء عمليات مجمعة. تعد كتالوجات المنتجات وأنظمة إدارة المستندات وعملاء البريد الإلكتروني أو الاتصالات وأدوات إدارة المهام (على سبيل المثال، عارض استعلام Azure Dev Ops) سيناريوهات تناسب هذا النمط عادةً.
المعالج
يرشد المعالج المستخدمين من خلال سلسلة من الخطوات أو المهام المتسلسلة، عادةً بطريقة خطية، لإكمال عملية معقدة أو تحقيق هدف محدد. وغالبًا ما يتضمن مؤشرات التقدم والمطالبات وعمليات التحقق من الصحة. تعتبر المعالجات مفيدة لتبسيط العمليات المعقدة، وتقليل الحمل المعرفي الزائد، وتوجيه المستخدمين خلال المهام أو حالات سير العمل غير المألوفة. يتم استخدامها بشكل شائع في إلحاق عمليات سير العمل وعمليات الإعداد والنماذج متعددة الخطوات والتفاعلات القائمة على المهام مثل تكوين الإعدادات أو المعاملات المعقدة.
تابع تخصيص التخطيط القياسي والبناء عليه ليناسب المتطلبات المحددة. قد تتضمن هذه العملية إضافة عناصر أو إزالتها، وضبط حجم العناصر وموضعها، وتطبيق التصميم ليتوافق مع هوية العلامة التجارية أو إرشادات التصميم المرئي. قم بتجربة التكوينات والأشكال المختلفة للتخطيط القياسي للعثور على الترتيب الأكثر فعالية للمحتوى وتجربة المستخدم الشاملة.
تصميم التخطيطات لجميع الأجهزة
تعد التخطيطات تتويجًا لقواعد محددة وتنظيم متعمد للمحتوى. يعد دمج المحتوى الخاص بك في هياكل مدروسة أمرًا أساسيًا، ولكن جعله يتدفق معًا بتسلسل هرمي واضح عبر الأنظمة الأساسية وأحجام الشاشات يتطلب منطق التوسع. بشكل فردي، يمكن للتصميم المتكيف وسريع الاستجابة أن يعالج هذا التحدي. في بعض الحالات، يكون الجمع بين التصميم المتكيف والسريع الاستجابة هو الاختيار الصحيح.
يستخدم التصميم سريع الاستجابة تخطيطًا واحدًا فقط حيث يكون المحتوى سلسًا ويمكنه التكيف مع حجم التنسيق المتغير. تستخدم تقنية التصميم هذه استعلامات الوسائط لفحص خصائص جهاز معين وعرض المحتوى وفقًا لذلك. يمكّنك التصميم سريع الاستجابة من إنشاء ميزة مرة واحدة وتشغيلها بفعالية عبر جميع أحجام الشاشات.
يتغير التخطيط التكيّفي بالكامل بناءً على التنسيق الذي يتم تقديمه به. يحتوي التصميم التكيفي على أحجام تخطيطات ثابتة متعددة ويقوم بتشغيل المتصفح لتحميل تخطيط معين بناءً على المساحة المتوفرة. تستخدم مواقع الويب التي تم إنشاؤها باستخدام التصميم التكيفي استعلامات الوسائط لاكتشاف نقاط التوقف، على غرار التصميم سريع الاستجابة. كما يستخدمون أيضًا علامات إضافية بناءً على إمكانيات الجهاز. تُعرف هذه العملية باسم "التحسين التدريجي".
إعادة التموضع
تغيير موضع عناصر الصفحة.
حافظ على المحتوى الخاص بك منظمًا وقابلاً للقراءة ومتوازنًا من خلال تحسين التكوين مع زيادة حجم النافذة. على سبيل المثال، يمكن إعادة وضع العناصر المكدسة رأسيًا في منفذ عرض متنقل بشكل أفقي على منافذ عرض أكبر. يتبع هذا التغيير ترتيب القراءة الطبيعي من اليسار إلى اليمين، ويخلق توازنًا في التصميم، ويحافظ على التركيز البصري على العناصر الرئيسية في الصفحة.
تغيير الحجم
ضبط حجم وهوامش عناصر الصفحة.
قم بتغيير حجم عناصر الصفحة لتحسين تجربة المستخدم الغنية من خلال عرض المزيد من المحتوى في الجزء العلوي من النافذة، مما يقلل الحاجة إلى التمرير الرأسي. اضبط هوامش الصفحة لإضافة مساحة بيضاء وتوازن إلى التخطيط، مما يسمح للمحتوى بالتنفس ويعزز المظهر البصري للتصميم. على سبيل المثال، قد يمتد المكون الرئيسي إلى العرض الكامل للنافذة لإظهار المزيد من صورة الخلفية. قد يتم توسيع المحتوى الموجود أسفل الصورة، ولكن استخدم هوامش مختلفة لإضافة تنوع في التخطيط والمساعدة في تحديد التسلسل الهرمي المرئي.
إعادة الانسياب
تحسين تدفق عناصر الصفحة.
اضبط عناصر الصفحة لضمان عرضها بالكامل، مع مراعاة حجم النافذة واتجاهها من خلال إعادة ترتيب المحتوى. على سبيل المثال، يمكن إعادة تدفق عمود واحد من المحتوى في نافذة أصغر إلى نافذة أكبر لعرض عمودين من النص. تسمح هذه التقنية بعرض المزيد من المحتوى "فوق الطي".
إظهار/إخفاء
تحسين المحتوى لحجم النافذة واتجاهها.
إظهار أو إخفاء عناصر الصفحة لتحسين المحتوى لحجم النافذة واتجاهها. تعمل هذه التقنية سريعة الاستجابة على تخصيص كمية المعلومات لتناسب سياق العرض. على سبيل المثال، قد تعرض الفئات التي تظهر على شاشة صغيرة بيانات تعريف محدودة، مثل صورة وعنوان ورابط، بحيث تصبح المعلومات الأخرى مرئية لمساعدة المستخدم على التركيز. على شاشة أكبر، يمكن للفئات عرض بيانات تعريف إضافية مثل الشخصية والتاريخ والوصف القصير، مع الاستمرار في ملاءمتها داخل منفذ العرض.
إعادة الهندسة
قم بتقسيم عناصر الصفحة والمحتوى أو طيها للاحتفاظ بالتركيز على المعلومات والإجراءات الهامة.
يشبه هذا الأسلوب اتباع ممارسة "الكشف التدريجي" في تصميمك ولكن بأحجام واتجاهات مختلفة للنوافذ. على سبيل المثال، يسمح توسيع النافذة بعرض قائمة العناصر بجوار التفاصيل. يتيح هذا الرابط المرئي بين المحتوى للمستخدمين إمكانية تحديد عنصر آخر بسهولة. على شاشة أصغر، يبقى التركيز على عرض المعلومات الأساسية.
إنشاء مصفوفة نقطة توقف
تعمل مصفوفة نقاط التوقف بمثابة تصوير رسومي يوضح السلوكيات سريعة الاستجابة أو التكيفية لتصميم التطبيق عبر أحجام واتجاهات مختلفة للشاشة. يقدم عادةً شبكة أو تخطيطًا منظمًا يوضح بالتفصيل استجابة التصميم عند نقاط توقف مختلفة. يتوافق كل جزء مع عرض شاشة مميز، مما يوفر نظرة ثاقبة لبنية التصميم وتخطيطه ووظيفته. تشمل مصفوفة نقاط التوقف اعتبارات عرض الشاشة، واتجاه منفذ العرض، وعناصر التصميم، وبنية التخطيط، وعرض المحتوى، والتنقل، والوسائط، والمكونات التفاعلية، لتوضيح كيفية استجابة تصميم موقع الويب أو التطبيق عبر أحجام واتجاهات الشاشة المختلفة. لا يساعد هذا الأسلوب في إنهاء تصميم كل شاشة فحسب، بل يجعل التنفيذ أسهل أيضًا عندما يتم تتبع تغييرات خصائص المكونات الرئيسية بشكل واضح والإبلاغ عنها بشكل جيد.
تبسيط Power Platform
يتم تكوين تخطيطات نماذج التطبيقات المستندة إلى نماذج باستخدام Power Apps Studio. يسمح مصمم النماذج للمنشئين بإضافة عناصر إلى بنية الشبكة، مما يسمح لصفحات النماذج بأن تكون سريعة الاستجابة بطبيعتها. المكونات المخصصة المضمنة مثل الصفحات المخصصة ومكونات اللوحة المضمنة ومكونات رموز Power Apps Component Framework تحتاج إلى دمج السلوك سريع الاستجابة في عمليات التنفيذ الخاصة بكل منها. على سبيل المثال، يجب أن تنفذ الصفحات المخصصة سلوكًا سريع الاستجابة بنفس طريقة تطبيق اللوحة النقية حتى تعمل بشكل صحيح.
تتطلب تطبيقات Canvas تكوينًا صريحًا لكل مكون تنفيذ سلوك سريع الاستجابة، مما يسمح بمزيد من التحكم في التجربة. يتم تحديد أحجام الشاشة بناءً على تعريف التطبيق، والذي يمكن الرجوع إليه لتحديد الموضع والسلوك والرؤية والخصائص الأخرى ذات الصلة.