前端工程師與RWD大小事(1)-RWD網頁與傳統的到底差在哪?

前端工程師愛用的RWD網頁,你知道它跟傳統網頁差別在哪嗎?

在智慧型手機等行動上網的裝置普及以前,早期的前端工程師網頁設計師在做網站時都比較輕鬆。因為網站只需適應一種規格,在製作程序上對比今日的 RWD 網站顯得比較單純。製作程序差異如下:

傳統網站與RWD網站的設計流程差異.jpg

從上圖可以得知,前端工程師在開發 RWD 網站時,假設要符合不同裝置 (就是電腦、手機與平板等) 的網頁需求,就需要開發出 4-5 種版面,無論是在設計、或是撰寫程式上都比較費時且難以銜接。因此在流程的前半段,必須要規劃 Media Query 的尺寸斷點再去進行網頁設計、應用UI程式撰寫,再根據不同的尺寸斷點進行反覆測試、調整與修正。

在著手各種載具版面的網頁設計前,應先根據與客戶討論後的結果,粗略進行各種載具的網頁框架規劃 (Wireframe)。Wireframe 是低保真度的設計原型,是在除去所有視覺設計細節 (如色彩、字型等) 之下,進行頁面架構、功能與內容的規劃,藉此更能集中地檢視整個介面流程和架構,方便與客戶溝通想法。

網頁框架規劃 (Wireframe) 是運用文字線條、方塊,把每個區塊所要呈現的內容表現出來。盡可能減少設計元素,藉以突顯網頁所呈現的介面、動線流程與階層,確認使用者體驗如何。有時為了在視覺上清除區隔不同區域,可以使用灰階色塊作補助。下圖為個人網站的 Wireframe 網頁框架範例。

Wireframe網頁框架規範-以個人網站為例.jpg

本篇為「前端工程師必懂RWD概念」三部曲第一篇,全系列目錄如下:

(目錄)

  1. RWD網頁與傳統網頁設計的差異
  2. 內容優先的「優雅降級」與「漸進增強」
  3. 行動載具的設計考量

 

 

推薦閱讀:

前端工程師與RWD大小事(2)-何謂"優雅降級"及"漸進增強"?


想要成為專業前端工程師,技能你都備齊了嗎?


前端工程師跟後端工程師到底誰比較優?看完以下分析就懂了...


網路行銷課程告訴你什麼才是人人喜愛的好文章!!


從充滿不確定到監控水中的即時狀態,人工智慧推翻傳產的舊型態!


網路行銷課程越來越進階!現在人人都有一個3D虛擬的自己!


美國NASDAQ上市公司、外商IT教育培訓企業

 

arrow
arrow

    jimchen19901212 發表在 痞客邦 留言(0) 人氣()