張藍(lán)藝

【摘 要】本文從架構(gòu)設(shè)計(jì)、購物流程設(shè)計(jì)以及界面視覺設(shè)計(jì)對現(xiàn)有購物網(wǎng)站界面設(shè)計(jì)與用戶體驗(yàn)進(jìn)行分析，并從以上三個(gè)方面對云向南微商城展開設(shè)計(jì)。

【關(guān)鍵詞】微商城；設(shè)計(jì)

中圖分類號：J04 文獻(xiàn)標(biāo)志碼：A 文章編號：1007-0125（2017）11-0200-01

隨著新媒體網(wǎng)絡(luò)科技的快速發(fā)展，人們越來越喜愛網(wǎng)上購物，而顧客對網(wǎng)上購物的訴求也從最初的單純追求低價(jià)格上升到追求完美、個(gè)性化、甚至與線下購物趨同的購物體驗(yàn)。

一、現(xiàn)有購物網(wǎng)站界面及購物流程設(shè)計(jì)分析

對現(xiàn)有購物網(wǎng)站的用戶體驗(yàn)分析從網(wǎng)站的架構(gòu)設(shè)計(jì)、購物流程設(shè)計(jì)、界面視覺設(shè)計(jì)三個(gè)方面展開。

良倉是一個(gè)主推設(shè)計(jì)精良的商品，面向具有一定消費(fèi)能力并追求高品質(zhì)生活的消費(fèi)人群的網(wǎng)站。良倉的整體架構(gòu)分為三級頁面，首頁、商品分類頁與購買頁。在商品分類中，良倉的分類是比較細(xì)致的，良倉的首頁有一些專題推薦，推薦的內(nèi)容往往是與節(jié)日、季節(jié)相關(guān)。而良倉的一級分類除了商品之外，還有雜志，分享和達(dá)人分類，在雜志的分類下有一些分享新鮮事物的文章，分享的內(nèi)容包括時(shí)尚、文化、數(shù)碼等。在這其中還有一個(gè)清單分類，類似于淘寶的特色專題，而兩者相比較良倉的清單命名更具文化性。個(gè)人認(rèn)為這個(gè)清單的實(shí)用性還是較高的，現(xiàn)代人每天的生活都很疲憊，整天處于一個(gè)壓力大的環(huán)境中，沒有耐心去看復(fù)雜的事物，很多人更愿意去看整理歸納好的物品。

良倉的購物流程設(shè)計(jì)首先是消費(fèi)者選定商品，可選擇購買顏色與數(shù)量，選定商品后可選擇立即購買或是加入購物車，選擇購買后進(jìn)入確認(rèn)訂單頁面，此頁面為購買信息界面；提交訂單后出現(xiàn)選擇付款方式頁面，確認(rèn)付款后系統(tǒng)自動(dòng)轉(zhuǎn)換到第三方網(wǎng)站進(jìn)行付款完成交易。就購物體驗(yàn)及服務(wù)來說，良倉在整個(gè)網(wǎng)站上只有一個(gè)在線客服及客服電話，而淘寶每一個(gè)店鋪都配有客服，在看了一些市場調(diào)研后，發(fā)現(xiàn)良倉的售后做得很不全面，無法直接在訂單中追蹤物流去向，也沒有消息發(fā)送到消費(fèi)者的手機(jī)上告知訂單進(jìn)程，因此很多消費(fèi)者認(rèn)為淘寶購物體驗(yàn)比良倉更好。

良倉整體的界面風(fēng)格是以簡潔為主，整個(gè)界面的版塊都是在框架中，使界面顯得很規(guī)矩，整體的大色調(diào)采用了黑白灰三色，而為了使版面不會(huì)太過于無趣，在廣告和促銷的版塊又使用了彩色純色背景，色彩的飽和度并不高，與整個(gè)畫面的黑白灰三色搭配起來顯得很雅致。界面的內(nèi)容則主要是以圖片為主，整個(gè)界面除了廣告和促銷圖片上的文字再無其他多余的文字，商品詳情與價(jià)格則在移動(dòng)到商品上時(shí)才顯現(xiàn)。網(wǎng)站界面并沒有太突出的圖標(biāo)，都是網(wǎng)站常見的一些圖標(biāo)，但值得注意的是商品圖片右下角出現(xiàn)的促銷與活動(dòng)圖標(biāo)，設(shè)計(jì)都是由良倉logo演變而來。

整體來說，良倉整個(gè)的界面還是充滿了設(shè)計(jì)感，精致又不沉悶，很符合網(wǎng)站的定位。

二、云向南微商城設(shè)計(jì)思路

云向南微商城是一個(gè)主打云南本地特色食品及進(jìn)口食品的購物網(wǎng)站。市場定位是面向中等收入水平并且對生活品質(zhì)有一定追求的人群，應(yīng)根據(jù)市場定位及消費(fèi)者喜好來進(jìn)行網(wǎng)站架構(gòu)設(shè)計(jì)分析。網(wǎng)站的大體設(shè)計(jì)風(fēng)格理念與良倉相似。

在架構(gòu)設(shè)計(jì)上，云向南微商城的大體構(gòu)架也分為三級頁面，首頁除去放登陸、注冊、廣告、推薦商品此類網(wǎng)站基本的版塊之外，還增加了吸引消費(fèi)者購買的促銷版塊與更好地幫助消費(fèi)者挑選的特色專題版塊，通過市場調(diào)研結(jié)果，專題與促銷版塊能有效地提高消費(fèi)者的購買欲。首頁的搜索框應(yīng)放在顯眼易見的地方。二級界面則包含商品詳細(xì)分類、推薦商品以及符合條件商品篩選與商品按條件排序。符合條件商品篩選功能是在購買時(shí)可將該類別下所有的商品按照價(jià)格、品牌、作用等條件來進(jìn)行篩選，能幫助消費(fèi)者更快地找到想要的商品，而推薦商品則是網(wǎng)站根據(jù)用戶所瀏覽商品來給用戶推薦同類商品。三級界面則是商品詳情與購買頁。此外還應(yīng)在網(wǎng)站每個(gè)界面都提供在線客服的小窗，使消費(fèi)者在購物出現(xiàn)問題時(shí)隨時(shí)都能與網(wǎng)站溝通。

許多人選擇在網(wǎng)上購物除了品種豐富，性價(jià)比高等因素外，很大一部分原因是網(wǎng)上購物的方便快捷以及良好的售后服務(wù)，因此購物流程這個(gè)環(huán)節(jié)對于消費(fèi)者的購物體驗(yàn)來說是至關(guān)重要的。大致的購買流程與其他購物網(wǎng)站相似，要注意的是在消費(fèi)者的整個(gè)消費(fèi)過程中，客服以及售后服務(wù)顯得尤為重要，網(wǎng)站應(yīng)該有24小時(shí)在線客服為消費(fèi)者答疑。

根據(jù)云向南網(wǎng)站的定位，整體設(shè)計(jì)風(fēng)格以簡潔精致為主，網(wǎng)站的所有元素統(tǒng)一在版塊中使版面整齊。但整個(gè)網(wǎng)站的設(shè)計(jì)如果太過規(guī)矩又會(huì)顯得太沉悶，使消費(fèi)者沒有購買欲望，因此在設(shè)計(jì)時(shí)要考慮到如何使界面簡潔精致又不至于單調(diào)無趣。在排版方式上，可設(shè)計(jì)版塊的大小變化給整個(gè)畫面增加節(jié)奏感。在色彩的選擇上，整個(gè)網(wǎng)站的主色調(diào)搭配“云向南”logo的主色調(diào)來使用，商品圖片可統(tǒng)一用深色灰色系或原木底來著重突出商品并增加商品的品質(zhì)感，但食物類商品應(yīng)使用白色來搭配。單是用黑白灰色系出現(xiàn)在整個(gè)版面中會(huì)使版面顯得單調(diào)無趣，設(shè)計(jì)可以從廣告條與促銷版塊的色彩入手，通過網(wǎng)站品牌理念整理出一組色彩，將其運(yùn)用在廣告條的背景中。整個(gè)版面要在保持完整性的同時(shí)盡可能少地出現(xiàn)元素，使版面給人以精致的感覺，因此商品信息設(shè)計(jì)在鼠標(biāo)移動(dòng)到圖片后出現(xiàn)。圖標(biāo)設(shè)計(jì)應(yīng)使用線條纖細(xì)的圖標(biāo)，纖細(xì)的線條往往給人現(xiàn)代，精致的感覺。