李安 趙熙

摘 要：隨著網(wǎng)絡(luò)信息技術(shù)的不斷發(fā)展和互聯(lián)網(wǎng)的普及，網(wǎng)絡(luò)購(gòu)物逐漸成為一種主流消費(fèi)方式。使用戶能夠通過(guò)網(wǎng)絡(luò)購(gòu)物可以買到新奇和物美價(jià)廉的商品，從而為人們的生活提供了便利。本文主要從界面設(shè)計(jì)要求以及發(fā)展前景等方面來(lái)探討關(guān)于網(wǎng)絡(luò)購(gòu)物應(yīng)用程序的設(shè)計(jì)方式，并研究其中的視覺(jué)原理與動(dòng)態(tài)效果。

關(guān)鍵詞：網(wǎng)絡(luò)購(gòu)物;視覺(jué)設(shè)計(jì);APP界面設(shè)計(jì)

一、網(wǎng)絡(luò)購(gòu)物的發(fā)展

（一）互聯(lián)網(wǎng)的發(fā)展與網(wǎng)絡(luò)購(gòu)物的發(fā)展

移動(dòng)電子商務(wù)是近幾年隨著無(wú)線移動(dòng)通訊技術(shù)發(fā)展，而新興起來(lái)的新型商務(wù)模式，它利用無(wú)線通訊技術(shù)和移動(dòng)互聯(lián)網(wǎng)進(jìn)行數(shù)據(jù)傳遞，通過(guò)智能手機(jī)、PAD和筆記本電腦等移動(dòng)設(shè)備與企業(yè)電子商務(wù)平臺(tái)網(wǎng)連接來(lái)完成商務(wù)交易過(guò)程的新型商務(wù)模式。[1]電子商務(wù)在上個(gè)世紀(jì)九十年代開(kāi)始興起，當(dāng)時(shí)還沒(méi)有一個(gè)完整的購(gòu)物體系，但是為現(xiàn)代移動(dòng)電子商務(wù)打下了基礎(chǔ)。現(xiàn)階段的移動(dòng)電子商務(wù)比傳統(tǒng)的電子商務(wù)更加便捷，選擇的種類更多，服務(wù)更加完全，不受地點(diǎn)限制?，F(xiàn)如今網(wǎng)絡(luò)購(gòu)物以及被大部分消費(fèi)者所認(rèn)可，交易的安全性、售后保障服務(wù)、商品的品質(zhì)都有良好的保障。

（二）網(wǎng)絡(luò)購(gòu)物APP中重要的設(shè)計(jì)元素

設(shè)計(jì)中每個(gè)元素相輔相成但是在購(gòu)物APP中簡(jiǎn)潔的設(shè)計(jì)和重要信息的準(zhǔn)確傳達(dá)才是重中之重。信息的傳達(dá)和用戶的交互感，一個(gè)好的交互能激發(fā)消費(fèi)者的購(gòu)物欲以及增加對(duì)此APP的依賴度，以消費(fèi)者的體驗(yàn)為主，此基礎(chǔ)上在增加審美。

二、網(wǎng)絡(luò)購(gòu)物APP界面的設(shè)計(jì)

（一）圖標(biāo)的設(shè)計(jì)

APP圖標(biāo)是整個(gè)APP的門面，圖標(biāo)應(yīng)該簡(jiǎn)潔易懂，與APP名稱相呼應(yīng)。APP圖標(biāo)的風(fēng)格也要考慮到使用人群、內(nèi)容定位、企業(yè)形象等。而且APP圖標(biāo)會(huì)影響用戶使用APP的頻率，使用一個(gè)好的桌面圖標(biāo)可以使設(shè)計(jì)達(dá)到事半功倍的效果。

1.圖標(biāo)的色彩設(shè)計(jì)

對(duì)比國(guó)內(nèi)市面上幾款主流的網(wǎng)絡(luò)綜合購(gòu)物APP產(chǎn)品的圖標(biāo)，它們?cè)陬伾矫娑嗍褂眉t色、橘色為主體顏色，白色為字體或是LOGO，或是白色的底色在中心位置放上品牌LOGO，達(dá)到一個(gè)醒目以及清晰表達(dá)的作用，風(fēng)格中性，符合大眾審美。主要是利用的是高飽和度的純色和清爽的白色拉開(kāi)對(duì)比，給使用者強(qiáng)烈的視覺(jué)沖擊。面向女性的APP則應(yīng)該加入粉色、紫色等女性向的色彩，面向男性的各位APP可以加入黑色、深藍(lán)色等，給使用者有一種專屬感和歸屬感，符合性別分類和對(duì)應(yīng)的人群的心理。

2.圖標(biāo)的圖形設(shè)計(jì)

例如蘇寧易購(gòu)（如圖2.1所示），采用了自己公司形象的小獅子加上個(gè)性化的字體設(shè)計(jì)，消費(fèi)者很快就可以鎖定選中該APP。小獅子是非常鮮明的企業(yè)文化，而且可愛(ài)活潑的小獅子表達(dá)了蘇寧的熱情活力以及親切感，在扁平化當(dāng)?shù)赖臅r(shí)代，蘇寧易購(gòu)劍走偏鋒，在LOGO運(yùn)用了立體感，讓消費(fèi)者眼前一亮。但值得注意，圖標(biāo)設(shè)計(jì)不應(yīng)該太過(guò)復(fù)雜，因?yàn)檎麄€(gè)LOGO在手機(jī)界面上很小，過(guò)多的細(xì)節(jié)不能體現(xiàn)出來(lái)，放入能展現(xiàn)出定位和形象的元素即可，簡(jiǎn)潔大方的設(shè)計(jì)才能牢牢抓住消費(fèi)者的心。

3.圖標(biāo)的關(guān)聯(lián)度

例如淘寶（如圖2.1所示），阿里巴巴是一個(gè)各APP關(guān)聯(lián)度非常高的企業(yè)，阿里巴巴集團(tuán)所有APP的LOGO設(shè)計(jì)都有相對(duì)應(yīng)的設(shè)計(jì)風(fēng)格，以及在各個(gè)時(shí)間段的活動(dòng)都能做到統(tǒng)一，阿里系的LOGO都偏愛(ài)文字。阿里巴巴集團(tuán)的企業(yè)品牌色是橙色，作為最知名的旗下品牌——淘寶，更需要展現(xiàn)它的企業(yè)文化。橘色是暖色，給人帶來(lái)正能量，就像太陽(yáng)一樣給人一種親近和溫暖的感覺(jué)，這種陽(yáng)光開(kāi)朗的顏色更能激起消費(fèi)者的購(gòu)物欲。

（二）界面設(shè)計(jì)

1.頁(yè)面設(shè)計(jì)

啟動(dòng)頁(yè)：當(dāng)我們進(jìn)入一個(gè)APP時(shí)都會(huì)有一到三秒的時(shí)間來(lái)欣賞啟動(dòng)頁(yè)，這是進(jìn)入APP時(shí)給我們的第一印象。啟動(dòng)頁(yè)好比是一個(gè)站在網(wǎng)絡(luò)商場(chǎng)門口的迎賓，雖然你進(jìn)門只會(huì)見(jiàn)到迎賓一眼，但迎賓的態(tài)度也會(huì)影響消費(fèi)者的購(gòu)物欲望和購(gòu)物心情。啟動(dòng)頁(yè)應(yīng)該傳達(dá)一種積極向上的情緒，例如大部分APP都會(huì)在啟動(dòng)頁(yè)宣傳自己的產(chǎn)品形象和目前活動(dòng)特色，或是一些簡(jiǎn)單的標(biāo)語(yǔ)來(lái)傳達(dá)自己的品牌定位，在各種節(jié)日的時(shí)候會(huì)在啟動(dòng)頁(yè)送上祝福。

首頁(yè)：首頁(yè)是最重要的頁(yè)面，是所有消費(fèi)者使用時(shí)間最長(zhǎng)的頁(yè)面，它給消費(fèi)者帶來(lái)的影響最為深遠(yuǎn)。首頁(yè)分為很多類型，列表型首頁(yè)，圖標(biāo)型首頁(yè)，卡片型首頁(yè)等。在網(wǎng)絡(luò)購(gòu)物APP中，我們使用的是綜合型，顧名思義就是前幾種類型的組合。怎樣讓綜合性模塊在首頁(yè)中表達(dá)清晰是非常重要的。首頁(yè)上大多都會(huì)放上當(dāng)下活動(dòng)或是根據(jù)個(gè)人喜好的推薦，如何做到各個(gè)推薦醒目但不影響主要使用功能就要從各方面均衡。

網(wǎng)店頁(yè)面：網(wǎng)店的頁(yè)面應(yīng)該遵循網(wǎng)店自己的風(fēng)格，選擇的商品海報(bào)、背景圖應(yīng)與商品相呼應(yīng)。主要突出商品價(jià)格以及商品的特點(diǎn)，圖片和文字描述應(yīng)該相結(jié)合，優(yōu)惠活動(dòng)時(shí)，可將商品優(yōu)惠突出。

商品頁(yè)面：商品頁(yè)面主要有四大點(diǎn)，商品名稱、商品圖片、商品價(jià)格以及商品參數(shù)。其他需要放上銷量、評(píng)價(jià)、發(fā)貨地等，購(gòu)買與咨詢客服的也應(yīng)該放在下方固定位置，方便消費(fèi)者進(jìn)行咨詢選購(gòu)。

2.圖片圖標(biāo)

視覺(jué)傳達(dá)設(shè)計(jì)中的兩大基本構(gòu)成要素即是圖形和文字。圖片作為真實(shí)對(duì)象的模擬品，能向接收者呈現(xiàn)具體事物。[2]圖片是最直觀的表達(dá)，商品的外形樣貌全部展現(xiàn)出來(lái)，文字不能完全描述商品，大量文字只會(huì)讓消費(fèi)者感到厭倦，圖片的作用就是簡(jiǎn)潔清晰的表達(dá)出商品的形象，大部分商品消費(fèi)者只要觀察圖片就可以知道商品的具體信息。所以選擇商品圖片盡量選擇物品為主體，多角度拍攝，將其特點(diǎn)展示。

而圖標(biāo)又是另一種表達(dá)，圖標(biāo)一般多用于導(dǎo)航和分類，圖標(biāo)可以被認(rèn)為是一種簡(jiǎn)化的圖片，排除掉細(xì)節(jié)僅保留原有含義。導(dǎo)航欄一般是圖標(biāo)與簡(jiǎn)單的關(guān)鍵文字結(jié)合，在各式各樣的商品圖片里它的簡(jiǎn)潔更加能夠讓消費(fèi)者一眼找到它并做出判斷?；蚴且恍┬〉木€型圖標(biāo)，例如淘寶上的個(gè)人中心、購(gòu)物車、消息等，簡(jiǎn)潔清爽，調(diào)高用戶體驗(yàn)的同時(shí)也豐富了界面的視覺(jué)感（如圖2.2所示）。

3.文字設(shè)計(jì)

文字是信息傳達(dá)中不可缺少的一個(gè)重要元素，不一樣的字體設(shè)計(jì)決定了這些文字是“主角”還是“配角”。字體有特殊的色彩和特殊的大小形狀就決定了它在界面中是一個(gè)“主角”的地位，字體和圖片結(jié)合，被藝術(shù)性創(chuàng)造過(guò)后，元素的平衡性和信息的準(zhǔn)確性會(huì)提高。大量普通的文字相對(duì)來(lái)說(shuō)圖片和藝術(shù)字來(lái)說(shuō)更適合做一個(gè)補(bǔ)充描述，但是合適的排板和合適的字體也會(huì)讓這個(gè)“配角”賞心悅目。

4.色彩設(shè)計(jì)

杰夫·約翰遜總結(jié)出的5條色彩使用準(zhǔn)則正適用于購(gòu)物類APP，它們分別是：利用飽和度、亮度、色相來(lái)區(qū)分顏色;使用更容易感知的特別的顏色避免使用色盲無(wú)法區(qū)分的顏色;是用其他元素輔助顏色。[3]顏色往往是最容易引導(dǎo)顧客心理的關(guān)鍵因素之一，因?yàn)槿耸且曈X(jué)占認(rèn)知主導(dǎo)的生物，而色彩對(duì)視覺(jué)影響最大。各種購(gòu)物APP面向的人群不同，所屬的功能不同，選擇的定位不同，選擇顏色要考慮到消費(fèi)者的心理和消費(fèi)者帶來(lái)的購(gòu)物體驗(yàn)。關(guān)于顏色也不是多多益善，要學(xué)會(huì)保持一個(gè)“中庸”。一個(gè)頁(yè)面中顏色盡量不要超過(guò)五種但不要少于三種，多了會(huì)顯得雜亂無(wú)章，少了會(huì)顯得空洞無(wú)趣。也不能總是添加過(guò)多醒目的強(qiáng)調(diào)色，讓整個(gè)頁(yè)面失去了重點(diǎn)。色彩的搭配也十分重要，盡量避免互補(bǔ)色大面積出現(xiàn)，畫面過(guò)于跳躍會(huì)使消費(fèi)者產(chǎn)生視覺(jué)刺激感，產(chǎn)生視覺(jué)疲勞;或是總是使用單調(diào)的同類色，會(huì)使得頁(yè)面拉不開(kāi)層次，沒(méi)有重點(diǎn)。如果確定了一種主色系可以多多運(yùn)用鄰近色和對(duì)比色，可以達(dá)到顏色緊密結(jié)合的同時(shí)凸顯層次，和諧統(tǒng)一，不會(huì)產(chǎn)生違和感?？梢允褂靡恍o(wú)色相的黑、白、灰與任何顏色搭配都會(huì)產(chǎn)生良好的效果。

一個(gè)APP的界面最重要的是需要確定主色和輔助色。例如得物APP，定位是年輕人的潮流衣鞋與配飾，它的主色是黑白色，配上湖綠的強(qiáng)調(diào)色（如圖2.3所示）。飽和度較高的湖綠色相對(duì)于黑白色來(lái)說(shuō)是個(gè)突出的色彩，少量運(yùn)用在界面中會(huì)給消費(fèi)者在枯燥的黑白頁(yè)面中帶來(lái)新鮮感，有著醒目的提示，更富有感染力。黑白和湖綠色是現(xiàn)代年輕人追求的流行時(shí)尚風(fēng)格，讓年輕的消費(fèi)者感受到潮流的沖擊感，讓年輕消費(fèi)者更有認(rèn)同感，簡(jiǎn)潔的風(fēng)格體現(xiàn)出他們的簡(jiǎn)約而不簡(jiǎn)單的態(tài)度。

5.版式設(shè)計(jì)

版式設(shè)計(jì)是對(duì)版面內(nèi)的文字字體、圖像圖形、線條、表格、色塊等要素，按照一定的要求進(jìn)行編排，并以視覺(jué)方式藝術(shù)地表達(dá)出來(lái)，并通過(guò)對(duì)這些要素的編排，使觀看者直覺(jué)的感受到某些要傳遞的意思。設(shè)計(jì)中也分了許多種類，我們熟知的：標(biāo)準(zhǔn)式、定位式、滿版式、自由式等。要將每個(gè)元素?cái)[得恰到好處，不顯擁擠并且突出主體。首先要確定整體的固定元素，例如上方的搜索欄和底部的導(dǎo)航欄，我們打開(kāi)APP界面第一眼一般都落在中間偏上方的位置，因?yàn)楝F(xiàn)代人的閱讀習(xí)慣是從上至下，從左往右的。為了消費(fèi)者能夠快速準(zhǔn)確的找到和搜索，上半部分這個(gè)位置適合插入比較重要的分類圖標(biāo)、導(dǎo)航欄以及宣傳窗口，而廣告與其他商品推薦則放在中間偏下的部分。

6.動(dòng)態(tài)效果

現(xiàn)如今動(dòng)態(tài)效果在界面設(shè)計(jì)中已經(jīng)非常常見(jiàn)了，一些簡(jiǎn)單的動(dòng)態(tài)會(huì)讓枯燥的頁(yè)面增加一絲趣味。我們拿淘寶舉例，在宣傳窗口中會(huì)放上八張左右的圖片海報(bào)，并且讓它自動(dòng)右滑，給消費(fèi)者帶來(lái)界面的節(jié)奏感的同時(shí)，能使每一張海報(bào)都能夠有機(jī)會(huì)讓消費(fèi)者看到。在圖標(biāo)分類的模塊中，仔細(xì)觀察會(huì)發(fā)現(xiàn)在一些時(shí)段某個(gè)特殊的分類有活動(dòng)時(shí)，圖標(biāo)會(huì)做一些簡(jiǎn)單的動(dòng)態(tài)效果，雖然在所有圖標(biāo)中它本身不起眼，但是加上動(dòng)態(tài)后，會(huì)在整個(gè)圖標(biāo)分類的模塊中脫穎而出。在搜索欄中，會(huì)滾動(dòng)出現(xiàn)一些關(guān)鍵詞，將推薦滾動(dòng)可以讓消費(fèi)者聯(lián)想起更多自己想買的商品，可以讓消費(fèi)者更快更準(zhǔn)確的找到自己想要的商品從而激發(fā)消費(fèi)者的購(gòu)物欲。

三、發(fā)展前景

（一）網(wǎng)購(gòu)模式的變化

網(wǎng)絡(luò)直播銷售是這幾年來(lái)開(kāi)始火爆起來(lái)的，用這種銷售模式與網(wǎng)絡(luò)購(gòu)物APP結(jié)合，推動(dòng)了銷售。不同于早些年的電視購(gòu)物，直播賣貨商品品種更多，優(yōu)惠更實(shí)在，還可以與主播互動(dòng)，網(wǎng)絡(luò)直播銷售看起來(lái)更像是朋友給你的推薦，沒(méi)有距離感。網(wǎng)絡(luò)直播賣貨的出現(xiàn)也增加了APP的使用頻率，有各種活動(dòng)的時(shí)候消費(fèi)者會(huì)更加積極參與，限量搶購(gòu)的模式也更加激發(fā)了消費(fèi)者的消費(fèi)激情。對(duì)主播來(lái)說(shuō)也間接給一部分人就業(yè)機(jī)會(huì)，連明星也紛紛加入這網(wǎng)絡(luò)直播賣貨的隊(duì)伍中來(lái)，可見(jiàn)這就是網(wǎng)絡(luò)購(gòu)物帶來(lái)新產(chǎn)業(yè)。

現(xiàn)代網(wǎng)絡(luò)超市已經(jīng)非常成熟了，只要?jiǎng)觿?dòng)手指商品就會(huì)送上門來(lái)。這給很多上班族和學(xué)生族帶來(lái)了便利。上班辛苦平時(shí)沒(méi)有時(shí)間去超市，提前買好需要的東西，不用自己拎回家。網(wǎng)絡(luò)超市還會(huì)有許多滿減活動(dòng)，相對(duì)來(lái)說(shuō)比去普通超市更加省錢，而且網(wǎng)絡(luò)超市商品更加全面，在當(dāng)?shù)爻匈I不到的東西也可以在網(wǎng)上找到。

（二）網(wǎng)絡(luò)購(gòu)物APP的發(fā)展

馬云先生說(shuō)過(guò)：“沒(méi)有任何人可以阻止全球化，沒(méi)有任何人可以制止貿(mào)易。”網(wǎng)絡(luò)購(gòu)物相對(duì)來(lái)說(shuō)在全球范圍內(nèi)，我國(guó)是非常普及和方便的，主要原因之一是我國(guó)的物流是非常優(yōu)秀，不論你身處哪個(gè)城市，快遞總能到達(dá)你的手中，但是身在異鄉(xiāng)的消費(fèi)者就沒(méi)有那么便利了。在經(jīng)濟(jì)全球化的時(shí)代，跨境電商也是目前我們電子商務(wù)要突破的一個(gè)難關(guān)。如何去與其他國(guó)家海關(guān)方面以及運(yùn)輸方面的對(duì)接，讓我們好商品輸出去，將國(guó)外的好商品引進(jìn)來(lái)。讓消費(fèi)者能夠安心地拿到自己想要的商品，要保證質(zhì)量也要保證速度?，F(xiàn)在阿里巴巴在有各種倉(cāng)庫(kù)，有與國(guó)外品牌合作的官方旗艦店，有全球購(gòu)認(rèn)證代購(gòu)，雖然還不是特別完善，但是也有在不斷改進(jìn)。

放眼全球，也要低頭看看自己的腳下。農(nóng)村淘寶的出現(xiàn)解決了很多由于偏遠(yuǎn)山村接收快遞不便利的問(wèn)題還有幫助村民們銷售自己家鄉(xiāng)由于滯銷買不出去的商品，這就是所謂的“網(wǎng)貨下鄉(xiāng)”和“農(nóng)產(chǎn)品進(jìn)城”。有實(shí)體店扎根，有專門的店長(zhǎng)幫助村民，但是農(nóng)村淘寶的出現(xiàn)也產(chǎn)生了許多質(zhì)疑，大部分村子并沒(méi)有那么落后，反而增加了無(wú)用的環(huán)節(jié)。但是對(duì)于村里的老年人來(lái)說(shuō)，確確實(shí)實(shí)給他們帶來(lái)了許多便利，就像多了一個(gè)現(xiàn)實(shí)生活中的客服顧問(wèn)，地形復(fù)雜的村子也有一個(gè)固定的收貨點(diǎn)，有了專門的物流點(diǎn)省去了快遞小哥的麻煩，也讓農(nóng)村消費(fèi)者退貨換貨更加方便省心。

還有各種先進(jìn)的技術(shù)，例如大數(shù)據(jù)時(shí)代，網(wǎng)絡(luò)購(gòu)物平臺(tái)能夠快速準(zhǔn)確計(jì)算出你的需求，信息處理更高效，消費(fèi)者使用感更好。更多優(yōu)秀的人機(jī)交互，例如最近阿里巴巴研究的黑科技——腦內(nèi)意念購(gòu)，利用腦機(jī)接口用大腦意念操控，可能今后只需要?jiǎng)觿?dòng)腦子就可以完成購(gòu)物，不需要手機(jī)電腦等媒介。今后的趨勢(shì)不僅僅是表層的現(xiàn)實(shí)生活，更能服務(wù)到虛擬生活，使精神層面也得到極大地豐富。

參考文獻(xiàn)

[1]劉玉軍.我國(guó)移動(dòng)電子商務(wù)運(yùn)營(yíng)模式分析與發(fā)展對(duì)策研究[J].情報(bào)科學(xué)，2014，32（4）：122.

[2]楊穎.誰(shuí)該成為體驗(yàn)型產(chǎn)品網(wǎng)絡(luò)評(píng)論的主角，圖片還是文字？ [J].心理學(xué)報(bào)，2016，48（8）：1026.

[3]（美）杰夫·約翰遜著.張一寧譯.認(rèn)知與設(shè)計(jì)：理解UI設(shè)計(jì)準(zhǔn)則[M].北京：人民郵電出版社，2011.09

作者簡(jiǎn)介：

李安（1999-），女，浙江人，浙江樹(shù)人大學(xué)。

二作：趙熙（1982-），女，江蘇人，浙江樹(shù)人大學(xué)講師，碩士，主要從事數(shù)字媒體交互設(shè)計(jì)、動(dòng)畫理論研究。