一個(gè)電商網(wǎng)站該如何設(shè)計(jì)呢？

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

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

• 所提供的產(chǎn)品或者服務(wù)的質(zhì)量
• 所提供的內(nèi)容的質(zhì)量
• 電商平臺(tái)本身的素質(zhì)（網(wǎng)站或者APP的質(zhì)量）

從這幾點(diǎn)可以發(fā)現(xiàn)，除開銷售的產(chǎn)品本身，平臺(tái)本身的UI/UX 設(shè)計(jì)起到了至關(guān)重要的作用。界面邏輯是否通順，微交互是否清晰明了，系統(tǒng)的反饋速度是否迅速，產(chǎn)品介紹是否具有吸引力，支付流程是否安全而便捷，細(xì)節(jié)的設(shè)計(jì)是否走心，都將直接影響著整個(gè)電商平臺(tái)。這也是為什么電商設(shè)計(jì)平臺(tái)當(dāng)中，需要團(tuán)隊(duì)內(nèi)設(shè)計(jì)師和營(yíng)銷專家在內(nèi)的所有人通力合作。

電商網(wǎng)站的設(shè)計(jì)在需求上有著獨(dú)特性，所以這次?Tubik Studio的設(shè)計(jì)師的任務(wù)是設(shè)計(jì)一個(gè)電商網(wǎng)站 Vinny’s Bakery，看看他們是怎么做的吧。

任務(wù)

為制作新鮮精美的手工面包的品牌設(shè)計(jì)一個(gè)線上銷售面包的電商網(wǎng)站，需要設(shè)計(jì)相關(guān)的UI和UX

設(shè)計(jì)過程

要設(shè)計(jì)這個(gè)電商網(wǎng)站或者APP，設(shè)計(jì)師需要預(yù)先考慮好下面幾個(gè)方面：

• 操作要足夠便捷
• 強(qiáng)化品牌特征
• 用戶數(shù)據(jù)的安全性
• 高效的視覺元素
• 通過菜單和目錄等清晰的展現(xiàn)數(shù)據(jù)
• 用戶能夠通過平臺(tái)留下對(duì)于商品和服務(wù)的反饋
• 有關(guān)商品和服務(wù)應(yīng)當(dāng)留下便于用戶聯(lián)系的渠道或者聯(lián)系方式
• 設(shè)計(jì)應(yīng)該服務(wù)于整個(gè)電商平臺(tái)，而不應(yīng)成為障礙

基于這些原則，Tubik Studio 的設(shè)計(jì)師 Ernest Asanov 研究了整個(gè)市場(chǎng)的趨勢(shì)，分析了實(shí)際購(gòu)買這些商品的實(shí)際客戶和潛在的目標(biāo)受眾。在獲得相應(yīng)的數(shù)據(jù)之后，設(shè)計(jì)師盡量遵循用戶友好的原則，采取相對(duì)簡(jiǎn)約的風(fēng)格，設(shè)計(jì)對(duì)于目標(biāo)受眾有吸引力的的UI。

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

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

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

點(diǎn)擊特定的項(xiàng)目，用戶可以查看關(guān)于這款面包的更多詳細(xì)信息，包括說明，重量，營(yíng)養(yǎng)，價(jià)格，評(píng)級(jí)和加購(gòu)物車按鈕。面包的產(chǎn)品圖是支撐整個(gè)頁面的視覺焦點(diǎn)，這樣會(huì)讓頁面更加簡(jiǎn)潔，不會(huì)讓用戶分心。

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

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

原文作者：Tubik Studio

原文地址：uxplanet

譯者：@陳子木

來源：優(yōu)設(shè)網(wǎng)

題圖由作者提供