想當前端工程師之前,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網站
![0513-2.png 0513-2.png](https://pic.pimg.tw/izzysixxofai/1559041367-3349949096_n.png)
![0513-4.png 0513-4.png](https://pic.pimg.tw/izzysixxofai/1559041679-3251187715_n.png)
就算是在手機上,也可以很方便的點閱影片、撥放、暫停,甚至對影片作評論、按讚!
Airbnb網站
![0513-3.png 0513-3.png](https://pic.pimg.tw/izzysixxofai/1559041367-1840064452_n.png)
![0513-5.png 0513-5.png](https://pic.pimg.tw/izzysixxofai/1559041679-4280476850_n.png)
單的按鈕設計的大小適中,使用者用手機就可以輕易地透過選單找到目標住處,並且藉由滑動的行為瀏覽屋況,並按下預訂按鍵!
本篇為「前端工程師必懂RWD概念」三部曲第三篇,全系列目錄如下:
(目錄) |
參考連結: