網(wǎng)頁(yè)設(shè)計(jì)【交互篇】-2

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

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

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

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

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

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

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

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

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