蘑菇街App改版设计总结

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


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

蘑菇街App改版设计总结

背景

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

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

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

蘑菇街App改版设计总结

产品分析

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

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

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

蘑菇街App改版设计总结

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

  1. 专注时尚型
  2. 娱乐休闲型

蘑菇街App改版设计总结

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

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

  1. 不会搭配
  2. 不会挑单品

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

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

表达和呈现内容

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

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

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

  1. Tab1-导购:让用户“逛逛逛”。以PGC的内容为核心,提供精编时尚内容,激发用户兴趣。
  2. Tab2-市场:让用户“买买买”。以市场频道、类目入口为主,以货架的形式组织商品,让用户最快效率地找到商品。
  3. Tab3-动态:延续之前的社交形态,是用户和关注的达人(或商家)之间的互动社区。
  4. Tab4-购物车:一站式的清单管理,让用户更方便地选择商品购买下单。
  5. Tab5-我的:更多内容的入口。

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

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

蘑菇街App改版设计总结

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

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

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

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

蘑菇街App改版设计总结

3. 内容组织:合理布局,精细设计

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

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

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

蘑菇街App改版设计总结

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

蘑菇街App改版设计总结

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

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

  1. 不同的业务模块通过不同样式的组合设计,准确地传达信息内容,同时使页面丰富动感,摆脱单调;
  2. 突出重点运营的优质内容:如目前的“红人穿搭”,“精选专题”等模块,在设计手法上,通过图片内容、布局、面积、位置等各种因素的综合设计,最终呈现出的结果使用户能快速有效地捕捉到最重要的信息点。

蘑菇街App改版设计总结

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

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

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

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

蘑菇街App改版设计总结

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

蘑菇街App改版设计总结

结语

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

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

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

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

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

 

作者:舒岚(微信公众号:岚驿)蘑菇街-交互设计专家,负责蘑菇街app的产品交互体验设计。有趣,有料。欢迎关注交流。

本文由 @舒岚 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25962/

(0)
CatherineCatherine
上一篇 2017-05-12 22:33
下一篇 2017-05-13 00:17

相关推荐

  • 设计中的 “潜在过程的外在可见后果”分析

    设计中的 “潜在过程的外在可见后果”分析 ——以第三方账号登录为例 “潜在过程的外在可见后果”,是在勒庞的《乌合之众》一书中看到的文字,这也是心理学家通常的研究切入点。外在结果作为表象,其潜在的发生过程才是更…

    2016-02-25
  • 用好的交互设计来管理复杂-“查看更多”

    “查看更多”按钮像一个链接标签的拐杖,在各类网页及App中被通用,网站现在已经大量使用这个通用的标签链接。作为一个独立的标签,“查看更多”按钮,直接描述所表达的含义,用以帮助用户从下一页了解所期望的内容。

    2017-05-18
  • 面向友好用户体验的交互设计:刘老师课件精简版

    浏览网页、手机拍照上传朋友圈、用自动售卖机购买饮料,我们无时无刻地与周边的产品或服务发生着交互。使用过程中的每一个身心感受就是一次交互体验。随着信息科技的发展,各种新产品和交互方式层出不穷,人们也越…

    2015-11-22
  • 一个项目解读交互设计的3个核心价值

    作者: 小米渣和大冬瓜   说到交互设计的价值,很多人可能一脸懵逼,交互不就是一个画线框图的嘛,然后再用各种乱七八糟的线连在一起。其实这一直以来是行业内对交互设计的一种“误解”,线框稿只是交互设计师最终产…

    交互专题 2017-08-07
  • 阿里UCAN2017用户体验设计论坛的总结与感悟

    五一假期前的两天有幸参加了阿里UCAN2017用户体验设计论坛,很荣幸的领略了业内大牛们对于体验设计的理念与趋势的见解。本次论坛的主题是“新设计x新商业”,由阿里提出的新零售、新金融、新创造、新能源和新技术为起点,借助用户体验的设计赋能,来连接用户、商业与技术,实现最大化的商业目的。在沉淀了两天之后,我将从中学习领悟到的一些看法总结了下来。“利用人类的现实感官作为交互体验的手段,模拟与现实世界相似的场景,让体验特征表现的更加直观,真实。正是借助于科技的创新,一体性、真实性的交互体验才得以实现,人类与虚拟信息的交流才会越来越自然。”在既要满足一群人,又要满足个体中的一个人,包容一个人到参与群体的场景多样性。就是现在设计思维中所需要逐渐形成机器学习的共生方式。— 阿里妈妈UED总监 萧健兴“全链路设计是新技术发展下的必然趋势。”

    2017-05-01
  • 关于用户故事地图的7 种用法

    《用户故事地图》不仅仅是讲述什么是用户地图、怎么使用用户地图,也讲了很多团队协作的tips,并且给出了很多实例。我这里直接从这本书的其中一个角度——“怎么使用用户地图”为内容,然后结合一些自己的想法,来写这篇读书笔记。聚焦于成果,即产品发布后用户能使用和感知的东西,切分发布计划应该以成果为导向。  ——《用户故事地图》P56

    2017-04-30
  • 泡泡UI英语:交互设计精髓1

    最近在读《About Face 4:交互设计精髓》,他全面系统地讲述了交互设计过程、原理和方法,涵盖内容广,刨析知识深,被奉为交互设计指南。也正因为如此,大量的专业词汇给阅读造成了不小的难度,推荐大家双语共读,…

    2017-08-01
  • Axure RP 8 入门手册 – 第3章

    第3章元件功能概述第1节鼠标的操作第2节元件的使用第1节鼠标的操作麦子:老师,老师!小楼:干吗,干吗?麦子:不......小楼:呃......麦子:我想做一个页面,但是那些元件都怎么用啊?小楼:点住了拖到画布里面用呀!麦子:我知道是拖进去,但是我想要一个向左倾斜的圆形。小楼:你是仇人派来玩儿我的吗?圆形怎么倾斜?麦子:对不起,老师!少打个“椭”字。小楼:艹。在Axure中,如果需要一个椭圆形,可以放入一个矩形元件到画布中,然后,点击矩形...

    2018-04-05
  • 聊聊Axure RP 8 的动态面板(文末赠书)

    点击上方“蓝字”关注本公众号《Axure RP 8入门手册》本书的写作初衷是面向初学者,由浅至深地引导读者学习Axure RP 8.0的使用方法,从而实现最终的学习目标。本书不但适合初学者学习,在知识结构与案例的安排上,也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习,就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者,也能够在本书的大量案例之中,获得各种实战的参考。书中的案例均为网站或App中采用的一些...

    2018-04-09
  • 交互进阶!如何扫除交互设计路上的3大障碍?

    Echo  :目前网上基本没有对做交互设计 师的难点进行系统的归纳和总结。基于这个原因我总结交互设计 师的三大障碍以及如何扫除交互设计 师路上的3大障碍。

    2017-09-14