Дизайн приложения магазина одежды: редизайн главного экрана, до и после

У приложения магазина одежды на главном экране одна задача: вызвать желание купить вещи. Первый черновик ниже ставит на первое место скидку. Сверху бежит красная строка, под ней шесть подчёркнутых ссылок, а каждая плитка товара складывает под маленьким фото тег, звёзды, две цены, цветные точки и кнопку.

Исправленная версия сохраняет все функции и позволяет одежде самой нести распродажу. Бегущая строка превращается в фото денима на всю ширину с предложением в две строки под ним, шапка становится простой, а у каждой плитки появляется большое фото 3:4 с одной ценой.

Весь экран, до и после

Черновик джуниора

Исправлено

Слева всё кричит одинаково громко. Бегущая строка красная, теги красные, цены красные, а кнопки чёрные, поэтому глазу не за что зацепиться, а одежда оказывается самой мелкой вещью на экране.

Справа порядок ясен: бренд, куда идти, одно предложение, затем товары. Фото крупнее, текста меньше, а красный оставлен для одного слова, Sale.

Что изменилось, в цифрах

Правка 1: продавайте одежду, а не скидку

До

После

Тонкая красная полоса на всю ширину с белыми заглавными буквами «Летняя распродажа, скидки до 50 процентов, плюс бесплатная доставка, код SUMMER50» напротив фото джинсовой куртки на человеке на всю ширину с The Denim Edit крупным засечным шрифтом и серой строкой «Скидки до 50%» под ним.

Бегущая строка это баннер, а баннеры люди научились пропускать. Эта несёт четыре сообщения шрифтом 10 px: сезон, скидку, бесплатную доставку и код. Ни одно не показывает вещь, так что покупатель, открывший приложение одежды, первым делом видит предупреждающую табличку.

В правке у предложения появляется картинка. Фото это товар на человеке, обрезанный от подбородка вниз, чтобы куртка заполняла кадр, без скруглений и градиента, чтобы он шёл от края до края. Под ним две строки текста выполняют работу бегущей строки: название коллекции 28 px и строка со скидкой 14 px. Код и обещание бесплатной доставки переехали на страницу за обложкой, где тот, кто нажал, готов читать условия.

Арифметика цен остаётся честной. $178 минус 50% это $89, как и в черновике.

Правило на будущее: показывайте то, что продаётся, и называйте предложение простым текстом под ним. Если фото нужен баннер для объяснений, выберите фото получше.

Правка 2: простая шапка и вкладки, которые показывают, где вы

До

После

Шапка с выравниванием влево: иконка меню, логотип OLEA, затем поиск, сердце и сумка с красным значком, над шестью подчёркнутыми ссылками Women, Men, Kids, New, Brands и красным Sale, напротив шапки с иконкой меню слева, крупным логотипом OLEA по центру и сумкой с маленьким тёмным значком, над текстовыми вкладками, где Women тёмный с подчёркиванием, Sale красный, а остальные серые и уходят за правый край.

В черновике четыре иконки и логотип борются за одну строку шириной 364 px, а шесть ссылок под ней все подчёркнуты. Подчёркивание значит «это текущий раздел», поэтому шесть подчёркиваний не значат ничего. Выбранного состояния нет вообще.

Правка делает две вещи. Логотип переезжает в центр и становится читаемым, а в шапке остаются две иконки, потому что поиск и сердце уже есть в панели вкладок. Затем у категорий пропадают подчёркивания, и подчёркивание снова значит одно: Women тёмный с линией, остальные серые, а Sale красный, потому что это единственная категория, которая не является отделом. Строка уходит за край, что подсказывает, что она прокручивается.

Правило на будущее: пусть подчёркивание значит «вы здесь», а цвет используйте один раз, для пункта, который нужно отметить флажком.

Правка 3: одно фото, одна цена

До

После

Ряд из трёх плиток товаров, у каждой маленькое портретное фото человека в джинсовой куртке, красный тег минус 50 процентов, сердце, название шрифтом 9 px, пять золотых звёзд с рейтингом, красная цена рядом с зачёркнутой, три цветные точки и чёрная кнопка ADD TO CART, напротив двух крупных плиток с фото самой куртки, сердцем и плюсом на фото, названием, одной ценой и тремя образцами цвета.

Плитка в черновике вмещает девять вещей: фото, тег, сердце, название, звёзды, рейтинг, две цены, точки и кнопку. При ширине 117 px каждой достаётся несколько пикселей, а фото оказывается самой маленькой частью. Лица заполняют кадр, и товар почти не виден.

Правка оставляет четыре: фото, название, цену и образцы цвета.

Фото 169 x 225, настоящие 3:4, с прямыми углами, и каждое обрезано по вещи, так что фактура денима и есть картинка. Сердце остаётся на фото. «В корзину» становится плюсом в углу фото, так что функция в одном касании без чёрной полосы под каждой плиткой. Звёзды и вторая цена переехали на страницу товара, где покупатель уже решил присмотреться.

Два фото в ряд вместо трёх означают ещё и то, что каждое название помещается в одну строку по 13 px, а панель вкладок парит над следующим рядом плиток, так что прокрутка никогда не упирается в стену.

Правило на будущее: плитка на странице списка отвечает на вопрос «нравится ли мне и сколько стоит». Всё остальное лежит на одно касание глубже.

Мелкие правки

• Все функции остаются доступными. «В корзину» это плюс на каждом фото, «Фильтр» и «Сортировка» спрятаны за иконкой ползунков, поиск вторая вкладка, меню остаётся вверху слева, Brands остаётся в строке категорий, а остальные товары ниже по прокрутке.
• Ровные поля. В черновике 14 px слева и 12 справа. В правке 20 с обеих сторон и 10 между блоками.
• Белый фон, одни чернила. Чёрный текст на белом единственный цвет интерфейса. Остальное дают фото.
• Фото обрезаны по одежде. Каждое изображение увеличено и смещено внутри обрезающей рамки, чтобы куртка заполняла её. Люди на фото есть, но предмет это вещь.
• Более спокойная панель вкладок. Четыре иконки в маленькой плавающей панели заменяют пять вкладок с подписями и вперемешку залитыми и контурными иконками.
• Настоящая типографская шкала. Текст идёт от 13 до 28 px, против 8-15 px в черновике.

Проверьте свой экран магазина

Скачайте файл Figma

В бесплатном файле есть черновик джуниора, исправленный экран и каждая часть в виде компонента.

Бесплатный файл Figma

Редизайн главного экрана магазина одежды, до и после

Оба экрана и каждая часть как компонент Figma. Бесплатно, только просмотр, продублируйте к себе в черновики.

Открыть в Figma

FAQ

Как проектировать главный экран приложения магазина одежды?

Начните с фото товара на всю ширину и поместите предложение в две строки текста под ним. Затем идут текстовые категории, потом двухколоночные плитки с крупными фото 3:4, с одной ценой и несколькими образцами цвета под каждой.

Какого размера должны быть фото товаров в приложении одежды?

Портретное соотношение 3:4 это стандарт для одежды. Здесь плитки 169 x 225 px на экране 390 px, по две в ряд, с прямыми углами и фото, обрезанным по вещи.

Нужен ли модному приложению баннер распродажи?

Избегайте баннера, который не несёт товара. Фото с короткой строкой предложения под ним делает ту же работу, а красный можно оставить на вкладке Sale, чтобы скидки было легко найти и они не доминировали на экране.

Сколько деталей должна показывать плитка товара?

На странице списка хватит четырёх: фото, название, цена и образцы цвета. Рейтинги, старая цена и размеры относятся к странице товара, а «В корзину» может быть плюсом на фото.

Как должна выглядеть навигация по категориям в приложении для покупок?

Используйте текстовые вкладки с одной подчёркнутой для текущей, серым для остальных и одним акцентным цветом для Sale. Пусть строка уходит за край экрана, чтобы было видно, что она прокручивается.

Что должна содержать панель вкладок приложения магазина?

Хватит четырёх иконок: магазин, поиск, избранное и профиль. Сумка остаётся в шапке, где виден её счётчик.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Приложение OLEA, его товары и цены выдуманы. Цены согласованы на обоих экранах: $178 минус 50% это $89, а $118 минус 50% это $59.
• Изученный паттерн: приложения модных брендов Zara и SSENSE, с белым фоном, простой шапкой, текстовыми вкладками, обложкой на всю ширину и плитками 3:4 с прямыми углами.
• Фото с Pexels: обложка Thomas Nguka, плитка с курткой Arturo A, а Bleached Trucker Kristina Polianskaia. Иконки из Phosphor (MIT).
• Впервые опубликовано как карусель в App Brainy.