Web設(shè)計(jì)中導(dǎo)航與主頁(yè)的設(shè)計(jì)原則

最近在讀Steve Krug的Don’t Make Me Think，本文基本是自己的讀書(shū)筆記第二篇，拿出來(lái)做下總結(jié)和大家分享一下。想看第一篇的小伙伴，可點(diǎn)擊查看。

今天的主要內(nèi)容是介紹一下Web設(shè)計(jì)中導(dǎo)航與主頁(yè)的設(shè)計(jì)原則。

以下原則主要用在開(kāi)放性的門(mén)戶(hù)網(wǎng)站中，這類(lèi)網(wǎng)站中用戶(hù)流量較大，且用戶(hù)注意力極容易被分散，這時(shí)一個(gè)Web頁(yè)面的瞬間識(shí)別性直接關(guān)系到用戶(hù)轉(zhuǎn)化率，也就顯得尤為重要。

而對(duì)一些比較專(zhuān)業(yè)的或指定性的網(wǎng)站，政府網(wǎng)站等，用戶(hù)面臨缺少其他選擇，網(wǎng)站缺少替代性的情況，以下原則可能沒(méi)有前者這么性命攸關(guān)，但也同樣具有相當(dāng)?shù)闹笇?dǎo)意義。

一、導(dǎo)航設(shè)計(jì)——街頭指示牌和面包屑

1、記住一個(gè)事實(shí) ：如果在網(wǎng)站上找不到方向，人們會(huì)放棄使用你的網(wǎng)站

(1)網(wǎng)絡(luò)導(dǎo)航101法則

人們進(jìn)入站點(diǎn)時(shí)會(huì)遵循一個(gè)類(lèi)似的過(guò)程：

人們通常是為了尋找某個(gè)目標(biāo)

人們會(huì)決定先詢(xún)問(wèn)還是先瀏覽

如果選擇瀏覽，人們會(huì)通過(guò)標(biāo)志的引導(dǎo)在層次結(jié)構(gòu)中穿行

最后，如果沒(méi)找到想要的東西，人們會(huì)離開(kāi)

(2)Web與真實(shí)世界中的差異

感覺(jué)不到大小

感覺(jué)不到方向

感覺(jué)不到位置

不論我是來(lái)閑逛還是來(lái)尋找固定內(nèi)容，我能清晰地知道自己在哪，能去哪(明細(xì)分類(lèi))，以及如何回去(主菜單)。

(3)導(dǎo)航的用途

它給了我們一個(gè)被固定的感覺(jué)

它告訴我們當(dāng)前的位置

它告訴我們?nèi)绾问褂镁W(wǎng)站

它給了我們對(duì)網(wǎng)站建造者的信心

如今我們逛一些相當(dāng)成熟的購(gòu)物網(wǎng)站(比如淘寶)的時(shí)候，甚至比在百貨商廈中的感覺(jué)更清晰。我能更便捷地找到自己想要的東西。(商品分類(lèi)，新品促銷(xiāo)，其他功能。。。)

Web導(dǎo)航的用法基于實(shí)際導(dǎo)航用法，但我認(rèn)為web導(dǎo)航現(xiàn)在已經(jīng)實(shí)現(xiàn)了對(duì)現(xiàn)實(shí)世界導(dǎo)航的超越。(可快速跳轉(zhuǎn)，試錯(cuò)成本低)

(4)只要跺三次腳，說(shuō)“我要回家”

讓一個(gè)“返回主頁(yè)”的按鈕始終可見(jiàn)，這一點(diǎn)很重要，用戶(hù)可以隨時(shí)(在短時(shí)間內(nèi))回到主頁(yè)，可以有效地減少用戶(hù)迷失方向的焦慮。

(5)提供搜索

搜索的設(shè)計(jì)要注意三點(diǎn)：

慎用花哨的用詞：“快速搜索”“關(guān)鍵詞搜索”“精確搜索”等等

添加指示說(shuō)明：在PlaceHolder中增加對(duì)搜索的描述

添加選項(xiàng)：如果存在易混淆的搜索范圍，如全站搜索?部分站點(diǎn)搜索?整個(gè)Web搜索?請(qǐng)加選項(xiàng)區(qū)分。

(6)關(guān)于頁(yè)面名稱(chēng)

標(biāo)識(shí)要大：足夠引人注目

在合適的位置：通常在頁(yè)面左上，目光焦點(diǎn)較多的地方

每個(gè)頁(yè)面都需要一個(gè)名稱(chēng)

名稱(chēng)要和點(diǎn)擊的鏈接一致

(7)你在這里——關(guān)于“面包屑”

面包屑幫你找到來(lái)時(shí)的路，其實(shí)就是級(jí)聯(lián)菜單。

你能清晰的知道自己在哪，如何來(lái)的。也可以快速回去。

(8)喜歡標(biāo)簽(TAB)的四個(gè)理由

它們不言而喻：從來(lái)沒(méi)有第一眼看到會(huì)不明白的用戶(hù)

它們很難錯(cuò)過(guò)：當(dāng)Krug進(jìn)行“用戶(hù)點(diǎn)擊測(cè)試”時(shí)，幾乎所有人都會(huì)試著點(diǎn)擊Tab標(biāo)簽

它們很靈活：設(shè)計(jì)得當(dāng)能增加修飾作用，更實(shí)用

它們暗示了一個(gè)物理空間：能幫助你裝載大量?jī)?nèi)容

(9)“后備廂測(cè)試”

想象你被蒙上雙眼，所在車(chē)子后備廂中，車(chē)子開(kāi)動(dòng)一段時(shí)間后，把你放在網(wǎng)站某個(gè)內(nèi)容的某個(gè)頁(yè)面上，你能迅速的判斷出：

這是個(gè)什么網(wǎng)站?(風(fēng)格主題設(shè)計(jì))

自己現(xiàn)在在哪?(網(wǎng)頁(yè)名稱(chēng))

如何回到主頁(yè)?

當(dāng)前我有什么選擇?(本頁(yè)導(dǎo)航)

網(wǎng)站主要欄目有哪些?(欄目清單)

我怎么進(jìn)行搜索?

如果可以，說(shuō)明這個(gè)頁(yè)面設(shè)計(jì)良好。

這個(gè)頁(yè)面設(shè)計(jì)還蠻清晰的對(duì)不對(duì)?

二、首先要承認(rèn)，主頁(yè)不由你控制

1. 主頁(yè)的任務(wù)

站點(diǎn)的標(biāo)識(shí)和使命：告訴我這是做什么的網(wǎng)站

站點(diǎn)層次總覽：網(wǎng)站概貌

搜索

建立可信度和信任感：專(zhuān)業(yè)優(yōu)美的設(shè)計(jì)，是良好印象和繼續(xù)使用的重要因素

內(nèi)容更新：展現(xiàn)活躍跡象，不是死水一潭

友情鏈接：沒(méi)辦法

快捷入口

注冊(cè)

看到我自己正在尋找的東西：讓我有繼續(xù)使用的第一動(dòng)力

……還有我沒(méi)尋找的東西：以后用得到

告訴我從哪開(kāi)始：面對(duì)一個(gè)新網(wǎng)站，無(wú)從下手的感覺(jué)糟透了

導(dǎo)讀：精彩內(nèi)容的推介

2. 你還要面臨的一些不利因素

每個(gè)人都想占有一席之地：主頁(yè)的版面很珍貴，但信息量太多會(huì)容易造成堵塞——供應(yīng)不足

想要參與的人太多：產(chǎn)品，設(shè)計(jì)，市場(chǎng)，CEO，(甚至技術(shù))都想在主頁(yè)加上一些個(gè)人需要(或喜歡)的東西

一個(gè)尺寸要適合所有人：主頁(yè)要呈現(xiàn)在每個(gè)訪問(wèn)者面前，不管他們興趣差別有多大

3. 第一個(gè)受害者

由于上面的幾個(gè)不利因素，主頁(yè)很容易變得非常復(fù)雜，這時(shí)最重要的事情往往被忘記——傳達(dá)整體形象。

忘記整體形象的五大錯(cuò)誤理由：

這本就是顯而易見(jiàn)的，我們不需要這么做：我們自己建立網(wǎng)站時(shí)，很清楚自己將提供什么，但是你很難想到別人對(duì)此其實(shí)并不清楚。

人們見(jiàn)過(guò)一次這些說(shuō)明后，會(huì)覺(jué)得重復(fù)見(jiàn)到很煩人：很少有人每次看到同樣的解釋就不再訪問(wèn)這個(gè)網(wǎng)站。

真正需要我們網(wǎng)站的人會(huì)知道的：這樣很容易讓人覺(jué)得，那些沒(méi)有馬上明白的人可能不是你的目標(biāo)受眾，從而丟失大量流量

那是廣告的任務(wù)：就算人們理解你的外部廣告，但當(dāng)他們來(lái)到你的網(wǎng)站時(shí)，真正留住興趣的是你的主頁(yè)。

我們會(huì)增加一個(gè)“初次訪問(wèn)?”的連接來(lái)專(zhuān)門(mén)針對(duì)新人：人們更傾向自己嘗試摸索，而不會(huì)依賴(lài)教程。這并不能代替他們一眼見(jiàn)到網(wǎng)站的整體形象，而且很多人再試著摸索后就已經(jīng)糊涂了。

4. 如何傳達(dá)整體形象

口號(hào)

歡迎廣告

需要多大空間就使用多大空間

但也不要使用太大空間

不要把使命陳述當(dāng)做歡迎廣告

最重要的是進(jìn)行測(cè)試

5. 沒(méi)什么比得上一個(gè)好口號(hào)——Slogan

好的口號(hào)要清楚、言之有物，不好的口號(hào)含糊不清

好的口號(hào)長(zhǎng)度適中

好的口號(hào)能表述出網(wǎng)站的特點(diǎn)和顯而易見(jiàn)的好處，不好的口號(hào)聽(tīng)起來(lái)太籠統(tǒng)

好的口號(hào)應(yīng)該有個(gè)性、生動(dòng)，偶爾很俏皮

推薦幾個(gè)不錯(cuò)的Slogan：

(1)閱讀

網(wǎng)易新聞：有態(tài)度的新聞門(mén)戶(hù)

ONE：復(fù)雜世界里一個(gè)就夠了

簡(jiǎn)書(shū)：交流故事，溝通想法

一席：聽(tīng)君一席話

大眼：呈現(xiàn)世界精彩

(2)出行

面包旅行：與世界分享你的旅行經(jīng)驗(yàn)

蟬游記：發(fā)現(xiàn)旅行之美

旅行加：方便快捷的一站式旅行助手

Uber ：你的專(zhuān)屬司機(jī)

Airbnb臺(tái)灣站：躺在山海間，睡在人情里

(3)財(cái)務(wù)

支付寶：改變因我而來(lái)

隨手記：理財(cái)?shù)谝徊?/p>

挖財(cái)：愛(ài)記賬 會(huì)生活

(4)購(gòu)物

京東：多·快·好·省(「這才是最直接最長(zhǎng)情的告白」)

手機(jī)淘寶：隨時(shí)隨地，想淘就淘

什么值得買(mǎi)：高性?xún)r(jià)比產(chǎn)品網(wǎng)購(gòu)?fù)扑]，值得您常來(lái)看看

(5)音樂(lè)

網(wǎng)易云音樂(lè)：聽(tīng)見(jiàn)·好時(shí)光!

QQ音樂(lè)：聽(tīng)我想聽(tīng)的歌

豆瓣FM：與喜歡的音樂(lè)不期而遇

落網(wǎng)：我們記錄獨(dú)立音樂(lè)

(6)視頻

愛(ài)奇藝視頻：悅享品質(zhì)

優(yōu)酷：世界都在看

迅雷看看：你的隨身電影院

(7)生活

Kitchen Stories：anyone can cook

下廚房：唯有美食與愛(ài)不可辜負(fù)

美團(tuán)外賣(mài)：把世界送到你手中

百度外賣(mài)：我們想要給你更多

餓了么：叫外賣(mài)，上餓了么

百度云：云上的日子，你我共享

any.do：Organize anything with Any.do

豆瓣：匯聚一億人的生活趣味

(以上摘自知乎，侵刪)

6. 從哪里開(kāi)始?

當(dāng)進(jìn)入一個(gè)新的網(wǎng)站，快速掃描主頁(yè)之后，我們應(yīng)該明白無(wú)誤地知道：

如果我想搜索，可以從這里開(kāi)始。

如果我想瀏覽，可以從這里開(kāi)始。

如果我想掃描網(wǎng)站最精彩(推薦，特價(jià)，有趣)的內(nèi)容，可以從這里開(kāi)始。

7. 下拉框的問(wèn)題

為了節(jié)省空間，設(shè)計(jì)師常常會(huì)想方設(shè)法創(chuàng)造一些空間，比如……下拉框——遺憾的是，他們存在幾個(gè)問(wèn)題：

他們難以掃描，你必須把它們找出來(lái)：必須點(diǎn)擊下拉框，才能看到下拉列表，然而用戶(hù)精力尤其寶貴的瀏覽時(shí)間，這無(wú)異于自尋死路。

他們不好控制：當(dāng)下拉框伸展開(kāi)露出一大長(zhǎng)串內(nèi)容時(shí)……所以他們更多被用在一些用戶(hù)不得不看的場(chǎng)景，比如注冊(cè)。

8. 節(jié)約主頁(yè)

因?yàn)橹黜?yè)的內(nèi)容實(shí)在太重要，所有利益相關(guān)者都想在主頁(yè)加上自己的內(nèi)容(分一杯羹)，這樣很容易造成過(guò)度使用，需要其他方法來(lái)緩解這種需求，比如其他熱門(mén)頁(yè)面進(jìn)行推介。

今天的內(nèi)容先講到這里，有時(shí)間我會(huì)給大家分享最后幾章的內(nèi)容。謝謝~

標(biāo)題名稱(chēng)：Web設(shè)計(jì)中導(dǎo)航與主頁(yè)的設(shè)計(jì)原則
網(wǎng)站地址：http://www.bm7419.com/news47/162597.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作、App設(shè)計(jì)、Google、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)