網(wǎng)頁設(shè)計(jì)內(nèi)容【交互篇】-2.ppt

《網(wǎng)頁設(shè)計(jì)內(nèi)容【交互篇】-2.ppt》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、標(biāo)題:字體:微軟雅黑粗體字號:32-36pt顏色:主題藍(lán)色副標(biāo)題:字體:微軟雅黑字號:24pt顏色:主題灰色網(wǎng)頁設(shè)計(jì)：從界面布局到視覺表現(xiàn)基礎(chǔ)篇界面交互篇視覺表現(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案例——活動頁面設(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)識系統(tǒng)，各系統(tǒng)的具體內(nèi)容如下：組合系統(tǒng)是負(fù)責(zé)組織網(wǎng)站的信息框架，

2、確定信息的組織系統(tǒng)分類，對網(wǎng)站內(nèi)容進(jìn)行邏輯分組，確定各組之間的聯(lián)系。組合系統(tǒng)導(dǎo)航系統(tǒng)搜索系統(tǒng)標(biāo)識系統(tǒng)導(dǎo)航系統(tǒng)是負(fù)責(zé)設(shè)置頁面間的交互，通過標(biāo)識和路徑的顯示，表明用戶現(xiàn)在在哪，看過哪些頁面，如何去目標(biāo)頁面等。組合系統(tǒng)導(dǎo)航系統(tǒng)搜索系統(tǒng)標(biāo)識系統(tǒng)搜索系統(tǒng)是負(fù)責(zé)用戶對信息的查詢搜索。通過提供搜索引擎或一定的檢索條件對網(wǎng)站內(nèi)容進(jìn)行搜索，最終展示搜索結(jié)果。組合系統(tǒng)導(dǎo)航系統(tǒng)搜索系統(tǒng)標(biāo)識系統(tǒng)標(biāo)識系統(tǒng)是負(fù)責(zé)網(wǎng)站信息名稱的定義與表述，如對標(biāo)題、圖形、索引項(xiàng)、導(dǎo)航等的標(biāo)識的標(biāo)引名稱、標(biāo)簽及描述。組合系統(tǒng)導(dǎo)航系統(tǒng)搜索系統(tǒng)標(biāo)識系統(tǒng)4.1.2網(wǎng)站信息組織方式網(wǎng)站的組織方式是指將信息組合成有意義而且各具特色的類別。網(wǎng)

3、站的設(shè)計(jì)者需要在研究用戶思維模式的基礎(chǔ)上，對信息的內(nèi)涵進(jìn)行概括和抽取，運(yùn)用合理的組織方式使信息以人們熟悉或易于接受的方式展示出來。在組織方式中最為關(guān)鍵的是組織體系，也稱分類依據(jù)，是指網(wǎng)站是以什么為標(biāo)準(zhǔn)來進(jìn)行分類的。按照精度來劃分，組織體系分為精確性組織體系與模糊性組織體系兩種。常見的精確性組織體系有：按字母順序、按年代順序、按地理位置。常見模糊性組織體系有：按主題，按任務(wù)、按用戶、按隱喻。國家地理雜志網(wǎng)站首頁的左側(cè)焦點(diǎn)欄目就是按照主題來分類，通過單擊左側(cè)的主題文字可在右側(cè)切換瀏覽對應(yīng)的圖片，若對圖片感興趣即可點(diǎn)擊圖片進(jìn)入主題頁面。服務(wù)眾包平臺豬八戒網(wǎng)在用戶注冊成功后的“新人上路”頁面

4、，就是按照用戶來分類，頁面中分有兩種角色：一個是雇人辦事的雇主，另一個是接單賺錢的服務(wù)商。點(diǎn)擊相對應(yīng)的圖片鏈接入口，即可跳轉(zhuǎn)進(jìn)入對應(yīng)的用戶頁面。由于兩類用戶對于豬八戒網(wǎng)站的需求不同，即雇主更加關(guān)心如何發(fā)布需求，服務(wù)商更加親睞如何開店接單，因此這種按用戶分類的方式設(shè)置入口極大的滿足了不同用戶群的需求。4.1.3信息結(jié)構(gòu)的類型在網(wǎng)站界面信息中，不同的層級、不同的功能，分類依據(jù)可能會不一樣，而從組織方式的維度出發(fā)，常見的有四種類型：層次結(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)也叫樹形結(jié)構(gòu)，它通過樹狀圖的方式對一個事物的結(jié)構(gòu)進(jìn)行逐層分解，一般是從父級向子集

5、深挖，有時也可能是自下而上或者是雙向的。比如京東網(wǎng)的商品組織方式就使用了層級結(jié)構(gòu)，盡管其功能繁雜，但使用起來卻不會一頭霧水。從首頁左側(cè)的固定菜單我們即可看到該網(wǎng)站的層級結(jié)構(gòu)，一級菜單將“全部商品分類”分為了15個部分，這是層級結(jié)構(gòu)的最頂層，當(dāng)鼠標(biāo)懸停一級菜單時會看到一級導(dǎo)航下的二級菜單及三級結(jié)構(gòu)，而想看到更深層的結(jié)構(gòu)則需要進(jìn)入到二級頁面中。層次結(jié)構(gòu)矩陣結(jié)構(gòu)線性結(jié)構(gòu)自然結(jié)構(gòu)矩陣結(jié)構(gòu)的特點(diǎn)就是允許用戶在節(jié)點(diǎn)與節(jié)點(diǎn)之間沿著兩個或更多的“維度”移動，通常能幫助那些“帶著不同需求而來”的用戶，使他們能在一個頁面中尋找各自想要的東西。如在去哪兒網(wǎng)中酒店團(tuán)購頁面，就較好地應(yīng)用了矩陣結(jié)構(gòu)，頁面中提供

6、了“位置、分類、價格、服務(wù)”的熱門篩選條件方便用戶查找符合要求的酒店，用戶還可以同時勾選多個條件進(jìn)行精確搜素。層次結(jié)構(gòu)矩陣結(jié)構(gòu)線性結(jié)構(gòu)自然結(jié)構(gòu)線性結(jié)構(gòu)是以時間為軸，設(shè)定好起點(diǎn)和終點(diǎn)后，中間所能發(fā)生的所有的事情都被設(shè)計(jì)成一種線性的體驗(yàn)。雖然它無法為用戶提供在網(wǎng)站上的每個流程的細(xì)節(jié)，但至少它顯示了你現(xiàn)在正處于關(guān)鍵線路的哪個點(diǎn)上。如南方航空公司官網(wǎng)上辦理乘機(jī)手續(xù)頁面，就是一步一步引導(dǎo)用戶操作。層次結(jié)構(gòu)矩陣結(jié)構(gòu)線性結(jié)構(gòu)自然結(jié)構(gòu)自然結(jié)構(gòu)不會遵循任何一致的模式。節(jié)點(diǎn)是逐一被連接起來的，同時這種結(jié)構(gòu)沒有太強(qiáng)烈的分類概念。自然結(jié)構(gòu)對于探索一系列關(guān)系不明確或一直在演變的主題是很合適的。如淘寶網(wǎng)中猜你喜

7、歡的欄目就是典型的自然結(jié)構(gòu)，它根據(jù)你瀏覽網(wǎng)頁的歷史記錄，經(jīng)過大數(shù)據(jù)分析而隨機(jī)推薦商品。以上四種結(jié)構(gòu)單一存在的形式并不多，大多數(shù)都是需要根據(jù)網(wǎng)站頁面功能類型進(jìn)行多種結(jié)構(gòu)的組合。如可以針對基礎(chǔ)內(nèi)容創(chuàng)建網(wǎng)站的層級結(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)后，接下來就是確定網(wǎng)站的導(dǎo)航欄目，再將信息對號入座的放置到它所在的功能頁面中。設(shè)計(jì)開發(fā)人員可以借助一些思維導(dǎo)圖軟件如X-