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

標(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案例 活動(dòng)頁面設(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)站的信息框架 確定信息的組織系統(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)站的設(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ù)眾包平臺(tái)豬八戒網(wǎng)在用戶注冊成功后的 新人上路 頁面 就是按照用戶來分類 頁面中分有兩種角色 一個(gè)是雇人辦事的雇主 另一個(gè)是接單賺錢的服務(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ù)可能會(huì)不一樣 而從組織方式的維度出發(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) 它通過樹狀圖的方式對一個(gè)事物的結(jié)構(gòu)進(jìn)行逐層分解 一般是從父級向子集深挖 有時(shí)也可能是自下而上或者是雙向的 比如京東網(wǎng)的商品組織方式就使用了層級結(jié)構(gòu) 盡管其功能繁雜 但使用起來卻不會(huì)一頭霧水 從首頁左側(cè)的固定菜單我們即可看到該網(wǎng)站的層級結(jié)構(gòu) 一級菜單將 全部商品分類 分為了15個(gè)部分 這是層級結(jié)構(gòu)的最頂層 當(dāng)鼠標(biāo)懸停一級菜單時(shí)會(huì)看到一級導(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)之間沿著兩個(gè)或更多的 維度 移動(dòng) 通常能幫助那些 帶著不同需求而來 的用戶 使他們能在一個(gè)頁面中尋找各自想要的東西 如在去哪兒網(wǎng)中酒店團(tuán)購頁面 就較好地應(yīng)用了矩陣結(jié)構(gòu) 頁面中提供了 位置 分類 價(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ǎng)站上的每個(gè)流程的細(xì)節(jié) 但至少它顯示了你現(xiàn)在正處于關(guān)鍵線路的哪個(gè)點(diǎn)上 如南方航空公司官網(wǎng)上辦理乘機(jī)手續(xù)頁面 就是一步一步引導(dǎo)用戶操作 層次結(jié)構(gòu)矩陣結(jié)構(gòu)線性結(jié)構(gòu)自然結(jié)構(gòu) 自然結(jié)構(gòu)不會(huì)遵循任何一致的模式 節(jié)點(diǎn)是逐一被連接起來的 同時(shí)這種結(jié)構(gòu)沒有太強(qiáng)烈的分類概念 自然結(jié)構(gòu)對于探索一系列關(guān)系不明確或一直在演變的主題是很合適的 如淘寶網(wǎng)中猜你喜歡的欄目就是典型的自然結(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 mind Mindmanager理清網(wǎng)站信息的層級結(jié)構(gòu) 進(jìn)而對網(wǎng)站的導(dǎo)航進(jìn)行分類 分享 速合通 的金融代理產(chǎn)品的公司網(wǎng)頁設(shè)計(jì) 此時(shí)他們正處于創(chuàng)業(yè)階段 客戶提出希望具備以下功能1 對其品牌和產(chǎn)品進(jìn)行介紹 2 還希望招賢納士3 招代理商 有專門的代理商入口 他們提供鏈接地址 于是我們就用到x mind對其網(wǎng)站信息進(jìn)行分類 1 層級關(guān)系 1 網(wǎng)站首頁 近期活動(dòng)的banner 產(chǎn)品中心 合作伙伴 在線服務(wù) 懸停于每個(gè)頁面 2 關(guān)于速合通 專業(yè)知識 企業(yè)文化 人才招聘3 新聞中心 公司新聞 行業(yè)新聞4 產(chǎn)品中心 產(chǎn)品1 產(chǎn)品2 產(chǎn)品35 招商合作 項(xiàng)目優(yōu)勢 加盟條件 招商信息6 代理商入口 2 自然關(guān)系 單擊首頁中的產(chǎn)品中心的產(chǎn)品鏈接后會(huì)跳轉(zhuǎn)到產(chǎn)品中心的詳細(xì)頁面 每個(gè)功能的頁面分布可以基本擬定 此時(shí)的線框圖不用完善細(xì)節(jié) 只要記錄每個(gè)頁面信息及功能即可 此時(shí)的線框圖可以手繪也可以直接上電子稿 本案例中是繪制的是電子稿 為了區(qū)分功能板塊 在色彩上有所區(qū)分 與視覺效果無關(guān) 圖4 18 速合通 首頁線框圖 圖4 19 速合通 部分二級頁面 4 2 2提高用戶體驗(yàn)的交互技巧 第一 刪除不必要的內(nèi)容 聚焦核心 界面中的各種小細(xì)節(jié)會(huì)增加用戶的負(fù)擔(dān) 去掉可有可無的選項(xiàng) 內(nèi)容和分散人們注意力的視覺元素 在此我們來對比一下QQ空間網(wǎng)頁版內(nèi)嵌游戲界面2012年與2016年的設(shè)計(jì)稿 看似兩者功能布局一樣 實(shí)際上有多處細(xì)節(jié)做了簡化 第二 組織信息 排定優(yōu)先級 著手組織信息之前首先要理解用戶的行為 然后要平衡經(jīng)營者的商業(yè)利益 再者運(yùn)用用戶心智模型去設(shè)計(jì)交互細(xì)節(jié) 最后確定用戶想要達(dá)到什么樣的目的 并排定優(yōu)先級次序 優(yōu)酷土豆網(wǎng) 如優(yōu)酷土豆視頻與愛奇藝pps視頻網(wǎng)站 兩者均為視頻網(wǎng)站 但頁面的信息組織卻大不一樣 愛奇藝pps網(wǎng) 優(yōu)酷土豆首頁內(nèi)容由廣告與熱播 獨(dú)播視頻組成 廣告與視頻鏈接混排在一起 固定區(qū)域不可關(guān)閉 視頻鏈接是將熱播與獨(dú)播的節(jié)目大小不一的排版在一起 顯得視頻種類的多樣化 但由于選擇過多 面積區(qū)域較小的視頻鏈接反而容易被忽略 愛奇藝pps首頁的廣告出現(xiàn)8秒后會(huì)自動(dòng)關(guān)閉 在首頁寸土寸金的地方大面積的出現(xiàn)是 全網(wǎng)首播 全網(wǎng)獨(dú)播 的視頻信息 第三 隱藏與轉(zhuǎn)移 不重要和不常用的功能隱藏起來 對于較為繁瑣的功