入門必讀，UI設計的整個工作流程是怎樣的？
UI設計師到底要做什么。今天千鋒就來為大家介紹一下UI設計的工作流程，相信即使是零基礎的小伙伴也可以輕松理解。
首先，大家要知道，UI設計的整個工作流程有許多人的參與。第一個是產(chǎn)品經(jīng)理，主要的工作是競品分析等工作，也是UI設計最核心的一個領頭人物。
第二個交互設計師，根據(jù)產(chǎn)品經(jīng)理提供的方案，設計出一套原型圖設計。第三個視覺設計師，工作內(nèi)容是根據(jù)交互給的原型圖，設計出視覺圖。其實無論是交互設計師，還是視覺設計師都統(tǒng)稱為UI設計師。
第四個程序員，根據(jù)視覺設計師提供的圖片，用代碼的方式實現(xiàn)其功能，也就是開發(fā)APP的過程。第五個運營，負責把已經(jīng)開發(fā)出來的APP推廣出去，讓更多人來的使用這個產(chǎn)品。
歸納起來就是，產(chǎn)品定位與市場分析階段，主要由產(chǎn)品經(jīng)理負責牽頭，相關需求部門與產(chǎn)品需求專員、市場人員進行多次會議研討，經(jīng)過上級領導同意，確立好需求后即將進入交互設計階段，這也是UI設計的主要階段。下面是一個UI設計師的具體工作流程：
1、了解項目分析需求文檔
2、草圖快速溝通
3、設計開工前溝通需求
4、視覺設計
5、界面輸出
（1）目的（配合好技術(shù)開發(fā)人員完成相關的界面規(guī)范溝通、設計需求溝通）
（2）主要執(zhí)行人員（技術(shù)）
（3）溝通（UI、UE、需求部門、銷售）
（4）UI設計師的主要職責（對界面設計階段的最后結(jié)果配合技術(shù)部門實現(xiàn)界面設計的實際效果）
6、可用性測試階段
（1）目的（針對一致性測試；信息反饋測試；界面簡潔性測試；界面美觀度測試；用戶動作性測試；行業(yè)標準測試）
（2）主要執(zhí)行人員（技術(shù)開發(fā)測試部門）
（3）溝通（UI/UE、技術(shù)開發(fā)部門、產(chǎn)品需求部門、營銷運營部門）（4）、UI設計師的主要職責（可用性的循環(huán)研究、用戶體驗回饋、測試回饋、UI人員把可行性建議進行完善）
7、產(chǎn)品上線
8、開發(fā)后期，細節(jié)跟進
9、項目總結(jié)
完成了設計工作后，要做的事情就是出一份視覺規(guī)范，然后檢查一下整體的視覺層級。無論是小型項目還是大型項目，視覺規(guī)范都有其存在的必要性。無論是對你自己，還是對于同事，都能起到很好的規(guī)范作用，避免不一致的設計。
UI設計的全工作流程是怎樣的？
作為一個專業(yè)UI設計師，不僅僅要了解整個產(chǎn)品在UI界面設計，交互設計中的工作流程，更需要了解整個產(chǎn)品從需求提出到產(chǎn)品上線的整個工作流程。
以下是互聯(lián)網(wǎng)產(chǎn)品各部門的工作分配及流程：
從圖中可以看到，一個互聯(lián)網(wǎng)產(chǎn)品從策劃到最后的上線營銷，都需要由不同的部門分擔其責，而每個部門中，根據(jù)崗位的劃分，在細分到每個工種上來，所以一個互聯(lián)網(wǎng)產(chǎn)品的開發(fā)流程，并不是單個的人，或者個別的部門可以實現(xiàn)完成的，它是一個完整的團隊通力合作的產(chǎn)物。部門與部門，崗位與崗位相互協(xié)作配合，才會出色高效的完成項目。
一般互聯(lián)網(wǎng)公司會有幾個部門劃分：
1、產(chǎn)品部門（產(chǎn)品經(jīng)理、產(chǎn)品專員）
2、設計部門（GUI設計師、交互設計師、前端工程師）
3、研發(fā)部門（構(gòu)架工程師、程序開發(fā)）
4、測試部門（測試專員）
5、市場部門（銷售、渠道、公關、品牌）
6、運營部門（客服、運維）
各部門的工作職責如下：
產(chǎn)品部門：負責產(chǎn)品調(diào)研，產(chǎn)品方案策劃，產(chǎn)品原型圖設計，和技術(shù)開發(fā)對接，后續(xù)可能和運營部門對接。
設計部門：負責產(chǎn)品視覺設計，交互設計，前端布局。有一些公司會把前端這一塊劃分到開發(fā)部門，理由是前端的工作和程序開發(fā)一樣，都是碼代碼，設計部門就是單純的只管視覺設計方面。但是這種說法其實不太正確，前端的代碼實現(xiàn)和后臺的程序開發(fā)，雖然都是碼代碼，但是運用的技術(shù)是不一樣的，實現(xiàn)的功能和效果也是不相同的，所以前端工程師劃分到設計部門會更合理一些。
研發(fā)部門：產(chǎn)品構(gòu)架設計，數(shù)據(jù)庫設計，前后臺編碼設計，后期的運維，網(wǎng)絡安全。
測試部門：測試程序中的bug，編寫測試計劃、測試用例及測試報告等文檔，優(yōu)化流程。
市場部門：產(chǎn)品企劃策略，促銷活動的策劃及組織，品牌規(guī)劃和品牌的形象建設，市場廣告推廣活動和公關活動。
運營部門： SEO/SEM優(yōu)化推廣，平臺活動策劃（線上線下），廣告投放，客戶關系管理，數(shù)據(jù)分析。
設計部門的崗位劃分通常有UI設計師、交互設計師、前端工程師，小型公司崗位劃分不完善，會把交互設計師的工作（交互流程、交互線框、交互動效）交由產(chǎn)品人員來完成，以下梳理出UI設計師參與和需完成的流程：
一、需求梳理、分析
發(fā)生在產(chǎn)品開發(fā)前，以APP產(chǎn)品為例，會對市場和用戶進行調(diào)研分析：市場定位（用戶定位、產(chǎn)品定位、技術(shù)定位），市場需求分析（目標客戶群分析、競爭對手分析）。在前期的產(chǎn)品需求分析會議中，UI設計、技術(shù)工程師都會參與。此過程UI設計師了解清晰的用戶定位，產(chǎn)品定位，競爭對手分析，為后期的素材收集和風格把控做準備。
在這個過程中會根據(jù)提煉的真實用戶需求來確定產(chǎn)品需求，產(chǎn)品經(jīng)理將根據(jù)溝通中的相關資料的word、ppt、jpg等等東西翻譯成邏輯語言，最簡單的就是產(chǎn)出一張產(chǎn)品功能腦圖或者一份功能列表。
產(chǎn)品功能腦圖：
產(chǎn)品功能列表：
大家開始討論用戶體驗流程，在白板上邊畫流程邊添加粗略的UI元素。之后產(chǎn)品經(jīng)理會在紙上做手繪版線框圖。這階段產(chǎn)品經(jīng)理、UI設計師、包括技術(shù)工程師會一同作大量的討論，而且主要討論的是流程和主要功能，因此手畫故事版最快最方便并易于修改的。此環(huán)節(jié)要敲定userflow，用戶流程及其中的關鍵步驟，每一步驟都是一個主要界面。之后產(chǎn)品經(jīng)理繪制紙質(zhì)版低保真交互原型圖（可借用專業(yè)的模板本和工具）
二、關鍵界面線框圖（可不帶交互功能）
初步產(chǎn)品功能需求梳理清楚之后，產(chǎn)品經(jīng)理持續(xù)跟進，反復溝通，在確定的用戶流程中，選出幾個關鍵的，有代表性的步驟，做1:1細化線框圖。此環(huán)節(jié)要確定關鍵界面里的UI元素和布局，以及全局的布局排版風格。
三、關鍵界面視覺設計
此環(huán)節(jié)UI設計師會做關鍵界面的整體視覺設計，嘗試不同風格、顏色的搭配，UI元素的運用，最終確定產(chǎn)品的視覺設計風格。
四、 全部界面線框圖（帶交互功能）
產(chǎn)品經(jīng)理完成1:1帶交互和流程的全部界面線框圖設計并確認。
界面線框圖（為交互功能添加釋義和說明。）
線框流程圖
五、 全部界面視覺設計
UI設計師輸出全部界面的視覺設計圖，并確認。
六、 界面標注、切圖
1、在確認全部界面視覺稿以后，首先對每個界面進行標注，標注圖移交前端工程師。
標注圖（像素大廚、藍湖等軟件）
2、界面切圖，移交前端工程師
切圖文件夾
切圖文件
至此，UI的工作流程才算完成，但是現(xiàn)實項目中，很多環(huán)節(jié)是一個交替迭代的過程，需要不停地修改和優(yōu)化，包括整個流程進入到開發(fā)以后，也會需要UI設計師協(xié)同調(diào)整，所以UI設計師的工作，不單單是只完成單純的界面視覺設計，前面包括用戶定位，線框繪制，流程梳理，交互實現(xiàn)，后面包括前端布局，很多環(huán)節(jié)，UI設計師都必須參與進來，只有多角度地了解項目，了解各崗位的工作流程，才能做出符合市場需求，符合用戶需求的產(chǎn)品。
UI 設計的整個工作流程是怎樣的？
一.UI設計參與完成的流程。
UI設計的工作流程會根據(jù)公司性質(zhì)、規(guī)模、項目性質(zhì)、項目規(guī)模、UI職能要求等的不同有所區(qū)別。
UI設計參與完成的流程大致為：
1. 參與需求評審，理解PRD
2. 用戶調(diào)研、情緒板梳理（主要針對一些對體驗、視覺要求很高的產(chǎn)品，需要更加多關注人的設計，不是必要流程）
3. 交互設計
4. 視覺設計
5. 視覺評審（視覺稿確定過后）
6. UI走查、驗收（開發(fā)提測后，發(fā)布前）
在工作過程中，可能會組織團隊成員對設計方案、項目進行復盤，這樣細致的分工會把每個環(huán)節(jié)都打磨得非常到位。我們再來細分工作中的每一步，具體的工作內(nèi)容是什么？
1.參與需求評審，理解PRD
一個項目全員開始動工，應該就是從需求評審開始。在產(chǎn)品理清楚需求后，會輸出PRD或者原型草圖，依據(jù)PRD或者原型草圖來和項目組的全體成員澄清需求。在需求澄清會中，項目組成員會對需求、操作流程、業(yè)務邏輯等提出不同的問題，產(chǎn)品完善問題。需求澄清不會一次就讓項目組全體成員清晰的明確所有需求，產(chǎn)品會根據(jù)大家的疑惑去不斷完善需求內(nèi)容，在多次的需求澄清后，大家達成一致的共識，正式開始動工。
在這個過程中UI設計需要：
（1）反復和產(chǎn)品溝通，確認，協(xié)助產(chǎn)品給出原型草圖。
（2）協(xié)助產(chǎn)品明確產(chǎn)品的市場定位、產(chǎn)品定義、客戶群體、運行方式等。
2. 用戶調(diào)研、情緒板梳理
產(chǎn)品、UI、UE等相關人員會依據(jù)產(chǎn)品的定位、競品分析、目標用戶的使用場景、需求、心理等提出用戶的研究報告。
在這個過程中UI設計需要：
（1）參與討論，輸出紙稿線框稿、用工具制作線框圖。
（2）協(xié)助產(chǎn)品初擬產(chǎn)品設計方向和思路，提出可用性設計建議。
3. 交互設計
交互設計階段一般由交互設計師（UE）和產(chǎn)品一起制定，根據(jù)可用性分析結(jié)果制定交互方式、操作流程、跳轉(zhuǎn)流程等。在線框圖階段去設計交互流程，可以減少由于交互流程改變而帶來的視覺設計的改變。這個階段會輸出原型圖，以支持后面做詳細的視覺設計。很多公司沒有專職的交互設計師，交互設計由產(chǎn)品或者UI完成。
在這個過程中UI設計需要：
（1）這個過程，UI可以依據(jù)上一個流程中的輸出，初步設計產(chǎn)品的風格，然后和產(chǎn)品不斷推敲。
（2）原型設計的不斷完善，紙質(zhì)草圖-線框圖-低保真-高保真（高保真原型成本較高，很多小規(guī)模的公司都不做高保真原型設計）。
4.視覺設計
視覺設計階段，UI根據(jù)界面原型，對界面原型進行視覺效果的處理。該項目組的UI在明確界面風格、要求后，開始制作所有界面的視覺設計
在這個過程中UI設計需要：
（1）確定整個界面的風格、界面、窗口、圖標、色調(diào)、按鈕的表現(xiàn)。
（2）完成所有界面的視覺設計，交出最終的視覺稿。
5. 視覺評審
在視覺稿確定之后，UI設計組針對界面做一致性測試、簡潔性測試、美觀度測試、用戶體驗測試、行業(yè)標準測試等。然后召集項目組所有人員召開原型的可用性測試評審會，發(fā)現(xiàn)可用性問題并提出修改意見。當視覺評審過了之后，配合技術(shù)部門實現(xiàn)界面設計的實際效果。
在這個過程中UI設計需要：
（1）針對提出的問題，對界面進行不斷的完善。
（2）參與視覺評審全過程。
（3）配合技術(shù)部門實現(xiàn)界面設計的實際效果，給出最后的界面效果圖，標注好距離、 尺寸、顏色、文字大小等。
（4）輸出前端開發(fā)工程師需要的切圖。
6. UI走查、驗收
在發(fā)布前，測試會針對可用性、用戶體驗、測試界面等對設計問題進行一下回饋，在依據(jù)這些問題把設計工作進行細節(jié)調(diào)整。再正式發(fā)布之后，收集市場上真實的用戶體驗并記錄，為下個版本提供強有力的市場需求。
在這個過程中UI設計需要：
（1）不斷完善界面設計。
（2）UI人員把可行性建議進行完善，不斷總結(jié)以備以后產(chǎn)品設計升級。
當然，以上談到的UI設計工作只是一個大致的流程，一個項目UI參與的流程肯定是會依據(jù)公司性質(zhì)、規(guī)模、項目性質(zhì)、人員配比等不同，所做的工作有所縮減或精分。
