錚/

1507220945320.jpg
巨匠電腦分享,手機響應式網頁設計新取向─台灣五大案例分析!
*** 1.1 智慧型手機普及率逐年上升**

在智慧型手機發展盛行趨勢下,在全球擁有智慧型手機的普及率逐年上升,在國內2011至2013年智慧型手機普及率在各個年齡層上都是呈現上升趨勢,特別是在2013年時,18歲至44歲之使用者上升至六成以上,而25歲至34歲高達七成五,可以顯示智慧型手機已經是普遍性的產品,對於使用者具有相當的重要性。

資料來源:
ThinkWithGoogle

*** 1.2 使用智慧型手機上網頻率**

到底消費者使用智慧型手機上網都在做些什麼事情呢?85%智慧型手機使用者會從事與網路相關事物,78%智慧型手機使用者會利用手機瀏覽網路內容,由以上數據可知,顯示網頁對於智慧型手機使用者具有相當高的重要性,因此我們必須更深入探討網頁介面設計能否符合智慧型手機使用者,並提供最佳瀏覽畫面。

*** 1.3 智慧型手機促使消費者改變購買方式**

70%消費者每月至少使用手機購物1次以上,比例更是逐年上升當中,而高達87%消費者會使用智慧型手機來研究產品或服務。不論最終是否完成購買,消費者期望智慧型手機能提供的產品資訊是有效且多元的。如果網站提供的資訊不足驅使消費者需要透過其他管道來了解產品,商家很有可能就錯失了驅動消費者直接購買的先機。

*** 1.4 國人偏好大螢幕手機**

研究指出在國內擁有智慧型手機民眾中有近7成是使用較大螢幕的智慧型手機,根據Vpon 統計指出2014台灣10大手機機型排行,半數以上為5吋以上大螢幕手機,其中排名第二、第三與第十名的iPhone系列,雖為4吋以下小螢幕,但在Vpon 統計iPhone 6上市後,在蘋果機種銷售排行榜中,iPhone 6即升第四與第五名,顯示上市後促使蘋果使用者換機潮。

*** 1.5 製作行動網站的必要性**

製作行動網站好壞會影響消費者使用手機購買的關鍵,過去行動裝置螢幕小(螢幕尺寸太小占53%),行動上網技術還未完全成熟,至2012年底近五成消費者從手機獲得資訊後,會再透過電腦購買,而近三成消費者會再到實體店面購買。該探討的原因很多種,但消費者換電腦購買的過程很有可能打消消費者購買意願,因此在介面空間有限的情況下,如何去解決消費者的疑慮與問題,讓消費者願意使用手機直接進行交易,手機版網頁設計顯得相當重要,我們要如何解決這些原因呢?


1.6 本篇文章為何不考慮APP?

手機版網頁與app型態作用與特性不同,手機版網頁不需經過下載即可瀏覽,本文章探討的包含透過第一次瀏覽品牌的使用者,因此我們針對手機版網頁進行探討。

二、打造良好的手機版網頁設計

歐斯瑞將在以下文章使用iphone6 Plus以及國內知名網頁,探索台灣使用者偏好使用的手機版網頁介面設計特性。

2.1 使用者體驗與使用者介面設計很重要

使用者體驗是一種主觀性,個人化的經驗。消費者在使用特定產品或系統或服務時,以實際體驗、情感、俱有個人意義(個性化)以及,有價值的人機交流、和產品所有權方面的問題。使用者介面是指與硬體之間溝通、互動的媒介,目的在使得使用者能夠方便有效率地去操作硬體以達成雙向之互動,而完成所希望藉助硬體完成之工作。以下將觀察範例內的使用者體驗部分並給予評分。

在以下的範例中,我們將整理出10種要素來探討:

  1. 是否簡化手機網站內容,去除不必要或次要的元素。
  2. 是否採用單一方向,一致性操作方式。
  3. 手機介面是否採用易閱覽的單欄式版面設計。
  4. 是否在設計上避免另開新視窗或彈跳視窗功能。
  5. 是否容易利用手指動作操控網頁。
  6. 減少輸入欄位
  7. 導引網頁的動作由滑入改點擊。
  8. 盡可能空出畫面。
  9. 使用響應式設計。
  10. 善用手機特性。

1.盡量簡化您的網站

因為手機介面較小,所能呈現的東西相當有限,必須去除不必要的或是次要的內容,但這些內容往往會不知如何取捨,特別是購物網站有很多功能都是必須的,這會需要經過較專業評估與決策來取捨。後面案例中我們可以看到,都有盡量簡化他們的網站,但有些網站本身資料就相當的多,縱使簡化了,看起來還是略顯複雜,並不是還得再簡化這些功能與資訊,我們必須透過良好的溝通與謹慎評估後,以及測試和改善,去了解您的網站使用者最需要的功能與資訊等,再對您的網站作簡化,而在簡化過程中並不是將其刪除,可以透過收合、非必要時隱藏以及必要頁面再放入該功能。

2.單向操作
在選擇目錄等情況下,例如選單下拉展開後再左右滑動來作選擇,也應統一方向操作。

3.單欄式設計

使用單欄式版塊,避免使用者接收資訊與閱讀上的困難,不建議在手機上超過兩欄式設計。

4.不要使用或減少另開新視窗

另開視窗對使用者並不友善,案例中還是會有使用的情況,或許不能避免使用,但建議應減少使用。

5.讓手指能容易操控

手指比游標大的多,所點擊範圍較大,所以在設計按鈕時範圍不宜過小。

6.減少輸入欄位

由於手機打字不像電腦打字容易,應減少打字的必要,可使用選擇方式代替輸入文字。

7.滑入改點擊

在手機上沒有滑入時的效果,因此要改變成點擊,並且點擊後要給使用者立即的回饋,使用者才能得知確實點擊到所想要的按鈕。

8.盡可能空出畫面

不要放太多的物件與功能維持在畫面上,若放置使用者在使用當下並不會經常使用到的功能在畫面上,反而會引起使用者反感。

許多案例中都有將某些功能保持在畫面上,但放置於左右側會將部份網頁內容遮蔽住,影響使用者操作與閱讀,建議放置於上方或下方降低影響,必要時可判斷使用者向下滑動時收起選單,而盡可能的空出網頁內容,這會是一個很良好的判斷方式。

9.使用響應式設計

在國外響應式設計已是網頁設計趨勢,目前國內多數手機版網站是利用判斷使用者裝置是否為手機後,而導向至手機版網站(轉址),如能使用響應式設計可以避免掉轉址、效提升IOS效率以及更方便管理。

10.善用手機特性

善用手機本身的優勢,例如點選電話手機直接撥打,手機上分享也相較於電腦來的容易許多。

三、案例分享

良好手機版網頁設計分享

1.多商店購物網站(全站購物車統一) — GoHappy購物網

(資料取自官方網站,歐斯瑞有限公司製作)

簡介:

為台灣全方位購物網站,販售商品從電子用品,保養品,服飾配件,到親子用品,美食等等都有。

建議:

整體上將複雜的商城簡化了很多不必要的元素,並將選單展開方便使用者第一眼便可以看到所有品項,並將常使用功能保持在畫面下方,方便隨時點選。產品圖片中帶入略多的文字,由於產品下已有文字說明,建議可以試著再簡化掉不重要的文字或放置於品名中。部分文字由於放入在圖片中問題,顯得過小不易辨讀,可使用別的排版方式,或將文字取捨簡化後再放大。部份區塊稍微小了點,如會員登入與加入會員,建議可以收合。有著自動載入產品不必切換上下頁功能,但頁尾有提供次選項,卻也因此一直選不到次選項,建議可以收合於上方或改成頁面切換方式。

2.多商店購物‎網站(多店購物車) — Pinkoi

(資料取自官方網站,歐斯瑞有限公司製作)

簡介:

提供給設計師販售設計創意相關商品之平台。

建議:

本案例有非常良好的設計值得推薦,當使用者在向下滑動畫面時,會自動收合上方選單部份,而盡量空出畫面來顯示內容。因著重商品的設計上而只留下產品圖片,畫面顯得特別乾淨。些許文字按鈕略小,建議可以間隔加大或字級加大,讓使用者更容易點選。

3.單一品牌購物‎網站 – Lativ

資料取自官方網站,歐斯瑞有限公司製作)

簡介:

網路販售男性、女性、兒童平價服飾。

建議:

使用區塊呈現網頁訊息,沒有過多文字說明,字級並能容易閱讀,也由於是販售自家商品,在文字圖片整體設計都很統一,讓整體介面能夠乾淨並整齊。

4.團購網站 — Groupon台灣

(資料取自官方網站,歐斯瑞有限公司製作)

簡介:

經由網路販售團購優惠劵之平台。

建議:

本身設計沒有過多資訊給予使用者,很容易理解與操作,名稱與說明文字的字級建議可以加大,更方便使用者閱讀。

5.資訊型的響應式網頁 — ㄇㄞˋ點子靈感創意誌

(資料取自官方網站,歐斯瑞有限公司製作)

簡介:

為線上設計創意文章分享網站。

建議:

文章區塊相當分明,整體簡單乾淨。保持在畫面上的分享功能,時常擋住按鈕與文字,影響了操作與閱讀,可考量其必要性後做取捨,或放置於下上並收合。

分析比較表:

四、結論

在研究中我們可以得知智慧型手機已經越來越普及,也成為大多數消費者從事網路相關事物的裝置,也因此網站提供給手機良好操作介面是相當重要的,也是未來發展趨勢。使用手機購物消費者人數已逐年上升,目前手機版網頁設計讓消費者還有著許多疑慮,而不願意在手機上進行交易,解決這些部份原因就需要良好的手機版網頁設計。而手機螢幕尺寸相當多種,一個網站要能方便各種手機消費者接收資訊與操作,在介面與系統需要審慎的考量。
巨匠電腦開設了視覺設計課程,內容包含響應式跨平台網頁設計、跨界創意視覺設計、全動態購物網站設計等等,想要學視覺設計就快來巨匠電腦!

參考資料:

Think with Google統計/ Vpon統計 / 維基百科 / webcredible

GoHappy購物網 日期2015/1/15

Pinkoi 日期2015/1/15

Lativ 日期2015/1/15

Groupon台灣 日期2015/1/15

ㄇㄞˋ點子靈感創意誌 日期2015/1/15

文章與圖片出處: http://www.bnext.com.tw/article/view/id/35307

 

【視覺設計課程】巨匠電腦分享,時尚品牌幕後代筆者 — Nicolas Ouchenir

【視覺設計課程】巨匠電腦分享,跨屏介面設計的現況與未來

【視覺設計課程】巨匠電腦:使用者介面設計的七個訣竅你知道嗎?

【視覺設計見證】 巨匠電腦分享,不用手如何做視覺設計?紐西蘭設計師:試試用鼻尖吧!