正文

ui工作流程（ui的工作流程應(yīng)該怎么去講）

發(fā)布時(shí)間：2023-04-28 00:48:41 稿源：創(chuàng)意嶺閱讀： 1315

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui工作流程的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國(guó)，設(shè)計(jì)相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043，或微信：1454722008

本文目錄:

1、ui設(shè)計(jì)師的工作流程
2、UI設(shè)計(jì)的全工作流程是怎樣的？
3、UI設(shè)計(jì)師的工作流程
4、UI 設(shè)計(jì)的整個(gè)工作流程是怎樣的

ui工作流程（ui的工作流程應(yīng)該怎么去講）

一、ui設(shè)計(jì)師的工作流程

UI設(shè)計(jì)師必備知識(shí)：大公司設(shè)計(jì)工作流程規(guī)范，啥也不懂進(jìn)啥公司？

1、在設(shè)計(jì)之前，首先需要產(chǎn)品經(jīng)理確定好客戶或者老板的需求，沒有產(chǎn)品需求，就沒有互聯(lián)網(wǎng)開發(fā)，沒有需求，我做產(chǎn)品也就沒有意義了。

比如說：我們?cè)O(shè)定一個(gè)需求。畢業(yè)生都需要找工作，我們需要找公司，但是沒有那么多時(shí)間一家家的去詢問要不要人，我們需要投簡(jiǎn)歷，這個(gè)時(shí)候就需要網(wǎng)站，需要APP，像智聯(lián)、58等等熱門。

有需求，自然會(huì)有交易。這個(gè)時(shí)候產(chǎn)品經(jīng)理需要了解這個(gè)APP需要具備哪些功能，最好是能夠進(jìn)行及時(shí)采訪，能夠切實(shí)地了解到真實(shí)需求：比如我找工作，需要公司的規(guī)模，是不是真實(shí)，薪資構(gòu)架等等，這些需求都需要儲(chǔ)存起來。

了解到真實(shí)需求，才有了我們的產(chǎn)品開發(fā)。

2、確定需求之后，產(chǎn)品經(jīng)理會(huì)做具體的說明，讓交互、UI、開發(fā)、測(cè)試明確產(chǎn)品需求，明確項(xiàng)目的具體細(xì)節(jié)。

這個(gè)階段里面是最關(guān)鍵的，涉及到需求與產(chǎn)品的對(duì)接。PRD文檔和線框原型圖一般情況都是在這個(gè)環(huán)節(jié)內(nèi)明確的。

當(dāng)然也會(huì)有特殊情況，比如某寶，他的流暢是交互明確需求——低保真原型——派PRD，應(yīng)該是這個(gè)流程，出現(xiàn)差錯(cuò)，請(qǐng)輕噴。

這里面需要注意的是：PRD文檔，線框原型圖出來了之后，設(shè)計(jì)師才開工，不然也是反復(fù)修改。

3、設(shè)計(jì)組內(nèi)部會(huì)議、界面風(fēng)格確定，

這個(gè)時(shí)候需要確定一個(gè)設(shè)計(jì)負(fù)責(zé)人。設(shè)計(jì)負(fù)責(zé)人會(huì)給同事做具體的工作安排，線框圖標(biāo)、版式設(shè)計(jì)等都有具體的分配。

后面就開始出稿，稿子出了之后，需要確定那個(gè)風(fēng)格的效果更好。

判定結(jié)果的標(biāo)準(zhǔn)還是客戶的需求。

重要的事情說三遍：需求、需求、需求！

4、分工已經(jīng)明確，進(jìn)行具體設(shè)計(jì)工作

5、標(biāo)注圖、效果圖、切圖

這個(gè)不需要多講，大家都明白。

這個(gè)步驟，產(chǎn)品經(jīng)理會(huì)進(jìn)行把關(guān)。

6、開發(fā)完成，進(jìn)行最后的測(cè)試

測(cè)試工程師會(huì)對(duì)開發(fā)出來的產(chǎn)品進(jìn)行測(cè)試，看看有沒有疏漏，有沒有錯(cuò)誤，當(dāng)測(cè)試和調(diào)試完成，上線，就完成了整個(gè)開發(fā)的流程。

二、UI設(shè)計(jì)的全工作流程是怎樣的？

作為一個(gè)專業(yè)UI設(shè)計(jì)師，不僅僅要了解整個(gè)產(chǎn)品在UI界面設(shè)計(jì)，交互設(shè)計(jì)中的工作流程，更需要了解整個(gè)產(chǎn)品從需求提出到產(chǎn)品上線的整個(gè)工作流程。

以下是互聯(lián)網(wǎng)產(chǎn)品各部門的工作分配及流程：

從圖中可以看到，一個(gè)互聯(lián)網(wǎng)產(chǎn)品從策劃到最后的上線營(yíng)銷，都需要由不同的部門分擔(dān)其責(zé)，而每個(gè)部門中，根據(jù)崗位的劃分，在細(xì)分到每個(gè)工種上來，所以一個(gè)互聯(lián)網(wǎng)產(chǎn)品的開發(fā)流程，并不是單個(gè)的人，或者個(gè)別的部門可以實(shí)現(xiàn)完成的，它是一個(gè)完整的團(tuán)隊(duì)通力合作的產(chǎn)物。部門與部門，崗位與崗位相互協(xié)作配合，才會(huì)出色高效的完成項(xiàng)目。

一般互聯(lián)網(wǎng)公司會(huì)有幾個(gè)部門劃分：

1、產(chǎn)品部門（產(chǎn)品經(jīng)理、產(chǎn)品專員）

2、設(shè)計(jì)部門（GUI設(shè)計(jì)師、交互設(shè)計(jì)師、前端工程師）

3、研發(fā)部門（構(gòu)架工程師、程序開發(fā)）

4、測(cè)試部門（測(cè)試專員）

5、市場(chǎng)部門（銷售、渠道、公關(guān)、品牌）

6、運(yùn)營(yíng)部門（客服、運(yùn)維）

各部門的工作職責(zé)如下：

產(chǎn)品部門：負(fù)責(zé)產(chǎn)品調(diào)研，產(chǎn)品方案策劃，產(chǎn)品原型圖設(shè)計(jì)，和技術(shù)開發(fā)對(duì)接，后續(xù)可能和運(yùn)營(yíng)部門對(duì)接。

設(shè)計(jì)部門：負(fù)責(zé)產(chǎn)品視覺設(shè)計(jì)，交互設(shè)計(jì)，前端布局。有一些公司會(huì)把前端這一塊劃分到開發(fā)部門，理由是前端的工作和程序開發(fā)一樣，都是碼代碼，設(shè)計(jì)部門就是單純的只管視覺設(shè)計(jì)方面。但是這種說法其實(shí)不太正確，前端的代碼實(shí)現(xiàn)和后臺(tái)的程序開發(fā)，雖然都是碼代碼，但是運(yùn)用的技術(shù)是不一樣的，實(shí)現(xiàn)的功能和效果也是不相同的，所以前端工程師劃分到設(shè)計(jì)部門會(huì)更合理一些。

研發(fā)部門：產(chǎn)品構(gòu)架設(shè)計(jì)，數(shù)據(jù)庫(kù)設(shè)計(jì)，前后臺(tái)編碼設(shè)計(jì)，后期的運(yùn)維，網(wǎng)絡(luò)安全。

測(cè)試部門：測(cè)試程序中的bug，編寫測(cè)試計(jì)劃、測(cè)試用例及測(cè)試報(bào)告等文檔，優(yōu)化流程。

市場(chǎng)部門：產(chǎn)品企劃策略，促銷活動(dòng)的策劃及組織，品牌規(guī)劃和品牌的形象建設(shè)，市場(chǎng)廣告推廣活動(dòng)和公關(guān)活動(dòng)。

運(yùn)營(yíng)部門： SEO/SEM優(yōu)化推廣，平臺(tái)活動(dòng)策劃（線上線下），廣告投放，客戶關(guān)系管理，數(shù)據(jù)分析。

設(shè)計(jì)部門的崗位劃分通常有UI設(shè)計(jì)師、交互設(shè)計(jì)師、前端工程師，小型公司崗位劃分不完善，會(huì)把交互設(shè)計(jì)師的工作（交互流程、交互線框、交互動(dòng)效）交由產(chǎn)品人員來完成，以下梳理出UI設(shè)計(jì)師參與和需完成的流程：

一、需求梳理、分析

發(fā)生在產(chǎn)品開發(fā)前，以APP產(chǎn)品為例，會(huì)對(duì)市場(chǎng)和用戶進(jìn)行調(diào)研分析：市場(chǎng)定位（用戶定位、產(chǎn)品定位、技術(shù)定位），市場(chǎng)需求分析（目標(biāo)客戶群分析、競(jìng)爭(zhēng)對(duì)手分析）。在前期的產(chǎn)品需求分析會(huì)議中，UI設(shè)計(jì)、技術(shù)工程師都會(huì)參與。此過程UI設(shè)計(jì)師了解清晰的用戶定位，產(chǎn)品定位，競(jìng)爭(zhēng)對(duì)手分析，為后期的素材收集和風(fēng)格把控做準(zhǔn)備。

在這個(gè)過程中會(huì)根據(jù)提煉的真實(shí)用戶需求來確定產(chǎn)品需求，產(chǎn)品經(jīng)理將根據(jù)溝通中的相關(guān)資料的word、ppt、jpg等等東西翻譯成邏輯語言，最簡(jiǎn)單的就是產(chǎn)出一張產(chǎn)品功能腦圖或者一份功能列表。

產(chǎn)品功能腦圖：

產(chǎn)品功能列表：

大家開始討論用戶體驗(yàn)流程，在白板上邊畫流程邊添加粗略的UI元素。之后產(chǎn)品經(jīng)理會(huì)在紙上做手繪版線框圖。這階段產(chǎn)品經(jīng)理、UI設(shè)計(jì)師、包括技術(shù)工程師會(huì)一同作大量的討論，而且主要討論的是流程和主要功能，因此手畫故事版最快最方便并易于修改的。此環(huán)節(jié)要敲定userflow，用戶流程及其中的關(guān)鍵步驟，每一步驟都是一個(gè)主要界面。之后產(chǎn)品經(jīng)理繪制紙質(zhì)版低保真交互原型圖（可借用專業(yè)的模板本和工具）

二、關(guān)鍵界面線框圖（可不帶交互功能）

初步產(chǎn)品功能需求梳理清楚之后，產(chǎn)品經(jīng)理持續(xù)跟進(jìn)，反復(fù)溝通，在確定的用戶流程中，選出幾個(gè)關(guān)鍵的，有代表性的步驟，做1:1細(xì)化線框圖。此環(huán)節(jié)要確定關(guān)鍵界面里的UI元素和布局，以及全局的布局排版風(fēng)格。

三、關(guān)鍵界面視覺設(shè)計(jì)

此環(huán)節(jié)UI設(shè)計(jì)師會(huì)做關(guān)鍵界面的整體視覺設(shè)計(jì)，嘗試不同風(fēng)格、顏色的搭配，UI元素的運(yùn)用，最終確定產(chǎn)品的視覺設(shè)計(jì)風(fēng)格。

四、全部界面線框圖（帶交互功能）

產(chǎn)品經(jīng)理完成1:1帶交互和流程的全部界面線框圖設(shè)計(jì)并確認(rèn)。

界面線框圖（為交互功能添加釋義和說明。）

線框流程圖

五、全部界面視覺設(shè)計(jì)

UI設(shè)計(jì)師輸出全部界面的視覺設(shè)計(jì)圖，并確認(rèn)。

六、界面標(biāo)注、切圖

1、在確認(rèn)全部界面視覺稿以后，首先對(duì)每個(gè)界面進(jìn)行標(biāo)注，標(biāo)注圖移交前端工程師。

標(biāo)注圖（像素大廚、藍(lán)湖等軟件）

2、界面切圖，移交前端工程師

切圖文件夾

切圖文件

至此，UI的工作流程才算完成，但是現(xiàn)實(shí)項(xiàng)目中，很多環(huán)節(jié)是一個(gè)交替迭代的過程，需要不停地修改和優(yōu)化，包括整個(gè)流程進(jìn)入到開發(fā)以后，也會(huì)需要UI設(shè)計(jì)師協(xié)同調(diào)整，所以UI設(shè)計(jì)師的工作，不單單是只完成單純的界面視覺設(shè)計(jì)，前面包括用戶定位，線框繪制，流程梳理，交互實(shí)現(xiàn)，后面包括前端布局，很多環(huán)節(jié)，UI設(shè)計(jì)師都必須參與進(jìn)來，只有多角度地了解項(xiàng)目，了解各崗位的工作流程，才能做出符合市場(chǎng)需求，符合用戶需求的產(chǎn)品。

三、UI設(shè)計(jì)師的工作流程

總體上一個(gè)合格的UI設(shè)計(jì)師的基本工作流程分為需求階段、分析設(shè)計(jì)階段、調(diào)研驗(yàn)證階段、方案改進(jìn)階段、用戶驗(yàn)證反饋階段五大基本流程。軟件產(chǎn)品依然屬于工業(yè)產(chǎn)品的范疇。依然離不開3W的考慮（Who、where、why）也就是使用者，使用環(huán)境，使用方式的需求分析。所以在設(shè)計(jì)一個(gè)軟件產(chǎn)品之前我們應(yīng)該明確什么人用(用戶的年齡、性別、愛好、收入、教育程度等)。什么地方用（在辦公室/家庭/廠房車間/公共場(chǎng)所）。如何用（鼠標(biāo)鍵盤/ 遙控器/觸摸屏）。上面的任何一個(gè)元素改變結(jié)果都會(huì)有相應(yīng)的改變。

除此之外在需求階段同類性質(zhì)的軟件也是我們必須了解的。同類產(chǎn)品比我們提前問世，我們要比他作的更好才有存在的價(jià)值。那么單純的從界面美學(xué)考慮說哪個(gè)好哪個(gè)不好是沒有一個(gè)很客觀的評(píng)價(jià)標(biāo)準(zhǔn)的。我們只能說哪個(gè)更合適，更合適于我們的最終用戶的就是最好的。如何判定最合適于用戶呢，后面我會(huì)介紹用戶調(diào)研。幾套風(fēng)格必須保證在同等的設(shè)計(jì)制作水平上，不能明顯看出差異，這樣才能得到用戶客觀的反饋。

測(cè)試階段開始前我們應(yīng)該對(duì)測(cè)試的具體細(xì)節(jié)進(jìn)行清楚的分析描述。

例如：

數(shù)據(jù)收集方式：廳堂測(cè)試/模擬家居/辦公室。

測(cè)試時(shí)間：X年X月X日X日。

測(cè)試區(qū)域：北京、廣州、天津。

測(cè)試對(duì)象：某軟件界定使用用戶。

主要特征為：

·對(duì)電腦的硬件配置以及相關(guān)的性能指標(biāo)比較了解，電腦應(yīng)用水平較高；

·電腦使用經(jīng)歷一年以上；

·家庭購(gòu)買電腦時(shí)品牌和機(jī)型的主要決策者；

·年齡：X-X歲；

·年齡在X歲以上的被訪者文化程度為大專及以上；

·個(gè)人月收入X以上或家庭月收入X元及以上；

·樣品；

·五套軟件界面；

·樣本量：X個(gè)，實(shí)際完成X個(gè)。

調(diào)研階段需要從以下幾個(gè)問題出發(fā)： ·用戶對(duì)各套方案的第一印象； ·用戶對(duì)各套方案的綜合印象； ·用戶對(duì)各套方案的單獨(dú)評(píng)價(jià)； ·選出最喜歡的； ·選出其次喜歡的； ·對(duì)各方案的色彩，文字，圖形等分別打分； ·結(jié)論出來以后請(qǐng)所有用戶說出最受歡迎方案的優(yōu)缺點(diǎn)。所有這些都需要用圖形表達(dá)出來，直觀科學(xué)。改正以后的方案，我們可以將他推向市場(chǎng)。但是設(shè)計(jì)并沒有結(jié)束。我們還需要用戶反饋，好的設(shè)計(jì)師應(yīng)該在產(chǎn)品上市以后去站柜臺(tái)。零距離接觸最終用戶，看看用戶真正使用時(shí)的感想。為以后的升級(jí)版本積累經(jīng)驗(yàn)資料。

四、UI 設(shè)計(jì)的整個(gè)工作流程是怎樣的

1. 熟悉行業(yè)（熟悉您的軟件所涉及的行業(yè)，以便制作出適合行業(yè)特征的界面風(fēng)格）

2. 了解軟件（了解您軟件的工程進(jìn)度，做出針對(duì)您進(jìn)度的工作計(jì)劃）。

3. 與軟件開發(fā)工程師和市場(chǎng)人員討論界面風(fēng)格（廣泛聽取研發(fā)和市場(chǎng)人員的意見，做出最適合市12.場(chǎng)的軟件）。

4. 人機(jī)分析（對(duì)您的軟件進(jìn)行人機(jī)分析，增強(qiáng)您軟件的易用性）。

5. 做方案（做出設(shè)計(jì)方案，并明確細(xì)節(jié)思想）。

6. 審定方案（與技術(shù)和市場(chǎng)人員一起審定方案，并聽取修改意見）。

7. 修改--審定（將有幾次重復(fù)）

8. 細(xì)化、制作界面（開始制作軟件界面）。

9. 與軟件開發(fā)工程師合作把界面加入到程序中。

10.細(xì)部修改，完成。

11.進(jìn)行軟件包裝盒、光盤盤面、盤套等的設(shè)計(jì)工作。

12.后期跟蹤服務(wù)（在完成項(xiàng)目后，對(duì)您的軟件進(jìn)行跟蹤服務(wù)，即對(duì)您軟件從發(fā)布到推出新版本之 12.間的小規(guī)模修改進(jìn)行調(diào)整，包括對(duì)幫助協(xié)調(diào)文件的制定、DEMO演示等全訪問服務(wù)）。

以上就是關(guān)于ui工作流程相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。