Meningkatkan ikon untuk elemen UI dengan penjajaran tipografi dan skala

Menggunakan ikon dalam elemen antara muka pengguna adalah berguna. Sebagai tambahan kepada pelabelan elemen, ikon dapat membantu memperkuat niat elemen pengguna kepada pengguna. Tetapi saya katakan, saya perhatikan sedikit misalignment ikon semasa melayari web. Walaupun penjajaran ikon betul, ikon sering tidak bertindak balas dengan baik apabila gaya tipografi untuk perubahan elemen.

Saya mengambil perhatian beberapa contoh dunia nyata dan saya ingin berkongsi pendapat saya tentang bagaimana saya memperbaiki mereka. Harapan saya teknik -teknik ini dapat membantu orang lain membina elemen antara muka pengguna yang lebih baik menampung perubahan tipografi dan sambil menegakkan matlamat asal reka bentuk.

Contoh 1 - Pemesejan Laman

Saya dapati contoh pemesejan ini di laman web media popular. Kedudukan ikon tidak kelihatan begitu buruk. Tetapi apabila menukar beberapa sifat gaya elemen seperti saiz font dan ketinggian garis, ia mula membongkar.

Isu yang dikenal pasti

• Ikon benar -benar diposisikan dari tepi kiri menggunakan unit relatif (REM)
• Kerana ikon diambil dari aliran, ibu bapa diberi nilai padding-kiri yang lebih besar untuk membantu dengan jarak keseluruhan-idealnya, padding-x kami seragam, dan semuanya kelihatan baik sama ada ikon ada atau tidak
• Ikon (itu SVG) juga bersaiz dalam REMS-ini tidak membenarkan saiz semula masing-masing jika perubahan saiz fon induknya

Cadangan

Kami mahu kelebihan atas ikon kami berada di garis putus -putus biru, tetapi kami sering mendapati kelebihan ikon kami di garis putus -putus merah.

Pernahkah anda memasukkan ikon di sebelah beberapa teks dan ia tidak akan menyelaraskan bahagian atas teks? Anda boleh memindahkan ikon ke tempat dengan sesuatu seperti kedudukan: relatif; Atas: 0.2EM. Ini berfungsi dengan baik, tetapi jika gaya tipografi berubah pada masa akan datang, ikon anda boleh kelihatan salah.

Kita boleh meletakkan ikon kita dengan lebih pasti. Mari kita gunakan jarak asas elemen (jarak dari garis dasar satu baris ke garis dasar baris seterusnya) untuk membantu menyelesaikannya.

Jarak asas adalah fon-saiz * ketinggian garis .

Kami akan menyimpannya dalam harta tersuai CSS:

 -baselinedistance: calc (var (-fontsize) * var (-lineheight));

Kami kemudian boleh memindahkan ikon kami ke bawah menggunakan hasil (jarak asas - saiz fon) / 2 .

 --iconoffset: calc ((var (-baselinedistance)-var (-fontsize)) / 2);

Dengan saiz fon 1REM (16px) dan ketinggian garis 1.5, ikon kami akan dipindahkan 4 piksel.

• Jarak asas = 16px * 1.5 = 24px
• Icon Offset = (24px - 16px) / 2 = 4px

Demo: Sebelum dan Selepas

Contoh 2 - Senarai yang tidak teratur

Contoh kedua yang saya dapati adalah senarai yang tidak teratur. Ia menggunakan font web (font hebat) untuk ikonnya melalui :: sebelum pseudo-element. Terdapat banyak artikel hebat mengenai penggayaan kedua-dua senarai yang diperintahkan dan tidak teratur, jadi saya tidak akan masuk ke dalam butiran mengenai Pseudo-Element yang agak baru dan sebagainya. Fon web biasanya berfungsi dengan baik dengan penjajaran ikon bergantung kepada ikon yang digunakan.

Isu yang dikenal pasti

• Tidak ada kedudukan mutlak yang digunakan-apabila menggunakan unsur-unsur pseudo, kami tidak sering menggunakan Flexbox seperti contoh pertama kami dan kedudukan mutlak bersinar di sini
• Item senarai menggunakan gabungan padding dan inden teks negatif untuk membantu susun atur-saya tidak pernah dapat berfungsi dengan baik apabila menyumbang kepada teks dan skalabiliti ikon berbilang talian

Cadangan

Kerana kami juga akan menggunakan elemen pseudo dalam penyelesaian kami, kami akan memanfaatkan kedudukan mutlak. Saiz ikon contoh ini sedikit lebih besar daripada salinan bersebelahannya (kira -kira 2x). Oleh kerana itu, kita akan mengubah bagaimana kita mengira kedudukan teratas ikon. Pusat ikon kami harus diselaraskan secara menegak dengan pusat baris pertama.

Mulakan dengan pengiraan jarak asas:

 -baselinedistance: calc (var (-fontsize) * var (-lineheight));

Gerakkan ikon ke bawah menggunakan hasil (jarak asas - saiz ikon) / 2 .

 --iconoffset: calc ((var (-baselinedistance)-var (-ikon) / 2);

Jadi dengan saiz fon 1REM (16px), ketinggian garis 1.6, dan ikon bersaiz 2x salinan (32px), ikon kami akan mendapat nilai tertinggi -3.2 piksel.

• Jarak asas = 16px * 1.6 = 25.6px
• Offset Icon = (25.6px -32px) / 2 = -3.2px

Dengan saiz font yang lebih besar 2REM (32px), ketinggian garis 1.2, dan 64px ikon, ikon kami akan mendapat nilai teratas -12.8 piksel.

• Jarak asas = 32px * 1.2 = 38.4px
• Icon Offset = (38.4px -64px) / 2 = -12.8px

Demo: Sebelum dan Selepas

Kesimpulan

Untuk ikon antara muka pengguna, kami mempunyai banyak pilihan dan teknik. Kami mempunyai SVG, fon web, imej statik, :: penanda, dan jenis senarai. Seseorang juga boleh menggunakan warna latar belakang dan laluan klip untuk mencapai beberapa hasil ikon yang menarik. Melaksanakan beberapa pengiraan mudah dapat membantu menyelaraskan dan skala ikon dengan cara yang lebih anggun, menghasilkan pelaksanaan yang sedikit lebih banyak peluru.

Lihat juga: Perbincangan terdahulu mengenai menjajarkan ikon ke teks.

Atas ialah kandungan terperinci Meningkatkan ikon untuk elemen UI dengan penjajaran tipografi dan skala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!