整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<html><head/><body><p style=\"height:16px;line-height:24px;color:#787878\"> helloWorld</p></body></html>聯(lián)網(wǎng)的高速發(fā)展使得我們每天花在網(wǎng)頁上的時(shí)間越來越多，網(wǎng)頁設(shè)計(jì)的重要性不言而喻。本文作者以閱讀型網(wǎng)頁設(shè)計(jì)為例，談?wù)勀膸c(diǎn)是需要特別注意的，希望對(duì)你有幫助。
最近負(fù)責(zé)某知識(shí)型社區(qū)的改版，其中一塊是提升讀者在網(wǎng)頁端閱讀的體驗(yàn)。在調(diào)研一些網(wǎng)站的設(shè)計(jì)規(guī)范和查閱部分文獻(xiàn)后，結(jié)合自己的思考，總結(jié)如下幾點(diǎn)，以供參考。
一個(gè)閱讀型網(wǎng)頁，比如各新聞資訊網(wǎng)站、閱讀型社區(qū)、web端讀書網(wǎng)站等，在去除廣告等干擾元素后，純內(nèi)容的閱讀體驗(yàn)會(huì)受到以下幾個(gè)因素的影響：字體、字號(hào)、字色、行寬、行間距、段間距、背景色。
接下來一一介紹。
字體：
襯線字體 or 非襯線字體：調(diào)研了多個(gè)網(wǎng)站，均采用非襯線字體。
查閱資料，襯線字體更富表現(xiàn)力，可提高辨識(shí)度和閱讀效率，多用于報(bào)紙、書籍等印刷品，以及電子雜志和藝術(shù)網(wǎng)站的正文字體。
在電子屏上顯示時(shí)，由于字號(hào)、顯示器尺寸、顯示器分辨率等影響因素，使用襯線字體時(shí)過細(xì)的筆畫可能會(huì)顯示不清難以辨認(rèn)。
從穩(wěn)妥角度考慮，這可能是各大網(wǎng)站均采用非襯線字體作為首選字體的原因。
推薦以下字體：
MacOS
中文：首選 蘋方regular 次選 冬青黑體簡體。
英文：首選 Helvetica Neue 次選 Arial。
Windows
中文：首選 微軟雅黑 次選 冬青黑體簡體。
英文：首選 Arial 次選 Tahoma。
字號(hào)：
字號(hào)太小看不清累眼睛，太大頁面不精致且顯示效率低。
一個(gè)字在顯示器上顯示出來有多大，取決于字號(hào)和單個(gè)像素方塊的物理尺寸。單像素塊尺寸，取決于顯示器尺寸和顯示器分辨率。
隨著顯示器技術(shù)發(fā)展，在顯示器尺寸沒有變大的情況下，顯示器分辨率越來越高，這意味著單像素方塊的物理尺寸越來越小，因此網(wǎng)頁端設(shè)計(jì)時(shí)的推薦字號(hào)也在變大，從12px 到 14px 到 16px。
穩(wěn)妥起見，正文建議使用 16px 。以此為基準(zhǔn)，擴(kuò)大和減小后確定標(biāo)題和輔助文本的字號(hào)，此處建議以 4px 為步長，使對(duì)比明顯。
字色和背景色：
閱讀體驗(yàn)受文字和背景的對(duì)比度影響。高對(duì)比度時(shí)，識(shí)別清晰，但眼睛容易疲勞。只有找到一個(gè)合適的對(duì)比度，才能做到既識(shí)別清晰，長時(shí)間閱讀又不容易累。
首先是白底黑字和黑底白字。二者本身對(duì)比較強(qiáng)，加上人類眼睛側(cè)抑制等視覺機(jī)制，會(huì)讓反差特別大，因此識(shí)別起來很清晰。由于白底黑字相較于黑底白字的反差更小[1]，故而可讀性更高，適用于注重文字閱讀的網(wǎng)站；黑底白字視覺刺激性強(qiáng)，適用于注重視覺表現(xiàn)力或營造氛圍的單頁面，比如海報(bào)、主題網(wǎng)站首頁等。另外，對(duì)于視覺受損的用戶，此兩種配色方案也是較人性化的選擇。
然而，白底黑字并非最好。由于白色具有100%的亮度，黑色是0%，巨大的亮度對(duì)比讓眼睛在閱讀時(shí)要盡全力去適應(yīng)，容易引起眼部疲勞，因此白底黑字仍不適宜長時(shí)間的閱讀，所以印刷品讀物的紙張多用乳白色或淡黃色的紙張。又因?yàn)轱@示器本身就發(fā)光，所以在電腦上閱讀純白色背景的文字，比在紙上閱讀時(shí)，眼睛會(huì)更容易疲乏。
然而Hill(1997)的研究卻表明：黑色和白色一直被認(rèn)為是最可讀的；有黑色在內(nèi)的色彩組合比沒有黑色的色彩組合更易于閱讀；較淺背景上較深的文本比較暗的背景上較淺的文本的評(píng)價(jià)高。因此，更好的組合可能是保證了對(duì)比度(大于4.5)的淺灰背景 + 深灰文本。
行寬：
行寬過大，閱讀時(shí)要轉(zhuǎn)動(dòng)脖子，降低閱讀效率，而且目光從行尾移至下一行首容易串行。行寬過小，用戶注視點(diǎn)要在行間頻繁跳躍，降低了閱讀速度，體驗(yàn)也不好。為防止此現(xiàn)象，文本寬度最好在450-700px之間。
確定具體數(shù)值時(shí)，要注意行寬應(yīng)該是正文字號(hào)的整數(shù)倍。這是因?yàn)橹形氖欠綁K字，最好的排版應(yīng)該像小學(xué)時(shí)的作文本那樣，每一列字都對(duì)齊，除最后一行外，每一行應(yīng)該寫滿，這樣才能整整齊齊。
如果采用左對(duì)齊，可以達(dá)到每一列字都對(duì)齊(有半角字符的行，會(huì)破壞隊(duì)形)，但當(dāng)最后一個(gè)字符為標(biāo)點(diǎn)時(shí)，會(huì)直接換行，導(dǎo)致此行會(huì)缺一塊，不好。
如果采用兩端對(duì)齊，就能避免這種情況。但兩端對(duì)齊有另一個(gè)問題，段落的最后一行不一定寫滿行。當(dāng)最后一行未寫滿行，且，行寬不是正文字號(hào)的整數(shù)倍時(shí)，為了達(dá)到兩端對(duì)齊，前面行會(huì)增加字間距，但最后一行不會(huì)增加字間距。這樣，最后一行的每個(gè)字都不能與其所在列對(duì)齊。
如果行寬是正文字號(hào)的整數(shù)倍，就能避免這種情況。達(dá)到兩端對(duì)齊不留空，每列對(duì)齊像閱兵的效果。
左對(duì)齊
兩端對(duì)齊
行間距：
行間距太小，有密不透氣的感覺，讀者瀏覽文章時(shí)容易串行；行間距太大，閱讀時(shí)會(huì)感覺文章不夠連貫，頁面也不夠精致。網(wǎng)頁上行距常用em為單位，不管是中文網(wǎng)站還是英文網(wǎng)站，大多用1.5em-1.8em的行距。
段間距：
分情況。文章較短，就不需要很寬的段距；文章很長，最好利用段距分隔文章的節(jié)奏，給閱讀者喘息和思考的機(jī)會(huì)，提高文章的可讀性。經(jīng)驗(yàn)值是，段間距一般為行間距的75% 。
結(jié)語：
實(shí)際上，影響純內(nèi)容閱讀體驗(yàn)的遠(yuǎn)不止以上這些。實(shí)際工作中，環(huán)境光、設(shè)備尺寸和分辨率、用戶視力等都應(yīng)該在設(shè)計(jì)師的考慮范圍內(nèi)。魔鬼在細(xì)節(jié)中，多考慮一些，用戶體驗(yàn)就會(huì)提升一些。
參考文獻(xiàn)：
https://www.zcool.com.cn/article/ZNTEyNjMy.html
https://marijohannessen.github.io/color-contrast-checker/
https://zhuanlan.zhihu.com/p/62766232
本文由 @Tzufeng 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
SS三種引入方式
1.行內(nèi)樣式(內(nèi)聯(lián)樣式)
<h1 style="color:pink; 屬性:屬性值;">前端學(xué)習(xí)</h1>2.內(nèi)部樣式表(內(nèi)聯(lián)樣式表)
<head>
<style type="text/CSS">
選擇器（選擇的標(biāo)簽） {
屬性1: 屬性值1;
屬性2: 屬性值2;
屬性3: 屬性值3;
}
</style>
</head>3.外部樣式表(外鏈?zhǔn)?
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑">
</head>- 注意：
- link 是個(gè)單標(biāo)簽
- link標(biāo)簽需要放在head頭部標(biāo)簽中，并且指定link標(biāo)簽的三個(gè)屬性
屬性 作用
link | rel | 定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。 |
type | 定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。我們都可以省略 | |
href | 定義所鏈接外部樣式表文件的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。 |
樣式表 | 優(yōu)點(diǎn) | 缺點(diǎn) | 使用情況 | 控制范圍 |
行內(nèi)樣式表 | 書寫方便，權(quán)重高 | 沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離 | 較少 | 控制一個(gè)標(biāo)簽（少） |
內(nèi)部樣式表 | 部分結(jié)構(gòu)和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個(gè)頁面（中） |
外部樣式表 | 完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離 | 需要引入 | 最多，強(qiáng)烈推薦 | 控制整個(gè)站點(diǎn)（多） |
CSS選擇器五種方法
1.標(biāo)簽選擇器
"h3 {
color: red;
}"2.類名選擇器
<p class='類名'></p>
//標(biāo)簽
.類名 {
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}3.多類名選擇器
<p class='類名1 類名2'></p>
//多類名,空格隔開4.id選擇器
<p id="id名"></p>
// #id名 {color:pink;} 元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。5.通配符選擇器
* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
// 會(huì)匹配頁面所有的元素，降低頁面響應(yīng)速度，不建議隨便使用
選擇器 | 作用 | 缺點(diǎn) | 使用情況 | 用法 |
標(biāo)簽選擇器 | 可以選出所有相同的標(biāo)簽，比如p | 不能差異化選擇 | 較多 | p { color：red;} |
類選擇器 | 可以選出1個(gè)或者多個(gè)標(biāo)簽 | 可以根據(jù)需求選擇 | 非常多 | .nav { color: red; } |
id選擇器 | 一次只能選擇器1個(gè)標(biāo)簽 | 只能使用一次 | 不推薦使用 | #nav {color: red;} |
通配符選擇器 | 選擇所有的標(biāo)簽 | 選擇的太多，有部分不需要 | 不推薦使用 | * {color: red;} |
基礎(chǔ)選擇器我們一共學(xué)了4個(gè)， 每個(gè)都有自己的價(jià)值， 可能再某個(gè)地方都能用到。但是如果說，一定要找個(gè)最常用的，那么，肯定是類選擇器。
CSS字體
1.字體大小
font-size:20px //谷歌默認(rèn)16px 谷歌瀏覽器默認(rèn)16px
例子:
p {
font-size:20px;
}2.定義字體
p{ font-family:"微軟雅黑";}3.字體粗細(xì)
font-weight:normal //默認(rèn)不加粗屬性值 | 描述 |
normal | 默認(rèn)值（不加粗的） |
bold | 定義粗體（加粗的） |
100~900 | 400 等同于 normal，而 700 等同于 bold 我們重點(diǎn)記住這句話 |
提倡：
我們平時(shí)更喜歡用數(shù)字來表示加粗和不加粗。
4.字體樣式風(fēng)格
font-style:normal //默認(rèn)不加粗font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：
屬性 | 作用 |
normal | 默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式 font-style: normal; |
italic | 瀏覽器會(huì)顯示斜體的字體樣式。 |
小技巧：
平時(shí)我們很少給文字加斜體，反而喜歡給斜體標(biāo)簽（em，i）改為普通模式。5.字體綜合寫法(重點(diǎn))
選擇器 { font: font-style font-weight font-size/line-height font-family;}屬性 | 表示 | 注意點(diǎn) |
font-size | 字號(hào) | 我們通常用的單位是px 像素，一定要跟上單位 |
font-family | 字體 | 實(shí)際工作中按照?qǐng)F(tuán)隊(duì)約定來寫字體 |
font-weight | 字體粗細(xì) | 記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數(shù)字不要跟單位 |
font-style | 字體樣式 | 記住傾斜是 italic 不傾斜 是 normal 工作中我們最常用 normal |
font | 字體連寫 | 1. 字體連寫是有順序的 不能隨意換位置 2. 其中字號(hào) 和 字體 必須同時(shí)出現(xiàn) |
CSS外觀屬性
行間距
line-height: 24px;
//line-height常用的屬性值單位有三種，分別為像素px，相對(duì)值em和百分比%，
//實(shí)際工作中使用最多的是像素px首行縮進(jìn)
text-indent: 2em;
//屬性值
- 其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值,
- 建議使用em作為設(shè)置單位文本水平對(duì)齊
text-align:left //左對(duì)齊（默認(rèn)值）屬性 | 解釋 |
left | 左對(duì)齊（默認(rèn)值） |
right | 右對(duì)齊 |
center | 居中對(duì)齊 |
文本修飾
text-decoration: none; //取消下劃線text-decoration 通常我們用于給鏈接修改裝飾效果
值 | 描述 |
none | 默認(rèn)。定義標(biāo)準(zhǔn)的文本。 取消下劃線（最常用） |
underline | 定義文本下的一條線。下劃線 也是我們鏈接自帶的（常用） |
overline | 定義文本上的一條線。（不用） |
line-through | 定義穿過文本下的一條線。（不常用） |
屬性 | 表示 | 注意點(diǎn) |
color | 顏色 | 我們通常用 十六進(jìn)制 比如 而且是簡寫形式 #fff |
line-height | 行高 | 控制行與行之間的距離 |
text-align | 水平對(duì)齊 | 可以設(shè)定文字水平的對(duì)齊方式 |
text-indent | 首行縮進(jìn) | 通常我們用于段落首行縮進(jìn)2個(gè)字的距離 text-indent: 2em; |
text-decoration | 文本修飾 | 記住 添加 下劃線 underline 取消下劃線 none |
以下為個(gè)人筆記(需要請(qǐng)關(guān)注私聊):
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
