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

文鼎中文字體設計流程

中文字體的組成包含漢字與符號,其中符號又可分為拉丁、數字、標符、日文Kana等,以繁體中文Big-5的規格為例,漢字所佔字元數的比例高達94%,如何有一個順暢的字體開發流程,以及高效率的造字系統是一個攸關字體產出效率的重要課題。

所謂萬丈高樓平地起,一款優秀的字體必須建築在前端的造型發想與筆畫設計,目前漢字的開發大多以漢字的最小組成單位「筆畫」來進行字體結構的組成,以「筆畫」為單位的開發方式,具有效率較高、利於修改與維護的優點。

下圖為文鼎的中文字體開發流程,從最左方的設計造型開始,經過筆畫分析、筆畫繪製的前期準備作業後,進行少量的試造字開發,當中評估設計細節、開發製程、技術,通過核可後,就進入穩定但期程最長的大量造字階段了,以繁體中文為例,一款字體在大量造字階段約需9個月的時間來完成,其後就進入字體美感品質與字體工程品質審核的品管字審階段,以上這些關鍵流程,在開發過程中如果有發現需要改善的地方,就會退回到前面階段,進行檢視與評估,確保字體產品在有品質、有計劃、有效率的情境下完成。

流程關鍵點解說:

  1. 筆畫分析
    依字體造型,選擇合適的筆畫代表字進行筆畫的拆解與繪製,完成筆畫分析表,以文鼎UD晶熙黑體為例,繪製680個筆畫即可完成13060個中文漢字的組成。

  2. 大量造字
    此階段主要執行以筆畫組成漢字的作業,透過文鼎字型開發的造字程式,將已經設計好的筆畫置入工作區,透過設計師的美感來進行建構組合。

  3. 品管字審
    字體美感品質_
    這是很重要的工作,通常一套中文字型需要2~5個設計師協作,主設計師(chief designer)就需要監修各個設計師的產出,以確保整套字體的品質。通常這個工作是和大量造字並行,而且會循環多次。
    字體工程品質_
    此為產品化前最後一個階段,目的在確保每個字元筆畫位置、筆畫接筆、外框曲線、控制點數量等沒有瑕疵
  4. 產品化

    將設計好的漢字、拉丁(Latin)及符號整合轉成TrueType/OpenType字型檔,並在WindowsMacOS上的軟體測試,通過測試後由產品經理派發至ifontCloud銷售平台進行上架銷售。

 

Products and Applications

文鼎方新書

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

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

 

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

 

應用設計

Products and Applications

[文鼎 IN-HOUSE]父親節篇-❤感謝爸爸的字體應用海報

 

[ 文鼎 IN-HOUSE ]

結合科技趨勢,文鼎字型全新推出的字體應用專欄
結合人工智慧生成技術圖像(Midjourney)與節慶活動
每期推出不同內容,
並且附上生成程式碼讓創意使用者在面對不同專案下更能得心應手

期待與你共同探索設計的新可能

 

 

本期內容圍繞「端午節」為主題,提供字體應用上的參考


  


/Imagine prompt

A high fashion photoshoot featuring traditional Chinese zongzi, made from dried green bamboo leaves and tied with hemp rope into triangular shapes, containing a salted egg yolk, glutinous rice, and a small piece of preserved pork, on a tea party table with a burnt orange tablecloth. The scene is inspired by a vintage Wes Anderson color palette. The style incorporates schlieren photography and Anne Dewailly's techniques, with soft-focus portraits. The image is hyper-realistic, glamorous, insanely detailed, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0--s 50

 

/Imagine prompt

A detailed and glamorous high fashion photoshoot of zongzi, traditional Chinese pack zongzi, on a table set out for a tea party with a burnt orange tablecloth. The scene is inspired by a vintage Wes Anderson color palette. The style includes schlieren photography and Anne Dewailly's work, with soft-focus portraits. The image is hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

/Imagine prompt

A detailed and glamorous high fashion photoshoot of zongzi, traditional Chinese pack zongzi, on a table set out for a tea party with a burnt orange tablecloth. The scene is inspired by a vintage Wes Anderson color palette. The style includes schlieren photography and Anne Dewailly's work, with soft-focus portraits. The image is hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. -ar 2:3 --v 6.0 --s 50

 

/Imagine prompt

A detailed and glamorous high fashion photoshoot of zongzi, traditional Chinese zongzi made from dried green bamboo leaves and tied with hemp rope into triangular shapes,on a table set out for a tea party with a burnt orange tablecloth. The scene is inspired by a vintage Wes Anderson color palette. The style includes schlieren photography and Anne Dewailly's work, with soft-focus portraits. The image is hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

 

/Imagine prompt

Glamorous high fashion photoshoot of traditional Chinese zongzi, made from dried green bamboo leaves, tied with hemp rope, containing salted egg yolk, glutinous rice, and preserved pork. Set on a table with a Tiffany blue tablecloth for a tea party. Inspired by Wes Anderson's vintage color palette, with schlieren photography and Anne Dewailly's work. Soft-focus portraits, hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

 

/Imagine prompt

A detailed and glamorous high fashion photoshoot of traditional Chinese zongzi, made from dried green bamboo leaves and tied with hemp rope into triangular shapes, containing a salted egg yolk, glutinous rice, and a small piece of preserved pork, on a table set out for a tea party with a Tiffany blue tablecloth. The scene is inspired by a vintage Wes Anderson color palette. The style includes schlieren photography and Anne Dewailly's work, with soft-focus portraits. The image is hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

 

/Imagine prompt

Detailed high fashion photoshoot of traditional Chinese zongzi, wrapped in dried green bamboo leaves and tied with hemp rope, containing salted egg yolk, glutinous rice, and preserved pork. Displayed on a tea party table with a Tiffany blue tablecloth. Inspired by vintage Wes Anderson color palette, using schlieren photography and Anne Dewailly's work. Soft-focus portraits, hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

 

/Imagine prompt

Detailed high fashion photoshoot of traditional Chinese zongzi, wrapped in dried green bamboo leaves and tied with hemp rope, containing salted egg yolk, glutinous rice, and preserved pork. Displayed on a tea party table with a Tiffany blue tablecloth. Inspired by vintage Wes Anderson color palette, using schlieren photography and Anne Dewailly's work. Soft-focus portraits, hyper-realistic, 32k resolution, front view. Symmetry, raw, vogue. --ar 2:3 --v 6.0 --s 50

 

/Imagine prompt

Detailed product photography of a large green square box with 28 embedded small square boxes, floating on water with a mirror-like texture and a layer of fog. Background includes a green wall, slight water lines, and bamboo stands for spatial depth. Naturally bright lighting. Features traditional Chinese zongzi, wrapped in bamboo leaves and hemp rope, triangular shape. Canon camera, epic details, high precision, ultra high definition extreme detail texture 8K. --ar 2:3 --v 6.0 --s 50

 

/Imagine prompt

Product photography featuring a large green square box with 28 small square boxes inside, placed on water with a mirror texture and fog layer. The background has a green wall, slight water lines, and bamboo stands. Naturally bright, rich light, central composition. Traditional Chinese zongzi, wrapped with hemp rope and bamboo leaves in a triangular shape. Shot with a Canon camera, epic details, high precision, ultra high definition extreme detail texture 8K. --ar 2:3 --v 6.0 --s 50

 

 

下一期
你希望我們做什麼內容,歡迎告訴我們