UI界面設(shè)計(jì)流程講解

UI界面設(shè)計(jì)流程講解UI界面設(shè)計(jì)流程講解UI界面設(shè)計(jì)流程講解一、界面設(shè)計(jì)的概念1、什么是界面設(shè)計(jì)？（難點(diǎn)）2、界面設(shè)計(jì)涉及的范圍及學(xué)科3、界面設(shè)計(jì)的工作流程4、以用戶為中心的界面設(shè)計(jì)原則(重點(diǎn)）參考書目：《用戶界面設(shè)計(jì)及制作》《交互設(shè)計(jì)》《進(jìn)化論——移動(dòng)設(shè)備人機(jī)交互界面設(shè)計(jì)》網(wǎng)絡(luò)資料2021/4/132通過(guò)什么控制電視機(jī)？2021/4/133通過(guò)什么操作機(jī)？機(jī)2021/4/134通過(guò)什么操作程序？2021/4/135通過(guò)什么操作手機(jī)？2021/4/136一、界面設(shè)計(jì)的概念1、什么是界面設(shè)計(jì)（）？界面——即(用戶界面)的簡(jiǎn)稱。廣義上來(lái)講，界面是人及機(jī)器進(jìn)行交互的操作平臺(tái)，即用戶及機(jī)器相互傳遞信息的媒介。用戶機(jī)器界面2021/4/137概括成一句話就是——人和機(jī)器之間的界面。這個(gè)界面實(shí)際上是體現(xiàn)在我們生活中的每一個(gè)環(huán)節(jié)的，例如開車時(shí)候方向盤和儀表盤就是這個(gè)界面，看電視的時(shí)候遙控器和屏幕就是這個(gè)界面，用電腦的時(shí)候鍵盤和顯示器就是這個(gè)界面。于是我們可以把可以分成兩大類：硬件界面和軟件界面。本文所關(guān)注的設(shè)計(jì)特指軟件界面，我們也可以稱為特殊的或者狹義的設(shè)計(jì)。2021/4/138一、界面設(shè)計(jì)的概念一、什么是界面設(shè)計(jì)？界面設(shè)計(jì)即（用戶界面設(shè)計(jì)）的簡(jiǎn)稱，是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。人機(jī)交互操作邏輯界面美觀2021/4/139一、界面設(shè)計(jì)的概念問(wèn)題一：界面設(shè)計(jì)=版式設(shè)計(jì)？謂版式設(shè)計(jì)，就是在版面上，將有限的視覺(jué)元素進(jìn)行有機(jī)的排列組合界面設(shè)計(jì)的內(nèi)容包括：圖形、文字、色彩、編排，使界面起到美化效果的作用。需要研究用戶需求，研究目標(biāo)用戶。2021/4/1310問(wèn)題二：界面設(shè)計(jì)=用戶+界面？或者界面設(shè)計(jì)就是單單指界面美化設(shè)計(jì)？從字面上看，有用戶及界面兩個(gè)組成部分，但實(shí)際上還有還有用戶及界面之間的交互關(guān)系。界面設(shè)計(jì)需要定位使用者、使用環(huán)境、使用方式。不僅僅是美化界面，還有需要研究用戶、讓界面變得更友好、更有趣、更易用、更舒適。2021/4/1311一、界面設(shè)計(jì)的概念用戶界面=+交互=版式考慮用戶的心理需求，研究目標(biāo)用戶2021/4/1312前面講到設(shè)計(jì)包括兩方面——美化和交互。讓大家更了解設(shè)計(jì)的重要性從美化的角度看，優(yōu)化后:1更有時(shí)尚感、層次感2.從圖像就能知道是的登入界面，更直觀、形象。從交互的角度，未優(yōu)化的界面：1.功能過(guò)于簡(jiǎn)單2.登入沒(méi)有體現(xiàn)按鈕的特點(diǎn)，而不會(huì)單擊3.密碼輸入框也沒(méi)有做掩密處理，被盜號(hào)的風(fēng)險(xiǎn)系數(shù)增加2021/4/1313二設(shè)計(jì)是做什么的？設(shè)計(jì)從工作內(nèi)容上來(lái)說(shuō)分為3個(gè)方向。圖它主要是由研究的3個(gè)因素決定的，其分別是研究界面，研究人及界面的關(guān)系，研究人。1.研究界面圖形設(shè)計(jì)師國(guó)內(nèi)目前大部分工作者都是從事這個(gè)行業(yè)。也有人稱之為美工，但實(shí)際上不是單純意義上的美術(shù)工人，而是軟件產(chǎn)品的產(chǎn)品外形設(shè)計(jì)師。這些設(shè)計(jì)師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計(jì)教育背景，例如工業(yè)外形設(shè)計(jì)，裝潢設(shè)計(jì)，信息多媒體設(shè)計(jì)等。2.研究人及界面的關(guān)系交互設(shè)計(jì)師在圖形界面產(chǎn)生之前，長(zhǎng)期以來(lái)設(shè)計(jì)師就是指交互設(shè)計(jì)師。交互設(shè)計(jì)師的工作內(nèi)容就是設(shè)計(jì)軟件的操作流程，樹狀結(jié)構(gòu)，軟件的結(jié)構(gòu)及操作規(guī)范（）等。一個(gè)軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。交互設(shè)計(jì)師一般都是軟件工程師背景居多。2021/4/13143.研究人用戶測(cè)試/研究工程師任何的產(chǎn)品為了保證質(zhì)量都需要測(cè)試，軟件的編碼需要測(cè)試，自然設(shè)計(jì)也需要被測(cè)試。這個(gè)測(cè)試和編碼沒(méi)有任何關(guān)系，主要是測(cè)試交互設(shè)計(jì)的合理性以及圖形設(shè)計(jì)的美觀性。測(cè)試方法一般都是采用焦點(diǎn)小組，用目標(biāo)用戶問(wèn)卷的形式來(lái)衡量設(shè)計(jì)的合理性。這個(gè)職位很重要，如果沒(méi)有這個(gè)職位，設(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é)背景比較合適。

綜上所述設(shè)計(jì)師就是：軟件圖形設(shè)計(jì)師、交互設(shè)計(jì)師和用戶研究工程師。2021/4/1315一、界面設(shè)計(jì)的概念三、界面設(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ì)。2021/4/1316一、界面設(shè)計(jì)的概念四、界面設(shè)計(jì)的工作流程1）.

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

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)開發(fā)。

7）.

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

8）.

用戶體驗(yàn)研究員，做用戶測(cè)試確保質(zhì)量。2021/4/1317一、界面設(shè)計(jì)的概念2021/4/1318一、界面設(shè)計(jì)的概念線框原型、黑白原型稿2021/4/1319一、界面設(shè)計(jì)的概念產(chǎn)品原型2021/4/1320一、界面設(shè)計(jì)的概念界面設(shè)計(jì)2021/4/13215設(shè)計(jì)及產(chǎn)品團(tuán)隊(duì)項(xiàng)目流程的關(guān)系5.1產(chǎn)品團(tuán)隊(duì)產(chǎn)品經(jīng)理:產(chǎn)品團(tuán)隊(duì)的老大，對(duì)用戶需求進(jìn)行細(xì)分調(diào)研，針對(duì)用戶的需求進(jìn)行產(chǎn)品賣點(diǎn)的規(guī)劃，將規(guī)劃陳述給公司高層，以此來(lái)爭(zhēng)取項(xiàng)目，或者也叫（項(xiàng)目經(jīng)理）的職責(zé)。用到軟件、等產(chǎn)品設(shè)計(jì)師:側(cè)重功能設(shè)計(jì)，考慮技術(shù)可行性和性價(jià)比，有時(shí)也要做結(jié)構(gòu)設(shè)計(jì)或交互設(shè)計(jì)等。用到軟件或用戶體驗(yàn)師需要了解商業(yè)層面的內(nèi)容，及配合，從商業(yè)價(jià)值的角度出發(fā)，對(duì)產(chǎn)品及用戶交互方面的環(huán)節(jié)進(jìn)行改良。挖掘用戶的需求，對(duì)用戶進(jìn)行跟蹤，調(diào)研，分析，做出相關(guān)的用戶需求報(bào)告。心理學(xué)研究。進(jìn)行界面表現(xiàn)和美化，軟件：2021/4/1322一、界面設(shè)計(jì)的概念五、以用戶為中心的界面設(shè)計(jì)原則1）、一致性和必要的個(gè)性化2）、使用用戶的語(yǔ)言3）、用戶記憶負(fù)擔(dān)最小化4）、用戶界面的功能性5）、容易理解6）、清楚的報(bào)錯(cuò)信息7）、快捷方式的組合8）、連續(xù)性9）、方便退出10）、幫助系統(tǒng)2021/4/1323一、界面設(shè)計(jì)的概念1）、一致性和必要的個(gè)性化軟件風(fēng)格一致，要有統(tǒng)一的字體字號(hào)、統(tǒng)一的色調(diào)、統(tǒng)一的提示用詞、窗口在統(tǒng)一的位置、按鈕也在窗口的相同的位置。目的是能夠減少記憶量、減少出錯(cuò)概率而且能迅速積累操作經(jīng)驗(yàn)。個(gè)性化。在一致性下，適當(dāng)突出該軟件的“個(gè)性化”如中不同于有自己的動(dòng)畫效果2021/4/1324一、界面設(shè)計(jì)的概念2）、使用用戶的語(yǔ)言界面中要注意使用用戶的語(yǔ)言，而不是設(shè)計(jì)者的語(yǔ)言，最有效的方法：讓數(shù)據(jù)說(shuō)話，如詢問(wèn)用戶、用戶投票等。因此，用戶使用系統(tǒng)的錯(cuò)誤會(huì)降到最低。2021/4/1325一、界面設(shè)計(jì)的概念3）、用戶記憶負(fù)擔(dān)最小化瀏覽信息比記憶更容易，在設(shè)計(jì)時(shí)一定要考慮到減輕用戶的記憶負(fù)擔(dān)。2021/4/1326一、界面設(shè)計(jì)的概念4）、用戶界面的功能性界面最基本的性能是具有功能性及使用性，通過(guò)界面設(shè)計(jì)，讓用戶明白功能操作，并將產(chǎn)品本身的信息更加順暢的傳遞給使用者，是功能界面存在的基礎(chǔ)及價(jià)值用戶界面一定要有基本的功能，設(shè)計(jì)者不能片面追求界面外觀漂亮而導(dǎo)致華而不實(shí)。2021/4/1327一、界面設(shè)計(jì)的概念5）、容易理解大多數(shù)的用戶都有豐富的生活經(jīng)驗(yàn)，也就是使用各種工具或者玩具的經(jīng)驗(yàn)。如果能夠在界面設(shè)計(jì)中把這些積累的生活經(jīng)驗(yàn)和界面視覺(jué)元素對(duì)應(yīng)或這連接起來(lái)就會(huì)讓用戶更容易理解。如電子書界面，模擬翻書的設(shè)計(jì)可以很快讓用戶理解如何操作，并且給讀者熟悉的閱讀體驗(yàn)。2021/4/13286）、清楚的報(bào)錯(cuò)信息錯(cuò)誤操作后，系統(tǒng)應(yīng)該提供有針對(duì)性的錯(cuò)誤信息反饋提示，讓用戶心里有數(shù)。2021/4/13297）、快捷方式的組合在菜單及按鈕中使用快捷鍵可以讓用戶操作的更加快捷因此在一些軟件設(shè)計(jì)中會(huì)把的常用的功能用圖標(biāo)按鈕的形式擺在工具條上或用快捷件。如在犀牛軟件中按住中間滾輪就能彈出常用的功能鍵或者在軟件中每個(gè)常用工具都會(huì)有個(gè)相應(yīng)的英文快捷鍵。直線工具：L()2021/4/13308）、連續(xù)性一個(gè)有序的連續(xù)的界面能讓用戶輕松使用。在排列和版面布局上要有序，是水平排列還是垂直排列還是兩者都有之。如界面。2021/4/13319）、方便退出在界面的使用上要設(shè)計(jì)方便退出，提供不同可能性，如手機(jī)的退出，是按一個(gè)鍵就可退出還是一層一層的退出。10）、幫助系統(tǒng)它可以幫助用戶更快捷、更好的學(xué)習(xí)界面的使用，告訴用戶在遇到某些使用問(wèn)題時(shí)該如何處理、減少用戶在使用中的挫折感。2021/4/1332一、界面設(shè)計(jì)的概念六、界面設(shè)計(jì)的常用軟件、、、3、其他軟件：繪制圖標(biāo)，是英國(guó)矢量圖形軟件公司開發(fā)的老牌圖像設(shè)計(jì)軟件，被譽(yù)為“世界上速度最快的繪圖軟件”，用來(lái)繪圖、處理圖像、制作圖形等。是功能強(qiáng)大的、專門制作圖標(biāo)的編輯軟件。2021/4/1333一、界面設(shè)計(jì)的概念6、界面設(shè)計(jì)的常用軟件：2021/4/1334一、界面設(shè)計(jì)的概念6、界面設(shè)計(jì)的常用軟件：2021/4/1335總的來(lái)講本課內(nèi)容主要講了什么是？——是做什么的？——怎樣做?2021/4/1336三、圖標(biāo)制作2021/4/1337三、圖標(biāo)制作1、圖標(biāo)設(shè)計(jì)的意義1）、視覺(jué)設(shè)計(jì)的重要組成部分，用于提示及強(qiáng)調(diào)2）、使產(chǎn)品的功能具象化，更容易理解3）、使產(chǎn)品的人機(jī)界面更具有吸引力，富含娛樂(lè)性4）、形成產(chǎn)品的統(tǒng)一特征，給用戶以信賴感，便于功能的記憶5）、創(chuàng)造差異化、個(gè)性化的美，強(qiáng)化裝飾性作用6）、圖標(biāo)設(shè)計(jì)是一種藝術(shù)創(chuàng)作、能提高產(chǎn)品的品味7）、圖標(biāo)設(shè)計(jì)的表現(xiàn)方式靈活自由、可以傳達(dá)不同的產(chǎn)品理念8）、圖標(biāo)設(shè)計(jì)是在屏幕上展示產(chǎn)品的最佳方式2021/4/1338三、圖標(biāo)制作1、圖標(biāo)設(shè)計(jì)的意義1）、視覺(jué)設(shè)計(jì)的重要組成部分，用于提示及強(qiáng)調(diào)2）、使產(chǎn)品的功能具象化，更容易理解2021/4/1339三、圖標(biāo)制作1、圖標(biāo)設(shè)計(jì)的意義3）、使產(chǎn)品的人機(jī)界面更具有吸引力，富含娛樂(lè)性2021/4/1340三、圖標(biāo)制作1、圖標(biāo)設(shè)計(jì)的意義6）、圖標(biāo)設(shè)計(jì)是一種藝術(shù)創(chuàng)作、能提高產(chǎn)品的品味2021/4/1341三、圖標(biāo)制作1、圖標(biāo)設(shè)計(jì)的意義6）、圖標(biāo)設(shè)計(jì)是一種藝術(shù)創(chuàng)作、能提高產(chǎn)品的品味2021/4/1342三、圖標(biāo)制作1、圖標(biāo)設(shè)計(jì)的意義7）、圖標(biāo)設(shè)計(jì)的表現(xiàn)方式靈活自由、可以傳達(dá)不同的產(chǎn)品理念2021/4/13432021/4/13442021/4/1345三、圖標(biāo)制作1、圖標(biāo)設(shè)計(jì)的意義8）、圖標(biāo)設(shè)計(jì)是在屏幕上展示產(chǎn)品的最佳方式2021/4/1346三、圖標(biāo)制作2、圖標(biāo)設(shè)計(jì)的原則1）、精美、直觀、生動(dòng)的圖標(biāo)2021/4/1347三、圖標(biāo)制作2、圖標(biāo)設(shè)計(jì)的原則1）、精美、直觀、生動(dòng)的圖標(biāo)2021/4/1348三、圖標(biāo)制作2、圖標(biāo)設(shè)計(jì)的原則2）、圖標(biāo)的唯一性——準(zhǔn)確、易識(shí)別、易理解2021/4/1349三、圖標(biāo)制作2、圖標(biāo)設(shè)計(jì)的原則3）、系列圖標(biāo)風(fēng)格統(tǒng)一、整體性強(qiáng)2021/4/13502021/4/13512021/4/1352三、圖標(biāo)制作2、圖標(biāo)設(shè)計(jì)的原則4）、主題文化性2021/4/1353三、圖標(biāo)制作3、圖標(biāo)設(shè)計(jì)的規(guī)格圖標(biāo)文件的類型：文件，圖標(biāo)文件大都是格式圖標(biāo)的一般尺寸：16x16像素、32x32像素、48x48像素、64x64像素、96x96像素、256x256像素2021/4/13542021/4/13