一位優(yōu)秀的移動APP客戶端的UI設(shè)計(jì)師，在接到一個(gè)移動case的時(shí)候，腦海中應(yīng)該浮現(xiàn)很多相關(guān)的一點(diǎn)APPui碎片。

肯定很多人會說，擁有這個(gè)功力肯定不是應(yīng)屆APPUI畢業(yè)生所能掌握的。25學(xué)堂的小編說，未必。只要平常我們多安裝一些優(yōu)秀的APP、每天來欣賞一款獨(dú)特美的APP。

把這些好的APP 翻來覆去的瀏覽即可。

但是整體APP設(shè)計(jì)流程和設(shè)計(jì)模塊，我們肯定要知道的。

一、APP圖標(biāo)設(shè)計(jì)

圖標(biāo)通常是傳達(dá)給用戶的第一視覺感受，它可以體現(xiàn)出產(chǎn)品風(fēng)格 、功能，甚至品質(zhì)。iphone獨(dú)特的桌面展示方式，引領(lǐng)了"豆腐塊"圖標(biāo)趨勢，即在一個(gè)圓角方形的區(qū)域內(nèi)創(chuàng)造各種可能。 分析眾多優(yōu)秀應(yīng)用圖標(biāo)發(fā)現(xiàn)，要設(shè)計(jì)一款精致醒目的圖標(biāo)，大概可以遵循以下幾點(diǎn)：

a、圖形元素盡可能不超過2個(gè)，并且不可平均分布，突出主視覺；

b、桌面極少使用淺色，因此配色盡量以明亮淺色為主，以免被背景吸收掉；

c、為了讓圖標(biāo)更加自然融合其中，符合ios平臺的透視標(biāo)準(zhǔn)，盡量使用正面垂直角度，光源自上而下。

多學(xué)多看經(jīng)典的APP案例：

1、免費(fèi)APP圖標(biāo)設(shè)計(jì)公開課分享【UI視頻教程】

2、APP設(shè)計(jì)實(shí)戰(zhàn)案例賞析以及APP圖標(biāo)繪制方法

3、iOS8 App圖標(biāo)模板尺寸規(guī)范[4.0]最新出爐

二、3-4張的引導(dǎo)界面設(shè)計(jì)

APP的新手引導(dǎo)，原本的出發(fā)點(diǎn)很簡單，類似于一個(gè)簡潔的產(chǎn)品說明書，其主要目的是為了向用戶展示該APP的核心功能及用法。 一般出現(xiàn)在用戶首次安裝APP后打開的時(shí)候。歡迎界面一般為2 – 5屏的全屏靜態(tài)圖，左右滑動進(jìn)行翻頁，有跳過按鈕；新功能指示及操作引導(dǎo)一般用蒙板加箭頭指引的形式完成。

之前25學(xué)堂介紹過的 ：

1、移動設(shè)計(jì)師必須了解的APP新手引導(dǎo)設(shè)計(jì)

2、App引導(dǎo)頁最佳設(shè)計(jì)之5個(gè)UI界面設(shè)計(jì)步驟

3、APP引導(dǎo)頁設(shè)計(jì)的五種常見表現(xiàn)方式

三、歡迎界面設(shè)計(jì)或者說是APP啟動界面設(shè)計(jì)

歡迎界面（閃屏）像是應(yīng)用的一道門，在使用前給用戶一個(gè)預(yù)示，它通常包含圖標(biāo)、版本號、加載進(jìn)度等信息。設(shè)計(jì)可以根據(jù)產(chǎn)品風(fēng)格隨意發(fā)揮，與圖標(biāo)呼應(yīng)，強(qiáng)化產(chǎn)品的印象。

1、教你搞定APP啟動頁四種設(shè)計(jì)方案【APP實(shí)戰(zhàn)篇】

2、移動APP啟動界面設(shè)計(jì)精髓回顧

3、APP啟動頁設(shè)計(jì)當(dāng)中的頭七秒定律

四、主要的功能界面設(shè)計(jì)

遵守IOS的交互習(xí)慣，功能界面的結(jié)構(gòu)通常自上而下，分別是“狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄”

根據(jù)不同功能的界面、常見有以下幾種設(shè)計(jì)方式：

1、iOS7 UI設(shè)計(jì)控件元素詳細(xì)解讀和設(shè)計(jì)規(guī)范

2、安卓APP新手設(shè)計(jì)教程：19條Android設(shè)計(jì)經(jīng)驗(yàn)大全

3、8種移動APP導(dǎo)航設(shè)計(jì)模式大對比

列表視圖——適合目錄、導(dǎo)航等多層級的界面。將信息一級級的收起，最大化的展示分類信息。

分層的界面——?利用iPhone本身獨(dú)有的特性讓其固定，或垂直、水平滾動，節(jié)省空間。

擬物化設(shè)計(jì)——適合實(shí)現(xiàn)獨(dú)立功能的界面設(shè)計(jì)，界面的細(xì)節(jié)逼真寫實(shí)。以現(xiàn)實(shí)的元素和操作喚起用戶共鳴。

另外，當(dāng)我們完成一系列辛苦的APP設(shè)計(jì)工作之后，為了讓客戶端開發(fā)人員完成我們設(shè)計(jì)出的效果?；蛘哒f要想準(zhǔn)確傳達(dá)自己的設(shè)計(jì)可以分三步來實(shí)施：

第一步：要實(shí)現(xiàn)快速可視化。

你可以選擇任何用的順手的工具，把自己的想法快速準(zhǔn)確的呈現(xiàn)出來，就已經(jīng)是成功的一半。

第二步：最大限度的還原使用場景。

如果是PC端，就在電腦上演示。如果是移動端，就在手機(jī)上演示。如果可操作，那最好做可交互的原型，當(dāng)然，是在時(shí)間成本允許的條件下。

第三步：把設(shè)計(jì)參數(shù)化，盡可能減少讓工程師憑感覺開發(fā)的情況。

相信我，如果你不希望工程師憑感覺調(diào)UI顏色，那么動效同理。一份精確的文檔或者是高保真的原型效果圖，是你專業(yè)性的體現(xiàn)。

總之：移動開發(fā)當(dāng)中，app設(shè)計(jì)師要把設(shè)計(jì)稿做嚴(yán)格的標(biāo)注，各個(gè)元素的尺寸 和之間的間距，字體大小，顏色，透明度等。

我們是一名優(yōu)秀的APPUI設(shè)計(jì)師，想要工程師實(shí)現(xiàn)出酷炫的動效，你得先把它酷炫的設(shè)計(jì)出來。抓住一切機(jī)會提升自己的設(shè)計(jì)能力吧！那才是你最寶貴的東西。