學(xué)會(huì)借鑒參考圖，對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)是一項(xiàng)非常重要的技能。尤其對(duì)于一些經(jīng)驗(yàn)不是那么充足的、剛?cè)胄袥](méi)多久的設(shè)計(jì)師，參考圖能為我們做出更好看的設(shè)計(jì)鋪路。有了參考圖我們就不用自己悶著腦袋死想，各式各樣的解決方案也許早已擺在那里，只等我們?nèi)グl(fā)掘。

再往上一些，如果我們的訴求是為了做出更不一樣的設(shè)計(jì)，參考圖也能給你提供一些靈感。

日常參考圖的積累是多么多么的重要，這里我就不過(guò)多地贅述，希望大家都能去多看、多積累、多實(shí)踐，這是成為一個(gè)優(yōu)秀設(shè)計(jì)師必不可少的過(guò)程。

下面我就會(huì)從五個(gè)方向：排版、形狀、顏色、字體、創(chuàng)意，說(shuō)說(shuō)我在參考圖借鑒上面的一些心得體會(huì)，本篇不會(huì)落到某個(gè)具體很小的設(shè)計(jì)中，介紹的都是一些比較通用的設(shè)計(jì)辦法，話不多說(shuō)，讓我們開始吧！

一、排版上

排版借鑒 1——破形

顧名思義，破形，就是用一個(gè)形狀去打破另一個(gè)形狀，它不再被框在一個(gè)區(qū)域內(nèi)

比較常見(jiàn)的用法是用在 banner 上、彈窗上，只要是涉及到卡片的地方，都可以用到破形。

破形是個(gè)非常好用的辦法，讓物體不再局限在某個(gè)區(qū)域內(nèi)，就會(huì)不那么死板，排版上會(huì)看起來(lái)更具有沖擊力。

同時(shí)，如果這個(gè)物體又是個(gè)立體圖，我們加上投影，它又能和卡片的平面形成立體和平面的對(duì)比。設(shè)計(jì)排版層次上也會(huì)更加豐富。

排版借鑒 2——信息排版形式的多元化

做設(shè)計(jì)這么久了，我們無(wú)可避免地會(huì)遇到一張卡片上信息很多的情況，比如說(shuō)下面這幾塊的商品信息都很多：

如果讓我們一些設(shè)計(jì)同學(xué)來(lái)做的話，排版上很有可能做出來(lái)就像是這樣的：

這種做法大概就是 有多少信息堆多少信息，這樣排出來(lái)的信息肯定會(huì)又多又雜，讓人看起來(lái)很累，不太想讀。

這個(gè)時(shí)候，就要學(xué)會(huì)將信息排版的形式處理得更多元化

比如這個(gè)設(shè)計(jì)稿的原作，它就是將「3 折，立省 30 元」這樣的信息排版處理成標(biāo)簽的形式，并且在這之上，又劃分了信息排版形式：

下面這個(gè)例子也是類似的做法，它將用戶信息處理的跟其他字段不一樣了一些。

說(shuō)到這里，另外有個(gè)小知識(shí)點(diǎn)，也可以跟大家分享一下，就是大家看到這個(gè)地方，它其實(shí)可以將文字一排就放完，但是它選擇了折行，為什么？

這其實(shí)是增加設(shè)計(jì)排版層次的一種做法，我們將本來(lái)能夠一排放下的文字 折行處理，會(huì)讓排版上更加穩(wěn)重，不顯單薄。

排版借鑒 2——信息拆分

當(dāng)我們遇到一張卡片上信息較多的情況，除了上面說(shuō)的將信息的排版形式多元化外，還可以將信息進(jìn)行拆分，比如下面這個(gè)例子

排版借鑒 3——實(shí)例運(yùn)用

我們就將上述方法一頓運(yùn)用，優(yōu)化了下面這張卡片的排版，是不是信息的設(shè)計(jì)就會(huì)更豐富一些？

二、形狀上的借鑒

形狀借鑒 1——在基礎(chǔ)形上做缺角

缺角的方式也是多種多樣的，一共可以有 3 種形式

圖形缺角：往往在矩形卡片右上角挖掉任意圖形，并且在挖掉后，再填充上其他修飾物，來(lái)讓排版更平衡

缺角不一：矩形卡片四個(gè)角圓角大小不一的缺角

斜切角：將矩形卡片斜切，變成平行四邊形，會(huì)比規(guī)整的矩形更特殊一些

形狀借鑒 2——融入品牌形狀

除了上面我們將卡片缺角處理，能做出更不一樣的卡片形狀之外，嘗試在形狀上融入品牌形狀，也是非常不錯(cuò)的做法！

三、顏色上的借鑒

我們要對(duì)好看的、流行的顏色有敏銳度，看到好看的顏色，一定要毫不猶豫的收集下來(lái)，方便我們?cè)O(shè)計(jì)時(shí)能快速上色。

像我在做頁(yè)面的顏色搭配時(shí)，就想到有這樣一張參考圖，它的用色讓我印象十分深刻，也特別符合年輕化潮流化的頁(yè)面

我們就可以提取它的顏色運(yùn)用到頁(yè)面中，這樣年輕化潮流感 不就立馬來(lái)感覺(jué)了嗎

顏色借鑒 2：（年輕潮流化的）頁(yè)面顏色要怎么搭配，不會(huì)踩雷

最關(guān)鍵的一點(diǎn)，就是我們頁(yè)面亮色里一定要融入黑色！

首先來(lái)看看暗色系的頁(yè)面，它是怎么去用亮色的。

可以是亮色與黑色的大面積碰撞，亮色與暗色的用色比例大概是 1:1

也可以是小面積的亮色，點(diǎn)綴在暗色系的頁(yè)面中，亮色與暗色的用色比例大概是 3:7

如果是在淺色系的頁(yè)面中去用亮色，會(huì)讓頁(yè)面中很大面積都是亮色，切記一定要用黑色去把整個(gè)頁(yè)面壓下來(lái)，要不然頁(yè)面整體用色會(huì)顯得很油膩、輕浮。

四、字體的借鑒

這里給大家推薦幾款字體，都是無(wú)版權(quán)，又能打造風(fēng)格化頁(yè)面的字體！

全網(wǎng)最全的免費(fèi)可商用字體看這里 ? https://hao.uisdc.com/font/

拿到了字體包，我們也要知道怎么用，我們可以去學(xué)習(xí)借鑒一下別人的用法。

字體的用法借鑒

像這種特殊的字體，一般不會(huì)大面積的去用，都是運(yùn)用在需要強(qiáng)調(diào)的文字上、字號(hào)比較大的數(shù)字上，如頁(yè)面大標(biāo)題、主按鈕文字。其他都是常規(guī)字體

字體的修飾形式借鑒

有時(shí)候一個(gè)頁(yè)面不需要多么花哨，像在字體處就可以增加一些細(xì)節(jié)修飾，字體處的修飾大概有三大種

加線：在字體上增加線條裝飾，且線條的粗細(xì)會(huì)比字體細(xì)

加圖形：類似于畫高亮

加字母：在文字上加添加字母的紋理修飾

這些用法大家都可以學(xué)起來(lái)，用在頁(yè)面中增加設(shè)計(jì)感。

五、設(shè)計(jì)創(chuàng)意的借鑒

1. 場(chǎng)景具像化

將一段音頻設(shè)計(jì)成音箱、唱片

將濾鏡設(shè)計(jì)成膠卷的形式

將書信做出紙質(zhì)感

......

這些都是在模擬我們真實(shí)的生活場(chǎng)景，當(dāng)我們?cè)谧鲈O(shè)計(jì)時(shí)，也可以去思考能不能將它擬物化。

交互：我們從用戶的交互的選中態(tài)、未選中態(tài)的形式上也可以做出創(chuàng)意，比如說(shuō)把它想象成氣球，選中后氣球「加氣」變大，如果取消選中，氣球「漏氣」縮小。

成就完成、未完成：對(duì)于情侶來(lái)說(shuō)，一起做的事有誓言的意義，按手印就變得有趣。

總結(jié)

以上就是一些關(guān)于借鑒參考的技巧和思路，我們可以把這些技巧運(yùn)用起來(lái)。好了今天的分享就到這里了，我們下期再見(jiàn)！

作者：菜心設(shè)計(jì)鋪