楊學(xué)順（武漢迅泊達(dá)金融服務(wù)有限公司,武漢　430000）

?

汽車電商平臺(tái)交互設(shè)計(jì)的研究與實(shí)現(xiàn)

楊學(xué)順
（武漢迅泊達(dá)金融服務(wù)有限公司,武漢430000）

摘 要：隨著近年來(lái)互聯(lián)網(wǎng)產(chǎn)業(yè)高速發(fā)展，淘寶京東等大型電商平臺(tái)的興起，越來(lái)越多的行業(yè)開始建設(shè)自己的線上平臺(tái)，人們開始更多的重視產(chǎn)品的視覺(jué)設(shè)計(jì)和人機(jī)交互的用戶體驗(yàn)。以此通過(guò)對(duì)汽車電商平臺(tái)的交互分析，包括界面與圖標(biāo)的設(shè)計(jì)與應(yīng)用，達(dá)到人機(jī)的完美結(jié)合。

關(guān)鍵詞：電商交互界面；應(yīng)用與實(shí)現(xiàn)；汽車電商平臺(tái)

1　汽車電商平臺(tái)綜述

在這個(gè)信息日益全球化的今天智能終端影響著人們生活的方方面面，然而，相當(dāng)多的智能終端產(chǎn)品因其復(fù)雜的操作方法讓人們望而卻步。而傳統(tǒng)工業(yè)設(shè)計(jì)方法著重強(qiáng)調(diào)形式和功能的辯證關(guān)系，在強(qiáng)調(diào)產(chǎn)品可用性和用戶體驗(yàn)的今天很難解決智能終端產(chǎn)品“難用”的問(wèn)題。這就突出了“以用戶為中心”交互設(shè)計(jì)在工業(yè)設(shè)計(jì)中的重要性。

本論文對(duì)汽車電商平臺(tái)的分析主要從視覺(jué)設(shè)計(jì)和交互設(shè)計(jì)兩個(gè)方面進(jìn)行。現(xiàn)在獨(dú)自創(chuàng)建的汽車電商平臺(tái)有：汽車之家、易車網(wǎng)、等等。我們通過(guò)分析網(wǎng)頁(yè)設(shè)計(jì)、框架設(shè)計(jì)、內(nèi)容排版、圖片運(yùn)用等等，來(lái)總結(jié)個(gè)個(gè)平臺(tái)的優(yōu)劣勢(shì)，從而為我們提供一定的依據(jù)和參考。

首先拿汽車之家舉例：網(wǎng)頁(yè)欄目留白的間距不夠多，每個(gè)欄目之間區(qū)分的不明顯。整體框架三列板塊式布局，視覺(jué)給人扎實(shí)穩(wěn)重，重點(diǎn)地方的色彩突出的比較明顯，給人一目了然。但是在搜索車型的用戶體驗(yàn)沒(méi)有易車網(wǎng)好，對(duì)于人們關(guān)心的價(jià)格搜索并沒(méi)有設(shè)置。

在網(wǎng)站內(nèi)部的搜索欄給用戶體驗(yàn)的感覺(jué)也沒(méi)有易車網(wǎng)那樣簡(jiǎn)潔明了。在品牌和車型海選的時(shí)候沒(méi)有產(chǎn)品縮略圖，僅僅是文字的敘述，略顯單調(diào)。

然后我們從另一個(gè)角度分析一下易車網(wǎng)，我們從視覺(jué)設(shè)計(jì)的角度來(lái)看，比如圖標(biāo)設(shè)計(jì)：

這兩組網(wǎng)站的圖標(biāo)，都存在一定的問(wèn)題，首先第一組圖標(biāo)風(fēng)格不統(tǒng)一，第一個(gè)汽車報(bào)價(jià)大全圖標(biāo)做了投影浮雕效果，而后面的確實(shí)扁平化的風(fēng)格。然后圖標(biāo)設(shè)計(jì)沒(méi)有簡(jiǎn)潔實(shí)用，圖標(biāo)差異性也沒(méi)有表達(dá)出來(lái)。

第二組圖標(biāo)的設(shè)計(jì)以扁平化為主，色彩樣式統(tǒng)一，圖標(biāo)表達(dá)的含義也較為簡(jiǎn)單清晰，但是可以明顯的發(fā)現(xiàn)缺乏設(shè)計(jì)元素和想法，僅僅只是簡(jiǎn)單的幾何圖形配上一個(gè)文字或者符號(hào)。在互聯(lián)網(wǎng)高速發(fā)展的今天，為了追求一個(gè)工作效率和時(shí)間成本，這樣的設(shè)計(jì)從另一個(gè)角度上來(lái)說(shuō)是可行，但是這樣的圖標(biāo)后期是一定要去優(yōu)化和修改的。我們可以從它的樣式、風(fēng)格、藝術(shù)性、識(shí)別性、獨(dú)創(chuàng)性上進(jìn)行改善。從而在提升視覺(jué)效果的同時(shí)也可以節(jié)省用戶的時(shí)間，提升點(diǎn)擊效率。

2　汽車網(wǎng)站用戶需求和構(gòu)架

汽車電商的平臺(tái)的興起，就一定要分析和研究用戶需求，從而帶來(lái)好的用戶體驗(yàn)。

分析用戶需求我們主要從用戶特點(diǎn)來(lái)分析。目標(biāo)用戶主要是指進(jìn)行網(wǎng)上購(gòu)物的人群，年齡階層偏向上班組的中年段，在用戶的使用中也要考慮不會(huì)用按鈕點(diǎn)擊，復(fù)雜操作的中老年人。

網(wǎng)站構(gòu)架，以功能需求為主，大的構(gòu)架包括新車買賣、二手車買賣、汽車配件三大板塊。

3　用戶體驗(yàn)與界面設(shè)計(jì)

好的界面設(shè)計(jì)可以大幅度提升用戶體驗(yàn)，我們的設(shè)計(jì)要充分符合中國(guó)人的使用習(xí)慣并結(jié)合人們的審美需求。

以下是通過(guò)實(shí)際的案例來(lái)分析和研究，好的交互設(shè)計(jì)是如何實(shí)現(xiàn)和運(yùn)用的。這個(gè)首頁(yè)的界面設(shè)計(jì)，視覺(jué)沖擊力非常強(qiáng)，簡(jiǎn)潔明了，顏色的運(yùn)用的也非常的好。先從色彩上來(lái)說(shuō)，以白色為主，在需要強(qiáng)調(diào)的地方運(yùn)用了紅色和深灰色，不僅色彩的對(duì)比強(qiáng)烈，也充分符合企業(yè)VI手冊(cè)的色彩識(shí)別標(biāo)準(zhǔn)。再如購(gòu)物車橙色的按鈕，符合人們的心理需求，橙色讓用戶更有點(diǎn)擊的欲望。

接著我們分析一下恒信首頁(yè)的圖標(biāo)設(shè)計(jì)。最顯而易見的是六個(gè)欄目的大圖標(biāo)，寫實(shí)風(fēng)格，有一定的趣味性，圖標(biāo)的色彩雖然五顏六色，但并不雜亂，主要原因是因?yàn)樯识啵实氖褂妹娣e并不大，整個(gè)頁(yè)面的主色調(diào)依然是白色和灰色為主，圖標(biāo)的色彩很好的作為輔助顏色，點(diǎn)綴其中。然后六個(gè)圖標(biāo)的風(fēng)格統(tǒng)一，識(shí)別性強(qiáng)，給人們的體驗(yàn)是看圖即知道含義。接著登陸框的兩個(gè)小圖標(biāo)也與之前的圖標(biāo)做了很好的對(duì)比，層次清晰。底部六個(gè)常駐圖標(biāo)，在色彩上略顯過(guò)深，從形式上來(lái)說(shuō)具有一定的藝術(shù)性，下面的文字也很好的和圖標(biāo)形成了一個(gè)層次對(duì)比，黑白灰的運(yùn)用不會(huì)給你帶來(lái)審美疲勞。

網(wǎng)站的整體設(shè)計(jì)風(fēng)格，我們可以看出，設(shè)計(jì)以簡(jiǎn)潔為主，這樣設(shè)計(jì)的原因，主要還是基于前期的需求分析和產(chǎn)品經(jīng)理給的產(chǎn)品原型來(lái)定的。不難發(fā)現(xiàn)這樣的設(shè)計(jì)很好的明確了目標(biāo)，沒(méi)有多余的地方，一方面給用戶節(jié)省了時(shí)間，另一方面也可以減少服務(wù)器負(fù)擔(dān)，節(jié)省企業(yè)成本，優(yōu)化網(wǎng)站運(yùn)行速度。

所以在界面設(shè)計(jì)中如何做到盡量的簡(jiǎn)潔和好的用戶體驗(yàn)顯的格外的重要。圖標(biāo)在當(dāng)今的web端和移動(dòng)端都大量的運(yùn)用到，它的特點(diǎn)視覺(jué)沖擊力比文字強(qiáng)，帶給人們新鮮感，吸引人們點(diǎn)擊和使用。當(dāng)然用戶體驗(yàn)的提升不僅僅局限于圖標(biāo)的視覺(jué)設(shè)計(jì)。

在這兩個(gè)頁(yè)面中，登錄框的大小、擺放的位置、文字的大小、色彩、頁(yè)面布局、點(diǎn)擊樣式、鼠標(biāo)放上去的樣式、頁(yè)面跳轉(zhuǎn)的合理性都是影響用戶提的方面。

中國(guó)人的使用習(xí)慣是視覺(jué)中心偏向右邊，登錄框放在banner的右邊位置醒目，誘使人們進(jìn)行注冊(cè)登錄，積累平臺(tái)潛在客戶。文字的大小以12號(hào)為主，顏色使用并不用純黑色，而是深灰色，這樣做的原因是視覺(jué)對(duì)比有，人們感官上會(huì)顯的舒服。頁(yè)面布局穩(wěn)重，有層次，也簡(jiǎn)潔很多。點(diǎn)擊樣式鼠標(biāo)放上去的效果，引導(dǎo)人們點(diǎn)擊，和幫助人們更好找到點(diǎn)擊的目標(biāo)區(qū)域，頁(yè)面跳轉(zhuǎn)設(shè)置也摒除了繁瑣的幾步跳轉(zhuǎn)，直接鏈接到了目標(biāo)頁(yè)面，給人們好的體驗(yàn)。

汽車電商平臺(tái)圖標(biāo)的差異化的研究，主要通過(guò)實(shí)例來(lái)分析。在這個(gè)頁(yè)面設(shè)計(jì)上圖標(biāo)的差異化并沒(méi)有表現(xiàn)出來(lái)，沒(méi)有區(qū)分團(tuán)購(gòu)、特賣、促銷。這六個(gè)圖標(biāo)設(shè)計(jì)中都運(yùn)用了車的元素，相反的給了用戶一定的誤導(dǎo)，沒(méi)有差異化的圖標(biāo)，設(shè)計(jì)出來(lái)是失敗的，扁平化的設(shè)計(jì)，在視覺(jué)沖擊力上來(lái)說(shuō)也略顯單薄。

4　總結(jié)

用戶產(chǎn)品設(shè)計(jì)和圖形設(shè)計(jì)的傳統(tǒng)方法著重關(guān)注的是與工藝、美感和形式相關(guān)的美學(xué)品質(zhì)。解決設(shè)計(jì)問(wèn)題乃以情感價(jià)值為依據(jù)，對(duì)成果的評(píng)判或批評(píng)也往往是在藝術(shù)領(lǐng)域的范疇進(jìn)行的。與之不同的是，交互設(shè)計(jì)將重心從視覺(jué)效果轉(zhuǎn)移到了人這方面上。

參考文獻(xiàn)：

[1]梅哲.圖形圖像界面中的圖標(biāo)設(shè)計(jì)[D].武漢理工大學(xué),2009.

[2]楊文.論標(biāo)志設(shè)計(jì)的重點(diǎn)與難點(diǎn)[J].233000.

[3]Jon Kolko.交互設(shè)計(jì)沉思錄[M].機(jī)械工業(yè)出版社,2012(10).

指導(dǎo)老師：陳啟祥

DOI:10.16640/j.cnki.37-1222/t.2016.03.178