軟件ui設(shè)計(jì).ppt

1、2020/8/23,UE/UI設(shè)計(jì)流程,R.D軟件UI設(shè)計(jì)流程,王蘭杰,浙江百世物流科技有限公司 Wang lanjie Email: QQ:22998215 3517965 Website:,2020/8/23,2,UE/UI設(shè)計(jì)流程,競(jìng)爭(zhēng)產(chǎn)品分析,領(lǐng)域調(diào)研,產(chǎn)出物,新產(chǎn)品開(kāi)發(fā)任務(wù),產(chǎn)品定位,用戶分析,產(chǎn)品概述,功能需求規(guī)格整理,產(chǎn)出物,第一次Check,是/否通過(guò)？,概念模型分析,功能結(jié)構(gòu)圖,使用場(chǎng)景分析,交互流程分析,產(chǎn)出物,第一次Check,是/否通過(guò)？,信息架構(gòu)和界面原型,要點(diǎn)說(shuō)明,產(chǎn)出物,第一次Check,是/否通過(guò)？,詳細(xì)設(shè)計(jì),設(shè)計(jì)和邏輯說(shuō)明,產(chǎn)出物,第四次Check,是/否通過(guò)

2、？,完成設(shè)計(jì)維護(hù),進(jìn)入設(shè)計(jì)維護(hù),End,BASIC RESEARCH,PRODUCT ANALYSE,INTERACTION DESIGN,PROTOTYPE DESIGN,DETAILED DESIGN,USER,六個(gè)階段，每個(gè)階段又有關(guān)鍵的工作內(nèi)容和要求。,2020/8/23,3,UE/UI設(shè)計(jì)流程,第二階段：產(chǎn)品分析 產(chǎn)品定位從軟件提供者的角度分析產(chǎn)品推出的意義和重點(diǎn)關(guān)注的方面，實(shí)際考量、豐滿決策層的idea，明確列出產(chǎn)品定位，通過(guò)討論修繕取得決策層的認(rèn)可； 用戶分析結(jié)合競(jìng)爭(zhēng)產(chǎn)品的分析資料，采用定性分析的方法，獲得對(duì)產(chǎn)品目標(biāo)用戶在概念層面的認(rèn)識(shí)； 產(chǎn)品概述以軟件提供的身份，以最簡(jiǎn)短的文字

3、，向用戶介紹產(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,是/否通過(guò)？,2020/8/23,4,UE/UI設(shè)計(jì)流程,第三階段：交互設(shè)計(jì)（功能結(jié)構(gòu)和交互流程設(shè)計(jì)） 產(chǎn)品概念模型分析 從產(chǎn)品功能邏輯入手，結(jié)合對(duì)常見(jiàn)軟件的經(jīng)驗(yàn)積累和競(jìng)爭(zhēng)產(chǎn)品的認(rèn)識(shí)，加上對(duì)用戶的理解，為產(chǎn)品設(shè)計(jì)一個(gè)

4、盡量接近用戶對(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)鍵操作過(guò)程（即鼠標(biāo)點(diǎn)擊步驟和屏幕引導(dǎo)路徑）； 產(chǎn)出物：產(chǎn)品設(shè)計(jì)文檔的交互設(shè)計(jì)部分,概念模型分析,功能結(jié)構(gòu)圖,使用場(chǎng)景分析,交互流程分析,產(chǎn)出物,第一次Check,是/否通過(guò)？,2020/8/23,5,UE/UI設(shè)計(jì)流程,第四階段：原型設(shè)計(jì)（信息架構(gòu)和界面原型設(shè)計(jì)） 信息架構(gòu)和界面原型設(shè)計(jì)設(shè)計(jì)產(chǎn)品界面中應(yīng)該包含的

5、控件數(shù)量和類(lèi)型、控件之間的邏輯和組織關(guān)系，以支持用戶對(duì)控件或控件組所代表的功能的理解，對(duì)用戶操作的明確引導(dǎo)；所有界面設(shè)計(jì)成為一套完整的可模擬的產(chǎn)品原型； 設(shè)計(jì)要點(diǎn)說(shuō)明對(duì)界面設(shè)計(jì)的重點(diǎn)添加說(shuō)明，幫助涉眾對(duì)設(shè)計(jì)的理解； 產(chǎn)出物：產(chǎn)品設(shè)計(jì)文檔的原型設(shè)計(jì)部分,信息架構(gòu)和界面原型,要點(diǎn)說(shuō)明,產(chǎn)出物,第一次Check,是/否通過(guò)？,2020/8/23,6,UE/UI設(shè)計(jì)流程,第五階段：詳細(xì)設(shè)計(jì)（詳細(xì)設(shè)計(jì)和偽代碼編寫(xiě)） 詳細(xì)設(shè)計(jì)完善設(shè)計(jì)細(xì)節(jié)、交互文本和信息設(shè)計(jì)（Message box）； 設(shè)計(jì)和邏輯說(shuō)明對(duì)界面控件/控件組/窗口的屬性和行為進(jìn)行標(biāo)準(zhǔn)化定義，梳理完整的交互邏輯，用狀態(tài)遷移圖或偽代碼形式表示； 產(chǎn)

6、出物：產(chǎn)品設(shè)計(jì)文檔的詳細(xì)設(shè)計(jì)部分 第六階段：設(shè)計(jì)維護(hù)（研發(fā)跟蹤和設(shè)計(jì)維護(hù)） 語(yǔ)言文檔整理設(shè)計(jì)通過(guò)評(píng)審之后，把產(chǎn)品中所有的交互文本整理成excel文檔，預(yù)備研發(fā)工作； 研發(fā)跟蹤維護(hù)進(jìn)入研發(fā)階段后負(fù)責(zé)為研發(fā)工程師解釋設(shè)計(jì)方案、問(wèn)題修改、文檔完善、Bug跟蹤等； 產(chǎn)出物：產(chǎn)品語(yǔ)言文檔，設(shè)計(jì)調(diào)整維護(hù),詳細(xì)設(shè)計(jì),設(shè)計(jì)和邏輯說(shuō)明,產(chǎn)出物,第四次Check,是/否通過(guò)？,完成設(shè)計(jì)維護(hù),進(jìn)入設(shè)計(jì)維護(hù),End,2020/8/23,7,UE/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)

7、產(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)品開(kāi)發(fā)任務(wù),2020/8/23,8,UE/UI設(shè)計(jì)流程,這是一個(gè)著名的模型，把UCD過(guò)程中的每個(gè)工作步驟和內(nèi)容都完整而流暢的概括進(jìn)來(lái)。很大程度上幫助我理清了UCD相關(guān)的混亂頭緒。以這個(gè)模型為基礎(chǔ)，我整理了一個(gè)比較可行的UCD流程。,2020/8/23,9,UE/UI設(shè)計(jì)流程,需求,功能定義

8、,交互設(shè)計(jì),視覺(jué)設(shè)計(jì),DEMO,UI設(shè)計(jì)（交互/視覺(jué)/編碼）,實(shí)現(xiàn),PM OR TEAMLEADER,軟件工程師,2020/8/23,10,第于第一步的用戶調(diào)研問(wèn)題，當(dāng)然迫于條件的限制，我們不可能有機(jī)會(huì)去做用戶研究相關(guān)的工作，通常是從競(jìng)爭(zhēng)對(duì)手的分析中來(lái)獲得關(guān)于用戶的理解和靈感。用Jesse James Garrett的話說(shuō)，在相同領(lǐng)域做相似的事情的研發(fā)團(tuán)隊(duì)，所服務(wù)的用戶必定具有某種程度的相似性。按照產(chǎn)品分析和設(shè)計(jì)套路倒推，解剖優(yōu)秀產(chǎn)品的設(shè)計(jì)策略，可能是快速建立用戶認(rèn)識(shí)的竅門(mén)。 可能有人覺(jué)得理解用戶是市場(chǎng)的事，顯然這是片面的。其實(shí)理解用戶能夠在以用戶為中心的設(shè)計(jì)過(guò)程中幫助設(shè)計(jì)決策，如果沒(méi)有這個(gè)認(rèn)

9、識(shí)，很可能會(huì)在后面的設(shè)計(jì)決策和討論中陷入個(gè)人英雄主義的表演和政治博弈之中。當(dāng)然，尋找用戶還能使我們收獲更多的領(lǐng)域知識(shí)，整理對(duì)手的優(yōu)缺點(diǎn)，并能在后續(xù)的概念設(shè)計(jì)、交互設(shè)計(jì)和原型設(shè)計(jì)中提供極大的參考價(jià)值。,2020/8/23,11,UE/UI設(shè)計(jì)流程,交互設(shè)計(jì),視覺(jué)設(shè)計(jì),CSS/HTML,編碼,生成產(chǎn)品原型（線框圖）,生成產(chǎn)品模型（效果圖）,生成產(chǎn)品DEMO（效果圖）,實(shí)現(xiàn)產(chǎn)品（最后階段）,2020/8/23,12,UE/UI設(shè)計(jì)流程,一、生成產(chǎn)品原型Prototype （線框圖）,原型就是用來(lái)讓人改的。它存在的價(jià)值就體現(xiàn)在被修改了幾次，被更新了幾次，以及它的下一步被少改了幾次。,2020/8/23

10、,13,UE/UI設(shè)計(jì)流程,二、生成產(chǎn)品模型Mock-up （效果圖）,在原型被大家接受之后，就該關(guān)心產(chǎn)品長(zhǎng)得好不好看了。 我們以“模型”這個(gè)詞來(lái)統(tǒng)稱該步驟的交付物。和原型相比，它關(guān)注于產(chǎn)品的視覺(jué)設(shè)計(jì)，包括色彩、風(fēng)格、圖標(biāo)、插圖等等。,2020/8/23,14,UE/UI設(shè)計(jì)流程,三、生成HTML/CSS頁(yè)面,Demo就是按照原型和模型用HTML(XHTML)/CSS/JavaScript等等前端技術(shù)實(shí)現(xiàn)出來(lái)，以便后端的開(kāi)發(fā)工程師可以接手編碼。,到此UI部分基本完成，不知道大家對(duì)此流程有什么看法。不足之外還請(qǐng)大家糾正。一起討論，把UI工作流程做好。 當(dāng)然，如有條件，最好能參于下前期調(diào)研，為能更好的理解用戶需求，提升用戶體驗(yàn)。,2020/8/23,15,這個(gè)流程不是一個(gè)快速開(kāi)發(fā)的流程，雖然在用戶分析中投機(jī)取巧節(jié)省了一點(diǎn)時(shí)間，但是在交互設(shè)計(jì)階段需要消耗相當(dāng)?shù)呐蛣?chuàng)