免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

網(wǎng)站設(shè)計(jì):頁面上的文字怎么設(shè)計(jì)閱讀起來更舒服?

2023-02-09    分類: 網(wǎng)站建設(shè)

好的用戶體驗(yàn)才能獲得更多的訪客,網(wǎng)站也才能收獲用戶的喜愛,得到客戶的喜愛。而要好的用戶體驗(yàn),一定要有舒適的閱讀頁面,特別是以文字信息為主的網(wǎng)站,一定要做好網(wǎng)頁的文字設(shè)計(jì)。

上網(wǎng)在線閱讀,是大多人獲取信息的重要途徑。用戶會(huì)在網(wǎng)上閱讀到大量的新聞及各類文章,特別是網(wǎng)絡(luò)小說,這些頁面展示的主體就是通篇大段的文字。對于這種看似簡單的文字堆砌的頁面,有沒有人抱怨過:“這樣的頁面還需要出效果圖啊?”作為網(wǎng)頁設(shè)計(jì)師的你是怎樣處理這樣的界面的?

是習(xí)慣性的使用宋體字或者微軟雅黑?

是直接設(shè)為12px或者14px的字號(hào)?

你有想過為什么要使用這種字體、字號(hào)嗎?

你有考慮過文字排布與閱讀效率的關(guān)系嗎?

你的頁面背景會(huì)影響到用戶的瀏覽舒適度嗎?

讓我們從以下5個(gè)元素具體分析。

一:字體、字號(hào)

字體和字號(hào)這兩個(gè)元素必須捏在一起說。

字體分為襯線體(serif)與非襯線體(sans serif)。簡單的說,襯線體(serif)就是帶有襯線的字體,筆畫粗細(xì)不同并帶有額外的裝飾,開始和結(jié)尾有明顯的筆觸(如下圖)。常用的英文襯線體有Times New Roman和Georgia,中文即是我們在windows下較常見的中易宋體。

與襯線體相反,無襯線裝飾,筆畫粗細(xì)無明顯查差異的字體就是非襯線體(sans serif)。Arial、Helvetica、Verdanad都是我們熟悉的英文非襯線體,中文有微軟雅黑和mac下默認(rèn)的中文-華文細(xì)黑。

在過去,普遍認(rèn)為有筆觸裝飾的襯線體,可提高辨識(shí)度和閱讀效率,更適合做為閱讀的字體。多用于報(bào)紙、書籍等印刷品的正文。非襯線體飽滿醒目,常用做標(biāo)題或者用于較短的段落。

很長一段時(shí)間里,在互聯(lián)網(wǎng)上我們會(huì)注意這樣的一個(gè)現(xiàn)象,國外網(wǎng)站大部分以非襯線體為主,而中文網(wǎng)站基本就是宋體。其實(shí)不難理解,襯線字體筆畫有粗細(xì)之分,很小字的情況下細(xì)筆畫就被弱化,受限于電腦的分辨率,10-12px的襯線字體在顯示器上是相當(dāng)難辨認(rèn)的(見下圖);同字號(hào)的非襯線體筆畫簡潔而飽滿,更適于做網(wǎng)頁字體。windows下,中文宋體小字點(diǎn)陣的特性,12px、14px的字號(hào)顯示仍然相當(dāng)清晰美觀,便于閱讀。這也就是為什么大多網(wǎng)頁設(shè)計(jì)制作人員容易機(jī)械性的選用特定字號(hào)或英文或中文的字體。

如今隨著顯示器越來越大,分辨率越來越高,經(jīng)常會(huì)覺得看12px的文字有點(diǎn)吃力,做為設(shè)計(jì)師也會(huì)不自覺的開始大量使用14px的字體,而且越來越多的網(wǎng)站開始使用15、16px甚至18px以上的字號(hào)做正文文字。大字號(hào)的使用,對英文字體來講,襯線體的高辨識(shí)度和流暢閱讀的優(yōu)勢就體現(xiàn)出來了。中文宋體在顯示14號(hào)以上字體時(shí),單線條大字總是看上去有些單薄不那么協(xié)調(diào),特別是這款點(diǎn)陣字在ClearType 強(qiáng)制平滑顯示狀態(tài)下尤其顯得模糊不清。微軟雅黑就是微軟在這個(gè)字體顯示問題上的解決方案

讓我們分別對比下中英文的襯線體與非襯線體在不同字號(hào)時(shí)的顯示效果。

英文以Times和Verdanad為例,中文以宋體和微軟雅黑為例。

二:行長

我們隨手拿起一本書或者一份報(bào)紙,數(shù)一數(shù)每行的文字,一般情況下都不會(huì)超過40個(gè)漢字。這是因?yàn)槿绻啃形淖诌^長,讀者會(huì)不停的轉(zhuǎn)動(dòng)脖子,感到疲憊的同時(shí)也會(huì)降低閱讀效率;目光從行尾移至下一行首,也很容易串行,影響讀者瀏覽文章的節(jié)奏。這點(diǎn)同樣適用于網(wǎng)頁上的文章閱讀。由于顯示器是橫向的,我們更要注意劃分閱讀區(qū)域。

文本寬度控制在450-700px為宜,此范圍內(nèi)參照字號(hào)大小;

英文每行80-100個(gè)字母(空格算一個(gè)字母)為宜;

中文每行30-40個(gè)漢字為宜。

三:間距

通過設(shè)置間距,我們就可以控制文字的密度。如果每行間距太小,與文字過長一樣,讀者瀏覽文章時(shí)也容易串行;如果行距過寬,閱讀時(shí)就會(huì)感覺文章不夠連貫。

間距沒有固定的值,通常是根據(jù)字體大小來定義的。在word里我們常看到雙倍行距、單倍行距和1.5倍行距的選項(xiàng)。網(wǎng)頁上行距的單位常用em來表示,不管是中文網(wǎng)站還是英文網(wǎng)站,大家多喜歡用1.5em-1.8em的行距。以1.6em的行距為例,字號(hào)16px的字,行距就是25.6px。

關(guān)于段距,我們要考慮一下具體實(shí)際情況。比如文章篇幅較短,就不需要很寬的段距;二文章篇幅很長,特別是那些偏學(xué)術(shù)的比較枯燥的文章,就要多利用段距把握文章的節(jié)奏,給閱讀者喘息和思考的機(jī)會(huì),且使文章更有層次和可讀性。

一:背景

白色是全頻光,全放射光對人眼睛的較有刺激,所以很多印刷品讀物的紙張都選用乳白色或者淡黃色的紙張。由于顯示器本身就發(fā)光,所以同是純白色背景的文字,在電腦上比在紙上閱讀會(huì)使眼睛更容易疲乏,另有研究表明:在電腦上閱讀只有在紙上閱讀速度的78%,閱讀效率大大減低。因此,為了提高頁面瀏覽的舒適度和效率,越來越多的頁面采用淺灰色和淡黃色做為頁面背景。

另外,印刷品以文字為主的出版物往往會(huì)采用低光澤度的紙張,也是因?yàn)楣鉂啥雀叩募垙埛瓷涠雀撸瑢?dǎo)致閱讀質(zhì)量下降,容易使人視覺疲勞。頁面背景仿造低光澤度的紙張(紙張紋理)也能否提高閱讀的舒適度呢?

我曾做過這樣一個(gè)小調(diào)研,同樣一段文字放在不同顏色的背景上(僅考慮自然光源),其中有兩個(gè)背景加了紙張紋理的效果。結(jié)果75%的人認(rèn)為帶有紙張紋理的背景長時(shí)間閱讀舒適度較高。

結(jié)語:實(shí)際工作中,我們需要思考的更多,僅僅這5個(gè)元素是不夠的。瀏覽環(huán)境、設(shè)備、網(wǎng)站特點(diǎn)、用戶人群、個(gè)人偏好等等都需要設(shè)計(jì)師根據(jù)具體情況來把握界面文字的展示效果。差別也許是細(xì)微的,就像蝴蝶效應(yīng),多一點(diǎn)點(diǎn)的思考,就能為用戶帶來更好的體驗(yàn)感受。

文章題目:網(wǎng)站設(shè)計(jì):頁面上的文字怎么設(shè)計(jì)閱讀起來更舒服?
本文URL:http://m.newbst.com/news/236315.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作手機(jī)網(wǎng)站建設(shè)網(wǎng)站營銷面包屑導(dǎo)航外貿(mào)建站企業(yè)建站

廣告

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

手機(jī)網(wǎng)站建設(shè)