編輯導語：對于一個優(yōu)秀的產(chǎn)品來說，視覺設計是重要的組成部分。本篇文章作者根據(jù)自己自身經(jīng)驗，分別從排版、文本、品牌、顏色以及陰影五個方面，來討論如何提升作品的用戶體驗度。希望對你有所幫助！

如何從視覺層面提高用戶體驗，我總結(jié)了14點，可以幫助在工作中一稿通過。

一、排版是基礎(chǔ)能力

排版是信息媒介和接收者之間溝通的橋梁，也是設計師最為基礎(chǔ)的能力，可以簡單地把他理解成是一種對信息進行有序的排列方式。

1. 模塊間距3種表現(xiàn)方式

做界面最常用的工具就是縱向網(wǎng)格系統(tǒng)，所以做UI中一定要有模塊的概念，模塊也會被稱為“容器”，是承載文字，圖標、顏色等元素的一個載體。

模塊與模塊之間的間距通常會用線、面、留白三種切割方式來表示。

2. 留白是很好的表現(xiàn)手法

在設計過程中，我很喜歡使用“留白”這個表現(xiàn)手法，我們在設計界面時候沒必要把所有的屏幕空間都填滿，在我看來“留白”是像圖標、顏色、圖片一樣重要的設計元素，它可以讓整個設計都具有呼吸感。

如下面這個設計案例，你有沒有覺得右邊的界面更有呼吸感。

在我眼里蘋果不僅僅是一家科技公司，更是一家很好的設計公司，不僅每年的產(chǎn)品營銷案例做得好，產(chǎn)品的設計表現(xiàn)能力也是數(shù)一數(shù)二的，像蘋果的官網(wǎng)就經(jīng)常用“留白”的設計手法。

如下面兩幅網(wǎng)頁設計作品，是不是覺得還是右邊的效果圖看起來更加大氣，效果更好呢？

3. 對比&信息整理

做UI設計的，最重要的任務就是想把重要的元素突出頁面上、把信息清晰高效地傳遞給用戶。

要做到這點其實并不難，我就聊一聊我最常用的兩個設計手法——對比和信息整理。

什么叫對比，簡單來說就是不一樣，我們通過顏色、字體粗細、空間關(guān)系、形狀等元素把重要的信息凸顯出來。

如下圖，僅僅是調(diào)整了字體顏色和空間關(guān)系就會覺得右邊的信息更高效。

那什么叫信息整理？

這里就要講到四大排版原則中的“親密性”原則了，親密性原則就是將相關(guān)項的信息組織在一起，在一個頁面上，通過位置接近，表示兩者之間存在著關(guān)聯(lián)。

我們對信息的整理一般會分為3個步驟，即“理解、提取、設計”。

1. 理解：屬于自己的思考階段，思考一下文案的信息各自都代表什么意思，信息之間是否存在關(guān)聯(lián)性。
2. 提取：這一步，要思考哪些信息是最重要的，哪些信息是次要的，并把信息按照重要程度進行排序。
3. 設計：在這一步里，就要用到“親密性”原則了，通過對信息的重新整理、排序把信息重新設計出來。如果有必要的話，也可以酌情減少一些多余的信息。

二、文本的間距設計規(guī)律

在UI界面中，字號的大小決定了信息的層次和權(quán)重。層次分明的不同字號大小的排列，會讓整體的設計變得更加清晰有序。

1. 垂直&有節(jié)奏的間距

在大段落的文章列表場景，對齊肯定不用講，大家都知道兩邊要留有固定的安全距離，所以文本內(nèi)容肯定是需要垂直對齊。

關(guān)于節(jié)奏我想聊的是，很多同學會認為規(guī)范就是固定所以在處理大的段落標題、文本中、第二段標題、第二段文本之間都會用了相同的間距，這種做法嚴格上講并沒有錯，只是缺少點節(jié)奏感。

我們倒不知，標題和文本之間還是采用固定間距，第一段內(nèi)容和第二段內(nèi)容之間采用更為大一些的間距，來保證段落與段落之間層級分明，有更好的視覺層次結(jié)構(gòu)。

2. 標題的行高規(guī)律

標題的文案越短小精練、一行展示完畢最好，但是也會遇到特殊情況需要兩行展示完，如書名、新聞場景，針對這種情況就要考慮標題的行高問題了。

我推薦標題的行高是文本字號的1—1.3倍，你既可以使用文本的默認行高去設計，也可以使用我推薦的規(guī)范去試一試效果，總之，保持規(guī)范一致的前提下以你覺得合理的規(guī)范去設計行高即可。

三、要有品牌元素加入

品牌是一個很大的課題，如果你想深入地了解，可以看我這篇文章的內(nèi)容《萬字拆解為什么你的設計沒有品牌感？》。

1. 加入一些品牌元素

企業(yè)花了很大的成本建立起來的企業(yè)形象，提煉出來的品牌logo，作為設計師肯定是不能放過這些資源的。

比如，一些大廠的產(chǎn)品就會把品牌的logo反復地出現(xiàn)在產(chǎn)品中，加深用戶印象。

小米有品：用戶登錄后進入首頁場景，左上角會一直顯示這個“有品”兩字的logo，這樣的設計會加深用戶印象。

百度瀏覽器：把品牌的logo加入到高頻使用的功能中，如搜索器中，這也是一個不錯的設計方案。

之前我們聊過，如果品牌沒有運營的支持，那會給用戶產(chǎn)品沒有迭代的感覺，所以在每一次活動節(jié)日中也可以把特殊的節(jié)日元素放到界面中。

（1）淘寶

在中秋節(jié)活動，淘寶的聚劃算頻道把icon變形為中秋賞月GIF版，加深用戶的視覺體驗，吸引用戶點擊進入聚劃算頻道的二級頁面。

（2）夸克瀏覽器

在冬奧會舉辦期間把運動員的形象和品牌logo結(jié)合，并且在中國健兒在獲得獎牌的時候還會更新動畫形象。

2. 有場景就加入IP形象

擬人化的IP形象設計無疑是產(chǎn)品與用戶最有效的溝通工具，很多公司都會把ip形象放到活動運營中，比如，騰訊組織的99公益日，從2018年設計師就在不同公益平臺把這個小紅花的形象加入到產(chǎn)品頁面中。

之后設計師巧妙地和集團其他產(chǎn)業(yè)線的吉祥物相結(jié)合，輸出不同樣式的設計稿，不僅宣傳了99公益日也很好地宣傳了騰訊集團的企業(yè)文化。

四、顏色的選擇

顏色是占界面中面積最大的元素，也是用戶體驗最為直觀的一個設計元素。

1. 謹慎使用飽和度高的顏色

雖然高度飽和的顏色，會讓產(chǎn)品看起來很好看，但當大面積出現(xiàn)很容易讓用戶產(chǎn)生刺眼的感覺，尤其是有大量文案信息的場景。

如下圖的紅包場景，你會發(fā)現(xiàn)右側(cè)較為低的飽和度，文案讀起來更加舒服。

2. 加強對比使文案更清晰

無論何時，我們都要盡量保持文案的清晰呈現(xiàn)，那如何使較淺的文案在較淺的背景（圖片）上展示呢？

解決辦法很簡單，如下圖，我們只需要在文案的下面加一層深色的不透明度圖層即可，或者更改文案的顏色也行，總之一點，加強文案與背景的對比就可以了。

3. 背景顏色的選擇

在電商產(chǎn)品中，產(chǎn)品展示圖雖然使用白色或者灰色充當背景顏色，會顯示產(chǎn)品很高級，但是如果想把產(chǎn)品展示多一份趣味性的話，不妨試一試選擇一些和產(chǎn)品相近的顏色，調(diào)整其明度、純度應用在背景、文本或者是圖標上，這會使整體的界面年輕活潑起來。

4. 讓配色展示得高級點

現(xiàn)在很多電商的圖片都用充滿挑戰(zhàn)的配色去吸引用戶的眼光，我對此保留個人觀點，我覺得還是把商品配圖的顏色設計得更為和諧、更為高級一些，能取得用戶的信任度，尤其是醫(yī)療或者藥品類的產(chǎn)品。

五、合理地使用陰影

在現(xiàn)實的生活中一個物體的出現(xiàn)在空間內(nèi)相應地就會有陰影出現(xiàn)，雖然我們做的界面是扁平的，但是現(xiàn)在很流行把立體的效果加入到UI界面中，對于陰影的使用也有幾點注意。

1. 彌撒投影的制作

很多人會選擇直接在圖層樣式上做投影，但是我更喜歡自己制作彌散投影。

比如下圖，在現(xiàn)有的元素下面再添加等大的元素，將元素縮小至70%——80%，底端對齊，然后向下豎移6——10個像素。

然后再給元素添加高斯模糊效果，模糊半徑控制在6~16之間，營造item懸停的效果。

2. 給投影加點顏色

學過畫畫的同學應該都知道，我們在畫色彩景物的時候老師都會在投影里面加一點其他顏色，目的就是讓投影也有色彩傾向。

很多人會有疑問，我觀察了啊，投影顏色是黑色的啊，為什么要加顏色，對這一點有疑問的同學我建議去看看莫奈的《日出》這幅作品。

在我們真實的世界里面，如果你在一塊白布上面放一個紅蘋果，你盯著投影去看，會發(fā)現(xiàn)投影里面不單單是黑色，還會具有環(huán)境色，這就是真實生活中投影的樣子。

我們制作投影效果的時候也應該如此盡量避免使用黑色陰影，還原真實世界中投影的樣子，比如可以加入一點背景顏色這樣看起來更加自然。

3. 陰影的拓展

市面上還有一種效果和陰影很像，叫“毛玻璃擬態(tài)”風格，因為這種效果注重空間感，有助于產(chǎn)品與用戶建立界面的層次結(jié)構(gòu)和深度的感覺，像是我們的電視就經(jīng)常會用這種效果。

后來又有設計師在毛玻璃的基礎(chǔ)上進行再設計，制作出和物理空間中真實的玻璃一樣的效果，并且很多產(chǎn)品把這種風格應用到圖標上面，增添產(chǎn)品趣味性，緩解用戶視覺疲勞感。

六、結(jié)尾

以上是經(jīng)驗結(jié)論，大家還需要在實際工作中積攢自己的經(jīng)驗，祝大家一稿過哦～

#專欄作家#

斜杠7濕兄，公眾號：斜杠7濕兄，人人都是產(chǎn)品經(jīng)理專欄作家。星光不問趕路人，時光不負有心人，勵志做一個知識的分享者。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議