amy：在服裝服飾市場的基礎上，以皮革維度對市場進行強營銷。從材質維度對買家進行導購，以真皮為堆頭打造品質，以革為推手促進交易，還原線下皮革市場的場景。

從業務需求上來看，要將皮革城打造成一個相對獨立，以真皮為核心、革（潮元素）為推手的高端特色市場。由于皮草、皮革受眾多為女性，故女性化也成為皮革城設計的重要標簽。

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

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

1）色彩設定

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

分析結果：以紫色搭配金棕色來烘托市場氛圍，契合皮革類產品氣質。

2）質感運用

在質感運用方面，需要尋找新的切入點去挖掘產品的個性特征。使它區別于傳統頻道頁面，讓用戶耳目一新。

分析結果：走扁平化的設計風格。阿拉伯設計師Abu Naji認為扁平化設計不僅僅是一種時尚，更是一場"反對數據過載的革命"，是一項改變過多細節的凈化技術。

3）結構排版

在信息結構的編排上，從用戶體驗的角度出發，合理控制信息密度與閱讀節奏，靈活突出以真皮為主導的營銷策略，豐富市場信息。

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

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

簡單的理解，解構主義——解開之后再構成。著名建筑師弗蘭克?蓋里曾經說過："建筑設計應當抱有與科學研究相同的態度，即破舊立新，而不是對固有觀念的重復。"那么，這種方法運用到我們的設計中，即是從理解業務到打破固有模式的框架，重構頁面。

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

1）首屏設計

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

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

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

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

1. 加重了類目區的比重，默認突出展示女式分類，突出運營主打女款市場。

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

3. 相對弱化導航區。皮革城從基本屬性上來說，是一個聚合型引流頁面，我們希望引導用戶直接產生交易。

2）產業帶模塊設計

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

我們將設計稿整理成為：

加入TAB切換來靈活展示全部內容。在承載了大量內容的前提下，簡單的切換動畫使頁面更富生趣。

下面來梳理一下這塊的設計思路：

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

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

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

皮革城圍繞皮質維度進行導購，顛覆了服裝服飾市場按品類導購的模式。它的個性化突出了服裝市場的特性，既有市場的創新，也是對線下皮革行業的還原。皮革城會在后期的規劃迭代中，進一步優化，提升用戶體驗。

http://pigecheng.1688.com/

原文地址：阿里巴巴用戶體驗設計部
作者：amy
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量58萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：