現在是靠「樣」食飯的年代，你看看各大媒體每年如何吐槽參加香港小姐的「靚」女就知道啦!同樣，網頁設計不夠「靚仔」都會失去用戶對網站的期待，甚至產生厭惡感。所以，要想抓住用戶的心，你就要好好掌握一些界面設計的技巧!

技巧一：區分層次結構靠字體顏色，不靠大小

界面設計中，很多設計師都會過分依賴字體大小來控制層次結構。不要一味想着改變字號的大小來區分層次結構，其實通過改變字體顏色或字體粗細會令畫面變得更加有質感，更生動。

如何通過字體顏色區分層次結構?

例如：

● 主要內容用深色，如文章標題等，但不要全黑色;

● 次要內容，如文章發表日期等，使用較深的灰色;

● 輔助性內容則可以採用淺灰色，如：頁腳中的版權聲明等。

說了字體顏色，我們有來看看字體粗細如何區分層次結構?

例如：

◆ 大多數文本的正常字重為400~500，具體取決於字體;

◆ 較粗字體即600或700，主要用於需要強調的問題。

注意：在UI設計上，字重不超過400的字體僅適合大標題，因為不利於在較小字號閱讀。另外，如果你考慮使用較輕重量淡化某些文字，請選用較淺的顏色或較小的字體。

技巧二：不要在彩色背景使用灰色文字

想淡化淺灰色文本，這好似在彩色背景中並不是效果很明顯。因為白色搭配灰色的對比度會降低，使文本更接近背景色，而且還有助於創建層次結構，而不是僅僅作為淺灰色出現。

在彩色背景中，如何增加內容層次結構?

1)減少白色文字的不透明度

降低白色文字的不透明度，可以讓背景顏色慢慢滲透，且不會與背景衝突而減弱文字。

2)基於背景色的顏色

當頁面背景是圖像或圖案時，或者減少不透明度卻使文字變得過於枯燥或不適應時，選擇與背景色調相同的顏色，調整飽和度和亮度，效果會更加合適。

技巧三：偏移陰影

不要使用較大的模糊和擴散值增加邊框陰影，添加垂直偏移，會使邊框看起來更自然，就像在現實世界中看到的從上方照射下來的光源。

技巧四：少使用邊框

雖然使用邊框能區分兩個元素，但這並不是唯一的方法，使用太多的邊框會讓你的界面設計變得非常混亂，因此你可以大膽嘗試一下：

① 使用盒子陰影

利用盒子陰影來區分兩個元素的效果，並不會遜色於邊框，而且不會像邊框那樣讓人分心。

② 利用不同色背景顏色

稍微修改相鄰元素的背景顏色，就可以對它們進行區分，但記住使用這種方法時，請嘗試刪除邊框，因為你並不需要它。

③ 添加額外的間距

為兩個元素添加一定的間距，是一種不引入任何新UI的情況下，區分元素組間的好方法。

技巧五：不要過度放大圖標

雖然矢量圖像在增加尺寸時不會降低圖片質量，但如果將它們過分放大，就會顯得非常不專業，總覺得這是一個不成比例的「肥仔」。

嘗試將小圖標放在另一個形狀中，並為該形狀提供背景顏色，這樣既可以保持實際圖標接近預期尺寸，同時還能填充更大的空間。當然如果你有多餘的預算，還可以使用專門用於較大尺寸的高級圖標集。

技巧六：強調邊框

在界面的某些部分添加色彩鮮明的邊框，可以使網站更具有設計感。如果你對色彩搭配的靈敏度不是很好，可以嘗試從Dribbble的顏色搜索等受限調色板中進行選擇，避免被傳統顏色選擇器的無窮可能性所淹沒。

技巧七：並非所有按鈕都要添加背景顏色

語義是按鈕設計中重要的組成部分，但有一個更重要的維度是經常被設計師們忽略的，那就是層次結構。

在界面設計中，層次結構的傳達是非常重要的：

1. 主要行動應該很明顯，可使用實心和高對比度顏色的按鈕;

2. 次要行動應該明確但不突出，使用輪廓樣式或較低對比度背景色的按鈕最為恰當;

3. 三級行動應該是可以發現但不明顯，將這些行為直接設計為鏈接是最好的方法。

4. 至於消極行為按鈕，如果不是頁面上的主要行為，給它二級或三級按鈕處理更更好。

如果你沒有太多的界面設計經驗，但依然想讓自己的設計有足夠的吸引力，最簡單的方法就嘗試以上的界面設計技巧。但如果你嘗試了很多方法都無法解決界面設計問題，你就需要找專業的網頁製作公司Inspirr Creation幫你手。