Web設計中導航與主頁的設計原則

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

今天的主要內容是介紹一下Web設計中導航與主頁的設計原則。

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

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

一、導航設計——街頭指示牌和面包屑

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

(1)網(wǎng)絡導航101法則

人們進入站點時會遵循一個類似的過程：

人們通常是為了尋找某個目標

人們會決定先詢問還是先瀏覽

如果選擇瀏覽，人們會通過標志的引導在層次結構中穿行

最后，如果沒找到想要的東西，人們會離開

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

感覺不到大小

感覺不到方向

感覺不到位置

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

(3)導航的用途

它給了我們一個被固定的感覺

它告訴我們當前的位置

它告訴我們如何使用網(wǎng)站

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

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

Web導航的用法基于實際導航用法，但我認為web導航現(xiàn)在已經(jīng)實現(xiàn)了對現(xiàn)實世界導航的超越。(可快速跳轉，試錯成本低)

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

讓一個“返回主頁”的按鈕始終可見，這一點很重要，用戶可以隨時(在短時間內)回到主頁，可以有效地減少用戶迷失方向的焦慮。

(5)提供搜索

搜索的設計要注意三點：

慎用花哨的用詞：“快速搜索”“關鍵詞搜索”“精確搜索”等等

添加指示說明：在PlaceHolder中增加對搜索的描述

添加選項：如果存在易混淆的搜索范圍，如全站搜索?部分站點搜索?整個Web搜索?請加選項區(qū)分。

(6)關于頁面名稱

標識要大：足夠引人注目

在合適的位置：通常在頁面左上，目光焦點較多的地方

每個頁面都需要一個名稱

名稱要和點擊的鏈接一致

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

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

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

(8)喜歡標簽(TAB)的四個理由

它們不言而喻：從來沒有第一眼看到會不明白的用戶

它們很難錯過：當Krug進行“用戶點擊測試”時，幾乎所有人都會試著點擊Tab標簽

它們很靈活：設計得當能增加修飾作用，更實用

它們暗示了一個物理空間：能幫助你裝載大量內容

(9)“后備廂測試”

想象你被蒙上雙眼，所在車子后備廂中，車子開動一段時間后，把你放在網(wǎng)站某個內容的某個頁面上，你能迅速的判斷出：

這是個什么網(wǎng)站?(風格主題設計)

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

如何回到主頁?

當前我有什么選擇?(本頁導航)

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

我怎么進行搜索?

如果可以，說明這個頁面設計良好。

這個頁面設計還蠻清晰的對不對?

二、首先要承認，主頁不由你控制

1. 主頁的任務

站點的標識和使命：告訴我這是做什么的網(wǎng)站

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

搜索

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

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

友情鏈接：沒辦法

快捷入口

注冊

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

……還有我沒尋找的東西：以后用得到

告訴我從哪開始：面對一個新網(wǎng)站，無從下手的感覺糟透了

導讀：精彩內容的推介

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

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

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

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

3. 第一個受害者

由于上面的幾個不利因素，主頁很容易變得非常復雜，這時最重要的事情往往被忘記——傳達整體形象。

忘記整體形象的五大錯誤理由：

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

人們見過一次這些說明后，會覺得重復見到很煩人：很少有人每次看到同樣的解釋就不再訪問這個網(wǎng)站。

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

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

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

4. 如何傳達整體形象

口號

歡迎廣告

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

但也不要使用太大空間

不要把使命陳述當做歡迎廣告

最重要的是進行測試

5. 沒什么比得上一個好口號——Slogan

好的口號要清楚、言之有物，不好的口號含糊不清

好的口號長度適中

好的口號能表述出網(wǎng)站的特點和顯而易見的好處，不好的口號聽起來太籠統(tǒng)

好的口號應該有個性、生動，偶爾很俏皮

推薦幾個不錯的Slogan：

(1)閱讀

網(wǎng)易新聞：有態(tài)度的新聞門戶

ONE：復雜世界里一個就夠了

簡書：交流故事，溝通想法

一席：聽君一席話

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

(2)出行

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

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

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

Uber ：你的專屬司機

Airbnb臺灣站：躺在山海間，睡在人情里

(3)財務

支付寶：改變因我而來

隨手記：理財?shù)谝徊?/p>

挖財：愛記賬 會生活

(4)購物

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

手機淘寶：隨時隨地，想淘就淘

什么值得買：高性價比產(chǎn)品網(wǎng)購推薦，值得您常來看看

(5)音樂

網(wǎng)易云音樂：聽見·好時光!

QQ音樂：聽我想聽的歌

豆瓣FM：與喜歡的音樂不期而遇

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

(6)視頻

愛奇藝視頻：悅享品質

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

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

(7)生活

Kitchen Stories：anyone can cook

下廚房：唯有美食與愛不可辜負

美團外賣：把世界送到你手中

百度外賣：我們想要給你更多

餓了么：叫外賣，上餓了么

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

any.do：Organize anything with Any.do

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

(以上摘自知乎，侵刪)

6. 從哪里開始?

當進入一個新的網(wǎng)站，快速掃描主頁之后，我們應該明白無誤地知道：

如果我想搜索，可以從這里開始。

如果我想瀏覽，可以從這里開始。

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

7. 下拉框的問題

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

他們難以掃描，你必須把它們找出來：必須點擊下拉框，才能看到下拉列表，然而用戶精力尤其寶貴的瀏覽時間，這無異于自尋死路。

他們不好控制：當下拉框伸展開露出一大長串內容時……所以他們更多被用在一些用戶不得不看的場景，比如注冊。

8. 節(jié)約主頁

因為主頁的內容實在太重要，所有利益相關者都想在主頁加上自己的內容(分一杯羹)，這樣很容易造成過度使用，需要其他方法來緩解這種需求，比如其他熱門頁面進行推介。

今天的內容先講到這里，有時間我會給大家分享最后幾章的內容。謝謝~

標題名稱：Web設計中導航與主頁的設計原則
網(wǎng)站地址：http://www.muchs.cn/news47/162597.html

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

廣告

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