实战案例！从零开始见证蘑菇街App 新版的设计流程

编者按：用蘑菇街的新版案例带你学会一个App 的敏捷设计方法，包括快速竞品分析、绘制用户头像、搭建信息架构等等。

本文作者是蘑菇街的设计团队，欢迎大家关注他们的追波地址哟：https://dribbble.com/mogu

蘑菇街设计团队文章：

1. 《绝对不能错过！2016 年最流行的8个UI设计趋势分析》
2. 《热门趋势！从IOS 10 的交互设计中学到的3个设计启示》

从2010年成立至今，蘑菇街已经成立6年。在未来的10年，我们的目标是：让中国的年轻女性变得更美更时尚（也因此更自信更幸福）。这是一个长远的目标，而我们当前的目标是：用最适合的方式，将物美价廉的时尚消费品交付到她们手中。

为了实现这一目标，蘑菇街正在进行着一系列的变革，我们将从“社区电商”转型为“导购电商”，为更多的女性提供更优质的时尚内容和商品。变化从我们的APP开始，转型从我们的思维出发。新版app在几个星期内从无到有，完成了从业务，到产品，到交互，到视觉的全过程。

谨作此文，一是团队和个人的工作总结，二是抛砖引玉，跟大家分享下期间的思考。

产品分析

1. 以用户为中心，定位目标用户群

唐.诺曼说过，如果在用户界面设计和人机交互领域中有任何神圣的原则，那必然是“了解你的用户”。不同的用户群体，他们的需求往往不同，甚至互相冲突。

首先我们开始了解蘑菇街的用户。通过查阅数据，焦点小组，问卷调研等方式，我们对现有的用户提取了多维要素，形成了一系列数据标签，再对用户特征进行组合，归纳产生重要用户画像，并据此更好地根据核心大众用户的特征和需求找到适合他们的设计语言。

蘑菇街一直将目标用户定位于年轻，追求时尚的女性群体，经过分析，以下是两种最主要的用户模型：

2. 从社区到导购：一切从“痛”开始

在女性用户领域长期深耕，使我们对自己的用户群体有着更深入的了解。年轻女性都是时尚的追求者，然而她们在购物时最大的痛点是：

（1）不会搭配。

（2）不会挑单品。

而蘑菇街在时尚搭配，潮流，美妆等方面长期积累，功力深厚，完全有能力利用自身优势，将优质的商品提炼，组织，发掘出对用户真正有价值的内容。

因此，我们这次改版设计思路，将围绕着“解决女性用户的痛点，传达时尚的感知体验”展开。表达和呈现内容

1. 信息结构：根据使用场景的导航

为了支撑新拓的导购业务，延续原来的社交内容，从用户的使用场景出发，重新梳理了信息构架，让“导购”、“社交”和“电商”能齐头并进，高效协同，让用户能够迅速找到入口、融入其中。

基于用户的使用场景，5个tab分别定位为：

•   Tab1-导购：让用户“逛逛逛”。以PGC的内容为核心，提供精编时尚内容，激发用户兴趣。

•   Tab2-市场：让用户“买买买”。以市场频道、类目入口为主，以货架的形式组织商品，让用户最快效率地找到商品。

•   Tab3-动态：延续之前的社交形态，是用户和关注的达人（或商家）之间的互动社区。

•   Tab4-购物车：一站式的清单管理，让用户更方便地选择商品购买下单。

•   Tab5-我的：更多内容的入口。

本次改版将原来与社交强关联的“聊天”入口进行了弱化，分散到各个页面的右上角，方便用户在任何地方都可以和卖家进行无缝聊天。转而使更方便购物结算的“购物车”占据了导航的一席之地，更突出了产品的电商属性。

通过信息结构的重新排布，不同需求的用户可以快速地切入主题，“导购”、“电商” 和“社交”的内容都得到了恰当清晰的展现。

2. 首页设计：传递时尚感知

首页是一个App的门面，尤其是新改版后的App。新老用户打开app进入首页，就好比走进一个装修一新的房子。第一眼的感觉，很大程度上决定了他能继续逛下去还是头也不回地离开。

蘑菇街导购主要从“穿搭潮流、美妆资讯“等内容出发，以“时尚主编，潮流达人，普通用户”的精选内容为核心。

新版App希望传递给用户的是这是一本时尚的生活消费杂志。当用户在浏览时，体验到沉浸式的感受，如同在阅读生活消费杂志一样轻松愉悦。在这里，能获取到各种最新最时尚的资讯，快速方便地买到最新最时尚的商品，轻而易举买到想要的，不知不觉让搭配游刃有余。

3. 内容组织：合理布局，精细设计

手机屏幕空间寸土寸金，一块小小的角落都是兵家必争之地。

在内容的设计上，每个一级页面作为所有内容分发流转的“出口”都需要精心设计，做到“处处珠玑”。我们考虑根据针对不同的运营内容和用户任务，去分发和提炼尽可能丰富的内容信息，保证页面上每一个存在的元素都是必不可缺的。

另一方面，在保证界面美观的前提下，考虑所有模块的阅读效率，尽量多曝光信息内容，使主页面看起来紧凑，信息量丰富。用“压力下的优雅”来形容一级页的设计，恰当不过。

在交互形式上，我们采用了横向拓展的设计形式——在屏幕中故意截断部分内容，支持横划浏览更多信息。可以充分利用有限的屏幕空间，使同一层级的内容尽可能多的外显，减少页面间的跳转，提高用户获取信息的效率。

在UI设计上，针对每个具体模块，去剖析每个业务的运营策略，深度理解需要传达的信息和传递的氛围等，根据不同的内容设计不同的承载样式，最终形成完整统一的内容流。

同一个页面不同的内容模块之间，主要考虑：

（1）不同的业务模块通过不同样式的组合设计，准确地传达信息内容，同时使页面丰富动感，摆脱单调；

（2）突出重点运营的优质内容：如目前的“红人穿搭”，“精选专题”等模块，在设计手法上，通过图片内容、布局、面积、位置等各种因素的综合设计，最终呈现出的结果使用户能快速有效地捕捉到最重要的信息点。

4. 根据用户特征，打造差异化设计

这是一个产品激烈竞争的年代，没有特色的产品设计终将会被遗忘。

以 “专题页”的设计为例，这是我们导购业务下，利用率，使用效率都较高的一个页面模块，我们希望用户在利用碎片化时间浏览各类导购专题时，可以快速获取到重点，不会感觉像是被灌输了一堆文字信息，而是实在地感到轻松愉快，并从中体验到某种情绪共鸣。

回到我们的主流用户群体——年轻女孩子上来思考，对她们的日常用品进行视觉元素的分解和抽象，提炼出适合我们产品气质的元素。

最后的我们的专题页采用这样的设计形式：荧光色马克笔，手写风格的划线标注，杂志风的图墙版式。在这样的页面设计下，让女孩子在浏览时能快速地获取重点信息，感觉轻松，不单调。同时也传递出我们对所呈现出的内容满满的诚意和用心，从设计到内容，从色调到版式。

结语

新版app在短短的一个多月内，完成了从方向调整到开发上线的全过程，而设计在其中仅仅只占一周多，这也是互联网公司面临的共性难题。为了配合产品小步快跑的策略，我们采用敏捷设计的方法：快速地进行竞品分析，根据低保真原型一边进行业务细化和方案讨论，一边进行视觉风格的设计。

到第一版上线时，仍有若干页面尚未调整完毕，也有诸多细节尚存缺陷，但身处这个快速发展的时代，设计必须快节奏高效率，让我们产品的新切入点、新的创意、新的想法能尽快地去和用户接触，获得更多更真实的反馈。

所有的改变都伴随着风险，但作为一个还在路上的创业公司，不改变就不会比昨天更好。

所幸，新版App上线后，收获了很多女孩子的好评和关注，随之活跃度和转化率数据也走出了一个漂亮的上扬曲线。

我们，一直在路上，为设计更好的产品……

「新人想进阶，学会设计流程是必须的！」

1. UI 设计：《一个完整的UI设计流程是怎样的？》
2. 品牌设计：《用一个实战案例，帮你认识完整的设计流程》
3. 交互设计：《一个完整的交互设计流程是怎样的？》

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量180万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com