طراحی اپ اجاره خودرو: بازطراحی صفحه اصلی اجاره، قبل و بعد
صفحه اصلی یک اپ اجاره خودرو که با فرم پنج‌فیلدی باز میشود، بنری دارد که به هیچچیز اشاره نمیکند و عکس‌های ۱۰۰ در ۶۰ برای ماشین‌ها، و همان صفحه اصلاح‌شده: یک فیلد جستجو، تخفیف روی یک ماشین واقعی، یک ردیف نوع خودرو و عکس‌های تمامعرض. هر تغییر کنار هم، با فایل رایگان Figma.
صفحه اصلی یک اپ اجاره فقط یک کار دارد: راننده را به ماشینی برساند که می‌خواهد. پیش‌نویس اول زیر هر چیزی که راننده لازم دارد در خودش دارد، اما با یک فرم پنج‌فیلدی باز میشود، در بنری که به هیچچیز اشاره نمیکند فریاد می‌زند «۲۵٪ تخفیف»، و ماشین‌ها را آخر از همه می‌گذارد، با ابعاد ۱۰۰ در ۶۰ پیکسل و مشخصاتی با متن ۸ پیکسلی.
نسخه اصلاح‌شده همه امکانات را نگه می‌دارد و ماشین‌ها را اول می‌گذارد. چیدمان آن از Turo پیروی میکند: زمینه سفید، یک فیلد جستجو و کارتهای تمامعرض ماشین با قیمت زیر عکس. هر تغییر زیر چیزی است که می‌توانید کپی کنید.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاح‌شده
در سمت چپ، ماشین‌ها کوچک‌ترین چیز صفحه‌اند. قبل از اینکه راننده حتی یکی را ببیند، از پنج فیلد فرم، یک چک‌باکس، یک دکمه، یک بنر و سه منوی کشویی رد میشود. هر ماشین یک بندانگشتی ۱۰۰ در ۶۰ است با مشخصات ۸ پیکسلی و دکمه BOOK.
در سمت راست، صفحه به ترتیبی خوانده میشود که راننده تصمیم می‌گیرد: کجا، چه نوعی، کدام ماشین. جستجو یک فیلد ۴۸ پیکسلی است، عکس‌ها ۳۵۰ در ۱۹۰ هستند و متن‌ها ۱۳ تا ۱۸ پیکسل‌اند، در برابر ۸ تا ۱۵ پیکسل در پیش‌نویس.
چه چیزی تغییر کرد، با عدد
| پیش‌نویس تازه‌کار | اصلاح‌شده | |
|---|---|---|
| جستجو | پنج فیلد (تحویل، بازگشت، دو تاریخ، سن راننده) و یک دکمه | یک فیلد ۴۸ پیکسلی با تاریخها در لبه راست |
| تخفیف | بنر تمامعرض با «!!!» و «T&C apply» | برچسب ۲۵٪ تخفیف روی ماشین، ۸۹ دلار در روز با ۱۱۹ دلار خطخورده |
| فیلترها | سه منوی کشویی: نوع، قیمت، ظرفیت | یک ردیف چیپ ۳۴ پیکسلی که از لبه بیرون می‌رود و سوایپ میشود |
| ماشین‌ها | عکس ۱۰۰ در ۶۰، خطوط مشخصات ۸ پیکسلی، دکمه‌های BOOK با حروف بزرگ | عکس ۳۵۰ در ۱۹۰، نام و قیمت زیر آن |
| حاشیه‌ها | ۱۴ چپ، ۱۲ راست | ۲۰ از هر دو طرف، ۱۴ بین بلوک‌ها |
| تب‌ها | پنج تا، آیکن‌های پر و خطی قاطی | چهار تا، در نواری شناور که ماشین سوم زیر آن می‌رود |
اصلاح ۱: فرم را در یک فیلد جمع کنید
قبل
بعد
فرم «یافتن خودروی اجاره‌ای» با محل تحویل، محل بازگشت، تاریخ تحویل، تاریخ بازگشت، چک‌باکس سن راننده با لینک تغییر، دکمه نارنجی جستجوی خودرو و یک خط متن ریز. در برابر یک فیلد گرد: ذره‌بین، تحویل در SFO، و ۸ تا ۱۰ نوامبر در لبه راست.
پیش‌نویس از راننده می‌خواهد قبل از دیدن حتی یک ماشین فرم پر کند. بیشتر پاسخ‌ها از قبل معلوم‌اند: محل بازگشت همان محل تحویل است، سن ۲۵ به بالا است و تاریخها همین آخر هفته‌اند. فرم باز هم همه را با وزن یکسان می‌پرسد، پس چیزی که راننده باید تصمیم بگیرد بیشتر از چهار موردی که به آن‌ها دست نمی‌زند توجه نمی‌گیرد.
صفحه اصلاح‌شده دو پاسخ مهم را نگه می‌دارد، کجا و کی، و آن‌ها را در یک فیلد می‌گذارد. این همان الگوی فیلد مقصد در Uber است. روی آن بزنید تا برگهای با محل بازگشت، ساعت بازگشت و سن راننده باز شود. چیزی حذف نشده، فقط یک ضربه دورتر رفته است.
قاعده قابل استفاده مجدد: پیش‌فرض‌ها را نشان بدهید، فقط چیزی را بپرسید که تغییر میکند.
اصلاح ۲: تخفیف را روی یک ماشین واقعی بگذارید
قبل
بعد
یک بنر نارنجی تمامعرض: تا ۲۵٪ تخفیف این آخر هفته!!! با *T&C apply در سمت راست. در برابر یک کارت بلند ماشین: برچسب ۲۵٪ تخفیف روی عکس، Sport Coupe، ۲ نفره و اتوماتیک، ۸۹ دلار در روز و ۱۱۹ دلار خطخورده.
بنری که میگوید «تا ۲۵٪ تخفیف» نمی‌گوید روی چه چیزی. راننده باید اسکرول کند و حدس بزند تخفیف مال کدام ماشین است، و سه علامت تعجب با «T&C apply» در متن ۱۰ پیکسلی بیشتر شبیه هشدار است تا پیشنهاد.
در صفحه اصلاح‌شده تخفیف روی ماشینی نشسته که به آن تعلق دارد. برچسب کوچکی روی عکس میگوید ۲۵٪ تخفیف و خط قیمت ۸۹ دلار در روز را نشان می‌دهد با ۱۱۹ دلار قدیمی کنارش. ۱۱۹ منهای ۲۵٪ میشود ۸۹٫۲۵، پس عدد صادق است و تخفیف بالاخره چیزی برای فروختن دارد. Turo هم همین کار را میکند، با تخفیف روی خود آگهی نه بالای آن.
قاعده قابل استفاده مجدد: تخفیف به یک شیء نیاز دارد. آن را به چیزی بچسبانید که تخفیف می‌خورد.
اصلاح ۳: سه منوی کشویی را با یک ردیف عوض کنید
قبل
بعد
سه منوی کشویی هم‌اندازه با عنوان‌های نوع، قیمت و ظرفیت، هرکدام با یک فلش. در برابر یک ردیف چیپ قرصی: «همه» انتخاب‌شده با رنگ مشکی، بعد برقی، SUV، کوپه و کانورتیبل که از لبه راست بیرون می‌زنند.
منوی کشویی گزینه‌هایش را تا وقتی لمس نشود پنهان میکند، پس راننده باید «نوع» را باز کند تا بفهمد برقی، SUV و کوپه وجود دارند. کنار هم بودن این سه تا هم به قیمت و ظرفیت همان وزنی را می‌دهد که به تنها فیلتر پرکاربرد، یعنی نوع خودرو، داده شده.
چیپ‌ها گزینه‌ها را بدون لمس نشان می‌دهند. چیپ انتخاب‌شده مشکی پر است، ردیف سوایپ میشود و آخرین چیپ را لبه صفحه می‌برد، که به راننده میگوید گزینه‌های بیشتری هست. قیمت و ظرفیت هنوز هستند و حالا از فیلترهای فیلد جستجو باز می‌شوند.
قاعده قابل استفاده مجدد: اگر یک فیلتر پنج مقدار یا کمتر دارد، آن‌ها را نشان بدهید. پشت منو پنهانشان نکنید.
اصلاح ۴: به هر ماشین یک عکس تمامعرض بدهید
قبل
بعد
چهار ردیف زیر «ماشین‌های محبوب»، هرکدام با عکس ۱۰۰ در ۶۰، نام، یک خط مشخصات ۸ پیکسلی، قیمت و دکمه نارنجی BOOK. در برابر دو کارت تمامعرض: عکس ۳۵۰ در ۱۹۰ با یک قلب، بعد نام و قیمت در یک خط و یک خط جزئیات زیرش.
محصول همین است و پیش‌نویس کمترین جا را به آن می‌دهد. در ۱۰۰ در ۶۰ یک ماشین فقط یک شکل رنگی است. خط مشخصات ظرفیت، گیربکس، سوخت، زمان ۰ تا ۶۰، بیمه و امتیاز را در ۸ پیکسل فشرده میکند، پس هیچ‌کدام خوانا نیست و همه با قیمت رقابت می‌کنند.
کارت اصلاح‌شده به ماشین عکس ۳۵۰ در ۱۹۰ با گوشه‌های گرد می‌دهد و نام و قیمت روزانه را در یک خط می‌گذارد. زیرشان یک خط جزئیات ۱۳ پیکسلی است، ظرفیت و گیربکس. دکمه BOOK رفته چون کل کارت دکمه است: روی آن بزنید و صفحه خود ماشین مشخصات، امتیازها و رزرو را نشان می‌دهد.
قاعده قابل استفاده مجدد: فهرست محصولات یعنی فهرست عکس‌ها. هر چیزی که عکس، نام یا قیمت نیست یک ضربه عمیق‌تر برود.
اصلاحات کوچک‌تر
- یک رنگ برند. نارنجی (
#FF5A1F) فقط برچسب ۲۵٪ تخفیف را علامت می‌زند و هیچ چیز دیگر را. پیش‌نویس آن را روی بنر، دکمه جستجو، چک‌باکس، لینک تغییر، چهار دکمه BOOK و تب فعال استفاده کرده بود. - حاشیه بزرگ‌تر. ۲۰ پیکسل از هر دو طرف به‌جای ۱۴ چپ و ۱۲ راست، با ۱۴ بین بلوک‌ها.
- هدر آرام‌تر. قلب و زنگ در پیش‌نویس کنار لوگو نشسته‌اند. هدر اصلاح‌شده زنگ را نگه می‌دارد و قلب حالا تب ذخیره‌شده‌هاست.
- نوار تب شناور. چهار تب (کاوش، سفرها، ذخیره‌شده‌ها، پروفایل) در نواری شناور با ارتفاع ۶۲ پیکسل، و ماشین سوم زیر آن می‌رود، که میگوید صفحه ادامه دارد.
- یک سبک آیکن. آیکن‌های پر و خطی در نوار تب پیش‌نویس قاطی بودند، حالا همه خطی‌اند.
- نام‌هایی که با کار می‌خوانند. رزروها شد سفرها، و جستجو شد همان فیلد بالای صفحه.
- متن کمتر. «ماشین هفته» و خط ۰ تا ۶۰ حذف شدند، چون هیچ‌کدام به انتخاب ماشین کمک نمی‌کردند.
اپ اجاره خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| چند فیلد بین راننده و اولین ماشین فاصله انداخته؟ | هر فیلد یک دلیل برای رفتن است |
| آیا صفحه پاسخ‌هایی را می‌پرسد که از قبل می‌داند؟ | پیش‌فرض‌ها را باید نشان داد، نه پرسید |
| تخفیف شما به چه چیزی اشاره میکند؟ | تخفیف بدون شیء مثل نویز خوانده میشود |
| آیا مقادیر فیلتر پشت منوی کشویی پنهان‌اند؟ | پنج گزینه در یک ردیف جا میشود |
| عکس ماشین چقدر عرض دارد؟ | ماشین چیزی است که مردم می‌خرند |
| آیا کارت دکمه لازم دارد یا خود کارت دکمه است؟ | هدف لمسی به اندازه کارت راحت‌تر زده میشود |
| رنگ برند شما چند کار را علامت می‌زند؟ | هر رنگ یک کار |
فایل Figma را بگیرید
فایل رایگان شامل پیش‌نویس تازه‌کار، صفحه اصلاح‌شده و هر بخش به‌صورت کامپوننت است.
فایل رایگان Figma
بازطراحی صفحه اصلی اجاره خودرو، قبل و بعد
هر دو صفحه و هر بخش به‌صورت کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش آن را در پیش‌نویس‌های خود کپی کنید.
سوالات متداول
صفحه اصلی اپ اجاره خودرو را چطور باید طراحی کرد؟
با یک فیلد جستجو شامل محل تحویل و تاریخها شروع کنید، بعد یک ردیف نوع خودرو، بعد کارتهای تمامعرض ماشین با نام و قیمت زیر هر عکس. محل بازگشت، ساعت بازگشت و سن راننده را یک ضربه پشت فیلد جستجو نگه دارید.
جستجوی اجاره خودرو باید چند فیلد داشته باشد؟
به اندازهای که صفحه اول لازم دارد: کجا و کی. محل بازگشت، ساعت بازگشت و سن راننده معمولاً پیشفرض میمانند، پس میتوانند در برگهای باشند که از فیلد جستجو باز میشود.
تخفیف اجاره خودرو کجا باید باشد؟
روی ماشینی که شامل آن میشود. یک برچسب روی عکس و قیمت قدیمی خطخورده کنار قیمت جدید، مثل ۱۱۹ دلار و ۸۹ دلار در روز، به راننده میگوید چه چیزی و چقدر تخفیف خورده. بنری که به هیچچیز اشاره نمیکند این کار را نمیکند.
نوع خودرو باید منوی کشویی باشد یا چیپ؟
چیپ، وقتی حدود پنج گزینه دارید. یک ردیف قابل سوایپ همه، برقی، SUV، کوپه و کانورتیبل را بدون لمس نشان می‌دهد، و چیپی که لبه صفحه می‌بُرد نشان می‌دهد گزینه‌های بیشتری هست.
عکس ماشین در اپ اجاره چقدر باید بزرگ باشد؟
تمامعرض ستون، حدود ۳۵۰ در ۱۹۰ پیکسل روی گوشی. بندانگشتی ۱۰۰ در ۶۰ ماشین را به یک شکل رنگی تبدیل میکند و راننده نمیتواند دربارهاش قضاوت کند.
منابع
- هر دو صفحه ساخته خودمان‌اند، در Figma طراحی و اندازه‌گیری شده‌اند. اپ، Torque، قیمت‌ها و مشخصات ساختگی‌اند و هیچ مارک یا مدلی نام برده نشده است. چیدمان از Turo پیروی میکند: زمینه سفید، یک فیلد جستجو و کارتهای تمامعرض ماشین با قیمت زیر عکس. جستجوی تک‌فیلدی از فیلد مقصد در Uber پیروی میکند.
- ۱۱۹ منهای ۲۵٪ میشود ۸۹٫۲۵، که به‌صورت ۸۹ دلار در روز نشان داده شده است.
- آیکن‌ها از Phosphor (MIT) هستند. نوار وضعیت از روی یک اسکرین‌شات اندازه‌گیری‌شده واقعی iPhone کشیده شده است.
- عکس‌ها از Pexels هستند: Dextar Studio، Jae Park، miata7 MX-5، Furkan Ceylan و Can AGBULUT.
- ابتدا به‌صورت کاروسل در 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
