正文

ui設(shè)計(jì)流程是什么（ui設(shè)計(jì)流程是什么樣的）

發(fā)布時(shí)間：2023-04-28 02:42:51 稿源：創(chuàng)意嶺閱讀： 623

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

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

本文目錄:

1、UI設(shè)計(jì)的全工作流程是怎樣的？
2、UI設(shè)計(jì)師的工作流程都有哪些?
3、UI設(shè)計(jì)工作流程&設(shè)計(jì)思路
4、網(wǎng)頁ui設(shè)計(jì)流程

ui設(shè)計(jì)流程是什么（ui設(shè)計(jì)流程是什么樣的）

一、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)品從策劃到最后的上線營銷，都需要由不同的部門分擔(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ùn)維）

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

產(chǎn)品部門：負(fù)責(zé)產(chǎn)品調(diào)研，產(chǎn)品方案策劃，產(chǎn)品原型圖設(shè)計(jì)，和技術(shù)開發(fā)對(duì)接，后續(xù)可能和運(yùn)營部門對(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ù)庫設(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)營部門： 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ì)師的工作流程都有哪些?

1、負(fù)責(zé)用戶界面設(shè)計(jì)，根據(jù)產(chǎn)品原型進(jìn)行具體效果圖設(shè)計(jì)，視覺設(shè)計(jì)（包括主次界面風(fēng)格化，版面布局細(xì)節(jié)處理，icon繪制等）

2、獨(dú)立完成UI相關(guān)制作，能根據(jù)產(chǎn)品的設(shè)計(jì)思路設(shè)計(jì)相應(yīng)配套的UI。

3、參與產(chǎn)品構(gòu)思及軟件界面優(yōu)化，提出對(duì)產(chǎn)品界面規(guī)劃，把握產(chǎn)品最終界面實(shí)現(xiàn)效果。

4、結(jié)合用戶體驗(yàn)，優(yōu)化完善設(shè)計(jì)，制定可行的產(chǎn)品品質(zhì)提升方案。

5、維護(hù)現(xiàn)有的應(yīng)用產(chǎn)品，不定期收集和分析用戶對(duì)于GUI的需求等。

下面給你整理了1個(gè)來自知名大互聯(lián)網(wǎng)企業(yè)招聘信息中的崗位工作職責(zé)：

1、負(fù)責(zé)公司移動(dòng)端UI界面設(shè)計(jì)，為公司新產(chǎn)品與新功能提供創(chuàng)意及設(shè)計(jì)方案。

2、參與設(shè)計(jì)討論，和開發(fā)團(tuán)隊(duì)共同創(chuàng)建用戶界面，跟蹤設(shè)計(jì)效果，提出設(shè)計(jì)優(yōu)化方案。

3、參與移動(dòng)產(chǎn)品設(shè)計(jì)體驗(yàn)、流程的制定和規(guī)范，以及有參與過上線項(xiàng)目設(shè)計(jì)實(shí)戰(zhàn)經(jīng)歷優(yōu)先。

4、熟悉品牌文化與產(chǎn)品調(diào)性，具備豐富的平面設(shè)計(jì)和廣告創(chuàng)意設(shè)計(jì)能力。

5、熟練運(yùn)用常用設(shè)計(jì)軟件，具備一定插畫繪制能力，對(duì)后期處理及動(dòng)效設(shè)計(jì)有一定了解。

6、設(shè)計(jì)思路清晰，具有豐富的創(chuàng)新思維、想象力和較強(qiáng)的視覺感知能力。

7、具備良好的溝通協(xié)作，并且有高執(zhí)行能力和抗壓能力。

8、熟悉iOS和Android兩大平臺(tái)的設(shè)計(jì)規(guī)范，具有一定的視覺審美能力和原創(chuàng)設(shè)計(jì)能力。

9、熟練各種UI界面設(shè)計(jì)，圖標(biāo)設(shè)計(jì)，動(dòng)效設(shè)計(jì)，交互設(shè)計(jì)，banner海報(bào)設(shè)計(jì)，APP設(shè)計(jì)，UE設(shè)計(jì)，小程序設(shè)計(jì)，H5設(shè)計(jì)等。

綜上所述總結(jié)，UI設(shè)計(jì)師主要負(fù)責(zé)美工設(shè)計(jì)、應(yīng)用界面設(shè)計(jì)以及界面反饋測(cè)試等方面。

三、UI設(shè)計(jì)工作流程&設(shè)計(jì)思路

UI設(shè)計(jì)師的工作內(nèi)容和流程是什么呢？

1、根據(jù)原型或交互稿設(shè)計(jì)UI界面；

2、在手機(jī)上預(yù)覽設(shè)計(jì)稿；（導(dǎo)出圖片/PDF）

3、設(shè)計(jì)稿的溝通修改和確認(rèn)環(huán)節(jié)；

4、根據(jù)設(shè)計(jì)稿輸出高保真的demo；（AE）

5、設(shè)計(jì)稿的標(biāo)注；

6、切圖；

7、開發(fā)完成后的視覺走查；

一個(gè)好的設(shè)計(jì)絕不是憑空想象，而是依靠強(qiáng)有力的設(shè)計(jì)理論。

1、基于對(duì)產(chǎn)品的理解：所處行業(yè)、面向人群、發(fā)展階段，背景、調(diào)性、品牌理念等；

2、對(duì)流行趨勢(shì)的高度敏感：分析優(yōu)秀競(jìng)品，結(jié)合自身特點(diǎn)；

3、設(shè)計(jì)能力的體現(xiàn)：圖標(biāo)、配色、排版樣式、用戶體驗(yàn)的改進(jìn)；

四、網(wǎng)頁ui設(shè)計(jì)流程

1.產(chǎn)品需求分析

當(dāng)產(chǎn)品經(jīng)理給出一個(gè)產(chǎn)品的需求，我們首先需要對(duì)這個(gè)產(chǎn)品進(jìn)行一個(gè)大致的分析，分析這個(gè)產(chǎn)品的方向，定義產(chǎn)品的用戶群體及特征；

2.深層次的用戶體驗(yàn)研究與分析

這個(gè)時(shí)候我們就要對(duì)已定義的目標(biāo)用戶群體及特征進(jìn)行深層次的剖析，包括目標(biāo)用戶群體的年齡，性別及目標(biāo)戶群體的一些情感習(xí)慣，心理特征等，這樣我們就可以有針對(duì)的對(duì)這個(gè)產(chǎn)品構(gòu)想設(shè)計(jì)出一個(gè)大概的色系搭配及元素控件設(shè)計(jì)；

3.初稿設(shè)計(jì)

這個(gè)時(shí)候我們就可以把產(chǎn)品經(jīng)理的原型需求和自己對(duì)產(chǎn)品的體驗(yàn)研究分析結(jié)合起來設(shè)計(jì)初稿。（大概的色系搭配，框架布局，元素控件，圖標(biāo)ICON等設(shè)計(jì)都可以在這一步呈現(xiàn)出來）

4.視覺規(guī)范設(shè)計(jì)及細(xì)節(jié)優(yōu)化設(shè)計(jì)

初稿設(shè)計(jì)完成了，產(chǎn)品大概的樣子都出來了，接著我們就是要做好視覺規(guī)范設(shè)計(jì)及細(xì)節(jié)優(yōu)化設(shè)計(jì)。視覺規(guī)范設(shè)計(jì)就是要對(duì)整個(gè)產(chǎn)品的顏色，字體，字號(hào)，元素控件，圖標(biāo)ICON，間距及交互效果做個(gè)統(tǒng)一的規(guī)范，這樣才可以做出一個(gè)成熟的產(chǎn)品，對(duì)前端制作也是有很大的好處的。

接著就是細(xì)節(jié)的優(yōu)化設(shè)計(jì)了，這個(gè)我們就要細(xì)心的做好細(xì)節(jié)上的設(shè)計(jì)，比如一些對(duì)齊，間隙，圖標(biāo)虛邊，線條像素，模塊陰影等等；

5.跟進(jìn)前端工程師實(shí)現(xiàn)設(shè)計(jì)效果

設(shè)計(jì)稿完成了接下來就是前端工程師制作了，這時(shí)我們就不要以為我們的工作完成了，我們要繼續(xù)跟進(jìn)前端工程師實(shí)現(xiàn)還原我們的設(shè)計(jì)效果，有必要我們可以設(shè)計(jì)出一份交互圖出來，這樣便于他們更好的更準(zhǔn)確的更快捷的實(shí)現(xiàn)我們的設(shè)計(jì)；

6.產(chǎn)品體驗(yàn)

當(dāng)前端制作好頁面之后，我們就可以對(duì)整個(gè)產(chǎn)品做一個(gè)線上的體驗(yàn)，界面體驗(yàn)，交互體驗(yàn)，當(dāng)遇到一些體驗(yàn)不好的地方我們可以直接和產(chǎn)品還有前端工程師進(jìn)行溝通，共同來商討解決這些問題；

7.產(chǎn)品的持續(xù)用戶體驗(yàn)跟進(jìn)研究與優(yōu)化

產(chǎn)品上線之后，我們要持續(xù)關(guān)注與跟進(jìn)它，進(jìn)行一些用戶體驗(yàn)數(shù)據(jù)的收集，對(duì)于界面上和交互體驗(yàn)上的一些不是很理想的地方做一個(gè)收集，用在下期的改版上；

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