界面設(shè)計(jì)(UI)軟件ui設(shè)計(jì)22-第二章課件

UI即UserInterface(用戶界面)的簡(jiǎn)稱。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。什么是UI設(shè)計(jì)UI即UserInterface(用戶界面)的簡(jiǎn)稱。什么是1好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由,充分體現(xiàn)軟件的定位和特點(diǎn)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變UI設(shè)計(jì)從工作內(nèi)容上分3個(gè)方向研究界面；研究人與界面的關(guān)系；研究人。UI設(shè)計(jì)從工作內(nèi)容上分3個(gè)方向研究界面圖形設(shè)計(jì)師GraphicUIdesigner

軟件產(chǎn)品的產(chǎn)品外形設(shè)計(jì)師，這些設(shè)計(jì)師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計(jì)教育背景，例如工業(yè)外形設(shè)計(jì)，裝潢設(shè)計(jì)，信息多媒體設(shè)計(jì)等。

研究界面研究人與界面的關(guān)系交互設(shè)計(jì)師，interactiondesigner

在圖形界面產(chǎn)生之前，長(zhǎng)期以來UI設(shè)計(jì)師就是指交互設(shè)計(jì)師。交互設(shè)計(jì)師的工作內(nèi)容就是設(shè)計(jì)軟件的操作流程，樹狀結(jié)構(gòu)，軟件的結(jié)構(gòu)與操作規(guī)范（spec）等。一個(gè)軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。交互設(shè)計(jì)師一般都是軟件工程師背景居多。

研究人與界面的關(guān)系研究人用戶測(cè)試/研究工程師

Userexperienceengineer

任何的產(chǎn)品為了保證質(zhì)量都需要測(cè)試，軟件的編碼需要測(cè)試，自然UI設(shè)計(jì)也需要被測(cè)試。這個(gè)測(cè)試和編碼沒有任何關(guān)系，主要是測(cè)試交互設(shè)計(jì)的合理性以及圖形設(shè)計(jì)的美觀性。測(cè)試方法一般都是采用焦點(diǎn)小組，用目標(biāo)用戶問卷的形式來衡量UI設(shè)計(jì)的合理性。這個(gè)職位很重要，如果沒有這個(gè)職位，UI設(shè)計(jì)的好壞只能憑借設(shè)計(jì)師的經(jīng)驗(yàn)或者領(lǐng)導(dǎo)的審美來評(píng)判，這樣就會(huì)給企業(yè)帶來嚴(yán)重的風(fēng)險(xiǎn)性。用戶研究工程師一般是心理學(xué)人文學(xué)背景比較合適。

研究人ui設(shè)計(jì)國(guó)內(nèi)現(xiàn)狀目前在國(guó)內(nèi)UI還是一個(gè)相對(duì)陌生的詞，在國(guó)內(nèi)對(duì)UI的理解還停留在美術(shù)設(shè)計(jì)方面，認(rèn)為UI的工作只是描邊畫線，缺乏對(duì)用戶交互的重要性的理解；另一方面在軟件開發(fā)過程中還存在重技術(shù)而不重應(yīng)用的現(xiàn)象。許多商家認(rèn)為軟件產(chǎn)品的核心是技術(shù)，而UI僅僅是次要的輔助，這點(diǎn)在人員的比例與待遇上可以表現(xiàn)出來。

UI即用戶界面設(shè)計(jì)行業(yè)剛剛在全球軟件業(yè)興起，屬于高薪技術(shù)設(shè)計(jì)產(chǎn)業(yè)，與國(guó)外在同步發(fā)展水平。其次國(guó)內(nèi)外眾多大型IT企業(yè)(例如：百度、騰訊、Yahoo、中國(guó)移動(dòng)、Nokia、聯(lián)想、網(wǎng)易、微軟、盛大、淘寶等眾多企業(yè))均已成立專業(yè)的UI設(shè)計(jì)部門，但專業(yè)人才稀缺，人才資源爭(zhēng)奪激烈。瑭錦Tanjurd表示UI就業(yè)市場(chǎng)供不應(yīng)求。我國(guó)UI市場(chǎng)尚在萌芽階段，人才缺口巨大，目前，中國(guó)市場(chǎng)上的手機(jī)、軟件、網(wǎng)站等產(chǎn)品，同質(zhì)化程度非常高，過去企業(yè)在設(shè)計(jì)產(chǎn)品的時(shí)候，主要是在功能、質(zhì)量或者產(chǎn)品外觀上和競(jìng)爭(zhēng)對(duì)手有所區(qū)別，而現(xiàn)在隨著技術(shù)的進(jìn)步和市場(chǎng)的發(fā)展，越來越多的企業(yè)意識(shí)到用戶體驗(yàn)的重要性了，而這種用戶體驗(yàn)的提升則主要依賴于UID的勞動(dòng)。

ui設(shè)計(jì)國(guó)內(nèi)現(xiàn)狀移動(dòng)UI設(shè)計(jì)的五條原則以用戶為中心，考慮產(chǎn)品的使用環(huán)境用戶總是按照他們自己的方法理解和使用移動(dòng)端，所以從用戶的觀點(diǎn)考慮，想用戶所想，做用戶所做成了設(shè)計(jì)師們的設(shè)計(jì)考量標(biāo)準(zhǔn)之一。移動(dòng)UI設(shè)計(jì)的五條原則第二：合理的用戶指引由于手機(jī)界面本身的承載能力有限，加上每一款產(chǎn)品功能都會(huì)有不同程度的更新和完善，

第二：合理的用戶指引第三：扁平化設(shè)計(jì)之不一定扁平個(gè)人而言，采用什么樣的設(shè)計(jì)風(fēng)格，是由產(chǎn)品本身的目標(biāo)以及要解決的問題來決定的，美與丑、操作難易并不完全決定了一個(gè)產(chǎn)品的成敗。有一個(gè)非常的經(jīng)典案例是趕集網(wǎng)產(chǎn)品總監(jiān)布棉老師在一次講課提到的美國(guó)最火的分類網(wǎng)站Craigslist，如果從扁平化的角度來看，真的是丑爆了。該網(wǎng)站上沒有圖片（最新版加上了一個(gè)地圖），只有密密麻麻的文字，但雖然看上去頗為乏味，可是卻是美國(guó)人最喜歡的網(wǎng)站之一。

第三：扁平化設(shè)計(jì)之不一定扁平界面設(shè)計(jì)(UI)軟件ui設(shè)計(jì)22-第二章課件第四：動(dòng)態(tài)數(shù)據(jù)可視化

數(shù)據(jù)可視化設(shè)計(jì)是將枯燥繁瑣的列表和文字轉(zhuǎn)換為直觀的餅圖、扇形圖、折線型、柱狀圖等豐富直觀的設(shè)計(jì)元素，提高用戶體驗(yàn)。而且現(xiàn)今數(shù)據(jù)可視化不只是靜態(tài)展現(xiàn)數(shù)據(jù)，用戶希望通過互動(dòng)及時(shí)獲取數(shù)據(jù)流，若以動(dòng)態(tài)效果來呈現(xiàn)，能多維度呈現(xiàn)給用戶實(shí)時(shí)信息，同時(shí)能與用戶形成互動(dòng)，提高數(shù)據(jù)表現(xiàn)的趣味性。動(dòng)態(tài)數(shù)據(jù)可視化將更加強(qiáng)調(diào)數(shù)據(jù)轉(zhuǎn)譯實(shí)時(shí)更新的圖形，以及動(dòng)態(tài)的圖形化表達(dá)。

第四：動(dòng)態(tài)數(shù)據(jù)可視化界面設(shè)計(jì)(UI)軟件ui設(shè)計(jì)22-第二章課件第五：多彩色風(fēng)格的設(shè)計(jì)

多彩撞色更多的表現(xiàn)于多種純色塊的使用，就是很簡(jiǎn)單的純顏色，只需要注意多彩配色的方式，就能得到很好的視覺效果。多彩色拼接的設(shè)計(jì)風(fēng)格，一屏式的頁面排版布局，總體來說是時(shí)尚大氣簡(jiǎn)潔的設(shè)計(jì).第五：多彩色風(fēng)格的設(shè)計(jì)界面設(shè)計(jì)(UI)軟件ui設(shè)計(jì)22-第二章課件2023/9/1216UE/UI設(shè)計(jì)流程產(chǎn)品分析產(chǎn)品定位

從軟件提供者的角度分析產(chǎn)品推出的意義和重點(diǎn)關(guān)注的方面，實(shí)際考量、豐滿決策層的idea，明確列出產(chǎn)品定位，通過討論修繕取得決策層的認(rèn)可；用戶分析

結(jié)合競(jìng)爭(zhēng)產(chǎn)品的分析資料，采用定性分析的方法，獲得對(duì)產(chǎn)品目標(biāo)用戶在概念層面的認(rèn)識(shí)；產(chǎn)品概述

以軟件提供的身份，以最簡(jiǎn)短的文字，向用戶介紹產(chǎn)品，突出產(chǎn)品對(duì)用戶的價(jià)值。避免功能點(diǎn)的簡(jiǎn)單羅列，而應(yīng)該在歸納總結(jié)的基礎(chǔ)上突出重點(diǎn)；功能需求規(guī)格整理

在歸納關(guān)鍵功能的基礎(chǔ)上，結(jié)合競(jìng)爭(zhēng)產(chǎn)品規(guī)格整理的領(lǐng)域認(rèn)識(shí)，從邏輯上梳理需求規(guī)格列表，重在邏輯關(guān)系清楚、組織和層級(jí)關(guān)系清晰。劃定項(xiàng)目（設(shè)計(jì)和研發(fā)）范圍；產(chǎn)出物：

用戶分析文檔和產(chǎn)品概述、功能規(guī)格列表

產(chǎn)品定位用戶分析產(chǎn)品概述功能需求規(guī)格整理產(chǎn)出物第一次Check是/否通過？2023/7/3116UE/UI設(shè)計(jì)流程產(chǎn)品分析產(chǎn)品定位用戶2023/9/1217UE/UI設(shè)計(jì)流程第三階段：交互設(shè)計(jì)（功能結(jié)構(gòu)和交互流程設(shè)計(jì)）產(chǎn)品概念模型分析

從產(chǎn)品功能邏輯入手，結(jié)合對(duì)常見軟件的經(jīng)驗(yàn)積累和競(jìng)爭(zhēng)產(chǎn)品的認(rèn)識(shí)，加上對(duì)用戶的理解，為產(chǎn)品設(shè)計(jì)一個(gè)盡量接近用戶對(duì)產(chǎn)品運(yùn)行方式理解的概念模型，成為產(chǎn)品設(shè)計(jì)的基礎(chǔ)框架；功能結(jié)構(gòu)圖

在產(chǎn)品概念模型的基礎(chǔ)上豐富交互組件，并理順交互組件之間的結(jié)構(gòu)關(guān)系；使用場(chǎng)景分析

模擬典型用戶執(zhí)行關(guān)鍵功能達(dá)到其目標(biāo)的使用場(chǎng)景；交互流程分析

模擬在上述概念模型和功能結(jié)構(gòu)決定的產(chǎn)品框架之中，支持使用場(chǎng)景的關(guān)鍵操作過程（即鼠標(biāo)點(diǎn)擊步驟和屏幕引導(dǎo)路徑）；產(chǎn)出物：

產(chǎn)品設(shè)計(jì)文檔的交互設(shè)計(jì)部分概念模型分析功能結(jié)構(gòu)圖使用場(chǎng)景分析交互流程分析產(chǎn)出物第一次Check是/否通過？2023/7/3117UE/UI設(shè)計(jì)流程第三階段：交互設(shè)計(jì)（2023/9/1218UE/UI設(shè)計(jì)流程第四階段：原型設(shè)計(jì)（信息架構(gòu)和界面原型設(shè)計(jì)）信息架構(gòu)和界面原型設(shè)計(jì)

設(shè)計(jì)產(chǎn)品界面中應(yīng)該包含的控件數(shù)量和類型、控件之間的邏輯和組織關(guān)系，以支持用戶對(duì)控件或控件組所代表的功能的理解，對(duì)用戶操作的明確引導(dǎo)；所有界面設(shè)計(jì)成為一套完整的可模擬的產(chǎn)品原型；設(shè)計(jì)要點(diǎn)說明

對(duì)界面設(shè)計(jì)的重點(diǎn)添加說明，幫助涉眾對(duì)設(shè)計(jì)的理解；

產(chǎn)出物：

產(chǎn)品設(shè)計(jì)文檔的原型設(shè)計(jì)部分信息架構(gòu)和界面原型要點(diǎn)說明產(chǎn)出物第一次Check是/否通過？2023/7/3118UE/UI設(shè)計(jì)流程第四階段：原型設(shè)計(jì)（2023/9/1219UE/UI設(shè)計(jì)流程第五階段：詳細(xì)設(shè)計(jì)（詳細(xì)設(shè)計(jì)和偽代碼編寫）詳細(xì)設(shè)計(jì)

完善設(shè)計(jì)細(xì)節(jié)、交互文本和信息設(shè)計(jì)（Messagebox）；設(shè)計(jì)和邏輯說明

對(duì)界面控件/控件組/窗口的屬性和行為進(jìn)行標(biāo)準(zhǔn)化定義，梳理完整的交互邏輯，用狀態(tài)遷移圖或偽代碼形式表示；產(chǎn)出物：產(chǎn)品設(shè)計(jì)文檔的詳細(xì)設(shè)計(jì)部分

第六階段：設(shè)計(jì)維護(hù)（研發(fā)跟蹤和設(shè)計(jì)維護(hù)）語言文檔整理

設(shè)計(jì)通過評(píng)審之后，把產(chǎn)品中所有的交互文本整理成excel文檔，預(yù)備研發(fā)工作；研發(fā)跟蹤維護(hù)

進(jìn)入研發(fā)階段后負(fù)責(zé)為研發(fā)工程師解釋設(shè)計(jì)方案、問題修改、文檔完善、Bug跟蹤等；

產(chǎn)出物：

產(chǎn)品語言文檔，設(shè)計(jì)調(diào)整維護(hù)詳細(xì)設(shè)計(jì)設(shè)計(jì)和邏輯說明產(chǎn)出物第四次Check是/否通過？完成設(shè)計(jì)維護(hù)進(jìn)入設(shè)計(jì)維護(hù)End2023/7/3119UE/UI設(shè)計(jì)流程第五階段：詳細(xì)設(shè)計(jì)（2023/9/1220UE/UI設(shè)計(jì)流程第一階段：基礎(chǔ)調(diào)研競(jìng)爭(zhēng)產(chǎn)品分析

尋找市場(chǎng)上的競(jìng)爭(zhēng)產(chǎn)品，挑選3-5款進(jìn)行解剖分析。整理競(jìng)爭(zhēng)產(chǎn)品的功能規(guī)格；并分析規(guī)格代表的需求，需求背后的用戶和用戶目標(biāo)；分析競(jìng)爭(zhēng)產(chǎn)品的功能結(jié)構(gòu)和交互設(shè)計(jì)，從產(chǎn)品設(shè)計(jì)的角度解釋其優(yōu)點(diǎn)、缺點(diǎn)及其原因，成為我們產(chǎn)品設(shè)計(jì)的第一手參考資料。領(lǐng)域調(diào)研

結(jié)合上述分析基礎(chǔ)和資料，縱觀領(lǐng)域競(jìng)爭(zhēng)格局、市場(chǎng)狀況，利用網(wǎng)絡(luò)論壇、關(guān)鍵字搜索等手段獲得更多用戶反饋、觀點(diǎn)、前瞻性需求。產(chǎn)出物：

相應(yīng)的對(duì)比分析文檔和領(lǐng)域調(diào)研報(bào)告競(jìng)爭(zhēng)產(chǎn)品分析領(lǐng)域調(diào)研產(chǎn)出物新產(chǎn)品開發(fā)任務(wù)2023/7/3120UE/UI設(shè)計(jì)流程第一階段：基礎(chǔ)調(diào)研競(jìng)2023/9/1221UE/UI設(shè)計(jì)流程需求功能定義交互設(shè)計(jì)視覺設(shè)計(jì)DEMOUI設(shè)計(jì)（交互/視覺/編碼）實(shí)現(xiàn)PMORTEAMLEADER軟件工程師2023/7/3121UE/UI設(shè)計(jì)流程需求功能定義交互設(shè)計(jì)2023/9/1222UE/UI設(shè)計(jì)流程交互設(shè)計(jì)視覺設(shè)計(jì)CSS/HTML編碼生成產(chǎn)品原型（線框圖）生成產(chǎn)品模型（效果圖）生成產(chǎn)品DEMO（效果圖）實(shí)現(xiàn)產(chǎn)品（最后階段）2023/7/3122UE/UI設(shè)計(jì)流程交互設(shè)計(jì)視覺設(shè)計(jì)CS2023/9/1223UE/UI設(shè)計(jì)流程一、生成產(chǎn)品原型Prototype

（線框圖）原型就是用來讓人改的。它存在的價(jià)值就體現(xiàn)在被修改了幾次，被更新了幾次，以及它的下一步被少改了幾次。2023/7/3123UE/UI設(shè)計(jì)流程一、生成產(chǎn)品原型Pr2023/9/1224UE/UI設(shè)計(jì)流程二、生成產(chǎn)品模型Mock-up

（效果圖）在原型被大家接受之后，就該關(guān)心產(chǎn)品長(zhǎng)得好不好看了。我們以“模型”這個(gè)詞來統(tǒng)稱該步驟的交付物。和原型相比，它關(guān)注于產(chǎn)品的視覺設(shè)計(jì)，包括色彩、風(fēng)格、圖標(biāo)、插圖等等。2023/7/3124UE/UI設(shè)計(jì)流程二、生成產(chǎn)品模型Mo2023/9/1225UE/UI設(shè)計(jì)流程三、生成HTML/CSS頁面Demo就是按照原型和模型用HTML(XHTML)/CSS/JavaScript等等前端技術(shù)實(shí)現(xiàn)出來，以便后端的開發(fā)工程師可以接手編碼。到此UI部分基本完成，不知道大家對(duì)此流程有什么看法。不足之外還請(qǐng)大家糾正。一起討論，把UI工作流程做好。當(dāng)然，如有條件，最好能參于下前期調(diào)研，為能更好的理解用戶需求，提升用戶體驗(yàn)。202