طراحی اپ اسنیکر: بازطراحی صفحه محصول، قبل و بعد
صفحه محصول اسنیکر با چهار آیکون و سه نشان روی عکس، قیمتی گم‌شده بین پنج عدد و سایزهایی که نشان نمی‌دهند کدام انتخاب شده، و همان صفحه بعد از اصلاح. تک‌تک تغییرها کنار هم، دلیل هرکدام و فایل رایگان Figma.
خریدار صفحه یک اسنیکر را باز می‌کند تا به سه سؤال جواب بگیرد: چه شکلی است، چند است و سایز من را دارد؟ پیش‌نویس اول زیر هر سه جواب را دارد و خریدار را وادار می‌کند دنبالشان بگردد. نسخه اصلاح‌شده همان محصول و همان قیمت را نگه می‌دارد و جواب‌ها را به ترتیبی می‌چیند که خریدار می‌پرسد.
کل صفحه، قبل و بعد
پیش‌نویس جونیور
اصلاح‌شده
سمت چپ، خریدار پیش از دیدن نام محصول با هفت نشان کوچک روی عکس روبه‌رو می‌شود. سمت راست، اول عکس می‌آید، بعد نام و قیمت، و تنها دکمه تیره همان دکمه خرید است.
| پیش‌نویس جونیور | اصلاح‌شده | |
|---|---|---|
| آیکون روی عکس | ۴ | ۲ |
| نشان روی عکس | ۳ | ۰ |
| قیمت | یکی از ۵ عدد در یک ردیف | خط جدا، قیمت قدیمی خطخورده، ۱۹٪ تخفیف کنارش |
| کادر سایز | ۴۱ در ۳۲ پیکسل، یک ردیف ۸تایی | چیپ ۴۴ پیکسلی، شبکه ۲ ردیفی |
| سایز انتخابشده | حاشیه ۱ پیکسلی | پر شده با #111111 |
| سایز تمامشده | شبیه بقیه | خطخورده روی خاکستری |
| دکمه‌های خرید | ۲ دکمه با حروف بزرگ و یک لینک | ۱ دکمه در نوار چسبان |
| تب‌ها | ۵ | هیچ |
| حاشیه کناری | ۱۴ پیکسل چپ، ۱۲ پیکسل راست | ۲۰ پیکسل از هر دو طرف |
| اندازه متن | ۹ تا ۱۴ پیکسل | ۱۲ تا ۲۲ پوینت |
اصلاح ۱: عکسی که چیزی رویش نیست
قبل
بعد
چهار آیکون و سه نشان روی عکس، در برابر یک دکمه برگشت و یک دکمه ذخیره.
پیش‌نویس کل فروشگاه را روی محصول ریخته. برگشت، اشتراک، ذخیره و سبدی با عدد «۳» قرمز در بالا ردیف شده‌اند. «New arrival»، «-19%» و «Free shipping» پایین سمت چپ، روی پنجه کفش، روی هم افتاده‌اند.
نسخه اصلاح‌شده فقط دو دکمه گرد ۴۰ پیکسلی روی عکس نگه می‌دارد: برگشت و ذخیره. بقیه به جای درست خودشان رفتند. تخفیف کنار قیمت نشسته، خط ارسال زیر مبلغ کل در نوار پایین است و نقطه‌هایی که عکس‌ها را می‌شمارند زیر عکس هستند.
قاعده‌ای که می‌شود تکرار کرد: عکس محصول خود محصول است. هر چیزی که به قضاوت خریدار درباره کفش کمک نمی‌کند جای دیگری باید باشد.
اصلاح ۲: اول نام، بعد قیمت
قبل
بعد
قیمت در ردیفی از عددها، در برابر قیمتی با خط جدا.
پیش‌نویس برند را با حروف بزرگ خاکستری ۹ پیکسلی می‌نویسد، نام محصول به دو خط می‌شکند، بعد یک ردیف: «$129.00 | 4.8 (2,341 reviews) | 1.2k sold». پنج عدد با یک اندازه در یک خط‌اند و قیمت را باید میانشان پیدا کرد.
نسخه اصلاح‌شده به نام یک خط جدا با فونت درشت می‌دهد. قیمت هم خط خودش را می‌گیرد: «$129» درشت، «$159» قدیمی خطخورده کنارش و چیپ کوچک «19% off». امتیاز، نظرها و فروش در خطی آرام‌تر پایین‌اند، چون به تصمیم کمک میکنند و قیمت تصمیم را می‌سازد. هر دو صفحه همان عددها را دارند: ۱۲۹ تقسیم بر ۱۵۹ می‌شود ۰٫۸۱، پس ۱۹٪ تخفیف درست است.
قاعده‌ای که می‌شود تکرار کرد: وقتی چند عدد در یک خط‌اند، یکی‌شان همان است که خریدار لازم دارد. خط و اندازه خودش را به او بدهید.
یک قاعده قیمتی برای بررسی
قیمت خطخورده در بعضی جاها جنبه قانونی دارد.
اصلاح ۳: سایزهایی که انتخاب را نشان می‌دهند
قبل
بعد
هشت کادر کوچک، در برابر شبکه‌ای از چیپ‌ها با حالت‌هایی که دیده می‌شوند.
کادر سایزها در پیش‌نویس ۴۱ در ۳۲ پیکسل و در یک ردیف‌اند. سایز انتخابشده، ۸٫۵، فقط یک حاشیه تیره‌تر ۱ پیکسلی دارد و ۹٫۵ که تمام شده شبیه سایزهای موجود است. سه نقطه رنگ هم نام ندارند.
نسخه اصلاح‌شده هر سایز را یک چیپ ۴۴ پیکسلی در دو ردیف چهارتایی می‌کند. سایز انتخابشده با #111111 پر شده و متنش سفید است. سایز تمامشده روی خاکستری خط خورده، پس پیش از اینکه کسی لمسش کند معلوم است در دسترس نیست. رنگ‌ها زیر نمونه‌هایشان نام گرفته‌اند: Crimson، Black و Lime، و انتخابشده حلقه دارد.
ارتفاع ۴۴ پیکسل مهم است. راهنمای Apple برای هدف لمسی حداقل ۴۴ در ۴۴ پوینت است و کادر ۳۲ پیکسلی در ردیفی هشت‌تایی به‌راحتی از دست می‌رود.
قاعده‌ای که می‌شود تکرار کرد: هر گزینه سه حالت دیدنی لازم دارد: موجود، انتخابشده و ناموجود. هر کدام را با پر کردن بگویید، نه با یک حاشیه موئی.
اصلاح ۴: یک نوار که می‌خرد
قبل
بعد
دو دکمه با حروف بزرگ و یک لینک، در برابر قیمت و یک دکمه.
پیش‌نویس با یک شمارنده تعداد، «ADD TO CART» خط‌دار، «BUY NOW» مشکی و لینک کوچک «Add to Wishlist» تمام می‌شود. دو دکمه با وزن تقریباً برابر خریدار را وادار میکنند راه خرید انتخاب کند، و با اسکرول صفحه هم می‌روند.
نسخه اصلاح‌شده با یک نوار تمام می‌شود که پایین می‌ماند: «$129»، زیرش «Free shipping» و یک دکمه مشکی «Add to Bag». لیست علاقه‌مندی همان دکمه ذخیره روی عکس است. نوار تب هم رفت، چون پنج تب زیر نوار خرید با آن رقابت میکنند.
قاعده‌ای که می‌شود تکرار کرد: به کار اصلی یک دکمه بدهید و قیمت را کنارش نگه دارید.
اصلاح‌های کوچک‌تر
- یک لبه چپ. حاشیه‌های پیش‌نویس ۱۴ پیکسل چپ و ۱۲ پیکسل راست بود. نسخه اصلاح‌شده از هر دو طرف ۲۰ پیکسل دارد.
- مقیاس تایپ واقعی. متن از ۹ تا ۱۴ پیکسل به اندازه‌های iOS یعنی ۱۲ تا ۲۲ پوینت رسید.
- حروف عادی. «ADD TO CART» و «BUY NOW» با حروف بزرگ شد «Add to Bag».
- لینکی آرام‌تر. «Size Chart» آبی شد «Size guide» خاکستری، چون به انتخاب کمک می‌کند و خودش انتخاب نیست.
صفحه محصول خودتان را بازبینی کنید
| سؤال | چرا مهم است |
|---|---|
| آیا عکس جز برگشت و ذخیره چیز دیگری ندارد؟ | خریدار آمده محصول را ببیند |
| آیا قیمت خط جدا دارد؟ | عددی است که هر خریداری دنبالش است |
| آیا سایز انتخابشده را از آن سر اتاق تشخیص می‌دهید؟ | حاشیه موئی یک حالت نیست |
| آیا سایز تمامشده پیش از لمس فرق دارد؟ | یک لمس بی‌نتیجه را حذف می‌کند |
| آیا قیمت با اسکرول صفحه روی صفحه می‌ماند؟ | قیمت و اقدام به هم تعلق دارند |
سوالات متداول
صفحه محصول اسنیکر اول باید چه چیزی نشان دهد؟
عکس، بدون هیچ چیز روی آن جز برگشت و ذخیره. بعد نام، بعد قیمت در یک خط جدا.
انتخابگر سایز کفش را چطور طراحی کنیم؟
هر سایز را یک چیپ دستکم ۴۴ پیکسلی کنید، سایز انتخابشده را با رنگ تیره پر کنید و سایزهای تمامشده را خط بزنید. حاشیه موئی دور سایز انتخابشده برای خواندن بیش از حد کمرنگ است.
قیمت تخفیفی در صفحه محصول چطور نشان داده شود؟
قیمت فعلی را درشت نشان دهید، قیمت قدیمی را خطخورده کنارش و درصد تخفیف را در یک چیپ کوچک. هر دو صفحه اینجا از ۱۲۹ دلار، ۱۵۹ دلار و ۱۹٪ تخفیف استفاده میکنند. قوانین محلی درباره اینکه کدام قیمت قدیمی را میتوانید نشان دهید بررسی کنید.
آیا صفحه محصول هم Add to Cart لازم دارد هم Buy Now؟
یک دکمه اصلی شفافتر است. دو دکمه هموزن خریدار را پیش از آنکه تصمیم به خرید بگیرد وادار میکنند راه خرید انتخاب کند.
آیا صفحه محصول نوار تب لازم دارد؟
در این صفحه نه. صفحه یک کار دارد و نوار تب زیر نوار خرید با آن رقابت می‌کند.
منابع
- هر دو صفحه از خودمان است، در Figma طراحی و اندازه‌گیری شده. نام محصول، برند، قیمت‌ها و نظرها ساختگی‌اند.
- عکس محصول از Pexels، اثر Ahimsa - OM.
- Apple Human Interface Guidelines: Typography، برای اندازه‌های متن iOS در صفحه اصلاح‌شده.
- Apple Human Interface Guidelines: Accessibility، برای اندازه هدف لمسی ۴۴ پوینت.
- European Commission notice on the interpretation of Article 6a of Directive 98/6/EC، برای قاعده قیمت قبلی.
- ابتدا به‌صورت کاروسل در App Brainy منتشر شد.
Want this for your own app? Our team redesigns product pages and shop apps like this one, from the first audit to the finished components.
Get Started
