Back to Question Center
0

تصميم شكل تخطيط: محاذاة            تصميم شكل تخطيط: محاذاة المواضيع المرتبطة: موبايل سيمالت

1 answers:
تصميم شكل تخطيط: محاذاة

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

أنت وصديق كل يقود إلى مطعم لتناول العشاء. كل من الطرق الخاصة بك تسقط على الطريق السريع مع اثنين من الممرات - myisam vs innodb performance. الطرق السريعة هي نفس الطول. على الطريق الخاص بك، وجميع السيارات بطيئة تفعل الشيء الصحيح والتمسك حارة واحدة، حتى تتمكن من ذبابة الماضي في الآخر. على طريق صديقك، تنتشر السيارات البطيئة في كل من ممرات الطريق السريع، لذلك لديها أن نسج داخل وخارج. أي واحد منكم سوف تحصل على المطعم أولا؟

مسار عمودي إلى الإنجاز

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

لا تضع الأسئلة بجانب بعضها البعض

لأن المسار الرأسي إلى الانتهاء يجعل نموذج أطول، قد يميل إلى الضغط على بعض الأسئلة بجانب بعضها البعض:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

هذه فكرة سيئة، للأسباب التالية:

  • أنه يقطع تدفق سلس من خلال شكل (مثل كسر السيارة في الخط السريع الخاص بك).
  • غالبا ما لا يرى المستخدمون السؤال على الجانب الأيسر، لأنه خارج محور رؤيتهم (هذا فقط حوالي تسعة أحرف واسعة).
  • يمنع هذا النموذج من العمل بسلاسة على كل من الشاشات الكبيرة والصغيرة. (المزيد عن هذا قريبا.)

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

محاذاة حقول الإجابة

طريقة واحدة يمكنك في بعض الأحيان توفير مساحة، ومع ذلك، هو مع حقول الإجابة. أنظر إلى حقول الإجابة عن سؤال الموافقة على التسويق:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

كلما كانت حقول الإجابة صغيرة، يمكننا وضعها أفقيا. (لهذا الغرض نحدد "صغيرة" كخيارات ثلاثة أو أقل، مع كل تسميات قصيرة.) وسوف النموذج لا تزال تعمل لمسة، وعلى الشاشات الصغيرة. موافقة التسويق هي مجرد سؤال من هذا القبيل:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

في الواقع، تاريخ الميلاد هو أيضا مسألة مع حقول الإجابة الصغيرة. ربما لم تكن قد أدركت أننا وضعناها بالفعل على سطر واحد:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

إذا وضعنا مجموعة طويلة من الحقول الإجابة أفقيا، ونحن من المحتمل أن تستحضر شريط التمرير الأفقي، حتى على شاشات أكبر

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

إذا كانت حقول الإجابة لدينا ليست صغيرة، فمن الأرجح أننا سوف تتسبب في شريط التمرير الأفقي لتظهر على الهاتف المحمول.

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

محاذاة عمودية من مجموعات من أزرار الراديو أو مربعات يعمل على الهاتف المحمول أيضا.

وضع علامة

هناك مشكلة في عرض الجوال من النموذج لدينا، والتي كنت قد لاحظت من بعض الرسوم التوضيحية أعلاه. على شاشة صغيرة، عندما يكون التركيز في مربع نص، التسمية المقابلة غير مرئية، تماما مثل هذا المثال:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

ينظر إلى العلامات على اليسار في البداية ولكن تختفي عندما يبدأ المستخدم لملء النموذج.

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

وإليك كيف سيبدو على شاشة كبيرة:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

تكون النماذج أطول عندما يتم وضع التصنيفات فوق الحقول.

ما عليك القيام به هو رمز النموذج ليكون استجابة . عندما تكون الشاشة أكبر، يجب أن تسميات تسير إلى يسار الحقول؛ عندما تكون الشاشة أصغر، يجب أن تسميات تذهب فوق الحقول. وبهذه الطريقة، ونحن الاستفادة من الفضاء لدينا على شاشات أكبر، مع ضمان يمكن أيضا ملء النموذج على الشاشات الصغيرة.

إذا قمنا بتدوين نموذج نموذجنا لكي نكون متجاوبين، فهذه هي الطريقة التي ستبدو بها على الجوال:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

على الجوال، يتم وضع العلامات فوق الحقول بحيث تكون مرئية عند الحاجة إليها.

هذه هي الطريقة التي سوف تبدو على شاشة أكبر:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

فيما يلي مثال للعالم الحقيقي لتصنيفات النماذج المستجيبة - أول نسخة الشاشة الأكبر من النموذج، ثم الشاشة الأصغر:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

على الشاشات الكبيرة، تسميات إلى يسار الحقول، وبالتالي فإن النموذج يبدو لطيفا وقصيرا.

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

على الشاشات الأصغر حجما، تكون التصنيفات فوق الحقول، لذا فهي دائما في وضع العرض.

ماذا عن أن دراسة؟

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

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

تجنب مزراب

بالإضافة إلى ما قيل بالفعل، هناك طريقتان يمكنك زيادة قابلية استخدام النموذج الخاص بك عندما يكون لديك تسميات على يسار الحقول الخاصة بك. هذه التقنيات مهمة لمنع "مزراب" كبير يظهر بين التسميات ومجالات الإجابة عليها:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

بالنسبة للعديد من الأسئلة في نموذج المثال، فإن التصنيف بعيد عن حقول الإجابة المقابلة.

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

إذا كانت التسميات قصيرة في الغالب، فيمكنك ضبطها بشكل صحيح، بحيث تكون بجوار الحقول:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

تسميات مجموعة دافق الحق.

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

زيبرا ستريبينغ وراء تسميات مجموعة دافق اليسار.

زيبرا ستريبينغ هو التظليل الخافت الذي تراه وراء كل سؤال ثان. فإنه يساعد العين ربط التسمية إلى الميدان (كما يتضح من دراسة أجريت في حين يعود، ومتابعته).

(إذا كنت ترغب في قراءة المزيد عن وضع الملصق، كتبت مقالا مفصلا على موقع سيتيبوينت، وقدمت بعض التعليقات على موقع الويب الخاص بي أيضا. هذا ما قمنا به مع نموذج مثالنا:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

الحافة اليسرى من زر العمل الأساسي تضيء مع الحافة اليسرى من الحقول.

أشكال متعددة الأشكال

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

التالي هو عملنا الأساسي، لذلك يتم محاذاة رأسيا مع الحقول.

خيار آخر هو وضع الزر التالي إلى اليمين والزر السابق إلى اليسار (للجمهور الناطقة بالانكليزية):

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

الناطقين باللغة الإنجليزية عادة التفكير في الحق كما الأمام واليسار كما الخلف، حتى نتمكن من محاذاة أزرار لدينا بهذه الطريقة.

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

(يمكنك أيضا وضع أشكال متعددة الأشكال في الأكورديون، ولكن الأكورديون لديها عدد من القضايا قابليتها للاستخدام حتى يتم تجنب أفضل.)

أزرار على الجوال

على الشاشات الصغيرة، قد ترغب في تصميم الأزرار الخاصة بك لتكون استجابة، بحيث:

  • مكدسة، مع العمل الأساسي على رأس
  • عرض كامل الشاشة، باستثناء قليلا من مسافة بيضاء على أي من الجانبين (بحيث لا تزال أزرار واضحة).

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

الترميز لدينا شكل لتكون استجابة لحجم الشاشة، يمكننا التأكد أزرار لا تزال تعمل بشكل جيد على المحمول.

الآن لدينا شكل يبحث جيدة حقا، و هي قابلة للاستخدام للغاية للتمهيد. ولكن هناك المزيد من التحسينات التي يمكن أن نجعل، والتي سوف نستكشف المقبل

March 1, 2018