電商是這幾年比較火的行業(yè)，這也是給很多的年輕朋友帶來(lái)了一個(gè)非常好的商機(jī)，隨著電商的競(jìng)爭(zhēng)激烈，很多朋友在做電商ui設(shè)計(jì)工作都是非常的重視的，那么這個(gè)電商ui設(shè)計(jì)到底怎么做呢？今天就讓faceui告訴大家。

　　電商ui設(shè)計(jì)要注意哪些細(xì)節(jié)？

　　1、靈活登錄

　　登錄頁(yè)面通常是用戶體驗(yàn)的第一個(gè)比較難解決的問(wèn)題，所以在做這方面工作的時(shí)候，盡量做一些可以增加登錄的靈活性，避免一些復(fù)雜的登錄操作步驟。即登錄是可選的，直達(dá)到達(dá)購(gòu)物車(chē)或使用APP的其他功能時(shí)，這時(shí)候才要求用戶注冊(cè)。

　　在創(chuàng)建賬戶之前，允許新用戶試用APP，進(jìn)行探索并體驗(yàn)即登錄是可選的，直到到達(dá)購(gòu)物車(chē)或使用APP的其他功能時(shí)，才要求用戶注冊(cè)。其價(jià)值，這樣才能更好的留住他們。除此之外，考慮通過(guò)外部賬戶(如微信、支付寶等)加入其他登錄選項(xiàng)，讓用戶可以跳過(guò)信息填寫(xiě)，只需單擊2次，即可快捷登錄。

　　電商ui設(shè)計(jì)

　　完全允許用戶隨意瀏覽，在加入購(gòu)物車(chē)，或者是使用愿望清單等功能時(shí)，才要求注冊(cè)。另外，可以允許外部賬戶登陸，簡(jiǎn)化了注冊(cè)的一切步驟。

　　2、搜索的多樣性

　　“我相信攝像頭會(huì)成為下一個(gè)鍵盤(pán)”，Pinterest的CEO Ben Silbermann 曾這樣說(shuō)?；ヂ?lián)網(wǎng)的搜索欄正在進(jìn)化，已不再僅限于文本。越來(lái)越多的APP將文本與其他功能的結(jié)合，通過(guò)視覺(jué)Al來(lái)增強(qiáng)搜索的交互性。同時(shí)，我們不僅可以通過(guò)視覺(jué)線索識(shí)別產(chǎn)品，還可以獲得更多相關(guān)信息。例如，如果你拍了一張牛油果的照片，搜索結(jié)果可能會(huì)顯示牛油果沙拉的食譜。

　　除此之外，掃描條形碼可以大大的減少了出錯(cuò)的可能性，而且能夠讓你直接找到商品，在語(yǔ)音搜索增強(qiáng)了可訪問(wèn)性，并且可以為忙于其他活動(dòng)的用戶提供便利。

　　3、按產(chǎn)品類(lèi)別瀏覽

　　使用電商APP時(shí)，除了直接搜索，用戶還會(huì)瀏覽界面以發(fā)現(xiàn)新事物，而產(chǎn)品分類(lèi)恰好可為這個(gè)過(guò)程提供便利。目前很多APP都以一種直觀的方式，為用戶改進(jìn)產(chǎn)品分類(lèi)，希望用戶能更快的找到所需的商品。

　　這就像當(dāng)你走進(jìn)一家雜貨店，商品都擺在應(yīng)在的貨架上，肯定比都擺放在過(guò)道上要好很多?？纯词忻嫔系碾娚藺PP，你會(huì)發(fā)現(xiàn)有的甚至專(zhuān)門(mén)設(shè)置了一個(gè)單獨(dú)的產(chǎn)品分類(lèi)界面。同時(shí)，為了用戶獲得更愉快的瀏覽體驗(yàn)，我們可以考慮將圖片或圖標(biāo)與類(lèi)別標(biāo)簽結(jié)合起來(lái)。

　　4、卡片多樣且一致

　　卡片是用戶們首先與之交互的UI元素，如果可以讓卡片多樣且一致的話，那么將有助于為你的APP創(chuàng)建一個(gè)難忘的第一印象。

　　在多樣性上，可以嘗試這為不同類(lèi)型的信息創(chuàng)建風(fēng)格不同的卡片，完全可以將信息從視覺(jué)上區(qū)分開(kāi)來(lái)，并幫助用戶學(xué)習(xí)視覺(jué)語(yǔ)言。如果缺乏多樣性的話，那么用戶將會(huì)很難去讀懂卡片設(shè)計(jì)的意思。

　　同時(shí)，也要努力使卡片在每個(gè)屏幕上保持一致。如果你有一個(gè)特定信息的卡片類(lèi)型，試著讓它始終保持相同，這樣它才容易識(shí)別。在實(shí)際應(yīng)用中，蘋(píng)果商店的設(shè)計(jì)就是個(gè)很好的例子。

　　5、不同階段有不同的行動(dòng)指引

　　看過(guò)眾多電商APP后，可以明顯注意到它們的行動(dòng)按鈕不止一個(gè)，通常是2-3個(gè)按鈕涵蓋了客戶旅程中的不同用戶階段。

　　例如，Ebay有連續(xù)的“保存”、“添加到購(gòu)物車(chē)”和“現(xiàn)在購(gòu)買(mǎi)”按鈕。當(dāng)你想立即購(gòu)買(mǎi)某一商品時(shí)，“立即購(gòu)買(mǎi)”是很好的選擇。然而，當(dāng)你等待打折或比較商品時(shí)，“收藏”按鈕會(huì)更好。

　　“添加到購(gòu)物車(chē)”在你一次購(gòu)買(mǎi)少量物品時(shí)很有意義，但當(dāng)用戶還沒(méi)有完全準(zhǔn)備好購(gòu)買(mǎi)時(shí)，只有一個(gè)“現(xiàn)在購(gòu)買(mǎi)”按鈕，明顯是不夠的，還可能會(huì)破壞用戶的購(gòu)物體驗(yàn)。

　　6、特定產(chǎn)品設(shè)置頂部標(biāo)簽

　　電商APP中，產(chǎn)品的頁(yè)面一般都很長(zhǎng)，這通常是由于我們?cè)噲D將所有細(xì)節(jié)都進(jìn)行介紹。而根據(jù)尼爾森的一項(xiàng)研究，以下是一個(gè)產(chǎn)品頁(yè)面最受歡迎的功能列表：

　?。?）必須擁有：產(chǎn)品名稱，圖像，價(jià)格，選項(xiàng)，可用性，添加到購(gòu)物車(chē)，描述。

　?。?）選擇擁有：評(píng)級(jí)或評(píng)論，附加圖片，視頻，縮放/平移，相關(guān)建議，愿望清單。

　　在頂部放置標(biāo)簽，可以幫助用戶快速找到感興趣的內(nèi)容。需要注意的是，選項(xiàng)卡應(yīng)該包含相同層次結(jié)構(gòu)級(jí)別的相關(guān)內(nèi)容。選項(xiàng)卡需要是可伸縮的，在添加主題時(shí)，可以使用可滾動(dòng)的固定選項(xiàng)卡。

　　電商ui設(shè)計(jì)

　　7、漸進(jìn)展示

　　在展示大量信息時(shí)，可以通過(guò)多個(gè)頁(yè)面將其進(jìn)行拆解，從而降低它的復(fù)雜性。否則用戶可能會(huì)覺(jué)得結(jié)賬很麻煩，面對(duì)這一系列的選填項(xiàng)目，會(huì)有點(diǎn)難以接受，甚至?xí)艞壻?gòu)物。

　　然而，看到同樣的表單，被分成多個(gè)步驟就會(huì)感覺(jué)容易得多。同時(shí)要注意的是，我們需要在屏幕的下半部分留出放置鍵盤(pán)的空間。

　　以上就是faceui給大家詳細(xì)的講解了關(guān)于電商ui設(shè)計(jì)時(shí)所需要注意的細(xì)節(jié)，如果你想要了解更多的ui設(shè)計(jì)或者是有這個(gè)需求的話，都是可以找faceui來(lái)幫助你的。