任何一款成功的APP都需要以堅(jiān)實(shí)的產(chǎn)品概念作為基礎(chǔ)，因?yàn)楦拍顩Q定了產(chǎn)品最終完成的潛力。

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

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

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

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

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

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

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

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

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

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

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

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

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

在考慮到產(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)中找到幾個(gè)合適的參考。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

推薦：

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

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