前端工程師需釐清的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概念」三部曲第三篇，全系列目錄如下:
🙌延伸閱讀照過來：
前端工程師需釐清的RWD概念(上)RWD網頁VS傳統網頁設計
前端工程師需釐清的RWD概念(中)網頁設計的優雅降級和漸進增強
前端工程師之路現在開始-Media Query之CSS判斷條件
緊來看熱度第二的Java 課程
我在網路行銷課程學到:如何合法的黑白通吃!
Google人工智慧太威了!只要出一張照片馬上就產出多個標籤!
達內教育開幕 培養台灣IT人才進入全球企業
行動載具特性
手機、平板等行動設備在操作上與電腦差異很大，電腦以滑鼠操作為主、行動設備則是以觸控螢幕為主。因此，兩者的網頁開發在互動設計上也有所不同。
行動載具的基本特徵有：可單指或多指操控的多點觸控、多種手勢（如搖一搖、滑動等）以及文字虛擬鍵盤。
除了上述與電腦差異很大的特徵外，在視覺呈現上也與電腦差很大，前端工程師與網頁設計師需注意的事項如下：
按鈕大小：
電腦因為是用滑鼠操控，所以無論按鈕多小，滑鼠一樣點的到。但是行動裝置是以觸控為主，按鈕太小會增加點擊難度。因此蘋果電腦公司建議 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)，應考慮以下幾點：
- 使用者使用行動載具的習慣、方式及思考模式
- 提供明確精要的內容，比完整的導覽功能更重要
- 提供清楚且好觸控的導覽選單
- 簡潔明確的頁面內容
- 符合行動載具操作特性
Youtube網站
Airbnb網站
本篇為「前端工程師必懂RWD概念」三部曲第三篇，全系列目錄如下:
| (目錄)
|
🙌延伸閱讀照過來：
前端工程師需釐清的RWD概念(上)RWD網頁VS傳統網頁設計
前端工程師需釐清的RWD概念(中)網頁設計的優雅降級和漸進增強
前端工程師之路現在開始-Media Query之CSS判斷條件
緊來看熱度第二的Java 課程
我在網路行銷課程學到:如何合法的黑白通吃!
Google人工智慧太威了!只要出一張照片馬上就產出多個標籤!
達內教育開幕 培養台灣IT人才進入全球企業
