產(chǎn)品設(shè)計(jì)師工作流程總結(jié)

2016-05-17

2675

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

一、獲取需求

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

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

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

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

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

二、收集資料

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

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

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

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

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

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

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

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

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

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

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

四、交互設(shè)計(jì)

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

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

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

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

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

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

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

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

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

五、視覺設(shè)計(jì)、動(dòng)效

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

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

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

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

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

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

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

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

六、切圖標(biāo)注

準(zhǔn)備切圖的時(shí)候，我會(huì)把需要切圖的圖標(biāo)們，單獨(dú)放在一個(gè)畫板中，避免重復(fù)切圖。

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

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

總結(jié)

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

關(guān)注我們：在查找公眾號(hào)中搜索：zomsky1688，或者掃描下方二維碼快速關(guān)注。
廣州市縱天信息科技有限公司公眾號(hào)