Fikirlerinizin İyi Görünmesini Nasıl Sağlayabilirsiniz: Mobil Uygulama Görsel Tasarımına Yeni Başlayanlar İçin Kılavuz
Yayınlanan: 2015-11-24Harika bir uygulama fikri buldunuz, ancak bir yazı tipi ile yazı tipi arasındaki farkı bilmiyor musunuz veya bir hamburger menüsünün yalnızca bir arabada gördüğünüz bir şey olduğunu mu düşünüyorsunuz? Çok az deneyimi olan veya hiç tecrübesi olmayan girişimciler bile doğru ekip ve araçlarla harika uygulamalar oluşturabilir, ancak bir tel kafeste yolunuzu bilmek zarar vermez.
İster mobil kullanıcı arayüzü tasarımında yeni olun, ister uygulama oluşturma işine girişmeyi düşünüyorsanız, ister birkaç harika fikri olan meraklı bir kullanıcı olun, bu kılavuz, uygulamanızın iyi görünmesi söz konusu olduğunda doğru yola girmenize yardımcı olacaktır. , daha da önemlisi, kullanıcının elinde iyi hissetmek.
Mobil Uygulama Görsel Tasarımının Temel İlkeleri
Yeni başlayan tasarımcıların ve girişimcilerin yaptığı en yaygın görsel tasarım hatalarından biri, bir mobil uygulamanın aynı içerik, özellikler, işlevsellik ve kullanıcı arabirimi öğelerine sahip bir masaüstü uygulamasının veya web sitesi deneyiminin yalnızca daha küçük bir sürümü olduğunu varsaymaktır. Bu, içine düştüğünüz bir alışkanlıksa, şimdi onu bırakmanın ve asla geriye bakmamanın tam zamanı. Mobil uygulama UI tasarımı kendine özgü bir hayvandır ve cihazların, işletim sistemlerinin ve kullanıcı davranışının kısıtlamaları, daha büyük bir bilgisayarda uygun olandan çok daha farklı bir deneyim gerektirir.
Diğer medyalar için tasarım deneyimine sahip olsanız ve harika görsel tasarımı ayırt etme konusunda zaten bir ustalığa sahip olsanız bile, tabletler ve akıllı telefonlar için uygulamalar tasarlamak, üzerinde çalıştığınız teknoloji hakkında en az birkaç şey bilmenizi gerektirir. Ekran boyutu, dikkat edilmesi gereken bariz bir parametredir, ancak gerçek cihazın hızı ve pil ömrü de öyle.
Ek olarak, Apple ve Android'in her ikisinin de kendi işletim sistemlerinde çalışan uygulamalar için kendi tasarım felsefeleri ve önerileri vardır. Bu yönergelere uymak, kullanıcılarınızın uygulamanızı kullanırken bir süreklilik ve yeterlilik duygusu hissetmelerine yardımcı olur - sonuçta, gün boyunca başka uygulamaları da kullanıyorlar.
Aynı şey, giyilebilir cihazlar için tasarım yaparken de geçerlidir. Örneğin, FitBit Flex veya Charge, UI'lerini görüntülemek için yalnızca ince siyah bir şeride sahiptir. Adım sayısı, çıkılan kat sayısı, yakılan kalori ve hatta tarih ve saat gibi bilgileri bu kadar küçük bir alana nasıl sığdırıyorlar? Daha da iyisi, onu nasıl bu kadar kullanışlı ve güzel hale getiriyorlar?
Alanın sınırlamalarını kabul ederek, kullanıcının neyi ne zaman bilmesi gerektiğine öncelik vererek (ve en önemlisi, kullanıcıların ekranların sırasını kendi ihtiyaçlarına ve önceliklerine göre değiştirmelerine izin vererek) ve basit, tanınması kolay simgeler kullanarak. Bugünlerde herkesin ve annelerinin (ve hatta Amerika Birleşik Devletleri Başkanının bile!) bir FitBit'e sahip olmasının bir nedeni var ve iyi görsel tasarım bunun bir parçası.
Ekranı Boğmayın
Bariz olanı aradan çıkaralım: mobil uygulamalar, phablet çağında bile, size çalışabileceğiniz bir ton ekran alanı sağlamaz. Mobil görsel tasarımın en önemli yönlerinden biri, belirli bir zamanda ekranda gerçekten ne olması gerektiğine karar vermektir.
Kulağa basit geliyor, değil mi? Pekala, bir kez kazmaya başladığınızda, her zaman tamamen kesilmiş ve kuru değildir. Giriş ekranının nasıl görünmesini istediğiniz konusunda kafanızda bir fikriniz olabilir, ancak dijital bir prototip oluşturduğunuzda, başlangıçta istediğiniz tüm formlara uyamayacağınızı (veya yapabilirsiniz, ancak korkunç görünüyor ve daha da kötü hissediyor). Alternatif olarak, aklınızdaki zarif ve basit giriş ekranının, daha fazla rehberliğe ihtiyaç duyan bir kullanıcı için tamamen sezgisel olmadığını görebilirsiniz.
Peki neyin nereye gittiğine nasıl karar veriyorsunuz? Çoğu, uygulama, kullanıcı testi ve diğer uygulamaların nelerin doğru olduğu konusunda bir fikir edinme ile birlikte gelir, ancak izlenmesi gereken bazı genel kurallar vardır.
Kullanıcıyı Sıkmayın
Kullanıcılar uygulamanızı ilk açtığında ne yapacaklarını nasıl bilecekler? Deneyim sezgisel mi? Değilse, kullanıcılarınıza uygulamanızın çeşitli özelliklerini ve işlevlerini nasıl göstereceksiniz?
Tatlı noktaya ulaştığınızdan emin olmanın iki önemli yolu, bir odak noktası belirlemek ve görsel bir hiyerarşi oluşturmaktır.
Daha önce yazdığımız gibi, bazı öğelerin diğerlerinden daha fazla odaklanacağı şekilde ekranınıza öncelik vermek, ortamdan bağımsız olarak yalnızca iyi bir görsel tasarımdır - bu, mobil uygulama kullanıcı arayüzüne özgü değildir. Bununla birlikte, kullanıcı arayüzünüz net ve sağlam bir hiyerarşi olmadan başarısız olacaktır ve uzaydaki sınırlamalar, odak noktanızın ayırt edilmesinin kolay olmasını özellikle önemli kılmaktadır. Bu hiyerarşi, kullanıcınızın uygulamanızla etkileşim kurarken neye bakacağını ve ne yapacağını bilmesine yardımcı olur.
Görsel tasarıma yaklaşırken, bir uygulama ekranına eklemek istediğiniz her şeyi alın ve kullanıcının bakması için en önemli olan şeye karar verin. İster bir fotoğraf, ister bir metin parçası, ister bir giriş alanı veya bir düğme olsun, bu öğe, alan ve görsel ayırt edicilik açısından ekranınıza hakim olmalıdır. Ardından, o anda ekranı kaplayacak her şey için bir hiyerarşi oluşturun.
Yine örnek olarak login ekranını kullanalım. Bu ekranın en önemli kısmı kullanıcıların isim ve şifrelerini gireceği alanlardır. Bu alanlar çok küçükse veya köşede gizliyse, yalnızca kullanıcının fark etmesi zor olmakla kalmaz, aynı zamanda etkileşim kurması da daha zor olur (kimse yazmak için yakınlaştırmak zorunda kalmaktan hoşlanmaz).
Hareketler ve Geri Bildirim
Sizin için tavsiye edilen:
Anti-Profiteing Hükmü Hintli Startuplar İçin Ne Anlama Geliyor?
Edtech Startup'ları Hindistan'ın İşgücünün Becerilerini Geliştirmesine ve Geleceğe Hazır Olmasına Nasıl Yardımcı Oluyor?
Bu Hafta Yeni Çağ Teknoloji Hisseleri: Zomato'nun Sorunları Devam Ediyor, EaseMyTrip Gönderileri Stro...
Hintli Startup'lar Finansman İçin Kısayollar Kullanıyor
Dijital Pazarlama Platformu Logicserve Çantaları 80 INR Cr Finansmanı, LS Dig Olarak Yeniden Markala...
Rapor, Lendingtech Alanına İlişkin Yenilenen Düzenleyici İncelemeye Karşı Uyarıyor
Bekle - kullanıcının gerçekte gördüğü gibi görsel tasarımdan bahsetmiyor muyduk? Peki jestlerin ve geri bildirimlerin bununla ne ilgisi var? Mobil cihazlar için görsel tasarımın özelliklerinden biri, tamamen görsel bir deneyimden bahsetmemenizdir. Kullanıcılarınız etkileşimde bulunmak için uygulamanıza dokunacağından, kullanıcının gördüklerinin kullanıcının hissettikleriyle bir anlam ifade etmesi gerekir. Mobil kullanıcı arayüzünüze yaklaşırken görüşü dokunmadan ayıramazsınız.
Örneğin, bir kullanıcıya bir düğmenin bir düğme olduğunu söylemenin birkaç yolu vardır. Kullanıcının basması veya kaydırması gereken bir öğe olduğunu göstermek için gölgeleri veya diğer üç boyutlu ipuçlarını kullanabilir veya kullanıcının onunla etkileşime girmesini (ve nasıl onunla etkileşime geçmek için!).
Ancak düğmenin hareket şekli bile kullanıcının ne yaptığına bağlı olabilir. Örneğin, kullanıcı ekranı tamamen kaydırmazsa, düğme orijinal konumuna dönmeden önce biraz yana kayabilir ve kullanıcıdan daha emin bir hareket bekleyebilir. Veya düğmenin basılı tutulması gerekiyorsa, serbest bırakılmasının uygun olduğunu kullanıcıya bildiren bazı dokunsal geri bildirimler verebilir. Tüm bunlar, UI öğelerinizi nasıl tasarladığınızı ve canlandırdığınızı etkiler.
Bunların hepsi karmaşık geliyorsa, uygulamanızı hiç duymamış, ofisinizdeki eskizleri ve beyaz tahtaları hiç görmemiş bir kullanıcıya nasıl hissettirdiğini hayal edin. Bu nedenle kullanıcı katılımı önemlidir - kullanıcılarınızı yapmaları gereken eylemler konusunda uyarmak için okları, talimat metinlerini ve diğer görsel ipuçlarını kullanabilirsiniz. Bu ipuçlarının iyi görünmesini ve sezgisel hissettirmesini sağlamak, mobil uygulamanız için görsel tasarıma yaklaşırken dikkate alınması gereken bir diğer önemli faktördür.
Tipografi 101
Çok fazla yazı tipi ve yazı tipi var. Her birini, hatta orada olanların çoğunu bilmek gerekli değildir. İyi haber şu ki, çoğu mobil uygulama için yalnızca bir avuç bilgi sahibi olmanız yeterlidir, çünkü popüler yazı tiplerinin popüler olmasının bir nedeni vardır: çok sayıda insan onları güzel ve okunabilir buluyor.
Örneğin, muhtemelen Helvetica'ya aşinasınız (ve tipografide hızlı bir hızlandırılmış kurs istiyorsanız, Helvetica hakkında şaşırtıcı derecede eğlenceli belgesele göz atmak isteyebilirsiniz). Mobil kullanıcı arayüzlerinden tren istasyonlarına ve marka logolarına kadar, Helvetica neredeyse evrensel bir çekiciliğe sahiptir (yine de The Beatles veya çikolata gibi, her şeyin en az birkaç vokal kötüleyicisi vardır). Ve bunun bir nedeni var: basit, okunabilir ve hoş görünümlü bir yazı tipi.
Bazı yazı tipleri özellikle mobil cihazlar düşünülerek tasarlanmıştır. Örneğin, Microsoft'un Segoe UI'si, küçük boyutlarda bile cihaz ekranlarında yüksek düzeyde okunabilir olacak şekilde tasarlanmıştır. Benzer şekilde Google, Android için Roboto'yu geliştirdi ve Apple, San Francisco kullanıcı arayüzünü kullanıyor. Tipografi söz konusu olduğunda her işletim sisteminin kendi önerileri ve yönergeleri vardır, ancak çoğu aynı temel ilkelere indirgenebilir:
- Okunabilir tutun
Aralarından seçim yapabileceğiniz sonsuz yazı tipi var ve bazıları çok gösterişli ve heyecan verici görünüyor. Günün sonunda, yine de en önemli şey, metni okumanın ne kadar kolay olduğudur. Güzel görünen, ancak kullanıcılarınızın bunun için çalışmasını sağlayan bir yazı tipinden, sizi şaşı yapmayan basit bir sans serif yazı tipi seçmek daha iyidir. (Ve unutmayın: iyi görsel tasarım, erişilebilir görsel tasarımdır ve kullanıcılarınızın çoğu görme konusunda zorluk çekebilir. Kullanıcı arayüzünüzü mümkün olduğunca gözleri yormayın.)
- Bir veya iki yazı tipine bağlı kalın
Bu, “okunabilir tutmak” için bir tür sonuçtur. Mobil kullanıcı arayüzü perspektifinden, görsel tasarımınızda birkaç farklı yazı tipi kullanmaya gerçekten gerek yoktur ve bu genellikle okunabilirliğe zarar verebilir. Bir yazı tipi iyidir veya kesinlikle gerekli olduğunu düşünüyorsanız iki. Tipografinizi kullanarak hiyerarşi oluşturmak için birden fazla yazı tipine değil, farklı yazı tipi boyutlarına, ağırlıklarına ve stillerine güvenmelisiniz.
- Tekerleği yeniden icat etmeyin
Tipografi hakkında kitaplar yazabileceğimiz bir konu ve hayatını bu konuya adayan pek çok insan var. Neyse ki, onlardan biri olmak zorunda değilsin (gerçekten istemiyorsan!). Yeni başlıyorsanız, benzer uygulamaların kullandığı yazı tiplerine bir göz atın veya işletim sistemi yönergelerinin önerdiği belirli yazı tiplerini kullanın. Bu, görsel tasarıma yaklaşmanın daha az yaratıcı bir yolu gibi görünse de, bir iOS uygulaması için SF-UI veya bir Android uygulaması için Roboto kullanmak, kullanıcınıza daha sürekli bir mobil cihaz deneyimi sunar ve uygulamanızın okunabilir olmasını garanti eder.
Mobil Uygulama Kullanıcı Arayüzü Tasarımcıları için Renk Teorisi
Yazı tiplerinden çok daha fazlası renklerdir. Bu kadar çok sonsuz olasılık varken, mobil uygulamanız için olağanüstü olmayan bir renk şeması bulmak çok kolay. Kabul edelim: görsel tasarım eğitimi almadıysanız veya sadece bu konuda bir hüneriniz yoksa, yetmişlerde ebeveynlerinizin verdiği en kötü gardırop kararlarından bazılarına benzeyen bir mobil kullanıcı arayüzüne sahip olabilirsiniz (cidden, babanıza kim söyledi? hardal sarısı eğlence kıyafeti iyi bir fikirdi, özellikle toz mavi platformlar ile?).
Tipografide olduğu gibi, tasarladığınız işletim sisteminin muhtemelen bir renk düzeninde nelere bakmanız gerektiğine dair kendi yönergeleri vardır. İşletim sisteminden bağımsız olarak, birkaç öneri evrenseldir:
- Paletinizi iki ila dört renkle sınırlayın
Mobil uygulama kullanıcı arayüzünüz, Lisa Frank'e olan sevginizi göstermenin zamanı değil. Yazı tiplerinde olduğu gibi, uygulamanız için bir renk şeması seçmek söz konusu olduğunda daha az şey daha fazladır. Çok fazla renk ve gölge, görsel tasarımınızı karmaşıklaştırarak, kullanıcıların uygulamanızda yollarını bulmalarını ve neyle etkileşime girmeleri gerektiğini bilmelerini zorlaştırır.
- Birincil ve vurgu renkleri belirleyin ve bunları uygun şekilde kullanın.
Rengi, kullanıcılara neler olduğunu veya ne yapmaları gerektiğini söyleyecek şekilde kullanmalısınız. Örneğin, kullanıcının etkileşimde bulunması gereken öğeler (menüler veya düğmeler gibi) farklı bir renk olabilir ve kullanıcı öğeye dokunduğunda veya kaydırdığında bu renk değişebilir.
Her palet için, kullanıcı arayüzünüzün etkileşimli olmayan öğeleri için bir ana renk veya birincil renk grubu ve etkileşimi göstermek için bir vurgu rengi seçeceksiniz. Bunu bir perspektife oturtmak için, kullanıcının basitçe kaydırdığı metin blokları veya statik çizimler için vurgu renginizi kullanmamalısınız ve ana renklerinizi düğmelerde kullanmamalısınız. Ana ve vurgu renklerini tutarlı bir şekilde kullanırsanız, kullanıcılarınız uygulamanızda daha sezgisel bir şekilde gezinebilir.
- Tasarımınızı daha okunaklı hale getirmek için renkleri kullanın ve birlikte iyi oynayan renkleri seçin.
Renklerinizin bir şemada birlikte iyi çalışıp çalışmayacağını belirleyen birkaç faktör vardır. Dikkate alınması gereken en büyük şeylerden biri kontrasttır: örneğin, parlak sarı, limon yeşili üzerinde çok görünür olmayacaktır. Ancak, iki renk veya gölgenin birbiriyle iyi kontrast oluşturması, birlikte iyi çalışacakları anlamına gelmez. Bu parlak sarı, kraliyet mavisi bir gölgenin üstünde veya yanındaysa “titreşiyor” gibi görünecektir.
Bunun olmasının nedeni kendi blog gönderisini doldurabilir, ancak bir renk paleti seçmeye başlamanız için Google ve Apple'ın ilgili görsel tasarım yönergelerinde özellikle önerdiği paletlere bakmayı deneyin. Yine, arayüzünüz için görsel olarak memnun edici kararlar vermek açısından sizin için zaten birçok iş yaptılar, böylece kullanıcılarınızın istediği özellikleri ve işlevleri sağlamaya odaklanabilirsiniz.
Bir not daha: Erişilebilirlik söz konusu olduğunda renk düzeniniz büyük bir fark yaratır. Mobil uygulama kullanıcı arayüzünüzde kalite güvencesi çalıştırdığınızda, test etmeniz gereken şeylerden biri, uygulamanın renk körlüğü olanlar (örneğin kırmızı ve yeşili ayırt etmede sorun yaşayanlar) için kullanılabilir olup olmayacağıdır. Uygulamanızı daha erişilebilir hale getirmenin bir yolu, kullanıcılarınızın bir dizi özel renk paleti arasından seçim yapmasına izin vermektir, böylece kişisel uygulama deneyimleri onların görsel ihtiyaçlarına ve tercihlerine göre şekillendirilir.
Görsel Tasarım Tasarımlarınızı Test Etmek İçin Bir Mobil Uygulama Prototipi Kullanın
Mobil uygulama kullanıcı arayüzünde görsel tasarımın etkili bir şekilde nasıl uygulanacağını öğrenmek aşamalı bir süreçtir, ancak estetik fikirlerinizi test etmenin en iyi yollarından biri uygulamanızın dijital bir prototipini oluşturmaktır.
Bir mobil tasarım prototipiyle, yazı tiplerinden renklere ve gezinme türlerine kadar görsel tasarımınızın farklı yönlerini hızlı bir şekilde A/B testi yapabilirsiniz. Uygulamayı yalnızca gerektiği gibi ayarlayarak test etmekle kalmaz, aynı zamanda arkadaşlarınızdan, ailenizden, iş arkadaşlarınızdan ve beta testçilerinden geri bildirimde bulunmalarını isteyebilirsiniz. Sonuçta, çarpıcı bir tasarımla sanatçılarla dolu bir odayı etkileyebilirsiniz, ancak en önemli olan görüşler, kullanıcılarınızın görüşleridir.
İlk olarak 30 Ekim'de Proto Blog'da yayınlandı.