Yolculuk Uygulaması Tasarımı: Ride Hailing Ana Ekranı, Önce ve Sonra

Bir yolculuk uygulamasını açan kişi genelde bir yerde duruyordur ve başka bir yerde olmak istiyordur. Aşağıdaki ilk taslak çalışıyor, ama ilk dokunuştan önce kullanıcıdan çok şey istiyor: altı yüzen kontrol ve sarı bir banner giyinmiş bir harita, iki adres alanı olan bir panel, altı renkte altı servis ve bir sıra chip. Düzeltme önemli olan her yeteneği koruyor ve tek bir soru soruyor.

Ekranın tamamı, önce ve sonra

Junior taslak

Düzeltilmiş

Solda harita kontrollerle kaplı ve panel bir form. Sağda harita sadece harita, panelde ise bir alan, dört satır ve dört servis var. Harita ayrıca 380 px yükseklikten 270 px'e kısaldı, böylece önemli olan panel daha yukarıdan başlıyor.

Düzeltme 1: haritada iki buton

Önce

Sonra

Dört şekilde altı kontrol ve bir banner, karşısında bir menü ve bir konum butonu.

Taslak sokakların üstüne bir menü karesi, bir arama dairesi, bir katmanlar karesi, bir Trafik hapı, bir yakınlaştırma grubu ve yeşil bir konum dairesi koyuyor, üstüne de tepeye büyük harfli bir promosyon banner'ı geriyor. Hepsi bir yolcunun isteyebileceği şeyler. Hiçbiri yolcunun yapmaya geldiği şey değil ve hep birlikte kişinin okumaya çalıştığı haritayı kapatıyorlar.

Düzeltme iki adet 44 px buton tutuyor: menü ve konumun. Arama dairesi, panelde zaten var olan aramaya ikinci bir giriş yoluydu. Banner tek bir satır olarak panelin içine indi.

Katmanlar, Trafik ve yakınlaştırma grubu bu ekranda yok ve bu yeniden tasarım nerede yaşadıklarını çizmiyor, yani gerçek bir uygulamanın onlar için bir yuva bulması gerekir. Haritada çimdikle yakınlaştırma için iki butona gerek yok.

Tekrar kullanılacak kural: haritaya yalnızca şu anda gördüğünü değiştiren kontrolleri koy, gerisine başka bir yuva ver.

Düzeltme 2: iki alan yerine tek soru

Önce

Sonra

İki adres alanı ve bir değiştirme butonu, karşısında Nereye diye soran tek alan.

Taslak bir form açıyor: yeşil noktalı bir alış alanı, siyah noktalı bir varış alanı ve bir değiştirme oku. Yukarıdaki haritada zaten yolcunun nerede olduğunu gösteren mavi bir nokta var, yani ilk alan ekranın zaten söylediği bir şeyi soruyor.

Düzeltme 52 px'lik bir alanda "Nereye?" diye soruyor. Sağda zamanın yaşadığı yer olan Şimdi chip'i duruyor: daha sonra yolculuk isteyen onu değiştirir, geri kalan herkes hiç okumaz. Değiştirme butonu alış alanıyla birlikte gitti.

Tekrar kullanılacak kural: bilmediğin tek şeyi sor, tahmin edebildiğin şeyi değiştirilebilir bir chip yap.

Düzeltme 3: tek stilde dört servis

Önce

Sonra

Altı renkte altı servis, karşısında tek gri ve tek yeşille dört servis.

Her servisin kendi rengi olduğunda renk bir anlam taşımayı bırakır. Taslağın altı kutusu yeşil, turuncu, mavi, mor, pembe ve camgöbeği ve her ikon kutusunun rengini tekrar ediyor, üstelik 9 ila 12 px yazıyla. Sırada bir yolcunun genelde hangisini istediğini söyleyen hiçbir şey yok.

Düzeltme Ride, Package, Reserve ve Rental olmak üzere dört servisi, marka yeşili #16A34A ikonlarla tek bir yumuşak gri üzerinde büyük kutular olarak çiziyor. Aynı anda dokunulup okunacak kadar geniller. Moto ve XL bu ana ekranda yok; bu yeniden tasarımın gizlemediği bir takas, çünkü nereye gittiklerini çizmiyor.

Tekrar kullanılacak kural: tek bir marka rengi "bu uygulama" anlamına gelsin, seçenekleri birbirinden şekil ve ikon ayırsın.

Düzeltme 4: kayıtlı yerler adresiyle birlikte satır olarak

Önce

Sonra

Adressiz chip'ler ve iki uzun son satırı, karşısında isim, adres ve dokunma alanı olan satırlar.

"Ev" yazan bir chip, yolcuya ancak ona güveniyorsa nereye gittiğini söyler. Taslağın chip'leri adres göstermiyor ve altlarındaki son yerler, 12 px ile posta koduna kadar yazılmış "Ferry Building, The Embarcadero, San Francisco, CA 94111" gibi uzun satırlar.

Düzeltme her birini bir satır yapıyor: bir ikon, kalın isim ve altında kısa bir adres, "Ev, 24 Hayes St". Ferry Building bir son yer, altında "The Embarcadero" yazıyor ve şehir ile posta kodu gitti, çünkü yolcu zaten o şehirde. Yüzde 30 indirim dördüncü satır oldu: yeşil bir etiket ve altında "Kod NEWRIDE", yerlerle aynı boyutta.

Teklif hâlâ orada. Sadece artık haritanın üstünden bağırmıyor.

Tekrar kullanılacak kural: bir kısayol nereye gittiğini göstermeli ve bir promosyon bir satır olabilir.

Daha küçük düzeltmeler

• Tek sol kenar. Taslağın paneli solda 14 px, sağda 12 px kullanıyordu. Düzeltme iki yanda 20 px kullanıyor.
• Tek vurgu. Taslak banner için sarı, konum butonu için yeşil ve servisler için altı ton kullanıyordu. Düzeltme aktif sekme, servis ikonları ve teklif etiketi için marka yeşilini, gerisi için griyi kullanıyor.
• Gerçek bir tip ölçeği. Yazı 9 ila 12 px'ten 13 ila 17 pt'lik iOS boyutlarına çıktı.
• Beş değil dört sekme. Ana Sayfa, Yolculuklar, Cüzdan, Teklifler ve Hesap; Ana Sayfa, Etkinlik, Cüzdan ve Hesap oldu. Teklifler gitti, çünkü teklif artık Ana Sayfa'da bir satır.
• Daha kısa harita. Harita 380 px'ten 270 px yüksekliğe indi, böylece soru daha yukarıda duruyor.

Kendi yolculuk uygulamanı denetle

Figma dosyasını al

Ücretsiz dosyada iki ekran bileşen olarak, her düzeltme önce ve sonra çifti olarak, renk değişkenleri ve iOS metin stilleri var.

Ücretsiz Figma dosyası

Yolculuk uygulaması ana ekranı, önce ve sonra

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

Figma'da aç

SSS

Bir ride hailing uygulamasının ana ekranı neyi göstermeli?

İki butonlu bir harita, tek bir "Nereye?" alanı ve altında birkaç kısayol. Servisler, kayıtlı yerler ve teklifler haritaya değil panele aittir.

Bir harita ekranında kaç kontrol olmalı?

Ana ekranda iki yeter: menü ve konumun. Katmanlar, trafik ve yakınlaştırma başka yerde yaşayabilir, çünkü haritalar çimdikle yakınlaşır.

"Nereye" arama alanı nasıl tasarlanır?

Soruyu içinde taşıyan tek büyük alan yap ve zaman için sağına bir Şimdi chip'i koy. Harita kişinin nerede olduğunu zaten gösterirken önce alış konumunu sorma.

Bir yolculuk uygulaması Ride, XL ve Package gibi servisleri nasıl göstermeli?

Tek stilde, büyük kutular olarak, marka renginde ikonlarla. Ana ekrana dört tanesi sığar; gerisi kendi yerine ihtiyaç duyar.

Bir yolculuk uygulamasında promosyon kodları nasıl gösterilir?

Yerlerle aynı stilde tek bir satır olarak, kısa bir başlık ve altında kodla. Haritadaki banner, yolcuların okumaya geldiği şeyi kapatır.

Bir yolculuk uygulaması hangi yazı boyutunu kullanmalı?

Platformun metin ölçeğini. Düzeltilmiş ekran 13 ila 17 pt arası iOS boyutlarını ve 44 px harita butonlarını kullanıyor.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Harita sokakların, bir parkın ve bir derenin kendi vektör çizimimiz. Ferry Building ve Oracle Park San Francisco'nun herkese açık simge yapıları; ev ve iş adresleri uydurma. Fotoğraf yok.
• Apple Human Interface Guidelines: Typography, düzeltilmiş ekranda kullanılan iOS yazı boyutları için.
• Apple Human Interface Guidelines: Accessibility, 44 pt dokunma hedefi boyutu için.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.