طراحی اپ سفارش غذا: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپ سفارش غذا که هر بخشش فریاد می‌زند، و همان صفحه بعد از اصلاح. چهار تغییر اصلی، پنج تغییر کوچک‌تر، دلیل هر کدام و فایل رایگان Figma.
صفحه اصلی یک اپ سفارش غذا فقط یک کار دارد: یک آدم گرسنه را در چند ثانیه به یک رستوران برساند. پیش‌نویس اول زیر در همین کار شکست می‌خورد، نه چون یک بخشش زشت است، بلکه چون همهی بخش‌ها همزمان توجه می‌خواهند. راه‌حل، ویژگی تازه یا سبک تازه نبود. فقط چیزهایی را برداشتیم تا هر بخش یک حرف بزند.
کل صفحه، قبل و بعد
پیش‌نویس جونیور
اصلاح‌شده
بشمارید چشم قبل از رسیدن به اولین رستوران چه چیزهایی را باید پردازش کند. در سمت چپ: آدرس کامل خیابان، دو آیکون در هدر، نوار جستجو با دو آیکون دیگر، بنر گرادیان با سه خط متن و یک دکمه، نقطه‌های کاروسل، پنج حلقه در پنج رنگ، عنوان بخش با آیکون شعله، و سه نشان روی یک عکس. در سمت راست: نام یک مکان، یک سبد خرید، نوار جستجو، پنج کاشی، یک پیشنهاد و یک کارت.
هیچ ویژگی‌ای که در سمت چپ بود در سمت راست گم نشده. آدرس، جستجو، دستهبندیها، پیشنهاد و رستورانها همه هنوز هستند. فقط هر کدام دست از رقابت با بقیه کشیدند.
| پیش‌نویس جونیور | اصلاح‌شده | |
|---|---|---|
| حاشیه‌های کناری | ۱۲ px چپ، ۱۶ px راست | ۲۰ px در هر دو طرف |
| اندازه متن‌ها | ۹ تا ۳۰ px، بدون سیستم | استایل‌های متن iOS، ۱۱ تا ۲۲ pt |
| رنگ حلقه دستهبندیها | ۵ | ۱، فقط روی کاشی انتخابشده |
| نشان‌ها روی اولین کارت | ۳ | ۱ |
| واقعیت‌های زیر نام رستوران | ۶ | ۲ |
| تب‌ها | ۵ | ۴ |
اصلاح ۱: مقصد را با یک کلمه بگو
قبل
بعد
پیش‌نویس آدرس کامل خیابان، 221B Baker Street، را با فونت ریز و بریده‌شده وسط کلمه کنار یک پین نشان می‌دهد. نسخه اصلاح‌شده نامی را که کاربر به آن آدرس داده، «خانه»، درشت نشان می‌دهد، با یک فلش که می‌گوید قابل تغییر است.
هیچ‌کس اپ سفارش غذا را باز نمی‌کند که آدرس خودش را بخواند. فقط باید یک چیز را تأیید کند: این سفارش به جای درست می‌رود؟ برچسبی که خودش انتخاب کرده، خانه، محل کار، خانه مامان، سریع‌تر از نام خیابان جواب می‌دهد و چون یک کلمه است، در هر طولی خوانا می‌ماند. آدرس کامل یک تپ آن‌طرف‌تر، در صفحه ویرایش، جای دارد.
نسخه اصلاح‌شده آیکون پروفایل را هم از هدر برداشته. پیش‌نویس آن را دو بار داشت، یک بار بالا و یک بار به‌عنوان تب حساب کاربری. دو در به یک اتاق، آدم را به این فکر می‌اندازد که شاید به دو اتاق مختلف باز می‌شوند.
اصلاح ۲: یک شکل، یک حالت انتخاب
قبل
بعد
قبل، هر کدام از ۵ دستهبندی در یک دایره با حلقه رنگی خودش نشسته: زرد، سبز، آبی، صورتی، بنفش. بعد، کاشی‌ها یک شکل و یک قاب خنثی مشترک دارند و فقط کاشی انتخابشده، Pizza، قرمز برند را روی حاشیه و برچسبش می‌گیرد.
رنگ در یک رابط کاربری سیگنال است، و پنج رنگ یعنی پنج سیگنال. کسی که ردیف را اسکن می‌کند باید بپرسد سبز یعنی چه و چرا سوشی آبی است. جواب این است که هیچ معنایی ندارد، و مشکل دقیقاً همین است: تزئینی که شبیه اطلاعات است.
وقتی رنگ فقط برای یک چیز خرج شود، معنا پیدا می‌کند. یک کاشی قرمز بدون هیچ کلمه‌ای می‌گوید «اینجایی». بقیه‌اش را عکس‌ها انجام می‌دهند، چون عکس غذا خودش رنگارنگ‌ترین چیز صفحه است و کمک لازم ندارد.
اصلاح ۳: یک پیشنهاد، یک پیام
قبل
بعد
بنر پیش‌نویس «MEGA SALE!»، پیشنهاد، کد، حداقل سفارش و «T&C apply» را با فونت ریز روی هم می‌چیند و بعد یک دکمه می‌گذارد. نسخه اصلاح‌شده 50% OFF را نگه می‌دارد و سه چیز می‌گوید: چه زمانی (فقط امروز)، برای چه کسی (اولین سفارش بالای ۲۰ دلار) و کد، به‌شکل دکمه‌ای که میشود کپی‌اش کرد.
مشکل هیچ‌وقت خود پیشنهاد نبود. ۵۰ درصد تخفیف دلیل خوبی برای سفارش است و نسخه اصلاح‌شده آن را با همان اندازه نگه می‌دارد.
آنچه عوض شد هر چیزی است که دور آن بود. «MEGA SALE!» و «50% OFF» یک حرف را دو بار می‌زدند. متن ریز چهار واقعیت را با فونت ۹ px در یک خط چپانده بود و با خط‌های عمودی جدا کرده بود. دکمه «Order now» جایی برای رفتن نداشت، چون هنوز هیچ رستورانی مشخص نشده که از آن سفارش داده شود.
حالا کد خودش اکشن است. تپ روی آن YUMMY50 را کپی می‌کند، که تنها چیزی است که کاربر باید از این بنر تا صفحه پرداخت با خودش ببرد. شرایط هم به صفحه پرداخت می‌روند، جایی که به کار می‌آیند.
تصویر هم عوض شد. پیش‌نویس برگر را در یک دایره بریده و روی گرادیان نارنجی شناور کرده بود. نسخه اصلاح‌شده آن را روی قرمز برند عکاسی می‌کند، تا غذا روی خود کارت بنشیند، نه در یک استیکر روی آن.
اصلاح ۴: یک نشان، دو واقعیت
قبل
بعد
قبل، عکس سه نشان دارد (ارسال رایگان، ۲۰٪ تخفیف، تبلیغاتی) و متن زیر آن انواع غذا، زمان تحویل، هزینه ارسال، سطح قیمت، حداقل سفارش و ساعت کاری را فهرست می‌کند. بعد، یک نشان، نام، امتیاز و دو واقعیت: چقدر طول می‌کشد و چقدر هزینه دارد.
کارت رستوران در یک فهرست تقریباً در یک ثانیه خوانده میشود، و در همان ثانیه آدم دو چیز را تصمیم می‌گیرد: این غذا را می‌خواهم؟ و ارزش صبر و هزینه ارسال را دارد؟ کارت اصلاح‌شده دقیقاً به همین دو جواب می‌دهد. عکس به اولی جواب می‌دهد. «۲۵ تا ۳۵ دقیقه، ارسال ۲٫۹۹ دلار» به دومی.
هر چیز دیگر روی کارت قدیمی اطلاعات واقعی است، اما اطلاعات نگاه اول نیست. فهرست انواع غذا از روی عکس هم معلوم است. حداقل سفارش ۱۵ دلار و بسته شدن ساعت ۱۱ شب فقط بعد از انتخاب مهم می‌شوند، پس جایشان در صفحه خود رستوران است.
«تبلیغاتی» به درد کسب‌وکار می‌خورد، نه مشتری، و سه نشان کنار هم همدیگر را خنثی میکنند. یک نشان، که بر اساس اولویت انتخاب شده، خوانده میشود.
پنج اصلاح کوچک‌تر
چهار بخش بالا بخش‌های بزرگ بودند. این پنج تغییر هم به همان اندازه عمدی‌اند:
- یک حاشیه. پیش‌نویس ۱۲ px چپ و ۱۶ px راست استفاده کرده بود، پس هیچ‌چیز با هیچ‌چیز هم‌تراز نبود. نسخه اصلاح‌شده ۲۰ px در هر دو طرف دارد و هر لبه‌ی صفحه روی همان خط می‌نشیند.
- یک سیستم تایپ. پیش‌نویس متن‌هایی از ۹ تا ۳۰ px داشت بدون هیچ پله‌ای بین‌شان. نسخه اصلاح‌شده از استایل‌های متن iOS استفاده می‌کند، از ۱۱ تا ۲۲ pt، پس هر اندازه نقشی دارد و هیچ‌چیز آن‌قدر ریز نیست که خوانده نشود.
- نوار جستجوی آرام‌تر. جستجوی پیش‌نویس داخلش میکروفون و آیکون فیلتر داشت و placeholderای آن‌قدر بلند که بریده می‌شد. نسخه اصلاح‌شده یک آیکون و یک راهنمای کوتاه‌تر نگه می‌دارد: «غذاها، رستورانها یا آشپزی‌ها».
- بدون نقطه‌های کاروسل. نقطه‌ها زیر بنر قول بنرهای بیشتر می‌دهند. بیشتر مردم هرگز آن‌ها را سوایپ نمی‌کنند و نقطه‌ها فقط یک چیز دیگر برای نگاه کردن اضافه میکنند. یک پیشنهاد نقطه لازم ندارد.
- چهار تب، نه پنج. علاقه‌مندی‌ها از نوار تب رفت. ذخیره کردن هنوز روی قلب هر کارت انجام میشود و چهار تب به هر کدام جای بیشتر و هدف راحت‌تری برای لمس می‌دهد.
صفحه اصلی خودتان را ممیزی کنید
صفحه اصلی اپ خودتان را کنار این چک‌لیست بگیرید. هر «نه» یک بخش است که دارد فریاد می‌زند.
| سؤال | چرا مهم است |
|---|---|
| آیا کسی در یک نگاه می‌فهمد سفارش کجا تحویل داده میشود؟ | هر بار آن را چک میکنند؛ آن را یک کلمه کنید |
| آیا رنگ در هر جا که استفاده شده معنایی دارد؟ | رنگ تزئینی مثل سیگنال خوانده میشود |
| آیا هر تبلیغ یک پیشنهاد را فقط یک بار می‌گوید؟ | ادعاهای تکراری و متن ریز نادیده گرفته می‌شوند |
| آیا یک کارت را میشود در یک ثانیه قضاوت کرد؟ | دو واقعیتی را انتخاب کنید که سفارش را تعیین میکنند |
| آیا همه لبه‌ها روی یک حاشیه هم‌تراز هستند؟ | ناهم‌ترازی ناتمام به نظر می‌رسد |
| آیا هر اندازه متن از یک مقیاس آمده؟ | اندازه‌های تصادفی سلسله‌مراتب را غیرممکن میکنند |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را به‌صورت کامپوننت دارد، هر اصلاح را به‌صورت جفت قبل و بعد، متغیرهای رنگ و استایل‌های متن iOS.
فایل رایگان Figma
صفحه اصلی اپ سفارش غذا، قبل و بعد
هر دو صفحه و هر بخش اصلاح‌شده به‌صورت کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش آن را در پیش‌نویس‌های خودتان کپی کنید.
سؤالات متداول
صفحه اصلی یک اپ سفارش غذا اول باید چه چیزی نشان بدهد؟
مقصد سفارش، یک نوار جستجو، دستهبندیها و یک پیشنهاد، و بعد رستورانها. هر کارت رستوران به یک عکس، نام، امتیاز، زمان تحویل و هزینه ارسال نیاز دارد.
یک کارت رستوران باید چند نشان داشته باشد؟
یکی. سه نشان کنار هم همدیگر را خنثی میکنند؛ آن را انتخاب کنید که برای مشتری از همه مهمتر است، مثلاً ارسال رایگان.
آیا یک اپ غذا باید برای هر دستهبندی رنگ متفاوتی استفاده کند؟
نه. به همهی دستهبندیها یک شکل و یک قاب خنثی بدهید و رنگ برند را فقط برای دسته انتخابشده خرج کنید، تا رنگ یعنی «اینجایی».
چطور یک بنر تبلیغاتی طراحی کنیم که تبدیل بگیرد؟
یک پیشنهاد را یک بار بگویید: تخفیف، برای چه کسی و کد. کد را اکشن کنید، با تپ قابل کپی، و شرایط را به صفحه پرداخت ببرید.
یک اپ سفارش غذا چند تب باید داشته باشد؟
حداکثر چهار یا پنج. اینجا چهار تب (خانه، جستجو، سفارشها، حساب کاربری) به هر تب جای بیشتری داد و ذخیره کردن با قلب روی هر کارت انجام میشود.
منابع
- هر دو صفحه از خودمان هستند، در Figma طراحی و اندازه‌گیری شده‌اند. اندازه‌های جدول از فایل‌های Figma آمده‌اند.
- عکس‌های غذا از Unsplash، از Fernando Andrade، sina piryae، Mahmoud Fawzy، Anna Pelzer، Alana Harris، Thimotius Timmy و Poul Hoang. برگر تبلیغاتی از Elements Interactive در Pexels، که پس‌زمینه استودیویی‌اش با رنگ قرمز برند جایگزین شده، با رنگ و بدون AI.
- اندازه‌های متن iOS از Human Interface Guidelines، Typography اپل.
- اولین بار به‌صورت کاروسل در 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
