• Materyal Tasarımı Nedir? Materyal Tasarımı hakkında bilmeniz gereken her şey

    Bugün, birincisi sıcak bir yenilik olan ve ikincisi giderek popülerlik kazanan iki benzer tasarım stilini karşılaştıracağız. Birincisi kendiliğinden uyarlanırken, ikincisi net kurallara sahiptir. Günümüzde aralarında yaşanan mücadeleye aşina olabilirsiniz.

    Ama gerçekten, aralarındaki fark nedir? Neden birincisi ikincisinden daha iyi? Eldeki görevler için hangi tasarımı kullanmak daha iyidir? Aslında, bazı insanlar genellikle bu iki tasarım stilinin ne kadar farklı olduğunu merak eder. Başlamak için, her birinin skeuomorfizme dayandığını hatırlamak gerekir.

    Skeuomorfizm

    Skeuomorphism, ekranda alışık olduğumuz şeyleri gerçekte göründüğü gibi göstermeye çalışan bir tasarımdır. Bir zamanlar arayüz tasarımında bu tarz hakimdi.

    Sorun şu ki, daha önce düşünülmüş olmasına rağmen, elemanların böyle bir görüntüsü pek uygun değil. harika yol. Bunun nedeni, eskiden tasarıma farklı bakmalarıdır.

    Nihayetinde tasarım dünyası, tüm dekoratif unsurları kaldırmanın ve içlerinde yalnızca etkileşim için uygun olanı bırakmanın gerekli olduğu sonucuna vardı. Daha hızlı yükleme için ses seviyelerini azaltmak ve kullanıcının gözünü en önemli ve temel noktalara odaklamak da gerekliydi. Böylece, skeuomorfizmden gereksiz olan her şey kaldırıldı ve tasarımda düz tasarım olarak bilinen yeni bir stil ortaya çıktı.

    düz tasarım

    Düz tasarım birçok yönden basittir; gölgelerin, degradelerin ve dokuların varlığını reddeder. Bu teknik, gözlerinizi simgelere, renklere ve yazı tiplerine odaklamanızı sağlar.

    öncelikle bir tarzdır dijital cihazlar- çok kullanışlıdır ve gereksiz her şeyden yoksun olduğu için kullanıcıların ürününüzle kolayca etkileşime girmesine mükemmel bir şekilde olanak tanır.

    Düz tasarım, sizi siteyle kolay etkileşime odaklamaya çalışır. İkonografinin sadeliği, kullanıcıların siteyle yalnızca resimler aracılığıyla bile etkileşim kurmasını mümkün kıldığından, işlevselliği basitleştirir. Aynı zamanda kullanımları site öğelerinin yüklenmesini hızlandırır. Ayrıca iyi ölçeklenirler, bu da çözünürlüğü ne olursa olsun her cihazda iyi görünmelerini sağlar. Ve buna göre, hem tasarımcı hem de kullanıcı için çok şey kolaylaştırıyor.

    Artıları:

    • Tüm ekranlarda aynı görüntü
    • Skeuomorfizmin olmaması, kullanıcılara ne iletmek istediğinizi anlama sürecini hızlandırmanıza olanak tanır.
    • Tüm gereksiz öğeleri kaldırmak, siteyi hızlandırmanıza olanak tanır
    • Düz tasarımın sadeliği, sitenizi tamamen uyarlamanıza ve duyarlı hale getirmenize olanak tanır

    Eksiler:

    • Düz tasarım, basit renkler, gölgeler, ikonografi ile çok sınırlı olabilir
    • Çok sade ve sıkıcı bir web sitesi oluşturmak çok kolaydır.
    • Bazı uygulamalar ve web siteleri, kullanıcıyı ürününüzü kullanma sürecinde yönlendirmek için daha karmaşık görsel çağrışımlar gerektirir - bu, düz tasarımın ana dezavantajıdır. Ayrıca, ortak bir şikayet, bazen öğenin tıklanabilir olduğunu anlamanıza izin vermeyen gölgelerin ve çıkıntıların olmamasıdır.
    • Yaygın kullanımı bazen arayüzünüzü benzersiz yapmanıza izin vermez.
    • Belirli sabit kuralların olmaması (materyal tasarımın aksine)

    malzeme tasarımı

    Düz tasarımı eleştirenler, bunun çok ileri gittiğini iddia ediyor. Katmanı gölgelerle, animasyonlu öğelerle ayırmak - sayfanın öğelerini daha sezgisel olarak anlamamızı sağlayan şey budur.

    Bilmeyenler için, materyal tasarımı Google'da ortaya çıktı ve küçük bir sayfa taslağı yaptılar. tüzük tasarım malzemesi. Bu stilin sayısız ve benzersiz özelliği vardır, ancak belki de en iyi özelliklerinden biri z ekseninin kullanılmasıdır.Temel olarak, iki düzlemin birbirinin üzerinde "yüzmesine" izin veren bir miktar skeuomorfizm ekler.

    Aynı zamanda Android uygulamaları için standarttır. iOS'ta kullanılmalı mı? Bazıları bu tarzın şu anda içinde bulunduğu çerçeve içinde bırakılmasının en iyisi olduğunu söylese de, bu soru hala sıcak bir tartışma konusudur. Her zamanki gibi herkesin bu konuda kendi görüşü var.

    Artıları:

    • Üç boyutlu alan, etkileşimi kolaylaştırır, örneğin gölgelerin kullanılması, neyin neyin üzerinde yükseldiğini anlamanıza olanak tanır ve buna göre kullanıcının gözünün nereye odaklanması gerektiğini gösterir.
    • Neyin ve nasıl görünmesi gerektiğini tahmin etmemenizi sağlayan net bir kurallar dizisi
    • Android için bir web sitesi veya uygulama yapacaksanız, materyal tasarımı harika bir marka yaratmanıza olanak tanır.
    • Animasyonla ilgileniyorsanız, Materyal Tasarımı ayrıca animasyonu kullanmak için net bir dizi kural sağlar.

    Eksiler:

    • Buna katılsanız da katılmasanız da, materyal tasarım ayrılmaz bir şekilde Google'a bağlıdır ve Google'ın yönergelerini izlerseniz web siteniz veya uygulamanız için benzersiz bir kimlik oluşturmayı çok zorlaştırır.
    • Oluşturduğunuz animasyonu tüm sistemler oynatamaz ve bu, ürününüzün genel işlevselliğini etkileyebilir.
    • Animasyonlar pili daha hızlı tüketir
    • Net kurallar, bu tasarım stilinin gelişimini yavaşlatabilir.

    Çözüm

    Materyal tasarımı temel olarak düz tasarımdan farklı değildir, her ikisi de temiz ve minimalist Düz tasarım daha basit olduğu için malzeme arayüzüne daha erken oy vereceksiniz. Materyal tasarım animasyonu birçok kişi tarafından övülse de temelde ürünle etkileşiminizi kolaylaştırmaya hizmet eder. Ancak hiçbir şey bu iki stili birleştirmenizi yasaklamaz.

    Düz tasarıma sahip web sitelerinin daha pratik olduğunu, yüklenme hızlarının animasyon ve ağır grafiklerle dolu web sitelerine göre çok daha yüksek olduğunu düşünüyorum. Sadeliği hedefleyen bir web sitesi oluşturuyorsanız, o zaman düz tasarım kesinlikle size göre, ancak daha çok animasyon konusuyla ilgileniyorsanız, o zaman materyal tasarımı kullanmanızı tavsiye ederim.

    Seçiminizi yorumlara yazın, bakalım daha kimler var!

    25 Haziran 2014'te Google, geleceğin arayüz tasarımı için yeni vizyonunu halka sundu - bundan böyle tüm şirket ürünlerinin arayüzlerinin üzerine inşa edileceği bir dizi kural ve koşul. Bütün bunlar neden gerekliydi? Beş yıl önce, tüm Google ürünleri birbirinden çok farklıydı: çeşitli versiyonlar başına bir uygulama farklı cihazlar. Geliştiriciler, daha sonra altında birleştirilen tüm gelişmiş uygulamaları ve hizmetleri oluşturmak ve birleştirmek için özel kurallar oluşturmayı düşündüler. yaygın isim"Kennedy Projesi". Daha sonra geliştirilen bu projeydi malzeme tasarımı (malzeme tasarımı).

    malzeme felsefesi

    Kennedy projesi sayesinde tüm önemli hizmetler ve Google hizmetleri arayüzün tasarım ve yapımının ortak özelliklerini aldı. Bu, web arayüzleri ve daha sonra mobil uygulama arayüzleri oluşturmaya yönelik yaklaşımları birleştirmeyi mümkün kıldı.

    Birleştirilmiş tasarımın özelliklerinden biri, sistemin herhangi bir yerine yerleştirilebilen bilgi kartlarıydı. çalışma alanı. Bunları uygulamada keşfetme Google Asistan, geliştiriciler kendilerine şu soruyu sordular: "Bu kartların altında ne var?". Google'ın Tasarımdan Sorumlu 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 koleksiyonu 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 somut olduğu, ekranda olup bitenlerin olabildiğince makul ve mantıklı göründüğü hissine sahip olacaktı.

    Toplam hakimiyetten sonra skeuomorfizm(tasarımda fiziksel dünyanın gerçek nesnelerinin doğru taklidi) herkes ters yönde keskin bir şekilde 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ğıdı

    Materyal tasarımın ana unsuru, fiziksel nesne metaforuÖzelliklerde kağıda benzer ve özelliklerinin çoğuna sahip - boyut, renk, kalınlık. Bu metaforik malzemenin her katmanı üç boyutlu uzayda yer alır ve tüm fizik yasalarına uyar, 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 özelliklerinden dolayı, malzeme başlangıçta "kuantum kağıdı" olarak adlandırıldı. Bu, fiziksel dünyadakiyle aynı kağıttır, ancak bir dizi "sihirli" özelliği vardır, örneğin boyutunu değiştirebilir ve diğer "yapraklarla" birleşerek veya birkaç parçaya ayrılarak uzayda sorunsuz hareket edebilir. Kuantum kağıdı, çoğunlukla renkli olan arka planın hemen üzerinde bulunur. 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ı" bir nesnenin fiziksel özelliklerini yansıtmayı amaçlıyorsa, 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. Ancak burada bile Google'ın tescilli özellikleri var. Örneğin malzeme tasarımında kullanılacak ana yazı tipi Roboto'dur. Ancak, şirketlerin kimliklerini korumak için kurumsal yazı tiplerini kullanmalarını hiçbir şey engelleyemez. Materyal tasarım yönergeleri, arayüzlerde farklı ağırlıkların ve yazı tipi boyutlarının kullanılmasına ilişkin örnekler sağlar.

    Ancak materyal tasarım grafiklerinde en önemli şey, renk. Renk temeldir ifade aracı kuantum kağıt üzerinde ve bu nedenle çok önemli bir rol oynar. Materyal tasarımının kullanımı yaygındır temel Ve vurgu renkleri. Farklı durumlar için tonlarının yanı sıra.

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

    Materyal tasarımın temel ilkeleri görüntülerin kullanımını öngörür. Bu yüzden bu önemli unsur görüntüyü 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 işlem çubukları şeffaf hale gelir.

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

    Animasyonun Önemi

    Doğal dünya ile analojiler kurmaya devam ederek, hiçbir şeyin hiçbir yerden alınmadığı gibi hiçbir şeyin hiçbir yere kaybolmadığına dikkat edilmelidir. Bu nedenle, malzeme tasarımında, tüm geçişlerin mantıklı ve açık olması için tüm kullanıcı eylemlerine yanıt olarak mevcut arayüzü sorunsuz bir şekilde değiştirmek gerekir. 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
      Genellikle, nesnelerin boyutu cihazın genişliği ile sınırlıdır, bu nedenle kuantum kağıdının gerçekçi bir yeniden boyutlandırmasını oluşturmak için, nesnenin genişliğini ve yüksekliğini bağımsız olarak asimetrik olarak değiştirmek gerekir, böylece bir artış veya azalma yanılsamasından kaçınılır. nesne.
    • Cevap
      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 kazanamaz veya duramaz, bu nedenle gerçekçilik vermek için tüm animasyonlar doğrusal değil, yavaşlamalar ve hızlanmalarla birlikte olmalıdır.

    Çözüm

    malzeme tasarımı- kesinlikle yeni yol Hala geliştirme aşamasında olan ve herhangi bir zamanda tamamlanabilecek etkileşim ve bina arayüzleri. Bununla birlikte, beklentilerini tahmin etmek zaten mümkün. En azından Android için uygulama geliştirmede, tüm arayüzlerin birleştirilmesi kullanım kolaylığı açısından olumlu etki yaratacağından, hakim olacaktır.

    Google'ın kendisinde, materyal tasarımı, pencere arayüzünün 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 Teşvik Ediyor

    Materyal tasarım geliştiricisinden ayrıntılı yönergeler burada bulunabilir -


    Birkaç yıldır Materyal Tasarımı, dünyanın önde gelen web tasarım trendleri arasında yer almaktadır. Ve hiç de şaşırtıcı değil. Ne de olsa, sadeliği, çalışma mantığını ve rahatlığı birleştirebilen oydu. dış görünüş ve aynı zamanda kullanıcılar için düşünceli ve sezgisel bir arayüz oluşturun. Genişlik, ayrıntıların yığılmaması, ekranın temizliği ve aşırı dekorasyon eksikliği. Materyal tasarımın ana ilkesi, yalnızca zarafeti ve rahatlığıyla takdir eden bir kitlenin kalbini kazanan iyi tasarıma değil, kullanılabilirliğe odaklanır.

    Trendin popülaritesi, tasarımcılar için hem ücretli hem de ücretsiz olan çok sayıda kaynak ve araçtan kaynaklanmaktadır. Örneğin, bugün size ilham veren 30 ücretsiz içerikle dolu faydalı bir seçim sunuyorum. ücretli kaynaklar malzeme tasarımı tasarımcıları için. Materyal Tasarımı tarzında her geçen gün daha fazla yeni uygulama ve proje piyasaya sürülüyor. Sürdür. Tasarımcıların zor görevlerle başa çıkmalarına ve her gün başarıya ulaşmalarına yardımcı olan kullanışlılığı keşfedin. Materyal tasarımıyla gelecekteki bir projenin parlamasına yardımcı olun.

    Tasarımcı için kullanışlılık. 30 ücretsiz ve ücretli malzeme tasarım aracı ve kaynağından oluşan bir koleksiyon.

    Arka plan:

    1. 40+ Ücretsiz Materyal Tasarımı Arka Planı

    40'tan fazla ücretsiz malzeme tasarımı arka planı koleksiyonunu tek bir yerde bulmak harika değil mi? Yüksek çözünürlükte yapıldıkları için kesinlikle bir web projesinin veya başka bir basılı fikrin uygulanmasına ilham vereceklerdir. Çok sayıda farklı şekil ve renk, en talepkar tasarımcının bile dikkatini çekecek.

    2. 10 Ücretsiz arka plan

    Araç kitaplığınıza 10 yüksek kaliteli malzeme tasarımı arka planı koleksiyonu ekleme şansını kaçırmayın. İki stilde ve beş renk kombinasyonunda mevcut olan bu arka planlar, 300dpi Ve 10 .jpg dosyaları çözünürlüğün yanı sıra 5000x3000 piksel. Ve tüm bunları ücretsiz olarak alabilirsiniz.

    3. 30 malzeme tarzı proje geçmişi

    Materyal tasarım projesi için yüksek kaliteli arka planlardan oluşan bir başka harika seçim. Kareler, üçgenler ve daireler gibi ek şekillerle dolu 30 farklı tasarım arasından seçim yapın ve DIY projenize bir hava katın. adresinde ücretsiz olarak mevcut .png Ve .ai biçimleri.

    4. Materyal Tasarım Tarzında 12 Ücretsiz Promosyon Arka Planı

    Yeni bir şey ister misin? Lütfen. adresindeki 12 En Yeni Materyal Tasarım Koleksiyonuna göz atın. yüksek çözünürlük. Harika haber, koleksiyonun hem kişisel hem de ticari amaçlar için kullanılabilmesi. ürünler lisanslıdır Yaratıcı Ortak Sıfır ve bu nedenle test edilmiş ve kullanıma hazırdır. Arka planın ortasındaki pırlantanın şekli dikkati ürüne çekmeye yarar. adresinden indirilebilir .png Ve .jpg biçimleri.

    5. Bir dizi desenli arka plan

    Karo tasarımında yapılmış parlak ve yüksek kaliteli arka plan seçimini kaçırmayın. Dosya dosyaları içerir .png, photoshop ve biçim illüstratör vektörü, bu, renk düzenini gereksinimlere göre bağımsız olarak ayarlayabileceğiniz anlamına gelir. İstediğiniz boyutta ve kalite kaybı olmadan ücretsiz kullanın.

    6. Ücretsiz afişler

    İşte çözünürlüğü ile 5 malzeme tasarım stili afiş seti 1140x600 piksel. Herhangi bir web projesinde başlıkları, resimleri veya tek tek bölümleri vurgulamak için idealdir.

    Mobil geliştirme araçları

    7. Ücretsiz Mobil Tasarım Araç Seti

    Photoshop ve Sketch kullanıcılarının gözünden kaçmayacak mükemmel bir seçim. Bir web projesine oldukça aktif bir enerji verebilecek malzeme tasarımı için çeşitli bileşenlere dikkat çekilir. Bir müzik uygulaması veya sitenin mobil sürümünü oluşturmak için harika bir seçenek.

    8. Edacious UI KİTİ

    takım Kullanıcı arayüzü, iş akışınızı hızlandırmak için tasarlanmıştır.

    9. DO, devasa bir Uygulama Kullanıcı Arayüzü Kitidir. ücretsiz

    Do, malzeme tasarımında çeşitli türden uygulamalar yaratmakla ilgilenen herkes için gerçek bir keşiftir. Do, esnek ve Retina hazır tasarımlar oluşturmak için 130 tasarım, 10 benzersiz tema ve 250'den fazla UI öğesidir. Burada kesinlikle deney için yer bulabilirsiniz. Seçiminizi modern renkli tasarımdan yana yapın.

    10. Müzik uygulamaları oluşturmak için bir dizi ücretsiz UI öğesi

    Ücretsiz UI öğelerinden oluşan bir koleksiyonu şu adreste keşfedin: .psd format, oluşturmak için mükemmel müzik uygulamaları. Bu arada, feminist tasarım, çeşitli güzellik web projelerini uyumlu bir şekilde vurgulayacaktır.

    İlgili Makaleler:

    11. Materyal tasarım stilinde bir dizi ücretsiz UI öğesi

    Materyal tasarımı tarzında araç ve kaynak seçimi konusunda hala şüpheleri olanlar için, dikkatinizi Material Design UI Kit koleksiyonuna bırakmanızı tavsiye ederim. Çeşitli yardımıyla .psd Photoshop'ta ihtiyaçlarınıza kolayca uyarlanabilen öğeler sayesinde proje başlatma aşamasında bile zamandan ve emekten tasarruf edebilirsiniz. Koleksiyonunuza bazı harika işçilik malzemeleri ekleyin hızlı projeler ve malzeme tasarımı ilkesine dayalı uygulamalar.

    simgeler

    12. Materyal Tasarım Tarzında Google Simgeleri Koleksiyonu

    Google Material Icons koleksiyonu ile web projeniz veya uygulamanız için doğru simgeleri aramaya başlayın. Set, medya oynatma, iletişim, içerik düzenleme vb. gibi farklı uygulamalar için her türlü simgeyi içerir. İndirmek zip arşivi(~57MB) ve her tasarımcının ihtiyaç duyduğu harika şeylerin keyfini çıkarın.

    13. Ücretsiz simgeler koleksiyonu

    Materyal Tasarım Simgeleri, adresinden indirebileceğiniz ücretsiz materyal tasarım stili simgeleri koleksiyonudur. istenilen biçim, projenin gereksinimlerine göre boyut ve renk. Simgeleri Illustrator, Photoshop veya görsel stüdyo, rengi değiştirin ve simgeniz hazır.

    14. Paket: Materyal Tasarım Simgeleri

    Buradan simgeler, temalı arka planlar veya renk paletleri gibi ücretsiz öğeleri hızlı ve kolay bir şekilde indirebilirsiniz. Mevcut simgeler .icns, .ico, .png biçimleri. Simgelerin farklı şekilleri ve stilleri, tasarım sürecindeki rutin işler için harikadır.

    15. Materyal Tasarım Simgesi

    7 çözünürlükte 20 kategoriye ayrılmış 1000 simgeden oluşan bir koleksiyona ne dersiniz? Sonuç, hiçbir şey için 7.000'den fazla dosyadan oluşan bir settir. Sadece kategorinizi ve gerekli çözünürlüğü seçin ve işte ikon hazır. Seçeneklere bakmaya başlamanın zamanı geldi, ne dersiniz?

    çerçeveler

    16. Materialise - Materyal tasarım ilkelerine dayalı duyarlı ön uç çerçevesi

    Materyal tasarımı ilkelerine göre uygulama arayüzünün hızlı bir şekilde prototiplenmesi için koleksiyonunuza evrensel bir araç ekleyin. Böylece, metin tasarımı, 12 sütunluk uyarlanabilir bir ızgara, öğelerin stili, kartlar, bloklar, açılır öğeler vb. mevcuttur. Çerçeveyi kendi projenizde test edin.

    17. Materyal Tasarımı Lite Çerçevesi

    Materyal tasarıma dayalı web siteleri ve uygulamalar oluşturma sürecini kolaylaştıracak bir araca mı ihtiyacınız var? Try Material Design Lite, malzeme tasarımı ilkelerine bağlı, destekleyen çok yönlü bir çerçevedir. mobil tarayıcılar uyarlanabilir ve minimalist tasarımlar oluşturmaya yardımcı olur. Çeşitli arayüz kontrolleri içerir.

    18. Malzeme-UI çerçevesi

    React ile deneyiminiz var mı? Material-UI, React için bir dizi bileşenden oluşan oldukça popüler bir çerçevedir. Kapsamlı özelleştirme seçenekleri, bölünmüş stiller için destek bireysel dosyalar ve malzeme tasarımı yönergelerine uygunluk.

    19. LumX çerçevesi

    LumX, kendisini hem AngularJS spesifikasyonlarına hem de malzeme tasarım ilkelerine dayalı bir ön uç çerçevesi olarak konumlandırır. Ek olarak jQuery, Velocity ve Momentum gereklidir. İçerir çok sayıda AngularJS bileşenleri.

    20. Materyal tasarımın temellerine dayanan Material Foundation çerçevesi

    Zurb Vakfı ilkesine dayanan Material Foundation çerçevesi, en azından ücretsiz ve kendi kendine yeterli olduğu için ilgiyi hak ediyor. Çerçeve, çok çeşitli özelleştirme olanakları sunar. Materyal tasarım ilkelerini izleyen React bileşenlerini içerir.

    Ayrıca bakınız:

    21. MUI - Google'ın materyal tasarım yönergelerine dayalı çerçeve

    Gelecekteki projelerin geliştirilmesini büyük ölçüde kolaylaştıracak, kullanımı oldukça kolay bir çerçeve. Angular, React ve WebComponents için destek sağlar. Hafif çerçeve, küçük projeler geliştirme sürecini hızlandırmak için temel bir dizi öğeye sahiptir.

    22. Angular Material Framework - UI öğeleri kümesi

    Angular Material çerçevesi, Google tarafından desteklenen en popüler çerçevelerden biridir. Çeşitli bileşenler, simgeler ve betiklerle birlikte tam teşekküllü bir malzeme tasarımıyla çalışmayı sunar. Mobil, tarayıcı ve masaüstü uygulamalarında çalışacak şekilde uyarlanmıştır.

    23. Bootstrap Material Design - Bootstrap'te malzeme tasarımı için bir dizi araç

    Adından da anlaşılacağı gibi Bootstrap Material Design, Bootstrap için aşağıdakilerle dolu bir temadır: yararlı cips Bootstrap'tan malzeme tasarımından öğelerle karıştırılmıştır.

    Ücretli malzemeler

    24.

    Gelecekteki projenizin yüzlerce projeden farklı olmasını ister misiniz? 1100 doku içeren birinci sınıf bir paketin yardımıyla kalabalığın arasından sıyrılabilir ve benzersiz bir tasarımı kolay ve hızlı bir şekilde oluşturabilirsiniz. Çeşitli sağlanan renk şemaları Ah, mermer, mürekkep, akrilik tonlar veya suluboya gibi dokular, en deneyimsiz tasarımcıları bile tatmin edecek. Eminim burada denenecek çok şey vardır.

    25.

    UTech, çeşitli ekranlar, düzenler ve stillerden oluşan birinci sınıf bir koleksiyondur ve birçok girişim oluşturmak için harika bir çözüm olarak hizmet eder. Ek olarak, kit, profil için bir dizi farklı ekran içerir, haber akışı veya karşılama sayfaları. Koleksiyon, finans, eğitim, gıda, medya portalı veya e-ticaret gibi niş alanlar için uygundur.

    26. Rainy Season - Bir tasarımcının, sanatçının portföyü için PSD arayüz öğeleri

    Premium PSD öğeleri koleksiyonunun, uygulamalar veya widget'lar oluşturmak için mükemmel olduğunu belirtmekte fayda var. Neden gelecekteki projeler için kitaplığınıza bir dizi yüksek kaliteli öğe eklemiyorsunuz?

    27.

    Bootstrap'in birinci sınıf öğe koleksiyonunun yardımıyla tamamen duyarlı kart düzenleri oluşturabilirsiniz. Sonuç olarak 5 farklı şekil, renk ve çekici tasarım arasından seçim yapabilirsiniz. Hepsi birbiri ile birleştirilmiştir. Bu arada, icomoon simge yazı tipleri sete de eklendi.

    28.

    Ağaç Paketi infografik öğelerinin premium paketi özel bir ilgiyi hak ediyor. Hem PowerPoint sunumlarında, broşürlerde, yıllık raporlarda, özgeçmişlerde hem de ticari amaçlarla, reklamcılıkta, pazarlamada ve daha fazlasında kullanılabilir. EPS Ve AI zip dosyasının içinde yeniden boyutlandırma yeteneği ile dosya. ile daha iyi çalışın Adobe Illustrator CS5 veya daha yenisi.

    29.

    Gelecekteki projelerde kullanılmak üzere grafikler, çizelgeler, simgeler ve diğer özel formlar biçimindeki her türlü infografik öğenin mükemmel bir seçimi. Öğeler e-posta yoluyla sunumlar, yıllık raporlar, reklam, pazarlama veya ürün tanıtımı için uygundur. Toplamak EPS Ve AI dosyalar tercihen Adobe Illustrator CS5 veya daha yenisiyle çalışır.

    30.

    Hala ikon kitaplığını toplamaya devam edenler için Toniklere dikkat etmenizi öneririm. 6 kategoriye ayrılmış 2000 üstün kaliteli simgeye ne dersiniz? Katılıyorum, sormaya değer. Ayrıca, her birini gereksinimlerinize göre kolayca düzenleyebilir, boyutunu ve diğer gerekli ayrıntıları değiştirebilirsiniz.

    Özetliyor

    Materyal tasarımında yeni olsanız bile, bu ücretsiz ve ücretli araç ve kaynak seçenekleriyle, işe güvenle başlayabilirsiniz. Yukarıdaki tüm kaynaklardan yararlanın ve bunları gerektiği gibi kullanın. Belirli bir kütüphaneyi kullanarak, tasarımcıların her biri, gereksiz baş ağrısı olmadan ihtiyaçları için hızlı bir şekilde hazır bir çözüm elde edebilir. Deneyiminiz, tercihleriniz ve becerileriniz tarafından yönlendirilmeyi unutmayın. İnan bana, bu kesinlikle gelecekte yardımcı olacaktır. Söyleyecek ve listeye ekleyeceğiniz bir şey varsa, yorumlarda belirtin.



    Google'ın ana kuralı, kullanıcının ihtiyaçlarını dikkatlice izlemek ve bunlara göre tasarımlarını ayarlamaktır (sadece onu değil). Materyal Tasarımı gibi bir trend, UX'i iyileştirmenize olanak tanıyarak kaynağa tekrar tekrar dönme arzusuna neden olur. En önemli unsurlarından biri de aynı platformda çeşitli işlevlerle sorunsuz bir şekilde etkileşim kurabilme yeteneğidir.

    Materyal Tasarımı, serbest dolaşım fikrinden kaynaklanmaktadır. doğru kullanıcı yön ve dokunsal gerçekliğe dayanmaktadır. Başlangıçta, geliştiricileri sıradan mürekkep ve kağıttan ilham aldılar, ancak o zamandan beri, elbette, bu temel özellikten çok uzaklaştı ve gerçek sihrin özelliklerini kazandı. Başka bir deyişle, Google uzmanları görsel-işlevsel kısmı geliştirirken, iyi tasarım ilkelerini inovasyon ve yeni teknolojilerin olanaklarıyla birleştirdi.

    Materyal Tasarımının özellikleri nelerdir? Bu tasarım yönündeki öğelerin yüzeyleri ve kenarları, kullanıcının sitede sezgisel olarak gezinmesine yardımcı olan ipuçları oluşturmak için görsel desenleri ve sinyalleri birleştirir (sanki her şey gerçek dünyada oluyormuş gibi).

    Ek olarak, Materyal Tasarımı, vurguların etkili bir şekilde yerleştirilmesi (yani dikkati istenen öğeye odaklamak), arayüzde gezinmeyi basitleştirmek ve öğelerinin anlamını sezgisel olarak iletmek için baskı tasarımı ilkelerini kullanır. Materyal Tasarımı, zengin, eşit renkler, keskin, tanımlanmış kenarlar, geniş tipografi ve öğeler arasında önemli miktarda dolgu ile karakterize edilir. Bu unsurlar birlikte yalnızca göze hoş gelen bir resim oluşturmakla kalmaz, aynı zamanda yeni gerçeklik kavramsal anlamı ve kullanıcıya benzersiz bir UX sağlayan birçok özelliği ile.

    Bu tür bir tasarımda, kullanıcının eylemleri odak noktasıdır. Tüm etkileşimler tek bir ortamda gerçekleşir, etkileşimli nesneler diziyi kesintiye uğratmadan bir ortamdan diğerine hareket eder.

    Materyal Tasarım, her öğenin arzuladığı işlevsellik hakkında bir hikaye. Bu ilkeye göre, kullanıcının dikkatini çeken ana noktalara odaklanmak onu doğru yöne yönlendirmek için önemlidir.

    Materyal Tasarımı, etkileşim hakkında bir hikayedir. Sayfa, kullanıcının en ufak bir hareketine yanıt verirken, sanki sakin bir nehirde bir teknede seyrediyormuşsunuz ve nereye ve neden dönmeniz gerektiğini biliyormuşsunuz gibi her geçiş yumuşak olmalıdır. Bu nedenle, Materyal Tasarım aynı zamanda bir farkındalık hikayesidir: Her eylemin gerçekleştirilmesi hoş (ve kolay) olmasına ek olarak, kullanıcı neyi ve neden yaptığını ve bir sonraki dokunuşun onu nereye götüreceğini açık ve net bir şekilde anlamalıdır. Böylece, Geri bildirim açık, erişilebilir ve kolayca tanınabilir olmalıdır.

    Daha önce de belirtildiği gibi, arayüz yapısı çok sayıda baskı tasarımı "çipi" ödünç aldı, ancak bunların tümü orijinal hallerinde değil, geliştirilmiş bir biçimde kullanılıyor. Materyal Tasarımı bu "çiplere" ekler sınırsız olanaklar tasarımı tablet veya akıllı telefon gibi herhangi bir cihaza uyarlamanıza olanak tanıyan sayfayı ölçeklendirme ve yeniden boyutlandırma. Tüm bu olasılıklar bir his veriyor maksimum konfor navigasyon ve tüm arayüz ile çalışırken (sınırsız olasılıklar basitlik ilkelerine uyduğundan) ve bir güven duygusu uyandırır.

    Bir tasarımcının geliştirmeden önce cevaplaması gereken asıl soru, kullanıcının uygulama ile çalışırken tam olarak ne yapacağı (veya isteyeceği)? Cevabı formüle ettikten sonra Materyal Tasarım fikirlerini uygulamaya başlayabilirsiniz.

    Bir uygulama oluştururken, buradaki içeriğin görsel tasarımından daha az önemli olmadığını unutmayın. Kullanıcıyı bir uyuşukluğa sürüklememeli, aksine bir rahatlık hissi yaratmalı ve neden burada olduğuna ve şimdi ne yapacağına dair net bir anlayış yaratmalıdır.

    Farklı düzen seçeneklerini test edin, örneğin, araç çubuğu (araç çubuğu) ekranın üst kısmına yerleştirilebilir ve böylece tüm gezinme görevlerini çözerek farklı sekmeler arasında geçiş yapmayı ve arama yapmayı kolaylaştırır.

    İşlevsellik ilkelerini aklınızda tutun ve kullanıcıyı yönlendirmeye çalışın, bunları ilk sayfada "düşürmeyin". Bu yaklaşım daha avantajlı olacaktır: Ziyaretçinin dikkatini sunduğunuz ürün/hizmetin önemli yönlerine odaklayabileceksiniz. Her ziyaretçinin kolay ve hızlı bir şekilde ulaşabileceği destekleyici bileşenleri vurgulamanıza izin veren bir navigasyon sistemi oluşturmayı geliştirme aşamasında düşünün.

    En iyi nesneleri, şekilleri ve renkleri seçerken, burada durmayın: bu öğeleri hareketlerle manipüle etmeye başlayın, onlara esneklik ve somut bir "maddi" ağırlık verin. En küçük hareketler bile üzerindeki bu eksiksiz dokunsal kontrol, Materyal Tasarımını benzersiz bir şekilde güzel kılar.

    Geliştirmenin bu aşamasındaki amacınız, kusursuz UX ilkelerini karşılayacak şekilde hareket kolaylığı ile her nesnenin fiziksel "bedenselliği" arasında bir denge bulmaktır.

    Dikkatli planlama ve testler, lansman aşamasında meyvesini verecektir: Her şeyi doğru yaptıysanız, kullanıcı sağladığınız bilgilere "bağlanacaktır". Ek olarak, bir eylemi birkaç adımda gerçekleştirmek gerekirse, parlak nesneler ve animasyon kullanan planlı bir algoritma, onu işlemin tamamlanmasına getirecektir (sonuçta, kendisinden ne beklendiğini ve nasıl yapılacağını açıkça anlayacaktır. ).

    Materyal Tasarımda animasyon genellikle daha fazlasını oluşturmak için kullanılır. pürüzsüz geçişler, ancak yalnızca bu çerçevelerle sınırlı kalmamalısınız. Bununla, arayüzün ve gezinme çubuğunun birçok detayını iyileştirebilirsiniz. Ek olarak, simge menüsünde yalnızca görünürlük sağlamakla kalmayacak, aynı zamanda uygulamanın estetiğine olan ilginizi bir kez daha vurgulayacak küçük ayrıntılar kullanabilirsiniz.

    Materyal Tasarımın yalnızca iyi tasarıma değil, kullanılabilirliğe odaklandığını unutmayın. İlkeleri, zarafeti ve rahatlığıyla büyük bir kitleyi fethedecek bir uygulama oluşturmak için en iyi başlangıç ​​noktası olabilir.

    Bir tasarımcı olarak göreviniz, kullanıcının hayatını kolaylaştırmak ve uygulama ile etkileşime geçtiğinde etkili bir çözüm sağlamaktır. Bu, öncelikle en önemli bilgilerin mümkün olan en kısa sürede ve en uygun biçimde sağlanmasından kaynaklanmaktadır.

    Kullanıcının odaklanması gereken odak noktalarını her zaman aklınızda tutun ve her testte, ziyaretçi kaynakta "dolaşırken" bunların arka planda kaybolmadığından emin olun. Pop-up'lar, bildirimler ve diğer dikkat dağıtıcı şeyler ziyaretçileri rahatsız edebilir veya köşeye sıkıştırabilir. Bir tür rehber olun: kaybolmamalarına ve ihtiyaç duyduklarını bulmalarına yardımcı olun. Talimatlar ve bir yardım düğmesi de herhangi bir zamanda mevcut olmalıdır.

    Başka bir iyi fikir, kaynağa yerleştirdiğiniz bağlantıların açıklamalarını eklemektir. Kullanıcının sonunun nereye varacağını net ve hızlı bir şekilde anlamak için gereklidirler. Az etkili araç"buraya tıklayın" düğmesini kullanmaktır

    4. Google Design'dan Simge Şablonu:

    5. Android L için Simge Izgara Sistemi:

    Materyal Tasarımı, hizmetleri, arayüzleri ve diğer ürünleri birleştirmek için oluşturulmuş bir tasarım konseptidir. Konsept Google tarafından geliştirildi ve 25 Haziran 2014 tarihinde Google I/O kongresinde geniş bir kitleye sunuldu. geliştirmenin merkezinde renk uyumu, tasarım nesnelerinin özellikleri ve öğeleri. Materyal Tasarımı, geliştiriciler tarafından düzenli olarak tamamlanır ve güncellenir. konuşmak sade dil, ana fikir, bir gölge efekti kullanarak kartlar gibi açılan ve küpler halinde çöken bloklar şeklindeki bir tasarımdır. Kartların kendileri arasında sorunsuz bir şekilde geçiş yapmalıdır.

    Böyle bir tasarımın stratejisi, bütünsel bir kullanıcı deneyiminin yaratılmasına, hizmetlerin bir PC kullanıcısının çeşitli yaşam alanlarına girme olasılığına dayanmaktadır.

    Nesneleri yaratırken, asırlık deneyimden yola çıkıyor ve ona güveniyoruz. Ancak yazılım tasarımı hala yeni ortaya çıkan ve sistematik olarak gelişen bir üründür. Ona tamamen baktıktan sonra kendimize sorduk: Nelerden oluşuyor?

    - John Wylie, Baş Arama Tasarımı, Google

    Ana ilkeler

    Materyal Tasarımının ana ilkeleri arasında dokunsal yüzeyler, baskı tasarımı, anlamlı animasyon, uyarlanabilir tasarım yer alır.

    dokunsal yüzeyler Arayüz "dijital kağıttan" oluşur. Bu "kağıdın" katmanları üst üste yerleştirilir ve gölgeler oluşturulur. Bu gölgeler sayesinde, kişisel bilgisayar kullanıcıları arayüzle çalışmanın temellerini daha iyi anlarlar.

    Baskı dizaynı."Dijital kağıt", "dijital mürekkebi" görüntüler. "Dijital mürekkep" görüntüleri için geleneksel bir dergi veya poster tasarımı yaklaşımı kullanılır. Baskı tasarımının ana unsurları ölçek, ızgara, renk ve boşluktur. Bunlardan odak, hiyerarşi ve anlam yaratılır. Renk, yazı tipleri, boyutlar, arka plan ve diğer unsurlar sayesinde arayüz tasarımının kendisi oluşturulur. Bunu kullanmak ana konuya odaklanır işlevsellik, bir ürün veya hizmetin kilit kontrol noktaları.

    Düşünceli animasyon. Kullanıcının zaman harcaması doğrudan uygulama animasyonunun netliğine ve anlaşılırlığına bağlıdır. kişisel bilgisayar Bu programda kullanılan eylemlerin sonuçlarının anlaşılması üzerine. Animasyon, Materyal Tasarımı arayüzünü yönetmek için bir tür ipucudur.

    Uyarlanabilir tasarım. Materyal Tasarımının özelliklerinden biri de çok yönlülüğü yani yukarıda açıklanan üç bileşenin bilgisayar, telefon, tablet vb. farklı cihazlarda kullanılabilmesidir.

    dokunsal yüzeyler

    Dokunsal yüzeyler, sıradan kağıttan farklı olarak süper güçlere sahip "dijital kağıt" parçalarıdır - esneyebilir, bağlanabilir ve şeklini değiştirebilirler.

    Yüzey

    Yüzey, bir tasarım öğesinin, bir öğeyi diğerinden ayıran bir gölge oluşturan parçasıdır. Materyal tasarımı, maksimum basitlik ve "temiz" tasarım için çabalar.

    "Temiz" tasarım, genellikle bir nesnenin özelliklerini yapı kullanmadan bir gradyan veya gölge aracılığıyla iletme yeteneği olarak adlandırılır. Tüm yüzeylerin kendi gölgesi ve belirli bir yüksekliği vardır.

    Derinlik

    "Düz tasarımda" hacmi gösteren gölgeler kullanmamaya çalışırlar. Aynı zamanda gölgeler, arayüz öğelerinin belirli bir hiyerarşisini ve yapısını belirler. Derin bir gölge, ana konuyu vurgular ve ince ve zarif bir şekilde vurgular.

    Derinlik, nesnelerin etkileşimi hakkında bir ipucudur. Kullanıcının kaydırma yaptığı anda yeşil plaka üst katmana iliştirilir ve bir gölge oluşturur. Bu, yalnızca "mürekkebin" hareketini değil, aynı zamanda hareketi de açıkça göstermektedir. Beyaz arkaplan aşağıda yer almaktadır.

    Alt derinlik katmanı "alt" tır.

    • Lojistik unutmayın.Çeşitli iletişim kutuları, kayan pencereler, araç çubukları belirli bir yüksekliğe sahiptir. Çarpışmaları önlemek için periyodik olarak Z ekseni boyunca hareket etmeleri gerekir.
    • Düğmeleri zorlamayın. Kayan düğmeyi yalnızca acil ihtiyaç durumunda kullanmalısınız, çünkü onu kullanmak tasarıma anında Materyal Tasarım efekti getirir. Herhangi bir eylemi onaylamak ve pencereleri kapatmak için kullanmamalısınız.
    • Her şey kartta olmamalı. Kart kullanmak, yalnızca nesne çok sayıda form ve büyük miktarda içerik içerdiğinde uygundur. Diğer seçenekler için geleneksel metin veya listeler daha uygundur.
    • Diyalog kutularında minimalizm.İletişim kutuları, yalnızca sorular ortaya çıktığında kullanıcı eylemlerini onaylamak için kullanılmalıdır.

    Baskı dizaynı

    Materyal tasarım yüzeyinde bulunan tüm objeler “dijital mürekkep” ile uygulanır. Bu nesneler resimler, testler, piktogramlardır. Bu nesnelerin düzenlenmesi, baskı tasarımı ilkesine göre gerçekleşir.

    zarif tipografi

    Baskı tasarımında tipografi çok önemlidir. İçeriğin yapısını belirler ve belirli bir markanın tarzının oluşumunu etkiler.

    Tipografi, kendi boyutuna, yazı tipine, hiyerarşisine sahip öğelerin bir yapısını oluşturur.Onların yardımıyla, hangi öğelerin daha önemli olduğunu ve neden bazılarının anahtar, diğerlerinin ikincil olduğunu görsel olarak anlıyoruz.

    Zıt tipografi

    Baskının bir diğer önemli ilkesi de tipografinin zıtlığıdır. bunu görmek kolay büyük başlık ve koyu yazı tipi, önemli ve basit bir şey anlamına gelirken, daha küçük metin ve açık ton, ikincil bilgi anlamına gelir. Kontrast, içeriğin genel estetiğini vererek ana tezleri vurgulamanıza olanak tanır.

    Modüler ızgara ve kılavuzlar

    Ekran tasarımında temel ızgaralar kullanılıyorsa, baskı tasarımında modüler ızgaralar kullanılır. Materyal Tasarımı için 8dp'lik bir ızgara kullanılır.

    Materyal Tasarımda içerik yerleştirmenin ayırt edici özelliği, ana kılavuzların yerleştirilmesidir. Bunlar sayesinde ekranın kenarlarında girintiler oluşturularak sayfa içeriğinin yapısını ve kullanıcının bakış kontrolünü etkiler. Sonuç olarak, ana metni ekranın ortasında görüyoruz ve ek öğeler onun dışına, kenarlıklara yerleştiriliyor.

    geometrik ikonografi

    En basit simgeler, Android sistemi temelinde uzun süredir kullanılmaktadır. Materyal Tasarımda daha da basit ve görsel olarak daha hoş görünüyorlar.

    Örneğin göstergeler ve düğmeler, doygun parlak renklerle vurgulanır. Bu tür renkler sayesinde, ana kontrollere (kayan düğmeler vb.) Vurgular yerleştirilir. Tasarıma ek renkler eklemeniz gerekirse, temel, sağduyulu gölgeler kullanmanız önerilir.

    İlgili simgeleri indirin:

    Renk

    Tasarımda renk, ifadeden sorumludur. Önceden, Android'de renk şeması ikincildi, ancak şimdi ona kilit rollerden biri atanıyor. Materyal Tasarımında temel renk paleti vurgu ve ana tonlardan oluşur.

    Eylem çubuğu ana renkle boyanır ve durum çubuğu daha doygun bir tonla vurgulanır. Vurgu rengi şeritler, göstergeler, kayan düğmeler için kullanılır. Panonun temel unsurlarına dikkat çeker.

    Vurgular noktasal olarak ve küçük miktarlarda yerleştirilir. Arayüzün geri kalanı için renkler şu kurala uygun olarak kullanılır: büyük miktarda metin (posta mektuplarının listesi) bırakılır Standart boy ve PC kullanıcısının dikkatini çekmek için renk ekleyin; az miktarda metin (hesap makinesi, fotoğraf) 2-3 kat büyütülür ve renkli plakalar eklenir.

    Android sisteminde arayüzü dinamik olarak renklendirebilir, yani genel fotoğraftan ana renkleri vurgulayabilirsiniz.

    Güzel fotoğraflar

    Materyal Tasarımda, çeşitli fotoğraf ve çizimleri kullanabilir ve hatta kullanmanız gerekir. Genellikle resimlerde çerçeve yoktur. Dikkati resimlerden dağıtmamak için durum çubuğunun kendisi renksiz yapılmıştır. "Dijital mürekkep" her zaman sadece güzellik için değil, aynı zamanda tasarımın işlevselliği için de kullanılır.

    • Markalama önerilir.
    • Dolgu ve boş alanı unutmamalıyız (temel ızgara için 8dp, dolgu için 72 dp).
    • Parlak görüntüler kullanın.

    anlamlı animasyon

    Materyal Tasarımı, gerçek dünya gibi, kullanıcıya evrende neler olduğunu göstermek için anlamlı animasyon kullanır. şu an. Yani kullanıcı, hiçbir nesnenin hiçbir yerden alınmadığını ve hiçbir yere kaybolmadığını görmelidir.

    örnek 1 Animasyon, bu belirli 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 Takvimde bir tarihe tıkladığınızda, genel takvimden bir katman olarak sorunsuz bir şekilde kopan, ayrı bir bloğa dönüşen ve bu etkinliğin açıklamasını içeren ayrıntılı ayrı bir blokta açılan bir etkinlik açılır.

    Animasyon, kullanıcının dikkatini, gözlerini arayüzün eylemlerine odaklamasına yardımcı olur.

    Reaksiyon

    Materyal Tasarımı'ndaki animasyonun bir diğer kilit noktası, PC kullanıcısının belirli eylemlerine verdiği tepkidir. Android L'nin arayüzündeki değişiklikler, parmaklarınıza dokunduktan sonra gerçekleşir. Bu değişiklikler dalga benzeri bir eylemle görüntülenir.

    mikro animasyonlar

    Mikro animasyonlar son derece önemlidir. Tüm kullanıcı manipülasyonlarına yanıt olarak kullanılırlar. Bu, arayüz detayını ve yanıt verebilirliğini verir.

    Netlik ve keskinlik

    Animasyonun son ilkesi, eylemlerin netliği ve keskinliğidir. Materyal Tasarımı ilginç bir animasyon eğrisine sahiptir. Tüm nesneler, kullanıcı eylemlerine hızlı bir şekilde yanıt verir, aniden geri döner, ancak solup son sakin duruma geçmesi biraz daha uzun sürer. Sonuçta, kullanıcı bekleyerek zaman kaybetmez ve bu nedenle sinirlenmez ve arayüzle etkileşime girdiğinde olumsuz duygular almaz.

    • Animasyonu önceden düşünün.
    • Animasyonu en iyi şekilde kullanın (tüm animasyonların anlamlı olması gerektiğinden aşırı kötüye kullanım teşvik edilmez).

    Uyarlanabilir tasarım

    Materyal Tasarımının son kilit yönü konsepttir. uyarlanabilir tasarım. Bu, diğer üç yönü uygulamaya yönelik seçenekler anlamına gelir. çeşitli ekranlar cihazlar (telefon, PC, TV vb.).

    Genelden özele


    En popüler yöntem, ekranın kendisinin sıkıştırılmasıyla birlikte bilgi miktarının sıkıştırılmasıdır. Bir TV birçok içeriği barındırabilir. Telefon önce bir liste yerleştiriyor, üzerine tıkladığınızda detaylı bilgileri gösterebiliyorsunuz.

    Girinti

    Açık büyük ekranlar içerik bloklar kullanılarak yerleştirilir. Kendilerini doldururlar boş alan ve genişlikte genişleyebilir. Esnetme, içeriğin okunabilirliği dikkate alınarak yapılır. Ekranın geri kalanında, kayan düğmelerin veya zarların yerleştirilebileceği girintiler oluşturulur.

    Kılavuzlar


    Kılavuzlar sayesinde girintiler ayarlanır. Akıllı telefonlar, tabletler, bilgisayarlar ve TV'ler için girintilerin genişliği tamamen farklı olacaktır. Yani bir tablet için 80 dp ve bir akıllı telefon ekranı için sadece 72 dp'dir.

    boyutlar

    Tüm arabirim öğelerinin birden fazla oranı olmalıdır. Tabletlerin ve akıllı telefonların ekran boyutları birbirinden farklıdır ancak birden çok parametreye sahip öğeler kullanan uygulamalar her cihaz boyutuna uyum sağlar.

    Bloklar

    Modüler bir blok ızgarası, optimum karar verme için görsel ritmin ayarlanmasına yardımcı olur.

    Araç Çubuğu

    eylem Çubuğu- arayüzün ana bileşenlerinden biri. Eylem düğmeleri ve başlıkları içerir. Android L'de işlem çubuğu, çekici ve işlevsel bir kontrol birimi haline geldi. Bu, Araç Çubuğuna uygun kontrollerle formlar, kayan düğmeler, geri çekilebilir gezinme yerleştirebilmeniz sayesinde elde edildi.

    • için navigasyon çekmecesini kullanmayın. basit araçlar. Navigasyonun kullanılması, yalnızca uygulamadaki çok sayıda görev için önerilir.
    • Araç çubukları konusunda cesur olun.
    • Kayan düğmeyi en uygun yere yerleştirin. Kesinlikle alt köşeye bağlamayın.
    • Hem dikey hem de yatay cihaz ekranları için arayüz öğelerini uygulayın.

    Metafor olarak malzeme

    Google geliştiricileri iyi bir şeyi birleştirmeyi başardı çekici tasarım modern teknoloji ve bilimin yeniliği ile.

    Materyalizmin dijital dünyada ilk kez kullanılması değil bu. Bu nedenle, Apple son zamanlarda arayüz tasarımında (çevremizdeki maddi dünyadan görsel nesnelerin algısının taklidi) skeuomorfizm felsefesini kullandı.

    Buna iyi bir örnek Gazetelik uygulamasıdır. Burada bize tanıdık gelen nesneleri görselleştirdik: raflardaki gazeteler, dergiler. Bu dergileri çevirerek, günlük hayattan sıradan bir kitabın gerçek anlamda çevrilmesini taklit ediyoruz. Böylece geleneksel gerçek hayat dijitalde kopyalanıyor.

    Dijital tasarımın geliştirilmesi

    Kullanıcıların büyük çoğunluğu dijital ortam ile günlük olarak etkileşim halindedir. Artık sanal nesnelerin gerçek dünya ile tam benzerliğini gerektirmiyorlar. Tüm kullanıcılar bu ana ne kadar çabuk alışırsa, dijital tasarım o kadar çabuk aktif olarak ilerleyebilecektir.

    Buna dayanarak, Materyal Tasarımı artık skeuomorfizmden eskisi kadar etkilenmiyor. Şimdi bu, sanal nesnelerin evriminde sadece yeni bir adım.

    Temel bir temel olarak görünürlük

    Materyal Tasarımı'ndaki çeşitli kontrollerin yüzeyleri ve kenarları, gerçek hayattaki eylemlere çok benzeyen arayüzü yönlendirmek ve kontrol etmek için ipuçları sağlar.

    Nesnelerin dokunsal özellikleri, aralarındaki ilişkiyi belirlemek için anahtar nesneleri ek olanlardan ayırmaya yardımcı olur.

    Materyal tasarımın temelleri aynı zamanda baskı tasarımının ilkelerini de içerir. Vurgular sadece estetik için değil, aynı zamanda özel bir yapı, hiyerarşi oluşturmak, basit bir kontrol sistemi oluşturmak için yerleştirilmiştir.

    Materyal Tasarımının görsel bileşeninin merkezinde zengin renkler, keskin kenarlar, büyük tipografi ve çeşitli öğeler arasında geniş dolgu bulunur.

    anlamlı dinamikler

    Ana dikkat, kullanıcının davranışına (eylemlerine) odaklanır. Tasarımla etkileşimi, birikmiş kullanıcı deneyimine dayanır ve başka hiçbir şeye dayanmaz.

    Materyal Tasarım tarzındaki site örnekleri

    Konseptin internette yayınlanmasıyla birlikte, ağda birçok Materyal Tasarım temsilcisi belirdi.

    Örnek alınan siteler, Materyal Tasarımın temel ilkelerine tam olarak uygun olarak oluşturulmuştur. Basit ve nettirler, kayan düğmeler, gölgeler, parlak renkler Ve görsel efektler, sorunsuz gezinme. Tüm bunlar harika bir kullanıcı deneyimi sağlar.



    videolar

    Materyal Tasarımı büyük bir izleyici kitlesinin ilgisini çekti. Gerçek dünyadan ellerinizle dokunabileceğiniz tanıdık bir nesneyle tamamen aynı şekilde kullanıcı için kesinlikle anlaşılır ve net olacak şekilde bir kullanıcı arayüzünün nasıl doğru bir şekilde oluşturulacağını gösterir.

    Google ekibindeki tasarımcılardan Roman Nurik, I/O 2014 uygulamasının geliştirme sürecinde Materyal Tasarımı ilkelerine uyum sağlamak için nasıl değiştiğinden bahsetti. Özellikle sizler için videosunu tercüme ettik.

    Google Tasarım kanalından video.

    Devamını oku: