蘑菇街App改版設(shè)計總結(jié)

蘑菇街App改版設(shè)計總結(jié)新版app在短短的一個多月內(nèi)，完成了從方向調(diào)整到開發(fā)上線的全過程，而設(shè)計在其中僅僅只占一周多，這也是互聯(lián)網(wǎng)公司面臨的共性難題。為了配合產(chǎn)品小步快跑的策略，我們采用敏捷設(shè)計的方法：快速地進行競品分析，根據(jù)低保真原型一邊進行業(yè)務(wù)細(xì)化和方案討論，一邊進行視覺風(fēng)格的設(shè)計。從2022年成立至今，蘑菇街已經(jīng)成立6年。在未來的10年，我們的目標(biāo)是：讓中國的年輕女性變得更美更時尚（也因此更自信更幸福）。這是一個長遠(yuǎn)的目標(biāo)，而我們當(dāng)前的目標(biāo)是：用最適合的方式，將物美價廉的時尚消費品交付到她們手中。為了實現(xiàn)這一目標(biāo)，蘑菇街正在進行著一系列的變革，我們將從“社區(qū)電商”轉(zhuǎn)型為“導(dǎo)購電商”，為更多的女性提供更優(yōu)質(zhì)的時尚內(nèi)容和商品。變化從我們的APP開始，轉(zhuǎn)型從我們的思維出發(fā)。新版app在幾個星期內(nèi)從無到有，完成了從業(yè)務(wù)，到產(chǎn)品，到交互，到視覺的全過程。謹(jǐn)作此文，一是團隊和個人的工作總結(jié)，二是拋磚引玉，跟大家分享下期間的思考。1.以用戶為中心，定位目標(biāo)用戶群1/8

唐.諾曼說過，如果在用戶界面設(shè)計和人機交互領(lǐng)域中有任何神圣的原則，那必然是“了解你的用戶”。不同的用戶群體，他們的需求往往不同，甚至互相沖突。首先我們開始了解蘑菇街的用戶。通過查閱數(shù)據(jù)，焦點小組，問卷調(diào)研等方式，我們對現(xiàn)有的用戶提取了多維要素，形成了一系列數(shù)據(jù)標(biāo)簽，再對用戶特征進行組合，歸納產(chǎn)生重要用戶畫像，并據(jù)此更好地根據(jù)核心大眾用戶的特征和需求找到適合他們的設(shè)計語言。蘑菇街一直將目標(biāo)用戶定位于年輕，追求時尚的女性群體，經(jīng)過分析，以下是兩種最主要的用戶模型：專注時尚型娛樂休閑型2.從社區(qū)到導(dǎo)購：一切從“痛”開始在女性用戶領(lǐng)域長期深耕，使我們對自己的用戶群體有著更深入的了解。年輕女性都是時尚的追求者，然而她們在購物時最大的痛點是：2/8

不會挑單品而蘑菇街在時尚搭配，潮流，美妝等方面長期積累，功力深厚，完全有能力利用自身優(yōu)勢，將優(yōu)質(zhì)的商品提煉，組織，發(fā)掘出對用戶真正有價值的內(nèi)容。因此，我們這次改版設(shè)計思路，將圍繞著“解決女性用戶的痛點，傳達時尚的感知體驗”展開。表達和呈現(xiàn)內(nèi)容1.信息結(jié)構(gòu)：根據(jù)使用場景的導(dǎo)航為了支撐新拓的導(dǎo)購業(yè)務(wù)，新梳理了信息構(gòu)架，讓“導(dǎo)購”“、社交”和“電商”能融入其中。延續(xù)原來的社交內(nèi)容，從用戶的使用場景出發(fā)，重齊頭并進，高效協(xié)同，讓用戶能夠迅速找到入口、基于用戶的使用場景，5個tab分別定位為：Tab1-導(dǎo)購：讓用戶“逛逛逛”。以PGC的內(nèi)容為核心，提供精編時尚內(nèi)容，激發(fā)用戶興趣。Tab2-市場：讓用戶“買買買”。以市場頻道、類目入口為主，以貨架的形式組織商品，讓用戶最快效率地找到商品。3/8

Tab3-動態(tài)：延續(xù)之前的社交形態(tài)，是用戶和關(guān)注的達人（或商家）之間的互動社區(qū)。Tab4-購物車：一站式的清單管理，讓用戶更方便地選擇商品購買下單。Tab5-我的：更多內(nèi)容的入口。本次改版將原來與社交強關(guān)聯(lián)的“聊天”入口進行了弱化，分散到各個頁面的右上角，方便用戶在任何地方都可以和賣家進行無縫聊天。轉(zhuǎn)而使更方便購物結(jié)算的“購物車”占據(jù)了導(dǎo)航的一席之地，更突出了產(chǎn)品的電商屬性。通過信息結(jié)構(gòu)的重新排布，不同需求的用戶可以快速地切入主題，“導(dǎo)購”、“電商”和“社交”的內(nèi)容都到得了恰當(dāng)清晰的展現(xiàn)。2.首頁設(shè)計：傳遞時尚感知首頁是一個App的門面，尤其是新改版后的App。新老用戶打開app進入首頁，就好比走進一個裝修一新的房子。第一眼的感覺，很大程度上決定了他能繼續(xù)逛下去還是頭也不回地離開。蘑菇街導(dǎo)購主要從“穿搭潮流、美妝資訊“等內(nèi)容出發(fā)，以“時尚主編，潮流達人，普通用戶”的精選內(nèi)容為核心。4/8

新版App希望傳遞給用戶的是這是一本時尚的生活消費雜志。當(dāng)用戶在瀏覽時，體驗到沉浸式的感受，如同在閱讀生活消費雜志一樣輕松愉悅。在這里，能獲取到各種最新最時尚的資訊，快速方便地買到最新最時尚的商品，輕而易舉買到想要的，不知不覺讓搭配游刃有余。3.內(nèi)容組織：合理布局，精細(xì)設(shè)計手機屏幕空間寸土寸金，一塊小小的角落都是兵家必爭之地。在內(nèi)容的設(shè)計上，每個一級頁面作為所有內(nèi)容分發(fā)流轉(zhuǎn)的“出口”都需要精心設(shè)計，到做“處處珠璣”。我們考慮根據(jù)針對不同的運營內(nèi)容和用戶任務(wù)，去分發(fā)和提煉盡可能豐富的內(nèi)容信息，保證頁面上每一個存在的元素都是必不可缺的。另一方面，在保證界面美觀的前提下，考慮所有模塊的閱讀效率，盡量多曝光信息內(nèi)容，使主頁面恰當(dāng)不過?？雌饋砭o湊，信息量豐富。用“壓力下的優(yōu)雅”來形容一級頁的設(shè)計，5/8

在交互形式上，我們采用了橫向拓展的設(shè)計形式——在屏幕中故意截斷部分內(nèi)容，支持橫劃瀏覽更多信息?？梢猿浞掷糜邢薜钠聊豢臻g，使同一層級的內(nèi)容戶獲取信息的效率。盡可能多的外顯，減少頁面間的跳轉(zhuǎn)，提高用在UI設(shè)計上，針對每個具體模塊，去剖析每個業(yè)務(wù)的運營策略，深度理解需要傳達的信息和傳遞的氛圍等，根據(jù)不同的內(nèi)容設(shè)計不同的承載樣式，最終形成完整統(tǒng)一的內(nèi)容流。同一個頁面不同的內(nèi)容模塊之間，主要考慮：不同的業(yè)務(wù)模塊通過不同樣式的組合設(shè)計，準(zhǔn)確地傳達信息內(nèi)容，同時使頁面豐富動感，擺脫單調(diào)；突出重點運營的優(yōu)質(zhì)內(nèi)容：如目前的“紅人穿搭”，“精選專題”等模塊，在設(shè)計手法上，通過圖片內(nèi)容、布局、面積、位置等各種因素的綜合設(shè)計，最終呈現(xiàn)出的結(jié)果使用戶能快速有效地捕捉到最重要的信息點。4.根據(jù)用戶特征，打造差異化設(shè)計這是一個產(chǎn)品激烈競爭的年代，沒有特色的產(chǎn)品設(shè)計終將會被遺忘。6/8

以“專題頁”的設(shè)計為例，這是我們導(dǎo)購業(yè)務(wù)下，利用率，使用效率都較高的一個頁面模塊，我們希望用戶在利用碎片化時間瀏覽各類導(dǎo)購專題時，可以快速獲取到重點，不會感覺像是被灌輸了一堆文字信息，而是實在地感到輕松愉快，并從中體驗到某種情緒共鳴。回到我們的主流用戶群體——年輕女孩子上來思考，對她們的日常用品進行視覺元素的分解和抽象，提煉出適合我們產(chǎn)品氣質(zhì)的元素。最后，我們的專題頁采用這樣的設(shè)計形式：熒光色馬克筆，手寫風(fēng)格的劃線標(biāo)注，雜志風(fēng)的圖墻版式。在這樣的頁面設(shè)計下，讓女孩子在瀏覽時能快速地獲取重點信息，感覺輕松，不單調(diào)。同時也傳遞出我們對所呈現(xiàn)出的內(nèi)容滿滿的誠意和用心，從設(shè)計到內(nèi)容，從色調(diào)到版式。新版app在短短的一個多月內(nèi)，完成了從其中僅僅只占一周多，這也是互聯(lián)網(wǎng)公司面臨的共性難題。為了步快跑的策略，我們采用敏捷設(shè)計的方法：快速地進行競品分析，根據(jù)低保真原型一邊進行業(yè)務(wù)細(xì)化和方案討論，一邊進行視覺風(fēng)格的設(shè)計。方向調(diào)整到開發(fā)上線的全過程，而設(shè)計在配合產(chǎn)品小7/8

到第一版上線時，仍有若干頁面尚未調(diào)整完畢，也有諸多細(xì)節(jié)尚存缺陷，但身處這個快速發(fā)展的時代，設(shè)計必須快節(jié)奏高效率，讓我們產(chǎn)品的新切入點、