自從我在 dribbble 上貼了一幅我的産品設計成果,受到了大家夥熱烈的回報,對此我深受鼓勵,我決定寫下這篇文章,用來記錄我這兩年裡作為産品設計師,所學到的東西。說起來有點慚愧,這幾年我一直都在使用同一套産品設計的流程,但是我覺得這套流程最适合我,對我來說是最理想的,是以就很少去更換。我的這套工作流程我覺得有 4 個地方可以和大家分享一下——前期工作、具體設計、後期工作以及一些提高效率的小細節
一,前期工作
1. 畫!
無論是一張紙、筆記本,還是一片什麼能寫的玩意兒,都可以。我需要用紙筆記錄下腦中的創意,避免遺忘。有些時候,靈感經常不經意出現,而一時半會兒又找不到合适的紙,是以我會用銀行收據、餐館賬單、書籍封面等做暫時記錄。
草圖記錄理念
可以專門用一個筆記本來收集你的創意,不時的翻翻,可能會找到一些非常有趣的舊想法,你可以根據這些舊點子想一些新玩意兒。
2. 收集圖檔
" 一位藝術家必定是一位收藏家。他懂得品味藏品,而不是單純的‘貯藏’。他們懂得有選擇得去收藏。他們會根據自己内心的喜好選擇收藏的東西 "
還有一項前期要做的工作就是收集圖檔,我每天都會收集一些圖檔。收集圖檔的方法可能有好幾百種,但是我還是習慣最 old-school 的方法—— dropbox 檔案夾分類(例如,我會分成背景界面設計、ios 設計、插畫設計等等)每當我有新的項目的時候,我就會看看這些圖檔,用來尋找靈感。
3. 情緒闆和準備工作
dribbble,behance,pttrns,pinterest ——我們有很多可以需找靈感的地方。而且很容易就能找到和你項目相關的作品。多去逛逛,你可能會從别人的經驗中學會解決問題。
當我開始新項目的時候,我總會準備 4 個檔案夾—— psd,屏,資源,靈感。我會把和這個項目相關的東西全部按下面分類丢到檔案夾裡面。
可以是 behance 上整套案例的研究,也可以是整個應用中的一張界面設計圖。
二、開始着手設計
4. 不必在乎線框圖的品質
我不喜歡精雕細琢線框圖。畢竟,這玩意兒隻是一個過渡,而且客戶能夠預先準備好線框圖就更好了。真正的業界好客戶(而且肯定對品質也有追求的)肯定預先會以草圖或者線框圖的形式來表述需求。
線框圖的作用是就是讓彼此更好的了解目的,而不是最終結果。線框圖能夠幫助架構層級,讓你了解大概需要多少屏界面,讓你了解客戶的想法
設計師必須懂得去 " 靈活 " 設計,如果真的太在意線框圖的細節,那麼整個設計流程會拉長,設計師應該學會去取舍。
5. psd - 大尺寸畫布
我記得 7 個月前開始 badoo 項目的時候,我最開始觀摩了一下同僚的工作方法,我覺得他不是很得要領。最好用 ps 做一個大尺寸畫布,用來承載流程中的一些細節。我一般會建立 8000*5000 的畫布,不是用來畫出整個應用的 ui 套件,而是用來記錄元素在不同階段的不同狀态——也就是流程。設計複用很友善,開發看到這種東西也會工作的更快。
6. 所有屏都放入一個 psd 中
如果是移動應用,我喜歡把所有屏的界面設計全部裝入到一個 psd 中。
在設計移動應用時,我喜歡把整個流程中所有屏的界面設計全部裝入到一個 psd 中,整體的對比效果會更好,也更容易讓他人了解你的設計理念。
元素的複用也非常友善,隻需要複制一下其他屏的圖層 / 圖層組,修改一下背景或者幾個圖示就成了。
7. 整理、規範圖層和圖層組
我是一個崇尚整齊的人,是以我的 psd 結構非常的有序。我個人的規則是,如果超過 8 個圖層,那麼就建立一個圖層組。
這裡推薦一下《ps 禮儀手冊》,有興趣的可以去看看
8. 和朋友溝通
我非常重視那些能夠給出專業性回報意見的人。留意他們的反應和初次看到你設計時的想法,這未嘗不是一種使用者測試。而且多聆聽别人的意見,能夠讓你從不同的角度看待問題。在整個設計流程中,我盡可能的多和别人溝通,避免出現主觀差錯。每個人都可以給出一些不錯的意見。還記得那句話嗎?" 隻要你進了這個屋子,你就是使用者體驗設計師。"
9. 圖示
當所有屏的設計都裝入到一個 psd 中後。應該做一點圖示,用來暗示互動流程,我覺得這算是一種早期原型設計吧,與此同時,還能充分感受到視覺設計的細節。集中到一個 psd 中的好處是,如果你畫多個互動流程,畫多個以上的時候,訓示線的視覺風格可能會混亂,而一個 psd 能夠讓你整體視覺高度一緻。
三 種不同的訓示線——第一種訓示線用來訓示界面流程(并帶有序号),第二種用來訓示螢幕内的連結或元素,第三種用來訓示外部連結或應用
訓示線搭配内容的效果
整體預覽
很多人喜歡把連線搞得滿屏都是,但是我采用了一種更靈活的方法,我的線可以畫得很短,隻需要連接配接到一個圓圈數字,就可以代表連接配接到第幾屏。減少連線的繁雜感。
為了讓你們更好了解我上述的心得,這裡我給出一份 psd,各位請參考:
三、後期工作——視覺規範
完成了設計工作後,要做的事情就是出一份視覺規範,然後檢查一下整體的視覺層級。我個人認為,無論是小型項目還是大型項目,視覺規範都有其存在的必要性。無論是對你自己,還是對于同僚,都能起到很好的規範作用,避免不一緻的設計。
10. 配色表
扁平化的要領之一是配色精簡。也友善了我們展現配色表。
11. 字型表
要完善的記錄 logo 使用的字型,文本使用的字型,标題使用的字型等等,這對于開發會大有裨益。個人複查作品時也會很有幫助。
12. ui 套件
ui 套件非常重要,尤其對于工作對接來說,能夠保持視覺高度的一緻性。前端也非常需要這東西。做好了之後丢給前端,他要問你,你就說這東西在 ui 套件中,他立馬就能明白了。這一條非常重要,關系到整體的視覺一緻性。
四、提高效率的一些建議
13. 待辦事項
前面已經提過,我是一個崇尚有序的人。是以我高度依賴待辦事項清單。我推薦 cultured code 的 things,或者直接用一張紙來做真正的待辦事項清單也可以。這樣當你完成整體清單時,感受會非常的棒。以前可能我會 5 項工作同時展開,但是最近我發現,如果僅僅做 1-2 項工作,我會更集中,效果也自然會更好。
14. 目标
必須要清除的了解,你想要達成什麼目标,但是也不要過于受目标限制。我一般會指定 14 天的目标(類似沖刺計劃 ) 和嫉妒目标。我會設定一些對我來說是新裡程碑的目标(比如用 ae 完成我個人的第一個動效設計)以及日常目标(完成 2 個 behance 案例研究)
其他
個人不用滑鼠,用的是繪圖闆,ps 沒有打開工具面闆,因為所有工具的快捷鍵我都記住了。然後 ps 作品 iphone 預覽我用的是 skala preview。個人想學習 sketch 和 ae。原型設計,網頁設計我用 invision 應用,ios 設計我用 marvel 應用。有時候還會用 pop 進行一些早期原型設計。
結語
這就是我的工作流程,希望你能從中得到幫助。
本文轉載自
(關注更多人人都是産品經理觀點,參與微信互動(微信搜尋 " 人人都是産品經理 " 或 "woshipm")
原文位址:
來自zaker: