Profil Ekranı Tasarımı: Uygulama Profili ve Ayarlar Yeniden Tasarımı, Öncesi ve Sonrası

Bir profil ekranının üç işi vardır: kim olduğunu göstermek, neye sahip olduğunu göstermek ve bir şeyleri değiştirebileceğin bir yer sunmak. Aşağıdaki ilk taslak üçünü de yapıyor, ama hepsini on üç satırlık tek düz bir listede yapıyor; puanlar tek bir küçük satıra sıkıştırılmış, Çıkış Yap ise ekranın en gürültülü öğesi. Tam bir çekmece karmaşası: her şey içinde, ama hiçbir şey kolay bulunmuyor.

Düzeltme her özelliği koruyor. Her işe kendi bloğunu veriyor ve satırların durumlarını göstermesine izin veriyor, böylece ayarların çoğu açılmadan okunabiliyor.

Tüm ekran, öncesi ve sonrası

Junior taslağı

Düzeltilmiş

Solda her şey aynı ağırlıkta. Avatar, ad, e-posta ve telefon numarası ortada üst üste yığılmış, dırdır eden afiş puanların hemen üstünde duruyor, sonra on üç satır sayfa boyunca iniyor ve her birinin kendi ikon rengi var. Alttaki geniş kırmızı düğme ekrandaki en güçlü renk, yani gözün bulduğu son şey, kimsenin kazara basmaması gereken tek eylem.

Sağda ekranın dört bloğu ve tek bir rengi var. Kimlik satırı kısa, kart puanları taşıyor, karolar ve ayar listesi geri kalan her şeyi tutuyor. Marka kobaltı kartta, Düzenle düğmesinde ve aktif sekmede görünüyor; kırmızı ise yalnızca bir kez, düz metin olarak Çıkış Yap'ta.

Ne değişti, ölçülmüş halde

İki Figma çerçevesinden, tek ekrandaki her fark:

Düzeltme 1: kim olduğun için tek satır

Önce

Sonra

Ortalanmış bir avatar, ad, bir e-posta, bir telefon numarası ve çerçeveli bir Profili Düzenle düğmesi, altında sarı bir afiş; karşısında tek satır: solda avatar, yanında ad ve e-posta, sağda küçük bir Düzenle hapı.

Ortalanmış yığın, bir ad ve bir e-posta söylemek için yaklaşık 160 punto yükseklik harcıyor. Telefon numarası içindeki en az işe yarayan satır, Profili Düzenle düğmesi ise altındaki her şeyle yarışan tam çerçeveli bir kontrol.

Düzeltme tek bir satır: solda avatar, yanında ad ve e-posta, sonda küçük bir hap olarak Düzenle. Blok 158 yerine 60 punto yüksekliğinde, böylece sonraki blok daha yukarıdan başlıyor. "Profilini tamamla ve 50 puan kazan!!!" diyen dırdırcı afiş ekranın tepesinden kalktı. Profilini bitirme isteği ilk kullanımdan sonraya ya da Düzenle'nin içine aittir, görmeye geldiğin şeyin üstüne değil.

Tekrar kullanılacak kural: insan kendi adını bilir. Kimliğe tek satır ver, yeri değişen şeylere bırak.

Düzeltme 2: bir metin satırını karta çevir

Önce

Sonra

Küçük bir logo yazısı ve ardından minik puntolu tek satırda "Puan: 12480 | Seviye: Gold | Sonraki: Platinum (13000)"; karşısında logo yazısı, bir Gold etiketi, büyük puntolu 12.480, bir ilerleme çubuğu ve "Platinum'a 520 puan" olan koyu mavi bir kart.

Puanlar, bir üyenin bu ekranı açma sebebi ve taslak onları sayfadaki en küçük puntoyla dizmiş. Rakamların hepsi orada, ama okuyucu çıkarma işlemini kendisi yapmak zorunda: 13.000 eksi 12.480.

Düzeltme çıkarmayı onun yerine yapıyor. Kart puanları 44 pt gösteriyor, seviyeyi altın bir etiket olarak, yüzde 83 dolu bir çubuğu ve "Platinum'a 520 puan" cümlesini veriyor. Gold 10.000'de başlıyor, yani 12.480 bir sonraki seviyeye yolun büyük kısmında ve çubuk bunu bir bakışta gösteriyor. Kart ayrıca marka kobaltını ve seviyenin tek altınını kullanıyor, bu da onu ekrandaki en güçlü blok yapıyor ve bu doğru: buradaki, ona bakan kişiyi ödüllendiren tek şey o.

Tekrar kullanılacak kural: toplamın sonucunu göster, ona giren sayıları değil.

Düzeltme 3: ayarları grupla ve durumlarını göster

Önce

Sonra

Siparişlerim'den Şartlar ve Koşullar'a kadar tek listede on üç satır, her birinin kendi renkli ikonu ve bir oku var; karşısında üç karo (Siparişler, Cüzdan, Kaydedilenler) ve beş satırlık tek beyaz grup: Adresler, Ödeme Yöntemleri, Bildirimler, Dil, Yardım ve Yasal.

Aynı boyda, aynı oklu ve yedi ikon renkli on üç satırın bir düzeni yok. Siparişlerim ile Şartlar ve Koşullar eşit derecede önemli görünüyor ve taslak, dokunana kadar bir satırın arkasında ne olduğunu hiç söylemiyor.

Düzeltme listeyi insanların kullanım sıklığına göre sıralıyor:

• Siparişler, Cüzdan ve Kaydedilenler karo oluyor. İnsanların en çok gittiği üç yer bunlar, bu yüzden büyük hedefler ve her biri için canlı bir bilgi alıyorlar: "2 aktif", "$42,50" ve "18 ürün".
• Ayarlar tek grupta duruyor. Adresler "2 kayıtlı", Ödeme Yöntemleri "Visa ·· 4242" ve Dil "Türkçe" diyor. Kişi bunları dokunmadan kontrol edebiliyor.
• Bildirimler bir anahtara dönüşüyor. Aç ya da kapat seçimi olduğu için kendi ekranına ihtiyacı yok.
• Nadiren kullanılan satırlar Yardım ve Yasal'ın arkasına taşınıyor. Arkadaşlarını Davet Et, Uygulamayı Puanla, Hakkımızda, Gizlilik Politikası ve Şartlar hâlâ var, sadece bir dokunuş daha içeride.

Taslaktaki her satıra hâlâ ulaşılabiliyor. Hiçbir şey silinmedi, sıklığının ait olduğunu söylediği yere konuldu. İkonlar da tek bir tonu paylaşıyor, böylece ekrandaki renk bir şey ifade ediyor: marka, aktif ve dokunulabilir şeyleri işaretliyor.

Düzeltme 4: Çıkış Yap'ı sessizleştir

Önce

Sonra

Beyaz büyük harflerle ÇIKIŞ YAP yazan tam genişlikte kırmızı bir düğme; karşısında etrafında boşluk olan, 17 pt, ortalanmış, kırmızı Çıkış Yap kelimeleri.

Dolgulu kırmızı bir düğme taslak ekrandaki en gürültülü kontrol ve basılmayı istiyor. Çıkış yapmak nadirdir ve hafif yıkıcıdır, çünkü kişiyi tekrar giriş ekranına düşürür. Bulması kolay, yanlışlıkla basması zor olmalı.

Düzeltme kırmızıyı koruyor, çünkü kırmızı hâlâ bunun bir ayrılma eylemi olduğunu söylüyor, ama dolguyu kaldırıyor. Ayar grubunun altında, etrafında boşlukla duran düz bir metin. Hâlâ bir dokunuş uzakta, ama artık gözü çekmiyor.

Daha küçük düzeltmeler

• Gezinme çubuğu yerine büyük başlık. Geri oku, paylaş ikonu ve güneş ikonu olan "Profilim", 34 pt "Profil" oldu. Sekme çubuğu zaten nerede olduğunu söylüyor, bu yüzden geri oku gitti ve geriye kalan tek ikon bildirim çanı.
• Tek kenar boşluğu. Taslak solda 14, sağda 12 kullanıyor. Düzeltme iki yanda 20, bloklar arasında 14 kullanıyor.
• Tek yazı ölçeği. Taslaktaki metin 8 ile 15 px arasında değişiyor. Düzeltme 11 ile 34 pt arası iOS boyutlarını kullanıyor.
• Tek vurgu. Taslakta yedi ikon rengi, sarı bir afiş ve kırmızı bir düğme var. Düzeltmede marka kobaltı, seviye için tek bir altın ve Çıkış Yap için kırmızı var.
• Yüzen sekme çubuğu. Beş sekme duruyor, ama tek ikon stili kullanıyorlar ve yalnızca aktif sekme dolu.

Kendi profil ekranını denetle

Figma dosyasını al

Ücretsiz dosyada her iki ekran da var, düzeltilmiş bloklar bileşen olarak.

Ücretsiz Figma dosyası

Profil ekranı yeniden tasarımı, öncesi ve sonrası

Her iki ekran ve her parça Figma bileşeni olarak. Ücretsiz, salt görüntüleme, taslaklarına çoğalt.

Figma'da aç

SSS

Bir uygulamadaki profil ekranı ne göstermeli?

Kişinin kim olduğunu, neye sahip olduğunu ve ayarlarını değiştirebileceği bir yolu. Kimliği tek kısa satıra koy, puanları, bakiyeyi veya planı bir karta koy ve ayarları altında grupla.

Çıkış Yap düğmesi profil ekranında nereye konmalı?

Ayarların en altına, son grubun altına, düz metin olarak. Ulaşılabilir olmalı, ama sayfadaki en gürültülü kontrol asla olmamalı.

Bir ayar listesinde kaç satır olmalı?

İlk görünümde beş ila yedi iyi çalışır. Yasal sayfalar ve uygulama puanlama gibi nadiren kullanılanları Yardım ve Yasal gibi tek bir satırın arkasına taşı.

Ayar satırları mevcut değerlerini göstermeli mi?

Evet. "Türkçe" veya "Visa ·· 4242" gibi bir değer soruyu dokunmadan cevaplar ve basit bir aç ya da kapat seçimi için satırdan çok anahtar daha iyidir.

Profil ekranında sadakat puanları nasıl gösterilir?

Sayı büyük, mevcut seviye bir etiket ve sıradakini anlatan bir cümle olacak şekilde bir kart olarak, örneğin "Platinum'a 520 puan". Çıkarma işlemini okuyucu yerine sen yap.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Uygulama, üye ve sayılar uydurmadır.
• Metin boyutları Apple'ın Human Interface Guidelines belgesindeki iOS yazı ölçeğini izliyor.
• Avatar fotoğrafı: Pexels'te Tamra Creatives Agency.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.