傳播文化錦繡，塑造企業(yè)靈魂

設(shè)計(jì)中7個(gè)實(shí)用細(xì)節(jié)小技巧

有時(shí)候拉開基本功水平差距的，就在于一些微妙的小細(xì)節(jié)~，希望今天整理的這些小細(xì)節(jié)，可以給你更多反思。


技巧一：除了用字號(hào)大小對(duì)比來(lái)打造視覺(jué)層級(jí)，色彩和字重對(duì)比也有同樣的效果。


字號(hào)大小對(duì)比是大家都知道最常見最容易的方法。重要的信息字號(hào)放大，次要的信息字號(hào)縮小。但一個(gè)界面里字號(hào)種類的數(shù)量不建議過(guò)多，否則會(huì)顯得凌亂，這時(shí)候就可以采用文字粗細(xì)對(duì)比、顏色對(duì)比等其他方法配合使用。

微信圖片_20200407114024.png

微信圖片_20200407114036.png


小tip：
1. 字號(hào)種類控制在3～5種，保持克制。
2. 文字顏色種類控制在2～3種，保持克制。
3. 字重通常2種就夠了，普通和加粗。



技巧二：在“彩色”背景上想要弱化文字，應(yīng)降低文字色和背景色之間的對(duì)比度，使其逐步接近背景色，而不是直接粗暴地改為灰色。


微信圖片_20200407114039.png

小tip：
1. 當(dāng)背景為純色時(shí)，可以靠降低白色文本的不透明度來(lái)調(diào)整前景文字和背景之間的對(duì)比度。
2. 當(dāng)背景帶有圖片或圖案時(shí)，半透明的文本會(huì)影響可讀性，需要根據(jù)背景色手動(dòng)挑選適合的文本顏色。

微信圖片_20200407114043.png



技巧三：投影適當(dāng)往下偏移一些。


投影在垂直方向設(shè)置一些偏移量，會(huì)使投影顯得更加自然。

微信圖片_20200407114046.png


由上而下光源偏見也叫做“上方照明偏愛（top-lighting preference）。大腦之所以會(huì)認(rèn)為從上方照下來(lái)的光線更自然，是因?yàn)槲覀兩钪惺冀K有一個(gè)巨大的來(lái)自上方的光源：太陽(yáng)，漫長(zhǎng)的進(jìn)化已經(jīng)在我們腦中刻下了“由上而下光源”這樣一個(gè)強(qiáng)大的偏見。因此來(lái)自上方的光源照射會(huì)讓物體顯現(xiàn)的非常自然。

相反，來(lái)自下方的光源會(huì)讓物體看起來(lái)怪異不自然，設(shè)計(jì)師可以利用這個(gè)原理來(lái)制造一些恐怖怪異的氛圍。（題外話）

微信圖片_20200407114049.png

下圖來(lái)自名偵探柯南



技巧四：除了描邊，還有很多方法可以用來(lái)分隔信息。


當(dāng)你需要分隔一些信息群組時(shí)，不要一直用描邊去分隔，過(guò)多的描邊會(huì)使界面顯得過(guò)于瑣碎凌亂。

微信圖片_20200407114053.png

增加組與組之間的間距，留白也是進(jìn)行信息分隔的一種常見手法，不一定需要通過(guò)線框來(lái)分隔。

微信圖片_20200407114057.png




技巧五：明明是一樣的色值，文字看起來(lái)就比填充色淺，這時(shí)候需要加深一點(diǎn)點(diǎn)文字色，達(dá)到視覺(jué)平衡。


不知道大家有沒(méi)有發(fā)現(xiàn)，下圖藍(lán)色的說(shuō)明文本看上去比藍(lán)色的按鈕更亮，但明明顏色色值是一樣的。右邊通過(guò)使用略深的藍(lán)色，神奇地解決了這個(gè)問(wèn)題，視覺(jué)上更和諧統(tǒng)一。

微信圖片_20200407114100.png





技巧六：米勒-萊爾錯(cuò)覺(jué)，相鄰放置不同的形狀，會(huì)造成視覺(jué)上不對(duì)齊的錯(cuò)覺(jué)，這時(shí)需要微調(diào)元素進(jìn)行視覺(jué)補(bǔ)正，以求得視覺(jué)效果上的平衡感。


米勒-萊爾錯(cuò)覺(jué)：這個(gè)視覺(jué)現(xiàn)象表明，將一個(gè)V型記號(hào)放到線段兩端可能造成其顯得比實(shí)際更短或更長(zhǎng)，長(zhǎng)短取決于V型記號(hào)的朝向，這個(gè)經(jīng)典的錯(cuò)覺(jué)證明了人類感知錯(cuò)誤。

微信圖片_20200407114104.png

左圖的膠囊型按鈕的邊緣給人向內(nèi)收攏的感覺(jué)，雖然像素上和文字對(duì)齊了，但視覺(jué)上按鈕顯得偏右了。右圖通過(guò)將按鈕往左側(cè)微微移動(dòng)來(lái)修正不對(duì)齊的錯(cuò)覺(jué)。


微信圖片_20200407114106.png


亞馬遜的logo中，字母“a、m、o、n”同樣因?yàn)閳A形的外緣，有向下收攏的感覺(jué)，因此需要微微上移，與字母“z”達(dá)到視覺(jué)效果上的平衡。


微信圖片_20200407114109.png



技巧七：不對(duì)稱的圖形如果直接居中，看起來(lái)并沒(méi)有完美居中。


最經(jīng)典的播放按鈕的案例：把一個(gè)三角形放在圓形中直接居中，會(huì)使它看起來(lái)居中位置不對(duì)。為了使三角形視覺(jué)居中，需要通過(guò)計(jì)算等邊三角形腰的中點(diǎn)與對(duì)角頂點(diǎn)連線的交點(diǎn)，來(lái)找出三角形的質(zhì)點(diǎn)，這才是真正的中心（重心）。

微信圖片_20200407114112.png


今天的小技巧分享到此結(jié)束，希望這七個(gè)實(shí)用小技巧可以幫助你更多。



來(lái)源：@大秘密mimi 發(fā)布
https://www.zcool.com.cn/article/ZMTA2NzEyMA==.html
黑馬家族（XingSheDesign）
口碑好，服務(wù)周到，打造專業(yè)品牌！
GOOD REPUTATION, GOOD SERVICE, TO CREATE A PROFESSIONAL PILOT BRAND
關(guān)于我們

憑著白鯨文化傳媒的媒體優(yōu)勢(shì)以及出色的技術(shù)和服務(wù)，白鯨文化傳媒已經(jīng)成為省內(nèi)外的綜合服務(wù)提供商。公司與多家省內(nèi)外知名企業(yè)、政府機(jī)關(guān)單位建立起了廣泛良好的合作關(guān)系。 優(yōu)秀的服務(wù)質(zhì)量，完美的客戶體驗(yàn)以及高水準(zhǔn)的專業(yè)服務(wù)團(tuán)隊(duì)，為企業(yè)建立優(yōu)秀的公司形象、打造卓越廣泛的品牌知名度，構(gòu)建企業(yè)的核心競(jìng)爭(zhēng)力優(yōu)勢(shì)。公司與多家省內(nèi)外知名企業(yè)建立起了廣泛良好的合作關(guān)系。
聯(lián)系我們
廣東省廣州市南沙區(qū)富佳北街73號(hào)
13423663453     |     020-39006895