網(wǎng)頁設計【交互篇】-2

1、網(wǎng)頁設計：從界面布局到視覺表現(xiàn)基礎篇界面交互篇視覺表現(xiàn)篇綜合案例篇界面交互篇用戶體驗研究信息架構設計界面與布局4.信息結構與交互4.1網(wǎng)站的信息結構4.2網(wǎng)站整體結構到界面架構4.3 案例活動頁面設計4.1.1信息結構的概念4.1網(wǎng)站的信息結構 信息結構設計為信息內容提供了情境，它的目的是將若干信息有機的組織在一起，使用戶能夠更容易地查詢獲取所需信息。網(wǎng)站信息結構的核心要素包括網(wǎng)站的組合系統(tǒng)、導航系統(tǒng)、搜索系統(tǒng)、標識系統(tǒng)，各系統(tǒng)的具體內容如下： 組合系統(tǒng)是負責組織網(wǎng)站的信息框架，確定信息的組織系統(tǒng)分類，對網(wǎng)站內容進行邏輯分組，確定各組之間的聯(lián)系。組合系統(tǒng)導航系統(tǒng)搜索系統(tǒng)標識系統(tǒng) 導航系統(tǒng)是負責

2、設置頁面間的交互，通過標識和路徑的顯示，表明用戶現(xiàn)在在哪，看過哪些頁面，如何去目標頁面等。組合系統(tǒng)導航系統(tǒng)搜索系統(tǒng)標識系統(tǒng) 搜索系統(tǒng)是負責用戶對信息的查詢搜索。通過提供搜索引擎或一定的檢索條件對網(wǎng)站內容進行搜索，最終展示搜索結果。組合系統(tǒng)導航系統(tǒng)搜索系統(tǒng)標識系統(tǒng) 標識系統(tǒng)是負責網(wǎng)站信息名稱的定義與表述，如對標題、圖形、索引項、導航等的標識的標引名稱、標簽及描述。組合系統(tǒng)導航系統(tǒng)搜索系統(tǒng)標識系統(tǒng)4.1.2 網(wǎng)站信息組織方式 網(wǎng)站的組織方式是指將信息組合成有意義而且各具特色的類別。 網(wǎng)站的設計者需要在研究用戶思維模式的基礎上，對信息的內涵進行概括和抽取，運用合理的組織方式使信息以人們熟悉或易于接受

3、的方式展示出來。 在組織方式中最為關鍵的是組織體系，也稱分類依據(jù)，是指網(wǎng)站是以什么為標準來進行分類的。 按照精度來劃分，組織體系分為精確性組織體系與模糊性組織體系兩種。常見的精確性組織體系有：按字母順序、按年代順序、按地理位置。常見模糊性組織體系有：按主題，按任務、按用戶、按隱喻。國家地理雜志網(wǎng)站首頁的左側焦點欄目就是按照主題來分類，通過單擊左側的主題文字可在右側切換瀏覽對應的圖片，若對圖片感興趣即可點擊圖片進入主題頁面。服務眾包平臺豬八戒網(wǎng)在用戶注冊成功后的“新人上路”頁面，就是按照用戶來分類，頁面中分有兩種角色：一個是雇人辦事的雇主，另一個是接單賺錢的服務商。點擊相對應的圖片鏈接入口，即可

4、跳轉進入對應的用戶頁面。由于兩類用戶對于豬八戒網(wǎng)站的需求不同，即雇主更加關心如何發(fā)布需求，服務商更加親睞如何開店接單，因此這種按用戶分類的方式設置入口極大的滿足了不同用戶群的需求。4.1.3 信息結構的類型 在網(wǎng)站界面信息中，不同的層級、不同的功能，分類依據(jù)可能會不一樣，而從組織方式的維度出發(fā)，常見的有四種類型：層次結構，矩陣結構，線性結構，自然結構。層次結構矩陣結構線性結構自然結構 層次結構也叫樹形結構，它通過樹狀圖的方式對一個事物的結構進行逐層分解，一般是從父級向子集深挖，有時也可能是自下而上或者是雙向的。比如京東網(wǎng)的商品組織方式就使用了層級結構，盡管其功能繁雜，但使用起來卻不會一頭霧水。

5、從首頁左側的固定菜單我們即可看到該網(wǎng)站的層級結構，一級菜單將“全部商品分類”分為了15個部分，這是層級結構的最頂層，當鼠標懸停一級菜單時會看到一級導航下的二級菜單及三級結構，而想看到更深層的結構則需要進入到二級頁面中。層次結構矩陣結構線性結構自然結構 矩陣結構的特點就是允許用戶在節(jié)點與節(jié)點之間沿著兩個或更多的“維度”移動，通常能幫助那些“帶著不同需求而來”的用戶，使他們能在一個頁面中尋找各自想要的東西。如在去哪兒網(wǎng)中酒店團購頁面，就較好地應用了矩陣結構，頁面中提供了“位置、分類、價格、服務”的熱門篩選條件方便用戶查找符合要求的酒店，用戶還可以同時勾選多個條件進行精確搜素。層次結構矩陣結構線性結

6、構自然結構 線性結構是以時間為軸，設定好起點和終點后，中間所能發(fā)生的所有的事情都被設計成一種線性的體驗。雖然它無法為用戶提供在網(wǎng)站上的每個流程的細節(jié)，但至少它顯示了你現(xiàn)在正處于關鍵線路的哪個點上。如南方航空公司官網(wǎng)上辦理乘機手續(xù)頁面，就是一步一步引導用戶操作。層次結構矩陣結構線性結構自然結構 自然結構不會遵循任何一致的模式。節(jié)點是逐一被連接起來的，同時這種結構沒有太強烈的分類概念。自然結構對于探索一系列關系不明確或一直在演變的主題是很合適的。如淘寶網(wǎng)中猜你喜歡的欄目就是典型的自然結構，它根據(jù)你瀏覽網(wǎng)頁的歷史記錄，經(jīng)過大數(shù)據(jù)分析而隨機推薦商品。以上四種結構單一存在的形式并不多，大多數(shù)都是需要根據(jù)

7、網(wǎng)站頁面功能類型進行多種結構的組合。如可以針對基礎內容創(chuàng)建網(wǎng)站的層級結構，然后利用矩陣結構將具體信息與某部分集成。4.2.1 確定網(wǎng)站的導航4.2 網(wǎng)站整體結構到界面架構 理解了網(wǎng)站的信息的組織方式與信息結構后，接下來就是確定網(wǎng)站的導航欄目，再將信息對號入座的放置到它所在的功能頁面中。 設計開發(fā)人員可以借助一些思維導圖軟件如X-mind，Mindmanager理清網(wǎng)站信息的層級結構，進而對網(wǎng)站的導航進行分類。【分享】“速合通”的金融代理產(chǎn)品的公司網(wǎng)頁設計此時他們正處于創(chuàng)業(yè)階段，客戶提出希望具備以下功能1.對其品牌和產(chǎn)品進行介紹，2.還希望招賢納士3.招代理商，有專門的代理商入口（他們提供鏈接地

8、址）。于是我們就用到x-mind對其網(wǎng)站信息進行分類1.層級關系：1）網(wǎng)站首頁：近期活動的banner、產(chǎn)品中心、合作伙伴、在線服務（懸停于每個頁面）2）關于速合通：專業(yè)知識、企業(yè)文化、人才招聘3）新聞中心：公司新聞、行業(yè)新聞4）產(chǎn)品中心：產(chǎn)品1、產(chǎn)品2、產(chǎn)品35）招商合作：項目優(yōu)勢、加盟條件、招商信息6）代理商入口2.自然關系：單擊首頁中的產(chǎn)品中心的產(chǎn)品鏈接后會跳轉到產(chǎn)品中心的詳細頁面。 每個功能的頁面分布可以基本擬定，此時的線框圖不用完善細節(jié)，只要記錄每個頁面信息及功能即可。此時的線框圖可以手繪也可以直接上電子稿，本案例中是繪制的是電子稿，為了區(qū)分功能板塊，在色彩上有所區(qū)分，與視覺效果無關

9、。圖4.18 “速合通”首頁線框圖圖4.19 “速合通”部分二級頁面4.2.2 提高用戶體驗的交互技巧 第一，刪除不必要的內容，聚焦核心。界面中的各種小細節(jié)會增加用戶的負擔，去掉可有可無的選項、內容和分散人們注意力的視覺元素。在此我們來對比一下QQ空間網(wǎng)頁版內嵌游戲界面2012年與2016年的設計稿，看似兩者功能布局一樣，實際上有多處細節(jié)做了簡化。 第二，組織信息，排定優(yōu)先級。著手組織信息之前首先要理解用戶的行為，然后要平衡經(jīng)營者的商業(yè)利益，再者運用用戶心智模型去設計交互細節(jié)，最后確定用戶想要達到什么樣的目的，并排定優(yōu)先級次序。優(yōu)酷土豆網(wǎng)如優(yōu)酷土豆視頻與愛奇藝pps視頻網(wǎng)站，兩者均為視頻網(wǎng)站，但頁面的信息組織卻大不一樣 愛奇藝pps網(wǎng)優(yōu)酷土豆首頁內容由廣告與熱播、獨播視頻組成，廣告與視頻鏈接混排在一起，固定區(qū)域不可關閉。視頻鏈接是將熱播與獨播的節(jié)目大小不一的排版在一起，顯得視頻種類的多樣化，但由于選擇過多，面積區(qū)域較小的視頻鏈接反而容易被忽略。愛奇藝pps首頁的廣告出現(xiàn)8秒后會自動關閉，在首頁寸土寸金的地方大面積的出現(xiàn)是“全網(wǎng)首播”、“全網(wǎng)獨播”的視頻信息。第三，隱藏與轉移。不重要和不常用的功能隱藏起來。對于較為繁瑣的功能內容可以