關于用戶體驗與交互設計及案例介紹第一頁，共五十八頁，2022年，8月28日幾張看似不相關的圖片第二頁，共五十八頁，2022年，8月28日幾個網站第三頁，共五十八頁，2022年，8月28日主要內容用戶體驗？交互設計？ＵＩ設計？實現模型和心理模型用戶體驗與交互設計基本原則介紹交互細節案例介紹小任務交互設計所需要技能第四頁，共五十八頁，2022年，8月28日概念區分用戶體驗：UE用戶體驗并不是指產品本身是如何工作的，而是指產品如何和外界聯系并發揮作用，也就是人們如何“接觸“或者“使用”它。Web中的用戶體驗是指用戶在訪問平臺的過程中的全部體驗，它包括平臺是否有用，疑惑或者bug程度，功能是否易用、簡約，界面設計和交互設計是否友好等方面。用戶體驗的核心是UCD，即“以用戶為中心的設計”。第五頁，共五十八頁，2022年，8月28日“AJAX之父”的JesseJamesGarrett早在2000年就提出了以用戶為中心的Web設計的流程和用戶體驗的要素第六頁，共五十八頁，2022年，8月28日交互設計交互：用戶通過某種方式發出指令，且系統對此作出相應的反應交互設計是關于創建新的用戶體驗的問題，目的在于增強和擴充人們的工作、通信及交互方式，使他們能夠更加有效地進行日常工作和學習。第七頁，共五十八頁，2022年，8月28日UI設計UserInterfaceDesign用戶界面設計，在很大程度上就是在探討如何讓產品的界面更加具有可用性，如何讓用戶有更良好的體驗。這是一種優化后的界面，通過這種界面，用戶能更方面地完成任務，獲得良好的感覺。例如：一個按鈕的設計，美工設計考慮如何好看，而用戶界面設計師則考慮按鈕如何擺放，上面顯示什么文字，甚至到底要不要這個按鈕的問題。第八頁，共五十八頁，2022年，8月28日軟件設計，ＵＩ設計，交互設計《軟件設計的藝術》TerryWinograd(2004年度的ACM人機交互院士)開發軟件建房子土木工程師裝修設計師建筑設計師軟件設計ＵＩ設計交互設計第九頁，共五十八頁，2022年，8月28日實現模型和心理模型心理模型表現模型實現模型容易使用，體驗良好記憶負擔，體驗較差最好的技術是消失在生活當中的技術第十頁，共五十八頁，2022年，8月28日幾個通用的原則就進設計原則對功能進行恰當的分類和組織第十一頁，共五十八頁，2022年，8月28日幫助用戶探索和嘗試

第十二頁，共五十八頁，2022年，8月28日允許用戶犯錯誤讓用戶可以撤銷動作在執行具體的破壞性操作中要求用戶確認。第十三頁，共五十八頁，2022年，8月28日提供實用的幫助設計幫助系統入門和學習部分使用指南參考手冊疑難解答術語解釋

語言表達：采用具體的例子，幫助用戶理解

表達方式：按照使用流程來。第十四頁，共五十八頁，2022年，8月28日設計一個優秀的向導式界面第十五頁，共五十八頁，2022年，8月28日幫助用戶高效地完成操作

支持批處理操作（google的picasa圖像處理軟件）提高常用操作的效率4A中的作業模塊第十六頁，共五十八頁，2022年，8月28日布置手工作業流程第十七頁，共五十八頁，2022年，8月28日使界面符合用戶的使用習慣

被動調整策略：例如功能定制，界面定制主動自適應調整策略：例如sogou拼音輸入法根據其他用戶的使用行為來主動進行自適應調整購物網中，購買這本書的用戶還購買了以下書，在《長尾理論》中安德森叫過濾器法則，它是長尾現象形成的一個因素介于主動自適應和被動調整之間的混合策略第十八頁，共五十八頁，2022年，8月28日減少用戶在使用軟件時出現錯誤（一）讓用戶能有效地看出或者知道如何進行正確操作減少用戶記憶的負擔；自然匹配和預設用途；盡可能采取一致性的設計采用限制級因素防止用戶出錯第十九頁，共五十八頁，2022年，8月28日減少用戶在使用軟件時出現錯誤（一）利用某種方式提醒用戶可能出錯如何設置出錯信息不要只告訴用戶操作無法完成或者操作失敗不要僅僅給出出錯代碼，還應當給出該錯誤的含義不要在出錯信息中使用用戶無法理解的術語錯誤要盡可能明確錯誤信息要有建設性，要讓用戶看出怎樣才是正確的不要給出誤導性的出錯信息向用戶提出解決問題的建議第二十頁，共五十八頁，2022年，8月28日減少用戶的等待感RobertBmiller1968——Responsetimeinman-computerconversationaltransactions0.1秒鐘、1秒鐘、10秒鐘第二十一頁，共五十八頁，2022年，8月28日總結就進設計原則對功能進行組織和分類幫助用戶探索和嘗試允許用戶犯錯提供實用的幫助設計一個優秀的向導界面使界面符合用戶的使用習慣減少用戶出錯減少等待感

第二十二頁，共五十八頁，2022年，8月28日交互細節案例介紹第二十三頁，共五十八頁，2022年，8月28日案例一Tecent交互設計—Don'tmakemethink“返回”的位置和做法很重要：這是整個QQMail的交互的“樞紐”，如同圍棋中的“玉柱”，也定義了郵箱的交互風格。幫用戶自動選中：在輸入獨立密碼或加密folder輸入密碼時錯誤后，應該把輸入框內的內容select上，這樣就可以直接打入而不用清除了光標定位：之前的點"回復"時光標focus到正文的問題改好了,但卻沒有注意到點"轉發"時光標,反而應是在"收件人"處而不是正文處,因為一般總要填寫轉發人,而回復(包括回復全部)則是直接輸入內容.第二十四頁，共五十八頁，2022年，8月28日交互設計—符合用戶習慣與預期

先字母排序，再優先顯示最近聯系人，減少鍵盤操作。第二十五頁，共五十八頁，2022年，8月28日交互設計—符合用戶習慣與預期

兼容客戶端郵件菜單習慣在用TT或QQ/TM/RTX截屏后的圖,mail原來在寫信時用Ctrl-V可以貼出來，但右鍵則不能。不隨意去掉用戶正在使用的功能原來mail在做出了“HTML方式查看”后，去掉了“打開”功能符合用戶預期點擊其他地方，WEBQQ的浮動窗口隱藏到固定位置第二十六頁，共五十八頁，2022年，8月28日交互設計—適時的提醒

沒必要的提醒不需要出現而適時出現的提示或功能，用得好，不但不會騷擾用戶，還是對用戶的細致的關懷第二十七頁，共五十八頁，2022年，8月28日交互設計—操作便利QQ魔法表情第二十八頁，共五十八頁，2022年，8月28日交互設計—操作便利問卷星的設計頁面第二十九頁，共五十八頁，2022年，8月28日視覺設計——制定規范，維持統一文字使用要規范，語法，大小，顏色，大小寫都需要注意能用一個詞表達的，不用一句話。能用一句話表達清楚的，不用兩句話每個概念都只有唯一一種表達。如”VIP”的概念能用一種字體顏色的，不多用一種顏色能用一種字體大小的，不多用一種大小第三十頁，共五十八頁，2022年，8月28日視覺設計—防止不恰當的低齡化在追求“簡單”的過程中，QQMail不知不覺的變得“中性”、“成熟”化。當我們更加理性和嚴謹地設計產品的時候，自然會遠離“低齡”傾向。“成熟”源自合理的設計，“低齡”源自不合常理的設計。

不恰當的低齡化第三十一頁，共五十八頁，2022年，8月28日交互設計—尋求最佳方案爭執：騰訊QQ可以稱得上及時通訊的老大，以前往往看到的是騰訊的界面是多么的友好等等的贊美。但是一次偶爾的操作，發現騰訊的不完美，也可以說是很大的失敗。在QQ更改密碼的時候出現了要求在同一IP段才能修改，但是我想問下，現在也不是所有互聯網用戶都會用電信或者網通。其實有很大一部分是用的其他網絡提供商的寬帶接入。這樣也就導致了隨機IP段產生。那么請問他們怎么修改密碼？他這么做也不在呼就是為了防止盜號的行為，但是即使這樣樣不應該犧牲用戶的易操作性。為了防止盜號的行為還有很多其他方法。個人覺得騰訊這樣做不是很好。希望大家發表一下自己的看法參考地址：第三十二頁，共五十八頁，2022年，8月28日騰訊用戶體驗室第三十三頁，共五十八頁，2022年，8月28日騰訊用戶體驗總結Don'tmakemethink符合用戶習慣與預期做適時的提醒不強迫用戶選擇最佳方案操作便利第三十四頁，共五十八頁，2022年，8月28日觀看并點評一下兩個視頻QQ概念版、Sosofuture第三十五頁，共五十八頁，2022年，8月28日案例二網易郵箱注冊初體驗注冊一個新的網易郵箱，請分析該郵箱在交互方面做的比較好的點，并指出可以供我們借鑒的地方。并試著給自己發送幾個帶圖片的附件的郵件，感受其友好性。第三十六頁，共五十八頁，2022年，8月28日網易體驗第三十七頁，共五十八頁，2022年，8月28日第三十八頁，共五十八頁，2022年，8月28日Amazon—重點突出明確強調產品搜索和在線購買一旦建立了網站的產品搜索與網上購物等功能，用戶最有可能想利用這些特性的優勢馬上開始搜索。第三十九頁，共五十八頁，2022年，8月28日

動態地定制用戶體驗亞馬遜使用Cookie來記錄用戶登錄，而對用戶的購物習慣進行跟蹤并存儲到服務器端。

它以事先進行搜索，網頁瀏覽，愿望清單添加，評價填寫為基礎，并達到最終購買目的。

第四十頁，共五十八頁，2022年，8月28日相關產品顯示

第四十一頁，共五十八頁，2022年，8月28日基于先前行為的推薦產品

只要瀏覽器的cookies保持不變,這種定制相同類型的內容就會在隨后的訪問中一連串出現：

第四十二頁，共五十八頁，2022年，8月28日各種”為什么我們購物”的提示

亞馬遜購物體驗充斥著為何用戶應該從亞馬遜購買的提醒,而不是充斥著從其他來源（在線或其他方式）的提醒。與市場零售價對比用戶早先被通知“免費送貨”第四十三頁，共五十八頁，2022年，8月28日逼真圖書的預覽和內部查找功能第四十四頁，共五十八頁，2022年，8月28日可定制的歷史推薦瀏覽所有產品的查看歷史記錄都可以修改。看一看下面的圖片。

第四十五頁，共五十八頁，2022年，8月28日第四十六頁，共五十八頁，2022年，8月28日方便的導航元素（1）（2）（5）（3）（4）第四十七頁，共五十八頁，2022年，8月28日人性化的PayPhase輸入一句話輕松在線支付買家可以把姓名/地址/付款資料通用一個句子與密碼存儲起來。結賬時，你只需要輸入你自設的這個句子與密碼即可在線購物程序的簡化將會使得用戶更多地使用在線購物方式購買商品。據調查，在此之前有半數以上的網民已經將商品放進虛擬購物車，但到最后因為支付過程過于繁瑣而放棄購物。第四十八頁，共五十八頁，2022年，8月28日易于篩選和用戶評價比較方便地訪問正面和負面評論

第四十九頁，共五十八頁，2022年，8月28日讓用戶感到舒適

第五十頁，共五十八頁，2022年，8月28日亞馬遜購物體驗總結把握住網站的焦點只要有可能，應該為每個用戶提供個性化內容。給予用戶為什么做出次選擇的指導。讓用戶盡可能多的接觸到產品（內容）。不要讓用戶感到有些產品/服務正在強迫他們購買在適當的時候可輕松地訪問重要部分。在任何時候讓顧客感到舒服和可控。第五十一頁，共五十八頁，2022年，8月28日JakobNielson博士交互設計的十項原則1.讓用戶隨時了解系統的狀態例如導入導出的提示功能2.系統應該與真實世界相符合（使用用戶慣用的詞匯和概念）3.給用戶控制權和自主權當系統出錯或者誤操作后能夠緊急退出。

4.提倡一致性和標準化相似的任務提供相似的元素5.幫助用戶診斷、識別和恢復錯誤。告訴用戶大概的原因和解決辦法6.預防錯誤7.依賴于識別而不是記憶8強調實用的靈活性和有效性：輸入搜索內容后直接按回車鍵就能搜索而不一定要點擊搜索圖標。

9．最小化設計10.提供幫助及文檔第五十二頁，共五十八頁，2022年，8月28日BenShneiderman交互設計原則性力求一致性：高度一致性的界面能夠給人清晰和整體的感覺。提供明確的反饋設計對話，告訴用戶任務已經完成提供錯誤預防和簡單的糾錯功能應該方便用戶取消某個操作用戶應掌握控制權（授課計劃的跳過該動畫）減輕用戶的記憶負擔第五十三頁，共五十八頁，2022年，8月28日小任務請根據前面提到的原則，找出4A或者是學習超市設計上存在的一到兩個問題，截圖并加以文字說明，以作品發布的形式發表在序列化活動中。第五十四頁，共五十八頁，2022年，8月28日交互設計需要哪些能力和技術？交互設計師InteractionDesigner1.有相關工作經歷和作品者優先；

2.對各種常用軟件有強烈興趣并有靈敏觸覺，富有創造力和激情，并有動手實踐良好習慣；

3.邏輯思維能力強，熟練掌握業務需求分析、產品需求分解的技巧；

4.有大局觀，可以在復雜的約束條件下找到平衡或創新的方法；

5.主動性高，具優秀的理解、溝通與協調能力，很強的文字表達能力；個性樂觀開朗，善于和各種背景的人合作；

6.對交互設計過程有深入了解，能熟練應用站點結構圖、流程圖等交互設計方法；

7.有相關崗位的技術和技能，如視覺設計、XHTML/CSS等；

8.熟悉動畫制作、高仿真原型制作者優先；

9.主動性高，具優秀的理解、溝通與協調能力，文字表達能力強；

10.有良好的英文閱讀能力，英文六級優先；

11.工業設計、計算機、軟件工程、心理學等相關專業本科及以上學歷。工作職責：

1.參與產品規劃構思和創意過程；

2.分析業務需求，并加以分解和歸納出產品人機交互界面需求；

3.設計軟件的人機交互界面結構、用戶操作流程等；

4.參與公司前瞻性產品的創意設計；

5.制作相關仿真原型。第五十五頁，共五十八頁，2022年，8月28日1.交互設計的經驗，或多或少，當然經驗豐富者優先。

2.給出高質量的產品原型，流程圖，線框圖，清晰的表達自己的設計方案。

3.優秀的溝通和協調能力，能準確的挖掘用戶需求，結合商業目標，快速調整設計方案，并獲得最終的認可。

4.良好的視覺設計能力，Photoshop，Dreamweaver等設計工具熟練運用，能給出高保真度的原型。熟悉XHTML，Javascript，ActionScript

者優先。

5.基本的程序開發知識，確保你在前期設計時能綜合開發成本，給出高效可行的設計方案。

6.人機交互，軟件工程，工業設計，視覺傳達，或者相關設計學科的學歷。我們并不注重學歷，當然高學歷者優先。

7