起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識學會這14招，助你產品界面一稿過
編輯導語：對于一個優秀的產品來說，視覺設計是重要的組成部分。本篇文章作者根據自己自身經驗，分別從排版、文本、品牌、顏色以及陰影五個方面，來討論如何提升作品的用戶體驗度。希望對你有所幫助！
如何從視覺層面提高用戶體驗，我總結了14點，可以幫助在工作中一稿通過。
一、排版是基礎能力
排版是信息媒介和接收者之間溝通的橋梁，也是設計師最為基礎的能力，可以簡單地把他理解成是一種對信息進行有序的排列方式。
1. 模塊間距3種表現方式
做界面最常用的工具就是縱向網格系統，所以做UI中一定要有模塊的概念，模塊也會被稱為“容器”，是承載文字，圖標、顏色等元素的一個載體。
模塊與模塊之間的間距通常會用線、面、留白三種切割方式來表示。
2. 留白是很好的表現手法
在設計過程中，我很喜歡使用“留白”這個表現手法，我們在設計界面時候沒必要把所有的屏幕空間都填滿，在我看來“留白”是像圖標、顏色、圖片一樣重要的設計元素，它可以讓整個設計都具有呼吸感。
如下面這個設計案例，你有沒有覺得右邊的界面更有呼吸感。
在我眼里蘋果不僅僅是一家科技公司，更是一家很好的設計公司，不僅每年的產品營銷案例做得好，產品的設計表現能力也是數一數二的，像蘋果的官網就經常用“留白”的設計手法。
如下面兩幅網頁設計作品，是不是覺得還是右邊的效果圖看起來更加大氣，效果更好呢？
3. 對比&信息整理
做UI設計的，最重要的任務就是想把重要的元素突出頁面上、把信息清晰高效地傳遞給用戶。
要做到這點其實并不難，我就聊一聊我最常用的兩個設計手法——對比和信息整理。
什么叫對比，簡單來說就是不一樣，我們通過顏色、字體粗細、空間關系、形狀等元素把重要的信息凸顯出來。
如下圖，僅僅是調整了字體顏色和空間關系就會覺得右邊的信息更高效。
那什么叫信息整理？
這里就要講到四大排版原則中的“親密性”原則了，親密性原則就是將相關項的信息組織在一起，在一個頁面上，通過位置接近，表示兩者之間存在著關聯。
我們對信息的整理一般會分為3個步驟，即“理解、提取、設計”。
- 理解：屬于自己的思考階段，思考一下文案的信息各自都代表什么意思，信息之間是否存在關聯性。
- 提?。?/strong>這一步，要思考哪些信息是最重要的，哪些信息是次要的，并把信息按照重要程度進行排序。
- 設計：在這一步里，就要用到“親密性”原則了，通過對信息的重新整理、排序把信息重新設計出來。如果有必要的話，也可以酌情減少一些多余的信息。
二、文本的間距設計規律
在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協議
作者舉的例子對比十分清晰，文章結構流暢，干貨滿滿，謝謝作者的分享。
排版、文本間距、品牌logo到顏色的選擇，一點點的改變視覺效果就完全不同了，設計真的很神奇！
又來看7師兄的文章了（抱拳）能否建議下怎么提高排版審美？