Membangun antarmuka adaptif pengguna dengan kueri media preferensi

1. Sebelum memulai

Saat ini, pengguna telah menunjukkan banyak preferensi di perangkat mereka. Mereka ingin sistem operasi dan aplikasi terlihat dan terasa seperti milik mereka. Antarmuka adaptif pengguna adalah antarmuka yang siap menggunakan preferensi ini untuk meningkatkan pengalaman pengguna, membuatnya terasa lebih nyaman, dan membuatnya terasa seperti milik mereka. Jika dilakukan dengan benar, pengguna mungkin tidak akan pernah tahu bahwa pengalaman pengguna sedang atau telah beradaptasi.

Preferensi pengguna

Pilihan hardware perangkat adalah preferensi, sistem operasi adalah pilihan, warna aplikasi dan sistem operasi adalah preferensi, serta bahasa dokumen aplikasi dan sistem operasi adalah preferensi. Jumlah preferensi yang dimiliki pengguna tampaknya terus bertambah. Halaman web tidak dapat mengakses semuanya dan dengan alasan yang baik.

Berikut beberapa contoh preferensi pengguna yang dapat digunakan oleh CSS:

• Ukuran area pandang perangkat
• Orientasi perangkat (potret | lanskap)
• Ukuran font
• Online / offline
• Kualitas jaringan
• Skema warna (terang | gelap)
• Animasi antarmuka (aktif | dikurangi)
• Kualitas input (mouse | sentuh | stilus)
• Arah dokumen dan mode penulisan (kiri ke kanan, atas ke bawah, dan lainnya)
• Mode tampilan (layar penuh | mandiri | UI minimal | browser)

Berikut beberapa contoh preferensi pengguna yang segera hadir di CSS:

• Mode data yang dikurangi / mode ringan
• Rentang warna
• Kontras (kurangi | tambah | kurangi)
• Warna (memaksa warna pengguna ke halaman)
• Transparansi (aktif | dikurangi)

Kueri media

CSS dan web memungkinkan adaptasi dan responsivitas melalui kueri media, yaitu kondisi deklaratif yang berisi serangkaian gaya jika kondisi tersebut benar. Yang paling umum adalah kondisi pada ukuran area pandang perangkat: jika ukurannya kurang dari 800 piksel, berikut beberapa gaya yang lebih baik untuk kasus tersebut.

Adaptif terhadap pengguna

Antarmuka yang tidak adaptif adalah antarmuka yang tidak mengubah apa pun saat pengguna mengunjunginya, yang pada dasarnya memberikan satu pengalaman kepada semua orang tanpa kemampuan untuk menyesuaikan. Antarmuka adaptif pengguna dapat memiliki lima tampilan dan gaya yang berbeda untuk lima pengguna yang berbeda. Fungsinya sama, tetapi estetika dan kegunaan antarmuka dianggap lebih baik bagi pengguna yang dapat menyesuaikan UI.

Prasyarat

• Pengetahuan tentang HTML dan CSS
• Pengetahuan tentang alat developer, seperti Google Chrome Developer Tools

Yang akan Anda build

Dalam codelab ini, Anda akan membuat formulir adaptif pengguna yang beradaptasi dengan hal berikut:

• Preferensi skema warna sistem dengan menawarkan skema warna terang dan gelap untuk kontrol formulir dan elemen UI di sekitarnya
• Preferensi gerakan sistem dengan menawarkan beberapa jenis animasi
• Area pandang perangkat kecil dan besar untuk menawarkan pengalaman seluler dan desktop
• Berbagai jenis input seperti keyboard, pembaca layar, sentuh, dan mouse
• Bahasa apa pun dan mode baca/tulis

Yang akan Anda pelajari

Dalam codelab ini, Anda akan mempelajari fitur web modern untuk membantu Anda membuat formulir yang adaptif terhadap pengguna. Anda akan mempelajari cara:

• Membuat tema terang dan gelap
• Membuat formulir yang mudah diakses dan beranimasi
• Formulir responsif Layout
• Gunakan unit relatif dan properti logis

Codelab ini berfokus pada antarmuka adaptif pengguna. Konsep dan blok kode yang tidak relevan akan dibahas sekilas dan disediakan, jadi Anda cukup menyalin dan menempelkannya.

Yang Anda butuhkan

• Google Chrome 89 dan yang lebih baru, atau browser pilihan Anda

2. Memulai persiapan

Mendapatkan kode

Semua yang Anda perlukan untuk project ini ada di repositori GitHub. Untuk memulai, Anda harus mengambil kode dan membukanya di lingkungan pengembangan favorit Anda. Atau, Anda dapat melakukan fork Codepen ini dan mengerjakannya dari sana.

Direkomendasikan: Gunakan Codepen

1. Buka tab browser baru.
2. Buka https://codepen.io/argyleink/pen/abBMeeq.
3. Jika Anda belum memiliki akun, buat akun untuk menyimpan pekerjaan.
4. Klik Fork.

Alternatif: Bekerja secara lokal

Jika ingin mendownload kode dan bekerja secara lokal, Anda harus memiliki Node.js versi 12 atau yang lebih tinggi, serta editor kode yang telah disiapkan dan siap digunakan.

Menggunakan Git

1. Buka https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
2. Buat clone repositori ke folder.
3. Perhatikan bahwa cabang default-nya adalah beginning.

Menggunakan file

Download kode sumber

1. Ekstrak file ZIP yang didownload ke folder.

Menjalankan project

Gunakan direktori project yang dibuat di salah satu langkah di atas, lalu:

1. Jalankan npm install untuk menginstal dependensi yang diperlukan untuk menjalankan server.
2. Jalankan npm start untuk memulai server di port 3000.
3. Buka tab browser baru.
4. Buka http://localhost:3000.

Tentang HTML

Materi ini akan membahas aspek HTML yang digunakan untuk mendukung interaktivitas adaptif pengguna. Workshop ini memiliki fokus khusus pada CSS. HTML yang disediakan perlu ditinjau jika Anda baru membuat formulir atau situs. Pilihan elemen HTML dapat menjadi sangat penting dalam hal aksesibilitas dan tata letak.

Saat Anda siap memulai, ini adalah kerangka yang akan Anda ubah menjadi pengalaman pengguna yang dinamis dan adaptif.

3. Interaksi adaptif

Cabang Git: beginning

Di akhir bagian ini, formulir setelan Anda akan beradaptasi dengan:

• Gamepad + keyboard
• Mouse + sentuh
• Pembaca layar atau teknologi pendukung serupa

Atribut untuk HTML

HTML yang disediakan dalam kode sumber adalah titik awal yang bagus karena elemen semantik untuk membantu mengelompokkan, mengurutkan, dan memberi label pada input formulir Anda telah dipilih.

Formulir sering kali menjadi titik interaksi utama bagi bisnis, sehingga formulir harus dapat beradaptasi dengan berbagai jenis input yang dapat difasilitasi oleh web. Misalnya, penting untuk memiliki formulir yang dapat digunakan di perangkat seluler dengan sentuhan. Di bagian ini, sebelum tata letak dan gaya, Anda memastikan kegunaan input adaptif.

Mengelompokkan input

Elemen <fieldset> di HTML digunakan untuk mengelompokkan input dan kontrol yang serupa. Dalam formulir, Anda memiliki dua grup, satu untuk volume dan satu untuk notifikasi. Hal ini penting untuk pengalaman pengguna sehingga seluruh bagian dapat dilewati.

Mengurutkan elemen

Urutan elemen diberikan dalam urutan yang logis. Hal ini penting untuk pengalaman pengguna agar urutan pengalaman visual sama atau serupa untuk teknologi gamepad, keyboard, atau pembaca layar.

Interaksi keyboard

Pengguna web sudah terbiasa berpindah-pindah formulir dengan tombol tab, yang untungnya ditangani oleh browser jika Anda menyediakan elemen HTML yang diharapkan. Penggunaan elemen seperti <button>, <input>, <h2>, dan <label> akan otomatis menjadi tujuan keyboard atau pembaca layar.

Video di atas menunjukkan cara tombol tab dan panah dapat berpindah di antarmuka dan membuat perubahan. Namun, garis batas biru sangat rapat di sekitar elemen input, tambahkan gaya berikut untuk membuat interaksi ini memiliki sedikit ruang.

style.css

input {
  outline-offset: 5px;
}

Untuk dicoba

1. Tinjau elemen HTML yang digunakan di index.html.
2. Klik halaman demo di browser Anda.
3. Tekan tombol tab dan tombol shift+tab untuk memindahkan fokus elemen di seluruh formulir.
4. Gunakan keyboard untuk mengubah nilai penggeser dan kotak centang.
5. Hubungkan pengontrol gamepad Bluetooth dan pindahkan fokus elemen melalui formulir.

Interaksi mouse

Pengguna web sudah terbiasa berinteraksi dengan formulir menggunakan mouse. Coba gunakan mouse Anda pada formulir. Penggeser dan kotak centang berfungsi, tetapi Anda dapat melakukan yang lebih baik. Kotak centang tersebut cukup kecil untuk diklik dengan mouse.

Lihat bagaimana Anda mendapatkan dua fitur pengalaman pengguna untuk menghubungkan label dan inputnya?

Fitur pertama adalah memiliki opsi untuk berinteraksi dan labelnya jauh lebih mudah ditargetkan untuk mouse daripada kotak kecil.

Fitur kedua adalah mengetahui dengan tepat input yang dimaksud oleh label. Tanpa CSS, saat ini cukup sulit untuk menentukan label mana yang sesuai dengan kotak centang mana, kecuali jika Anda memberikan beberapa atribut.

Koneksi eksplisit ini juga meningkatkan pengalaman untuk pembaca layar, yang dibahas di bagian berikutnya.

Tidak terkait: tidak ada atribut yang menghubungkan elemen

<input type="checkbox">
<label>...</label>

Terkait: atribut yang menghubungkan elemen

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

HTML yang diberikan telah mengatribusikan semua input dan label. Hal ini perlu diselidiki lebih lanjut jika ini adalah konsep baru bagi Anda.

Untuk dicoba

1. Arahkan kursor ke label dengan mouse dan perhatikan kotak centang yang ditandai.
2. Selidiki elemen label dengan Chrome Developer Tools untuk memvisualisasikan area permukaan yang dapat diklik yang dapat memilih kotak centang.

Interaksi pembaca layar

Teknologi pendukung dapat berinteraksi dengan formulir ini dan, dengan beberapa atribut HTML, dapat membuat pengalaman pengguna lebih lancar.

Bagi pengguna yang menjelajahi formulir saat ini dengan pembaca layar di Chrome, ada perhentian yang tidak perlu di elemen <picture> (tidak khusus untuk Chrome). Pengguna dengan pembaca layar kemungkinan menggunakan pembaca layar karena disabilitas penglihatan, sehingga berhenti pada gambar tidak akan membantu. Anda dapat menyembunyikan elemen dari pembaca layar dengan atribut.

index.html

<picture aria-hidden="true">

Sekarang pembaca layar akan melewati elemen yang murni visual.

Elemen penggeser input[type="range"] memiliki atribut ARIA khusus: aria-labelledby="media-volume". Tindakan ini memberikan petunjuk khusus untuk digunakan pembaca layar guna meningkatkan pengalaman pengguna.

Untuk dicoba

1. Gunakan teknologi pembaca layar sistem operasi Anda untuk memindahkan fokus di seluruh formulir.
2. Download dan coba beberapa software pembaca layar pada formulir.

4. Tata letak adaptif

Cabang Git: layouts

Di akhir bagian ini, halaman setelan akan:

• Buat sistem spasi dengan properti kustom dan unit relatif pengguna
• Menulis CSS Grid untuk perataan dan spasi yang fleksibel dan responsif
• Gunakan properti logis untuk tata letak adaptif internasional
• Menulis kueri media untuk beradaptasi antara tata letak rapat dan luas

Penspasian

Kunci tata letak yang bagus adalah palet opsi spasi yang terbatas. Hal ini membantu konten menemukan keselarasan dan harmoni yang alami.

Properti kustom

Workshop ini dibuat berdasarkan serangkaian tujuh ukuran properti kustom.

• Letakkan ini di bagian atas style.css:

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

Penamaannya mirip dengan kata-kata yang digunakan orang-orang untuk mendeskripsikan ruang. Anda juga menggunakan unit rem secara eksklusif untuk ukuran unit keseluruhan yang dapat dibaca, yang beradaptasi dan memperhatikan preferensi pengguna.

Gaya halaman

Selanjutnya, Anda perlu menetapkan beberapa gaya dokumen, menghapus margin dari elemen, dan menetapkan font ke sans-serif yang bagus.

• Tambahkan kode berikut ke style.css:

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

Itulah penggunaan pertama Anda untuk properti kustom spasi. Ini memulai perjalanan luar angkasa Anda.

Tipografi

Font untuk tata letak ini bersifat adaptif. Kata kunci system-ui akan menggunakan font antarmuka yang dianggap optimal oleh sistem operasi pengguna.

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

Gaya untuk h1, h2, dan h3 bersifat minor dan gaya. Namun, elemen small memerlukan line-height tambahan saat teks digabungkan. Jika tidak, teks akan terlalu rapat.

Properti logis

Perhatikan bahwa padding di body menggunakan properti logis (block-start, block-end) untuk menentukan sisi. Properti logis akan digunakan secara ekstensif di seluruh codelab ini. Sama seperti unit rem, unit ini juga beradaptasi dengan pengguna. Tata letak ini dapat diterjemahkan ke bahasa lain, dan disesuaikan dengan arah penulisan dan dokumen alami yang biasa digunakan pengguna dalam bahasa ibu mereka. Properti logis memungkinkan dukungan untuk hal ini hanya dengan satu definisi ruang, arah, atau perataan.

Grid dan flexbox sudah bersifat relatif terhadap alur, yang berarti gaya yang ditulis untuk satu bahasa akan bersifat kontekstual dan diterapkan dengan tepat untuk bahasa lain. Arah adaptif; konten mengalir sesuai dengan arah dokumen.

Properti logis memungkinkan Anda menjangkau lebih banyak pengguna dengan lebih sedikit gaya yang harus ditulis.

Tata Letak Petak CSS

Properti CSS grid adalah alat tata letak yang canggih dengan banyak fitur untuk menangani tugas yang kompleks. Anda akan membuat beberapa tata letak petak sederhana dan satu tata letak yang kompleks. Anda juga akan bekerja dari luar ke dalam, dari tata letak makro ke tata letak mikro. Properti kustom spasi Anda akan menjadi penting, tidak hanya sebagai nilai padding atau margin, tetapi juga ukuran kolom, radius batas, dan lainnya.

Berikut screenshot Chrome DevTools yang menempatkan setiap tata letak petak CSS secara bersamaan:

1. Ikuti dengan menambahkan setiap gaya berikut ke style.css:

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

Secara default, petak menempatkan setiap elemen turunan ke dalam barisnya sendiri, sehingga sangat cocok untuk menumpuk elemen. Solusi ini juga memiliki manfaat tambahan dari penggunaan gap. Sebelumnya, Anda menetapkan margin: 0 pada semua elemen dengan pemilih *, yang kini penting karena Anda menggunakan gap untuk pengaturan jarak. Gap bukan hanya satu tempat untuk mengelola ruang dalam penampung, tetapi alurnya relatif.

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

Ini adalah tata letak petak yang paling rumit dalam desain, tetapi memperhitungkan aspek responsif yang paling menarik:

• max-width memberikan nilai untuk digunakan algoritma tata letak saat menentukan seberapa besar ukurannya.
• gap menggunakan properti kustom dan meneruskan row-gap yang berbeda dari column-gap.
• align-items ditetapkan ke flex-start agar tidak meregangkan tinggi item.
• grid-template-columns memiliki beberapa sintaksis yang kompleks, tetapi tujuannya ringkas; pertahankan lebar kolom 35ch dan jangan pernah kurang dari 10ch, dan masukkan item ke dalam kolom jika ada ruang, jika tidak, baris sudah cukup.

2. Uji pengubahan ukuran browser. Perhatikan bagaimana formulir diciutkan menjadi baris di area pandang kecil, tetapi mengalir di kolom baru jika ada ruang, beradaptasi tanpa kueri media. Strategi gaya responsif bebas kueri media ini sangat berguna untuk komponen atau tata letak yang berfokus pada konten.

<section>

section {
  display: grid;
  gap: var(--space-md);
}

Setiap bagian harus berupa petak baris dengan ruang sedang di antara elemen turunan.

<header>

header {
  display: grid;
  gap: var(--space-xxs);
}

Setiap header harus berupa petak baris dengan jarak ekstra ekstra kecil di antara elemen turunan.

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

Tata letak ini bertanggung jawab untuk membuat tampilan seperti kartu dan mengelompokkan input. overflow: hidden dan gap: 1px akan terlihat jelas saat Anda menambahkan warna di bagian berikutnya.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

Tata letak ini bertanggung jawab untuk memosisikan ikon dan kotak centang di tengah dengan label dan kontrol terkaitnya. Kolom pertama template petak, var(--space-lg), membuat kolom yang lebih lebar daripada ikon, sehingga elemen turunan memiliki tempat untuk dipusatkan.

Tata letak ini menunjukkan banyaknya keputusan desain yang telah dibuat di properti kustom. Padding, celah, dan kolom semuanya diukur dalam harmoni sistem dengan menggunakan nilai yang telah Anda tentukan.

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

Tata letak ini bertanggung jawab atas setelan, ukuran lingkaran ikon, pembuatan bentuk lingkaran, dan pemusatan gambar di dalamnya.

<picture> & [checkbox] alignment

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

Tata letak ini mengisolasi pemusatan ke elemen gambar dan kotak centang menggunakan pemilih semu :is.

3. Ganti pemilih picture > svg dengan .fieldset-item svg seperti ini:

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

Tindakan ini akan menetapkan ukuran ikon svg ke nilai dari sistem ukuran.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

Class utilitas ini ditujukan untuk elemen label kotak centang guna memberi jarak pada teks bantuan untuk kotak centang.

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

Gaya ini meningkatkan ukuran kotak centang menggunakan nilai dari set spasi kami.

Untuk dicoba

1. Buka Chrome Developer Tools dan temukan badge Grid pada HTML di panel Elements. Klik untuk mengaktifkan alat debug.
2. Buka Chrome Developer Tools dan arahkan kursor ke gap di panel Styles.
3. Buka Chrome Developer Tools, buka panel Styles, lalu beralih dari Styles ke Layouts. Jelajahi area ini dengan mengaktifkan setelannya dan mengaktifkan tata letak.

Kueri media

CSS berikut menyesuaikan gaya berdasarkan ukuran dan orientasi area pandang dengan tujuan menyesuaikan spasi atau pengaturan agar optimal sesuai konteks area pandang.

Catatan: CSS setiap bagian harus ditambahkan setelah pemilih yang diubahnya di style.css.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

Kedua kueri media ini memberikan lebih banyak padding ke main seiring bertambahnya ruang area pandang yang tersedia. Artinya, padding dimulai dalam jumlah yang ringkas dan kecil, tetapi kini menjadi semakin luas seiring tersedianya lebih banyak ruang.

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

Formulir sudah responsif terhadap ukuran area pandang dengan auto-fit, tetapi saat diuji di perangkat seluler, memutar perangkat ke mode lanskap tidak menempatkan kedua grup formulir secara berdampingan. Sesuaikan dengan konteks lanskap ini menggunakan kueri media orientation dan pemeriksaan lebar area pandang. Sekarang, jika perangkat dalam mode lanskap dan lebarnya minimal 640 piksel, paksa dua kolom dengan mengalihkan properti kustom --repeat ke angka, bukan kata kunci auto-fit.

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

Kueri media ini adalah perluasan spasi lainnya saat lebih banyak ruang area pandang tersedia. Template petak memperluas kolom pertama dengan menggunakan properti kustom yang lebih besar (var(--space-xxl)) dalam template. Padding juga ditingkatkan ke properti kustom yang lebih besar.

Untuk dicoba

1. Perluas dan perkecil browser Anda, lalu lihat bagaimana ruang menyesuaikan.
2. Melihat pratinjau di perangkat seluler
3. Melihat pratinjau di perangkat seluler dalam mode lanskap

5. Warna adaptif

Cabang Git: colors

Di akhir bagian ini, formulir setelan Anda akan:

• Beradaptasi dengan preferensi warna gelap dan terang
• Memiliki skema warna yang berasal dari hex merek
• Memiliki warna yang aksesibel

HSL

Di bagian berikutnya, Anda akan membuat sistem warna dengan HSL untuk membantu Anda membuat tema terang dan gelap. Fitur ini dibuat berdasarkan konsep inti dalam CSS: calc().

HSL adalah singkatan dari hue, saturation, dan lightness. Hue adalah sudut, seperti titik pada jam, sedangkan saturasi dan kecerahan adalah persentase. calc() dapat melakukan penghitungan matematika pada persentase dan sudut. Anda dapat melakukan penghitungan kecerahan dan saturasi pada persentase tersebut di CSS. Gabungkan penghitungan saluran warna dengan properti kustom, dan Anda akan mendapatkan skema warna modern dan dinamis dengan varian yang dihitung dari warna dasar, sehingga Anda tidak perlu mengelola banyak warna dalam kode.

Properti kustom

Di bagian ini, Anda akan membuat kumpulan properti kustom untuk digunakan dalam gaya lainnya. Sama seperti set spasi yang Anda buat sebelumnya di tag :root, Anda akan menambahkan warna.

Asumsikan warna merek untuk aplikasi Anda adalah #0af. Tugas pertama Anda adalah mengonversi nilai warna heksadesimal ini menjadi nilai warna HSL: hsl(200 100% 50%). Konversi ini menampilkan saluran warna merek Anda dalam HSL, yang dapat Anda gunakan calc() untuk menghitung berbagai warna merek pendukung.

Catatan: Aplikasi ini lebih memilih skema warna gelap, kemudian beradaptasi dengan tema terang. Hal ini penting karena saat Anda membuat skema warna pertama, skema tersebut akan menjadi tema gelap.

Setiap blok kode berikut di bagian ini harus ditambahkan ke pemilih :root yang sama.

Channel korporat

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

Tiga saluran HSL telah diekstrak dan ditempatkan ke dalam properti kustomnya sendiri.

1. Gunakan ketiga properti apa adanya dan buat ulang warna merek.

Merek

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

Karena skema warna Anda gelap secara default, sebaiknya desaturasi warna untuk digunakan pada permukaan gelap (jika tidak, warna tersebut dapat bergetar di mata atau tidak dapat diakses). Untuk mendesaturasi warna merek, Anda menggunakan hue dan lightness apa adanya, tetapi mengurangi saturasi menjadi setengahnya dengan beberapa pembagian: calc(var(--saturation) / 2). Sekarang warna merek Anda sudah sesuai dengan tema, tetapi didesaturasi untuk digunakan.

Teks

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

Untuk teks bacaan dalam tema gelap, Anda menggunakan hue merek sebagai dasar, tetapi membuat warna yang hampir putih darinya. Banyak pengguna akan mengira teksnya berwarna putih, padahal sebenarnya berwarna biru sangat muda. Mempertahankan hue adalah cara yang efektif untuk menciptakan harmoni desain. --text1 memiliki 85% putih dan --text2 memiliki 65% putih, dan keduanya memiliki saturasi yang sangat sedikit.

2. Setelah menambahkan kode ke project Anda, buka Chrome Developer Tools dan pelajari cara mengubah nilai saluran ini. Rasakan bagaimana HSL dan salurannya berinteraksi satu sama lain. Mungkin Anda lebih menyukai saturasi yang lebih tinggi atau lebih rendah.

Platform

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

Teksnya sangat terang karena permukaan akan menjadi gelap dalam mode gelap. Jika warna teks menggunakan nilai kecerahan tinggi (85% ke atas), permukaan akan menggunakan nilai yang lebih rendah (30% ke bawah). Memiliki rentang yang sehat antara rentang kecerahan antara permukaan dan teks akan membantu memastikan warna yang mudah diakses untuk dibaca pengguna.

3. Perhatikan bagaimana warna dimulai dari abu-abu paling gelap dengan kecerahan 10% dan saturasi 10%, lalu desaturasi saat menjadi lebih terang. Setiap permukaan baru 5% lebih ringan dari permukaan sebelumnya. Saturasi juga sedikit diturunkan di permukaan yang lebih terang. Coba atur semua permukaan Anda ke saturasi 10%. Apakah Anda lebih menyukainya atau tidak?

Tema terang

Dengan kumpulan warna teks dan platform yang baik yang menentukan tema gelap, saatnya menyesuaikan dengan preferensi tema terang dengan memperbarui properti kustom warna di dalam kueri media prefers-color-scheme.

Anda akan menggunakan teknik yang sama untuk mempertahankan perbedaan besar dalam nilai kecerahan antara warna permukaan dan teks agar warna tetap kontras.

Merek

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

Pertama adalah warna merek. Saturasi perlu dipulihkan ke kekuatan penuhnya.

Teks

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

Sama seperti tema gelap yang memiliki warna teks biru sangat terang, dalam tema terang, warna teksnya adalah biru sangat gelap. Melihat 10% dan 30% sebagai nilai kecerahan untuk warna HSL akan memberi tahu Anda bahwa warna ini gelap.

Permukaan

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

Warna permukaan ini adalah yang pertama melanggar pola. Apa yang sejauh ini tampak cukup masuk akal dan linear kini rusak. Hal yang menarik adalah Anda dapat mencoba kombinasi warna tema terang HSL langsung di sini dalam kode, dan menyesuaikan kecerahan serta saturasi untuk membuat skema warna terang yang bagus dan tidak terlalu dingin atau biru.

Menggunakan sistem warna

Setelah warna ditentukan, kini saatnya menggunakannya. Anda memiliki warna merek aksen yang menarik, dua warna teks, dan empat warna permukaan.

• Untuk bagian kode berikut, temukan pemilih yang cocok dan tambahkan CSS warna ke blok kode yang ada.

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

Warna utama halaman adalah warna permukaan dan teks pertama yang Anda buat, yang juga menempatkan jumlah kontras default pada tingkat maksimumnya. Pengalihan terang dan gelap dapat mulai diuji.

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

Ini adalah elemen seperti kartu dari desain Anda. Batas 1 piksel dan celah 1 piksel memiliki warna yang sama dan mewakili permukaan di belakang setiap .fieldset-item. Hal ini menciptakan harmoni visual yang bagus dan mudah dikelola.

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

Setiap input formulir berada di platformnya sendiri. Semoga Anda dapat melihat bagaimana semua ini dipadukan dan bagaimana variasi kecerahan disusun bersama.

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

Ini adalah pilihan gaya untuk menampilkan bentuk lingkaran yang mengelilingi ikon. Alasannya akan terlihat jelas saat Anda menambahkan interaksi di bagian berikutnya.

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

Ikon dalam formulir ditetapkan untuk menggunakan teks alternatif --text2. Desain dengan ikon terisi yang sedikit lebih terang daripada teks akan mencegahnya terlihat terlalu berat.

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

Pemilih ini mencocokkan elemen penampung input saat salah satu input di dalamnya sedang berinteraksi dan menargetkan SVG untuk menandainya dengan aksen merek Anda. Hal ini memberikan masukan UX yang baik pada formulir, di mana interaksi dengan input akan menandai ikonografi yang relevan.

<small>

small {
  color: var(--text2);
}

Teks ini berukuran kecil. Warna ini harus sedikit lebih redup jika dibandingkan dengan header dan paragraf (konten utama).

Kontrol formulir gelap

:root {
  color-scheme: dark light;
}

Sentuhan akhir yang bagus ini memberi tahu browser bahwa halaman ini mendukung tema gelap dan terang. Browser akan menampilkan kontrol formulir gelap.

6. Animasi adaptif

Cabang Git: animations

Di akhir bagian ini, halaman setelan akan:

• Beradaptasi dengan preferensi gerakan pengguna
• Merespons interaksi pengguna

Pengurangan gerakan versus tanpa gerakan

Preferensi pengguna yang ditemukan dalam sistem operasi untuk gerakan tidak menawarkan nilai tanpa animasi. Opsi ini adalah untuk mengurangi gerakan. Animasi crossfade, transisi warna, dan lainnya masih diinginkan oleh pengguna yang lebih menyukai gerakan yang dikurangi.

Di halaman setelan ini, tidak ada banyak gerakan di layar. Gerakannya lebih merupakan efek skala, seolah-olah elemen bergerak ke arah pengguna. Sangat mudah untuk menyesuaikan kode CSS Anda guna mengakomodasi gerakan yang dikurangi sehingga Anda mengurangi transisi penskalaan.

Gaya interaksi

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

Saat pengguna berinteraksi dengan input salah satu elemen yang terlihat seperti kartu <fieldset>, efek pengangkatan akan ditambahkan. Antarmuka mendorong elemen ke depan, sehingga membantu pengguna fokus saat grup formulir kontekstual ditampilkan kepada pengguna.

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

Saat pengguna berinteraksi dengan input, latar belakang lapisan item tertentu akan berubah menjadi warna permukaan yang ditandai, fitur antarmuka pendukung lainnya untuk membantu menarik perhatian pengguna dan memberi sinyal bahwa input sedang diterima. Transisi warna biasanya tidak perlu dikurangi.

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

Berikut adalah animasi clip-path yang hanya Anda gunakan jika pengguna tidak memiliki preferensi terkait pengurangan gerakan. Pemilih dan gaya pertama membatasi jalur klip lingkaran sebesar 10% dan menetapkan beberapa parameter transisi. Pemilih dan gaya kedua menunggu pengguna berinteraksi dengan input, lalu memperbesar lingkaran ikon. Efek yang halus, tetapi rapi saat semuanya baik-baik saja.

7. Selamat

Cabang Git: complete

Selamat, Anda telah berhasil membangun antarmuka adaptif pengguna.

Sekarang Anda telah mengetahui langkah-langkah penting yang diperlukan untuk membuat antarmuka yang beradaptasi dengan berbagai skenario dan setelan pengguna.