Apa perbedaan antara "gaya datar" dan "desain bahan"?
20
Setelah Windows 8 keluar semua berbicara tentang "Metro UI" dan kemudian tentang "Flat design". Sekarang, setelah Android Lollipop keluar semua berbicara tentang "Desain material". Adakah yang bisa menjelaskan perbedaan antara "Desain bahan" dan "Gaya datar"?
Desain material tidak terkait dengan desain datar dalam prinsip-prinsipnya. Desain material bersifat skeuomorfis karena merupakan upaya untuk membuat desain web lebih realistis dalam menggambarkan elemen, menggunakan lapisan dan animasi dengan cara yang masuk akal di luar browser. Desain visual datar dan desain material serupa pada saat ini, tetapi desain material dapat diterapkan untuk desain selain yang seperti datar.
Ini mengikuti 3 prinsip
Materi adalah metafora
Berani, gamblang, disengaja
Berikan makna dengan gerak
Layering dalam desain material dilakukan melalui elemen yang bergerak maju atau mundur di sepanjang sumbu z, ke dan dari pengguna, dan menambahkan bayangan realistis untuk menyampaikan lebih banyak makna. Elemen animasi, seperti memiliki animasi yang mempengaruhi posisi ketika item daftar dihapus, dimaksudkan untuk meningkatkan aliran dan pemahaman pengguna sambil membuat pengalaman lebih lancar. Dengan demikian, lebih banyak makna dapat digambarkan melalui desain material daripada desain datar
Desainer Google membuat model kertas untuk mengetahui layering dan bayangan untuk desain material mereka.
Ada pedoman desain lain yang mencakup spasi, warna, kegunaan, dan lebih detail tentang pemosisian dan animasi yang dapat Anda lihat di halaman web Google tentang subjek tersebut .
Cara yang baik untuk mempelajari lebih lanjut tentang desain material dan bagaimana menerapkannya adalah dengan menggunakan aplikasi yang telah dibuat Google menggunakan desain material dan membaca tentang detail desain , yang ini adalah oleh Brian Lovin pada aplikasi Inbox.
Orang mungkin berasumsi bahwa desain material adalah semacam perpanjangan dari desain flat, tetapi pada kenyataannya prinsipnya berbeda. Tren saat ini adalah untuk membuat desain yang bersih dan seperti datar yang digunakan Google untuk saat ini, tetapi prinsip-prinsip desain material melampaui batas-batas tersebut dan dapat diterapkan pada metode desain lainnya juga.
Dalam Desain Material itu, secara visual, menggunakan banyak ikon dan gaya desain datar, saya akan mengatakan mereka pasti terkait dalam pengertian itu. Desain Material, tentu saja, lebih dari tampilan visual seperti yang Anda tunjukkan.
DA01
@ DA01 Terima kasih, saya mencoba menjelaskan maksud saya dalam pengeditan terbaru
Zach Saucier
Pada catatan terkait, artikel ini bagus untuk membandingkan iOS dengan Desain Material dan belajar lebih banyak tentang masing-masing.
Zach Saucier
5
Desain datar = istilah umum yang mengacu pada estetika modern UI trendi dari ikon datar dan balok warna.
Metro Design = Desain UI baru Microsoft (sekarang disebut bahasa desain Microsoft ) untuk Windows 8 yang menggunakan estetika visual desain datar .
Desain Bahan = Google desain UI baru untuk Android yang menggunakan estetika visual desain datar .
(Perhatikan bahwa baik Metro dan Material jauh lebih dari sekedar estetika desain datar. Mereka juga berbicara tentang desain interaksi, aliran, perpustakaan pola, dll.)
Terima kasih kepada Johannes karena memperhatikan perubahan nama untuk UI Microsoft.
Saya tidak berpikir ini berjalan cukup ke detail dari apa yang sebenarnya mereka adalah . Tampaknya lebih dari apa yang mereka gunakan
Zach Saucier
@ ZachSaucier benar. OP bertanya terutama tentang perbedaannya. Saya akan mengatakan perbedaannya adalah bahwa satu adalah istilah umum untuk gaya visual, dua lainnya adalah istilah khusus untuk pedoman UI bermerek.
DA01
1
@ DA01, hanya ingin menunjukkan bahwa Microsoft UI telah tidak diberi nama Metro sejak 2012. Hal ini bukan disebut "Microsoft bahasa desain" sumber . Saya menyadari bahwa pertanyaan OP menyebutkannya dengan nama ini juga tetapi itu tidak benar.
Hanna
@ Johnannes ya, itu catatan yang bagus.
DA01
Desain Material dapat digunakan tidak hanya dengan Android tetapi juga desain Web & desain aplikasi Desktop.
vovahost
3
Desain material tidak rata, banyak lapisan "material" datar yang diberi jarak sedikit pada sumbu Z. Ini berarti bahwa objek-objek ini memiliki bayangan dan seharusnya datang dari suatu tempat ketika mereka muncul di layar dan pergi ke suatu tempat ketika mereka tidak diperlukan lagi. Yang berarti mereka tidak menghilang begitu saja.
Ada juga banyak pedoman desain yang menentukan warna, jarak dan banyak aspek tata letak lainnya.
Berikut ini beberapa di antaranya, tetapi Anda dapat menemukan lebih banyak lagi dengan beberapa pencarian google.
"Desain datar" adalah seperti yang mereka jelaskan di atas sana, dan desain "Desain Bahan" tidak benar-benar "skeuomorfik" tetapi "Desain Flat Skeuomorphed". "Desain Material" menggunakan benda datar dan menyelaraskannya dalam sumbu Z untuk memiliki "Desain Datar 3D". Saya harap ini membantu.
Sebenarnya, desain datar akan tampak lebih sederhana pada latar belakang materi, selain itu, semua animasi ini lebih ditujukan pada interaksi pengguna dengan perangkat seluler, bukan dengan situs. Selain itu, tidak ada yang melarang penggunaan dua pendekatan ini dalam satu produk, jika pendekatan pekerjaan pada desain lebih sadar dan filosofis. Adapun skeuomorphism, ia mencoba untuk membawa elemen antarmuka dengan cara yang lebih akrab, ramah pengguna: bagaimana benda ini atau itu akan terlihat di dunia nyata, tetapi banyak orang memiliki pandangan yang berbeda tentang hal-hal di sekitarnya, sehingga penciptaan satu gaya pendekatan semacam itu hampir tidak mungkin ... Beberapa informasi untuk ditambahkan Apa bedanya: Flat Design vs Material Design
Desain datar = istilah umum yang mengacu pada estetika modern UI trendi dari ikon datar dan balok warna.
Metro Design = Desain UI baru Microsoft (sekarang disebut bahasa desain Microsoft ) untuk Windows 8 yang menggunakan estetika visual desain datar .
Desain Bahan = Google desain UI baru untuk Android yang menggunakan estetika visual desain datar .
(Perhatikan bahwa baik Metro dan Material jauh lebih dari sekedar estetika desain datar. Mereka juga berbicara tentang desain interaksi, aliran, perpustakaan pola, dll.)
Terima kasih kepada Johannes karena memperhatikan perubahan nama untuk UI Microsoft.
sumber
Desain material tidak rata, banyak lapisan "material" datar yang diberi jarak sedikit pada sumbu Z. Ini berarti bahwa objek-objek ini memiliki bayangan dan seharusnya datang dari suatu tempat ketika mereka muncul di layar dan pergi ke suatu tempat ketika mereka tidak diperlukan lagi. Yang berarti mereka tidak menghilang begitu saja.
Ada juga banyak pedoman desain yang menentukan warna, jarak dan banyak aspek tata letak lainnya.
Berikut ini beberapa di antaranya, tetapi Anda dapat menemukan lebih banyak lagi dengan beberapa pencarian google.
http://www.google.com/design/spec/material-design/introduction.html#
sumber
"Desain datar" adalah seperti yang mereka jelaskan di atas sana, dan desain "Desain Bahan" tidak benar-benar "skeuomorfik" tetapi "Desain Flat Skeuomorphed". "Desain Material" menggunakan benda datar dan menyelaraskannya dalam sumbu Z untuk memiliki "Desain Datar 3D". Saya harap ini membantu.
sumber
Sebenarnya, desain datar akan tampak lebih sederhana pada latar belakang materi, selain itu, semua animasi ini lebih ditujukan pada interaksi pengguna dengan perangkat seluler, bukan dengan situs. Selain itu, tidak ada yang melarang penggunaan dua pendekatan ini dalam satu produk, jika pendekatan pekerjaan pada desain lebih sadar dan filosofis. Adapun skeuomorphism, ia mencoba untuk membawa elemen antarmuka dengan cara yang lebih akrab, ramah pengguna: bagaimana benda ini atau itu akan terlihat di dunia nyata, tetapi banyak orang memiliki pandangan yang berbeda tentang hal-hal di sekitarnya, sehingga penciptaan satu gaya pendekatan semacam itu hampir tidak mungkin ... Beberapa informasi untuk ditambahkan Apa bedanya: Flat Design vs Material Design
sumber