這個電商網(wǎng)站不止是看起來很好吃

雖然京東淘寶亞馬遜如許的電商網(wǎng)站占有著主流，但是活著界范圍內，各種各樣大小不一的電子商務類網(wǎng)站和APP依然在蓬勃地發(fā)展著。更便捷的付出體例，不僅讓用戶更容易購買產(chǎn)品，也讓電子商務網(wǎng)站的整個用戶流程得以完美?，F(xiàn)現(xiàn)在，電商網(wǎng)站的競爭正在變的越來越激烈，也越來越多樣化。

根據(jù)Tubik Studio 商業(yè)設計的經(jīng)驗，電商平臺的成功通常取決于下面的幾個因素：

• 所提供的產(chǎn)品或者服務的質量
• 所提供的內容的質量
• 電商平臺自己的素質（網(wǎng)站或者APP的質量）

從這幾點可以發(fā)現(xiàn)，除開販賣的產(chǎn)品自己，平臺自己的UI/UX 設計起到了至關緊張的作用。界面邏輯是否暢通，微交互是否清晰明了，體系的反饋速度是否敏捷，產(chǎn)品介紹是否具有吸引力，付出流程是否安全而便捷，細節(jié)的設計是否走心，都將直接影響著整個電商平臺。這也是為什么電商設計平臺當中，必要團隊內設計師和營銷專家在內的所有人共同努力。

電商網(wǎng)站的設計在需求上有著獨特征，所以這次 Tubik Studio 的設計師的義務是設計一個電商網(wǎng)站 Vinny’s Bakery，看看他們是怎么做的吧。

義務

為制作奇怪優(yōu)美的手工面包的品牌設計一個線上販賣面包的電商網(wǎng)站，必要設計相干的UI和UX

設計過程

要設計這個電商網(wǎng)站或者APP，設計師必要預先考慮好下面幾個方面：

• 操作要充足便捷
• 強化品牌特性
• 用戶數(shù)據(jù)的安全性
• 高效的視覺元素
• 通過菜單和目錄等清晰的顯現(xiàn)數(shù)據(jù)
• 用戶能夠通過平臺留下對于商品和服務的反饋
• 有關商品和服務應當留下便于用戶聯(lián)系的渠道或者聯(lián)系體例
• 設計應該服務于整個電商平臺，而不應成為停滯

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

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

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

接下來，看看這個網(wǎng)站的產(chǎn)品目錄：因為販賣的產(chǎn)品是奇怪的手工面包，漂亮的產(chǎn)品圖幾乎是必備的組成部分，搭配上每款面包的核心信息，用戶可以快速地欣賞、篩選吻合本身口味和需求的產(chǎn)品。在這個展示區(qū)域，設計師讓用戶可以水平滾動以查看更多的產(chǎn)品，這也是為什么靠近屏幕邊緣的最后一個產(chǎn)品并非完全表現(xiàn)，如許可以暗示用戶，向右滾動可以查看更多。用戶在首頁可以直接通過“Add”按鈕將商品添加到購物車當中，無需進入子網(wǎng)頁。分外是對于回頭客而言，這種設計能跳過多余的操作。當然，對于想了解更多的用戶，點擊面包天然就能進入對應的子網(wǎng)頁了，兩不延遲。

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

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

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

【這些設計實戰(zhàn)同樣來自Tubik Studio】