常規or創意?別讓網頁中的文字禁錮了你

發表於2015-11-30

先和大家分享兩個關於網頁的中文文字設計現象。

現象1:

公司前端技術同事看到我上週寫的《好的字型讓你的網站“傾國傾城”》後,主動和我聊了排版網站文字的各種心得體會,他提到的一個現象讓人很意外:除了設計師、前端技術、策劃、排版印刷等職位的人員對文字有一定的敏感度外,實際上大多數使用者對文字的字型和字號沒什麼概念。

他說的沒概念是指,雖然使用者對正在瀏覽的網頁有一個大致印象,可以說說自己對網站的直觀感受,比如網站好不好看、風格是否吸引人等。但他們並不是很在意這個網頁使用的是什麼字型,甚至不知道造成視覺疲勞的罪魁禍首可能正在於一個字號的“小小”選擇。

現象2:

經常聽到設計師們抱怨網頁設計中可供選擇的中文字型太少,創意字型即使設計出來也沒法實現,或者實現成本太大,大大限制了他們創意的發揮。我們也看到很多設計教程都建議設計師們不要在中文字型上做太多創意。

這種現象也是AnyForWeb上一篇文章中設計師的問題:為什麼國外網站字型做出來的效果那麼好看,但我們在設計網頁時總覺得無法達到那種效果?

先從視覺角度說明:我們能很明顯看出,英文是線條結構,中文是方形結構。從構圖設計的角度看,英文字母比中文更具有幾何符號的感覺,圖形感會更豐富;從字形的角度看,英文采用的拉丁字母包括大小寫一共52個,而且字形都比較簡單,符號數量少便於識別,字形簡潔便於設計,而中文的筆畫很多過於密集,不利於字型設計。

然後我們再瞭解以下事實:

使用者的操作系統中自帶的字型有限,若使用創意字型,開啟網頁前還需要下載,通常英文字型只有幾百KB,因為它只需要包含數字、標點、英文字母即可。而中文字元檔案龐大,動輒數個MB,甚至十幾MB,下載時間一般比較長,往往導致網站開啟速度慢,可能特殊字型還沒看到,使用者已經關閉網頁了。

網頁設計 網站排版 網站策劃 網站版式設計

從以上真實情況可以瞭解,其實我們不必糾結於網站的字型設計無法發揮創意,因為使用者在意的不僅僅是字型設計的創意,而是網站整體給人的感受,因此AnyForWeb認為:設計師對文字的創意可以透過其他方向的發揮來讓使用者對你的網頁設計印象深刻。比如,保證網頁整體文字設計的規範性、增加修飾文欄位落的創意,以及對少量特殊字型的靈活應用。

一、如何保證網頁整體文字設計的規範性?

> 網頁設計規範:字型選擇

在選擇字型上,AnyForWeb建議設計師們儘量選擇系統預設的或通用字型,保證瀏覽器能夠正確識別並顯示出正常的文字。

我們以宋體和微軟雅黑為例:

1.宋體

宋體是最常見的中文字型,在沒有指定字型的情況下,瀏覽器往往選擇它來渲染。但很多人認為這種字型並不美觀。

NoNoNo,並不是這樣!舉個例子,在下面AnyForWeb網站的案例中,右側對客戶案例的描述文字正文內容就是採用的宋體12px,配上18px的微軟雅黑標題,層次清晰,讓人一目瞭然,同時展現的美觀度絲毫不弱。

網頁設計 網站排版 網站策劃 網站版式設計

2.微軟雅黑

微軟雅黑可以作為網站首選字型,它的美觀度和清晰度都較好。

在優度旅遊網站中,網站首頁採用了Metro風格,整站使用微軟雅黑字型,在不同板塊靈活應用了不同的字號,文字層次很清晰。下圖中文字與卡片式設計風格融合在一起,讓整個網站顯得乾淨大方,富有親和力。

網頁設計 網站排版 網站策劃 網站版式設計

這裡有個小提示:微軟雅黑字型可以用font-family寫在頁面,但在網站圖片裡面嵌入微軟雅黑的字型會構成侵權,這一點是設計師們需要注意的。

我們再來說說宋體和微軟雅黑的一些區別。

宋體是襯線字型,微軟雅黑是無襯線字型,宋體在視覺上更纖細。和宋體相比,微軟雅黑的字形不是正方形的,而是稍微的扁寬,字間距很小,這樣會使預設的行間距更明晰,同時微軟雅黑的字心顯得更飽滿。所以在同樣的字號下,雅黑的單字面積顯得更大,更容易識別。

標題字型使用微軟雅黑更適合,正文內容可以根據設計風格和需求靈活選擇。不過在手機端檢視時,我們很明顯感覺到微軟雅黑字型更賞心悅目。

除宋體和微軟雅黑字型之外,設計師們還可以根據實際需要選擇其他經典通用字型,比如Windows自帶的中文字型黑體、仿宋、楷體等,以及英文字型Arial、Vardana等等。

> 網頁設計規範:字號選擇

CSS裡面常用描述字型大小的單位主要是em和px。其中em在跨平臺裝置字型處理上很有優勢,在常規網頁設計中,我們通常更多采用px作為單位。

這裡以px為例,網頁設計中一般使用14px 作為標準字型,16px 作為中等字型,18px 作為較大字型,12px 作為偏小字型。當然,我們這裡說的只是一種比較通用的標準,實際上如何選擇字號需要設計師根據網頁整體設計佈局來確定。

在頁面自適應的裝置上,比如手機螢幕解析度比PC端的低,這些因素也是設計師需要考慮的。

> 網頁設計規範:文字設計的規範性

大家應該記得一點:雖然我們看到很多網站頁面的分享,但這些頁面都是屬於不同網站的,而使用者關注的是一個網站的整體。所以對於設計師來說,他們在設計網頁時應該考慮所有頁面規範和一致性。

初級設計師比較容易犯一些細節錯誤,比如同一層級下的不同頁面出現字型不一樣,字號不統一,字間距不一致的情況等等。

如果想成為一個專業設計師,這些問題都是需要透過規範設計來避免的。

相關文章