關於響應式網頁設計(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

如何在iPhone、iPad使用文鼎字型運用於工作或娛樂

如果有將iPhone或iPad系統更新至16.2以上版本的使用者,會發現多了一個名為「無邊記」的APP。這是APPLE所推出跨 iOS、iPadOS 和 macOS的軟體,協助使用者在個人記事或是團隊合作而設計的白板功能,讓使用者能更方便與他人共用、編輯畫布內容。除了自由畫圖筆記外,關於文字的部分,使用者透過點擊App畫面底部「新增文字」的方式,畫面出現的文字方塊可自由縮放文字的大小,也能更改文字的顏色/字型/尺寸。

我們今天要介紹的是如何透過Fonts Fun-字字不倦、iFontCloud文鼎雲字庫這兩個App,讓使用者可以在「無邊記」上使用到文鼎字型。

Fonts Fun-字字不倦

1.在 App Store上搜尋並下載「Fonts Fun」

2.開啟Fonts Fun App後,您可在Fonts Fun App中預覽文鼎字體,裡面精選了 3個不同特色的方案,您可以依照您的喜好、個人應用需求,訂閱字體包安裝使用。另外也提供了一個免費字體方案包,當中包含了繁\簡體9套字型。

3.以免費字體包為例,在App下方「Aa字體」的頁面中,使用者可以看到9款免費字型,我們以文鼎花草體為例,滑動右方開關,呈現綠色狀態即表示字型已被啟用,且掛載到系統上,可以進行使用。如果想要進一步確認,可以在iOS系統的『設定』>『一般』>『字體』中看到已安裝的字體名稱。

4.接下來就可以在Fonts Fun App或無邊際上使用到已經啟用的字型。


iFontCloud 文鼎雲字庫 (iFontCloud for iOS, iPadOS)
1.App Store上搜尋並下載「iFontCloud 文鼎雲字庫」

2.開啟iFontCloud 文鼎雲字庫 App後,您可在App中預覽文鼎字體,以及同步使用到於iFontCloud租賃服務所訂購的字型產品。使用者可以透過位於App的左上方的「篩選」功能挑選合適的字型產品。

3.以文鼎DC云康行楷為例,滑動右方開關,呈現綠色狀態即表示字型已被啟用,且掛載到系統上,可以進行使用。如果想要進一步確認,可以在iOS系統的『設定』>『一般』>『字體』中看到已安裝的字體名稱。

透過上方簡單的介紹,讓使用者可以理解如何在iPhone、iPad上使用文鼎字型並運用於工作或娛樂上。除了「無邊際」以外,現在從Apple Store下載的App,只要開發者有使用Apple新的Font API進行開發,就可以透過Fonts Fun或iFontCloud for iOS使用到文鼎字型。

Products and Applications

字型名稱New一下

哆啦A夢的前身是小叮噹,高雄的舊名叫打狗,在你我日常周遭也有不少因為時代背景不同,而改變念法,但他們的本質是不變的,都是在陳述同一件事物,文鼎的字型名稱是否也有類似的情形呢?答案是有的,讓我們繼續看下去…。

早期市售的字型,多半是以光碟片實體的方式提供給購買者做使用,但因時代的變遷,很多科技產品販售的方式都改為線上作業,進而取代了以往實體的光碟片安裝。文鼎目前有上千套字型,服務使用者搭配iFontCloud字庫管理工具做使用,但身為資深文鼎老粉的朋友們,是不是在光碟片字型轉換成雲端字庫字型時有著一些疑惑呢,例如:之前使用的”文媛中圓”為什麼在iFontCloud購買的網頁上沒有看到之類的聲音,我們聽到您的聲音了,文鼎在iFontCloud網頁上加強了這一類字型的搜尋,現在只要在搜尋的地方打上早期舊字型名稱的關鍵字或完整名稱,就可以輕鬆地找到現在新對應的字型名稱,使用者可以安心的使用。

舉例:在iFontCloud網站上”字型搜尋”輸入舊字型名稱如:文媛,即可找到相對應的”文鼎圓體”


相對於早期的字型產品,目前對應新字型的內容會有以下變動:

  1. 拉丁符號造型的優化與字間距調整
  2. 瑕疵、錯誤修正

整體而言,文鼎字型產品不會隨著時間的流逝而逐漸凋零,而是與時俱進透過雲端的方式做產品更新以及服務使用者。文鼎也提供了新舊字型名稱對照表,以提供大家在對應上的方便性,煩請點選下方連結下載:新舊字型名稱對照表

Products and Applications

提升可讀性的字距調整

單音、獨體、結構方正的中文漢字,如明體、黑體、圓體等造型,在數位字體設計規格上,無論是應用在印刷或是螢幕顯示,筆畫數少還是多、字重細還是粗,大多將每個漢字字元設計在固定大小的方框內,在使用上,比較少注意到字元間距的排版。

 

我們先前在「定距字型與應用」的文章中題說明過符號/拉丁字具有定距設計(Monospace)與調和設計(Proportional)的設計規格,現在讓我們來看看當漢字與拉丁整合成我們使用的字體產品時,在使用上有沒有需要注意的地方。

 

下圖我們以Adobe 思源黑體與文鼎方新書做為範例,在圖的上方範例,是兩款字體在Illustrator上的排版顯示效果,對於視覺較為敏感的設計師可能會覺得「T」與「y」在字元距離的白空間好像比p, e來的大,下方是經過調整後的結果,整體上,提升了閱讀的舒適度與可讀性,視覺效果舒服多了。

形成「T」與「y」在字元距離白空間的問題,在於大多數中文開發廠商,對於漢字裡的拉丁字,僅對拉丁/符號字元做基本的調和設計(Proportional),缺少對字元做進階的字元間距調整kerning的緣故,以致形成預設的字距對於某些字元組合的不理想,需要手動調整讓所有字元間的空白看起來和諧一致。

 

不過在Adobe軟體上,設計師們可以透過字元面版中「兩個字元之間的特殊字距」功能裡的「視覺」選項,快速的達到類似kerning字元間距調整的效果,主要是Adobe在「視覺」這個功能中,做到可以依據字元的形狀,來調整相鄰字元之間的間距。

目前Adobe CC版本的產品中,設計師常用的PhotoshopIllustratorInDesign在字元面版都支援上述的功能,目前使用這個功能時,漢字與符號/拉丁字元都會起作用,若不希望漢字的字距受到調整,則選取符號/拉丁字元做調整即可,這點需特別留意。

不舒適的字距會讓設計失了分,適當的調整字距有助於閱讀的舒適度與可讀性,不過我們還是要提醒,瞭解所使用字型產品的特性,因應外部環境做最佳化的修正,才能讓字體的這設計元素為設計作品做加分。