最新消息 News

不好意思,但網頁排版哪裡重要?

2017-02-22

簡單來說,網頁排版,或者螢幕排版的重要性在於讓內容更好讀,就這麼簡單。

時下有關數位環境的教科書說,螢幕的使用習慣以瀏覽為主,而且圖片比文字更吸引人,主要以娛樂或儀式性使用為主(例如,打開 Facebook 開始一天的生活,但關掉後立刻忘記剛剛看了什麼),而不適合吸收完整的知識。攝取更全面、完整的知識,還是要靠紙本。沒錯,這是螢幕顯示時代我們不願面對的真相:基於某些原因,我們很難有意願在螢幕上好好的讀一篇文章。

為什麼?有很多大小原因,但最主要的恐怕還是因為傷眼。螢幕太亮對眼睛不好,大多時候是硬體的問題,但讓這問題更嚴重的因素則是出在軟體:不妨問問自己,有多少平常會逛的網頁、部落格的文章閱讀起來是跟紙本一樣舒服的?以網頁為例,有許多網頁的設計忽略了某些重要的平面設計原則,例如適當的字體大小、字型選擇、文字與背景的對比,以及行距。介面設計大師 Oliver Reichenstein 早在 2006 年就提出了,網頁上95%的內容其實都是「typography」,試圖與大家解釋「印刷時代」的排版原則為何在「螢幕顯示時代」還是同樣重要,同樣應該被使用。

許多人驚訝的問:「蛤?typography?字型學?那不就只是選好看的字而已嗎?網頁設計怎麼會95%都在選字型?」

typography 不只是選字型

但事實上 typography 不只是選字型,還包括字型的組合,更有關於精確的測量:行高、區塊之間的距離關係,以及整體垂直排版的韻律感(vertical rhythm)等等,都是傳統排版的重點,因為斤斤計較幾個 pt(最小的印刷單位)的相對關係,所以可說個相當偏執,相當要求完美的領域(記得Steve Jobs怎麼養成偏執狂的嗎?),目的就是為了讓內容本身完美的在媒介上呈現給讀者。Reichenstein 在他的文章中提出,這些原則在網頁上也同樣要被注重,我們才可以不再只是瀏覽,而可以長時間閱讀而不感到疲累,只是過去有兩個迷思:

迷思一:螢幕解析度不夠,所以用字型也是枉然

當然,這個在 2006 年提出的說法到現在已經不攻自破了。視網膜螢幕(Retina Display)在 iPhone 4 的像素密度已經來到驚人的 326dpi,可以說是超越了印刷紙本的起始水準,包含各種顯示面板解析度的躍進,字型的顯示效果可以說是越來越好了。在中文來說,雖然有許多字型還需要經過數位調校,才會讓螢幕顯示效果更好,但至少目前我們已經有了信黑體。相信有視網膜螢幕的朋友看這篇文章時,可以感受到接近完美的視覺效果,連紙本都沒有如此好看。再加上越來越多的 web font 服務--連中文都有了 justfont,都讓從前只能放圖代替文字的困境解決了。

迷思二:還沒有那麼多 web font 可以用啊……

這個部分在中文世界的確還是如此。中文不但檔案大、製作遠比拉丁字母費時費工(博大精深的中文字至少有一萬三千個常用字,英文大小寫字母加上符號最多不過上百),再加上傳統字型公司有許多的版權議題爭議,都讓中文的 web font 進展緩慢。但跟上一點一樣,typography 不是只有選字型。就算沒有好字型,也可以用心在排版細節上。Reichenstein 就提到,文藝復興的義大利字體設計師當時只能用一種活字,但還是造就了人類文化史上最出色的印刷作品。這就足以告訴我們即便中文 web font 不多,我們還是可以透過對細節的注重創造好的排版設計。

 
文藝復興的排版,只有一種字體,依然經典。(圖片來源:Wikimedia Commons)

另外在台灣 justfont 也常常會聽到朋友們說,這種偏執的細節,一般人應該不會注意到吧?但事實上,就是這種偏執的細節,讓整體版面更好讀,好讀到不會特別注意,因為能夠非常專注在內容上。可惜目前實在有太多網頁設計的排版是對眼睛不好的,例如設計不良的字體曲線控制點不乾淨,容易造成小亮點,讓眼睛增加負擔;筆畫沒有適當收束,讓線條糊在一起;許多網頁甚至把字體大小設定為 10px,再加上過擠的行距、不理想的背景對比,讓螢幕上的閱讀更讓人洩氣。

justfont 相信我們需要引進更多平面設計的排版知識到網路上。再搭配越來越強大的 CSS 功能與各種設計模組以及 web font 服務,相信有天我們也能在螢幕上讀到賞心悅目的內容。我們也會繼續在 blog 上分享相關知識,歡迎訂閱 justfont blog!

 

文章來源:http://www.inside.com.tw/2012/09/06/does-typography-matter

 

Google 行動裝置相容性測試檢測
網址:https://www.google.com/webmasters/tools/mobile-friendly/

 
 
蘋果所規劃 網頁設計  http://www.cc-design.com.tw/ 完全符合 google認證


 
更多案例
 
online_tw6.gif

Top