《用戶體驗(yàn)與系統(tǒng)創(chuàng)新設(shè)計(jì)》第十三章互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)課件

1、用戶體驗(yàn)與系統(tǒng)創(chuàng)新設(shè)計(jì)User Experience and System Innovation Design 第十三章 互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)第1頁，共47頁。內(nèi)容CONTENTS01互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)的概念02互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)的層次03互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)方法0405互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)的一般過程互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)的一些原則及注意事項(xiàng)06移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)第2頁，共47頁?；ヂ?lián)網(wǎng)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)的概念Concept of User Experience Design for Internet Products01認(rèn)識(shí)互聯(lián)網(wǎng)產(chǎn)品互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)與用戶體驗(yàn)互聯(lián)網(wǎng)產(chǎn)品用戶

2、體驗(yàn)的分類第3頁，共47頁。認(rèn)識(shí)互聯(lián)網(wǎng)產(chǎn)品互聯(lián)網(wǎng)產(chǎn)品，指以互聯(lián)網(wǎng)為媒介、以信息科學(xué)為支撐、給用戶提供價(jià)值和服務(wù)的整套體系。它從傳統(tǒng)意義上的“產(chǎn)品”延伸而來，是在互聯(lián)網(wǎng)領(lǐng)域中產(chǎn)出而用于經(jīng)營的商品，是滿足用戶需求和欲望的無形載體，也是網(wǎng)站功能與服務(wù)的集成。像“新聞”類，如新浪網(wǎng)、網(wǎng)易新聞等；“即時(shí)通訊”類，如QQ、微信等；“博客”類，如博客網(wǎng)、新浪微博等；“購物”類，如淘寶、一號店等這些都在以虛擬產(chǎn)品的形式，為人們的日常生活提供各種便利。隨著科學(xué)與技術(shù)的發(fā)展，移動(dòng)互聯(lián)網(wǎng)也發(fā)展迅猛，在日常生活中已經(jīng)起到了不可忽視的作用。不管是PC端、還是移動(dòng)互聯(lián)網(wǎng)產(chǎn)品，其本質(zhì)都是基于互聯(lián)網(wǎng)的信息載體?；ヂ?lián)網(wǎng)產(chǎn)品具有

3、非物質(zhì)性、交互性、多維性和多媒體性等特性。與其它多媒體界面不同，網(wǎng)站除了文字、圖像、聲音、視頻和動(dòng)畫等多媒體元素以外，還有不可或缺的色彩、版式布局及借助于網(wǎng)絡(luò)和計(jì)算機(jī)語言來實(shí)現(xiàn)信息傳達(dá)的、具有交互功能的菜單、按鈕、鏈接等動(dòng)態(tài)元素。第4頁，共47頁?；ヂ?lián)網(wǎng)產(chǎn)品設(shè)計(jì)與用戶體驗(yàn)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)是指通過用戶研究和分析進(jìn)行的整套服務(wù)體系和價(jià)值體系的設(shè)計(jì)工作。它基于用戶體驗(yàn)思想、伴隨著互聯(lián)網(wǎng)產(chǎn)品生命周期，包含一系列設(shè)計(jì)活動(dòng)，如用戶需求研究與分析、規(guī)劃、管理、信息架構(gòu)、UI設(shè)計(jì)、原型設(shè)計(jì)、測試、開發(fā)與迭代等階段。其中，迭代也可以同時(shí)進(jìn)行，比如對產(chǎn)品需求和原型的迭代；最開始先上線產(chǎn)品核心功能，然后逐漸迭代上線其

4、它功能等。由于產(chǎn)品不同，迭代可能發(fā)生的時(shí)間和環(huán)節(jié)也不盡相同。互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)歷了由表及里、遞進(jìn)深入的過程，從最開始的著重美觀性到以用戶為中心的設(shè)計(jì)，再到后來的用戶參與式設(shè)計(jì)，直到今天，互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)才得以明確以用戶體驗(yàn)為核心。設(shè)計(jì)理念上的進(jìn)化，反映著對用戶需求本質(zhì)不斷深入的理解，旨在為企業(yè)創(chuàng)造可持續(xù)的利益。研究表明，互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)不僅受產(chǎn)品實(shí)用性、易用性的影響，還與情感化設(shè)計(jì)有密切的聯(lián)系，需要從產(chǎn)品策略到最后細(xì)節(jié)的全面把握，從體驗(yàn)、視覺、交互、技術(shù)可實(shí)現(xiàn)性和商業(yè)利益等角度全方位地思考，才能設(shè)計(jì)出真正好的互聯(lián)網(wǎng)產(chǎn)品。第5頁，共47頁?；ヂ?lián)網(wǎng)產(chǎn)品用戶體驗(yàn)的分類與傳統(tǒng)實(shí)物商品相比，互聯(lián)網(wǎng)產(chǎn)品

5、的用戶體驗(yàn)大體上可概括為以下五大類。1感官體驗(yàn)：主要指呈現(xiàn)給用戶視聽上的體驗(yàn)，強(qiáng)調(diào)舒適性和感官刺激，包括設(shè)計(jì)風(fēng)格、網(wǎng)站LOGO、頁面加載速度（策略）、頁面布局、頁面色彩、動(dòng)畫效果、頁面導(dǎo)航、圖片展示、圖標(biāo)使用、廣告位布局、背景音樂等方面帶給用戶的感受；2交互體驗(yàn)：指用戶操作上的體驗(yàn)，強(qiáng)調(diào)易用/可用性。交互體驗(yàn)包括各種網(wǎng)頁交互項(xiàng)目在用戶使用中帶給用戶的感受；3瀏覽體驗(yàn)：指用戶瀏覽網(wǎng)頁時(shí)的體驗(yàn)，重點(diǎn)是內(nèi)容體驗(yàn)和閱讀體驗(yàn)，強(qiáng)調(diào)吸引性，包括內(nèi)容、原創(chuàng)性、信息的價(jià)值/有用性、更新頻率、編寫方式、文字排列、分頁瀏覽等網(wǎng)頁要素，特別強(qiáng)調(diào)當(dāng)瀏覽網(wǎng)頁時(shí)這些要素帶給用戶的感受；4情感體驗(yàn)：指網(wǎng)頁呈現(xiàn)給用戶時(shí)帶來的

6、心理上的感受，強(qiáng)調(diào)友好性以及與用戶關(guān)系的維系，包括問候提示、交流、反饋、推薦、答疑、網(wǎng)站地圖等網(wǎng)頁元素及相關(guān)策略，合理地使用會(huì)給用戶帶來感情上受到尊敬、關(guān)愛之類的感受，產(chǎn)生情感的共鳴；此外，還包括網(wǎng)站帶給用戶的基礎(chǔ)價(jià)值、超越基礎(chǔ)價(jià)值的期望價(jià)值和附加價(jià)值的體驗(yàn)；5信任體驗(yàn)：指呈現(xiàn)給用戶的可信賴感，強(qiáng)調(diào)可靠性，包括公司介紹、商業(yè)品牌、服務(wù)保障、投訴途徑、安全及隱私條款、法律聲明等網(wǎng)頁元素。對網(wǎng)站的信任源于多方面因素的綜合作用，當(dāng)然也包括品牌、網(wǎng)站內(nèi)容好壞、信息是否完整、能否方便地找到相關(guān)信息等。第6頁，共47頁?；ヂ?lián)網(wǎng)產(chǎn)品用戶體驗(yàn)的層次Level of User Experience of Int

7、ernet Products02互聯(lián)網(wǎng)產(chǎn)品的功能性互聯(lián)網(wǎng)產(chǎn)品的可用性互聯(lián)網(wǎng)產(chǎn)品的合意性互聯(lián)網(wǎng)產(chǎn)品的品牌體驗(yàn)第7頁，共47頁?；ヂ?lián)網(wǎng)產(chǎn)品用戶體驗(yàn)的層次研究表明，影響互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)的關(guān)鍵因素有四個(gè)方面，即產(chǎn)品的功能性、可用性、合意性以及品牌體驗(yàn)，這構(gòu)成了從核心要素到關(guān)聯(lián)感受次第擴(kuò)展的層次（圖13-1）。圖13-1 互聯(lián)網(wǎng)產(chǎn)品體驗(yàn)的層次第8頁，共47頁。互聯(lián)網(wǎng)產(chǎn)品的功能性功能性（Functionality）是指一個(gè)產(chǎn)品實(shí)現(xiàn)某種目的或滿足某種期望的效力。當(dāng)產(chǎn)品滿足了用戶的某個(gè)功能需要時(shí)，一方面是指在使用的過程當(dāng)中能否順利的完成操作；另一方是指使用之后能否達(dá)到預(yù)期的效果。如果產(chǎn)品功能無法滿足用戶最基

8、本的需求（如團(tuán)隊(duì)在線協(xié)同工具無法滿足文件共享的功能），那么用戶用就不會(huì)再來第二次，這將是一次糟糕的使用體驗(yàn)；但若有些功能部分滿足用戶的需求，或許會(huì)給用戶留下一個(gè)“還行”的印象。產(chǎn)品能不能用需要用完善的測試來解決，邀請用戶或?qū)＜覅⑴c測試，是改善功能性好的途徑。用戶都是帶著某種目的或期望選擇使用某個(gè)產(chǎn)品的，一個(gè)互聯(lián)網(wǎng)產(chǎn)品也許無法滿足所有用戶的需求，但至少應(yīng)滿足目標(biāo)用戶的期望；否則這個(gè)產(chǎn)品就是一個(gè)無用的產(chǎn)品，對用戶就沒有任何價(jià)值。一個(gè)沒有用戶愿意使用的產(chǎn)品，要么是因?yàn)楣δ苡袉栴}，即“沒用”；要么就肯定是需求分析出了問題，即沒有抓住目標(biāo)用戶的真正需求。第9頁，共47頁。互聯(lián)網(wǎng)產(chǎn)品的可用性可用性是指“用

9、戶在特定環(huán)境下完成指定目標(biāo)的效果、效率和滿意度（ISO 9241-11）”。在此語境下，用戶體驗(yàn)是指“用戶與產(chǎn)品、服務(wù)、設(shè)備或環(huán)境交互時(shí)各方面的體驗(yàn)和感受（ISO 9241-210）”?？捎眯跃劢褂谌蝿?wù)的執(zhí)行過程，其目標(biāo)是使得產(chǎn)品更加好用，因此在互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)中，可用性屬于任務(wù)設(shè)計(jì)的范疇。當(dāng)互聯(lián)網(wǎng)產(chǎn)品的功能具有實(shí)用性之后，需要把控的就是在產(chǎn)品使用過程中的效率、滿意度以及目標(biāo)的實(shí)現(xiàn)程度了。因此在體驗(yàn)設(shè)計(jì)過程中，當(dāng)涉及到產(chǎn)品的任務(wù)流時(shí)，應(yīng)盡量采用符合用戶認(rèn)知的形式、利用專業(yè)技能簡化任務(wù)流程、加強(qiáng)對任務(wù)執(zhí)行的引導(dǎo)，從而使用戶輕松愉快地使用產(chǎn)品，得到好的體驗(yàn)。第10頁，共47頁?；ヂ?lián)網(wǎng)產(chǎn)品的

10、合意性合意性指符合人的意愿和喜好。合意性的最終目的是讓用戶感到愉悅、驚喜或感動(dòng)。對互聯(lián)網(wǎng)產(chǎn)品來說，合意性的影響因素包括產(chǎn)品的外觀樣式、交互范式和動(dòng)效等。涉及到合意性的體驗(yàn)設(shè)計(jì)，設(shè)計(jì)師應(yīng)了解并熟悉目標(biāo)用戶群的流行偏好。但如果想知道某種視覺風(fēng)格究竟喚起了用戶何種認(rèn)知和情緒、是否合意，直接詢問很難得到可靠的結(jié)果，這是因?yàn)橛脩舻男袨?、態(tài)度往往最容易測量，而測量情緒反應(yīng)則很難。傳統(tǒng)上，很多研究方法都依賴于用戶的自我報(bào)告，但人們往往對自己的情緒反應(yīng)缺乏清晰的認(rèn)知。因此了解用戶對產(chǎn)品的合意性需要一套科學(xué)的方法，去洞察表象之下的本質(zhì)。第11頁，共47頁。118個(gè)產(chǎn)品反應(yīng)卡完整集合AccessibleCreat

11、iveFastMeaningfulSlowAdvancedCustomizableFlexibleMotivatingSophisticatedAnnoyingCutting edgeFragileNot SecureStableAppealingDatedFreshNot ValuableSterileApproachableDesirableFriendlyNovelStimulatingAttractiveDifficultFrustratingOldStraight ForwardBoringDisconnectedFunOptimisticStressfulBusiness-like

12、DisruptiveGets in the wayOrdinaryTime-consumingBusyDistractingHard to useOrganizedTime-savingCalmDullHelpfulOverbearingToo TechnicalCleanEasy to useHigh qualityOverwhelmingTrustworthyClearEffectiveImpersonalPatronizingUnapproachableCollaborativeEfficientImpressivePersonalUnattractiveComfortableEffor

13、tlessIncomprehensiblePoor qualityUncontrollableCompatibleEmpoweringInconsistentPowerfulUnconventionalCompellingEnergeticIneffectivePredictableUnderstandableComplexEngagingInnovativeProfessionalUndesirableComprehensiveEntertainingInspiringRelevantUnpredictableConfidentEnthusiasticIntegratedReliableUn

14、refinedConfusingEssentialIntimidatingResponsiveUsableConnectedExceptionalIntuitiveRigidUsefulConsistentExcitingInvitingSatisfyingValuableControllableExpectedIrrelevantSecureConvenientFamiliarLow MaintenanceSimplistic表13-1 產(chǎn)品反映卡第12頁，共47頁?；ヂ?lián)網(wǎng)產(chǎn)品的品牌體驗(yàn)品牌效應(yīng)來自用戶的關(guān)聯(lián)感受，它往往可以給一個(gè)企業(yè)產(chǎn)品帶來潛在的、不可估量的影響。如大家熟知的可口可樂和百事

15、可樂生產(chǎn)的產(chǎn)品與市場上其它產(chǎn)品并沒有實(shí)質(zhì)上的區(qū)別，但是盈利卻平均高出30%。究其原因，可口可樂和百事可樂已經(jīng)讓人們相信，與同類廠家相比它們制作飲料時(shí)使用的碳酸、水、調(diào)味料、色素、糖等成分的比例要好得多，甚至比水本身還要好。品牌效應(yīng)使它們大受裨益。互聯(lián)網(wǎng)產(chǎn)品也同樣存在著品牌效應(yīng)。如一旦某公司開發(fā)出了一款具有良好交互體驗(yàn)和視覺風(fēng)格的產(chǎn)品，就會(huì)影響用戶對該公司其它產(chǎn)品的整體印象，而類似的視覺元素（如相似色彩或logo等），則可以加深對公司產(chǎn)品的品牌印象。如網(wǎng)易的多數(shù)產(chǎn)品都以紅色作為主色調(diào)，用戶在使用其不同產(chǎn)品時(shí)會(huì)感到似曾相識(shí)，自然而然地產(chǎn)生一種歸屬感和品牌信任感。網(wǎng)頁頁面風(fēng)格色調(diào)第13頁，共47頁。

16、互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)方法Design Methods for Internet Products User Experience03設(shè)計(jì)思維問卷法可用性測試焦點(diǎn)小組第14頁，共47頁。設(shè)計(jì)思維設(shè)計(jì)思維，這種思維模式是被美國IDEO（全球頂尖設(shè)計(jì)咨詢公司，由一群斯坦福畢業(yè)生于1991年創(chuàng)立）發(fā)揚(yáng)光大的、是斯坦福大學(xué)設(shè)計(jì)學(xué)院（Stanford D-School）所推崇的重要課程；其最終目標(biāo)是創(chuàng)造出一個(gè)用戶真正需要的產(chǎn)品、服務(wù)或體驗(yàn)，同時(shí)產(chǎn)品必須具備成長的潛力（可行性），且能夠通過合適的技術(shù)來實(shí)現(xiàn)（可實(shí)現(xiàn)）。Design Thinking涉及大規(guī)模的協(xié)作和頻繁的更迭，一般包含移情、定義、構(gòu)思、原型

17、以及測試等五個(gè)階段（圖13-2）。圖13-2 Design Thinking過程第15頁，共47頁。設(shè)計(jì)思維階段一、移情移情，也稱同理心（Empathy），是一種站在別人的角度看問題的方法。一般常用三種方法來實(shí)現(xiàn)移情并建立和用戶之間的共鳴，即訪談、觀察和親身體驗(yàn)。1訪談。深入目標(biāo)用戶的生活，了解他們的想法、工作環(huán)境、痛點(diǎn)以及期望等；同時(shí)觀察目標(biāo)用戶看待問題的不同視角與處理挑戰(zhàn)的方式。訪談中要時(shí)刻保持中立的態(tài)度，即使你已經(jīng)猜到用戶的答案了，也一定要繼續(xù)明確地問“為什么”？完美的訪談策略是先與受訪者建立親密融洽的關(guān)系，避免使用帶引導(dǎo)性的問題，如永遠(yuǎn)不要問“這個(gè)還不錯(cuò)吧？”，而是問“你覺得這個(gè)怎么樣

18、？”；或者用更好的方式“跟我說說你在使用某產(chǎn)品時(shí)的故事吧”等；懂得聆聽、知道如何挖掘用戶故事，是一個(gè)非常有用的技能，能從中發(fā)現(xiàn)很多有價(jià)值的信息。2觀察。給目標(biāo)用戶設(shè)置一個(gè)任務(wù)，觀察他們?nèi)绾瓮瓿伤?。比如如果問用戶“在亞馬遜購物的時(shí)候遇到過什么難題嗎？”很可能會(huì)聽到“沒有啊，挺順暢的”這種答案。但實(shí)際上如果在背后觀察他們的購物操作，就有可能就會(huì)發(fā)現(xiàn)其操作時(shí)的痛點(diǎn)。3親自體驗(yàn)。想了解目標(biāo)用戶在使用某些產(chǎn)品時(shí)的感受，就應(yīng)該親自去試試那些產(chǎn)品，可以是如公司自己的產(chǎn)品或競品。親身使用能更直接地感受到使用的痛點(diǎn)在哪里、以及愉悅的體驗(yàn)從何而來。第16頁，共47頁。設(shè)計(jì)思維階段二、定義這里的定義，其實(shí)就是對設(shè)計(jì)

19、問題的描述。當(dāng)完成同理心的構(gòu)建后，需要重新審視和重新定義最初的設(shè)計(jì)挑戰(zhàn)。視點(diǎn)人物寫作手法（Point of View，POV），不失為一種有效的方法：POV = 角色（Persona）+需求（Need）+洞察（Insight） （13-1）POV類似一個(gè)企業(yè)的任務(wù)宣言（Mission Statement），是用一句精簡的話來告訴別人團(tuán)隊(duì)或者項(xiàng)目的目標(biāo)是什么、有怎樣的價(jià)值觀等。好的POV需要考慮很多因素，如客戶是誰？想解決的是什么問題？這個(gè)問題有哪些已有的假設(shè)？有什么相關(guān)聯(lián)的不可控因素？想要的短期目標(biāo)和長遠(yuǎn)影響是什么？基本方法是什么？等。好的POV還應(yīng)該有自己獨(dú)特的關(guān)注點(diǎn)，而不是泛泛的空談；好的

20、POV同時(shí)也可以激勵(lì)團(tuán)隊(duì)成員，是整個(gè)團(tuán)隊(duì)的基本價(jià)值觀。譬如“Sam是一個(gè)高級設(shè)計(jì)師，他喜歡快速出方案、原型、測試驗(yàn)證，并不斷地優(yōu)化迭代，以做出既滿足用戶需求、又能帶來愉悅體驗(yàn)的產(chǎn)品。實(shí)際中發(fā)現(xiàn)，要做完整套流程，必須在不同的設(shè)計(jì)軟件中切換，浪費(fèi)了很多精力和時(shí)間?！边@段話就包含了角色、需求和洞察這些要素。用戶需求往往是情緒化的、有時(shí)也是難以被發(fā)覺的；而洞察力能帶來驚喜，它需要從訪談結(jié)果、觀察對比中挖掘才能獲得。只有站在用戶的立場去思考，才能發(fā)現(xiàn)其真實(shí)需要，這時(shí)定義的設(shè)計(jì)問題才能擊中“痛點(diǎn)”。第17頁，共47頁。設(shè)計(jì)思維階段三、構(gòu)思構(gòu)思指對設(shè)計(jì)概念和設(shè)計(jì)方案的設(shè)想。當(dāng)確定了用戶需求、并清楚定義了問題

21、之所在后，是時(shí)候打開腦洞去構(gòu)思產(chǎn)品該做成什么樣了！一般來說，構(gòu)思階段分為兩部分：1發(fā)散（創(chuàng)造性選項(xiàng)）。之前從移情到重新定義問題都呆在一起的多學(xué)科交叉團(tuán)隊(duì)要開始盡情地吐槽了，有什么就說什么，不需要太多的思考判斷。為什么？因?yàn)橹挥羞@樣，才能遠(yuǎn)離那些顯而易見的常用解決方案，避免陷入某種固有的心智模式；只有探討一些未知的想法，才能找到真正的創(chuàng)新。發(fā)散思維的頭腦風(fēng)暴要遵守的規(guī)則包括別輕易評判；想法越多越好；別人發(fā)言時(shí)別插嘴；要清晰地表達(dá)你的想法，避免模棱兩可；要善于在別人想法的基礎(chǔ)上做補(bǔ)充；牢記主題，別跑偏了；想法再瘋狂也沒關(guān)系！2收斂（確定性選擇）。經(jīng)過頭腦風(fēng)暴之后，總會(huì)有一堆的方案，需要收斂、并確定

22、最終的方案。方案的確定有很多方法，如采用貼紙投票的方式：即每個(gè)小組成員用不同的標(biāo)簽對其它小組的方案進(jìn)行投票；同時(shí)每個(gè)小組也內(nèi)部決定自己想要做哪幾個(gè)方案，結(jié)合雙方面的評價(jià)做出決定；也可以使用選擇矩陣等計(jì)算方法來進(jìn)行方案的選擇。第18頁，共47頁。設(shè)計(jì)思維階段四、原型原型，是原始的、粗略的產(chǎn)品模型。產(chǎn)品原型便于快速地發(fā)現(xiàn)方案的問題。如果說人們習(xí)慣于從失敗中學(xué)習(xí)，那么早期的失敗是成本最低的。通過對原型存在問題的修正、調(diào)整，就可以分配大量的資源進(jìn)行開發(fā)實(shí)施了。注意，一旦確定下一步的方案后，就要盡快地制作原型，驗(yàn)證并及時(shí)發(fā)現(xiàn)方案中的問題，以減少因后期修正錯(cuò)誤、不斷迭代而造成的研發(fā)成本大量增加。方案中的錯(cuò)

23、誤發(fā)現(xiàn)的越早，后期修改的成本損失就越小。階段五、測試原型創(chuàng)建好后就可以去找一些真正的用戶來進(jìn)行產(chǎn)品測試了。測試的目的在于進(jìn)一步完善原型的解決方案、了解用戶的反饋、測試以及完善此前的觀察公式式（13-1）。測試時(shí)，要把原型完全交給用戶去操作，設(shè)計(jì)師只需在一旁觀察和聆聽。如果發(fā)現(xiàn)有可以快速調(diào)整的細(xì)節(jié)，馬上完善后再做測試；對于復(fù)雜的操作可以有一定的流程或引導(dǎo)，尤其是當(dāng)用戶進(jìn)行不下去的時(shí)候，要適時(shí)地幫助。要知道接近用戶才是最重要的，設(shè)計(jì)師永遠(yuǎn)不要自戀、自以為是。通過測試，對分析的問題進(jìn)行完善、迭代，最終得到相對滿意的設(shè)計(jì)方案或結(jié)果。第19頁，共47頁。問卷法問卷法調(diào)查的一般流程為：確定研究目的、設(shè)計(jì)問

24、卷、問卷發(fā)放回收與分析、輸出調(diào)查報(bào)告等。1確定研究目的。設(shè)計(jì)問卷前必須要做好充足的理論準(zhǔn)備。宏觀層面上應(yīng)做到明確研究的主題是什么？明確研究主體想通過問卷調(diào)查獲取的信息有哪些？注意，對通過文獻(xiàn)研究就能夠獲知想要的信息，根本就不必進(jìn)行問卷調(diào)查。問卷調(diào)查并非獲取信息的唯一途徑。2設(shè)計(jì)問卷。確定主題之后，下一步要做的就是設(shè)計(jì)問卷了，具體包含內(nèi)容和形式設(shè)計(jì)。內(nèi)容設(shè)計(jì)包括問題設(shè)計(jì)與選項(xiàng)設(shè)計(jì)，問題設(shè)計(jì)遵循可問可不問的堅(jiān)決不問、無關(guān)研究目的的不問、創(chuàng)造性的設(shè)計(jì)問題、循序漸進(jìn)、板塊化的結(jié)構(gòu)等原則，選項(xiàng)設(shè)計(jì)是將研究目的變量化，根本原則是全面性；形式設(shè)計(jì)是對問卷格式的設(shè)計(jì)，一般地，問卷形式上共由六部分組成，即問卷標(biāo)

25、題、導(dǎo)語部分、基本信息、主體內(nèi)容、結(jié)語和整體。3問卷發(fā)放回收與分析。問卷發(fā)放需要考慮目標(biāo)用戶、回收率及發(fā)放成本等因素，要視具體情況決定采用哪種方式；對問卷的數(shù)據(jù)分析，通?？刹捎肧PSS軟件進(jìn)行聚類分析、因子分析回歸分析等；或采用Excel分析或Post lists（便利貼）來整理分析結(jié)果。一般而言，SPSS和Excel多用來進(jìn)行復(fù)雜、樣本量大的問卷分析；而Post lists則更適用于樣本量較小的定性分析，其形式更加自由，常?？梢詭椭O(shè)計(jì)師發(fā)現(xiàn)意想不到的問題。4調(diào)查產(chǎn)出。研究團(tuán)隊(duì)對問卷進(jìn)行充分的數(shù)據(jù)分析之后，通常會(huì)得出一些結(jié)論，驗(yàn)證之前的假設(shè)或發(fā)現(xiàn)一些新的問題，并形成調(diào)查產(chǎn)出物。產(chǎn)出物可以是調(diào)

26、查書面報(bào)告、PPT、圖表、曲線、或改進(jìn)的樣機(jī)、模型等多種形式。實(shí)踐中，可根據(jù)實(shí)際溝通效果來選用不同的調(diào)查產(chǎn)出形式。Quest第20頁，共47頁。可用性測試可用性測試是互聯(lián)網(wǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)中使用最多的方法之一。可用性測試包括資源準(zhǔn)備、任務(wù)設(shè)計(jì)、用戶招募、測試執(zhí)行和報(bào)告呈現(xiàn)等步驟。1資源準(zhǔn)備，指進(jìn)行可用性測試之前相關(guān)測試環(huán)境、設(shè)備儀器等的準(zhǔn)備，包括單向玻璃（方便觀察又不干擾用戶的操作）、網(wǎng)絡(luò)、測試材料（手機(jī)、計(jì)算機(jī)或者紙質(zhì)模型）、人員（主持人、記錄員等）及其它相關(guān)文檔（保密協(xié)議、產(chǎn)品介紹、測試說明等）。2任務(wù)設(shè)計(jì)，指在明確測試目的后，圍繞目的設(shè)計(jì)的一系列任務(wù)，以供參與測試的用戶執(zhí)行，至少應(yīng)包含任務(wù)目

27、標(biāo)、任務(wù)背景描述、停止條件以及正確的任務(wù)操作途徑等內(nèi)容。在設(shè)計(jì)測試任務(wù)時(shí)，需要遵循包括以用戶的使用目的為核心、任務(wù)順序要符合典型用戶的操作流、平衡任務(wù)描述方式上精細(xì)與寬泛之間的關(guān)系和注意控制任務(wù)的數(shù)量等原則。3用戶招募。只有招募到足夠數(shù)量的典型用戶，可用性測試結(jié)果才更具有代表性。這就需要測試人員對產(chǎn)品定位有較深入的了解，并明晰產(chǎn)品的目標(biāo)人群是哪類人。有時(shí)為了更好地招募，也可先行發(fā)布簡要的問卷來篩選，確保招募到想要的那一類型。對于用戶數(shù)量，Web可用性大師雅各布尼爾森（Jakob Nielsen）研究表明，“有5人參加測試，就能夠發(fā)現(xiàn)大多數(shù)（約80%）的產(chǎn)品可用性問題（圖13-3）”。因此可用性

28、測試不用招募太多的用戶，一般以58人為宜。測試用戶過多會(huì)增加成本，但對于發(fā)現(xiàn)問題來說增長的幅度并不明顯。圖13-3 尼爾森可用性測試與用戶數(shù)關(guān)系曲線第21頁，共47頁?？捎眯詼y試4測試執(zhí)行，包括測試前的介紹與熱身、測試中的觀察記錄、詢問、鼓勵(lì)、以及測試后的總結(jié)整理等內(nèi)容。5測試報(bào)告。分析整理好測試數(shù)據(jù)后，通常要輸出一個(gè)可用性測試報(bào)告，將問題反饋到相關(guān)的人員手中，為產(chǎn)品的迭代優(yōu)化提供科學(xué)的依據(jù)。測試報(bào)告應(yīng)重點(diǎn)呈現(xiàn)測試中出現(xiàn)的問題、問題比例及優(yōu)先級。圖13-4給出了可用性測試報(bào)告數(shù)據(jù)整理的建議。圖13-4 測試數(shù)據(jù)整理順序第22頁，共47頁。焦點(diǎn)小組焦點(diǎn)小組（Focus Group），是由一個(gè)經(jīng)過

29、訓(xùn)練的主持人，以一種無結(jié)構(gòu)的、自然的形式與一個(gè)小組的被調(diào)查者交談的用戶研究方法；主持人負(fù)責(zé)組織討論。該方法的主要作用是通過傾聽一組從目標(biāo)市場中選擇出來的被調(diào)查者的看法，獲取對一些問題的深入了解；其價(jià)值在于，它常常可以得到一些意想不到的發(fā)現(xiàn)。焦點(diǎn)小組的一個(gè)特點(diǎn)是可以快速反饋問題，通常只需要12場深度訪談的時(shí)間，就可以同時(shí)搜集到812名用戶的反饋意見。焦點(diǎn)小組調(diào)查的一般流程如下：1列出一系列需要討論的問題，包括主題和具體提問。首先要對產(chǎn)品有一個(gè)明確的認(rèn)識(shí)，在此基礎(chǔ)上列出需要通過小組討論得知的主題，進(jìn)而圍繞主題設(shè)計(jì)具體的問題。2模擬一次焦點(diǎn)小組的討論，測試并改進(jìn)步驟（1）中的主題。這類似可用性測試?yán)?/p>

30、的預(yù)測試，通過模擬實(shí)現(xiàn)來發(fā)現(xiàn)當(dāng)前方案中問題設(shè)計(jì)的不足、及時(shí)完善。在某種意義上，這也是一種敏捷迭代的方式。3從目標(biāo)群體中篩選并邀請參加者。焦點(diǎn)小組需要多招募一些用戶用于篩選，其中個(gè)人表達(dá)太活躍/太不活躍、表達(dá)能力較差或思維過于發(fā)散的用戶都不適合作為參與者。對同一場焦點(diǎn)小組的用戶，可選擇目標(biāo)群體中不同的類型；組織討論時(shí)，也可以了解對彼此的觀點(diǎn)和態(tài)度。同時(shí)應(yīng)注意這些用戶的社會(huì)背景，如社會(huì)階層、教育程度、收入水平等方面，相差不宜太大，否則難以進(jìn)行有效的討論。圖13-5給出了焦點(diǎn)小組用戶篩選的參考維度。圖13-5 焦點(diǎn)小組用戶篩選參考維度第23頁，共47頁。焦點(diǎn)小組3從目標(biāo)群體中篩選并邀請參加者。焦點(diǎn)小

31、組需要多招募一些用戶用于篩選，其中個(gè)人表達(dá)太活躍/太不活躍、表達(dá)能力較差或思維過于發(fā)散的用戶都不適合作為參與者。對同一場焦點(diǎn)小組的用戶，可選擇目標(biāo)群體中不同的類型；組織討論時(shí)，也可以了解對彼此的觀點(diǎn)和態(tài)度。同時(shí)應(yīng)注意這些用戶的社會(huì)背景，如社會(huì)階層、教育程度、收入水平等方面，相差不宜太大，否則難以進(jìn)行有效的討論。圖13-5給出了焦點(diǎn)小組用戶篩選的參考維度；4進(jìn)行焦點(diǎn)小組討論。每次討論時(shí)長以1.52個(gè)小時(shí)為宜，過長會(huì)造成討論者的疲勞，過短則難以充分展開話題、無法挖掘觀點(diǎn)或行為背后的深層次動(dòng)機(jī)。通常要對討論過程進(jìn)行錄像，以便于后期的記錄或分析；5分析與匯報(bào)。焦點(diǎn)小組座談結(jié)束后，要分析總結(jié)得到的發(fā)現(xiàn)，

32、展現(xiàn)得出的重要觀點(diǎn)，并呈現(xiàn)出與每個(gè)具體話題相關(guān)的信息。第24頁，共47頁?；ヂ?lián)網(wǎng)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)的一般過程General Process of User Experience Design for Internet Products04產(chǎn)品策劃產(chǎn)品交互體驗(yàn)設(shè)計(jì)產(chǎn)品視覺體驗(yàn)設(shè)計(jì)產(chǎn)品頁面重構(gòu)產(chǎn)品開發(fā)產(chǎn)品測試產(chǎn)品發(fā)布第25頁，共47頁。互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)的一般過程互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)，是對傳統(tǒng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)方法的提升和改良，它更加強(qiáng)調(diào)以用戶為中心的設(shè)計(jì)方法的應(yīng)用，將最終的用戶感受作為產(chǎn)品質(zhì)量最重要的評價(jià)指標(biāo)。盡管互聯(lián)網(wǎng)產(chǎn)品千差萬別，但其用戶體驗(yàn)設(shè)計(jì)過程一般都可劃分為產(chǎn)品策劃、交互設(shè)計(jì)、視覺設(shè)

33、計(jì)、頁面重構(gòu)、產(chǎn)品研發(fā)、產(chǎn)品測試和產(chǎn)品發(fā)布等步驟（圖13-6）。圖13-6 互聯(lián)網(wǎng)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)一般過程第26頁，共47頁。產(chǎn)品策劃產(chǎn)品策劃也稱商品企劃，指企業(yè)從產(chǎn)品開發(fā)、上市、銷售直至報(bào)廢的全生命周期的活動(dòng)及方案，通常有新產(chǎn)品開發(fā)、舊產(chǎn)品的改良和新用途的拓展等三種類型。1產(chǎn)品定位，指產(chǎn)品的目標(biāo)、范圍、特征等約束條件，是互聯(lián)網(wǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)的方向，也是設(shè)計(jì)產(chǎn)出物優(yōu)劣的評判標(biāo)準(zhǔn)。它包含用戶需求和產(chǎn)品定義兩個(gè)方面，其中產(chǎn)品定義包括使用人群、主要功能和產(chǎn)品特色；用戶需求包括目標(biāo)用戶、使用場景和用戶目標(biāo)；目標(biāo)用戶基于用戶細(xì)分，在一定程度上影響著使用場景和用戶目標(biāo)（圖13-7）。用戶需求和產(chǎn)品定位是一對

34、辯證的對立統(tǒng)一體：用戶需求或目標(biāo)用戶一旦確定，產(chǎn)品定位也就相應(yīng)明確了；設(shè)計(jì)師可以根據(jù)產(chǎn)品定位來匹配相應(yīng)的使用場景和用戶目標(biāo)，從而優(yōu)選出相應(yīng)的需求關(guān)鍵詞（如新聞?lì)悜?yīng)用最終的關(guān)鍵詞可能是精準(zhǔn)推薦、最新、最熱資訊等）。2功能確定，一方面需要參照在產(chǎn)品定位這一步所得到的產(chǎn)品關(guān)鍵詞來確定特色功能；另一方面也依賴于設(shè)計(jì)師的用戶調(diào)研。如關(guān)鍵詞“精準(zhǔn)推薦”要求產(chǎn)品有可以讓用戶選擇對某類資訊是否感興趣的功能等。確定功能的方式主要有用戶調(diào)研、競品分析、用戶反饋和產(chǎn)品數(shù)據(jù)（產(chǎn)品上線之后）；之后，需要根據(jù)具體情況對搜集到的功能需求進(jìn)行分析篩選，具體篩選原則包括去掉明顯不合理的功能、通過深挖用戶真實(shí)目標(biāo)來篩選、匹配產(chǎn)品

35、定位（企業(yè)戰(zhàn)略、目標(biāo)用戶、主要功能、產(chǎn)品特色等）和確定優(yōu)先級等。圖13-7 產(chǎn)品策劃中的產(chǎn)品定位第27頁，共47頁。產(chǎn)品交互體驗(yàn)設(shè)計(jì)產(chǎn)品的交互設(shè)計(jì)一般始于概念設(shè)計(jì)，類似一個(gè)水杯概念的描述：一個(gè)旅行用的水杯，能疊成小圓盤，喝水時(shí)只需把小圓盤的圓心部分往下按，就變成了一個(gè)杯子，諸如此類。互聯(lián)網(wǎng)產(chǎn)品的交互體驗(yàn)設(shè)計(jì)也一樣，首先要賦予產(chǎn)品一個(gè)概念，這來自于產(chǎn)品定位的結(jié)果，讓設(shè)計(jì)師要明確做什么；同時(shí)還要做交互初稿設(shè)計(jì)。初稿并不是嚴(yán)格的交互原型，可以是主要的頁面流程或手繪草圖，只要能清晰表達(dá)設(shè)計(jì)構(gòu)思，什么樣的方式都可以?；ヂ?lián)網(wǎng)產(chǎn)品的交互體驗(yàn)設(shè)計(jì)具體內(nèi)容包括信息架構(gòu)、用戶流程、交互說明文檔和原型設(shè)計(jì)等。1產(chǎn)品

36、信息架構(gòu)設(shè)計(jì)。信息架構(gòu)（Information Architecture，IA）指對某一特定內(nèi)容里的信息進(jìn)行統(tǒng)籌、規(guī)劃、設(shè)計(jì)、安排等一系列有機(jī)處理的想法，其主體對象是信息，由信息架構(gòu)師來設(shè)計(jì)結(jié)構(gòu)、決定組織方式及歸類，目的是方便使用者尋找與管理信息。信息架構(gòu)一詞誕生于數(shù)據(jù)庫設(shè)計(jì)的領(lǐng)域，最早是由美國著名信息架構(gòu)師、TED（Technology，Entertainment，Design）大會(huì)創(chuàng)始人理查德烏爾曼于二十世紀(jì)七十年代提出的，后由兩位美國信息學(xué)家路易斯羅森菲爾德和彼得莫維爾發(fā)揚(yáng)光大。信息架構(gòu)反映了信息的組織結(jié)構(gòu)，它是互聯(lián)網(wǎng)產(chǎn)品規(guī)劃的結(jié)果，在信息與用戶認(rèn)知間搭建了一座橋梁，具體包括標(biāo)簽、按鈕和

37、用戶界面上的一些具體圖示的設(shè)計(jì)等。圖13-8給出了一個(gè)個(gè)人微博的信息架構(gòu)示例。圖13-8 個(gè)人微博功能需求信息架構(gòu)示例第28頁，共47頁。產(chǎn)品交互體驗(yàn)設(shè)計(jì)2用戶使用流程，用于展現(xiàn)產(chǎn)品經(jīng)理腦海中比較抽象的交互邏輯，也是對產(chǎn)品想法進(jìn)行梳理的過程。從用戶的視角對信息架構(gòu)進(jìn)行一步一步的模擬操作，不僅能逐漸完善產(chǎn)品的結(jié)構(gòu)導(dǎo)圖，還可得到用戶使用的詳細(xì)流程。圖13-9給出了一個(gè)會(huì)員登錄的流程示例。圖13-9 互聯(lián)網(wǎng)產(chǎn)品用戶使用流程圖示例第29頁，共47頁。產(chǎn)品交互體驗(yàn)設(shè)計(jì)3產(chǎn)品交互設(shè)計(jì)說明文檔與規(guī)范。交互說明文檔（Design Requirements Document，DRD）是用來承載交互說明，并交付給

38、前端、測試及開發(fā)工程師參考的文檔，也是對整個(gè)網(wǎng)站公用模塊組成的分析和整理。其作用是確保網(wǎng)站交互體驗(yàn)的一致性和統(tǒng)一性。為保證文檔的可讀性，交互設(shè)計(jì)說明文檔一般要符合一定的規(guī)范。一個(gè)完整的交互設(shè)計(jì)說明文檔通常包含目錄、版本信息、網(wǎng)站結(jié)構(gòu)拓?fù)鋱D、復(fù)雜交互行為的邏輯設(shè)計(jì)圖及說明、公共模塊的梳理及其說明（導(dǎo)航、文本框、公用按鈕、微博回復(fù)框、轉(zhuǎn)發(fā)框等）、對交互稿中不明顯的交互動(dòng)作或隱藏的設(shè)置項(xiàng)的說明、部分單個(gè)主要頁面或模塊的交互行為說明和測試人員可行性檢測等。圖13-10 香蕉汁包裝設(shè)計(jì)-深澤直人第30頁，共47頁。產(chǎn)品交互體驗(yàn)設(shè)計(jì)4交互原型設(shè)計(jì)。概念設(shè)計(jì)與評審迭代之后，就可以設(shè)計(jì)交互原型了。原型可分為低

39、保真和高保真交互原型兩種，二者的區(qū)別在于真實(shí)、細(xì)膩程度的不同。交互原型設(shè)計(jì)重點(diǎn)要考慮可用性和愉悅度，前者涉及容易學(xué)習(xí)、容易使用、系統(tǒng)有效性、用戶滿意等因素，后者需要通過一些情感化設(shè)計(jì)手段來提高用戶在使用產(chǎn)品前、中、后期的體驗(yàn)。增強(qiáng)交互愉悅度的方法有很多，如：微交互：即在某個(gè)特定的瞬間完成某個(gè)任務(wù)的交互細(xì)節(jié)，以帶給用戶意想不到的驚喜或讓其感受到來自互聯(lián)網(wǎng)產(chǎn)品的關(guān)懷和關(guān)愛，而心生好感，如適當(dāng)融入交互動(dòng)畫等；延伸現(xiàn)實(shí)：蘋果公司的巴斯奧丁設(shè)計(jì)的iOS的慣性滑動(dòng)效果，簡單、流暢、充滿樂趣，看似微不足道，但影響巨大；觸景生情：通過視覺的手法微妙地啟發(fā)用戶的感覺及情緒，讓人產(chǎn)生由此及彼的情感聯(lián)想。日本設(shè)計(jì)師

40、深澤直人的一個(gè)包裝設(shè)計(jì)就是這樣的一個(gè)例子（圖13-10）；小把戲：即將枯燥的事物以一種輕松、幽默的方式進(jìn)行展示，使用戶產(chǎn)生積極的情感和有趣且愉快的感覺；保持新鮮感：指在人們熟悉的頁面中增加新的內(nèi)容，使交互常用常新，用戶每次都有新感受；充分利用聲音：聲音的節(jié)奏和旋律的變化都能影響到用戶的情感，如QQ新消息的聲音、Windows開/關(guān)機(jī)時(shí)的音樂等；游戲：即利用游戲交互的趣味性，拓展體驗(yàn)效果，如Android滑動(dòng)解鎖等就很有趣（圖13-11）。圖13-11 Andriod解鎖屏幕示例第31頁，共47頁。產(chǎn)品視覺體驗(yàn)設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品視覺體驗(yàn)設(shè)計(jì)指頁面的視覺傳達(dá)的體驗(yàn)效果，包括頁面視覺設(shè)計(jì)、產(chǎn)品還原性評審

41、、產(chǎn)品視覺架構(gòu)和視覺規(guī)范等內(nèi)容。1視覺設(shè)計(jì)，需要考慮產(chǎn)品給人的整體感覺，即視覺設(shè)計(jì)的風(fēng)格，要遵循保持頁面顏色統(tǒng)一、界面風(fēng)格一致性及盡量減少審美負(fù)擔(dān)、減少認(rèn)知和記憶負(fù)擔(dān)等原則。平面視覺傳達(dá)設(shè)計(jì)的方法和設(shè)計(jì)原則也適用于互聯(lián)網(wǎng)產(chǎn)品的視覺設(shè)計(jì)。2產(chǎn)品還原性評審，指網(wǎng)頁的實(shí)現(xiàn)結(jié)果相對設(shè)計(jì)稿的還原程度，包括字體、尺寸、色彩、板式、質(zhì)感等。應(yīng)邀請項(xiàng)目相關(guān)人員對網(wǎng)頁的實(shí)現(xiàn)進(jìn)行綜合評審，確保其正確體現(xiàn)了設(shè)計(jì)效果，并不斷迭代，直到評審各方都滿意為止。3產(chǎn)品視覺架構(gòu)，指對界面信息按邏輯關(guān)系、包含關(guān)系和先后順序進(jìn)行排列組織后形成的抽象模塊。它上通信息架構(gòu)下達(dá)界面設(shè)計(jì)，起著承載信息、驗(yàn)證信息架構(gòu)是否合理的作用。好的視覺

42、架構(gòu)設(shè)計(jì)需要對網(wǎng)站信息的深刻理解，如谷歌采用的三欄式結(jié)構(gòu)（圖13-12）。4視覺規(guī)范訂制，指對產(chǎn)品界面設(shè)計(jì)的一系列界面元素進(jìn)行的限定。如谷歌公司在2014年世界開發(fā)者大會(huì)（Worldwide Developers Conference，WWDC）上發(fā)布的Material Design標(biāo)準(zhǔn)，統(tǒng)一了安卓、Chrome OS和網(wǎng)頁的界面設(shè)計(jì)風(fēng)格。圖13-12 谷歌的三欄式界面的視覺架構(gòu)第32頁，共47頁。產(chǎn)品頁面重構(gòu)互聯(lián)網(wǎng)產(chǎn)品頁面重構(gòu)即“將設(shè)計(jì)稿轉(zhuǎn)換成WEB頁面”，包括將視覺設(shè)計(jì)結(jié)果用Photoshop生成靜態(tài)網(wǎng)頁或考慮每個(gè)標(biāo)簽的使用、頁面性能的實(shí)現(xiàn)等。好的頁面應(yīng)結(jié)構(gòu)完整，可通過標(biāo)準(zhǔn)驗(yàn)證；標(biāo)簽語義化

43、，結(jié)構(gòu)合理；充分考慮頁面在站點(diǎn)中的作用和重要性，并有針對性的優(yōu)化。頁面重構(gòu)步驟包括分析設(shè)計(jì)稿切圖寫HTML和CSS相應(yīng)代碼等步驟。1設(shè)計(jì)稿分析，指對設(shè)計(jì)稿如何制作成頁面的分析，如哪些內(nèi)容作為公共部分、內(nèi)容結(jié)構(gòu)如何實(shí)現(xiàn)等，包括分清設(shè)計(jì)稿中的公共與私有部分；對各部分提出初步實(shí)現(xiàn)方案（如何切圖、寫結(jié)構(gòu)、樣式等）；準(zhǔn)確給出各部分的實(shí)現(xiàn)方案，同時(shí)考慮方案擴(kuò)展、復(fù)用及頁面性能（結(jié)構(gòu)、樣式復(fù)用等）及整個(gè)網(wǎng)站的結(jié)構(gòu)分布（文件分布、目錄結(jié)構(gòu)等）。2切圖，指將網(wǎng)頁設(shè)計(jì)稿切成便于制作成頁面的圖片。不只是把圖片切出來，還包括把切出來的圖片合并到一起，考慮怎么切、從哪兒切才能將達(dá)到最優(yōu)效果。3HTML和CSS的編寫，指

44、用切圖結(jié)果將設(shè)計(jì)稿編寫成Web頁面。包括還原設(shè)計(jì)稿視覺效果，進(jìn)行標(biāo)準(zhǔn)驗(yàn)證；實(shí)現(xiàn)多瀏覽器兼容；標(biāo)簽語義化；優(yōu)化實(shí)現(xiàn)方式（模塊化、腳本等）；綜合考慮可擴(kuò)展、復(fù)用和可維護(hù)性；考慮整個(gè)前端的樣式、布局及優(yōu)化代碼等。最終需要對重構(gòu)出來的頁面進(jìn)行評估，符合當(dāng)初視覺設(shè)計(jì)的要求才可以提交，否則就需要再進(jìn)行迭代修改。第33頁，共47頁。產(chǎn)品開發(fā)在開發(fā)階段，項(xiàng)目經(jīng)理要根據(jù)項(xiàng)目計(jì)劃書及產(chǎn)品效果圖組織開發(fā)，提出產(chǎn)品架構(gòu)、程序設(shè)計(jì)及數(shù)據(jù)庫設(shè)計(jì)方案，并按開發(fā)規(guī)程進(jìn)行項(xiàng)目進(jìn)程控制；還有概要與詳細(xì)設(shè)計(jì)、產(chǎn)品幫助文檔制作等。要注意強(qiáng)調(diào)產(chǎn)品協(xié)同開發(fā)的日志文檔編寫習(xí)慣與版本控制規(guī)則。一般產(chǎn)品開發(fā)主要集中在后臺(tái)開發(fā)：編碼之前程序員應(yīng)

45、視系統(tǒng)需要，細(xì)化概要設(shè)計(jì)、數(shù)據(jù)庫設(shè)計(jì)等，進(jìn)行內(nèi)部討論和評審；當(dāng)對文檔或原型有疑問或不理解時(shí)，需與產(chǎn)品策劃和交互設(shè)計(jì)師進(jìn)行溝通，了解其真實(shí)涵義，不得以任何理由擅自更改已確定的需求文檔；當(dāng)確有功能需做調(diào)整時(shí)，要與產(chǎn)品策劃、需求方共同協(xié)商完成。改動(dòng)應(yīng)出具文檔，經(jīng)需求方、技術(shù)經(jīng)理、產(chǎn)品經(jīng)理簽字同意，并記錄在案以備后查。在開發(fā)時(shí)，通常要邊開發(fā)邊測試，不斷重復(fù)迭代，直至網(wǎng)站產(chǎn)品的完善、穩(wěn)定。第34頁，共47頁。產(chǎn)品測試1互聯(lián)網(wǎng)產(chǎn)品測試的框架?；ヂ?lián)網(wǎng)產(chǎn)品的測試一般有、等階段：是第一階段，一般僅供內(nèi)部測試使用；是第二階段，已消除了系統(tǒng)中大部分不完善之處，但還可能存在缺陷和漏洞，一般只提供給特定的用戶群來試用；

46、是第三階段，此時(shí)產(chǎn)品已經(jīng)相當(dāng)成熟，只需在個(gè)別地方進(jìn)一步優(yōu)化即可上市發(fā)行。圖13-13給出了一個(gè)產(chǎn)品測試框架。圖13-13 互聯(lián)網(wǎng)產(chǎn)品測試框架（模型）第35頁，共47頁。產(chǎn)品測試互聯(lián)網(wǎng)產(chǎn)品具體測試內(nèi)容可參考軟件質(zhì)量評價(jià)標(biāo)準(zhǔn)（ISO 9126-1-2001）或（ISO 25010-2011）（圖13-14）。圖13-14 ISO 25010-2011軟件質(zhì)量模型第36頁，共47頁。產(chǎn)品測試2產(chǎn)品測試的目標(biāo)，是發(fā)現(xiàn)錯(cuò)誤，開發(fā)出高質(zhì)量、符合需要且具有良好體驗(yàn)的產(chǎn)品。如功能、性能符合要求、能正常運(yùn)行；發(fā)現(xiàn)開發(fā)中的不足，以避免同樣問題的發(fā)生等。3產(chǎn)品測試的特點(diǎn)，包括不斷變化、工作量大、復(fù)雜度高；對性能和穩(wěn)

47、定性要求高；容錯(cuò)性和體驗(yàn)要好；高安全性、兼容性；可引入自動(dòng)化測試工具；趣味性和交互體驗(yàn)等。4產(chǎn)品測試的類型，一般包括樣式測試、功能測試和性能測試等三類。5產(chǎn)品測試的流程，包括準(zhǔn)備階段、測試階段和測試完成三個(gè)部分（圖13-15）：6產(chǎn)品測試原則。測試應(yīng)按企業(yè)（行業(yè)）測試規(guī)范開展，一般遵從先技術(shù)自測、然后內(nèi)測，等穩(wěn)定后出（Beta）版再公測的原則。圖13-15 互聯(lián)網(wǎng)產(chǎn)品測試流程第37頁，共47頁。產(chǎn)品發(fā)布互聯(lián)網(wǎng)產(chǎn)品的發(fā)布一般由產(chǎn)品經(jīng)理負(fù)責(zé)，具體發(fā)布策略有藍(lán)綠發(fā)布、灰度發(fā)布、金絲雀發(fā)布、AB測試這幾種類型。1藍(lán)綠發(fā)布：指發(fā)布過程中用戶感知不到服務(wù)重啟，通常新舊版本并存、通過切換路由權(quán)重的方式來實(shí)現(xiàn)

48、不同應(yīng)用的上下線；2金絲雀發(fā)布：通過在線上運(yùn)行的服務(wù)中加入少量的新服務(wù)，然后快速獲得反饋，視具體情況決定最后交付形態(tài)；3灰度發(fā)布：通過切換線上并存版本之間的路由權(quán)重，逐步從一個(gè)版本切換到另一個(gè)版本。金絲雀發(fā)布傾向于獲取快速的反饋，灰度發(fā)布則強(qiáng)調(diào)版本間的平穩(wěn)切換；4AB測試：非常像灰度發(fā)布，但是從發(fā)布的目的上，AB測試側(cè)重的是按A或B版本之間的差異進(jìn)行決策，最終選擇一個(gè)版本進(jìn)行部署，更傾向于做決策。產(chǎn)品發(fā)布前要注意全面檢查，擬訂并實(shí)施好推廣方案、做好宣傳工作，爭取用戶的支持、幫助。發(fā)布不是產(chǎn)品開發(fā)的終點(diǎn)，而是下一個(gè)迭代開發(fā)周期的開始。第38頁，共47頁?；ヂ?lián)網(wǎng)產(chǎn)品用戶體驗(yàn)設(shè)計(jì)的一些原則及注意事項(xiàng)

49、Some Principles and Considerations for User Experience Design of Internet Products05互聯(lián)網(wǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)原則互聯(lián)網(wǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)注意事項(xiàng)對嚴(yán)重影響用戶體驗(yàn)設(shè)計(jì)問題的思考第39頁，共47頁?；ヂ?lián)網(wǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)原則172原則。美國心理學(xué)家喬治米勒研究發(fā)現(xiàn)，人類短期記憶一次只能記住59個(gè)事物。據(jù)此，72原則指人類大腦習(xí)慣將復(fù)雜信息劃分成易記的塊和小單元。如手機(jī)號碼被分割成“xxx-xxxx-xxxx”的形式、Web導(dǎo)航選項(xiàng)卡一般不超過9個(gè)、移動(dòng)應(yīng)用的選項(xiàng)卡一般不過5個(gè)等。2三秒鐘原則。三秒鐘原則指要在極短的時(shí)間內(nèi)展示最重

50、要的信息。尼爾森2006年發(fā)表的眼球軌跡的研究發(fā)現(xiàn)，多數(shù)情況下用戶都會(huì)以“F”形模式瀏覽網(wǎng)頁（圖13-16）。因此應(yīng)把最重要的信息放在頁面左上區(qū)域，以便快速給用戶留下鮮明的第一印象。3帕累托法則。帕累托法則也稱二八定律、8020定律，即80%的效應(yīng)來自20%的原因?；ヂ?lián)網(wǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)中也存在同樣的規(guī)律，即少數(shù)要素對體驗(yàn)效果起著關(guān)鍵的作用。48個(gè)接口設(shè)計(jì)的金科玉律。8個(gè)接口設(shè)計(jì)金科玉律由美國計(jì)算機(jī)學(xué)家本施耐德曼于1986年出版的用戶界面設(shè)計(jì)：有效人機(jī)互動(dòng)的策略中提出，包括保持一致性、為老用戶提供快捷方式、提供有益的反饋、增加結(jié)束時(shí)的對話框、提供簡潔的錯(cuò)誤處理、允許方便的回退、支持內(nèi)部控制點(diǎn)、減少

51、短期記憶負(fù)荷等內(nèi)容。5費(fèi)茨定律。費(fèi)茨定律（Fitts Law）由美國心理學(xué)家保羅費(fèi)茨于1954年提出，是用來預(yù)測從任意一點(diǎn)到目標(biāo)位置所需時(shí)間的數(shù)學(xué)模型，即當(dāng)前位置到目標(biāo)所需時(shí)間（T）與其距離（D）和目標(biāo)的大小（W）存在以下關(guān)系：T = a + b log2(D/W+1) （式13-2）其中，a、b是經(jīng)驗(yàn)值。如鼠標(biāo)位置離目標(biāo)越遠(yuǎn)需要移動(dòng)的時(shí)間越長；同時(shí)目標(biāo)越小花費(fèi)的時(shí)間就越多。Windows菜單和蘋果iOS頂部工具欄的設(shè)計(jì)都運(yùn)用了費(fèi)茨定律圖13-16 用戶瀏覽網(wǎng)頁的“F”形習(xí)慣第40頁，共47頁?；ヂ?lián)網(wǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)注意事項(xiàng)1只有深入理解才能開始設(shè)計(jì)。任何互聯(lián)網(wǎng)產(chǎn)品都需要對目標(biāo)用戶畫像清晰之后再開

52、始著手設(shè)計(jì)，如用戶是怎么想的、是什么在驅(qū)動(dòng)其做決策、有什么使用習(xí)慣、是什么促使其進(jìn)行交互操作的只有明白用戶概念中的易用性究竟是怎么回事、什么樣的設(shè)計(jì)能調(diào)動(dòng)用戶的情緒、使他們持續(xù)滿意地使用產(chǎn)品之后，才能設(shè)計(jì)出真正具有優(yōu)秀體驗(yàn)的產(chǎn)品。2用用戶熟知的語言來表達(dá)。充分借鑒和模擬之前的交互方式是很有必要的，這樣人們會(huì)更快明白如何使用新產(chǎn)品。人是習(xí)慣的動(dòng)物，喜歡模式化、樂于重復(fù)，甚至?xí)詰僦貜?fù)模式并將這種經(jīng)驗(yàn)轉(zhuǎn)移到相似東西上，這也是用戶了解新產(chǎn)品的常見方式。因此，菜單條目要避免生僻和標(biāo)新立異，否則會(huì)加重用戶認(rèn)知負(fù)荷、增加使用難度，帶來體驗(yàn)度的降低。3給用戶可感知的直觀反饋?；ヂ?lián)網(wǎng)產(chǎn)品簡單界面的背后，往往是

53、龐雜的信息架構(gòu)、程序邏輯、算法和數(shù)據(jù)庫的支撐，前端控件輕輕的一下點(diǎn)擊系統(tǒng)可能已“飛越千里”，這很容易造成困惑和迷茫。因此適當(dāng)?shù)闹庇^感知反饋很重要，應(yīng)及時(shí)讓用戶知道操作是否奏效、所處境況、系統(tǒng)當(dāng)前狀態(tài)，減少不確定性和不安全感。如提示聲音、進(jìn)度條、閃爍、微動(dòng)效、指示燈、變色等，這些元素的合理運(yùn)用會(huì)大幅提升用戶的交互控制感和信心。4盡早且頻繁地進(jìn)行產(chǎn)品迭代測試。讓真實(shí)的用戶盡早參與到測試中來，避免耗費(fèi)了大量資源之后積重難返。從早期概念設(shè)計(jì)到階段性進(jìn)展，不斷進(jìn)行耗時(shí)不多的、頻繁的微測試、小迭代，持續(xù)得到用戶反饋，是及時(shí)發(fā)現(xiàn)問題的有效途徑。因此，完善規(guī)范的測試計(jì)劃很重要，同時(shí)測試點(diǎn)要恰如其分安排在系統(tǒng)的

54、關(guān)鍵節(jié)點(diǎn)上。5小心假設(shè)的用戶需求。以設(shè)計(jì)師的個(gè)人理解代替用戶需求往往有偏離問題本質(zhì)的危險(xiǎn)；而把用戶當(dāng)作傻瓜則有使其感到被愚弄、產(chǎn)生厭惡心理的可能。用腳踏實(shí)地、科學(xué)嚴(yán)謹(jǐn)?shù)膽B(tài)度和作風(fēng)開展用戶研究、貼近真實(shí)用戶，才能夠真正了解其好惡、洞察其需要。第41頁，共47頁。對嚴(yán)重影響用戶體驗(yàn)設(shè)計(jì)問題的思考1強(qiáng)調(diào)創(chuàng)造性、忽視易用性問題。創(chuàng)造性固然好，但若拋棄產(chǎn)品及目標(biāo)用戶的特點(diǎn)，為創(chuàng)造性而創(chuàng)造就是在拿用戶的認(rèn)知習(xí)慣來冒險(xiǎn)，賭上的可能是產(chǎn)品最核心的體驗(yàn)價(jià)值。如圖13-17是個(gè)頗具創(chuàng)意的導(dǎo)航方式，或許適用于移動(dòng)設(shè)備，但放在桌面端的Web頁面上又會(huì)如何呢？很可能導(dǎo)致用戶發(fā)現(xiàn)曾經(jīng)的認(rèn)知一文不值，并由此產(chǎn)生迷茫、挫敗感和懊惱。2過度設(shè)計(jì)問題。過度設(shè)計(jì)既包括過度復(fù)雜的風(fēng)格化，也包括過度簡約或是其它任何忽視產(chǎn)品特性及信息權(quán)重而一味追求視覺刺激的設(shè)計(jì)方式。如圖13-18左上角提供了一個(gè)漢堡包圖標(biāo)（三條橫線），整個(gè)首屏雖是一張漂亮的照片，但菜單可發(fā)現(xiàn)性差、點(diǎn)擊次數(shù)多、不直觀。好的界面應(yīng)清晰、準(zhǔn)確、一目了然，設(shè)計(jì)不足和過度都應(yīng)盡力避免。圖13-17 某種具有創(chuàng)意感的導(dǎo)航方式示例圖13-18 頁面導(dǎo)航示例第42頁，共47頁。對嚴(yán)重影響用戶體驗(yàn)設(shè)計(jì)問題的思考3以為用戶了解你所了解的東西。假設(shè)用戶具有相同的處理問題的能力，假設(shè)他們具有