此文章轉(zhuǎn)自：http://www.25xt.com/appdesign/9670.html

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

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

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

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

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

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

2畅姊、移動(dòng)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)購(gòu)，糯米用的是桃紅色粗合，而美團(tuán)是翠綠色萍嬉。那么我們?cè)赨I設(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)常說的：鄰近色资柔、對(duì)比色等焙贷。都是我們選擇輔助色的方法。

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

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

定好風(fēng)格：可以根據(jù)產(chǎn)品需求，從競(jìng)品當(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)、首頁(yè)桶癣，不同的app在基本結(jié)構(gòu)一致的情況下也有很多細(xì)微的差別拥褂。倒是是要用圓角的icon、還是直角鬼廓，是用面還是線形肿仑，這背后的設(shè)計(jì)語言邏輯是什么致盟，設(shè)計(jì)目的是什么碎税。都是需要UI設(shè)計(jì)來考慮。

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

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

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

在一些細(xì)節(jié)頁(yè)面我們常常要考慮情感化設(shè)計(jì)肴敛，以此來提升app的品質(zhì)，降低用戶在異常情況下 的挫敗感吗购。同時(shí)好的設(shè)計(jì)師還會(huì)考慮到如何引導(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ì)上面。

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

因?yàn)槭謾C(jī)交互是動(dòng)態(tài)的笙什。所以我們?nèi)绻梢杂迷谝恍┨D(zhuǎn)頁(yè)面引用動(dòng)效設(shè)計(jì)，無意是對(duì)整個(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è)答案牙躺，那么具體怎么做愁憔，還是要考慮用戶、場(chǎng)景孽拷、需求等細(xì)節(jié)吨掌。產(chǎn)品可以提供方向，但是具體的落地還是需要UI設(shè)計(jì)師來完成脓恕。

APP圖標(biāo)ICON的設(shè)計(jì)尺寸是：1024*1024 ?同時(shí)也可以去下載各個(gè)平臺(tái)的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é)會(huì)一邊設(shè)計(jì)一邊用真機(jī)測(cè)試預(yù)覽圆兵。