إذن ما الفرق بين combobox، وmultiselect، وlistbox، والقائمة المنسدلة؟ على الرغم من أن جميع مكونات واجهة المستخدم هذه قد تبدو متشابهة، إلا أنها تخدم أغراضًا مختلفة. غالبًا ما يعتمد الاختيار على عدد الخيارات المتاحة وإمكانية رؤيتها. دعونا نرى كيف تختلف، والغرض الذي تخدمه، وكيفية اختيار الهدف الصحيح - تجنب سوء الفهم والتوقعات الخاطئة على طول الطريق.
ليست كل أنماط القائمة متماثلة تشترك جميع مكونات واجهة المستخدم الموضحة أعلاه في شيء واحد: فهي تدعم تفاعلات المستخدمين مع القوائم. ومع ذلك، فإنهم يفعلون ذلك بشكل مختلف قليلاً. دعونا نلقي نظرة على كل منها، واحدا تلو الآخر:
القائمة المنسدلة → مخفية حتى يتم تشغيلها. Combobox → اكتب للتصفية + حدد خيارًا واحدًا. تحديد متعدد → اكتب للتصفية + حدد العديد من الخيارات. مربع القائمة → جميع خيارات القائمة مرئية بشكل افتراضي (+ التمرير). مربع قائمة مزدوج → نقل العناصر بين مربعي قائمة.
بمعنى آخر، يجمع Combobox بين حقل إدخال النص وقائمة منسدلة، بحيث يمكن للمستخدمين الكتابة لتصفية وتحديد خيار واحد. باستخدام Multiselect، يمكن للمستخدمين تحديد العديد من الخيارات (يتم عرضها غالبًا على شكل أقراص أو رقائق). تعرض مربعات القائمة جميع خيارات القائمة المرئية بشكل افتراضي، وغالبًا ما يكون ذلك من خلال التمرير. يكون ذلك مفيدًا عندما يحتاج المستخدمون إلى رؤية جميع الخيارات المتاحة على الفور. مربع القائمة المزدوج (يسمى أيضًا قائمة النقل) هو شكل مختلف من مربع القائمة الذي يسمح للمستخدمين بنقل العناصر بين مربعي قائمة (يسار ↔ يمين)، عادةً للاختيار المجمع. لا تقم أبدًا بإخفاء الخيارات المستخدمة بشكل متكرر كما ذكرنا أعلاه، يعتمد اختيار مكون واجهة المستخدم الصحيح على عاملين: عدد خيارات القائمة المتاحة، وما إذا كانت كل هذه الخيارات بحاجة إلى أن تكون مرئية بشكل افتراضي. يمكن أن تحتوي جميع القوائم على هياكل شجرية وتداخل واختيار مجموعة أيضًا.
هناك مبدأ واحد أتبعه منذ سنوات لأي مكون من مكونات واجهة المستخدم: لا تقم أبدًا بإخفاء الخيارات المستخدمة بشكل متكرر. إذا كان المستخدمون يعتمدون على تحديد معين بشكل متكرر، فليس هناك فائدة كبيرة في إخفاءه عنهم. يمكننا إما أن نجعلها محددة مسبقًا، أو (إذا كان هناك خياران أو ثلاثة خيارات مستخدمة بشكل متكرر) نعرضها كشرائح أو أزرار، ثم نعرض بقية القائمة عند التفاعل. بشكل عام، من الجيد دائمًا عرض الخيارات الشائعة - حتى لو كان ذلك قد يؤدي إلى فوضى في واجهة المستخدم. كيفية اختيار أي منها؟ لا تحتاج كل قائمة إلى طريقة اختيار معقدة. بالنسبة للقوائم التي تحتوي على أقل من 5 عناصر، عادةً ما تعمل أزرار الاختيار البسيطة أو مربعات الاختيار بشكل أفضل. ولكن إذا كان المستخدمون بحاجة إلى الاختيار من قائمة كبيرة من الخيارات (على سبيل المثال، أكثر من 200 عنصر)، فإن combobox + multiselect مفيدان بسبب التصفية الأسرع (على سبيل المثال، اختيار البلد).
تكون مربعات القائمة مفيدة عندما يحتاج الأشخاص إلى الوصول إلى العديد من الخيارات في وقت واحد، خاصة إذا كانوا بحاجة إلى اختيار العديد من الخيارات من تلك القائمة أيضًا. يمكن أن تكون مفيدة للمرشحات المستخدمة بشكل متكرر.
غالبًا ما يتم تجاهل وتجاهل مربع القائمة المزدوج. ولكنها يمكن أن تكون مفيدة جدًا للمهام المعقدة، مثل الاختيار المجمع، أو تعيين الأدوار والمهام والمسؤوليات. إنه مكون واجهة المستخدم الوحيد الذي يسمح للمستخدمين بمراجعة قائمة التحديد الكاملة الخاصة بهم جنبًا إلى جنب مع قائمة المصدر قبل الالتزام (وتسمى أيضًا "قائمة النقل"). في الواقع، غالبًا ما يكون مربع القائمة المزدوج أسرع وأكثر دقة ويسهل الوصول إليه من السحب والإفلات. اعتبارات سهولة الاستخدام إحدى الملاحظات المهمة التي يجب أخذها في الاعتبار هي أن جميع أنواع القوائم تحتاج إلى دعم التنقل باستخدام لوحة المفاتيح (على سبيل المثال، مفاتيح الأسهم ↑/↓) لتسهيل الوصول. سيعتمد بعض الأشخاص دائمًا على لوحة المفاتيح لتحديد الخيارات بمجرد بدء الكتابة.
أبعد من ذلك:
بالنسبة للقوائم التي تحتوي على أكثر من 7 خيارات، فكر في إضافة وظيفتي "تحديد الكل" و"مسح الكل" لتبسيط تفاعل المستخدم. بالنسبة للقوائم الطويلة التي تحتوي على مربع تحرير وسرد، اعرض جميع الخيارات للمستخدمين عند النقر/النقر، وإلا فقد لا يتم رؤيتهم أبدًا، والأهم من ذلك، لا تعرض العناصر غير التفاعلية كأزرار لتجنب الارتباك، ولا تعرض العناصر التفاعلية كتسميات ثابتة.
الختام: ليس كل شيء عبارة عن قائمة منسدلة الأسماء مهمة. عادةً ما يتم وصف القائمة الرأسية للخيارات على أنها "قائمة منسدلة" - ولكنها غالبًا ما تكون عامة إلى حد ما بحيث لا تكون ذات معنى. تشير "القائمة المنسدلة" إلى أن القائمة مخفية افتراضيًا. يشير "التحديد المتعدد" إلى التحديد المتعدد (مربع الاختيار) داخل القائمة. يشير "Combobox" إلى إدخال النص. و"Listbox" هو ببساطة قائمة بالعناصر القابلة للتحديد، والتي تكون مرئية في جميع الأوقات. الهدف ليس أن يكون متسقًا مع التعريفات المذكورة أعلاه من أجل ذلك. ولكن بدلاً من ذلك، من أجل مواءمة النوايا، تحدث بنفس اللغة عند اتخاذ القرار بشأن مكونات واجهة المستخدم هذه وتصميمها وإنشائها ثم استخدامها. يجب أن تعمل من أجلالجميع - المصممين والمهندسين والمستخدمين النهائيين - طالما أن التصنيفات الثابتة لا تبدو كأزرار تفاعلية، وأزرار الاختيار لا تعمل كمربعات اختيار. تعرف على "أنماط التصميم لواجهات الذكاء الاصطناعي" تعرف على أنماط التصميم لواجهات الذكاء الاصطناعي، دورة فيديو جديدة من Vitaly تحتوي على أمثلة عملية من منتجات واقعية - مع تدريب مباشر على تجربة المستخدم قريبًا. انتقل إلى المعاينة المجانية. تعرف على أنماط التصميم لواجهات الذكاء الاصطناعي، دورة فيديو Vitaly حول تصميم الواجهة وتجربة المستخدم.
التدريب على الفيديو + تجربة المستخدم (UX)فيديو فقطالتدريب على الفيديو + تجربة المستخدم (UX)$ 450.00 $ 799.00
احصل على فيديو + تدريب على تجربة المستخدم 30 درس فيديو (10 ساعات) + تدريب مباشر على تجربة المستخدم. ضمان استرداد الأموال لمدة 100 يوم. فيديو فقط$ 275.00$ 395.00
احصل على دورة الفيديو 30 درس فيديو (10 ساعات). يتم تحديثه سنويًا. وهو متاح أيضًا كحزمة UX مع 3 دورات فيديو.
موارد مفيدة
الإكمال التلقائي: إرشادات تجربة المستخدم، بقلم فيتالي فريدمان Combobox، من موقع eBay 👍 Combobox، من شركة Elastic كومبوبوكس، من إليسا Combobox، بواسطة MongoDB 👍 كومبوبوكس بالفيزا 👍 Combobox، بواسطة واتسون (Docplanner) كومبوبوكس، من ويكيميديا Combobox، من Zendesk Multiselect (مستندات تصميم MongoDB Combobox)، بواسطة MongoDB 👍 بحث متعدد التحديد، بواسطة ويكيميديا صندوق تحرير وسرد متعدد التحديد، بواسطة Vaadin الاختيار المتعدد بالفيزا النقل (مثال على Listbox)، بواسطة Ant Design مربع القائمة، بواسطة هوبر مربع القائمة، بواسطة Vaadin Listbox، بواسطة فيزا محدد القائمة المزدوجة، بواسطة Red Hat (PatternFly) صندوق قائمة مزدوج، من Salesforce (نظام تصميم Lightning) قائمة النقل، من قبل مانتين صندوق القائمة المزدوج، من Dashlite الشارات مقابل الحبوب مقابل الرقائق مقابل العلامات، بقلم فيتالي فريدمان مربعات القائمة مقابل القوائم المنسدلة، بقلم آنا كالي (NN/g)
