Facebook Pixel Facebook Pixel

零售電商的進步,從優化手機瀏覽畫面、圖片格式、大小開始

2017-03-22
SmartM/謝明璇
零售電商的進步,從優化手機瀏覽畫面、圖片格式、大小開始
圖片來源 : Pixabay

【SmartM解讀】手機網頁排版已經是必要獨立設計,本文比較三個零售電商(英國Tesco.com、美國Walmart.com以及德國Lidl.de’s)的手機網頁,將三大零售商在手機版的瀏覽畫面、圖片格式、大小分層解析。

線上購物普及,人人都能說出一套自己購物的心得,但是某些購物網站的頁面配置就是較容易閱讀,某些卻亂的不知道從何逛起,這兩者的差異在哪裡?這是因為手機網頁排版已經是必要獨立設計,但是設計者思維卻未從小螢幕的視覺觀看效果出發,手機網頁是最接近消費者的購買路徑之一,了解如何優化手機瀏覽畫面是現在的品牌必備課題。
以下是全球三大零售商的手機版網頁比較,英國的Tesco.com、美國的Walmart.com以及德國的Lidl.de’s。
零售電商的進步,從優化手機瀏覽畫面、圖片格式、大小開始
  • Tesco.com:如同許多專為手機瀏覽器打造的網頁,Tesco.com使用一欄式的設計,圖片幾乎橫跨整個版面。使用者每捲動一次,只會看見三到四張代表不同類別的產品,這導致使用者必須不斷捲動網頁,好看見更多其他類別的產品。
  • Walmart.com: 進入Walmart.com,可以將首頁分成三個部分來看,第一是最上面的搜尋功能,接下來則是吸注意力的動態Banner廣告,最下方則是可以透過左右捲動瀏覽不同種類的商品,並點擊購買。這是Walmart.com的小技巧是讓手機瀏覽網頁更有效率,如捲軸左右滾動可增加更多產品的曝光。比起Tesco.com,Walmart.com不但縮小圖片,也降低使用者滑動的次數,消費者在Tesco.com的平均捲動次數是在Walmart.com的四倍之多。
  • Lidl.de’s:相較於Tesco.com與Walmart,Lidl.de’s算是結合了兩者的特色,除了為特定促銷廣告的滿版圖片,下方也顯示較小的商品圖,最重要的是兩者都是可滑動的,僅管「可滑動」的設計的確節省了空間,但同樣也縮減了可傳遞的資訊量。

圖片如何影響網頁的表現?

httpArchive是一個提供網站表現分析服務的網站,每個月都會對表現最好的前100萬個網站進行多次測試,httpArchive在2017年提出幾項數據:全世界前百大網站的平均網頁大小是864KB、59次的網頁要求(要伺服器回傳資料),其中網頁圖片佔了468KB的空間。
零售電商的進步,從優化手機瀏覽畫面、圖片格式、大小開始
  • Tesco.com要花10.5秒載入597KB的資料,因為Tesco.com使用Data URIs的技術,使圖片不佔空間,有效降低伺服器的負荷。
  • Walmart.com花21.9秒載入1850KB的資料,其中圖片佔了862KB。
  • Lidl.de’s在32.7秒內載入2409KB大小的數據,圖片就佔了1630KB。
網頁設計不只要考慮美觀、易讀性,同時也要考慮到圖片的大小影響載入速度,過長的載入速度會使消費者失去耐性。

選擇適用的圖片格式

根據httpArchive的調查,最常被使用在網頁上的圖片格式分別是JPEG、PNG、GIF與SVG。使用適當的圖片格式可以增加網頁空間,同時也能在不同的螢幕大小下,維持一定的解析度。
零售電商的進步,從優化手機瀏覽畫面、圖片格式、大小開始
網頁圖片可分為兩種:點陣圖與向量圖。點陣圖由很多的像素組成,每個像素紀錄一個顏色,圖檔尺寸越大,代表要存的像素越多,檔案也就越大;向量圖是電腦用數學上的方法紀錄圖檔資訊,放大或縮小不會改變圖檔的解析度,檔案大小也相對較小。
JPEG、PNG與GIF都是點陣圖,SVG則是向量圖。在使用上,JPEG是最常用於網頁上的格式;PNG檔案在壓縮後不會失真,同樣也被廣泛使用;GIF檔適合存取色塊等形狀不甚複雜的圖形,像是logo、icon等;SVG在logo上的應用也很多,但是只能被使用於Adobe旗下的軟體。

適度縮減圖片大小

「圖片」往往是導致網頁載入速度緩慢的元兇之一。因此,零售電商在設計網頁時,更應該注意到這個部分,因為越慢的載入速度帶來越高的跳出率。
httpArchive的資料顯示,JPEG檔案的平均大小是29KB、PNG檔平均大小更小,只有16KB。而在Walmart.com上,最大的圖片首頁的、可滑動的Banner佔了124至138KB,Google提供的工具PageSpeed insights建議分別縮小Banner內的五張圖片至原先的73%大小,可讓Walmart.com節省500KB與27%的網頁總負荷量。
但不是所有的網頁都建議要壓縮,以Lidl.de’s為例,它的最大張圖片同樣也來自於Banner,佔134至194KB,但其他圖片也都佔了超過100KB。壓縮圖片可以釋放189KB的空間,但事實上只替網頁瘦身8%。
若圖片還是太大怎麼辦呢?除了讓文字先載入,吸引人們的注意力之外,在圖片載入的過程中,也要避免文字在頁面上移動,反而可能使人們點擊到錯誤的區塊。
網頁的設計,其實沒有一套固定的準則,只是品質與頁面大小的取捨。我們只能根據使用者體驗、吸引力、網頁表現,不斷的嘗試找出優化手機網頁頁面的最佳方法。
知名市調公司尼爾森的研究經理Raluca Budiu建議,要注意手機螢幕的大小限制;太小的圖片容易提供資訊不足,太大的圖片則會導致網頁載入速度減緩。對採用一欄式設計的網頁來說,因為一欄式設計中習慣將圖片填滿手機頁面,切記不要陷入「大材小用」的窘境,讓一張佔空間的圖片,乘載不足夠的資訊。
 
延伸閱讀
參考資料
【超過300本影音說書陪你成就更好的自己】讓大大學院與你共讀,幫助「沒時間讀書」、「讀書速度很慢」、「讀完就忘記」、「抓不到重點」的你,利用18分鐘領略閱讀的樂趣,吸收並帶走鮮明觀點,真正讓知識內涵融會於日常生活。立即點擊加入
大大讀書|全台最大線上影音說書
本網站內容未經允許,不得轉載。歡迎來信投稿、洽談文章授權。

關注職場最新趨勢,為知識學習創造最佳環境

大大學院「全台最大影音說書.知識學習平台」,致力於推廣終生學習、培養職場人士的閱讀習慣。

按讚、追蹤「大大學院」Facebook粉絲團,每天更新最新職場趨勢文章,帶你掌握關鍵資訊。

加入「大大學院|職場趨勢新觀點」,最新、最實用的職場課程都在這,學習資訊不漏接!請用手機點擊「加入Line好友」連結,或是掃描QR Code加入。

處理中