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

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

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

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

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

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

義務(wù)

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

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

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

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

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

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

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

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

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

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

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

【這些設(shè)計(jì)實(shí)戰(zhàn)同樣來自Tubik Studio】