電商UI設(shè)計,其實指的就是對天貓和淘寶等的購物平臺的頁面設(shè)計,它對于提高銷量有非常重要的作用,那么電商UI設(shè)計有哪些優(yōu)勢?電商UI設(shè)計技巧有哪些呢?今天就給大家介紹下。
從電商APP淺談電商UI設(shè)計對用戶體驗的影響
一、用戶專注目標(biāo),但好的UI會引導(dǎo)用戶忘掉直接搜索
人人都需要購物,每個互聯(lián)網(wǎng)公司都需要在網(wǎng)上賣貨,如果說手機(jī)桌面上有什么APP是最不能刪除的,可能就是購物APP了。既然現(xiàn)實生活中有那么多的實體購物MALL、小夜市、大超市,為什么我們還是需要購物APP?
個人認(rèn)為最重要的原因,就是因為網(wǎng)購與購物實體店相比更方便。
這種方便主要體現(xiàn)在:
1、啟動的方便
購物更加快捷,可能你到最近的實體店要走10分鐘,但是現(xiàn)在你躺在家里沙發(fā)上就可以買買買。
2、選擇的方便
如果今天是想買鞋,只需要用搜索框搜索鞋,各種各樣的鞋躍然屏上。如果到實體店,可能只能看到一家鞋店,再找一家又得走上5公里。
3、購物過程的方便
不用一進(jìn)門就被人饑渴的眼光包圍,再被導(dǎo)購小姐跟著到處走,在網(wǎng)上購物遇到問題,只需要點(diǎn)點(diǎn)客服小按鈕,很輕松自在有木有。
4、售后的方便
電商以平臺作為擔(dān)保,還有評價系統(tǒng),比起實體店付了錢就不認(rèn)賬,維權(quán)跑斷腿的情況,確實方便很多。
(圖片來自網(wǎng)絡(luò))
二、相同的產(chǎn)品結(jié)構(gòu),不同的UI處理,會帶來不同的用戶體驗
1、對于分類ICON的處理
對比下京東和淘寶首頁視覺設(shè)計我們可以發(fā)現(xiàn),他們的產(chǎn)品框架幾乎一致:搜索導(dǎo)航欄+banner+活動+分類icon+頭條+板塊,然而由于視覺設(shè)計的不同,卻讓兩個頁面對我這個用戶造成的感覺有了些許不同!想一想,進(jìn)入下面哪個頁面的設(shè)計,更會讓你有查看分類icon的欲望呢?
2、總分類導(dǎo)航的處理
幾乎所有的電商都有整個網(wǎng)站的分類導(dǎo)航功能,就仿佛進(jìn)入一個大樓首先看到的大樓平面沙盤,它讓用戶能全面的了解應(yīng)用的所有商品,并按照自己的意愿,選擇分類去進(jìn)入。它被各類電商放在頁面不同的位置,主要來說主要分為三個位置:與子分類放在一起、頁面左上角、標(biāo)簽欄。
三、文字、顏色對用戶視覺注意力的影響
1、嘈雜的文字
周圍環(huán)境的視覺噪聲能夠干擾用戶對文字的識別,再來看看萬能的淘寶與京東的對比??梢钥吹教詫毜膱D標(biāo)設(shè)計背景更加的復(fù)雜,顏色更多,背景圖形更多,因此真正要表達(dá)的內(nèi)容反而被弱化了,加深了用戶的識別難度。來看京東,圖標(biāo)背景顏色雖然也有變化,但是漸變的很克制,沒有多余的圖形,圖標(biāo)內(nèi)容呈現(xiàn)統(tǒng)一的克制的漸變的白色,一層陰影將底與面分開,讓人看著一目了然,簡單而有細(xì)節(jié)。
2、使用低頻顏色呈現(xiàn)重點(diǎn)
電商應(yīng)用可能是所有app里面用色用的最多的了,當(dāng)然通過互聯(lián)網(wǎng)買賣商品是注意力經(jīng)濟(jì),注意力在哪里錢就在哪里,也許我們可以通過電商app對顏色的選擇,看到色彩對于引導(dǎo)用戶注意力的作用。
(圖片來自網(wǎng)絡(luò))
電商UI設(shè)計技巧總結(jié)
1、 清晰的視覺
使用高質(zhì)量且清晰的圖像
在使用智能手機(jī)購物時,最讓人感到惱火的,就是圖像不清晰,用戶無法看到商品的細(xì)節(jié)。因此,商家非常有必要提供高分辨率、清晰的圖像。安卓和iOS平臺現(xiàn)在鼓勵開發(fā)者盡量使用全屏圖像。
減少雜亂感
圖像清洗后,就要考慮排布問題了。何處應(yīng)該成為需要重點(diǎn)突出的視覺焦點(diǎn),何處做襯托。整體布局要下功夫,這樣整體看起來才不會雜亂,用戶才能高效購物,提高滿意度。
妙用關(guān)鍵色
一點(diǎn)點(diǎn)關(guān)鍵色的運(yùn)用,能夠有效的引起行為召喚,提高用戶的購物體驗。
要標(biāo)清產(chǎn)品的可選項
最后,要考慮應(yīng)該如何把一件產(chǎn)品的細(xì)節(jié),詳細(xì)的展現(xiàn)給用戶。像尺碼、顏色這種可選項細(xì)節(jié),用戶必須能夠輕易的選擇,而且整體不能顯得雜亂。
(圖片來自網(wǎng)絡(luò))
2、直觀的搜索,高效的瀏覽器過濾
提高瀏覽體驗
瀏覽這一行為本身不應(yīng)該是繁瑣的。ui設(shè)計師設(shè)計出來的瀏覽模式應(yīng)該是充滿探索樂趣,用戶易于使用的,讓用戶逐條打開分類,尋找自己感興趣的商品。盡量減少導(dǎo)航分類,同時根據(jù)用戶瀏覽記錄。
搜索商品
如果想要讓用戶高效的搜索商品,那么應(yīng)該為用戶額外提供那些便利?
第一種方案是輸入內(nèi)容時的自動相關(guān)提示。
第二種方案是提供流行關(guān)鍵詞的提示,能讓用戶及時的關(guān)注一些熱點(diǎn)產(chǎn)品。
利用好首頁的產(chǎn)品滑動展示
首頁的滑動欄往往會展示出一些熱點(diǎn)商品和相關(guān)的系列產(chǎn)品。
除了首頁之外,還可以在某款產(chǎn)品下面使用滑動欄,提供相關(guān)產(chǎn)品,提高導(dǎo)航效率。
3、社交分享和點(diǎn)贊
“我們希望用戶能時不時的掏出手機(jī),然后去看看熱點(diǎn)是什么。我們相信,只要用戶能夠喜歡瀏覽內(nèi)容,銷售問題也就自然而然的水到渠成了?!?/span>
要有自己的社區(qū)/小圈子
創(chuàng)建一個小社區(qū),這樣用戶就能很方便的分享自己喜歡的東西,這對于電商應(yīng)用來說,非常重要。做了很多工作來提高商品的分享率。他們是怎么實現(xiàn)的呢?其實就是添加了一些標(biāo)簽。
(圖片來自網(wǎng)絡(luò))
電商UI設(shè)計使用最為頻繁的紅色的配色技巧和注意事項
不知道大家有沒有發(fā)現(xiàn)一個規(guī)律和現(xiàn)象,就是國內(nèi)無論是綜合電商平臺還是垂直型的電商平臺亦或是導(dǎo)購平臺的品牌色一般都是紅色系或暖色系的,而紅色占了大邊天,其次是偏女性化的玫紅色/粉色,再或則是橙色黃色等
同時,在一些大型的活動專題頁設(shè)計里,紅色也應(yīng)該算是電商設(shè)計里運(yùn)用的最為廣泛的一種顏色了,但其實很多人對紅色該在什么時候用,或者該怎么用依然很缺乏了解,紅色用的好則是兼大歡喜,用得不好要么會顯得俗氣和不干凈,或者會顯得頁面很壓抑很膩。
1、紅色的釋義
從性格色彩的層面來說,紅色代表熱情/熱鬧/刺激/欲望/奔放/喜慶/血腥暴力;
從顏色的層面來說,根據(jù)色相/明度/飽和度的不同紅色也分很多種紅啊,比如大紅/深紅/品紅/粉紅/棗紅/朱紅/橙紅/紫紅等等;
從作用的層面來說,紅色代表危險警示/突出強(qiáng)調(diào)/錯誤提醒/性刺激/公布喜訊等等;
2、紅色在電商設(shè)計里的運(yùn)用
正是因為紅色有以上的感官刺激作用,所以它常運(yùn)用于一些要體現(xiàn)喜慶/熱鬧/激發(fā)別人欲望/或者要體現(xiàn)恐怖情緒的電商或海報設(shè)計里。同時紅色也常用來作為點(diǎn)綴色出現(xiàn),以強(qiáng)調(diào)某個重要信息。
如果產(chǎn)品本身就是紅色時:其實任何類目任何產(chǎn)品都有紅色系列,比如/家電數(shù)碼/服飾鞋包/美妝護(hù)膚等,如果干脆將背景也弄成紅色與產(chǎn)品融為一體,會帶來非常強(qiáng)的視覺效果,而且不會覺得膩
(圖片來自網(wǎng)絡(luò))
3、與紅色有關(guān)的常用色彩搭配有哪些?
紅色是很熱烈的顏色,是暖色,也是一種百搭色,但并不是每個人都玩得好它,可它偏偏又是電商設(shè)計里用的最為頻繁的一種顏色,那么今天我就給大家例舉一些常用的優(yōu)秀的紅色與其它顏色的搭配好了:
左邊是大面積的紅色搭配少許相近色或鄰近色顯得很高檔耐看;右邊是大面積的粉嫩色系搭配少于紅色和藍(lán)紫色,冷暖搭配,俏皮又耐看。
當(dāng)紅色與這種偏灰的漸變色搭配時,畫面立馬變得柔和清新脫俗起來。
紅色與藍(lán)白黑灰永遠(yuǎn)都是經(jīng)典搭配,既可以制造一種復(fù)古的感覺,也能給人一種冷靜與激情的相碰撞感覺。
在大面積的淺灰色里,只需要點(diǎn)綴少許紅色,就可以制造出一種靜謐又不顯單調(diào)的感覺了。
在一些比較俏皮的手繪畫面里,紅色既可以作為大面積背景色來包容五彩斑斕的多彩色,如左邊所示;也可以以非常小面積的點(diǎn)綴色出現(xiàn),用來突出強(qiáng)調(diào)某個重要信息,比如價格啊/利益點(diǎn)啊/特殊說明文字啊之類的。
無論你的背景是簡單還是復(fù)雜,當(dāng)紅色塊面積足夠大時,它依然會成為焦點(diǎn)。
大紅色及深色的結(jié)合搭配熒光色會有一種非常詭異個性的感覺。
番茄炒雞蛋的紅黃搭配容易給人一種復(fù)古溫暖的感覺,但為了畫面不至于太膩歪,最好是搭配一點(diǎn)冷色或暗色比較好。
當(dāng)紅色運(yùn)用在一些形狀的規(guī)則排列上時是很容易制造出簡介時尚感噠!~
通過以上的內(nèi)容,大家已經(jīng)了解了電商UI設(shè)計的優(yōu)勢了,可見,進(jìn)行電商UI設(shè)計是有很多的好處的,但是在做電商UI設(shè)計的時候,還需要掌握一定的技巧和方法。后續(xù)小編也會繼續(xù)更新一些關(guān)于產(chǎn)品UI設(shè)計方面的內(nèi)容哦~