這節(jié)課的主題就是讓大家快速上手學(xué)習(xí)APP設(shè)計(jì)，關(guān)鍵詞漂亮、簡(jiǎn)潔。

漂亮的APP界面設(shè)計(jì)都保持的一致性和細(xì)致化的設(shè)計(jì)。

下面25學(xué)堂的小編教大家如何運(yùn)用6個(gè)步驟來(lái)設(shè)計(jì)出漂亮的APP UI界面。

第一步、關(guān)注和重視品牌的LOGO ?

正確理解品牌的意義是APP設(shè)計(jì)的第一步。APP的取色和風(fēng)格都與APP品牌相關(guān)的，品牌是APP設(shè)計(jì)的基石。

APP案例分析：Cal日歷

相信每一位用過(guò)Any.Do的用戶都曾贊嘆過(guò)它的精簡(jiǎn)設(shè)計(jì)，而現(xiàn)在Any.Do團(tuán)隊(duì)又一次打破了日歷市場(chǎng)，推出了「Cal日歷」。這次的新作品不僅在設(shè)計(jì)上完全繼承了Any.Do一貫簡(jiǎn)潔優(yōu)雅的作風(fēng)，在使用體驗(yàn)和功能方面更加的出類拔萃。

「Cal日歷」可以自動(dòng)添加中國(guó)節(jié)氣等信息，添加事項(xiàng)也更加完備。不僅如此，「Cal日歷」還支持添加位置信息、聯(lián)系人、響鈴提醒、文字注釋、活動(dòng)自動(dòng)重復(fù)等實(shí)用功能。

Cal用一段描述美好生活--陽(yáng)光、運(yùn)動(dòng)、笑容、孩子和美食的宣傳視頻作為開(kāi)場(chǎng)，給用戶帶來(lái)溫馨和美好的感覺(jué)，我們期望中的生活不就是如此嗎？

所以Cal用一段非常貼近人心而又符合自身產(chǎn)品定位的視頻吸引住了用戶，這一點(diǎn)與那些開(kāi)場(chǎng)使用文本引導(dǎo)的應(yīng)用有著很大區(qū)別，避免讓用戶覺(jué)得枯燥乏味。

第二步：選取舒適的配色方案

舒適的配色方案決定了APP的形象，它應(yīng)該是品牌主題色的擴(kuò)展。它是視覺(jué)設(shè)計(jì)的核心，因?yàn)锳PP所有可見(jiàn)的地方都會(huì)使用這些顏色。所以你需要選擇一個(gè)能增強(qiáng)品牌形象的主題色是關(guān)鍵當(dāng)中的關(guān)鍵。

25學(xué)堂提醒我們，通?？梢园慈齻€(gè)大類的配色方法，結(jié)合一些案例，分析色彩在頁(yè)面中的APP手法。

配色方案舉例分析： ?Very的案例

柔和的調(diào)子使頁(yè)面顯得明快溫暖，就算色彩很多也不會(huì)造成視覺(jué)負(fù)重。頁(yè)面的同色調(diào)搭配，顏色作為不同模塊的信息分類，不搶主體的重點(diǎn)，還能襯托不同類型載體的內(nèi)容信息。

25學(xué)堂的觀點(diǎn)：同色調(diào)不同色彩的模塊，就算承載著不同的信息內(nèi)容也能表現(xiàn)很和諧。

第三步：直觀的布局

這里講究的是一見(jiàn)鐘情。能讓你的用戶第一眼就明白其APP功能才是最好的APP設(shè)計(jì)。

25學(xué)堂認(rèn)為App主頁(yè)面設(shè)計(jì)非常簡(jiǎn)潔但并不簡(jiǎn)單。小白學(xué)習(xí)APP界面設(shè)計(jì)，從設(shè)計(jì)APP首頁(yè)開(kāi)始和小白學(xué)習(xí)APP設(shè)計(jì)教程：改正你的PS設(shè)計(jì)習(xí)慣

如下圖APP設(shè)計(jì)：

多去研究和臨摹一下那些熱門(mén)和相關(guān)APP是怎么做的，盡量別讓用戶產(chǎn)生困惑。盡量選擇比較小眾的APP設(shè)計(jì)參考。

第四步：簡(jiǎn)化和卡片化

這一步我們可以借鑒蘋(píng)果的理念：無(wú)贅物即為完美。25學(xué)堂告訴大家千萬(wàn)不要去”畫(huà)蛇添足“。

屏幕布局應(yīng)當(dāng)保持整潔，信息應(yīng)該分層排列，重要的在上面，不重要的在下面。

具體的我們看下APP設(shè)計(jì)案例吧！

1、卡片式設(shè)計(jì)和卡片化滑動(dòng)設(shè)計(jì)App成功案例

2、移動(dòng)端卡片化設(shè)計(jì)，成就經(jīng)典設(shè)計(jì)模型

第五步：精煉和做減法

卓越的視覺(jué)設(shè)計(jì)都是細(xì)節(jié)為王，每一個(gè)像素都要完美無(wú)缺。首先是排版。字體是應(yīng)用的臉面，一個(gè)好的字體可以讓你的應(yīng)用脫穎而出。

各位APP設(shè)計(jì)小白，要能準(zhǔn)確傳達(dá)情緒的圖標(biāo)才是最好的。你可以利用一些免費(fèi)的圖標(biāo)資源，然后在Photoshop里面稍加修改，把它們變成自己的圖標(biāo)。

1、APP設(shè)計(jì)師必上的10個(gè)APP圖標(biāo)素材資源站

2、10個(gè)設(shè)計(jì)師值得收藏的優(yōu)秀圖標(biāo)素材庫(kù)

最后，Path和Flipboard是每個(gè)像素都趨近完美的典范。大家有興趣可以下載下來(lái)慢慢學(xué)習(xí)和欣賞。

一個(gè)APP開(kāi)始啟動(dòng)設(shè)計(jì)時(shí)，第一步應(yīng)該用主要頁(yè)面定下整個(gè)APP的設(shè)計(jì)風(fēng)格，然后其他頁(yè)面按著統(tǒng)一的設(shè)計(jì)風(fēng)格進(jìn)行細(xì)致的設(shè)計(jì)美化。統(tǒng)一設(shè)計(jì)風(fēng)格能給用戶呈現(xiàn)整體一致的視覺(jué)體驗(yàn)，有利于傳達(dá)產(chǎn)品整體的品牌形象;也方便設(shè)計(jì)團(tuán)隊(duì)制定設(shè)計(jì)規(guī)范，減少設(shè)計(jì)風(fēng)格不一致帶來(lái)的溝通成本。25學(xué)堂今天就跟大家分享到這里。