طراحی اپلیکیشن دستور پخت: بازطراحی صفحه اصلی، قبل و بعد
صفحه اصلی یک اپلیکیشن دستور پخت با ظاهر آماتور: کادر جستجویی که چهار چیز را فهرست میکند، شش رنگ دستهبندی، حروف بزرگ سفید روی عکس و سه آیکون در هر ردیف. و همان صفحه بعد از اصلاح. تک‌تک تغییرات کنار هم و فایل رایگان Figma.
اپلیکیشن دستور پخت با بهترین دارایی ممکن شروع میشود: غذایی که خوب به نظر می‌رسد. پیش‌نویس اول زیر دستور پخت‌های واقعی و عکس‌های خوب دارد، اما بعد آن‌ها را زیر کادر جستجویی که چهار چیز را فهرست میکند، رنگین‌کمانی از دستهبندیها، حروف بزرگ ریز روی عکس اصلی و سه آیکون در هر ردیف خفه میکند. نسخه اصلاح‌شده همه محتوا را نگه می‌دارد و به غذا جا می‌دهد.
کل صفحه، قبل و بعد
پیش‌نویس آماتور
اصلاح‌شده
صفحه سمت چپ چیزهای زیادی برای عرضه دارد و همه را یک‌جا به شما میگوید. در سمت راست، همان دستورها به ترتیبی می‌رسند که آشپز دنبالشان می‌گردد: پیدا کردن، فیلتر کردن، انتخاب کردن و بعد مرور.
بشمارید یک نفر قبل از انتخاب شام چه چیزهایی باید بخواند. در پیش‌نویس: یک سلام با زیرخط، یک کادر جستجو، یک دکمه فیلتر، یک زنگ، چیپهای دستهبندی در شش رنگ، یک عنوان روی عکس، یک خط با پنج اطلاعات به حروف بزرگ، دو دکمه روی عکس، و بعد سه آیکون در هر یک از چهار ردیف. صفحه اصلاح‌شده در هر مرحله کمتر می‌خواهد و اعداد این را نشان می‌دهند.
| پیش‌نویس آماتور | اصلاح‌شده | |
|---|---|---|
| رنگ‌های دستهبندی | ۶ | ۱، روی چیپ انتخابشده |
| موارد فهرست‌شده در متن راهنمای جستجو | ۴ | ۲ |
| آیکون در هر ردیف فهرست | ۳ | ۲ |
| آیکون روی عکس اصلی | ۲ | ۱ |
| متن روی عکس اصلی | عنوان و ۵ اطلاعات | هیچ |
| تب‌ها | ۵ | ۴ |
| حاشیه کناری | ۱۴ px چپ، ۱۲ px راست | ۲۰ px در هر دو طرف |
| اندازه متن | ۸ تا ۱۸ px | ۱۱ تا ۲۲ pt |
اصلاح ۱: بگذارید جستجو بگوید چه پیدا میکند
قبل
بعد
متن راهنمایی که چهار چیز را فهرست میکند و جا کم می‌آورد، در برابر دو چیز و یک فیلتر.
متن راهنمای پیش‌نویس این است: «جستجوی دستور پخت، مواد، غذاهای ملل، ch...» و وسط کلمه چهارم بریده شده. متن راهنما تنها جمله‌ای است که کادر جستجو اجازه دارد بگوید، پس باید بگوید کادر چه کار میکند و باید جا بشود. فهرست پیش‌نویس جا نمی‌شود و راهنمای بریده‌شده مثل یک اشتباه خوانده میشود.
نسخه اصلاح‌شده دو چیزی را نام می‌برد که مردم واقعاً تایپ می‌کنند: دستور پخت یا مواد. بقیه چیزها، مثل نوع آشپزی یا رژیم، کار دکمه فیلتر کنار آن است.
دکمه فیلتر هم از مربع پر ترا کوتا به مربع سفید تغییر کرد. دکمه پر بلندترین صدا را در آن ردیف دارد و آن صدا مال فیلتر بود، نه جستجو. زنگ از این ردیف رفت و به سلام بالای صفحه آمد، پس ردیف شد یک جستجو و یک دکمه.
اصلاح ۲: یک سبک برای همه دستهبندیها
قبل
بعد
پنج دسته در پنج رنگ و هرکدام با یک آیکون، در برابر یک سبک و یک چیپ پر.
وقتی هر دسته رنگ خودش را دارد، رنگ‌ها دیگر معنایی ندارند. صبحانه هلویی است، ناهار سبز، شام بنفش. هیچ‌کدام به آشپز نمی‌گوید کدام روشن است و پیش‌نویس اصلاً حالت انتخابشده ندارد.
در نسخه اصلاح‌شده همه چیپ‌ها سفید و ساده‌اند و چیپ انتخابشده، «همه»، با ترا کوتای برند پر شده است. حالا رنگ فقط یک واقعیت را می‌رساند: چه چیزی روشن است.
چیپ‌ها بزرگ‌تر هم شده‌اند، پس لمس هرکدام آسان‌تر است، و ردیف در لبه راست که اسکرول میشود محو میشود. در پیش‌نویس ردیف ساده در لبه صفحه بریده میشود و «وگان» نصف شده است. محو شدن میگوید «بیشتر هم هست، بکشید». بریدن ناگهانی چیزی نمی‌گوید.
اصلاح ۳: اطلاعات می‌روند زیر عکس
قبل
بعد
عنوان و پنج اطلاعات با حروف بزرگ روی بشقاب روشن، در برابر عنوان و سه اطلاعات با آیکون روی کارت زیر آن.
پیش‌نویس عنوانی ۱۵ پیکسلی و خطی از حروف بزرگ سفید ۹ پیکسلی را روی بشقاب روشن و میز روشن می‌گذارد. کل ارزش عکس بشقاب است و متن درست روی آن نشسته، با تنها رنگی که در برابرش ناپدید میشود. این خط اطلاعاتی را دارد که آشپز برای تصمیم لازم دارد: زمان، سختی و تعداد نفرات. و همین سخت‌ترین بخش عکس برای خواندن است.
نسخه اصلاح‌شده متن را به کارتی زیر عکس می‌برد، با نوشته تیره. سه اطلاعاتی که تعیین می‌کنند امشب بپزیم یا نه جای خود را نگه می‌دارند، هرکدام با یک آیکون: ساعت برای ۳۰ دقیقه، نمودار میله‌ای برای آسان و دو نفر برای ۴ نفر. آدم آیکون‌ها را یک بار یاد می‌گیرد و بعد ردیف را با یک نگاه می‌خواند. کارت اصلاح‌شده کالری و امتیاز را حذف کرده که جایشان در صفحه خود دستور است.
دکمه‌های روی عکس از دو تا، قلب و اشتراک، به یک ذخیره رسیدند. این همان کاری است که آشپز از کارت دستور می‌خواهد، چون ذخیره کردن راهی است که دستور بعداً پخته میشود.
اصلاح ۴: ردیف یعنی یک دستور، یک زمان و یک سطح
قبل
بعد
چهار ردیف با نام سرآشپز و سه آیکون در هرکدام، در برابر سه ردیف با زمان، سطح و دو آیکون کمصدا.
هر ردیف پیش‌نویس یک تصویر بندانگشتی، یک نام، یک خط شامل زمان و سختی و «by Chef Anna» و سه آیکون دارد: قلب، نشانک و اشتراک. قلب و نشانک دو راه برای گفتن «این را دوست دارم» هستند و فهرست چهار ردیفی این انتخاب را دوازده بار چاپ میکند.
در نسخه اصلاح‌شده هر ردیف عکس بزرگ‌تری، نام و یک خط زمان و سختی دارد. سمت راست دو آیکون است، اشتراک و ذخیره، به خاکستری روشنی که تا وقتی لازمشان نشده سر راه نیست. دستور اول حالت ذخیره‌شده را نشان می‌دهد: نشانک با ترا کوتای برند پر میشود، همان رنگ دستهبندی انتخابشده. عنوان «Popular Recipes» به «محبوب» کوتاه شده، چون اپ از قبل درباره دستور پخت است.
فهرست اصلاح‌شده به‌جای چهار دستور سه دستور نشان می‌دهد، پس کارت بالای نوار تب جا دارد.
اصلاحات کوچک‌تر
- چهار تب، نه پنج. خانه، جستجو، ذخیره‌شده‌ها و پروفایل جای خانه، جستجو، ذخیره‌شده‌ها، برنامه‌ریز و پروفایل را گرفتند.
- یک حاشیه. پیش‌نویس ۱۴ px در چپ و ۱۲ px در راست داشت. نسخه اصلاح‌شده ۲۰ px در هر دو طرف و ۱۴ px میان بلوک‌ها دارد.
- سلام کوتاه‌تر. «سلام مایا! امروز دوست داری چی بپزی؟» شد «چی تو کاسه است، مایا؟».
- یک رنگ برند. ترا کوتا،
#C8553D، چیپ انتخابشده، نشانک ذخیره‌شده، تب فعال و برچسب‌های کوچک را علامت می‌زند. هیچ چیز دیگری رنگی نیست. - مقیاس واقعی متن. متن از ۸ تا ۱۸ px به اندازه‌های iOS یعنی ۱۱ تا ۲۲ pt رسید.
اپ دستور پخت خودتان را بازبینی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا متن راهنمای جستجو جا میشود و میگوید چه پیدا میکند؟ | راهنمای بریده‌شده مثل باگ خوانده میشود |
| آیا هر دسته رنگ متفاوتی دارد؟ | رنگ باید حالت را نشان بدهد، نه تنوع را |
| آیا متنی روی عکس غذا نشسته؟ | عکس غذا روشن است و متن سفید گم میشود |
| آیا زمان، سختی و تعداد نفرات در یک ردیف با آیکون‌اند؟ | تعیین می‌کنند امشب شب پختن هست یا نه |
| آیا هر ردیف فهرست بیش از دو عملیات دارد؟ | آیکون‌های تکراری نویز هستند |
| آیا مورد انتخابشده پر است و انتخاب‌نشده ساده؟ | کاربر باید ببیند چه چیزی روشن است |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را به‌صورت کامپوننت دارد، هر اصلاح را به‌صورت جفت قبل و بعد، متغیرهای رنگ و سبک‌های متن iOS.
فایل رایگان Figma
صفحه اصلی اپ دستور پخت، قبل و بعد
هر دو صفحه و تمام بخش‌های اصلاح‌شده به‌صورت کامپوننت Figma. رایگان، فقط مشاهده، آن را در پیش‌نویس‌های خودتان کپی کنید.
سؤالات متداول
صفحه اصلی یک اپ دستور پخت چه چیزی باید نشان بدهد؟
کادر جستجویی که میگوید چه پیدا میکند، ردیفی از دستهبندیها، یک دستور ویژه با زمان، سختی و تعداد نفراتش و فهرست کوتاهی از دستورهای محبوب. کالری، امتیاز و نام سرآشپز میتوانند در صفحه خود دستور باشند.
نوار جستجوی یک اپ دستور پخت چه بنویسد؟
با کمترین کلمهای که جا میشود بگوید چه پیدا میکند: «جستجوی دستور پخت یا مواد». فهرست بلند همه چیزهایی که ممکن است پیدا شود بریده میشود و بقیهاش جایش در فیلتر است.
چیپهای دستهبندی در اپ دستور پخت چه شکلی باشند؟
یک سبک برای همه، با چیپ انتخابشده که با رنگ برند پر میشود. بگذارید ردیف اسکرول شود و در لبه محو شود تا مردم ببینند بیشتر هم هست.
زمان و سختی یک دستور کجا برود؟
زیر عکس، در یک ردیف با یک آیکون کوچک برای هرکدام: ساعت برای زمان، سطح برای سختی و آدم‌ها برای تعداد نفرات. متن روی عکس غذا سخت خوانده میشود و غذا را پنهان میکند.
هر ردیف فهرست دستور چند آیکون داشته باشد؟
دو یا کمتر. ذخیره و اشتراک کافی است و خاکستری کمصدا نمیگذارد با غذا رقابت کنند.
منابع
- هر دو صفحه از خودمان است، در Figma طراحی و اندازه‌گیری شده. کاربر، سرآشپزها و فهرست دستورها برای این تمرین ساختگی‌اند.
- عکس‌ها از Pexels، توسط Tamra Creatives Agency، Willians Huerta، Kei Scampa، Ana Palade، adrian vieriu و Surendra Shrestha.
- Apple Human Interface Guidelines: Typography، برای اندازه‌های متن iOS که در صفحه اصلاح‌شده استفاده شده.
- W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum)، برای متن روی تصویر و پس‌زمینه‌ها.
- ابتدا به‌صورت کاروسل در 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
