Dalam acara I / O 2014 yang lalu, Google kembali mendapat kejutan baru. Selain secara rasmi mengeluarkan kemas kini Android baru dengan nama kod Lollipop, Google juga memperkenalkan bahasa reka bentuk baru, Reka Bentuk Bahan . Ia adalah sistem reka bentuk yang bukan hanya bertujuan untuk penambahbaikan antara muka pengguna Lollipop, tetapi juga untuk merentas peranti dan persekitaran.
Reka bentuk Bahan mempunyai beberapa ciri utama yang membezakan antara trend reka bentuk lain dengan cara uniknya sendiri. Sama seperti namanya, ia diilhamkan oleh bahan - bahan sebenar dan menggabungkannya menjadi satu sistem reka bentuk untuk mewujudkan pengalaman pengguna yang anggun, intuitif, cantik dan paling interaktif. Dalam siaran ini, kami akan melihat apa yang ada di dalam Reka Bentuk Bahan dan memberi anda panduan ringkas tentang cara melaksanakannya. Dengan memetik blog Google, saya akan berkata, "Ini Reka Bentuk Bahan".
Pengenalan
Reka bentuk Bahan adalah sistem reka bentuk bersatu, bermakna ia dibuat untuk bekerja dengan semua peranti dan platform yang ada pada hari ini. Dari tablet, telefon pintar ke desktop dan dari Android, iOs, Windows ke platform Web. Semua reka bentuk kelihatan dan dirasakan harus sama di mana sahaja ia berada.
Prinsip Utama
Terdapat tiga prinsip utama yang membina Reka Bentuk Bahan. Ini adalah bahagian paling penting dari apa yang ditawarkan Bahan secara umum.
- Bahan adalah metafora . Pengembangan Bahan diilhami oleh kajian elemen sentuhan yang kita gunakan setiap hari, kertas dan dakwat . Ia menjadikan objek cahaya, permukaan dan gerakan lebih baik apabila berinteraksi antara satu sama lain.
- Bold, grafik dan sengaja . Typography, grid, ruang, skala, warna, dan penggunaan imejan yang digunakan dalam asas reka bentuk berasaskan cetakan menjadikan kandungan Bahan lebih baik.
- Motion memberikan makna . Ini adalah salah satu perkara yang paling terkenal. Dalam Bahan, anda harus mempunyai gerakan yang bermakna dan sesuai, maklum balas yang halus & jelas dan peralihan yang cekap & koheren.
Komponen
Reka bentuk Bahan memberi perhatian kepada setiap detail komponennya supaya dapat digunakan secara universal. Komponen ini akan membantu anda membina aplikasi dan tapak yang menakjubkan. Terdapat banyak komponen yang disediakan oleh Bahan seperti butang, suis, kad, input teks, fab (butang tindakan terapung), dialog, roti bakar, submenu, tab dan banyak lagi. Setiap daripada mereka mempunyai peraturan sendiri dan membimbing bagaimana untuk membina mereka supaya anda tidak akan mempunyai unsur-unsur tidak penting.
Corak Thing
Selain komponen, Bahan juga memberikan anda beberapa corak asas untuk UI tambahan. Corak ini akan meningkatkan UI yang anda buat dengan komponen Material. Corak termasuk format data, laci navigasi, kesilapan, gerak isyarat, teknik menatal, carian, tetapan, memuatkan imej, sapu untuk menyegarkan dan banyak lagi.
Warna Reka Bentuk Bahan
Warna-warna Bahan telah direkabentuk sedemikian rupa sehingga tidak akan membuat anda merasa tidak selesa, pelik dan rata. Mengambil inspirasi dari persekitaran harian kami seperti tanda jalan, seni bina kontemporari, pavement marking tape dan gelanggang sukan, Reka bentuk Bahan membawa anda warna yang tidak dijangka dan tinggi. Terdapat banyak palet warna untuk memilih memberi anda lebih banyak kemudahan apabila membangunkan apl atau tapak. Anda juga boleh memuat turun swatch warna untuk penggunaan tempatan seperti untuk koleksi Photoshop anda.
Ikon Bahan
Sekiranya anda seorang pemaju Android, maka anda mesti kenal dengan beberapa pek ikon percuma yang disediakan oleh Google. Ia biasanya digunakan untuk elemen utama dan bar tindakan sahaja. Walaupun untuk sumber lain, kita perlu mencari ikon lain seperti folder, fail, salinan dan tampal, dan sebagainya secara manual. Dalam Reka Bentuk Bahan Google telah membetulkan masalah dengan banyak pek ikon yang boleh anda gunakan.
Setiap ikon telah melalui beberapa pendekatan reka bentuk yang juga menggunakan kajian bahan sentuhan. Mereka juga mengekalkan prinsip Bahan, iaitu konsisten. Anda boleh memuat turun ikon ini pada GitHub, mereka datang dengan beberapa pilihan untuk penggunaan yang berbeza seperti untuk iOs, web, Android atau svg. Sekiranya anda mahukan pilihan yang lebih luas untuk penyesuaian mudah, anda mungkin ingin melihat ikon Reka Bentuk Bahan di FlatIcon. Di dalam pek, anda akan mendapat versi vektor ikon (SVG & EPS), JPA dan PNG.
Animasi Bahan
Inilah ciri-ciri Bahan yang saya sukai. Animasi dalam Bahan sangat nyata dan intuitif. Setiap animasi mempunyai peralihan masa yang bermakna, konsisten dan tepat. The demo gif yang ditunjukkan di bawah hanyalah salah satu animasi Bahan yang indah. Untuk memberikan interaksi menarik dan responsif, pasukan Google juga membuat animasi seperti riak air untuk kesan input pengguna. Ia kebanyakannya digunakan pada butang dan kad.
Ciri-ciri yang saya jelaskan hanyalah sebahagian kecil daripada apa yang ditawarkan Bahan Reka Bentuk. Untuk mengetahui lebih lanjut mengenai Bahan dunia, hanya menuju halaman dokumentasi.
Pelaksanaan
Secara lalai, Reka Bentuk Bahan datang sebagai kemas kini UI baharu untuk Android Lollipop. Semua garis panduan Bahan telah digunakan di dalamnya. Oleh kerana Bahan ditujukan untuk semua jenis persekitaran, melaksanakannya ke sistem lain tidak akan menjadi sukar. Dan terima kasih kepada komuniti, lebih mudah dengan beberapa alat yang mereka buat.
Ini adalah beberapa cara yang boleh anda capai untuk mendapatkan Reka Bentuk Bahan di luar Android, contohnya web.
Menggunakan Rangka Kerja CSS
Inilah cara termudah jika anda mahu melaksanakan Reka Bentuk Bahan dalam platform web. Dengan kerangka kerja, semua yang perlu anda lakukan adalah memulakannya kemudian tulis elemen yang anda perlukan. Terdapat banyak kerangka yang boleh anda gunakan seperti Materialize, Material UI atau Polymer untuk menamakan beberapa. Pilihan peribadi saya jatuh ke dalam Materialis. Lebih mudah untuk digunakan dan difahami dan mempunyai dokumentasi hebat dengan demo bagus.
Mengikuti Garis Panduan
Sekiranya anda ingin melaksanakan Bahan tanpa bantuan kerangka kerja dan lebih memilih untuk mengacaukan dengan kod yang paling banyak, maka anda mesti mematuhi garis panduan Bahan. Di sana, anda akan mendapati semua yang perlu dan tidak boleh anda perhatikan untuk mencapai prinsip Bahan. Anda akan melihat semua panduan asas untuk membuat komponen, susun atur, animasi, warna, corak dan banyak lagi. Anda mungkin mahu melihat beberapa Senarai semak bahan untuk pembangunan yang lebih mudah.
Kesimpulannya
Reka bentuk bahan adalah sistem reka bentuk yang hebat dan telah menjadi salah satu trend yang paling dinanti-nantikan sepanjang tahun. Dalam beberapa bulan akan datang, kita dapat melihatnya di mana-mana. Lebih banyak apl dan tapak akan digilap dengan kemas kini reka bentuk Google baharu ini.
Dan dengan Reka Bentuk Bahan, Google telah membuktikan keunggulannya sebagai salah satu syarikat teknologi terbesar. Ia menjadikan Google bukan hanya menerajui enjin carian dan kawasan OS mudah alih tetapi juga dalam bidang reka bentuk. Sekarang, tidak ada syarikat lain yang mengembangkan perkara besar seperti Google. Tetapi pengalaman berkata, ia tidak akan bertahan lama. Mari tunggu lagi syarikat lain bertindak balas terhadap Reka Bentuk Bahan Google.
