向資深UI設計師"取經":用戶界面怎樣設計才更顯高級與質感？
+ 查看更多

發布日期：2019-02-27

瀏覽次數：2319

用戶界面（UI）是一個網站的"門面擔當"，它決定著用戶對網站的第一印象，影響著用戶與網站互動的產生。在《界面設計高手不會告訴你的8條UI設計準則》中，小飛就簡要介紹了用戶界面設計的8條準則，比如通用性、一致性、易用性等，這主要是從UI界面的性能方面出發的。而對于很多設計師來說，他們還希望UI界面能呈現更佳的視覺效果。如何提升UI界面的設計感？在今天這篇文章中，小飛就總結了7個有效、實用的技巧，它甚至不需要你掌握任何平面設計方面的知識，快來一起看看吧！

1. 利用顏色和字重來創建視覺層級

在創建UI界面的視覺層級時，很多設計師最常見的一個問題就是過于依賴字體大小的調整。舉個栗子來說，如果這段文字很重要，他們會選擇增大字號；如果那段文字比較次要，他們會選擇縮小字號。而事實上，除了利用字體字號大小外，我們還可以通過使用不同的字體顏色或字重來實現UI界面視覺層級的架構。比如說，當重要文本呈現時，我們可以配以明亮的顏色，當次要文本呈現時，配以稍淺的顏色。

如果有必要的話，我們甚至可以同時使用2-3種顏色：

主要內容使用深色，并不一定就是黑色，（比如文章的標題）；
次要內容使用灰色（比如文章發布的日期）
輔助內容使用淺灰色（比如頁腳處文章的版權聲明）

同理，不同的字重也可以用來提升UI界面的視覺層次感：大部分文本采用常規的字重（如400-500，具體以字體為準）；想要重點強調的文本采用較重的字重（如，600-700，具體以字體為準）。對了，在網頁界面上，字體的字重最好不要低于400，這是因為400以下字重的字體在尺寸縮小的情況下可讀性很差。在這種情況下，如果你想弱化某些文本，可以考慮選擇淺一點的顏色或是更小的字號。

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

我們之所以在白色背景上使用灰色文本（而不是黑色文本）主要是為了降低兩者之間的對比度，淡化其視覺效果，營造清晰但不突兀的視覺層級。而當網頁背景是彩色的時，使用灰色文本的這個技巧就不適用了。

那么在彩色背景下，如何有效降低文本和背景的對比度、創建良好的視覺層級呢？

1). 使用透明度高的白色文本

在彩色背景下，我們可以使用透明度高的白色文本。白色文本的高透明度，能讓背景的顏色透過來一點，進而降低文本和背景之間的沖突感，呈現合理的視覺效果。

2). 基于背景色選擇文本顏色

如果網站背景是一張圖片或某種圖案時，半透明的白色文本可能會顯得比較單調、乏味。這時，我們不妨基于背景色選擇一種字體顏色，比如選擇色調與背景色一致的，再進行飽和度和亮度的微調。

3. 垂直陰影設計

相比Blur（模糊距離）和Spread（陰影尺寸），V-shadow（垂直陰影）的使用可以讓box-shadow更加突出。另外，通過這種方法設置出來的頁面陰影也更加自然，因為垂直陰影的設計方法模擬了最常見的光源特征，光線從上向下照下來營造一定的陰影效果。如果您對這種設計手法很感興趣的話，可以瀏覽。

4. 少使用borders

一提到不同元素之間的"涇渭分明"，大家很容易就會想到borders（邊框）。其實，borders并不是區分元素的唯一方法，它也不是百利而無一害的。比如，當頁面中的borders很多時，它不僅無法起到原有的作用，反而會讓整個頁面顯得十分擁擠、雜亂（見下圖）。

所以，當你下次想要區分不同元素時，也可以嘗試使用下面這些方法：

1). 使用box shadow

Box shadow可以很好的刻畫出元素的輪廓，營造邊界感。而且它看上去更加微妙，不會分散用戶的注意力。

2). 使用不同的背景顏色

當你想要區分不同元素時，你還可以使用不同的背景顏色。下圖就是一個很好的栗子。圖中左邊界面使用了border，右邊界面采用了不同背景顏色。相比較而言，右邊界面上方白色區域和下方淺灰色區域之間不僅界限分明，還更加和諧。

3). 調整間距

調整間距可能是區分不同元素最簡單的一種方式了，它根本無需在界面上引入什么新的設計元素，只需要多留一些空白即可。

5. 不要一味地放大小圖標

當你在設計一些頁面時，比如著陸頁的"Feature"，你可能需要一些大圖標來作為視覺錨點，這時你可能就會去或這樣的平臺找幾個圖標，然后將它們放大到自己需要的尺寸。由于現在很多網站提供的都是矢量圖標，所以你不必擔心這些圖形在放大之后會失真。不過，盡管這些圖標不會失真，但如果你將這些16-24像素的圖標放大3、4倍，它們看上去就會缺少細節、顯得比例失調、頗不專業。

那么遇到這種需要使用大圖標的情況我們應該怎么辦呢？這時，我們可以嘗試將小的圖標放在另一個圖形中，讓圖標看上去視覺面積更大、細節也更豐富。當然，如果你的預算充足的話，你還可以購買一些大尺寸、高質量的圖標集，類似或這樣的。

6. 在界面中使用多彩單邊邊框提升個性

如果你對平面設計不是很精通的話，該如何提升UI界面的設計感呢？這有一個很簡單的技巧，就是在界面的邊緣區域添加單色或漸變的粗線條，這能讓平淡無奇的網頁界面顯得更加生動活潑。比如說，在警告彈出框的側面添加邊框；

或是用來強調有效的導航條目；

甚至是用在整個頁面的頂部；

在網站的界面添加這樣的形狀，并不需要你有任何平面設計的基礎，就能讓你的網站設計感十足。退一萬步講，如果你實在不知道給這些線條設置什么顏色，還可以通過瀏覽上的流行配色方案中尋找靈感。

7. 并不是每個按鈕都需要背景色

當一個頁面上有多個CTA按鈕時，我們總是習慣性的給這些按鈕加上背景色，比如給積極的行為（如購買按鈕）設置綠色的背景，給消極的行為（比如刪除按鈕）設置紅色的背景。盡管添加背景顏色是按鈕設計中的一項重要原則，我們在設計按鈕時還應該考慮到一個更重要的維度，那就是"視覺層級"。同個頁面上不同按鈕的重要性都是不同的，大多數網頁通常都只有一個最真實、最基礎的行為操作、一些二級的行為操作，然后就是幾個不太重要的三級操作。這意味著不同的按鈕可以采取不同的設計方法，并不是每個按鈕都是需要設置背景色的：