關于Web設計中導航與主頁的設計原則(二)

2 評論 23673 瀏覽 137 收藏 13 分鐘

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

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

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

而對一些比較專業的或指定性的網站,政府網站等,用戶面臨缺少其他選擇,網站缺少替代性的情況,以下原則可能沒有前者這么性命攸關,但也同樣具有相當的指導意義。

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

1、記住一個事實 :如果在網站上找不到方向,人們會放棄使用你的網站

(1)網絡導航101法則

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

  • 人們通常是為了尋找某個目標
  • 人們會決定先詢問還是先瀏覽
  • 如果選擇瀏覽,人們會通過標志的引導在層次結構中穿行
  • 最后,如果沒找到想要的東西,人們會離開

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

  • 感覺不到大小
  • 感覺不到方向
  • 感覺不到位置

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

(3)導航的用途

  • 它給了我們一個被固定的感覺
  • 它告訴我們當前的位置
  • 它告訴我們如何使用網站
  • 它給了我們對網站建造者的信心

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

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

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

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

(5)提供搜索

搜索的設計要注意三點:

  • 慎用花哨的用詞:“快速搜索”“關鍵詞搜索”“精確搜索”等等
  • 添加指示說明:在PlaceHolder中增加對搜索的描述
  • 添加選項:如果存在易混淆的搜索范圍,如全站搜索?部分站點搜索?整個Web搜索?請加選項區分。

(6)關于頁面名稱

  • 標識要大:足夠引人注目
  • 在合適的位置:通常在頁面左上,目光焦點較多的地方
  • 每個頁面都需要一個名稱
  • 名稱要和點擊的鏈接一致

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

面包屑幫你找到來時的路,其實就是級聯菜單。

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

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

  • 它們不言而喻:從來沒有第一眼看到會不明白的用戶
  • 它們很難錯過:當Krug進行“用戶點擊測試”時,幾乎所有人都會試著點擊Tab標簽
  • 它們很靈活:設計得當能增加修飾作用,更實用
  • 它們暗示了一個物理空間:能幫助你裝載大量內容

(9)“后備廂測試”

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

  • 這是個什么網站?(風格主題設計)
  • 自己現在在哪?(網頁名稱)
  • 如何回到主頁?
  • 當前我有什么選擇?(本頁導航)
  • 網站主要欄目有哪些?(欄目清單)
  • 我怎么進行搜索?

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

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

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

1. 主頁的任務

  • 站點的標識和使命:告訴我這是做什么的網站
  • 站點層次總覽:網站概貌
  • 搜索
  • 建立可信度和信任感:專業優美的設計,是良好印象和繼續使用的重要因素
  • 內容更新:展現活躍跡象,不是死水一潭
  • 友情鏈接:沒辦法
  • 快捷入口
  • 注冊
  • 看到我自己正在尋找的東西:讓我有繼續使用的第一動力
  • ……還有我沒尋找的東西:以后用得到
  • 告訴我從哪開始:面對一個新網站,無從下手的感覺糟透了
  • 導讀:精彩內容的推介

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

  • 每個人都想占有一席之地:主頁的版面很珍貴,但信息量太多會容易造成堵塞——供應不足
  • 想要參與的人太多:產品,設計,市場,CEO,(甚至技術)都想在主頁加上一些個人需要(或喜歡)的東西
  • 一個尺寸要適合所有人:主頁要呈現在每個訪問者面前,不管他們興趣差別有多大

3. 第一個受害者

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

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

  • 這本就是顯而易見的,我們不需要這么做:我們自己建立網站時,很清楚自己將提供什么,但是你很難想到別人對此其實并不清楚。
  • 人們見過一次這些說明后,會覺得重復見到很煩人:很少有人每次看到同樣的解釋就不再訪問這個網站。
  • 真正需要我們網站的人會知道的:這樣很容易讓人覺得,那些沒有馬上明白的人可能不是你的目標受眾,從而丟失大量流量
  • 那是廣告的任務:就算人們理解你的外部廣告,但當他們來到你的網站時,真正留住興趣的是你的主頁。
  • 我們會增加一個“初次訪問?”的連接來專門針對新人:人們更傾向自己嘗試摸索,而不會依賴教程。這并不能代替他們一眼見到網站的整體形象,而且很多人再試著摸索后就已經糊涂了。

4. 如何傳達整體形象

  • 口號
  • 歡迎廣告
  • 需要多大空間就使用多大空間
  • 但也不要使用太大空間
  • 不要把使命陳述當做歡迎廣告
  • 最重要的是進行測試

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

  • 好的口號要清楚、言之有物,不好的口號含糊不清
  • 好的口號長度適中
  • 好的口號能表述出網站的特點和顯而易見的好處,不好的口號聽起來太籠統
  • 好的口號應該有個性、生動,偶爾很俏皮

推薦幾個不錯的Slogan:

(1)閱讀

  • 網易新聞:有態度的新聞門戶
  • ONE:復雜世界里一個就夠了
  • 簡書:交流故事,溝通想法
  • 一席:聽君一席話
  • 大眼:呈現世界精彩

(2)出行

  • 面包旅行:與世界分享你的旅行經驗
  • 蟬游記:發現旅行之美
  • 旅行加:方便快捷的一站式旅行助手
  • Uber :你的專屬司機
  • Airbnb臺灣站:躺在山海間,睡在人情里

(3)財務

  • 支付寶:改變因我而來
  • 隨手記:理財第一步
  • 挖財:愛記賬 會生活

(4)購物

  • 京東:多·快·好·省(「這才是最直接最長情的告白」)
  • 手機淘寶:隨時隨地,想淘就淘
  • 什么值得買:高性價比產品網購推薦,值得您常來看看

(5)音樂

  • 網易云音樂:聽見·好時光!
  • QQ音樂:聽我想聽的歌
  • 豆瓣FM:與喜歡的音樂不期而遇
  • 落網:我們記錄獨立音樂

(6)視頻

  • 愛奇藝視頻:悅享品質
  • 優酷:世界都在看
  • 迅雷看看:你的隨身電影院

(7)生活

  • Kitchen Stories:anyone can cook
  • 下廚房:唯有美食與愛不可辜負
  • 美團外賣:把世界送到你手中
  • 百度外賣:我們想要給你更多
  • 餓了么:叫外賣,上餓了么
  • 百度云:云上的日子,你我共享
  • any.do:Organize anything with Any.do
  • 豆瓣:匯聚一億人的生活趣味

(以上摘自知乎,侵刪)

6. 從哪里開始?

當進入一個新的網站,快速掃描主頁之后,我們應該明白無誤地知道:

  • 如果我想搜索,可以從這里開始。
  • 如果我想瀏覽,可以從這里開始。
  • 如果我想掃描網站最精彩(推薦,特價,有趣)的內容,可以從這里開始。

7. 下拉框的問題

為了節省空間,設計師常常會想方設法創造一些空間,比如……下拉框——遺憾的是,他們存在幾個問題:

  • 他們難以掃描,你必須把它們找出來:必須點擊下拉框,才能看到下拉列表,然而用戶精力尤其寶貴的瀏覽時間,這無異于自尋死路。
  • 他們不好控制:當下拉框伸展開露出一大長串內容時……所以他們更多被用在一些用戶不得不看的場景,比如注冊。

8. 節約主頁

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

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

相關閱讀

關于Web設計的原則與體會(一)

關于Web設計中的可用性決策(三)

 

本文由 @M‘Shawn ?原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 啊啊。。。。鏈接在文章底部啊,沒看見。。。。 ?

    來自浙江 回復
  2. 大神,怎么就一篇啊,沒有了么?

    來自浙江 回復