Nihai UI tasarım kılavuzu

İçerik

• 01. Tipografinizi seçin
• 02. Doğru paleti seçin
• 03. Stil bağlantıları ve düğmeleri
• 04. Bileşenlerinizi oluşturun
• 05. Belgeleyin ve işbirliği yapın

Kullanıcı arayüzü tasarımı nedir? Daha iyi bir soru, bir kullanıcı arayüzünün tasarımına gerçekte ne girer? Estetik? Kullanılabilirlik? Ulaşılabilirlik? Hepsi? Optimal bir kullanıcı deneyimi sağlamak için tüm bu faktörler nasıl birleşir ve hangisi önce gelmelidir?

Erişilebilirlik her zaman önce gelmeli ve optimum kullanılabilirliğin temellerini atmalıdır (en iyi web sitesi kurucusunu kullanmak burada yardımcı olacaktır). Ve sonra, bir kullanıcı arayüzü hem erişilebilir hem de kullanılabilir olduğunda, zaten estetik açıdan oldukça iyi görünmelidir (UI tasarım araçları burada yardımcı olacaktır). Ardından, tasarımınızın tüm düzeylerde çalıştığından emin olmak için, en iyi kullanıcı test araçlarından oluşan seçimlerimizle bunu baştan sona test etmeniz gerekir. Çoğu tasarımın temel unsurlarına ve görsel tutarlılığı sağlamak için neler yapılabileceğine daha yakından bakalım.

01. Tipografinizi seçin

Harika tipografi (tasarımın birçok yönü gibi) erişilebilirliğe indirgenir. Görsel tasarım kesinlikle kullanıcının genel deneyimine katkıda bulunur, ancak günün sonunda kullanıcılar kullanıcı arayüzüyle etkileşime girerler, onu sanat olarak görmezler. Okunaklı harfler netlik sağlar ve okunabilir kelimeler, kullanıcıların içeriği verimli bir şekilde sindirmesine yardımcı olur. Her ikisi de herhangi bir görsel estetikten daha önemlidir.

Bununla birlikte, iyi tasarlanmış tipografi yine de estetik açıdan tatmin edici olabilir. Beyaz üzerine siyah Helvetica (veya benzer bir yazı tipi), yalnızca birkaç basit tipografik geliştirmeden sonra güzel bir şey olabilir. Geliştirmelerle, yazı tipi boyutunu, satır yüksekliğini, harf aralığını vb. Düzenlemeyi kastediyoruz - yazı tipi veya metnin rengini değil.

"Güzel" tipografi, okunamadığında aslında çirkin çünkü hayal kırıklığı her zaman estetiğin önüne geçer. Harika tasarım dengeli ve uyumludur.

Kullanıcı arayüzü tasarımının birçok yönü gibi, erişilebilirliği ve estetiği dengelemek için görsellerde ince ayar yapmak zor değil. Buradaki zorluk, tüm tasarım boyunca tutarlılığı korumaktır. Tutarlılık, değişen önemdeki öğeler arasında net bir hiyerarşi kurar ve bu da, kullanıcıların bir kullanıcı arayüzünü daha hızlı anlamasına ve hatta içeriği daha verimli bir şekilde sindirmesine yardımcı olur.

Okunabilirlik ve okunabilirlik söz konusu olduğunda, WCAG 2.0 Web İçeriği Erişilebilirlik Yönergeleri tarafından tanımlanan minimum kabul edilebilir yazı tipi boyutu 18pt'dir (veya 14pt kalın). Kullanılacak en iyi yazı tipi boyutu büyük ölçüde yazı tipinin kendisine bağlıdır, ancak görsel hiyerarşiye ve bu temel boyutun kendisini özetlerden ve başlıklardan nasıl ayırdığına dikkat etmek önemlidir (ör. h1>, h2>, h3>).

Tercih ettiğiniz kullanıcı arayüzü tasarım aracıyla (InVision Studio kullanacağız), bir dizi metin katmanı oluşturun (T) ve ardından tüm boyutları aşağıdaki şablonla ilişkilendirecek şekilde ayarlayın:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

InVision Studio (ve diğer tüm UI tasarım araçları) ile bu, sağ taraftaki Denetçi panelini kullanarak stilleri ayarlayarak yapılır.

Sonra yazı tipinizi seçin, ancak dikkatli olun çünkü bazı yazı tiplerinde fark edebileceğiniz şey 18 pikseldir. p> ve 22px h3> o kadar da farklı görünmüyor. İki seçeneğimiz var: yazı tipi boyutlarını değiştirin veya başlıklar için farklı bir yazı tipi düşünün. Tasarımınızın metin ağırlıklı olacağını düşünüyorsanız, ikincisi ile devam edin.

Unutmayın:

• Görsel kullanıcı arayüzü tasarımı genellikle içgüdüsel bir yaklaşımdır
• Hiçbir şeye karar verilmedi; her şey değişebilir

Satır yüksekliği

Optimum satır yüksekliği, makul düzeylerde okunabilirlik elde etmek için metin satırlarının aralarında yeterli boşluk olmasını sağlar. Bu, giderek daha fazla 'standart' olarak kabul edilmektedir; Google'ın Lighthouse Denetim aracı, bunu manuel bir kontrol olarak bile önermektedir (hatta metin, optimal satır yüksekliğinin bir sonucu olarak birbirine çok yakın olabilecek bağlantılar içeriyorsa bir işaret).

Bir kez daha, WCAG bu konuda bize yardımcı oluyor ve satır yüksekliklerinin yazı tipi boyutunun 1.5 katı olması gerektiğini beyan ediyor. Bu nedenle, "Çizgi" (veya benzeri) altındaki kullanıcı arayüzü tasarım aracınızda, yazı tipi boyutunu en az 1.5 ile çarpmanız yeterlidir. Örnek olarak, gövde metni 18px ise, satır yüksekliği 27px olacaktır (18 * 1.5 - matematik işlemini doğrudan Inspector'da da yürütebilirsiniz). Yine de dikkatli olun - 1,6x daha iyi bir uyum hissediyorsa, 1,6x kullanın. Farklı yazı tiplerinin farklı sonuçlar vereceğini unutmayın.

Tasarımımızda gerçek verileri kullanmayı düşünmek için henüz çok erken, ancak en azından yine de biraz gerçekçi veriler (hatta lorem ipsum) kullanmalıyız. InVision Studio, tipografimizin gerçekte neye benzeyebileceğini görmemize yardımcı olacak yerel bir gerçek veri uygulamasına sahiptir.

Paragraf aralığı

Paragraf aralığı, InVision Studio’s Inspector'ı kullanarak beyan edebileceğimiz bir stil değildir. Bunun yerine, Akıllı Kılavuzları (⌥) kullanarak katmanları manuel olarak hizalamamız gerekecek. Satır yüksekliğine benzer şekilde, sihirli çarpan 2x'tir (yazı tipi boyutunun iki katı). Örnek olarak, yazı tipi boyutu 18 piksel ise, sonraki metin bloğuna geçmeden önce en az 36 piksel boşluk olmalıdır. Harf aralığı en az 0,12 olmalıdır.

Ancak, bileşenleri oluşturmaya başlayana kadar bu konuda endişelenmemize gerek yok.

Paylaşılan stiller

Kullanıcı arayüzü tasarım aracınız destekliyorsa (InVision Studio henüz desteklemiyorsa), görsel tutarlılık sağlarken hızla yeniden kullanılabilir hale getirmek için bu tipografik stilleri "Paylaşılan Stillere" dönüştürmeyi düşünün. Bu genellikle Müfettiş aracılığıyla gerçekleştirilir.

02. Doğru paleti seçin

Tasarımınız için mükemmel renkleri seçmek, estetiğin çok ötesine geçer: sitenizin tüm hiyerarşisini bilgilendirebilir.

Kullanıcı arayüzü tasarımı söz konusu olduğunda, renk alışkanlıkla uğraşmaktan hoşlandığımız ilk şeylerden biridir, ancak bize doğrudan görsel tasarıma dalmanın kötü bir şey olduğu öğretildi. Bu kesinlikle doğrudur, ancak görsel tutarlılık söz konusu olduğunda, renk başka roller oynadığı için en önemli endişe kaynağı olmalıdır.

Kullanıcı arayüzü tasarımında renk çok etkili olabilir, ancak bazı kullanıcılar (aslında çoğu) çeşitli görsel engellerden muzdarip olduğundan, her zaman güvenilir değildir. Bununla birlikte, mesele kullanılan belirli renkle değil, renk türü ile ilgilidir. Renk bu bağlamda duygusal etki için kullanıldığından markalaşma söz konusu olduğunda bu doğru olmayabilir, ancak UI tasarımında renk aynı zamanda niyet, anlam ve tabii ki görsel hiyerarşiyi iletmek için de kullanılır.

01. Stark
Stark eklentisi Sketch ve Adobe XD ile uyumludur ve renk kontrastını kontrol etmenize ve renk körlüğünü doğrudan tuvalden simüle etmenize yardımcı olur. Figma ve InVision Studio desteği çok yakında.
02.Renkler
Renkler, WCAG 2.0 Yönergelerini karşılamak için uygun miktarda renk kontrastına sahip 90 renk kombinasyonundan oluşan bir settir - hatta bazıları AAA standardını karşılamayı bile başarabilir.
03. A11y Projesi
A11y Projesi, erişilebilirlikle ilgili her şey için büyük bir merkezdir. Kaynaklar, araçlar, ipuçları, öğreticiler içerir ve Stark eklentisinin üreticisi tarafından oluşturulur ve InVision'dan fon alır.

Üç renk türü

Renkler bir anlam taşır, bu yüzden çok fazla olmamak önemlidir. Çok fazla anlam, kullanıcının anlaması ve hatırlaması gereken daha fazla şeyle sonuçlanır - endişelenmemiz için daha fazla renk kombinasyonundan bahsetmeye gerek yok. Genel olarak, bu önerilen format olacaktır:

• Harekete geçirici mesaj rengi (aynı zamanda ana marka rengi)
• Nötr koyu renk (UI öğeleri veya karanlık mod için daha iyidir)
• Yukarıdakilerin tümü için biraz daha açık ve daha koyu bir varyasyon

Bu, aşağıdakileri sağlar:

• Karanlık moda kolayca ulaşılabilir
• CTA rengimiz asla diğer renklerle çakışmaz
• Herhangi bir senaryoda vurgulayabilir ve vurguyu azaltabiliriz

Paletinizi oluşturun

Tercih ettiğiniz kullanıcı arayüzü tasarım aracıyla, her renk için ("Marka", "Nötr / Açık" ve "Nötr / Koyu" olarak adlandırılan) oldukça büyük bir çalışma yüzeyi oluşturun (A'ya dokunun). Ardından, her çalışma yüzeyinde, rengin daha koyu ve daha açık varyasyonlarını ve ayrıca diğer renkleri görüntüleyen ek küçük dikdörtgenler oluşturun.

Sırasıyla yüzde 10 ekstra beyaz ve yüzde 10 ekstra siyah olarak biraz daha açık ve koyu olarak kabul ederiz. İşiniz bittiğinde, her çalışma yüzeyinde tipografik stillerin bir kopyasını görüntüleyin. Bu metin katmanlarının rengi, nötr koyu olması gereken nötr açık çalışma yüzeyi dışında, nötr açık olmalıdır.

Kontrast

Daha sonra, optimum renk kontrastı için renklerimize bakmamız gerekecek. Bunu yapabilen çeşitli araçlar vardır, örneğin Sketch ve Adobe XD için Stark eklentisi veya macOS için Kontrast - ancak, Kontrast Denetleyicisi veya Renk Kontrastı Denetleyicisi gibi çevrimiçi bir çözüm yeterli olacaktır.

Her kombinasyon için renk kontrastını kontrol edin ve renkleri buna göre ayarlayın. Hangi renkleri kullanacağınızdan emin değilseniz Color Safe'in önerilerini kullanmayı deneyin.

03. Stil bağlantıları ve düğmeleri

Boyut

Tipografiye çok benzeyen düğmeler ve bağlantıların birkaç çeşidi olmalıdır. Sonuçta, tüm eylemler eşit derecede önemli değildir ve daha önce tartıştığımız gibi, renk güvenilmez bir iletişim yöntemidir, bu nedenle görsel hiyerarşiyi etkilemenin ana yöntemi olamaz. Ayrıca büyüklükte oynamamız gerekiyor.

Görsel uygunluk testi, hafifçe vurma hedeflerinin tıklanabilir görünüp görünmediğini belirlemek için kullanılan bir kullanılabilirlik testidir. Tasarımı Studio'dan Freehand'e senkronize edin (⌘⇧F), elde edilen URL'yi test uzmanlarına gönderin ve tıklanabilir olduğuna inandıkları öğeleri daire içine almalarını sağlayın.

InVision Studio olmayan kullanıcılar da Freehand'i kullanabilir, ancak InVision Studio kullanıcıları tasarımlarını, kullanıcılardan görsel geri bildirim almanın en hızlı ve en verimli yolu olan InVision Studio'dan sorunsuz bir şekilde Freehand'e başlatabilirler.

Genel olarak, düğme metninin 18px olarak bildirilmesini (gövde metniyle aynı), ancak düğmelerin kendilerinin üç farklı boyuta sahip olmasını öneririz:

• Normal: 44px yüksekliğinde (yuvarlak köşeler: 5px)
• Büyük: 54px yüksekliğinde (yuvarlak köşeler: 10px)
• Ekstra büyük: 64px yüksekliğinde (yuvarlak köşeler: 15px)

Bu, renge güvenmeden belirli düğmelerin daha önemli görünmesini ve aynı zamanda düğmeleri iç içe geçirmemizi sağlar (örneğin, minimal görünümlü bir form alanı içinde bir düğme kullanın).

Derinlik

Dokunma hedefinin bir düğme veya bir form alanı olmasına bakılmaksızın, derinliği artırmak ve dolayısıyla etkileşimi önermek için gölgeler kullanılmalıdır. Tüm düğme ve form alanları varyantları için tek bir gölge stili uygundur.

Etkileşim

Her düğme türünün üzerine gelme durumunu belirtmek için bir varyasyona ihtiyacı vardır. Bu, kullanıcıya yapmaya çalıştıkları şeyin tamamen iyi olduğunu açıklar ve gecikmeden devam etmelerini sağlar.

Bu aslında görsel tutarlılığı korumanın daha karmaşık yönlerinden biridir, çünkü renk genellikle bir durum yaratma söz konusu olduğunda değiştirilecek tercih edilen stildir. Neyse ki, bu durum değişiklikleri nispeten ince olabilir, bu nedenle rengi biraz daha açık veya daha koyu varyasyonuna çevirmek sorun değil - işte bunun için. Bu, bağlantılar için de geçerlidir.

Buna karşı karar vermek, ya zaten önemli bir anlamı olan, kullanıcıların kafasının karışmasına ya da başka bir renk bulmaya karar vermesine neden olan bir rengi kullanmamıza neden olacaktır. İkincil bir renk kullanmaya karar vermek tamamen iyidir, ancak kullanıcı arayüzü öğeleri yerine pazarlama görselleri için kaydedilmelidir. Daha azı daha fazladır (ve daha kolaydır).

Her çalışma yüzeyi için bu adımı tekrarlamayı unutmayın. Markalı CTA düğmelerini marka çalışma yüzeyine eklemeyin. Daha sonra, belirli kombinasyonlar çalışmadığında neler olacağını ele alacağız.

04. Bileşenlerinizi oluşturun

Bileşenler büyük bir zaman tasarrufu sağlar ve tüm UI tasarım araçları bu özelliği sunar (örneğin, Sketch'te, Semboller olarak adlandırılırlar). Studio'da, bileşeni oluşturması gereken tüm katmanları seçerek ve ⌘K kısayol.

Bileşenleri kullanma

Wireframe'ler, yalnızca yüksek kullanılabilirliğe sahip kullanıcı arabirimleri tasarlamak için değil, aynı zamanda kullanıcı arabirimimizin uzun vadede neye ihtiyaç duyacağını bulmak için de çok kullanışlıdır. Bir tür geleceğe hazır gibi.

Bu, çok sayıda bileşen tasarlamamız veya olası herhangi bir senaryoya hazır olmamız gerektiği anlamına gelmez, ancak "Ya eğer?" Tutumunu benimsememiz gerektiği anlamına gelir.

Örneğin, tel çerçevemiz 3x1 bileşen gerektiriyorsa, ancak içeriğin sabit olmadığını biliyorsak, biraz düşünmek bizi merak etmeye sevk edebilir: "Ya bu bileşenler 4x1 olursa?" Temel kural şudur: Yalnızca zaten var olan kullanıcı ihtiyaçları için tasarım yapın, ancak çözümleri nispeten esnek hale getirmeye çalışın. Aksi takdirde, daha sonra çok karmaşık bir "tasarım borcu" ile karşılaşacağız.

Artık bu bileşeni sol taraftaki Kitaplıklar> Belge'den tuvale sürükleyerek yeniden kullanabiliriz, ancak bu iş akışının kullanıcı arabirimi aracınıza bağlı olarak farklılık gösterebileceğini unutmayın.

Bu stil kılavuzları oluşturma (ve sonunda tasarımın kendisini oluşturma) yöntemi, özellikle modüler / kart tabanlı mizanpajlarla iyi çalışır, ancak üstbilgiler, altbilgiler ve gezinmeler gibi "ortak alanlar" da bir bileşen için mükemmel adaylardır.

Tipografik stillerimiz, renklerimiz ve düğmelerimizle yaptığımız gibi, bileşenlerimizi dikkatli bir şekilde düzenlemeyi unutmamalıyız.

Kurallarımızı kullanmak

Daha önce, markalı CTA düğmelerinin diğer her şey arasında öne çıkması gerektiğinden, marka renginin üstünde markalı CTA düğmeleri kullanmama konusunda bir açıklama yaptık. Öyleyse, markalı bir CTA düğmesini kullanmaya devam ederken markalı bir bileşen oluşturmaya nasıl devam edeceğiz? Sonuçta, diyelim ki gezinme düğmeleri veya daha az önemli düğmeler için nötr koyu düğmeler kullanıyorsak, bu bir seçenek olmaz, değil mi?

Sağ. Dolayısıyla bu, bir bileşen, özellikle de başlık + metin + düğme kombinasyonu oluşturmak için ideal bir fırsat olacaktır. Markalı düğmenin kullanımını etkinleştirmek için nasıl nötr bir ışık kartı arka planı oluşturduğuma dikkat edin. Benzer şekilde, nötr ışık form alanı (form alanları, tarihsel olarak kağıt formlarla eşanlamlı zihinsel model nedeniyle genellikle beyazdır) nötr ışık arka planında harika görünmez, bu nedenle yalnızca nötr karanlık arka planda - doğrudan veya içeride kullanılabilirler. nötr karanlık bir bileşen. Kurallarımıza uyarak ve tutarlılığı korurken tasarımımızı bu şekilde esnek hale getiriyoruz.

Stres testi

İdeal olarak, tasarımımızda sağlamlığı sağlamanın en hızlı ve en etkili yolu, onu stres testinden geçirmektir. Bir tasarımı teste tabi tutmak zalim olmak demektir. Diyelim ki X miktarda nav öğesi olan bir navigasyonumuz var çünkü gereklilik buydu; Gerçekten esneklik sağlamak için, daha fazla nav öğesi ekleyerek bu gereksinimleri değiştirmeyi deneyin ya da işlere gerçekten bir anahtar atmak için diğerlerinden daha yüksek görsel hiyerarşiye sahip bir nav öğesi eklemeyi deneyin. Boyut, tipografi ve renk kurallarımız böyle bir şeye izin veriyor mu? Veya optimum kullanılabilirliği sunmak için başka bir kurala ihtiyacımız var mı?

Kural eklemek ile kuralları esnetmek arasında bir fark olduğunu unutmayın. Daha uç durumlar daha az tutarlılık anlamına gelir, bu nedenle çoğu zaman kullanılabilirlik uğruna bileşeni basitçe yeniden düşünmek daha iyidir.

05. Belgeleyin ve işbirliği yapın

Tasarım dosyalarımızın hem kendimiz hem de tasarım dosyamızı kullanabilecek diğer tasarımcılar için kullanımını nasıl kolaylaştırabiliriz? Sizin de anlayacağınız gibi, onları güvenilir, paylaşılan bir bulut depolamada güvenli bir şekilde saklamak önemlidir.

Renkler

İlk adım, daha önce yapmadıysak tüm renkleri "Belge Renkleri" örneğine kaydetmektir - bu, onları tasarımımıza uygulamamız gerektiğinde erişmeyi kolaylaştıracaktır.Bunu yapmak için, Denetçiden renk seçici widget'ını açın, açılır menüden "Belge Renkleri" ni seçin ve ardından rengi renk örneğine eklemek için + simgesini tıklayın. Bu, çoğu UI aracında aynı şekilde çalışır.

Paylaşılan Kitaplıklar

Ardından, tipografik stiller, renkler, düğmeler, ortak alanlar ve temel bileşenlerle birlikte belgemizi paylaşılan bir kitaplığa dönüştürmemiz gerekiyor.

Esasen bu, yalnızca bir katmandan oluşsa bile her öğenin bir bileşen olması gerektiği anlamına gelir. Sol taraftaki Kitaplıklar kenar çubuğundaki + ‌ düğmesini tıklayın ve ardından bu belgeyi yeni bir belgeye aktarın. Doğru: Belgemiz artık bir kitaplık ve garantili tutarlılıkla kullanıcı arabirimleri tasarlamak için kullanılmaya hazır.

InVision Studio, InVision’ın resmi Tasarım Sistem Yöneticisi aracıyla henüz senkronize olmaması bakımından biraz sınırlıdır, ancak diğer tasarımcıların zaman içinde kullanması ve güncellemesi için kütüphaneyi Dropbox'ta barındırmak yeterince kolaydır. Bir değişiklik yapıldığında (yerel olarak veya uzaktan), kitaplığı kullanan her Studio dosyası (tekrar, yerel veya uzaktan) renkleri ve bileşenleri güncellemek isteyip istemediğinizi soracaktır. Takımlar arasında tasarım kitaplıkları bu şekilde korunur.

Görsel olarak tutarlı kullanıcı arayüzleri tasarlamaya gelince, her şeyi yeniden kullanın. Düğmeleri tasarlayın, ardından düğme bileşenleri oluşturmak için düğmeleri kullanın ve ardından
uyarılar ve iletişim kutuları gibi diğer bileşenleri oluşturmak için düğme bileşenleri.

Sadece ihtiyaç duyulmayan bileşenler yaratmayın. Unutmayın, bir kütüphane oluşturmanın sürekli ve işbirliğine dayalı bir çabadır. Tek seferde tamamlanması, tek başına tamamlanması veya hiç bitirilmesi gerekmez. Sadece bir dili aktarması gerekir.

Geniş ölçekte tasarım

Bir tasarım genişledikçe, onu yönetmek zorlaşır. Özellikle InVision’ın DSM’si henüz Studio ile çalışmadığından, onu verimli ve sürdürülebilir kılmak için yapmak isteyebileceğimiz çeşitli ayarlamalar var.

Örneğin, çeşitli öğelerin kullanım durumlarını açıklamanın bir yolu olarak kitaplığımıza açıklama eklemek için metin katmanlarını kullanmak isteyebiliriz. Tipografik stiller için, metni daha açıklayıcı olacak şekilde düzenleyebiliriz (örneğin, "h1> / 1.3 / 44px"). Bu diyor ki h1>s 44px olmalı ve satır yüksekliği 1.3 olmalıdır.

Tasarım Devri

Tasarım aktarım araçları, geliştiricilerin uygulamayı veya web sitesini oluşturabilmeleri için tasarımdaki her öğe tarafından kullanılan çeşitli stilleri görüntüler. Bu araçlar, stillere genel bir bakış ve ayrıca "belge renkleri" örneğinin bir kopyasını içerir. Geliştiriciler bu stilleri kod olarak bile kopyalayabilir; bu, herhangi bir yazılı tasarım dokümanı oluşturmaya karar verdiyseniz ve bileşenlerin kod parçacığı temsillerini dahil etmek istiyorsanız mükemmeldir.

Sorun giderme ve bir web sitesini yönetme konusunda endişeleriniz varsa, doğru web barındırma hizmetine sahip olduğunuzdan emin olmak yardımcı olacaktır, ancak tasarım sisteminiz için InVision'ın tasarım aktarım aracı Inspect, kullanmanız gereken şeydir. Bunu kullanmak için InVision Studio'da "InVision'da Yayınla" düğmesini / simgesini tıklıyoruz, ortaya çıkan URL'yi açıyoruz ve ardından İnceleme Moduna geçmek için dokunuyoruz. Gerçekten uygun.

Bu içerik ilk olarak net dergisinde yayınlandı.