詳解阿里巴巴皮革城網(wǎng)站設計總結發(fā)布者：本站     時(shí)間：2021-12-23 11:12:02

在服裝服飾市場(chǎng)的基礎上，以皮革維度對市場(chǎng)進(jìn)行強營(yíng)銷(xiāo)。從材質(zhì)維度對買(mǎi)家進(jìn)行導購，以真皮為堆頭打造品質(zhì)，以革為推手促進(jìn)交易，還原線(xiàn)下皮革市場(chǎng)的場(chǎng)景。

詳解阿里巴巴皮革城網(wǎng)站<a href=/design/ target=_blank class=infotextkey>設計</a>總結,PS教程,

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

從業(yè)務(wù)需求上來(lái)看，要將皮革城打造成一個(gè)相對獨立，以真皮為核心、革(潮元素)為推手的高端特色市場(chǎng)。由于皮草、皮革受眾多為女性，故女性化也成為皮革城設計的重要標簽。

在此基礎上的特色市場(chǎng)設計應區別于傳統的行業(yè)頻道頁(yè)面，保持相對獨立以及突出批發(fā)特色。

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

前期設計風(fēng)格探索中，我們將皮革城的設計拆解為3個(gè)方向，分別是：色彩設定、質(zhì)感運用、結構排版。

1)色彩設定

在色彩的探索上，跳出WEB設計的局限。收集了大量手機端、營(yíng)銷(xiāo)設計、服裝設計的作品，包括到線(xiàn)下的商城去尋找設計的靈感。試圖運用視覺(jué)感受營(yíng)造一種高端、以女性為主的批發(fā)市場(chǎng)氛圍。

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

分析結果：以紫色搭配金棕色來(lái)烘托市場(chǎng)氛圍，契合皮革類(lèi)產(chǎn)品氣質(zhì)。

2)質(zhì)感運用

在質(zhì)感運用方面，需要尋找新的切入點(diǎn)去挖掘產(chǎn)品的個(gè)性特征。使它區別于傳統頻道頁(yè)面，讓用戶(hù)耳目一新。

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

分析結果：走扁平化的設計風(fēng)格。阿拉伯設計師Abu Naji認為扁平化設計不僅僅是一種時(shí)尚，更是一場(chǎng)”反對數據過(guò)載的革命”，是一項改變過(guò)多細節的凈化技術(shù)。

3)結構排版

在信息結構的編排上，從用戶(hù)體驗的角度出發(fā)，合理控制信息密度與閱讀節奏，靈活突出以真皮為主導的營(yíng)銷(xiāo)策略，豐富市場(chǎng)信息。

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

分析結果：采用靈活的模塊化結構，強化信息分區。

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

在把握大的設計方向后，我們用解構的方法去落實(shí)具體的設計。

簡(jiǎn)單的理解，解構主義——解開(kāi)之后再構成。著(zhù)名建筑師弗蘭克?蓋里曾經(jīng)說(shuō)過(guò)：”建筑設計應當抱有與科學(xué)研究相同的態(tài)度，即破舊立新，而不是對固有觀(guān)念的重復?！蹦敲?，這種方法運用到我們的設計中，即是從理解業(yè)務(wù)到打破固有模式的框架，重構頁(yè)面。

我們主要提煉出2個(gè)模塊來(lái)分析一下。

1)首屏設計

以下是我們常見(jiàn)的頻道頁(yè)面交互稿。

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

可以看到此模塊由LOGO區、搜索區、導航區、類(lèi)目區、BANNER區構成。如果直接潤色成為視覺(jué)稿，信息的視覺(jué)層次會(huì )不夠清晰。我們調整重構模塊后，得到以下視覺(jué)稿：

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

對比一下我們做了哪些改變：

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

將原有的6個(gè)模塊打散后重新組合，整合到規整的4個(gè)模塊中去。結構更加清晰、簡(jiǎn)單。

1. 加重了類(lèi)目區的比重，默認突出展示女式分類(lèi)，突出運營(yíng)主打女款市場(chǎng)。

2. 放大了BANNER區。在一期規劃中加大視覺(jué)沖擊力，營(yíng)造皮革城的品牌感。也為二期規劃預留足夠的切割資源位。

3. 相對弱化導航區。皮革城從基本屬性上來(lái)說(shuō)，是一個(gè)聚合型引流頁(yè)面，我們希望引導用戶(hù)直接產(chǎn)生交易。

2)產(chǎn)業(yè)帶模塊設計

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

交互稿中有5個(gè)產(chǎn)業(yè)帶，其中突出展示廣州與海寧。在這2個(gè)區域中需要展示30張圖片。如果不重構頁(yè)面，最終會(huì )導致信息爆棚。

我們將設計稿整理成為：

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

加入TAB切換來(lái)靈活展示全部?jì)热?。在承載了大量?jì)热莸那疤嵯?，?jiǎn)單的切換動(dòng)畫(huà)使頁(yè)面更富生趣。

下面來(lái)梳理一下這塊的設計思路：

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

在頁(yè)面設計中營(yíng)造出音樂(lè )般的節奏感，便能有效的引導用戶(hù)在閱覽時(shí)有節奏的”停頓”，減少閱讀疲勞。配合區塊化的設計，有利于感知不同區塊的信息，使 用戶(hù)迅速定位及了解全局。如果不采用區塊化的設計，就需要用更多的留白空間去營(yíng)造節奏感，使得頁(yè)面冗長(cháng)，造成一定量的用戶(hù)流失。

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

BANNER的規范既可以減少運維同學(xué)的制作成本，也可以控制住頁(yè)面的統一性，使廣告更好融到入頁(yè)面中去。

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

皮革城的數據從初期到穩定期呈現出一個(gè)健康的上升趨勢。上線(xiàn)初期CTR在100%左右，穩定后上浮50%，達到150%—160%。頁(yè)面UV在穩定后維持在6000左右，較初期上線(xiàn)投放更精準。

詳解阿里巴巴皮革城網(wǎng)站設計總結,PS教程,

皮革城圍繞皮質(zhì)維度進(jìn)行導購，顛覆了服裝服飾市場(chǎng)按品類(lèi)導購的模式。它的個(gè)性化突出了服裝市場(chǎng)的特性，既有市場(chǎng)的創(chuàng )新，也是對線(xiàn)下皮革行業(yè)的還原。皮革城會(huì )在后期的規劃迭代中，進(jìn)一步優(yōu)化，提升用戶(hù)體驗。