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

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

　　1、靈活登錄

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

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

　　電商ui設(shè)計

　　完全允許用戶隨意瀏覽，在加入購物車，或者是使用愿望清單等功能時，才要求注冊。另外，可以允許外部賬戶登陸，簡化了注冊的一切步驟。

　　2、搜索的多樣性

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

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

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

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

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

　　4、卡片多樣且一致

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

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

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

　　5、不同階段有不同的行動指引

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

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

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

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

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

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

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

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

　　電商ui設(shè)計

　　7、漸進(jìn)展示

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

　　然而，看到同樣的表單，被分成多個步驟就會感覺容易得多。同時要注意的是，我們需要在屏幕的下半部分留出放置鍵盤的空間。

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