طراحی اپ تاکسی اینترنتی: صفحه اصلی یک اپ درخواست خودرو، قبل و بعد
صفحه اصلی یک اپ تاکسی اینترنتی با شش کنترل روی نقشه، یک بنر تبلیغاتی و دو فیلد آدرس، و همان صفحه پس از اصلاح. تک‌تک تغییرات کنار هم، دلیل هر کدام، و فایل رایگان Figma.
کسی که اپ تاکسی را باز میکند معمولاً جایی ایستاده و می‌خواهد جای دیگری باشد. پیش‌نویس اول زیر کار میکند، ولی پیش از اولین ضربه از کاربر زیادی می‌خواهد: نقشهای با شش کنترل شناور و یک بنر زرد، یک شیت با دو فیلد آدرس، شش سرویس در شش رنگ و یک ردیف چیپ. نسخه اصلاحشده همه قابلیت‌های مهم را نگه می‌دارد و فقط یک سؤال می‌پرسد.
کل صفحه، قبل و بعد
پیش‌نویس مبتدی
اصلاحشده
در سمت چپ، نقشه زیر کنترل‌ها دفن شده و شیت یک فرم است. در سمت راست، نقشه نقشه است و شیت یک فیلد، چهار ردیف و چهار سرویس دارد. نقشه هم کوتاه‌تر شد، از ارتفاع 380 px به 270 px، پس شیتی که مهم است از بالاتر شروع می‌شود.
| پیش‌نویس مبتدی | اصلاحشده | |
|---|---|---|
| کنترل‌های نقشه | ۶ عدد، در چهار شکل | ۲ |
| فیلدهای آدرس | ۲ فیلد و دکمه جابه‌جایی | ۱ فیلد، «کجا؟» |
| سرویسها | ۶ عدد، روی شش زمینه رنگی | ۴ عدد، در یک سبک |
| تبلیغ | بنر زرد با حروف درشت | یک ردیف، «کد NEWRIDE» |
| مکانهای اخیر | ۲ مورد، آدرس کامل در یک خط | ردیف‌هایی با نام و آدرس کوتاه |
| تب‌ها | ۵ | ۴ |
| حاشیه کناری | 14 px چپ، 12 px راست | 20 px در هر دو طرف |
| اندازه متن | 9 تا 12 px | 13 تا 17 pt |
اصلاح ۱: دو دکمه روی نقشه
قبل
بعد
شش کنترل در چهار شکل و یک بنر، در برابر یک منو و یک دکمه موقعیت.
پیش‌نویس یک مربع منو، یک دایره جستجو، یک مربع لایهها، یک قرص Traffic، یک پشته زوم و یک دایره سبز موقعیت را روی خیابان‌ها گذاشته، و یک بنر تبلیغاتی با حروف درشت هم در بالای نقشه. همه این‌ها چیزهایی‌اند که مسافر ممکن است بخواهد. هیچ‌کدام آن کاری نیست که مسافر برایش آمده، و با هم نقشهای را که کاربر می‌خواهد بخواند می‌پوشانند.
اصلاح، دو دکمه 44 px نگه می‌دارد: منو و موقعیت شما. دایره جستجو راه دومی به همان جستجویی بود که شیت از قبل دارد. بنر هم به شکل یک ردیف به شیت منتقل شد.
لایهها، Traffic و پشته زوم در این صفحه نیستند و این بازطراحی نشان نمی‌دهد کجا می‌روند، پس یک اپ واقعی باید برایشان جایی پیدا کند. زوم با دو انگشت روی نقشه به دو دکمه نیاز ندارد.
قاعده‌ای که می‌توانید تکرار کنید: روی نقشه فقط کنترل‌هایی بگذارید که آنچه همین الان می‌بینید را تغییر می‌دهند، و بقیه را به جای دیگری بسپارید.
اصلاح ۲: یک سؤال به‌جای دو فیلد
قبل
بعد
دو فیلد آدرس و یک دکمه جابه‌جایی، در برابر یک فیلد که می‌پرسد کجا.
پیش‌نویس یک فرم باز میکند: فیلد مبدأ با نقطه سبز، فیلد مقصد با نقطه سیاه و یک فلش جابه‌جایی. نقشه بالای آن از قبل یک نقطه آبی دارد که نشان می‌دهد مسافر کجاست، پس فیلد اول چیزی را می‌پرسد که صفحه خودش می‌گوید.
اصلاح در یک فیلد 52 px می‌پرسد «کجا؟». در سمت راست یک چیپ «اکنون» نشسته که جای زمان است: کسی که سفر را برای بعد می‌خواهد آن را عوض میکند و بقیه هرگز نمی‌خوانندش. دکمه جابه‌جایی همراه فیلد مبدأ رفت.
قاعده‌ای که می‌توانید تکرار کنید: همان یک چیزی را بپرسید که نمی‌دانید، و آنچه را می‌توانید حدس بزنید چیپی کنید که قابل تغییر باشد.
اصلاح ۳: چهار سرویس در یک سبک
قبل
بعد
شش سرویس روی شش رنگ، در برابر چهار سرویس روی یک خاکستری با یک سبز.
وقتی هر سرویس رنگ خودش را دارد، رنگ دیگر معنایی ندارد. شش کاشی پیش‌نویس سبز، نارنجی، آبی، بنفش، صورتی و فیروزه‌ای‌اند و هر آیکون رنگ کاشی خودش را تکرار میکند، با متن 9 تا 12 px. هیچ چیز در این ردیف نمی‌گوید مسافر معمولاً کدام را می‌خواهد.
اصلاح چهار سرویس، Ride، Package، Reserve و Rental را به شکل کاشیهای بزرگ روی یک خاکستری ملایم با آیکونهایی به سبز برند، #16A34A، رسم میکند. آن‌قدر پهن‌اند که هم بشود لمسشان کرد و هم خواندشان. Moto و XL در این صفحه اصلی نیستند، معاوضه‌ای که این بازطراحی پنهانش نمی‌کند، چون نشان نمی‌دهد به کجا می‌روند.
قاعده‌ای که می‌توانید تکرار کنید: بگذارید یک رنگ برند یعنی «این همان اپ است»، و شکل و آیکون گزینه‌ها را از هم جدا کنند.
اصلاح ۴: مکانهای ذخیرهشده به شکل ردیف، همراه آدرس
قبل
بعد
چیپ‌های بدون آدرس و دو خط بلند اخیر، در برابر ردیف‌هایی با نام، آدرس و هدف لمس.
چیپی که می‌گوید «خانه» فقط وقتی به مسافر می‌گوید کجا می‌رود که به آن اعتماد کند. چیپ‌های پیش‌نویس آدرسی نشان نمی‌دهند، و اخیرهای زیر آن‌ها خط‌های بلندی مثل «Ferry Building, The Embarcadero, San Francisco, CA 94111» هستند، با کد پستی و در 12 px.
اصلاح هر کدام را یک ردیف میکند: یک آیکون، نام با فونت ضخیم و یک آدرس کوتاه زیرش، «خانه، 24 Hayes St». Ferry Building یک مکان اخیر است، با «The Embarcadero» زیرش، و شهر و کد پستی حذف شده‌اند چون مسافر همین حالا در همان شهر است. تخفیف ۳۰٪ ردیف چهارم شد، با برچسب سبز و «کد NEWRIDE» زیرش، هم‌اندازه مکانها.
پیشنهاد هنوز آنجاست. فقط دیگر روی نقشه فریاد نمی‌زند.
قاعده‌ای که می‌توانید تکرار کنید: میانبر باید نشان بدهد به کجا می‌رود، و تبلیغ می‌تواند یک ردیف باشد.
اصلاح‌های کوچک‌تر
- یک لبه چپ. شیت پیش‌نویس 14 px از چپ و 12 px از راست استفاده می‌کرد. اصلاح، 20 px در هر دو طرف.
- یک رنگ تأکید. پیش‌نویس زرد را برای بنر، سبز را برای دکمه موقعیت و شش رنگ را برای سرویسها به کار برده بود. اصلاح سبز برند را برای تب فعال، آیکون سرویسها و برچسب پیشنهاد می‌گذارد، و خاکستری را برای بقیه.
- یک مقیاس متن واقعی. متن از 9 تا 12 px به اندازههای iOS یعنی 13 تا 17 pt رسید.
- چهار تب، نه پنج. خانه، سفرها، کیف پول، پیشنهادها و حساب به خانه، فعالیت، کیف پول و حساب تبدیل شدند. پیشنهادها حذف شد، چون پیشنهاد حالا یک ردیف در خانه است.
- نقشه کوتاه‌تر. ارتفاع نقشه از 380 px به 270 px رسید، پس سؤال بالاتر می‌نشیند.
اپ تاکسی خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| چند کنترل روی نقشه نشسته است؟ | هر کدام یک خیابان را میپوشاند |
| چیزی از مسافر می‌پرسید که صفحه از قبل می‌داند؟ | فیلد مبدأ نقطه آبی را تکرار میکند |
| آیا رنگ هر سرویس معنایی دارد؟ | اگر ندارد، یک رنگ استفاده کنید |
| آیا هر میانبر آدرسش را نشان می‌دهد؟ | چیپی که مقصدش را پنهان میکند یک حدس است |
| تبلیغ یک ردیف است یا بنر؟ | بنر نقشه را میپوشاند |
| آیا زمان یک چیپ است؟ | بیشتر سفرها همین الان هستند |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را به شکل کامپوننت دارد، هر اصلاح را به‌صورت جفت قبل و بعد، متغیرهای رنگ و سبک‌های متن iOS.
فایل رایگان Figma
صفحه اصلی اپ تاکسی، قبل و بعد
هر دو صفحه و تمام بخش‌های اصلاحشده به شکل کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش آن را در پیش‌نویس‌های خود کپی کنید.
FAQ
صفحه اصلی یک اپ تاکسی اینترنتی باید چه چیزی نشان بدهد؟
نقشهای با دو دکمه، یک فیلد «کجا؟» و چند میانبر در زیر آن. سرویسها، مکانهای ذخیرهشده و پیشنهادها جایشان در شیت است، نه روی نقشه.
یک صفحه نقشه باید چند کنترل داشته باشد؟
دو تا در صفحه اصلی کافی است: منو و موقعیت شما. لایهها، ترافیک و زوم میتوانند جای دیگری باشند، چون نقشهها با دو انگشت زوم میشوند.
فیلد جستجوی «کجا؟» را چطور طراحی کنیم؟
آن را یک فیلد بزرگ کنید که سؤال داخلش است و یک چیپ «اکنون» در سمت راست برای زمان. وقتی نقشه از قبل نشان می‌دهد کاربر کجاست، اول مبدأ را نپرسید.
یک اپ تاکسی چطور سرویسهایی مثل Ride، XL و Package را نشان بدهد؟
در یک سبک، به شکل کاشیهای بزرگ، با آیکونهایی به رنگ برند. چهار تا در صفحه اصلی جا میشوند؛ بقیه به جای مخصوص خودشان نیاز دارند.
کدهای تخفیف را در اپ تاکسی چطور نشان بدهیم؟
به شکل یک ردیف همسبک با مکانها، با یک عنوان کوتاه و کد زیر آن. بنر روی نقشه چیزی را که مسافران برای خواندنش آمدهاند میپوشاند.
یک اپ تاکسی از چه اندازه فونتی باید استفاده کند؟
مقیاس متن خود پلتفرم. صفحه اصلاحشده از اندازههای iOS بین 13 تا 17 pt استفاده میکند، با دکمههای نقشه 44 px.
منابع
- هر دو صفحه از خود ما هستند، در Figma طراحی و اندازه‌گیری شده‌اند. نقشه رسم برداری خودمان از خیابان‌ها، یک پارک و یک رودخانه کوچک است. Ferry Building و Oracle Park نشانه‌های عمومی سان‌فرانسیسکو هستند؛ آدرس‌های خانه و محل کار ساختگی‌اند. بدون عکس.
- Apple Human Interface Guidelines: Typography، برای اندازههای متن iOS که در صفحه اصلاحشده استفاده شده است.
- Apple Human Interface Guidelines: Accessibility، برای اندازه هدف لمس 44 pt.
- ابتدا به شکل کاروسل در 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
