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

標(biāo)題 字體 微軟雅黑粗體字號(hào) 32 36pt顏色 主題藍(lán)色副標(biāo)題 字體 微軟雅黑字號(hào) 24pt顏色 主題灰色 網(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é)設(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)用合理的組織方式使信息以人們熟悉或易于接受的方式展示出來(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)的圖片鏈接入口 即可跳轉(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ì)一頭霧水 從首頁(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é)構(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ù)網(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 招代理商 有專門的代理商入口 他們提供鏈接地址 于是我們就用到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)系 單擊首頁(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) 圖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ì)于較為繁瑣的功