ui設計產品的流程有什么呢?對于這個問題,想必很多的朋友們都很想搞清楚吧,既然大家都好奇的話,自然就不能夠錯過接下來的內容,一起來看看具體都有什么吧,幫助大家充分的了解。
一、前期工作
1.畫
無論是一張紙、筆記本,還是一片什么能寫的玩意兒,都可以。我們需要用紙筆記錄下腦中的創意,避免遺忘。有些時候,靈感經常不經意出現,而一時半會兒又找不到合適的紙,因此我會用銀行收據、餐館賬單、書籍封面等做暫時記錄。
可以專門用一個筆記本來收集你的創意,不時的翻翻,可能會找到一些非常有趣的舊想法,你可以根據這些舊點子想一些新玩意兒。
2. 收集圖片
“一位藝術家必定是一位收藏家。他懂得品味藏品,而不是單純的‘貯藏’。他們懂得有選擇得去收藏。他們會根據自己內心的喜好選擇收藏的東西“
還有一項前期要做的工作就是收集圖片,我每天都會收集一些圖片。收集圖片的方法可能有好幾百種,但是我還是習慣最Old-School的方法——Dropbox文件夾分類(例如,我會分成后臺界面設計、iOS ui設計、插畫設計等等)每當我有新的項目的時候,我就會看看這些圖片,用來尋找靈感。
3. 情緒板和準備工作
Dribbble,Behance,Pttrns,Pinterest——我們有很多可以需找靈感的地方。而且很容易就能找到和你項目相關的作品。多去逛逛,你可能會從別人的經驗中學會解決問題。
當我開始新項目的時候,我總會準備4個文件夾——PSD,屏,資源,靈感。我會把和這個項目相關的東西全部按下面分類丟到文件夾里面。
可以是Behance上整套案例的研究,也可以是整個應用中的一張界面設計圖。

(圖片來自網絡)
二、開始著手設計
4. 不必在乎線框圖的質量
不必精雕細琢線框圖。畢竟,這玩意兒只是一個過渡,而且客戶能夠預先準備好線框圖就更好了。真正的業界好客戶(而且肯定對品質也有追求的)肯定預先會以草圖或者線框圖的形式來表述需求。
線框圖的作用是就是讓彼此更好的理解目的,而不是最終結果。線框圖能夠幫助架構層級,讓你了解大概需要多少屏界面,讓你了解客戶的想法
設計師必須懂得去“敏捷”設計,如果真的太在意線框圖的細節,那么整個設計流程會拉長,設計師應該學會去取舍。
5. PSD – 大尺寸畫布
我記得7個月前開始Badoo項目的時候,我最開始觀摩了一下同事的工作方法,我覺得他不是很得要領。最好用PS做一個大尺寸畫布,用來承載流程中的一些細節。我一般會創建8000*5000的畫布,不是用來畫出整個應用的UI套件,而是用來記錄元素在不同階段的不同狀態——也就是流程。設計復用很方便,開發看到這種東西也會工作的更快。
6. 所有屏都放入一個PSD中
如果是移動應用,我喜歡把所有屏的界面設計全部裝入到一個PSD中。
在設計移動應用時,我喜歡把整個流程中所有屏的界面設計全部裝入到一個PSD中,整體的對比效果會更好,也更容易讓他人理解你的設計理念。
元素的復用也非常方便,只需要復制一下其他屏的圖層/圖層組,修改一下背景或者幾個圖標就成了。

(圖片來自網絡)
7. 整理、規范圖層和圖層組
小編個人認為的規則是,如果超過8個圖層,那么就創建一個圖層組。
這里推薦一下《PS禮儀手冊》,有興趣的可以去看看。
8. 和朋友溝通
我非常重視那些能夠給出專業性反饋意見的人。留意他們的反應和初次看到你設計時的想法,這未嘗不是一種用戶測試。而且多聆聽別人的意見,能夠讓你從不同的角度看待問題。在整個設計流程中,我盡可能的多和別人溝通,避免出現主觀差錯。每個人都可以給出一些不錯的意見。還記得那句話嗎?“只要你進了這個屋子,你就是用戶體驗設計師。”
9.圖示
當所有屏的設計都裝入到一個PSD中后。應該做一點圖示,用來暗示交互流程,我覺得這算是一種早期原型設計吧,與此同時,還能充分感受到視覺設計的細節。集中到一個PSD中的好處是,如果你畫多個交互流程,畫多個以上的時候,指示線的視覺風格可能會混亂,而一個PSD能夠讓你整體視覺高度一致。
ui設計產品的流程有什么呢?相信大家看完之后,都有了全面的認識了吧,總之,希望上面的內容可以很好的幫助到大家。


在微信中搜索faceui