Sempadan mana - jejari yang patut anda pakai untuk CTA anda?

Berikut ialah soalan yang telah lama ditanya kepada saya, semasa saya bermula sebagai pereka UI, dan saya telah lama mencari mengapa dan bagaimana!

Hari ini, kami menemui butang dengan saiz, warna dan gaya yang berbeza pada antara muka.

Bentuk butang tidak terlepas daripada penyesuaian tapak atau aplikasi.

Apabila kita menyemak imbas, kita tidak benar-benar bertanya kepada diri sendiri tentang bentuk yang boleh dimiliki butang, asalkan ia berfungsi dan mengarahkan kita ke halaman atau tindakan yang kita mahukan.

Namun, ia adalah harta yang mempunyai banyak kuasa dan boleh membawa nada dan keperibadian kepada piagam.

Saya berkongsi dengan anda hari ini kunci untuk menentukan jejari sempadan yang diterima pakai mengikut mesej yang dibawa oleh perkhidmatan / produk anda.

Jejari sempadan, kesako?

Sebelum pergi lebih jauh, mari kita tentukan bersama apakah jejari sempadan.

Ia adalah sifat dalam CSS yang membolehkan untuk menentukan sudut sudut sesuatu elemen.

  • Setiap sudut boleh ditakrifkan secara berbeza untuk mencipta bentuk yang tidak sekata atau setiap sudut boleh mempunyai nilai yang sama.

  • Kami menemui jejari sempadan pada elemen antara muka yang berbeza: latar belakang, kad, butang, dsb.

Pilihan jejari sempadan akan memberi kesan yang kuat pada keseluruhan perasaan antara muka. Oleh itu, adalah penting untuk memahami sifat yang ditawarkan oleh setiap.

#1 Jejari pada 0px

Pilihan klasik yang membawa kesungguhan dan kestabilan kepada antara muka.

Apabila jenama menggunakannya, mereka mahu memberikan anda rasa selamat dan menunjukkan kepada anda profesionalisme perkhidmatan atau produk mereka.

Butang ini ditemui pada sudut tepat pada tapak kementerian dan e-dagang.

  •  Tapak jabatan: komitmen, kesungguhan
  • Tapak e-dagang: pembayaran selamatBentuk geometri memastikan elemen sejajar dan teratur untuk mengekalkan keseimbangan antara semua. Keseimbangan ini memberi keyakinan kepada pengguna.

#2 Jejari pada 3 – 4px

Pilihan yang paling biasa dilihat dan tidak berbahaya apabila ia berkaitan dengan reka bentuk UI.

Memang ia membolehkan mempunyai semangat profesional tetapi tanpa tegas.

Keringanan jejari sempadan membolehkan anda lebih dekat dengan pengguna dan menyediakan apa yang dipanggil suasana mesra pengguna.

Kami memadamkan sisi sudut untuk mencipta selekoh kecil yang akan membawa fleksibiliti sambil mengekalkan keseimbangan antara elemen yang berbeza.

Ini adalah pilihan yang anda akan dapati dalam banyak jenis tapak.

#3 Jejari pada 6 – 12px

Kita boleh mengatakan bahawa pilihan ini adalah luar biasa tetapi kita mendapati ia semakin banyak dalam piagam grafik tapak yang berkaitan dengan teknologi baharu.

Ia jarang berlaku dan dianggap inovatif walaupun ia berbahaya untuk digunakan.

Sesungguhnya, tidak seperti pilihan sebelumnya, ia boleh menjadi tidak selesa untuk kedua-dua pengguna dan pereka UI!

  • Bagi pengguna, ia mungkin dianggap sebagai kebudak-budakan atau sebagai kecacatan perkembangan.
  • Bagi pereka bentuk UI, ia boleh mewujudkan ketidakseimbangan dan ketidakkonsistenan dalam antara muka. Oleh itu, adalah perlu untuk berhati-hati tentang penggunaannya tetapi tidak mengenepikannya atas semua sebab yang baik yang dinyatakan!

#4 Sudut Bulat Sepenuhnya

Untuk mengelilingi semua pilihan, kita juga mesti menyebut pilihan pembundaran penuh: butang bulat!

Pilihan ini sangat biasa dalam antara muka kerana ia mewujudkan suasana yang mesra pengguna dan kreatif.

Mata secara semula jadi ditarik ke lengkung dan ini memudahkan untuk membaca dan mengesan butang dengan bucu bulat.
Malah, pada antara muka, dikelilingi oleh garis lurus dan struktur selari, butang bulat akan menonjol dan diserlahkan secara grafik.

Perkara negatif dari materialisasi ini ialah kerumitan untuk menggunakannya pada semua komponen. Ia berfungsi dengan baik untuk butang tetapi harus diketepikan untuk medan borang sebagai contoh.

Oleh itu, ia harus digunakan dengan berhati-hati dan digabungkan dengan salah satu pilihan lain untuk mengimbangi.

Pilihan ini digunakan untuk pelbagai jenis tapak untuk semua kelebihan ini dan untuk dinamik yang dibawanya.
Sehinggakan ia sering ditemui dalam elemen komunikasi seperti butang "Main" video atau butang perkongsian rangkaian sosial.

# Kesimpulannya

Jadi tidak ada jawapan yang betul atau salah apabila ia datang untuk memilih jejari sempadan dalam antara muka anda.

Objektif yang anda mesti ada dalam fikiran adalah untuk mengekalkan konsistensi dalam pilihan anda untuk mempunyai konsistensi sepanjang kursus (kesepaduan keseluruhan, piagam, jenama dan strategi grafik).

Ketekalan grafik ini akan membawa nada tertentu pada antara muka anda untuk menyerlahkan mesej anda dan produk atau perkhidmatan anda.

Sumber imej: https://undraw.co/illustrations

Alexa CUELLAR Pereka UX-UI @UX-Republic


Latihan kami seterusnya