Not Uygulaması Tasarımı: Ana Ekran Yeniden Tasarımı, Önce ve Sonra

Bir not uygulamasının ana ekranında tek bir işi vardır: sizi istediğiniz nota ulaştırmak. Aşağıdaki ilk taslakta bir notu bulmak için gereken her şey var, ama aynı taslak altı renkte on iki yapışkan notu 8 px yazıyla boyuyor, sekiz renkte sekiz etiket daha ekliyor, siz tek kelime okumadan depolama konusunda uyarıyor ve bir notun üstüne yüzen bir artı düğmesi park ediyor.

Düzeltme her işlevi korur ve notların etrafındaki süsü kaldırır. Renkli etiketler ince çizgili klasör çiplerine dönüşür, sabitlediğiniz notlar iki beyaz kutucuk olur, diğer her not sade bir satıra iner ve arama, sade bir başlığın altında tek bir gri alan olur.

Tüm ekran, önce ve sonra

Junior taslağı

Düzeltilmiş

Solda her şey aynı ses seviyesinde bağırıyor. Altı yapışkan not rengi, sekiz etiket rengi, sarı bir banner ve sarı bir artı birbiriyle yarışıyor ve notların kendisi ekrandaki en küçük şey.

Sağda ekran, insanın düşündüğü sırayla okunuyor: bu ne, içinde arayabilir miyim, hangi klasör, neyi sabitledim, başka ne var. Tek renkler notların içindekiler.

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

Düzeltme 1: sade bir başlık ve tek bir arama alanı

Önce

Sonra

Tüm Notlar (128) üzerinde küçük bir serif logo, bir Değiştirilme Tarihi açılır menüsü, iki görünüm geçişi ve bir arama simgesi; altında sarı bir depolama bannerı ve HEMEN YÜKSELT düğmesi. Karşısında büyük bir Notlar başlığı, üç noktalı menü ve içinde Ara yazan gri bir arama alanı.

Taslağın üst kısmı, tek bir not görmeden önce yedi kontrol barındırıyor: bir menü, bir logo, bir sayı, bir sıralama, iki görünüm geçişi ve bir arama simgesi. Sonra bir banner alanınızın %85'ini kullandığınızı söylüyor ve yanında ödeme düğmesi var.

Düzeltme ekrana bir isim ve bir giriş yolu verir. Notlar 34 px kalın. Arama, açık gri (#F2F2F7) renkte 10 px yarıçaplı tam genişlikte bir alan, yani alan gibi görünüyor ve kimsenin bir simgenin arama olduğunu tahmin etmesi gerekmiyor.

Sıralama ve görünüm hâlâ var, üç noktanın arkasında. Depolama uyarısı ve Yükselt, insanın hesabını yönetmeye gittiği yer olan Profil'e taşındı.

Tekrar kullanılacak kural: bir ekranın üstü onu adlandırmalı ve ana giriş yolunu sunmalı. Geri kalan her şey bir menünün arkasına gider.

Düzeltme 2: renkli etiketler yerine klasör çipleri

Önce

Sonra

Tek satıra sıkıştırılmış sekiz küçük dolu etiket: İş kırmızı, Fikirler amber, Günlük yeşil, Kişisel mavi, Seyahat turkuaz, Tarifler turuncu, Ev mor ve Kitaplar pembe. Karşısında Tümü, İş, Fikirler, Günlük ve Seyahat yazan ince çizgili hap çipler; Tümü siyah dolu, gerisi sağ kenardan taşıyor.

Sekiz renkteki sekiz etiket uzun süre renkle ayırt edilemez ve 9 px'te dokunması zordur. Ayrıca satırı tam dolduruyorlar, bu yüzden satır bitmiş görünüyor ve devamı olduğuna dair hiçbir ipucu vermiyor.

Düzeltme, ince çizgili 32 px hapları kullanır. Seçili olan, Tümü, siyah dolu. Gerisi sade ve Seyahat'ten sonraki klasörler sağ kenardan içeri kayıyor. Ekran kenarında kesilen bir çip, başparmağa kaydırılabileceğini söyler ve kimsenin oka ihtiyacı yoktur.

Tekrar kullanılacak kural: hangi öğenin seçili olduğunu her öğeye ayrı renk vererek değil, dolgu ile gösterin.

Düzeltme 3: kullandığınız notları iki beyaz kutucuk olarak sabitleyin

Önce

Sonra

Bir sırada üç renkli yapışkan not, sarı, pembe ve mavi; her birinin üst köşelerinde küçük bir raptiye ve bir daha fazla simgesi ile 8 px yazı var. Karşısında amber raptiyeli bir Sabitlenenler başlığı ve iki beyaz kutucuk: Kulübe tadilatı başlıklı ve 2 sa önce yazan bir kulübe kurşun kalem çizimi ile, başlığı ve 09:12 yazan lansman kontrol listesinin metin önizlemesi.

Taslakta sabitlenmiş bir not, 11 px'lik bir raptiye simgesi dışında diğer tüm notlarla tamamen aynı görünüyor. İlk iki yapışkan, düzeltilmiş sürümde sabitlenen notların aynısı. Sabitleme onlara davranış biçimini değiştirmiyor, dolayısıyla bulmayı da hiç kolaylaştırmıyor.

Düzeltme, sabitlenmiş notlara kendi bölümünü ve kendi şeklini verir. 12 px yarıçaplı ve ince çizgili iki adet 169 px beyaz kutucuk, Sabitlenenler başlığının altında duruyor. Kulübe notu çizimini, lansman kontrol listesi metin önizlemesini gösteriyor ve her birinin altında 14 pt yarı kalın bir başlık ile 12 pt bir tarih var. Sabitlemek artık gördüğünüz şeyi değiştiriyor ve sabitlemenin sebebi de bu.

Tekrar kullanılacak kural: bir durum önemliyse ekranda ona bir yer verin. Aynı görünen bir kartın üstündeki küçük simge bir yer değildir.

Düzeltme 4: diğer her not sade bir satır

Önce

Sonra

Yeşil, turuncu, mor, sarı, pembe ve mavi renkli iki sıra yapışkan not; her biri küçük gövde metniyle dolu ve altında bir Düzenlendi tarihi var. Karşısında beyaz üzerinde dört sade satır: Mayıs'ta Lizbon, Ekşi maya notları, Kitap fikirleri ve Sabah sayfaları; her biri 16 pt başlık, bir tarih ve altında metninin tek satırı, ince çizgilerle ayrılmış.

Bir yapışkan notu bütünüyle gösterir, bu yüzden elinize birkaç satır 8 px yazı geçer. Okuyamazsınız, göz gezdiremezsiniz ve on ikisiyle koca bir ekranı doldurursunuz. Altı renk hiçbir şey ifade etmiyor, yani onlardan hiçbir şey öğrenilmiyor.

Düzeltme bir liste. Her not, 16 pt bir başlık, bir tarih ve 14 pt metninin üç nokta ile biten tek satırı. Satırlar 57 px yüksekliğinde ve aralarında ince çizgiler var, bu yüzden sabit kutucukların altına yaklaşık sekiz tanesi sığıyor. Tüm başlıkları tek bakışta okuyabilir ve doğru notu ilk satırından açabilirsiniz.

Tekrar kullanılacak kural: liste bir şeyler bulmak içindir, kart tek bir şeye bakmak için. İşe uyanı seçin.

Düzeltme 5: sekme çubuğu ve yeni not düğmesi

Önce

Sonra

Taslağın altı: son notun üstünde duran sarı yuvarlak bir artı düğmesi ve onun altında Notlar, Günlük, Görevler, Etiketler ve Profil adlı etiketli beş sekmeli, dolu ve çizgili karışık simgeleri olan düz bir sekme çubuğu. Karşısında biri seçili dört simgeli yüzen bir kapsül, altından akan notlar ve yanında kalem simgeli ayrı bir yuvarlak amber yeni not düğmesi.

Taslak, son notun üstüne yüzen bir artı koyuyor, yani yazıyı gizliyor. Sekme çubuğunda etiketli beş sekme var ve Notlar simgesi dolu, gerisi çizgili.

Düzeltme, iki işe sahip iki kontrol yapar. 52 px'lik yalnızca simgeli bir kapsül, tek simge stiliyle dört sekmeyi tutuyor ve yanında kalem simgeli 52 px'lik amber bir yeni not düğmesi duruyor. Notlar ikisinin de altından devam ediyor, bu yüzden ekran bir çubuğun kestiği bir liste gibi değil, tek uzun bir liste gibi hissettiriyor. Etiketler sekmesi gitti çünkü klasör çipleri onun işini yapıyor.

Tekrar kullanılacak kural: "yeni bir şey yap" düğmesini başparmağın olduğu yere koyun ve ona kendi şeklini ve rengini verin ki gezinme ile karıştırılmasın.

Daha küçük düzeltmeler

• Her işlev yerinde. Arama, başlığın altındaki alan. Değiştirilme Tarihi sıralaması ile ızgara ve liste geçişleri noktaların arkasında. Tüm Notlar (128) Tümü klasörü oldu. Daha fazla düğmesi her notun içinde. Depolama uyarısı Profil'e taşındı.
• Tek kenar boşluğu. Taslakta solda 14 px, sağda 12 px var. Düzeltilmiş ekran iki yanda 20 kullanıyor, bloklar arasında 10 px ile.
• Tek vurgu. Amber (#F5B301) yalnızca raptiyede ve yeni not düğmesinde kullanılıyor. Geri kalan her şey siyah, gri ve beyaz.
• Okunabilir bir yazı ölçeği. Taslak 8 ile 14 px arasında değişiyor. Düzeltilmiş ekran tarihler için 12 px'ten başlayıp başlık için 34 px'e çıkıyor.
• Gerçek içerik. Çizim kutucuğu renkli bir kutu yerine gerçek bir çizim gösteriyor, böylece sabitlenenler bölümü notu açmadan önce ne hakkında olduğunu gösteriyor.
• Logo yok. Taslağın başlığında bir serif logo, Margin, var. Düzeltilmiş ekranda yok, çünkü Apple Notes'ta ekran başlığı zaten başlıktır.

Kendi not ekranınızı denetleyin

Figma dosyasını alın

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

Ücretsiz Figma dosyası

Not uygulaması yeniden tasarımı, önce ve sonra

İki ekran ve her parça Figma bileşeni olarak. Ücretsiz, yalnızca görüntüleme, taslaklarınıza kopyalayın.

Figma'da aç

SSS

Bir not uygulaması ana ekranı nasıl tasarlanmalı?

Sade bir başlık ve tek bir arama alanıyla başlayın, ardından klasör çiplerini, kısa bir Sabitlenenler bölümünü ve her biri bir başlık ile tek satırdan oluşan not listesini koyun. Uyarıları ve satış mesajlarını yoldan çekin ki ekrandaki en gür şey notlar olsun.

Bir not uygulaması ızgara mı liste mi kullanmalı?

Not bulmak için liste, çünkü başlıklar ve tek satır metin tek bakışta okunabilir. Tam kartlardan oluşan bir ızgara yalnızca her kart okunacak kadar büyükse işe yarar ve 117 px genişlikte yazı 8 px'e düşer.

Bir not uygulaması kaç renk kullanmalı?

Tek vurgu. Apple Notes sabitleme simgesi ve yeni not düğmesi için tek bir amber kullanır, geri kalan her şeyi nötr tutar, böylece rengi notlar taşır.

Bir not uygulamasında depolama uyarısı nereye konmalı?

Profil ya da ayarlar ekranına, veya yalnızca kullanıcı sınıra yaklaştığında küçük bir bildirim olarak. İlk notun üstündeki bir banner, her ziyareti bir satış mesajıyla başlatır.

Bir not uygulamasında sabitlenmiş notlar nasıl görünmeli?

Sabitlenenler başlığı altında kendi bölümleri olarak, önizleme, başlık ve tarih içeren iki kutucuk şeklinde. Aynı görünen bir kartın üstündeki raptiye simgesi bir notu bulmayı kolaylaştırmaz.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Uygulama, Margin, ve tüm verileri uydurma. Notlar iki ekranda da tutarlı: iki sabit kutucuk taslağın ilk iki yapışkanı, satırlar ise aynı başlıklara, tarihlere ve açılış satırlarına sahip sonraki yapışkanlar.
• İncelenen örüntü: iPhone'daki Apple Notes.
• Fotoğraf: Pexels'te Sofya Borboris'in bir kurşun kalem çizimi, düzeltilmiş, çizime kırpılmış ve beyaz üzerine yerleştirilmiş. Yapay zeka yok.
• Simgeler Phosphor'dan (MIT). Durum çubuğu ölçülmüş bir iPhone ekran görüntüsünden çizildi. Taslağın logosu Libre Caslon Display Regular.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.