網(wǎng)站建設(shè)這10個(gè)排版技巧會(huì)讓你的網(wǎng)站逼格滿滿
溝通在設(shè)計(jì)中起著至關(guān)重要的作用------它在網(wǎng)站和用戶之間建立了清晰的的聯(lián)系并且?guī)椭銈兊挠脩敉瓿伤麄兊哪繕?biāo)。當(dāng)我們討論網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容中的溝通時(shí)，往往就是在強(qiáng)調(diào)文本的作用。排版在這個(gè)過程中是非常重要的：
超過95%的網(wǎng)頁(yè)信息都來自文字信息
好的排版讓閱讀不費(fèi)力，而不好的排版用戶可能會(huì)直接放棄閱讀。就像OliverReichenstein在他的文章中所說的“網(wǎng)頁(yè)設(shè)計(jì)的95%都是排版”
最好的排版就是具有最佳的易讀性，易理解性和可用性，總體上與圖片的平衡性。
換句話說：最好的排版也是最佳的用戶界面。在這片文章里，我將會(huì)提供一系列的方法去幫助你提升文字的可讀性和易讀性。
譯者注：可讀性和易讀性經(jīng)常被混淆?？勺x性通常用來形容某種書面語言閱讀和理解的容易程度——它關(guān)乎這種語言本身的難度，而非其外觀。影響可讀性的因素包括詞句的長(zhǎng)度，以及非常用詞的出現(xiàn)頻度。與之相是排印文對(duì)，易讀性描述的本閱讀時(shí)的輕松和舒適程度。它和語言內(nèi)容無關(guān)，卻與文本印刷或顯示的尺寸和外觀聯(lián)系密切。
1.保證最少量的引用字體
網(wǎng)站設(shè)計(jì)中超過3種字體會(huì)令界面看起來無組織感和不專業(yè)。要記住過多的字體樣式和參差不齊的字體大小會(huì)破壞你的界面的嚴(yán)謹(jǐn)性。
為了避免出現(xiàn)這種情況，去限制字體樣式到最少的程度是很重要的
總之，限制好字體數(shù)量，（兩種已經(jīng)足夠，通常一種就夠用了）并且始終使用相同的字體。如果你使用超過一種字體，那就盡量保證字體之間會(huì)基于字母寬度相互協(xié)調(diào)。舉一個(gè)字體聯(lián)系的例子：Georgia和Verdana之間的聯(lián)系是使用相似的字重從而去創(chuàng)造一種和諧的關(guān)系。另外一組Baskerville和Impact，粗字體的Impact就極大的奪去了他的襯線體搭檔的光彩。
確保字體之間基于字母的字重相互協(xié)調(diào)
2.試著去使用標(biāo)準(zhǔn)字體
字體嵌入服務(wù)（像GoogleWebFonts和Typekit）有很多的有趣的字體可以讓你的設(shè)計(jì)變得更時(shí)尚，新鮮和超乎想象。他們也都非常好用。比如Google：
1.選擇任何一個(gè)字體比如OpenSans
2.生成代碼然后粘貼到你的HTML的頭文件中
3.完成！
所以，有什么問題么？
額。。這樣做還是會(huì)有兩個(gè)問題的：
不是每一個(gè)人都能夠獲得相同的那個(gè)字體。這就意味著，你選擇的漂亮的字體在你的訪客那里呈現(xiàn)的可能是另外的一種樣子
用戶對(duì)標(biāo)準(zhǔn)字體更加熟悉而且會(huì)因?yàn)槭褂贸Ｒ?guī)字體而提高閱讀效率
除非你的網(wǎng)站有非常強(qiáng)烈的需求要去自定義一種新字體，比如為了品牌的目的或者去創(chuàng)造一種身臨其境的感覺，當(dāng)然通常最好的方式還是是堅(jiān)持使用系統(tǒng)字體。系統(tǒng)字體諸如：Arial,Calibri，Trebuchet,等等。記住好的排版讓讀者沉浸其中，而并不是字體本身。
3.限制每一行的長(zhǎng)度
每一行的字?jǐn)?shù)保持一定的數(shù)量是加強(qiáng)可讀性的關(guān)鍵。不應(yīng)該讓你的設(shè)計(jì)被文字寬度所限制，應(yīng)該讓易讀性被優(yōu)先考慮。以下是BaymardInstitute為提高可讀性和適當(dāng)?shù)男虚L(zhǎng)度的建議：
“如果想得到一個(gè)好的閱讀體驗(yàn)，每一行的字母數(shù)量在60個(gè)左右是比較合適的。每一行保持正確數(shù)量的字母數(shù)是文章具有可讀性的關(guān)鍵。”
如果一行特別短，眼睛就要一直來回看，便打亂了閱讀的節(jié)奏。如果一行文字太長(zhǎng)，用戶的眼睛又會(huì)要有很長(zhǎng)的時(shí)間關(guān)注在文字上。
對(duì)于移動(dòng)設(shè)備而言，每行字母應(yīng)當(dāng)保持在30-40個(gè)左右。下面就是網(wǎng)頁(yè)在兩個(gè)手機(jī)上顯示的例子。第一個(gè)使用了50-75個(gè)字母每行（電腦上使用的每行容納的最佳字母數(shù)量形式），而第二幅圖就使用的是在手機(jī)上顯示每行30-40個(gè)字母的形式。
在網(wǎng)站設(shè)計(jì)中，你可以通過限制你的文字塊的寬度，或者像素來保證最佳的每行字母數(shù)量的設(shè)計(jì)
4.各種的字號(hào)中使用同一種是最好的方式
用戶訪問你的網(wǎng)站時(shí)使用的是不同的分辨率和解析度的設(shè)備。很多的界面要求文字元素使用不同的大?。ò粹o復(fù)制，領(lǐng)域標(biāo)簽，段落開頭，等等）以多種尺寸和字重來表現(xiàn)信息的時(shí)候，只選擇一種字體來提高可讀性和易用性是非常重要的。
一定要讓你的字體在很小的屏幕中也能夠很好的展示出來！
盡量避免使用手寫體，例如Vivaldi(下面的例子中的)：雖然他們很漂亮，但是真的很難讀。
在小分辨率的屏幕上真的是很難閱讀
5.使用具有字母區(qū)分度的字體
很多字體中有一些相似的字母很容易讓人迷惑，特別是”i”和“L”（就像下面的例子），并且還有的有很窄的字母間距，就像當(dāng)一個(gè)“r”和“n”在一起就像一個(gè)”m”.所以當(dāng)你選擇你的字體的時(shí)候，你要把那些文字檢查無誤，讓他們不會(huì)給你的用戶造成困擾。
6.避免全大寫
所有的大寫字母----不是非常重視閱讀的情況下是可以接受的（比如縮寫或者是logo），但是如果你的信息涉及到閱讀的需求了，那就不能強(qiáng)迫你的用戶去讀全大寫的內(nèi)容。就像MilesTinker在他的里程碑式的工作中提到的，文字的易讀性，跟小寫字母排版相比，全大寫排版幾乎完全忽略了對(duì)于瀏覽和閱讀速度的追求。
全部大寫段落是不好的。而且在加粗之后還是很難閱讀。你讀著感覺舒服嗎？
7.不要留較小的行間距
在排版中，我們有一個(gè)專有名詞來表達(dá)行與行之間的間距--leading（或者行高）。你可以通過增加行高，而增加兩行文字之間的距離，總體上以屏幕的實(shí)際使用面積為交換來提高可讀性。有個(gè)準(zhǔn)則就是，行高應(yīng)該高于文字高度的30%才能提供好的閱讀體驗(yàn)。
好的留白提高可讀性
DmitryFadeyev的一個(gè)已經(jīng)被證實(shí)的結(jié)論指出，恰當(dāng)?shù)氖褂枚温渲g的留白空間能夠提高20%對(duì)文章的理解度。使用留白的技能有賴于為你的用戶提供可辨識(shí)的內(nèi)容并且擯棄掉無關(guān)的細(xì)節(jié)。
左邊：過度擁擠的排版 右邊：合理的空間提升可讀性
8.確保有效的色彩對(duì)比
不要用和背景相似的文字顏色。文字越清晰，讀者看的越快。W3C要求主體文字和圖片文字的對(duì)比度比例如下：
小的文字應(yīng)該至少和背景保持對(duì)比度為4.5：1的比例
大的文字（14點(diǎn)粗體/18點(diǎn)常規(guī)題和以上）應(yīng)該和背景保持至少3：1的對(duì)比度
這兩行的文字都沒有匹配到對(duì)比度要求導(dǎo)致很難閱讀
這兩行文字對(duì)應(yīng)到了文字背景對(duì)比度要求所以很容易閱讀
一旦你選擇好了你的顏色，使用主要的的設(shè)備去給一些真實(shí)使用者測(cè)試是非常必要的。如果測(cè)試中出現(xiàn)了閱讀上的任何的問題，你就可以確定你的用戶將會(huì)遇到同樣的問題。
9.避免使用紅色或者綠色作為文字顏色
色盲是一個(gè)共同的話題特別是他們中占多數(shù)的男性（8%的男性是色盲），所以應(yīng)當(dāng)使用一些額外的顏色去區(qū)分重要信息。并且避免只使用紅色和綠色去傳遞信息，因?yàn)榧t綠色盲在色盲患者中占大多數(shù)。
10.避免是用閃爍的文字
內(nèi)容閃光或者閃爍容易引起敏感的人癲癇病發(fā)作。不僅如此，可能還會(huì)對(duì)用戶造成打擾或者讓其分心。
結(jié)論
排版是一個(gè)大的問題。正確的文字排版選擇會(huì)讓你的網(wǎng)站給人眼前一亮和優(yōu)雅精致感覺。另一方面，壞的排版選擇，容易分散用戶的注意，并且讓他們將注意力轉(zhuǎn)移到了自己身上。讓文字排版可讀，易理解和易讀是非常重要的。
本文標(biāo)簽： 網(wǎng)站建設(shè)
站應(yīng)該怎么做.jpg)
備類網(wǎng)站推廣方案.jpg)
類網(wǎng)站建設(shè)費(fèi)用明細(xì)表.jpg)
站內(nèi)容運(yùn)營(yíng)方案.jpg)
體材料類網(wǎng)站內(nèi)容運(yùn)營(yíng)方案.jpg)
站應(yīng)該怎么做.jpg)
站應(yīng)該怎么做.jpg)
浴設(shè)施類網(wǎng)站建設(shè)費(fèi)用明細(xì)表.jpg)
類網(wǎng)站建設(shè)方案書.jpg)
施類網(wǎng)站內(nèi)容運(yùn)營(yíng)方案.jpg)
做網(wǎng)站SEO選哪家公司好.jpg)
站SEO選哪家公司好.jpg)
站SEO一年需要多少錢.jpg)
站SEO選哪家公司好.jpg)
站SEO一年需要多少錢.jpg)
站SEO一年需要多少錢.jpg)
站SEO一年需要多少錢.jpg)
站SEO選哪家公司好.jpg)
站SEO需要注意什么.jpg)
站SEO選哪家公司好.jpg)
.jpg)
貨.jpg)
意怎么改.jpg)
干什么的.jpg)
