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

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

一、前期工作

1.畫！

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

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

2.收集圖片

還有一項前期要做的工作就是收集圖片。收集圖片的方法可能有好幾百種,但是我還是習慣最Old-School的方法—Dropbox文件夾分類(例如，我會分成后臺界面設(shè)計、i0S設(shè)計、插畫設(shè)計等等)每當我有新的項目的時候.我就會看看這些圖片，用來尋找靈感。

3.情緒板和準備工作

我們有很多可以豁找靈感的地方。而且很容易就能找到和你項目相關(guān)的作品。多去逛逛你可能會從別人的經(jīng)驗中學會解決問題。

當我開始新項目的時候.我總會準備4個文件夾—PSD、屏、資源、靈感。我會把和這個項目相關(guān)的東西全部按下面分類丟到文件夾里面。

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

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

我不喜歡精雕細琢線框圖。畢竟.這玩意兒只是一個過渡.而且客戶能夠預(yù)先準備好線框圖就更好了。直正的業(yè)界好客戶(而且肯定對品質(zhì)也有追求的)肯定預(yù)先會以草圖或者線框圖的形式來表述姍求。線框圖的作用是就是讓彼此更好的理解目的，而不是最終結(jié)果。線框圖能夠幫助架構(gòu)層級，讓你了解大概需要多少屏界面，讓你了解客戶的想法。設(shè)計師必須懂得去“敏捷”設(shè)計，如果真的太在憊線框圖的細節(jié)，那么整個設(shè)計流程會拉長，設(shè)計師應(yīng)該學會去取舍。

5. PSD一大尺寸畫布

我記得7個月前開始Bado。項目的時候，我最開始觀摩了一下同事的工作方法，我覺得他不是很得要領(lǐng)。最好用PS做一個大尺寸畫布，用來承載流程中的一些細節(jié)。我一般的畫布，不是用來畫出整個應(yīng)用的UI套件.而是用來記錄元素在不同階段的不同伏態(tài)—也就是流程。設(shè)計復用很方便，開發(fā)看到這種東西也會工作的更快。

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

如果是移動應(yīng)用.我喜歡把所有屏的界面設(shè)計全部裝入到一個PSD中。在設(shè)計移動應(yīng)用時，我喜歡把整個流程中所有屏的界面設(shè)計全部裝入到一個PSD中整體的對比效果會更好.也更容易讓他人理解你的設(shè)計理念。元素的復用也非常方便，只浦要復制一下其他屏的圖層/圖層組，修改一下背景或者幾個圖標就成了。

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

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

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

8.和朋友溝通

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

9.圖示

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

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

三、后期工作–視覺規(guī)范

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

10.配色表

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

11.字體表

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

12.UI套件

UI套件非常重要，尤其對于工作對接來說，能夠保持視覺高度的一致性。前端也非常需要這東西。做好了之后會丟給前端，他要問你，你就說這東西在UI套件里，他立馬就能明白了。

這一條非常重要，關(guān)系到整體的視覺一致性。

四，提高效率的一些建議

13.待辦事項

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

14.目標

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

五，其他

• 個人不用鼠標，用的是繪圖板；
• PS沒有打開工具面板，因為所有工具的快捷鍵我都記住了；
• PS作品iPhone預(yù)覽用Skala Preview；
• 個人想學AE和Sketch；
• 原型設(shè)計，網(wǎng)頁設(shè)計用InVision；
• iOS設(shè)計我用Marve；
• 有時會用POP進行一些早期原型設(shè)計。

個人不用鼠標，用的是繪圖板，PS沒有打開工具面板，因為所有工具的快捷鍵我都記住了。然后PS作品iPhone預(yù)覽我用的是Skala Preview。個人想學Sketch和AE。原型設(shè)計，網(wǎng)頁設(shè)計我用In Vision應(yīng)用.iOS設(shè)計我用Marvel應(yīng)用。有時候還會用POP進行一些早期原型設(shè)計。

結(jié)語

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

原文地址：https://medium.com/@JanLosert/14-different-ways-of-product-design-3f349a19e613

翻譯者：MartinRGB

MartinRGB的地址：http://i.ui.cn/ucenter/88338.html

版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會明確標注作者和來源，若標注有誤，請聯(lián)系主編QQ：419297645