編輯導語：讓用戶在使用產品不產生混淆、可快速獲取所需信息，是產品設計時應當考慮的重要層面，而這需要團隊在設計時預先做好方案，去掉無關事物，清晰地呈現信息，提升產品的易用性與用戶體驗。本篇文章里，作者介紹了提高信噪比的設計技巧，一起來看一下。

讓“信噪比”最大化。

編者按：用戶對產品的體驗來自直觀感受。所以UI/UX往往對產品的成敗有著直接的影響，糟糕的UI/UX體驗會讓強大的功能失去效力。

但怎么才能提高UI/UX設計的效果呢？不一定需要你掌握豐富全面的設計知識，有時候一點點的小改變就能令設計大為改觀。

Marc Andrew總結了36個改進UI/UX設計的小技巧，分成6篇系列文章刊出，此為第二篇，希望能夠幫助到你。原文發表在Medium上，標題是：UI & UX micro-tips: Volume two。

利用了色輪相鄰色相的設計示例

在為自己的下一個項目創作高效、美觀的 UI 時，有時只需一點小到不能再小的調整就可以幫助你快速改進設計。

在這篇系列文章的第二篇中，我整理了一些很小且容易付諸實踐的技巧，你可以不費吹灰之力就能改進設計和用戶體驗。

廢話少說，直接上干貨……

一、在用戶界面當中使用已有的圖標，可避免造成用戶混淆

兩個設計實例。一個用了意思不明確的圖標，另一個則用了已經得到認可圖標來表示要采取的行動。

在給設計添加圖標時，永遠都要盡量去選擇已得到認可的圖標，那種可以清楚表示將要采取的行動的圖標。

選擇一個能傳達出正確含義和功能的圖標，因為其他任何東西只會引起困惑并給用戶造成認知障礙。

圖標的選擇不要太過叛逆。

二、利用親密性來表示元素之間的關系

兩個設計實例。左邊的設計元素間隔得比較開，右邊的則相距比較近。

在眾多久經考驗得到驗證的設計原則（對比、間隔、重復等）當中，有一項是關鍵，可幫助你為用戶設計出更清晰的 UI……

那就是親密性。

實現親密性很簡單，只需要確保相關的設計元素放在一起就行，放在一起就表明了它們彼此之間的關系，這反過來也可以幫助在用戶瀏覽網站或app時加快認知。

三、4像素的基線網格 + 8像素網格 = 垂直節奏和諧

一個帶標題、副標題及文本塊的樣例，使用了 4pt的基線網格。

在處理字體時時，可以把4pt 基線網格跟萬能的 8pt 網格一起配合使用，這樣設計可以讓垂直節奏更加和諧。

你只需要讓字體跟4像素的極限網格對齊即可。怎么做？行高值設為4的倍數（16、20、24、28等）。

為什么是4？ 好吧，就我個人而言，我發現過去按 8 的倍數伸縮在處理某些文本大小時并不是那么的通用。

4pt 基線網格 + 8pt 網格 = 可愛的垂直和諧。

四、降低標題行高有百利無一害

兩個設計實例。一個標題行高過高，另一個標題高度正好合適。

跟需要行高足夠大以提高易讀性的長格式正文相反，標題一般要短得多，這樣就可以稍微地縮小一下間距。

推薦的標題行高一般是文本行高的 1 到 1.3 倍，倍數越大，行高就越不需要設得那么大。

標題行高不用太大。

五、選擇配色方案的時候遇到麻煩了？利用色輪進行類似配色

利用了色輪的相鄰色相的設計樣例

類似色，又叫鄰接色相或相鄰色相，是最和諧的配色方案之一，如果你在挑選顏色搭配方面遇到了困難，類似色可以幫大忙。

一組由基本色、二次色和三次色組成的相鄰色相，可以幫助你快速地創建出既簡單又無懈可擊的配色方案。

當你需要讓配色顯得和諧時，用類似配色吧……快得很。

六、努力讓設計的信噪比最大化

兩個設計實例。一個屏幕上的元素太多，另一個看起來遠沒有那么的凌亂。

設計的清晰度和可用性可以通過讓信號最大化，讓噪聲最小化來實現，而這反過來又會制造出很高的信噪比。

為了實現這一點，你需要確保相關信息（信號）得到有效呈現，而不相關信息（噪音）要減少或完全去掉。

無關的去掉。讓東西更清晰。提高信噪比。

希望你看過這篇UI 和 UX小技巧之后，能對設計微調有更多的了解。

作者：Marc Andrew，譯者：boxi

來源：https://www.36kr.com/p/1302288489515654

本文由 @神譯局 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。