طراحی اپ فروشگاه مد: بازطراحی صفحه اصلی یک فروشگاه لباس، قبل و بعد
یک اپ فروشگاه مد که حراج را با بنر قرمز فریاد می‌زند، و همان صفحه اصلی پس از اصلاح: هدر ساده، تبهای متنی، عکس تمامعرض جین و کاشی‌هایی با یک قیمت. تک‌تک تغییرات کنار هم، همراه با فایل رایگان Figma.
یک اپ فروشگاه مد در صفحه اصلی‌اش فقط یک کار دارد: اینکه آدم‌ها لباس‌ها را بخواهند. پیش‌نویس اول زیر تخفیف را در صدر می‌گذارد. یک مارکی قرمز بالای صفحه می‌دود، شش لینک خطدار زیرش نشسته‌اند، و هر کاشی محصول زیر یک عکس کوچک، یک برچسب، ستاره‌ها، دو قیمت، نقطه‌های رنگی و یک دکمه را روی هم تلنبار کرده است.
اصلاح، همه کارکردها را نگه می‌دارد و می‌گذارد لباس‌ها بار حراج را به دوش بکشند. مارکی به یک عکس تمامعرض جین تبدیل میشود که پیشنهاد در دو خط زیرش آمده، هدر ساده میشود، و هر کاشی یک عکس بزرگ ۳:۴ با یک قیمت می‌گیرد.
کل صفحه، قبل و بعد
پیش‌نویس تازه‌کار
اصلاح‌شده
در سمت چپ، همه‌چیز با یک حجم صدا فریاد می‌زند. مارکی قرمز است، برچسب‌ها قرمزند، قیمت‌ها قرمزند و دکمه‌ها مشکی‌اند، پس چشم جایی برای شروع ندارد و لباس‌ها کوچک‌ترین چیز صفحه‌اند.
در سمت راست ترتیب روشن است: برند، جایی که باید رفت، یک پیشنهاد، بعد محصولات. عکس‌ها بزرگ‌ترند، تعداد متن‌ها کمتر است و قرمز فقط برای یک کلمه کنار گذاشته شده: Sale.
چه چیزی تغییر کرد، با اندازه‌گیری
| پیش‌نویس تازه‌کار | اصلاح‌شده | |
|---|---|---|
| پیشنهاد | یک مارکی قرمز تمامعرض با ۱۰ پیکسل | یک عکس ۳۹۰ در ۲۲۴، بعد یک خط سریف ۲۸ پیکسلی و یک خط ۱۴ پیکسلی |
| حاشیه‌ها | ۱۴ چپ، ۱۲ راست | ۲۰ از هر دو طرف |
| هدر | منو، نام برند، جستجو، قلب و سبد، چپ‌چین | منو، نام برند وسط‌چین، سبد |
| دستهها | شش لینک خطدار با ۱۱ پیکسل | شش تب متنی با ۱۵ پیکسل، یکی خطدار، Sale قرمز |
| کاشیها | سه ستون، عکسهای ۱۱۷ در ۲۰۵، نام‌ها با ۹ پیکسل | دو ستون، عکسهای ۱۶۹ در ۲۲۵ (۳:۴)، نام‌ها با ۱۳ پیکسل |
| زیر هر عکس | ستاره‌ها، دو قیمت، نقطه‌های رنگی و دکمه با حروف بزرگ | یک قیمت و سه نمونه رنگ |
| تب‌ها | پنج تا، با آیکون‌های توپر و خطی مخلوط | چهار تا، فقط آیکون، در یک نوار شناور کوچک |
| قرمز | مارکی، برچسب‌ها، قیمت‌ها، نشان سبد، Sale، تب فعال | فقط Sale |
اصلاح ۱: لباس را بفروش، نه تخفیف را
قبل
بعد
یک نوار قرمز باریک تمامعرض با حروف بزرگ سفید که نوشته حراج تابستانی، تا ۵۰ درصد تخفیف، بهاضافه ارسال رایگان، کد SUMMER50، در برابر یک عکس تمامعرض از یک ژاکت جین پوشیده‌شده با عبارت The Denim Edit با فونت سریف بزرگ و زیرش «تا ۵۰٪ تخفیف» به رنگ خاکستری.
مارکی یک بنر است و آدم‌ها یاد گرفته‌اند بنرها را رد کنند. این یکی چهار پیام را با ۱۰ پیکسل حمل می‌کند: یک فصل، یک تخفیف، ارسال رایگان و یک کد. هیچ‌کدام تکه‌ای لباس نشان نمی‌دهد، پس خریداری که یک اپ مد را باز می‌کند اول یک برچسب هشدار می‌بیند.
اصلاح، به پیشنهاد یک تصویر می‌دهد. عکس، محصول روی تن یک آدم است که از زیر چانه بریده شده تا ژاکت کادر را پر کند، بدون شعاع گوشه و بدون گرادیان تا لبه به لبه برود. زیرش، دو خط متن کار مارکی را انجام می‌دهند: نام مجموعه با ۲۸ پیکسل و خط تخفیف با ۱۴ پیکسل. کد و قول ارسال به صفحه‌ای پشت هیرو رفتند، جایی که کسی که ضربه زده آماده خواندن شرایط است.
حساب قیمت درست میماند. ۱۷۸ دلار منهای ۵۰٪ میشود ۸۹ دلار، همان قیمت پیش‌نویس.
قاعده برای استفاده دوباره: آنچه برای فروش است را نشان بده و پیشنهاد را با متن ساده زیرش بنام. اگر عکس برای توضیح به بنر نیاز دارد، عکس بهتری انتخاب کن.
اصلاح ۲: هدر ساده و تب‌هایی که نشان می‌دهند کجایی
قبل
بعد
یک هدر چپ‌چین با آیکون منو، نام OLEA، بعد جستجو، قلب و یک سبد با نشان قرمز، بالای شش لینک خطدار Women، Men، Kids، New، Brands و Sale قرمز، در برابر هدری با آیکون منو در چپ، نام بزرگ OLEA وسط‌چین و یک سبد با نشان تیره کوچک، بالای تبهای متنی که Women تیره و خطدار است، Sale قرمز است و بقیه خاکستری‌اند و از لبه راست بیرون می‌زنند.
در پیش‌نویس، چهار آیکون و یک نام برند سر یک ردیف ۳۶۴ پیکسلی دعوا می‌کنند و شش لینک زیرش همه خط‌دارند. خط زیرین یعنی «این یکی فعلی است»، پس شش خط زیرین هیچ معنایی ندارد. اصلاً حالت انتخاب‌شده‌ای وجود ندارد.
اصلاح دو کار می‌کند. نام برند با اندازهای خوانا به وسط می‌آید و هدر به دو آیکون می‌رسد، چون جستجو و قلب از قبل در نوار تب هستند. بعد دستهها خط‌هایشان را از دست می‌دهند و خط زیرین دوباره یک معنا پیدا می‌کند: Women تیره و خطدار است، بقیه خاکستری‌اند، و Sale قرمز است چون تنها دسته‌ای است که یک بخش فروشگاه نیست. ردیف از لبه بیرون می‌زند، که به مردم می‌گوید اسکرول میشود.
قاعده برای استفاده دوباره: بگذار خط زیرین یعنی «اینجایی» و رنگ را یک بار به کار ببر، برای موردی که به پرچم نیاز دارد.
اصلاح ۳: یک عکس، یک قیمت
قبل
بعد
یک ردیف سه کاشی محصول، هرکدام با عکس پرتره کوچک از فردی با ژاکت جین، برچسب قرمز منفی ۵۰ درصد، یک قلب، نامی با ۹ پیکسل، پنج ستاره طلایی با امتیاز، یک قیمت قرمز کنار یک قیمت خط‌خورده، سه نقطه رنگی و یک دکمه مشکی ADD TO CART، در برابر دو کاشی بزرگ‌تر با عکس خود ژاکت، یک قلب و یک علامت بهاضافه روی عکس، نام، یک قیمت و سه نمونه رنگ.
یک کاشی پیش‌نویس نه چیز را در خود دارد: عکس، برچسب، قلب، نام، ستاره‌ها، امتیاز، دو قیمت، نقطه‌ها و یک دکمه. با عرض ۱۱۷ پیکسل به هرکدام چند پیکسل می‌رسد و عکس کوچک‌ترین بخش است. چهره‌ها کادر را پر می‌کنند و محصول به‌زحمت دیده میشود.
اصلاح چهار تا را نگه می‌دارد: عکس، نام، قیمت و نمونه رنگها.
عکس ۱۶۹ در ۲۲۵ است، یک ۳:۴ واقعی، با گوشههای تیز، و هرکدام روی لباس بریده شده، پس بافت جین خودش تصویر است. قلب روی عکس میماند. Add to Cart به یک علامت بهاضافه در گوشه عکس تبدیل میشود، پس کارکرد یک ضربه فاصله دارد بدون نوار مشکی زیر هر کاشی. ستاره‌ها و قیمت دوم به صفحه محصول می‌روند، جایی که خریدار تصمیم گرفته دقیق‌تر نگاه کند.
دو عکس در هر ردیف به‌جای سه تا یعنی هر نام با ۱۳ پیکسل در یک خط جا میشود، و نوار تب روی ردیف بعدی کاشیها شناور است تا اسکرول هیچ‌وقت به دیوار نخورد.
قاعده برای استفاده دوباره: یک کاشی در صفحه فهرست به این جواب می‌دهد: «خوشم می‌آید و چقدر است.» بقیه‌چیز یک ضربه عمیق‌تر جا دارد.
اصلاح‌های کوچک‌تر
- هر کارکردی در دسترس میماند. Add to Cart همان علامت بهاضافه روی هر عکس است، Filter و Sort پشت آیکون اسلایدر هستند، جستجو تب دوم است، منو بالا سمت چپ میماند، Brands در ردیف دستهها میماند و محصولات دیگر پایین‌تر در اسکرول‌اند.
- حاشیه‌های یکسان. پیش‌نویس ۱۴ پیکسل چپ و ۱۲ راست دارد. اصلاح از ۲۰ در هر دو طرف و ۱۰ بین بلوک‌ها استفاده می‌کند.
- زمینه سفید، یک جوهر. متن مشکی روی سفید تنها رنگ رابط است. بقیه را عکس‌ها تأمین می‌کنند.
- عکسهای بریده‌شده روی لباس. هر تصویر بزرگ‌تر و جابه‌جا درون یک قاب برش قرار گرفته تا ژاکت آن را پر کند. آدم‌ها در عکس‌ها هستند، اما موضوع لباس است.
- نوار تب آرام‌تر. چهار آیکون در یک نوار شناور کوچک جای پنج تب با برچسب و آیکون‌های توپر و خطی مخلوط را می‌گیرد.
- مقیاس تایپ واقعی. متن از ۱۳ تا ۲۸ پیکسل است، در برابر ۸ تا ۱۵ پیکسل پیش‌نویس.
صفحه فروشگاه خودتان را ممیزی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا اولین چیزی که می‌بینید تکه‌ای لباس را نشان می‌دهد؟ | یک اپ مد پیش از آنکه فهرست قیمت باشد، کتاب تصویر است |
| آیا پیشنهاد یک بار و با متن ساده گفته شده؟ | بنر رد میشود، تیتر خوانده میشود |
| آیا خط زیرین یک معنا دارد؟ | شش لینک خطدار، فعلی را پنهان می‌کنند |
| آیا قرمز برای یک چیز استفاده شده؟ | اگر همه‌چیز قرمز است، هیچ‌چیز حراج نیست |
| آیا هر کاشی فقط عکس، نام و قیمت نشان می‌دهد؟ | بقیه به صفحه محصول تعلق دارد |
| آیا عکس روی لباس بریده شده، نه چهره؟ | خریدار دارد لباس می‌خرد |
| آیا با یک ضربه به Add to Cart می‌رسید؟ | حذف دکمه نباید کارکرد را حذف کند |
فایل Figma را بگیرید
فایل رایگان شامل پیش‌نویس تازه‌کار، صفحه اصلاح‌شده و هر بخش به‌صورت کامپوننت است.
فایل رایگان Figma
بازطراحی صفحه اصلی فروشگاه مد، قبل و بعد
هر دو صفحه و هر بخش به‌صورت کامپوننت Figma. رایگان، فقط مشاهده، آن را به پیش‌نویس‌های خود کپی کنید.
سؤالات متداول
صفحه اصلی اپ یک فروشگاه مد چگونه باید طراحی شود؟
با یک عکس تمامعرض از محصول شروع کنید و پیشنهاد را در دو خط متن زیرش بگذارید. بعد دستههای متنی ساده بیاورید، سپس کاشیهای دوستونه با عکسهای بزرگ ۳:۴، یک قیمت و چند نمونه رنگ زیر هرکدام.
عکسهای محصول در یک اپ لباس چه اندازهای باید باشند؟
نسبت پرتره ۳:۴ استاندارد لباس است. اینجا کاشیها روی صفحه ۳۹۰ پیکسلی ۱۶۹ در ۲۲۵ پیکسلاند، دو تا در هر ردیف، با گوشههای تیز و عکسی که روی لباس بریده شده.
آیا یک اپ مد باید بنر حراج نشان دهد؟
از بنری که هیچ محصولی ندارد پرهیز کنید. یک عکس با یک خط پیشنهاد کوتاه زیرش همان کار را می‌کند، و قرمز میتواند روی تب Sale بماند تا تخفیف بدون سلطه بر صفحه به‌راحتی پیدا شود.
یک کاشی محصول باید چند جزئیات نشان دهد؟
در صفحه فهرست چهار تا کافی است: عکس، نام، قیمت و نمونه رنگها. امتیازها، قیمت قدیم و سایزها به صفحه محصول تعلق دارند و Add to Cart میتواند یک علامت بهاضافه روی عکس باشد.
ناوبری دستهها در یک اپ خرید چگونه باید باشد؟
از تبهای متنی استفاده کنید که یکیشان برای نشان دادن فعلی خطدار است، بقیه خاکستری و یک رنگ تأکید واحد برای Sale. بگذارید ردیف از لبه صفحه بیرون بزند تا مردم بفهمند اسکرول میشود.
نوار تب یک اپ فروشگاه چه چیزی باید داشته باشد؟
چهار آیکون کافی است: فروشگاه، جستجو، ذخیرهشدهها و پروفایل. سبد در هدر میماند، جایی که تعدادش دیده میشود.
منابع
- هر دو صفحه از خودمان است، در Figma طراحی و اندازه‌گیری شده. اپ، OLEA، محصولات و قیمت‌هایش ساختگی‌اند. قیمت‌ها در هر دو صفحه سازگارند: ۱۷۸ دلار منهای ۵۰٪ میشود ۸۹ دلار، و ۱۱۸ دلار منهای ۵۰٪ میشود ۵۹ دلار.
- الگوی مطالعه‌شده: اپ‌های مد Zara و SSENSE، با زمینه سفید، هدر ساده، تبهای متنی، هیرو تمامعرض و کاشیهای ۳:۴ با گوشههای تیز.
- عکس‌ها از Pexels: هیرو از Thomas Nguka، کاشی ژاکت از Arturo A، و Bleached Trucker از Kristina Polianskaia. آیکون‌ها از Phosphor (MIT) هستند.
- ابتدا به‌صورت کاروسل در App Brainy منتشر شد.
Want this for your own app? Our team redesigns store screens like this one, from the first audit to the finished components.
Get Started
