新聞中心
頁(yè)面設(shè)計(jì)好壞直接決定了用戶的瀏覽體驗(yàn)，那么在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中需要注意哪些問(wèn)題呢?
本文將跟大家分享改善網(wǎng)頁(yè)設(shè)計(jì)實(shí)用技巧，廢話不多說(shuō)，直接進(jìn)入正文。
1、在有文字的照片上使用顏色覆蓋
?在網(wǎng)頁(yè)設(shè)計(jì)中，有時(shí)候不得不處理一些糟糕的圖片。嘗試將它們處理成背景紋理而不是主要焦點(diǎn)元素，通過(guò)在半不透明的設(shè)置上疊加品牌顏色。通過(guò)提高對(duì)比度，使覆蓋文本更具可讀。比如下面的例子中，給文本添加了一個(gè)深藍(lán)色的陰影來(lái)進(jìn)一步增強(qiáng)對(duì)比度。
2、不要過(guò)度使用負(fù)空間
設(shè)計(jì)師似乎喜歡運(yùn)用負(fù)空間，網(wǎng)上也有很多人會(huì)建議使用更多的負(fù)空間。但是當(dāng)元素之間存在過(guò)多的負(fù)空間時(shí)，人們的視線就會(huì)陷入空洞中，元素之間的連貫性就會(huì)被打斷。
3、“廢話少說(shuō)”
要知道，很多人是沒(méi)有耐心去看頁(yè)面一大串文字的，這意味著你的網(wǎng)頁(yè)只有很少的時(shí)間來(lái)吸引別人的注意力。因此，頁(yè)面內(nèi)容一定要精簡(jiǎn)，并且要突出重點(diǎn)，“廢話少說(shuō)”。
4、即使只有文本的布局也要有視覺(jué)吸引力
登陸頁(yè)面的純文本部分可能很難設(shè)計(jì)，尤其是如果你沒(méi)有機(jī)會(huì)或資源來(lái)使用插圖、圖像或照片優(yōu)化頁(yè)面。
這時(shí)候，可以利用品牌顏色和展示細(xì)節(jié)上下功夫，以提升視覺(jué)設(shè)計(jì)效果。
5、小圖標(biāo)，大插圖
圖標(biāo)固然很重要，但是應(yīng)該給予合理的展示。有的元素更適合做“配角”，如果把它們放大，你得到的只是一個(gè)糟糕的效果。
比如讓圖標(biāo)作為標(biāo)題的“配角”，標(biāo)題文本內(nèi)容無(wú)疑會(huì)更突出，展示更為合理。
6、減少字母間距
我們有很多方法可以使用字母間距來(lái)微妙地改進(jìn)排版，但如果你沒(méi)有豐富的排版經(jīng)驗(yàn)，堅(jiān)持在所有大寫標(biāo)題上增加一點(diǎn)字母間距。在句子大小寫文本中增加額外的字母間距會(huì)產(chǎn)生可讀性問(wèn)題，也會(huì)破壞字體設(shè)計(jì)的自然節(jié)奏。
7、在常見問(wèn)題（ FAQ）部分注意長(zhǎng)度
常見問(wèn)題部分很多網(wǎng)頁(yè)重要組成部分，最佳行長(zhǎng)度在45到75個(gè)字符之間，包括空格和標(biāo)點(diǎn)符號(hào)。
8、展示社會(huì)價(jià)值
在這個(gè)例子中，真正的價(jià)值主張隱藏在一個(gè)幾乎不會(huì)被注意到的副標(biāo)題中。
這時(shí)候，可以通過(guò)添加真實(shí)用戶的面孔來(lái)增加社會(huì)證明的真實(shí)性。
9、沒(méi)有人喜歡字體很小的文本
在這個(gè)例子中，在CSS中使用了可變的網(wǎng)頁(yè)排版，創(chuàng)建了主體副本為11px、導(dǎo)航鏈接9px。
瀏覽器默認(rèn)的16px字體大小現(xiàn)在已經(jīng)有20年的歷史了——使用為屏幕設(shè)計(jì)的現(xiàn)代字體，開始處文本的大小應(yīng)當(dāng)設(shè)置在18-20px之間。
10、運(yùn)用幾率法則
讓頁(yè)面布局包含元素個(gè)數(shù)為奇數(shù)。如果需要展示4個(gè)要點(diǎn)，試著將其中2個(gè)點(diǎn)結(jié)合在一起，用3個(gè)點(diǎn)展示。
如果這很難實(shí)現(xiàn)，那就優(yōu)先考慮最重要的觀點(diǎn)，去掉最弱的。
在如下例子所示的布局中，要看四個(gè)要點(diǎn)，會(huì)讓人感覺(jué)認(rèn)知超負(fù)荷。
11、盡可能縮減文本
在可能的情況下盡可能合并并減少文本內(nèi)容。在標(biāo)題和副本之間創(chuàng)建大小的對(duì)比來(lái)提高視覺(jué)層次，當(dāng)你有很多內(nèi)容需要展示，那就使用負(fù)空間來(lái)創(chuàng)造清爽的體驗(yàn)。
12、利用亮色強(qiáng)調(diào)重點(diǎn)
大面積使用亮色會(huì)產(chǎn)生對(duì)比度失衡的問(wèn)題，可能達(dá)不到突出文本內(nèi)容的目的。對(duì)于較小的元素，如按鈕，可能需要盡量避免白色文本。
13、檢查灰色文本的對(duì)比度
?使用灰色文本是在文本元素之間創(chuàng)建層次結(jié)構(gòu)的流行做法。但這通常會(huì)因?yàn)槿狈ψ銐驅(qū)Ρ榷?，使得文本的可讀性變差。使用一些在線工具來(lái)檢查對(duì)比度，如果你需要建立一個(gè)更清晰的視覺(jué)層次，可以增加字體大小的對(duì)比度。
以上就是改善網(wǎng)頁(yè)設(shè)計(jì)的13個(gè)技巧，希望能對(duì)你有所幫助。
注:文章由站長(zhǎng)之家編譯自uxplanet。