طراحی اپلیکیشن فروشگاه گیاه: بازطراحی صفحه اصلی فروشگاه آنلاین
صفحه اصلی یک اپ فروشگاه گیاه با طراحی مبتدی: چهار آیکون در هدر، سه فیلتر کشویی و هفت چیز زیر هر عکس، و همان صفحه پس از اصلاح. هر تغییر کنار هم، دلیل پشت هر کدام و فایل رایگان Figma.
فروشگاه گیاه بخش آسان کار را حل‌شده دارد: محصولاتش خوب عکس می‌افتند. پیش‌نویس اول زیر گیاه‌های واقعی و عکس‌های واقعی دارد، ولی همه را زیر یک هدر شلوغ، سه فیلتر کشویی، یک بلوک بلند نکات نگهداری و هفت چیز زیر هر کارت دفن می‌کند. اصلاح، همه امکانات را نگه می‌دارد و جا را به گیاه‌ها می‌دهد.
کل صفحه، قبل و بعد
پیش‌نویس مبتدی
اصلاح‌شده
در سمت چپ، خریدار باید از میان یک هدر، یک نوار فیلتر، سه جمله توصیه و انبوهی از جزئیات محصول بگذرد تا یک گیاه کامل دیده شود. در سمت راست، اولین گیاه‌ها درست بعد از سه بلوک کوتاه ظاهر می‌شوند، هر کارت یک گیاه کامل با قیمت است و سبز فقط یک کار دارد: نشان دادن چیزهای قابل لمس.
حراج در هر دو صفحه می‌ماند. پیله‌آ ۲۴٫۹۹ دلار است با ۳۱٫۰۰ خط‌خورده و نخل سالنی ۲۸٫۰۰ دلار با ۳۵٫۰۰ خط‌خورده. فروشگاه، قیمت‌ها و نظرها برای این تمرین ساختگی‌اند؛ گیاه‌ها واقعی‌اند.
| پیش‌نویس مبتدی | اصلاح‌شده | |
|---|---|---|
| آیکون‌های کنار لوگو در هدر | ۴ | ۲ |
| فیلترها | ۳ منوی کشویی و یک لینک مرتب‌سازی | ۴ چیپ قابل لمس |
| نکات نگهداری | ۳ جمله بلند | ۳ واقعیت کوتاه با آیکون |
| چیزهای زیر عکس هر کارت | ۷ | ۲، به‌علاوه یک دکمه افزودن |
| تب‌ها | ۵ | ۴ |
| حاشیه کناری | ۱۴ px چپ، ۱۲ px راست | ۲۰ px در هر دو طرف |
| اندازه متن‌ها | ۸ تا ۲۰ px | ۱۱ تا ۲۰ pt |
اصلاح ۱: لوگو، جستجو و سبد خرید، و بس
قبل
بعد
یک منو، لوگو و سه آیکون کوچک، در برابر همان لوگو با دو دکمه گرد بزرگ.
هدر پیش‌نویس یک منو، لوگو، جستجو، قلب و سبد خرید دارد. قلب همان علاقه‌مندی‌هاست و صفحه اصلاح‌شده برای آن تبی به نام «ذخیره‌شده‌ها» در نظر گرفته، پس دیگر لازم نیست قلب در هدر زندگی کند. سبد خرید جایش را حفظ می‌کند چون تنها کنترلی است که خریدار انتظار دارد بالای یک فروشگاه پیدا کند و نشانش تعداد اقلام را نشان می‌دهد.
آیکون‌های باقی‌مانده بزرگ‌ترند: دو دکمه ۴۴ px به‌جای چهار آیکون کوچک. گوشی با یک دست نگه داشته می‌شود و هدف بزرگ‌تر راحت‌تر لمس می‌شود. لوگو در هر دو صفحه همان وردمارک است و نکته همین است: هدر با برداشتن چیزها اصلاح شد، نه با تغییر ظاهر برند.
نشان از قرمز به سبز برند تغییر کرد. نقطه قرمز یعنی چیزی خراب یا فوری است. تعداد اقلام هیچ‌کدام نیست.
اصلاح ۲: فیلترهایی که دیده می‌شوند، نه منوی کشویی
قبل
بعد
دسته، قیمت و اندازه به شکل منوهای کشویی بسته به‌علاوه یک لینک مرتب‌سازی، در برابر آپارتمانی، فضای باز، ساکولنت و دوستدار حیوانات خانگی به شکل چیپ، با آپارتمانی انتخابشده.
منوی کشویی گزینه‌هایش را پنهان می‌کند. برای استفاده، خریدار باید آن را لمس کند، فهرستی بخواند، انتخاب کند و فهرست دوباره بسته شود. سه منوی کشویی یعنی سه بار این رفت‌وبرگشت پیش از آنکه حتی یک گیاه روی صفحه عوض شود. این منوها فقط می‌گویند چه نوع فیلتری وجود دارد، نه اینکه داخلش چیست.
چیپها گزینهها را آشکار نشان میدهند. آپارتمانی، فضای باز، ساکولنت و دوستدار حیوانات خانگی همان سؤال‌هایی هستند که خریدار گیاه واقعاً دارد، پس یک لمس به یکی از آن‌ها جواب می‌دهد و چیپ سبزِ انتخابشده وضعیت فعلی را نشان می‌دهد. چهار چیپ در ردیف ۳۵۰ px با ۶ px فضای اضافه جا می‌شوند، پس هیچ‌کدام بریده نمی‌شود و اسکرول هم لازم نیست.
اصلاح ۳: کارتی که یک گیاه کامل است
قبل
بعد
یک عکس، یک نشان، یک قلب، دو نام، یک قیمت، ستاره‌ها، تعداد نظرها و یک دکمه تمام‌عرض، در برابر یک عکس، یک نام کوتاه، یک قیمت و یک دکمه گرد.
کارت پیش‌نویس هفت چیز را زیر عکس روی هم می‌چیند: نام لاتین گیاه، نام رایج، قیمت، قیمت قدیمی، ستاره‌ها، تعداد نظرها و دکمه تمام‌عرض افزودن به سبد. روی خود عکس هم یک نشان تخفیف و یک قلب نشسته است. همه این‌ها در کارتی به عرض نصف صفحه.
اصلاح دو خط و یک دکمه نگه می‌دارد. نام کوتاه است («Pilea»، «Calathea») و قیمت زیرش می‌آید، با قیمت قدیمی خط‌خورده جایی که حراج هست. یک دکمه گرد به‌علاوه جای نوار پهن افزودن به سبد را می‌گیرد، چون علامت به‌علاوه روی کارت محصول الگویی است که خریدارها از قبل می‌شناسند.
عکس‌ها هم تغییر کردند. برش‌های پیش‌نویس گیاه‌ها را می‌بُرد و گلدان‌ها هم‌تراز نیستند. اصلاح هر عکس را طوری برش می‌دهد که گیاه کامل حدود ۷۰٪ ارتفاع کادر را پر کند، وسط‌چین، با گلدان‌هایی روی یک خط. آن‌وقت ردیف کارت‌ها مثل یک ردیف خوانده می‌شود، نه چهار تصویر متفاوت.
اصلاح ۴: نکات نگهداری در سه واقعیت
قبل
بعد
سه جمله توصیه در یک جعبه سبز، در برابر سه آیکون با یک برچسب و یک کلمه برای هرکدام.
پیش‌نویس حرف‌های درست را می‌زند، ولی خریدار باید سه جمله بخواند تا آن‌ها را پیدا کند. سه واقعیت آب، نور و ایمن بودن برای حیوانات خانگی‌اند و هرکدام را می‌شود با یک کلمه گفت: هفتگی، غیرمستقیم، ایمن.
اصلاح به هر واقعیت یک آیکون، یک برچسب کوچک و همان کلمه را به‌صورت پررنگ می‌دهد. کل کارت در یک نگاه خوانده می‌شود. خریداری که دنبال «می‌شود کنار گربه‌ام بگذارمش؟» می‌گردد، «حیوانات: ایمن» را بدون خواندن پیدا می‌کند.
اصلاح‌های کوچک‌تر
- چهار تب، نه پنج. خانه، فروشگاه، ذخیره‌شده‌ها و پروفایل. علاقه‌مندی‌ها شد «ذخیره‌شده‌ها» و سبد خرید از نوار تب به هدر رفت.
- یک حاشیه. پیش‌نویس ۱۴ px در چپ و ۱۲ px در راست استفاده می‌کرد. اصلاح ۲۰ px در هر دو طرف و ۱۲ تا ۱۴ px بین بلوک‌ها.
- بدون نشان روی عکس‌ها. نشان‌های قرمز -۲۰٪ و آبی NEW و قلب روی هر عکس حذف شدند. حراج هنوز دیده می‌شود، چون قیمت خط‌خورده می‌ماند.
- یک رنگ تأکید. سبزِ پیش‌نویس با نشان‌های قرمز و آبی همراه شده بود. اصلاح یک سبز برند،
#1F7A4D، را برای هر چیز قابل لمس به کار می‌برد. - مقیاس تایپ واقعی. متن از ۸ تا ۲۰ px به اندازه‌های iOS یعنی ۱۱ تا ۲۰ pt رسید.
- عنوان بخش کوتاه‌تر. «Popular Plants» شد «محبوب‌ها»، چون کل صفحه از قبل درباره گیاه است.
اپ فروشگاه خودتان را بررسی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا هدر را می‌شود به لوگو، جستجو و سبد خرید کاهش داد؟ | هر آیکون اضافه با آیکونی که مردم واقعاً استفاده میکنند رقابت می‌کند |
| آیا هیچ منوی کشویی را می‌شود با چیپ عوض کرد؟ | گزینه‌های آشکار لمس اضافه نمی‌خواهند |
| آیا هر کارت محصول یک قیمت و یک اقدام نشان می‌دهد؟ | هفت جزئیات، کارت را به فرم تبدیل می‌کند |
| آیا عکس‌ها کل محصول را با مقیاس یکسان نشان میدهند؟ | برش‌های ناقص شبکه را ناهموار نشان میدهند |
| آیا هر پاراگراف توصیه را می‌شود به سه واقعیت کوتاه تبدیل کرد؟ | خریدارها اسکن میکنند، نمی‌خوانند |
فایل Figma را بگیرید
فایل رایگان هر دو صفحه را به شکل کامپوننت دارد، هر اصلاح را به‌صورت جفت قبل و بعد، متغیرهای رنگ و استایل‌های متن iOS را.
فایل رایگان Figma
صفحه اصلی فروشگاه گیاه، قبل و بعد
هر دو صفحه و تک‌تک بخش‌های اصلاح‌شده به‌صورت کامپوننت Figma. رایگان، فقط مشاهده، برای ویرایش آن را در پیش‌نویس‌های خودتان کپی کنید.
سؤالات متداول
صفحه اصلی یک اپ فروشگاه آنلاین باید اول چه چیزی نشان دهد؟
یک هدر کوتاه با لوگو، جستجو و سبد خرید، سپس فیلترها به شکل چیپ و اولین محصولات. هر چیزی که محصول نیست، مثل نکات یا بنرها، را کوچک نگه دارید.
فیلترها در اپ فروشگاهی باید منوی کشویی باشند یا چیپ؟
چیپ، برای چند فیلتری که مردم بیشتر استفاده میکنند. چیپها گزینهها را بدون لمس نشان میدهند و چیپ انتخابشده وضعیت فعلی را. منوی کشویی یا صفحه فیلتر را برای فهرستهای بلند مثل قیمت و اندازه نگه دارید.
کارت محصول در اپ خرید باید چه چیزی نشان دهد؟
عکس کل محصول، یک نام، یک قیمت و یک دکمه افزودن. جزئیاتی مثل امتیازها و نام بلند می‌توانند در صفحه محصول باشند.
دستورالعمل نگهداری را چطور در اپ نشان دهیم؟
به شکل چند واقعیت کوتاه با آیکون، یک کلمه برای هرکدام، مثل آب: هفتگی. جمله‌های بلند می‌توانند یک لمس عمیق‌تر بروند.
یک اپ خرید باید چند تب داشته باشد؟
چهار یا پنج. موارد تکراری را در جاهایی که مردم از قبل نگاه میکنند ادغام کنید، مثل سبد خرید در هدر و علاقه‌مندی‌ها در تب ذخیره‌شده‌ها.
منابع
- هر دو صفحه از خود ما هستند و در Figma طراحی و اندازه‌گیری شده‌اند. فروشگاه، قیمت‌ها و نظرها ساختگی‌اند؛ نام گیاه‌ها واقعی است.
- عکس‌ها از Pexels، از Kulbir، Gül Işık و Kaboompics.
- Apple Human Interface Guidelines: Typography، برای اندازه‌های متن iOS که در صفحه اصلاح‌شده استفاده شده است.
- نخستین بار به‌صورت کاروسل در 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
