bugün her şey büyük miktar kurumsal müşteriler, sitenin oluşturulması için özette "Tasarım İsteği" sütununda belirtilmiştir - "Malzeme Tasarımı". Aynı zamanda kurumsal kesimin dikkatini çeken görsel unsurdan çok tarzın trend olması ve bilinirliğidir.

Örneklere geçmeden önce basit bir gerçeği açıklayalım:

Materyal Tasarımı, Google Corporation'ın kurumsal tarzıdır. Onu taklit etmek, örneğin hazır erişte üreticisinin Ferrari markasını taklit etmeye çalışması kadar aptalcadır.

Materyal Tasarımı kılavuzu, Google'ın kendisine ek olarak, ortak şirketlerin ürünleri ve özellikle Android platformu uygulamaları için de geçerlidir. Google Corporation ile ilgisi olmayan diğer herkes için ve Android platformu Materyal Tasarımına ilgi tamamen eğitici olmalıdır.

Kurumsal bir web sitesi, “Böyle istiyorum” demekten daha anlamlı bir yaklaşım gerektirir. Site, markanın ağdaki yüzüyse, bireysel özelliklere sahip olmalı ve şirketin genel imajına görsel olarak karşılık gelmelidir.

Materyal Tasarımı henüz gelişiminin zirvesine ulaşmadı ve bugün yalnızca Google marka kitabının gereksinimlerine tam olarak uygun olarak yapılmayan, aynı zamanda kendi görsel markalarına uyumlu bir şekilde entegre edilen pek çok site yok. Bununla birlikte, Materyal Tasarımı web sitelerinin birkaç başarılı örneğini bulmayı başardık.

Materyal Tasarımı tarzında site örnekleri

Kiosk Tarayıcı sitesi yalnızca Materyal Tasarımı tarzında yapılmamıştır, aynı zamanda mobil cihazlar için de iyi bir şekilde optimize edilmiştir.

Çok iyi karar Materyal Tasarımı kılavuzundaki detayları ve yapıları uyumlu bir şekilde birleştiren (gölgeler, düğmeler, düz tasarım, renkler ve JS efektleri) ve IsoE uluslararası okullar grubunun kurumsal kimliği.

lifeaweso platformu, Materyal Tasarımının temel ilkelerine uygun olarak yapılmıştır: basitlik, netlik, anlaşılabilirlik. Site hala geliştirme aşamasında, ancak Materyal Tasarımı stilindeki görsel entegrasyon oldukça iyi görünüyor.

Tanınmış geliştirme şirketi dijital çözümler ve çevrimiçi hizmetler Futurice, kötü bir site yapamazdı. Pastel renk düzeni, sorunsuz gezinme ve işlevsel öğeler, harika bir kullanıcı deneyimi oluşturmak için bir araya geliyor.

Bu web sitesi Materyal Tasarımının basitliğini alır ve onu canlı, kaliteli fotoğraflar. özellikle etkileyici arka plan resimleri kaydırırken.

Burada Materyal Tasarımının temel unsurunu görüyoruz - kartlar. Site çok hafif ve basit: dağınıklık yok ekstra elemanlar, ve anahtar bilgiler ayrı bloklarda görüntülenir.

Materyal Tasarımı konseptindeki diğer özelliklerin yanı sıra, burada önemli bir kontrol öğesi vardır - sitenin üzerinde gezinen bir düğme. Kartlardan sonra, bu belki de Google'ın tasarım yönündeki en akılda kalan unsurlardan biridir.

Ve elbette orijinal kaynağı da unutmayalım. Arayüz Google hizmeti Uyarılar, yakın zamanda, görsel performansını ve kullanılabilirliğini büyük ölçüde artıran Materyal Tasarımı'na güncellendi.

25 Haziran 2014 Google halka geleceğin arayüz tasarımı için yeni vizyonunu sundu - bundan böyle şirketin tüm ürünlerinin arayüzlerinin oluşturulacağı bir dizi kural ve koşul. Bütün bunlar neden gerekliydi? Hepsi beş yıl önce Google ürünleri aynı uygulamanın farklı sürümleri de dahil olmak üzere birbirinden çok farklı farklı cihazlar. Geliştiriciler, daha sonra "Project Kennedy" adı altında birleştirilen tüm gelişmiş uygulama ve hizmetleri oluşturmak ve birleştirmek için özel kurallar oluşturmayı düşündüler. Daha sonra gelişen bu projeydi. malzeme tasarımı (malzeme tasarımı).

malzeme felsefesi

Kennedy projesi sayesinde büyük hizmetler Ve Google hizmetleri arayüz tasarımının ve yapısının ortak özelliklerini aldı. Bu, web arayüzleri oluşturma yaklaşımlarını ve sonraki arayüzleri birleştirmeyi mümkün kıldı. mobil uygulamalar.

Birleştirilmiş tasarımın özelliklerinden biri, ekranın herhangi bir yerine yerleştirilebilen bilgi kartlarıydı. çalışma alanı. Onları uygulamada keşfetme Google Asistan, geliştiriciler kendilerine şu soruyu sordular: “Bu kartların altında ne var?”. Google Tasarım Başkan Yardımcısı Matias Duarte'ye göre, bu "masum soru güçlü bir kıvılcım ateşledi."

Tasarım ekibi, tasarımı bir düzlemler ve pikseller topluluğu olarak değil, gerçek bir fiziksel nesne olarak görmeye başladı. Aynı şeyi kullanıcıya iletmek istediler, böylece arayüzün somutluk hissine sahip olacak, ekranda olup bitenler mümkün olduğunca makul ve mantıklı görünecekti.

Toplam hakimiyetten sonra skeuomorfizm(tasarımda fiziksel dünyanın gerçek nesnelerinin doğru taklidi) herkes keskin bir şekilde ters yönde hareket etti - . Google tarafından temel alınan, icat eden oydu " malzeme". Aynı zamanda gerçekçiliğe küçük bir adım atmak.

kuantum kağıt

Malzeme tasarımının ana unsuru, fiziksel nesne metaforu kağıda benzer özelliklere sahiptir ve özelliklerinin çoğuna sahiptir - boyut, renk, kalınlık. Bu metaforik malzemenin her katmanı üç boyutlu uzayda yer alır ve tüm fiziksel yasalar bu nedenle klasik düz stilden farklı olarak alt katmanlara gölge düşürebilir. Tüm katmanlar ana alt malzeme üzerine yerleştirilir.

Kağıda benzer özellikleri nedeniyle, malzeme orijinal olarak "kuantum kağıdı" olarak adlandırıldı. Bu aynı kağıt fiziksel dünya, ancak bir takım "sihirli" özelliklere sahiptir, örneğin, boyutunu değiştirebilir ve uzayda sorunsuz hareket edebilir, diğer "yapraklar" ile birleşebilir veya birkaçına ayrılabilir. Kuantum kağıdı, çoğunlukla renkli olan arka planın hemen üzerinde yer alır. Beyaz renk. Gölge, malzemenin kendisinin hareketine bağlı olarak hareket eder, malzemenin arka plan üzerindeki yüksekliğine bağlı olarak azalır veya artar.

Dijital Mürekkep

"Kuantum kağıdının" yansıtması amaçlanıyorsa fiziksel özellikler nesne, sonra bu kağıdın yüzeyindeki her şey - renkler, resimler, metin, simgeler - kullanılarak oluşturulur " dijital mürekkep” - malzeme tasarımının bir başka benzersiz nesnesi.

Materyal tasarımı, arayüz tasarımında poligrafinin tüm gelişmelerini kullanır. Ama burada da var Google özellikleri. Örneğin malzeme tasarımında kullanılacak ana yazı tipi Roboto'dur. Ancak hiçbir şey şirketlerin kimliklerini korumak için kurumsal yazı tiplerini kullanmalarını engellemez. Materyal tasarım yönergeleri, arayüzlerde farklı ağırlıklar ve yazı tipi boyutları kullanmak için örnekler sağlar.

Ama malzeme tasarımında en önemli şey grafiktir. renk. Renk, kuantum kağıt üzerinde ana ifade aracıdır ve bu nedenle çok büyük bir rol oynar. önemli rol. Malzeme tasarımının kullanımı yaygındır temel Ve vurgu renkleri. Farklı durumlar için birkaç tonunun yanı sıra.

Genelde ana renkler başlıklar, eylem çubukları, durum çubukları gibi geniş alanları renklendirmek için kullanılır. önemli unsurları vurgulamak için kullanılır. vurgu rengi. örneğin, için kartvizit malzeme tasarımı - kayan eylem düğmeleri.

Materyal tasarımının temel ilkeleri, görüntülerin kullanımını belirler. Bu yüzden bu önemli unsur resmi kullanmak için ne önerilir en büyük boyçerçeveler olmadan. Ayrıca, görüntünün genel görünümünü en üst düzeye çıkarmak için eylem çubukları şeffaf hale gelir.

Android, özel bir kitaplığı destekler palet ana ve vurgu renklerini görüntüden çıkarabilen ve uygulamanın görünümünü aktif görüntüye uyarlayarak dinamik olarak değiştirebilen (yukarıdaki örnek).

Animasyonun Önemi

Doğal dünya ile analojiler kurmaya devam ederken, hiçbir şeyin hiçbir yerden alınmadığı gibi hiçbir şeyin hiçbir yere kaybolmadığını da belirtmek gerekir. Bu nedenle malzeme tasarımında, tüm kullanıcı eylemlerine yanıt olarak sorunsuz bir şekilde değiştirilmesi gerekir. mevcut arayüz böylece tüm geçişler mantıklı ve açıktır. Bu nedenle, malzeme tasarımında animasyon, kullanıcı ve arayüz arasındaki etkileşimin bir sonucudur.

Aktif hareket kullanıcının dikkatini çeker, bu nedenle gerçekçilik etkisini elde etmek için bazı kuralları kullanmanız gerekir:

• asimetri
  Tipik olarak, nesne boyutları cihazın genişliği ile sınırlıdır, bu nedenle kuantum kağıdının gerçekçi bir şekilde yeniden boyutlandırılmasını oluşturmak için nesnenin genişliğini ve yüksekliğini asimetrik olarak bağımsız olarak değiştirmek, böylece nesnede bir artış veya azalma yanılsamasından kaçınmak gerekir.
• Yanıt vermek
  Herhangi bir kullanıcı eylemi için uygun bir yanıt olmalıdır. Örnek olarak Google, etkileşim noktasında bir merkez üssü olan arayüz nesnelerinin dalga değişiminin etkisini sunar.
• Doğal otantik hareketler
  Doğada, hareket halindeki nesneler anında hız alamaz veya duramaz, bu nedenle gerçekçilik vermek için tüm animasyonlar doğrusal değil, yavaşlama ve hızlanmalarla olmalıdır.

Çözüm

malzeme tasarımı- kesinlikle yeni yol Hala geliştirilmekte olan ve istenildiği zaman tamamlanabilen etkileşim ve bina arayüzleri. Ancak, beklentilerini tahmin etmek zaten mümkün. En azından Android için uygulamaların geliştirilmesinde, tüm arayüzlerin birleştirilmesinin kullanım kolaylığı üzerinde olumlu bir etkisi olacağından, hakim olacaktır.

Google'ın kendisinde, malzeme tasarımı, pencere arayüzü ve imleç kontrolünün (Xerox PARC) geliştirilmesi ve dokunmatik ekranlar(Elma). Bakalım bundan ne çıkacak.

Google'ın Yeni Logosu ve Kimliği Materyal Tasarım Fikirlerini Destekliyor

Malzeme tasarımı geliştiricisinin ayrıntılı yönergeleri burada bulunabilir -

2015'in ana trendlerinden biri Materyal Tasarımı - uygulama tasarımı ve yazılım ameliyathane için Android sistemleri Google Corporation tarafından geliştirilmiştir. Materyal Tasarımı, tüm Google ürünleri için geçerli olan birleştirilmiş bir kurallar dizisidir, ancak tasarım kavramının kendisi Android işletim sistemi ile sınırlı değildir. Materyal tasarımında etkileşimi artırabilecek her şey memnuniyetle karşılanır: animasyon, ses, renk, düz öğeler ve çok daha fazlası. Aslında bu, az miktarda skeuomorfizm içeren yeniden düşünülmüş düz bir tasarımdır. Materyal tasarımı, insan ve teknoloji arasındaki ilişkiyi yeni seviye, takip ederken ana hedef- Kullanıcılar için mümkün olduğunca basit bir tasarım oluşturun.

Materyal Tasarımı kavramı ilk olarak 2014 yazında tanıtıldı, ancak bugün web üzerinde materyal sitesinin ilkelerini kullanan birçok site ve uygulama bulabilirsiniz. İşte bazıları çok ilginç örnekler zaten var olan siteler ve tanıdık web kaynaklarının nasıl görünebileceğini gösteren birkaç kavram.

GMAIL TARAFINDAN GELEN KUTUSU

Inbox, ilk Materyal Tasarımı web sitelerinden biridir. İlginç bir şekilde, Inbox'ın tasarımı, Google ürünleri için birleştirilmiş gereksinimlerin oluşturulmasına yönelik çalışmalara başlamadan önce bile geliştirildi. Ancak, her şey özellikler Stiller Gelen Kutusu'nda bulunur - sonuçta Google tasarımcıları tarafından tasarlanmıştır.

Evernote, dünyanın en çok kullanılan Android uygulamalarından biridir. Bu yıl tasarımı malzeme tasarımı ilkelerine uygun olarak yeniden tasarlandı.

İşte neye benzeyebileceğinin bir örneği Kullanıcı arayüzü Facebook, Materyal Tasarımı gereksinimlerine uygun olarak oluşturulmuşsa. Konsept oldukça başarılı çıktı, en azından görünüş ana sayfa kullanıcıyı yıldırmaz.

FACEBOOK HABER KAYNAĞI

Ve kaset böyle görünecek Facebook haberleri.

NEW YORK TİMES

NY Times web sitesinin tasarımı her zaman biraz dağınık olmuştur. Ancak, yeniden tasarım bu etkili çevrimiçi yayının yararına gitti. Bu, Materyal Tasarımı ilkelerinin nasıl kullanılabileceğinin çok etkileyici bir örneğidir.

You Tube'un görünümü malzeme tasarımının gereksinimlerine göre ayarlandı - sonuçta sitenin sahibi Google. Ancak tasarımcı Markus Hofer, mükemmelliğin sınırı olmadığına inanıyor.

Windows Gezgini

Materyal tasarım ilkeleri, web sitelerinden veya uygulamalardan daha fazlasına uygulanabilir. Bu tarzda, bir arayüz bile geliştirebilirsiniz. işletim sistemleri. Örneğin, Windows Gezgini böyle görünebilir.

DİĞER ÖRNEKLER

"Düz" tarz bugün trendde, kimse inkar etmiyor. Yaklaşık üç aydır küçük bir oyun geliştiriyorum ve stil olarak “düz” tasarımı kullanmaya karar verdim çünkü. şu anda en popüler olanı ve “çoğaltması” da çok kolay (“çizim” kelimesi buraya sığmıyor çünkü ben bir programcıyım ve hiç çizemiyorum =)). Bu yüzden yeni oyunumu geliştirirken topladığım Google Materyal Tasarımı koleksiyonumu yayınlamaya karar verdim.

Neyin tehlikede olduğunu anlamanız için işte kısa bir video:

Materyal Tasarımı öğrenmeye başlamak için en önemli belge elbette ki. Google'dan yönergeler. Nasıl "olmalı" ve nasıl "yapılmaması" gerektiğine dair birçok örnek vardır ve ayrıca daha derine inip neyin ne olduğunu anlayabileceğiniz kaynak kodları (Photoshop vb. için) vardır.

İşte günlük konseptler, uygulamalar ve daha fazlasını içeren başka bir iyi site. Materyal Tasarımı - Günlük Materyal Tasarımı tarzında yapılmıştır. Pek çok animasyonlu örnek var, bazıları sadece “bu nasıl icat edilebilir?” Diye düşündürüyor. Tek kelimeyle tavsiye ederim.

Materyal Tasarımında renk seçimi hakkında birkaç söz söylemeye değer. Bu muhtemelen ana biridir iyi tasarım. İşte size bu konuda yardımcı olacak bazı siteler: Flat UI Colors , Material Palete .

11 Mart 2015, 05:08

Materyal Tasarımı: aya ve arkaya

• Redmadrobot Blogu,
• Mobil uygulama geliştirme,
• Android Geliştirme

• öğretici

"Bu kasvetli iletişim kutusu gerçekten gerekli mi?"

Bu yazıda Materyal Tasarımının temel ilkelerini özetledim ve bunların nasıl uygulanacağı konusunda tavsiyeler verdim. Metin, biz Robotlar olarak Ruslarla birlikte düzenlediğimiz geliştiriciler için bir ana sınıfın ardından yazılmıştır. Google ofisi(Mobil düşünün).

Bir zamanlar tüm Google ürünleri farklı şekillerde kötü görünüyordu. Bir ürün bile farklı platformlar tutarsız görünüyordu.

Her şey 2011'de Google'ın ürünlerinin ekosisteminin görsel kısmının birleştirilmesi için çok çalışmaya başladığı ve buna Project Kennedy adını verdiği zaman değişmeye başladı.

Kennedy'nin nesi var?

Efsane şudur: Başkan Kennedy, aya insanlı uçuş programını başlattı (eğer bu uçuşun gerçekleştiğine inanıyorsak). Ve Google'ın büyük patronu Larry Page, ürünleri %10 oranında iyileştirmenin anlamsız olduğu ilkesini savunuyor - ürünlerin rakiplerinden 10 kat daha iyi olması gerekiyor. Bir ürünü piyasaya sürersek, hemen aya. Burada da her şeyi yeniden güzelleştirmeye karar verildi.

Sonuç öncelikle web'i etkiledi, ancak bazı mobil ürünleri de etkiledi. Aynı zamanda ayrı iş eski Android'in estetik açıdan hoş olmayan arayüzlerinin yerini alan Android - Holo'nun tasarımı üzerine.
Ancak bir sorun vardı: Holo, Kennedy Projesi'nden hâlâ farklıydı.


Kullanıcılar uyum sağlamak zorunda kaldı yeni arayüz geçiş yaparken alışmak görünüm, kontrollerin düzeni vb.
Böylece bir noktada, Google'ın farklı köşelerinden bir grup tasarımcı bir araya geldi ve bu sorunu bir kez ve herkes için çözmek için bu sorun üzerinde savaşmaya başladı.

2014 yılında I / O konferansında Materyal Tasarımı adı verilen bir yaklaşım olan yeni bir tasarım sistemi sunuldu. Yeni tasarım sistemi, tüm ekranlarda tutarlı bir kullanıcı deneyimi oluşturmanıza olanak tanır: masaüstü, akıllı telefon, tabletler, saatler, TV'ler, arabalar. Android uygulamaları için Materyal Tasarımı bir evrimi temsil eder görsel dil Holo ve tasarım yönergeleri. Birçok yönden, diğer tasarımcılar düşünülerek tasarlanmış daha esnek bir sistemdir - Google yalnızca ilk kullanıcıydı.

Materyal Tasarımı, tasarım kararları vermek için daha objektif bir yaklaşıma izin verir: bir şeyin nasıl göründüğü, bir şeyin nasıl çalıştığı, animasyonun nasıl yapıldığı vb. Makul sınırlar koyar, ancak aşırı kısıtlamalar getirmez.

Malzeme Tasarımının 4 İlkesi

Materyal Tasarımı dört ana prensibe dayanmaktadır:

1. dokunsal yüzeyler. Materyal Tasarımında arayüz, "dijital kağıt" denen somut katmanlardan oluşur. Bu katmanlar farklı yüksekliklerde bulunur ve birbirlerinin üzerine gölgeler düşürür, bu da kullanıcıların arayüzün anatomisini ve arayüzle nasıl etkileşimde bulunacaklarını daha iyi anlamalarına yardımcı olur.
2. Baskı dizaynı. Katmanları "dijital kağıt" parçaları olarak düşünüyorsanız, o zaman "dijital mürekkep" ("dijital kağıt" üzerinde gösterilen her şey) söz konusu olduğunda, yaklaşım geleneksel grafik tasarımdan alınmıştır: örneğin dergi ve poster.
3. Düşünceli animasyon. Gerçek dünyada nesneler bir anda ortaya çıkmazlar ve hiçbir yerde kaybolmazlar - bu sadece filmlerde olur. Bu nedenle, Materyal Tasarımı'nda, kullanıcılara arayüzün nasıl çalıştığına dair ipuçları vermek için her zaman katmanlardaki ve dijital mürekkepteki animasyonları nasıl kullanacağımızı düşünüyoruz.
4. Uyarlanabilir tasarım. Bu, önceki üç kavramı farklı cihazlarda nasıl uyguladığımızla ilgilidir. farklı izinler ve ekran boyutları.

Öyleyse sırayla hareket edelim.

dokunsal yüzeyler

Dokunsal yüzeylerle başlayalım. Bunlar, sıradan kağıdın aksine süper güçlere sahip olan "dijital kağıdın" parçalarıdır - esneyebilir, bağlanabilir ve şekillerini değiştirebilirler. Aksi takdirde, fizik yasalarına ve Rusya Federasyonu mevzuatına tam olarak uygun davranırlar.

Yüzey

yüzey nedir? Temel olarak, gölgesi olan ve başka hiçbir şeye sahip olmayan bir “konteyner” dir. Ancak bu, bir nesneyi diğerinden ayırt etmek ve birbirlerine göre nasıl konumlandıklarını göstermek için yeterlidir. Materyal Tasarımı felsefesi, sadelik ve temiz tasarım için çaba gösterir.

Çok ileri gitmeye ve ışık gölgesini temsil etmek için doku, bindirme gradyanları kullanmaya gerek yok. Bir büyükannenin daireye kapısı gibi cildin görsel özelliklerini vermeye gerek yok - düzgün bir gölge çok şey ifade edebilir. Ancak her yüzeyin kendi yüksekliği vardır - Z ekseni üzerindeki konumu ve yüzeylerin her biri, tıpkı gerçek dünyada olduğu gibi, altta bir gölge oluşturur.

Derinlik

Geleneksel "düz tasarım", hacmin herhangi bir tezahürü gibi gölgelerden kaçınır, ancak ekrandaki öğelerin yapısını ve hiyerarşisini göstermede önemli bir işlevi yerine getirirler. Örneğin, bir öğenin yüksekliği daha büyükse, gölgesi daha büyüktür. Bu artan derinlik, kullanıcının dikkatini kritik şeylere odaklamasına ve bunu zarif bir şekilde yapmasına yardımcı olur.

Derinlik ayrıca etkileşim hakkında ipuçları sağlar. Burada, kullanıcı kaydırdıkça yeşil nokta üst katmana yapışır ve bir gölge eklenir. Bu, yalnızca "mürekkebin" hareket ettiğini değil, aynı zamanda Beyaz arkaplan aşağıdadır ve bütünüyle hareket eder.

Derinliğin bir "dip" olduğuna dikkat etmek önemlidir. Mobil cihazın kendi kalınlığı ile sınırlı olduğu varsayılmaktadır. Yani, bir akıllı telefonda camdan arka duvara bir santimetre ise ve arayüzde bir kredi kartınız varsa, onu ters çeviremezsiniz - cama ve arka duvara yaslanacaktır.

Dikkat!

1. Derinlik mantıklı olmalı. Kendinize şu soruyu sorun: “Neden bu, başka türlü değil?” Cevap hayır ise, başka bir çözüm aramak mantıklıdır.
2. Lojistikle ilgilen. Kayan düğmeler, araç çubukları ve iletişim kutuları belirli bir yüksekliktedir. Bazen bir şey olduğunda çarpışmaları önlemek için z ekseni üzerinde hareket etmeleri gerekir. Bu koreografi ile son derece dikkatli olmanız gerekiyor.
3. Düğmeyi zorlamaya gerek yok. Yüzen bir düğme çok karakteristik bir unsurdur. Birçok kişi onu arayüze eklemeye değer olduğunu düşünüyor: hemen Materyal Tasarımı olur. Ama sadece bunun için kullanılmalıdır. anahtar eylem uygulamanızda. Bir pencereyi kapatmanız veya bir eylemi onaylamanız gerekiyorsa, kayan bir düğme kullanmanıza gerek yoktur. Bunun için başka unsurlar da var.
4. Her şey kartta olmak zorunda değil. Bir nesnenin birçok formu varsa ve birçok farklı içerik, o zaman kart uygundur. Ve değilse, düz metin veya metin listesi ile yapmak daha iyi olabilir mi?
5. Bu kasvetli iletişim kutusu gerçekten gerekli mi? Google tasarımcıları, iletişim kutularını daha iyi hale getirmeye çalıştı, ancak yine de çoğu görev için daha uygun. alt tabakalar. Snackbarlar da var. Diyalog kutuları yalnızca kullanıcıya bir soru sormak için gereklidir.
6. Liste genişletmeyi kullanın. Bu hafife alınmış bir kalıptır, ancak oldukça Malzemedir ve sorunu iyi çözer.

Baskı dizaynı

Materyal Tasarımında yüzeylere " dijital kağıt”, üzerine yerleştirilen her şey - metin, resimler, piktogramlar - “dijital mürekkep” ile uygulanır. Ve Materyal Tasarımı, arayüz tasarımında klasik baskı tasarımı ilkelerini kullanır.

zarif tipografi

İÇİNDE baskı dizaynı tipografi temelde önemli bir rol oynar. Herhangi bir dergiyi alın ve tipografinin orada iki şey yaptığını fark edeceksiniz. Önemli özellikler. İlk olarak, yazı tipinin seçimi ve kompozisyonu, yayın markasının stil oluşturan bir unsurudur. İkinci olarak, tipografi içeriğin yapısını belirler.


Bu ekranda oldukça fazla metin var. Ancak simgeleri atar ve metni gri bloklara dönüştürürseniz, yapının oldukça ayırt edilebilir olduğu ortaya çıkar.

Bizden önce büyük başlık ve doygunluklarında farklılık gösteren bir dizi daha küçük öğe - daha önemli olanlar daha koyu. Aynı zamanda, bazı dikdörtgenlerin birbirine yakın olması ve bloklar arasında önemli bir girinti olması nedeniyle gruplamayı açıkça ayırt ediyoruz. Genel olarak, her şey en iyi geleneklerde!

Yazı Boyutu

google.com/design/spec sitesinde güvenle kullanabileceğiniz standart bir yazı tipi paleti bulunur. Palet, Roboto yazı tipini kullanır, ancak markayı desteklemek için kendi kurumsal yazı tipinizle değiştirilebilir. Yazı tipi oluşturma farklı cihazlarda farklı çalışabileceğinden, her şeyi dikkatlice test etmek önemlidir. Genellikle OTF yazı tipleri, TTF yazı tiplerinden daha iyi çalışır.

zıt tipografi

Grafik sanatı dünyasının Materyal Tasarımında iyi işleyen bir başka ilkesi de kontrast tipografidir - başlık ve dizginin yazı tipi boyutları arasında gerçekten göze çarpan bir karşıtlık. Güzel ve ana şeyi iyi vurguluyor.

Modüler ızgara ve kılavuzlar

Şimdi içeriğin ekrandaki konumuna. Baskı tasarımında modüler ızgaralar kullanılır, ekran tasarımında çok küçük modüllerle daha temel ızgaralar kullanılır. Bu nedenle, Materyal Tasarımında 8dp adımlı bir ızgara kullanılır. DP, iOS'taki noktaya çok benzeyen bir birim olan yoğunluktan bağımsız bir pikseldir.

Ancak Materyal Tasarımı ilkelerine uygun içerik yerleştirmenin ana ayırt edici özelliği, anahtar kılavuzların konumudur. Bilgileri yapılandırarak ve kullanıcının bakışını kontrol ederek ekranın kenarlarından kenar boşluklarını ayarlarlar. Çok sayfalı yayınların tasarımına aşina iseniz veya Tschichold'u okuduysanız, muhtemelen ızgara ve kenar boşlukları hakkında çok şey biliyorsunuzdur ve bacakların buradan nerede büyüdüğünü anlıyorsunuzdur.

Aslında ortada bir metin sütunu ve solda geniş bir alan görüyoruz, bu da ana içeriğe odaklanmayı ve kenar boşluklarında yardımcı öğeler vermeyi mümkün kılıyor.

geometrik ikonografi

İkonografi söz konusu olduğunda, Android'de bir süredir basit simgeler var, ancak Materyal Tasarımı onları daha da basit ve dostça hale getirdi. Üzerinde resmi olmayan kaynak Materialdesignicons.com tasarımcıları amaçlarına uygun piktogramlar bulabilir ve mümkün olduğunda katkıda bulunabilir.

Renk

Baskı tasarımında olduğu gibi arayüz tasarımında da renk önemli bir ifade aracıdır. Eski Android'de renk ekstra bir şeydi, ancak şimdi daha belirgin bir rol oynuyor. Materyal Tasarımı'nda, bir uygulamanın varsayılan renk paleti, bir birincil ve bir vurgu renginden oluşur.

Ana çubuk, eylem çubuğu gibi geniş alanlar için kullanılır ve durum çubuğu, daha koyu varyasyonunda boyanır. Daha parlak vurgu rengi, kontrollerde, düğmelerde, çubuklarda, göstergelerde vb. zamanında kullanılır. Vurgu rengi, kullanıcının dikkatini şu noktalara çekmek için tasarlanmıştır. anahtar unsurlar, örneğin kayan bir düğme.

Ne kadar renk uygulanmalı? Vurgu, küçük bir miktarda noktasal olarak yerleştirilir. Arayüzün geri kalanını renklendirmek için basit bir temel kural vardır. Çok fazla metin olduğunda, örneğin bu bir posta listesi olduğunda, uygulama çubuğundan çıkmalısınız. standart beden ve kullanıcının içeriğe odaklanmasını sağlamak için renklendirin. Çok fazla içerik yoksa, örneğin ayrıntılı bir görünüm bireysel eleman, fotoğraf veya hesap makinesi, o zaman bu büyük renkli zarları kullanmak için harika bir fırsattır - uygulama çubuğunun yüksekliğinin 2 katı veya 3 katı.

Android, fotoğraflardan renk çıkarmanıza izin veren Palet adlı bir kitaplığı destekler. Yani uygulamadaki fotoğraf illüstrasyonlarına dayalı olarak arayüzü dinamik olarak boyamak mümkündür.

Bir fotoğraf çektik ve algoritma fotoğraftan farklı özelliklere sahip 6 renk çıkardı:
- 3 sulu ve 3 sessiz renk vardır;
- açık, standart ve koyu tonlara ayrılırlar;
- her arka plan rengi için, aynı zamanda kullanılabilen kendi metin rengi tanımlanır.

Güzel fotoğraflar

Son olarak, tıpkı baskı tasarımı gibi, Materyal Tasarımı da fotoğraf ve illüstrasyonların kullanımını sonuna kadar teşvik eder. Resimler çoğunlukla çerçevesiz, genellikle "aradan" yerleştirilir. Durum çubuğu bile karışmaması için özel olarak şeffaf hale getirilmiştir. Ve ekrandaki her "dijital mürekkep" damlasının bir işlevi vardır, neredeyse hiçbir şey sadece dekorasyon amaçlı değildir.

Dikkat!

1. Zevkle marka. Google, marka bilinci oluşturma olarak parlak renkleri kullanma konusunda daha iyi bir konumdadır, ancak bu bir sorun olarak görülmemelidir. Renkler kurumsal marka kitapçığından seçilebilir ve genel olarak logo kullanılabilir.
2. Girintileri ve "hadi biraz hava alalım" demeyi unutmayın. 8dp'lik bir taban ızgarası ve 72dp'lik bir sol dolgu pratikte kuraldır. İçeriğin iyi ve özgür olmasına izin verin.
3. Etkileyici fotoğraflar havayı güzelleştirir.İfade araçları olarak fotoğraf ve illüstrasyonlar bizim seçimimizdir.

anlamlı animasyon

Gerçek dünyada, nesneler bir anda ortaya çıkamaz veya hiçbir yerde yok olamazlar. Bu kafa karıştırıcı olur ve insanların kafasını karıştırır. Bu nedenle, Materyal Tasarımında, tam olarak ne olduğunu göstermek için anlamlı animasyon kullanılır.

örnek 1 Animasyon, bu özel kartın tıkladıktan sonra öne çıktığını, açıldığını ve daha fazla bilginin görünür hale geldiğini gösteriyor.

Örnek 2 Takvimdeki olay, bastıktan sonra yüzeyden kopar, ayrı katman"kağıt", dönüşmeye başlar ve formda açılır detaylı bilgi olay hakkında.

İlginç bir nokta, aktif hareketin göze hitap etmesidir - bu bizim görüşümüz için doğaldır. Animasyon yardımıyla kullanıcının dikkatini kontrol ediyoruz.

asimetri

Arayüzün derinliği cihazın kalınlığı ile sınırlı olduğundan, tüm nesne dönüşümlerinin bir düzlemde yapılması gerekir. Bu aynı zamanda dönüştürme animasyonunun asimetrik olmasına neden olur - yani, nesnenin genişliğini ve yüksekliğini değiştirmek bağımsız olmalıdır. Aksi takdirde, izleyiciye yaklaşma veya uzaklaşma yanılsaması oluşur ve çok uzun mesafe.

Reaksiyon

Başka bir çok önemli ilke Materyal Tasarımındaki animasyonlar, kullanıcı eylemlerine verilen tepkilerdir. Mümkün olduğunda, cihaz ekranına dokunmak, arayüzdeki değişikliklerin merkez üssü olmalıdır. Örneğin, bir parmakla temas noktasından görünen ve giden bir dalga. Bu efekt, Android L'de sorunsuz bir şekilde uygulanmaktadır.

mikro animasyonlar

Android L'de, içerik veya küçük eylem simgeleri arasındaki geçişler olsun, uygulamanın her öğesini canlandırabiliriz. Bir uygulamanın her ayrıntısı önemlidir ve mikro animasyonlar, her kullanıcı eylemi için uygulamaya daha fazla ayrıntı ve yanıt verir.

Netlik ve keskinlik

Ve son olarak, anahtar ilke animasyonlar: hareket hızlı ve net olmalıdır. Başlangıçtaki banal hızlanmanın ve sondaki yavaşlamanın aksine, Material Design'daki animasyon eğrisi daha doğal ve ilginç. Nesneler daha hızlı tepki verir ve hedef duruma ulaşır, daha keskin geri döner, ancak sonunda dinlenmeye gitmesi biraz daha uzun sürer. Sonuç olarak, kullanıcının daha az beklemesi gerekir (bu daha az can sıkıcıdır). Aynı zamanda, nesne zaten kullanıcıların ilgi alanını terk ettiğinde, daha doğal davranmasına izin verir.

Dikkat!

1. Animasyonu sona saklamayın. Animasyonu en sona bırakmayın - bu önemli bir faktör olabilir kullanıcı deneyimi ve önceden düşünülmesi gerekir.
2. Ölçüyü bilin.Çok fazla animasyon da kötü. Kendinizi kontrol altında tutun ve bunun anlamlı olması gerektiğini unutmayın.

Uyarlanabilir tasarım

Materyal Tasarımının son önemli yönü, duyarlı tasarım kavramıdır. Yani ilk üç kavramı farklı form faktörlerinde farklı cihaz ve ekranlara nasıl uygulayabiliriz.

Genelden özele

En yaygın teknik, ekranın küçültülmesiyle birlikte ekranda görüntülenen bilgi miktarını azaltmaktır. eğer açıksa büyük ekran hem listeyi hem de detaylı bilgi seçilen öğede, ardından akıllı telefonlarda önce liste görüntülenir ve ihtiyacınız olan ayrıntılar için ayrı ekran. Tabletler söz konusu olduğunda, uygulama çubuğu bazen en azından biraz fazla boş alanla başa çıkmak için büyütülebilir.

Girinti

İçeriği bloklar kullanarak yerleştirmek, çalışmayı büyük ölçüde basitleştirir. boş alan büyük ekranlarda. Her bloğun içeriğini biliyoruz, okunabilirliği kaybetmemek için ne kadar geniş olabileceğini ve çok kalabalık olmaması için ne kadar dar olabileceğini anlıyoruz. Geniş ekranlarda, bloklar okunabilirlik sınırlarına kadar gerilir ve daha sonra büyük olabilecek kenarlardan dolgu eklenir. Yüzen bir düğme ve renkli kalıplarla doldurulabilirler.

Beyaz çerçeveler

Farklı ekranlar için alan düzenleme ve dolgu fikirleri, Beyaz Çerçeveler bölümünde google.com/design/spec adresinde görülebilir. Bu başlamak için harika bir yer, anlamak sağduyu ve sonra kendi deneylerinize devam edin.

Kılavuzlar

Kılavuzlar bize "mürekkep" için girintiler verir ayrı sayfalar"kağıtlar". Bir akıllı telefonda, solda bir sayfa ve bir iyi girintimiz var ve bir tablette iki tane var ve her iki durumda da bir girinti var. Bu iki form faktörü için girintinin farklı olması önemlidir. Tablette 80dp, akıllı telefonda 72dp. Ekranın kenar boşlukları da farklıdır.

Boyutlar

Tüm elementler için çoklu oranlar alınması tavsiye edilir. Özellikle, seçin uygulama boyutu bar çok daha kullanışlıdır: 1x, 2x, 3x. Akıllı telefonlarda ve tabletlerde bu boyut farklıdır ancak uygulama sorunsuz bir şekilde uyum sağlar.

bloklar

Genel olarak bloklar halinde düşünmek yardımcı olabilir. böyle ayarlarsanız modüler ızgara 8dp'nin katları olan bloklardan harika bir görsel ritim elde edeceksiniz ve karar vermeniz daha kolay olacaktır. Beyaz çerçeveli web sitesine gidin ve malzemelere bakın.

araç çubuğu

Eylem çubuğu en çok önemli parçalar arayüz. Başlığı, işlem düğmelerini ve gezinmeyi barındırır. Android Lollipop'ta, eylem çubuğu üstte zincirlenmiş bir şeritten tam teşekküllü bir widget'a dönüştü - işlevsel ve güzel blok uygulama yönetimi. Bu, artık çok fazla koyabilmeniz nedeniyle mümkün oldu. fonksiyonel elemanlar daha önce hiç hayal etmediğin şey.
- giriş alanları, formlar;
- ana eylemin kayan düğmesi;
- araç çubuğu, genişletilmiş gezinme tarafından gizlenmiştir, ancak burada tamamen işlevsel bir pencere öğesi görüyoruz;
- araç çubuğunun gerektiğinde yönetilmesi uygundur.

Dikkat!

1. Her zaman bir gezinme çekmecesine ihtiyacınız yoktur. Google, uygulamalarında geri çekilebilir navigasyonu çok sık kullanır, böylece bunu şurada görebilirsiniz: farklı örnekler. Ancak Google'ın yardımı ile çözülebilecek birçok görevi vardır: yer yardımı, ayarlar, giriş/çıkış, kullanıcı bilgileri vb. Benzer görevleriniz varsa, her şey yolundadır, ancak basit bir araç yapıyorsanız, yapmamalısınız.
2. Araç çubuklarıyla daha cesur ve esprili. Araç çubuğunun boyutunu dinamik olarak değiştirebilme, boyutunu ikiye ve üçe katlayabilme özelliği çok havalı ve kullanışlıdır. Çoğu tasarımcı bununla uğraşmaktan ve bir kez ve herkes için bir beden seçmekten korkar, ancak burada daha cesur olabilirsiniz ve olmalısınız.
3. Kayan bir düğme için alt köşeden getto yapmaya gerek yok. Kayan düğme herhangi bir yerde olabilir: alt, üst, sağ, sol. Tabii ki, köşede ona ulaşmak uygun olabilir, ancak bu tek seçenek değil. Düğme, görevlere bağlı olarak bir yerden bir yere hareket edebilir.
4. Hem akıllı telefonlar hem de tabletler; hem dikey hem de yatay olarak. Android cihaz yelpazesi çok geniştir ve bu, geliştiriciler için hayatı kolaylaştırmaz. Ancak gerçek şu ki, kullanıcılar bir o yana bir bu yana çevirdikleri tüm bu cihazlara sahipler (hatta Konuşuyoruz akıllı telefonlar hakkında). Bu an üzerinde çalışılmalıdır.

Bu Materyal Tasarımıdır. Denemekten ve hata yapmaktan korkmayın: Mevcut çözümleri kopyalamaya kafayı takmayın. Denemek!

Etiketler:

• malzeme tasarımı
• android
• arayüz tasarımı

Etiket ekle

Gönderiyi etiketlerinizle etiketleyin Etiketler en iyi virgülle ayrılır. Örneğin: programlama, algoritmalar

Yorumlar 121

• • • • • • • • • • Google gibi telefonunuzu yalnızca yatay olarak mı tutuyorsunuz?
                    

                    Dikeyde ekranın sadece %50-70'i kullanılır

                    
                    

                    • Bu ekranda oldukça fazla metin var.

                      Bu çok fazla metin mi? Twitter insanlara ne yaptı?