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

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

نظام التصميم هو دليل شامل لتصميم المشروع ،و تعتبر مكتبة مكونات واجهة المستخدم العنصر الأساسي له بالاضافة لمجموعة من السياسات و المبادئ والقيود وأفضل الممارسات .

يتطلب بناء نظام التصميم استخدام التالي:

سياسات التصميم و تجربةالمستخدم>سياسات و معايير هوية وزارة العدل الرقمية>مكونات تصميم واجهة المستخدم >

مستويات الالتزام بنظام التصميم

للفرق التقنية الخيار إما :

  • استخدام نظام التصميم الافتراضي
  • بناء نظام تصميم خاص بها بناء على السياسات الموضحة أدناه و بالرجوع لسياسات الهوية الرقمية


مكونات تصميم واجهة المستخدم UI Component

  1. مكونات تصميم النموذج
  2. الازرار
  3. الكروت
  4. النماذج المنبثقة
  5. ترقيم الصفحات
  6. شريط التقدم
  7. قفل زرار التبديل
  8. التنقل التفصيلي

1. مكونات النموذج

حقل إدخال النص

يستخدم لإدخال المعلومات من المستخدم بشكل نصي

يجب أن يتناسب حجم خانة الإدخال مع حجم البيانات المدخلة

استخدام الكتابة بخط وزارة العدل المعتم

استخدام لون من لوحة الألوان الثانوية للتلميحات والتنبيه في إطار حقل إدخال النص

يستخدم الحقل إما بشكل:

  • عادي
  • بشكل يختبر صحة المدخل وينبه المستخدم عن صحة أو خطأ المدخل

لتوضيح المعلومة التي يطلب من المستخدم إدخالها فإنه يمكن:

  • إضافة نص خارجي بجانب الحقل
  • إضافة نص داخل الحقل
  • إضافة التلميحات الجانبية

كلمة السر

يستخدم حقل كلمة السر إما بشكل:

  • عادي
  • بشكل يختبر صحة المدخل وينبه المستخدم عن صحة أو خطأ المدخل
  • ترميز البيانات المدخلة بالحقل ومن الممكن ترك الخيار بعرضها بدون ترميز للمستخدم

لتوضيح المعلومة التي يطلب من المستخدم إدخالها فإنه يمكن:

  • إضافة نص خارجي بجانب الحقل لتوضيح
  • إضافة نص داخل الحقل
  • إضافة التلميحات الجانبية

استخدام الكتابة بخط وزارة العدل المعتمد

استخدام لون من لوحة الألوان الثانوية للتلميحات والتنبيه في إطار حقل المدخل


القوائم المنسدلة

تستخدم القوائم المنسدلة للاختيار بين أكثر من خيار في النموذج

يجب أن يكون هناك علامة نصية أو عنوان مع القائمة ليوضح الغرض منها

يجب مراعاة المسافة بين العلامة النصية والقائمة

استخدام الكتابة بخط وزارة العدل

استخدام ألوان الخلفية من لوحة الألوان الأساسية

يجب مراعاة تباين ووضوح النص على الخلفية الملونة

 يجب تنبيه المستخدم عند خطأه في اختيار من القائمة المنسدلة باستخدام لون من لوحة الألوان الثانوية

أنواع القوائم المنسدلة

  • الاختيار البحثي
  • الاختيار من عدة خيارات
  • الاختيار البحثي في عدة خيارات

لتوضيح المعلومة التي يطلب من المستخدم اختيارها فإنه يمكن:

  • إضافة نص خارجي بجانب الحقل
  • إضافة نص داخل الحقل
  • إضافة التلميحات الجانبية

تحميل الملفات

تساعد المستخدم على تحميل الملفات المطلوب إرفاقها مع تعبئة النموذج

إضافة علامة نصية مع عنصر تحميل الملف

استخدام الكتابة بخط وزارة العدل

يجب مراعاة المسافة بين العلامة النصية وعنصر تحميل الملف

لها عدة أنواع:

  • تحميل ملف واحد فقط
  • تحميل عدة ملفات (السحب والإدراج)
  • مسح الملفات

تظهر حالة الرفع بثلاثة مراحل:

  • ما قبل اختيار الملف المرغوب برفعه
  • ما بعد رفع الملف
  • التنبيه بحالة وجود خطأ بالرفع باستخدام لوحة الألوان الثانوية

خانة الاختيار

تستخدم خانة الاختيار عندما يريد المستخدم اختيار خيارواحد أو أكثر

يجب إضافة علامة نصية مع خانة الاختيار

مراعاة المسافة بين العلامة النصية وعنصر خانة الاختيار

استخدام الكتابة بخط وزارة العدل المعتمد

استخدام لوحة الألوان الأساسية

وله ثلاث حالات:

  • الخيار الافتراضي
  • الخيار الذي يقف عليه المؤشر
  • تم الاختيار

زر الاختيار

يستخدم زر الاختيار عندما يريد المستخدم اختيار خيار واحد فقط

يجب إضافة تسمية لزر الراديو

مراعاة المسافة بين العلامة النصية والعنصر زر الراديو

استخدام الكتابة بخط وزارة العدل المعتمد

وله ثلاث حالات:

  • الخيار الافتراضي
  • الخيار الذي يقف عليه المؤشر
  • تم الاختيار

ادخال التاريخ

يستخدم هذا العنصر لإدخال التاريخ

يكون بإمكان المستخدم اختيار التاريخ من القائمة أو إدخاله يدوياً بنفسه

استخدام مدخل التاريخ الهجري العربي

استخدام الألوان من لوحة الألوان


2. الأزرار

  • تساعد الأزرار المستخدم على تنفيذ الإجراء
  • نص الزر يكون بمحاذاة الوسط عمودياً
  • مراعاة المسافة البيضاء من كلا الجانبين
  • مراعاة المسافة البيضاء بين الزر والنص
  • مراعاة ارتفاع الأزرار
  • استخدام الكتابة بالخط المعتمد من وزارة العدل
  • استخدام لوحة الألوان الأساسية

أن هناك ثلاثة مستويات من الأزرار:

1. الأزرار الأساسية

وهي الأزرار المستخدمة للإجراءات المهمة التي تنقل المستخدم إلى الأمام.

2. الأزرار الثانوية

وهي الأزرار التي تستخدم للإجراءات التكميلية، وتستخدم بشكل أقل من الأزرار الأساسية.

3. الأزرار الثالثة  (النصية)

وهي الأزرار التي تستخدم للإجراءات القليلة الأهمية.


3. الكروت

  • تستخدم الكروت لتجميع المعلومات التي تضم بيانات من نوع (نص ،صور ، فيديو)
  • تعرض الكروت ملخص بالإضافة لوجود رابط ينقل لتفاصيل إضافية
  • مراعاة المساحة الفارغة من جميع الجهات
  • مراعاة المساحة الفارغة بين النص والصورة
  • استخدام الكتابة بخط وزارة العدل المعتمد
  • مراعاة حجم الخط لضمان الوضوح
  • مراعاة اتساق لون النص مع لون الخلفية

تستخدم الكروت بناء على الغرض من استخدامها:

  • افتراضية (أبعاد مفترضة)
  • واسعة(عرض المحتوى بشكل افقي)
  • صغيرة (عرض معلومات قليلة عن تصنيف رئيسي)

4. النماذج المنبثقة

  • تستخدم النماذج المنبثقة في تصاميم الواجهات بشكل شائع في نماذج الرسائل الإخبارية للاشتراك بها والتنبيهات. والتعامل مع نماذج التسجيل وتسجيل الدخول
  • استخدام الكتابة بخط وزارة العدل المعتمد
  • مراعاة حجم الخط عند استخدام النص
  • الألوان المستخدمة من لوحة الألوان الأساسية
  • مراعاة التباين عند وضع النص على خلفية ملونة

5. ترقيم الصفحات

  • يستخدم للتنقل بين المحتوى المقسم على صفحات
  • يجب استخدام الألوان من لوحة الألوان الأساسية
  • مراعاة حجم ووضوح الأرقام
  • مراعاة وضوح لون الأرقام على الخلفية
  • وضع الترقيم في المكان المناسب بالصفحة

6. شريط التقدم (المراحل)

  • يستخدم شريط التقدم لتوضيح حالة التقدم في مراحل عملية معينة
  • يجب استخدام الألوان من لوحة الألوان الأساسية للإجراء الأساسي، ولوحة الألوان الثانوية لتمييز الإجراء.

أنواع شريط التقدم الخطي (المراحل):

  • عمودياً
  • أفقياً

7. قفل التبديل

  • يسمح زر التبديل للمستخدم بالتبديل من حالة إلى حالة أخرى
  • استخدم الألوان من لوحة الألوان الأساسية للخلفية
  • أن يكون هناك نص مع الزر لتوضيح الغرض منه
  • استخدام الكتابة بخط وزارة العدل المعتمد
  • يجب مراعاة حجم زر التبديل والنص
  • يمكن استخدام التلميحات بشكل مختصر وسهل لتظهر للمستخدم عند تغيير حالة القفل لتوضح له ما سوف يحدث نتيجة التبديل
  • استخدام لوحة الألوان الثانوية للتلميحات
  • عند استخدام شكل لزر التبديل يجب تعميم استخدامه على جميع التصميم

حالات زر التبديل:

  • مضغوط
  • غير مضغوط

حالة الزر:

  • مفعل
  • معطل

تحديد موقع الصفحة الحالية ومساعدة المستخدمين على فهم مستويات متعددة من الموقع والانتقال إليه

استخدام الكتابة بخط وزارة العدل المعتمد

استخدام لون النص من لوحة الألوان الأساسية