中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

優(yōu)化排版等同于強(qiáng)化可讀性,提升可訪問(wèn)性!

2016-12-01    分類: 網(wǎng)站建設(shè)

于網(wǎng)頁(yè)而言,視覺(jué)信息的傳達(dá)至關(guān)重要。用戶通過(guò)頁(yè)面獲取信息,文字、圖片、圖標(biāo)、按鈕、表單等UI元素都承載著不同類型的信息。在這其中,文字的作用尤其巨大。 排版設(shè)計(jì) 的時(shí)候,對(duì)于文本內(nèi)容的處理,占據(jù)了相當(dāng)大的比例。雖然網(wǎng)絡(luò)上,信息呈現(xiàn)的方式多種多樣,但是依然有超過(guò)9成的信息是通過(guò)文本來(lái)傳遞的。
良好的 排版設(shè)計(jì) 能讓閱讀成為一件愉悅的事情,正如同 Oliver Reichenstein 在他的文章中所說(shuō)的:
“優(yōu)化排版等同于強(qiáng)化可讀性,提升可訪問(wèn)性,增強(qiáng)可用性,最終實(shí)現(xiàn)視覺(jué)上的平衡!”
換句話來(lái)說(shuō),優(yōu)化 排版設(shè)計(jì) 就是優(yōu)化UI界面。今天的文章總結(jié)了文字排版的10個(gè)常見(jiàn)注意事項(xiàng),幫你真正有效提升內(nèi)容的可讀性和易讀性。
1、控制字體數(shù)量
當(dāng)你的網(wǎng)頁(yè)文本內(nèi)容中使用超過(guò)3種完全不同的字體的時(shí)候,會(huì)讓網(wǎng)站顯得結(jié)構(gòu)紊亂和不專業(yè)。
太多字體和復(fù)雜的樣式都會(huì)對(duì)布局產(chǎn)生影響。

為了阻止這種情況的發(fā)生,盡量控制字體類型的數(shù)量是很有必要的。
一般說(shuō)來(lái),限制字體數(shù)量是一種非常有用的方法(最多兩種字體,通常一個(gè)字體能夠搞定絕大多數(shù)的排版),在整個(gè)網(wǎng)站設(shè)計(jì)中堅(jiān)持使用一種字體能夠帶來(lái)足夠一致的體驗(yàn)。如果你需要使用兩種,甚至更多的字體,那么請(qǐng)確保這幾種字體族之間能夠互相補(bǔ)充、互相搭配。以下方四個(gè)字體為例,四個(gè)字體當(dāng)中 Georgia 和 Verdana 在字體的大小、寬度上都比較接近,兩者構(gòu)成和諧的搭配。相比而言,右側(cè)的兩款字體 Baskerville 和 Impact 如果搭配在一起就很不合適了,Impact 過(guò)于厚重,而 Baskerville 的襯線也過(guò)于突出。

2、嘗試使用標(biāo)準(zhǔn)字體
諸如Google web Fonts 和Typekit 這樣的在線字體服務(wù)能夠?yàn)槟阃扑]許多新鮮有趣的字體,意想不到字體設(shè)計(jì),在很多場(chǎng)合能夠給用戶帶來(lái)新鮮的體驗(yàn)。在使用上,也確實(shí)非常方便,比如Google Web Fonts 是這么用的:
·選一款你喜歡的字體,比如 Open Fonts
·生成代碼,貼到HTML文檔的
·完成!
這種操作其實(shí)和把大象放到冰箱里面一樣簡(jiǎn)單。
那么,到底問(wèn)題出在哪兒呢?
首先,你是選取的漂亮字體并不是誰(shuí)的電腦里面都會(huì)有的,最前先的例子是,Windows電腦中的微軟雅黑并不是Mac的標(biāo)配字體,如果你的網(wǎng)頁(yè)中使用了微軟雅黑,它會(huì)在Mac電腦中以蘋方來(lái)顯示。你挑選的字體并非普遍存在的,最終會(huì)以另外一種樣子呈現(xiàn)在別人的屏幕上,用戶熟悉的還是那些標(biāo)準(zhǔn)的、常見(jiàn)的字體,最安全的英文字體始終都是 Arial、Calibri、Trebuchet 等字體。良好排版實(shí)際上只是基礎(chǔ),吸引人的始終是漂亮整齊的布局和優(yōu)質(zhì)的內(nèi)容,而非字體本身。
3、控制每行內(nèi)容的長(zhǎng)度
每行文本的字符數(shù),其實(shí)直接影響著內(nèi)容的可讀性。正如同Baymard 通過(guò)研究所發(fā)現(xiàn)的那樣:
“如果你想擁有良好的閱讀體驗(yàn),將每行文字控制在大概60個(gè)字符左右,這個(gè)字符數(shù)量能夠讓你的內(nèi)容擁有恰到好處的可讀性。”
如果文本太短,用戶的內(nèi)容掃視頻率會(huì)過(guò)高,經(jīng)常會(huì)打破閱讀的節(jié)奏,而如果太長(zhǎng)了,用戶會(huì)很難持續(xù)的保持高專注度的閱讀。
在移動(dòng)端上,每行文字應(yīng)該控制在30~40個(gè)字符之間,這也符合目前的用戶使用習(xí)慣和閱讀體驗(yàn)。參考下面的對(duì)比圖,可以看出,40~60個(gè)字符數(shù)通常能夠取得好的閱讀體驗(yàn)。

在網(wǎng)頁(yè)設(shè)計(jì)中,通常使用 em 和 px 來(lái)控制文本塊的寬度,借此來(lái)控制每行的字符數(shù)量。
4、選擇各種尺寸下都能良好顯示的字體
用戶注定是要通過(guò)不同的設(shè)備來(lái)訪問(wèn)你的網(wǎng)站的。絕大多數(shù)的用戶界面需要使用到大小不一的文本元素來(lái)作為支撐,正文,標(biāo)題,按鈕標(biāo)簽,表單,等等等等。你所選擇的字體,應(yīng)該在不同的尺寸、不同字重的情況下,都能具備良好的可讀性。
最值得參考的是目前幾個(gè)主流的平臺(tái)自主設(shè)計(jì)的字體族,比如 Android 上的Roboto,蘋果全系列的通用英文字體 San Francisco 。
當(dāng)字體夠大的時(shí)候,可識(shí)別性的問(wèn)題并不明顯,當(dāng)它在小屏幕上呈現(xiàn)內(nèi)容的時(shí)候,可識(shí)別度的問(wèn)題就很顯著了。比如下面的Vivaldi 字體,雖然很漂亮,但是當(dāng)尺寸小的時(shí)候,可讀性就明顯不足了:
5、使用易于識(shí)別的字體
由于英文字體本身的幾何特征,許多字體在設(shè)計(jì)的時(shí)候,稍不注意就會(huì)讓用戶難以識(shí)別,尤其是字母“i”和“L”,字母“r”、“n”和“h”,在選擇字體的時(shí)候,應(yīng)該特別注意這方面的問(wèn)題,確保不會(huì)在這些基本的問(wèn)題上,給用戶造成困擾。

6、避免全部大寫的情況
其實(shí)在英語(yǔ)言國(guó)家的網(wǎng)站中,使用全部大寫的文本,是一個(gè)特別典型的設(shè)計(jì)上的忌諱。正如同 Miles Tinker 所說(shuō),全部的段落都使用大寫字母,和小寫字母相比,可讀性有著明顯的降低,直接反映在用戶身上,就是文本的閱讀速度明顯降低了。
7、注意控制行高
在排版中,Leading,也就是行高,是一個(gè)非常常見(jiàn)的重要概念。在排版設(shè)計(jì)當(dāng)中,行高也是很值得關(guān)注。換個(gè)更容易理解的概念來(lái)闡述這件事情,行間距,正常情況下,行間距應(yīng)該是文本高度的30%,這樣能夠確保視覺(jué)上的清晰易讀。Dmitry Fadeyev 發(fā)現(xiàn),段落之間的間距如果控制好了,整個(gè)閱讀效率能夠提升20%。這樣的布局能夠讓文本轉(zhuǎn)化為用戶更容易消化的內(nèi)容,剝離無(wú)關(guān)的細(xì)節(jié)。

8、確保色彩對(duì)比度合理
文本和背景應(yīng)該有足夠的對(duì)比度,文本越明顯,用戶就越能快速清晰地獲取其中的信息。按照W3C的建議,文本和背景的對(duì)比是有規(guī)則的:
·較小的文本應(yīng)當(dāng)確保至少和背景之間有4.5:1的對(duì)比度比率
·較大的文本(14pt粗體,18pt常規(guī))應(yīng)當(dāng)確保和背景之間的對(duì)比度超過(guò)3:1

對(duì)比度不足的時(shí)候,幾乎無(wú)法進(jìn)行閱讀

這些符合對(duì)比度的規(guī)范,易讀性不錯(cuò)
一旦你確定了配色,需要在盡可能多的設(shè)備上進(jìn)行測(cè)試,讓不同的用戶來(lái)查看效果,盡量避免出現(xiàn)可讀性的問(wèn)題。
9、避免使用紅色和綠色的文本
紅綠色盲是最常見(jiàn)的視力障礙之一,通常使用彩色的文本而是用來(lái)區(qū)分重要信息的,但是紅綠兩色則可能會(huì)失去視覺(jué)傳達(dá)的功能。即使只使用紅色,有盡量搭配其他的區(qū)分方式。

10、避免使用閃爍的文本
閃爍的文本確實(shí)能夠引起用戶的注意力,但是它存在的大問(wèn)題是讓人覺(jué)得不適,甚至?xí)鹛囟ㄓ脩舻陌d癇類疾病。討厭且令人分心的閃爍文本,無(wú)論從哪個(gè)角度上來(lái)看,都是得不償失的設(shè)計(jì)失誤。

結(jié)語(yǔ)
現(xiàn)在,排版在網(wǎng)頁(yè)設(shè)計(jì)中,已經(jīng)是一件越來(lái)越重要的事情了。糟糕的排版令人分心,內(nèi)容無(wú)法清晰地傳達(dá)。相反優(yōu)秀的排版會(huì)做的更加潤(rùn)物細(xì)無(wú)聲,讓內(nèi)容清晰直觀地傳達(dá),并且最終讓用戶更輕松地了解其中的內(nèi)容。

分享名稱:優(yōu)化排版等同于強(qiáng)化可讀性,提升可訪問(wèn)性!
文章分享:http://m.rwnh.cn/news22/70822.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、網(wǎng)站策劃域名注冊(cè)、商城網(wǎng)站外貿(mào)建站

廣告

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

成都網(wǎng)頁(yè)設(shè)計(jì)公司
长丰县| 阳泉市| 前郭尔| 威宁| 阆中市| 泾阳县| 新竹市| 五大连池市| 皮山县| 曲阳县| 从化市| 且末县| 乾安县| 且末县| 梁山县| 江达县| 隆昌县| 扎赉特旗| 沁水县| 泸定县| 山西省| 敦化市| 扎兰屯市| 信阳市| 洛川县| 永善县| 宾阳县| 浏阳市| 昭觉县| 株洲县| 夹江县| 洪泽县| 永兴县| 惠东县| 霍城县| 涡阳县| 耒阳市| 鄂尔多斯市| 沙坪坝区| 正蓝旗| 富民县|