《用戶體驗(yàn)的要素》PPT課件.ppt

用戶體驗(yàn)的要素,以用戶為中心的Web設(shè)計(jì),北京中訊愛樂科技有限公司 2009.1215 柳驊凌,內(nèi)訓(xùn)課件,總目錄,用戶體驗(yàn)為何如此重要 認(rèn)識(shí)這些要素 戰(zhàn)略層：網(wǎng)站目標(biāo)和用戶需求 范圍層：網(wǎng)站目標(biāo)和用戶需求 結(jié)構(gòu)層：交互設(shè)計(jì)與信息構(gòu)架 框架層：界面的設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì) 表現(xiàn)層：視覺設(shè)計(jì) 要素的應(yīng)用,一、用戶體驗(yàn)為何如此重要？,日常生活中的遭遇 什么是用戶體驗(yàn) 用戶體驗(yàn)和網(wǎng)站 競爭優(yōu)勢和投資回報(bào)率 記住你的用戶,用戶體驗(yàn)（user experience） 產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用,早晨起來，發(fā)現(xiàn)鬧鐘沒有按照原先設(shè)定的響起來。 一邊煲水，一邊穿衣服，臨走前去取水卻發(fā)現(xiàn)水沒有煲好！ 到了地鐵站，羊城通沒有錢了。 卻發(fā)現(xiàn)機(jī)器充值無法識(shí)別你的羊城通，必須到7-11排隊(duì)。 終于成功坐上地鐵，卻不得不在地鐵門前排隊(duì)。 排了3趟地鐵，終于到了公司，你卻遲到了。 結(jié)果：盡管你已經(jīng)非常努力，但你還是遲到了。 那么，讓我們看看這一連串的倒霉事， 是什么讓我們?nèi)绱说姑梗?X職員悲慘一天,面對(duì)大量的選擇，用戶只能自己想辦法，去決定哪一個(gè)網(wǎng)站功能會(huì)符合她的需求。,企業(yè)開始意識(shí)到，提供優(yōu)質(zhì)的用戶體驗(yàn)式一個(gè)重要的、可持續(xù)的競爭優(yōu)勢。用戶體驗(yàn)形成了客戶對(duì)企業(yè)的整體印象，界定了企業(yè)和競爭對(duì)手的差異，并且決定了客戶時(shí)候還會(huì)再次光顧。,用戶體驗(yàn)和網(wǎng)站,競爭優(yōu)勢和投資回報(bào)率,投資所得到的回報(bào)（return on investment）或投資回報(bào)率（ROI） 轉(zhuǎn)化率（conversion rate）,花出去的每一元錢，能收回多少元的等值收益。,花出去的每一元錢，轉(zhuǎn)化成多少“企業(yè)價(jià)值”。 轉(zhuǎn)化率是一種常用的方式，來衡量用戶體驗(yàn)的效果。 通過跟蹤有百分之多少的用戶被“轉(zhuǎn)化”到下一個(gè)步驟，就能衡量你的網(wǎng)站在達(dá)到“商業(yè)目 的”方面的效率有多高。,3個(gè)注冊(cè)并訂閱郵件的用戶 36個(gè)訪問者 = 8.33%的轉(zhuǎn)化率,“偶然瀏覽者” “實(shí)際購買者”,優(yōu)質(zhì)的用戶體驗(yàn),差勁的購買過程的用戶體驗(yàn),科技產(chǎn)品沒有按照人們期望的那樣工作，這樣他們覺得自己很笨即使他們最終完成了自己想做的事情。那么人們會(huì)被你糟糕的用戶體驗(yàn)趕跑。,任何在用戶體驗(yàn)上所作的努力，目的都是為了提高效率：基本上以兩種方式體現(xiàn)出來： 幫助人們工作的更快； 減少他們犯錯(cuò)的幾率。,你用工具，還是工具用你？,記住你的用戶,以用戶為中心的設(shè)計(jì)（user-centered design） 在開發(fā)產(chǎn)品的每一個(gè)步驟中，都要把用戶列入考慮范圍內(nèi)。,考慮用戶體驗(yàn) 把它分為各個(gè)組成要素 從不同的角度來了解它 通過這些才能確保你控制了決策所造成的全部結(jié)果。,用戶體驗(yàn)很重要，最大的理由是：它對(duì)你的用戶很重要。,協(xié)調(diào)一致、直觀明了、甚至讓人愉快的體驗(yàn) “一次”每件事都按照正確的方式在工作”的體驗(yàn)。,總目錄,用戶體驗(yàn)為何如此重要 認(rèn)識(shí)這些要素 戰(zhàn)略層：網(wǎng)站目標(biāo)和用戶需求 范圍層：網(wǎng)站目標(biāo)和用戶需求 結(jié)構(gòu)層：交互設(shè)計(jì)與信息構(gòu)架 框架層：界面的設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì) 表現(xiàn)層：視覺設(shè)計(jì) 要素的應(yīng)用,考慮用戶有可能采取的每一個(gè)行動(dòng)的每一種可能性，并且去理解這個(gè)過程的每一個(gè)步驟中用戶的期望值?？梢园言O(shè)計(jì)用戶體驗(yàn)的工作分解為各個(gè)組成要素，以幫助我們更好地了解整個(gè)問題。 幾大決策：網(wǎng)站看起來怎么樣、它如何運(yùn)轉(zhuǎn)、它能讓你做什么。,表現(xiàn)層（surface） 一系列的網(wǎng)頁，由文字和圖片組成。,框架層（skeleton） 按鈕、表格、照片和文本區(qū)域的位置。,結(jié)構(gòu)層（structure） 確定網(wǎng)站各種特性和功能的最適合的組合方式。,范圍層（scope） 功能和特性是否要納入網(wǎng)站，即范圍。,戰(zhàn)略層（strategy） 經(jīng)營者和用戶分別想從網(wǎng)站得到什么。,五個(gè)層面,在每一個(gè)層面的決定都會(huì)影響到它之上層面的可用選擇。 這種依賴性意味著在戰(zhàn)略層上的決定將具有某種向上的“連鎖效應(yīng)”。 反過來講，也就意味著每個(gè)層面中我們可用的選擇，都受到其下層面中所確定的議題的約束。,這種連鎖效應(yīng)意味著在“ 較高層面” 中選擇一個(gè)界限之外的選項(xiàng)將需要重新考慮“較低層面”中所做出的決策。,這并不是說每一個(gè)“較低層面”上的決策都必須在設(shè)計(jì)“較高層面”之前做出。事物都有兩個(gè)方面，在“較高層面”中的決定有時(shí)會(huì)促成對(duì)“較低 層面”決策的一次重新評(píng)估（或者是第一次評(píng)估）。在每一個(gè)層面，我們都根據(jù)競爭對(duì)手所做的事情、業(yè)界最佳的實(shí)踐成果來做決定，這是最簡單不過的老常識(shí)。這些決策可能產(chǎn)生的連鎖效應(yīng)該是雙方向的。 如果想在開始“較高層面”設(shè)計(jì)之前，要完全確定“較低層面”的話，幾乎可以肯定的是，你已經(jīng)把你的項(xiàng)目日程也許是你最終產(chǎn)品的成功扔進(jìn)了一個(gè)危險(xiǎn)的境地之中。 相反地，應(yīng)該計(jì)劃好你的項(xiàng)目，讓任何一個(gè)層面中的工作都不能在其下層面的工作完成之前結(jié)束。這里最重要的一條是，在我們知道基本形狀之前，不能為房屋加上屋頂。,基本的雙重性,交互設(shè)計(jì)、信息設(shè)計(jì)、信息架構(gòu) 當(dāng)網(wǎng)站的用戶體驗(yàn)開始形成時(shí)，它的設(shè)計(jì)者采用的是兩種不同的語言。一群人把每一個(gè)問題看成是“應(yīng)用軟件”的設(shè)計(jì)問題，然后從傳統(tǒng)的桌面和客戶端軟件 的角度來考慮解決方案。另一群人則以信息的發(fā)布和檢索的角度來看待網(wǎng)站，然后從傳統(tǒng)出版、媒體和信息技術(shù)的角度來考慮問題的解決方案。 為了解決網(wǎng)頁這種基本的雙重性質(zhì)，讓我們從中間把這五個(gè)層面分開。 在軟件的一邊，我們主要關(guān)注的是任務(wù)所有的操作都被納入一個(gè)過程，去思考人們?nèi)绾瓮瓿蛇@個(gè)過程。在這里，我們把網(wǎng)站看成用戶用于完成一個(gè)或多個(gè)任務(wù)的一個(gè)或一組工具。 在超文本的一邊，我們的關(guān)注點(diǎn)是信息網(wǎng)站應(yīng)該提供哪些信息，這些信息對(duì)用戶的意義是什么。超文本就是創(chuàng)建一個(gè)“用戶可以穿越的信息空間”。,表現(xiàn)層（surface） 視覺設(shè)計(jì)，或者說最終產(chǎn)品的外觀。,框架層（skeleton） 不管是軟件界面還是信息空間，我們必須要完成信息設(shè)計(jì)（information design）。在軟件產(chǎn)品那邊，框架層還包括了安排好能讓用戶與系統(tǒng)的功能產(chǎn)生互動(dòng)的界面元素。對(duì)于信息空間方面來講，這種界面就是屏幕上的一些元素的組合，允許用戶在信息架構(gòu)中穿行。,結(jié)構(gòu)層（structure） 在軟件方面，結(jié)構(gòu)層將從范圍轉(zhuǎn)變成系統(tǒng)如何響應(yīng)用戶的請(qǐng)求。在信息空間方面，結(jié)構(gòu)層則是信息空間中內(nèi)容元素的分布。,范圍層（scope） 從戰(zhàn)略層進(jìn)入范圍層以后，在軟件方面它就轉(zhuǎn)變成對(duì)產(chǎn)品的“功能組合”的詳細(xì)描述。而在信息空間方面，范圍則是對(duì)各種內(nèi)容元素的要求的詳細(xì)描述。,戰(zhàn)略層（strategy） 來自企業(yè)外部的用戶需求（user need）是網(wǎng)站的目標(biāo)尤其是那些將要使用我們網(wǎng)站的用戶。與用戶需求相對(duì)應(yīng)的，是我們自己對(duì)網(wǎng)站的期望目標(biāo)。,總目錄,用戶體驗(yàn)為何如此重要 認(rèn)識(shí)這些要素 戰(zhàn)略層：網(wǎng)站目標(biāo)和用戶需求 范圍層：網(wǎng)站目標(biāo)和用戶需求 結(jié)構(gòu)層：交互設(shè)計(jì)與信息構(gòu)架 框架層：界面的設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì) 表現(xiàn)層：視覺設(shè)計(jì) 要素的應(yīng)用,戰(zhàn)略層,成功的用戶體驗(yàn)，其基礎(chǔ)是一個(gè)被明確表達(dá)的“戰(zhàn)略”。知道企業(yè)與用戶雙方對(duì)網(wǎng)站的期許和目標(biāo)，有助于確立用戶體驗(yàn)各方面戰(zhàn)略的制定。,范圍層,結(jié)構(gòu)層,框架層,表現(xiàn)層,網(wǎng)站目標(biāo)和用戶需求,戰(zhàn)略層定義 網(wǎng)站目標(biāo) 用戶需求 團(tuán)隊(duì)角色和流程,戰(zhàn)略層的定義,我們要從這個(gè)網(wǎng)站得到什么？-網(wǎng)站目標(biāo) 我們的用戶要從這個(gè)網(wǎng)站得到什么？-用戶需求,明確 當(dāng)我們能越清楚明確地表達(dá)我們想要什么，以及確切地知道其他人想要從我們這里得到什么，我們就能越明確地滿足雙方需求。,網(wǎng)站目標(biāo) 商業(yè)目標(biāo) 品牌識(shí)別 成功標(biāo)準(zhǔn),成功標(biāo)準(zhǔn)(success metric) 一些可最終目標(biāo)，在網(wǎng)站推出以后用來顯示它是否滿足了我們自己的目標(biāo)和用戶的需求。,目標(biāo),此例中，通過衡量每一個(gè)注冊(cè)用戶單月的訪問次數(shù)表明了此網(wǎng)站對(duì)核心用戶的價(jià)值。,改版后的上線日期,陷阱：認(rèn)為我們正在為理想用戶設(shè)計(jì)網(wǎng)站，理想用戶既是“某些與我們完全一樣的用戶”。,人口統(tǒng)計(jì)學(xué)方法：性別、年齡、教育水平、婚姻狀況、收入等等； 心理學(xué)統(tǒng)計(jì)辦法：記錄用戶的心理因素； 用戶對(duì)技術(shù)和網(wǎng)頁本身的觀點(diǎn)【重要屬性】 你的用戶每周話費(fèi)多少時(shí)間使用網(wǎng)絡(luò)？ 計(jì)算機(jī)是他們?nèi)粘Ｉ畹囊徊糠謫幔?他們喜歡和技術(shù)打交道嗎？ 他們總是有最新最好的硬件嗎？,我們的設(shè)計(jì)必須容納不同類型的用戶群。,市場調(diào)研方法：得知用戶普遍信息的寶貴資源； 現(xiàn)場調(diào)查方法：了解日常生活情景中的用戶行為； 任務(wù)分析方法：用戶與網(wǎng)站交互行為都發(fā)生在某一任務(wù)的環(huán)境中； 用戶測試方法：讓用戶幫忙測試你的產(chǎn)品； 卡片排序法：探索用戶如何分類或組織各種信息元素； 創(chuàng)建任務(wù)角色：使你的用戶真實(shí)再現(xiàn)在設(shè)計(jì)者心中；,用戶需求,用戶細(xì)分,可用性和用戶研究,團(tuán)隊(duì)角色和流程,總目錄,用戶體驗(yàn)為何如此重要 認(rèn)識(shí)這些要素 戰(zhàn)略層：網(wǎng)站目標(biāo)和用戶需求 范圍層：網(wǎng)站目標(biāo)和用戶需求 結(jié)構(gòu)層：交互設(shè)計(jì)與信息構(gòu)架 框架層：界面的設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì) 表現(xiàn)層：視覺設(shè)計(jì) 要素的應(yīng)用,范圍層,戰(zhàn)略層,當(dāng)你把用戶需求和網(wǎng)站目標(biāo)轉(zhuǎn)變成網(wǎng)站應(yīng)該提供給用戶什么樣的內(nèi)容和功能時(shí)，戰(zhàn)略就變成了范圍。,結(jié)構(gòu)層,框架層,表現(xiàn)層,功能規(guī)格和內(nèi)容需求,范圍層的定義 功能和內(nèi)容 收集初秋 功能規(guī)格 內(nèi)容需求 確定需求優(yōu)先級(jí),范圍層的定義,一個(gè)有價(jià)值的過程導(dǎo)致一個(gè)有價(jià)值的產(chǎn)品。,過程：確定現(xiàn)在能解決的事情，以及哪些事情遲些才能解決； 產(chǎn)品：給團(tuán)隊(duì)一個(gè)參考點(diǎn)，保證在開發(fā)過程中不會(huì)出現(xiàn)模棱兩可的情況； 工作流程、日程安排、里程碑可視性文檔； 理由1：這樣你才知道正在建設(shè)什么 理由2：這樣你才知道不需要建設(shè)什么,一月（現(xiàn)在） 四月 七月 十月 （明年）一月,版本1.0 - - - - - - - -,版本1.1 - - - - - - - -,當(dāng)前難以滿足的需求，可以成為啟動(dòng)下一版本的基礎(chǔ)，這樣就能形成一個(gè)不斷循環(huán)的開發(fā)過程。,軟件式網(wǎng)站：哪些應(yīng)該被成為軟件產(chǎn)品的“組成部分”功能規(guī)格； 項(xiàng)目初期階段需求：描述系統(tǒng)應(yīng)該做什么 項(xiàng)目末期階段需求：描述系統(tǒng)真正完成了什么 文本式網(wǎng)站：編輯和營銷推廣確定內(nèi)容范圍內(nèi)容管理系統(tǒng)； 內(nèi)容管理系統(tǒng)必備的功能取決于你要管理的內(nèi)容的性質(zhì)； 功能需求常常伴隨著內(nèi)容需求；,功能和內(nèi)容,收集需求,人們講述的、他們想要的東西 用戶實(shí)際想要的東西 人們不知道他們是否需要的特性潛在需求,作者,內(nèi)容編輯,文字編輯,管理層,律師,用戶,功能規(guī)格,存在問題 閱讀起來枯燥，占用大量編碼時(shí)間，沒有人讀； 實(shí)施過程中事情會(huì)發(fā)生變化維護(hù)功能規(guī)格、及時(shí)更新【重要】 撰寫規(guī)則 樂觀：描寫這個(gè)系統(tǒng)件要做什么去“防止”不好的事情發(fā)生，而不是描述“不應(yīng)該” 具體：盡可能詳細(xì)描述清楚狀況 避免主觀的語氣：保持明確、避免歧義,內(nèi)容需求（內(nèi)容清單）,確定文本的字?jǐn)?shù)、圖片的像素、下載文件的字節(jié)等基本元素； 確認(rèn)某個(gè)人來負(fù)責(zé)某一個(gè)內(nèi)容元素； 日常維護(hù)工作； 每一內(nèi)容元素的更新頻率； 如何呈現(xiàn)它們；,確定需求優(yōu)先級(jí),排列出那些功能應(yīng)該包含到項(xiàng)目中去； 實(shí)現(xiàn)這些需求的可行性有多大？ 技術(shù)局限復(fù)發(fā)實(shí)現(xiàn) 需要太多資源，人力物力超出了我們所有的范圍 時(shí)間局限 網(wǎng)站的內(nèi)容特性需要其他特性的支持，導(dǎo)致特性的沖突； 優(yōu)先級(jí)別是決定人們所建議的相關(guān)特性的首要因素； 與管理層談判 與管理層確定戰(zhàn)略而不是實(shí)現(xiàn)這個(gè)目標(biāo)的各種手段； 技術(shù)人員的溝通技巧,有時(shí)一個(gè)戰(zhàn)略目標(biāo)將產(chǎn)生多個(gè)需求。另一方面，一個(gè)需求也可以實(shí)現(xiàn)多個(gè)戰(zhàn)略目標(biāo)。,總目錄,用戶體驗(yàn)為何如此重要 認(rèn)識(shí)這些要素 戰(zhàn)略層：網(wǎng)站目標(biāo)和用戶需求 范圍層：網(wǎng)站目標(biāo)和用戶需求 結(jié)構(gòu)層：交互設(shè)計(jì)與信息構(gòu)架 框架層：界面的設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì) 表現(xiàn)層：視覺設(shè)計(jì) 要素的應(yīng)用,戰(zhàn)略層,在收集完用戶需求并將其排列好優(yōu)先級(jí)后，需求并沒有說明如何將這些分散的片段組成一個(gè)整體，這就是結(jié)構(gòu)層：為網(wǎng)站創(chuàng)建一個(gè)概念結(jié)構(gòu)。,范圍層,結(jié)構(gòu)層,框架層,表現(xiàn)層,交互設(shè)計(jì)與信息構(gòu)架,結(jié)構(gòu)層的定義 交互設(shè)計(jì) 信息構(gòu)架 團(tuán)隊(duì)角色和流程,結(jié)構(gòu)層的定義,交互設(shè)計(jì)：作為軟件界面的網(wǎng)頁，為用戶設(shè)計(jì)結(jié)構(gòu)化體驗(yàn) 信息架構(gòu)：作為超文本的網(wǎng)頁，內(nèi)容建設(shè)通過信息架構(gòu)構(gòu)建用戶體驗(yàn) 它們關(guān)心的是理解用戶、用戶的工作方式和思考方式,確定各個(gè)將要呈現(xiàn)給用戶的選項(xiàng)的模式和順序。,交互設(shè)計(jì),交互設(shè)計(jì)關(guān)注與描述“可能的用戶行為”，同時(shí)定義“系統(tǒng)如何配合與響應(yīng)”； 用戶與軟件的和平相處。,概念模型,“交互組件將怎樣工作”概念模型 例如，這是內(nèi)容元素還是用戶訪問的位置還是用戶請(qǐng)求的對(duì)象？ 以購物車為例，使用用戶熟悉的概念模型能使用戶很快適應(yīng)不熟悉的網(wǎng)站。,錯(cuò)誤處理,當(dāng)人們犯錯(cuò)誤的時(shí)候，系統(tǒng)如何反應(yīng)？如何防止用戶繼續(xù)犯錯(cuò)？,方式一：將系統(tǒng)設(shè)置為不可能犯錯(cuò)的那種。 方式二：是錯(cuò)誤難以發(fā)生，系統(tǒng)幫助用戶找出錯(cuò)誤并修正它們。 當(dāng)用戶完成動(dòng)作后才發(fā)現(xiàn)做錯(cuò)了，系統(tǒng)應(yīng)該為用戶提供從錯(cuò)誤中恢復(fù)的方式?！局刈觥?當(dāng)無法恢復(fù)時(shí)，提供大量警告。,信息架構(gòu),信息架構(gòu)著重于設(shè)計(jì)組織分類和導(dǎo)航的結(jié)構(gòu)，從而讓用戶高效率、有效地瀏覽網(wǎng)頁內(nèi)容； 信息架構(gòu)的分類體系,內(nèi)容,分類,內(nèi)容,分類,從上而下的架構(gòu)方法 “網(wǎng)站目標(biāo)和用戶需求的理解”,從下而上的架構(gòu)方法 內(nèi)容和弄能需求的分析,一個(gè)適應(yīng)性強(qiáng)的信息架構(gòu)系統(tǒng)，能把新內(nèi)容作為現(xiàn)有結(jié)構(gòu)的一部分容納進(jìn)來（左圖），也可以把新內(nèi)容當(dāng)成一個(gè)完整的新部分加入（右圖）,結(jié)構(gòu)方法,信息架構(gòu)的基本單位是節(jié)點(diǎn)。 節(jié)點(diǎn)對(duì)應(yīng)任意的信息片段或組合，節(jié)點(diǎn)的安排方式： 在層級(jí)結(jié)構(gòu)（樹狀結(jié)構(gòu)、中心輻射結(jié)構(gòu)），節(jié)點(diǎn)與其他相關(guān)節(jié)點(diǎn)之間存在父級(jí)/子級(jí)關(guān)系; 在矩陣結(jié)構(gòu)中，允許用戶在節(jié)點(diǎn)與節(jié)點(diǎn)之間沿著兩個(gè)或更多的“唯度”移動(dòng)； 在自然結(jié)構(gòu)中，不遵循任何一致的模式，節(jié)點(diǎn)被逐一連接，用于關(guān)系不明確或演變中的主題； 在線性結(jié)構(gòu)中，最基本的信息結(jié)構(gòu)類型，逐一而連貫；,組織原則,我們決定哪些節(jié)點(diǎn)要編成一組，哪些節(jié)點(diǎn)要保持獨(dú)立的標(biāo)準(zhǔn)即組織原則。 應(yīng)創(chuàng)建一個(gè)與“網(wǎng)站目標(biāo)”和“用戶需求”相對(duì)應(yīng)的、正確的結(jié)構(gòu)。 截面：內(nèi)容不同的屬性，使用錯(cuò)誤的截面比沒有使用截面更糟糕。,語言和元數(shù)據(jù),命名原則：描述、標(biāo)簽和網(wǎng)站使用的其他術(shù)語。 控制性詞典：保證網(wǎng)站“使用用戶的語言”并“保持一致性”。 元數(shù)據(jù)：關(guān)于信息的信息，即以一種結(jié)構(gòu)化的方式來描述內(nèi)容。,團(tuán)隊(duì)角色和流程,架構(gòu)圖描述網(wǎng)站結(jié)構(gòu)的工具術(shù)語； 架構(gòu)圖的主要內(nèi)容：哪些類別要放在一起？哪些保持獨(dú)立？交互過程中那些步驟如何相互配合？ 視覺辭典 “誰負(fù)責(zé)這件事情”，通常取決于企業(yè)文化或項(xiàng)目本質(zhì)。,首頁,媒體信息,產(chǎn)品,新聞,家用產(chǎn)品,辦公室產(chǎn)品,在線支持,文檔,首頁,入口頁,登錄流程,最新消息,2a,2C,技術(shù)報(bào)告,前往 用戶列表,視覺辭典是一個(gè)提供重非常簡單（如左圖），到非常復(fù)雜（如右圖）的示意結(jié)構(gòu)系統(tǒng)。,總目錄,用戶體驗(yàn)為何如此重要 認(rèn)識(shí)這些要素 戰(zhàn)略層：網(wǎng)站目標(biāo)和用戶需求 范圍層：網(wǎng)站目標(biāo)和用戶需求 結(jié)構(gòu)層：交互設(shè)計(jì)與信息構(gòu)架 框架層：界面的設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì) 表現(xiàn)層：視覺設(shè)計(jì) 要素的應(yīng)用,框架層,戰(zhàn)略層,在充滿概念的結(jié)構(gòu)層中形成了大量的需求，框架層中，我們要更進(jìn)一步地提煉這些結(jié)構(gòu)，確定詳細(xì)的界面外觀、導(dǎo)航和信息設(shè)計(jì)，使晦澀的結(jié)構(gòu)變得實(shí)在。,范圍層,結(jié)構(gòu)層,表現(xiàn)層,界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì),框架層的定義 習(xí)慣和比喻 界面設(shè)計(jì) 導(dǎo)航設(shè)計(jì) 信息設(shè)計(jì) 線框圖,框架層的定義,界面設(shè)計(jì)：確定框架，“按鈕、輸入框、界面控件”的領(lǐng)域； 導(dǎo)航設(shè)計(jì)：呈現(xiàn)信息； 信息設(shè)計(jì)：呈現(xiàn)有效地信息溝通。,確定用什么樣的公恩形式來實(shí)現(xiàn)。,習(xí)慣和比喻,如果我們減少很多反射作用，每天能完成的事情會(huì)大大減少。 避免比喻，就是要減少對(duì)用戶在“理解和使用網(wǎng)上功能”時(shí)對(duì)心理的要求。,界面設(shè)計(jì),成功的界面設(shè)計(jì)是那些能讓用戶一眼就看到“最重要的東西”的界面設(shè)計(jì)。 一個(gè)設(shè)計(jì)良好的界面是要組織好用戶最常采用的行為，同時(shí)讓這些界面元素用最容易 的方式獲取和使用。（把用戶最可能用到的按鈕設(shè)計(jì)成最大的一個(gè)） 技巧一：在界面第一次呈現(xiàn)給用戶的時(shí)候，仔細(xì)考慮每一個(gè)選項(xiàng)的默認(rèn)值； 技巧二：自動(dòng)記住用戶最后一次選擇狀態(tài)的系統(tǒng)。 為用戶想完成的任務(wù)選擇正確的界面元素，通過一種能迅速理解和易于使用的方式， 把他們放置到頁面上去； 錯(cuò)誤信息以及說明信息的設(shè)計(jì)如何讓用戶真正去閱讀這些文字？,導(dǎo)航設(shè)計(jì),目標(biāo)一：必須提供給用戶一種在網(wǎng)站間跳轉(zhuǎn)的方法。（真實(shí)有效的鏈接） 目標(biāo)二：必須傳達(dá)出這些元素和它們所包含內(nèi)容之間的關(guān)系。 這些鏈接之間有什么關(guān)系？ 是否其中一些比別的更重要？ 它們之間的差異在哪里？ 目標(biāo)三：必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁面之間的關(guān)系。,任何一個(gè)網(wǎng)站的導(dǎo)航設(shè)計(jì)都必須完成以下3個(gè)目標(biāo)！,哪些鏈接對(duì)用戶是有效的？,幾種常見的導(dǎo)航系統(tǒng)：,全局導(dǎo)航：覆蓋整個(gè)網(wǎng)站的通路。 局部導(dǎo)航：提供給用戶在這個(gè)架構(gòu)中道“附件地點(diǎn)”的通路。 輔助導(dǎo)航：提供全局和局部導(dǎo)航不能快速到達(dá)的相關(guān)內(nèi)容的快捷途徑。 上下文導(dǎo)航：嵌入頁面自身內(nèi)容的一種導(dǎo)航。 友好導(dǎo)航：聯(lián)系方式、反饋表單、企業(yè)信息、法律聲明等信息的導(dǎo)航。 遠(yuǎn)程導(dǎo)航 網(wǎng)站地圖 索引表,信息設(shè)計(jì),最終目的：反映你的用戶的思路，支持他們的任務(wù)和目標(biāo)。,線框圖,頁面布局是將信息設(shè)計(jì)、界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)放置到一起，形成統(tǒng)一、有內(nèi)在凝聚力的架構(gòu)的地方。,網(wǎng)站標(biāo)志,全局導(dǎo)航,友好導(dǎo)航,指示標(biāo)示線索,友好導(dǎo)航,局部導(dǎo)航,輔助導(dǎo)航,搜索,下拉菜單,文本輸入,按鈕,合作伙伴,主題圖片,正文,線框圖捕獲所有在框架層做出的決定，并用一個(gè)文檔來展現(xiàn)他們。它作為視覺設(shè)計(jì)和網(wǎng)站實(shí)施的參考來使用。 三要素： 通過安排和選擇界面元素來整合界面設(shè)計(jì) 通過識(shí)別和定義核心導(dǎo)航系統(tǒng)來整合導(dǎo)航設(shè)計(jì) 通過放置和排列信息組成部分的優(yōu)先級(jí)來整合 信息設(shè)計(jì),總目錄,用戶體驗(yàn)為何如此重要 認(rèn)識(shí)這些要素 戰(zhàn)略層：網(wǎng)站目標(biāo)和用戶需求 范圍層：網(wǎng)站目標(biāo)和用戶需求 結(jié)構(gòu)層：交互設(shè)計(jì)與信息構(gòu)架 框架層：界面的設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì) 表現(xiàn)層：視覺設(shè)計(jì) 要素的應(yīng)用,框架層,戰(zhàn)略層,內(nèi)容、功能和美學(xué)匯集到一起來產(chǎn)生一個(gè)最終設(shè)計(jì)，從而滿足其他層面的所有目標(biāo)。,范圍層,結(jié)構(gòu)層,表現(xiàn)層,視覺設(shè)計(jì),表現(xiàn)層的定義 忠于眼睛 對(duì)比和一致性 內(nèi)部和外部的一致性 配色方案和排版 設(shè)計(jì)合成品和風(fēng)格指南,表現(xiàn)層的定義,“彌補(bǔ)網(wǎng)站框架層的邏輯排布”的視覺呈現(xiàn)問題。,忠于眼睛,你的視線首先落在什么地方？ 哪個(gè)設(shè)計(jì)要素在第一時(shí)間吸引用戶的注意力？ 它們對(duì)戰(zhàn)略目標(biāo)來講是很重要的東西嗎？ 用戶第一時(shí)間注意到的東西與你的目標(biāo)是否一致？,如果你的設(shè)計(jì)是成功的，那么用戶的眼睛在頁面上移動(dòng)的軌跡模式應(yīng)該有以下兩個(gè)特點(diǎn)：,首先，他們遵循的是一條流暢的路徑。 第二，在不需要用太多細(xì)節(jié)來嚇倒