UI 設計的整個工作流程是怎樣的？

12-24

以下回復把「UI設計」當做一個整體的團隊流程來看。而並非是「UI設計師」的工作流程是怎樣的。特此說明。

我傾向於說「交互設計的整個流程」。在我這裡，UI是指「界面」，在視覺設計開始之前，界面的的交互策劃與設計是很重要的前置步驟，對最終的用戶體驗有很大的影響。

我團隊在交互設計階段一般有產品經理、交互設計師和UI設計師主要參與。以我的了解，很多公司不設專門的交互設計師，而由產品經理完成相關工作。以下是我這裡的工作流程（圖片來自於網路，本團隊的就不貼了）。這個流程希望整個產品團隊都能參與其中並共同加強對產品的理解。或者借一個時髦的概念，我是希望團隊能具有更多Design Thinking，「設計思維」，來加強和推動解決問題的能力，並激發更多創新。

最開始一定要把Scenario應用場景和Persona用戶角色做出來。你的產品是在何種場景下被使用，你的用戶角色是怎樣特徵的人。設計的對不對，要用用戶角色來判斷，而不是設計師或產品經理自己。把場景和角色描述清楚，並且讓整個團隊理解透徹，這能保證團隊少犯錯誤。

*用戶角色 Persona，實際工作中寫文字描述就好，不用做的如下圖一般高大上。如果你要給客戶或Boss提案，可以做一個提升逼格。

1. Storyboard 故事版：

主要負責人：產品經理或交互設計師

最早大家開始討論用戶體驗流程，在白板上邊畫流程邊添加粗略的UI元素。會後交互設計師會在在紙上做手繪版線框圖。這階段產品經理、交互設計師、UI設計師、包括技術工程師會一同作大量的討論，而且主要討論的是流程和主要功能，因此手畫故事版最快最方便並易於修改的。

此環節要敲定userflow，用戶流程及其中的關鍵步驟，每一步驟都是一個主要界面。

*白板上一般都是這樣，交互設計同學會在紙上重繪。

*移動產品設計這樣做也行，不買專用的模板本和工具尺，自己列印也行。

2. Key wireframe 關鍵界麵線框圖

主要負責人：交互設計師

在確定的用戶流程中，選出幾個關鍵的，有代表性的步驟，做細化的wireframe線框圖。線框圖裡要確保每一個UI元素的設計，包括其大小和位置。我們做的線框圖是1:1的，也就是線框圖與實際界面尺寸一致。1:1的線框圖能在前期避免考慮不周和執行困難等很多問題的出現。

此環節要確定關鍵界面里的UI元素和布局，以及全局的布局排版風格。

*線框圖做成1:1最好。輸出到文檔里要添加說明。在後面的工作里，這份文檔可以讓UI設計同學和工程師同學共用。

3. Key visual design 關鍵界面視覺設計

主要負責人：UI設計師

此環節交互設計師會按確定的用戶流程及確定的布局風格來繼續做其它界面的線框圖。UI設計師則同時開始做關鍵界面的視覺設計，進行配色、樣式不同風格的嘗試。

此環節要確定產品界面的視覺設計風格。

4. All wireframe 全部界麵線框圖

主要負責人：交互設計師

此環節交互設計師要完成全部界面的線框圖（1:1的）設計並且團隊確認。

*做完全部的線框圖，一般會出一個總結構圖。如果有足夠大的場地，也可以逐頁列印出來貼到一面牆上。方便團隊隨時參考。

5. Prototype 可動原型

主要負責人：交互設計師

此環節依產品需求而定。如果靜態的線框圖還不能完整的體現出產品特點，那就需要做成可操作甚至有關鍵界面動畫示意的可動原型。通常是HTML的可動原型，特殊項目也曾經做過Flash的。我還有一個奇葩朋友用PPT做過（PPT的開發工具+VB Script）幾乎接近成品界面的可動原型。

此環節的確認同上一步，團隊的理解會更精準。

*忍不住帖一個PPT的開發工具面板，提供VS風格的控制項，並且直接用VB script寫控制項邏輯！還可以帶dummy數據！客戶都以為你開發完畢了有木有。

6. UI design 全部界面視覺設計

主要負責人：UI設計師

完成全部界面的UI視覺設計。

此環節確認全部UI設計。同時把確認的UI更新到文檔里。

以上步驟里省略了了給boss彙報或者給客戶彙報的描述。有條件的話，最好是每一步都要讓有關的決策人員參與確認。

如果要做用戶調研的產品，那一定要做出可動原型再讓用戶使用測試，不然很難得到有價值的反饋。有條件的公司直接出帶設計的可動原型再測試當然最好。

把我們公司（大邦創新 BIGBANG DESIGN 大邦創新諮詢)的設計流程在這裡分享給各位同仁,主要適用於從一個idea開始的項目

OUR PROCESS

Step 1.

了解客戶需求，聽取客戶對行業、對產品、對商業模式的思考，此階段一般需要兩個工作日

Step 2.

初步了解產品的基礎上制定用戶需求調研問卷，粗略了解用戶對該產品的功能需求

Step 3.

制定正式問卷，以下為某銀行客戶制定的用戶需求調研問理財經理App需求調研

Step 4.

對問卷進行定量化分析，輸出問卷分析報告(採樣為300份有效問卷)

Step 5.

根據問卷分析報告以及客戶需求進行用戶需求的制定，輸出用戶需求報告

Step 6.

根據用戶需求報告制定信息架構(information architecture)

Step7.

根據信息結構，結合用戶樣本(Persona)、競品分析、雙維度表等方法確立交互設計目標，並輸出主頁面交互設計提案

Step 8.

所有頁面的交互設計，同時以交互說明的形式配合甲方PM或開發人員輸出PRD

Step 9.

用戶視覺風格喜好調研

Step 10.

視覺風格分析與提案

Step 11.

選定一個方案進行深化後對剩下的頁面進行視覺設計

Step 12.

視覺規範手冊（pdf 20P起)的制定

Step 13.

交互動效的制定（demo+文字描述），並配合開發製作實際效果

Step 14.

切圖

Step 15.

配合開發，以保證視覺效果還原度及小細節修改

最後，附幾張我們的工作照（都是半夜拍的==)

我說說遊戲UI的流程；

整體是這樣的：

企畫給定新遊戲專案

主UI風格-&>找參考素材

風格延伸至共享UI

共享UI額外設計

拆圖

引擎軟體組圖

1. 企劃給定新遊戲專案

2. 主UI定風格-&>找參考素材

除了Q版+科技感，我一直有個想法就是想把現在流行的的扁平化設計 ( 一般商務APP常見 ) 帶到遊戲UI上，也就是 Q版 + 科技感 + 扁平化。

後來我發覺這真的是很有難度。因為這類遊戲UI的 裝飾需求 + 單一畫面功能承載 其實比一般商務型APP還多。而扁平化又不容易帶出層次感，且又必須做良好的信息收納與引導，反而會因為刻意扁平而感到空洞。

美術這邊除了主要負責視覺設計，使用上的人因要素、功能的增減…基本上就是企畫跟美術一起討論。

Q版原畫：大約兩頭身的人物、色塊簡單就能帶出顏色層次...圖為公司2D美術所畫。基本上遊戲風格都從原畫開始。
高科技感：藍、綠冷色為主、方方框框帶稜角的裝飾、電路板裝飾、很多怪環的圓..
扁平感：色塊單一、ICON造形簡單且大眾化

優化後的版型，主按鈕和副按鈕的部分一樣必須要有文字做引導，畢竟功能太多，圖像直接引導反而讓用戶不便。整體來說我還是似乎覺得過雜，但是有些東西卻又拿掉不得，人物跟背景為公司2D美術所畫。

3+4. 風格延伸至共用UI + 額外設計

5. 拆圖

拆共用UI基本的元素，主UI之外的副UI基本上都挖這裡的做延伸。

6. 引擎組圖

現在我們做手游的引擎都是用unity，組圖的部分其實就是把圖拼回去而已，然後方便給程序對圖寫程序代碼。這就不照了。

寫出來求抓蟲...匿名是最近老大進知乎關注我了.....

從哪開始？從PM把,layout 甩我臉上開始
背景：ok 這個軟體已經上線了。
1.接到線框圖，和pm交流下。這個線框圖處於的位置一級還是二級頁面，一級請Pm闡述下功能點，二級請PM交待下前後流程。詢問下原因（尋找優化點）。

2.對著線框圖沉思10分鐘，腦補這個layout沒畫出來的所有情況。
舉例一個文本輸入框，窮舉空白原始狀態（提示文字）、輸入文本中（各種剩餘字數提示、鍵盤雜彈出）、文本輸入完（如何刪除）等等，UI雖然做的時候是做一個「頁面」，但是不僅僅是一個狀態，其他的也要加入考慮。

3.上網查查資料，同類是如何處理的。配色、布局相對大小、可能涉及的圖標等等（大家懂的嘛）

4.開整..火速整個完成度70%～80％的頁面，甩PM臉上.交流並仔細詢問意見，主要要得到以下信息，

配色是否可以（配色很難.....)
布局是否合理（大小要適中）
重點是否突出
UI調整的是否合理（有時候產品思考實用性，UI會從美觀性進行一些調整）

6.收集意見後放鬆以下...繼續往下整（可能第二天了）。
循環整－交流－整，這個流程...直到定稿

7.定稿後..那就是切圖、給稿子打標註、標尺，以及和程序員耐心交流

作為Ui太感謝ios7了好嗎，各種色塊、線條、毛玻璃用的媽媽再也不用擔心我沒飯吃了好嗎。

...... 有大神來指點下小的我嗎......

---------嗨，我是三月與四月的分割線---------
解釋下我們團隊是把布局圖稱作layout，畫自axure
感謝糾正說這個叫線框圖（Wireframe），順帶也查了原型 (Prototype) 和視覺稿 (Mockup)的一些知識!
大家也看出來了我這是個小團隊是用研交互基本PM承擔了,事實上用研環節幾乎是省略的，交互設計PM 和UI各自承擔部分，比較簡單粗暴...也很有效，至少目前看來。

你們不覺得layout，很鏗鏘有力擲地有聲么
"來！out!"（來！這個圖P 粗來！）

最後隨便扯點別的
雖然平時隊里都會把UI叫做設計師，說要做一個有品的隊決不叫人美工。
有一次發布版本前夕程序嚷嚷這個功能雜缺一塊啊啥的，PM一時情急就說快讓美工弄個啥貼上！

甭管看了多少書、學了多少標準流程，最終咱沒管那些。

對於移動端，咱現在是這麼做的：
1.以飛快的速度（遵循Android的 DesignIOS HIG）在紙上畫完線框圖
2.給寫代碼的看。若任何地方有技術困難，立刻撕了重畫。
3.寫代碼的按草稿一樣線框圖，隨便用自帶樣式寫完demo，我拿來改點顏色、換幾個PNG、對齊一下，結束。

聽起來有些喪心病狂，其實咱也好好按流程做過。咱以前是這麼乾的：
「PM弄完文檔和線框圖然後給技術、設計的審核，改來改去然後設計的又花N周修整視覺效果，反覆弄來弄去最後給代碼的開始寫了，然後PM又改需求，再倒騰一次然後deadline超限，然後延期N久終於發布未完成版，之後更緩慢地迭代，然後項目坑掉」

……………………………

咱真的是受夠所謂的「敏捷開發流程」了。

一般的UI工作流程是：

1，PM提出設計需求。（比如，有個什麼界面啊或者活動頁啊，需要設計下的）

2，最重要的一步：UI和PM溝通需求，這叫理解和確認需求。
（因為pm和ui站的角度不一樣，所以要溝通好，要了解pm想要的是什麼，要確認需求流程是否有問題，交互邏輯是不是清晰。）

千萬要避免拿到了一需求，就開始找圖啊，打開ps畫的。

為什麼有的人能一稿過，有的人要一遍一遍的來來回回的改，就是因為這一步沒有溝通好。

3，第二重要的一步：構思，然後網上找素材，找感覺。

你所找的設計參考圖的質量，最終決定了你最後做出來的設計稿的質量。
一開始就看到很多很優秀很高質量的設計參考圖，那麼你設計時自然而然的就會往這個高度靠攏。

4，打開ps，開始做圖
有了前面對需求的理解，和一些優秀設計的參考，這時你的心裡已經很清晰了。做起來就會很輕鬆了。

5，第三重要的一步：UI和PM再次溝通，確認設計的完整性。
設計稿做完後，會有跟pm進行二次溝通確認。要確認pm提出的需求是否都在設計稿裡面體現出來沒？有沒有遺留？

這時，一般pm在看完設計稿後，會提一些小的修改建議的。這也是為了避免最後輸出後，pm進行微調修改時，需要重新再次輸出。

6，設計輸出，切圖＋標註。（盡量輸出前跟rd們溝通下，他們需要怎麼那些圖，怎麼給它們）
這時，因為前面跟pm有了2次確認了，也跟rd們溝通了設計輸出了，
設計ok，輸出ok，所以就可以大膽放心的輸出了。

7，UI聯調
rd開發完後，需要確認開發出來的界面跟設計稿的界面是否一樣。

這個時候，一個完整的ui流程差不多算走完了。

記住：千萬千萬一定要先溝通好了，然後再開始幹活。

溝通不止為了理解需求，也是為了後續發生問題時，能分清責任。

【Windows 微信 1.0】設計總結
這篇看看就明白了

關鍵在於，你到底是哪種設計師。

我們越來越多的聽到：「我是一名設計師」。你認為設計師的工作就只是設計么？親，你太天真了。熊先生帶你揭秘不同類型的設計師工作，我們從設計的源頭開始。

用戶調查型設計按照需求進行，而需求從哪裡來？很大一部分的需求是由用戶調查決定的。那麼，什麼是用戶調查？如何做一個合格的用戶調查呢？用戶調研是指通過各種方式，比如電話調查、網上調查、問卷調查等，得到受訪者的建議和意見，並對此進行匯總，目的在於為下一步的產品設計提供相關數據基礎。

用戶調研的可根據調查研究的內容主要分為兩種，一種是產品調查：對目標人群以及競品的調查分析，來確定設計的方向以及驗證目前的觀點。第二種則是針對用戶體驗度的調查：這種情況往往存在於產品的測試階段以及發布後。

想要完成一次合格的用戶調查，必須要做到一下三點：

1. 正確的目標群體

你的產品面向的目標是誰？產品的發布之後又會牽扯到誰的利益？比如，你的產品是類似於Mockplus或者Axure這類原型設計工具，那麼你需要調查的目標群體至少有兩種：設計師和開發團隊。而且，根據不同的設計方向，你需要對目標群體進行進一步的細分。設計師方面可以分為用戶體驗設計師、交互設計師、用戶界面設計師等等。而開發團隊則可以根據規模來進行區分。

2. 合適的調查形式

比較常用的調查形式有兩類，一類是工作人員面對用戶，另一類是其他媒介面對用戶。工作人員面對用戶指的是電話訪談、用戶約談之類的方式。這類方式由於可以有專門的工作人員與用戶實時溝通，所以反饋的信息會相對比較深刻，了解也更加的深入，因此也更容易獲得用戶的真實想法。但是這個方法面對的就是時效問題。現在的發展節奏很快，並沒有給每個產品都留有充足的用戶調查的時間，如果這裡花費的時間過多，自然後造成後續工作時間緊迫的問題。如果調查時候通過其他媒介對用戶就可以相對較好的解決這個問題。調查問卷就是其他媒介中的一種。這種方法可以在同一時間面對大量的目標用戶，極大的降低了時間成本。

但是這種方法同樣也有他的弊端。首先就是他的局限性，因為調查問卷的內容往往是選擇題，從某個角度上就限制了用戶的想法。其次就是調查結果的質量問題，我們不能排除有相當一部分的用戶是隨意填寫的情況。

3. 明確的調查內容

一次用戶調查能反饋多少有效信息，很大程度上取決於調查內容的質量。調查內容需要簡單易懂，問題直接明了。猶抱琵琶半遮面的寫作風格很優秀，但並不適合用戶用戶調查。彎子繞太大，不管是對設計師還是對調查目標都是一種時間浪費。而且還很容易造成用戶的反感，導致調查質量的下降。

這就是設計師中用戶調查型的基本工作了，當然熊先生接觸的也只是皮毛，如果你感興趣，可以進行更深入的了解。

其實設計師的工作不只是停留在幕後，即使是軟體行業中，也有這樣一種設計師，他們就是需要站出來與客戶打交道的。

Marketing Designer也就是營銷設計師，雖然是一個相對比較新的概念，不過在它提出之前，很多人已經在從事這方面的工作了。但是這項工作在國外的意思和國內有些不同，國內更多是指品牌設計師，而國外則是用來稱呼為特定用戶設計軟體的設計師。這裡說的營銷設計師是國外的那一種。作為一個設計和營銷相結合的工作，營銷設計師在了解市場的同時，也要有很強的設計能力。

設計和產品方面的工作包括：用戶培訓、產品設計、相關視頻文檔等。

營銷設計師，說到底還是設計師，這項基本屬性是不會改變的。不同的是，營銷設計師需要做的更加靈活，通過目標用戶的具體需求，來個性化制定產品的各項屬性。這其中的設計對設計師的技能全面性是一個很大的考研，針對用戶要求進行主要的交互設計和界面設計。

相信不會有誰比設計師自己更加清楚自己的設計，也正因為是如此，設計師也是編寫產品配套的相關文檔和教程的最好人選，同樣的，他們也會承擔培訓用戶學會使用產品的責任和義務。這部分的工作需要設計師具有較強的耐心和溝通能力，面對客戶可能會提出的各種各樣的需求和問題，設計師要做到不厭其煩的解答和修改。

而且，各種的設計工具也是他們的必修課程：圖像處理的AI、PS，原型設計的Axure、Mockplus，頁面展示的Chainco、InVision。

營銷方面主要內容：營銷頁面、廣告以及創意活動等。

營銷設計師與其他人最大的不同，就是他們不僅設計產品，同時還兼任了營銷的工作。每當逢年過節搞活動，營銷設計師就比較忙了。在很多公司中，營銷頁面、創意活動以及相關的廣告都需要他們來負責。

營銷工作強調的就是設計師的另一面了，更加創新、更有突破的一面。文化的國際化也帶來節日的國際化。設計師通過切合各類的節日主題展現出產品的與眾不同。

總的說來，營銷設計師的工作難度相對比較大，對設計師的要求也比較高。

國外在這方面的調查顯示，從事營銷設計師的人數與其它類型的設計師相比要少很多。這也從側面顯示出了這方面的人才稀缺。

Mark

文字說明～鉛筆畫～無限循環鉛筆畫改稿～電腦草圖～需求者審閱草圖～選其中代表做詳細圖～需求者定稿～全面開工做demo～再審～終稿～開發人員要求調整～修改稿～無限循環最後兩步

樓上高大上的不行不行。說說我的ui
產品：市場，定位，競品。
用戶定位，分析。（高頻，低頻）
主要架構圖，流程圖。（紙筆）原型圖。(紙筆）
ui：界面設計，修改，視覺。（伴隨著產品汪的無限修改）
輸出。（標記，切圖）
程序：實現，然後無限測試，反饋，修改。
上線，更新，修復。
運營：推廣，宣傳。收集意見，反饋。

總之ui就是承上啟下，產品無限修改，程序無法實現，工作就四個字：作圖，改圖。

樓上那幾位也搞得太複雜了＋1。不過，他們說的都對（就是太複雜了）。

補充一點，每個公司的流程都不一樣，公司越大分工越細。小公司老闆把一個人當n個人使，大公司老闆把n個人當1個人使。許多公司都不注重「研」而只看中「發」，按道理「研發」重點應該在前面的研究部分，後續只管實現以及對研發的結論進行測試和完善。

1、產品經理(PM、PD)收集客戶或老闆的需求；

需要什麼

所有的互聯網公司開始開發的時候都是從產品發起的。

舉個，老闆說做個社交的吧。亘古不變的強需求，像什麼百合網呀、珍愛網呀一直處於大熱門階段，因為肯定會有一部分人找不到對象，沒時間到線下找對象的...

當老闆說要做這麼一個APP的之後，產品是需要搜集一些資料，會去找一些有相親需要的用戶，不管是網上還是身邊同事，會問大家到底需要什麼功能，一條一條的。比如，女方說我要看到對方的頭像必須是真實的、實名認證、年收入... 那男的也有需求呀，比如要看到女方的年齡、身高、體重、教育程度等，這個時候產品就需要整理好一條一條的需求，列到PRD文檔裡面。

這個算是產品在拿到需求之後做的一些用戶的調查。

2、需求評審會議，PM會給交互、UI、開發、測試講解產品的需求，明確項目需求；（產生PRD文檔、線框原型圖）

我是低保真

在這個環節，不明白的地方隨時問。在這個環節會有一個成果出來，可能PRD文檔就定稿了，線框原型圖也有可能在這個階段產生。

有些公司還有這種情形，產品先把需求給交互說清楚，然後讓交互去做低保真原型，然後再對著原型寫PRD。某寶可能是這樣。

記好重要的一點：

設計師這一塊，PRD文檔，線框原型圖不拿到手最好不要開工，拿到手之後再幹活。因為，不這樣做，可能你做出來的東西要反覆的改。

插個小話題，產品經理到底是什麼樣的一個職位呢？

產品經理，在公司經常被大家親切的稱呼為「產品」，這個四個字和UI設計師是一樣的，一個職位，只不過它這個職位有經理2個字而已，跟UI設計師是平級的，它的作用是統籌整個項目，並沒有比大家的級別高多少。

3、設計組內部會議（產品有可能參加）、界面風格確定；（產出視覺風格稿）

定風格

一般來說，這個階段會先確定設計負責人，如果你們公司只有一個設計，恭喜！你就是設計負責人。設計負責人會給大家一個分工，誰來畫線框圖標、誰做一些版式的設計等。最重要的是，設計負責人會定下1-2人作為主設計師，主設計師會各自設計1-2個視覺風格稿，這個設計風格稿不用把每個頁面都做出來，一般情況下，做APP做首頁就好了。

等稿子做完之後，設計組再次開會確定到底用哪一套的設計風格。基本項目相關的人都會參加，此時設計師背後「指點江山的人物」都會出現，哪裡好，哪裡不好的問題也都會來了。

此時記好一點，所有疑問的解答都需要從用戶的需求出發，只有需求才能壓得住人，其他都無濟於事。撕逼大戰可能開始了。

在這個階段到底怎麼確定視覺風格稿，有一個竅門，大家需要了解一下：

3W：whatwhywho（誰，在哪，怎麼用，想怎麼用）

舉個栗子，一款音樂類的APP，大家覺得用戶是在家裡插著耳機躺在沙發里聽，還是在上班的路上聽？

一般都是上班路上聽吧。所以，我們在做音樂類APP的時候，我們就沒必要把播放歌的頁面搞的很複雜吧。

網上常見的5W不適用咱們，這裡記好3W就可以了。

4、設計分工，完成各自設計工作；{可能產出設計規範，有紙質的或者UI-kit（上篇講過）}

我是UI-kit

如果你就是團隊負責人，並且只有一個人，恭喜！全都由你來。這樣一個好處就是風格絕對統一。如果時間充裕，還會有一個產出物，設計規範。

5、標註圖、效果圖、切圖（.png）；

這三個基本上是三兄弟捆綁在一起。

標註圖：哪個地方多寬、多高、距離多少、用什麼顏色給開發標清楚；

效果圖：讓開發看到界面長什麼樣子；

切圖：不規則的圖形、ICON、小圖標都切出來；

一般情況下，這一步需要經過產品的手，需要去審核一下圖有沒有問題。等一切搞定進行下一步。

6、進行開發，完成開發，測試並調試（一個迭代周期完成）

這個階段，一個新的角色出現——測試工程師。他的任務是找Bug，根據產品的文檔來一個個的點，看你的APP開發是不是做成那個樣子了，有沒有出問題的情況。

比如，用戶的密碼，必須使用英文字元不能使用阿拉伯數字。當測試註冊一個賬號的時候，他發現可以用使用阿拉伯數字，那麼這就是一個Bug。他就會提上去；

再比如，少了一個按鈕，這個時候測試工程師就會在公司裡面的你們用的辦公軟體裡面@ 你，告訴你界面少東西，這個就屬於測試並調試的一個過程。

那麼，從最初的產品整理需求，一步一步到設計、開發、測試調試、再到上線這就算是一個完整開發設計的流程。

從項目流程分析UI工作流程，看圖：

細分每個階段的具體安排：

一、產品定位與市場分析階段

1、目的(UI設計師應了解產品的市場定位、產品定義、客戶群體、運行方式等。)

2、主要執行人員(UI、UE、需求)

3、需溝通人員(銷售)

4、實現步驟(會議討論)

5、 UI主要職責：(定義用戶群特徵、定義最終用戶群、定義產品方向)

二、用戶研究與分析階段

1、目的(UI設計師收集相關資料分析目標用戶的使用特徵、情感、習慣、心理、需求等，提出用戶研究報告和可用性設計建議。這部分工作有團隊配合完成。時間與項目需求允許的情況下，更可以制定實景用戶分析)

2、主要執行人員(UI、UE、需求、技術)

3、需溝通人員(銷售)

4、實現步驟(紙搞線稿、黑白稿、原型)

5、UI主要職責(收集相關資料分析目標用戶的使用特徵、情感、習慣、心理、需求等，提出用戶研究報告和可用性設計建議。這部分工作有團隊配合完成。時間與項目需求允許的情況下，更可以制定實景用戶分析)

三、架構設計階段

1、目的(這裡涉及到比較多的界面交換與流程的設計，根據可用性分析結果制定交互方式、操作與跳轉流程、結構、布局、信息和其他元素)

2、主要執行人員(UI、UE、需求部門)

3、需溝通人員(技術、銷售)

4、實現步驟(UI進行風格設計出界面，和需求部門拿出定稿;UE對原型進行優化，整理出交互及用戶體驗方面意見，反饋給UI及需求部門;UID等待效果圖，開始代碼編製)

5、UI主要職責：(根據可以性分析結果制定交互方式、操作與跳轉流程、結構、布局、信息和其他元素。界面設計、圖標設計、風格設計)

四、原型設計階段

1、目的(根據進度與成本，可以把原型控制在「手繪-圖形-Flash-視頻幾個質量範圍)

2、主要執行人員(UI、UE、需求部門)

3、需溝通人員(UID、技術)

4、實現步驟(設計規範;代碼及程序開發)

5、UI主要職責：(對前面所以工作以設計方面的實施，根據進度與成本，可以把原型控制在「手繪-圖形-Flash-視頻幾個質量範圍，原型的本質更傾向與一個DEMO，它不需要有全部的功能，但要體現出設計對象的基本特性)

五、界面設計階段

1、目的(根據原型設計階段的界面原型，對界面原型進行視覺效果的處理)

2、主要執行人員(UI、UE、技術)

3、需溝通人員(UE、銷售)

4、實現步驟

5、UI主要職責：(該階段確定整個界面的色調、風格、界面、窗口、圖標、皮膚的表現)

六、界面輸出階段

1、目的(配合好開發人員完成相關的界面結合)

2、主要執行人員(技術)

3、需溝通人員(UI、UE、需求部門、銷售)

4、實現步驟

5、UI主要職責：(對界面設計階段的最後結果配合技術部門實現界面設計的實際效果)

七、可用性測試階段

1、目的(針對一致性測試;信息反饋測試;界面簡潔性測試;界面美觀度測試;用戶動作性測試;行業標準測試)

2、主要執行人員(程序測試部門)

3、需溝通人員(UI、UE、程序、需求部門、銷售)

4、實現步驟

5、UI主要職責：(負責原型的可用性測試，發現可用性問題並提出修改意見)

八、完成工作階段

1、目的(對於前面七個階段的設計工作進行細節調整)

2、主要執行人員(UI、UE)

3、需溝通人員(技術、銷售)

4、實現步驟

5、UI主要職責：(可用性的循環研究、用戶體驗回饋、測試回饋、UI人員把可行性建議進行完善)

九、產品上線

1、目的(檢驗前面界面設計的成果是否符合市場及用戶群體)

2、主要執行人員(銷售)

3、需溝通人員

4、實現步驟

5、UI主要職責：(收集市場對於產品的用戶體驗，並記錄成文字說明)

十、分析報告及優化方案

1、目的(了解整個界面設計的優缺)

2、主要執行人員(UI、UE)

3、需溝通人員(技術、銷售)

4、實現步驟

5、UI主要職責：(對於前九個階段的界面設計進行詳細系統的整理，為下一次界面設計提供有力的市場及專業論據)

這是工作中梳理的一個工作流程~分享給大家~

……真搞起來就不是這個思路了，標準流程總是少的，比如PM沒有辦法搞定各種需求（老闆、客戶、以及各種大神）的情況下，UI就是要干很多無用功了

1.產品經理
產品經理（PM）一般會收集需求，構想要做一個什麼樣的應用，會更多的考慮功能，這是的原型還是一個粗略地原型，他還要根據產品的生命周期，協調設計、研發和運營等，控制整個應用開發的進度。最終產出物是低保真的原型和原型說明文檔（低保真的原型就是指粗略地線框圖，主要用來簡單說明產品功能；高保真是無限接近於最終產品的線框圖，表達產品的流程、邏輯、布局、視覺效果和操作狀態等）。
2.交互設計
交互設計師（UX）會繼續深入這個低保真原型，進一步優化細節，更多的考慮用戶流程、信息架構、交互細節和頁面元素等。在很多公司可能捨棄了這個角色，由產品經理兼任這個角色。最終產出物是高保真原型，高保真是無限接近於最終產物的線框圖，表達產品的流程、邏輯、布局、視覺效果和操作狀態等。
3.視覺設計

視覺設計師（GUI）需要根據高保真原型圖設計界面，這一步不只是「美化」的工作。視覺設計師需要對原型設計有深刻的理解，需要了解整個頁面的邏輯，從全局的角度來做視覺設計，用視覺手法去完成產品的設計。最終產出物是各種圖形、界面切圖及界面標註。

4.用戶體驗
用戶體驗設計（UE）是以用戶為核心原則，保證功能與審美的平衡。嚴格來說這個過程應該貫穿整個設計過程。單獨配備這個角色的團隊非常少，這個角色的只能一般由團隊內的產品經理、交互設計師和視覺設計師分擔。
5.開發
程序員根據設計團隊提供的標註切圖搭建界面，根據產物提供的功能說明文檔去開發功能，最終產出物是可使用的應用。
6.測試
應用開發完成後，還需要測試人員測試應用的功能，看看應用上有沒有功能問題，並反饋給開發人員或者設計人員更改。測試人員一般以測試功能為主，對於界面適配的細節問題，測試人員並不能及時發現，所以界面測試工作最好還是視覺設計師配合完成。
7.運營
運營人員最終把打包的應用發布到蘋果商店和各大安卓市場上。應用不是發布到市場上就不管了，可以把前期開發過程理解為「生孩子」，而運營就是「養孩子」的過程。根據不同類型的應用，運營人員需要通過各種手段提升應用的人氣。同時也可以把運營應用過程中發現的問題反饋給產品人員，由產品人員再次發起應用的版本更替。

軟體開發、項目管理，都有多套方法論和框架可以遵循。無論是整個軟體的開發，還是某一個模塊或者UI的開發，框架都是互通的。
比如比較常見的軟體開發生命周期里，最容易理解的可能就是瀑布模型，包括了需求收集與分析、設計、實施、測試驗證和維護。

因為用戶需求不斷在變，或者用戶不能詳細清晰地理解需求，不斷做出一個Prototype來驗證我們的理解是否正確，是非常重要的。我們做prototype的過程，也走完了瀑布的大部分，所以將整個流程變成一個不斷循環的瀑布，即螺旋模型。

這個是大多數大型IT公司在用的模型，而小型創業公司，或思路沒有很成熟的項目，則是互動遞增地開發，不斷地出prototype，靈活性強，通常用的是敏捷模型，而敏捷模型的核心互動開發。

無論採取什麼樣的方法，最關鍵的理念是弄清楚用戶需要什麼，模型中的一切方法實際上都是為這個理念服務，不斷地詢問和確認用戶需求、撰寫需求和設計文檔、開發Prototype，都是為了問用戶:「這是你想要的嗎？」

基本流程是產品功能分析----操作邏輯分析---畫框架圖----頭腦風暴/討論----修改框架圖---做PS效果圖----交付程序員部署

1，PM提出設計需求。（比如，有個什麼界面啊或者活動頁啊，需要設計下的）

2，最重要的一步：UI和PM溝通需求，這叫理解和確認需求。
（因為pm和ui站的角度不一樣，所以要溝通好，要了解pm想要的是什麼，要確認需求流程是否有問題，交互邏輯是不是清晰。）

千萬不要避免拿到了一需求，就開始找圖啊，打開ps畫的。

為什麼有的人能一稿過，有的人要一遍一遍的來來回回的改，就是因為這一步沒有溝通好。

3，第二重要的一步：構思，然後網上找素材，找感覺。

你所找的設計參考圖的質量，最終決定了你最後做出來的設計稿的質量。
一開始就看到很多很優秀很高質量的設計參考圖，那麼你設計時自然而然的就會往這個高度靠攏。

4，打開ps，開始做圖
有了前面對需求的理解，和一些優秀設計的參考，這時你的心裡已經很清晰了。做起來就會很輕鬆了。

5，第三重要的一步：UI和PM再次溝通，確認設計的完整性。
設計稿做完後，會有跟pm進行二次溝通確認。要確認pm提出的需求是否都在設計稿裡面體現出來沒？有沒有遺留？

這時，一般pm在看完設計稿後，會提一些小的修改建議的。這也是為了避免最後輸出後，pm進行微調修改時，需要重新再次輸出。

6，設計輸出，切圖＋標註。（盡量輸出前跟rd們溝通下，他們需要怎麼那些圖，怎麼給它們）
這時，因為前面跟pm有了2次確認了，也跟rd們溝通了設計輸出了，
設計ok，輸出ok，所以就可以大膽放心的輸出了。

7，UI聯調
rd開發完後，需要確認開發出來的界面跟設計稿的界面是否一樣。

樓上那幾位也搞得太複雜了，寫代碼時候有沒見那麼多講究