Akıllı Ev Uygulaması Tasarımı: Ana Ekran Yeniden Tasarımı, Önce ve Sonra

Bir akıllı ev uygulamasının ana ekranda tek bir işi vardır: hangi odada olduğunu göstermek ve açık olanı tek dokunuşla değiştirmene izin vermek. Aşağıdaki ilk taslakta her kontrol var, ama küçük durum satırları olan sekiz özdeş satır sıralıyor, odaları altı çizili metnin içine gömüyor ve sahneleri en sona, altı küçük düğme olarak bırakıyor. Bir ayarlar sayfasına benziyor, bu yüzden kullanmak yaşamak gibi değil, yapılandırmak gibi hissettiriyor.

Düzeltme her işlevi korur, yalnızca gösterilme biçimini değiştirir. Önce oda gelir, cihazlar açıkken yanan karolara dönüşür, sahneler de başparmakla ulaşılabilen hapler olur.

Tüm ekran, önce ve sonra

Junior taslak

Düzeltilmiş

Solda hiçbir şey öne çıkmıyor. Başlık, istatistik şeridi, altı bağlantı, fotoğraf bannerı, sekiz satır ve altı düğme aynı ağırlıkta duruyor. Cihaz satırları en büyük blok ve hepsi eşit büyüklükte, yani kapalı bir TV, ısıtan termostat kadar önemli görünüyor.

Sağda ekran iki soruyu sırayla yanıtlıyor: neredeyim ve ne açık. Fotoğraf uygulamayla ilgili bir banner değil, odanın kendisi. Durumu renk taşıyor, böylece kullanıcı ızgarayı bir bakışta okuyor.

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

Düzeltme 1: önce odayı söyle, sonra neyin açık olduğunu

Önce

Sonra

Menü ikonu, Evim, artı, ayarlar ve kırmızı noktalı bir zil içeren bir başlık; 18°C Bulutlu, İç mekan 22°C, Nem %44, Güç 3,2 kWh yazan bir hava durumu şeridi, altı çizili altı oda bağlantısı ve Haven yazan bir fotoğraf bannerı. Karşısında oda fotoğrafının üzerinde, büyük kalın yazıyla Oturma Odası, altında 22° · 3 ışık açık, bir artı ve üç noktalı menü.

Taslağın başlığı bir kontrol paneli olmaya çalışıyor. Üç eylem, dört parçalı bir hava durumu satırı ve evin "sorunsuz çalıştığını" söyleyen, bilgi olmayan bir selamlama taşıyor. Kullanıcı zaten bir sorun olmadığını biliyor, çünkü hiçbir şey yanıp sönmüyor.

Düzeltme ekrana bir konu veriyor. "Oturma Odası" başlık ve altındaki tek satır insanların baktığı iki bilgiyi taşıyor: sıcaklık ve kaç ışığın açık olduğu. Üç ışık, taslakta açık olan Floor Lamp, Ceiling Light ve Shelf Light, yani hiçbir şey uydurulmadı. Hava durumu, nem ve güç üç noktadan açılır, zil ve dişli de Profil'e taşınır.

Bu, Apple Home'un kullandığı kalıp: üstte bir oda adı ve canlı durumu.

Yeniden kullanılacak kural: yeri öne koy, altına canlı durumun tek satırını yaz. Gerisini bir menünün arkasına taşı.

Düzeltme 2: kaydırılan düz oda sekmeleri

Önce

Sonra

Bir sırada altı çizili altı bağlantı: Oturma Odası, Yatak Odası, Mutfak, Banyo, Garaj, Ofis. Karşısında kalın beyaz Oturma Odası ve gri Yatak Odası, Mutfak ve Banyo, sağ kenardan dışarı taşıyor.

Altı çizili metin bir paragrafta bağlantı gibi okunur, odalar arasında bir seçim gibi değil. Altı tanesi ayrıca tüm genişliği doldurur, bu yüzden kullanıcı hangi odanın açık olduğunu anlayamaz. Alt çizgi, sayfadaki en sessiz öğe için en gürültülü araçtır.

Düz sekmeler ikisini de çözer. Seçili oda beyaz, diğerleri gri, yani parlak olan tek oda mevcut oda. Sıra bilerek sağ kenardan taşıyor, bu da kaydırılabildiğini gösteriyor ve yeni bir yerleşim gerektirmeden listenin altı odayı aşmasına izin veriyor. Banyo ve Ofis bir kaydırma uzakta, Garaj ise noktalardan açılıyor.

Yeniden kullanılacak kural: seçimi alt çizgiyle değil renkle göster ve bir seçenek sırasının kenardan taşmasına izin ver.

Düzeltme 3: satırlar yerine karolar

Önce

Sonra

Bir ikon, bir ad, Açık, %80, Sıcak Beyaz gibi gri bir durum satırı ve sağda küçük kehribar ya da gri bir anahtar içeren sekiz özdeş satır. Karşısında iki sütunlu geniş yuvarlak karolar: Floor Lamp ve Thermostat kehribar ikonlu beyaz, TV ve Speaker beyaz ikonlu koyu, Ceiling Light ve Blinds aşağıdan başlıyor.

Satırlar en çok maliyeti çıkarıyor. Her biri için kullanıcının 9 px'lik bir satırı bulması, "Açık | %80 | Sıcak Beyaz" yazısını okuması ve sonra dokunacağı 30 x 18'lik bir anahtarı bulması gerekiyor. Sekiz tanesi, açık cihazları kapalılardan ayıracak hiçbir şey olmayan bir metin sütunu.

Bir karo bir düğmedir. Karonun tamamı dokunma hedefi, ad 14 ve durum 12 boyutunda, anahtarın işini de renk yapıyor: kehribar ikonlu beyaz açık, beyaz ikonlu koyu kapalı. Kullanıcı sekiz cihazı tek bakışta tarayıp ilk satırlarda ikisinin açık olduğunu görebiliyor. Karolar ayrıca yüzen sekme çubuğunun altından akıyor, bu da kullanıcıya listenin devam ettiğini söylüyor.

Hiçbir şey çıkarılmadı. Taslaktaki Ceiling Light, Shelf Light, Blinds ve Air Purifier, Accessories altında "Tümü 8" arkasında duruyor, yani her cihaza hâlâ ulaşılabiliyor.

Yeniden kullanılacak kural: her öğenin bir açık ve kapalı durumu varsa, durumu öğenin kendi rengiyle göster ve kartın tamamını hedef yap.

Düzeltme 4: gerçek sahne hapları

Önce

Sonra

Büyük harfli altı eşit gri düğmenin üzerinde küçük bir SAHNELER etiketi: Film, Uyku, Dışarıda, Sabah, Parti, Okuma. Karşısında ikonlu yuvarlak haplardan oluşan bir sıra: Film beyaz yanık, Uyku ve Dışarıda koyu, sonraki kenardan taşıyor.

Sahneler bir akıllı ev uygulamasının en iyi parçasıdır, çünkü tek dokunuş tüm odayı değiştirir. Taslakta en altta, sekiz satırın altında, altı özdeş gri düğme olarak duruyorlar. Bir forma benziyorlar ve hiçbiri hangi sahnenin aktif olduğunu söylemiyor.

Düzeltme sahneleri yukarı, oda sekmelerinin hemen altına taşıyor ve her birine bir ikon veriyor. 44 yüksekliğindeler, yani başparmakla çalışıyorlar ve aktif sahne beyaz yanıyor. Parti haplarda kaydırılarak geliyor, Okuma ise Sahneler sekmesinde.

Yeniden kullanılacak kural: en değerli eylemi başparmağın olduğu yere koy ve hangisinin aktif olduğunu göster.

Daha küçük düzeltmeler

• Her işlev yerinde. Ceiling Light, Shelf Light, Blinds ve Air Purifier Tümü 8 arkasında. Hava durumu, nem ve güç başlıktaki noktalardan açılıyor. Zil ve dişli, rozet noktasını taşıyan Profil'e geçiyor.
• Eşit kenar boşlukları. Taslakta solda 14 px, sağda 12 px var. Düzeltilmiş ekran iki tarafta tek bir boşluk kullanıyor.
• Tek vurgu. Kehribar yalnızca açık karoların ikonlarında ve aktif sekmede görünüyor. Taslakta her anahtarda ve birkaç ikonda var.
• Düz karartma katmanı. Fotoğrafın üzerinde tek bir %52 siyah katman var, gradyan ve parlama yok, böylece lamba okunur kalıyor ve kitaplar kararıyor.
• Daha az sekme. Dolu ve çizgi ikonları karışık beş sekmenin yerini yüzen 62 px çubukta dört sekme alıyor.
• Tipografi ölçeği. Metin 12 ile 34 pt arasında, sekme etiketleri 10 pt, taslağın 9 ile 15 px aralığının yerine.

Kendi akıllı ev ekranını denetle

Figma dosyasını al

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

Ücretsiz Figma dosyası

Akıllı ev ekranı yeniden tasarımı, önce ve sonra

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

Figma'da aç

SSS

Bir akıllı ev uygulamasının ana ekranı nasıl tasarlanmalı?

Oda adı ve "22° · 3 ışık açık" gibi tek satırlık canlı durumla başla. Cihazları rengin "açık" anlamına geldiği iki sütunlu karolar olarak göster, sahneleri üste yakın haplara koy, hava durumunu ve ayarları bir menünün arkasına taşı.

Bir akıllı ev uygulaması cihazlar için karo mu liste mi kullanmalı?

Ana ekran için karo. Karonun tamamı dokunma hedefi ve renk durumu bir bakışta gösterir. Liste, uzun bir ayarlar ya da geçmiş görünümü için uygundur.

Bir akıllı ev uygulamasında bir cihazın açık olduğu nasıl gösterilir?

Karonun kendisiyle: açık için kehribar ikonlu beyaz bir kart, kapalı için beyaz ikonlu koyu bir kart. Böylece kimsenin durum satırını okuması ya da küçük bir anahtar araması gerekmez.

Bir akıllı ev uygulamasında sahneler nereye konmalı?

Üste yakın, oda sekmelerinin altında, başparmağın erişebileceği ve aktif sahnenin yandığı haplar olarak. Sahneler tek dokunuşla bir odanın tamamını değiştirir, bu yüzden sekiz satırın altında durmamalılar.

Bir akıllı ev uygulaması kaç sekmeye ihtiyaç duyar?

Dört yeter: Ana Sayfa, Sahneler, Otomasyonlar ve Profil. Odalar ana ekrandaki kaydırılabilir sekmelerde yaşar.

Bir akıllı ev uygulamasında oda adlarının altı neden çizilmemeli?

Alt çizgi metinde bağlantı gibi okunur. Seçili odanın beyaz, diğerlerinin gri olduğu düz sekmeler hangi odanın açık olduğunu gösterir ve sıranın kaydırılmasına izin verir.

Kaynaklar

• Her iki ekran da bize ait, Figma'da tasarlandı ve ölçüldü. Uygulama Haven ve cihazları uydurma. Sayılar tutarlı: her iki ekranda da üç ışık açık, Floor Lamp %80'de ve termostat her ikisinde de 22°'ye ayarlı.
• İncelenen kalıp: Apple Home, üstte bir oda adı ve durumu, aksesuarlar için karolar ve sahneler için haplar. Metin boyutları iOS'u izler (12 ile 34 pt, 10 pt sekme etiketleri).
• İkonlar Phosphor'dan (MIT). Fotoğraflar Pexels'ten: Yusuf P ve Jan Vee.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.