ui設(shè)計(jì)工作流程（ui設(shè)計(jì)工作流程怎么寫(xiě)）

大家好！今天讓小編來(lái)大家介紹下關(guān)于ui設(shè)計(jì)工作流程的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶(hù)遍布全球各地，相關(guān)業(yè)務(wù)請(qǐng)撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

• 1、UI設(shè)計(jì)整個(gè)過(guò)程一般分為哪些步驟？

• 2、UI設(shè)計(jì)師的工作內(nèi)容包括哪些？

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

• 4、ui設(shè)計(jì)師的工作內(nèi)容流程有哪些？都是怎么樣的？

一、UI設(shè)計(jì)整個(gè)過(guò)程一般分為哪些步驟？

嘿設(shè)匯app上的回答很全面，分享給你，希望對(duì)你有幫助。

一、前期工作

1.畫(huà)。草圖記錄理念。用筆記本來(lái)收集創(chuàng)意，不時(shí)的翻翻可以根據(jù)一些有趣的舊點(diǎn)子想一些新玩意兒。

2. 收集圖片。方法有好多種，我習(xí)慣Dropbox文件夾分類(lèi)（例如，我會(huì)分成后臺(tái)界面設(shè)計(jì)、iOS設(shè)計(jì)、插畫(huà)設(shè)計(jì)等等）這些圖片，有新項(xiàng)目時(shí)可以用來(lái)尋找靈感。

3. 情緒板和準(zhǔn)備工作。Dribbble，Behance，嘿設(shè)匯、Pttrns，Pinterest。我總會(huì)準(zhǔn)備4個(gè)文件夾——PSD，屏，資源，靈感。把和項(xiàng)目相關(guān)的東西全分類(lèi)到文件夾里。

二、開(kāi)始著手設(shè)計(jì)

4. 不必在乎線框圖的質(zhì)量。 線框圖的作用是幫助架構(gòu)層級(jí)，讓彼此更好的理解目的，而不是最終結(jié)果。設(shè)計(jì)師必須懂得去“敏捷”設(shè)計(jì)，如果真的太在意線框圖的細(xì)節(jié)，那么整個(gè)設(shè)計(jì)流程會(huì)拉長(zhǎng)。

5. PSD - 大尺寸畫(huà)布。我一般會(huì)創(chuàng)建8000*5000的畫(huà)布，不是用來(lái)畫(huà)出整個(gè)應(yīng)用的UI套件，而是用來(lái)記錄元素在不同階段的不同狀態(tài)——也就是流程。設(shè)計(jì)復(fù)用很方便，開(kāi)發(fā)看到這種東西也會(huì)工作的更快。

6. 所有屏都放入一個(gè)PSD中.整體的對(duì)比效果會(huì)更好，也更容易讓他人理解你的設(shè)計(jì)理念。

元素的復(fù)用也非常方便，只需要復(fù)制一下其他屏的圖層/圖層組，修改一下背景或者幾個(gè)圖標(biāo)就成了。

7. 整理、規(guī)范圖層和圖層組

我是一個(gè)崇尚整齊的人，因此我的PSD結(jié)構(gòu)非常的有序。我個(gè)人的規(guī)則是，如果超過(guò)8個(gè)圖層，那么就創(chuàng)建一個(gè)圖層組。

8. 和朋友溝通

我非常重視那些能夠給出專(zhuān)業(yè)性反饋意見(jiàn)的人。留意他們的反應(yīng)和初次看到你設(shè)計(jì)時(shí)的想法，這未嘗不是一種用戶(hù)測(cè)試。而且多聆聽(tīng)別人的意見(jiàn)，能夠讓你從不同的角度看待問(wèn)題。9.圖示

當(dāng)所有屏的設(shè)計(jì)都裝入到一個(gè)PSD中后做一點(diǎn)圖示，用來(lái)暗示交互流程，我覺(jué)得這算是一種早期原型設(shè)計(jì)吧，與此同時(shí)，還能充分感受到視覺(jué)設(shè)計(jì)的細(xì)節(jié)。

三、后期工作——視覺(jué)規(guī)范

完成了設(shè)計(jì)工作后，要做的事情就是出一份視覺(jué)規(guī)范，然后檢查一下整體的視覺(jué)層級(jí)。我個(gè)人認(rèn)為，無(wú)論是小型項(xiàng)目還是大型項(xiàng)目，視覺(jué)規(guī)范都有其存在的必要性。無(wú)論是對(duì)你自己，還是對(duì)于同事，都能起到很好的規(guī)范作用，避免不一致的設(shè)計(jì)。

10. 配色表

扁平化的要領(lǐng)之一是配色精簡(jiǎn)。也方便了我們展現(xiàn)配色表。

11. 字體表

12. 要完善的記錄Logo使用的字體，文本使用的字體，標(biāo)題使用的字體等等，這對(duì)于開(kāi)發(fā)會(huì)大有裨益。個(gè)人復(fù)查作品時(shí)也會(huì)很有幫助。

12. UI 套件

UI套件非常重要，尤其對(duì)于工作對(duì)接來(lái)說(shuō)，能夠保持視覺(jué)高度的一致性。前端也非常需要這東西。做好了之后丟給前端，他要問(wèn)你，你就說(shuō)這東西在UI套件中，他立馬就能明白了。

這一條非常重要，關(guān)系到整體的視覺(jué)一致性。

二、UI設(shè)計(jì)師的工作內(nèi)容包括哪些？

UI設(shè)計(jì)的主要工作內(nèi)容分為平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、電商設(shè)計(jì)、APP界面設(shè)計(jì)等等。

一、平面設(shè)計(jì)又分為線上和線下設(shè)計(jì)，線上的平面設(shè)計(jì)一般指的是線上宣傳用的海報(bào)、廣告圖等。線下設(shè)計(jì)的種類(lèi)則很多，除了線下宣傳用的海報(bào)以外，還有宣傳冊(cè)、宣傳折頁(yè)、單頁(yè)、以及展架等等。這些工作雖然比較基礎(chǔ)，但也是不可或缺的。學(xué)習(xí)平面UI設(shè)計(jì)可以參考這里。

二、網(wǎng)頁(yè)設(shè)計(jì)就是網(wǎng)站的頁(yè)面設(shè)計(jì)了，也包括一些網(wǎng)站的整站設(shè)計(jì)，其中不僅有一些設(shè)計(jì)樣式的設(shè)計(jì)，還會(huì)有web交互效果的一些設(shè)計(jì)，不僅要美觀，還要兼具實(shí)用性和功能性，也是UI設(shè)計(jì)師的主要工作內(nèi)容之一。在接到策劃需求之后，UI設(shè)計(jì)師會(huì)和策劃人員進(jìn)行需求的對(duì)接，在設(shè)計(jì)完成后，還會(huì)需要跟制作人員對(duì)接頁(yè)面的交互效果，溝通交流也是不可缺少的。所以UI設(shè)計(jì)人員不僅僅是埋頭做設(shè)計(jì)，也要有一定的溝通表達(dá)能力。

三、電商設(shè)計(jì)也是UI設(shè)計(jì)師工作的一部分，包括電商廣告圖的設(shè)計(jì)，以及商品詳情頁(yè)的設(shè)計(jì)等等。設(shè)計(jì)師在拿到商品的報(bào)告和實(shí)物圖以及模特拍攝圖之后，就要開(kāi)始構(gòu)思詳情頁(yè)的設(shè)計(jì)了，普通的UI設(shè)計(jì)師可能只想著把內(nèi)容呈現(xiàn)出來(lái)就夠了，但是大品牌的高級(jí)UI設(shè)計(jì)師還會(huì)兼顧詳情頁(yè)風(fēng)格與產(chǎn)品風(fēng)格的兼容性等等，使得產(chǎn)品更高端大氣，符合品牌調(diào)性。

四、APP界面設(shè)計(jì)也是UI設(shè)計(jì)師的主要工作內(nèi)容之一，在接到產(chǎn)品經(jīng)理的需求后，需要進(jìn)行UI交互原型設(shè)計(jì)。在設(shè)計(jì)的過(guò)程中要著重產(chǎn)品的功能性，好的UI交互設(shè)計(jì)是為產(chǎn)品進(jìn)行服務(wù)的，要讓用戶(hù)覺(jué)得實(shí)用才是硬道理，但是還要兼具簡(jiǎn)潔和美觀性。因此如何平衡功能性與美觀性，是優(yōu)秀的UI設(shè)計(jì)師的修養(yǎng)。

以上就是UI設(shè)計(jì)的主要工作內(nèi)容。希望可以幫到你！

三、網(wǎng)頁(yè)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)品的用戶(hù)群體及特征；

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

這個(gè)時(shí)候我們就要對(duì)已定義的目標(biāo)用戶(hù)群體及特征進(jìn)行深層次的剖析，包括目標(biāo)用戶(hù)群體的年齡，性別及目標(biāo)戶(hù)群體的一些情感習(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é)合起來(lái)設(shè)計(jì)初稿。（大概的色系搭配，框架布局，元素控件，圖標(biāo)ICON等設(shè)計(jì)都可以在這一步呈現(xiàn)出來(lái)）

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

初稿設(shè)計(jì)完成了，產(chǎn)品大概的樣子都出來(lái)了，接著我們就是要做好視覺(jué)規(guī)范設(shè)計(jì)及細(xì)節(jié)優(yōu)化設(shè)計(jì)。視覺(jué)規(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ì)稿完成了接下來(lái)就是前端工程師制作了，這時(shí)我們就不要以為我們的工作完成了，我們要繼續(xù)跟進(jìn)前端工程師實(shí)現(xiàn)還原我們的設(shè)計(jì)效果，有必要我們可以設(shè)計(jì)出一份交互圖出來(lái)，這樣便于他們更好的更準(zhǔn)確的更快捷的實(shí)現(xiàn)我們的設(shè)計(jì)；

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

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

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

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

四、ui設(shè)計(jì)師的工作內(nèi)容流程有哪些？都是怎么樣的？

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

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

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

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

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

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

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

4、測(cè)試部門(mén)（測(cè)試專(zhuān)員）

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

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

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

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

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

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

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

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

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

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

一、需求梳理、分析

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

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

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

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

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

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

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

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

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

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

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

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

線框流程圖

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

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

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

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

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

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

切圖文件夾

切圖文件

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

以上就是小編對(duì)于ui設(shè)計(jì)工作流程問(wèn)題和相關(guān)問(wèn)題的解答了，如有疑問(wèn)，可撥打網(wǎng)站上的電話，或添加微信。

推薦閱讀：

界面設(shè)計(jì)作品（優(yōu)秀的ui界面設(shè)計(jì)作品）

新版小紅書(shū)UI分析（新版小紅書(shū)ui分析報(bào)告）

全鏈路ui是什么意思（全鏈路ui是什么意思呀）

山東省城鄉(xiāng)規(guī)劃設(shè)計(jì)研究院招聘（山東省城鄉(xiāng)規(guī)劃設(shè)計(jì)研究院招聘結(jié)束了嗎）

驗(yàn)證碼怎么找（OPPO手機(jī)驗(yàn)證碼怎么找）