不會設計不要緊！看看這七個實用的網頁UI設計小技巧！

在微博看到別人轉發的這篇文章，裏面的每一點都以爲很是實用，就決定翻譯一下，也算是給本身存個檔，加深一下印象。畢竟做爲一個前端頁面仔，頁面UI的美化也是咱們的工做，並且還會常常會被要求在頁面上加個這個或者加個那個，沒有設計稿直接整頁面也是常有的事，瞭解一些UI設計的基本法則仍是頗有必要滴~
原文連接>>>

---

無論喜不喜歡，每一個網頁開發者老是會沒法避免的要面對一些視覺設計上的決策。
可能你的公司沒有一個全職的設計師，你得本身隨機應變一些功能上的UI設計，又或者是你可能在作本身的項目，不想讓他看起來太像'另一個Bootstrap網站'。

這時候你可能會乾脆擺擺手說:「反正我永遠也作很差，我又不是設計師。」但其實有不少小技巧能夠提高你的項目的設計感，而且不須要你有圖形設計的背景知識。

下面給你們介紹一些可以立馬提高你的設計的小技巧：

使用字體的顏色和粗細來區分等級 而不是字體大小

在作UI設計的時候有一個常常會犯的錯誤就是過分依賴字號大小來對文字進行級別的區分：
「這個文字重要？那就讓它大一點」
「這個文字次要？那就讓它小一點」
與其讓字號大小承擔這麼多的工做，不如試試用字體粗細和顏色來作一樣的事：
「這個文字重要？那就讓它粗一點」
「這個文字次要？那就讓它顏色淺一點」
儘可能保持在2-3種顏色：

• 用深色（不是黑色）來表示首要的內容，例如文章的標題。
• 用更淺的灰色來表示輔助文本，例如頁腳的版權信息等等。

一樣的，兩種字體粗細對於UI界面來講足夠了。

• 大多數文本使用正常字體粗細（400或500，具體取決於字體）
• 重點強調的文本使用更粗一些的字體（600或者700）

注意，不要使用400如下的字體粗細，由於它只有在較大的字號如標題這種纔有效果，在小號字體上表現的很是不明顯，若是你想用更細的字來表示更次要的文本，可使用更淺的顏色或者小一號的字體大小。

不要在彩色背景上使用灰色字體

在白色背景下使用較淺一些的灰色來表示次要文本是一種不錯的選擇，可是在有顏色的背景下就不太好了。這是由於咱們實際看到的灰色在白色背景下的效果是下降對比度。
要想視覺上讓文本的呈現次要等級效果，應該要讓文字顏色更接近背景色，而不是用灰色，以達到下降對比度的效果。

在彩色背景下，你能夠採用一下兩種方式來下降對比度：

• 下降白色字的透明度 - 適當下降字的透明度，讓背景顏色稍微滲透一些，這樣即達到了弱化的效果又不會與背景相互衝突。
  
• 手動選擇一個接近背景顏色的字體顏色 - 當你的背景是圖形或者圖片的時候，這種方式比用透明度要好，由於透明度看起來會更死板像是褪色的感受。選擇一個跟背景色的色調相同的顏色，調整飽和度和明度直到你以爲合適爲止。
  

設置陰影偏移

與其用大塊的陰影模糊去強調盒子，不如使用垂直方向上的偏移量。它看起來會更加的天然，由於它模擬的是燈光從上往下照射在物體上的投射，更接近咱們在現實中看到的場景。
這個小技巧一樣也適用於input。

若是你想了解更多關於陰影設計的東西，能夠看看 Material Design Guidelines。

少用點邊框

當你想要在兩個區塊之間作分隔的時候，不要第一時間就想着用邊框。固然，邊框確實是很好的用來分割的方式，可是它不是惟一的方式啊，過多的使用邊框會讓你的設計看起來雜亂。
下次當你想用邊框的時候，不妨試試下面這幾個：

• 使用盒子陰影 - 盒子陰影實現的效果和邊框基本相同，可是它呈現的效果會更微妙一些，沒有邊框那麼讓人分心。
  
• 用兩種不一樣的背景色 - 只要給元素稍微加一點背景顏色的不一樣，就能呈現分割的效果了，你能夠嘗試去掉兩個不一樣背景色之間的邊框，其實根本不須要呢。
  
• 增長額外空間 - 還有什麼比給元素之間增長空間更能體現分隔效果的呢？製造一點空間讓元素互相遠離，就能很好的達到分隔效果，也不須要引入其餘的UI元素。
  

不要把小圖標放大

當你在某個地方須要用到大的圖標的時候（好比登陸頁的功能部分），你可能立馬就去用免費的字體圖標庫如 Font Awesome 之類的，而後調整字號大小，達到你須要的效果。
可是，它們畢竟是矢量圖像啊，當你放大了以後，質量不會降低嗎。
固然，矢量圖像即使是被放大也不會影響圖像質量，可是 實際大小爲16–24px的圖標被放大3-4px以後，看上去會很是的不專業，缺少細節，看上去十分笨重。

若是你只有小號的圖標，能夠把它包裹在一個有背景色的大色塊裏面，這樣既不影響圖標的顯示效果，又能佔據更大的空間。

若是你有足夠的預算，也可使用一些額外收費的圖標，好比 Heroicons 或者 Iconic。

使用鮮明的邊框爲平淡的設計增添色彩

若是你不是專業的設計師，你的界面也沒有也很平淡，沒有優美的插圖或者照片來裝飾，如何爲頁面增添一點風味呢？
有一個效果很顯著的小技巧就是爲簡單的頁面添加粗重的邊框，這樣能夠減小頁面的乏味感。
舉個栗子，好比下面這個警告條：

再舉個栗子，高亮導航欄元素：

再再再舉個栗子，爲整個頁面都加一個邊框：

這種方式不須要你有什麼設計就能改善頁面UI，讓頁面看起來更有設計感。
若是你不知道如何選擇顏色，網上也有不少色系搭配方案可供選擇，或者試試 Dripple的顏色選擇，讓你從傳統顏色選擇器無窮無盡的可能中解脫出來。

不是全部的按鈕都須要背景色

當一個頁面上有不少須要用戶操做的按鈕時，很容易就陷入一種錯誤，就是徹底根據語義來設計這些操做按鈕的顏色。
Bootsrap框架從某種程度上鼓勵了這種行爲，當你引入一個button的時候，有一排不一樣語義的不一樣顏色的按鈕供你選擇。

「這是一個積極的操做？用綠色按鈕。」
「這個操做是刪除數據？用紅色按鈕。」
誠然，語義也是按鈕設計中必不可少的一個因素，但還有另一個維度卻被忽略了，那就是層級。
在一個頁面的裏面，操做按鈕的層級就像金字塔同樣分佈，有一個最高級別的操做，和一些次要操做，以及一些不怎麼使用的三次操做。操做的層級在設計按鈕的時候必須明顯的體現出來：

• 首要操做必須明顯 - 高對比度的背景顏色適用於這裏。
• 次要操做應該表現清晰但不用太突出- 邊框樣式或者低對比度的背景色適用於這裏。
• 三級次要操做應該是可被發現但不引人注目的 - 把這些操做當成 link連接的樣式來處理會比較好。

「那若是是銷燬操做呢？難道不該該用紅色嗎？」
不必定噢！若是不是首要操做，就不須要用紅色背景，用次要操做的樣式便可。

只有當銷燬操做是當前首要操做的時候採用高對比度的紅色背景樣式，好比彈出對話框的確認取消按鈕。

---

怎麼樣，是否是看完了以後和我同樣以爲頗有收穫捏？~(￣▽￣)~*