汽車電商平臺交互設(shè)計的研究與實現(xiàn)

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

?

汽車電商平臺交互設(shè)計的研究與實現(xiàn)

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

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

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

1　汽車電商平臺綜述

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

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

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

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

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

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

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

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

汽車電商的平臺的興起，就一定要分析和研究用戶需求，從而帶來好的用戶體驗。

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

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

3　用戶體驗與界面設(shè)計

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

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

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

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

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

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

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

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

4　總結(jié)

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

參考文獻：

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

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

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

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

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