下載吧 - 綠色安全的游戲和軟件下載中心

          軟件下載吧

          當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > 字體知識(shí),聊聊移動(dòng)端的字體準(zhǔn)則!

          字體知識(shí),聊聊移動(dòng)端的字體準(zhǔn)則!

          時(shí)間:2024-03-07 15:01作者:下載吧人氣:27

          當(dāng)視線(xiàn)掠過(guò)一行文字時(shí),它是跳躍前進(jìn)的,我們稱(chēng)之為掃視。你讀的不是字母,甚至不是詞語(yǔ),而是文字某部分的影像,大腦會(huì)補(bǔ)上它預(yù)期的內(nèi)容。如果超出大腦預(yù)料,它會(huì)促使眼睛回去核實(shí)假設(shè)十分正確。通過(guò)在字里行間創(chuàng)造平順的視覺(jué)流動(dòng),好的字體極度減輕了眼睛的負(fù)擔(dān)。

          對(duì)任何字體工作者而言,在移動(dòng)設(shè)備上要面臨與生俱來(lái)的挑戰(zhàn):空間有限,環(huán)境光通常比較微弱。不過(guò)將已經(jīng)用于web端的技巧稍加調(diào)整,我們就可以提升移動(dòng)設(shè)備的易讀性。

          一、留足空間

          與普遍觀點(diǎn)恰好相反,字體并非屏幕上彎彎曲曲的線(xiàn)條排列;它主要在于周?chē)拖嗷ラg的空間。

          字母本身對(duì)字體的影響,與構(gòu)成它的空間相比,要小得多。

          要理解這一點(diǎn),了解字體從何而來(lái)很有幫助:字母o(還有b、c、p等等)中間的圓孔被稱(chēng)作“凹槽”。在最原始的印刷機(jī)上,鉛字由金屬雕刻而成,這些凹槽來(lái)自雕刻成型、排列在盤(pán)中的金屬活字。第一個(gè)字體設(shè)計(jì)師所處理的模具,實(shí)際上并不能用于印刷。字母本身對(duì)字體的影響,與構(gòu)成它的空間相比,要小得多。

          談到層次時(shí),我們通常指的是h1到p,有時(shí)候還會(huì)到h6。但另外還有一種層次在影響著行或段落的視覺(jué)流,這是特殊的層次:字母間距小于字間距,字間距小于行間距,以此類(lèi)推。

          要在移動(dòng)端創(chuàng)造最佳易讀性,尤其要注意這些特殊層次,這些格式塔式的詞語(yǔ)、行、段落的文字組合,在自然光環(huán)境下同樣至關(guān)重要。

          二、行寬

          行寬是一行文字的長(zhǎng)度。或者確切的說(shuō),是一行文字的理想長(zhǎng)度,因?yàn)楹茈y讓每一行都精確吻合。

          眾所周知,舒適閱讀的理想行寬是65個(gè)字符左右。行寬產(chǎn)生的物理長(zhǎng)度,取決于字體的設(shè)計(jì)、字間距(見(jiàn)下文)和你使用的具體文字。本文開(kāi)篇的65個(gè)字符(譯者注:此處請(qǐng)參見(jiàn)英文原文),用PT Serif字體是26.875em寬,用Open Sans是28.4375em寬,用Ubuntu字體是27.3125em寬。如果再加入斜體、大小寫(xiě)和一大堆其他字體細(xì)節(jié),還會(huì)有更大的差異。

          在桌面端瀏覽器中,65個(gè)字符很難觸及邊緣,但在移動(dòng)設(shè)備上,65個(gè)字符(如果至少大到看得清)會(huì)超出瀏覽器的邊界。所以,在移動(dòng)設(shè)備上,你必須得縮減行寬。

          移動(dòng)端并沒(méi)有普遍認(rèn)可的行寬標(biāo)準(zhǔn)。不過(guò)傳統(tǒng)上,報(bào)紙或雜志上每一個(gè)窄列都會(huì)趨向于39個(gè)字符。鑒于這個(gè)理想行寬已經(jīng)經(jīng)歷了數(shù)個(gè)世紀(jì)的考驗(yàn),它在移動(dòng)端字體上也運(yùn)轉(zhuǎn)良好。

          三、寬松行距、緊湊行距

          行距是行之間的空間,行距太緊湊,會(huì)讓視線(xiàn)難以從行尾掃視到下一行首。行距太寬松,字間距會(huì)開(kāi)始形成隊(duì)列,產(chǎn)生了我們通常意義上的河流,阻斷了行的視覺(jué)流。

          字體知識(shí),聊聊移動(dòng)端的字體準(zhǔn)則!

          從左至右:理想行距、太緊湊、太寬松。

          行距的標(biāo)準(zhǔn)通常是1.4em,但以我的經(jīng)驗(yàn),這對(duì)于屏幕來(lái)說(shuō)太緊湊了:在屏幕上表現(xiàn)良好的字體都有一個(gè)關(guān)鍵特征——大的凹槽,大凹槽需要更大一些的行距來(lái)保持空間層次。

          反過(guò)來(lái),更短的行寬需要更小的行距。所以你可能需要將桌面端的行距設(shè)得寬松點(diǎn),同時(shí)記得將移動(dòng)端的設(shè)置得緊湊些。

          四、找到最佳狀態(tài)

          所有字體至少都有一種最佳狀態(tài),在屏幕上展現(xiàn)最佳的尺寸,還有在瀏覽器中最能保持字形的抗鋸齒選項(xiàng)。

          最佳狀態(tài)下,多數(shù)筆畫(huà)通常都能排列在像素網(wǎng)格中——像素字體,如果你還記得的話(huà),那些字體僅僅在字號(hào)調(diào)整到最佳狀態(tài)下才有效。

          將字體設(shè)為最佳狀態(tài)能形成更強(qiáng)烈的對(duì)比。為移動(dòng)端設(shè)計(jì)時(shí),對(duì)比尤其重要,因?yàn)閼?hù)外的強(qiáng)光可能分散注意。

          你會(huì)發(fā)現(xiàn),微調(diào)行距會(huì)使每行脫離完美像素匹配。我覺(jué)得,在移動(dòng)設(shè)備屏幕上,對(duì)比的重要性勝過(guò)行距。所以如果你不得不在行距上妥協(xié),來(lái)保持每行契合像素網(wǎng)格,那就這么做吧。

          通常設(shè)計(jì)師通過(guò)基線(xiàn)網(wǎng)格來(lái)排列文字。但在移動(dòng)設(shè)備上,我們需要使用x高度來(lái)代替(x高度顧名思義,就是小寫(xiě)字母x的高度)。從易讀性研究中,我們知道大腦識(shí)別的是文字頂部,而不是底部。所以要成就更加平順的視覺(jué)流,我們要確保字符頂部最契合像素網(wǎng)格。

          五、不要忽視起伏邊

          起伏邊是一段文字的邊緣。你讀的多數(shù)內(nèi)容是居左對(duì)齊的(至少對(duì)于拉丁語(yǔ)系而言),導(dǎo)致右邊沿參差不齊。

          當(dāng)視線(xiàn)從行尾跳至下一行首時(shí),大腦最好要能判斷出下一次跳躍的角度和距離。把每次跳躍都想象成跑過(guò)跳板,如果間距保持一致,就會(huì)快很多。因此,文字左側(cè)邊緣應(yīng)該是平的,每行從同一個(gè)地方開(kāi)始(對(duì)于從右至左的語(yǔ)言,恰好相反)。

          因此你絕不應(yīng)該將兩三行以上的文字居中對(duì)齊。

          通常文字會(huì)設(shè)置成兩端對(duì)齊,這意味著每行文字所占空間相等,所以?xún)蓚?cè)都不會(huì)有起伏邊。我懷疑兩端對(duì)齊的流行和響應(yīng)式設(shè)計(jì)有關(guān),它教設(shè)計(jì)師們以塊狀形態(tài)思考。兩端對(duì)齊的文字產(chǎn)生的留白不統(tǒng)一。最糟的情況會(huì)導(dǎo)致一行中只有幾個(gè)字,相當(dāng)不協(xié)調(diào)。更窄的行寬會(huì)加重兩端對(duì)齊的問(wèn)題,所以?xún)啥藢?duì)齊的文字在移動(dòng)端是難以閱讀的。

          字體知識(shí),聊聊移動(dòng)端的字體準(zhǔn)則!

          從左至右:左對(duì)齊、居中對(duì)其、兩端對(duì)齊。

          如果整潔真的非常重要,那么使用連字符號(hào)來(lái)讓起伏邊更平滑,絕不能在移動(dòng)端使用兩端對(duì)齊。

          文字右側(cè)是起伏邊在移動(dòng)端還有一項(xiàng)額外好處:人們通常在易分心的場(chǎng)合閱讀文字,讀者視線(xiàn)頻繁地從文字上移開(kāi)——查看站名,或是接電話(huà)。起伏邊創(chuàng)造了一個(gè)隨機(jī)形狀,讓右撇子的視線(xiàn)可以通過(guò)重讀最少的文字,回到剛才的位置。

          六、減少反差

          增強(qiáng)文字與背景對(duì)比的同時(shí),我們也要減少不同層次文字間的反差。

          在移動(dòng)端,實(shí)際可見(jiàn)的文字更少,所以反差被放大了。

          其原因是我們的大腦基于環(huán)境來(lái)判斷重要性。在桌面端,標(biāo)題可能是正文字號(hào)的兩倍甚至三倍,因?yàn)槠聊簧嫌懈辔淖郑赃@是有效的。在移動(dòng)端,實(shí)際可見(jiàn)的文字更少,所以反差被放大了。

          多數(shù)設(shè)計(jì)師使用斐波那契數(shù)列式的字號(hào)組合。在移動(dòng)端,應(yīng)該縮小比率來(lái)減少字號(hào)間的反差。比如,如果你使用黃金比例1.618與字號(hào)相乘。在移動(dòng)端,應(yīng)該用更小的比例1.382來(lái)替代。

          字體知識(shí),聊聊移動(dòng)端的字體準(zhǔn)則!

          桌面端屏幕比移動(dòng)端容許更夸張的字號(hào)縮放。

          七、按比例調(diào)整字間距

          為移動(dòng)端調(diào)整字號(hào)時(shí),我們要意識(shí)到字間距發(fā)生了必要的變化。

          (先說(shuō)一句,不應(yīng)該調(diào)整固有字距。固有字距是兩個(gè)字母相互組合時(shí)的距離,使它們的間距與其他字母間距在視覺(jué)上統(tǒng)一。創(chuàng)作字體時(shí),就納入了固有字距的考量,這個(gè)過(guò)程可能要花上數(shù)月。如果你選用了一款專(zhuān)業(yè)的字體,它的固有字距就是合適的,如果你覺(jué)得不對(duì),請(qǐng)換一個(gè)字體。)

          字間距并不是固有字距。字間距是字體中應(yīng)用在所有字符上的間距。通常你也不應(yīng)該調(diào)整字間距。

          大字號(hào)是個(gè)例外,拿標(biāo)題和小號(hào)文字(比如腳注)舉例。大號(hào)文字需要減少字間距,小號(hào)文字需要增加字間距。前者是考慮到分組,后者則是為了增強(qiáng)對(duì)比。如果你在調(diào)整標(biāo)題,或是用了通常字間距緊密的藝術(shù)字體,縮小時(shí)可能就需要把字間距放開(kāi)一點(diǎn)。

          總結(jié)

          字體是一門(mén)工藝,設(shè)計(jì)師終其一生都在精心打磨。的確如此,因?yàn)槊總€(gè)文字、每種字體和每項(xiàng)技術(shù)都帶來(lái)了新的挑戰(zhàn)。沒(méi)有一成不變的普適規(guī)律。

          假如你追求易讀性,要牢記三條原則:行內(nèi)的視覺(jué)流要平順,空間層級(jí)要清晰,要有足夠的對(duì)比。這尤其適用于移動(dòng)端頁(yè)面。

          沒(méi)有不可撼動(dòng)的規(guī)則,全憑你雙眼決斷。不過(guò)本文的指南可以作為理想的出發(fā)點(diǎn),讓你在移動(dòng)設(shè)備上優(yōu)美地排列文字。

          標(biāo)簽十萬(wàn)個(gè)為什麼,ps基礎(chǔ)教程,理論教程,ps理論,ps知識(shí),p
          查看所有評(píng)論+

          網(wǎng)友評(píng)論

          網(wǎng)友
          您的評(píng)論需要經(jīng)過(guò)審核才能顯示

          熱門(mén)閱覽

          最新排行

          公眾號(hào)

          盖楼回复X

          (您的评论需要经过审核才能显示)

          主站蜘蛛池模板: 日本在线一区二区| 99久久国产精品免费一区二区 | 欧洲亚洲综合一区二区三区| 国产一区在线mmai| 国产综合无码一区二区色蜜蜜| 一区二区三区免费视频网站| 久久中文字幕一区二区| 一区二区三区四区国产| 国产一区二区三区不卡在线观看| 天堂成人一区二区三区| 久久精品亚洲一区二区三区浴池| 少妇激情av一区二区| 国产在线观看一区精品| 无码日韩人妻AV一区免费l| 爱爱帝国亚洲一区二区三区| 91福利视频一区| 亚洲AV福利天堂一区二区三| 国产午夜精品一区理论片飘花| 久久精品一区二区免费看| 熟妇人妻一区二区三区四区| 日韩一区二区三区视频久久| 日韩一区二区三区免费播放| 美女视频黄a视频全免费网站一区| 丰满人妻一区二区三区免费视频| 真实国产乱子伦精品一区二区三区| 亚洲AV日韩精品一区二区三区| 成人日韩熟女高清视频一区| 中文字幕一区二区三| 色妞AV永久一区二区国产AV| 国产精品伦一区二区三级视频| 亚洲一区二区三区免费在线观看| 亚洲高清毛片一区二区| 国产成人一区二区三区| 日韩一区二区三区视频久久| а天堂中文最新一区二区三区| 无码国产精成人午夜视频一区二区| 亚洲国产情侣一区二区三区| 蜜桃无码一区二区三区| 亚洲av乱码中文一区二区三区| 国产伦一区二区三区高清 | 亚洲第一区香蕉_国产a|