編者按：用蘑菇街的新版案例帶你學會一個App 的敏捷設計方法，包括快速競品分析、繪制用戶頭像、搭建信息架構等等。

本文作者是蘑菇街的設計團隊，歡迎大家關注他們的追波地址喲：https://dribbble.com/mogu

蘑菇街設計團隊文章：

1. 《絕對不能錯過！2016 年最流行的8個UI設計趨勢分析》
2. 《熱門趨勢！從IOS 10 的交互設計中學到的3個設計啟示》

從2010年成立至今，蘑菇街已經成立6年。在未來的10年，我們的目標是：讓中國的年輕女性變得更美更時尚（也因此更自信更幸福）。這是一個長遠的目標，而我們當前的目標是：用最適合的方式，將物美價廉的時尚消費品交付到她們手中。

為了實現(xiàn)這一目標，蘑菇街正在進行著一系列的變革，我們將從“社區(qū)電商”轉型為“導購電商”，為更多的女性提供更優(yōu)質的時尚內容和商品。變化從我們的APP開始，轉型從我們的思維出發(fā)。新版app在幾個星期內從無到有，完成了從業(yè)務，到產品，到交互，到視覺的全過程。

謹作此文，一是團隊和個人的工作總結，二是拋磚引玉，跟大家分享下期間的思考。

產品分析

1. 以用戶為中心，定位目標用戶群

唐.諾曼說過，如果在用戶界面設計和人機交互領域中有任何神圣的原則，那必然是“了解你的用戶”。不同的用戶群體，他們的需求往往不同，甚至互相沖突。

首先我們開始了解蘑菇街的用戶。通過查閱數(shù)據(jù)，焦點小組，問卷調研等方式，我們對現(xiàn)有的用戶提取了多維要素，形成了一系列數(shù)據(jù)標簽，再對用戶特征進行組合，歸納產生重要用戶畫像，并據(jù)此更好地根據(jù)核心大眾用戶的特征和需求找到適合他們的設計語言。

蘑菇街一直將目標用戶定位于年輕，追求時尚的女性群體，經過分析，以下是兩種最主要的用戶模型：

2. 從社區(qū)到導購：一切從“痛”開始

在女性用戶領域長期深耕，使我們對自己的用戶群體有著更深入的了解。年輕女性都是時尚的追求者，然而她們在購物時最大的痛點是：

（1）不會搭配。

（2）不會挑單品。

而蘑菇街在時尚搭配，潮流，美妝等方面長期積累，功力深厚，完全有能力利用自身優(yōu)勢，將優(yōu)質的商品提煉，組織，發(fā)掘出對用戶真正有價值的內容。

因此，我們這次改版設計思路，將圍繞著“解決女性用戶的痛點，傳達時尚的感知體驗”展開。表達和呈現(xiàn)內容

1. 信息結構：根據(jù)使用場景的導航

為了支撐新拓的導購業(yè)務，延續(xù)原來的社交內容，從用戶的使用場景出發(fā)，重新梳理了信息構架，讓“導購”、“社交”和“電商”能齊頭并進，高效協(xié)同，讓用戶能夠迅速找到入口、融入其中。

基于用戶的使用場景，5個tab分別定位為：

??? Tab1-導購：讓用戶“逛逛逛”。以PGC的內容為核心，提供精編時尚內容，激發(fā)用戶興趣。

??? Tab2-市場：讓用戶“買買買”。以市場頻道、類目入口為主，以貨架的形式組織商品，讓用戶最快效率地找到商品。

??? Tab3-動態(tài)：延續(xù)之前的社交形態(tài)，是用戶和關注的達人（或商家）之間的互動社區(qū)。

??? Tab4-購物車：一站式的清單管理，讓用戶更方便地選擇商品購買下單。

??? Tab5-我的：更多內容的入口。

本次改版將原來與社交強關聯(lián)的“聊天”入口進行了弱化，分散到各個頁面的右上角，方便用戶在任何地方都可以和賣家進行無縫聊天。轉而使更方便購物結算的“購物車”占據(jù)了導航的一席之地，更突出了產品的電商屬性。

通過信息結構的重新排布，不同需求的用戶可以快速地切入主題，“導購”、“電商” 和“社交”的內容都得到了恰當清晰的展現(xiàn)。

2. 首頁設計：傳遞時尚感知

首頁是一個App的門面，尤其是新改版后的App。新老用戶打開app進入首頁，就好比走進一個裝修一新的房子。第一眼的感覺，很大程度上決定了他能繼續(xù)逛下去還是頭也不回地離開。

蘑菇街導購主要從“穿搭潮流、美妝資訊“等內容出發(fā)，以“時尚主編，潮流達人，普通用戶”的精選內容為核心。

新版App希望傳遞給用戶的是這是一本時尚的生活消費雜志。當用戶在瀏覽時，體驗到沉浸式的感受，如同在閱讀生活消費雜志一樣輕松愉悅。在這里，能獲取到各種最新最時尚的資訊，快速方便地買到最新最時尚的商品，輕而易舉買到想要的，不知不覺讓搭配游刃有余。

3. 內容組織：合理布局，精細設計

手機屏幕空間寸土寸金，一塊小小的角落都是兵家必爭之地。

在內容的設計上，每個一級頁面作為所有內容分發(fā)流轉的“出口”都需要精心設計，做到“處處珠璣”。我們考慮根據(jù)針對不同的運營內容和用戶任務，去分發(fā)和提煉盡可能豐富的內容信息，保證頁面上每一個存在的元素都是必不可缺的。

另一方面，在保證界面美觀的前提下，考慮所有模塊的閱讀效率，盡量多曝光信息內容，使主頁面看起來緊湊，信息量豐富。用“壓力下的優(yōu)雅”來形容一級頁的設計，恰當不過。

在交互形式上，我們采用了橫向拓展的設計形式——在屏幕中故意截斷部分內容，支持橫劃瀏覽更多信息。可以充分利用有限的屏幕空間，使同一層級的內容盡可能多的外顯，減少頁面間的跳轉，提高用戶獲取信息的效率。

在UI設計上，針對每個具體模塊，去剖析每個業(yè)務的運營策略，深度理解需要傳達的信息和傳遞的氛圍等，根據(jù)不同的內容設計不同的承載樣式，最終形成完整統(tǒng)一的內容流。

同一個頁面不同的內容模塊之間，主要考慮：

（1）不同的業(yè)務模塊通過不同樣式的組合設計，準確地傳達信息內容，同時使頁面豐富動感，擺脫單調；

（2）突出重點運營的優(yōu)質內容：如目前的“紅人穿搭”，“精選專題”等模塊，在設計手法上，通過圖片內容、布局、面積、位置等各種因素的綜合設計，最終呈現(xiàn)出的結果使用戶能快速有效地捕捉到最重要的信息點。

4. 根據(jù)用戶特征，打造差異化設計

這是一個產品激烈競爭的年代，沒有特色的產品設計終將會被遺忘。

以 “專題頁”的設計為例，這是我們導購業(yè)務下，利用率，使用效率都較高的一個頁面模塊，我們希望用戶在利用碎片化時間瀏覽各類導購專題時，可以快速獲取到重點，不會感覺像是被灌輸了一堆文字信息，而是實在地感到輕松愉快，并從中體驗到某種情緒共鳴。

回到我們的主流用戶群體——年輕女孩子上來思考，對她們的日常用品進行視覺元素的分解和抽象，提煉出適合我們產品氣質的元素。

最后的我們的專題頁采用這樣的設計形式：熒光色馬克筆，手寫風格的劃線標注，雜志風的圖墻版式。在這樣的頁面設計下，讓女孩子在瀏覽時能快速地獲取重點信息，感覺輕松，不單調。同時也傳遞出我們對所呈現(xiàn)出的內容滿滿的誠意和用心，從設計到內容，從色調到版式。

結語

新版app在短短的一個多月內，完成了從方向調整到開發(fā)上線的全過程，而設計在其中僅僅只占一周多，這也是互聯(lián)網公司面臨的共性難題。為了配合產品小步快跑的策略，我們采用敏捷設計的方法：快速地進行競品分析，根據(jù)低保真原型一邊進行業(yè)務細化和方案討論，一邊進行視覺風格的設計。

到第一版上線時，仍有若干頁面尚未調整完畢，也有諸多細節(jié)尚存缺陷，但身處這個快速發(fā)展的時代，設計必須快節(jié)奏高效率，讓我們產品的新切入點、新的創(chuàng)意、新的想法能盡快地去和用戶接觸，獲得更多更真實的反饋。

所有的改變都伴隨著風險，但作為一個還在路上的創(chuàng)業(yè)公司，不改變就不會比昨天更好。

所幸，新版App上線后，收獲了很多女孩子的好評和關注，隨之活躍度和轉化率數(shù)據(jù)也走出了一個漂亮的上揚曲線。

我們，一直在路上，為設計更好的產品……

「新人想進階，學會設計流程是必須的！」

1. UI 設計：《一個完整的UI設計流程是怎樣的？》
2. 品牌設計：《用一個實戰(zhàn)案例，幫你認識完整的設計流程》
3. 交互設計：《一個完整的交互設計流程是怎樣的？》

【優(yōu)設網 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關于優(yōu)設網================
"優(yōu)設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com