董莉莉

（北京工商大學(xué)嘉華學(xué)院藝術(shù)與傳媒學(xué)院，北京 101118）

電子商務(wù)APP UI界面調(diào)查與分析

董莉莉

（北京工商大學(xué)嘉華學(xué)院藝術(shù)與傳媒學(xué)院，北京 101118）

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

電子商務(wù)；界面；視覺傳達(dá)；消費者

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

圖1 手機(jī)app

有網(wǎng)購習(xí)慣的大多為大學(xué)生和年輕的上班族，這部分人是各大電子商務(wù)網(wǎng)站的主要用戶，設(shè)計迎合他們喜好的UI界面尤為重要。大學(xué)在校生時間相對比較寬松，每天和每月使用手機(jī)上網(wǎng)的時間較長，網(wǎng)絡(luò)購物的頻率也相對較高。據(jù)統(tǒng)計（補(bǔ)充文獻(xiàn)來源，即參考文獻(xiàn)），學(xué)生在日常網(wǎng)購中，關(guān)于購買日用品生活用品提及頻率比較高的網(wǎng)站是淘寶和1號店；關(guān)于購買化妝品護(hù)膚品提及頻率較高的是淘寶和聚美優(yōu)品；關(guān)于兼職提交頻率高的是58同城；關(guān)于購買數(shù)碼產(chǎn)品提及頻率較高的是京東和淘寶。

本文就京東、淘寶、聚美優(yōu)品、1號店、蘇寧易購、凡客誠品、58同城等7個電子商務(wù)的APP應(yīng)用展開調(diào)查與分析，其中淘寶、蘇寧易購、京東和聚美優(yōu)品比較能以適當(dāng)?shù)膱D文形式傳達(dá)信息，可是淘寶后來升級后需要花費更多流量和操作去流量寶貝詳情，這點是需要改進(jìn)的。本文分別從9個方面進(jìn)行分析比較。

1 封面啟面設(shè)計

圖2 手機(jī)淘寶封面啟動

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

圖3 手機(jī)京東封面啟動

圖4 聚美優(yōu)品整體配色

2 視覺傳達(dá)效果方面

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

3 功能劃分方面

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

4 導(dǎo)航等級方面

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

5 整體配色方面

（1）淘寶啟動頁面顏色熱情統(tǒng)一，底頁全都是白色，干凈簡潔不影響閱讀、清晰表達(dá)內(nèi)容，導(dǎo)航銀白色對比弱，按鈕是標(biāo)志色的圖像和文字，風(fēng)格統(tǒng)一舒服。

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

（3）凡客誠品也是白底背景，標(biāo)志色紅色標(biāo)欄中用白色做文字和圖標(biāo)的主色，頁面簡單，導(dǎo)航欄頂置，但是內(nèi)容區(qū)分不大。

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

圖5 1號店頁面布局

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

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

（7）蘇寧易購?fù)瑯邮前椎妆尘?，?dǎo)航黑色沉著，頁面也是大方的，內(nèi)容簡潔分類清晰。

圖6 58同城版面設(shè)計

6 界面布局方面

結(jié)構(gòu)最合理的是58同城，最方便的是淘寶和1號店，還有蘇寧易購的導(dǎo)航欄。字體的設(shè)計風(fēng)格上，7家電子商務(wù)大同小異，頁面中基本都是用黑體，大方端正，表達(dá)清晰，區(qū)別在于各家的標(biāo)志色的顯示。

7 軟件的框架設(shè)計方面

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

8 版面設(shè)計方面

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

9 個人中心和個人賬戶業(yè)務(wù)方面

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

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

10 結(jié)論

對現(xiàn)有APP UI界面視覺的整體印象中，在啟動封面設(shè)計上的視覺效果應(yīng)該是平面與立體相結(jié)合，多層次的、識別性高、象征性強(qiáng)、與電子商務(wù)網(wǎng)站的商標(biāo)和標(biāo)志色相結(jié)合的樣式，在折扣活動期間和軟件更新時可以在封面上增加內(nèi)容宣傳、告知消費者。

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

未來APP UI界面的發(fā)展將受到移動互聯(lián)網(wǎng)、人機(jī)交互界面技術(shù)發(fā)展而產(chǎn)生巨大影響。由于智能手機(jī)的發(fā)展，手機(jī)與其它移動設(shè)備有更加明顯融合的趨勢，手機(jī)僅作為通訊的功能將被弱化，通話的概念進(jìn)一步模糊。APP UI界面的發(fā)展趨勢將會以多趨道結(jié)合的方式展現(xiàn)出來，更加人性化、功能化、生活化。

[1]楊煥.智能手機(jī)移動互聯(lián)網(wǎng)應(yīng)用的界面設(shè)計研究[J].中國知網(wǎng),2013-04-01.

[2]李琛.移動互聯(lián)網(wǎng)時代購物APP交互界面設(shè)計研究[J].中國知網(wǎng),2014-05-01.

[3]洪陽.電子商務(wù)界面的視覺設(shè)計及信息傳達(dá)研究[J].中國知網(wǎng),2014－01－01.

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

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

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

2015-11-23