Merancang Menu Navigasi Pemenang Idea dan Inspirasi
Menu navigasi di laman web adalah seperti tanda jalan di jalan atau direktori tingkat di pusat membeli-belah. Anda tidak boleh sampai ke destinasi anda tanpa terlebih dahulu mengetahui di mana anda berada. Seperti dalam kehidupan sebenar, pelayaran dalam reka bentuk web sangat penting dan memainkan peranan utama dalam kegunaan laman web serta pengalaman pengguna.
Kini anda boleh melihat banyak jenis menu navigasi dengan reka bentuk yang menarik, kreatif dan luar biasa. Tetapi bagaimana dengan navigasi berkesan dalam laman web, apa yang akan kelihatan seperti; bagaimana ia kelihatan seperti?
Hari ini saya ingin berkongsi pandangan dan pengetahuan tentang pentingnya navigasi dalam reka bentuk web. Saya akan mendedahkan beberapa petua mudah yang boleh anda gunakan untuk meningkatkan navigasi dan kegunaan laman web anda. Terdapat juga beberapa contoh menu navigasi berkesan untuk memberi anda idea bagaimana untuk merancang reka bentuk seterusnya anda.
Maklumat Seni Bina
Perancangan navigasi harus bermula dengan senibina maklumat. Adalah penting untuk duduk dan brainstorm tentang arsitektur maklumat laman web. Anda perlu mengetahui jenis ciri laman web yang ditawarkan, apa yang paling penting dan apa yang boleh diletakkan di peringkat yang lebih rendah dalam hierarki maklumat.
Senibina maklumat termasuk ciri, keperluan pengguna, sitemap, ujian dan wireframe. Anda boleh membaca lebih lanjut mengenai seni bina maklumat dalam artikel oleh Cameron Chapman dalam Maklumat Senibina 101: Teknik dan Amalan Terbaik.
Menggunakan teknologi yang membolehkan pengguna
Elakkan menggunakan Flash, JavaScript, jQuery atau apa-apa lagi yang menghalang akses ke navigasi laman web anda dalam membina bar navigasi anda, atau sekurang-kurangnya memastikan mereka dapat menurunkan anggun.
Untuk rujukan lanjut degradasi anggun javascript, semak post ini pada 10 Kaedah Fallback yang berguna untuk CSS dan Javascript.
Gunakan terma yang mesra pengguna, mudah
Lebih baik digunakan mudah, jelas dan terma yang mudah difikirkan daripada untuk mengekalkan istilah industri sahaja untuk menu navigasi anda. Mana-mana pautan yang membawa pengguna lebih daripada satu atau dua untuk memikirkan mungkin tidak sesuai digunakan.
Sekiranya pengguna perlu mengklik pada pautan untuk mengetahui pautan yang diterimanya maka ini akan menyumbang kepada pengalaman pengguna yang tidak baik untuk pelawat anda.
Contoh
Terma dalam menu navigasi laman web Larissa Ness mudah difahami dan cukup umum. Pengguna tidak akan merasa mengelirukan kerana mereka sudah mempunyai pengalaman dengan menu seperti ini.
Berikut adalah satu lagi contoh yang baik dari menu navigasi laman web yang bersih dan jelas dengan istilah umum yang digunakan, di csupport.
Agensi kreatif Eighty8Four menggunakan istilah "bilik pameran" yang boleh mengelirukan pengunjung. Istilah ini mungkin bermakna portfolio atau kerja tetapi tidak jelas dan pengunjung tidak mempunyai pilihan tetapi untuk mengklik masuk untuk menyemaknya.
Standardkan reka bentuk Navigasi
Gunakan model navigasi yang sama dalam semua halaman anda. Ia sangat penting kerana tanpa reka bentuk yang konsisten, sesetengah pengguna mungkin sebenarnya berfikir dia berada di laman web lain. Pastikan anda menggunakan model navigasi yang sama supaya pengguna dapat dengan mudah pergi ke laman web anda tanpa hilang.
Bluegg, yang ditunjukkan di bawah, menggunakan reka bentuk navigasi mudah dan bersih yang kekal sama di semua subpages. Satu-satunya perbezaan ialah penunjuk warna, yang menunjukkan halaman pelawat pada masa ini.
Tunjukkan di mana anda berada
Sangat penting untuk membolehkan pengguna tahu di mana dia berada di sepanjang masa. Anda boleh melakukan ini dengan menukar latar belakang pautan, warna nama halaman atau putar teks yang berani dalam menu navigasi untuk menjadikannya berbeza daripada orang lain.
Austin Eastciders menggunakan warna dan latar belakang yang berbeza untuk menunjukkan halaman pengguna sedang aktif. Penunjuk ini juga boleh berfungsi sebagai perubahan reka bentuk halus, contohnya dengan menggunakan a latar belakang navigasi yang berbeza yang mewujudkan perasaan bahawa item menu lain berada dalam keadaan mendalam.
Pembedahan Media menggunakan warna yang lebih gelap sebagai penunjuk bagi subkunci yang dibuka. Mudah tapi berkesan.
Gunakan konvensyen web
Ini semua mengenai navigasi laman web yang mudah digunakan dan intuitif. Konvensyen web menjadikannya lebih mudah bagi para pereka untuk mengendalikan reka bentuk mereka. Kebanyakan pengguna akan mengklik logo laman web untuk kembali ke laman utama, jadi reka bentuk logo anda untuk melakukannya.
Jika anda tidak, anda membuat mereka menghabiskan masa untuk belajar sesuatu yang baru atau dalam sesetengah kes kesulitan mereka dengan tidak menyediakan apa yang mereka harapkan biasa diterima norma navigasi.
Anda boleh mengetahui lebih banyak mengenai konvensyen web di sini:
- 10 Konvensyen Reka Bentuk Web
- Jangan Mencipta Reka Reka Bentuk Web
- Reka Bentuk Dengan Konvensyen Web
Injeksi Reka Bentuk meletakkan logo di sudut kiri atas yang sesuai dengan konvensyen web yang paling banyak digunakan hari ini.
Adams Creation menggunakan salah satu daripada konvensyen web yang paling umum - logo diletakkan di sudut kiri atas laman web dan pautan ke laman utama.
Uji: Melibatkan pihak ke-3
Sentiasa menguji reka bentuk pelayaran anda dengan mana-mana orang yang telah menggunakan Internet sebelum ini. Anda mungkin mahu membawa orang yang tidak berkaitan dengan proses reka bentuk untuk mengujinya. Perhatikan pilihan mereka semasa mereka menavigasi melalui laman web anda dan analisis masa yang diperlukan untuk mencari halaman yang mereka lihat.
Untuk ketepatan yang lebih baik, melibatkan lebih ramai orang, mengumpul data, menganalisis dan meringkaskannya untuk lebih baik. Lakukan tinjauan selepas ujian jika perlu. Anda boleh mendapatkan beberapa idea dan input yang tidak dijangka yang tidak dapat dikesan tanpa ujian ini dijalankan.
Menyediakan konteks
Untuk konsisten dengan kandungan dan navigasi anda, menyediakan beberapa konteks untuk pengguna laman web untuk mencari perkara yang mereka perlukan dengan cepat. Anda boleh meletakkan ikon kecil yang berkaitan dengan kandungan yang anda sambungkan atau penerangan pendek untuk memberikan gambaran mengenai halaman apa.
Bike Sendiri menggunakan ikon mudah untuk memberi pengguna lebih banyak maklumat mengenai apa yang mereka dapati di subklip tertentu.
Sarah Parmenter menggunakan kapsyen pendek dan bagus di bawah navigasi utama untuk memberikan beberapa maklumat mengenai subpages navigasi utama yang menghubungkannya.
Tujuan SEO
Google suka navigasi yang konsisten. Adalah baik untuk mempunyai navigasi yang konsisten bukan sahaja untuk pengguna memahami dan mendapatkan idea cara menavigasi laman web anda tetapi juga untuk enjin carian untuk mengindeks laman web anda.
Robot enjin carian akan merangkak melalui laman web anda untuk mengindeks laman web anda dan meletakkan pautan dalam halaman hasil enjin carian. Jika anda mahu kelihatan, perhatikan reka bentuk navigasi yang baik dan dapatkan lebih banyak trafik.
Skrip navigasi percuma (CSS, dan jQuery)
Berikut adalah senarai ringkas menu navigasi terkini yang mungkin anda dapati berguna untuk projek anda. Skrip ini akan menjadikan pengalaman pengguna produk anda lebih baik dengan menambah beberapa ciri yang bagus dan menjadikannya senang digunakan.
Skrip Skrip Berita Menegak XML menggunakan HTML dan jQuery: vScroller
Filtrify
Page Scroller
Portfolio Timeline
HorizontalNav
Menu Navigasi Minimalis CSS3
Kesan Navigasi Circle dengan CSS3
Kesan Navigasi Grid dengan jQuery
Ascensor
Buat Menu Navigasi CSS3 Elegan
Pameran navigasi mendatar yang indah
Dan yang terakhir, tetapi tidak kurang menaikkan menu navigasi mendatar. Semak laman web yang menakjubkan ini dan penyelesaian menu navigasi mereka untuk mencari idea baru untuk projek anda.
Ch3mical
Bloom Search Marketing Inc.
Alex Perez
Libor Zezulka
Hauska!
Kepulauan Emas
Neil Carpenter
Marc Thomas
3D Polystyren
Liechtenecker
Adventure World
Arbutus Photography
OMDRL
4 Pines Beer
Pemburu wain
Mudah-mudahan anda akan mendapati artikel ini berguna dan bermaklumat. Jika anda mempunyai sebarang pemikiran atau jika anda tidak bersetuju, sila berkongsi pendapat anda di bahagian komen.
