關於響應式網頁設計(RWD)

2019-04-18 17:12:48.21

分類: Products and Applications

RWD淺談

先前我們在介紹Web Font時曾經提過:「RWD網頁可以針對不同的載具選擇不同粗細的字型,讓小螢幕上顯示的字不會糊成一團」,除了道出了Web Font的優點,也點出了一個好的RWD網站,應該要將載具適合的字級大小考慮進去,而今天我們就繼續介紹,什麼是RWD(Responsive Web Design)式的網頁。

根據Google Developers對於RWD的介紹中解釋:「任何解析度的裝置,伺服器傳的都是同一份的HTML,透過CSS來判定裝置的解析度後,生成適合該裝置大小的畫面顯示。」,因此一個網站可以用電腦、平板、手機來瀏覽,且都會得到最適合的畫面與內容。

任何解析度的裝置,伺服器傳的都是同一份的HTML。

 

早在RWD概念盛行前,就已經有許多購物與行動網站注意到,根據電腦螢幕所顯示的內容架構,可能不適合在手機上,因此他們購買了第二個網域,建立專給手機的頁面,以COSTCO網站為例,如果你看到的網域包含了特殊的前贅字(http://m.costco.com),可能就是這樣的方式。但早先HTML與CSS並未發展到目前的階段,因此這樣形式的網頁多採WML(Wireless Makeup Language)語法所編寫,然而該語法是以XML為基礎,有點類似簡易版的HTML,因此在許多功能的撰寫上都會受限。

在智慧型手機流行後,各家瀏覽器廠商如Chrome, Firefox, Safari, Opera等,也都有針對手機版本所開發的瀏覽器,這時,開始有了以偵測瀏覽器是哪種版本來決定對應內容的方式,而這種方式由於各廠商與各版本間有太多不同的組合,因此在會需要針對許多的版本做設定,甚至要定義不同的手機解析度就是個大議題。

因此在HTML5和CSS3出現之後,許多可以自動偵測螢幕大小與根據大小調整內容比例的語法,就成為了RWD概念的核心技術:簡單的說就是取得裝置的螢幕大小,設定每個標籤的內容該出現的比例與位置。這樣的方式,讓網站工程師只需要針對一個網站開發,就可以讓拜訪者(Visitor)根據其裝置得到最佳的畫面呈現,除了畫面美觀外也更有效的吸收網站資訊,因此成為了近年來製作網頁的熱門詞彙。

HTML5和CSS3是RWD概念的核心技術。

 


Products and Applications

字體與外部環境改變的交互調整

 

80年代開始的電腦數位字體,在特性上,相較於鉛字,有更容易開發多字重字體家族的特性,但是,在物理限制上,同一個字重若要使用在不同字號大小上,排版出來的顯示效果就需要設計師稍微的留意一下字元間灰度的一致性。

 

我們一直提到字體的使用與外部環境、載體有著絕對的關係,時間拉回到活版印刷鉛字的時代,初接觸活版印刷鉛字的朋友,看到鉛字的規格有著初號、一號、二號、三號、四號、五號、六號等規格,一時間除了看到鉛字大小的差異外,並不理解當中的用途以及鉛字的設計。

 

概略來說,在鉛字印刷的時代,鉛字的設計在同一個造型不同字號的大小上,字元設計的結構佈局具有細微的差異,這可算是近來optical size(視覺大小最佳化)概念的前身了,簡單來說,就是為了讓不同字號的字體可以有最佳的呈現,如:不同的應用情境、更清晰的顯示或具有個性…而做的細微調整設計,以達到文字最佳的顯示效果。

 

傳統上,字體由細到粗的字重變化是字體這個素材在應用時最常用到的屬性,但隨著科技持續的研發創新,字體使用的載體早已不限於紙張材質的媒介,更透過不同印刷方式、油墨特性呈現多元的樣貌,甚至在螢幕上的使用,也進化到肉眼分辨不出螢幕畫素的是網膜等級。

 

我們整理幾個字體應用在外部環境比較常受到影響的因子:

1.     光線明、暗

2.     直射光、反射光

3.     載體的不同:紙本、數位螢幕、紙張材質、螢幕解析度

4.     數位螢幕:白底黑字、黑底白字

 

 

電腦數位字體相較於鉛字印刷時代,在載體、使用環境上都複雜許多,以下,我們舉幾個例子來看看,在不同的情境上,遇到漢字筆畫數差異高的字元並列時,不加思索的直接使用字體,以及瞭解字體規格與特性後,微調後的排版效果,希望透過比較後,讓使用者更加的體認到字體使用上細膩、獨到之處。

 

範例一,文鼎毛楷、文鼎顏楷

文鼎毛楷是一款擁有Bold、Extrabold、Heavy三個字重的書法字體,簡潔有勁的筆型線條變化及長形字構設計,呈現秀麗的書法的風格,適合於小標題、大標題使用。

 

下圖白底黑字為反射光用字情境,黑底白字為直射光用字情境

在左上區塊,我們可以看到「蝦」這個字元的灰度弱於其他兩字,這時候,如果我們將「蝦」單獨這個字元的字重換成Heavy(右上區塊),視覺上,三個字元的灰度是不是就平衡了許多呢?

 

 

左下區塊黑底白字為類似廣告燈箱的直射光用字情境,這時候我們看字的光線會從背板直接射入我們的眼球,筆畫多的字,散發出來的光線量會比較多,因此適當的將筆畫多的字元粗度減細,可以降低視覺上光暈的現象發生,進一步的提升閱讀的舒適度。

同樣的,下方文鼎顏楷的使用也類似文鼎毛楷的原理,由此,我們可以知道,瞭解一款字體的特性、觀察不同的用字情境,適當的選用、挑選是必要的。

 

範例二,文鼎方新書

文鼎方新書是一款保留著黑體的簡練、穩重,也融合著明體的舒適、清雅的一款字體。這個使用情境無論是上方的白底黑字或下方的黑底白字,都是模擬廣告燈箱的直射光用字情境,與範例一不同。

 

範例一我們透過對字元進行字重的挑選,達到視覺上字元灰度的平衡,而方新書這個範例情情境,則是挑選已經預設好的字體設定來使用。當用字的載體環境都相同時(直射光),變數在於淺色底及深色底,我們會建議淺色底使用標準版的「文鼎方新書H7C95_H」,而深色底我們會建議使用有對漢字筆畫數較多的字元進行筆畫減細的「文鼎方新書H7C95D_H」,追求的都是降低視覺上光暈的現象發生,進一步的提升閱讀的舒適度。

 

 

 

不同變數下使用不同規格、不同設定的字體,甚至是加以細節的微調,如字元間距、字元高度等,以達到最佳的視覺效果,這是我們在本篇文章希望讀者可以學習到的地方。

 

Products and Applications

文鼎方新書

文鼎方新書立於黑體,保留黑體的簡練、穩重,融合明體的舒適、清雅,並以高規格審視標題用字之識別性、內文用字易讀性,期望帶給使用者最佳的使用體驗。文鼎方新書造型設計捨棄明體傳統點、捺造型,收筆如眉,清新盈盈,兼容字構的均衡平穩。

因橫直筆寬度的搭配及收筆縮減,文鼎方新書融合黑體和明體的優點,加上反覆雕琢視覺濃淡,排版視覺清晰不突兀。拓展Condensed 系列後,使方新書在排版的表現更為出色,提供使用者多元選擇。

 

本影片透過Adobe Illustrator來呈現方新書的使用方式,分別演示中文常用全型符號調和設計(Proportional)、長體Condensed家族、經過字元灰度調整後的方新書,使用在桃園機場第三航廈的介紹以及方新書的可變式字體(Variable Font)。

 

應用設計

Products and Applications

文鼎DC黃陽尖魏

文鼎DC黃陽尖魏體是知名書法家_黃智陽教授,與文鼎合作開發的真跡書法字型;黃陽的字體是書法的專業技術與現代造形特質的新媒合,長時間逐字用心書寫與設計,使尖魏體突顯了瘦金體的利落美,結合了魏碑體的方折感,使字體的使用更具有文化意義與時尚氛圍!黃陽尖魏在設計時,加入中文排版裡「疊字」效果的巧思,黃智陽教授在書寫時,特意創作「相同字的不同寫法」,以展現書法中「不雷同」「不重複」的美感,讓黃陽尖魏更能呈現書法藝術的美感。

 

本影片透過Adobe Illustrator來呈現云康行楷TrueType(TTF)與OpenType(OTF)兩個字型格式的使用方式,分別演示疊字的選用、兩款拉丁字的造型設計,以及中文常用全型符號調和設計(Proportional)。

應用設計