نماذج الجوال: كيفية استبدال القوائم المنسدلة. لماذا تعد محاذاة رؤوس الحقول إلى اليسار أمرًا سيئًا للأجهزة المحمولة
مصمم UX من IBM Zoltan Collin.
إلى الإشارات المرجعية
زولتان كولين
تبدو النماذج المنسدلة كخيار تصميم واضح: فهي سهلة الإنشاء ورخيصة الثمن، ولا تشغل مساحة كبيرة، وتؤكد المعلومات المدخلة تلقائيًا، وهي مدعومة عبر جميع المتصفحات والأنظمة الأساسية، والمستخدمون مستخدمون بالفعل لهم.
يستخدم المصممون في أغلب الأحيان القوائم المنسدلة بشكل غير لائق، ولكن في رأي مدير منتج جوجل Luke Wroblewski، يجب استخدام هذا النمط فقط كملاذ أخير.
دعونا نلقي نظرة على بعض القيود:
- تكون خيارات القائمة المنسدلة غير مرئية حتى ينقر المستخدم على النموذج أو يضغط عليه. بالإضافة إلى ذلك، للوهلة الأولى، من المستحيل التنبؤ بعدد الخطوط التي ستكون في القائمة - اثنان أو خمسون.
- يعد تحديد خيار من القائمة المنسدلة عملية متعددة الخطوات، خاصة في أجهزة محمولةآه: يحتاج المستخدم أولاً إلى لمس النموذج وفتح الخيارات، ثم التمرير لأسفل والعثور على الخيار الذي يحتاجه، ثم تحديده وإغلاق القائمة.
- القوائم المنسدلة تجعل المصممين كسالى لأنه من السهل جدًا إضافة جميع الخيارات الممكنة إلى قائمة واحدة دون أي تحديد للأولويات. ولهذا السبب، فإن القائمة المنسدلة تشبه إلى حد كبير قالبًا آخر - قائمة "الهامبرغر".
- يعد التمرير عبر القوائم الطويلة مثل اختيار البلد بمثابة كابوس. خاصة على الأجهزة المحمولة، حيث لا يتوفر عادةً البحث باستخدام لوحة المفاتيح.
- في بعض الأجهزة، يكون حقل عرض الخيارات صغيرًا جدًا، لذا قد يكون التمرير السريع بمثابة كابوس.
قد يبدو عدد خيارات القائمة المرئية على نظام التشغيل iOS صغيرًا للغاية
والخبر السار هو أن هناك عدد كبير منعناصر بديلة لإدخال البيانات، والتي ستعمل في كثير من الحالات بشكل أفضل من القوائم المنسدلة.
تقدير عدد الخيارات
يجب ألا تستخدم القوائم المنسدلة لاتخاذ القرارات التي تحتاج فيها إلى اختيار أحد الخيارين. جرّب وضع مربع اختيار أو زر اختيار بدلاً من ذلك.
بالنسبة لعدد صغير من الخيارات المتبادلة، يكون النموذج على شكل أزرار اختيار أو أزرار تحكم مجزأة مناسبًا. سيرى المستخدم على الفور جميع الخيارات المتاحة، ولن يضطر إلى توسيع القائمة.
مثال على استخدام أزرار التحكم المجزأة
يعتمد عدد الخيارات المرئية على عرض الشاشة وطول النص. ومع ذلك، يجب ألا تستخدم أكثر من خمسة خيارات
استخدم نموذج إدخال يحتوي على قائمة منسدلة تمت تصفيتها لعدد كبير من العناصر بالضبط خيارات معينةعندما يعرف المستخدم بالضبط ما يحتاج إلى العثور عليه.
بدلاً من التمرير خلال القائمة بأكملها، يمكن للمستخدمين إدخال الأحرف الأولى وتحديد الخيارات التي تمت تصفيتها
بالنسبة للقوائم الكبيرة والمتنوعة، من الأفضل استخدام بيانات المستخدم الموجودة للتأكد من تضمين خيارات الإجابات الشائعة في القائمة. في هذه الحالة، سيتمكن 90% من المستخدمين من تحديد الخيار المطلوب على الفور، وسيقوم الـ 10% المتبقية بالنقر على خيار “أخرى”، وهو ما سيتم توضيحه في السؤال التالي.
وعلى الرغم من أن "أخرى" ليست الحل الأكثر أناقة، إلا أن تحديد الأولويات يمكن أن يحسن تجربة المستخدم لمعظم المستخدمين.
قم بتقييم نموذج الإدخال المفضل لديك
إحدى فوائد القائمة المنسدلة هي أن المستخدمين لا يضطرون إلى الكتابة كثيرًا. ومع ذلك، إذا كنت تحتاج فقط إلى الكتابة قليلاً وتم طلب البيانات في كثير من الأحيان (على سبيل المثال، المعلومات الشخصية)، فمن الملائم إدخالها بدلاً من تحديدها من القائمة.
أسهل طريقة لإدخال سنة ميلادك على الأجهزة المحمولة هي باستخدام المفاتيح العددية، وليست قائمة منسدلة
بشكل عام، لوحة المفاتيح الرقمية هي الأكثر طريقة فعالةأدخل قيمة رقمية.
حتى لو تم فرز قيم القائمة بالترتيب، فقد يكون من الأسهل على المستخدمين كتابتها يدويًا بدلاً من التمرير خلالها.
إذا كان من المهم بالنسبة لك التأكد من البيانات التي يدخلها الشخص، فاستخدم نموذج إدخال مع قائمة منسدلة تمت تصفيتها.
على سبيل المثال، عندما يحتاج المستخدم إلى تحديد حالة، قم بتصفية القائمة الخيارات المتاحةربما حرف واحد فقط
وهذا مهم بشكل خاص إذا لم يكن ترتيب فرز عناصر القائمة واضحًا تمامًا.
على سبيل المثال، لا يفهم المستخدمون المبدأ الذي يتم من خلاله فرز العملات. قم بذلك حتى يتمكنوا من البحث حسب الاسم والاختصار
وينطبق الشيء نفسه على قائمة البلدان.
بالنسبة للأعداد الصحيحة - مثل عدد الركاب أو العناصر الموجودة في عربة التسوق - فمن الأفضل استخدام أداة السائر. سيسمح للمستخدمين بزيادة القيمة أو تقليلها بنقرة واحدة.
ل أرقام كسريةأو المتغيرات الموجودة على مقياس، فمن الأفضل استخدام شريط التمرير.
في هذه المقالة، سنلقي نظرة على بعض تحسينات النموذج الجديدة في HTML5 ونحلل كيفية مساعدتها في التحسين واجهة المستخدمعلى الجوال. وعلى وجه الخصوص، سنرى كيف يمكن توسيع النماذج باستخدام أنواع الإدخال الإضافية التي يوفرها HTML5، وسنعرض ما يمكنك توقعه من متصفحات الأجهزة المحمولة المختلفة.
أنواع المدخلات HTML5
يحتوي HTML5 على مجموعة من أنواع الإدخال الجديدة للنماذج. تسمح هذه الأنواع من المدخلات بمزيد من التحكم والتحقق من بيانات الإدخال. بعضها مفيد بشكل خاص ل مستخدمي الهاتف المحمولالذين غالبا ما يواجهون صعوبات عمل HTMLمدخل. القائمة الكاملةأنواع بيانات الإدخال مذكورة أدناه:
- اللون - اختيار اللون
- التاريخ - اختيار التاريخ
- التاريخ والوقت - حدد التاريخ والوقت
- البريد الإلكتروني - التحقق من صحة قناع البريد الإلكتروني
- الرقم - أدخل الرقم
- النطاق - شريط تمرير النطاق
- بحث - حقل البحث
- الهاتف - التحقق من صحة قناع الهاتف
- الوقت - التوقيت
- عنوان URL - التحقق من صحة عنوان URL
وبطبيعة الحال، هذه القائمة ليست كاملة. وهذا لا يشمل الأنواع التي يقبلها المعيار، ولكن جوهرها ليس واضحا بعد. سننظر في الأنواع المذكورة أعلاه الأكثر شيوعًا وذات الصلة في هذه المقالة مع الأمثلة.
1. نوع الإدخاللون
إذا كان نوع الإدخال هذا مدعومًا، فسيقوم متصفح المستخدم باستدعاء منتقي الألوان المدمج جهاز العميل. سيتم عرض اللون المحدد في المقابلة القيمة السداسية العشرية RGB.
< input type = "color" / > |
مثال على العمل:
يعتمد نمط النافذة المنبثقة على متصفحك. انقر فوق الزر لترى كيف يعمل.
اختر اللون الخاص بك:
للأسف، يدعم من هذا النوع متصفحات الجوال يترك الكثير مما هو مرغوب فيه. من بين جميع الخرائط الموجودة، لا يمكن العثور على التعيين الصحيح إلا في أوبرا موبايلو كروم اندرويد. بالنسبة لجميع المتصفحات الأخرى، سيتم عرض حقل نصي فارغ. وهذا يستحق أن نأخذ في الاعتبار. وبدلاً من ذلك، يمكنك رسم اللوحة في JS أو استخدام المكونات الإضافية.
2. تاريخ نوع الإدخال
إذا كان المتصفح مدعومًا، فإنه يوفر كتلة مناسبة لتحديد التاريخ.
< input type = "date" / > |
مثال على العمل:
اختيار التاريخ:
لاحظ أن نوع إدخال التاريخ، بالإضافة إلى متغيرات النوع التاريخ والوقت والوقت المحلي، يقدم سمات مفيدة، وقيم مثل min وmax، والتي يمكنها تعيين الحدود والتحقق من صحة إدخال المستخدم. وسوف نوضح هذا أدناه في النص.
نوع تاريخ إدخال HTML مدعوم من قبل جميع المتصفحات تقريبًا. الاستثناءات هي Opera Mini ومتصفح Android الافتراضي.
3. نوع الإدخال التاريخ والوقت والوقت المحلي
يتيح نوع الإدخال هذا للمستخدم تحديد التاريخ والوقت بتنسيق مناسب. إذا كان مدعومًا، فسيتم عرضه كعنصر واجهة مستخدم للتاريخ/الوقت الأصلي للجهاز. الفرق بين أنواع الإدخال هذه هو أن الأول مرتبط بالتوقيت العالمي، والثاني لا يحتوي على أي معلومات عن المنطقة الزمنية.
< input type = "datetime-local" / > |
مثال على العمل:
اختر التاريخ والوقت:
غير معتمدفي آي موبايل وأوبرا ميني. في المتصفحات الشائعة الأخرى (الجوال)، يعمل النوع بشكل صحيح إلى حد ما، ولكن حالات الأخطاء ومواطن الخلل ليست غير شائعة. ضع ذلك في الاعتبار أيضًا، ولا تنسَ احتياطيات JavaScript.
4. نوع الإدخال البريد الإلكتروني
هذا النوع لا يتطلب أي تمثيل. يستخدمه العديد من الأشخاص بالفعل وهو مدعوم من قبل جميع المتصفحات تقريبًا.
< input type = "email" / > |
مثال على العمل:
أدخل عنوان بريدك الالكتروني:
قبل الإرسال، يتحقق المتصفح من صحة الحقل المملوء ويبلغ المستخدم إذا كان تنسيق الإدخال غير صالح. يعتمد الحساب على التعبير التالي (النص)@(المجال)
5. رقم نوع الإدخال والهاتف
وهذا نوع آخر لا يتطلب الكثير من النقاش. ومع ذلك، في بيئة متنقلة للغاية اداة مفيدة. استخدمه في الحالات التي يُعرض فيها على المستخدم مجموعة من الأرقام فقط. في هذه الحالة، سيتم تقديمه واجهة سهلة الاستخدامالمفاتيح العددية.
مثال على العمل:
اختار القيمة:
يتراوح النطاق الافتراضي في معظم المتصفحات بين 0 و100. أي أن الموضع الموجود في أقصى يسار شريط التمرير هو 0، والموضع الأبعد هو 100. ويمكنك تغيير النطاق باستخدام سمتي min وmax. يمكننا أيضًا تعيين قيمة الخطوة من خلال خطوة السمة. لذلك، لتحديد نطاق من 5 إلى 50، بزيادات قدرها 5، سوف نستخدم:
< input type = "range" min = "5" max = "50" step = "5" / > |
الدعم من الجميع المتصفحات الشعبيةباستثناء أوبرا ميني.
7. التحقق من صحة النموذج
أنها مريحة للغاية لتعيين خاص سمة HTMLالإدخال للتحقق من بيانات الإدخال. على سبيل المثال، نريد إنشاء حقل يجب ملؤه:
يضيف JQuery Mobile تلقائيًا التصميم إلى نماذج HTML، مما يجعلها أكثر جاذبية وأكثر سهولة في الاستخدام عند اللمس.
هيكل نموذج JQuery Mobile
JQuery Mobile لاستخدام CSS لتصميم العناصر نموذج HTMLلجعلها أكثر جاذبية وأسهل في الاستخدام.
في JQuery Mobile، يمكنك استخدام عناصر النموذج التالية:
- حقل إدخال النص
- البحث عن حقل الإدخال
- زر الراديو
- خانة الاختيار
- اختر قائمة
- المنزلق
- الوجه تبديل التبديل
في باستخدام مسج نموذج المحمول، يجب أن تعرف:
- <Форма>يجب أن يكون للعنصر طريقة وسمة إجراء
- يجب أن يكون لكل عنصر نموذج سمة "معرف" فريدة. يجب أن يكون المعرف فريدًا في جميع الصفحات في جميع أنحاء الموقع. يحدث هذا بسبب مسج موبايليتم تقديم آلية التنقل المكونة من صفحة واحدة بطريقة تجعل الكثيرين صفحات مختلفةمعًا
- يجب أن يكون لكل عنصر نموذج تسمية. علامة تبويب الإعدادات لخصائص لتتناسب مع معرف العنصر
أمثلة
جربها "
لإخفاء تسمية، استخدم فئة UI-hidden-accessible. يُستخدم هذا غالبًا عندما تقوم بإحالة عنصر كعلامة نائب:
أمثلة
جربها "
نصيحة:يمكننا استخدام سمة data-net-BTN = "true" لإضافة زر لمسح محتويات حقل الإدخال (رمز X على يمين حقل الإدخال):
أمثلة
<Ярлык = "имя_файла">اسم: метка>
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">
جربها "
أيقونة نماذج الجوال jQuery
نموذج رمز الزر HTML القياسي <вход>العنصر (زر، إعادة تعيين، إرسال). سيقومون تلقائيًا بعرض الأنماط، وتكييف الأجهزة المحمولة تلقائيًا مع سطح المكتب:
أمثلة
<Тип входного = "Сброс" значение = "кнопка сброса">
جربها "
إذا كنت بحاجة إلى إضافة أنماط إضافية إلى<вход>الزر، يمكنك استخدام جدول البيانات * السمات التالي:
زر لإضافة أيقونة:
<Тип входного = "Сброс" значение = "кнопка сброса">
جربها "
مجال الحاويات
لجعل التسميات وعناصر النموذج تبدو أكثر ملاءمة للشاشات العريضة، من فضلك أو