網(wǎng)頁視覺設(shè)計(jì)中的小文字,大體驗(yàn)
隨著ipad等移動(dòng)終端的崛起,人們?cè)谝苿?dòng)終端閱讀上的時(shí)間越來越多,閱讀體驗(yàn)已經(jīng)變得越來越重要。而字體又是決定閱讀體驗(yàn)的關(guān)鍵所在,那么網(wǎng)頁字體在哪些方面又是什么影響著閱讀體驗(yàn)的成敗?
1.是否具有高辨識(shí)度
首先看看Consolas,這款字體,我們可以發(fā)現(xiàn),i和w的寬度都是一樣的,這種等寬字體都具有非常高的辨識(shí)度,非常適合文字編寫,代碼顯示等工作。
還是這個(gè)例子,在Arial字體中,i,l 的辨識(shí)度很低,而且當(dāng)有連續(xù)的il等較窄文字出現(xiàn)時(shí),文字難以選中,此外Georgia中,字母o,與數(shù)字0 只在大小上略有區(qū)別,基本上分不清,很難做到一目了然。
由此可見,等寬字體受字母本身的干擾較小,字母大小固定,密度固定,此類字體,簡單容易辨認(rèn),大大提升了閱讀效率。但等寬字體也有很嚴(yán)重的問題,他用降低美觀程度而換來了高辨識(shí)度,因此,大多只能出沒于在一些代碼編輯器等軟件。
2.是否適合長時(shí)間閱讀
Arial和Gerogia, 這兩款字體在pc的網(wǎng)頁上都非常用,但哪一種更適合長時(shí)間閱讀?
雖然看起來無襯線字體雖然更簡潔,醒目,但識(shí)別性卻不如襯線字體那么明確,要想讓讀者進(jìn)行長時(shí)間閱讀,更需要的是讓讀者一掃而過,不需要思考就能讀出文字,而Georgia恰好具備這一點(diǎn)特質(zhì)。因此,一般來說在同等印刷條件下襯線體在的閱讀速度要比無襯線體快五分之一左右。
首先襯線的筆畫輔助起到的不僅是美觀,還有助于辨識(shí)字體,其次,這些襯線筆畫可以使得這些字母在基準(zhǔn)線上的筆畫在視覺上會(huì)形成一定的水平導(dǎo)視,可以引導(dǎo)視覺朝著水平方向移動(dòng),使得被識(shí)別性系數(shù)提高,這就是為什么類似于Georgia的襯線字體會(huì)在pc端和傳統(tǒng)出版都會(huì)如此受歡迎的原因。
無襯線的Arial就好像大家閨秀,更適合地鐵等一些醒目的標(biāo)牌等一些大場面,而非襯線的Georgia卻似小家碧玉,字里行間,百看不膩。
3.是否適應(yīng)移動(dòng)終端
由于iPad 的顯示屏亮度和對(duì)比度要高于普通電腦,因此很多在普通電腦上合適的字體和設(shè)計(jì)直接搬到 iPad 上會(huì)由于背景的亮度而產(chǎn)生實(shí)物過虛的問題。這一點(diǎn)在搭配字體時(shí)尤其成為問題。某些細(xì)字體卻嚴(yán)重發(fā)虛,導(dǎo)致原本適合的搭配變得不般配,嚴(yán)重影響了體驗(yàn)。
Retina Display 帶來更細(xì)的精度,同時(shí)也給字體渲染帶來了更多問題,由于在不進(jìn)行縮放的情況下,顯示普通圖片時(shí),它會(huì)用4個(gè)像素來顯示圖片中的1個(gè)像素;而在顯示retina圖片時(shí),每個(gè)像素都對(duì)應(yīng)圖片中的1個(gè)像素。因此一些字體比如Georgia 就會(huì)變得非常細(xì),導(dǎo)致字體在顯示時(shí)與設(shè)計(jì)時(shí)不一致,影響了體驗(yàn)。
事實(shí)上,我們沒有辦法去改變硬件,只能盡量避免這些問題,因此在移動(dòng)終端適當(dāng)?shù)募哟笪淖殖叽纾?4px-16px)是比較明智。此外還可以加大文字的磅數(shù)也是避免發(fā)虛的辦法,而在英文顯示方面,PC端的經(jīng)典之一Georgia還需慎用。
4.是否擁有縝密的排版
這一點(diǎn),在中文的排版上 唐茶 就做的非常不錯(cuò),實(shí)現(xiàn)了禁則處理、齊頭尾、英文換行(hyphenation)等排版基本功,還對(duì)標(biāo)點(diǎn)外掛(行末出現(xiàn)的句號(hào)、逗號(hào)、分號(hào)等標(biāo)點(diǎn)會(huì)被「懸掛」到文字右邊框的外沿。)和段首縮進(jìn)進(jìn)行了實(shí)驗(yàn)性嘗試,都給讀者帶來了良好的閱讀體驗(yàn)。
此外,閱讀的體驗(yàn)還決于其他的重要因素,比如在不同的場合應(yīng)用不同的字體,字體的大小,磅數(shù),文字一行的長度,文字之間的密度等。
閱讀乃大,方方面面不離文字,文字雖小,筆筆畫畫緊扣體驗(yàn)。對(duì)設(shè)計(jì)師而言,優(yōu)秀閱讀的體驗(yàn),不僅僅是讓我們追求美的視覺,更是出于一種對(duì)讀者的關(guān)懷。
本文地址:http://m.likemindfilms.com/tutorial/di1168.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁設(shè)計(jì)中的常見頁面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫:40款為網(wǎng)頁設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏