طراحی اپ رزرو هتل: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپ رزرو هتل که با فرم چهارفیلدی شروع میشود و همان صفحه پس از اصلاح. همه تغییرات کنار هم، دلیل هر کدام و فایل رایگان Figma.
صفحه اصلی یک اپ سفر باید پیش از آن‌که چیزی از کاربر بپرسد، او را به سفر رفتن به جایی ترغیب کند. پیش‌نویس اول پایین دقیقاً برعکس عمل می‌کند: با یک فرم چهارفیلدی شروع میشود، مقصدها را فقط به شکل چند کلمه ساده فهرست می‌کند و یک قیمت را روی شش خط پخش می‌کند. نسخه اصلاح‌شده همه امکانات را نگه می‌دارد و فقط ترتیب چیزهایی را که می‌بینید عوض می‌کند.
کل صفحه، قبل و بعد
پیش‌نویس مبتدی
اصلاح‌شده
در سمت چپ، اولین چیزی که روی صفحه می‌بینید یک وظیفه است: کجا، ورود، خروج، مهمان‌ها و بعد یک دکمه گرادیانتی. مکانها فقط بعد از فرم و به شکل پنج قرص خاکستری متنی ظاهر می‌شوند. در سمت راست، جستجو یک کارت واحد است و بیش از نیمی از صفحه عکس مکانها و اقامتگاه‌هاست.
همه امکانات سر جایشان ماندند. هنوز می‌توانید بر اساس مکان، تاریخ و مهمان جستجو کنید، مقصدها را مرور کنید و قیمت هتل‌ها را ببینید. اصلاحیه کاغذبازی را در یک کارت فشرده جمع کرد و فضا را به دلیل اصلی باز کردن یک اپ سفر برگرداند.
| پیش‌نویس مبتدی | اصلاح‌شده | |
|---|---|---|
| ورودی‌ها پیش از هر محتوا | ۴ فیلد و یک دکمه 44 px | ۱ فیلد و ۲ چیپ |
| مقصدها | ۵ قرص متنی | کاشی عکس با شهر و کشور |
| خطوط قیمت روی هر کارت هتل | ۶ | ۱ به‌علاوه یک جزئیات |
| هدر | یک شعار و دو آیکون | یک سؤال و یک آیکون |
| تبها | ۵ | ۴ |
اصلاح ۱: سؤال بپرسید، شعار را کنار بگذارید
قبل
بعد
«دنیا را کشف کنید، اقامتگاه ایده‌آل خود را با ما پیدا کنید!» کنار یک قلب و یک زنگ، در برابر «مقصد بعدی کجاست؟» کنار یک زنگ با نقطه اعلان.
شعار روی صفحه اصلی برای شرکت نوشته شده. سؤال برای کسی نوشته شده که گوشی دستش است و مستقیم به کارت جستجوی زیرش اشاره می‌کند. «مقصد بعدی کجاست؟» همان چیزی است که یک دوست می‌پرسد و لحنی که یک اپ سفر می‌خواهد.
قلب از هدر رفت چون مکان‌های ذخیره‌شده از قبل تب خودشان را دارند. زنگ ماند، با یک نقطه وقتی خبر تازه‌ای هست، چون افت قیمت یا تغییر در رزرو تنها چیزی است که ارزش مزاحمت دارد.
اصلاح ۲: یک کارت جستجو، تاریخ و مهمان به شکل چیپ
قبل
بعد
چهار فیلد زیر هم (مقصد، ورود، خروج، مهمان‌ها) و یک دکمه گرادیانتی نارنجی، در برابر یک فیلد مقصد با «۱۴ تا ۱۶ نوامبر» و «۲ مهمان» به شکل چیپ و یک دکمه گرد فلشی.
فرم چهارفیلدی از آدم می‌خواهد پیش از دیدن حتی یک مکان، همه تصمیم‌ها را بگیرد. بیشتر کسانی که اپ را باز میکنند هنوز آماده نیستند: دارند مرور میکنند. فرمی که یک‌سوم صفحه را می‌گیرد برایشان دیواری است.
تاریخ و مهمان بین جستجوها کم عوض می‌شوند، پس اصلاحیه آن‌ها را با مقادیر پیش‌فرض معقول به شکل چیپ نشان میدهد که هر وقت لازم شد قابل لمس باشند. مقصد تنها فیلدی است که باید تایپ شود. جفت ورود و خروج یک چیپ میشود، «۱۴ تا ۱۶ نوامبر»، چون هیچ‌کس اقامت را دو تاریخ جدا از هم نمی‌بیند.
اصلاح ۳: مکانها را نشان دهید، نه اسم‌ها را
قبل
بعد
«لیسبون، کیوتو، کیپ‌تاون، بالی، پاریس» به شکل قرص‌های متنی خاکستری، در برابر کاشی‌های عکس لیسبون و کیوتو با کشور زیر هر اسم و کاشی بعدی که از لبه سرک می‌کشد.
آدمها مقصد را با چشم انتخاب میکنند. کلمه‌ای مثل «کیوتو» از خواننده می‌خواهد مکان را تصور کند؛ عکس یک پاگودا در غروب این تصور را برایش انجام میدهد. همین کل کار این بخش است و قرص‌های متنی از پسش برنمی‌آیند.
کاشی بریدهشده در لبه راست عمدی است. بدون نیاز به فلش یا نقطه به خواننده می‌گوید این ردیف اسکرول میشود و با یک کشیدن انگشت مکان‌های بیشتری برای کشف هست.
اصلاح ۴: یک قیمت برای هر اقامت
قبل
بعد
یک تصویر کوچک با نشان -30%، پنج ستاره، شهر، $320 خط‌خورده، $224 برای هر شب، «+$38 مالیات و هزینه‌ها» و دو مزیت سبز، در برابر یک عکس بزرگ با امتیاز 4.8، نام هتل، «$224 هر شب» و «لیسبون، لغو رایگان».
کارت پیش‌نویس قیمت را همزمان چهار شکل نشان میدهد: قیمت قدیم، قیمت جدید، واحد و هزینه‌های اضافه، به‌علاوه نشان تخفیف روی عکس که برای بار پنجم همان را می‌گوید. خواننده باید اول حساب‌وکتاب کند تا بفهمد هتل را دوست دارد یا نه.
اصلاحیه یک عدد و یک جزئیات نشان میدهد. عکس بزرگ‌تر شده چون عکس است که اقامت را می‌فروشد. جزئیات انتخاب‌شده همان است که بیشترین نگرانی را برطرف می‌کند، یعنی لغو رایگان، و امتیاز عددی جای پنج ستاره نقاشی‌شده را گرفته که قابل مقایسه است.
اصلاحات کوچک‌تر
- چهار تب، نه پنج. کاوش، ذخیرهشدهها، سفرها و پروفایل. خانه و کاوش در یک تب، کاوش، ادغام شدند چون صفحه اصلی همان جایی است که کاوش اتفاق می‌افتد.
- کلمه‌هایی که مردم به کار میبرند. «Wishlist» شد «ذخیرهشدهها» و «Bookings» شد «سفرها»، کلماتی که مسافران واقعاً می‌گویند.
- یک رنگ تأکیدی. پیش‌نویس برای دکمه گرادیانت نارنجی، برای مزیت‌ها سبز و برای تخفیف‌ها قرمز به کار برده بود. اصلاحیه برای عمل‌ها از مشکی استفاده می‌کند و می‌گذارد عکس‌ها رنگ بیاورند.
- اسم‌های کوتاه‌تر. «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
