試試這三招，讓網友在你的網站輕鬆購物！

手機上網愈來愈普及，估計手機上網率今年就會超越PC上網率。但手機或平板電腦上網通常受到瀏覽器大小的限制，瀏覽經驗因此大打折扣。這時就需利用可在手機、平板電腦上瀏覽，同時可與瀏覽者互動的回應式網站（responsive web） 。 

回應式網站要打破的就是不同裝置間的差異對瀏覽經驗產生影響。在運用回應式網站時，電商應就內容、排版以及互動網站是否能確實提供使用者互動經驗來思考回應式網站的設計。而這些關鍵都與一件事有關，就是行動裝置迷你螢幕的限制。

小螢幕瀏覽：先搞定內容與排版

網路商店內容設計會影響它在裝置上呈現的結果。Nielsen Norman Group 研究顯示，眼球看電腦網頁時，運動方向呈 F 形。先由左到右看完水平頭條，再約略由左到右看第二行，但不會看到右邊最後面。到這時，瀏覽者若沒按回上頁鍵，他就會繼續往下，約略瀏覽全頁。這就是 F 型瀏覽。但在 4~5 吋大小的瀏覽器上，眼球運動方向成  I  字形，只會由上往下看。這就決定了網路商店內容呈現與排版方式。

傳統電子商務網站，在 PC 的呈現方式是先有產品圖示、產品解說，到最下面才是購買鍵，這很合理。但把 PC 瀏覽器上的產品解說內容與排版放到手機來看：頁面變長、變窄，要找到召喚行動鍵似乎要無限往下拉，真要達到召喚行動目的，似乎是遙遙無期。這時建議您參考亞馬遜的做法。

Amazon 的手機頁面清楚連結到結帳選項

圖片來源：Amazon （手機擷取畫面）

在手機上瀏覽亞馬遜產品時，一句產品敘述、一張產品圖示，接著就是一個又大又好點的『購買選項』按鈕。眼球由上到下的 I 型運動，在此得到完全的舒展空間；更重要的是，您成功招喚行動的機會會提升許多。

以影片代替圖片：回應式3D動畫經驗

回應式網站能提供的不僅是訊息，還有活潑的互動媒體。Starbucks 對此的掌握可供您參考。

Starbucks 的手機頁面簡單，具備一般網站應有的特點。主頁水平呈現不同的廣告主打，垂直往下呈現的是上市的新品。每個重點，手機上幾乎都會搭配一個廣告宣傳片，讓使用者更清楚地接受店裡推出的新概念。

例如，為了解決大排長龍買咖啡的狀況，美國的 Starbucks 就針對 iPhone 手機回應式網站上設計了電子小費以及與 Line 類似，搖搖手機就可付費等新功能。使用者若不清楚如何使用，只要觀賞短片就可上手了。電商可以考慮採用這個點子來推廣新品或新行銷概念。

Starbucks 官網的PC呈現頁面

 圖片來源：Starbucks

Starbucks的網頁設計相當符合其品牌形象

圖片來源：Starbucks （手機擷取畫面）

創造回應式經驗

創造最佳的回應式經驗幾乎是我們共同的追求。針對這點，亞馬遜會根據消費者的瀏覽記錄來建議消費者下次要瀏覽的產品。因手機瀏覽網頁速度慢，所以亞馬遜的建議清單使得瀏覽變得更加簡單。

此外，電商還可從消費者在瀏覽器上的瀏覽習慣來修正服務內容，創造更好的手機回應式網站購物經驗。如：消費者花在手機瀏覽網站的時間與在電腦上一樣長嗎？若短一些，是否因手機瀏覽經驗不佳呢？手機上網的跳出率（bounce rate) 是否比較高？而這是否是因為手機下載訊息時間比較長，或者是消費者難以在手機上找到所需訊息呢？另外，在手機上下載網站，是否都須花很長的時間呢？若以上皆是，那當然會大大影響使用者經驗與網站優化（SEO)。

現代科技進步。許多不同的資料、技術都可整合起來，物盡其用，利用在回應式網站上，以提供消費者更多方便的購物經驗。您是否對回應式網站越來越好奇了呢？ 很鼓勵大家參考大型零售商的手機或平板電腦的回應式網站，相信您定可從中獲得適合自己的點子！

嚴禁抄襲，若欲轉載，敬請註明出處「SmartM」並附上原文連結。

歡迎各大媒體交換文章連結。

圖片來源：主圖、縮圖: http://photopin.com/search

加入SmartM粉絲團，更多電商訊息等你關注 https://www.facebook.com/smartm.tw