تصميم تطبيق عقارات: إعادة تصميم الشاشة الرئيسية، قبل وبعد
شاشة رئيسية لتطبيق عقارات تطلب منك أن تقرأ كل شيء دفعة واحدة، ونفس الشاشة بعد الإصلاح. كل تغيير جنبًا إلى جنب، وسببه، مع ملف Figma المجاني.
للشاشة الرئيسية في تطبيق العقارات مهمة واحدة: أن توصل الشخص من "أنا أبحث" إلى عقار يريد فتحه. المسودة الأولى أدناه لا تكسر شيئًا. كل الميزات تعمل. لكنها تطلب من القارئ استيعاب كل شيء دفعة واحدة: حقل بحث، خمس فئات دائرية، أربعة أزرار مختلفة، لافتة، وبطاقة فيها تسع تفاصيل صغيرة.
الحل يُبقي كل ميزة ويغيّر الترتيب والحجم وعدد الأنماط.
الشاشة كاملة، قبل وبعد
مسودة مبتدئ
بعد الإصلاح
في اليسار، تقابل العين حقل بحث، وخمس دوائر فئات، وأربعة عناصر تحكم بثلاثة أنماط مختلفة، ولافتة زرقاء بعرض الشاشة، ونجمة، وسهمًا، وزرين فوق كل صورة، وزر خريطة عائمًا يجلس فوق تفاصيل العقار. لا شيء خاطئ بمفرده. لكن معًا ليس هناك شيء أول يُقرأ.
في اليمين، تُقرأ الشاشة من الأعلى إلى الأسفل: من أنت، ماذا تبحث، إيجار أم شراء، أي نوع من البيوت، ثم عقار كبير واحد. اللافتة ما زالت موجودة، لكنها تنتظر في الأسفل، أصغر، حيث لا تنافس البحث.
| مسودة مبتدئ | بعد الإصلاح | |
|---|---|---|
| الهوامش الجانبية | 12 يسارًا، 16 يمينًا | 20 في كل صف |
| أحجام النص | من 9 إلى 15 px | من 11 إلى 22 pt، سلّم خطوط iOS |
| المسافات | قيم مختلطة | 4 و8 و12 و16 |
| أنماط عناصر التحكم فوق العقارات | 4 (مملوء، عادي، بإطار، نص) | 2 (زر تصفية وعنصر تحكم مقسّم) |
| لافتة العرض | ارتفاع 107 px، فوق العقارات | ارتفاع 68 px، تحتها |
| التبويبات | 5، أيقونات مملوءة وخطية مختلطة | 4، كلها خطية، والنشط بالأزرق الخاص بالعلامة |
الإصلاح الأول: صف بحث واحد وعنصر تحكم واحد للإيجار أو الشراء
قبل
بعد
حقل بحث بإطار مع ميكروفون، وخمس أيقونات فئات دائرية، ثم زر إيجار مملوء، وكلمة شراء عادية، وزر ترتيب بإطار، ورابط تصفية. مقابل حقل بحث رمادي مع زر تصفية أزرق واحد، والإيجار والشراء كنصفين لعنصر تحكم مقسّم واحد.
المسودة تضع أربعة عناصر تحكم في صف واحد وتعطي كلًا منها شكلًا مختلفًا: الإيجار زر مملوء، والشراء نص مجرد، والترتيب بإطار، والتصفية رابط عادي بأيقونة. على القارئ أن يكتشف أيها أزرار وأيها تبويبات وأيها مفاتيح تبديل قبل أن يستخدم أيًّا منها.
الحل يعطي كل مهمة شكلًا واحدًا. البحث والتصفية في الصف نفسه، لأن التصفية جزء من البحث. الإيجار أو الشراء اختيار بين شيئين بالضبط، وهذا ما وُجد له العنصر المقسّم: الخياران ظاهران والمحدد مضاء بوضوح. الترتيب ينتقل بعيدًا، لأنه لا يهم إلا بعد ظهور النتائج.
قاعدة لتكرار استخدامها: إذا كان عنصرا تحكم يؤديان نوع المهمة نفسه فيجب أن يبدوَا متشابهين. وإذا كانت مهمتاهما مختلفتين فيجب ألا يتشابها.
الإصلاح الثاني: فئات تُظهر المختار
قبل
بعد
خمس دوائر رفيعة بإطار مع عنوان صغير تحت كل منها، ولا يدل على أن شقة محددة إلا العنوان الأزرق. مقابل شرائح مملوءة بأيقونة وكلمة في سطر واحد، حيث الشقق بالأزرق الصلب والشرائح التالية تخرج من الحافة.
في المسودة، العلامة الوحيدة على المحدد هي عنوان أزرق بنص صغير تحت دائرة. الدوائر نفسها متطابقة، فعلى العين أن تقرأ العناوين واحدًا واحدًا لتجد النشط.
الشريحة ذات التعبئة الصلبة تجيب قبل أن يُطرح السؤال. الحالة المحددة بلون ووزن مختلفين، لا باختلاف صغير في النص. والشرائح أيضًا أعرض من ارتفاعها، فتجلس الأيقونة والكلمة في سطر واحد ويأخذ الصف كله ارتفاعًا أقل. الشريحة المقطوعة عند الحافة اليمنى تُظهر أن الصف قابل للتمرير، دون حاجة إلى أسهم.
الإصلاح الثالث: بطاقة عقار تُقرأ بالترتيب
قبل
بعد
عقارات مميزة مع نجمة وسهم، وصورة بشارة "عمره سنة" وزري زائد وقلب، و$2,400 في الشهر بالأزرق، وكبسولتا بيع وإيجار، وعنوان، وتفاصيل غرف النوم والحمامات مقطوعة بزر خريطة عائم. مقابل صورة كبيرة بزوايا مدورة مع قلب واحد، ثم $2,400 في الشهر، شقة بغرفتي نوم، ألفاما، لشبونة، وغرفتا نوم، وحمامان، و980 قدمًا مربعة.
من ينظر إلى بيت يسأل أربعة أسئلة بالترتيب نفسه: كم الثمن، وما هذا، وأين هو، وما حجمه. الحل يرتب البطاقة على هذا الترتيب، جواب واحد في كل سطر. السعر أكبر نص، ثم نوع البيت، ثم أسطر أخف للمكان والتفاصيل.
المسودة تخلط الأجوبة. السعر يشارك سطره كبسولتين تقولان بيع وإيجار على بيت للإيجار فقط. العنوان فوق التفاصيل لكنه تحت السعر بلون مختلف. التفاصيل بنص صغير بحجم 9 نقاط وآخرها مخفي تحت زر الخريطة، فيخسر القارئ المساحة، وهي رقم يقارنه أغلب الناس.
أُزيل أيضًا من الصورة: شارة "عمره سنة" وزر الزائد. زران عائمان على كل صورة يطلبان قرارات لم يتخذها القارئ بعد. قلب واحد يكفي، والصورة أكبر لأن الصورة هي ما يبيع البيت.
قاعدة لتكرار استخدامها: البطاقة جملة. قرر ترتيب كلماتها، ثم أعطِ كل كلمة نمطًا واحدًا.
الإصلاح الرابع: أربع تبويبات بنمط أيقونات واحد
قبل
بعد
الرئيسية، عقاراتي، الرسائل، المفضلة، والمزيد، مع أيقونات مملوءة وخطية مختلطة. مقابل الرئيسية، المحفوظات، الرسائل، والملف الشخصي، كلها أيقونات خطية، والرئيسية وحدها بالأزرق.
المسودة فيها خمس تبويبات، وثلاثة منها متقاربة: عقاراتي والمفضلة والمزيد كلها تبدو أماكن قد يوجد فيها بيت محفوظ أو مملوك. وأيقوناتها أيضًا تخلط الأشكال المملوءة (البيت والرسائل) بالخطية (المبنى والقلب)، فيصعب تمييز التبويب النشط عن تبويب مرسوم بثقل أكبر فقط.
الحل يستخدم أربع تبويبات بنمط أيقونات واحد، فيكون الفرق الوحيد بين التبويبات هو أيها نشط. "المفضلة" تصبح "المحفوظات"، كلمة أقصر تطابق القلب على البطاقة. و"المزيد" يصبح "الملف الشخصي"، اسم يقول ما خلفه. إرشادات Apple تصف شريط التبويبات بأنه تنقل بين الأقسام الرئيسية، فوجهة هي في الحقيقة قائمة بقايا لا مكان لها فيه.
الإصلاحات الأصغر
- ترويسة فيها شخص. الحل يضيف تحية، وصورة رمزية بالأحرف الأولى داخل دائرة زرقاء صلبة، وجرسًا بنقطة حمراء. المسودة بلا ترويسة، فلا شيء يقول لمن هذا التطبيق.
- هامش واحد. المسودة تستخدم 12 يسارًا و16 يمينًا، فلا شيء يصطف مع حافة الشاشة. الحل يستخدم 20 على الجانبين في كل صف.
- سلّم مسافات واحد. الفجوات 4 أو 8 أو 12 أو 16. حين تأتي كل فجوة من القائمة القصيرة نفسها، تبدو الصفوف مترابطة دون أي فواصل.
- سلّم نصوص من المنصة. نص المسودة يمتد من 9 إلى 15 px بلا نمط. الحل يستخدم أحجام iOS من 11 إلى 22 pt، وهي أحجام يستطيع الناس قراءتها.
- لافتة أهدأ. "أدرج بيتك مجانًا" فقدت الكلمة المائلة المميزة ومخطط البيت والزر الثاني داخلها. أصبحت صفًا واحدًا بسهم واحد.
دقّق تطبيق العقارات الخاص بك
| السؤال | لماذا يهم |
|---|---|
| هل تستطيع تسمية الشيء الواحد الذي يطلبه منك أعلى الشاشة؟ | بلا شيء أول يُقرأ، يُقرأ كل شيء بالسرعة نفسها |
| هل يبدو عنصرا تحكم يؤديان المهمة نفسها متشابهين؟ | الأنماط المختلطة تجعل الناس يخمّنون ما هو الزر |
| هل الفئة المحددة واضحة من آخر الغرفة؟ | الحالة المحددة لا يجب أن تحتاج إلى قراءة |
| هل تجيب كل بطاقة عقار عن السعر، فالبيت، فالمكان، فالتفاصيل بهذا الترتيب؟ | هذا هو الترتيب الذي يسأل به الناس |
| هل أي تفصيل مخفي تحت زر عائم؟ | المساحة هي الرقم الذي يقارنه الناس |
| هل يبدو تبويبان وكأنهما يقودان إلى المكان نفسه؟ | الأبواب المكررة تجعل الناس غير متأكدين أين يذهبون |
| هل يستخدم كل صف الهامش الأيسر والأيمن نفسه؟ | المحاذاة أرخص طريقة لتبدو منتهيًا |
احصل على ملف Figma
الملف المجاني فيه الشاشتان، وكل جزء من الشاشة المصلحة كمكوّن، ومتغيرات الألوان، وأنماط نصوص iOS، وملف تعريفي بحقوق الصور.
ملف Figma مجاني
الشاشة الرئيسية لتطبيق عقارات، قبل وبعد
الشاشتان وكل جزء مصلح كمكوّنات Figma. مجاني، للعرض فقط، انسخه إلى مسوداتك.
الأسئلة الشائعة
ماذا يجب أن تعرض الشاشة الرئيسية لتطبيق عقارات أولًا؟
حقل بحث مع زر تصفية واحد، ثم الإيجار أو الشراء ونوع العقار. ضع العقارات مباشرة تحتها، واللافتة والعروض الثانوية بعدها.
كيف يجب عرض الإيجار والشراء في تطبيق عقارات؟
كعنصر تحكم مقسّم بنصفين، فيبقى الخياران ظاهرين دائمًا والمختار مميزًا بوضوح. أربعة أنماط أزرار مختلفة في صف واحد تجعل الناس يخمّنون.
ماذا يجب أن تتضمن بطاقة عقار؟
السعر أولًا، ثم نوع البيت، والمكان، والتفاصيل الأساسية مثل غرف النوم والحمامات والمساحة. زر مفضلة واحد على الصورة يكفي.
كم تبويبًا يجب أن يكون في تطبيق عقارات؟
أربعة رقم جيد: الرئيسية، المحفوظات، الرسائل، والملف الشخصي. تجنب تبويبين يبدوان كالمكان نفسه، مثل المفضلة وعقاراتي.
كيف تُظهر الفئة المحددة؟
املأ الشريحة المحددة بلون العلامة وأبقِ الباقي محايدًا. تغيير صغير في لون النص تحت دائرة يسهل أن يفوت.
المصادر
- الشاشتان من تصميمنا، صُممتا وقيستا في Figma.
- الصور عبر Unsplash من Luke van Zyl وA. L. Brown وAnnie Spratt، بموجب رخصة Unsplash.
- إرشادات Apple للواجهة البشرية: شرائط التبويب.
- إرشادات Apple للواجهة البشرية: الطباعة، أحجام نصوص iOS.
- نُشر أولًا كشرائح على App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
