Membangun antarmuka adaptif pengguna dengan kueri media preferensi

1. Sebelum memulai

Pengguna telah menunjukkan banyak preferensi di perangkat mereka akhir-akhir ini. Mereka ingin sistem operasi dan aplikasi terlihat dan terasa seperti milik mereka. Antarmuka yang dapat disesuaikan pengguna adalah antarmuka yang siap menggunakan preferensi ini untuk meningkatkan pengalaman pengguna, agar terasa lebih nyaman, agar terasa seperti milik mereka. Jika dilakukan dengan benar, pengguna mungkin tidak akan pernah tahu bahwa pengalaman pengguna sedang beradaptasi 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 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 (fullscreen | standalone | minimal UI | browser)

Berikut beberapa contoh preferensi pengguna yang segera hadir di CSS:

• Data yang dikurangi / mode ringan
• Rentang warna
• Kontras (kurang | lebih | kurangi)
• Warna (memaksa warna pengguna ke dalam halaman)
• Transparansi (aktif | dikurangi)

Pertanyaan media

CSS dan web memungkinkan adaptasi dan responsivitas melalui kueri media, 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 untuk pengguna

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

Prasyarat

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

Yang akan Anda bangun

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
• Viewport perangkat kecil dan besar untuk menawarkan pengalaman seluler dan desktop
• Berbagai jenis input seperti keyboard, pembaca layar, sentuhan, dan mouse
• Bahasa apa pun dan mode membaca/menulis

Yang akan Anda pelajari

Dalam codelab ini, Anda akan mempelajari fitur web modern untuk membantu Anda membuat formulir yang dapat beradaptasi dengan pengguna. Anda akan mempelajari cara:

• Membuat tema terang dan gelap
• Buat formulir animasi yang mudah diakses
• Formulir responsif tata letak
• Menggunakan 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 developer favorit Anda. Atau, Anda dapat membuat 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 mengerjakannya 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

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

Saat Anda siap memulai, inilah 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, jadi penting agar formulir dapat beradaptasi dengan berbagai jenis input yang dapat difasilitasi 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. Di formulir, Anda memiliki dua grup, satu untuk volume dan satu untuk notifikasi. Hal ini penting untuk pengalaman pengguna sehingga seluruh bagian dapat dilewati.

Mengatur urutan elemen

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

Interaksi keyboard

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

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

style.css

input {
  outline-offset: 5px;
}

Hal-hal yang dapat dicoba

1. Tinjau elemen HTML yang digunakan di index.html.
2. Klik halaman demo di browser Anda.
3. Tekan tombol tab dan shift+tab untuk memindahkan fokus elemen melalui 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 telah terbiasa berinteraksi dengan formulir menggunakan mouse. Coba gunakan mouse Anda pada formulir. Penggeser dan kotak centang berfungsi, tetapi Anda dapat melakukannya dengan 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 label yang jauh lebih mudah ditargetkan untuk mouse daripada kotak kecil.

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

Koneksi eksplisit ini juga meningkatkan pengalaman bagi 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. Konsep ini perlu diselidiki lebih lanjut jika Anda baru mengetahuinya.

Hal-hal yang dapat dicoba

1. Arahkan kursor ke label dan perhatikan kotak centang yang disorot.
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.

Untuk pengguna yang menavigasi formulir saat ini dengan pembaca layar di Chrome, ada jeda yang tidak perlu pada elemen <picture> (tidak khusus untuk Chrome). Pengguna dengan pembaca layar kemungkinan menggunakan pembaca layar karena gangguan penglihatan, jadi berhenti di gambar tidak akan membantu. Anda dapat menyembunyikan elemen dari pembaca layar dengan atribut.

index.html

<picture aria-hidden="true">

Sekarang, pembaca layar melewati elemen yang murni visual.

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

Hal-hal yang dapat dicoba

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

4. Tata letak adaptif

Cabang Git: layouts

Di akhir bagian ini, halaman setelan akan:

• Buat sistem penspasian dengan properti kustom dan unit relatif pengguna
• Tulis Petak CSS untuk penyesuaian dan penspasian yang fleksibel dan responsif
• Menggunakan properti logis untuk tata letak adaptif internasional
• Tulis kueri media untuk beradaptasi antara tata letak rapat dan luas

Spasi

Kunci untuk tata letak yang bagus adalah palet opsi jarak yang terbatas. Hal ini membantu konten menemukan keselarasan dan keharmonisan alami.

Properti kustom

Workshop ini didasarkan pada tujuh ukuran properti kustom.

• Letakkan kode 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 dekat dengan kata-kata yang akan digunakan orang untuk mendeskripsikan ruang. Anda juga menggunakan satuan rem secara eksklusif untuk ukuran seluruh satuan yang mudah dibaca yang beradaptasi dan memperhatikan preferensi pengguna.

Gaya halaman

Selanjutnya, Anda perlu menyetel beberapa gaya dokumen, menghapus margin dari elemen, dan menyetel 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 jarak! Tindakan ini akan memulai perjalanan luar angkasa Anda.

Tipografi

Font untuk tata letak ini adalah adaptif. Kata kunci system-ui akan menggunakan font antarmuka yang optimal sebagaimana telah ditentukan 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 kecil dan stilistik. Namun, elemen small memerlukan line-height tambahan saat teks di-wrap. Jika tidak, akan terlalu berdekatan.

Properti logis

Perhatikan padding di body menggunakan properti logis (block-start, block-end) untuk menentukan sisi. Properti logis akan digunakan secara ekstensif di sepanjang codelab ini. Seperti unit rem, beradaptasi dengan pengguna. Tata letak ini dapat diterjemahkan ke bahasa lain, dan ditetapkan ke arah penulisan dan dokumen alami yang biasa digunakan pengguna dalam bahasa aslinya. Properti logis membuka dukungan untuk hal ini hanya dengan satu definisi ruang, arah, atau perataan.

Grid dan flexbox sudah 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 relatif terhadap arah dokumen.

Dengan properti logis, Anda dapat menjangkau lebih banyak pengguna dengan lebih sedikit gaya yang perlu ditulis.

Tata Letak Petak CSS

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

Berikut screenshot Chrome DevTools yang melapisi setiap tata letak petak CSS sekaligus:

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. Selain itu, cara ini juga memiliki manfaat tambahan berupa penggunaan gap. Sebelumnya, Anda menetapkan margin: 0 pada semua elemen dengan pemilih *, yang kini penting saat Anda menggunakan gap untuk jarak. Gap tidak hanya menjadi satu tempat untuk mengelola ruang dalam penampung, tetapi juga 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));
}

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

• max-width memberikan nilai untuk algoritma tata letak yang akan digunakan saat memutuskan 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; jaga lebar kolom 35ch dan tidak kurang dari 10ch, dan masukkan item ke dalam kolom jika ada ruang, jika tidak, baris juga bisa.

2. Uji pengubahan ukuran browser. Lihat saat formulir diciutkan menjadi baris di area tampilan kecil, tetapi mengalir di kolom baru jika ada ruang, beradaptasi tanpa kueri media. Strategi gaya responsif tanpa kueri media ini sangat berguna untuk tata letak yang berfokus pada komponen atau 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 ruang 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 menjadi 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 berfungsi untuk memusatkan ikon dan kotak centang dengan label dan kontrol terkaitnya. Kolom pertama template petak, var(--space-lg), membuat kolom yang lebih lebar dari ikon, sehingga elemen turunan memiliki tempat untuk dipusatkan.

Tata letak ini menunjukkan berapa banyak keputusan desain yang telah dibuat di properti kustom. Padding, celah, dan kolom semuanya diukur dalam keselarasan sistem 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 memusatkan 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 :is pseudo selector.

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

.fieldset-item <svg>

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

Tindakan ini 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 ruang 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 jarak kami.

Hal-hal yang dapat dicoba

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

Pertanyaan media

CSS berikut menyesuaikan gaya berdasarkan ukuran dan orientasi area pandang dengan maksud untuk menyesuaikan jarak atau susunan agar optimal mengingat konteks area pandang.

Catatan: CSS setiap bagian harus ditambahkan setelah pemilih yang dimodifikasinya 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 main karena ada lebih banyak ruang area tampilan. Artinya, padding dimulai dengan jumlah kecil yang ringkas, tetapi sekarang 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 tampilan dengan auto-fit, tetapi saat menguji di perangkat seluler, memutar perangkat ke lanskap tidak menempatkan dua grup formulir berdampingan. Sesuaikan dengan konteks lanskap ini menggunakan kueri media orientation dan pemeriksaan lebar area pandang. Sekarang, jika perangkat dalam mode lanskap dan memiliki lebar minimal 640 piksel, paksa dua kolom dengan mengganti 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 jarak lain saat ruang area pandang yang tersedia lebih banyak. 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.

Hal-hal yang dapat dicoba

1. Perluas dan ciutkan browser Anda, dan lihat saat ruang disesuaikan.
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 dibangun berdasarkan konsep inti di CSS: calc().

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

Properti kustom

Di bagian ini, Anda akan membuat serangkaian properti kustom untuk digunakan dalam gaya lainnya. Mirip dengan setelan jarak 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 menyesuaikan diri 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 merek

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

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

1. Gunakan ketiga properti tersebut 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 kurangi saturasi warna untuk digunakan pada permukaan gelap (jika tidak, warna dapat terlihat terlalu terang atau tidak dapat diakses). Untuk mengurangi saturasi warna merek, Anda menggunakan rona dan kecerahan seperti apa adanya, tetapi mengurangi saturasi hingga setengahnya dengan beberapa pembagian: calc(var(--saturation) / 2). Sekarang warna merek Anda sudah sesuai dengan tema, tetapi tidak terlalu cerah untuk digunakan.

Teks

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

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

2. Setelah menambahkan kode ke project, buka Chrome Developer Tools dan pelajari cara mengubah nilai saluran ini. Rasakan bagaimana HSL dan salurannya berinteraksi satu sama lain. Mungkin selera Anda menginginkan 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%);
}

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

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

Tema terang

Dengan kumpulan warna teks dan permukaan yang sehat yang menentukan tema gelap, saatnya menyesuaikan 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 dengan baik.

Merek

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

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

Teks

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

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

Mirip dengan tema gelap yang memiliki warna teks biru muda, pada tema terang, warna teksnya adalah biru tua. Melihat 10% dan 30% sebagai nilai kecerahan untuk warna HSL akan memberi sinyal 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 memecah pola. Apa yang selama ini tampak cukup wajar dan linear kini rusak. Yang menarik adalah Anda dapat bereksperimen dengan kombinasi warna tema terang HSL langsung di sini dalam kode, dan menyesuaikan kecerahan dan 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 primer halaman adalah warna permukaan dan teks pertama yang Anda buat, yang juga menempatkan jumlah kontras default pada maksimumnya. Pengalihan terang dan gelap dapat mulai diuji.

<fieldset>

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

Ini adalah elemen seperti kartu dalam desain Anda. Batas 1 piksel dan celah 1 piksel memiliki warna yang sama dan merepresentasikan permukaan di belakang setiap .fieldset-item. Cara ini menciptakan harmoni visual yang bagus dan mudah dipertahankan.

.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 saling berpadu.

.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 yang terisi dan sedikit lebih terang daripada teks akan mencegahnya terasa 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 berinteraksi dan menargetkan SVG untuk menandainya dengan aksen merek Anda. Hal ini memberikan masukan UX yang bagus dari formulir, di mana berinteraksi dengan input akan menandai ikonografi yang relevan.

<small>

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

Ini adalah teks 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 memberi kita 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 di sistem operasi untuk gerakan tidak menawarkan nilai tanpa animasi. Opsinya adalah mengurangi gerakan. Animasi crossfade, transisi warna, dan lainnya masih diinginkan oleh pengguna yang lebih memilih gerakan yang dikurangi.

Di halaman setelan ini, tidak banyak gerakan dalam hal perpindahan di seluruh layar. Gerakannya lebih seperti efek skala, seolah-olah elemen bergerak ke arah pengguna. Menyesuaikan kode CSS untuk mengakomodasi gerakan yang dikurangi sangatlah mudah sehingga Anda dapat 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, membantu pengguna berfokus saat grup formulir kontekstual dibawa ke arah 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 berubah menjadi warna permukaan yang disorot, fitur antarmuka pendukung lainnya untuk membantu menarik perhatian pengguna dan menandakan bahwa input sedang diterima. Transisi warna tidak perlu dikurangi dalam sebagian besar kasus.

.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 gerakan yang dikurangi. 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 sudah selesai.

7. Selamat

Cabang Git: complete

Selamat, Anda telah berhasil membuat antarmuka yang adaptif terhadap pengguna.

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