網(wǎng)頁設(shè)計中最基礎(chǔ)的字體排版知識，都在這兒了【內(nèi)附11個最實用的專業(yè)設(shè)計網(wǎng)

時間：2023-10-03 19:12:01 | 來源：網(wǎng)站運營

時間：2023-10-03 19:12:01 來源：網(wǎng)站運營

網(wǎng)頁設(shè)計中最基礎(chǔ)的字體排版知識，都在這兒了【內(nèi)附11個最實用的專業(yè)設(shè)計網(wǎng)站】：隨著互聯(lián)網(wǎng)越來越普及

從事網(wǎng)頁設(shè)計的設(shè)計師也越來越多

對于剛?cè)腴T的新人而言

如何才能保證自己辛苦設(shè)計的網(wǎng)頁

符合網(wǎng)頁設(shè)計的要求呢？

首先對最基本的網(wǎng)頁設(shè)計規(guī)范

要有所認(rèn)知和了解

【字體的選擇】

對于大多數(shù)中國人來說

見過最多的字體應(yīng)該就是黑體和宋體

這兩種字體是設(shè)計的基礎(chǔ)字體

應(yīng)用在生活的各個場景中

宋體

源于書法體

主要特點是橫細(xì)豎粗

筆畫末端帶有三角狀裝飾

字形端莊有力

常運用在文章正文當(dāng)中


黑體

字的主要特點是橫豎均勻

筆畫相對宋體較為粗壯

常用作文章標(biāo)題，突出而醒目




但在2006年Windows發(fā)布Vista系統(tǒng)時

微軟雅黑體就已代替宋體

成為了新的系統(tǒng)默認(rèn)字體

why？


因為宋體是一款襯線字體

受到Windows平臺字體渲染技術(shù)的限制，在小字號字體渲染方面表現(xiàn)略差，部分字號在顯示時會產(chǎn)生鋸齒、模糊，而微軟雅黑是非襯線字體，筆畫豐滿、簡潔，常用字號的顯示效果相比宋體更為優(yōu)秀同時識別度更高。

因此，從Vista時代起

微軟雅黑體就作為Windows的系統(tǒng)默認(rèn)字體

并被沿用至今

常規(guī)、加粗、傾斜字形對比




在網(wǎng)頁設(shè)計中

為了保證有較好的顯示效果

主要標(biāo)題的字體可使用微軟雅黑體

次要標(biāo)題可選用宋體

微軟雅黑體網(wǎng)頁顯示效果







文章的正文可選用宋體

也可使用微軟雅黑體

宋體和微軟雅黑體網(wǎng)頁顯示效果對比




如果網(wǎng)頁設(shè)計需要展示英文字符

那么Arial、Verdana和Tahoma

這幾種系統(tǒng)默認(rèn)字體是比較推薦的

3種系統(tǒng)默認(rèn)英文字體







【字號使用規(guī)范】




網(wǎng)頁設(shè)計中一般選用雙數(shù)字號

字號的大小并沒有明確規(guī)定

但為了確保正常的閱讀效果

可以參考以下參數(shù)

在網(wǎng)頁設(shè)計中最小的字號一般為12像素；
正文常見字號有12像素、14像素和16像素；
標(biāo)題常見字號有18像素、20像素、26像素和30像素。

由于顯示器分辨率的不斷提高

12像素的字號

在大分辨率顯示器中會顯得較小

對用戶閱讀造成一定的困難

因此12像素的字號使用頻率比較低

普遍使用的是14像素或16像素

各個字號下的宋體、微軟雅黑體顯示效果

雖然兩種都是常用字體

但宋體出現(xiàn)的頻率并不高

實際運用得更為廣泛的

是微軟雅黑

因為微軟雅黑在設(shè)計上

比宋體少了一些裝飾性


看起來更顯粗壯有力

辨識度上也更高

尤其是小字號的顯示效果

視覺感更為清晰與明朗




【網(wǎng)頁標(biāo)題如何設(shè)計看起來會比較舒服？】

字體清晰疏闊

字號醒目易讀

例如網(wǎng)易新聞

標(biāo)題樣式一般設(shè)置為微軟雅黑體字體

36像素的字號




騰訊新聞的標(biāo)題樣式

一般設(shè)置為微軟雅黑體字體

26像素的字號







【段落、行間距規(guī)范】

用戶在網(wǎng)站上獲取信息

主要依賴的就是閱讀

因此好的閱讀體驗非常重要




作為信息展示的主體

漂亮的文字排版

巧妙的留白

都能為整個網(wǎng)頁增色不少




文字排版中

段落中“行長”與“對齊方式”的設(shè)置

行長主要指段落文字的寬度，一般行越長，行間距越大，否則用戶在閱讀時很容易串行。在網(wǎng)頁正文中，漢字一般以每行顯示30~40個字為宜，英文一般以每行顯示40~70個字母為宜。

段落對齊方式主要有4種

包括左對齊、右對齊

居中對齊、兩端對齊




國內(nèi)大段文字的設(shè)計

一般是根據(jù)中國用戶的閱讀習(xí)慣

將對齊方式設(shè)置為左對齊

段落中“行間距”的設(shè)置

行間距指段落中行與行之間的距離，作為段落中的留白，行間距讓字與字之間有了可呼吸的空間。過小的行間距會使頁面變得擁擠不堪，增加用戶錯讀的可能性，而過大的行間距則會占用大量的頁面空間，缺乏美感。選擇適當(dāng)?shù)男虚g距不僅可以提升文字的易讀性，也可以最大限度地利用好頁面空間。

傳統(tǒng)中文文檔默認(rèn)行間距一般為1.5倍

在現(xiàn)階段的網(wǎng)頁設(shè)計中

漢字一般使用1.8~2倍的行間距。

不同數(shù)值的中文行間距




英文段落一般選擇1.5倍行間距




【網(wǎng)頁設(shè)計的標(biāo)注規(guī)范】

網(wǎng)頁設(shè)計師與前端開發(fā)人員的對接關(guān)系

往往非常緊密

而設(shè)計圖的標(biāo)準(zhǔn)化標(biāo)注

可以提高前端開發(fā)人員的工作效率




效果圖的標(biāo)注一般包括以下3個部分

頁面中控件的顏色、尺寸、交互效果（如按鈕、表單等）。
字體顏色、字號。
頁面中各個模塊的尺寸和間距。

效果圖標(biāo)注中需特別的4個問題

保證標(biāo)注的文字清晰易讀。
標(biāo)注所使用的顏色應(yīng)與背景色區(qū)分。
標(biāo)注應(yīng)盡量在空白區(qū)域，不要對原圖造成視覺干擾。
標(biāo)注信息應(yīng)條理清楚，同一模塊的標(biāo)注應(yīng)擺放在同一位置，適當(dāng)留有間隙，方便開發(fā)人員閱讀。

某視覺設(shè)計稿的效果圖標(biāo)注





標(biāo)注工具有很多種

MarkMan（馬克鰻）

支持Windows和Mac雙系統(tǒng)操作

界面簡潔，使用簡單易操作

非常適合設(shè)計初學(xué)者使用




MarkMan啟動界面







MarkMan操作界面










【專業(yè)設(shè)計網(wǎng)站推薦】




國內(nèi)網(wǎng)站




站酷（Zcool）

站酷網(wǎng)是一個人氣設(shè)計師互動平臺

聚集中國大量的專業(yè)設(shè)計師

包括平面、網(wǎng)頁以及插畫設(shè)計師等

涉及藝術(shù)創(chuàng)作、交互設(shè)計、影視動漫

時尚文化和廣告創(chuàng)意等領(lǐng)域







花瓣

花瓣網(wǎng)是一個類似Pinterest的網(wǎng)站

為用戶提供簡單的素材采集服務(wù)

幫助用戶將自己喜歡的圖片重新組織和收藏

設(shè)計師可以從中尋找設(shè)計靈感和設(shè)計素材







UI中國

UI中國的前身為 Iconfans

是一個專業(yè)的界面交互設(shè)計平臺

主要為設(shè)計師們提供交流學(xué)習(xí)和作品展示

會員均為職業(yè)UI設(shè)計師，專業(yè)性較強

因此也是UI設(shè)計師人才流動的集散地







Uehtml

Uehtml是優(yōu)藝客

（原韓雪冬網(wǎng)頁設(shè)計工作室）

旗下的設(shè)計師交流平臺

專為網(wǎng)頁設(shè)計和界面設(shè)計而生

擁有較多創(chuàng)意精美的網(wǎng)頁設(shè)計作品







優(yōu)設(shè)
國內(nèi)比較專業(yè)的網(wǎng)頁設(shè)計師交流學(xué)習(xí)平臺

有許多關(guān)于設(shè)計師的職業(yè)理念

和從業(yè)經(jīng)驗的收集與分享

另有好用的設(shè)計小插件可供下載




國外網(wǎng)站


Dribbble

面向創(chuàng)作家、藝術(shù)工作者、設(shè)計師等

是創(chuàng)意類作品分享的平臺

提供作品在線服務(wù)

供網(wǎng)友在線查看已經(jīng)完成的作品

或者正在創(chuàng)作的作品的交流網(wǎng)站







Behance


Behance 是一個設(shè)計社區(qū)

在這里創(chuàng)意設(shè)計人士可以展示自己的作品

欣賞別人分享的創(chuàng)意作品

還可以通過評論、關(guān)注、站內(nèi)短信等方式

與這些設(shè)計師進(jìn)行互動







模板下載網(wǎng)站

Freebiesbug

一個免費PSD資源下載平臺

包括APP設(shè)計、icon設(shè)計

Web展示模板、前端代碼

以及字體等素材資源







PSD REPO

大量精品PSD源文件下載平臺

涵蓋目前設(shè)計主流方向

如icon、移動端設(shè)計、按鈕設(shè)計等

且均可免費下載







365PSD


有付費和免費兩大類資源可供下載

種類繁多，方向劃分較為詳細(xì)

包括建筑、廣告、Logo、動物等




MaterialUp

包含iOS、Android、Web等

平臺的相關(guān)設(shè)計資源

各類素材與當(dāng)下潮流趨勢緊密貼合