編輯導(dǎo)語(yǔ)：如何優(yōu)化頁(yè)面轉(zhuǎn)化，提升用戶的相應(yīng)使用體驗(yàn)，進(jìn)而推動(dòng)用戶留存與轉(zhuǎn)化？也許，你需要結(jié)合一些設(shè)計(jì)上的小技巧，來(lái)幫助你達(dá)成所想要的效果。本篇文章里，作者總結(jié)了13個(gè)提升頁(yè)面轉(zhuǎn)化的設(shè)計(jì)技巧，一起來(lái)看一下吧。

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

有時(shí)候你不得不處理一些蹩腳的圖像。通過(guò)半透明的顏色上襯托你要表達(dá)的對(duì)象，讓它們更像背景紋理而不是主要焦點(diǎn)元素。這將為你提供必要的對(duì)比，使疊加的文本可讀。在下面的示例中，我對(duì)文本應(yīng)用了深藍(lán)色陰影以進(jìn)一步提高對(duì)比度。

二、不要過(guò)度使用負(fù)空間

負(fù)空間，也叫負(fù)形。是指除表達(dá)主體本身所占用的畫面空間之外的留白部分。而所謂的負(fù)空間Logo，則是指的是使用特殊的表現(xiàn)技法讓主體之外的空間也展示內(nèi)容從而創(chuàng)造出的形狀簡(jiǎn)潔卻可以表達(dá)復(fù)雜內(nèi)容的Logo。

產(chǎn)品設(shè)計(jì)師往往喜歡負(fù)空間。但是，當(dāng)屬于一起的元素之間存在過(guò)多的負(fù)空間時(shí)，眼睛就會(huì)變得斷斷續(xù)續(xù)，陷入空洞，而不是輕易地在連接的元素上流動(dòng)。

三、沒(méi)有人喜歡廢話

任何分析過(guò)網(wǎng)頁(yè)數(shù)據(jù)的人都知道，你只有很少的時(shí)間來(lái)吸引用戶的注意力。比方下面的例子：

四、即使是純文本布局也應(yīng)該具有視覺(jué)吸引力

頁(yè)面的純文本部分可能很難設(shè)計(jì)，特別是如果你沒(méi)有機(jī)會(huì)使用插圖、圖像，那么你的品牌顏色和一些簡(jiǎn)單線條也是提高設(shè)計(jì)質(zhì)量的利器。

五、圖標(biāo)小，插圖大

圖標(biāo)很生動(dòng)，但他們應(yīng)該擺清自己的位置。如果把它們做得很大，你的插圖就會(huì)很糟糕。如果使用帶有標(biāo)題的圖標(biāo)，那么就優(yōu)先凸顯標(biāo)題。

六、謹(jǐn)慎使用字母間距

我們可以通過(guò)多種方式使用字母間距來(lái)巧妙地改進(jìn)排版，但如果你不是經(jīng)驗(yàn)豐富的排版師，請(qǐng)堅(jiān)持在大寫字母中添加字母間距，而不是在句子大小寫文本中添加額外的字母間距，這會(huì)會(huì)產(chǎn)生可讀性問(wèn)題，并且會(huì)破壞字體設(shè)計(jì)的自然節(jié)奏。

七、控制好你的段落行長(zhǎng)

很多文本不可讀的第一大罪魁禍?zhǔn)卓赡苁切虚L(zhǎng)問(wèn)題。標(biāo)準(zhǔn)行長(zhǎng)應(yīng)該不超過(guò)文字展示區(qū)域的三分之二。

八、彰顯價(jià)值

在下面例子中，真正的價(jià)值主張隱藏在一個(gè)幾乎不可讀的字幕中。通過(guò)添加真實(shí)用戶的頭像，就可以證明社交的可信性。

九、沒(méi)有人喜歡小文本

下面的例子中，CSS 中使用了可變的網(wǎng)頁(yè)排版，創(chuàng)建了正文為 11 像素，導(dǎo)航鏈接為 9 像素的場(chǎng)景。瀏覽器默認(rèn)的 16px 字體大小現(xiàn)在已有 20 年歷史了——一定要學(xué)會(huì)使用為現(xiàn)代屏幕設(shè)計(jì)的字體， 18-20px 是個(gè)可考慮的選擇。

十、奇數(shù)技巧

布局可嘗試包含更多的奇數(shù)元素。如果你有 4 個(gè)元素，試著把其中的 2 個(gè)元素結(jié)合在一起。如果不好做，就優(yōu)先考慮你最想表達(dá)的觀點(diǎn)并削減最弱的那個(gè)。

十一、管理認(rèn)知超負(fù)荷

在可能的情況下結(jié)合并減少你要表達(dá)的東西。在標(biāo)題和副本之間創(chuàng)建大小對(duì)比以改善視覺(jué)層次，并在你有很多話要說(shuō)時(shí)使用負(fù)空間來(lái)創(chuàng)造更平靜的體驗(yàn)。

十二、使用明亮的顏色作為強(qiáng)調(diào)

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

十三、經(jīng)常檢查灰色文本的對(duì)比度

?使用灰色文本是在文本元素之間創(chuàng)建層次結(jié)構(gòu)的一種流行方法。但這往往會(huì)導(dǎo)致嚴(yán)重的易訪問(wèn)性問(wèn)題，因?yàn)槲谋救狈ψ銐虻膶?duì)比度。使用在線工具檢查對(duì)比度，如果你需要建立一個(gè)更清晰的視覺(jué)層次結(jié)構(gòu)，可以增加字體大小的對(duì)比度。

以上是關(guān)于優(yōu)化頁(yè)面轉(zhuǎn)化的13個(gè)技巧，希望你能加以對(duì)照并開(kāi)始著手優(yōu)化你的產(chǎn)品體驗(yàn)。

本文由@公眾號(hào)：真的不一定 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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