在多年的APP開發(fā)經(jīng)驗中，我們積累了一些UI設(shè)計的流程和方法，在這里分享給做APP設(shè)計的設(shè)計師們。

 

一、前期工作

1.畫!

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

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

2. 收集圖片

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

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

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

 

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

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

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

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

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

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

建議如果超過8個圖層，那么就創(chuàng)建一個圖層組。

3. 和朋友溝通

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

4. 配色表

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

5. 字體表

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

 

三、提高效率的一些建議

1. 待辦事項

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

2. 目標(biāo)

必須要清除的了解，你想要達成什么目標(biāo)，但是也不要過于受目標(biāo)限制。

 

以上就是UI設(shè)計的一些工作流程，希望你能從中得到幫助。