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

一、獲取需求

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

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

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

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

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

二、收集資料

了解需求后，要整理整合相關(guān)信息，尤其是要設(shè)計一個完整產(chǎn)品的時候。

這個過程中要明確以下內(nèi)容：

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

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

三、結(jié)構(gòu)圖

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

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

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

1. 概念模型就是把這個產(chǎn)品涉及的用戶、環(huán)境、提供的服務(wù)大致畫個關(guān)系圖。具體可以參考《高效溝通設(shè)計之道》第4章中的方法，可以參考我的讀書筆記http://www.jianshu.com/p/377f60e1e88f。
2. 層級圖就是把產(chǎn)品具體的層級結(jié)構(gòu)規(guī)劃并畫下來?；咀裱纱蟾诺骄唧w的順序。先列出大致的幾個部分，然后慢慢細化，并增加自己想到的需要注意的點。具體可以參考《高效溝通設(shè)計之道》第5章中的方法，可以參考我的讀書筆記http://www.jianshu.com/p/174a87393d6b。
3. 流程圖就是把用戶想要完成一個任務(wù)的過程一步一步列出來，各種操作的可能性要盡可能多的考慮到?？梢詤⒖糷ttp://www.woshipm.com/rp/149653.html這位作者分享的流程圖。

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

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

四、交互設(shè)計

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

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

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

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

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

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

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

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

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

五、視覺設(shè)計、動效

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

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

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

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

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

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

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

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

六、切圖標注

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

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

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

總結(jié)

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

分享標題：產(chǎn)品設(shè)計師工作流程總結(jié)
網(wǎng)頁路徑：http://jinyejixie.com/news/173722.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈、云服務(wù)器、服務(wù)器托管、做網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

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