正文

ui設計的工作流程（ui設計的工作流程是進行視覺設計和切圖與標注）

發(fā)布時間：2023-04-15 17:23:07 稿源：創(chuàng)意嶺閱讀： 135

大家好！今天讓小編來大家介紹下關于ui設計的工作流程的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

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

文章目錄列表:

1、UI設計師的工作流程是什么?
2、ui設計師的工作流程
3、UI設計的工作流程是怎樣的?
4、UI設計的全工作流程是怎樣的？

ui設計的工作流程（ui設計的工作流程是進行視覺設計和切圖與標注）

一、UI設計師的工作流程是什么?

對接需求：開產(chǎn)品需求會議，了解產(chǎn)品的需求，與產(chǎn)品經(jīng)理了解產(chǎn)品的目標用戶，框架原型，對于不理解的地方及時溝通。做到心中對產(chǎn)品的高度認知。

原型分析：分析產(chǎn)品框架里面的功能結構，梳理清楚功能的層級關系，頁面之間的流程以及邏輯關系。

界面視覺設計：當對產(chǎn)品框架全部理解了以后，就可以開始動手做設計稿了，做設計稿的時候需要注意的就是我們需要出兩種版本的設計稿，一種給蘋果用戶，一種給安卓用戶(除非公司產(chǎn)品只做某一種版本)。

標注切圖：將設計稿進行標注，同樣標注兩個版本，蘋果界面的一個，安卓界面的一個，標注完成以后，我們需要做的就是切圖了。切圖這里大家需要注意的就是要切所有設備需要的圖。比如：蘋果設備目前流行的是兩種圖，一種是@2x，一種是@3x。那么設計師在切圖的時候，就需要把這兩種圖都切出來。

二、ui設計師的工作流程

UI設計師必備知識：大公司設計工作流程規(guī)范，啥也不懂進啥公司？1、在設計之前，首先需要產(chǎn)品經(jīng)理確定好客戶或者老板的需求，沒有產(chǎn)品需求，就沒有互聯(lián)網(wǎng)開發(fā)，沒有需求，我做產(chǎn)品也就沒有意義了。比如說：我們設定一個需求。畢業(yè)生都需要找工作，我們需要找公司，但是沒有那么多時間一家家的去詢問要不要人，我們需要投簡歷，這個時候就需要網(wǎng)站，需要APP，像智聯(lián)、58等等熱門。有需求，自然會有交易。這個時候產(chǎn)品經(jīng)理需要了解這個APP需要具備哪些功能，最好是能夠進行及時采訪，能夠切實地了解到真實需求：比如我找工作，需要公司的規(guī)模，是不是真實，薪資構架等等，這些需求都需要儲存起來。了解到真實需求，才有了我們的產(chǎn)品開發(fā)。2、確定需求之后，產(chǎn)品經(jīng)理會做具體的說明，讓交互、UI、開發(fā)、測試明確產(chǎn)品需求，明確項目的具體細節(jié)。這個階段里面是最關鍵的，涉及到需求與產(chǎn)品的對接。PRD文檔和線框原型圖一般情況都是在這個環(huán)節(jié)內(nèi)明確的。當然也會有特殊情況，比如某寶，他的流暢是交互明確需求——低保真原型——派PRD，應該是這個流程，出現(xiàn)差錯，請輕噴。這里面需要注意的是：PRD文檔，線框原型圖出來了之后，設計師才開工，不然也是反復修改。3、設計組內(nèi)部會議、界面風格確定，這個時候需要確定一個設計負責人。設計負責人會給同事做具體的工作安排，線框圖標、版式設計等都有具體的分配。后面就開始出稿，稿子出了之后，需要確定那個風格的效果更好。判定結果的標準還是客戶的需求。重要的事情說三遍：需求、需求、需求！4、分工已經(jīng)明確，進行具體設計工作5、標注圖、效果圖、切圖這個不需要多講，大家都明白。這個步驟，產(chǎn)品經(jīng)理會進行把關。6、開發(fā)完成，進行最后的測試測試工程師會對開發(fā)出來的產(chǎn)品進行測試，看看有沒有疏漏，有沒有錯誤，當測試和調(diào)試完成，上線，就完成了整個開發(fā)的流程。

三、UI設計的工作流程是怎樣的?

第一步：交互流程設計

APP的交互流程設計，簡單來說就是構造框架，像造房子一樣，有了清楚的平面圖紙才可以增磚添瓦，設計交互流程時應該對應用的功能需求有清晰的把握。

第二步：風格定位

比如說圖片分享類應用圖片是最重要的視覺元素，應用的設計風格應當符合視覺流程，table需要引導用戶操作。

第三步：功能icon設計

功能圖標即在你的應用中，充當表達某一操作或功能示意的圖形，功能圖標設計應極可能形象，簡潔，以準確表達其代表的功能。

第四步：界面視覺效果整體優(yōu)化

選用圖片的時候，應該盡量按照應用的風格選取，比如這APP主打是圖片分享，那么可以選取視覺靚麗，有沖擊力的圖片添加分享。

第五步：應用icon設計

對這款APP進行最終的icon設計，能夠最優(yōu)化的，最靚麗的代表這款APP的特色，品牌等形象。

第六步：完稿交接軟件工程師

我們做移動界面設計，做的是各個頁面的形象，具體功能實現(xiàn)是需要與軟件工程師溝通的，在能夠完成軟件開發(fā)的情況下，進行一步步的界面設計，最大化增加用戶體驗，吸引用戶，最終完美的完成這份設計。

以上就是小編關于UI設計流程的相關內(nèi)容，總體來說是針對移動端APP應用做的界面設計，但是很多人不清楚移動APP界面設計師的工作流程是怎樣的。

四、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ā)部門（構架工程師、程序開發(fā)）

4、測試部門（測試專員）

5、市場部門（銷售、渠道、公關、品牌）

6、運營部門（客服、運維）

各部門的工作職責如下：

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

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

研發(fā)部門：產(chǎn)品構架設計，數(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)品定位、技術定位），市場需求分析（目標客戶群分析、競爭對手分析）。在前期的產(chǎn)品需求分析會議中，UI設計、技術工程師都會參與。此過程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設計師、包括技術工程師會一同作大量的討論，而且主要討論的是流程和主要功能，因此手畫故事版最快最方便并易于修改的。此環(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設計的工作流程問題和相關問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。