前端工程師需釐清的RWD概念(下)行動設備優先的設計考量
你不要以為前端工程師傻傻的!現在不同的行動設備,他們同樣也有辦法對付! 行動載具特性 圖上方為傳統以桌機為主設計模式；下方為「行動裝置優先 (Mobile First)」模式 手機、平板等行動設備在操作上與電腦差異很大，電腦以滑鼠操作為主、行動設備則是以觸控螢幕為主。因此，兩者的網頁開發在互動設計上也有所不同。 行動載具的基本特徵有：可單指或多指操控的多點觸控、多種手勢（如搖一搖、滑動等）以及文字虛擬鍵盤。 除了上述與電腦差異很大的特徵外，在視覺呈現上也與電腦差很大， 前端工程師 與 網頁設計 師需注意的事項如下： 按鈕大小： 電腦因為是用滑鼠操控，所以無論按鈕多小，滑鼠一樣點的到。但是行動裝置是以觸控為主，按鈕太小會增加點擊難度。因此蘋果電腦公司建議 iOS 開發者，任何需要被觸控的 UI (使用者介面) 元件，都不能小於 44*44px。 超連結大小： 除了上述的按鈕之外，也會有文字的超連結內容。同理，也不能讓帶有超連結的文字太小，以利於手指點擊。 UI 設計： UI 設計必須考量到行動載具的畫面尺寸，因此像按鈕等需要被觸控的 UI (使用者介面) 元件，都需要在畫面中容易被點擊的地方。 點擊效果： 在按鈕效果的開發上，有時滑鼠除了點擊與放開的指令外，還會有滑來滑去的特效。但是行動版裝置是使用手指直接觸控的，所以就不需要此種特效強調。 互動效果： 電腦與行動裝置的運算效能畢竟不一樣。所以有一些在電腦版網頁運行的很順暢的特效 (如 Slide 幻燈片、Carousel 等) 在行動裝置上未必能流暢顯示。所以在設計 RWD 網頁時，要考量到不同設備的效能。 行動裝置優先 (Mobile First) 概念 行動裝置優先 (Mobile First) 是由知名的 設計師 與 UI規劃師 Luke Wroblewski 提出的，他曾當過美國 yahoo 架構設計負責人，他在2010年的時候進行了一次簡報，標題就是 Mobile First（ 原始簡報與影片 )，是指設計網站時，應該以行動裝置的介面、互動、顯示等為主要考量，其他的裝置次之，有別於過去設計網站時「以桌上型電腦為主，再將電腦網站上的內容移植到行動裝置上」的模式。 現在越來越多的人使用行動裝置上網，根據美國最大電信...