Apa keunggulan relatif dari desain datar, desain material, dan skuomorfisme?

8

Saya telah melihat pedoman Google untuk hal ini yang disebut "desain material" , dan saya telah mengikutinya beberapa. Namun, saya juga melihat banyak situs menggunakan desain datar: Twitter , Codecademy , dan Gitter - dan itu hanya beberapa. Lalu ada yang menggunakan gradien CSS3, bayangan, dll. Dan gambar detail untuk merancang situs yang terlihat nyata (koreksi saya jika saya salah, tapi bukankah ini skuomorfisme?), Seperti halaman beranda untuk Twitter Bootstrap 2 .

Dari apa yang saya mengerti, desain datar mengurangi beban lalu lintas seluler.

Apa keuntungan (dalam hal kecepatan / UX / dll, khususnya) yang mereka tawarkan satu sama lain?

DᴀʀᴛʜVᴀᴅᴇʀ
sumber
Saya pikir ini adalah pertanyaan yang menarik untuk diajukan. Pikiran awal saya adalah bahwa desain skeuomorfik mungkin memiliki kelemahan kecepatan jika mereka sangat bergantung pada gambar. Saya berasumsi itulah yang Anda maksud dengan desain datar yang mengurangi beban lalu lintas seluler. Tetapi sebagai titik tandingan, desain skeuomorfik masih dapat diselesaikan dengan banyak fitur yang tersedia di CSS3, jadi saya takut jawaban apakah satu atau yang lainnya menguntungkan dalam hal kecepatan adalah "kadang-kadang ya, kadang tidak"
JohnB
@ JohnB bahkan tidak dapat mengakses situs. Saya mendapatkan kesalahan 'redirect loop' di Chrome --- lebih baik tidak terjun ke diskusi PL di sini.

Jawaban:

11

Skeuomorfisme benar-benar kebalikan dari desain datar . "Desain Material" Google hanyalah nama merek mereka untuk interpretasi spesifik mereka tentang desain datar. Desainnya masih datar. "FLat Design" diciptakan oleh Apple ketika mereka merilis iOS7. Itu tertangkap karena itu adalah istilah pertama yang digunakan, itu bisa saja dengan mudah disebut "Desain Material" jika Google melakukannya terlebih dahulu.

Praktik skeuomorfisme adalah menambahkan elemen visual yang Anda harapkan untuk melihat apakah objek itu nyata secara fisik daripada diproyeksikan di layar. Contohnya adalah bayangan dan highlight. Mereka ada pada segala sesuatu di dunia nyata tetapi tidak pada apa pun di dunia digital. Menambahkan elemen skeuomorfik ini dirancang untuk membuat manusia merasa lebih akrab dengan elemen digital.

Desain datar adalah kebalikan dari ini. Dalam "desain datar" tidak ada pertimbangan untuk fisika dan pencahayaan "dunia nyata". Elemen-elemen digital dibuat namun perancang ingin membuatnya tanpa mempedulikan apa yang "realitas" akan lakukan terhadap elemen itu jika objeknya fisik.

Halaman awal bootstrap bukan contoh skeuomorfisme. Ini adalah contoh desain datar secara umum. Walaupun bisa dikatakan bahwa inset rectangle di tengah dengan inset "emboss" effect juga skeuomorphic. Jadi mungkin "hibrida" mungkin deskripsi terbaik.

Dalam hal kelebihan / kekurangan secara teknis - tidak ada alasan kuat untuk memilih satu dari yang lainnya.

Seringkali untuk melakukan kualitas tinggi, efek skeuomorfik yang dapat dipercaya dibutuhkan. Gambar secara alami akan meningkatkan permintaan HTTP dan memuat browser. Jika Anda melepaskan gambar yang mendukung skuomorfik CSS, CSS bisa sangat rumit dan besar. Sementara penurunan permintaan gambar HTTP akan membutuhkan, ukuran tambahan (kb) dari file CSS dengan elemen skeuomorphic mungkin lebih besar daripada pengurangan permintaan HTTP (dari sudut pandang pengguna).

Desain datar umumnya mudah dilakukan dengan CSS3 dasar. Jika gambar yang dibutuhkan dalam desain datar gambar yang sama kemungkinan besar akan dibutuhkan dalam desain skeuomorphic juga. Jadi mereka saling mengimbangi dalam hal kelebihan / kekurangan. Datar Desain CSS adalah lazim kurang kompleks dan lebih mudah untuk mengedit, tetapi tidak memiliki menjadi. Sangat mungkin untuk membuat desain datar dengan properti CSS yang sangat kompleks. Kebanyakan desain datar mengandung gradien - tidak hanya gradien "dunia nyata" berdasarkan pada apa yang akan dilakukan cahaya jika objek itu nyata. Setiap ikon Apple7-8 atau Windows 8 Apple menggunakan gradien. Hanya gradien yang sangat halus sebagai lawan dari "membuat ini terlihat seperti itu menonjol" gradien.

Pada akhirnya, tidak ada alasan kuat mengapa desain datar secara teknis lebih baik atau lebih buruk daripada skeuomorfisme. Itu semua bermuara pada preferensi dari pihak desainer. Kedua skeuomorphism dan desain datar hanyalah tren desain tanpa setiap dasar dalam penalaran teknis.

itu mirip dengan bertanya "Yang secara teknis lebih baik situs web merah atau situs web biru?" - tidak ada jawaban selain "Apa pun yang Anda inginkan."

Scott
sumber
1
Satu catatan adalah bahwa efek skeuomorfik yang dibuat murni dalam CSS akan menyebabkan penurunan kinerja yang sangat besar hanya dengan memuat file karena gradien, bayangan kotak, dll. Sangat intensif
Zach Saucier
Saya menghindari itu dalam jawaban @ ZachSaucier :)
Scott