تصميم تطبيق حجز الفنادق: إعادة تصميم الشاشة الرئيسية، قبل وبعد
شاشة رئيسية لتطبيق حجز فنادق من مصمم مبتدئ تبدأ بنموذج من أربعة حقول، ونفس الشاشة بعد الإصلاح. كل تغيير جنبًا إلى جنب، وسببه، مع ملف Figma المجاني.
على الشاشة الرئيسية لتطبيق السفر أن تجعل المستخدم يريد الذهاب إلى مكان ما قبل أن تسأله أي شيء. المسودة الأولى أدناه تفعل العكس: تبدأ بنموذج من أربعة حقول، وتعرض الوجهات ككلمات مجردة، وتوزع سعرًا واحدًا على ست أسطر. الإصلاح يُبقي كل الميزات ويغيّر ترتيب ما تراه العين.
الشاشة كاملة، قبل وبعد
مسودة المبتدئ
بعد الإصلاح
على اليسار، أول ما يظهر على الشاشة مهمة شاقة: أين، تسجيل الوصول، تسجيل المغادرة، الضيوف، ثم زر بتدرج لوني. الأماكن لا تظهر إلا بعد النموذج، على شكل خمس حبوب رمادية من النص. على اليمين، البحث بطاقة واحدة، وأكثر من نصف الشاشة صور لأماكن وإقامات.
كل الميزات نجت. ما زال بإمكانك البحث بالمكان والتواريخ والضيوف، وتصفح الوجهات ورؤية أسعار الفنادق. الإصلاح نقل الأوراق إلى بطاقة واحدة مدمجة وأعاد المساحة إلى السبب الذي يفتح الناس من أجله تطبيق السفر.
| مسودة المبتدئ | بعد الإصلاح | |
|---|---|---|
| مدخلات قبل أي محتوى | 4 حقول وزر بارتفاع 44 px | حقل واحد وشريحتان |
| الوجهات | 5 حبوب نصية | بلاطات صور مع المدينة والبلد |
| أسطر السعر في كل بطاقة فندق | 6 | 1، مع تفصيلة واحدة |
| الترويسة | شعار وأيقونتان | سؤال وأيقونة واحدة |
| التبويبات | 5 | 4 |
الإصلاح 1: اطرح السؤال واترك الشعار
قبل
بعد
"اكتشف العالم، واعثر على إقامتك المثالية معنا!" بجانب قلب وجرس، مقابل "إلى أين بعد ذلك؟" بجانب جرس عليه نقطة.
الشعار على الشاشة الرئيسية مكتوب للشركة. أما السؤال فمكتوب للشخص الذي يمسك الهاتف، ويشير مباشرة إلى بطاقة البحث تحته. "إلى أين بعد ذلك؟" هو أيضًا ما قد يسأله صديق، وهذه هي النبرة التي يريدها تطبيق السفر.
خرج القلب من الترويسة لأن الأماكن المحفوظة لها تبويبها الخاص. بقي الجرس، مع نقطة عند وجود جديد، لأن انخفاض سعر أو تغيّر في الحجز هو الشيء الوحيد الذي يستحق المقاطعة.
الإصلاح 2: بطاقة بحث واحدة، والتواريخ والضيوف كشرائح
قبل
بعد
أربعة حقول متراصة (الوجهة، تسجيل الوصول، تسجيل المغادرة، الضيوف) وزر برتقالي متدرج، مقابل حقل وجهة واحد مع "14 إلى 16 نوفمبر" و"ضيفان" كشريحتين وزر دائري بسهم.
نموذج الحقول الأربعة يطلب من الشخص اتخاذ كل القرارات قبل أن يرى مكانًا واحدًا. معظم من يفتحون التطبيق ليسوا جاهزين لذلك: إنهم يتصفحون. النموذج الذي يحتل ثلث الشاشة جدار في وجوههم.
التواريخ والضيوف نادرًا ما تتغير بين عمليات البحث، لذلك يعرضها الإصلاح كشرائح بقيم افتراضية معقولة، قابلة للنقر عند الحاجة إلى التعديل. الوجهة هي الحقل الوحيد الذي يحتاج إلى كتابة. وزوج الوصول والمغادرة صار شريحة واحدة، "14 إلى 16 نوفمبر"، لأن أحدًا لا يفكر في الإقامة كتاريخين منفصلين.
الإصلاح 3: اعرض الأماكن لا أسماءها
قبل
بعد
"لشبونة، كيوتو، كيب تاون، بالي، باريس" كحبوب نصية رمادية، مقابل بلاطات صور للشبونة وكيوتو مع البلد تحت كل اسم، والبلاطة التالية تطل من الحافة.
يختار الناس الوجهة بأعينهم. كلمة مثل "كيوتو" تطلب من القارئ أن يتخيل المكان؛ وصورة معبد باغودا عند الغروب تتخيل عنه. هذه هي مهمة هذا القسم كلها، والحبوب النصية لا تستطيع أداءها.
البلاطة المقطوعة عند الحافة اليمنى مقصودة. إنها تخبر القارئ أن الصف قابل للتمرير دون أسهم أو نقاط، فهناك أماكن أخرى تُكتشف بسحبة واحدة.
الإصلاح 4: سعر واحد لكل إقامة
قبل
بعد
صورة مصغرة صغيرة بشارة -30% وخمس نجوم والمدينة و320$ مشطوبة و224$ لليلة و"+38$ ضرائب ورسوم" وميزتان خضراوان، مقابل صورة كبيرة بتقييم 4.8 والاسم و"224$ لليلة" و"لشبونة، إلغاء مجاني".
بطاقة المسودة تعرض السعر بأربع طرق دفعة واحدة: السعر القديم والجديد والوحدة والرسوم الإضافية، وشارة خصم على الصورة تقوله للمرة الخامسة. على القارئ أن يحسب قبل أن يقرر إن كان يحب الفندق.
الإصلاح يعرض رقمًا واحدًا وتفصيلة واحدة. الصورة أكبر لأن الصورة هي ما يبيع الإقامة. والتفصيلة هي التي تزيل أكبر قدر من القلق، الإلغاء المجاني، والتقييم يستبدل خمس نجوم مرسومة برقم يمكن مقارنته.
الإصلاحات الأصغر
- أربعة تبويبات لا خمسة. استكشاف، المحفوظات، الرحلات، الملف الشخصي. دُمج الرئيسية والاستكشاف في تبويب واحد، استكشاف، لأن الشاشة الرئيسية هي مكان الاستكشاف.
- كلمات يستخدمها الناس. "قائمة الأمنيات" صارت "المحفوظات" و"الحجوزات" صارت "الرحلات"، وهي الكلمات التي يقولها المسافرون فعلًا.
- لون تمييز واحد. استخدمت المسودة تدرجًا برتقاليًا للزر وأخضر للمزايا وأحمر للخصومات. الإصلاح يستخدم الأسود للإجراءات ويترك الصور تجلب اللون.
- أسماء أقصر. "Grand Riviera Resort & Spa" صار "Grand Riviera Resort" على البطاقة، ليتسع الاسم في سطر واحد بجانب السعر.
دقّق في تطبيق السفر الخاص بك
| السؤال | لماذا يهم |
|---|---|
| هل يستطيع أحدهم رؤية مكان قبل ملء أي حقل؟ | المتصفحون أكثر من الحاجزين على الشاشة الرئيسية |
| هل التواريخ والضيوف معبّأة مسبقًا وقابلة للتعديل كشرائح؟ | نادرًا ما تتغير بين عمليات البحث |
| هل الوجهات صور؟ | الناس يختارون الأماكن بأعينهم |
| هل تعرض كل إقامة سعرًا واحدًا؟ | أربعة أسعار تجعل القارئ يحسب |
| هل يؤدي تبويبان إلى المكان نفسه؟ | الأبواب المكررة تربك الناس |
احصل على ملف Figma
يحتوي الملف المجاني على الشاشتين كمكوّنات، وكل إصلاح كزوج قبل وبعد، ومتغيرات الألوان وأنماط نصوص iOS.
ملف Figma مجاني
الشاشة الرئيسية لحجز الفنادق، قبل وبعد
الشاشتان وكل جزء مُصلح كمكوّنات Figma. مجاني، للعرض فقط، انسخه إلى مسوداتك.
الأسئلة الشائعة
ما الذي يجب أن تعرضه الشاشة الرئيسية لتطبيق حجز الفنادق أولًا؟
سؤال قصير، وحقل بحث واحد، وصور أماكن. يمكن أن تجلس التواريخ والضيوف في بطاقة البحث كشرائح قابلة للتعديل، فيأتي التصفح قبل أي نموذج.
كيف تُعرض أسعار الفنادق في التطبيق؟
سعر واحد واضح لكل إقامة، مع تفصيلة داعمة واحدة مثل الإلغاء المجاني. وحيث تنطبق الرسوم الإلزامية، ضمّنها في السعر الرئيسي.
هل يعرض تطبيق السفر الوجهات كصور أم نص؟
صور. الناس يختارون الأماكن بصريًا، والبلاطة المقطوعة عند حافة الشاشة تُظهر أن الصف قابل للتمرير دون عناصر تحكم إضافية.
كم تبويبًا يجب أن يضم تطبيق الحجز؟
أربعة أو خمسة. ادمج أي تبويبين يؤديان إلى المكان نفسه، وسمِّ التبويبات بالكلمات التي يستخدمها المسافرون، مثل المحفوظات والرحلات.
المصادر
- الشاشتان من تصميمنا وقياسنا في Figma.
- الصور عبر Unsplash من Vali Sachadonig وZion C وAsher Pardey وRoberto Nickson وTravis Chen.
- قاعدة FTC بشأن الرسوم غير العادلة أو المضللة، وتشمل الإقامة قصيرة الأجل، سارية من 12 مايو 2025.
- نُشر أول مرة كمنشور دوّار على 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
