至今為止RWD響應式網站已成為網頁設計的趨勢,傳統網站便漸漸地離開了網頁設計的市場,相信RWD網站的好處已經是眾所皆知的事,對RWD不了解的朋友也能透過我們先前的文章有所了解(延伸閱讀:網站也要舊汰換新,傳統網站與RWD網站差異比一比)。

不過即便知道RWD網站與傳統網站的差異,對於網頁設計不夠了解的人還是會抱持著疑問,網頁到了行動裝置上不就只是縮小而已,為什麼還要經過設計呢?

舉例來說,一張大海報等比例縮小並不是件難事,但是要讓海報上的字或圖片縮小到能看的一清二楚就成了難事,需要重新的編排、字體的放大才能將海報要傳達的意義,在縮小後就能清楚明白,這就是我們的網站移動到行動裝置後我們需要做到的事。

行動裝置版網站設計要點

  1. 區塊排版位置:如何將網頁版的頁首、頁尾和內容重新配置於行動裝置上,並達到簡約、方便瀏覽又能傳達出重點都是需要重新思考過的。
  2. 圖片展示大小:無論是頁面的banner、首頁、文章或是產品的任何圖片,都該適當的顯示圖片的大小,沒有重點又過大的圖片反而對使用者沒有任何幫助,相對的圖片太小反而會造成使用者的不便。
  3. 簡約化選單:行動裝置受到介面的侷限便無法將所有選項列出,大部分都會靠漢堡選單做簡化。
  4. 字體大小:普遍人還是習慣使用手機來瀏覽網頁畫面,即便手機只需要靠兩指就能夠縮放大小,但一開始就設定好網頁的字體大小,便可省去放大縮小的麻煩,也才符合響應式網站的目的。
  5. 圖示取代文字:圖示在行動裝置版上較能清楚的辨識,並且行動裝置不像電腦一樣是使用滑鼠操作,當用手點選時也較容易被點擊到。
  6. 加大點擊範圍:如同4點,在電腦上游標能點擊的範圍較小,但是手指卻不一樣,當不是所有文字都能轉換成圖示的時候,加大點擊範圍才能方便操作。
  7. 跳轉畫面:許多網站都會放自己的連絡電話、信箱、地址或是社群網站,雖然電話無法在網頁版中直接點擊後撥打,但是行動裝置可以做到這一點,不但方便也能增加使用者停留於網站的時間。

行動裝置版的設計是為了符合RWD網頁,讓使用者進型網頁版和行動版網頁轉換時不會使介面變形或是突兀,透過優化得到最佳的瀏覽效果。因此,並不是現在是RWD網頁趨勢就不需要設計型動裝置版的網頁,而是不需要再額外製作專門的手機版網站罷了。

想要了解更多,歡迎至大禾電子商務粉絲專頁與我們交流,或是想了解官網製作、行銷相關問題都可以來電撥打:07-285-0163、LINE:@dahe-idea與我們聯繫!