標籤: 網頁設計師

專屬前端工程師的RWD概念文章最後一篇要來和大家分享RWD網頁需要注意哪些事~

行動載具特性

圖上方為傳統以桌機為主設計模式；下方為「行動裝置優先 (Mobile First)」模式

手機、平板等行動設備在操作上與電腦差異很大，電腦以滑鼠操作為主、行動設備則是以觸控螢幕為主。因此，兩者的網頁開發在互動設計上也有所不同。

行動載具的基本特徵有：可單指或多指操控的多點觸控、多種手勢（如搖一搖、滑動等）以及文字虛擬鍵盤。

除了上述與電腦差異很大的特徵外，在視覺呈現上也與電腦差很大，前端工程師與網頁設計師需注意的事項如下：

按鈕大小：
電腦因為是用滑鼠操控，所以無論按鈕多小，滑鼠一樣點的到。但是行動裝置是以觸控為主，按鈕太小會增加點擊難度。因此蘋果電腦公司建議 iOS 開發者，任何需要被觸控的 UI (使用者介面) 元件，都不能小於 44*44px。

超連結大小：
除了上述的按鈕之外，也會有文字的超連結內容。同理，也不能讓帶有超連結的文字太小，以利於手指點擊。

UI 設計：
UI 設計必須考量到行動載具的畫面尺寸，因此像按鈕等需要被觸控的 UI (使用者介面) 元件，都需要在畫面中容易被點擊的地方。

點擊效果：
在按鈕效果的開發上，有時滑鼠除了點擊與放開的指令外，還會有滑來滑去的特效。但是行動版裝置是使用手指直接觸控的，所以就不需要此種特效強調。

互動效果：
電腦與行動裝置的運算效能畢竟不一樣。所以有一些在電腦版網頁運行的很順暢的特效 (如 Slide 幻燈片、Carousel 等) 在行動裝置上未必能流暢顯示。所以在設計　RWD 網頁時，要考量到不同設備的效能。

行動裝置優先 (Mobile First) 概念

行動裝置優先 (Mobile First) 是由知名的設計師與 UI規劃師 Luke Wroblewski 提出的，他曾當過美國 yahoo 架構設計負責人，他在2010年的時候進行了一次簡報，標題就是 Mobile First（原始簡報與影片)，是指設計網站時，應該以行動裝置的介面、互動、顯示等為主要考量，其他的裝置次之，有別於過去設計網站時「以桌上型電腦為主，再將電腦網站上的內容移植到行動裝置上」的模式。

現在越來越多的人使用行動裝置上網，根據美國最大電信業者 AT&T 的數據，手機流量在 3 年內成長了 50 倍，目前行動裝置上網的使用率仍在激增當中，而且還有更多的功能持續被開發出來。

相較於傳統的電腦，行動裝置的使用較不受到時間空間限制，無論是在捷運、廁所等都可使用，人們也花了不少零碎時間使用手機上網，因此瀏覽網頁的頻率跟電腦比起來有過之無不及，所以 Google、Facebook、Adobe 等大公司都開始以「行動優先」的概念來設計自己的產品。

那「行動優先」要如何套用到網頁設計上？一開始先針對行動裝置的小畫面來設計版面、填入最重要的內容，然後再以這些基本內容都存在的狀況下，針對較大的螢幕裝置 (如平板、進而電腦、電視螢幕等) 漸進式的擴展其佈局。這樣一來，網頁在行動裝置呈現的介面會非常好瀏覽且美觀，該有的功能、內容都有，並且由小畫面擴大至大畫面，內容更大、可擺放的元素就越多、限制也越少 (參見「漸進增強（Progressive Enhancement）」)。但是如果是從大畫面開始設計，當要轉換成小畫面時，其內容的擺放就會越來越困難，常常需要透過刪減內容，才能「塞」入較小的版面當中。這樣一來，有可能行動裝置上出現的是精簡過「簡陋卻可用 (poor but passable)」的內容，而無法給使用者完整的內容 (參見「優雅降級（Graceful Degradation）」)。

若要建立良好的行動裝置使用者體驗 (UX)，應考慮以下幾點：

• 使用者使用行動載具的習慣、方式及思考模式
• 提供明確精要的內容，比完整的導覽功能更重要
• 提供清楚且好觸控的導覽選單
• 簡潔明確的頁面內容
• 符合行動載具操作特性

現在大多數的 RWD 響應式網站，都是採用行動裝置優先 (Mobile First) 概念來設計，範例如下：

Youtube網站

就算是在手機上，也可以很方便的點閱影片、撥放、暫停，甚至對影片作評論、按讚！

Airbnb網站

選單的按鈕設計的大小適中，使用者用手機就可以輕易地透過選單找到目標住處，並且藉由滑動的行為瀏覽屋況，並按下預訂按鍵！

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

前端工程師一定要學的優雅降級和漸進加強你知道是甚麼嗎? 還不知道的快學起來吧!!

當代的前端工程師與網頁設計師在開發網站時都選擇 RWD 網站，在規劃其 Media Query 的尺寸斷點時，有兩種布局斷點的依據：「根據設備」以及「以內容為主」，介紹如下：

1.根據時下的主流設備來佈局斷點 (設備優先)

透過時下主流的設備 (如當代最熱門的手機、平板或電腦螢幕等) 來確定布局的斷點，而設計多套樣式，再分別對應到各種設備上，如此就可準確定位斷點。這種套用現成的設備尺寸隨然方便，又能精準對應到時下最普及的設備，但是隨著設備不斷汰舊換新，未來總會有無法合適對應到的設備。

2.根據網頁內容作為佈局斷點的標準 (內容優先)

這種方式不是以設備為主；而是依據網頁內容的布局、段落等來下斷點，是真正符合 RWD 響應式網站 設計的初衷的方式。此種方式可讓網頁涵蓋所有設備、且閱讀容易，但是斷點會依據設備的不同而落在不同的地方，這樣就沒有標準、精準的設計模式。

在內容優先的策略中，前段工程師與設計師要讓網站盡可能兼容所有設備：因為我們不知道用戶會用什麼樣的設備來訪問網站，因此，我們必須盡可能地把所有狀況都考慮進來；所有的佈局、元件、區塊和UI,UX設計等都能兼容不同類型的設備和平台。有「優雅降級（Graceful Degradation）」以及「漸進增強（Progressive Enhancement）」兩種思維模式，可以套在「內容優先」為主的 RWD 響應式網站 設計的過程：

「優雅降級」還是「漸進增強」?

圖上方為「優雅降級（Graceful Degradation）」的網頁設計模式；下方為「漸進增強（Progressive Enhancement）」模式

1. 優雅降級（Graceful Degradation）

一開始就針對「功能最完整」的平台來設計、開發網站，完成所有的功能和體驗後，再針對無法支援所有功能的平台或環境本來修改、刪減功能或是其他的解決方案，以確保網站能在最新、最完整的平台上完美呈現，擁有「最好的使用者體驗」；而在較舊的或是功能限制較多的的平台上，仍然可使用最重要的功能，整體介面「簡陋卻可用 (poor but passable)」，而不是無法使用。

2. 漸進增強（Progressive Enhancement）

這個方式與「優雅降級（Graceful Degradation）」的方式相反，是先針對最不完整或是限制最多的平台上創建最重要的基本內容，用最精簡的方式呈現；然後以這些基本內容都存在的狀況下，開始慢慢擴展其佈局，隨著平台的限制越來越少，內容的完整度也越來越高。這也是「行動裝置優先 (Mobile First) 」的設計方式。我們在下一篇會提到什麼是「行動裝置優先 (Mobile First) 」。

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

其他閱讀

專屬前端工程師RWD概念(一):RWD網站和傳統網站哪裡不同?

專屬前端工程師RWD概念(三):設計以行動設備為主

前端工程師的專屬小課:如何在HTML和CSS中宣告顏色代碼

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!

想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!

中國IT教育領導品牌　達內教育集團第一家海外授權中心

RWD網站概念前端工程師都會了嗎? 今天要來和大家談談RWD網站和傳統網站在設計上哪裡不一樣~

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

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

(相關文章：Media Query使用方法、Media Query中的視窗與頁面尺寸媒體特性一覽表)。

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

(相關文章：與前端溝通更順利！從了解整體網站的規劃流程開始)。

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

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

其他閱讀

專屬前端工程師RWD概念(二):什麼是優雅降級和漸進加強?

專屬前端工程師RWD概念(三):設計以行動設備為主

前端工程師的專屬小課:如何在HTML和CSS中宣告顏色代碼

最真實的達內教育評價告訴你如何從非本科生蛻變成Java工程師!!

著名企業皆投入AI領域,快報名Python課程幫自己在未來卡位吧!!

想學程式語言還只是在爬文? 別管網路上的達內教育評價了!! 親身體驗最準!!

中國IT教育領導品牌　達內教育集團第一家海外授權中心

前端工程師們知道RWD網頁的基本宗旨是甚麼嗎? 就是以行動裝置使用為優先考量~下面告訴你為甚麼~

行動載具特性

圖上方為傳統以桌機為主設計模式；下方為「行動裝置優先 (Mobile First)」模式

手機、平板等行動設備在操作上與電腦差異很大，電腦以滑鼠操作為主、行動設備則是以觸控螢幕為主。因此，兩者的網頁開發在互動設計上也有所不同。

行動載具的基本特徵有：可單指或多指操控的多點觸控、多種手勢（如搖一搖、滑動等）以及文字虛擬鍵盤。

除了上述與電腦差異很大的特徵外，在視覺呈現上也與電腦差很大，前端工程師與網頁設計師需注意的事項如下：

按鈕大小：
電腦因為是用滑鼠操控，所以無論按鈕多小，滑鼠一樣點的到。但是行動裝置是以觸控為主，按鈕太小會增加點擊難度。因此蘋果電腦公司建議 iOS 開發者，任何需要被觸控的 UI (使用者介面) 元件，都不能小於 44*44px。

超連結大小：
除了上述的按鈕之外，也會有文字的超連結內容。同理，也不能讓帶有超連結的文字太小，以利於手指點擊。

UI 設計：
UI 設計必須考量到行動載具的畫面尺寸，因此像按鈕等需要被觸控的 UI (使用者介面) 元件，都需要在畫面中容易被點擊的地方。

點擊效果：
在按鈕效果的開發上，有時滑鼠除了點擊與放開的指令外，還會有滑來滑去的特效。但是行動版裝置是使用手指直接觸控的，所以就不需要此種特效強調。

互動效果：
電腦與行動裝置的運算效能畢竟不一樣。所以有一些在電腦版網頁運行的很順暢的特效 (如 Slide 幻燈片、Carousel 等) 在行動裝置上未必能流暢顯示。所以在設計　RWD 網頁時，要考量到不同設備的效能。

行動裝置優先 (Mobile First) 概念

行動裝置優先 (Mobile First) 是由知名的設計師與 UI規劃師 Luke Wroblewski 提出的，他曾當過美國 yahoo 架構設計負責人，他在2010年的時候進行了一次簡報，標題就是 Mobile First（原始簡報與影片)，是指設計網站時，應該以行動裝置的介面、互動、顯示等為主要考量，其他的裝置次之，有別於過去設計網站時「以桌上型電腦為主，再將電腦網站上的內容移植到行動裝置上」的模式。

現在越來越多的人使用行動裝置上網，根據美國最大電信業者 AT&T 的數據，手機流量在 3 年內成長了 50 倍，目前行動裝置上網的使用率仍在激增當中，而且還有更多的功能持續被開發出來。

相較於傳統的電腦，行動裝置的使用較不受到時間空間限制，無論是在捷運、廁所等都可使用，人們也花了不少零碎時間使用手機上網，因此瀏覽網頁的頻率跟電腦比起來有過之無不及，所以 Google、Facebook、Adobe 等大公司都開始以「行動優先」的概念來設計自己的產品。

那「行動優先」要如何套用到網頁設計上？一開始先針對行動裝置的小畫面來設計版面、填入最重要的內容，然後再以這些基本內容都存在的狀況下，針對較大的螢幕裝置 (如平板、進而電腦、電視螢幕等) 漸進式的擴展其佈局。這樣一來，網頁在行動裝置呈現的介面會非常好瀏覽且美觀，該有的功能、內容都有，並且由小畫面擴大至大畫面，內容更大、可擺放的元素就越多、限制也越少 (參見「漸進增強（Progressive Enhancement）」)。但是如果是從大畫面開始設計，當要轉換成小畫面時，其內容的擺放就會越來越困難，常常需要透過刪減內容，才能「塞」入較小的版面當中。這樣一來，有可能行動裝置上出現的是精簡過「簡陋卻可用 (poor but passable)」的內容，而無法給使用者完整的內容 (參見「優雅降級（Graceful Degradation）」)。

若要建立良好的行動裝置使用者體驗 (UX)，應考慮以下幾點：

• 使用者使用行動載具的習慣、方式及思考模式
• 提供明確精要的內容，比完整的導覽功能更重要
• 提供清楚且好觸控的導覽選單
• 簡潔明確的頁面內容
• 符合行動載具操作特性

現在大多數的 RWD 響應式網站，都是採用行動裝置優先 (Mobile First) 概念來設計，範例如下：

Youtube網站

就算是在手機上，也可以很方便的點閱影片、撥放、暫停，甚至對影片作評論、按讚！

Airbnb網站

選單的按鈕設計的大小適中，使用者用手機就可以輕易地透過選單找到目標住處，並且藉由滑動的行為瀏覽屋況，並按下預訂按鍵！

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

今天的前端工程師RWD基礎概念要來教你佈局斷點該以甚麼為主要設計!!有興趣的快往下看~

當代的前端工程師與網頁設計師在開發網站時都選擇 RWD 網站，在規劃其 Media Query 的尺寸斷點時，有兩種布局斷點的依據：「根據設備」以及「以內容為主」，介紹如下：

1.根據時下的主流設備來佈局斷點 (設備優先)

透過時下主流的設備 (如當代最熱門的手機、平板或電腦螢幕等) 來確定布局的斷點，而設計多套樣式，再分別對應到各種設備上，如此就可準確定位斷點。這種套用現成的設備尺寸隨然方便，又能精準對應到時下最普及的設備，但是隨著設備不斷汰舊換新，未來總會有無法合適對應到的設備。

2.根據網頁內容作為佈局斷點的標準 (內容優先)

這種方式不是以設備為主；而是依據網頁內容的布局、段落等來下斷點，是真正符合 RWD 響應式網站 設計的初衷的方式。此種方式可讓網頁涵蓋所有設備、且閱讀容易，但是斷點會依據設備的不同而落在不同的地方，這樣就沒有標準、精準的設計模式。

在內容優先的策略中，前段工程師與設計師要讓網站盡可能兼容所有設備：因為我們不知道用戶會用什麼樣的設備來訪問網站，因此，我們必須盡可能地把所有狀況都考慮進來；所有的佈局、元件、區塊和UI,UX設計等都能兼容不同類型的設備和平台。有「優雅降級（Graceful Degradation）」以及「漸進增強（Progressive Enhancement）」兩種思維模式，可以套在「內容優先」為主的 RWD 響應式網站 設計的過程：

「優雅降級」還是「漸進增強」?

圖上方為「優雅降級（Graceful Degradation）」的網頁設計模式；下方為「漸進增強（Progressive Enhancement）」模式

1. 優雅降級（Graceful Degradation）

一開始就針對「功能最完整」的平台來設計、開發網站，完成所有的功能和體驗後，再針對無法支援所有功能的平台或環境本來修改、刪減功能或是其他的解決方案，以確保網站能在最新、最完整的平台上完美呈現，擁有「最好的使用者體驗」；而在較舊的或是功能限制較多的的平台上，仍然可使用最重要的功能，整體介面「簡陋卻可用 (poor but passable)」，而不是無法使用。

2. 漸進增強（Progressive Enhancement）

這個方式與「優雅降級（Graceful Degradation）」的方式相反，是先針對最不完整或是限制最多的平台上創建最重要的基本內容，用最精簡的方式呈現；然後以這些基本內容都存在的狀況下，開始慢慢擴展其佈局，隨著平台的限制越來越少，內容的完整度也越來越高。這也是「行動裝置優先 (Mobile First) 」的設計方式。我們在下一篇會提到什麼是「行動裝置優先 (Mobile First) 」。

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

其他閱讀

給前端工程師的RWD概念(上):RWD網站和傳統的有何不同?

給前端工程師的RWD概念(下):以行動裝置使用為優先考量

電腦選花生不稀奇~ 現在人工智慧還會養蝦呢!! 存活率大幅提升,蝦隻變大!!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

在苦惱履歷上技能要填什麼嗎? Java,UI課程等等證照幫你解決這個問題!!

程式課程選達內，美上市IT課程教育集團

想當前端工程師嗎? 那你一定不能錯過接下來一系列的文章! 首先線和大家介紹RWD網站設計和傳統的有甚麼不一樣!

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

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

(相關文章：Media Query使用方法、Media Query中的視窗與頁面尺寸媒體特性一覽表)。

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

(相關文章：與前端溝通更順利！從了解整體網站的規劃流程開始)。

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

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

其他閱讀

給前端工程師的RWD概念(中):佈局斷點以設備為主還是內容為主

給前端工程師的RWD概念(下):以行動裝置使用為優先考量

電腦選花生不稀奇~ 現在人工智慧還會養蝦呢!! 存活率大幅提升,蝦隻變大!!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

在苦惱履歷上技能要填什麼嗎? Java,UI課程等等證照幫你解決這個問題!!

程式課程選達內，美上市IT課程教育集團