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 adaptif pengguna adalah antarmuka yang siap menggunakan preferensi ini untuk meningkatkan pengalaman pengguna, membuatnya terasa lebih di rumah, untuk membuatnya terasa seperti milik mereka. Jika dilakukan dengan benar, pengguna mungkin tidak akan pernah tahu bahwa pengalaman pengguna beradaptasi atau telah beradaptasi.

Preferensi pengguna

Pilihan hardware perangkat adalah preferensi, sistem operasi merupakan pilihan, warna aplikasi dan sistem operasi merupakan preferensi, dan bahasa dokumen aplikasi serta sistem operasi merupakan preferensi. Jumlah preferensi yang dimiliki pengguna tampaknya meningkat. Halaman web tidak dapat mengakses semuanya dan karena alasan yang tepat.

Berikut beberapa contoh preferensi pengguna yang dapat digunakan oleh CSS:

• Ukuran Area tampilan 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 adalah beberapa contoh preferensi pengguna yang segera hadir di CSS:

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

Kueri media

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

Adaptif 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 estetikanya 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 membangun bentuk 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 tampilan perangkat kecil dan besar untuk menawarkan pengalaman seluler dan desktop
• Berbagai jenis input seperti keyboard, pembaca layar, sentuhan, dan mouse
• Bahasa apa saja dan mode baca/tulis

Yang akan Anda pelajari

Dalam codelab ini, Anda akan mempelajari fitur web modern untuk membantu Anda mem-build bentuk adaptif pengguna. Anda akan mempelajari cara:

• Membuat tema terang dan gelap
• Buat formulir yang beranimasi dan 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 melakukan fork ke Codepen ini dan melakukannya dari sana.

Direkomendasikan: Menggunakan Codepen

1. Buka tab browser baru.
2. Buka https://codepen.io/argyleink/pen/abBMeeq.
3. Jika Anda belum memiliki akun, buat akun untuk menyimpan tugas.
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 baru, serta editor kode yang sudah disiapkan dan siap digunakan.

Menggunakan Git

1. Kunjungi https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces
2. Clone repositori ke sebuah 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 ditetapkan dalam 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

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

Jika sudah siap untuk memulai, ini adalah kerangka dari apa 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 diberikan 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 penting untuk dapat beradaptasi dengan berbagai jenis input yang dapat difasilitasi web. Misalnya, sangat penting untuk memiliki formulir yang dapat digunakan pada 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 menjadi satu. Di formulir, Anda memiliki dua grup, satu untuk volume dan satu lagi untuk notifikasi. Hal ini penting untuk pengalaman pengguna sehingga seluruh bagian dapat dilewati.

Mengurutkan elemen

Urutan elemen disediakan dalam urutan yang logis. Hal ini penting bagi pengalaman pengguna sehingga urutan pengalaman visualnya sama atau mirip untuk teknologi gamepad, keyboard, atau pembaca layar.

Interaksi keyboard

Pengguna web sudah terbiasa berpindah formulir dengan tombol tab mereka, yang untungnya browser menangani jika Anda memberikan elemen HTML yang diharapkan. Menggunakan elemen seperti <button>, <input>, <h2>, dan <label> secara otomatis menjadi tujuan keyboard atau pembaca layar.

Video di atas menunjukkan bagaimana tombol tab dan panah dapat bergerak melalui antarmuka dan melakukan perubahan. Meskipun garis batas berwarna biru sangat ketat di sekitar elemen input, tambahkan gaya berikut untuk membuat interaksi ini memiliki sedikit ruang.

style.css

input {
  outline-offset: 5px;
}

Yang perlu 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 dalam 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 {i>mouse<i} mereka. Coba gunakan mouse pada formulir. Penggeser dan kotak centang berfungsi, tetapi Anda dapat melakukannya dengan lebih baik. Kotak centang tersebut cukup kecil untuk diklik mouse.

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

Fitur pertama adalah memiliki opsi interaksi dengan label dan label jauh lebih mudah ditargetkan untuk mouse daripada kotak kecil.

Fitur kedua adalah mengetahui secara pasti input label. Tanpa CSS saat ini, cukup sulit untuk menentukan label untuk kotak centang yang mana, kecuali Anda menyediakan beberapa atribut.

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

Tidak dikaitkan: tidak ada atribut yang menghubungkan elemen

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

Associated: 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. Perlu diinvestigasi lebih lanjut jika ini adalah konsep baru bagi Anda.

Yang perlu dicoba

1. Arahkan kursor ke label dengan mouse dan perhatikan kotak centang yang disorot.
2. Selidiki elemen label dengan Chrome Developer Tools untuk memvisualisasikan area platform 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 membuka formulir saat ini dengan pembaca layar di Chrome, ada penghentian yang tidak perlu pada elemen <picture> (tidak khusus untuk Chrome). Pengguna dengan {i>screen reader<i} kemungkinan besar menggunakan {i>screen reader<i} karena gangguan penglihatan, jadi berhenti melihat 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 sepenuhnya visual.

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

Yang perlu dicoba

1. Gunakan teknologi pembaca layar sistem operasi untuk memindahkan fokus dalam formulir.
2. Unduh dan coba beberapa perangkat lunak pembaca layar pada formulir.

4. Tata letak adaptif

Cabang Git: layouts

Pada akhir bagian ini, halaman setelan akan:

• Membuat sistem spasi dengan properti kustom dan unit relatif pengguna
• Tulis Petak CSS untuk perataan dan spasi yang fleksibel serta responsif
• Gunakan properti logis untuk tata letak adaptif internasional
• Menulis kueri media untuk menyesuaikan antara tata letak yang rapat dan luas

Spasi

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

Properti kustom

Workshop ini dibuat berdasarkan kumpulan 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;
}

Penamaan ini mendekati kata-kata yang akan digunakan orang-orang di antara satu sama lain untuk menggambarkan ruang. Anda juga menggunakan unit rem secara eksklusif untuk ukuran keseluruhan unit yang dapat dibaca yang beradaptasi dan memperhatikan preferensi pengguna.

Gaya halaman

Selanjutnya, Anda perlu mengatur beberapa gaya dokumen, menghapus margin dari elemen, dan mengatur {i>font<i} 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);
}

Ini adalah penggunaan pertama Anda atas properti khusus spasi. Perjalanan ruang angkasa Anda akan dimulai.

Tipografi

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

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 bergaya. Namun, elemen small memerlukan line-height tambahan saat teks digabungkan. Jika tidak, terlalu penuh.

Properti logika

Perhatikan bahwa padding pada body menggunakan properti logis (block-start, block-end) untuk menentukan sisi. Properti logis akan digunakan secara ekstensif di sepanjang codelab ini. Unit tersebut juga, seperti unit rem, beradaptasi dengan pengguna. Tata letak ini dapat diterjemahkan ke bahasa lain, dan disetel ke penulisan alami serta petunjuk dokumen yang sudah biasa digunakan pengguna dalam bahasa asli mereka. Properti logis membuka dukungan untuk hal ini hanya dengan satu definisi ruang, arah, atau perataan.

Grid dan flexbox sudah bersifat flow-relative, yang berarti gaya yang ditulis untuk satu bahasa akan bersifat kontekstual dan diterapkan dengan sesuai untuk bahasa lainnya. Orientasi adaptif; konten mengalir relatif terhadap arah dokumen.

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

Tata Letak Petak CSS

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

Berikut adalah screenshot Chrome DevTools yang menempatkan 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);
}

{i>Grid<i} secara default menempatkan setiap elemen turunan ke dalam barisnya sendiri, yang membuatnya bagus untuk menumpuk elemen. Kode ini juga memiliki manfaat tambahan dari penggunaan gap. Sebelumnya, Anda menetapkan margin: 0 pada semua elemen dengan pemilih *, yang sekarang penting saat Anda menggunakan gap untuk jarak. Kesenjangan bukan hanya satu tempat untuk mengelola ruang dalam sebuah container, tetapi juga relatif terhadap alurnya.

&lt;form&gt;

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 {i>grid<i} tersulit dari desain, tetapi memperhitungkan aspek responsif yang paling menarik:

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

2. Coba ubah ukuran browser. Lihat saat formulir diciutkan ke baris di area pandang kecil, tetapi muncul 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 {i>header<i} harus berupa kisi baris dengan spasi 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 bersama-sama. overflow: hidden dan gap: 1px 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 bertanggung jawab untuk menempatkan ikon dan kotak centang di tengah dengan label dan kontrol terkait. Kolom pertama template petak, var(--space-lg), membuat kolom lebih lebar dari ikon, sehingga elemen turunan berada di suatu tempat untuk di tengah.

Tata letak ini menunjukkan seberapa banyak keputusan desain yang telah dibuat dalam properti kustom. {i>Padding<i}, celah, dan kolom semuanya memiliki ukuran yang sesuai dengan harmoni sistem menggunakan nilai yang telah Anda tentukan.

.fieldset-item <gambar>

.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 untuk pengaturan, ukuran lingkaran ikon, membuat bentuk lingkaran, dan memusatkan gambar di dalamnya.

<gambar> & [kotak centang] perataan

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

Tata letak ini mengisolasi pemusatan ke elemen gambar dan kotak centang menggunakan pemilih pseudo :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 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 teks bantuan untuk kotak centang tersebut.

input[type=&quot;checkbox&quot;]

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

Gaya ini menambah ukuran kotak centang menggunakan nilai dari kumpulan spasi.

Yang perlu dicoba

1. Buka Chrome Developer Tools dan temukan badge Petak pada HTML di panel Elements. Klik setelan tersebut untuk mengaktifkan alat debug.
2. Buka Chrome Developer Tools dan arahkan kursor ke celah di panel Gaya.
3. Buka Chrome Developer Tools, buka panel Gaya, lalu beralihlah dari Gaya ke Tata Letak. Jelajahi area ini dengan mengalihkan pengaturannya dan mengaktifkan tata letak.

Kueri media

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

Catatan: CSS setiap bagian harus ditambahkan setelah pemilih diubah 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 memberi main padding lebih banyak karena lebih banyak ruang area pandang yang tersedia. Artinya, layar dimulai dengan padding yang ringkas dan dalam jumlah kecil, tetapi sekarang menjadi semakin luas seiring dengan lebih banyak ruang yang tersedia.

&lt;form&gt;

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 ini sudah responsif terhadap ukuran area pandang dengan auto-fit, tetapi saat menguji di perangkat seluler, mengubah perangkat ke lanskap tidak menempatkan kedua grup bentuk secara berdampingan. Beradaptasi dengan konteks lanskap ini menggunakan kueri media orientation dan pemeriksaan lebar area pandang. Sekarang, jika perangkat berformat 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 ketika tersedia lebih banyak ruang area pandang. Template petak meluaskan kolom pertama dengan menggunakan properti kustom yang lebih besar (var(--space-xxl)) dalam template. Padding ini juga dipompa ke properti kustom yang lebih besar.

Yang perlu dicoba

1. Perluas dan kontrakkan browser Anda, dan lihat saat ruangnya disesuaikan.
2. Melihat pratinjau di perangkat seluler
3. 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 heksadesimal merek
• Memiliki warna yang dapat diakses

HSL

Di bagian berikutnya, Anda akan membuat sistem warna dengan HSL untuk membantu membuat tema terang dan gelap. Class 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() bisa melakukan perhitungan pada persentase dan sudut. Anda dapat melakukan perhitungan kecerahan dan saturasi pada persentase tersebut di CSS. Gabungkan penghitungan saluran warna dengan properti kustom, dan Anda akan menggunakan skema warna modern yang dinamis dengan varian dihitung dari warna dasar, sehingga Anda tidak perlu mengelola beberapa warna dalam kode.

Properti kustom

Di bagian ini, Anda membangun kumpulan properti khusus untuk digunakan dalam gaya Anda yang lain. Serupa dengan 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 menunjukkan saluran warna merek Anda dalam HSL, yang dapat digunakan calc() untuk menghitung berbagai warna merek pendukung.

Catatan: Aplikasi ini lebih memilih skema warna gelap, lalu akan menyesuaikannya dengan tema terang. Hal ini penting saat Anda membangun skema warna pertama, yang 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%;
}

Ketiga saluran HSL telah diekstrak dan ditempatkan ke dalam properti kustomnya masing-masing.

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

Merek

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

Karena skema warna Anda secara default gelap, sebaiknya kurangi saturasi warna untuk digunakan di permukaan gelap (warna tersebut dapat bergetar di mata atau tidak dapat diakses). Untuk menurunkan saturasi warna merek, Anda menggunakan hue dan kecerahan sebagaimana adanya, tetapi memotong saturasi menjadi dua dengan beberapa pembagian: calc(var(--saturation) / 2). Sekarang warna merek Anda sudah sesuai dengan tema, tetapi berkurang saturasinya 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 berpikir teks berwarna putih, padahal sebenarnya berwarna biru sangat muda. Tetap dalam rona warna adalah cara yang kuat untuk menciptakan keselarasan desain. --text1 adalah 85% putih dan --text2 adalah 65% putih, dan keduanya memiliki saturasi yang sangat sedikit.

2. Setelah menambahkan kode ke project Anda, buka Developer Tools Chrome dan pelajari cara mengubah nilai saluran ini. Rasakan bagaimana HSL dan salurannya saling berinteraksi. Mungkin selera Anda menginginkan lebih banyak atau lebih sedikit saturasi.

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 mudah diakses oleh pengguna untuk dibaca.

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

Tema terang

Dengan serangkaian warna teks dan warna permukaan yang sehat yang menentukan tema gelap, kini saatnya beradaptasi 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 permukaan dan warna teks agar warna tetap kontras dengan baik.

Merek

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

Yang 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%
    );
  }
}

Serupa dengan bagaimana tema gelap memiliki warna teks biru yang sangat terang, dalam tema terang warna teks adalah biru yang sangat gelap. Melihat 10% dan 30% sebagai nilai kecerahan untuk warna HSL harus memberi sinyal kepada 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 untuk merusak pola. Apa yang seharusnya terlihat wajar dan linier sejauh ini sudah tidak berfungsi. Hal yang menyenangkan adalah Anda bisa bermain-main dengan kombinasi warna tema cahaya HSL di sini dalam kode, dan menyesuaikan kecerahan dan saturasi untuk membuat skema warna terang yang bagus yang tidak terlalu keren atau biru.

Menggunakan sistem warna

Sekarang setelah warna ditentukan, saatnya untuk menggunakannya. Anda memiliki warna merek aksen yang bagus dan muncul, 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 memaksimalkan kontras default. Tombol terang dan gelap dapat mulai diuji.

&lt;fieldset&gt;

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

Elemen ini adalah elemen seperti kartu dalam desain Anda. Batas 1 piksel dan celah 1 piksel memiliki warna yang sama dan mewakili permukaan di balik setiap .fieldset-item. Ini menciptakan keselarasan visual yang bagus dan mudah dipelihara.

.fieldset-item

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

Setiap input formulir berada di platformnya sendiri. Mudah-mudahan, Anda melihat bagaimana semuanya ini bersatu dan bagaimana variasi cahaya bersinergi.

.fieldset-item > gambar

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

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

svg.fieldset-item

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

Ikon dalam formulir disetel untuk menggunakan teks alternatif --text2. Desain di mana ikon yang terisi sedikit lebih ringan daripada teks membuat mereka tidak terasa terlalu berat.

.fieldset-item:focus- tahan svg

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

Pemilih ini cocok dengan elemen penampung input saat salah satu input di dalamnya berinteraksi dan menargetkan SVG untuk menandainya dengan aksen merek Anda. Cara ini memberikan masukan UX yang bagus terhadap formulir, di mana interaksi dengan input akan menyoroti ikonografi yang relevan.

&lt;small&gt;

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

Teksnya kecil. Teks harus sedikit lebih lembut jika dibandingkan dengan header dan paragraf (konten utama).

Kontrol bentuk 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

Pada akhir bagian ini, halaman setelan akan:

• Beradaptasi dengan preferensi gerakan pengguna
• Merespons interaksi pengguna

Gerakan berkurang versus tanpa gerakan

Preferensi pengguna yang ada di sistem operasi untuk gerakan tidak menawarkan nilai tanpa animasi. Opsinya adalah mengurangi gerakan. Animasi crossfade, transisi warna, dan lainnya masih diminati pengguna yang lebih menyukai gerakan yang dikurangi.

Di laman setelan ini, tidak ada banyak gerakan dalam hal gerakan di seluruh layar. {i>Motion <i}ini lebih merupakan efek skala, seolah-olah elemen tersebut bergerak menuju ke pengguna. Menyesuaikan kode CSS untuk mengakomodasi pengurangan gerakan sehingga Anda mengurangi transisi penskalaan.

Gaya interaksi

&lt;fieldset&gt;

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 dari salah satu elemen yang tampak seperti kartu <fieldset>, hal ini akan menambahkan efek lifting. Antarmuka mendorong elemen ke depan, membantu fokus pengguna saat grup formulir kontekstual diarahkan ke 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 ditandai, fitur antarmuka pendukung lainnya untuk membantu menarik perhatian pengguna dan menandakan bahwa input diterima. Transisi warna tidak perlu dikurangi dalam sebagian besar kasus.

.fieldset-item > gambar

@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 jika diperbolehkan.

7. Selamat

Cabang Git: complete

Selamat, Anda telah berhasil membangun antarmuka adaptif pengguna.

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