Moda Mağazası Uygulaması Tasarımı: Giyim Mağazası Ana Ekranı Yeniden Tasarımı, Önce ve Sonra

Bir moda mağazası uygulamasının ana ekranda tek bir işi vardır: insanlara kıyafetleri istetmek. Aşağıdaki ilk taslak indirimi öne koyuyor. Üstte kırmızı bir kayan yazı şeridi akıyor, altında altı çizili altı bağlantı duruyor ve her ürün kutucuğu küçük bir fotoğrafın altına etiket, yıldız, iki fiyat, renk noktaları ve bir düğme yığıyor.

Düzeltme her işlevi korur ve satışı kıyafetlerin taşımasına izin verir. Kayan yazı şeridi, altında iki satırlık teklifin yer aldığı tam genişlikte bir denim fotoğrafına dönüşür, başlık sadeleşir ve her kutucuk tek fiyatla büyük bir 3:4 fotoğraf alır.

Ekranın tamamı, önce ve sonra

Junior taslağı

Düzeltilmiş

Solda her şey aynı ses seviyesinde bağırıyor. Kayan şerit kırmızı, etiketler kırmızı, fiyatlar kırmızı ve düğmeler siyah; göz başlayacak yer bulamıyor ve kıyafetler ekrandaki en küçük şey.

Sağda sıra net: marka, nereye gidileceği, tek teklif, sonra ürünler. Fotoğraflar daha büyük, metin sayısı daha az ve kırmızı tek bir kelime için saklanmış: Sale.

Neler değişti, ölçülerle

Düzeltme 1: indirimi değil, kıyafetleri sat

Önce

Sonra

Beyaz büyük harflerle yaz indirimi, yüzde 50'ye varan indirim, ücretsiz kargo, kod SUMMER50 yazan ince, tam genişlikte kırmızı bir şerit; karşısında giyilmiş bir denim ceketin tam genişlikte fotoğrafı, büyük serif yazıyla The Denim Edit ve altında gri renkte Up to 50% off.

Kayan şerit bir bannerdır ve insanlar bannerları atlamayı öğrendi. Bu şerit 10 px'lik dört mesaj taşıyor: bir sezon, bir indirim, ücretsiz kargo ve bir kod. Hiçbiri bir kıyafet göstermiyor, yani bir moda uygulaması açan alışverişçi önce bir uyarı etiketi görüyor.

Düzeltme teklife bir resim veriyor. Fotoğraf, bir insanın üzerindeki ürün; çeneden aşağıdan kırpılmış, böylece ceket kadrajı dolduruyor. Köşe yuvarlaklığı ve gradyan yok, kenardan kenara uzanıyor. Altında iki satırlık yazı kayan şeridin işini yapıyor: koleksiyon için 28 px'lik bir isim ve indirim için 14 px'lik bir satır. Kod ve kargo vaadi, hero'nun arkasındaki sayfaya taşındı; dokunan kişi orada koşulları okumaya hazır.

Fiyat hesabı dürüst kalıyor. 178 $ eksi %50 = 89 $, taslaktaki fiyatla aynı.

Tekrar kullanılacak kural: satılan şeyi göster ve teklifi altına düz metinle yaz. Fotoğrafı açıklamak için banner gerekiyorsa daha iyi bir fotoğraf seç.

Düzeltme 2: sade bir başlık ve nerede olduğunu gösteren sekmeler

Önce

Sonra

Menü simgesi, OLEA logosu, ardından arama, kalp ve kırmızı rozetli bir çanta içeren sola yaslı bir başlık; altında altı çizili altı bağlantı: Women, Men, Kids, New, Brands ve kırmızı bir Sale. Karşısında solda menü simgesi, büyük ortalanmış OLEA logosu ve küçük koyu rozetli bir çanta içeren bir başlık; altında Women'ın koyu ve altı çizili, Sale'in kırmızı, diğerlerinin gri olduğu ve sağ kenardan taşan metin sekmeleri.

Taslakta dört simge ve bir logo 364 px'lik tek bir satır için dövüşüyor, altındaki altı bağlantının hepsi de altı çizili. Alt çizgi "şu an buradasın" demektir, yani altı alt çizgi hiçbir şey demez. Seçili durum diye bir şey yok.

Düzeltme iki şey yapıyor. Logo ortaya, okunabilir bir boyuta geliyor ve başlık iki simgeye iniyor, çünkü arama ve kalp zaten sekme çubuğunda var. Sonra kategoriler alt çizgilerini kaybediyor ve alt çizgi tek bir anlama geri dönüyor: Women koyu ve çizgili, diğerleri gri, Sale ise kırmızı çünkü bir reyon olmayan tek kategori o. Satır kenardan taşıyor, bu da kaydırılabildiğini söylüyor.

Tekrar kullanılacak kural: alt çizgi "buradasın" anlamına gelsin ve rengi bir kez, bayrak gerektiren öğe için kullan.

Düzeltme 3: bir fotoğraf, bir fiyat

Önce

Sonra

Her biri denim ceketli bir insanın küçük dikey fotoğrafını, kırmızı eksi yüzde 50 etiketini, bir kalbi, 9 px bir ismi, puanlı beş altın yıldızı, üstü çizili fiyatın yanında kırmızı bir fiyatı, üç renk noktasını ve siyah bir SEPETE EKLE düğmesini içeren üç ürün kutucuğundan oluşan bir sıra; karşısında ceketin kendisinin fotoğrafını, fotoğraf üzerinde bir kalp ve bir artıyı, ismi, tek fiyatı ve üç renk örneğini içeren iki büyük kutucuk.

Taslak bir kutucuk dokuz şey taşıyor: fotoğraf, etiket, kalp, isim, yıldızlar, puan, iki fiyat, noktalar ve bir düğme. 117 px genişlikte her birine birkaç piksel düşüyor ve fotoğraf en küçük parça. Yüzler kadrajı dolduruyor, ürün neredeyse görünmüyor.

Düzeltme dördünü tutuyor: fotoğraf, isim, fiyat ve örnekler.

Fotoğraf 169 x 225, gerçek bir 3:4, köşeleri keskin ve her biri giysiye kırpılmış, yani resim denim dokusunun kendisi. Kalp fotoğrafın üzerinde kalıyor. Sepete Ekle, fotoğrafın köşesinde bir artıya dönüşüyor; böylece her kutucuğun altında siyah bir çubuk olmadan işlev tek dokunuş uzakta. Yıldızlar ve ikinci fiyat, alışverişçinin daha yakından bakmaya karar verdiği ürün sayfasına taşınıyor.

Üç yerine iki fotoğraf demek, her ismin 13 px'te tek satıra sığması demek; sekme çubuğu da bir sonraki kutucuk sırasının üzerinde yüzüyor, böylece kaydırma hiçbir zaman bir duvara çarpmıyor.

Tekrar kullanılacak kural: liste sayfasındaki bir kutucuk "beğendim mi ve ne kadar" sorusunu yanıtlar. Gerisi bir dokunuş daha derinde durur.

Daha küçük düzeltmeler

• Her işlev erişilebilir kalıyor. Sepete Ekle her fotoğraftaki artı, Filtre ve Sırala sürgü simgesinin arkasında, arama ikinci sekme, menü sol üstte, Brands kategori satırında ve diğer ürünler kaydırmanın daha aşağısında.
• Eşit kenar boşlukları. Taslakta solda 14 px, sağda 12 var. Düzeltme iki yanda 20, bloklar arasında 10 kullanıyor.
• Beyaz zemin, tek mürekkep. Beyaz üstüne siyah metin tek arayüz rengi. Gerisini fotoğraflar sağlıyor.
• Kıyafete kırpılmış fotoğraflar. Her görsel büyütülüp bir kırpma çerçevesi içinde kaydırılmış, böylece ceket çerçeveyi dolduruyor. Fotoğraflarda insanlar var ama konu giysi.
• Daha sakin bir sekme çubuğu. Küçük yüzen bir çubukta dört simge, etiketli ve dolu ile çizgili simgelerin karıştığı beş sekmenin yerini alıyor.
• Gerçek bir yazı ölçeği. Metin 13 ile 28 px arasında, taslakta ise 8 ile 15 px arasıydı.

Kendi mağaza ekranınızı denetleyin

Figma dosyasını alın

Ücretsiz dosyada junior taslağı, düzeltilmiş ekran ve her parça bir bileşen olarak yer alıyor.

Ücretsiz Figma dosyası

Moda mağazası ana ekranı yeniden tasarımı, önce ve sonra

Her iki ekran ve her parça bir Figma bileşeni olarak. Ücretsiz, salt görüntüleme, taslaklarınıza kopyalayın.

Figma'da aç

SSS

Bir moda mağazası uygulamasının ana ekranı nasıl tasarlanmalı?

Ürünün tam genişlikte bir fotoğrafıyla başlayın ve teklifi altına iki satır metin olarak koyun. Ardından düz metin kategoriler, sonra her birinin altında büyük 3:4 fotoğraflar, tek fiyat ve birkaç renk örneği bulunan iki sütunlu kutucuklar gelsin.

Bir giyim uygulamasında ürün fotoğrafları hangi boyutta olmalı?

Giyimde 3:4 dikey oran standarttır. Burada kutucuklar 390 px'lik bir ekranda satır başına iki tane, 169 x 225 px, keskin köşeli ve fotoğraf giysiye kırpılmış.

Bir moda uygulaması indirim bannerı göstermeli mi?

Ürün taşımayan bir bannerdan kaçının. Altında kısa bir teklif satırı olan bir fotoğraf aynı işi görür; kırmızı bir Sale sekmesinde kalabilir, böylece indirim ekrana hâkim olmadan kolayca bulunur.

Bir ürün kutucuğu kaç ayrıntı göstermeli?

Bir liste sayfasında dördü yeter: fotoğraf, isim, fiyat ve renk örnekleri. Puanlar, eski fiyat ve bedenler ürün sayfasına aittir; Sepete Ekle ise fotoğraf üzerinde bir artı olabilir.

Bir alışveriş uygulamasında kategori navigasyonu nasıl görünmeli?

Geçerli olanı göstermek için biri altı çizili metin sekmeleri, geri kalanı için gri ve Sale için tek bir vurgu rengi kullanın. Satırın ekran kenarından taşmasına izin verin ki insanlar kaydırılabildiğini görsün.

Bir mağaza uygulamasının sekme çubuğunda ne olmalı?

Dört simge yeterli: mağaza, arama, kaydedilenler ve profil. Çanta, sayısının görülebildiği başlıkta kalır.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlanıp ölçüldü. OLEA uygulaması, ürünleri ve fiyatları uydurmadır. Fiyatlar iki ekranda da tutarlı: 178 $ eksi %50 = 89 $, 118 $ eksi %50 = 59 $.
• İncelenen örüntü: beyaz zemin, sade başlık, metin sekmeleri, tam genişlikte hero ve keskin köşeli 3:4 kutucuklarla Zara ve SSENSE moda uygulamaları.
• Pexels fotoğrafları: hero Thomas Nguka'dan, ceket kutucuğu Arturo A'dan ve Bleached Trucker Kristina Polianskaia'dan. Simgeler Phosphor'dan (MIT).
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.