UI Desain Material Google Dirubah dengan Warna Baru, Ikonografi, dan Fokus pada Sentuhan

click fraud protection

Komitmen baru di Chromium Gerrit tampaknya merujuk pada "Desain Material 2", yang mungkin merupakan versi baru dan lebih baik dari bahasa Desain Material Google.

Desain Material, bahasa desain terpadu yang diluncurkan bersamaan dengan Android Lollipop, menampilkan palet warna pastel yang datar, kedalaman, pencahayaan lembut, dan fisika realistis. Ini dimaksudkan untuk meniru sentuhan objek dunia nyata tanpa menggunakan skeuomorfisme; Google menggambarkannya sebagai sintesis "prinsip klasik" dengan "inovasi dan kemungkinan" teknologi.

Sejak debut Material Design pada tahun 2014, Material Design menyebar ke seluruh ekosistem Android dengan cepat—belum lagi aplikasi Google seperti YouTube, Chrome, Gmail, Hangouts, dan Google Kalender. Tombol aksi mengambang, warna menyenangkan, dan teknik elevasi telah tersedia sebagai bagian dari Perpustakaan Komponen Material di GitHub (tindak lanjut dari Design Support Library Android dan Material Design Lite milik Google yang berfokus pada web), yang menghadirkan Material kebaikan untuk Android dalam bentuk tampilan kustom, dan untuk web dalam bentuk bundel yang dapat diimpor dan digunakan seperti HTML standar tag.

Kini, menjelang ulang tahun keempat Desain Material, Google tampaknya sedang mempersiapkan generasi berikutnya terinspirasi dari kertas dan tinta estetis: Desain Bahan 2. Sedikit informasi berharga yang tersedia untuk umum tentang Desain Material 2, yang keberadaannya kami temukan minggu ini dalam komitmen baru di Chromium Gerrit. Kami tidak membuat klaim bahwa itu a sesuai penerus kerangka Desain Material terbaru, namun komitmennya menunjukkan perubahan yang nyata, meski tidak kentara, dalam palet warna, ikonografi, dan perilaku layar sentuh.


Desain Material 2 Muncul di Chromium Gerrit

Pada awal Februari, komitmen baru pada Chromium Gerrit menerapkan UI "Desain Material 2" di Chrome tabstrip—tab yang dapat diseret berisi judul halaman web, favicon, dan tombol "tutup tab" di atas Chrome bilah alamat.

Komitnya tidak drastis, tetapi membuat perubahan pada tampilan tab Chrome. Mereka menambah tinggi tabstrip; membuat penyesuaian yang tidak ditentukan pada tata letak konten tab, khususnya pada judul dan indikator peringatan; dan mengurangi lebar sentuhan tab sekaligus menambah lebar standar tab. Mereka secara eksplisit jangan memodifikasi warna indikator peringatan tab, warna pemisah tab, tombol "tab baru", atau tipografi tab apa pun.

Kumpulan tab Chrome.

Terungkap, komitmen tersebut mengacu pada ikon tombol tutup tab "Desain Material 2" dan "konstanta warna dasar yang diperlukan untuk Google Material Design 2".

Menggali lebih dalam kode penerapan menunjukkan palet warna "Desain Material 2" baru untuk tema Chromium abu-abu, merah, dan merah-gelap, serta warna baru untuk bilah alat Chrome standar dan bilah alat penyamaran. Kami menggunakan tabel pencarian heksadesimal untuk menghasilkan contoh RGB:

Warna merah Desain Material 2 adalah sedikit lebih gelap daripada Desain Material saat ini Merah 800 (#C62828) dan Merah 600 (#E53935), sedangkan nuansa abu-abu baru (#3C4043, #5F6368, #BDC1C6, #F1F3F4) memiliki warna lebih terang dan kebiruan. Desain material menampilkan warna abu-abu tradisional, dengan R=G=B, sedangkan di sini, B>G>R di setiap warna (tetapi hanya 1-4 dari 255).

Versi Chrome yang mendukung Desain Material 2 juga akan menampilkan bilah alat yang jauh lebih terang dibandingkan versi saat ini—warnanya hampir putih dibandingkan dengan skema warna keabu-abuan saat ini.

Berikut mockup singkat tampilan toolbar dengan warna baru yang diterapkan:

Terakhir, komit menambahkan yang baru IsTouchOptimizedMaterial() bendera ke Pengontrol Desain Material, yang mungkin mengacu pada elemen Desain Material 2 yang dioptimalkan untuk sentuhan. Kami menulis pada awal Januari tentang upaya Google untuk meningkatkan Dukungan layar sentuh browser web Chrome pada perangkat Chrome OS, dan tampaknya merupakan kelanjutannya.

Misalnya, penerapan menunjukkan bahwa pada perangkat layar sentuh, SetStackedLayout Chrome akan menjadi 'selalu diaktifkan.' Secara default, saat Anda membuka banyak tab, lebar tab lainnya akan menyusut untuk mengakomodasi tab baru. Tata letak bertumpuk Chrome mempertahankan lebar tab asli, dan menambahkan tab baru di belakangnya.


Pentingnya Warna dalam Desain Material

Jadi apa arti warna baru dalam konteks Desain Material yang lebih luas?

Desain Material lebih dari sekedar lapisan, komponen, dan elemen, serta bagaimana mereka berperilaku dalam hubungannya satu sama lain. Inti dari motif desain Google adalah tema dengan kontras tinggi, warna cerah, dan highlight yang berani -- itulah yang membuat aplikasi yang sesuai dengan Desain Material menonjol dari aplikasi lainnya.

Google menyediakan contoh palet warna dirancang untuk "bekerja sama dengan baik" di seluruh platform, dan mendorong pengembang yang memanfaatkan sumber daya warna aplikasi utama -- atau dikenal sebagai warna "dominan" -- dari 500 koleksi berbeda contoh. (Pikirkan "biru", "hijau", atau "ungu", dan warna dasar lainnya.) Jika diperlukan, warna tersebut akan menghasilkan warna sekunder dari koleksi 700 warna yang diperluas. (warna komplementer untuk elemen UI yang paling penting, dan analog untuk elemen UI yang kurang penting, dan warna tersier dari subkumpulan 300).

Warna memainkan peranan penting dalam hierarki Desain Material. Warna cerah menunjukkan pentingnya -- warna tersebut disediakan untuk tombol yang menonjol dan elemen interaktif lainnya. Sebaliknya, warna yang lebih halus menambah daya tarik visual dengan memberi aksen pada bidang teks, bilah kemajuan, tautan, dan bagian lain dari UI.

Dari apa yang kita ketahui tentang palet warna Material Design 2, setidaknya beberapa contoh di "500 utama" Google, seperti Red 600 dan 800, lebih gelap dibandingkan pendahulunya Material Design. Namun yang lainnya, seperti abu-abu, mendapat perlakuan sebaliknya -- contoh abu-abu dan putih yang ditampilkan di mockup tab Chrome memiliki skala abu-abu yang lebih dingin dan nilai biru yang lebih tinggi.


Saat ini, hanya itu yang kami ketahui tentang Desain Material 2. Namun komitmen tersebut mungkin merupakan tanda bahwa ada sesuatu yang sedang terjadi di balik layar, dan jika hal tersebut benar, kita mungkin akan mengetahui lebih banyak hal dalam waktu dekat. Google diperkirakan akan meluncurkan Android P, versi utama Android berikutnya, segera pada bulan Maret, dan Google I/O 2018 akan dimulai pada 8 Mei. Keduanya merupakan peluang utama untuk mengungkap Material Design 2.

Pembaruan 2/4/2018: Tak lama setelah publikasi artikel ini, komitmen tersebut dijadikan pribadi, yang berpotensi berarti bahwa komitmen tersebut dimaksudkan untuk dirahasiakan. Kami akan terus memeriksa perubahan pada Chromium Gerrit, dan memperbarui artikel ini jika kami menemukannya.