今天來(lái)分享幾個(gè)設(shè)計(jì)案例，主要聊聊以下四個(gè)話(huà)題：

· 信息處理

· 裝飾元素的擺放

· 長(zhǎng)頁(yè)面設(shè)計(jì) 模塊間要有差異

· 空間利用率

01 信息的處理

首先看這個(gè)彈窗需求，產(chǎn)品經(jīng)理給我們提供的原型圖是這樣的：

先不要急著開(kāi)始畫(huà)，理解需求是最重要的一步。

這個(gè)彈窗最想要傳達(dá)給用戶(hù)什么信息？

「小窩準(zhǔn)備完成，寵物到家了」顯然是最重要的信息。排的時(shí)候就要使勁凸顯。

在經(jīng)過(guò)一些嘗試后，我們挑選出了以下兩版：

對(duì)于這個(gè)彈窗，版本 2 的層級(jí)會(huì)更舒服。

于是對(duì)版本 2 進(jìn)一步優(yōu)化。

1. 同樣的字號(hào)下，英文看著會(huì)比中文小。這上面用英文的「TA」不如直接寫(xiě)中文，看著也會(huì)更加整齊：

2. 字體也是有性格的，它能夠影響頁(yè)面的風(fēng)格。所以將字體換成圓體，讓頁(yè)面更活潑可愛(ài)。

3. 盡量使上下兩段文字長(zhǎng)短不一，看著會(huì)更有節(jié)奏感。

4. 標(biāo)點(diǎn)符號(hào)的細(xì)節(jié)很重要：有的字體標(biāo)點(diǎn)符號(hào)與文字看著不在一條線上，記得一定要對(duì)齊！

5. 標(biāo)題有點(diǎn)單調(diào)，我們?cè)僭黾釉O(shè)計(jì)樣式，讓頁(yè)面更精致！

這樣就完成了，但是還是差了點(diǎn)什么：

是整個(gè)頁(yè)面太安靜了，少了一些熱鬧慶祝的氛圍，那就加一些彩帶裝飾吧。

02 裝飾元素的擺放

在添加時(shí)，需注意大小對(duì)比、前后層次、造型差異化，才能加的自然好看。

1. 大小對(duì)比，有的彩帶大些長(zhǎng)些，有些則小點(diǎn)短點(diǎn)。

2. 前后層次，有的在卡片前面，有的在卡片后方。

3. 造型差異化，除了彩帶再來(lái)點(diǎn)其他元素。

03 長(zhǎng)頁(yè)面設(shè)計(jì) 模塊間要有差異

在一個(gè)長(zhǎng)長(zhǎng)長(zhǎng)頁(yè)面里，相同的排版會(huì)沒(méi)有新鮮感，容易產(chǎn)生視覺(jué)疲勞。

我們可以通過(guò)兩種方式，讓設(shè)計(jì)模塊有差異。

1.排版不一

2.視覺(jué)不一

比如這個(gè)例子，同樣都是聽(tīng)音樂(lè)，但是會(huì)用不同的排版穿插展示。

就算是同樣的排版，我們也可以在其中用不同的視覺(jué)。

比如以下這個(gè)案例：一開(kāi)始它從頭到尾都是運(yùn)用的一種視覺(jué)，排版也十分相似，頁(yè)面整體結(jié)構(gòu)也沒(méi)有主次。

在我們對(duì)不同模塊的卡片處理后，就好很多。

04 空間利用率

頁(yè)面的空間可以站在三維的角度去看，分為 x 軸、y軸、z 軸。

頁(yè)面的空間是十分寶貴的，當(dāng)頁(yè)面承載的內(nèi)容越來(lái)越多，我們不能只在 y 軸（高度）上一直增加頁(yè)面的高度。學(xué)會(huì)利用 x 軸（寬度）和 z 軸（深度）的空間能有效減短 y 軸（高度）。

4.1 利用 x 軸的空間

我們來(lái)看下面這個(gè)例子，他一開(kāi)始采用的豎排方式：

如果我們將它改成橫排、滑動(dòng)查看后，頁(yè)面就能夠展示更多的內(nèi)容，就越可能捕捉到用戶(hù)想看的信息。

這就是減少了 y 軸的空間，利用了 x 軸的空間。

4.2 利用 z 軸空間

z 軸空間就是利用深度、前后的空間，就像我們經(jīng)常看到的「頁(yè)面二樓」，下拉頁(yè)面后，在頁(yè)面的后面出現(xiàn)一些內(nèi)容：

這個(gè) banner 的滑動(dòng)也是利用了 z 軸空間：

以上就是我在空間利用率上面的收獲，大家心里留個(gè)印象，說(shuō)不定之后就能解決一些相關(guān)的問(wèn)題～

總結(jié)

不知道今天分享的大家get到了嗎？總結(jié)一下～

1.信息處理：明確信息的層級(jí)關(guān)系，有助于信息處理。

2.裝飾元素：有大有小、有前有后、造型不同，會(huì)讓裝飾元素更自然

3.長(zhǎng)頁(yè)面設(shè)計(jì)：模塊與模塊間要排版或視覺(jué)不一

4.空間利用率：把頁(yè)面當(dāng)成三維空間，除了 y 軸，也要考慮到 x 軸和 z 軸的空間利用。

      藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。 



作者：花菜    來(lái)源：站酷





分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( m.dzxscac.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司