網絡購物APP的界面設計的研究

李安 趙熙

摘 要：隨著網絡信息技術的不斷發展和互聯網的普及，網絡購物逐漸成為一種主流消費方式。使用戶能夠通過網絡購物可以買到新奇和物美價廉的商品，從而為人們的生活提供了便利。本文主要從界面設計要求以及發展前景等方面來探討關于網絡購物應用程序的設計方式，并研究其中的視覺原理與動態效果。

關鍵詞：網絡購物;視覺設計;APP界面設計

一、網絡購物的發展

（一）互聯網的發展與網絡購物的發展

移動電子商務是近幾年隨著無線移動通訊技術發展，而新興起來的新型商務模式，它利用無線通訊技術和移動互聯網進行數據傳遞，通過智能手機、PAD和筆記本電腦等移動設備與企業電子商務平臺網連接來完成商務交易過程的新型商務模式。[1]電子商務在上個世紀九十年代開始興起，當時還沒有一個完整的購物體系，但是為現代移動電子商務打下了基礎。現階段的移動電子商務比傳統的電子商務更加便捷，選擇的種類更多，服務更加完全，不受地點限制。現如今網絡購物以及被大部分消費者所認可，交易的安全性、售后保障服務、商品的品質都有良好的保障。

（二）網絡購物APP中重要的設計元素

設計中每個元素相輔相成但是在購物APP中簡潔的設計和重要信息的準確傳達才是重中之重。信息的傳達和用戶的交互感，一個好的交互能激發消費者的購物欲以及增加對此APP的依賴度，以消費者的體驗為主，此基礎上在增加審美。

二、網絡購物APP界面的設計

（一）圖標的設計

APP圖標是整個APP的門面，圖標應該簡潔易懂，與APP名稱相呼應。APP圖標的風格也要考慮到使用人群、內容定位、企業形象等。而且APP圖標會影響用戶使用APP的頻率，使用一個好的桌面圖標可以使設計達到事半功倍的效果。

1.圖標的色彩設計

對比國內市面上幾款主流的網絡綜合購物APP產品的圖標，它們在顏色方面多使用紅色、橘色為主體顏色，白色為字體或是LOGO，或是白色的底色在中心位置放上品牌LOGO，達到一個醒目以及清晰表達的作用，風格中性，符合大眾審美。主要是利用的是高飽和度的純色和清爽的白色拉開對比，給使用者強烈的視覺沖擊。面向女性的APP則應該加入粉色、紫色等女性向的色彩，面向男性的各位APP可以加入黑色、深藍色等，給使用者有一種專屬感和歸屬感，符合性別分類和對應的人群的心理。

2.圖標的圖形設計

例如蘇寧易購（如圖2.1所示），采用了自己公司形象的小獅子加上個性化的字體設計，消費者很快就可以鎖定選中該APP。小獅子是非常鮮明的企業文化，而且可愛活潑的小獅子表達了蘇寧的熱情活力以及親切感，在扁平化當道的時代，蘇寧易購劍走偏鋒，在LOGO運用了立體感，讓消費者眼前一亮。但值得注意，圖標設計不應該太過復雜，因為整個LOGO在手機界面上很小，過多的細節不能體現出來，放入能展現出定位和形象的元素即可，簡潔大方的設計才能牢牢抓住消費者的心。

3.圖標的關聯度

例如淘寶（如圖2.1所示），阿里巴巴是一個各APP關聯度非常高的企業，阿里巴巴集團所有APP的LOGO設計都有相對應的設計風格，以及在各個時間段的活動都能做到統一，阿里系的LOGO都偏愛文字。阿里巴巴集團的企業品牌色是橙色，作為最知名的旗下品牌——淘寶，更需要展現它的企業文化。橘色是暖色，給人帶來正能量，就像太陽一樣給人一種親近和溫暖的感覺，這種陽光開朗的顏色更能激起消費者的購物欲。

（二）界面設計

1.頁面設計

啟動頁：當我們進入一個APP時都會有一到三秒的時間來欣賞啟動頁，這是進入APP時給我們的第一印象。啟動頁好比是一個站在網絡商場門口的迎賓，雖然你進門只會見到迎賓一眼，但迎賓的態度也會影響消費者的購物欲望和購物心情。啟動頁應該傳達一種積極向上的情緒，例如大部分APP都會在啟動頁宣傳自己的產品形象和目前活動特色，或是一些簡單的標語來傳達自己的品牌定位，在各種節日的時候會在啟動頁送上祝福。

首頁：首頁是最重要的頁面，是所有消費者使用時間最長的頁面，它給消費者帶來的影響最為深遠。首頁分為很多類型，列表型首頁，圖標型首頁，卡片型首頁等。在網絡購物APP中，我們使用的是綜合型，顧名思義就是前幾種類型的組合。怎樣讓綜合性模塊在首頁中表達清晰是非常重要的。首頁上大多都會放上當下活動或是根據個人喜好的推薦，如何做到各個推薦醒目但不影響主要使用功能就要從各方面均衡。

網店頁面：網店的頁面應該遵循網店自己的風格，選擇的商品海報、背景圖應與商品相呼應。主要突出商品價格以及商品的特點，圖片和文字描述應該相結合，優惠活動時，可將商品優惠突出。

商品頁面：商品頁面主要有四大點，商品名稱、商品圖片、商品價格以及商品參數。其他需要放上銷量、評價、發貨地等，購買與咨詢客服的也應該放在下方固定位置，方便消費者進行咨詢選購。

2.圖片圖標

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

而圖標又是另一種表達，圖標一般多用于導航和分類，圖標可以被認為是一種簡化的圖片，排除掉細節僅保留原有含義。導航欄一般是圖標與簡單的關鍵文字結合，在各式各樣的商品圖片里它的簡潔更加能夠讓消費者一眼找到它并做出判斷。或是一些小的線型圖標，例如淘寶上的個人中心、購物車、消息等，簡潔清爽，調高用戶體驗的同時也豐富了界面的視覺感（如圖2.2所示）。

3.文字設計

文字是信息傳達中不可缺少的一個重要元素，不一樣的字體設計決定了這些文字是“主角”還是“配角”。字體有特殊的色彩和特殊的大小形狀就決定了它在界面中是一個“主角”的地位，字體和圖片結合，被藝術性創造過后，元素的平衡性和信息的準確性會提高。大量普通的文字相對來說圖片和藝術字來說更適合做一個補充描述，但是合適的排板和合適的字體也會讓這個“配角”賞心悅目。

4.色彩設計

杰夫·約翰遜總結出的5條色彩使用準則正適用于購物類APP，它們分別是：利用飽和度、亮度、色相來區分顏色;使用更容易感知的特別的顏色避免使用色盲無法區分的顏色;是用其他元素輔助顏色。[3]顏色往往是最容易引導顧客心理的關鍵因素之一，因為人是視覺占認知主導的生物，而色彩對視覺影響最大。各種購物APP面向的人群不同，所屬的功能不同，選擇的定位不同，選擇顏色要考慮到消費者的心理和消費者帶來的購物體驗。關于顏色也不是多多益善，要學會保持一個“中庸”。一個頁面中顏色盡量不要超過五種但不要少于三種，多了會顯得雜亂無章，少了會顯得空洞無趣。也不能總是添加過多醒目的強調色，讓整個頁面失去了重點。色彩的搭配也十分重要，盡量避免互補色大面積出現，畫面過于跳躍會使消費者產生視覺刺激感，產生視覺疲勞;或是總是使用單調的同類色，會使得頁面拉不開層次，沒有重點。如果確定了一種主色系可以多多運用鄰近色和對比色，可以達到顏色緊密結合的同時凸顯層次，和諧統一，不會產生違和感。可以使用一些無色相的黑、白、灰與任何顏色搭配都會產生良好的效果。

一個APP的界面最重要的是需要確定主色和輔助色。例如得物APP，定位是年輕人的潮流衣鞋與配飾，它的主色是黑白色，配上湖綠的強調色（如圖2.3所示）。飽和度較高的湖綠色相對于黑白色來說是個突出的色彩，少量運用在界面中會給消費者在枯燥的黑白頁面中帶來新鮮感，有著醒目的提示，更富有感染力。黑白和湖綠色是現代年輕人追求的流行時尚風格，讓年輕的消費者感受到潮流的沖擊感，讓年輕消費者更有認同感，簡潔的風格體現出他們的簡約而不簡單的態度。

5.版式設計

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

6.動態效果

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

三、發展前景

（一）網購模式的變化

網絡直播銷售是這幾年來開始火爆起來的，用這種銷售模式與網絡購物APP結合，推動了銷售。不同于早些年的電視購物，直播賣貨商品品種更多，優惠更實在，還可以與主播互動，網絡直播銷售看起來更像是朋友給你的推薦，沒有距離感。網絡直播賣貨的出現也增加了APP的使用頻率，有各種活動的時候消費者會更加積極參與，限量搶購的模式也更加激發了消費者的消費激情。對主播來說也間接給一部分人就業機會，連明星也紛紛加入這網絡直播賣貨的隊伍中來，可見這就是網絡購物帶來新產業。

現代網絡超市已經非常成熟了，只要動動手指商品就會送上門來。這給很多上班族和學生族帶來了便利。上班辛苦平時沒有時間去超市，提前買好需要的東西，不用自己拎回家。網絡超市還會有許多滿減活動，相對來說比去普通超市更加省錢，而且網絡超市商品更加全面，在當地超市買不到的東西也可以在網上找到。

（二）網絡購物APP的發展

馬云先生說過：“沒有任何人可以阻止全球化，沒有任何人可以制止貿易。”網絡購物相對來說在全球范圍內，我國是非常普及和方便的，主要原因之一是我國的物流是非常優秀，不論你身處哪個城市，快遞總能到達你的手中，但是身在異鄉的消費者就沒有那么便利了。在經濟全球化的時代，跨境電商也是目前我們電子商務要突破的一個難關。如何去與其他國家海關方面以及運輸方面的對接，讓我們好商品輸出去，將國外的好商品引進來。讓消費者能夠安心地拿到自己想要的商品，要保證質量也要保證速度。現在阿里巴巴在有各種倉庫，有與國外品牌合作的官方旗艦店，有全球購認證代購，雖然還不是特別完善，但是也有在不斷改進。

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

還有各種先進的技術，例如大數據時代，網絡購物平臺能夠快速準確計算出你的需求，信息處理更高效，消費者使用感更好。更多優秀的人機交互，例如最近阿里巴巴研究的黑科技——腦內意念購，利用腦機接口用大腦意念操控，可能今后只需要動動腦子就可以完成購物，不需要手機電腦等媒介。今后的趨勢不僅僅是表層的現實生活，更能服務到虛擬生活，使精神層面也得到極大地豐富。

參考文獻

[1]劉玉軍.我國移動電子商務運營模式分析與發展對策研究[J].情報科學，2014，32（4）：122.

[2]楊穎.誰該成為體驗型產品網絡評論的主角，圖片還是文字？ [J].心理學報，2016，48（8）：1026.

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

作者簡介：

李安（1999-），女，浙江人，浙江樹人大學。

二作：趙熙（1982-），女，江蘇人，浙江樹人大學講師，碩士，主要從事數字媒體交互設計、動畫理論研究。