好久未更 /?甚似想念

目錄：

1.使用顏色和粗細來創(chuàng)建層次結構而不是大小

2.不要在彩色背景上使用灰色文字

3.抵消陰影

4.使用較少的邊框

5.不要放大那些小圖標

6.使用重音邊框為平淡的設計添加顏色

7.并非每個按鈕都需要背景顏色

1.使用顏色和粗細來創(chuàng)建層次結構而不是大小

樣式UI文本的一個常見錯誤是過分依賴字體大小來控制層次結構。

這個文字很重要嗎？讓它變得更大

這個文字是次要的嗎？讓它變小

不要僅僅將所有繁重的工作留在字體大小上，而是嘗試使用顏色或字體重量來完成同樣的工作

這個文字很重要嗎？讓我們更大膽

這個文字是次要的嗎？讓我們使用更淺的顏色

嘗試并堅持兩種或三種顏色：

主要內容的深色但不是黑色（如文章標題）

二級內容的灰色（如文章發(fā)布日期）

輔助內容的淺灰色（可能是頁腳中的版權聲明）

2.不要在彩色背景上使用灰色文字

使文本變成淺灰色是在白色背景上去強調它的好方法，但它在彩色背景上看起來并不那么好。

那是因為我們實際上在白色上看到灰色的效果會降低對比度。

使文本更接近背景顏色實際上有助于創(chuàng)建層次結構，而不是使其變?yōu)?/b>淺灰色。

使用彩色背景時，有兩種方法可以降低對比度：

1.減少白色文本的不透明度

使用白色文本并降低不透明度。這樣可以讓背景顏色稍微滲透，以不與背景沖突的方式去強調文本。

2.手工挑選基于背景顏色的顏色

當背景是圖像或圖案時，或者當降低不透明度使文本感覺太鈍或褪色時，這比減少不透明度更好。

選擇與背景顏色相同的顏色，調整飽和度和亮度，直到它看起來正確

3.抵消陰影

不使用較大的模糊和展開值來使框陰影更明顯，而是添加垂直偏移。

它看起來更自然，因為它模擬了一個從上面照射下來的光源，就像我們以前在現實世界中看到的一樣。

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

如果您有興趣了解有關陰影設計的更多信息，那么《材料設計指南》是一本非常棒的入門讀物。

4.使用較少的邊框

當你需要在兩個元素之間創(chuàng)建分離時，嘗試抵抗立即到達邊界。

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

當您下次找到自己的邊界時，請嘗試以下其中一個想法：

1.使用框陰影

盒子陰影可以很好地概括像邊框那樣的元素，但可以更精細并實現相同的目標而不會分散注意力。

2.使用兩種不同的背景顏色

通常只需要為相鄰元素提供略微不同的背景顏色即可區(qū)分它們。如果您已經使用了除邊框之外的其他背景顏色，請嘗試刪除邊框;?你可能不需要它。

3.增加額外的間距

有什么更好的方法來創(chuàng)建元素之間的分離而不是簡單地增加分離？將事物間隔得更遠是在不引入任何新UI的情況下創(chuàng)建元素組之間區(qū)別的好方法。

5.不要放大那些小圖標

如果你正在設計一些可以使用一些大圖標的東西（比如登陸頁面的“功能”部分），你可能會本能地獲得一個像?Font Awesome?或?Zondicons?這樣的免費圖標集，然后提升尺寸直到滿足你的需求。

畢竟它們是矢量圖像，所以如果增加尺寸，質量不會受到影響嗎？

雖然矢量圖像在增加尺寸時不會降低質量，但是當你將它們?吹到預期尺寸的3倍或4倍時，以16-24px繪制的圖標看起來永遠不會非常專業(yè)。他們缺乏細節(jié)，總覺得不成比例地“矮胖”。

如果你有小圖標，請嘗試將它們包含在另一個形狀中，并為形狀提供背景顏色：

這使您可以使實際圖標更接近其預期大小，同時仍然可以填充更大的空間。

如果您有預算，您還可以使用設計用于較大尺寸的高級圖標集，例如

Heroicons?或 lconic

6.使用重音邊框為平淡的設計添加顏色

如果你不是一名設計師，你如何在你的用戶界面中添加那些其他設計從美麗的攝影或彩色插圖中獲得的視覺效果？

一個可以產生重大影響的簡單技巧是為界面的某些部分添加色彩鮮艷的邊框，否則會感覺有點乏味。

例如，在警告消息的旁邊：

或突出顯示活動導航項：

甚至在整個布局的頂部：

它不需要任何圖形設計人才來為您的UI添加彩色矩形，它可以大大有助于使您的網站更“設計”。

挑選顏色很難？嘗試從?Dribbble的顏色搜索?等受限制的調色板中進行選擇，以避免被傳統顏色選擇器的無限可能性所淹沒。

7.并非每個按鈕都需要背景顏色

當用戶可以在頁面上執(zhí)行多個操作時，很容易陷入純粹基于語義設計這些操作的陷阱。

像Bootstrap這樣的框架通過為您提供一個語義樣式菜單來鼓勵這一點，無論何時添加新按鈕，都可以選擇：

“這是一個積極的行動嗎？將按鈕設為綠色?！?/p>

“這會刪除數據嗎？將按鈕設為紅色?！?/p>

語義是按鈕設計的一個重要部分，但是有一個更常見的重要維度：層次結構。

頁面上的每個操作都位于重要金字塔的某個位置。大多數頁面只有一個真正的主要動作，一些不太重要的次要動作，以及一些很少使用的三級動作。

在設計這些操作時，在層次結構中傳達它們的位置非常重要。

主要行動應該是明顯的。堅固，高對比度的背景色在這里工作得很好。

次要行動應該清楚但不突出。輪廓樣式或較低對比度的背景顏色是很好的選擇。

三級行動應該是可發(fā)現的，但不引人注目。像鏈接一樣設置這些操作通常是最好的方法。

“破壞性的行動怎么樣，他們不應該總是變紅嗎？”

不必要！如果破壞性操作不是頁面上的主要操作，則最好給它進行二級或三級按鈕處理。

保存大，紅色和粗體樣式，以便當負面操作實際上是界面中的主要操作時，就像在確認對話框中一樣：