今天的主要內(nèi)容是介紹一下Web設(shè)計中導(dǎo)航與主頁的設(shè)計原則。
以下原則主要用在開放性的門戶網(wǎng)站中，這類網(wǎng)站中用戶流量較大，且用戶注意力極容易被分散，這時一個Web頁面的瞬間識別性直接關(guān)系到用戶轉(zhuǎn)化率，也就顯得尤為重要。
而對一些比較專業(yè)的或指定性的網(wǎng)站，政府網(wǎng)站等，用戶面臨缺少其他選擇，網(wǎng)站缺少替代性的情況，以下原則可能沒有前者這么性命攸關(guān)，但也同樣具有相當(dāng)?shù)闹笇?dǎo)意義。
一、導(dǎo)航設(shè)計——街頭指示牌和面包屑
1、記住一個事實 ：如果在網(wǎng)站上找不到方向，人們會放棄使用你的網(wǎng)站
（1）網(wǎng)絡(luò)導(dǎo)航 101 法則
人們進入站點時會遵循一個類似的過程：
- 人們通常是為了尋找某個目標(biāo)
- 人們會決定先詢問還是先瀏覽
- 如果選擇瀏覽，人們會通過標(biāo)志的引導(dǎo)在層次結(jié)構(gòu)中穿行
- 最后，如果沒找到想要的東西，人們會離開
（2）Web與真實世界中的差異
- 感覺不到大小
- 感覺不到方向
- 感覺不到位置
不論我是來閑逛還是來尋找固定內(nèi)容，我能清晰地知道自己在哪，能去哪（明細(xì)分類），以及如何回去（主菜單）。
（3）導(dǎo)航的用途
- 它給了我們一個被固定的感覺
- 它告訴我們當(dāng)前的位置
- 它告訴我們?nèi)绾问褂镁W(wǎng)站
- 它給了我們對網(wǎng)站建造者的信心
如今我們逛一些相當(dāng)成熟的購物網(wǎng)站（比如淘寶）的時候，甚至比在百貨商廈中的感覺更清晰。我能更便捷地找到自己想要的東西。（商品分類，新品促銷，其他功能。。。）
Web導(dǎo)航的用法基于實際導(dǎo)航用法，但我認(rèn)為web導(dǎo)航現(xiàn)在已經(jīng)實現(xiàn)了對現(xiàn)實世界導(dǎo)航的超越。（可快速跳轉(zhuǎn)，試錯成本低）
（4）只要跺三次腳，說“我要回家”
讓一個“返回主頁”的按鈕始終可見，這一點很重要，用戶可以隨時（在短時間內(nèi)）回到主頁，可以有效地減少用戶迷失方向的焦慮。
（5）提供搜索
搜索的設(shè)計要注意三點：
- 慎用花哨的用詞：“快速搜索”“關(guān)鍵詞搜索”“精確搜索”等等
- 添加指示說明：在PlaceHolder中增加對搜索的描述
- 添加選項：如果存在易混淆的搜索范圍，如全站搜索？部分站點搜索？整個Web搜索？請加選項區(qū)分。
（6）關(guān)于頁面名稱
- 標(biāo)識要大：足夠引人注目
- 在合適的位置：通常在頁面左上，目光焦點較多的地方
- 每個頁面都需要一個名稱
- 名稱要和點擊的鏈接一致（7）你在這里——關(guān)于“面包屑”
面包屑幫你找到來時的路，其實就是級聯(lián)菜單。
你能清晰的知道自己在哪，如何來的。也可以快速回去。
（8）喜歡標(biāo)簽（TAB）的四個理由
-
它們不言而喻：從來沒有第一眼看到會不明白的用戶
-
它們很難錯過：當(dāng)Krug進行“用戶點擊測試”時，幾乎所有人都會試著點擊Tab標(biāo)簽
-
它們很靈活：設(shè)計得當(dāng)能增加修飾作用，更實用
-
它們暗示了一個物理空間：能幫助你裝載大量內(nèi)容
（9）“后備廂測試”
想象你被蒙上雙眼，所在車子后備廂中，車子開動一段時間后，把你放在網(wǎng)站某個內(nèi)容的某個頁面上，你能迅速的判斷出：
-
這是個什么網(wǎng)站？（風(fēng)格主題設(shè)計）
-
自己現(xiàn)在在哪？（網(wǎng)頁名稱）
-
如何回到主頁？
-
當(dāng)前我有什么選擇？（本頁導(dǎo)航）
-
網(wǎng)站主要欄目有哪些？（欄目清單）
-
我怎么進行搜索？
如果可以，說明這個頁面設(shè)計良好。
這個頁面設(shè)計還蠻清晰的對不對？
二、首先要承認(rèn)，主頁不由你控制
1. 主頁的任務(wù)
-
站點的標(biāo)識和使命：告訴我這是做什么的網(wǎng)站
-
站點層次總覽：網(wǎng)站概貌
-
搜索
-
建立可信度和信任感：專業(yè)優(yōu)美的設(shè)計，是良好印象和繼續(xù)使用的重要因素
-
內(nèi)容更新：展現(xiàn)活躍跡象，不是死水一潭
-
友情鏈接：沒辦法
-
快捷入口
-
注冊
-
看到我自己正在尋找的東西：讓我有繼續(xù)使用的第一動力
-
……還有我沒尋找的東西：以后用得到
-
告訴我從哪開始：面對一個新網(wǎng)站，無從下手的感覺糟透了
-
導(dǎo)讀：精彩內(nèi)容的推介
2. 你還要面臨的一些不利因素
-
每個人都想占有一席之地：主頁的版面很珍貴，但信息量太多會容易造成堵塞——供應(yīng)不足
-
想要參與的人太多：產(chǎn)品，設(shè)計，市場，CEO，（甚至技術(shù)）都想在主頁加上一些個人需要（或喜歡）的東西
-
一個尺寸要適合所有人：主頁要呈現(xiàn)在每個訪問者面前，不管他們興趣差別有多大
3. 第一個受害者
由于上面的幾個不利因素，主頁很容易變得非常復(fù)雜，這時最重要的事情往往被忘記——傳達整體形象。
忘記整體形象的五大錯誤理由：
-
這本就是顯而易見的，我們不需要這么做：我們自己建立網(wǎng)站時，很清楚自己將提供什么，但是你很難想到別人對此其實并不清楚。
-
人們見過一次這些說明后，會覺得重復(fù)見到很煩人：很少有人每次看到同樣的解釋就不再訪問這個網(wǎng)站。
-
真正需要我們網(wǎng)站的人會知道的：這樣很容易讓人覺得，那些沒有馬上明白的人可能不是你的目標(biāo)受眾，從而丟失大量流量
-
那是廣告的任務(wù)：就算人們理解你的外部廣告，但當(dāng)他們來到你的網(wǎng)站時，真正留住興趣的是你的主頁。
-
我們會增加一個“初次訪問？”的連接來專門針對新人：人們更傾向自己嘗試摸索，而不會依賴教程。這并不能代替他們一眼見到網(wǎng)站的整體形象，而且很多人再試著摸索后就已經(jīng)糊涂了。4. 如何傳達整體形象
- 口號
- 歡迎廣告
- 需要多大空間就使用多大空間
- 但也不要使用太大空間
- 不要把使命陳述當(dāng)做歡迎廣告
- 最重要的是進行測試
5. 沒什么比得上一個好口號——Slogan
- 好的口號要清楚、言之有物，不好的口號含糊不清
- 好的口號長度適中
- 好的口號能表述出網(wǎng)站的特點和顯而易見的好處，不好的口號聽起來太籠統(tǒng)
- 好的口號應(yīng)該有個性、生動，偶爾很俏皮
推薦幾個不錯的Slogan：
（1）閱讀
- 網(wǎng)易新聞：有態(tài)度的新聞門戶
- ONE：復(fù)雜世界里一個就夠了
- 簡書：交流故事，溝通想法
- 一席：聽君一席話
- 大眼：呈現(xiàn)世界精彩
（2）出行
- 面包旅行：與世界分享你的旅行經(jīng)驗
- 蟬游記：發(fā)現(xiàn)旅行之美
- 旅行加：方便快捷的一站式旅行助手
- Uber ：你的專屬司機
- Airbnb臺灣站：躺在山海間，睡在人情里
（3）財務(wù)
- 支付寶：改變因我而來
- 隨手記：理財?shù)谝徊?/span>
- 挖財：愛記賬 會生活
（4）購物
- 京東：多·快·好·省（「這才是最直接最長情的告白」）
- 手機淘寶：隨時隨地，想淘就淘
- 什么值得買：高性價比產(chǎn)品網(wǎng)購?fù)扑]，值得您常來看看
（5）音樂
- 網(wǎng)易云音樂：聽見·好時光！
- QQ音樂：聽我想聽的歌
- 豆瓣FM：與喜歡的音樂不期而遇
- 落網(wǎng)：我們記錄獨立音樂
（6）視頻
- 愛奇藝視頻：悅享品質(zhì)
- 優(yōu)酷：世界都在看
- 迅雷看看：你的隨身電影院
（7）生活
- Kitchen Stories：anyone can cook
- 下廚房：唯有美食與愛不可辜負(fù)
- 美團外賣：把世界送到你手中
- 百度外賣：我們想要給你更多
- 餓了么：叫外賣，上餓了么
- 百度云：云上的日子，你我共享
- any.do：Organize anything with Any.do
- 豆瓣：匯聚一億人的生活趣味
（以上摘自知乎，侵刪）
6. 從哪里開始？
當(dāng)進入一個新的網(wǎng)站，快速掃描主頁之后，我們應(yīng)該明白無誤地知道：
- 如果我想搜索，可以從這里開始。
- 如果我想瀏覽，可以從這里開始。
- 如果我想掃描網(wǎng)站最精彩（推薦，特價，有趣）的內(nèi)容，可以從這里開始。
7. 下拉框的問題
為了節(jié)省空間，設(shè)計師常常會想方設(shè)法創(chuàng)造一些空間，比如……下拉框——遺憾的是，他們存在幾個問題：
- 他們難以掃描，你必須把它們找出來：必須點擊下拉框，才能看到下拉列表，然而用戶精力尤其寶貴的瀏覽時間，這無異于自尋死路。
- 他們不好控制：當(dāng)下拉框伸展開露出一大長串內(nèi)容時……所以他們更多被用在一些用戶不得不看的場景，比如注冊。
8. 節(jié)約主頁
因為主頁的內(nèi)容實在太重要，所有利益相關(guān)者都想在主頁加上自己的內(nèi)容（分一杯羹），這樣很容易造成過度使用，需要其他方法來緩解這種需求，比如其他熱門頁面進行推介。深圳網(wǎng)站建設(shè)博納網(wǎng)絡(luò)編輯整理。
