UI設(shè)計界面設(shè)計PPT課件

1、User Interface Design 界 面 設(shè) 計User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念1、什么是界面設(shè)計？（難點）2、界面設(shè)計涉及的范圍及學(xué)科3、界面設(shè)計的工作流程4、以用戶為中心的界面設(shè)計原則(重點）參考書目：用戶界面設(shè)計與制作交互設(shè)計UI進(jìn)化論移動設(shè)備人機交互界面設(shè)計網(wǎng)絡(luò)資料User Interface Design 通過什么控制電視機？User Interface Design 通過什么操作ATM機？ATM 機User Interface Design 通過什么操作Photoshop程序？User Interface Design 通過

2、什么操作手機？User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念1、什么是界面設(shè)計（UI）？界面UI即User Interface(用戶界面)的簡稱。廣義上來講，UI界面是人與機器進(jìn)行交互的操作平臺，即用戶與機器相互傳遞信息的媒介媒介。用戶機器界面User Interface Design 概括成一句話就是人和機器之間的界面。這個界面實際上是體現(xiàn)在我們生活中的每一個環(huán)節(jié)的， 例如開車時候方向盤和儀表盤就是這個界面 ，看電視的時候遙控器和屏幕就是這個界面，用電腦的時候鍵盤 和顯示器就是這個界面。 于是我們可以把UI可以分成兩大類：硬件界面和軟件界面。本文所關(guān)注的UI

3、設(shè)計特指軟件界面，我們也可以稱為特殊的或者狹義的UI設(shè)計。User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念一、什么是界面設(shè)計？界面設(shè)計即User Interface Design（用戶界面設(shè)計）的簡稱，是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。人機交互操作邏輯界面美觀User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念問題一：界面設(shè)計=版式設(shè)計？謂版式設(shè)計，就是在版面上，將有限的視覺元素進(jìn)行有機的排列組合界面設(shè)計的內(nèi)容包括：圖形、文字、色彩、編排，使界面起到美化效果的作用。需要研究用戶需求，研究目標(biāo)用戶。User Inter

4、face Design 問題二：界面設(shè)計=用戶+界面？或者界面設(shè)計就是單單指界面美化設(shè)計？從字面上看，UI有用戶與界面兩個組成部分，但實際上還有還有用戶與界面之間的交互關(guān)系。界面設(shè)計需要定位使用者、使用環(huán)境、使用方式。不僅僅是美化界面，還有需要研究用戶、讓界面變得更友好、更有趣、更易用、更舒適。User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念UI用戶界面=+交互=版式考慮用戶的心理需求，研究目標(biāo)用戶User Interface Design 前面講到UI設(shè)計包括兩方面美化和交互。讓大家更了解UI設(shè)計的重要性 從美化的角度看，UI優(yōu)化后:1更有時尚感、層次感 2.

5、從QQ圖像就能知道是QQ的登入界面，更直觀、形象。 從交互的角度，未UI優(yōu)化的界面： 1.功能過于簡單 2.登入沒有體現(xiàn)按鈕的特點，而不會單擊 3.密碼輸入框也沒有做掩密處理，被盜號的風(fēng)險系數(shù)增加User Interface Design 二.ui設(shè)計是做什么的？ UI設(shè)計從工作內(nèi)容上來說分為3個方向。圖 它主要是由UI 研究的3個因素決定的， 其分別是研究界面，研究人與界面的關(guān)系，研究人 。1.研究界面-圖形設(shè)計師國內(nèi)目前大部分UI工作者都是從事這個行業(yè)。也有人稱之為美工，但實際上不是單純意義上的美術(shù)工人，而是軟件產(chǎn)品的產(chǎn)品外形設(shè)計師。這些設(shè)計師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計教

6、育背景，例如工業(yè)外形設(shè)計，裝潢設(shè)計，信息多媒體設(shè)計等。2.研究人與界面的關(guān)系-交互設(shè)計師 在圖形界面產(chǎn)生之前，長期以來UI設(shè)計師就是指交互設(shè)計師。交互設(shè)計師的工作內(nèi)容就是設(shè)計軟件的操作流程，樹狀結(jié)構(gòu)，軟件的結(jié)構(gòu)與操作規(guī)范（spec）等。一個軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計，并且確立交互模型，交互規(guī)范。交互設(shè)計師一般都是軟件工程師背景居多。User Interface Design 3.研究人-用戶測試/研究工程師 任何的產(chǎn)品為了保證質(zhì)量都需要測試，軟件的編碼需要測試，自然UI設(shè)計也需要被測試。這個測試和編碼沒有任何關(guān)系，主要是測試交互設(shè)計的合理性以及圖形設(shè)計的美觀性。測試方法一般都是采用

7、焦點小組，用目標(biāo)用戶問卷的形式來衡量UI設(shè)計的合理性。這個職位很重要，如果沒有這個職位，UI設(shè)計的好壞只能憑借設(shè)計師的經(jīng)驗或者領(lǐng)導(dǎo)的審美來評判，這樣就會給企業(yè)帶來嚴(yán)重的風(fēng)險性。用戶研究工程師一般是心理學(xué)人文學(xué)背景比較合適。 綜上所述UI設(shè)計師就是：軟件圖形設(shè)計師、交互設(shè)計師和用戶研究工程師。User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念三、界面設(shè)計涉及的范圍及學(xué)科人機產(chǎn)品界面設(shè)計、移動設(shè)備界面設(shè)計、網(wǎng)頁界面設(shè)計、軟件界面設(shè)計界面設(shè)計是一種結(jié)合美學(xué)、計算機科學(xué)、心理學(xué)、行為學(xué)、人機工程學(xué)、信息學(xué)以及市場學(xué)等的綜合性學(xué)科，強調(diào)人機環(huán)境三者作為一個系統(tǒng)進(jìn)行總體設(shè)計。

8、 User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念四、界面設(shè)計的工作流程1）. 產(chǎn)品制作人，寫產(chǎn)品計劃書。 2）. 用戶體驗研究員，作調(diào)查分析。 3）. 信息建構(gòu)師，設(shè)計產(chǎn)品架構(gòu)。 4）. 交互設(shè)計師，作出互動流程。 5）. 視覺設(shè)計師，作出頁面視覺設(shè)計。 6）. 前臺工程師，前臺開發(fā)。 7）. 后臺工程師，后臺開發(fā)。 8）. 用戶體驗研究員，做用戶測試確保質(zhì)量。User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念線線框原型、黑白原型稿框原型、黑白原型稿U

9、ser Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念產(chǎn)產(chǎn)品原型品原型User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念界面界面設(shè)計設(shè)計5.UI設(shè)計與產(chǎn)品團隊項目流程的關(guān)系5.1產(chǎn)品團隊產(chǎn)品經(jīng)理:產(chǎn)品團隊的老大，對用戶需求進(jìn)行細(xì)分調(diào)研，針對用戶的需求進(jìn)行產(chǎn)品賣點的規(guī)劃，將規(guī)劃陳述給公司高層，以此來爭取項目，或者也叫PM（項目經(jīng)理）的職責(zé)。用到軟件PPT、isio等產(chǎn)品設(shè)計師:側(cè)重功能設(shè)計，考慮技術(shù)可行性和性價比，有時也要做結(jié)構(gòu)設(shè)計或交互設(shè)計等。用到軟件AXURE 或WORD用戶體驗師:UE需要了解商業(yè)層面的內(nèi)容，與PD配合，從商業(yè)價值的角度

10、出發(fā)，對產(chǎn)品與用戶交互方面的環(huán)節(jié)進(jìn)行改良。挖掘用戶的需求，對用戶進(jìn)行跟蹤，調(diào)研，分析，做出相關(guān)的用戶需求報告。心理學(xué)研究。ui 進(jìn)行界面表現(xiàn)和美化，軟件：PS/ AI/FLASHUser Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念五、以用戶為中心的界面設(shè)計原則1）、一致性和必要的個性化2）、使用用戶的語言3）、用戶記憶負(fù)擔(dān)最小化4）、用戶界面的功能性5）、容易理解6）、清楚的報錯信息7）、快捷方式的組合8）、連續(xù)性9）、方便退出10）、幫助系統(tǒng)User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念1）、一致性和必要的個性化OFFICE OF

11、FICE 軟軟件件風(fēng)風(fēng)格一致格一致 ，要有統(tǒng)一的字體字號、統(tǒng)一的色調(diào)、統(tǒng)一的提示用詞、窗口在統(tǒng)一的位置、按鈕也在窗口的相同的位置。目的是能目的是能夠減夠減少少記憶記憶量、量、減減少出少出錯概錯概率而且能迅速率而且能迅速積積累累操作操作經(jīng)驗經(jīng)驗。個個性化。在一致性下，適性化。在一致性下，適當(dāng)當(dāng)突出突出該軟該軟件的件的“ “個個性化性化” ”如如PPTPPT中不同于中不同于word word 有自己的有自己的動畫動畫效果效果User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念2）、使用用戶的語言界面中要注意使用用戶的語言，而不是設(shè)計者的語言，最有效的方法：讓數(shù)據(jù)說話，如

12、詢問用戶、用戶投票等。因此，用戶使用系統(tǒng)的錯誤會降到最低。User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念3）、用戶記憶負(fù)擔(dān)最小化瀏覽信息比記憶更容易，在設(shè)計時一定要考慮到減輕用戶的記憶負(fù)擔(dān)。User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念4）、用戶界面的功能性界面最基本的性能是具有功能性與使用性，通過界面設(shè)計，讓用戶明白功能操作，并將產(chǎn)品本身的信息更加順暢的傳遞給使用者，是功能界面存在的基礎(chǔ)與價值用戶界面一定要有基本的功能，設(shè)計者不能片面追求界面外觀漂亮而導(dǎo)致華而不實。User Interface Design 一、界面設(shè)計的概

13、念一、界面設(shè)計的概念5）、容易理解大多數(shù)的用戶都有豐富的生活經(jīng)驗，也就是使用各種工具或者玩具的經(jīng)驗。如果能夠在界面設(shè)計中把這些積累的生活經(jīng)驗和界面視覺元素對應(yīng)或這連接起來就會讓用戶更容易理解。如電子書界面，模擬翻書的設(shè)計可以很快讓用戶理解如何操作，并且給讀者熟悉的閱讀體驗。User Interface Design 6）、清楚的報錯信息錯誤操作后，系統(tǒng)應(yīng)該提供有針對性的錯誤信息反饋提示，讓用戶心里有數(shù)。User Interface Design 7）、快捷方式的組合 在菜單及按鈕中使用快捷鍵可以讓用戶操作的更加快捷因此在一些軟件設(shè)計中會把的常用的功能用圖標(biāo)按鈕的形式擺在工具條上或用快捷件。 如

14、在犀牛軟件中按住中間滾輪就能彈出常用的功能鍵或者在CAD軟件中每個常用工具都會有個相應(yīng)的英文快捷鍵。直線工具：L(line)User Interface Design 8）、連續(xù)性 一個有序的連續(xù)的界面能讓用戶輕松使用。在排列和版面布局上要有序，是水平排列還是垂直排列還是兩者都有之。如QQ界面。User Interface Design 9）、方便退出 在界面的使用上要設(shè)計方便退出，提供不同可能性，如手機的退出，是按一個鍵就可退出還是一層一層的退出。 10）、幫助系統(tǒng) 它可以幫助用戶更快捷、更好的學(xué)習(xí)界面的使用，告訴用戶在遇到某些使用問題時該如何處理、減少用戶在使用中的挫折感。User Int

15、erface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念六、界面設(shè)計的常用軟件Photoshop、Illustrator、Flash、3ds Max、其他軟件：Xara Xtreme繪制圖標(biāo)，是英國矢量圖形軟件公司Xara開發(fā)的老牌圖像設(shè)計軟件，被譽為“世界上速度最快的繪圖軟件”，用來繪圖、處理圖像、制作Web圖形等。Axialis Icon Workshop是功能強大的、專門制作圖標(biāo)的編輯軟件。User Interface Design 一、界面設(shè)計的概念一、界面設(shè)計的概念6、界面設(shè)計的常用軟件：Xara XtremeUser Interface Design 一、界面設(shè)計的概念一、

16、界面設(shè)計的概念6、界面設(shè)計的常用軟件：Axialis Icon WorkshopUser Interface Design 總的來講本課內(nèi)容主要講了什么是UI？ui是做什么的？怎樣做UI?User Interface Design 三、圖標(biāo)制作三、圖標(biāo)制作User Interface Design 三、圖標(biāo)制作三、圖標(biāo)制作1、圖標(biāo)設(shè)計的意義1）、視覺設(shè)計的重要組成部分，用于提示與強調(diào)2）、使產(chǎn)品的功能具象化，更容易理解3）、使產(chǎn)品的人機界面更具有吸引力，富含娛樂性4）、形成產(chǎn)品的統(tǒng)一特征，給用戶以信賴感，便于功能的記憶5）、創(chuàng)造差異化、個性化的美，強化裝飾性作用6）、圖標(biāo)設(shè)計是一種藝術(shù)創(chuàng)作、能

17、提高產(chǎn)品的品味7）、圖標(biāo)設(shè)計的表現(xiàn)方式靈活自由、可以傳達(dá)不同的產(chǎn)品理念8）、圖標(biāo)設(shè)計是在屏幕上展示產(chǎn)品的最佳方式User Interface Design 三、圖標(biāo)制作三、圖標(biāo)制作1、圖標(biāo)設(shè)計的意義1）、視覺設(shè)計的重要組成部分，用于提示與強調(diào)2）、使產(chǎn)品的功能具象化，更容易理解User Interface Design 三、圖標(biāo)制作三、圖標(biāo)制作1、圖標(biāo)設(shè)計的意義3）、使產(chǎn)品的人機界面更具有吸引力，富含娛樂性User Interface Design 三、圖標(biāo)制作三、圖標(biāo)制作1、圖標(biāo)設(shè)計的意義6）、圖標(biāo)設(shè)計是一種藝術(shù)創(chuàng)作、能提高產(chǎn)品的品味User Interface Design 三、圖標(biāo)制作三

18、、圖標(biāo)制作1、圖標(biāo)設(shè)計的意義6）、圖標(biāo)設(shè)計是一種藝術(shù)創(chuàng)作、能提高產(chǎn)品的品味User Interface Design 三、圖標(biāo)制作三、圖標(biāo)制作1、圖標(biāo)設(shè)計的意義7）、圖標(biāo)設(shè)計的表現(xiàn)方式靈活自由、可以傳達(dá)不同的產(chǎn)品理念User Interface Design User Interface Design User Interface Design 三、圖標(biāo)制作三、圖標(biāo)制作1、圖標(biāo)設(shè)計的意義8）、圖標(biāo)設(shè)計是在屏幕上展示產(chǎn)品的最佳方式User Interface Design 三、圖標(biāo)制作三、圖標(biāo)制作2、圖標(biāo)設(shè)計的原則1）、精美、直觀、生動的圖標(biāo)User Interface Design 三、圖標(biāo)制作三、圖標(biāo)制作2、圖標(biāo)設(shè)計的原則1）、精美、直觀、生動的圖標(biāo)User Interface Design 三、圖標(biāo)制作三、圖標(biāo)制作