Prinsip Reka Bentuk untuk Pemaju: Proses dan Petua CSS untuk Reka Bentuk Web yang Lebih Baik

Secara teknikalnya, semua orang boleh memasak. Tetapi ada perbezaan antara benar -benar mengetahui cara memasak hidangan yang lazat dan membuang beberapa bahan ke dalam periuk untuk mencuba nasib anda. Begitu juga dengan pembangunan web. Anda mungkin memahami "bahan-bahan" background-color , .heading-1 -tetapi tidak semua orang tahu bagaimana untuk menukar bahan-bahan ini menjadi laman web yang indah dan mudah digunakan.

Setiap kali anda menggunakan HTML dan CSS, anda merancang bentuk dan struktur kandungan yang memberi supaya orang lain dapat memahami. Orang ramai telah merancang selama beratus -ratus tahun dan telah membangunkan beberapa prinsip dalam proses yang juga digunakan untuk antara muka digital hari ini. Prinsip -prinsip ini dicerminkan dalam tiga bidang utama: bagaimana teks dipaparkan (menaip), bagaimana kandungan diatur (jarak), dan bagaimana penambahan peribadi (warna). Mari kita meneroka cara menggunakan "bahan -bahan" reka bentuk web ini dari perspektif pemaju, memanfaatkan sifat dan panduan CSS untuk menghapuskan bahan -bahan meneka dalam reka bentuk web.

Jadual Kandungan

• jenis -jenis
• jarak
• warna

jenis -jenis

Laman web yang mudah dibaca tidak ada kemalangan. Malah, Taimur Abdaal telah menulis artikel mengenai topik ini, yang mengandungi banyak nasihat daripada pemaju yang berurusan dengan tipografi. Kami akan memberi tumpuan kepada dua prinsip reka bentuk asas yang dapat membantu anda memaparkan teks dengan lebih menyenangkan dan mudah dibaca: pengulangan dan hierarki.

Gunakan pertindihan untuk mencapai konsistensi dan penyelenggaraan

Oleh kerana kepentingan kebolehgunaan semula dalam perisian, pengulangan muncul secara semulajadi di rangkaian. Sebagai contoh, kelas CSS membolehkan anda menentukan gaya khusus untuk teks dan kemudian menggunakannya semula di seluruh laman web. Ini menghasilkan gaya teks pendua dan konsisten kandungan yang sama, membantu pengguna melayari laman web.

Sebagai contoh, jika anda bekerja pada gaya perenggan baru, mula -mula pertimbangkan sama ada terdapat kandungan yang ada dengan gaya yang sama dan cuba menggunakan kelas CSS yang sama. Jika tidak, anda boleh membuat kelas baru dengan nama biasa yang boleh digunakan semula di tempat lain di laman web. Pertimbangkan untuk menggunakan .paragraph--emphasize .footer\_\_paragraph--emphasize .heading-1 bukannya .hero\_\_site-title Contoh -contoh pertama boleh digunakan di laman web anda, manakala yang terakhir adalah terhad kepada komponen tertentu. Anda juga boleh menambah awalan, seperti text- , untuk menunjukkan bahawa kelas itu digunakan secara khusus untuk gaya teks. Pendekatan ini akan mengurangkan saiz dan kerumitan fail CSS sambil menjadikannya lebih mudah untuk mengemas kini gaya global pada masa akan datang.

Dalam reka bentuk, terdapat banyak cara untuk bereksperimen dengan gaya. Pereka kadang -kadang mendapat ketagihan dengan gaya fon, mewujudkan banyak gaya yang sama sedikit berbeza. Walau bagaimanapun, dalam kod, sangat berharga untuk mengehadkan gaya teks minimum. Pemaju harus menggesa para pereka untuk menggabungkan gaya yang sama untuk mengurangkan jumlah kod dan meningkatkan kebolehgunaan dan konsistensi.

Hierarki memberikan pesanan visual yang jelas untuk kandungan

Hierarki adalah sesuatu yang anda hanya akan perasan apabila ia tidak wujud. Dalam jenis, hierarki merujuk kepada perbezaan visual antara pelbagai teks. Ia adalah perbezaan antara tajuk, perenggan, pautan, dan gaya teks lain. Perbezaan ini dicapai dengan memilih fon, warna, saiz, kes, dan sifat lain yang berbeza untuk setiap jenis kandungan teks. Hierarki yang baik menjadikan maklumat yang rumit lebih mudah difahami dan membimbing pengguna untuk melayari kandungan anda.

HTML sendiri menyediakan beberapa hierarki (contohnya, saiz fon tajuk adalah dari<h1></h1> tiba<h6></h6> secara beransur -ansur berkurangan), tetapi CSS membuka pintu kepada kreativiti yang lebih besar. Oleh<h></h> Tag memberikan saiz fon yang lebih besar, dan anda boleh dengan cepat membuat perbezaan dimensi yang lebih besar antara tahap tajuk - dengan itu membentuk lebih banyak hierarki. Untuk membuat lebih banyak perubahan, anda juga boleh menukar sifat warna, text-align , dan text-transform .

Arahan untuk pemilihan fon

Mahu Mahu Mahu Mahu

============================================================================ ============================================================================ ============================================================================ ============================================================================ ============================================================================ ============================================================================ ============================================================================ ============================================================================

Apabila ia datang kepada tipografi, kita perlu memastikan ia mudah dibaca. Faktor keseluruhan dengan kebolehbacaan terbesar adalah fon yang anda pilih - ia adalah topik yang besar. Banyak faktor menentukan "kebolehbacaan" fon. Sesetengah fon direka khusus untuk tajuk atau baris pendek teks; Ini dipanggil fon "paparan", dan mereka sering lebih peribadi daripada fon yang direka untuk teks. Hiasan dan kebiasaan yang unik menjadikannya lebih sukar untuk dibaca apabila dipaparkan fon dalam saiz kecil dan sebagai sebahagian daripada perenggan besar. Sebagai peraturan, fon yang lebih intuitif harus digunakan untuk teks dan hanya memaparkan fon untuk tajuk.

Jika anda tidak mempunyai bekalan yang singkat dan memerlukan font yang boleh dibaca, cuba fon Google. Tambahkan sekeping teks ke medan pratonton dan ubah saiznya ke saiz anggaran yang dipaparkan di laman web anda. Anda kemudian dapat menyempitkan hasilnya kepada fon serif atau sans serif dan mengimbas senarai fon untuk fon yang mudah dibaca. Roboto, Noto Sans, Merriweather dan PT Serif adalah semua pilihan yang sangat mudah dibaca.

Sifat CSS untuk meningkatkan kebolehbacaan

• Saiz fon perenggan utama hendaklah antara 16px dan 18px (1em dan 1.25em), bergantung pada fon yang anda pilih.

• Secara manual tetapkan ketinggian garis (ruang menegak antara dua baris teks) untuk menjadikan teks anda kurang sesak dan lebih mudah dibaca. Untuk tajuk, mulakan dengan line-height: 1.25 (iaitu 1.25 kali saiz fon), dan perenggan sekurang-kurangnya 1.5 (tetapi tidak lebih daripada 1.9), dan menyesuaikan seperti yang diperlukan. Semakin lama baris teks, semakin besar garisan harus. Untuk mengekalkan fleksibiliti teks, elakkan menambah unit pada ketinggian baris. Tanpa unit, ketinggian garis yang anda tetapkan akan berkadar dengan saiz fon anda. Sebagai contoh, line-height: 1.5 dan font-size: 18px akan menjadikan ketinggian garis anda 27 piksel. Jika anda menukar saiz fon ke font-size: 16px pada skrin yang lebih kecil, ketinggian garis yang dikira akan secara automatik berubah menjadi 24 piksel.

• Perhatikan berapa banyak aksara yang terkandung dalam baris teks, dengan matlamatnya menjadi 45 hingga 75 aksara panjang (termasuk tanda baca dan ruang). Melakukannya mengurangkan keletihan membaca pengguna dengan menyekat pergerakan mata dan kepala untuk menjejaki garisan teks. Oleh kerana kebolehubahan rangkaian, adalah mustahil untuk mengawal panjang garis, tetapi anda boleh menggunakan nilai max-width dan titik putus untuk mengelakkan garis teks daripada terlalu lama. Secara umumnya, lebih pendek baris teks, semakin cepat kelajuan imbasan. Dan jangan terlalu risau tentang mengira bilangan aksara setiap baris. Selepas anda selesai beberapa kali, anda akan merasakan apa yang kelihatan betul.

jarak

Selepas melihat susun atur, anda boleh melangkah mundur dan menyemak susun atur atau jarak kandungan. Pergerakan dan kedekatan adalah dua prinsip reka bentuk yang berkaitan dengan jarak.

Pergerakan adalah mengenai proses kandungan

Latihan adalah bagaimana mata anda melalui halaman atau aliran halaman. Anda boleh menggunakan pergerakan untuk membimbing penglihatan pengguna, menceritakan kisah, menunjuk kepada item tindakan utama, atau menggalakkan mereka untuk menatal. Ini dilakukan dengan membina kandungan dalam setiap komponen dan kemudian mengatur komponen ini untuk membentuk susun atur halaman. Dengan memberi perhatian kepada bagaimana mata anda melewati kandungan, anda boleh membantu pengguna mengetahui di mana untuk melihat ketika mengimbas halaman.

Tidak seperti buku (yang sering mempunyai struktur yang sangat linear), laman web boleh menjadi lebih kreatif dalam susun atur mereka - dengan banyak cara. Adalah penting untuk memastikan anda mempunyai tujuan bagaimana untuk menyusun kandungan anda dan menjadikannya susun atur dengan cara yang membimbing pengguna melalui kandungan anda dengan mudah.

Pertimbangkan tiga contoh di atas. Mana yang paling mudah difahami? Susunan di sebelah kiri menggerakkan penglihatan anda dari skrin ke kiri kerana kedudukan imej, yang menjadikannya sukar untuk mencari butang. Dalam pilihan pertengahan, mudah untuk mengabaikan tajuk kerana imejnya terlalu besar berbanding dengan tajuk. Di sebelah kanan, tajuk pertama menarik perhatian anda dan imej dibina untuk menunjuk kepada item tindakan utama, butang.

Kekosongan adalah alat yang berguna untuk mewujudkan pergerakan yang kuat, tetapi mereka mudah digunakan terlalu banyak atau terlalu sedikit. Fikirkan bagaimana anda menggunakannya untuk membimbing mata pengguna dan membahagikan kandungan anda. Jika digunakan dengan betul, pengguna tidak akan melihat kosong itu sendiri, tetapi akan dapat memberi tumpuan lebih baik pada apa yang anda sampaikan. Sebagai contoh, anda boleh menggunakan kosong untuk memisahkan kandungan (bukan kotak berwarna), yang akan menghasilkan susun atur yang kurang berantakan.

Berdekatan dengan menjalin hubungan

Apabila objek semakin dekat, mereka dianggap relevan. Dengan mengawal jarak di sekitar unsur -unsur, anda boleh membayangkan hubungan antara mereka. Mewujudkan sistem jarak untuk membantu membina konsistensi melalui pengulangan dan mengelakkan menggunakan nombor rawak mungkin membantu. Sistem ini didasarkan pada saiz fon penyemak imbas lalai (1REM atau 16px) dan menggunakan nilai yang berbeza yang meliputi kebanyakan senario:

• 0.25Rem (4px)
• 0.5rem (8px)
• 1rem (16px)
• 2rem (32px)
• 4Rem (64px)

Anda boleh menggunakan pembolehubah SASS atau CSS untuk memastikan nilai -nilai ini konsisten sepanjang projek anda. Sistem mungkin kelihatan seperti ini -tetapi gunakan apa sahaja yang anda rasa selesa kerana menamakan perkara -perkara yang sukar:

• $space-sm
• $space-med
• $space-lg
• $space-xl
• $space-xxl

Warna menyampaikan keperibadian dan menarik perhatian

Warna sangat mempengaruhi keperibadian laman web. Jika digunakan dengan betul, ia akan menjadikan halaman penuh daya hidup dan emosi; Jika digunakan secara tidak wajar, ia akan mengalihkan perhatian dari kandungan, atau, lebih buruk lagi, menjadikannya tidak dapat diakses. Warna berkait rapat dengan kebanyakan prinsip reka bentuk. Ia boleh digunakan untuk membuat gerakan dengan membimbing garis penglihatan pengguna dan boleh digunakan untuk membuat penekanan dengan menarik perhatian kepada item tindakan yang paling penting.

Arahan untuk pemilihan warna

Dengan warna, sukar untuk mengetahui di mana untuk bermula. Untuk membantu, anda boleh menggunakan proses empat langkah untuk membimbing pemilihan warna anda dan membina palet untuk laman web anda.

Langkah 1: Memahami emosi anda

Sebelum memilih warna, anda mesti memahami nada atau sikap laman web dan jenama anda. Lihat kandungan anda dan tentukan apa yang anda cuba sampaikan. Adakah ia menyeronokkan, bermaklumat, retro, kuat, suram? Umumnya, anda boleh meringkaskan nada laman web ke dalam beberapa kata sifat. Sebagai contoh, anda boleh meringkaskan muka utara sebagai petualang dan lasak, sementara Apple adalah minimalis dan cantik.

Langkah 2: Cari warna utama anda

Ingat emosi anda dan cuba bayangkan warna yang mewakilinya. Mulakan dengan ketepuan warna (intensiti warna) dan kecerahan (tahap kedekatan warna menjadi putih atau hitam). Jika mood anda optimis atau cantik, warna yang lebih ringan (lebih tepu) mungkin yang terbaik. Jika emosi anda serius atau tersirat, warna yang lebih gelap (tidak terlalu tepu) lebih baik.

Seterusnya, pilih warna. Hue merujuk kepada apa yang kebanyakan orang berfikir sebagai warna -di manakah ia jatuh dalam putaran roda warna? Warna warna memberikan makna yang paling besar. Orang cenderung mengaitkan warna dengan idea -idea tertentu. Sebagai contoh, merah sering dikaitkan dengan kuasa atau bahaya, dan hijau dikaitkan dengan wang atau alam. Ia mungkin berguna untuk menyemak laman web atau jenama yang sama untuk memahami warna yang mereka gunakan - walaupun anda tidak perlu mengikuti kepimpinan mereka. Jangan takut untuk mencuba!

Langkah 3: Tambahkan warna tambahan

Kadang -kadang dua atau tiga warna utama diperlukan, tetapi ini tidak perlu. Fikirkan jenama warna yang berbeza. Ada yang menggunakan warna tunggal, sementara yang lain mempunyai warna utama dan satu atau dua warna tambahan. Coca-Cola menggunakan warna merah yang unik. Ikea terutamanya biru dengan beberapa kuning. Tide adalah oren dengan beberapa biru dan kuning. Bergantung pada mood laman web anda, anda mungkin memerlukan beberapa warna. Cuba gunakan alat seperti warna adobe atau penyejuk, kedua -duanya membolehkan anda menambah warna utama dan kemudian cuba hubungan warna yang berbeza, seperti warna pelengkap atau monokrom, dengan cepat melihat jika ada yang berfungsi dengan baik.

Langkah 4: Kembangkan palet warna anda

Sekarang bahawa anda telah menyempitkan dan mendapati warna utama anda, sudah tiba masanya untuk mengembangkan julat anda dengan palet yang menyediakan fleksibiliti dan kekangan untuk projek anda - satu kaedah yang saya dapati berguna. Nada dan bayang -bayang adalah helah di sini. Warna dibuat dengan mencampurkan warna utama anda dengan putih, dan warna dibuat dengan mencampurkan dengan hitam. Anda boleh dengan cepat membuat sistem yang teratur dengan menggunakan fungsi warna SASS:

 <code>$main-color: #9AE799; $main-color-lightest: lighten($main-color, 20%); $main-color-lighter: lighten($main-color, 15%); $main-color-light: lighten($main-color, 10%); $main-color-dark: darken($main-color, 40%); $main-color-darker: darken($main-color, 50%); $main-color-darkest: darken($main-color, 60%);</code>

Untuk menyempurnakan palet anda, anda juga memerlukan beberapa warna, seperti putih dan hitam. Cuba buat "hitam kaya" dengan warna gelap, hampir hitam warna utama anda dan di hujung spektrum yang lain, pilih beberapa kelabu cahaya yang berwarna dengan warna utama anda. Mewarnai putih dan hitam akan menambah keperibadian ke halaman anda dan membantu membuat rupa dan rasa yang koheren.

Akhir sekali, jika anda berhadapan dengan produk interaktif, anda harus menambah warna untuk kejayaan, amaran, dan status ralat. Biasanya hijau, kuning, dan merah sesuai untuk ini, tetapi pertimbangkan bagaimana untuk menyesuaikan warna untuk menjadikannya lebih sesuai dengan palet anda. Sebagai contoh, jika mood anda mesra dan warna asas anda hijau, anda mungkin perlu menurunkan ketepuan warna keadaan yang salah untuk membuat merah merasa kurang negatif.

Anda boleh melakukan ini menggunakan fungsi warna Sass mix dengan menyediakan warna asas anda, warna ralat lalai, dan peratusan warna asas yang anda ingin bercampur dengan warna yang salah. Menambah fungsi desaturate membantu mengurangkan nada warna:

 <code>$success: mix($base-color, desaturate(green, 50%), 50%); $warning: mix($base-color, desaturate(yellow, 30%), 5%); $error: mix($base-color, desaturate(red, 50%), 20%);</code>

Apabila ia datang ke rangkaian, terdapat prinsip warna yang anda harus memberi perhatian khusus kepada: kontras. Inilah yang akan kami perkenalkan seterusnya.

Kontras

Kontras warna -perbezaan ketepuan, kecerahan, dan warna antara kedua -dua warna -adalah prinsip reka bentuk penting yang memastikan rangkaian dapat diakses oleh orang yang mempunyai penglihatan rendah atau buta warna. Dengan memastikan bahawa terdapat perbezaan yang cukup antara teks anda dan latar belakang di laman webnya, ia akan menjadikannya lebih baik untuk semua pengguna dengan visi biasa untuk mengakses. Apabila melihat aksesibiliti, pastikan anda mengikuti panduan kontras warna yang disediakan dalam Panduan Kebolehcapaian Kandungan Web W3C (WCAG). Terdapat beberapa alat untuk membantu anda mengikuti garis panduan ini, termasuk panel semak dalam alat pembangunan Chrome.

Sekarang, sudah tiba masanya untuk meletakkan prinsip -prinsip ini menjadi amalan! Anda boleh menggunakan proses dan tips CSS ini untuk membantu menghapuskan elemen meneka dalam reka bentuk anda dan membuat penyelesaian yang lebih baik. Mulakan dengan apa yang anda kenali, dan akhirnya, prinsip reka bentuk yang disebutkan di sini akan menjadi sifat kedua kepada anda.

Jika anda mencari lebih banyak petua praktikal, Adam Wathan dan Steve Schoger telah menulis beberapa artikel mengenai tip kegemaran mereka.

Atas ialah kandungan terperinci Prinsip Reka Bentuk untuk Pemaju: Proses dan Petua CSS untuk Reka Bentuk Web yang Lebih Baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!