Sohbet Uygulaması Tasarımı: Bir Sohbet Listesi Yeniden Tasarımı, Önce ve Sonra

Bir sohbet listesinin tek bir işi var: kimin yazdığını, ne dediğini ve cevap isteyip istemediğini göstermek. Aşağıdaki ilk taslakta bir mesajlaşma uygulamasının isteyebileceği her özellik var ve hepsini aynı anda bağırıyor: başlık çubuğunda dört ikon, kendini açıklayan bir arama alanı, kenardan taşan altı filtre ve her satırda tam bir tarih. Düzeltme aynı insanları ve aynı mesajları tutuyor, ekranın her parçasına tek bir iş veriyor.

Ekranın tamamı, önce ve sonra

Acemi taslak

Düzeltilmiş

Solda göz dört ikonla, 47 karakterlik bir arama ipucuyla, beş aynı gökkuşağı halkasıyla, bitmeyen bir filtre sırasıyla ve her biri tarih ve rozet taşıyan yedi tek satırlık mesaj satırıyla karşılaşıyor. Sağda göz büyük bir başlık, tek bir buton, tek bir arama alanı, beş yüz, dört çip ve cümle gibi okunan beş satırla karşılaşıyor.

Düzeltme 1: başlıkta tek eylem, Ara diyen bir arama

Önce

Sonra

Dört ikon ve neyi aradığını sayan bir arama alanı, karşısında tek bir buton ve tek kelime: Ara.

Taslağın başlık çubuğunda bir kamera, bir kalem, bir büyüteç ve bir menü var. Büyüteç, kendi büyüteci olan bir arama alanının üstünde duruyor, yani ekran aynı aramayı iki kez sunuyor.

Düzeltme, insanların buraya geldiği tek eylemi, yeni mesaj yazmayı, tutuyor ve ona marka mavisinde yumuşak, yuvarlak bir buton veriyor. Başlık, iOS'un kullandığı aynı kalıpla büyük bir başlığa dönüşüyor; böylece ekran her şeyden önce nerede olduğunu söylüyor. Arama alanı "Ara" diyor. Taslağın 47 karakteri, "mesajlar, kişiler, gruplar ve daha fazlası", herkesin zaten nasıl kullanacağını bildiği bir alanı tarif ediyordu.

Tekrar kullanılacak kural: başlık çubuğuna tek eylem verilir, adı Ara olan bir alanın cümleye ihtiyacı yoktur.

Düzeltme 2: yeni anlamına gelen bir halka

Önce

Sonra

Beş aynı gökkuşağı halkası ve kesik isimler, karşısında yeni için mavi, görülmüş için gri ve tam ilk isimler.

Her halka aynı göründüğünde halka hiçbir bilgi taşımaz. Taslak beş hikayenin hepsine aynı gradyanı veriyor; izlediğin bir hikaye izlemediğinle birebir aynı görünüyor ve isimler "Jessica M..." ve "Daniel Ro..." diye kesiliyor.

Düzeltme halkaya bir anlam veriyor. 2,5 px'lik mavi halka yeni demek. 1,5 px'lik gri halka görüldü demek.

Senin kendi hikayen üzerinde küçük bir artıyla başta duruyor ve her isim tam bir ilk isim: Jessica, Daniel, Amara, Leo. Kısa isimler sığıyor ve insanlar birbirine ilk adıyla seslenir.

Tekrar kullanılacak kural: iki durumu ayırmak için renk kullan ve renkle sadece dikkat isteyen durumu göster.

Düzeltme 3: dört çip, tek stil, sayı kendi çipinde

Önce

Sonra

Ekrandan geniş bir sırada altı çerçeveli çip, karşısında sığan dört çip ve rozet olarak sayı.

Taslakta 364 px'lik bir sütunda 434 px'lik bir sırada altı çip var. Altıncısı yarıdan kesiliyor; ekran kullanıcıya daha fazlası olduğunu gösteriyor ama ne olduğuna dair hiçbir ipucu vermiyor. Sayılar etiketlerin içinde parantezle duruyor, "Okunmamış (12)" ve "Gruplar (3)"; bu da her etiketi farklı uzunluğa getiriyor.

Düzeltme dört tane tutuyor: Tümü, Okunmamış, Favoriler ve Gruplar. Seçili olan mavi dolgulu, diğerleri yumuşak gri. Okunmamış sayısı, küçük mavi bir rozet olarak kendi çipine taşınıyor; çünkü insanların istediği tek sayı bu ve aşağıdaki satırlarda göreceği rozetle aynı. Gruplar sayısını kaybetti.

Kanallar ve Arşiv sıradan çıktı. Bunlar gerçek özellikler ve bu yeniden tasarım nereye gideceklerini çizmiyor, yani eksiksiz bir uygulamanın onlar için hâlâ bir yere ihtiyacı var.

Tekrar kullanılacak kural: filtre sırası ekranın içinde bitmeli ve seçili olan tek dolgulu olmalı.

Düzeltme 4: kişi, iki satır ve kısa bir saat içeren satırlar

Önce

Sonra

Tek kesik satır, tam bir zaman damgası ve ikonlu kırmızı rozet, karşısında iki satır, kısa bir saat ve tek sönük rozet.

Bir satır, minyatür bir mesajdır ve taslak mesajı yaklaşık beş kelimeden sonra kesiyor: "Haha yes!! Send me the photos fro...". Yer tarihe, "10/24/26 9:41 AM", ve kırmızı bir rozetin yanındaki küçük bir iğne ya da hoparlör ikonuna gitti. Yıllı ve saniyeli bir tarih, bu sabah gelen bir mesaj için bir satırdaki en işe yaramaz şeydir.

Düzeltme önizlemeye iki satır veriyor; böylece "Haha yes! Send me the photos from last night when you get a chance" sohbeti açmadan okunabiliyor. Saat kısa: bugün için "9:41", sonra "Dün", sonra "Per".

Okunmamış bir sohbetin saati mavi ve rozeti 17 px mavi. Sessize alınmış grup, Design Team, çağırmadan sayılsın diye gri bir rozet alıyor. Avatarlar 52 px'e büyüyor ve sesli mesaj, süresinin önünde küçük bir mikrofon alıyor.

Tekrar kullanılacak kural: satırın yerini mesaja harca ve saati insanların söylediği gibi yaz.

Daha küçük düzeltmeler

• Tek sol kenar. Taslak solda 14 px, sağda 12 px kullanıyordu. Düzeltme iki yanda 20 px kullanıyor ve ayırıcılar avatardan sonra başlıyor.
• Dikkat için tek renk. Taslağın rozetleri kırmızı, halkaları turuncudan mora ve okunmamış çipi çerçeveli. Düzeltme yeni, seçili ve okunmamış için marka mavisi #2E7CF6'yı, sakin olan her şey için griyi kullanıyor.
• Gerçek bir yazı ölçeği. Yazı, 9 ile 20 px arasından, en üstte büyük başlıkla birlikte 11 ile 28 pt arasındaki iOS yazı boyutlarına geçti.
• Beş değil dört sekme. Taslağın Sohbetler, Aramalar, Kamera, Durum ve Ayarlar sekmeleri Sohbetler, Aramalar, Güncellemeler ve Ayarlar oldu. Kamera sekme çubuğundan çıktı.
• Daha büyük yüzler. Listedeki avatarlar 52 px'e büyüdü; böylece bir satırın gösterdiği ilk şey kişi oluyor.

Kendi sohbet listeni denetle

Figma dosyasını al

Ücretsiz dosyada her iki ekran bileşen olarak, her düzeltme bir önce ve sonra çifti olarak, renk değişkenleri ve iOS yazı stilleri yer alıyor.

Ücretsiz Figma dosyası

Sohbet listesi, önce ve sonra

Her iki ekran ve düzeltilen her parça Figma bileşeni olarak. Ücretsiz, sadece görüntüleme, taslaklarına kopyala.

Figma'da aç

SSS

Bir sohbet listesi ekranı her satırda ne göstermeli?

Kişiyi, son mesajın iki satırını, kısa bir saati ve okunmamış için tek küçük bir rozeti. Tam tarihi, fazladan ikonları ve ikinci bir rozeti dışarıda bırak.

Bir mesajlaşma uygulaması kaç filtre göstermeli?

Ana listede dört çip yeter: Tümü, Okunmamış, Favoriler ve Gruplar. Arşiv gibi geri kalanı bir menünün arkasına ya da başka bir ekrana koy ve sıranın asla kenardan taşmadığından emin ol.

Bir sohbet uygulamasında hikaye halkaları nasıl tasarlanır?

Yeni için bir renk, görülmüş için sönük bir renk kullan; böylece halka bilgi taşır. Bizim düzeltmemiz yeni için mavi bir halka, görülmüş için ince gri bir halka kullanıyor ve yüzlerin altında tam ilk isimler yer alıyor.

Bir sohbet uygulaması mesajın saatini nasıl göstermeli?

Bir insanın söyleyeceği kadar kısa: bugün için saat, sonra "Dün", sonra haftanın günü. Tam tarihleri sohbetin kendisine sakla.

Bir sohbet uygulaması hangi yazı boyutlarını kullanmalı?

Platformun yazı ölçeğini kullan. Düzeltilmiş ekran 11 ile 28 pt arasındaki iOS boyutlarını ve ekran adı için büyük bir başlık kullanıyor.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. İsimler ve mesajlar alıştırma için uydurulmuştur.
• Fotoğraflar Pexels üzerinden: Татьяна Танатова, Iphanyi Ezemenari, pessoas uem, Son Hoa Nguyen, Ajan Yogi, Tamra Creatives Agency, Kenneth Surillo ve kaleef lawal.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS yazı boyutları ve büyük başlık için.
• Apple Human Interface Guidelines: Accessibility, 44 pt dokunma hedefi boyutu için.
• İlk olarak App Brainy üzerinde bir karusel olarak yayımlandı.