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

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

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

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

一、排版上

排版借鑒 1——破形

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

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

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

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

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

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

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

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

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

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

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

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

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

排版借鑒 2——信息拆分

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

排版借鑒 3——實例運用

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

二、形狀上的借鑒

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

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

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

缺角不一：矩形卡片四個角圓角大小不一的缺角

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

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

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

三、顏色上的借鑒

我們要對好看的、流行的顏色有敏銳度，看到好看的顏色，一定要毫不猶豫的收集下來，方便我們設(shè)計時能快速上色。

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

我們就可以提取它的顏色運用到頁面中，這樣年輕化潮流感 不就立馬來感覺了嗎

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

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

首先來看看暗色系的頁面，它是怎么去用亮色的。

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

也可以是小面積的亮色，點綴在暗色系的頁面中，亮色與暗色的用色比例大概是 3:7

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

四、字體的借鑒

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

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

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

字體的用法借鑒

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

字體的修飾形式借鑒

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

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

加圖形：類似于畫高亮

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

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

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

1. 場景具像化

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

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

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

......

這些都是在模擬我們真實的生活場景，當(dāng)我們在做設(shè)計時，也可以去思考能不能將它擬物化。

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

成就完成、未完成：對于情侶來說，一起做的事有誓言的意義，按手印就變得有趣。

總結(jié)

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

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