電子商務APP UI界面調查與分析

董莉莉

（北京工商大學嘉華學院藝術與傳媒學院，北京 101118）

電子商務APP UI界面調查與分析

董莉莉

（北京工商大學嘉華學院藝術與傳媒學院，北京 101118）

隨著生活方式、娛樂方式以及消費方式發生的巨大變革，手機或iPad使人們無時無刻不在享受著移動互聯網帶來的便利。電子商務網站APP UI界面的設計直接影響到消費者的購買欲和購買習慣。針對目前常見7家電子商務APP 進行一次深度調研，分析從視覺傳達、用戶體驗等方面作比較，為新興的電子商務企業做參考，從而總結出，APP UI界面的發展趨勢將會以多趨道結合的方式展現出來，更加人性化、功能化、生活化。

電子商務；界面；視覺傳達；消費者

今天，我們的生活已經發生了巨大變革，包括我們的生活方式、娛樂方式以及消費方式。智能手機和ipad等移動終端設備的普及，人們更愿意使用APP客戶端上網，手機或iPad已經是人們生活中必不可少的一部分，人們無時無刻不在享受著移動互聯網帶來的便利。各大電子商務網站自然不會錯過這個機會，移動設備的用戶界面及用戶體驗也必然會受到各大電子商務網站的重視。電子商務網站APP UI界面的設計對用戶有很大的影響，可以直接影響到消費者的購買欲和購買習慣。設計優秀的APP UI界面，能迎合消費者的需求，正確引導消費者進行消費，從而獲得更好的效益和收益。目前，排在前幾位的電子商務網站都擁有了自己的APP，這標志著APP電子商務時代的到來（圖1）。

圖1 手機app

有網購習慣的大多為大學生和年輕的上班族，這部分人是各大電子商務網站的主要用戶，設計迎合他們喜好的UI界面尤為重要。大學在校生時間相對比較寬松，每天和每月使用手機上網的時間較長，網絡購物的頻率也相對較高。據統計（補充文獻來源，即參考文獻），學生在日常網購中，關于購買日用品生活用品提及頻率比較高的網站是淘寶和1號店；關于購買化妝品護膚品提及頻率較高的是淘寶和聚美優品；關于兼職提交頻率高的是58同城；關于購買數碼產品提及頻率較高的是京東和淘寶。

本文就京東、淘寶、聚美優品、1號店、蘇寧易購、凡客誠品、58同城等7個電子商務的APP應用展開調查與分析，其中淘寶、蘇寧易購、京東和聚美優品比較能以適當的圖文形式傳達信息，可是淘寶后來升級后需要花費更多流量和操作去流量寶貝詳情，這點是需要改進的。本文分別從9個方面進行分析比較。

1 封面啟面設計

圖2 手機淘寶封面啟動

7家電子商務網站中，識別性最高的是淘寶和聚美優品，這兩家商務網站與PC電腦上的網頁從顏色風格、象征性以及廣告語的設計都保持了一致性，且顯眼突出，其次是京東、1號店、凡客誠品、蘇寧易購、58同城（圖2、3、4）。

圖3 手機京東封面啟動

圖4 聚美優品整體配色

2 視覺傳達效果方面

凡客誠品和京東相對其他的啟動封面比較立體，其他五家電子商務網站的啟動封面都比較簡單扁平化。每次軟件更新，啟動封面里還會加入新功能的彈出和提示，而且臨近商家的折扣活動的時候，啟動封面都會有活動的廣告提示。進入主頁面后，感覺7家電子商務網站的首頁面板的功能按鈕大同小異，但由于各個網站的營業范圍和業務種類的不同，所以導航欄和面板的功能區間劃分情況也不相同。

3 功能劃分方面

面板對功能區間劃分最清晰的應屬蘇寧易購和58同城。對話框和彈出框等風格都與各自網站的風格一致，截圖不多，但是明顯看出來凡客和淘寶在手機上看的頁面是有圓角修飾的。導航欄只有凡客誠品一家是頂置的，其余都是放在底端。

4 導航等級方面

聚美、1號店、蘇寧易購、京東和淘寶的導航欄分類標準是一樣的。而導航文字中，京東的導航欄只有圖標沒有文字，凡客的導航欄只有文字沒有圖標，而其他的網站都有文字配合著圖標，基本都清楚地表達了意思。

5 整體配色方面

（1）淘寶啟動頁面顏色熱情統一，底頁全都是白色，干凈簡潔不影響閱讀、清晰表達內容，導航銀白色對比弱，按鈕是標志色的圖像和文字，風格統一舒服。

（2）聚美對比度高的激光粉，首頁底色也是素色為主，干凈利落，導航欄則是標志色，顯眼突出。

（3）凡客誠品也是白底背景，標志色紅色標欄中用白色做文字和圖標的主色，頁面簡單，導航欄頂置，但是內容區分不大。

（4）1號店導航欄相對其他突出，黑色半透明的底色和購物車的白色圓鍵突出和方便客戶使用，因為這樣頁面設計相對別家寬松很多，沒那么緊湊，比較大方（圖5）。

圖5 1號店頁面布局

（5）京東導航欄黑灰，頂欄是紅偏白色，與凡客誠品區分起來，但是沒有啟動頁面那么正紅，頁面干凈但是也是緊湊，仔細看還是不影響閱讀的。

（6）58同城與其他家都不同，主頁全是功能按鈕、已經給我們清晰分類，內容一目了然（圖6）。

（7）蘇寧易購同樣是白底背景，導航黑色沉著，頁面也是大方的，內容簡潔分類清晰。

圖6 58同城版面設計

6 界面布局方面

結構最合理的是58同城，最方便的是淘寶和1號店，還有蘇寧易購的導航欄。字體的設計風格上，7家電子商務大同小異，頁面中基本都是用黑體，大方端正，表達清晰，區別在于各家的標志色的顯示。

7 軟件的框架設計方面

淘寶、京東和凡客有出現浪費的情況，有些按鍵是一般不會用到的，比如，淘寶的“微淘”和“服務”、京東的“逛”。7家店的滾動條和狀態欄基本符合視覺流程，但是用戶使用心理方面還不夠完備，總體風格都是簡潔明快，應該更加注重圖文結合和圖片的增加，流量消耗的方面也應該多加提高技術節省流量，有些內容并沒有跟PC一樣結合，需要多加完善。

8 版面設計方面

這7家電子商務網站，京東雖然排版好，但是并沒有節省屏幕的空間，其他的部分則太過緊湊了，縮放時的狀態和原則體現得不明顯。軟件商標放置在顯著位置方便用戶操作退出當前頁面，但時時提醒而沒有實際的功能會讓人覺得厭煩。主菜單一般放置在頂部或者底部，有返回到頂部/底部的快捷鍵跟著滾動為最佳，有時候搜索東西頁面過長沒有記錄和快捷鍵的操作讓人覺得很不方便，這點淘寶并沒有做好。

9 個人中心和個人賬戶業務方面

由于有的電子商務網站主頁的按鈕功能設置和導航欄的設計中已經有個人業務的快捷鍵，所以每家的個人中心都有差異，登錄頁面和登錄后的個人主頁的內容都不一樣，但風格上基本都保持一致。淘寶的“個人中心”，設計比較大方，排版簡潔，節約屏幕空間，而且因為通常需要登錄后才能看到，比較注重保護個人隱私，包括訂單查詢、支付情況、發貨情況等等。

目前發現很多網站和其他網站的平臺合作，會利用其他平臺的賬號進行綁定登錄為自家的賬號，這樣節省了客戶的注冊時間而且方便操作和登錄，不需要花費過多精力登錄和記錄、注冊賬戶，但是若處理不好，也會有安全隱患方面的問題。這點上必須要提高安全性和隱私性。

10 結論

對現有APP UI界面視覺的整體印象中，在啟動封面設計上的視覺效果應該是平面與立體相結合，多層次的、識別性高、象征性強、與電子商務網站的商標和標志色相結合的樣式，在折扣活動期間和軟件更新時可以在封面上增加內容宣傳、告知消費者。

設計舒適的電子商務網站界面能夠有效地吸引更多消費者，其最重要的是信息的準確表達和順從客戶的操作心理，滿意的UI視覺界面要有清楚明確的流程向導，操作流程邏輯性強，沒有冗余的點擊，操作中有明確的信息提示，如錯誤警告、成功告知等，甚至要有瀏覽記錄、商品的對比等等。

未來APP UI界面的發展將受到移動互聯網、人機交互界面技術發展而產生巨大影響。由于智能手機的發展，手機與其它移動設備有更加明顯融合的趨勢，手機僅作為通訊的功能將被弱化，通話的概念進一步模糊。APP UI界面的發展趨勢將會以多趨道結合的方式展現出來，更加人性化、功能化、生活化。

[1]楊煥.智能手機移動互聯網應用的界面設計研究[J].中國知網,2013-04-01.

[2]李琛.移動互聯網時代購物APP交互界面設計研究[J].中國知網,2014-05-01.

[3]洪陽.電子商務界面的視覺設計及信息傳達研究[J].中國知網,2014－01－01.

[4]王如峰.設計的品牌化道路[J].湖南包裝,2012, 03(4):100～102.

[5]劉斌慧. 色彩視覺在商業招貼中的應用[J]. 湖南包裝,2013, 04(168):59～61.

董莉莉（1981-），女，北京工商大學嘉華學院藝術與傳媒學院講師，碩士。Email:colordll@sina.com

2015-11-23