Laman web yang kami suka: aneh

Whimsical: Carta aliran yang mempesonakan, wireframe dan aplikasi penciptaan peta minda. Baru -baru ini, saya mendapati bahawa reka bentuk laman webnya, terutamanya halaman produk, sangat baik. Sebagai contoh, halaman yang memperkenalkan fungsi Peta Minda dapat mengalami produk secara langsung di laman web pemasaran.

Bukankah sangat pandai? Semua ini terima kasih<canvas></canvas> Kuasa elemen. Sudah tentu, anda juga boleh menggunakan SVG untuk mencapai kesan yang sama, tetapi ketika memilih SVG dan<canvas></canvas> Selalu ada sempadan kabur di antara mereka.

Walau bagaimanapun, dari segi reka bentuk, saya suka idea "pengiklanan adalah produk". Saya juga suka meninggalkan proses pendaftaran bersama dan secara langsung menunjukkan nilai permohonan kepada pengguna. Kebanyakan produk memerlukan pengguna untuk mendaftar dan melengkapkan panduan pemula untuk mengalami nilainya, tetapi anehnya tidak berlaku; Iklan itu sendiri adalah produk!

Juga, saya sangat suka reka bentuk laman web ini. Setiap ciri produk mempunyai tema tersendiri, menjadikan demonstrasi produk lebih menarik apabila melayari. Ini adalah butiran kecil, tetapi ia membuatkan saya ingin meneroka seluruh laman web dan melihat unsur -unsur UI yang baik.

Saya juga suka contoh sebenar di mana anda boleh melompat terus ke Wireframes. Tidak ada pemasaran di sini tentang bagaimana aplikasi revolusi atau bagaimana ia dapat mengubah peta seni minda. Ini semua tentang menunjukkan produk itu sendiri terlebih dahulu.

Tetapi! Mari kita kembali ke navigasi: tidak menandakan ikon tersebut adalah keputusan yang menarik. Ia cantik, tetapi apakah maksud setiap ikon? Chris membincangkan soalan ini dalam artikel sebelumnya: Adakah kandungan ikon? Iaitu, perdebatan mengenai sama ada untuk menandakan ikon telah berlaku dalam bidang reka bentuk perisian selama beberapa dekad. Jef Raskin (salah satu pereka Macintosh asal tahun 1980-an) nota dalam buku yang sangat baiknya antara muka manusia-komputer yang kita tidak boleh meninggalkan ikon yang tidak ditanda. Mungkin itu terlalu banyak, tetapi dalam kes ini saya tidak fikir ia tidak baik untuk menandakan ikon ini kerana mereka adalah ikon peta khusus dan minda bukan sesuatu yang kita dapat lihat setiap hari.

Tipografi Whimsical juga sangat menarik! Mereka menggunakan fon seterusnya DIN, yang, sekurang-kurangnya kepada saya, sedikit di luar dengan reka bentuk visual. DIN Next adalah fon yang mudah diabaikan. Ia direka untuk memimpin dan membiarkan kandungan mengambil peringkat tengah:

Tetapi saya fikir kejayaan font adalah garis reka bentuk visual yang berani, lingkaran terapung dan bentuk bulan sabit di mana -mana, semuanya muncul di UI. Bahawa dikatakan, mungkin apabila visual UI anda begitu kuat, anda tidak mahu fon menjadi terlalu menonjol, maksud saya kuat dalam erti kata yang positif.

Walau bagaimanapun, mereka bentuk antara muka sedemikian memerlukan pertimbangan kebolehcapaian warna. Stacie Arellano menulis artikel sebelumnya tentang mengapa kontras warna sangat penting:

Anda boleh menggunakan kaedah matematik untuk mengetahui sama ada terdapat perbezaan yang cukup antara kedua -dua warna.

W3C mempunyai dokumen yang dipanggil Panduan Kebolehcapaian Kandungan Web (WCAG) 2.1, yang mengandungi panduan kontras yang berjaya. Sebelum kita mula melakukan matematik, kita perlu mengetahui skor nisbah kontras yang ingin kita capai atau melebihi. Untuk mendapatkan skor lulus (AA), nisbah kontras untuk kebanyakan teks ialah 4.5: 1 dan teks yang lebih besar ialah 3: 1.

Saya tidak akan menyemak nombor Whimsical di sini, tetapi ia patut memberi perhatian ... terutamanya apabila UI mempunyai banyak teks putih pada latar belakang yang cerah dan berwarna -warni. Saya telah membuat kesilapan ini berkali -kali dan ia adalah tempat yang sangat mudah untuk pergi. Tetapi jika pengguna tidak dapat membaca teks dalam UI, itu masalah besar.

Singkatnya, laman web produk Whimsical menyegarkan. Ia mempunyai kesan visual yang kuat dan menunjukkan bahawa nilai dan fungsi produk dapat disampaikan melalui "demonstrasi" dan bukannya "penjelasan".

Ini mengingatkan saya tentang soalan: laman web mana yang anda lawati baru -baru ini menarik perhatian anda?

Atas ialah kandungan terperinci Laman web yang kami suka: aneh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!