數(shù)字媒體交互設計原理及流程課件

1、人機界面設計梅雪人機界面設計的三個層面以用戶體驗為中心的設計-用戶研究原型設計界面設計目錄1人機界面設計的三個層面2以用戶體驗為中心的設計-用戶研究界面設計交互設計信息架構用戶研究的方法用戶界面心理學 3原型設計4概念設計低保真原型高保真原型常見頁面元素布局顏色界面質感界面設計情感化設計可用性設計人機界面設計的三個層面界面設計交互設計信息架構UIUI = Users Interface用戶界面，也稱人機界面。是指用戶和某些系統(tǒng)進行交互方法的集合，這些系統(tǒng)不單單指電腦程序，還包括某種特定的機器，設備，復雜的工具等。IxDIxD = Interaction Design 交互設計，又稱互動設計。是

2、指在用戶與產品進行交互時，決定產品如何響應的一種行為和事件設計。以按鈕為例，界面設計涉及它看起來是否像按鈕及該如何擺放，而交互設計則涉及按鈕按下后產生的行為。IAIA = information architecture信息架構，其過程包括觀察和分析復雜的信息集，然后設計一個系統(tǒng)，在這個系統(tǒng)里信息可以更好地被組織，更好地被程序化以及更好 地被理解。UXUX =User experience design用戶體驗。UX指用戶體驗，UX設計指以用戶體驗為中心的設計。人與系統(tǒng)交互時的感覺就是用戶體驗。UX設計師研究和評估一個系統(tǒng)的用戶體驗，關注與該系統(tǒng)的易用性，價值體現(xiàn)，實用性，高效性等。例如，研究

3、一個電子商務站點的結賬（checkout）流程，看看流程是否對用戶友好易用；研究子系統(tǒng)的組件，比如研究用戶在填寫Web表單的時候如何更加高效和舒服?；ヂ?lián)網產品生產基本流程市場調查用戶研究競品分析制定商業(yè)計劃、開發(fā)計劃、需求文檔界面設計、交互設計編寫代碼、開發(fā)測試、迭代上線、維護、營銷用戶研究、二次開發(fā)互聯(lián)網產品生產基本流程從一個案例開始來學習設計：C先生從事跨境電商工作，銷售茶葉，目前主要的銷售渠道是亞馬遜，他想再建設一個自己的電子商務網站來展示和銷售自己的產品。目標客戶群體：中國和美國年輕人他希望這個電商網站所具有的功能： 樹立品牌、產品展示 支付、交易功能（登陸、注冊、購物車） 評價功能

4、精準的產品搜索功能 留言客服系統(tǒng) 向郵箱發(fā)送信息產品經理所要權衡的事：產品業(yè)務需求。收入模式是什么，或者為什么這個產品對公司的戰(zhàn)略目標很重要？技術限制。開發(fā)工程 師會與產品經理或團隊溝通。這些限制可能是數(shù)據(jù)庫存儲的挑戰(zhàn)、項目所花費的時間、產品的運行速度、代碼與其它系統(tǒng)集成的復雜性，或者僅僅是從軟件工程 角度來看所涉及的工作量。使用產品的用戶體驗。產品經理需要站在用戶的角度考慮問題，去理解用戶并平衡他們的需求。產品經理是最接近產品設計的一個角色，而產品設計師則通常扮演用戶，站在用戶的角度考慮問題。以用戶體驗為中心的設計用戶研究 - 需求文檔概念設計 - 流程圖、信息架構原型設計 - 交互流程、低

5、保真原型圖界面設計 - 高保真原型圖以用戶體驗為中心的設計用戶研究人通過工具完成動作達到目的在環(huán)境里以用戶體驗為中心的設計用戶研究 +市場調查+競品研究發(fā)現(xiàn)用戶所需：Who：誰會使用這個產品？What：他們想要知道什么？When：他們何時想要知道？Where：他們在哪使用你的產品？Why：為什么他們用你的產品而不用同類其它產品？How：他們如何使用你的產品？制定故事：誰，何時，何地，干什么，為什么，怎么樣以用戶體驗為中心的設計設計流程而非設計頁面以用戶體驗為中心的設計設計流程而非設計頁面百度搜索中的廣告產品頁購買社交媒體中的鏈接著陸頁加入收藏郵件列表電子商務：會員、訂閱：把用戶流程和轉化渠道結

6、合起來。典型用戶流程：付費廣告社交媒體郵件搜索新聞以用戶體驗為中心的設計設計流程而非設計頁面整合整個用戶體驗周期的流程畫流程圖。以用戶體驗為中心的設計設計流程而非設計頁面廣告橫幅著陸頁登記郵箱收到郵件訪問產品頁購買更多推薦以用戶體驗為中心的設計交互界面設計心理學以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面為誘導和潛意識設計界面大腦的不同部分具有不同的功能，我們在此可將大腦簡化為三個不同部分：舊腦判斷什么是安全的什么是危險的；負責身體運作：消化、移動和呼吸等。中腦處理情感，讓你感知事物，也是很多沖動購買的根源所在。新

7、腦腦皮層，負責語言處理、講話、閱讀、思考計劃以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面人舊腦和中腦的大多數(shù)行為都發(fā)生在我們的意識之外，我們的大腦中是新腦在加工我們意識到的東西。我們喜歡認為自己的決定經過深思熟慮，但其實 大多數(shù)決定和行為是無意識的。最有效的網站會與大腦的三個部分舊腦、中腦、新腦“對話”。以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面尋找歸屬：社會認同的作用人們觀察別人以決定自己的行為。在他們不確定要不要采取行動以及如何行時尤其如此。我們會做其它人也在做的事情，歸屬感對我們的吸引力很大。以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計

8、界面例：電商網站上的評分和評論對我們影響很大尤其是在無意識層面。數(shù)據(jù)分析表明在酒店銷售電商網站中，能夠看到酒店入住評價比不能看到顧客評價信息，其銷售量會相差30%之多。尋找歸屬以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面例：增加統(tǒng)計和柱狀圖讓我們更加覺得自己的決定很明智。盡管我們的決定來自于不理智的過程。尋找歸屬以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面例：我們會更相信我們認識并信任的人，如果評論有評論者的名字、照片、日期、身份標簽，會使評論更可信。尋找歸屬以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面負債感：如何利用互惠和讓步我們報答別人

9、的幫助并且互換禮物，有些時候是出于愛或覺得好玩，但多數(shù)時候是由于責任感。如果我給了你禮物或者幫了你，你會有負債感，會希望送我禮物或者幫我的忙。這在很大程度上是一種無意識的感覺，而且會非常強烈。我們稱之為互惠。以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面例：接受別人說“不”，也是一種贈予。這個技巧有時被稱為“拒絕后讓步”。發(fā)起者提出一個大多數(shù)人都不會接受的要求，在被拒絕后提出更合理的方案，最終可以獲得他她一開始就想要的東西 。負債感以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面負債感例：包郵、提供免費信息、小禮物。 幫你捐款。以用戶體驗為中心的設計交互界面設計心

10、理學為誘導和潛意識設計界面引發(fā)稀缺感：我們傾向于多要那些難以獲得的東西。我們會認為數(shù)量有限的東西更值錢，所以我們更想得到它。我們會認為難以獲得的信息更有價值。以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面例：小米手機和蘋果手機。 市場部公開表示上市的第一批產品數(shù)量有限并且很可能供不應求。稀缺感以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面例：“今日特價”“僅剩二雙”稀缺感以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面 和稀缺相似的理論是，產品的價格越貴（因而越難得到稀缺）質量就越好。我們無意識的追求貴的東西，無意識地把昂貴與高質量畫上等號。稀缺感

11、以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面 必殺技：封殺它。如果一件東西無法得到、被禁止了，那我們會很想要它。稀缺感以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面主角是你：與自我為中心的無意識對話。你簡單的舊腦只關注你自己，對它而言，一切都是你，你就是一切。創(chuàng)建“場景”引入“顧客”，并拿“危險、性和食物”吸引顧客的舊腦。以用戶體驗為中心的設計交互界面設計心理學為誘導和潛意識設計界面主角是你：與自我為中心的無意識對話。你簡單的舊腦只關注你自己，對它而言，一切都是你，你就是一切。創(chuàng)建“場景”引入“顧客”，并拿“危險、性和食物”吸引顧客的舊腦。原型設計概念設計 低

12、保真原型 高保真原型照片VS視頻 單個頁面VS整個交互系統(tǒng)流線設計：“頁面”的概念源于紙質印刷品，數(shù)字產品的體驗并不是單一性的，一個體驗總有它的開端，過程和結局。人們體驗數(shù)字產品時并不只是一瞬間，而是一條流線。注意產品的：長、寬、“時間 ”。原型設計概念設計低保真原型高保真原型原型設計概念設計原型設計概念設計原型設計低保真原型 原型設計低保真原型 原型設計低保真原型 axure 界面設計常見頁面元素布局顏色界面質感情感化設計可用性設計界面設計-常見界面元素頁頭 headbannerlogo nav Login or Regist內容 contentTextImgButtonLinkform頁腳

13、 footSite mapCopyrightBreadcrumbNavigation界面設計-布局布局就是布置視覺線索，“控制”用戶的視覺路徑。界面設計-布局F式布局用戶瀏覽網頁的一般模式：先看看頁面的左上角，了解一下這是什么網站（因此此處適合放置Logo)“知道是什么”然后掃描一下頁面的頂部（導航欄，搜索欄）“了解用法”下一步，用戶的視線下移，開始閱讀下一行的內容。用戶進入“掃描模式”，一旦找到感興趣的內容便會打開。界面設計-布局F式布局界面設計-布局F式布局-眼動熱點圖熱區(qū)（途中紅色、黃色、橙色部分）代表用戶注意力最集中的地方。界面設計-布局F式布局- 從上到下 從左到右按照邏輯，我們得出

14、以下結論：品牌標志和導航應該放在頁面的頂部，這是用戶對網站的第一印象。在內容結構中，圖片更容易獲得關注。用戶瀏覽完圖片后，下一個關注點便是標題。用戶會大致的瀏覽文本，但是往往不會通讀。界面設計-布局25 Innovative Websites that Buck the Design Trends界面設計-顏色根據(jù)軟件屬性、企業(yè)標識顏色、所要表達的主題內涵等來選擇界面配色。回憶思考淘寶網，京東網，1號店，聚美優(yōu)品，蘑菇街的配色。思考該茶葉網站配色。界面設計-顏色警告、強調色已完成超鏈接不可點擊界面設計-質感擬物 扁平 質感情感化設計因為人類天生對于機器的恐懼和陌生我們不喜歡冷冰冰的機器，比如D

15、OS命令，我們喜歡的有歡迎界面的windows或者MAC OS我們喜歡和人交談。界面設計-情感化設計情感：情感是人對外界事物作用于自身時的一種生理的反應。是由需要和期望決定的。當這種需求和期望得到滿足時會產生愉快、喜愛的情感，反之，苦惱、厭惡。情感化設計：情感化的設計只是一種創(chuàng)意工具,表達和發(fā)揮設計師的思想和設計目的。情感化設計界面設計-情感化設計情感化設計界面設計-情感化設計本能水平人是視覺動物，對外形的觀察和理解是出自本能的。如果視覺設計越是符合本能水平的思維，就越可能讓人接受并且喜歡。情感化設計界面設計-情感化設計行為水平行為水平的設計可能是我們應該關注最多的，特別對功能性的產品來說，講

16、究效用，重要的是性能。使用產品是一連串的操作，美觀界面帶來的良好第一印象能否延續(xù)，關鍵就要看兩點：是否能有效地完成任務，是否是一種有樂趣的操作體驗，這是行為水平設計需要解決的問題。情感化設計界面設計-情感化設計反思水平反思水平的設計與物品的意義有關，受到環(huán)境、文化、身份、認同等的影響，會比較復雜，變化也較快。這一層次，事實上與顧客長期感受有關，需要建立品牌或者產品長期的價值。只有在產品/服務和用戶之間建立起情感的紐帶，通過互動影響了自我形象、滿意度、記憶等，才能形成對品牌的認知，培養(yǎng)對品牌的忠誠度，品牌成了情感的代表或者載體。情感化設計界面設計-情感化設計情感化設計 進行主題導購、情感導購等形式，來建立消費者的信任，在精神層面，而非物質層面，來打動消費者。這些方法，主要表現(xiàn)在導購的情境化和情感化，即，在網站中設置更加人文的導