我們常常把網站的用戶體驗掛在嘴邊，而UI(User Interface)就是提升網站用戶體驗的秘密武器。一個友好的用戶界面，可實現用戶與網站之間的友好交互，讓操作過程變得更人性化。毫不誇張說句，UI決定了互聯網創業的成敗。

如何設計出友好的UI界面呢?界面視覺設計包含五個要素：色彩、文字、圖標、圖片、空間。要想設計出色的UI界面，就必須將這五大要素發揮得淋漓盡致。

一、色彩搭配

UI設計的色彩搭配主要有以下幾種：

① 同類色搭配

特點：同類色搭配對比效果統一、清新、含蓄，但也容易產生單調、乏味的感受。

② 鄰近色搭配

特點：鄰近色搭配對比效果柔和、文靜、和諧，但也容易感覺單調、模糊，需調節明度來加強效果。

③ 類似色搭配

特點：類似色搭配對比效果較豐富、活潑，同時又不失統一、和諧的感覺。

④ 中差色搭配

特點：中差色搭配對比效果明快、活潑、飽滿、使人興奮，同時不失調和之感。

⑤ 對比色搭配

特點：對比色搭配對比效果強烈、醒目、刺激、有力，但也容易造成視覺疲勞，一般需要採用多種調和手段來改善對比效果。

⑥ 互補色搭配

特點：互補色搭配表現出一種力量、氣勢與活力，具有非常強烈的視覺衝擊力。

⑦ 多色搭配

特點：多色搭配會讓畫面顯得更加豐富、多彩，充滿趣味性，但若控制不好，也容易讓畫面變花，失去平衡。

二、文字字體選擇

UI設計中的字體主要分為襯線體和無襯線體。

① 襯線體

襯線體具有復古傳統的曲線美，個性鮮明，張力十足，適合時尚奢侈品牌或復古海報等設計領域中。

② 無襯線體

無襯線體一般比較簡約，且具有現代感， 所以比較適合Web、App 等互聯網科技領域的設計中。

三、圖標

圖標是UI設計中的點睛之筆，既能輔助文字信息的傳達，也能作為信息載體被高效地識別，而且還具有一定裝飾作用，提高界面設計的美觀度。

① 圖標類型

對於圖標類型，目前還沒有很權威的分類，但主要還是可以劃分為：功能型圖標和展示型圖標。

功能型圖標：一般來說，在UI界面中，用戶可以點擊的圖標都可以看做是功能性圖標，此類圖標往往代表某一功能或某一鏈接的跳轉。

展示型圖標：與功能性圖標相比，展示型圖標會更具有設計感，而且具備較高的辨識度。展示型圖標主要是應用程序的啟動圖標，突顯產品的屬性、氣質以及品牌形象等。

② 圖標風格

圖標的設計風格有很多種，例如：線性圖標、面性圖標、線面結合圖標、扁平圖標、輕擬物圖標等。

線性圖標：此類圖標輕巧簡練，具有一定的想像空間，不會對界面產生太大的視覺干擾;

面性圖標：此類圖標比較穩重和紮實，對色彩的傳達有清晰明顯;

線面結合圖標：採用粗描邊線和偏移的填充面相結合，靈動而鮮明，突顯內容、表現清晰;

扁平圖標：此類圖標讓信息本身作為核心被凸顯出來，並且在設計元素上強調抽象、極簡、符號化;

輕擬物圖標：利用淡淡的漸變和光影達到兩者之間的平衡，使圖標不那麼「平」，識別性高又不失美感。

四、圖片

圖片在界面設計中也是非常常見，圖片質量和展現方式都會影響用戶對產品的感官體驗。

① 圖片比例

不同比例的圖片所傳遞的主要信息各不相同，這需要結合產品特點和場景選擇合適的圖片比例。

1比1：比較常見的圖片設計比例，構圖簡單，能突出主體的存在感，常用於產品、頭像、特寫等展示場景。

4比3：圖像緊湊，容易構圖，便於開展設計。

16比9：能呈現電影觀影般的效果，大多數視頻播放軟件常用的尺寸，能帶給用戶開闊視野的體驗。

16比10：最接近黃金比，蘊藏着豐富的美學價值，被認為是藝術設計中最理想的比例。

② 圖片排版

圖片的排版類型有很多種，主要還是根據不同的場景和所需傳遞的主體信息來選擇和展示。

滿版型：常搭配文字信息或 icon 修飾，視覺傳達直觀而強烈，給人大方、舒展的感覺。

通欄型：通欄型圖片寬闊大氣，可以有效地強調和展示重要的商品、活動等運營內容。

並置型：能給原本複雜喧鬧的版面帶來秩序、安靜、調和與節奏感。

九宮格型：這種構圖給人嚴謹、規範、有序的感覺。

瀑布流型：呈現參差不齊的多欄布局，降低了界面複雜度，節省了空間，使用戶專註於瀏覽。

五、空間

空間是網頁設計中不可或缺的部分，它不僅僅是處於視覺審美的需要，還肩負重要的角色，在視覺審美與引導用戶之間達成完美平衡。

① 柵格系統

柵格系統(Grid systems)，運用固定的格子設計版面空間布局，風格工整簡潔，能讓網頁的信息呈現更加美觀、易讀、嚴謹和一致，同時也更具可用性。

② 留白

留白能吸引並引導用戶瀏覽頁面的方式，運用得當還能引導用戶注意你想突顯的元素。

留白表現形式

輕度留白：在傳遞出雅緻、高端、文藝等氣質的同時，又能將信息表現得清晰直接，讓頁面更加簡潔和實用，而且不受品牌屬性的影響，幾乎任何產品都可以用這種表現形式。

重度留白：傳遞出的雅緻、空靈、高端氣質是最強的，但與此同時，其他的屬性也近乎為零。所以，重度留白傳遞的不是產品，而是概念、氣質和態度。

一個成功的UI界面設計不僅有很高的轉化率，而且還能滿足商業目標為用戶帶來更好的體驗。但無論UI設計是往哪個方向，永遠都離不開以上五大屬性，只有把這些細節都做好，才能更容易獲取用戶的心。