我從入行開始就在一個做自己產品的小公司工作，到現在已經三年了。剛開始工作的時候什么也不懂，老板說讓出效果圖，就開始直接上手作圖。后來看的內容多了，會的技能多了，慢慢開始改進自己的工作流程?，F在已經可以快速并且一步步扎實的完成工作。工作內容包括：獲取需求、收集資料、結構圖、交互設計、視覺設計、切圖標注。希望能和大家交流，進步。

一、獲取需求

我所在公司的需求都是老板或者產品經理直接告知，根本沒有用戶測試部分。而且用戶群根本不在同一地點，也不說中文。這種情況下我的處理通常是先看這個需求急不急。

如果這個需求很急，并且老板也明確跟我說要一個什么樣的功能。我會直接開始著手，按照老板的要求直接完成設計，出視覺稿。

如果需求不急，而且涉及的內容比較多，我會多問老板以及和客戶對接的同事一些客戶的反饋，畢竟他們和客戶有直接接觸，比我自己純想想更能接近用戶。當然最好的還是要做用戶測試，這也是我目前嘗試的目標，希望能說服與客戶對接的同事，進行用戶測試。

這個用戶測試是指觀察用戶使用產品的過程，畢竟公司現在已經有線上的產品了。下一步就可以考慮建立人物模型了。這樣公司的整個設計流程就能完整了，對產品以后的發展也是有好處的。

工具：omnifocus   只要能記錄下需求的載體都可以，最好能保證以后可以查看，留個憑證。

二、收集資料

了解需求后，要整理整合相關信息，尤其是要設計一個完整產品的時候。

這個過程中要明確以下內容：

1. 這個產品依賴的硬件。是客戶端還是網頁，網頁要不要考慮pad端。這個產品是不是為某種硬件設計的，比如智能手表、智能眼鏡等。這些硬件屏幕的分辨率，這個平臺有沒有設計規范，畢竟后面的設計工作也是自己做，就順便先了解了。
2. 開發技術上的約束限制。
3. 如果是再設計，要熟悉產品的一些特殊限制。比如在日語輸入情況下，不能用enter鍵代替搜索、確認等按鈕，因為日語輸入時需要enter鍵確認輸入。中英文輸入都沒有這個問題。那么設計的時候就一定要有個按鈕。

以上搜集的資料要列下來，可以放在結構圖之前，一是提醒自己，二是做個記錄。

三、結構圖

結構圖這個名字是我自己起的，這個步驟主要是理清思路，為畫交互稿做準備。我說的結構圖包含概念模型、層級圖、流程圖等。依據項目的復雜度、時間、團隊習慣，自己把握這幾種圖的精細程度。

要做好結構圖的版本管理工作，每次修改更新一個版本，并列出大致的修改內容、時間，如果涉及到多人協作，要把修改人寫進去。

如果只是自己看，紙上草圖或者用軟件畫，都可以。如果要和團隊成員共享，使用軟件是比較好的，畫出來好看，而且易修改。

1. 概念模型就是把這個產品涉及的用戶、環境、提供的服務大致畫個關系圖。具體可以參考《高效溝通設計之道》第4章中的方法，可以參考我的讀書筆記http://www.jianshu.com/p/377f60e1e88f。
2. 層級圖就是把產品具體的層級結構規劃并畫下來。基本遵循由大概到具體的順序。先列出大致的幾個部分，然后慢慢細化，并增加自己想到的需要注意的點。具體可以參考《高效溝通設計之道》第5章中的方法，可以參考我的讀書筆記http://www.jianshu.com/p/174a87393d6b。
3. 流程圖就是把用戶想要完成一個任務的過程一步一步列出來，各種操作的可能性要盡可能多的考慮到。可以參考http://www.woshipm.com/rp/149653.html這位作者分享的流程圖。

做完流程圖后，可以在晨會或者專門開個會，把層級圖、流程圖拿出來跟大家討論一下，看看自己規劃設計的是不是合理，有哪些自己沒想到的情況，補充完整。對于大家的意見要站在用戶立場有選擇的聽，設計師是唯一代表用戶的人了。

這部分用到的軟件和交互設計部分用到的軟件放在一起討論。

四、交互設計

有了結構圖后，我會根據層級圖先在紙上快速畫一畫，然后結合流程圖，多想幾個能讓流程更順暢的方案，而不是拘泥于層級關系。沒思路的時候要多找些參考啟發下，也可以先把問題放放，過段時間再來想會有新的更好的想法。時間允許的話，可以一直想到自己滿意這個方案，不覺得好像差在哪里為止。但是這樣效率不高，而且后面還是自己進行設計，到時候有想法再改也可以。

交互設計過程中，有兩點要盡量遵循，一是要平臺的設計規范，二是通用的交互設計原則。在沒有更好的解決方案之前，遵循以上兩點不會出錯。當然也不能為了不出錯而不追求出彩。我的經驗是，通常一個產品里出彩的地方有1、2個就可以了，處處出彩會讓用戶無法專注自己的任務。

我感覺其實APP的設計會比網頁設計要簡單。無論是iOS還是Android都有設計模板，拿過來用就能設計個及格的方案。網頁面積更大，可以承載的內容功能更多，設計方案的可能性也越多。

如果平臺規范和通用原則都無法讓我想出設計方案，那就是時候拿出大招--找參考資料了。找的資料不必局限于想設計的部分，比如我想設計登陸，不一定只找登陸，也可以找一些表單的頁面，“跨界”擦出的火花也不錯啊。找參考要明確自己的目的，我是為尋找什么來翻看這些參考資料的，不能迷失在參考資料里，那樣會降低效率、浪費時間。找參考不要抄襲，別人的產品這樣做放在自己產品身上未必合適，就像一件衣服穿在名模身上是愛馬仕，穿在黃渤身上就是水管工一樣（不是黑黃渤，其實我是青島貴婦的粉）。

我常用的找參考資料的地方：dribble、enhance、Pinterest、calltoidea等等。有條件還是翻墻吧。

交互原型完成后，要聽聽大家的意見，對于大家的意見要有選擇的聽，有的程序員會為降低自己的工作量說這個方案不好之類的，或者有的程序員會過度考慮邊緣情況，這時候要站在用戶立場堅持自己的設計。如果程序員說這個方案開發起來要很久，發版本之前根本來不及，這時候還是要妥協的，商量出一個用戶體驗不會太差又能來得及的方案。做設計一定要以open mind的心態來聽意見，大姨媽大姨夫期間討論之前先念三遍open mind，再進行討論。如果團隊改需求之風盛行，拿出交互稿讓老板拍板也是不錯的選擇。

接下來結合上一部分說說軟件。我用過mindmanager、omnigraffle、Axure。mindmanager畫層級圖比較有優勢，但是不能無縫對接交互設計。omnigraffle、Axure都可以在一個文件里完成結構圖和交互原型。omnigraffle畫結構圖有優勢，自帶交互設計中用到的各種模板（APP和網頁），但是導出的文件不能像axure導出的文件那樣有個左邊欄的頁面導航，動效也很有限。axure能畫結構圖，但不能自動排版，另一個缺點用瀏覽器打開高版本的Axure導出的html文件需要安裝插件，除非使用Axure share，優點是有導航、動效豐富。  這兩個軟件各有利弊，看自己習慣吧。

對于APP的草稿交互，我用過pop這個APP，先打印紙質模板，把紙上的圖拍照，使用pop簡單制作個可點擊的原型。有了這個原型，討論起來會更加方便，而且說不定能再點擊過程中發現問題或者想出新方案。

具體指導交互設計的內容我推薦《about face 4》的二、三部分，看完絕對能讓自己的知識形成體系，擺脫知其然而不知其所以然的窘境。

五、視覺設計、動效

有了交互原型，完成視覺設計還是比較省心的。千萬不要同時設計交互和視覺，哪怕只是簡單地在紙上畫畫交互，不然效率低、易出錯，自己也特別累。

視覺設計開始之前要了解企業的品牌、主色，用戶的喜好。無法直接獲得用戶喜好，那就結合產品提供的服務特色定義主色調，風格。比如餐飲常用紅色、黃色。也可以考慮老板的喜好（通稿率會比較高，這個不是正途啊，有的老板以自己的喜好判斷用戶的喜好）。

下面開始找參考資料，看看這個色調的大牛設計的好看的界面是怎么配色的，尤其是各種灰度的高級灰用起來，真比普通灰效果好很多。看的過程中，找個合適的輔色，色相上不要超過2種，比較難駕馭，目前我的水平是最多兩種顏色。當然也可以出現多個色彩，但是除了主色、輔色外的這些色彩占得面積一定要小小小。把這些顏色加到色板中，方便設計過程中取用。

基本確定好顏色和風格，就可以畫起來了。根據交互原型想表達的意思，了解信息從高到低的重要程度。重要的內容要突出出來，通過面積、顏色等，不重要的內容弱化，該小的小，該灰的灰。畫完一張圖，試著瞇眼看這張圖，能一眼看到想突出的內容，基本就算成功了。畫的過程中，顏色不夠用，可以繼續加。

目前我在嘗試建立產品的UI kit，將設計拆解為一塊塊可重復使用的模塊。這樣開發后期想加功能，可以先從模塊下手，提高效率，不用等著出設計稿了。初步的經驗是，一塊模板可以是2、3條內容組成的表單，確定取消按鈕組合、彈框等等。做這些UI kit時候，里面的文字內容最好用不明確含義的字，比如lorem。要跟開發們特意說這件事，不然他們會忘，因為公司以前沒有這樣的習慣。

關于動效，我的體會一定要結合產品功能，不能為了加動效而去硬加，要關注產品整體。特別炫的效果的不要太多，1、2個夠了，多了眼花。潤物細無聲動效要有，比如頁面跳轉、折疊收起等等，可以極大的提升產品逼格。常規的動效一定要找參考，不能整太多的幺蛾子，設計的太跳會讓用戶“出戲”。但是條件允許條件下，那一兩個特別炫麗的，可以設計得特別一些，目的就是讓用戶“出戲”，形成記憶點。

現在說說軟件，我要安利sketch了。以前我用ps設計，后來試用了Sketch，立馬拋棄了ps。sketch可以直接創建各種手機屏幕尺寸和網頁的畫板，symbol 和shared style 更是好用的不要不要的，特別適合搭配UI kit。再有各種好用到哭的插件，一鍵生成各種頭像、人名、文字等等。重點來了，sketch連接后續動效principle和切圖zeplin會極大提高效率。

principle據說可以直接接受sketch拖動來的圖層，但是我還沒成功過，所以我使用復制黏貼也基本能滿足需要。principle可以自動生成過渡效果，對生成的動效不滿意，還可以自由調整。

六、切圖標注

準備切圖的時候，我會把需要切圖的圖標們，單獨放在一個畫板中，避免重復切圖。

對于APP的切圖，我會對復制過來的按鈕、背景尺寸比較大的圖進行壓縮。比如100px寬的按鈕，除了圓角部分，中間的區域可以調整為10px寬，方便Android開發們繪制.9格式。sketch可以一次導出所有需要的尺寸，并命好名。

標注我使用zeplin，在sketch安裝插件后，可以直接在sketch里選擇想要導入到zeplin的畫板，并導出，方便查看絕對尺寸、相對尺寸、字體、顏色等等，還可以自動為色板中的顏色命名（Android開發很喜歡）、生成代碼，復制文字內容，對開發們很友好。Zeplin每個賬戶可免費創建一個項目?？梢园裺ketch的畫板命好名，幾個產品都導入到一個項目里，但是我不推薦這樣做，會很容易混亂。還有一個方法是多注冊幾個賬號，需要郵箱的話，可以去outlook多注冊幾個，不需要手機號。

總結

說了這么多從知識、工具到職場體會的零碎內容，一是希望能幫到需要的人，二是想請大家批評指正。單打獨斗大的壞處是同行交流少，我寫文章也是為了能彌補這些不足。以上說的這些都是建立在對產品有了解的基礎上。如果是新接觸項目的產品設計師，我建議先從了解產品開始。移動網站建設,高端網站建設,企業網站建設,響應式網站

網頁標題：產品設計師工作流程總結
新聞來源：http://vcdvsql.cn/news22/173722.html

成都網站建設公司_創新互聯，為您提供外貿建站、網站營銷、App設計、全網營銷推廣、小程序開發、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯