UI與交互設(shè)計(jì)人機(jī)交互設(shè)計(jì)(第二版)PPT完整全套教學(xué)課件

UI與交互設(shè)計(jì)(第二版)

課程教學(xué)內(nèi)容第一章

什么是人機(jī)交互第二章

交互設(shè)計(jì)理論基礎(chǔ)第三章

用戶研究簡(jiǎn)述第四章

用戶研究方法第五章人物角色的創(chuàng)建與運(yùn)用第六章從需求到設(shè)計(jì)第七章交互框架設(shè)計(jì)第八章

界面設(shè)計(jì)第九章

設(shè)計(jì)與制作原理第十章

可用性評(píng)估第11章實(shí)踐中的交互設(shè)計(jì)具體要求課程組織形式：項(xiàng)目化學(xué)習(xí)，小組合作（3-4人一組）要求：小組頭腦風(fēng)暴，確定交互設(shè)計(jì)項(xiàng)目；進(jìn)行用戶研究，完成用戶研究分析報(bào)告；創(chuàng)建人物角色，完成用戶需求分析；根據(jù)用戶需求完成項(xiàng)目主題的任務(wù)分析和功能分析；進(jìn)行信息架構(gòu)，完成用戶行為流程分析；原型設(shè)計(jì)；可用性測(cè)試（小組間交叉完成）。小組合作過程須可視化成績(jī)組成：平時(shí)成績(jī)：40%交互設(shè)計(jì)產(chǎn)品：60%內(nèi)容組成：產(chǎn)品體驗(yàn)報(bào)告用戶研究分析報(bào)告界面設(shè)計(jì)規(guī)范文檔產(chǎn)品交互設(shè)計(jì)規(guī)范文檔產(chǎn)品交互原型評(píng)分依據(jù)：自我評(píng)價(jià)：小組內(nèi)評(píng)價(jià)：小組間評(píng)價(jià)：教師評(píng)價(jià)1:3:1:2第一講UI與交互設(shè)計(jì)概述UI相關(guān)概念UI即UserInterface（用戶界面）的簡(jiǎn)稱。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UE/UX即UsereXperience（用戶體驗(yàn)）是指用戶訪問網(wǎng)站或者使用軟件產(chǎn)品時(shí)的全部體驗(yàn)。用戶的印象和感覺，是否成功，是否享受，是否還想再次使用用戶能夠忍受的問題、疑惑和BUG的程度UI的應(yīng)用范圍電腦的軟件界面如操作系統(tǒng)、軟件界面、網(wǎng)頁等手機(jī)的界面數(shù)字電視的界面空調(diào)等家用電器遙控器的界面銀行等柜員機(jī)上的界面……好的設(shè)計(jì)vs.拙劣的設(shè)計(jì)電梯按鈕的設(shè)計(jì)8為什么這臺(tái)自動(dòng)售貨機(jī)如此糟糕？9Tivo遙控器的發(fā)展UI的范疇（工作內(nèi)容）研究用戶我們所開發(fā)的軟件等產(chǎn)品，最終都是為人而做的。所謂以人為本，不能是句空話，所以UI設(shè)計(jì)必須研究人，研究我們的用戶，要了解我們的用戶想要什么，用戶利用我們的產(chǎn)品解決什么問題，喜歡什么、不喜歡什么等等。研究用戶與界面的關(guān)系即人機(jī)交互，研究如何讓用戶更好地更方便的使用軟件，則是我們常說的“易用性”。從事該行業(yè)的人，我們稱之為“交互設(shè)計(jì)師”，主要做的工作內(nèi)容就是設(shè)計(jì)軟件的操作流程、樹狀結(jié)構(gòu)，軟件的結(jié)構(gòu)與操作規(guī)范等。一個(gè)軟件產(chǎn)品在編碼之前需要做的就是交互設(shè)計(jì)，并確立交互模型，交互規(guī)范。研究界面的視覺效果國(guó)內(nèi)目前大部分UI工作者都是從事這個(gè)行業(yè)，也有人稱之為“美工”，實(shí)際上不是單純意義上的美術(shù)工人，而是軟件產(chǎn)品的產(chǎn)品外形設(shè)計(jì)師。UI設(shè)計(jì)的基本原則UI設(shè)計(jì)是一個(gè)復(fù)雜的有不同學(xué)科參與的工程，認(rèn)知心理學(xué)、設(shè)計(jì)學(xué)、語言學(xué)等都扮演著重要的角色。UI設(shè)計(jì)的三大原則是：置界面于用戶的控制之下；減少用戶的記憶負(fù)擔(dān)；保持界面的一致性，即要符合用戶的心智模型?？梢哉f，UI設(shè)計(jì)的所有基本原則都是建立在‘易用性’的基礎(chǔ)上。什么是‘易用性’？包括三個(gè)方面，按重要程度排列如下：產(chǎn)品執(zhí)行用戶所需的功能（快速使用）快速安全地執(zhí)行這些功能（相對(duì)無錯(cuò)）容易掌握使用這些功能（易于學(xué)習(xí)）

用戶體驗(yàn)要素加瑞特(JesseJamesGarrett):《用戶體驗(yàn)要素》界面設(shè)計(jì)公司必備的書，總結(jié)的相對(duì)比較完善的一本書，是真正基于用戶思想來闡述的。功能類（滴滴打車、百度地圖、印象筆記）、信息類（網(wǎng)易新聞,ONE等）兩大類。沒有純粹的功能或信息的軟件，是結(jié)合的。如微信最主要的是聊天功能，但有很多信息（聯(lián)系人的信息等。產(chǎn)品的本質(zhì)就是功能和信息的結(jié)合，但很少有單獨(dú)意義上純功能產(chǎn)品和純信息產(chǎn)品。戰(zhàn)略層--目標(biāo)需求；范圍層--功能內(nèi)容；結(jié)構(gòu)層--交互框架；框架層--界面；表現(xiàn)層--視覺。用戶體驗(yàn)的實(shí)現(xiàn)方法：UCD以用戶為中心的設(shè)計(jì)(User-CenteredDesign,UCD)使用UCD可以避免在考慮問題、設(shè)計(jì)產(chǎn)品時(shí)鉆牛角尖（即技術(shù)優(yōu)先），進(jìn)而能夠從用戶的角度出發(fā)開發(fā)產(chǎn)品。UCD的設(shè)計(jì)思想非常簡(jiǎn)單：在開發(fā)產(chǎn)品的每一個(gè)步驟中，都要把用戶列入考慮范圍。課堂小練習(xí)拿出自己的手機(jī)，分析一下自己手機(jī)上的UI，列出好的地方與不好的地方，越多越好，越全面越好。與同學(xué)交換手機(jī)，按同樣的方法分析?？梢钥紤]的方面（僅供參考）：欠缺的功能經(jīng)常出錯(cuò)或不好用的功能不方便的操作圖標(biāo)或界面問題除了打電話和發(fā)短信外，最常用的功能最想要的功能理想的操作方式……什么是交互設(shè)計(jì)？生活中的交互設(shè)計(jì)請(qǐng)同學(xué)們討論生活中的交互

在使用網(wǎng)站、軟件、消費(fèi)產(chǎn)品、各種服務(wù)時(shí)（實(shí)際上是在同它們交互），使用過程中的感覺就是一種交互體驗(yàn)。隨著網(wǎng)絡(luò)和信息技術(shù)的發(fā)展，各種新產(chǎn)品和交互方式越來越多，人們也越來越重視對(duì)交互的體驗(yàn)。當(dāng)計(jì)算機(jī)剛研制出來時(shí)，可能當(dāng)初的使用者本身就是該行業(yè)的專家，沒有人去關(guān)注使用者的感覺；當(dāng)計(jì)算機(jī)系統(tǒng)的用戶越來越由普通大眾組成時(shí)，對(duì)交互體驗(yàn)的關(guān)注也越來越迫切了。交互設(shè)計(jì)作為一門關(guān)注交互體驗(yàn)的學(xué)科在二十世紀(jì)八十年代產(chǎn)生了。它由IDEO的一位創(chuàng)始人比爾·莫格里奇(BillMoggridge)在1984年一次設(shè)計(jì)會(huì)議上提出，一開始給它命名為“SoftFace”,由于這個(gè)名字容易讓人當(dāng)時(shí)流行的玩具“椰菜娃娃CabbagePatchDoll”，他后來把它更名為“InteractionDesign”1989年，倫敦的皇家藝術(shù)學(xué)院創(chuàng)建了交互設(shè)計(jì)的碩士學(xué)位教育（初始名為“計(jì)算機(jī)相關(guān)的設(shè)計(jì)”，后改名為“交互設(shè)計(jì)”）2001年，創(chuàng)建了交互設(shè)計(jì)研究所，專門從事交互設(shè)計(jì)的研究和教育。目前，全球眾多的教育機(jī)構(gòu)已經(jīng)開展交互設(shè)計(jì)的教育。相關(guān)定義InteractionDesign(IxD)definesthestructureandbehaviorofinteractivesystems.-InteractionDesignAssociation|交互設(shè)計(jì)協(xié)會(huì)ThepracticeofdesigningInteractivedigitalproducts,environments,systems,andservices.-Wikipedia|維基百科交互設(shè)計(jì)，又稱互動(dòng)設(shè)計(jì)，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域。-百度百科交互設(shè)計(jì)交互設(shè)計(jì)(InteractionDesign)是指設(shè)計(jì)人和產(chǎn)品或服務(wù)互動(dòng)的一種機(jī)制。以用戶體驗(yàn)為基礎(chǔ)進(jìn)行的交互設(shè)計(jì)是要考慮用戶的背景、使用經(jīng)驗(yàn)以及在操作過程中的感受，從而設(shè)計(jì)符合最終用戶的產(chǎn)品，使得最終用戶在使用產(chǎn)品時(shí)愉悅、符合自己的邏輯、有效完成并且是高效使用產(chǎn)品。交互設(shè)計(jì)的目的是使產(chǎn)品讓用戶能簡(jiǎn)單使用。任何產(chǎn)品功能的實(shí)現(xiàn)都是通過人和機(jī)器的交互來完成的。HCI即人機(jī)交互(HumanComputerinteraction)交互設(shè)計(jì)師是翻譯，架起用戶和產(chǎn)品之間的橋梁

將產(chǎn)品的邏輯解釋給用戶聽：普通平庸的翻譯VS生動(dòng)有趣的翻譯

交互設(shè)計(jì)在消除隔膜：用戶是否也在這樣的環(huán)境中使用呢？用戶環(huán)境中的工作狀態(tài)未必是很好。交互設(shè)計(jì)在國(guó)外院校國(guó)外的HCI課程和研究主要涉及兩個(gè)方面：一是HCI的理論研究和教學(xué)，從傳統(tǒng)的基于心理學(xué)的交互理論和評(píng)估方法轉(zhuǎn)向基于科學(xué)計(jì)算的formalmethods；二是人機(jī)交互方式的教學(xué)和研究，即研究人與機(jī)器及周邊設(shè)備、環(huán)境、社會(huì)的溝通方式。尤其現(xiàn)在像普適計(jì)算（Ubicomp）、社交計(jì)算（SocialComputing）、CSCW（協(xié)同計(jì)算）、BCI（腦機(jī)交互）等是比較新的方向。界面設(shè)計(jì)、視覺設(shè)計(jì)、交互設(shè)計(jì)之間的關(guān)系我們要蓋一座房子，面朝大海，春暖花開。房前的小徑如何方便進(jìn)出，增加人們交往與偶遇的機(jī)會(huì)，房間的格局如何，讓大人小孩都能各得其樂，窗戶朝向如何布局來增加光照…這是交互設(shè)計(jì)要考慮的問題，信息架構(gòu)、交互流程等等。房子的外觀看起來什么樣，營(yíng)造出什么樣的視覺體驗(yàn)，地板和門應(yīng)該是什么顏色才能顯得「高端大氣國(guó)際化」…這是視覺設(shè)計(jì)要考慮的問題，布局、色彩、圖標(biāo)等等。這座房子和人發(fā)生關(guān)聯(lián)的部分，就是界面。UserInterface，用戶界面，用戶接口，顯然，這樣的接口需要交互和視覺共同的支持。交互設(shè)計(jì)和視覺設(shè)計(jì)是完全獨(dú)立的么？不是。蓋房子是個(gè)系統(tǒng)工程，交互和視覺都是其中一部分。交互設(shè)計(jì)師心中要有視覺映像，視覺設(shè)計(jì)師頭腦中要有流程和架構(gòu)，越是資深的設(shè)計(jì)師，這兩方面越是融合在一起，因?yàn)樵镜哪康氖且w房子啊。怎樣成為交互設(shè)計(jì)師？交互設(shè)計(jì)師的招聘要求百度搜索用戶體驗(yàn)中心招聘2021-01-12發(fā)布于拉勾網(wǎng)職位描述：1、負(fù)責(zé)百度搜索或商業(yè)產(chǎn)品的交互設(shè)計(jì)工作；2、根據(jù)需求和用戶研究的結(jié)果，完成界面的信息架構(gòu)、流程設(shè)計(jì)和原型設(shè)計(jì)，提高產(chǎn)品的易用性；3、對(duì)現(xiàn)有產(chǎn)品的可用性測(cè)試和和評(píng)估，提出改進(jìn)方案，持續(xù)優(yōu)化產(chǎn)品的用戶體驗(yàn)；4、編寫界面交互設(shè)計(jì)文檔，維護(hù)和更新界面設(shè)計(jì)標(biāo)準(zhǔn)和規(guī)范；5、人機(jī)交互、心理學(xué)、軟件工程、工業(yè)設(shè)計(jì)或相關(guān)設(shè)計(jì)學(xué)科的學(xué)歷。交互設(shè)計(jì)師的招聘要求百度搜索用戶體驗(yàn)中心招聘2021-01-12發(fā)布于拉勾網(wǎng)職位描述：1、負(fù)責(zé)百度搜索或商業(yè)產(chǎn)品的交互設(shè)計(jì)工作；2、根據(jù)需求和用戶研究的結(jié)果，完成界面的信息架構(gòu)、流程設(shè)計(jì)和原型設(shè)計(jì)，提高產(chǎn)品的易用性；3、對(duì)現(xiàn)有產(chǎn)品的可用性測(cè)試和和評(píng)估，提出改進(jìn)方案，持續(xù)優(yōu)化產(chǎn)品的用戶體驗(yàn)；4、編寫界面交互設(shè)計(jì)文檔，維護(hù)和更新界面設(shè)計(jì)標(biāo)準(zhǔn)和規(guī)范；5、人機(jī)交互、心理學(xué)、軟件工程、工業(yè)設(shè)計(jì)或相關(guān)設(shè)計(jì)學(xué)科的學(xué)歷。就業(yè)方向-交互設(shè)計(jì)師就業(yè)方向-交互設(shè)計(jì)師就業(yè)方向-產(chǎn)品經(jīng)理誰是交互設(shè)計(jì)師審美創(chuàng)新同理心邏輯思維評(píng)判數(shù)據(jù)分析溝通觀察細(xì)節(jié)全局執(zhí)行激情沉穩(wěn)誰是交互設(shè)計(jì)師需求分析項(xiàng)目確立交互設(shè)計(jì)原型設(shè)計(jì)視覺設(shè)計(jì)研發(fā)跟蹤與設(shè)計(jì)維護(hù)交互設(shè)計(jì)師項(xiàng)目經(jīng)理產(chǎn)品經(jīng)理用戶調(diào)研數(shù)據(jù)中心產(chǎn)品人員視覺設(shè)計(jì)師產(chǎn)品人員設(shè)計(jì)師研發(fā)與測(cè)試設(shè)計(jì)師我們?cè)撟鍪裁刺剿鞣治龆x預(yù)測(cè)規(guī)劃描述交互設(shè)計(jì)目標(biāo)用戶市場(chǎng)狀態(tài)競(jìng)爭(zhēng)對(duì)手技術(shù)手段表現(xiàn)效果交互方式原型Demo交互規(guī)范交互規(guī)范情景模型信息架構(gòu)升級(jí)拓展用戶反應(yīng)市場(chǎng)前景成本怎么做工欲善其事，必先利其器：視覺、圖標(biāo)線性圖標(biāo)動(dòng)效AxureRP

原型和流程圖制作利器XMind繪制思維導(dǎo)圖和產(chǎn)品架構(gòu)紙（白板）和筆繪制低保真原型，溝通和記錄的最高效工具設(shè)計(jì)溝通的重要性，不亞于設(shè)計(jì)本身設(shè)計(jì)能力溝通能力演講能力企業(yè)招聘時(shí)關(guān)注什么？作品已經(jīng)發(fā)布的作品&實(shí)習(xí)經(jīng)歷有用戶數(shù)據(jù)反饋的項(xiàng)目則更好虛擬作品的完整度：流程、順序理論知識(shí)體系視覺類、平面類課程用戶研究（應(yīng)關(guān)心過程）設(shè)計(jì)心理學(xué)計(jì)算機(jī)類課程軟技能思路、邏輯清晰溝通能力是否擅長(zhǎng)總結(jié)是否具有好奇心設(shè)計(jì)師的視野平時(shí)最喜歡的設(shè)計(jì)網(wǎng)站介紹最喜歡的互聯(lián)網(wǎng)產(chǎn)品發(fā)展前景交互專家方向發(fā)展管理方向：設(shè)計(jì)團(tuán)隊(duì)的teamleader產(chǎn)品經(jīng)理推薦書籍和網(wǎng)站洗腦書：Don’tmakemethink，SteveKrug字典：AboutFace3交互設(shè)計(jì)精髓，AlanCooper界面設(shè)計(jì)技巧：親愛的界面，Lukasmathis有啟發(fā)的心理學(xué)知識(shí)：設(shè)計(jì)心理學(xué)，DonaldNorman設(shè)計(jì)全流程工具書：贏在用戶-web人物角色創(chuàng)建和應(yīng)用實(shí)踐指南移動(dòng)導(dǎo)航工具書：移動(dòng)應(yīng)用UI設(shè)計(jì)模式，Theresaneil設(shè)計(jì)規(guī)范：materialDesign/iOS12作業(yè)1、深入了解目前交互設(shè)計(jì)相關(guān)的就業(yè)方向和具體要求2、確定小組成員，通過頭腦風(fēng)暴的方法初步小組的項(xiàng)目主題。第二章

交互設(shè)計(jì)理論基礎(chǔ)

主要內(nèi)容：涉及的相關(guān)學(xué)科交互設(shè)計(jì)中的認(rèn)知因素交互設(shè)計(jì)中的情感因素交互設(shè)計(jì)的模型2.1交互設(shè)計(jì)涉及的學(xué)科人體工程學(xué)定義與研究?jī)?nèi)容定義人體工程學(xué)是研究“人-機(jī)-環(huán)境”系統(tǒng)中人、機(jī)、環(huán)境三大要素之間的關(guān)系，為解決系統(tǒng)中的人的效能、健康問題提供理論與方法的科學(xué)。

研究?jī)?nèi)容研究人與機(jī)器之間的分工與配合；研究機(jī)具如何能更適合人的操作和使用，以提高人的工作效率，減輕人的疲勞和勞動(dòng)強(qiáng)度；研究人機(jī)系統(tǒng)的工作環(huán)境對(duì)操作者的影響，用以改善工作環(huán)境；研究人機(jī)之間的界面，信息傳遞以及控制器和顯示器的設(shè)計(jì)等等。人機(jī)系統(tǒng)隨著時(shí)代的發(fā)展、科技的進(jìn)步，人機(jī)關(guān)系由人操作工具、人適應(yīng)機(jī)器、機(jī)器適合于人，發(fā)展到了現(xiàn)代的人機(jī)協(xié)調(diào)。人適應(yīng)機(jī)器的能力是有一定限度的，人機(jī)關(guān)系進(jìn)一步的解決辦法是改善機(jī)器，讓它適合于人的操作。完整人機(jī)系統(tǒng)的六種功能信息接收信息加工信息貯存執(zhí)行功能信號(hào)反饋輸入與輸出這些功能是連續(xù)進(jìn)行的，是人機(jī)共同作用而實(shí)現(xiàn)的。人機(jī)系統(tǒng)就能滿足以下要求：達(dá)到預(yù)定的目的，完成預(yù)定的任務(wù)；人機(jī)都能發(fā)揮各自的作用并協(xié)調(diào)一致地工作；系統(tǒng)提供接收輸入和完成輸出的功能，并具備協(xié)調(diào)功能；系統(tǒng)設(shè)計(jì)應(yīng)考慮環(huán)境因素影響；人機(jī)系統(tǒng)應(yīng)充分適應(yīng)人的特性，讓人容易學(xué)習(xí)、操作、使用系統(tǒng)，充分發(fā)揮系統(tǒng)效能。2.2交互設(shè)計(jì)中的認(rèn)知因素認(rèn)知是人們?cè)谶M(jìn)行日?；顒?dòng)時(shí)發(fā)生在頭腦中的過程，涉及感知、視覺、記憶、注意、思維等多種活動(dòng)。Norman將其分為兩種模式：經(jīng)驗(yàn)認(rèn)知和思維認(rèn)知。

經(jīng)驗(yàn)認(rèn)知是指有效、輕松地觀察、操作和響應(yīng)周圍的事件，要求具備某些專門知識(shí)并達(dá)到一定熟練的程度，如駕駛汽車、閱讀等。思維認(rèn)知涉及思考、比較和決策，是發(fā)明創(chuàng)造的來源，如設(shè)計(jì)、學(xué)習(xí)、寫作等。常見的認(rèn)知過程感知和識(shí)別注意記憶語言處理問題解決1.感知和識(shí)別在交互設(shè)計(jì)中，在結(jié)合不同的媒體時(shí)，應(yīng)確保用戶能夠理解它們所表示的復(fù)合信息。用戶應(yīng)能夠不費(fèi)力地區(qū)別圖標(biāo)或其他圖形表示的不同含義。文字應(yīng)清晰易讀，且不受背景干擾。在結(jié)合使用聲音和動(dòng)畫時(shí)，需要仔細(xì)協(xié)調(diào)，合理安排它們的調(diào)用次序。Whichiseasiesttoreadandwhy?Whatisthetime?Whatisthetime?Whatisthetime?Whatisthetime?Whatisthetime?572.注意注意作為認(rèn)知過程的一部分，通常是指選擇性注意，即有選擇的加工某些刺激而忽視其他刺激。注意是人的感覺(視覺、聽覺、味覺)和知覺(意識(shí)、思維)同時(shí)對(duì)一定對(duì)象的選擇指向和集中。例如：側(cè)耳傾聽某人說話，而忽略房間內(nèi)其他人的交談。注意的兩個(gè)基本特征：指向性：指心理活動(dòng)有選擇的反映一些現(xiàn)象而離開其余對(duì)象集中性：指心理活動(dòng)停留在被選擇對(duì)象上的強(qiáng)度或緊張注意的功能：選擇功能：選擇有意義的、符合需要的和與當(dāng)前活動(dòng)任務(wù)相一致的各種刺激；避開或抑制其它無意義的、附加的、干擾當(dāng)前活動(dòng)的各種刺激。保持功能：注意對(duì)象的內(nèi)容保持在意識(shí)中，直到完成任務(wù)，達(dá)到目的。對(duì)活動(dòng)的調(diào)節(jié)和監(jiān)督功能：有意注意可以控制活動(dòng)向著一定的目標(biāo)和方向進(jìn)行，使注意適當(dāng)分配和適當(dāng)轉(zhuǎn)移。注意相關(guān)的因素：目標(biāo)：確切知道需要找什么，人們就可以把獲得的信息與目標(biāo)相比較。信息的表示形式：信息的顯示方式對(duì)于人們能否快速捕捉到所需的信息片斷有很大的影響。分類顯示的信息就比較便于人們查找左側(cè)需要花5.5秒進(jìn)行搜索

右側(cè)則需花3.2秒進(jìn)行搜索

為什么？由于的人的注意特點(diǎn)，在設(shè)計(jì)人機(jī)交互界面時(shí)應(yīng)該：信息的顯示應(yīng)醒目?？墒褂脛?dòng)畫圖形、采色、下劃線，對(duì)條目及不同的信息進(jìn)行排序，在條目之間使用間隔符等。避免在界面上安排過多的信息。尤其要謹(jǐn)慎使用色彩、聲音和圖像，人們傾向于使用過多的這類表示，而導(dǎo)致界面混雜，分散用戶的注意力，讓用戶反感。樸實(shí)的界面更容易使用3.記憶記憶就是回憶各種知識(shí)以便采取適當(dāng)?shù)男袆?dòng)。記憶過程有三個(gè)環(huán)節(jié)：識(shí)記：相當(dāng)于信息的輸入和編碼過程，也就是使用不同感官輸入的信息，經(jīng)過編碼而成為頭腦可接受的形式；保持：相當(dāng)于信息的貯存，即信息在頭腦中被再加工整理，使其成為有序的組織結(jié)構(gòu)，以便貯存；再認(rèn)和回憶：相當(dāng)于信息的提取，編碼越完善、組織越有序，提取也就越容易，反之，提取越困難。

考慮到人的記憶特點(diǎn)，進(jìn)行交互設(shè)計(jì)時(shí)應(yīng)注意的問題有：應(yīng)考慮用戶的記憶能力，勿使用過于復(fù)雜的任務(wù)執(zhí)行步驟；由于用戶長(zhǎng)于“識(shí)別”而短于“回憶”，所以在設(shè)計(jì)界面時(shí)應(yīng)使用菜單、圖標(biāo)，且它們的位置應(yīng)保持一致；為用戶提供多種電子信息（如文件、郵件、圖像）的編碼方式，并且通過顏色、標(biāo)志、時(shí)間戳、圖標(biāo)等，幫助用戶記住它們的存放位置。4.問題解決人的思維認(rèn)知能力取決于在相關(guān)行業(yè)的經(jīng)驗(yàn)以及對(duì)應(yīng)用和技能的掌握程度。新手往往只具備有限的知識(shí)，在一開始可能會(huì)頻頻犯錯(cuò)、操作效率低，也可能因?yàn)橹庇X錯(cuò)誤，或者由于缺乏預(yù)見能力而采取一些不合理的方法。專家則具備更豐富的知識(shí)和經(jīng)驗(yàn)，且能選擇最優(yōu)的策略來完成任務(wù)。專家也具備預(yù)見能力，能夠預(yù)見某個(gè)舉動(dòng)或解決方案會(huì)有什么樣的結(jié)果。

2.3交互設(shè)計(jì)中的情感因素情感因素會(huì)影響人的感知和認(rèn)知能力積極的情感會(huì)使人的思考更具創(chuàng)造性，解決復(fù)雜問題的能力更強(qiáng)；消極的情感使人的思考更加片面，還會(huì)影響其他方面的感知和認(rèn)知能力。當(dāng)一個(gè)人處于積極的情感狀態(tài)時(shí)，對(duì)系統(tǒng)中的交互設(shè)計(jì)缺陷不會(huì)太在意，但這決不能成為可以設(shè)計(jì)一個(gè)較差的交互系統(tǒng)的理由。1.情感情感因素會(huì)影響人的感知和認(rèn)知能力一個(gè)好的交互系統(tǒng)，應(yīng)該能夠充分考慮人在各種情感狀態(tài)下的認(rèn)知特點(diǎn)，有針對(duì)性地進(jìn)行交互的設(shè)計(jì)；一個(gè)差的交互系統(tǒng)會(huì)反過來影響一個(gè)人的情緒，從而影響他解決問題的能力。情感計(jì)算計(jì)算機(jī)系統(tǒng)的設(shè)計(jì)應(yīng)當(dāng)像人類一樣能夠識(shí)別和表達(dá)感情，這被稱為“情感計(jì)算”。情感計(jì)算主要研究通過各種傳感器獲取由人的情感所引起的生理及行為特征信號(hào)，建立“情感模型”從而訓(xùn)練感知、識(shí)別和理解人類情感的能力，并能針對(duì)用戶的情感做出智能、靈敏、友好反應(yīng)的個(gè)人計(jì)算系統(tǒng)，縮短人機(jī)之間的距離，營(yíng)造真正和諧的人機(jī)環(huán)境。2.個(gè)體的差異進(jìn)行交互系統(tǒng)設(shè)計(jì)時(shí)還不能忘記人是存在個(gè)性差異的，如：長(zhǎng)期的，如性別、體力和智力水平短期的，如壓力和情感因素對(duì)人的影響隨時(shí)間變化的，如人的年齡等人機(jī)交互設(shè)計(jì)應(yīng)充分考慮個(gè)體的差異當(dāng)進(jìn)行任何一種交互系統(tǒng)設(shè)計(jì)時(shí)，應(yīng)該考慮我們的決定是否會(huì)對(duì)目標(biāo)用戶中的一部分帶來不方便；現(xiàn)有的強(qiáng)調(diào)圖形界面的交互設(shè)計(jì)實(shí)際上排除了那些有視力缺陷的人，因此系統(tǒng)應(yīng)考慮提供其他的感知通道。2.4交互設(shè)計(jì)的模型概念模型及對(duì)概念模型的認(rèn)知概念模型：指的是一種用戶能夠理解的系統(tǒng)描述，它使用一組集成的構(gòu)思和概念，描述系統(tǒng)做什么、如何運(yùn)作、外觀如何等。案例：一個(gè)旅游公司想要構(gòu)建一個(gè)無線信息系統(tǒng)，目的是幫助游客在陌生的城市尋找目的地。設(shè)計(jì)這個(gè)系統(tǒng)要做的第一步就是考慮系統(tǒng)與游客交互的概念模型。首先，搞清楚游客想要知道什么？通常游客想要了解的信息五花八門，如：如何從A到達(dá)B？郵局在哪？哪里有好的餐館等。然后考慮如何支持游客的這種“問訊”活動(dòng)。如讓游客直接向系統(tǒng)提問是不是一個(gè)好方法？或者，游客是否習(xí)慣于向機(jī)器輸入指令詢問問題的方式？概念模型設(shè)計(jì)的關(guān)鍵過程設(shè)計(jì)一個(gè)概念模型的關(guān)鍵過程應(yīng)包括以下兩個(gè)階段：了解用戶在執(zhí)行日常任務(wù)時(shí)做什么；選擇交互方式，并決定采用何種交互形式。一個(gè)系統(tǒng)能夠做到讓用戶感到滿意，除了在設(shè)計(jì)開始階段建立一個(gè)好的概念模型外，還應(yīng)考慮如何根據(jù)人的認(rèn)知特點(diǎn)，提供多種手段，使用戶能盡快理解關(guān)于系統(tǒng)外觀及行為即概念模型的構(gòu)思，這是一個(gè)非常基本的問題。設(shè)計(jì)者重要的目標(biāo)之一就是要使表現(xiàn)模型和用戶的心理模型盡可能地接近111上面這組例子，不難發(fā)現(xiàn)攝影師經(jīng)過設(shè)計(jì)后呈現(xiàn)出來的照片，和用戶心理期待的照片很接近，所以用戶就會(huì)很滿意。這說明當(dāng)表現(xiàn)模型與用戶的心理模型較接近時(shí)，用戶的體驗(yàn)感較好。

交互設(shè)計(jì)中也一樣，如果接近用戶認(rèn)為的操作方式，這樣的產(chǎn)品就能減少用戶的學(xué)習(xí)和記憶負(fù)擔(dān)，用戶會(huì)感覺它是一個(gè)易用、好用的產(chǎn)品。相反，用戶會(huì)覺得這是一個(gè)不好用的產(chǎn)品。1作業(yè)：根據(jù)小組確定的交互設(shè)計(jì)項(xiàng)目主題，開展競(jìng)品分析。第三講

用戶研究簡(jiǎn)述

主要內(nèi)容1、用戶研究之前2、理解定性研究與定量研究3、避免走入用戶研究的誤區(qū)分析研究是第一個(gè)環(huán)節(jié)，目的是初步驗(yàn)證愿景和收獲需求（機(jī)會(huì)），作為之后設(shè)計(jì)的依據(jù)輸入，做三件事情：1

利益關(guān)系人溝通：也就是跟各相關(guān)單位老大（比如發(fā)起人，研發(fā)老大，市場(chǎng)老大等）溝通，了解老大們對(duì)產(chǎn)品的期望，能夠給予的資源等，一般是直接溝通，任何溝通方式均可，有時(shí)候會(huì)錄音郵件留個(gè)證據(jù)...2

審查：盡可能閱讀各種相關(guān)材料，比如商業(yè)計(jì)劃，產(chǎn)品計(jì)劃，市場(chǎng)調(diào)查報(bào)告，平臺(tái)規(guī)范等，以更綜合地為設(shè)計(jì)做鋪墊，當(dāng)中會(huì)用到文獻(xiàn)調(diào)研，競(jìng)品分析，啟發(fā)式評(píng)估等方法。團(tuán)隊(duì)的不同角色根據(jù)各自職責(zé)進(jìn)行分析，比如視覺設(shè)計(jì)師可能多分析現(xiàn)在的視覺潮流，產(chǎn)品載體所在平臺(tái)的設(shè)計(jì)規(guī)范，當(dāng)然結(jié)果是面向所有人共享的。競(jìng)品分析：就是對(duì)競(jìng)爭(zhēng)產(chǎn)品或者類似產(chǎn)品進(jìn)行分析，取其精華棄其糟粕，以找到改善自身的機(jī)會(huì)。(優(yōu)點(diǎn)，缺點(diǎn)，機(jī)會(huì)點(diǎn)等)3用戶研究：目的是了解用戶及其需求。1、用戶研究的目的用戶研究穿插在產(chǎn)品設(shè)計(jì)的各個(gè)階段其兩個(gè)核心的價(jià)值是“發(fā)現(xiàn)問題”與“解決問題”用戶研究是對(duì)用戶目標(biāo)、需求和能力的系統(tǒng)研究，用于指導(dǎo)設(shè)計(jì)、產(chǎn)品結(jié)構(gòu)或者工具的優(yōu)化，提升用戶工作和生活體驗(yàn)。目標(biāo)用戶是誰？有些什么特點(diǎn)？會(huì)有怎樣的行為？目標(biāo)用戶的需求是什么？痛點(diǎn)是什么？有什么期待？目標(biāo)用戶所處的場(chǎng)景是什么樣子的？理論知識(shí)：永遠(yuǎn)的中間用戶理論知識(shí)：永遠(yuǎn)的中間用戶市場(chǎng)業(yè)務(wù)部分更多地考慮新手開發(fā)人員更多地考慮專家理解定性研究與定量研究用戶的觀點(diǎn)用戶的行為問卷數(shù)據(jù)分析眼動(dòng)實(shí)驗(yàn)等用戶訪談?dòng)脩舢嬒竦瓤捎眯詼y(cè)試卡片分類案例：是否要養(yǎng)一只狗（1）狗是最普遍的寵物，幾乎每個(gè)人都會(huì)有1只；（2）寄養(yǎng)1只狗的花費(fèi)平均在21-45元/天；（3）每只狗的平均花費(fèi)：狗糧324元/年，醫(yī)療美容248元/年；（4）很容易找到寄養(yǎng)狗的地方而且價(jià)格不高；（5）46%的家庭至少會(huì)有1只狗；（6）養(yǎng)只健康的狗花費(fèi)不會(huì)太貴……理解定性研究與定量研究研究方法行為與態(tài)度研究及參與者角色定性與定量樣本量日志分析均可自主報(bào)告均可中或大訪談態(tài)度自主報(bào)告定性小或中問卷調(diào)查均可自主報(bào)告定量大卡片分類行為觀察定量小焦點(diǎn)小組態(tài)度自主報(bào)告定性中等田野研究均可觀察均可中等評(píng)估行為觀察或?qū)＜以u(píng)估均可小或中理解定性研究與定量研究研究的三角認(rèn)證數(shù)據(jù)三角互證：將各種數(shù)據(jù)來源匯總在一起；研究者三角互證：聘請(qǐng)不同的研究人員來處理同一個(gè)問題；理論三角互證：以不同的視角檢驗(yàn)同一組數(shù)據(jù)；方法論三角互證：將各類不同的方法匯總到一起。理解定性研究與定量研究3.避免走入用戶研究的誤區(qū)用戶研究穿插在產(chǎn)品設(shè)計(jì)的各個(gè)階段其兩個(gè)核心的價(jià)值是“發(fā)現(xiàn)問題”與“解決問題”作業(yè)1、初步確定用戶研究方法2、了解用戶研究員的崗位職責(zé)第四講

用戶研究方法

主要內(nèi)容：1、問卷調(diào)查2、用戶訪談3、用戶觀察4、數(shù)據(jù)分析用戶研究是對(duì)用戶目標(biāo)、需求和能力的系統(tǒng)研究，用于指導(dǎo)設(shè)計(jì)、產(chǎn)品結(jié)構(gòu)或者工具的優(yōu)化，提升用戶工作和生活體驗(yàn)。在做用戶研究計(jì)劃時(shí)，最好先停下來想清楚到底想知道什么，再確定哪種方法最合適。用戶訪談對(duì)用戶目標(biāo)和觀點(diǎn)進(jìn)行定性的觀察和發(fā)掘；調(diào)查問卷則用于測(cè)試和驗(yàn)證這些發(fā)現(xiàn)；行為實(shí)驗(yàn)（如可用性測(cè)試）對(duì)用戶的行為進(jìn)行定性的觀察；日志分析則通過大量的數(shù)據(jù)來確保這些行為模式具有統(tǒng)計(jì)意義上的真實(shí)性。1、問卷問卷(Questionnaire)是為了搜集人們對(duì)某個(gè)特定問題的態(tài)度、觀點(diǎn)或信念等信息而設(shè)計(jì)的一系列問題，它的形式是一份精心設(shè)計(jì)的問題表格，用途在于測(cè)量人們的態(tài)度、行為等特征。進(jìn)行問卷調(diào)查最重要的一件事就是確定調(diào)查對(duì)象如對(duì)于一項(xiàng)關(guān)于網(wǎng)絡(luò)購物的問卷調(diào)查，我們就要對(duì)調(diào)查對(duì)象進(jìn)行分析：現(xiàn)有的在線顧客、經(jīng)常網(wǎng)購的顧客、顧客新手、專家用戶等等，只有在了解目標(biāo)對(duì)象之后，才能確定問卷調(diào)查的目的與內(nèi)容。在用戶研究中，問卷調(diào)查有兩個(gè)目的：第一，問卷調(diào)查是為了在大人群中獲取整體系統(tǒng)的信息。相對(duì)于觀察訪談來說，問卷調(diào)查的面更廣、簡(jiǎn)便易行、省時(shí)省力，可以對(duì)較大的人群量進(jìn)行數(shù)據(jù)的收集，更容易悼念到用戶的目標(biāo)、行為、觀點(diǎn)和人口統(tǒng)計(jì)特征等量化數(shù)據(jù)。第二，問卷調(diào)查是為了挖掘與產(chǎn)品設(shè)計(jì)相關(guān)的信息，與用戶界面和可用性相關(guān)的信息。觀察與訪談只是初步了解影響產(chǎn)品設(shè)計(jì)和用戶界面設(shè)計(jì)的基本的因素框架，還需要通過問卷調(diào)查在更大的樣本量上確定各個(gè)因素之間的關(guān)系和因素與用戶之間的關(guān)系。問卷類型問卷調(diào)查方法2、訪談訪談法(interviewmethod)是由訪談員根據(jù)研究所確定的要求與目的，按照訪談提綱或問卷，通過個(gè)別面訪或集體交談的方式，系統(tǒng)而有計(jì)劃地收集資料的一種方法。訪談?lì)愋驮L談過程介紹：“你好，我是一名研究咖啡的某某學(xué)校的學(xué)生。我很想聽聽您對(duì)咖啡的體驗(yàn)。答案沒有正誤之分，只是想聽聽您的想法。”開場(chǎng)白：“您喝咖啡嗎？”建立融洽關(guān)系：“您今天喝咖啡了嗎？它怎么樣？您有喜歡的咖啡嗎？”開始訪談：“您能描述一下您最難忘的咖啡體驗(yàn)嗎？為什么它如此獨(dú)特？發(fā)生了什么？……”反思：“如果您要根據(jù)自己的理想體驗(yàn)設(shè)計(jì)終極咖啡店……”介紹開場(chǎng)白建立融洽關(guān)系開始訪談反思結(jié)束設(shè)計(jì)訪談問題的指導(dǎo)原則：避免過長(zhǎng)的問題，因?yàn)樗鼈儾槐阌谟洃?。避免使用?fù)合句，應(yīng)把它們分解幾個(gè)獨(dú)立的問題。例如，應(yīng)把問題“這款手機(jī)與你先前擁有的手機(jī)相比，你覺得如何”改為“你覺得這款手機(jī)怎么樣？你是否有其他的手機(jī)？若是的話，你覺得它怎么樣”。后一種問法對(duì)于受訪者較為容易，而且也便于訪問人做記錄。避免使用可能讓用戶感覺尷尬的術(shù)語或他們無法理解的語言。避免使用有誘導(dǎo)性的問題。例如：“你為什么喜歡這種交互方式？”若單獨(dú)使用這個(gè)問題，它就帶有一種假設(shè)，即用戶喜歡它。盡可能保證問題是中性的，避免把自己的偏見帶入問題。訪談條件訪談分析研究/訪談過程中，充分挖掘細(xì)節(jié)對(duì)于研究員來說，這個(gè)產(chǎn)品是他的全部。但對(duì)于用戶來說，這只是他每天可能接觸到的上百個(gè)產(chǎn)品中的1個(gè)。這意味著，第一，他平時(shí)只會(huì)花極少的時(shí)間來考慮這個(gè)產(chǎn)品，至少比研究員要少得多。第二，在研究員登門拜訪時(shí)，他的頭腦里很可能還被貿(mào)易戰(zhàn)占據(jù)著。對(duì)細(xì)節(jié)的挖掘可以逐步引導(dǎo)用戶進(jìn)入狀態(tài)，在充分的事實(shí)顯露出來之后，跟你一起以合理的方式解釋自己的行為，而不至于信口開河。而如果研究員滿腦子都是自己的主觀想法，又碰到一個(gè)還在急切關(guān)注人類的末日是否到來的用戶。訪談質(zhì)量可想而知了。注意對(duì)方的立場(chǎng)多方引證，確認(rèn)論據(jù)充分，論證嚴(yán)謹(jǐn)，論點(diǎn)可信在時(shí)間允許的情況下，反復(fù)推敲后再得出結(jié)論3、用戶觀察在實(shí)地直接觀察結(jié)構(gòu)性框架參與程度（內(nèi)部人或外部人）人種學(xué)在受控環(huán)境中的直接觀察間接觀察：跟蹤用戶的活動(dòng)日記交互記錄通過無人機(jī)或其他設(shè)備遠(yuǎn)程收集的視頻和照片觀

察受控環(huán)境（類似于實(shí)驗(yàn)室環(huán)境）真實(shí)環(huán)境（自然環(huán)境）作為旁觀者可用性測(cè)試中的快速觀察實(shí)地研究中的快速觀察作為參與者無參與式觀察（現(xiàn)場(chǎng)研究）觀察的類型指導(dǎo)觀察的結(jié)構(gòu)化框架三個(gè)容易記住的部分人：誰？地點(diǎn)：哪里？事情：什么？一個(gè)更詳細(xì)的框架（Robson，2014）空間：物理空間是什么樣的，它是如何布置的？行為者：參與的人的名字和相關(guān)細(xì)節(jié)是什么？活動(dòng)：在做什么，為什么？物體：有哪些實(shí)物，如家具等。行為：什么是具體的個(gè)人行動(dòng)？事件：你所觀察到的是一個(gè)特殊事件的一部分嗎？時(shí)間：事件的順序是什么？目標(biāo)：行為者想要完成什么？情感：團(tuán)體和個(gè)人的情緒是怎樣的？規(guī)劃和進(jìn)行實(shí)地觀察決定你將如何參與：從被動(dòng)的觀察者到主動(dòng)的參與者如何處理敏感話題（如，文化、私人空間，等等）如何收集數(shù)據(jù)：要收集哪些數(shù)據(jù)使用什么設(shè)備何時(shí)停止觀察4、數(shù)據(jù)分析數(shù)據(jù)分析的作用：記錄、了解和預(yù)測(cè)第三方數(shù)據(jù)平臺(tái)：Alexa、ASO100、AppBOTASO100是為iOS打造的App

Store大數(shù)據(jù)平臺(tái)。AppBOT平臺(tái)可以看到每個(gè)版本的好評(píng)差評(píng)占比從數(shù)據(jù)分析中提煉設(shè)計(jì)結(jié)論數(shù)據(jù)分析與解釋量化分析質(zhì)性分析作業(yè)選擇1-2種用戶研究方法，根據(jù)項(xiàng)目主題開展用戶研究第五講

人物角色的創(chuàng)建與運(yùn)用

分析需求——人物角色法人物角色法：用研究結(jié)果來生成關(guān)于用戶描述性的模型，叫做“人物角色”。確定產(chǎn)品基礎(chǔ)；促進(jìn)設(shè)計(jì)決策交流；達(dá)成設(shè)計(jì)一致；權(quán)衡設(shè)計(jì)效率；促進(jìn)營(yíng)銷等其它工作。主要內(nèi)容：1.什么是人物角色2.為什么要建立人物角色3.如何建立人物角色4.如何使用人物角色一個(gè)前提：以用戶為中心1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色人物角色(Persona)是針對(duì)目標(biāo)群體真實(shí)特征的勾勒是真實(shí)用戶的綜合原型1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色為什么要建立人物角色？Thewholepointofcreatingpersonasistogetpastourpersonalopinionsandpresuppositionstounderstandwhatuserstrulyneed.1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色人物角色第一信條：不可能建立一個(gè)適合所有人的產(chǎn)品。人物角色第二信條：你不是用戶。用戶（的需求）是不同的1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色如何建立人物角色？1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色如何使用人物角色？人物角色是設(shè)計(jì)工具1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色1.什么是人物角色》2.為什么要建立人物角色》3.如何建立人物角色》4.如何使用人物角色這就是人物角色用戶人物角色是……描繪清晰可及的用戶形象，作為團(tuán)隊(duì)一致的工作目標(biāo)對(duì)象。幫助想象用戶如何使用這個(gè)產(chǎn)品。幫助思考產(chǎn)品的可能性，做出最符合用戶需求的決定。作業(yè)完成小組項(xiàng)目的人物角色第六講

從需求到設(shè)計(jì)

主要內(nèi)容1、需求收集與需求分析2、用戶體驗(yàn)地圖3、表達(dá)需求：情景劇本4、確定功能和數(shù)據(jù)2、什么是用戶需求在什么場(chǎng)景下，用戶通過產(chǎn)品做什么事情。如：在關(guān)燈的房間（場(chǎng)景），用戶（什么人）用閱讀軟件（產(chǎn)品）閱讀（做什么）。在接完朋友來電后（場(chǎng)景），用戶（什么人）通過通話列表（產(chǎn)品）存儲(chǔ)聯(lián)系人信息（做什么）。在尋找怎么到某目的地時(shí)（場(chǎng)景），用戶（什么人）通過地圖（產(chǎn)品）搜索最優(yōu)路線（做什么）。當(dāng)拷貝一條下載地址時(shí)，迅雷自動(dòng)彈出新建任務(wù)窗口并把地址復(fù)制進(jìn)去，就是基于場(chǎng)景的設(shè)計(jì)。下載時(shí)遭遇龜速，讓你開通會(huì)員，也是基于場(chǎng)景，開通會(huì)員的入口這種打開方式才是正確的。還有下載完，給你提供的打開文件和文件夾按鈕。場(chǎng)景是歸納需求不可缺少的前提，需求蘊(yùn)含在場(chǎng)景里。Rose是人物角色，她的身份是個(gè)阿姨？學(xué)生？她關(guān)注的是什么類型商品？對(duì)價(jià)格敏感嗎？她平常去超市會(huì)經(jīng)歷的場(chǎng)景有逛貨架？排隊(duì)？停車？在這些場(chǎng)景中，需求是找促銷商品？買特定物品？知道購物車?yán)锏纳唐穬r(jià)格？排隊(duì)的等待時(shí)長(zhǎng)？回答這些問題，我們就能大致判斷出接下來設(shè)計(jì)的方向了?；疑木褪钦娴?，黑色的是假的，綠色的是真正的需求：需求的優(yōu)先權(quán)分析⑵提高區(qū)：用戶需求重要性相對(duì)較低，同時(shí)當(dāng)前用戶的滿意程度也低。相對(duì)低的當(dāng)前用戶滿意程度暗示著解決這些問題有相當(dāng)大的潛力。雖然這些需求不是最重要的但是，這些問題的解決有利于提高用戶綜合滿意程度。⑶保持區(qū)：用戶需求重要性較高，同時(shí)當(dāng)前用戶的滿意程度卻也較高。這些需求往往反映了已經(jīng)較好地解決了的系統(tǒng)主要問題。但是由于這些需求的重要性，所以在設(shè)計(jì)開發(fā)過程中要注意保持和繼續(xù)提高其用戶滿意水準(zhǔn)，避免倒退。⑷觀察區(qū)：用戶需求重要性相對(duì)較低，同時(shí)當(dāng)前用戶的滿意程度卻相對(duì)較高。一般來講，這些問題不需要占用設(shè)計(jì)開發(fā)的過多資源，但作為一些輕微影響用戶綜合滿意程度的因素，也應(yīng)隨時(shí)了解其發(fā)展動(dòng)向。⑴焦點(diǎn)區(qū)：用戶需求重要性最高，同時(shí)當(dāng)前用戶的滿意程度卻相對(duì)較低。這一區(qū)域的需求對(duì)于用戶和設(shè)計(jì)開發(fā)者來說都是最迫切的2、用戶體驗(yàn)地圖用戶體驗(yàn)地圖四要素：情感坐標(biāo)EmotionAxis問題Problem交互點(diǎn)Touchpoint觀察見解Insight從體驗(yàn)地圖中可以……1、看看最高點(diǎn)，為它多做一點(diǎn)事情，將它推到極致。2、看看最低點(diǎn)，思考能不能把其它體驗(yàn)值高的步驟，分?jǐn)傄徊糠止δ艿竭@里，均衡體驗(yàn)情感。3、看看體驗(yàn)值中線以下的點(diǎn)，對(duì)應(yīng)競(jìng)品分析，看看別人是怎么解決那些問題，并設(shè)置驚喜點(diǎn)的。3、表達(dá)需求知道了需求是什么，接下來就要過濾它們，因?yàn)榇藭r(shí)我們的需求是散的，要去掉沒用的，并且給剩下的排優(yōu)先級(jí)，確定哪些是核心場(chǎng)景的核心需求。這里沒有特別的方法，就是從用戶、從自己特長(zhǎng)、從市場(chǎng)環(huán)境等綜合考慮，大家坐下來討論決定。在把需求過濾好，列成需求列表時(shí)，往往我們會(huì)用一個(gè)方法把最終的這些需求表達(dá)出來。這個(gè)方法叫“情境場(chǎng)景劇本（scenario）”情境場(chǎng)景劇本的概念：隨時(shí)間推移，捕捉產(chǎn)品、環(huán)境和用戶之間的理想交互方式，用來定義、表達(dá)需求。讓需求的呈現(xiàn)更豐滿生動(dòng)，被（通常是匯報(bào)對(duì)象）更好地理解。故事板故事板，起源于動(dòng)畫行業(yè)。在電影電視中，故事板的作用是來安排劇情中的重要鏡頭。他們相當(dāng)于一個(gè)可視化的劇本。故事板展示了各個(gè)鏡頭之間的關(guān)系，以及他們是如何串聯(lián)起來，給觀眾一個(gè)完整的體驗(yàn)。“產(chǎn)品設(shè)計(jì)故事板”的目的是讓產(chǎn)品設(shè)計(jì)師在特定產(chǎn)品使用情境下全面理解用戶和產(chǎn)品之間的交互關(guān)系圖片故事板對(duì)于交互設(shè)計(jì)師而言，圖形故事板是最快讓他人獲取自己的想法的最佳手段。通過圖形故事板，用戶就像在看電影一樣，融入到情景當(dāng)中。通過反思各個(gè)場(chǎng)景的的事件，提醒團(tuán)隊(duì)該注意哪些方面，反思交互效果，能夠讓他人通過看得見的方式面面加以注釋。在圖形故事板中，用戶通過一連串的用戶行為，連接成一個(gè)完整的用戶場(chǎng)景。把角色放在某個(gè)場(chǎng)景里，講一個(gè)故事。故事中應(yīng)該包括對(duì)問題的研究和自己的想法4、確定功能和數(shù)據(jù)我們?yōu)槭裁匆_發(fā)這個(gè)產(chǎn)品？-->我們要開發(fā)的是什么？Vivien要給她的聯(lián)系人打電話，滿足其需求的功能元素有：聲音激活控制(聲音數(shù)據(jù)和聯(lián)系人關(guān)聯(lián)起來）?？焖贀芴?hào)鍵；從地址簿中選擇聯(lián)系人；從電子郵件、約會(huì)項(xiàng)及備忘事項(xiàng)中選擇聯(lián)系人；在某些情境下的自動(dòng)撥號(hào)鍵（如即將到來的約會(huì)事項(xiàng)）。什么是功能和數(shù)據(jù)數(shù)據(jù)是產(chǎn)品中的一些可閱讀對(duì)象，比如相片、郵件、客戶記錄。對(duì)象之間可能有關(guān)系，如相冊(cè)包含照片。功能是對(duì)數(shù)據(jù)在界面上的操作表達(dá)。一般來說，功能元素包括對(duì)數(shù)據(jù)元素操作的工具，以及輸入或者放置數(shù)據(jù)元素的位置。數(shù)據(jù)對(duì)象本身也能作為功能入口，比如頭像是一個(gè)可閱讀數(shù)據(jù)，同時(shí)點(diǎn)擊它還能跳轉(zhuǎn)到個(gè)人主頁。發(fā)散和收斂的過程把需求轉(zhuǎn)化為功能數(shù)據(jù)，首先是一個(gè)發(fā)散的過程，滿足需求的方式不止一種。我在38樓，要到一樓取快遞，可以坐電梯，可以走樓梯，可以叫別人幫拿，可以讓快遞送上來。這個(gè)發(fā)散過程其實(shí)就是概念設(shè)計(jì)的開端，發(fā)散那么多概念，要選哪個(gè)好呢？所以就有一個(gè)收斂的過程，也就是選擇落地方案。其實(shí)整個(gè)設(shè)計(jì)過程都可以抽象成不停地發(fā)散和收斂交疊的過程，怎么收斂？兼顧三個(gè)維度：技術(shù)、商業(yè)和人一個(gè)設(shè)計(jì)方案要以用戶為中心確立，也要實(shí)現(xiàn)（間接/直接）商業(yè)價(jià)值，還要能被研發(fā)出來運(yùn)行良好。商業(yè)影響設(shè)計(jì)的例子很多，比如界面里的廣告，設(shè)計(jì)師就要想好廣告的形式，怎樣才能被接納又起到廣告效果。又比如應(yīng)用內(nèi)的收費(fèi)項(xiàng)目，怎么樣設(shè)計(jì)到自然過渡收費(fèi)過程并回歸原流程。創(chuàng)新取決于兩個(gè)過程：一個(gè)是生成豐富備選方案的過程，另一個(gè)是對(duì)前一過程中的豐富方案進(jìn)行選擇及辨認(rèn)哪個(gè)更合理、更重要的過程。所謂“天才”往往不是靠收集備選方案，而是指第二個(gè)過程中意識(shí)到某一方案的價(jià)值并大膽采納該方案的才能。作業(yè)梳理用戶需求完成小組項(xiàng)目的用戶體驗(yàn)地圖根據(jù)用戶需求分析相應(yīng)的功能和數(shù)據(jù)第七講

交互框架設(shè)計(jì)

交互設(shè)計(jì)：行為的設(shè)計(jì)交互：一種行為什么是行為？含羞草，碰它的葉子，它會(huì)收縮。狗狗，扔條骨頭，它會(huì)叼回來。手機(jī)，點(diǎn)擊屏幕，有東西彈出來。這就是我們跟植物、動(dòng)物、人工制品交互的過程我們及對(duì)方的所作所為就是行為。行為分3步：獲取線索、操作、反饋。交互設(shè)計(jì)交互設(shè)計(jì)就是設(shè)計(jì)線索、設(shè)計(jì)操作、設(shè)計(jì)反饋。例：我們發(fā)短信（新建短信那種），入口在哪里，在哪里輸入短信內(nèi)容，輸入時(shí)怎么切換輸入法，除了文本，還能添加其他內(nèi)容比如圖片嗎？怎么添加，添加時(shí)有何限制，添加后怎么增刪改，短信內(nèi)容確定了，要填收件人，怎么填？直接輸入號(hào)碼還是輸入名字，有聯(lián)想嗎？或者調(diào)用聯(lián)系人名單，怎么調(diào)用，能多選嗎？怎么增刪改。收件人確定了，怎么發(fā)送？語音口令還是搖一搖發(fā)送，還是按按鈕，按鈕在哪里長(zhǎng)啥樣？發(fā)送出去后，怎么告知發(fā)送成功，成功后去哪里？怎么告知失敗及善后？這些問題都需要有人來決定答案，這就是交互設(shè)計(jì)。交互設(shè)計(jì)最重要的兩個(gè)因素:1.信息人們每天面對(duì)那么多信息，在雜亂的信息中篩選出對(duì)用戶有價(jià)值的，呈現(xiàn)給用戶，幫助用戶做選擇，指引用戶完成任務(wù)。信息的篩選直接影響著用戶使用，在用戶需要的時(shí)候無法提供有用的信息，將導(dǎo)致任務(wù)無法進(jìn)行下去。所以信息是交互設(shè)計(jì)師需要關(guān)注的第一要素。2.互動(dòng)有了信息后，就需要設(shè)計(jì)用戶如何與這些信息進(jìn)行互動(dòng)了。信息的分類、布局將影響用戶與信息的交互。用戶獲取信息后，做出了反應(yīng)，采取了行動(dòng)，應(yīng)用也需要有來有往地給予足夠的反饋，來協(xié)助用戶完成任務(wù)。信息架構(gòu)：把篩選好的信息進(jìn)行分類，通過頁面來承載這些信息，并且把信息（頁面）的層次規(guī)劃好界面設(shè)計(jì)：把信息在一個(gè)頁面上進(jìn)行布局流程設(shè)計(jì)：把一個(gè)任務(wù)中涉及的頁面信息串聯(lián)起來，使任務(wù)形成一個(gè)線性流的關(guān)系一、初識(shí)信息架構(gòu)女生MM肯定愛逛商城對(duì)吧？

那信息架構(gòu)有些類似：

商場(chǎng)

地下一層：動(dòng)感休閑地帶

商場(chǎng)一樓：國(guó)際名牌世界

商場(chǎng)二樓：名媛衣裝天地

商場(chǎng)三樓：少女時(shí)尚驛站

商場(chǎng)四樓：溫馨親子家園

……

進(jìn)一步：可能一樓國(guó)際名牌世界又包括：

A區(qū)：名牌手表

B區(qū)：名牌珠寶

……設(shè)計(jì)師的作用就是規(guī)劃好這些樓層信息層級(jí)，主要做的工作就是：分類、層級(jí)梳理等二、信息架構(gòu)入門信息架構(gòu)的作用【滿足用戶需求】：讓用戶可以在一定的“信息規(guī)劃”下更容易的找到自己想要的“東西”【滿足產(chǎn)品目標(biāo)】：出于“產(chǎn)品目標(biāo)”通過“信息架構(gòu)設(shè)計(jì)”、去教育、說服、通知用戶二、信息架構(gòu)入門信息架構(gòu)梳理到底是在做什么呢?如果用一個(gè)詞回答的話，那肯定是“分類”。分類是為了更好的信息傳達(dá)，為了更好的傳遞信息，需要對(duì)信息進(jìn)行選擇和組織。二、信息架構(gòu)入門信息架構(gòu)設(shè)計(jì)到底該怎么做？

《用戶體驗(yàn)要素》一書中給出了信息架構(gòu)分類體系：從上到下或從下到上從下到上：這種分類方法是根據(jù)“內(nèi)容和功能需求的分析”而來的，先把已有的所有內(nèi)容，放在最低層級(jí)分類中，然后再將他們分別歸屬到較高一級(jí)的類別。這種分類方法其實(shí)就是在做“歸類”。

可以運(yùn)用“卡片分類法”去梳理信息架構(gòu)，首先將所有的功能點(diǎn)用一張張卡片寫下來，然后讓“目標(biāo)用戶”參與到信息分類中，并反饋相關(guān)分類標(biāo)準(zhǔn)作為我們產(chǎn)品設(shè)計(jì)師去梳理信息架構(gòu)的參考。實(shí)際實(shí)踐過程中，可能更需要設(shè)計(jì)師或者產(chǎn)品經(jīng)理本身有一定的信息篩選、梳理、分類的能力，進(jìn)一步通過用戶測(cè)試去檢驗(yàn)分類的信息傳達(dá)有效性。

從上到下：這種分類方法從“戰(zhàn)略層”（產(chǎn)品目標(biāo)）出發(fā)去考慮內(nèi)容分類。最先從最廣泛的、可能滿足決策目標(biāo)的內(nèi)容與功能開始進(jìn)行分類，然后在按邏輯細(xì)分出次級(jí)分類，這樣的“主要分類”和“次級(jí)分類”就構(gòu)成了“一個(gè)個(gè)空槽”，將想要的內(nèi)容和功能按順序一一填入即可。

以微信為例：首先根據(jù)產(chǎn)品目標(biāo)將“主要分類”即一級(jí)架構(gòu)分為“最近會(huì)話（微信）”、“通訊錄”、“發(fā)現(xiàn)”和“我”；然后再進(jìn)行“次級(jí)分類”分類，如“發(fā)現(xiàn)”下再分“朋友圈”、“掃一掃”、“搖一搖”等等；最后將相應(yīng)的功能（如朋友圈feeds、發(fā)朋友圈、朋友圈消息等）填入到相應(yīng)的“朋友圈”分類中。三、信息架構(gòu)進(jìn)階1、信息架構(gòu)梳理的依據(jù)是什么？用戶層面的思考：用戶的理解能力；用戶的熟悉程度（已有心理模型、操作習(xí)慣等）；目標(biāo)內(nèi)容的使用頻率（低頻高級(jí)功能一般會(huì)“藏”的比較深）；內(nèi)容的數(shù)量；內(nèi)容信息的語義等等產(chǎn)品層面的思考：產(chǎn)品的核心價(jià)值、產(chǎn)品的主線功能、特色功能等

為什么微信朋友圈這么高密度使用的功能要放到二級(jí)菜單？這個(gè)問題不同的人一定有不同的理解和回答，而且都是有道理的（例如有匿名回答：還記得商場(chǎng)樓層的劃分方式么？如果朋友圈放在一級(jí)菜單，你還會(huì)天天看到掃一掃、搖一搖、購物、游戲這些入口么？）便于使用，并不是布局的全部?！凹軜?gòu)梳理”的產(chǎn)品觀（張小龍）：保持主干清晰，枝干適度。產(chǎn)品的主要功能架構(gòu)是產(chǎn)品的骨骼，它應(yīng)該盡量保持簡(jiǎn)單、明了，不可以輕易變更，讓用戶無所適從。次要功能豐富主干，不可以喧賓奪主，盡量隱藏起來，而不要放在一級(jí)頁面。三、信息架構(gòu)進(jìn)階2、一個(gè)好的信息架構(gòu)設(shè)計(jì)應(yīng)該具備哪些特點(diǎn)？A、與“產(chǎn)品目標(biāo)”和“用戶需求”相對(duì)應(yīng)；B、具有一定的延展性；C、保證分類標(biāo)準(zhǔn)的一致性、相關(guān)性和獨(dú)立性；D、有效平衡信息架構(gòu)的“廣度”和“深度”E、使用“用戶語言”，同時(shí)需避免“語義歧義或不解”。A、與“產(chǎn)品目標(biāo)”和“用戶需求”相對(duì)應(yīng)新聞資訊類應(yīng)用，經(jīng)常以時(shí)間順序組織信息架構(gòu)，因?yàn)橛脩粜枨笾?，?duì)于“新聞”的時(shí)效性的要求是唯一的重要要素，同時(shí)，對(duì)于產(chǎn)品本身，只有提供最新的資訊才能在競(jìng)爭(zhēng)中獲得優(yōu)勢(shì)。同樣是資訊類應(yīng)用，“今日頭條”的產(chǎn)品目標(biāo)是針對(duì)不同用戶進(jìn)行針對(duì)性推送資訊，因此除了以“時(shí)間”維度組織信息架構(gòu)外，它還通過算法推送，以“推薦”的方式組織資訊內(nèi)容，針對(duì)性推送最新的資訊，減低了用戶“挑選”資訊的門檻，增加了用戶資訊獲取效率。B、具有一定的延展性一個(gè)延展性好的信息架構(gòu)，能把新的內(nèi)容作為現(xiàn)有結(jié)構(gòu)的一部分容納進(jìn)來（下左圖），也可以把新內(nèi)容當(dāng)做一個(gè)完整的新部分加入（下右圖）。微信的“發(fā)現(xiàn)”就具有一定的延展性，陸續(xù)有“游戲”、“購物”等內(nèi)容被納入其中。C、保證分類標(biāo)準(zhǔn)的一致性、相關(guān)性和獨(dú)立性“一致性”體現(xiàn)在標(biāo)準(zhǔn)的唯一，不能有多套標(biāo)準(zhǔn)，也就是說要保證功能入口是唯一的（快捷方式入口除外），這樣的好處就是，用戶在使用過程中，不會(huì)因?yàn)橛刑嗟臉?biāo)準(zhǔn)而摸不清相應(yīng)的功能入口；“相關(guān)性”是指上下層級(jí)以及層級(jí)中內(nèi)容必須具有相關(guān)性的，不能把“足球新聞”欄目納入到“時(shí)政要聞”層級(jí)下，因?yàn)樗鼈兊臎]有關(guān)聯(lián)性；“獨(dú)立性”體現(xiàn)在同一層級(jí)分類應(yīng)該是相互獨(dú)立的，不能同一層級(jí)的兩個(gè)分類存在交集或包含關(guān)系。D、有效平衡信息架構(gòu)的“廣度”和“深度”“寬而淺”的架構(gòu)用戶可以用較少的點(diǎn)擊完成相應(yīng)的任務(wù)目標(biāo)，問題在于每層的“信息分類標(biāo)準(zhǔn)”太多，增加用戶每一層級(jí)的分類尋找難度?！罢睢钡男畔⒓軜?gòu)好處是減少了用戶選項(xiàng)，問題在于增加了用戶操作步驟。E、使用“用戶語言”，同時(shí)需避免“語義歧義或不解”這雖是個(gè)小點(diǎn)，但往往也容易被很多設(shè)計(jì)師忽略。第一是要用“用戶語言”進(jìn)行分類和功能描述，用戶是看不懂“專業(yè)術(shù)語”（行業(yè)應(yīng)用除外）的，可以通過“用戶測(cè)試”來檢驗(yàn)用戶對(duì)于分類和功能“名稱表述”的理解能力。同時(shí)，好的“名稱”應(yīng)該是沒有歧義或者會(huì)造成用戶不解的。

信息架構(gòu)對(duì)交互設(shè)計(jì)師的要求：用戶同理心（總是以自我為中心的人不適合當(dāng)設(shè)計(jì)師）站在用戶的角度，從用戶情景出發(fā)，選擇最合適中間用戶的方案切忌：把自己的設(shè)計(jì)當(dāng)作自己的孩子，只要有人反對(duì)就極力維護(hù)。是先有信息架構(gòu)再有功能數(shù)據(jù)？還是先有功能數(shù)據(jù)再有信息架構(gòu)？答：先有功能數(shù)據(jù)，用戶決定需求，需求決定功能，得先確定這些東東是有價(jià)值的，才能規(guī)劃它們嘛。當(dāng)然隨著產(chǎn)品開始運(yùn)營(yíng)，數(shù)據(jù)會(huì)在原有架構(gòu)上持續(xù)豐富，功能也可能做出調(diào)整，甚至隨著產(chǎn)品發(fā)展，架構(gòu)也可能調(diào)整。信息架構(gòu)：把篩選好的信息進(jìn)行分類，通過頁面來承載這些信息，并且把信息（頁面）的層次規(guī)劃好。流程設(shè)計(jì)：把一個(gè)任務(wù)中涉及的頁面信息串聯(lián)起來，使任務(wù)形成一個(gè)線性流的關(guān)系。

交互框架設(shè)計(jì)流程設(shè)計(jì)信息架構(gòu)

關(guān)注產(chǎn)品所呈現(xiàn)的信息層次使用產(chǎn)品的操作流程

設(shè)計(jì)師的工作分類、層級(jí)梳理

根據(jù)關(guān)鍵任務(wù)流設(shè)計(jì)流程圖流程設(shè)計(jì)還是以商場(chǎng)舉例，流程設(shè)計(jì)做的事情就是，回答你想買一件漂亮的裙子，你該如何一步步找到并購買的問題：到達(dá)商場(chǎng)→乘坐電梯/走樓梯上二樓→到達(dá)二樓A區(qū)→進(jìn)入一家XX品牌專賣店→選購裙子→是不是滿意？→滿意→付款→不滿意→換一家專賣店→選購裙子→滿意→付款在這里設(shè)計(jì)師需要做的是規(guī)劃你的流程，可以是通過垂直電梯上樓呢？還是手扶電梯上樓方便呢？這些都是流程設(shè)計(jì)中需要考慮的。

主要做的工作就是：1、規(guī)劃流程讓用戶可以買到裙子；2、進(jìn)一步優(yōu)化流程讓用戶更快的買到裙子（比如，就在樓梯口擺地?cái)傎u裙子，呵呵，求不吐槽）……

在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中：設(shè)計(jì)師梳理產(chǎn)品使用流程，就是回答用戶如何能找到“反饋意見”等等任務(wù)目標(biāo)。

在交互產(chǎn)品設(shè)計(jì)中，交互設(shè)計(jì)師可以通過梳理產(chǎn)品使用流程，讓用戶更好地完成相關(guān)的任務(wù)目標(biāo)，例如回答用戶，如何能更快更好的實(shí)現(xiàn)“購買商品”、“播放音樂”、“反饋意見”等等任務(wù)目標(biāo)。流程設(shè)計(jì)流程設(shè)計(jì)1、案例分析：“忘記密碼登錄失敗”忘記密碼登錄失敗點(diǎn)擊忘記密碼，輸入用戶名、郵箱、驗(yàn)證碼被告知沒有綁定郵箱，無法通過郵箱恢復(fù)用微博賬號(hào)登錄不能合并自己之前的賬號(hào)信息連續(xù)登錄失敗，賬號(hào)鎖定2小時(shí)2小時(shí)后重試退出點(diǎn)擊聯(lián)系客服頁面聯(lián)系客服重復(fù)數(shù)次放棄客服詢問后確定身份將用戶名和新密碼發(fā)送手機(jī)用收到的密碼登錄成功找到修改密碼的地方，修改密碼

成功2.用戶行為流程的特點(diǎn)往往不是簡(jiǎn)單的一個(gè)線性結(jié)構(gòu)，而是一個(gè)充滿分支和關(guān)聯(lián)的網(wǎng)狀結(jié)構(gòu)；可以用系統(tǒng)、直觀的圖示，全面呈現(xiàn)和分析用戶與產(chǎn)品的關(guān)系，并發(fā)現(xiàn)潛在的創(chuàng)新突破點(diǎn)。設(shè)計(jì)流程圖

是指用圖形語言的方式畫出用戶在使用此產(chǎn)品的方法和達(dá)到具體功能的步驟。設(shè)計(jì)流程圖

意在幫助設(shè)計(jì)師很好地了解產(chǎn)品的功能結(jié)構(gòu)和用戶每一步的操作。設(shè)計(jì)流程圖的一大重點(diǎn)是面向表現(xiàn)層，也就是說，描述的是界面（或叫屏幕）的變化，是用戶看到的界面的行為流。設(shè)計(jì)流程圖1、界面。一個(gè)矩形代表一個(gè)界面，簡(jiǎn)單的登錄流程一般包括兩個(gè)界面：登錄頁和首頁。界面是用戶實(shí)實(shí)在在接觸到的媒介，非界面的內(nèi)容，不要出現(xiàn)。設(shè)計(jì)流程圖的基礎(chǔ)元素登錄頁首

頁單擊登錄按鈕是賬號(hào)密碼是否正確否2、動(dòng)作。矩形之間也就是界面之間加上一個(gè)觸發(fā)動(dòng)作，如右圖例子中從“登錄頁”界面單擊“登錄”按鈕，到達(dá)“首頁”界面，“單擊登錄按鈕”就是連接這兩個(gè)界面的關(guān)鍵動(dòng)作，需要標(biāo)示出來。3、條件。一個(gè)動(dòng)作之后可能有多種“是/否”的結(jié)果，則在矩形之間、動(dòng)作之后加上一個(gè)或多個(gè)判斷菱形。如右圖的檢驗(yàn)賬號(hào)密碼是否輸入正確。設(shè)計(jì)流程圖的注意事項(xiàng)堅(jiān)持表達(dá)表現(xiàn)層不要在一個(gè)流程圖里面既有內(nèi)部算法邏輯，又有界面邏輯。0102

拋棄系統(tǒng)錯(cuò)誤

系統(tǒng)錯(cuò)誤是指非用戶犯的錯(cuò)誤

。除非你特別想強(qiáng)調(diào)系統(tǒng)錯(cuò)誤后的提示界面，否則建議不要加進(jìn)流程圖里。設(shè)計(jì)流程圖的注意事項(xiàng)3.形式可以很靈活(1)如果一個(gè)界面可以通往多個(gè)界面，而你又真要描述出這些跳轉(zhuǎn)，那就一個(gè)矩形長(zhǎng)出多條線路，對(duì)應(yīng)標(biāo)示上對(duì)應(yīng)的動(dòng)作就ok了。(2)如果幾個(gè)界面屬于同一邏輯，比如實(shí)際是一個(gè)界面的幾個(gè)標(biāo)簽，則可以這樣把幾個(gè)標(biāo)簽包起來。(3)如果你想把一個(gè)界面的主要內(nèi)容表達(dá)出來，也可以如圖（還可以細(xì)分里面的內(nèi)容究竟是信息還是下個(gè)界面的入口）。設(shè)計(jì)流程圖的注意事項(xiàng)4.流程設(shè)計(jì)應(yīng)全面

流程設(shè)計(jì)完成后，需要進(jìn)行驗(yàn)證，

驗(yàn)證包括整個(gè)流程是否能夠走通、是否會(huì)出現(xiàn)走到某個(gè)流程無法返回的情況。流程圖的繪制

繪制工具：Mac下首選OmniGraffleWindows的VisioAxureRP交互設(shè)計(jì)師們因?yàn)槌Ｓ胊xure繪制線框圖，所以也不必為了流程圖去學(xué)習(xí)新的工具，可以用axure的flow控件完成簡(jiǎn)單的業(yè)務(wù)流程圖的制作。作業(yè)完成小組項(xiàng)目的信息架構(gòu)圖和一個(gè)任務(wù)的用戶流程圖第八講

界面設(shè)計(jì)

美學(xué)對(duì)于初學(xué)者，美學(xué)包括可以引起感覺的一切事物——不只是我們所看到的，同時(shí)也包括我們所聽到的、聞到的、嘗到的和感覺到的。美學(xué)不僅僅是關(guān)注網(wǎng)頁按鈕或別的視覺元素的藝術(shù)價(jià)值，也關(guān)注人們對(duì)這些元素做出的反應(yīng)。美的三種模式公認(rèn)的美：與基本的設(shè)計(jì)美學(xué)原則有關(guān)，如對(duì)稱、協(xié)調(diào)、三分法則和黃金比例。這些是美觀設(shè)計(jì)的傳統(tǒng)基礎(chǔ)。文化的美：指在某個(gè)時(shí)刻從某種方面我們發(fā)現(xiàn)某種文化的迷人之處。主觀的美：你個(gè)人覺得對(duì)象具有美，這與你個(gè)人的品味和偏好有關(guān)。主觀的美壓倒文化的美，文化的美勝過公認(rèn)的美。一個(gè)用于評(píng)估網(wǎng)站視覺美學(xué)的體系相關(guān)閱讀推薦人機(jī)界面準(zhǔn)則視覺界面設(shè)計(jì)傳達(dá)“品牌”：視覺設(shè)計(jì)形成一種氛圍，與公司品牌建立聯(lián)系。既是一種宣傳，也加深了用戶對(duì)品牌的認(rèn)知度。傳達(dá)“美感”：漂亮的東西總是比丑陋的東西容易被人接受。這里指的“美感”應(yīng)該是“恰當(dāng)?shù)仄痢保瑐鬟_(dá)“信息”：它將產(chǎn)品上的信息/數(shù)據(jù)視覺化，以容易識(shí)別、容易理解的方式表達(dá)出來。傳達(dá)“行為”：交互的理念通過視覺傳達(dá)，視覺暗示將行為、狀態(tài)傳達(dá)給用戶。操作的線索，操作的過程，操作的結(jié)果都需要視覺來交待。比如憤怒的小鳥，在拉動(dòng)彈弓，拉到什么程度，彈出小鳥，砸中積木，整個(gè)過程都是豐富的視覺效果在負(fù)責(zé)交待。主要內(nèi)容：視覺設(shè)計(jì)：用理性說話從蘋果電腦看視覺設(shè)計(jì)APP配色的邏輯導(dǎo)航設(shè)計(jì)交互設(shè)計(jì)師和視覺設(shè)計(jì)師在用戶研究階段所尋找的是不同的模式，理解這一點(diǎn)非常重要。交互設(shè)計(jì)師想找出的是工作流程、心智模型、任務(wù)的優(yōu)先級(jí)別和頻率、障礙點(diǎn)等。視覺設(shè)計(jì)師應(yīng)該尋找以下模式：用戶特征（如身體缺陷，尤其是視力）；環(huán)境因素（燈光、用戶和界面之間的距離顯示器上的保護(hù)膜）；品牌中有可能引起用戶共鳴的因素；用戶對(duì)體驗(yàn)的期望。形成視覺策略一旦完成上面的這些研究工作后，就可以分析并確定模式了。首先，將你從研究中得到的結(jié)論應(yīng)用到人物角色上，以確定所有情感或行為上的模式。交互設(shè)計(jì)師會(huì)專注于特定的人物角色的目標(biāo)、背景和觀點(diǎn)；視覺設(shè)計(jì)師則應(yīng)注重于情感化，以及用戶和環(huán)境的因素等方面。然后列出從相關(guān)設(shè)計(jì)人員和用戶訪談中得到的所有描述性的詞匯，并將其分組。這些詞匯組成正是形成一套‘體驗(yàn)關(guān)鍵字’的基礎(chǔ)，將用于確定和管理視覺策略。現(xiàn)在你擁有了客觀武器：人物角色、體驗(yàn)關(guān)鍵字、品牌需求等標(biāo)準(zhǔn)，這也意味著你得到了一個(gè)用于決定視覺設(shè)計(jì)的堅(jiān)實(shí)基礎(chǔ)。從蘋果產(chǎn)品看視覺設(shè)計(jì)對(duì)一個(gè)產(chǎn)品而言，用戶所體驗(yàn)的并不單純是審美與功能的設(shè)計(jì)，也附加著文化、社會(huì)、歷史等多個(gè)維度的復(fù)合體驗(yàn)。蘋果在中國(guó)，不單是一個(gè)品牌符號(hào)，更是一個(gè)文化符號(hào)。與此文化符號(hào)鏈接的關(guān)鍵詞包括：美國(guó)、西方、口味、時(shí)尚、個(gè)性、國(guó)際化等。大部分的用戶都并非對(duì)體驗(yàn)與設(shè)計(jì)有深入研究，而是從“看著舒服、用著好用”的角度來衡量一款產(chǎn)品。為什么很多國(guó)產(chǎn)品牌模仿國(guó)際品牌，作品仍然缺乏吸引力？很大的原因是因?yàn)樗麄兌既鄙僮约旱脑O(shè)計(jì)理念。好的設(shè)計(jì)應(yīng)該有自己的理念，如QQ概念版的設(shè)計(jì)理念是“生命力空間感時(shí)間感”，所有的設(shè)計(jì)都應(yīng)該圍繞理念進(jìn)行，所有的模仿都應(yīng)該建立在理論基礎(chǔ)上，這是設(shè)計(jì)的靈魂。蘋果的理念是簡(jiǎn)約質(zhì)感；GOOGLE是技術(shù)派，看似簡(jiǎn)單卻有對(duì)用戶行為深刻的理解；韓系品牌大多走柔和可愛風(fēng)……蘋果界面分析1、圓角陰影高光圓角、陰影、高光廣泛應(yīng)用于蘋果產(chǎn)品設(shè)計(jì)和互聯(lián)網(wǎng)設(shè)計(jì)中，這三種元素的加入可以增加圖標(biāo)的“質(zhì)感”仔細(xì)觀察一下IPAD的圖標(biāo)，是否很明顯地體現(xiàn)了這三種設(shè)計(jì)元素？圓角處理、月牙型的高光像從上而下打光，字體上淡灰色的陰影（是為了防止白色字體在白色背景上看不清楚，蘋果考慮很細(xì)致）。Google的chrome瀏覽器，圓角、陰影、高光仍在（圖標(biāo)圓角處理、圖標(biāo)邊緣陰影以突出立體感、鼠標(biāo)移至某一圖標(biāo)時(shí)的高光效果）。蘋果界面分析2、空間感空間感并非一個(gè)空泛的概念，而是處處體現(xiàn)在設(shè)計(jì)中。它的一個(gè)典型表現(xiàn)方式：就是打破平面感，用立體與三維方式來展現(xiàn)?？臻g感的設(shè)計(jì)一是可以增加炫酷與華麗；二是可以用于凸顯重要內(nèi)容。典型運(yùn)用：蘋果coverflow專輯封面展現(xiàn)方式coverflow是蘋果首創(chuàng)的將多首歌曲的封面以3D界面的形式顯示出來的方式。有了空間感的思維之后，發(fā)現(xiàn)常規(guī)的設(shè)計(jì)可以有非常多的突破！即把每個(gè)界面都想象成一個(gè)實(shí)實(shí)在在的物體，任我們翻轉(zhuǎn)把玩！打破常規(guī)的圖片展示，可以把圖片翻過來在背面寫備注；使用觸摸把圖片抓到疊在一起；用便簽紙的立體形式展示備忘錄，隨意貼在桌面的任何地方……蘋果界面分析3、半透明半透明的設(shè)計(jì)元素是個(gè)人的一個(gè)偏好，尤其當(dāng)用于菜單與邊框設(shè)計(jì)時(shí)，半透明可增加靈魂、深邃和通透感。另外，半透明也可用于當(dāng)一些菜單彈出卻不想擋住背景，可以把菜單設(shè)計(jì)成半透明的感覺，既美觀又不干擾視覺。蘋果界面分析4、動(dòng)態(tài)效果動(dòng)態(tài)效果會(huì)讓設(shè)計(jì)更加絢麗、好玩、生動(dòng)。植物大戰(zhàn)僵尸，每種下一棵植物，它都會(huì)輕輕搖擺，是不是很可愛呢？這也是一種動(dòng)態(tài)效果?！O果界面分析5、擬物音效植物大戰(zhàn)僵尸，從視覺設(shè)計(jì)的生動(dòng)感、每個(gè)與僵尸角色的設(shè)計(jì)、情節(jié)布局的環(huán)環(huán)相扣、甚至是音效的配合都有很多值得學(xué)習(xí)的地方。植物大戰(zhàn)僵尸中大量使用了擬物音效，種植物時(shí)與草地摩擦的聲音、子彈打到僵尸身上的響聲、僵尸來臨時(shí)的恐怖音效等。蘋果設(shè)計(jì)中的黃金分割短信頁面：信息塊寬度所占整個(gè)屏幕的比例也是和黃金比例很接近的。Safari中地址欄和搜索欄的比例也是應(yīng)用了黃金分割，合理地分配了空間，既能充分顯示當(dāng)前地址也方便用戶選擇“搜索”。26個(gè)字母鍵盤，按鍵設(shè)計(jì)和按鍵占整個(gè)行高的比值很接近黃金分割，同時(shí)每個(gè)按鍵也是小黃金矩形。這里的比值都是和黃金率近似但并不完全相同，因?yàn)樵O(shè)計(jì)并不只是美學(xué)，還要考慮到用戶觸鍵的準(zhǔn)確率、信息的承載量等諸多因素。APP配色的邏輯主色（品牌色）店商暖色系偏多（淘寶色、京東紅、阿里橙），能刺激購買欲大部分的閱讀和學(xué)習(xí)類的主色調(diào)用的是藍(lán)色輔助色（一般兩個(gè)）點(diǎn)睛色（一個(gè)）基色（白色、灰色）1補(bǔ)充：視覺緯度視覺緯度的關(guān)鍵要素：主題（主題餐廳等）顏色（如美團(tuán)頁面給人感覺很甜）形狀（美團(tuán)都是萌萌的）材質(zhì)（不同的感受-磨砂、金屬材質(zhì)）通過什么來組成？即構(gòu)成要素：圖標(biāo)（對(duì)于移動(dòng)端來說相對(duì)重要，怎么搭配以適合產(chǎn)品氣質(zhì)）控件（可以實(shí)現(xiàn)的功能）字體布局（怎么擺、放在哪、放多大）動(dòng)效聲音這些相當(dāng)于人體的器官（需要組合、搭配，如五官即使設(shè)計(jì)得好但還得擺放得好）[視覺案例]選圖、配圖、搭配顏色、布局關(guān)系。面包旅行：都是圓鼓鼓的。分享每日故事。更活躍去哪兒網(wǎng)（傳統(tǒng)的旅行社，讓人更正式）：元素、布局上的區(qū)別。讓感受不一樣導(dǎo)航設(shè)計(jì)導(dǎo)航的作用是引導(dǎo)用戶并告知用戶怎么找到自己想要的信息或完成用戶自己想要完成的任務(wù)。導(dǎo)航承載著用戶獲取所需內(nèi)容的快速途徑，它看似簡(jiǎn)單，卻是產(chǎn)品設(shè)計(jì)中最需要考量的一部分。移動(dòng)界面的導(dǎo)航可以分為：1.主要導(dǎo)航模式：跳板式、列表菜單式、選項(xiàng)卡菜單式、陳列館式、儀表式、隱喻式、超級(jí)菜單式。2.次級(jí)導(dǎo)航模式：頁面輪盤式、圖片輪盤式、擴(kuò)展列表式。所謂的次級(jí)導(dǎo)航是指那些位于某個(gè)頁面或是模塊內(nèi)的導(dǎo)航。所有的主要導(dǎo)航模式都可以用作次級(jí)導(dǎo)航。經(jīng)常能夠看到選項(xiàng)卡下再用選項(xiàng)卡導(dǎo)航、選項(xiàng)卡下用列表導(dǎo)航、選項(xiàng)卡下采用儀表式導(dǎo)航、跳板式導(dǎo)航下采用陳列館式導(dǎo)航等情況。左圖主要導(dǎo)航：選項(xiàng)卡式，次級(jí)導(dǎo)航：跳板式；

右圖主要導(dǎo)航：選項(xiàng)卡式，次級(jí)導(dǎo)航：儀表式還有一些其他的導(dǎo)航模式也可作為次級(jí)導(dǎo)航，但不太適合用作主要導(dǎo)航一、標(biāo)簽式導(dǎo)航也就是我們平時(shí)說的tab式導(dǎo)航，是移動(dòng)應(yīng)用中最普遍、最常用的導(dǎo)航模式，適合在相關(guān)的幾類信息中間頻繁的調(diào)轉(zhuǎn)。這類信息優(yōu)先級(jí)較高、用戶使用頻繁，彼此之間相互獨(dú)立，通過標(biāo)簽式導(dǎo)航的引導(dǎo)，用戶可以迅速的實(shí)現(xiàn)頁面之間的切換且不會(huì)迷失方向，簡(jiǎn)單而高效。需要注意的是標(biāo)簽式導(dǎo)航根據(jù)邏輯和重要性控制在5個(gè)以內(nèi)，多于5個(gè)用戶難以記憶而且容易迷失。底部tab式導(dǎo)航如果此時(shí)你觀察一下自己手機(jī)中常用的APP你就會(huì)發(fā)現(xiàn)QQ、微信、淘寶、微博、美團(tuán)、京東等全部都是底部tab式導(dǎo)航這是符合拇指熱區(qū)操作的一種導(dǎo)航模式，那么什么是拇指熱區(qū)呢？當(dāng)你走在路上、單手持握手機(jī)并操作;站在公交車上，一手拉扶手，另一只手操作等等這些場(chǎng)景時(shí)，你最常用的操作就是右手單手持握并操作手機(jī)，因此，對(duì)于手機(jī)來說，為觸摸進(jìn)行交互設(shè)計(jì)，主要針對(duì)的就是拇指。頂部Tab式導(dǎo)航QQ音樂和酷我音樂現(xiàn)在用的就是頂部Tab式導(dǎo)航，為了更好的瀏覽基本信息（歌手、歌曲名）、以及支持快捷操作（播放/暫停）播放器需要固定在底部,那么頂部tab導(dǎo)航不失為一個(gè)好選擇。還有騰訊新聞和網(wǎng)易新聞這種新聞?lì)怉PP，由于內(nèi)容、分類較多，運(yùn)用頂部和底部雙tab導(dǎo)航，而切換頻率最高的tab放在頂部，這是為什么呢？因?yàn)樾侣勗诿總€(gè)tab都是沉浸式閱讀，最常用的操作是在一個(gè)tab中不斷地下滑閱讀內(nèi)容，將常用的tab放在頂部，加入手勢(shì)切換的操作，反倒能帶來更好地閱讀體驗(yàn)。[小結(jié)]在兩種情況下可以選擇頂部tab式導(dǎo)航：某項(xiàng)功能必須固定在底部，那么其他tab只能固定在頂部，但為了方便操作，頂部tab導(dǎo)航最好支持手勢(shì)操作，即滑動(dòng)即可切換;該APP是沉浸式體驗(yàn)，如新聞、小說等，為了帶給用戶更好的閱讀體驗(yàn)，可以將tab放在頂部。二、抽屜式導(dǎo)航抽屜式導(dǎo)航將部分信息內(nèi)容進(jìn)行隱藏，突出了應(yīng)用的核心功能。設(shè)想你的產(chǎn)品信息層級(jí)有非常多的頁面和內(nèi)容，難以在一屏內(nèi)顯示全部?jī)?nèi)容，那么你一定首先會(huì)想到去設(shè)計(jì)一個(gè)底部或頂部的tab導(dǎo)航，但導(dǎo)航太多無疑顯得臃腫，而且使用戶難以點(diǎn)擊，那么這個(gè)時(shí)候，抽屜式導(dǎo)航是個(gè)不錯(cuò)的選擇。如果應(yīng)用主要的功能和內(nèi)容都在一個(gè)頁面里面。只是一些用戶設(shè)置這類低頻操作內(nèi)容需要顯示在其他頁面里。為了讓主頁面看上去干凈美觀，可以把這些輔助功能放在抽屜欄里。如果你的應(yīng)用有不同的視圖，且他們是平級(jí)的，需要用戶同等地對(duì)待，抽屜欄將會(huì)浪費(fèi)掉大多數(shù)的用戶對(duì)于側(cè)邊欄中入口的潛在參與度和交互程度。在大屏?xí)r代使用抽屜欄，手勢(shì)操作顯得尤為重要，從屏幕邊緣喚出抽屜欄是個(gè)不錯(cuò)的選擇。需要注意的是：需要用戶有一定參與的信息層級(jí)，最好不好放置在抽屜欄。三、列表式導(dǎo)航如果說標(biāo)簽式導(dǎo)航是APP中最普遍的導(dǎo)航方式，那么列表式導(dǎo)航就是最必不可少的一種信息承載模式，這種導(dǎo)航結(jié)構(gòu)簡(jiǎn)單清晰、易于理解、冷靜高效，能夠幫助用戶快速定位到對(duì)應(yīng)內(nèi)容。例如雜志Elle，作為一個(gè)雜志APP，他以文字、圖片表達(dá)為主，層級(jí)淺且內(nèi)容評(píng)級(jí)，用列表式導(dǎo)航作為主導(dǎo)航來構(gòu)架內(nèi)容，簡(jiǎn)單而直接。需要注意的是：列表式導(dǎo)航的數(shù)量保持在一屏以內(nèi)，超過一屏最好再分一級(jí)；將最重要的內(nèi)容歸納在前4個(gè)列表更容易被人們記??；要注意為列表內(nèi)容分類。陳列館式導(dǎo)航陳列館式導(dǎo)航能很好地應(yīng)用于用戶經(jīng)常瀏覽、頻繁更新的內(nèi)容。陳列館式的設(shè)計(jì)通過在平面上顯示各個(gè)內(nèi)容項(xiàng)來實(shí)現(xiàn)導(dǎo)航，主要用來顯示一些文章、菜譜、照片、產(chǎn)品等，可以布局成輪盤、網(wǎng)格、瀑布流或用幻燈片演示。便于顯示扁平化信息，直觀，簡(jiǎn)潔，便于瀏覽。首創(chuàng)點(diǎn)聚式時(shí)間軸方式補(bǔ)充：?jiǎn)?dòng)頁(相對(duì)來說不重要的頁面)：作用是打開頁面時(shí)有個(gè)緩沖的過程，加上LOGO或版本號(hào)或出品方-愛奇藝、面包旅行等。需要對(duì)審美、排版有相應(yīng)的基礎(chǔ)才能做好。A．啟動(dòng)頁起到了自然過渡啟動(dòng)加載的作用。一般以圖片形式存在，大部分情況結(jié)合LOGO、口號(hào)和出品等元素。B．啟動(dòng)頁的設(shè)計(jì)可以傳遞品牌和情感內(nèi)容。另外，啟動(dòng)頁還可以打廣告（網(wǎng)易新聞、滴滴打車等）。引導(dǎo)頁面的作用：1、引導(dǎo)介紹頁面可以讓用戶快速熟悉產(chǎn)品；2、在用戶遇到困難前給予及時(shí)的幫助；3、在設(shè)計(jì)時(shí)力求簡(jiǎn)單有趣。11設(shè)計(jì)登錄頁面時(shí):要根據(jù)產(chǎn)品整體風(fēng)格來進(jìn)行設(shè)計(jì)；根據(jù)產(chǎn)品的功能性質(zhì)和戰(zhàn)略決定是否支持第三方登錄和是否支持游客模式；根據(jù)產(chǎn)品的特性來決定布局的主次。主頁：應(yīng)該先設(shè)計(jì)主頁，功能布局好了以后，才考慮次要頁面。首頁包含：導(dǎo)航（美圖等沒有導(dǎo)航欄)、狀態(tài)欄、框架和內(nèi)容等。要先了解大多數(shù)首頁的：導(dǎo)航、布局，常見的模式。作業(yè)請(qǐng)以“學(xué)習(xí)強(qiáng)國(guó)”為例，分析其界面設(shè)計(jì)和導(dǎo)航設(shè)計(jì)第九講

設(shè)計(jì)與制作原理

主要內(nèi)容：1、原型2、原型、視覺稿、線框圖3、原型制作工具1、原型原型是設(shè)計(jì)的一種表現(xiàn)形式，它允許利益相關(guān)者與其互動(dòng)并探索其適用性。它的局限性在于原型通常會(huì)強(qiáng)調(diào)一組產(chǎn)品特性而淡化其他特性。

PalmPilot木質(zhì)模型幫助自閉癥兒童交流的手持設(shè)備紙質(zhì)原型類

型優(yōu)

點(diǎn)缺

點(diǎn)低保真原型開發(fā)成本低可評(píng)估多個(gè)設(shè)計(jì)概念是有用的交流設(shè)備可解決屏幕編排問題適用于標(biāo)識(shí)市場(chǎng)需求可證明設(shè)計(jì)概念可捕捉的錯(cuò)誤有限不能作為規(guī)范用于指導(dǎo)編程受制作物件的影響在建立需求后，作用有限對(duì)可用性測(cè)試的作用有限不便于說明過程流高保真原型包含完整功能完全可交互用戶驅(qū)動(dòng)的明確定義了過程流適用于探索和測(cè)試可獲得最終產(chǎn)品的使用體驗(yàn)可作為詳細(xì)規(guī)范可作為銷售的支持工具開發(fā)成本高制作耗時(shí)不能有效地證明設(shè)計(jì)概念不適合于搜集需求

2、原型、視覺稿、線框圖

Wireframe

除去各種視覺影響元素，只用線條和方塊來繪制，可以專注在功能和操作上。不管是用手繪或是軟件繪圖都可