編輯導語：如何優化頁面轉化，提升用戶的相應使用體驗，進而推動用戶留存與轉化？也許，你需要結合一些設計上的小技巧，來幫助你達成所想要的效果。本篇文章裡，作者總結了13個提升頁面轉化的設計技巧，一起來看一下吧。

一、使用顔色襯托圖像與文字

有時候你不得不處理一些蹩腳的圖像。通過半透明的顔色上襯托你要表達的對象，讓它們更像背景紋理而不是主要焦點元素。這将為你提供必要的對比，使疊加的文本可讀。在下面的示例中，我對文本應用了深藍色陰影以進一步提高對比度。

二、不要過度使用負空間

負空間，也叫負形。是指除表達主體本身所占用的畫面空間之外的留白部分。而所謂的負空間Logo，則是指的是使用特殊的表現技法讓主體之外的空間也展示内容從而創造出的形狀簡潔卻可以表達複雜内容的Logo。

産品設計師往往喜歡負空間。但是，當屬于一起的元素之間存在過多的負空間時，眼睛就會變得斷斷續續，陷入空洞，而不是輕易地在連接的元素上流動。

三、沒有人喜歡廢話

任何分析過網頁數據的人都知道，你隻有很少的時間來吸引用戶的注意力。比方下面的例子：

四、即使是純文本布局也應該具有視覺吸引力

頁面的純文本部分可能很難設計，特别是如果你沒有機會使用插圖、圖像，那麼你的品牌顔色和一些簡單線條也是提高設計質量的利器。

五、圖标小，插圖大

圖标很生動，但他們應該擺清自己的位置。如果把它們做得很大，你的插圖就會很糟糕。如果使用帶有标題的圖标，那麼就優先凸顯标題。

六、謹慎使用字母間距

我們可以通過多種方式使用字母間距來巧妙地改進排版，但如果你不是經驗豐富的排版師，請堅持在大寫字母中添加字母間距，而不是在句子大小寫文本中添加額外的字母間距，這會會産生可讀性問題，并且會破壞字體設計的自然節奏。

七、控制好你的段落行長

很多文本不可讀的第一大罪魁禍首可能是行長問題。标準行長應該不超過文字展示區域的三分之二。

八、彰顯價值

在下面例子中，真正的價值主張隐藏在一個幾乎不可讀的字幕中。通過添加真實用戶的頭像，就可以證明社交的可信性。

九、沒有人喜歡小文本

下面的例子中，CSS 中使用了可變的網頁排版，創建了正文為 11 像素，導航鍊接為 9 像素的場景。浏覽器默認的 16px 字體大小現在已有 20 年曆史了——一定要學會使用為現代屏幕設計的字體， 18-20px 是個可考慮的選擇。

十、奇數技巧

布局可嘗試包含更多的奇數元素。如果你有 4 個元素，試着把其中的 2 個元素結合在一起。如果不好做，就優先考慮你最想表達的觀點并削減最弱的那個。

十一、管理認知超負荷

在可能的情況下結合并減少你要表達的東西。在标題和副本之間創建大小對比以改善視覺層次，并在你有很多話要說時使用負空間來創造更平靜的體驗。

十二、使用明亮的顔色作為強調

大面積使用明亮的顔色會讓你遇到對比度問題，可能無法滿足基本的文本可訪問性要求。在較小的元素，如按鈕，就需要避免白色文本。

十三、經常檢查灰色文本的對比度

‍使用灰色文本是在文本元素之間創建層次結構的一種流行方法。但這往往會導緻嚴重的易訪問性問題，因為文本缺乏足夠的對比度。使用在線工具檢查對比度，如果你需要建立一個更清晰的視覺層次結構，可以增加字體大小的對比度。

以上是關于優化頁面轉化的13個技巧，希望你能加以對照并開始着手優化你的産品體驗。

本文由@公衆号：真的不一定 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,