自從我在Dribbble上貼了一幅我的產(chǎn)品設(shè)計成果，受到了大家伙熱烈的反饋访忿，對此我深受鼓勵，我決定寫下這篇文章斯稳，用來記錄我這兩年里作為產(chǎn)品設(shè)計師海铆，所學(xué)到的東西。

　　說起來有點慚愧挣惰，這幾年我一直都在使用同一套產(chǎn)品設(shè)計的流程卧斟，但是我覺得這套流程最適合我，對我來說是最理想的憎茂，所以就很少去更換珍语。我的這套工作流程我覺得有4個地方可以和大家分享一下——前期工作、具體設(shè)計竖幔、后期工作以及一些提高效率的小細(xì)節(jié)

　　一板乙，前期工作

　　1.畫!

　　無論是一張紙、筆記本拳氢，還是一片什么能寫的玩意兒募逞，都可以。我需要用紙筆記錄下腦中的創(chuàng)意馋评，避免遺忘放接。有些時候，靈感經(jīng)常不經(jīng)意出現(xiàn)留特，而一時半會兒又找不到合適的紙透乾，因此我會用銀行收據(jù)、餐館賬單磕秤、書籍封面等做暫時記錄。

　　草圖記錄理念

　　可以專門用一個筆記本來收集你的創(chuàng)意捧韵，不時的翻翻市咆，可能會找到一些非常有趣的舊想法，你可以根據(jù)這些舊點子想一些新玩意兒再来。

　　2. 收集圖片

　　“一位藝術(shù)家必定是一位收藏家蒙兰。他懂得品味藏品，而不是單純的‘貯藏’芒篷。他們懂得有選擇得去收藏搜变。他們會根據(jù)自己內(nèi)心的喜好選擇收藏的東西“

　　還有一項前期要做的工作就是收集圖片，我每天都會收集一些圖片针炉。收集圖片的方法可能有好幾百種挠他，但是我還是習(xí)慣最Old-School的方法——Dropbox文件夾分類(例如，我會分成后臺界面設(shè)計篡帕、iOS設(shè)計殖侵、插畫設(shè)計等等)每當(dāng)我有新的項目的時候贸呢，我就會看看這些圖片，用來尋找靈感拢军。

　　3. 情緒板和準(zhǔn)備工作

　　Dribbble楞陷，Behance，Pttrns茉唉，Pinterest——我們有很多可以需找靈感的地方固蛾。而且很容易就能找到和你項目相關(guān)的作品。多去逛逛度陆，你可能會從別人的經(jīng)驗中學(xué)會解決問題艾凯。

　　當(dāng)我開始新項目的時候，我總會準(zhǔn)備4個文件夾——PSD坚芜，屏览芳，資源，靈感鸿竖。我會把和這個項目相關(guān)的東西全部按下面分類丟到文件夾里面沧竟。

　　可以是Behance上整套案例的研究，也可以是整個應(yīng)用中的一張界面設(shè)計圖缚忧。

　　二悟泵、開始著手設(shè)計

　　4. 不必在乎線框圖的質(zhì)量

　　我不喜歡精雕細(xì)琢線框圖。畢竟闪水，這玩意兒只是一個過渡糕非，而且客戶能夠預(yù)先準(zhǔn)備好線框圖就更好了。真正的業(yè)界好客戶(而且肯定對品質(zhì)也有追求的)肯定預(yù)先會以草圖或者線框圖的形式來表述需求球榆。

　　線框圖的作用是就是讓彼此更好的理解目的朽肥，而不是最終結(jié)果。線框圖能夠幫助架構(gòu)層級持钉，讓你了解大概需要多少屏界面衡招，讓你了解客戶的想法

　　設(shè)計師必須懂得去“敏捷”設(shè)計，如果真的太在意線框圖的細(xì)節(jié)每强，那么整個設(shè)計流程會拉長始腾，設(shè)計師應(yīng)該學(xué)會去取舍。

　　5. PSD - 大尺寸畫布

　　我記得7個月前開始Badoo項目的時候空执，我最開始觀摩了一下同事的工作方法浪箭，我覺得他不是很得要領(lǐng)。最好用PS做一個大尺寸畫布辨绊，用來承載流程中的一些細(xì)節(jié)奶栖。我一般會創(chuàng)建8000*5000的畫布，不是用來畫出整個應(yīng)用的UI套件，而是用來記錄元素在不同階段的不同狀態(tài)——也就是流程驼抹。設(shè)計復(fù)用很方便桑孩，開發(fā)看到這種東西也會工作的更快。

　　6. 所有屏都放入一個PSD中

　　如果是移動應(yīng)用框冀，我喜歡把所有屏的界面設(shè)計全部裝入到一個PSD中流椒。

　　在設(shè)計移動應(yīng)用時，我喜歡把整個流程中所有屏的界面設(shè)計全部裝入到一個PSD中明也，整體的對比效果會更好宣虾，也更容易讓他人理解你的設(shè)計理念。

　　元素的復(fù)用也非常方便温数，只需要復(fù)制一下其他屏的圖層/圖層組绣硝，修改一下背景或者幾個圖標(biāo)就成了。

　　7. 整理撑刺、規(guī)范圖層和圖層組

　　我是一個崇尚整齊的人鹉胖，因此我的PSD結(jié)構(gòu)非常的有序。我個人的規(guī)則是够傍，如果超過8個圖層甫菠，那么就創(chuàng)建一個圖層組。

　　這里推薦一下《PS禮儀手冊》冕屯，有興趣的可以去看看

　　8. 和朋友溝通

　　我非常重視那些能夠給出專業(yè)性反饋意見的人寂诱。留意他們的反應(yīng)和初次看到你設(shè)計時的想法，這未嘗不是一種用戶測試安聘。而且多聆聽別人的意見痰洒，能夠讓你從不同的角度看待問題。在整個設(shè)計流程中浴韭，我盡可能的多和別人溝通丘喻，避免出現(xiàn)主觀差錯。每個人都可以給出一些不錯的意見念颈。還記得那句話嗎?“只要你進了這個屋子仓犬，你就是用戶體驗設(shè)計師∩岢Γ”

　　9.圖示

　　當(dāng)所有屏的設(shè)計都裝入到一個PSD中后。應(yīng)該做一點圖示窘面，用來暗示交互流程翠语，我覺得這算是一種早期原型設(shè)計吧，與此同時财边，還能充分感受到視覺設(shè)計的細(xì)節(jié)肌括。集中到一個PSD中的好處是，如果你畫多個交互流程，畫多個以上的時候谍夭，指示線的視覺風(fēng)格可能會混亂黑滴，而一個PSD能夠讓你整體視覺高度一致。

　　三 種不同的指示線——第一種指示線用來指示界面流程(并帶有序號)紧索，第二種用來指示屏幕內(nèi)的鏈接或元素袁辈，第三種用來指示外部鏈接或應(yīng)用

　　指示線搭配內(nèi)容的效果

　　整體預(yù)覽

　　很多人喜歡把連線搞得滿屏都是，但是我采用了一種更靈活的方法珠漂，我的線可以畫得很短晚缩，只需要連接到一個圓圈數(shù)字，就可以代表連接到第幾屏媳危。減少連線的繁雜感荞彼。

　　為了讓你們更好理解我上述的心得，這里我給出一份PSD待笑，各位請參考：

　　https://www.dropbox.com/s/lnxg174ib9iqpa8/Diagram-Template.zip 三鸣皂、后期工作——視覺規(guī)范

　　完成了設(shè)計工作后，要做的事情就是出一份視覺規(guī)范暮蹂，然后檢查一下整體的視覺層級寞缝。我個人認(rèn)為，無論是小型項目還是大型項目椎侠，視覺規(guī)范都有其存在的必要性第租。無論是對你自己，還是對于同事我纪，都能起到很好的規(guī)范作用慎宾，避免不一致的設(shè)計。

　　10. 配色表

　　扁平化的要領(lǐng)之一是配色精簡浅悉。也方便了我們展現(xiàn)配色表趟据。

　　11. 字體表

　　要完善的記錄Logo使用的字體，文本使用的字體术健，標(biāo)題使用的字體等等汹碱，這對于開發(fā)會大有裨益。個人復(fù)查作品時也會很有幫助荞估。

　　12. UI 套件

　　UI套件非常重要咳促，尤其對于工作對接來說，能夠保持視覺高度的一致性勘伺。前端也非常需要這東西跪腹。做好了之后丟給前端，他要問你飞醉，你就說這東西在UI套件中冲茸，他立馬就能明白了。這一條非常重要，關(guān)系到整體的視覺一致性轴术。

　　四难衰、提高效率的一些建議

　　13. 待辦事項

　　前面已經(jīng)提過，我是一個崇尚有序的人逗栽。因此我高度依賴待辦事項清單盖袭。我推薦Cultured Code的Things，或者直接用一張紙來做真正的待辦事項清單也可以祭陷。這樣當(dāng)你完成整體清單時苍凛，感受會非常的棒。以前可能我會5項工作同時展開兵志，但是最近我發(fā)現(xiàn)醇蝴，如果僅僅做1-2項工作，我會更集中想罕，效果也自然會更好悠栓。

　　14. 目標(biāo)

　　必須要清除的了解，你想要達成什么目標(biāo)按价，但是也不要過于受目標(biāo)限制惭适。我一般會指定14天的目標(biāo)(類似沖刺計劃)和嫉妒目標(biāo)。我會設(shè)定一些對我來說是新里程碑的目標(biāo)(比如用AE完成我個人的第一個動效設(shè)計)以及日常目標(biāo)(完成2個Behance案例研究)

　　其他

　　個人不用鼠標(biāo)楼镐，用的是繪圖板癞志，PS沒有打開工具面板，因為所有工具的快捷鍵我都記住了框产。然后PS作品iPhone預(yù)覽我用的是Skala Preview凄杯。個人想學(xué)習(xí)Sketch和AE。原型設(shè)計秉宿，網(wǎng)頁設(shè)計我用InVision應(yīng)用戒突，iOS設(shè)計我用Marvel應(yīng)用。有時候還會用POP進行一些早期原型設(shè)計描睦。

　　結(jié)語

　　這就是我的工作流程膊存，希望你能從中得到幫助。