一款咖、使用顏色和粗細(xì)來(lái)創(chuàng)建層次結(jié)構(gòu)而不是大小

1.png

上圖中UI文本的一個(gè)常見(jiàn)錯(cuò)誤是過(guò)分依賴字體大小來(lái)控制層次結(jié)構(gòu)。

“這個(gè)文字很重要嗎唤衫？讓它變得更大婆赠。“
“這個(gè)文字是次要的嗎佳励？讓它變小休里∏欤“
不要單獨(dú)將所有繁重的工作留在字體大小上，而是嘗試使用顏色或字體粗細(xì)來(lái)完成相同的工作妙黍。
“這個(gè)文字很重要嗎悴侵？讓我們來(lái)將其加粗∈眉蓿“
“這個(gè)文字是次要的嗎可免？讓我們用淺色∽鲈粒“

嘗試并堅(jiān)持兩種或三種顏色：
主要內(nèi)容的深色（但不是黑色）（如文章標(biāo)題）
二級(jí)內(nèi)容的灰色（如文章發(fā)布日期）
輔助內(nèi)容的淺灰色（可能是頁(yè)腳中的版權(quán)聲明）

2.png

同樣浇借，兩種字體權(quán)重通常足以用于UI工作：

大多數(shù)文本的正常字體粗細(xì)（400或500，具體取決于字體）
要強(qiáng)調(diào)的文本較重的字體粗細(xì)（600或700）

3.png

用戶界面工作遠(yuǎn)離400以下的字體權(quán)重;它們可以用于大標(biāo)題怕品，但是在較小的尺寸下難以閱讀逮刨。如果您正在考慮使用較輕的重量來(lái)減弱某些文本，請(qǐng)使用較淺的顏色或較小的字體大小堵泽。

二修己、 不要在彩色背景上使用灰色文字

4.png

使文本變?yōu)闇\灰色是在白色背景上去強(qiáng)調(diào)它的好方法，但它在彩色背景上看起來(lái)并不那么好迎罗。

那是因?yàn)槲覀儗?shí)際上在白色上看到灰色的效果是對(duì)比度降低睬愤。

使文本更接近背景顏色實(shí)際上有助于創(chuàng)建層次結(jié)構(gòu)，而不是使其變?yōu)闇\灰色纹安。

使用彩色背景時(shí)尤辱，有兩種方法來(lái)減少對(duì)比度：

1. 降低白色文本的不透明度
   使用白色文本并降低不透明度。這樣可以使背景顏色稍微滲透厢岂，以不與背景沖突的方式去強(qiáng)調(diào)文本光督。

   
   
   7.png

2.手工挑選基于背景顏色的顏色
當(dāng)背景是圖像或圖案時(shí)，或者當(dāng)降低不透明度使文本感覺(jué)太鈍或褪色時(shí)塔粒，這比減少不透明度更好结借。

8.png

選擇與背景色調(diào)相同的顏色，調(diào)整飽和度和亮度卒茬，直到它看起來(lái)舒適

三船老、 抵消陰影

9.png

不使用較大的模糊和展開(kāi)值來(lái)使框陰影更加明顯，而是添加垂直偏移圃酵。

它看起來(lái)更自然柳畔，因?yàn)樗M了從上面照射下來(lái)的光源，就像我們以前在現(xiàn)實(shí)世界中看到的一樣郭赐。

這適用于您可能在井或表格輸入上使用的插入陰影：

10.png

如果您有興趣了解有關(guān)陰影設(shè)計(jì)的更多信息薪韩，那么[ Material Design Guidelines]是一本非常棒的入門(mén)讀物

四、 使用較少的邊框

11.png

當(dāng)你需要在兩個(gè)元素之間創(chuàng)建分離時(shí)，嘗試不要使用邊框設(shè)計(jì)俘陷，

雖然邊框是區(qū)分兩個(gè)元素的好方法张惹，但它們并不是唯一的方法，使用太多邊框可能會(huì)讓您的設(shè)計(jì)感到忙碌和混亂岭洲。

下次當(dāng)你發(fā)現(xiàn)自己正在尋找邊界時(shí)，請(qǐng)嘗試其中一個(gè)想法：
1.使用框陰影
箱形陰影可以很好地勾勒出像邊框一樣的元素坎匿，且可以更精細(xì)并實(shí)現(xiàn)相同的目標(biāo)而不會(huì)分散注意力

12.png

2.使用兩個(gè)不同的背景顏色
想要區(qū)分相鄰元素我們只提供稍微不同的背景顏色盾剩。如果您已經(jīng)使用了除邊框之外的其他背景顏色，請(qǐng)嘗試刪除邊框替蔬，你可能不需要它告私。

13.png

3.增加額外的間距
有什么更好的方法來(lái)創(chuàng)建元素之間的分割感而不是簡(jiǎn)單地增加分割線？在不引入任何新UI的情況下創(chuàng)建元素組之間分割感的最好方法方法就是調(diào)整元素之間的距離承桥。

14.png

五驻粟、 不要忽略那些意味著小的圖標(biāo)

15.png

如果你正在設(shè)計(jì)一些可以使用一些大圖標(biāo)的東西（比如登陸頁(yè)面的“功能”部分），你可能會(huì)本能地抓住像Font Awesome或Zondicons這樣的免費(fèi)圖標(biāo)集凶异，然后提升尺寸直到滿足你的需求蜀撑。
畢竟它們是矢量圖像，所以如果增加尺寸剩彬，質(zhì)量不會(huì)受到影響嗎酷麦？
雖然矢量圖像在增加尺寸時(shí)不會(huì)降低質(zhì)量，但是當(dāng)你將它們吹到預(yù)期尺寸的3倍或4倍時(shí)喉恋，以16-24px繪制的圖標(biāo)看起來(lái)永遠(yuǎn)不會(huì)非常專業(yè)沃饶。他們?nèi)狈?xì)節(jié)，總覺(jué)得不成比例地“矮胖”轻黑。

16.png

如果您已經(jīng)獲得了小圖標(biāo)糊肤，請(qǐng)嘗試將它們包含在另一個(gè)形狀中并為該形狀提供背景顏色：

17.png

這使您可以使實(shí)際圖標(biāo)更接近其預(yù)期大小，同時(shí)仍然填充更大的空間氓鄙。

六馆揉、使用重音邊框?yàn)槠降脑O(shè)計(jì)添加色彩

18.png

如果你不是一名平面設(shè)計(jì)師，你如何在你的用戶界面中添加那些其他設(shè)計(jì)從美麗的攝影或彩色插圖中獲得的視覺(jué)效果抖拦？

一個(gè)可以產(chǎn)生重大影響的簡(jiǎn)單技巧是在界面的某些部分添加色彩鮮艷的邊框把介，否則會(huì)感覺(jué)有點(diǎn)乏味。

例如蟋座，提醒信息的設(shè)計(jì)：

19.png

...或突出顯示活動(dòng)導(dǎo)航項(xiàng)：

20.png

......甚至在整個(gè)布局的頂部：

21.png

這樣可以讓您的網(wǎng)站更有設(shè)計(jì)感拗踢。

七、并不是每一個(gè)按鈕都需要有背景色填充

22.png

當(dāng)用戶可以在頁(yè)面上執(zhí)行多個(gè)操作時(shí)向臀，很容易陷入純粹基于語(yǔ)義設(shè)計(jì)這些操作的陷阱巢墅。

像Bootstrap這樣的框架通過(guò)為您提供一個(gè)語(yǔ)義樣式菜單來(lái)鼓勵(lì)這一點(diǎn)，無(wú)論何時(shí)添加新按鈕，都可以選擇：

23.png

“這是一個(gè)積極的行動(dòng)嗎君纫？將按鈕設(shè)為綠色驯遇。“

“這會(huì)刪除數(shù)據(jù)嗎蓄髓？將按鈕設(shè)為紅色叉庐。“

語(yǔ)義是按鈕設(shè)計(jì)的一個(gè)重要部分会喝，但是有一個(gè)更常見(jiàn)的重要維度：層次結(jié)構(gòu)陡叠。

頁(yè)面上的每個(gè)操作都位于重要金字塔的某個(gè)位置。大多數(shù)頁(yè)面只有一個(gè)真正的主要?jiǎng)幼髦矗恍┎惶匾拇我獎(jiǎng)幼魍髡螅约耙恍┖苌偈褂玫娜?jí)動(dòng)作。

在設(shè)計(jì)這些操作時(shí)预茄，通過(guò)層次結(jié)構(gòu)來(lái)傳達(dá)它們的位置非常重要兴溜。

.主要操作應(yīng)該是明顯的。堅(jiān)固耻陕，高對(duì)比度的背景色在這里工作得很好拙徽。
.次要操作應(yīng)該清楚但不突出。輪廓樣式或較低對(duì)比度的背景顏色是很好的選擇诗宣。
.三級(jí)行動(dòng)應(yīng)該是可發(fā)現(xiàn)的斋攀，但不引人注目。像鏈接一樣設(shè)置這些操作通常是最好的方法梧田。

24.png

“破壞性的行動(dòng)怎么樣淳蔼，他們不應(yīng)該總是變紅嗎？”

不必要裁眯！如果破壞性操作不是頁(yè)面上的主要操作鹉梨，則最好為其提供二級(jí)或三級(jí)按鈕處理。

25.png

當(dāng)負(fù)面操作是界面上的主要操作時(shí)穿稳，使用大存皂、紅色和粗體樣式，就像在確認(rèn)對(duì)話框中一樣：

26.png

文章翻譯自：7 Practical Tips for Cheating at Design