《交互數(shù)字內(nèi)容設(shè)計(jì)》課件-第一章 交互界面設(shè)計(jì)概述

UI交互界面設(shè)計(jì)第一章交互界面設(shè)計(jì)概述1、什么是交互界面設(shè)計(jì)？（重點(diǎn)、難點(diǎn)）2、什么是交互設(shè)計(jì)？（重點(diǎn)）3、UCD的設(shè)計(jì)思想（重點(diǎn)）4、交互界面設(shè)計(jì)常用工具1.1交互界面設(shè)計(jì)通過(guò)什么操作Photoshop程序？通過(guò)什么操作手機(jī)？1.1.1什么是界面（UI）？界面——UI即UserInterface(用戶界面)的簡(jiǎn)稱。廣義上來(lái)講，UI界面是人與機(jī)器進(jìn)行交互的操作平臺(tái)，即用戶與機(jī)器相互傳遞信息的媒介。人機(jī)交互、操作邏輯、界面美觀用戶機(jī)器界面”“概括成一句話就是——人和機(jī)器之間的界面。這個(gè)界面實(shí)際上是體現(xiàn)在我們生活中的每一個(gè)環(huán)節(jié)的，例如開(kāi)車時(shí)候方向盤和儀表盤就是這個(gè)界面，看電視的時(shí)候遙控器和屏幕就是這個(gè)界面，用電腦的時(shí)候鍵盤和顯示器就是這個(gè)界面。于是我們可以把UI可以分成兩大類：硬件界面和軟件界面。本課所關(guān)注的UI設(shè)計(jì)特指軟件界面，我們也可以稱為特殊的或者狹義的UI設(shè)計(jì)。什么是界面設(shè)計(jì)？界面設(shè)計(jì)即UserInterfaceDesign（用戶界面設(shè)計(jì)）的簡(jiǎn)稱，是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。人機(jī)交互操作邏輯界面美觀1.1.2UI設(shè)計(jì)是做什么的？UI設(shè)計(jì)從工作內(nèi)容上來(lái)說(shuō)分為3個(gè)方向。它主要是由UI研究的3個(gè)因素決定的，其分別是研究界面，研究人與界面的關(guān)系，研究人。1.研究界面---視覺(jué)設(shè)計(jì)師國(guó)內(nèi)目前大部分UI工作者都是從事這個(gè)行業(yè)。也有人稱之為美工，但實(shí)際上不是單純意義上的美術(shù)工人，而是軟件產(chǎn)品的產(chǎn)品外形設(shè)計(jì)師。這些設(shè)計(jì)師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計(jì)教育背景，例如工業(yè)外形設(shè)計(jì)，裝潢設(shè)計(jì)，視覺(jué)傳達(dá)設(shè)計(jì)，信息多媒體設(shè)計(jì)等。2.研究人與界面的關(guān)系---交互設(shè)計(jì)師在圖形界面產(chǎn)生之前，長(zhǎng)期以來(lái)UI設(shè)計(jì)師就是指交互設(shè)計(jì)師。交互設(shè)計(jì)師的工作內(nèi)容就是設(shè)計(jì)軟件的操作流程，軟件的結(jié)構(gòu)與操作規(guī)范等。一個(gè)軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。交互設(shè)計(jì)師一般都是軟件工程師背景居多。3.研究人----用戶測(cè)試（用戶體驗(yàn)設(shè)計(jì)師）任何的產(chǎn)品為了保證質(zhì)量都需要測(cè)試，軟件的編碼需要測(cè)試，自然UI設(shè)計(jì)也需要被測(cè)試。這個(gè)測(cè)試和編碼沒(méi)有任何關(guān)系，主要是測(cè)試交互設(shè)計(jì)的合理性以及圖形設(shè)計(jì)的美觀性。測(cè)試方法一般都是采用焦點(diǎn)小組，用目標(biāo)用戶問(wèn)卷的形式來(lái)衡量UI設(shè)計(jì)的合理性。這個(gè)職位很重要，如果沒(méi)有這個(gè)職位，UI設(shè)計(jì)的好壞只能憑借設(shè)計(jì)師的經(jīng)驗(yàn)或者領(lǐng)導(dǎo)的審美來(lái)評(píng)判，這樣就會(huì)給企業(yè)帶來(lái)嚴(yán)重的風(fēng)險(xiǎn)性。用戶研究工程師一般是心理學(xué)人文學(xué)背景比較合適。

1.1.3交互界面設(shè)計(jì)的分類移動(dòng)端交互界面設(shè)計(jì)PC端交互界面設(shè)計(jì)游戲端交互界面設(shè)計(jì)其它端交互界面設(shè)計(jì)問(wèn)題一：界面設(shè)計(jì)=版式設(shè)計(jì)？謂版式設(shè)計(jì)，就是在版面上，將有限的視覺(jué)元素進(jìn)行有機(jī)的排列組合界面設(shè)計(jì)的內(nèi)容包括：圖形、文字、色彩、編排，使界面起到美化效果的作用。需要研究用戶需求，研究目標(biāo)用戶。1.1.4交互界面設(shè)計(jì)與版式設(shè)計(jì)的關(guān)系問(wèn)題二：界面設(shè)計(jì)=用戶+界面？或者界面設(shè)計(jì)就是單單指界面美化設(shè)計(jì)？從字面上看，UI有用戶與界面兩個(gè)組成部分，但實(shí)際上還有用戶與界面之間的交互關(guān)系。界面設(shè)計(jì)需要定位使用者、使用環(huán)境、使用方式。不僅僅是美化界面，還有需要研究用戶、讓界面變得更友好、更有趣、更易用、更舒適。UI用戶界面=+交互=版式考慮用戶的心理需求，研究目標(biāo)用戶前面講到UI設(shè)計(jì)包括兩方面——美化和交互。讓大家更了解UI設(shè)計(jì)的重要性從美化的角度看，UI優(yōu)化后:1更有時(shí)尚感、層次感2.從QQ圖像就能知道是QQ的登入界面，更直觀、形象。從交互的角度，未UI優(yōu)化的界面：1.功能過(guò)于簡(jiǎn)單2.登入沒(méi)有體現(xiàn)按鈕的特點(diǎn)，而不會(huì)單擊3.密碼輸入框也沒(méi)有做掩密處理，被盜號(hào)的風(fēng)險(xiǎn)系數(shù)增加界面設(shè)計(jì)涉及的范圍及學(xué)科人機(jī)產(chǎn)品界面設(shè)計(jì)、移動(dòng)設(shè)備界面設(shè)計(jì)、網(wǎng)頁(yè)界面設(shè)計(jì)、軟件界面設(shè)計(jì)界面設(shè)計(jì)是一種結(jié)合美學(xué)、計(jì)算機(jī)科學(xué)、心理學(xué)、行為學(xué)、人機(jī)工程學(xué)、信息學(xué)以及市場(chǎng)學(xué)等的綜合性學(xué)科，強(qiáng)調(diào)人—機(jī)—環(huán)境三者作為一個(gè)系統(tǒng)進(jìn)行總體設(shè)計(jì)。交互：本義：雙方面互動(dòng)，參與活動(dòng)的對(duì)象可以相互交流。廣義的交互。人機(jī)交互(Human-ComputerInteraction):是一門計(jì)算機(jī)科學(xué)，主要研究關(guān)于設(shè)計(jì)、評(píng)價(jià)和實(shí)現(xiàn)供人們使用的交互計(jì)算系統(tǒng)，以及對(duì)有關(guān)這些現(xiàn)象進(jìn)行研究的科學(xué)。強(qiáng)調(diào)人與機(jī)器相互信息交換。狹義的交互。交互設(shè)計(jì)（InteractionDesign）：見(jiàn)下文…1.2交互設(shè)計(jì)1.2.1什么是交互設(shè)計(jì)交互設(shè)計(jì)是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術(shù)，它致力于了解目標(biāo)用戶和他們的期望，了解用戶在同產(chǎn)品交互時(shí)彼此的行為，了解“人”本身的心理和行為特點(diǎn)，同時(shí)，還包括了解各種有效的交互方式，并對(duì)它們進(jìn)行增強(qiáng)和擴(kuò)充。

交互設(shè)計(jì)定義（InteractionDesign）

關(guān)注幾個(gè)概念交互設(shè)計(jì)設(shè)計(jì)行為，偏向于計(jì)算機(jī)的人機(jī)交互人與機(jī)器相互信息交換交互一種行為設(shè)計(jì)體驗(yàn)鏡子設(shè)計(jì)簸箕設(shè)計(jì)1.2.2為什么要有理性的交互設(shè)計(jì)？2010年左右，炫酷寫實(shí)的設(shè)計(jì)成為了潮流、但這正是用戶所需要的嗎？此設(shè)計(jì)來(lái)自網(wǎng)絡(luò)，鳴謝29此設(shè)計(jì)來(lái)自網(wǎng)絡(luò)，鳴謝QQ音樂(lè)UI實(shí)際上這些炫酷寫實(shí)的界面帶給用戶的并不是更加優(yōu)質(zhì)的體驗(yàn)，而是增加了學(xué)習(xí)成本，和開(kāi)發(fā)者的效率把這些寫實(shí)的改變?yōu)楦柙~或者英文翻譯才是用戶更加需要的用戶更需要解決實(shí)際問(wèn)題的設(shè)計(jì)VB之父（VisualBasic是一種可視化的、面向?qū)ο蠛筒捎檬录?qū)動(dòng)方式的結(jié)構(gòu)化高級(jí)程序設(shè)計(jì)語(yǔ)言，可用于開(kāi)發(fā)Windows環(huán)境下的各類應(yīng)用程序。）交互設(shè)計(jì)之父微軟視窗先鋒獎(jiǎng)軟件夢(mèng)幻獎(jiǎng)得主庫(kù)伯交互設(shè)計(jì)公司創(chuàng)始人艾蘭.庫(kù)珀(alancooper)他創(chuàng)建了Cooper交互設(shè)計(jì)公司（/）反復(fù)強(qiáng)調(diào)如何使“高科技”產(chǎn)品回歸人性，明確指出，要設(shè)計(jì)出強(qiáng)大而令人愉悅的軟件產(chǎn)品，必須在開(kāi)始編制軟件之前做好交互設(shè)計(jì)。1.2.3交互設(shè)計(jì)的起源與發(fā)展交互設(shè)計(jì)起源于計(jì)算機(jī)的人機(jī)界面設(shè)計(jì)。交互設(shè)計(jì)INTERACTIONDESIGNBillMaggridge（比爾·莫格里奇）1981年設(shè)計(jì)出第一臺(tái)筆記本電腦“GridCompass”1984年他在一次會(huì)議中提出交互設(shè)計(jì)的概念一開(kāi)始只是想著將軟件與用戶界面設(shè)計(jì)的結(jié)合，稱為“softface”（軟面）1990年更名為“InteractionDesign”(交互設(shè)計(jì))。GridCompass第一臺(tái)筆記本電腦交互設(shè)計(jì)INTERACTIONDESIGN1.2.4交互設(shè)計(jì)涉及的范圍及學(xué)科學(xué)科人類工程學(xué)心理學(xué)認(rèn)知科學(xué)信息學(xué)工程學(xué)計(jì)算機(jī)科學(xué)軟件工程社會(huì)學(xué)人類學(xué)語(yǔ)言學(xué)美學(xué)……設(shè)計(jì)圖形設(shè)計(jì)產(chǎn)品設(shè)計(jì)商業(yè)美術(shù)電影產(chǎn)業(yè)服務(wù)業(yè)……交互設(shè)計(jì)人機(jī)交互（HCI）1.2.5交互設(shè)計(jì)師的知識(shí)體系和工作范疇1.2.6交互設(shè)計(jì)師的具體工作交互設(shè)計(jì)做什么？需求分析一般來(lái)說(shuō)，交互設(shè)計(jì)的第一個(gè)環(huán)節(jié)就是需求分析，需求分析主要指用戶研究、場(chǎng)景劇本、角色創(chuàng)建以及需求提煉。海淘APP分析42百度視頻MYAPP熱門｜HOT功能｜Funtion電視劇｜TVplay下載｜Download電影｜Film分類查找｜Classification綜藝｜Varietyshow搜索｜Search猜你喜歡｜Guessyou個(gè)人中心｜PersonalCenter排行榜｜RankingList發(fā)現(xiàn)｜Discover達(dá)人推薦｜Peoplerecommend播放器｜player短視頻｜Shortvideo游戲｜GameCenter產(chǎn)品架構(gòu)圖繪制－樹(shù)狀圖信息架構(gòu)和流程設(shè)計(jì)43交互流程圖繪制交互流程圖繪制交互設(shè)計(jì)是面向過(guò)程的設(shè)計(jì)，所以需要描述清楚產(chǎn)品整體使用流程及相應(yīng)的情況。使用交互文檔進(jìn)行描述是很好的方式，交互文檔將作為技術(shù)開(kāi)發(fā)，測(cè)試及設(shè)計(jì)人員進(jìn)行全面的界面設(shè)計(jì)的依據(jù)。44動(dòng)態(tài)交互原型設(shè)計(jì)為了更好的將產(chǎn)品的動(dòng)態(tài)展示給Boss或者其它相關(guān)團(tuán)隊(duì)成員，可以用最簡(jiǎn)單的方式進(jìn)行動(dòng)畫演示，讓成員可以更快更好的理解產(chǎn)品的使用。原型設(shè)計(jì)四、界面設(shè)計(jì)的工作流程1）.

產(chǎn)品制作人，寫產(chǎn)品計(jì)劃書(shū)。

2）.

用戶體驗(yàn)研究員，作調(diào)查分析。

3）.

信息建構(gòu)師，設(shè)計(jì)產(chǎn)品架構(gòu)。

4）.

交互設(shè)計(jì)師，作出互動(dòng)流程。

5）.

視覺(jué)設(shè)計(jì)師，作出頁(yè)面視覺(jué)設(shè)計(jì)。

6）.

前臺(tái)工程師，前臺(tái)開(kāi)發(fā)。

7）.

后臺(tái)工程師，后臺(tái)開(kāi)發(fā)。

8）.

用戶體驗(yàn)研究員，做用戶測(cè)試確保質(zhì)量。1.3UCD的設(shè)計(jì)思想1.3.1什么是UCD？UCD設(shè)計(jì)思想（user-centereddesign）以用戶為中心的設(shè)計(jì)。在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)從用戶的需求和用戶的感受出發(fā)，圍繞以用戶為中心設(shè)計(jì)產(chǎn)品，而不是讓用戶去適應(yīng)產(chǎn)品，無(wú)論產(chǎn)品的使用流程、產(chǎn)品的信息架構(gòu)、人機(jī)交互方式等，都需要考慮用戶的使用習(xí)慣、預(yù)期的交互方式、視覺(jué)感受等方面,時(shí)刻以用戶的體驗(yàn)為設(shè)計(jì)的基本原則。1.用戶并不關(guān)心你使用了什么技術(shù)，而是關(guān)心這個(gè)技術(shù)帶來(lái)的結(jié)果（能夠達(dá)成自己的目標(biāo)和任務(wù)）；2.不要使用技術(shù)（特別是硬件、代碼等方面）作為你的產(chǎn)品賣點(diǎn)；3.用戶只使用產(chǎn)品幫助自己生活，不會(huì)把產(chǎn)品當(dāng)做生活；（用戶只使用產(chǎn)品幫助自己學(xué)習(xí)，不會(huì)把使用產(chǎn)品當(dāng)做學(xué)習(xí)）；4.對(duì)于用戶來(lái)講，產(chǎn)品的外觀和交互界面等于產(chǎn)品的所有；5.比起圖標(biāo)的大小和顏色，用戶更關(guān)心界面切換的速度。1.3.2了解用戶使用交互界面的心理用戶需求分析的根本目的是為了了解用戶的行為，并獲得市場(chǎng)分析數(shù)據(jù)，用于指導(dǎo)產(chǎn)品的需要與價(jià)值。研究用戶的行為可從4個(gè)方向出發(fā)：1.它是什么產(chǎn)品；2.看上去如何；3.解決什么問(wèn)題；4.其他心理要求。1.3.3理解用戶的需求和分析需求1.對(duì)用戶體驗(yàn)有正確的預(yù)估；2.認(rèn)識(shí)用戶的真實(shí)期望和目的；3.在功能核心還能夠以低廉成本加以修改的時(shí)候?qū)υO(shè)計(jì)進(jìn)行修正；4.保證功能核心同人機(jī)界面之間的協(xié)調(diào)工作，減少BUG。1.3.4使用UCD設(shè)計(jì)思想的目的1.3.5以用戶為中心的界面設(shè)計(jì)原則1）、一致性和必要的個(gè)性化2）、使用用戶的語(yǔ)言3）、用戶記憶負(fù)擔(dān)最小化4）、用戶界面的功能性5）、容易理解6）、清楚的報(bào)錯(cuò)信息7）、快捷方式的組合8）、連續(xù)性9）、方便退出10）、幫助系統(tǒng)1）、一致性和必要的個(gè)性化OFFICE軟件風(fēng)格一致，要有統(tǒng)一的字體字號(hào)、統(tǒng)一的色調(diào)、統(tǒng)一的提示用詞、窗口在統(tǒng)一的位置、按鈕也在窗口的相同的位置。目的是能夠減少記憶量、減少出錯(cuò)概率而且能迅速積累操作經(jīng)驗(yàn)。個(gè)性化。在一致性下，適當(dāng)突出該軟件的“個(gè)性化”如PPT中不同于word有自己的動(dòng)畫效果2）、使用用戶的語(yǔ)言界面中要注意使用用戶的語(yǔ)言，而不是設(shè)計(jì)者的語(yǔ)言，最有效的方法：讓數(shù)據(jù)說(shuō)話，如詢問(wèn)用戶、用戶投票等。因此，用戶使用系統(tǒng)的錯(cuò)誤會(huì)降到最低。3）、用戶記憶負(fù)擔(dān)最小化瀏覽信息比記憶更容易，在設(shè)計(jì)時(shí)一定要考慮到減輕用戶的記憶負(fù)擔(dān)。4）、用戶界面的功能性界面最基本的性能是具有功能性與使用性，通過(guò)界面設(shè)計(jì)，讓用戶明白功能操作，并將產(chǎn)品本身的信息更加順暢的傳遞給使用者，是功能界面存在的基礎(chǔ)與價(jià)值用戶界面一定要有基本的功能，設(shè)計(jì)者不能片面追求界面外觀漂亮而導(dǎo)致華而不實(shí)。5）、容易理解大多數(shù)的用戶都有豐富的生活經(jīng)驗(yàn)，也就是使用各種工具或者玩具的經(jīng)驗(yàn)。如果能夠在界面設(shè)計(jì)中把這些積累的生活經(jīng)驗(yàn)和界面視覺(jué)元素對(duì)應(yīng)或這連接起來(lái)就會(huì)讓用戶更容易理解。如電子書(shū)界面，模擬翻書(shū)的設(shè)計(jì)可以很快讓用戶理解如何操作，并且給讀者熟悉的閱讀體驗(yàn)。6）、清楚的報(bào)錯(cuò)信息錯(cuò)誤操作后，系統(tǒng)應(yīng)該提供有針對(duì)性的錯(cuò)誤信息反饋提示，讓用戶心里有數(shù)。7）、快捷方式的組合在菜單及按鈕中使用快捷鍵可以讓用戶操作的更加快捷因此在一些軟件設(shè)計(jì)中會(huì)把的常用的功能用圖標(biāo)按鈕的形式擺在工具條上或用快捷件。8）、連續(xù)性一個(gè)有序的連續(xù)的界面能讓用戶輕松使用。在排列和版