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

 

一、前期工作

1.畫!

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

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

2. 收集圖片

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

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

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

 

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

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

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

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

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

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

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

3. 和朋友溝通

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

4. 配色表

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

5. 字體表

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

 

三、提高效率的一些建議

1. 待辦事項(xiàng)

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

2. 目標(biāo)

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

 

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