移動(dòng)電子商務(wù)客戶端的用戶界面設(shè)計(jì)研究

周怡

移動(dòng)電子商務(wù)客戶端的用戶界面設(shè)計(jì)研究

周怡

（湖南郵電職業(yè)技術(shù)學(xué)院，湖南長(zhǎng)沙410015）

隨著移動(dòng)電子商務(wù)的快速發(fā)展，用戶界面（UI）設(shè)計(jì)研究的不足已經(jīng)突顯。文章詳細(xì)介紹UI設(shè)計(jì)原則，提出了移動(dòng)電子商務(wù)客戶端的UI設(shè)計(jì)方法，探討了其設(shè)計(jì)基本流程，較好地滿足了用戶體驗(yàn)需求。

移動(dòng)電子商務(wù)；用戶客戶端；UI設(shè)計(jì)

為了吸引更多的用戶，各大電商、金融機(jī)構(gòu)、實(shí)體商鋪、銀行、醫(yī)院等產(chǎn)業(yè)都開(kāi)始發(fā)展自己的移動(dòng)電子商務(wù)。國(guó)內(nèi)對(duì)移動(dòng)電子商務(wù)的研究主要集中在運(yùn)營(yíng)模式和技術(shù)開(kāi)發(fā)上，而用戶界面（UI）設(shè)計(jì)的研究比較欠缺，希望通過(guò)本文的研究能總結(jié)歸納出一些適用于移動(dòng)互聯(lián)網(wǎng)背景下的電子商務(wù)類網(wǎng)站的UI設(shè)計(jì)的方法。

用戶界面設(shè)計(jì)即是UI設(shè)計(jì)，是指對(duì)產(chǎn)品界面的界面美觀、人機(jī)交互、操作邏輯的整體設(shè)計(jì)。UI的本意是用戶界面，是英文單詞User和Interface的縮寫(xiě)。在移動(dòng)電子商務(wù)平臺(tái)上，界面設(shè)計(jì)是整個(gè)產(chǎn)品設(shè)計(jì)的靈魂，功能設(shè)計(jì)是產(chǎn)品設(shè)計(jì)的載體。好的UI設(shè)計(jì)不僅能讓產(chǎn)品變得美觀并且兼具個(gè)性，還會(huì)使操作變得更人性化，同時(shí)能給用戶以愉悅、便捷的體驗(yàn)。UI設(shè)計(jì)從內(nèi)容上可分為三大塊，分別是研究工具的圖形界面設(shè)計(jì)，研究人與界面關(guān)系的交互設(shè)計(jì)，研究人的用戶研究。

1　設(shè)計(jì)原則分析

1.1控制信息量

對(duì)于需要展示的信息，應(yīng)該區(qū)分主次，把重要信息集中顯示，是用戶能第一時(shí)間找到最關(guān)鍵的有效商品提示。在有較多的信息情況下，對(duì)頁(yè)面的排版、字體和顏色增加變化，使內(nèi)容和層次清晰，更容易識(shí)別。

1.2布局無(wú)障礙

過(guò)分擁擠會(huì)造成視覺(jué)疲勞，從而引起用戶情緒的抵抗，接受信息也容易出現(xiàn)錯(cuò)誤，最直接的結(jié)果就是導(dǎo)致用戶卸載這個(gè)移動(dòng)客戶端。因此一定要注意避免信息堆積，頁(yè)面可以小面積留白，例如在段落之間添加空行，以增加可讀性，可以緩解對(duì)用戶的視覺(jué)轟炸，減輕視覺(jué)疲勞。

1.3界面一致性

所有的界面設(shè)計(jì)應(yīng)該保持一致的風(fēng)格，這樣可以避免窗口、按鈕等的重復(fù)化設(shè)計(jì)，主頁(yè)及分級(jí)頁(yè)面有連貫性，界面反應(yīng)快，鼠標(biāo)在不同狀態(tài)下應(yīng)該有變化。

1.4合理使用顏色

合理的建立顏色方案，選定主體顏色，圍繞其展開(kāi)其他顏色設(shè)計(jì)。顏色以主體為主，避免過(guò)多的顏色設(shè)計(jì)，會(huì)讓人眼花繚亂，造成視覺(jué)疲勞。主次頁(yè)面顏色區(qū)別明顯，便于用戶識(shí)別。

1.5語(yǔ)言通俗

為了使客戶端被廣泛的用戶階層接受，應(yīng)該盡可能地滿足用戶需要，這時(shí)候應(yīng)當(dāng)避免過(guò)多的專業(yè)術(shù)語(yǔ)?？梢赃m當(dāng)引入一些接地氣的詞語(yǔ)，以獲得用戶的迅速認(rèn)同。

2　移動(dòng)電子商務(wù)客戶端的設(shè)計(jì)方法

移動(dòng)設(shè)計(jì)比起傳統(tǒng)電腦，它的顯示屏要小很多，這就決定了它在界面設(shè)計(jì)方面與傳統(tǒng)桌面系統(tǒng)會(huì)有明顯的差異。

本文根據(jù)用戶對(duì)移動(dòng)電子商務(wù)平臺(tái)不同部分的不同需求，對(duì)以下七大部分進(jìn)行分析研究，總結(jié)了一些通用的設(shè)計(jì)方法。

2.1導(dǎo)航設(shè)計(jì)

移動(dòng)設(shè)備的屏幕尺寸目前有越做越大，越做越薄的趨勢(shì)，但是比起PC電腦，還是要小很多，因此由于面積有限，設(shè)計(jì)者要嚴(yán)格控制導(dǎo)航的內(nèi)容，盡量做到簡(jiǎn)潔、易懂。保持垂直滾屏，減少水平滾屏。提供快捷導(dǎo)航，把常用功能放在手邊，縮短導(dǎo)航距離。

2.2購(gòu)物流程設(shè)計(jì)

不同的網(wǎng)站有不同的內(nèi)容，依照目標(biāo)用戶的購(gòu)物習(xí)慣，合理規(guī)劃購(gòu)物流程。比例母嬰電商，一般都會(huì)把紙尿褲放在首頁(yè)最顯眼的位置，因?yàn)檫@是其網(wǎng)站目標(biāo)用戶最常購(gòu)買(mǎi)的物品。盡量精簡(jiǎn)購(gòu)物步驟，設(shè)置購(gòu)物車(chē)，在商品展示頁(yè)面設(shè)計(jì)庫(kù)存提示以及到貨時(shí)間，購(gòu)物完成及發(fā)貨時(shí)都應(yīng)有郵件或者短信提示。

2.3注冊(cè)、登錄頁(yè)面設(shè)計(jì)

要求登錄對(duì)于購(gòu)物網(wǎng)站的用戶來(lái)說(shuō)，并不是很好的體驗(yàn)，因?yàn)樵谧?cè)登錄的過(guò)程中就會(huì)流失一部分客戶，所有應(yīng)該設(shè)置讓非注冊(cè)用戶也能直接購(gòu)物，另外開(kāi)設(shè)快捷注冊(cè)購(gòu)物通道，比例直接輸入手機(jī)號(hào)或者用戶名，設(shè)置密碼，就能購(gòu)物，摒除那些冗長(zhǎng)的注冊(cè)信息。對(duì)于電商商家來(lái)說(shuō)，鼓舞用戶注冊(cè)對(duì)于客戶的需求分析非常有好處，因此應(yīng)該在登錄時(shí)告知用戶注冊(cè)的好處，比例：“注冊(cè)即送代金卷”這種鼓舞購(gòu)物的福利，設(shè)置密碼找回功能，采用多種登錄方式，這樣用戶就不用為新注冊(cè)或者丟失密碼而煩惱了。

2.4商品展示設(shè)計(jì)

根據(jù)用戶需求合理規(guī)劃商品展示信息。不同的移動(dòng)客戶端針對(duì)的目標(biāo)客戶有所不同，因?yàn)閷?duì)商品的需求也不同，以數(shù)碼相機(jī)為例，在商品展示時(shí)應(yīng)該以相機(jī)的性能為重點(diǎn)設(shè)計(jì)，用戶的關(guān)注點(diǎn)會(huì)集中在像素、變焦、是否防抖等，其次可能才是相機(jī)的外觀，機(jī)器配置等，因?yàn)樵谏唐返恼故卷?yè)面要放大用戶關(guān)注點(diǎn)，弱化非關(guān)注點(diǎn)。

2.5用戶評(píng)論平臺(tái)設(shè)計(jì)

在移動(dòng)電子商務(wù)發(fā)展初期，評(píng)價(jià)功能并不突出，而在移動(dòng)互聯(lián)網(wǎng)飛速發(fā)展的今天，用戶越來(lái)越重視評(píng)價(jià)功能。很多時(shí)候在購(gòu)買(mǎi)一件商品時(shí)，一開(kāi)始關(guān)注的并不是商品的詳細(xì)信息，而是評(píng)價(jià)內(nèi)容。所有評(píng)價(jià)平臺(tái)的設(shè)計(jì)應(yīng)該盡量人性化，評(píng)分結(jié)果、信用等級(jí)要形象化；評(píng)價(jià)入口應(yīng)當(dāng)圖形化，明確標(biāo)出評(píng)價(jià)個(gè)數(shù)；對(duì)評(píng)價(jià)進(jìn)行合理的篩選、分類、排序。

2.6促銷(xiāo)特價(jià)功能設(shè)計(jì)

移動(dòng)電子商務(wù)平臺(tái)會(huì)定期進(jìn)行促銷(xiāo)活動(dòng)，這個(gè)時(shí)候也是最能吸引用戶關(guān)注的時(shí)刻，所以很多電商在這個(gè)時(shí)候都會(huì)重新進(jìn)行客戶端的界面設(shè)計(jì)。采取低廉的價(jià)格，多樣的銷(xiāo)售方式吸引用戶比例：“全場(chǎng)買(mǎi)多少送多少，買(mǎi)多少減多少，節(jié)日特價(jià)，團(tuán)購(gòu)優(yōu)惠，免運(yùn)費(fèi)”等。另外可以采用捆綁式銷(xiāo)售，指用戶在購(gòu)買(mǎi)某件商品后，網(wǎng)站會(huì)搭售低價(jià)商品或者免費(fèi)贈(zèng)送相應(yīng)的贈(zèng)品，另外推薦組合搭配購(gòu)買(mǎi)。這時(shí)用戶就會(huì)沒(méi)那么抗拒商家促銷(xiāo)，比較容易接受商家的購(gòu)物推薦。

2.7幫助信息設(shè)計(jì)

幫助系統(tǒng)是提高網(wǎng)站可用性的一個(gè)重要環(huán)節(jié)。它能夠告訴用戶在遇到問(wèn)題時(shí)的解決方法，有效地減少用戶的挫敗感。產(chǎn)品的幫助越少，產(chǎn)品的設(shè)計(jì)可能就越成功。在界面設(shè)計(jì)時(shí)應(yīng)該有幫助提示，對(duì)提出的問(wèn)題進(jìn)行分類，為用戶提供幫助人員的聯(lián)系方式。

3　移動(dòng)電子客戶端UI設(shè)計(jì)的基本流程

3.1了解目標(biāo)用戶的需求

在UI設(shè)計(jì)的過(guò)程中，首先需要確定是什么人群主要使用此客戶端，從而獲取目標(biāo)用戶的最主要需求。對(duì)于綜合性的移動(dòng)網(wǎng)站，要根據(jù)不同的目標(biāo)用戶，提供與需求相對(duì)應(yīng)的交互設(shè)計(jì)。

3.2收集目標(biāo)用戶的習(xí)慣交互方式

不同類型的目標(biāo)用戶在使用軟件時(shí)有著不同的交互習(xí)慣。這些習(xí)慣往往來(lái)源于他們使用自己熟悉軟件工具的交互過(guò)程。因此需要了解一些已經(jīng)普及軟件的交互設(shè)計(jì)。如果是大眾群體的話，要充分考慮大眾群體最常見(jiàn)的交互習(xí)慣，如果是有針對(duì)性的目標(biāo)客戶，可以針對(duì)這一部分人群的特殊交互習(xí)慣，進(jìn)行特別的分析與設(shè)計(jì)。

3.3讓用戶來(lái)主導(dǎo)軟件

移動(dòng)客戶端收到設(shè)備的限制，沒(méi)用鼠標(biāo)來(lái)輔助操作，基本只是手指運(yùn)動(dòng)，因此軟件應(yīng)該積極響應(yīng)用戶的手指動(dòng)作，并以此設(shè)計(jì)規(guī)則。UI設(shè)計(jì)應(yīng)該先收集用戶的交互習(xí)慣，然后進(jìn)一步提示用戶，指引用戶進(jìn)行需要的下一步操作。

3.4界面美化的設(shè)計(jì)

移動(dòng)電子設(shè)備與個(gè)人電腦不同，它有最大尺寸的限制，現(xiàn)在的移動(dòng)電子設(shè)備更多地是針對(duì)手機(jī)用戶，手機(jī)界面設(shè)計(jì)空間很小，因?yàn)楦嗍占脩舻氖褂昧?xí)慣，進(jìn)行簡(jiǎn)潔有針對(duì)性的界面設(shè)計(jì)，及時(shí)反饋用戶的不同需求。

3.5實(shí)現(xiàn)交互功能

在界面美化設(shè)計(jì)完成之后，需要與程序員之間建立溝通，然后修改，最終通過(guò)程序來(lái)實(shí)現(xiàn)用戶需要的交互功能。

3.6軟件測(cè)試分析

軟件在制作完成之后，要將軟件投放到不同的移動(dòng)平臺(tái)進(jìn)行測(cè)試，以此來(lái)檢測(cè)軟件所存在的問(wèn)題并進(jìn)行維護(hù)，力求將軟件的漏洞減少到最小。

4　結(jié)束語(yǔ)

移動(dòng)電子商務(wù)平臺(tái)的用戶界面設(shè)計(jì)對(duì)于互聯(lián)網(wǎng)的發(fā)展有著巨大的推動(dòng)作用，應(yīng)該合理的進(jìn)行設(shè)計(jì)，讓廣大用戶的需要得到最大限度地滿足，從而讓移動(dòng)互聯(lián)網(wǎng)更容易地普及到人民群眾的日常生活中來(lái)，讓移動(dòng)電子商務(wù)成為人們的最便利生活方式。

［1］Sunl.視覺(jué)設(shè)計(jì).移動(dòng)終端決勝之道：APP視覺(jué)設(shè)計(jì)藝術(shù)［M］.北京：電子工業(yè)出版社，2014.

［2］徐海波，等.UI群英匯：用戶體驗(yàn).交互.視覺(jué)設(shè)計(jì)方法［M］.北京：清華大學(xué)出版社，2012.

［3］王東明.精彩絕倫的Android UI設(shè)計(jì):響應(yīng)式用戶界面與設(shè)計(jì)模式［J］.中國(guó)科技信息，2013（20）.

［4］朱振恒.B/S界面規(guī)范［J］.科技信息，2009（2）.

［5］戈才學(xué).移動(dòng)互聯(lián)網(wǎng)產(chǎn)品UI視覺(jué)設(shè)計(jì)［J］.山海經(jīng)，2015（11）.

［6］張媛.UI設(shè)計(jì)中的視覺(jué)表現(xiàn)［J］.美術(shù)與設(shè)計(jì).2013（21）.

［7］王正林.UI設(shè)計(jì)的理念和方向:以WindowsUI為例［J］.院校風(fēng)采，2015（2）.

［8］顧炎輝.論手機(jī)UI設(shè)計(jì)發(fā)展趨勢(shì)［J］.規(guī)劃與設(shè)計(jì)，2009（33）.

Mobilee-commerce client UIdesign research

ZHOU Yi
（Hunan Postand Telecommunication College，Changsha，Hunan，China410015）

W ith the rapid development of mobile e-commerce，the shortage of the user interface（UI）design research has highlighted.This article details the UIdesign principles，proposes themobile e-commerce client UIdesignmethod and discusses the basic design process tobettermeet the demand of theuserexperience.

mobilee-commerce；user client；UIdesign

10.3969/j.issn.2095-7661.2016.01.005】

TP311.52

A

2095-7661（2016）01-0018-03

2015-10-29

周怡（1986-），女，湖南衡陽(yáng)人，中南民族大學(xué)碩士研究生，湖南郵電職業(yè)技術(shù)學(xué)院教師，研究方向：設(shè)計(jì)藝術(shù)學(xué)。