網(wǎng)頁設計之常用的字體排版規(guī)則知識
那么該怎樣利用成熟的規(guī)則來創(chuàng)造令人驚艷的網(wǎng)頁呢?本篇文章就帶大家沿著這樣的思路來探索網(wǎng)頁設計的可能性。
一、尺寸和層次
大小尺寸可能是排版設計的時候,調(diào)整得最多的因素。大而不當?shù)淖煮w設計不可取,小而難讀的尺寸同樣違反了可用性的基本需求。尺寸控制的終極目標,大概是增一分過大,減一寸太小的境界吧。
而層次也是不可忽略的因素。高可讀性的排版通常是具備有層次感的,而正是層次感引導用戶,先看標題,再看副標題,之后看正文。當你明白內(nèi)容的輕重緩急,字體和排版層次就自然而然的有了。
二、字間距和字偶距
在中文和英文排版印當中,字間距的概念比較簡單也容易理解,這是在一段或一句文字中,每個文字的固定間距,但是在英文字體排印當中,還存在一個概念,就是字偶距,這個概念在中文中幾乎用不到;字偶距值得是特定字母組合之間的距離,比如A和V這樣的字母在一起的時候,如果不調(diào)整兩者之間的字偶距,就會看起來隔得很遠,視覺上會讓人覺得不太正常。
控制整體文本的字間距,能夠讓內(nèi)容的可讀性、文本段落的松緊顯得更加合理。而字偶距在標題、展示性字體設計當中,起到關鍵的作用,甚至會影響整體的風格。
三、控制字體數(shù)量
當你的網(wǎng)頁中使用過多的字體的時候會成為視覺噪音;絕大多數(shù)的項目會將字體數(shù)量控制到2到3種。
字體選擇的關鍵在于挑選擁有可變風格的字體族。絕大多數(shù)的字體都擁有多種不同的樣式,包括常規(guī)、粗體、斜體等。通過選擇有多種可變樣式的字體,讓你的設計項目確保多變的同時,還擁有內(nèi)核和精神上的一致性。如果你的需求比較多樣的話,甚至有些字體族中混合了襯線體和非襯線體,絕對夠你使用了。
不過,在中文字體的問題上,目前還沒有足夠優(yōu)秀的在線字體的解決方案,有也不夠成熟。不過你可以在英文字體的搭配上多花點心思。
四、樣式的混合與搭配
字體的選擇很棘手,甚至可能是整個設計方案中最令人頭大的部分;但是有時候,選擇風格截然不同的兩種字體,也是一個不錯的答案。
進行不同樣式字體搭配的時候,關鍵技巧在于選擇x高度相同的字體(字體中x、o這些小寫字體的高度),同時還要注意o這樣的小寫字體的內(nèi)空大小要相近,這樣能保證字體的整體體驗是一致的。
這樣的細節(jié)確保了一件事情:即使兩種字體分別為襯線體和非襯線體,擁有足以匹配的視覺體驗,能夠混在一起閱讀。
五、忘記連字符和對齊吧
在傳統(tǒng)的排版印當中,為了確保閱讀體驗和排版的整體美感,當單詞出現(xiàn)到一行的邊緣無法完全顯示的時候,會通過連字符跳轉(zhuǎn)到下一行。同時,為了讓沒一行兩頭都完美地對齊,會使用Justification(對齊)這一技術(shù)。
但是,在網(wǎng)頁設計中,截然不同的需求讓這兩種排版印技術(shù)顯得并不那么有用。連字符會打破用戶原有的閱讀節(jié)奏,所以連字符的意義并不大。而使用兩頭對齊的技術(shù),會讓許多段落內(nèi)的字間距和行間距變得非常奇怪。所以,忘記這兩個東西吧。
六、不要強行改變字體
從技術(shù)上來說,你可以讓一個胖一點瘦一點,高一點或者矮一點,甚至在高一點的同時還加粗等等。這在網(wǎng)頁中運用并不可取,因為字體設計師原本已經(jīng)在力圖讓一款字體看起來足夠一致也足夠漂亮,強行改變通常只能讓整字體劣化,在頁面中顯示也往往無法確保好看。
如果你發(fā)覺某款字體不適合你的設計,最好是搜索或?qū)ふ伊硗忸愃频淖煮w。
七、對比
對比度是字體排版設計的時候,最值得注意的幾個因素之一。就像你需要使用不同的尺寸的字體對比來營造層次感一樣,不同的字體重量是對比,色彩能構(gòu)成對比,樣式不同也一樣是對比。
高效的對比手法有不少,但是色彩是來的最高效的。最理想的方案,是淺色的背景上使用深色的文本字體(或者相反)。有無數(shù)的配色方案可以幫你實現(xiàn)這一點。不過,值得注意的是,有的對比色過于晃眼,比如藍色+亮紅色,就讓人很難受。所以,除了足夠的對比,還要在明暗和飽和度上調(diào)整,才能帶來好體驗。
八、度量
網(wǎng)頁中文本的載體和度量也很重要,一行有多少字母、有多少文字,這些都影響著整個閱讀體驗。用戶始終是需要從左到右閱讀文本,并且循環(huán)往復掃視來獲取信息的,太短了用戶需要頻繁掃視,太長了會使得掃視范圍過廣,也容易讓人分心。
如果你想擁有良好的閱讀體驗,將每行文字控制在大概60個字符左右,這個字符數(shù)量能夠讓你的內(nèi)容擁有恰到好處的可讀性。
在移動端上,每行文字應該控制在30~40個字符之間,這也符合目前的用戶使用習慣和閱讀體驗。通常40~60個字符數(shù)能夠取得最佳的閱讀體驗。
在網(wǎng)頁設計中,通常使用 em 和 px 來控制文本塊的寬度,借此來控制每行的字符數(shù)量。
-
2021/12/28
-
2021/12/23
-
2021/12/17
- 愛華仕斬獲“2021年度中國廚衛(wèi)行業(yè)年度智能
- 回首2021,迎戰(zhàn)2022 彩虹線開啟新征程!
- 福臨板材|福滿2021,圓夢2022
- 美特照明:2022年照明新趨勢,經(jīng)銷商如何做大
- 會自己“洗澡”的集成灶,帥康自動清洗集成灶
- 帶你設計一款功能多變,簡單實用的休閑露臺陽
- 世紀豪門吊頂:破防了!原來顏值+實力=H20
- 裝修木門選的好,噪音統(tǒng)統(tǒng)沒煩惱
- 寒潮來了,有淋浴房洗澡更保暖舒服
- 元旦特輯:歐意電器述說生活的點滴與美好
- “中國十大品牌”獲獎名單出爐,賽戈水漆榮耀
- 2021值得消費大賞 凱迪仕智能鎖榮摘兩項桂冠
- 益恩家居:新年新氣象,愛自己從好好睡覺開始
- 元旦伊始:健康新生活,從精格管道直飲水開始
- 喜迎元旦|新年新燈飾 箔晶智能照明讓酒店暖
- 吉美幫的2021 “專精特新” 深耕屋面防水體
- Aqara攜手京東成立燈光設計聯(lián)盟 打造燈飾照
- 年底廚房煥新顏,如何選擇廚電?好太太智能來
- 全鋁家具全屋莫蘭迪色系,這款美式輕奢范贏鄰
- 順趨勢·筑鳳巢·贏未來 鳳梧居門窗2021年會隆