任何一款成功的APP都需要以堅實的產(chǎn)品概念作為基礎(chǔ)，因為概念決定了產(chǎn)品最終完成的潛力。

一般情況下，交到app設(shè)計師手里的都是移動app產(chǎn)品原型圖。當(dāng)然這個是在移動產(chǎn)品經(jīng)理反復(fù)斟酌，并且與大家開會討論需求定下來的一個產(chǎn)品交互原型。

當(dāng)你拿到參與討論確定好的這個移動app產(chǎn)品原型之后，你是不是需要重新理清楚一下整個產(chǎn)品的業(yè)務(wù)邏輯和UI相關(guān)的事情。

所以，今天25學(xué)堂借助簡書上的血兒的一篇博文《UI到底做什么》來跟大家好好的聊聊，到底如何七步搞定app界面設(shè)計。

當(dāng)然，大家有興趣可以閱讀：

1、你必須要知道移動APP的設(shè)計要點(diǎn)，才能玩轉(zhuǎn)APP設(shè)計

2、移動APP布局設(shè)計經(jīng)驗之道：獨(dú)門七字訣

3、成功設(shè)計一款A(yù)pp需要注意哪些問題？

下面就跟隨血兒設(shè)計師來看下如何搞定app設(shè)計

第一步、從APP產(chǎn)品需求入手，考慮我們到底要用什么主色調(diào)

定好主色調(diào)：比如同樣是團(tuán)購，糯米用的是桃紅色，而美團(tuán)是翠綠色。那么我們在UI設(shè)計的時候首先就要考慮主色調(diào)的問題。

定好尺寸：設(shè)計尺寸是多大，是以640*1136設(shè)計還是750*1136 還是1242 *2208來設(shè)計。

所有APP設(shè)計尺寸大小規(guī)范：點(diǎn)擊查看全部的app設(shè)計尺寸

第二步、配色和輔助色用什么顏色

在考慮到產(chǎn)品氣質(zhì)和品牌色的同事，我們經(jīng)常要考慮配合襯托產(chǎn)品主色調(diào)的輔助色。在不同的產(chǎn)品中，輔助色運(yùn)用的策略是不同的，比如我們經(jīng)常說的：鄰近色、對比色等。都是我們選擇輔助色的方法。

配色在線網(wǎng)站：http://colourco.de/?以及主色調(diào)和輔助色的信息圖解APP色彩搭配方案是由主色、輔助色和點(diǎn)綴色構(gòu)成

第三步、用什么風(fēng)格來表達(dá)

定好風(fēng)格：可以根據(jù)產(chǎn)品需求，從競品當(dāng)中找到幾個合適的參考。

現(xiàn)在來說，說到風(fēng)格一句話，扁平風(fēng)。但是在扁平中也有區(qū)別。比如下圖，同樣是扁平。但是左圖微微帶有一些光影，而右圖是純扁平。你能說哪個好或者不好嗎？不能。

同樣的信息，在UI的表達(dá)上也有不同的表達(dá)方式。那么只能在具體你的UI設(shè)計中去考慮具體你需要用什么風(fēng)格。這些都是UI的工作內(nèi)容。

第四步、APP圖標(biāo)化畫成什么風(fēng)格和創(chuàng)意表達(dá)

同樣是設(shè)置、發(fā)現(xiàn)、首頁，不同的app在基本結(jié)構(gòu)一致的情況下也有很多細(xì)微的差別。倒是是要用圓角的icon、還是直角，是用面還是線形，這背后的設(shè)計語言邏輯是什么，設(shè)計目的是什么。都是需要UI設(shè)計來考慮。

比如：同樣是騰訊的產(chǎn)品，手Q和微信的icon就完全不一樣。其原因是由于產(chǎn)品面面對的人群不同，手Q更偏年輕化。同樣，你去看陌陌、來往、易信的聊天icon也是不一樣的。這都是需要UI設(shè)計師一點(diǎn)點(diǎn)摳細(xì)節(jié)的去畫出來的。

第五步、如何表達(dá)情感化設(shè)計，特別是app引導(dǎo)頁的設(shè)計和啟動頁的設(shè)計

相關(guān)的博文推薦：談?wù)勅绾芜M(jìn)行產(chǎn)品設(shè)計以及產(chǎn)品情感化設(shè)計

在一些細(xì)節(jié)頁面我們常常要考慮情感化設(shè)計，以此來提升app的品質(zhì)，降低用戶在異常情況下 的挫敗感。同時好的設(shè)計師還會考慮到如何引導(dǎo)用戶去解決，從而滿足產(chǎn)品訴求。不同的產(chǎn)品在做情感化設(shè)計的時候方式方法不同，風(fēng)格也不一樣。這些也都是需要UI設(shè)計來處理的。

這些情感化的設(shè)計元素，始終要貫穿到整個APP界面設(shè)計當(dāng)中去。特別是一些細(xì)小的情感交互設(shè)計上面。

第六步、動效如何做或者說APP交互怎么實現(xiàn)

因為手機(jī)交互是動態(tài)的。所以我們?nèi)绻梢杂迷谝恍┨D(zhuǎn)頁面引用動效設(shè)計，無意是對整個app加分的好方法。

好的app交互設(shè)計體現(xiàn)出一個app設(shè)計師的水平，同時也提升這個app設(shè)計的檔次。也能讓客戶端的程序員更明白設(shè)計師的心思。

第七步、宣傳推廣的APP ?圖標(biāo)icon 的設(shè)計

關(guān)于app的圖標(biāo)設(shè)計方法，一萬個人有一萬個答案，那么具體怎么做，還是要考慮用戶、場景、需求等細(xì)節(jié)。產(chǎn)品可以提供方向，但是具體的落地還是需要UI設(shè)計師來完成。

APP圖標(biāo)ICON的設(shè)計尺寸是：1024*1024 ?同時也可以去下載各個平臺的icon設(shè)計模板

最新iOS圖標(biāo)模板和iphone、ipad GUI設(shè)計模板2015推薦

最后，在設(shè)計app界面的過程當(dāng)中，也要把APP切圖、適配的因素放在心上。避免后期切圖和程序員適配出現(xiàn)不合理的設(shè)計之處。還有一點(diǎn)不容忽視的很重要的一個步驟。

就是學(xué)會一邊設(shè)計一邊用真機(jī)測試預(yù)覽。

推薦：

移動設(shè)備中實時預(yù)覽APP設(shè)計效果圖的2款國產(chǎn)神器

快速在移動終端上預(yù)覽APP界面設(shè)計效果圖的方法