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

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

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

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

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

在此基礎(chǔ)上的特色市場(chǎng)設(shè)計(jì)應(yīng)區(qū)別于傳統(tǒng)的行業(yè)頻道頁面，保持相對(duì)獨(dú)立以及突出批發(fā)特色。

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

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

1)色彩設(shè)定

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

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

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

2)質(zhì)感運(yùn)用

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

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

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

3)結(jié)構(gòu)排版

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

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

分析結(jié)果：采用靈活的模塊化結(jié)構(gòu)，強(qiáng)化信息分區(qū)。

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

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

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

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

1)首屏設(shè)計(jì)

以下是我們常見的頻道頁面交互稿。

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

可以看到此模塊由LOGO區(qū)、搜索區(qū)、導(dǎo)航區(qū)、類目區(qū)、BANNER區(qū)構(gòu)成。如果直接潤(rùn)色成為視覺稿，信息的視覺層次會(huì)不夠清晰。我們調(diào)整重構(gòu)模塊后，得到以下視覺稿：

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

對(duì)比一下我們做了哪些改變：

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

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

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

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

3. 相對(duì)弱化導(dǎo)航區(qū)。皮革城從基本屬性上來說，是一個(gè)聚合型引流頁面，我們希望引導(dǎo)用戶直接產(chǎn)生交易。

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

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

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

我們將設(shè)計(jì)稿整理成為：

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

加入TAB切換來靈活展示全部?jī)?nèi)容。在承載了大量?jī)?nèi)容的前提下，簡(jiǎn)單的切換動(dòng)畫使頁面更富生趣。

下面來梳理一下這塊的設(shè)計(jì)思路：

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

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

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

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

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

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

詳解阿里巴巴皮革城網(wǎng)站設(shè)計(jì)總結(jié),PS教程,

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