تخيل أنك تقوم بتطوير نظام للبحث عن البيانات. أو تطبيق إدارة الطاقة. أو لوحة القيادة لبائعي الذرة. ربما كنت تقوم بتطوير شيء مماثل الآن. في جميع الحالات المذكورة ، سيتوقع الناس الجداول. ليست تلك المواقع العصرية الملهمة ، ولكن الوحوش ذات مظهر Excel مع مئات الخلايا والتفاعلات المعقدة.
في هذه الحالة ، يواجه المصمم العديد من المشكلات. على سبيل المثال ، مطابقة التصميم مع الأطر الأمامية الحالية أو محاربة البيانات "غير المريحة" التي تدمر التخطيط. سنتغلب على هذه المشكلات من خلال الخطوات التالية: تنظيم الاحتياجات ، وتصبح ذرية ، وتحديد التفاعل.
تمت ترجمة هذه المقالة بدعم من EDISON Software ، وهي شركة تقوم بتطوير التطبيقات والمواقع ، وكذلك التعامل مع واجهات المستخدم .
1. تنظيم الاحتياجات
لذلك ، قابلت الجمهور المستهدف. الآن حان الوقت لتجميع احتياجاتهم ورغباتهم وتحويلها إلى شيء مفيد للتصميم. على سبيل المثال ، قال أحد المستخدمين: "أحتاج إلى معرفة كيف تؤثر بياناتي على الأجزاء الأخرى من التطبيق." أو بعد الاطلاع على كيفية عمل شخص آخر مع البرامج القديمة ، تلاحظ أنه يستخدم اختصارات لوحة المفاتيح ولا يلمس الماوس على الإطلاق. ماذا يعني هذا؟ تتعلق متطلبات المستخدم الأول بالتحقق من صحة الإدخال والمطالبات. ستحتاج إلى إضافة تحذيرات ومعلومات أساسية إلى الجدول. أو تطوير نظام من الألوان الهامة. ذلك يعتمد على مجال الموضوع والنموذج العقلي. عند مشاهدة عمل المستخدم الثاني ، تبدأ في إدراك أنك تحتاج إلى تطوير جميع الإجراءات المتاحة من لوحة المفاتيح. وربما تحتاج إلى التفكير في مفاتيح الاختصار الأكثر تخصصًا من مجرد "Cmd + C" و "Cmd + V".
نتيجة لذلك ، سيكون لديك قائمة باحتياجات ورغبات الناس. الأسئلة المفتوحة مفيدة لمعرفة الاحتياجات الحقيقية وتصفية الأهواء. على سبيل المثال: "ما الذي يساعدك على العمل بشكل أسرع؟ كيف تزيد من كفاءة عملك؟ ما الذي سيتغير إذا لم تتمكن من إجراء X؟ "
حان الوقت الآن لبناء إطار منطقي لجدولك. مخطط ما يحتويه وقادر على فعله. إذا ذهبت مباشرة إلى إنشاء إطار سلكي أو إنشاء نموذج أولي ، فسوف تشرع في المسار الصعب المتمثل في إعادة الرسم التي لا تنتهي. فيما يلي مثال على المكان الذي يمكن أن تبدأ فيه. هذه هي شجرة من الميزات.
أصغر كتلة بناء في أي طاولة هي خلية. يتم دمج الخلايا في صفوف وأعمدة ، والتي قد تحتوي على ميزات محددة مختلفة عن الخلايا الأخرى. وأخيرًا ، ننتقل إلى الإضافات المهمة في الجدول مثل اللوحة العلوية وأوامر لوحة المفاتيح ومعالجة الأخطاء ، إلخ.
تعتبر شجرة الوظائف جيدة التنظيم مفيدة أيضًا لفريق التطوير. يمكنهم تعيين ميزات لإمكانيات الواجهة الأمامية وإيجاد أفضل طريقة لتحويل المشروع إلى رمز. في أحد مشاريعي ، استخدمنا إطار المواد الزاوي. لسوء الحظ ، كانت الجداول الزاوي بسيطة للغاية. لقد وجدنا مكتبة Ag-Grid التي تدعم وظائفنا ولكن لها قيود واحدة. لم تتح لها الفرصة لتوسيع الخط ووضع شيء في الداخل. حددنا هذه المشكلة وعدّلنا التصميم مسبقًا.
حاصل الجمع
- ابدأ في بناء جدول معقد من خلال جمع احتياجات المستخدم وتحديد أولوياتها.
- ارسم مخطط شجرة ينظم جميع الوظائف الضرورية. استخدم هذا كخطة لإنتاج المؤثرات البصرية.
2. إدخال الذرية
لذلك ، يتم تعريف الوظيفة ، وأنت تعرف حدود التطوير. حان الوقت للسخرية من الجدول الخاص بك. في جوهرها ، تتمثل الطريقة الذرية في تطوير مكونات صغيرة لواجهة المستخدم ، ثم تجميع المكونات الأكبر. سوف ننتقل تدريجياً من الأجزاء الأولية ، مثل الخطوط والألوان ، إلى الوحدات الكبيرة مثل العنوان أو العمود. لقد اخترت عمدا أسلوب وحشي صارم للتخطيطات ، حتى نتمكن من التركيز على وظيفة بدلا من المظهر.
الخطوط والألوان والرموز
يمكن بالفعل تعريف هذه الأجزاء في نظام التصميم الخاص بك أو في إطار واجهة المستخدم. إذا كنت تقوم بإنشاء جدول لمنتج موجود ، فتحقق من أن لوحة الألوان والخطوط والرموز تلبي متطلبات الجدول.
الخلايا وملحقاتها
عندما تكون ذرات الطاولة جاهزة ، يمكننا الانتقال إلى الجزيئات - أنواع مختلفة من الخلايا. بادئ ذي بدء ، من المهم التفكير مقدمًا في الحالات الطبيعية والفعلية لكل عنصر. في وقت لاحق ، يضيف المصمم أيضًا الحالات المضغوطة والمعطلة والحالات الأخرى.
في أحد مشاريعي ، كان لدينا ثمانية أنواع من الخلايا بتفاعلها الخاص. أبسط خلايا النص والأرقام. في حالتنا ، تم السماح لملء الخلايا الرقمية بمحتويات غير رقمية ، مثل "N / A" (غير قابل للتطبيق) و "N / C" (بدون تحكم). كانت هذه سمة من سمات مجال النشاط. القوائم المنسدلة ومنتقي التاريخ أكثر تعقيدًا ولديهم أطفال. وأخيرا ، كان لدينا خلايا الجدول ، والتي هي أزرار.
يمكن أن تحتوي الخلايا على ملحقات مثل تلميحات الأدوات ، وتلميحات الإدخال ، ورسائل الخطأ ، والعناصر النائبة ، وما إلى ذلك. عند هذه النقطة ، تكون ثابتة ، ولكن يجب على المطور لاحقًا تحديد المنطق لعرضها.
خطوط ورؤوس
عندما يتم تصميم الخلايا ، يمكنك إنشاء خطوط ومعرفة ما إذا كانت المجموعات المختلفة تعمل بشكل جيد. أدناه عرضت مزيجًا من الخلايا القابلة للقراءة فقط والقابلة للتحرير في صف واحد. بمجرد تطوير جدول مع منطق التحرير المعقدة. تم توفير بعض الخصائص من قبل المستخدمين ، في حين تم احتساب البعض الآخر تلقائيًا أو ملؤها بالقيم الافتراضية.
لاحظ أنه عند التمرير فوق الخلايا القابلة للقراءة فقط والقابلة للتحرير ، يكون المؤشر مختلفًا. والنقر فوقها يؤدي إما إلى اختيار الصف أو الانتقال إلى وضع تحرير الخلية. يمكنك أدناه رؤية أنه يمكن للأشخاص تحديد سطر واحد أو أكثر.
الآن حان الوقت للتفكير في رؤوس الجدول. بناءً على تجربتي ، غالبًا ما يكون من المستحيل التحكم في طول عنوان العمود والتمسك بسطر واحد. حتى مع وجود كاتب جيد في الفريق ، فلن تقطع كل النصوص. تتطلب بعض الجداول أسماء فنية طويلة أو الترجمة. يمكن أن تصبح العبارات التي كانت ذات سطر مفرد باللغة الإنجليزية من سطرين أو ثلاثة أسطر باللغة اليونانية أو الألمانية أو المجرية. لذلك ، أظهرت خيارات مختلفة أدناه.
غالبًا ما يحتاج مستخدمو البرامج المستندة إلى البيانات إلى الفرز والتصفية. هذا يساعدهم في العثور على معلومات قيمة في مجموعات كبيرة من البيانات. تتمثل مهمة الفرز والتصفية في دمج عناصر التحكم في الفرز وحقول الترشيح مع عناصر الرأس الأخرى - الرؤوس والوحدات ، إلخ.
على عكس خلايا الجدول ، عادةً ما تحتوي حقول التصفية على أيقونة "إعادة التعيين" على اليمين حتى يتمكن المستخدمون من تعطيلها بشكل صريح ومشاهدة المحتوى الذي لم تتم تصفيته.
في المثال الخاص بي ، هناك ثلاثة أنواع من كتل المرشحات. يسمح لك مرشح الأبجدية الرقمية بالبحث عن طريق الحروف والأرقام. يتم اعتماد أحرف البدل - عدد غير معروف من الأحرف غير المعروفة. على سبيل المثال ، إذا قمت بإدخال "45 * A1" ، فقد يؤدي ذلك إلى ظهور أسطر ذات قيم مثل "45A1" و "45982A1B" و "45A109B" و "096445-A1".
أحرف البدل هي وظيفة معقدة لأنها تعتمد على عادات الناس. عندما قمت بتطوير الجداول للفنيين ، قمنا بتعيين علامة نجمية (*) لعدد غير معروف من الأحرف غير المعروفة. بالنسبة إلى محللي التأمين ، اخترت رمز SQL التقليدي - النسبة المئوية (٪) - لأنهم معتادون على ذلك. بالنسبة إلى الفلتر المنسدل ، فإنه ينتقل بين عدد معين من خيارات النص أو الأرقام أو النطاقات الرقمية الحصرية بشكل متبادل.
يحتوي منتقي التاريخ على تقويم ويعمل مثل مكافئه للخلية. من الجيد أن يتمكن المستخدمون من إدخال التاريخ يدويًا والاختيار من التقويم. إذا كانوا يعرفون ما يبحثون عنه ، فإن كتابة تاريخ أسهل بكثير من النقر. شيء مهم آخر هو تنسيق أي إدخال ذي معنى تلقائيًا وعدم إزعاج الأشخاص الذين يعانون من أخطاء "التنسيق غير الصحيح". في أحد مشاريعي ، سمحنا بإدخال تواريخ مثل "25 يناير 2017" و "6 12 17" و "4 سبتمبر 2016" ، والتصفية فقط بأشهر أو سنوات دون يوم.
أعمدة
ميزة واحدة مشتركة من الجداول المعقدة هي الأعمدة المثبتة. عادة ، لا يتم التمرير للأعمدة التي تحتوي على معلومات أساسية ، مثل أسماء العناصر أو الحالات.
على الرغم من أنه يجب ضبط أعمدة الجدول بشكل صحيح وفقًا لحجم المحتوى ، يحدث هذا عندما يتم اقتطاع النص. في هذه الحالة ، يساعد عمود يمكن تغيير حجمه. يمكن للمستخدمين سحب حافة العمود ورؤية المحتوى الطويل. قد يحتاجون أيضًا إلى الضغط على عمود غير مهم أو عمود بنص قصير.
هناك طريقة أخرى للتعامل مع سلاسل النص الطويلة وهي إما تمديد العمود إلى أطول محتوى ، أو وضع صفوف متعددة. الطريقة الأولى تعمل بشكل أفضل مع سلاسل نصية مماثلة. يعمل الخيار الثاني بشكل أفضل عندما تكون رؤية كل المحتوى للأشخاص أكثر أهمية من جعل الجدول مضغوط رأسياً.
في أحد مشاريعي ، قمنا بتعيين الحد الأدنى الافتراضي لعرض العمود بحيث لا يتم تغيير حجم الجداول. لقد عطلنا ضغط العمود بعرض معين حسب نوع المحتوى.
اللوحة العلوية
ما الذي يشكل الطاولة؟ الخلايا والأعمدة والصفوف. بالإضافة إلى ذلك ، تحتوي الجداول المعقدة غالبًا على شريط علوي. مثل المكونات الأخرى ، تتكون اللوحة العلوية من عناصر أصغر - شريط العنوان والأزرار. أدناه قمت بتجميع قائمة من الأزرار مع كل مجموعة متنوعة من الشروط التي استخدمناها في أحد المنتجات. كان لدينا أزرار رموز واضحة ، مثل "plus = add or create" ، و "trash bin = delete" ، و "arrow = move". الأزرار غير العالمية (على سبيل المثال ، التعيين والأرشفة والتوازن) تحتاج إلى اسم نصي واضح. علاوة على ذلك ، كانت بعض الأزرار مرفقة بقائمة منسدلة.
الآن يمكننا محاولة الجمع بين العناصر المختلفة ومعرفة ما إذا كان هذا يعمل. وهنا بعض الأمثلة.
بالطبع ، هذه ليست قائمة كاملة من الوظائف والعناصر. إنه يختلف من مشروع إلى آخر وقد يتضمن أشياء أخرى ، على سبيل المثال:
- فرز حسب أعمدة متعددة.
- مجموعة قابلة للتخصيص من الأعمدة (القدرة على تبديلها) ؛
- صفوف قابلة للتوسيع (يمكن أن يحتوي الصف الأصل على صفوف تابعة) ؛
- العوامل المنطقية للتصفية والبحث ("و" ، "أو" ، "أكثر" ، إلخ).
إذا كنت في شك حول أي ميزات للتصميم وأي منها لا ، هنا مبدأ جيد. هذا هو الحلاقة أوكام أو قانون البخل. يجب على المصمم عدم إنشاء حالات جديدة إذا كانت تلك الموجودة تلبي الاحتياجات. يجب أن "تقطع" وظائف المهوس التي قد يحتاجها المستخدمون نظريًا في المستقبل إلى أجل غير مسمى. نفس القصة مع ميزات مثالية لحالة واحدة من كل مائة حالة ، ولكنها غير مجدية في الحالات التسعة والتسعين المتبقية.
الانتهاء من الجدول
عندما تكون جميع الكتل البرمجية الإنشائية جاهزة ، يمكنك تجميع عدة طاولات لأغراض مختلفة. هذه فرصة لاكتشاف التناقضات والقرارات غير المنطقية. في أغلب الأحيان تعاملت مع الأنواع الثلاثة التالية.
الجدول للقراءة فقط . أبسط نوع من الجداول يتم إنشاؤه ، حيث إنه يعرض البيانات كما هي فقط. لا توجد خيارات تصفية أو تحرير. يمكن أن يساعد الفرز الهرمي للصف أو الصفوف في تحليل أجزاء كبيرة من البيانات. يتم استخدام مثل هذا الجدول لعرض البيانات وإبلاغ الأشخاص بشيء ما.
الجدول للبحث. الخلايا غير قابلة للتحرير ، والرأس يحتوي على حقول تصفية وعناصر تحكم في الفرز ، ويمكنك تحديد صفوف. من خلال ممارستي ، تساعد هذه الجداول في العثور على عنصر أو عدة عناصر ومقارنتها وتحديدها من عدد كبير من الأشياء المماثلة. على سبيل المثال ، قم بتصفية خمسة من الأدوات الستة آلاف غير المرغوب فيها من الكتالوج ، ثم حدد أداة واحدة تحتاجها.
الجدول للتحرير . كل الخلايا أو بعضها قابلة للتحرير ، وعادة لا يوجد تصفية ، حيث يمكن تغيير ترتيب الصفوف. عادة ما تكون هذه الجداول مصحوبة بشريط أدوات وتتيح لك تنفيذ إجراءات مع الصفوف.
حاصل الجمع
- ابدأ بأصغر المكونات. ثم انتقل تدريجياً إلى الشركات الأكبر حجماً ثم قم بإجراء نموذج بالحجم الطبيعي لكل شيء.
- فكر مقدمًا في كل الشروط الممكنة لكل مكون.
- استخدم مبدأ الحلاقة Occam للحفاظ على الحد الأدنى لعدد العناصر ، ولكن يشمل جميع حالات الاستخدام.
3. تحديد التفاعل والبيئة
الكتل البرمجية الإنشائية ليست كافية لإنشاء عنصر واجهة معقد كجدول. يجب على المصمم التفكير في "قواعد اللعبة" وتطوير المبادئ والاتفاقيات المنطقية وراء الجزء البصري. سوف أصف بعض الأشياء النموذجية التي يجب أن تفكر فيها.
البيانات الرقمية
كم عدد المنازل العشرية التي يجب أن يحتويها الرقم في الجدول الخاص بك؟ واحد ، اثنان ، خمسة؟ ما هو المستوى الأمثل من الدقة؟ أتخذ قرارًا بناءً على الدقة التي يحتاجها المستخدمون لاتخاذ القرار الصحيح. في بعض المهن ، تعد التقلبات بين 10932.01 و 10932.23 كبيرة ، في حين أن الأرقام 14 و 15 ليست مهمة في مناطق أخرى. هذا مثال على قواعد البيانات العددية التي استخدمها فريقي في منتج هندسي معقد.
- طول : 2 المنازل العشرية (57.53 م ، 3.16 كم) ، وتستخدم المسافات كآلاف الفواصل (403 456.56 م).
- الوزن : 2 المنازل العشرية (225.08 كجم ، 108.75 طن) ، يتم استخدام المسافات كآلاف فاصل (12 032.17 كجم).
- المال : 2 المنازل العشرية (9.45 دولار) ، يتم استخدام الفواصل كـ الآلاف فواصل (16،408،989.00 دولار).
- القطر : 3 منازل عشرية (10.375 سم) ، لا حاجة إلى فواصل.
- خط الطول وخط الطول : 8 منازل عشرية (26.4321121) ، يستخدم الطرح لخط الطول الغربي وخط الطول الجنوبي (-78.05640132).
- بشكل افتراضي ، للوحدات غير المدرجة أعلاه: منزلان عشريان (32.05 غ / م³ ، 86.13 درجة مئوية).
شيء آخر نظرنا إليه هو الفرق بين البيانات "الحقيقية" المخزنة على الخوادم والبيانات "التقريبية" في الواجهة. استخدم النظام أرقامًا دقيقة للغاية مع عشرات المنازل العشرية في جميع العمليات الحسابية ، لكن الناس لم يحتاجوا إلى رؤية ذلك طوال الوقت. لذلك ، قررنا إظهار عدد المنازل العشرية الموضحة أعلاه وتعيين العدد الإجمالي فقط عندما تكون خلية الجدول نشطة. على سبيل المثال ، يمكن للمهندس إدخال "134432.97662301" ، وبعد الضغط على "إدخال" ، سيتم عرض "134 432.98" في الجدول. بالنقر مرة أخرى ، سوف يرى المهندس مرة أخرى "134432.97662301".
تأكيد الإدخال
بخلاف الفقرة السابقة على الأرقام ، يعد التدقيق مهمًا فقط للجداول القابلة للتحرير. هذا له جانبان. أولاً ، القواعد التي تؤهل البيانات المدخلة على أنها صالحة أو غير صالحة. ثانياً ، إما الرسائل التي تساعد في تصحيح البيانات غير الصالحة ، أو الآليات التي تعمل على إصلاحها تلقائيًا. عادة ما تكون قواعد التحقق من الصحة معقدة للغاية بحيث لا يتم الاستهزاء بها أو النموذج الأولي. وبالتالي ، يمكن للمصممين توثيقهم في شكل نص أو بتنسيق مخطط كتلة.
هذا مثال على قوالب الرسائل التي استخدمتها ذات مرة. النص الموجود بين أقواس زاوية ديناميكي ويأتي من محرك حساب أو قاعدة بيانات.
- يجب أن يكون هناك المزيد من
measurement unit number . Optional explanation . - يجب أن يكون أقل من
measurement unit number . Optional explanation . - يجب أن يكون بين
value 1 value 2 measurement unit . Optional explanation . - يجب أن تكون القيمة الدنيا أقل من القيمة القصوى.
- يجب أن تكون القيمة القصوى أكبر من الحد الأدنى للقيمة.
- يجب أن لا تكون القيم الدنيا والقصوى متساوية.
الأوامر
عادة ما تحتاج جداول شريط الأدوات القابلة للتحرير إلى مجموعة من القواعد عند تمكين أزرار شريط الأدوات وعند تعطيلها. قد تعتمد هذه الشروط على ما إذا كان الصف محددًا ، وعدد الصفوف المحددة ، وموضع أو محتويات الصف أو الصفوف المحددة ، والشروط الأخرى. فيما يلي إحدى الطرق العديدة لتوثيق مثل هذه القواعد المنطقية.
لذلك ، لدينا جدول مع بعض المواد الكيميائية. يحتوي على أزرار مثل "إضافة سطر" ، "تحريك لأعلى" ، "تحريك لأسفل" ، "حذف" ، "إعادة حساب" و "إعدادات".
وهنا وصف لحالات الزر. اتضح أن توفرها يعتمد على شرط واحد أو أكثر.
والخطوة التالية هي تحديد نتيجة كل فريق. على سبيل المثال ، ماذا يحدث عندما أقوم باختيار سطرين ليسا بجوار بعضهما البعض ثم انقر فوق تحريك لأعلى؟ أو ما هي نتيجة النقر فوق "إعادة الحساب"؟ كل هذه الأسئلة تحتاج إلى إجابة ، أو على الأقل يتم التفكير فيها مقدمًا.
حاوية والقدرة على التكيف
كيف سيتم وضع الجدول في الواجهة؟ على سبيل المثال ، هل ستشغل مساحة في حاوية موجودة أم ستكون وحدة منفصلة؟ تعتمد إجابات هذه الأسئلة تمامًا على المنتج ، ومن الأفضل توقع المشكلات المحتملة وتحديد المبادئ بعناية.
عندما أقوم بتطوير تطبيقات الويب ، أفكر عادةً في ثلاثة أنواع من الحاويات للجداول. الحالة الأكثر شيوعًا هي عندما تكون طاولة كبيرة في وسط الشاشة وتحتل المساحة بأكملها تقريبًا. قد لا يكون لهذا الجدول عنوان خاص به وقد يكون له اسم صفحة. يمكن أن تصبح الجداول الصغيرة والمتوسطة وحدات من شريط الأدوات ، وكذلك محتويات أخرى ، مثل الرسوم البيانية والمخططات والرسوم البيانية. في هذه الحالة ، تعمل اللوحة العلوية من الجدول كرأس وحدة نمطية. وأخيرًا ، في تطبيقات المؤسسات الكبيرة ، غالبًا ما توجد الجداول في مربعات الحوار المنبثقة. يجب أن تكون هناك توصيات حكيمة حتى لا تنقطع مربعات الحوار بسبب وجود الكثير من المحتوى.
الجانب الآخر من وضع جدول في بيئة واجهة المستخدم هو المساحة المتاحة على الشاشة. تم تصميم معظم تطبيقات المؤسسات بشكل أساسي للاستخدام على أجهزة كمبيوتر سطح المكتب. يقتصر قابلية التكيف على الطاولة على التمدد والضغط البسيط. كقاعدة عامة ، تشغل الجداول التي تحتوي على عدد كبير من الصفوف والأعمدة 100٪ من العرض المتاح. نتيجة لذلك ، يتم توزيع الخلايا بالتساوي على الشاشة ، ويمكن عرض معظم النصوص دون اقتصاص أو التفاف. من ناحية أخرى ، تظهر فجوات هائلة بين الأعمدة ، مما يتناقض مع قانون القرب. هذا هو السبب في استخدام بعض التطبيقات للخطوط أو الحمر الوحشية باللونين الأبيض والرمادي لتسهيل قراءة المعلومات.
أفضل طريقة هي تحديد العرض العقلاني الافتراضي والسماح بتغيير الحجم اليدوي إذا لزم الأمر. لقراءة جدول ، من الأفضل أن يكون لديك مساحة خالية على اليمين من المسافات بين الأعمدة. ولكن إذا كان الجدول يحتوي على العديد من الصفوف والأعمدة ، فلا مفر من التمرير الأفقي والرأسي.
الجوهر الرئيسي للجدول المعقد هو حجمه الكبير ، والذي يعطي فكرة عن البيانات من وجهة نظر عين الطائر. لسوء الحظ ، لا أستطيع تذكر طريقة جيدة حقًا لاستخدام طاولات كبيرة على شاشات الهاتف الذكي. تفقد جداول بيانات Excel و Google قدرتها على الشاشات الصغيرة ، ولكن هناك طرق فعالة للتعامل مع جداول البيانات الصغيرة. على سبيل المثال ، قم بتحويلها إلى قائمة البطاقات.
الإتاحة (الوصول)
حتى طاولة ناعمة وجميلة بشكل استثنائي يمكن أن يكون كابوسا للمستخدمين. لذلك ، من المهم اتباع مبادئ إمكانية الوصول. يحتوي دليل
إمكانية الوصول إلى محتوى الويب (
WCAG 2.0 ) على فصل في الجداول. معظم المواد تدور حول البرمجة المناسبة. ومع ذلك ، فإن المصمم لديه أيضا شيء للتفكير. فيما يلي اعتبارات التصميم الأساسية من حيث إمكانية الوصول.
إعطاء عنوان إلى الجدول وإعطاء ملخص قصير. يجب أن يكون المستخدم ضعاف البصر قادراً على الحصول على فكرة عن الجدول دون معالجة صوتية لجميع خلاياه.
مشاهدة حجم الخط. على الرغم من عدم وجود حد أدنى رسمي للحجم على الويب ، إلا أن 16 بكسل (12 نقطة) تعتبر الأمثل. بالإضافة إلى ذلك ، يجب أن يكون المستخدم قادراً على زيادته إلى 200٪ دون كسر التصميم بأكمله.
تحقق الألوان للأشخاص الذين يعانون من عمى الألوان. يجب أن يحتوي النص وعناصر التحكم على تباين كافٍ مع الخلفية. نسبة اللون 3: 1 ضرورية للغاية (كلما كان ذلك أفضل). واللون لا ينبغي أن يكون الطريقة الوحيدة لتسمية الأشياء. على سبيل المثال ، لا ينبغي أن تعتمد رسائل الخطأ على النص الأحمر فقط ؛ فستوفر أيقونة التحذير تلميحًا إضافيًا للمكفوفين اللوني.
تجنب الضوابط الصغيرة والغموض. تعتبر المكونات التي تستجيب للحنفيات جيدة إذا كان حجمها لا يقل عن 40 × 40 بكسل. يجب أن تكون الأزرار الممثلة بالرموز محددة أو تحتوي على مطالبات ونص بديل. يجب على المصممين عدم إساءة استخدام الرموز ، لأن المستخدمين قد يسيئون فهم الاستعارات المعقدة.
يمكنك استخدام أدوات الوصول عبر الإنترنت مثل
Wave . إنه لا يجد المشكلات وفرص الوصول فحسب ، بل يبرزها مباشرة على الصفحة ويشرح كيفية إصلاحها.
حاصل الجمع
- توحيد وتنسيق المحتوى هو أيضا وظيفة مصمم.
- لا تفكر فقط في "الأشياء" ، وعناصر الواجهة ، وفكر في حالات الاستخدام والقواعد والأنماط الشائعة.
- عندما تكون جميع عناصر الجدول متسقة ومتوافقة ، فقد حان الوقت للتفكير في كيفية تطابق الجداول مع بقية الواجهة.
الخاتمة ومواد القراءة الإضافية
لقد مررنا بعملية إنشاء جدول معقد. تتطلب المشروعات المختلفة مناهج مختلفة ، ولكن هناك مبدأ عالمي واحد. يجب أن يجعل المصمم جميع العناصر تعمل معًا في أي مجموعة. لذلك ، من الجيد أن نبدأ أولاً بجمع الأشياء الضرورية وصنع كتل صغيرة. وبالطبع ، اختبار مع المستخدمين بمجرد الحصول على شيء قابل للنقر وواقعية.
هنا يمكنك قراءة المزيد حول تصميم الجدول.
منشورات أكثر إثارة للاهتمام
اقرأ أيضا بلوق
شركة إديسون:
20 مكتبة لل
مذهلة تطبيق دائرة الرقابة الداخلية