電商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)容哦~