“Düz stil” ve “malzeme tasarımı” arasındaki fark nedir?


20

Windows 8 çıktı sonra tüm "Metro UI" hakkında ve daha sonra "Düz tasarım" hakkında konuştu. Şimdi, Android Lollipop çıktıktan sonra "Materyal tasarımı" hakkında konuşun. Birisi "Malzeme tasarımı" ve "Düz stil" arasındaki farkı açıklayabilir mi?

Yanıtlar:


20

Materyal tasarımı, prensipleri ile düz tasarımla ilgisizdir. Malzeme tasarımı, web tasarımını katmanları ve animasyonu tarayıcı dışında mantıklı bir şekilde kullanarak öğeleri nasıl tasvir ettiği konusunda daha gerçekçi hale getirme girişiminde bulunduğundan skeuomorfiktir . Görsel olarak düz tasarım ve malzeme tasarımı şu anda benzer, ancak düz tasarım dışındaki tasarımlara malzeme tasarımı uygulanabilir.

3 ilke takip eder

  1. Malzeme mecazdır
  2. Cesur, grafik, kasıtlı olun
  3. Harekete anlam katın

Malzeme tasarımında katmanlama, öğeleri z ekseni boyunca ileri veya geri hareket ettirerek ve kullanıcıya ileterek ve daha fazla anlam ifade etmek için gerçekçi gölgeler ekleyerek yapılır. Bir liste öğesi kaldırıldığında pozisyonu etkileyen bir animasyona sahip olmak gibi animasyon öğelerinin, deneyimi daha pürüzsüz hale getirirken kullanıcı akışını ve anlayışını iyileştirmesi amaçlanır. Bunu yaparken, malzeme tasarımında düz tasarıma göre daha fazla anlam tasvir edilebilir


Google tasarımcıları, malzeme tasarımları için katman ve gölgeler bulmak için kağıt modeller yaptılar.

Google'ın konuyla ilgili web sayfasında kontrol edebileceğiniz boşluk, renk, kullanılabilirlik ve konumlandırma ve animasyon hakkında daha fazla ayrıntı içeren başka tasarım yönergeleri de vardır .

Materyal tasarımı ve nasıl uygulanacağı hakkında daha fazla bilgi edinmenin iyi bir yolu, Google'ın materyal tasarımı kullanarak oluşturduğu uygulamaları kullanmak ve tasarım ayrıntılarını okumaktır , bu Inbox uygulamasındaki Brian Lovin'dir .

İnsanlar malzeme tasarımının bir tür düz tasarımın uzantısı olduğunu varsayabilirler, ancak aslında prensipler farklıdır. Mevcut eğilim, Google'ın şimdilik kullandığı temiz, düz benzeri bir tasarım yapmaktır, ancak malzeme tasarımı prensipleri bu sınırları aşıyor ve diğer tasarım yöntemlerine de uygulanabiliyor.


Bu Materyal Tasarımda, görsel olarak, çok sayıda düz tasarım ikonu ve stili kullanıyor, kesinlikle bu anlamda ilişkili olduklarını söyleyebilirim. Materyal Tasarımı, elbette, işaret ettiğiniz gibi görsel görünümden daha fazlasıdır.
DA01

@ DA01 Teşekkürler, en son düzenlemede daha açık ifade etmeye çalıştım
Zach Saucier

İlgili bir notta, bu makale iOS'u Malzeme Tasarımıyla karşılaştırmak ve her biri hakkında daha fazla bilgi edinmek için harika.
Zach Saucier

5

Düz tasarım = bloklu düz simgeler ve renk bloklarının modaya uygun modern UI estetiğini ifade eden genel bir terim.

Metro Design = Windows 8 için düz tasarım görsel estetiğini kullanan Microsoft'un yeni UI tasarımı (artık Microsoft tasarım dili olarak adlandırılıyor ) .

Materyal Tasarımı = Düz tasarım görsel estetiğini kullanan Android için Google'ın yeni UI tasarımı .

(Hem Metro'nun hem de Malzemenin düz tasarım estetiğinden çok daha fazlası olduğunu unutmayın. Ayrıca etkileşim tasarımı, akışlar, desen kütüphaneleri vb. Hakkında da konuşurlar.)

Microsoft'un kullanıcı arayüzünün ad değişikliğini kaydettiği için Johannes'e teşekkürler.


Bu aslında ne detaya yeterince gider sanmıyorum vardır . Daha çok kullanıldıkları
Zach Saucier

@ZachSaucier doğru. OP temel olarak farkı soruyordu. Aradaki farkın görsel stil için genel bir terim olması, diğer ikisinin de markalı UI yönergeleri için özel terimler olduğunu söyleyebilirim.
DA01

1
DA01 @, sadece Microsoft'un UI olduğunu işaret etmek istiyorum değil yerine "Microsoft tasarım dili" denir 2012'den beri Metro seçildi kaynak . OP sorusunun bu adla da bahsettiğinin farkındayım ama bu yanlış.
Hanna

@Johannes evet, bu iyi bir not.
DA01

Materyal Tasarımı sadece Android ile değil, Web tasarımı ve Masaüstü uygulama tasarımı ile de kullanılabilir.
vovahost

3

Materyal tasarımı düz değil, Z ekseni üzerinde biraz aralıklı olan "malzeme" nin düz katmanları. Bu, bu nesnelerin gölgeleri olduğu ve ekranda göründüklerinde bir yerden gelmeleri ve artık ihtiyaç duyulmadıklarında bir yere gitmeleri gerektiği anlamına gelir. Bu, sadece içeri ve dışarı solmazlar anlamına gelir.

Ayrıca, düzeninizin rengini, aralığını ve diğer birçok yönünü belirten bir dizi tasarım kılavuzu vardır.

İşte bunlardan bazıları, ancak birkaç Google aramasıyla çok daha fazlasını bulabilirsiniz.

http://www.google.com/design/spec/material-design/introduction.html#


-1

"Düz tasarım" orada açıkladıkları gibidir ve "Materyal Tasarımı" tasarımı gerçekten "skeuomorfik" değil "Skeuomorfik Düz Tasarım" dır. "Materyal Tasarımı" düz şeyler kullanır ve "3B Düz Tasarım" için Z ekseninde hizalar. Umarım yardımcı olmuştur.


-2

Aslında, düz tasarım malzemenin arka planında daha basit görünecek, ayrıca tüm bu animasyonlar, siteden ziyade mobil cihazlarla kullanıcı etkileşimi üzerinde daha fazla amaçlanıyor. Buna ek olarak, eğer tasarım çalışmalarına daha bilinçli ve felsefi olarak yaklaşırsa, hiç kimse bu iki yaklaşımın tek bir üründe kullanılmasını yasaklamaz. Skeuomorfizmaya gelince, arayüzün unsurlarını daha tanıdık, kullanıcı dostu bir şekilde getirmeye çalıştı: bu veya bu nesnenin gerçek dünyada nasıl görüneceği, ancak birçok insan çevredeki şeylerin farklı görüşlerine sahip, bu yüzden tek bir Bu yaklaşımın tarzı neredeyse imkansızdı ... Eklenecek bazı bilgiler Fark nedir: Düz Tasarım ve Malzeme Tasarımı

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.