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

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

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

• 所提供的產(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ì)是否走心，都將直接影響著整個(gè)電商平臺。這也是為什么電商設(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ì)一個(gè)電商網(wǎng)站 Vinny’s Bakery，看看他們是怎么做的吧。

義務(wù)

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

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

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

• 操作要充足便捷
• 強(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ù)于整個(gè)電商平臺，而不應(yīng)成為停滯

基于這些原則，Tubik Studio 的設(shè)計(jì)師 Ernest Asanov 研究了整個(gè)市場的趨勢，分析了現(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)一路塑造出整個(gè)網(wǎng)站的主題風(fēng)格，微文案在視覺上也具備吸引人點(diǎn)擊的特點(diǎn)，提拔網(wǎng)站的團(tuán)體轉(zhuǎn)化率。

接下來，看看這個(gè)網(wǎng)站的產(chǎn)品目錄：因?yàn)樨溬u的產(chǎn)品是奇怪的手工面包，漂亮的產(chǎn)品圖幾乎是必備的組成部分，搭配上每款面包的核心信息，用戶可以快速地欣賞、篩選吻合本身口味和需求的產(chǎn)品。在這個(gè)展示區(qū)域，設(shè)計(jì)師讓用戶可以水平滾動以查看更多的產(chǎn)品，這也是為什么靠近屏幕邊緣的最后一個(gè)產(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)，價(jià)格，評級和加購物車按鈕。面包的產(chǎn)品圖是支撐整個(gè)網(wǎng)頁的視覺焦點(diǎn)，如許會讓網(wǎng)頁更加簡潔，不會讓用戶分心。

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

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

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