網(wǎng)頁設計中文字排版你不知道的技巧!

在站點設計中，文字排版為為何相比于網(wǎng)站和用戶雙方建立良非常不錯溝通及幫扶用戶獲得希望起著重要的作用的10點推薦。

在站點設計中，文字排版相比于網(wǎng)站和用戶雙方建立良非常不錯溝通及幫扶用戶獲得希望起著重要的作用。當咱們談論站點是否能和用戶建立有效的溝通的時刻，通常是指文字排版在這里起到的作用：

“站點中95%以上的信息是以文字形式呈現(xiàn)的?！?/p>

良非常不錯排版依仗戶更易于閱讀，而混亂的排版則依仗戶失去繼續(xù)瀏覽的意愿。正如“Oliver ReichensReichenstein在他的文章“Web Design is 95% Typography ”中寫道：“排版的目的就是是優(yōu)化可讀性，訪問率，可用性，保持和圖形的平衡關(guān)系”

換言之，優(yōu)化排版也在幫扶您優(yōu)化界面。本文中，咱們給予一組規(guī)則，將幫扶您改善文本內(nèi)容的可讀性和易讀性。

1.不要依仗過多的字體

網(wǎng)站排版中推薦最多不要超過3種字體型式，不然會使網(wǎng)站看起來松散和不專業(yè)，不僅許多的字體型式會致使這種問題，許多的字體尺寸也會破壞站點布局。

通常情形下，將字體家族的數(shù)量難點在最小數(shù)量(2個是很多，1個通常就夠了)，整個網(wǎng)站堅持依仗相同的原則。假如依仗多個字體，請擔保倆個字體是否和諧。以下面的字體組合為例，Georgia和Verdana的搭配相得益彰，相對比較和諧。相比于右邊Baskerville和Impact則有木有比較常見的沖突感，非襯線Impact比較常見的超過了Baskerville的視覺沖擊力。

而在中英文排版中，推薦大家中文依仗標準中文字體，而英文、數(shù)字和字符依仗標準的英文字體。以下面的圖為例，是否一定可以對比處那個美觀適量的。

2.最好依仗標準字體

在google Web Font或者用Typekit，和同行業(yè)的“有字庫”的字體嵌入式服務有很多有趣的字體，相比于同行業(yè)設計師來說，痛苦的是中文字體會或多或少的，個字體動則幾兆，十幾兆的，于是用戶在會增強用戶瀏覽網(wǎng)站的載入時間;反之英文字體26個字母大小寫，加數(shù)字標點符號一共幾百k的字體是很可能在站點中依仗的。

盡或者尋找標準字體(近幾年站點中通常依仗思源黑體，PingFang，英文一定可以依仗Arial，Calibri或者用各種常見的易于屏幕閱讀的黑體字，如無有特殊概念指導盡或者避免依仗襯線字體，如宋體)

不是每位用戶都一定可以在終端上看到同個字體，意味著你尋找的適合的字體，用戶有或者看不到。

用戶更熟悉標準字體，因此她們一定可以更快的閱讀

特殊的、同時少量的字體一定可以制作成.svg格式的素材嵌入Web依仗

良非常不錯排版會依仗戶更加關(guān)注內(nèi)容本身，而不是字體的型式。

3.難點一行文字的長短

擔保每一行文字的字符數(shù)量是文本可讀的關(guān)鍵。不是設計師來定義文本的寬度，卻是對比用戶的可讀性來定義。

太寬-會使得單行文字太長，讀者的眼睛會難于專注文字。只因長時間閱讀可能串行，大段的文本中不易找出該用的的行。

太短-會使得用戶的眼睛愿意回到下一行文本，會打破讀者的閱讀節(jié)奏，長時間閱讀致使視覺疲勞。太短也會傾向于向讀者發(fā)出一種信號，使得讀者無有讀完當前這行就去跳到下一行閱讀，或者會忽略潛在的重要詞句。

以google和SE為例，咱們不難看出這點

相比于移動設備，理當每行30-40個字符(半角)，具體顯示付出個字數(shù)，與無非分辨率的屏幕、文本寬度和字體大小都有木有關(guān)系，設計的原則是：擔保用戶一定可以流暢的閱讀文本，文字不宜太小或太大。以iOS(手機)為例，正文文本最小字號已經(jīng)不能小于24px，太小了用戶閱讀會難以閱讀。以SE為例，可被鑒定為參考。

4.尋找用有多個字重并顯示良非常不錯字體

用戶將經(jīng)歷無非屏幕分辨率的終端設備訪問你本來的網(wǎng)站，大多數(shù)的用戶界面應該三四種大小尺寸的文本(標題、副標題、文本、標注等等)。尋找一款可能在無非屏幕分辨率的設備上運行良非常不錯字體以擔保它的無非尺寸的字體都具有極高可讀性(Readability)和可用性(Usability)也一樣非常重要的。

近倆年備受大家歡迎的思源黑體和PingFang字體總是挺好的尋找，很明顯，有很多認為漢儀旗黑無論從家族字體的數(shù)量、字體質(zhì)量、屏幕顯示、紙媒印刷上來說都不遜色于前面?zhèn)z款字體。關(guān)注過這款字體設計的設計師曾說過，思源黑體還是照樣相對比較粗糙的一款字體。

同樣，為了擔保在屏幕上清晰可辨，最好避免依仗襯線體，盡管他們很漂亮。

5.依仗鑒別度高的字體

在尋找英文體的時刻，有些字體的個別字母極易混淆，特別是“i”和“L”(如下圖所示);及文字雙方的間距。許多中文字體在依仗較小字體的時刻筆畫會粘到一起(上圖)，不可能辨別;因而在尋找字體型式的時刻，請檢查你尋找依仗的字體，擔保很難為用戶和產(chǎn)品致使不必要的耗費。

6.避免在界面中大段的依仗大寫字母

不要所有文本依仗大寫字母，強制用戶閱讀大寫字母，首字母大寫，具有特殊含義的縮寫等情形除外，與小寫字母相比，品牌的依仗大寫字母會嚴重防止用戶的閱讀效率和愉悅感。

7.將行間距控制在字體的1.5-2倍雙方

在文字文字排版中，咱們又個特殊的術(shù)語，用于表示行與行雙方的距離：行間距(或行高)。為了擔保文本的可讀性和易讀性，使文本形成了線性的閱讀感受，將行間距控制在字體大小的1.5-2倍雙方(中文字體)。英文字體引薦依仗默認行間距，或?qū)Ρ饶J行間距微調(diào)。

8.適當?shù)念伾珜Ρ榷?/p>

通常情形下，文本和背景最好避免依仗相同或相似的顏色。文本越比較常見，用戶可能掃描和閱讀的速度越快。很明顯，學會經(jīng)歷文本顏色、大小和背景的顏色關(guān)系來控制視覺層級也一樣必要的。

與背景相比，小文本和背景的對比度至少為4.5:1

大文本(14px/18px以上)理當保持與背景3:1以上的對比度

灰色通常被鑒定為輔助色依仗，對比之前的項目經(jīng)驗，給大家分享一套我我一直在依仗的灰色，灰的有層次，清晰的區(qū)分信息層級是必要的

9.避免將文字著色為紅色或綠色

色盲和色弱是我必須要照顧到的一因子用戶，特別是在男性中(8%的男性是色盲)推薦使用處顏色以外的各種方式來區(qū)分重要的信息(如下劃線，加粗等)。避免依仗紅色和綠色單獨傳達信息。只因紅綠色盲是最常見的色盲形式。(目前想想，那些只因紅綠色盲而考不了駕照的童鞋是不是要分分鐘恨死制定紅綠燈規(guī)則的人，很明顯這只是個笑話，依仗紅綠燈是只因光學在物理傳播具體方面的原因，這里不解釋)

雖然在日常生活中咱們總是用這種方式告知用戶綠色是表示該用的的操作，紅色表示過失的操作，反思掉了咱們有木有去看色盲用戶的操作和體驗?；蛟S咱們是不是一定可以看換個方式去表達該用的或過失?

10.避免文字閃爍

閃爍的文字或內(nèi)容或者會讓某些用戶感到不適，相比于總的來說用戶而言，這或者分散她們的注意力或者用使她們感到煩躁。

當前文章：網(wǎng)頁設計中文字排版你不知道的技巧!
URL地址：http://muchs.cn/news31/261881.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、響應式網(wǎng)站、關(guān)鍵詞優(yōu)化、虛擬主機、云服務器、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)