字體知識(shí),聊聊移動(dòng)端的字體準(zhǔn)則!(2)
行距的標(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)格中——像素字體,如果你還記得的話,那些字體僅僅在字號(hào)調(diào)整到最佳狀態(tài)下才有效。
將字體設(shè)為最佳狀態(tài)能形成更強(qiáng)烈的對(duì)比。為移動(dòng)端設(shè)計(jì)時(shí),對(duì)比尤其重要,因?yàn)閼敉獾膹?qiáng)光可能分散注意。
你會(huì)發(fā)現(xiàn),微調(diào)行距會(huì)使每行脫離完美像素匹配。我覺(jué)得,在移動(dòng)設(shè)備屏幕上,對(duì)比的重要性勝過(guò)行距。所以如果你不得不在行距上妥協(xié),來(lái)保持每行契合像素網(wǎng)格,那就這么做吧。
通常設(shè)計(jì)師通過(guò)基線網(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)視線從行尾跳至下一行首時(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)端是難以閱讀的。
從左至右:左對(duì)齊、居中對(duì)其、兩端對(duì)齊。
如果整潔真的非常重要,那么使用連字符號(hào)來(lái)讓起伏邊更平滑,絕不能在移動(dòng)端使用兩端對(duì)齊。
文字右側(cè)是起伏邊在移動(dòng)端還有一項(xiàng)額外好處:人們通常在易分心的場(chǎng)合閱讀文字,讀者視線頻繁地從文字上移開(kāi)——查看站名,或是接電話。起伏邊創(chuàng)造了一個(gè)隨機(jī)形狀,讓右撇子的視線可以通過(guò)重讀最少的文字,回到剛才的位置。
六、減少反差
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps知識(shí)
- ps基礎(chǔ)教程
- ps技巧
- 十萬(wàn)個(gè)為什麼
- 理論教程
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 圖片畫(huà)冊(cè)平面設(shè)計(jì)排版ps理論教程
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- Photoshop初級(jí)教程-命令的技巧
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法