我們都知道，UI設(shè)計(jì)師更多會(huì)考慮用戶習(xí)慣和易用體驗(yàn)方面的設(shè)計(jì)，而平面設(shè)計(jì)師專注于更具吸引力的信息傳達(dá)和視覺(jué)效果。

隨著移動(dòng)APP的發(fā)展，作為一名合格的APP UI設(shè)計(jì)師，必須擁有這兩種職業(yè)的設(shè)計(jì)思維。善于把文字、表格、圖形、圖片等進(jìn)行合理的排列調(diào)整，在移動(dòng)設(shè)備上有效傳達(dá)信息，并達(dá)到美觀的視覺(jué)效果。

之前25學(xué)堂分享了很多UI設(shè)計(jì)方面的設(shè)計(jì)原則：簡(jiǎn)易性、一致性、用戶習(xí)慣、人性化等。

比如：

1、APP設(shè)計(jì)準(zhǔn)則回顧：10條有用的用戶界面設(shè)計(jì)原則

2、移動(dòng)APP設(shè)計(jì)師進(jìn)階之路【二】：設(shè)計(jì)原則大全

3、移動(dòng)APP客戶端的UI設(shè)計(jì)原則及UI界面適配步驟

今天25學(xué)堂跟大家通過(guò)下面三個(gè)具體的移動(dòng)APP設(shè)計(jì)案例來(lái)跟大家學(xué)習(xí)下相關(guān)的UI設(shè)計(jì)原則是如何應(yīng)用到實(shí)際設(shè)計(jì)案例當(dāng)中的。

APP UI設(shè)計(jì)案例一：手Q公眾號(hào)圖文消息優(yōu)化

先看APP UI效果圖吧！

優(yōu)化UI頁(yè)面信息的首要任務(wù)是判斷信息優(yōu)先級(jí)，分清重要信息與次要信息，刪除無(wú)用信息?；睘楹?jiǎn)，降低視覺(jué)干擾。

不知道大家有沒(méi)有發(fā)現(xiàn)線上舊的圖文消息邊距較為肥厚，在大圖+1小圖的情況下由于代碼的模塊化拼接，始終無(wú)法達(dá)到完美的像素間距。

在考慮多種純文字、單圖、多圖文模版拼接后，盡量減少間距規(guī)則和字號(hào)種類，達(dá)到拼接模版的統(tǒng)一規(guī)則。保證一致性為前提，也提供靈活拼接的多樣性。

大圖＋1的情況下，定義1條小圖的上下間距相等等于一個(gè)單位，而不是單個(gè)模塊中小圖距離上方的1/2單位，在＋n小圖的時(shí)候使得兩個(gè)小圖之間的間距相加后等于一個(gè)單位（見(jiàn)上圖）。這個(gè)小小的視覺(jué)細(xì)節(jié)在和技術(shù)同學(xué)耐心聯(lián)調(diào)后是可以完美實(shí)現(xiàn)的。

以上這個(gè)案例就是我們最常見(jiàn)的一個(gè)APP界面的UI 效果優(yōu)化。希望大家可以學(xué)習(xí)到一些基礎(chǔ)的設(shè)計(jì)知識(shí)。

APP UI設(shè)計(jì)案例二：國(guó)外電臺(tái)app概念設(shè)計(jì)稿重構(gòu)

大家一定記?。汉玫腢I設(shè)計(jì)可以讓軟件變得有個(gè)性和品位，同時(shí)操作上是簡(jiǎn)單舒適的。

如下圖的電臺(tái)APP的優(yōu)化：

這是一個(gè)最常見(jiàn)的APP分享界面。

分享功能支持獲取歌詞并同時(shí)拉取專輯封面配圖，允許用戶上傳照片、寫(xiě)下當(dāng)時(shí)的心情或是用語(yǔ)音表達(dá)。最初設(shè)計(jì)時(shí)的界面交互框架（左圖）默認(rèn)功能在“寫(xiě)下心情”，“加圖片”和“錄語(yǔ)音”的功能重要性并列，感受上是個(gè)功能強(qiáng)大的分享界面，告訴用戶你有三種選擇配心情內(nèi)容的方式。

討論后優(yōu)化框架（右上圖），默認(rèn)拉取專輯封面圖，支持上傳圖片入口置于右上角，默認(rèn)歌詞展示在封面圖上可點(diǎn)擊編輯，整個(gè)頁(yè)面可視化了最終分享出去的樣式，所見(jiàn)即所得。

設(shè)計(jì)優(yōu)化后，讓整個(gè)操作有了重點(diǎn)。可以直接在分享預(yù)覽圖上操作，縮短了分享路徑，最重要帶給用戶輕量化的操作感受。

這樣遵循的移動(dòng)APP設(shè)計(jì)的原則，盡量讓用戶操作的輕量化。讓整體UI界面更為優(yōu)雅。

APP UI設(shè)計(jì)案例三：國(guó)外視頻APP的頻道關(guān)注界面

打破常規(guī)的設(shè)計(jì)思維，借鑒平面設(shè)計(jì)當(dāng)中的一些技巧，也可以讓我們 的APP界面效果很有逼格和品位。同時(shí)給人眼前一亮的感覺(jué)！ 也會(huì)讓你驕傲的一項(xiàng)設(shè)計(jì)技巧。

比如這款A(yù)PP的關(guān)注按鈕的設(shè)計(jì)。

通常我們關(guān)注一個(gè)賬號(hào)、小站的通常app的做法是：頭像加關(guān)注按鈕。

而上圖案例的 ?V 的頻道界面中，點(diǎn)擊頭像即關(guān)注，按下后頭像成為星形遮罩，表示已關(guān)注，再點(diǎn)擊換一下還原。這樣的點(diǎn)擊操作反饋超乎預(yù)期又在情理之中。

讓整個(gè)APP界面變成了非常有吸引力的點(diǎn)擊。

以上三個(gè)小小的APP UI設(shè)計(jì)案例賞析，教會(huì)大家如何去運(yùn)用設(shè)計(jì)原則來(lái)設(shè)計(jì)。同時(shí)要想

提升平面設(shè)計(jì)基礎(chǔ)能力，在生活中有意識(shí)的觀察設(shè)計(jì)、思考分析、養(yǎng)成視覺(jué)潔癖。

非常適合UI設(shè)計(jì)新手來(lái)閱讀和學(xué)習(xí)。算是2017年新年給大家一個(gè)開(kāi)門紅！預(yù)祝大家在新的一年里，學(xué)習(xí)天天向上，薪水節(jié)節(jié)高！