一個電商網站該如何設計呢？

雖然京東淘寶亞馬遜這樣的電商網站占據著主流，但是在世界范圍內，各種各樣大小不一的電子商務類網站和APP依然在蓬勃地發展著。更便捷的支付方式，不僅讓用戶更容易購買產品，也讓電子商務網站的整個用戶流程得以完善?，F如今，電商網站的競爭正在變的越來越激烈，也越來越多樣化。

根據Tubik Studio?商業設計的經驗，電商平臺的成功通常取決于下面的幾個因素：

• 所提供的產品或者服務的質量
• 所提供的內容的質量
• 電商平臺本身的素質（網站或者APP的質量）

從這幾點可以發現，除開銷售的產品本身，平臺本身的UI/UX 設計起到了至關重要的作用。界面邏輯是否通順，微交互是否清晰明了，系統的反饋速度是否迅速，產品介紹是否具有吸引力，支付流程是否安全而便捷，細節的設計是否走心，都將直接影響著整個電商平臺。這也是為什么電商設計平臺當中，需要團隊內設計師和營銷專家在內的所有人通力合作。

電商網站的設計在需求上有著獨特性，所以這次?Tubik Studio的設計師的任務是設計一個電商網站 Vinny’s Bakery，看看他們是怎么做的吧。

任務

為制作新鮮精美的手工面包的品牌設計一個線上銷售面包的電商網站，需要設計相關的UI和UX

設計過程

要設計這個電商網站或者APP，設計師需要預先考慮好下面幾個方面：

• 操作要足夠便捷
• 強化品牌特征
• 用戶數據的安全性
• 高效的視覺元素
• 通過菜單和目錄等清晰的展現數據
• 用戶能夠通過平臺留下對于商品和服務的反饋
• 有關商品和服務應當留下便于用戶聯系的渠道或者聯系方式
• 設計應該服務于整個電商平臺，而不應成為障礙

基于這些原則，Tubik Studio 的設計師 Ernest Asanov 研究了整個市場的趨勢，分析了實際購買這些商品的實際客戶和潛在的目標受眾。在獲得相應的數據之后，設計師盡量遵循用戶友好的原則，采取相對簡約的風格，設計對于目標受眾有吸引力的的UI。

由于網站是用來為一家小型的手工面包店來推廣其產品的，所以，首頁需要承載他們的主要的產品鏈接、相關的服務介紹、公司的介紹以及社交媒體和更多的信息。設計師熱衷標題、圖片、背景和文案的排版組合來視覺化地傳遞信息，便于用戶感知，將新鮮出爐的面包所特有的溫暖感，呈現在用戶面前，勾起他們購買的欲望。在這樣的設計方案基礎上，服務的定位也就越加的清晰了，這家手工面包店是高端的面包類產品的生產者和供應商，這些經過手工制作的面包有著超市里量產的面包所不具備的獨特屬性，相應的，成本也相對更高。

在網頁風格的設定上，設計師希望它能傳遞出協調的感受：深色的背景，作為品牌特征的文本LOGO和位于中線上，清晰明了的標題能夠在訪客心理上建立起正面的情緒，其他的視覺元素和美味的糕點一起塑造出整個網站的主題風格，微文案在視覺上也具備吸引人點擊的特點，提升網站的整體轉化率。

接下來，看看這個網站的產品目錄：由于銷售的產品是新鮮的手工面包，漂亮的產品圖幾乎是必備的組成部分，搭配上每款面包的核心信息，用戶可以快速地瀏覽、篩選符合自己口味和需求的產品。在這個展示區域，設計師讓用戶可以水平滾動以查看更多的產品，這也是為什么靠近屏幕邊緣的最后一個產品并非完全顯示，這樣可以暗示用戶，向右滾動可以查看更多。用戶在首頁可以直接通過“Add”按鈕將商品添加到購物車當中，無需進入子頁面。特別是對于回頭客而言，這種設計能跳過多余的操作。當然，對于想了解更多的用戶，點擊面包自然就能進入對應的子頁面了，兩不耽誤。

點擊特定的項目，用戶可以查看關于這款面包的更多詳細信息，包括說明，重量，營養，價格，評級和加購物車按鈕。面包的產品圖是支撐整個頁面的視覺焦點，這樣會讓頁面更加簡潔，不會讓用戶分心。

仔細查看整個交互過程，你會發現頁頭和頁腳是固定的，水平滾動可以查看更多面包，而以產品為核心的視覺設計，讓整個頁面充滿了聚焦感。平滑的過渡動效連接著所有的交互，模擬出物理世界中交互應有的質感。

而網頁設計中另外一方面值得注意的，應該就是它的字體和排版設計。為了便于用戶在使用過程中更好地閱讀內容，字體的類型和大小都盡量達到一目了然的效果，色彩則則貼合產品，采用了和面包相近的橙色，這樣一來，和深色的背景產生了明顯的對比。背景采用的圖案和紋理則模擬了面包師制作面包時候操作臺上布滿面粉的效果，這樣也和面包的主題產生了關聯。整個設計從視覺到主題都高度的一致，在功能上也確保了易讀性、可用性和易用性。作為一個電商網站，功能和體驗上也達到了要求。

原文作者：Tubik Studio

原文地址：uxplanet

譯者：@陳子木

來源：優設網

題圖由作者提供