編輯導語：對于一個優秀的産品來說，視覺設計是重要的組成部分。本篇文章作者根據自己自身經驗，分别從排版、文本、品牌、顔色以及陰影五個方面，來讨論如何提升作品的用戶體驗度。希望對你有所幫助！

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

一、排版是基礎能力

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

1. 模塊間距3種表現方式

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

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

2. 留白是很好的表現手法

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

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

在我眼裡蘋果不僅僅是一家科技公司，更是一家很好的設計公司，不僅每年的産品營銷案例做得好，産品的設計表現能力也是數一數二的，像蘋果的官網就經常用“留白”的設計手法。

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

3. 對比&信息整理

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

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

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

如下圖，僅僅是調整了字體顔色和空間關系就會覺得右邊的信息更高效。

那什麼叫信息整理？

這裡就要講到四大排版原則中的“親密性”原則了，親密性原則就是将相關項的信息組織在一起，在一個頁面上，通過位置接近，表示兩者之間存在着關聯。

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

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

二、文本的間距設計規律

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

1. 垂直&有節奏的間距

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

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

我們倒不知，标題和文本之間還是采用固定間距，第一段内容和第二段内容之間采用更為大一些的間距，來保證段落與段落之間層級分明，有更好的視覺層次結構。

2. 标題的行高規律

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

我推薦标題的行高是文本字号的1—1.3倍，你既可以使用文本的默認行高去設計，也可以使用我推薦的規範去試一試效果，總之，保持規範一緻的前提下以你覺得合理的規範去設計行高即可。

三、要有品牌元素加入

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

1. 加入一些品牌元素

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

比如，一些大廠的産品就會把品牌的logo反複地出現在産品中，加深用戶印象。

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

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

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

（1）淘寶

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

（2）誇克浏覽器

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

2. 有場景就加入IP形象

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

之後設計師巧妙地和集團其他産業線的吉祥物相結合，輸出不同樣式的設計稿，不僅宣傳了99公益日也很好地宣傳了騰訊集團的企業文化。

四、顔色的選擇

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

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

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

如下圖的紅包場景，你會發現右側較為低的飽和度，文案讀起來更加舒服。

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

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

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

3. 背景顔色的選擇

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

4. 讓配色展示得高級點

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

五、合理地使用陰影

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

1. 彌撒投影的制作

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

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

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

2. 給投影加點顔色

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

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

在我們真實的世界裡面，如果你在一塊白布上面放一個紅蘋果，你盯着投影去看，會發現投影裡面不單單是黑色，還會具有環境色，這就是真實生活中投影的樣子。

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

3. 陰影的拓展

市面上還有一種效果和陰影很像，叫“毛玻璃拟态”風格，因為這種效果注重空間感，有助于産品與用戶建立界面的層次結構和深度的感覺，像是我們的電視就經常會用這種效果。

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

六、結尾

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

#專欄作家#

斜杠7濕兄，公衆号：斜杠7濕兄，人人都是産品經理專欄作家。星光不問趕路人，時光不負有心人，勵志做一個知識的分享者。

本文原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部