首页

社区团购增长之路

资深UI设计者

编辑导语:社区团购这几年一直很火爆,不少企业都想试试社区团购板块,特别是经历了去年的疫情冲击,社区团购更是进一步的发展壮大;如今社区团购的发展和扩张还在不断进行中,本文作者分享了关于社区团购增长之路的解读,我们一起来看一下。

社区团购如火如荼的进行着,本文从社区团购的发展、现阶段的市场规模情况,到用户拉新、激活、留存相关的因素分析,到未来展望,全面解读社区团购增长之路。

文章较长,附上目录:

万字长文:全面解读社区团购增长之路

一、社区团购要凉凉?

社区团购,于2016年在湖南长沙地萌芽,初是芙蓉兴盛等企业利用供应链优势,开始向社区提供在线拼团、送货到社区自提点的探索。(兴盛优选)

自2018年起,社区团购企业备受资本市场的疯狂关注,整个行业获得资本市场融资超40亿元;从8月到12月,你我您、十荟团、食享会、松鼠拼拼均完成亿级人民币以上的融资金额,小区乐更是获得了1.08亿美金的行业大笔融资。

而到了2019年,相比于少量的投融资事件,消息更多的是社区团购平台资金链断裂,经营不善,导致倒闭、关停、撤城等事件,如松鼠拼拼、小区乐。

2020年疫情催化,社区团购再度火上风口,迎来了新一轮发展,互联网大厂也都纷纷布局社区团购。

各大巨头高调入场,引起广泛关注,据媒体称,12 月 22 日,国家市场监管总局联合商务部,组织召开了规范社区团购秩序行政指导会,阿里巴巴、腾讯、京东、美团、拼多多、滴滴等 6 家互联网平台企业参加了会议。

会议要求,互联网平台企业要严格规范社区团购经营行为,严格遵守“九不得”:

  1. 不得通过低价倾销、价格串通、哄抬价格、价格欺诈等方式滥用自主定价权。在依法降价处理鲜活商品、季节性商品、积压商品等商品外,严禁以排挤竞争对手或独占市场为目的,以低于成本的价格倾销商品;
  2. 不得违法达成、实施固定价格、限制商品生产或销售数量、分割市场等任何形式的垄断协议;
  3. 不得实施没有正当理由的掠夺性定价、拒绝交易、搭售等滥用市场支配地位行为;
  4. 不得违法实施经营者集中,排除、限制竞争。经营者集中达到国务院规定申报标准的,应当事先申报,未申报的一律不得实施集中;
  5. 不得实施商业混淆、虚假宣传、商业诋毁等不正当竞争行为,危害公平竞争市场环境。严禁编造、传播虚假信息或进行引人误解的商业宣传,损害竞争对手的商业信誉、商品声誉,欺骗、误导消费者;
  6. 不得利用数据优势“杀熟”,损害消费者合法权益;
  7. 不得利用技术手段损害竞争秩序,妨碍其他市场主体正常经营。不得利用服务协议、交易规则以及技术等手段,对平台内经营者在平台内的交易、交易价格以及与其他经营者的交易等进行不合理限制或附加不合理条件,或者向平台内经营者收取不合理费用;
  8. 不得非法收集、使用消费者个人信息,给消费者带来安全隐患;
  9. 不得销售假冒伪劣商品,危害安全放心的消费环境。

国家出台政策,并没有表示社区团购不能做,反而,国家认真的在规范市场,维护市场经济的有序繁荣发展,引导互联网巨头在这一赛道的有序竞争;从另外一个角度,理解成国家是支持的也未尝不可。

社区团购经过几年的发展,已经验证了市场发展的可行性,除了资本的加持,谁能正确的开启社区团购的增长之路,谁便是最后的赢家。

二、社区团购增长重点

1. 市场现状

随着行业的发展,社区团购的市场规模也一直在扩大。

艾媒咨询数据显示,在疫情的刺激下,2020年社区团购市场发展迅猛,市场规模预计达720亿元,到2022年中国社区团购市场规模有望达到千亿级别。

万字长文:全面解读社区团购增长之路

2020年社区团购市场规模占2019年社会消费品零售总额比重还不足0.2%,据中金预测,长期看来,可能达到的市场规模将在 15000 亿元以上。

而当下,各大巨头也依然在努力“抢人”状态,社区团购仍在快速发展的成长期,市场也依然处于增量状态,各家产品也基本处于成长期阶段,所以,用户数量和订单量的增长依然是社区团购平台发展的重中之重。

同时,由于社区团购产品基于社区化的独特电商属性,销售的都是生活必需品包括食物及日用品,且面对下沉市场用户,主打性价比,所以对于选品和供应链的优化也将是产品成败的关键。

2. 业务模式

在说业务模式之前,我们先对新零售有个基本认知:

新零售,英文是New Retailing,即企业以互联网为依托,通过运用大数据、人工智能等先进技术手段,对商品的生产、流通与销售过程进行升级改造,进而重塑业态结构与生态圈,并对线上服务、线下体验以及现代物流进行深度融合的零售新模式 。

——百度百科

然后来看社区团购O2O新零售业务模式:

万字长文:全面解读社区团购增长之路

社区团购是真实居住社区内居民团体的一种购物消费行为,是依托真实社区的一种区域化、小众化、本地化的团购形式;通过社区商铺为周围(社区内)居民提供的团购形式的优惠活动,促进商铺对核心客户的精准化宣传和消费刺激,实现商铺区域知名度和美誉度的迅速提升,对商铺的营销产生重大效果。

社区团购O2O新零售采用“预售+自提”的方式,社区用户自主或被团长号召,在APP或小程序等平台商城内下单,平台向供应商采购商品入库;通过仓库分拣等方式出库,在用户下单次日配送至小区自提点,用户自行完成取货。

与传统电商相比,社区团购的运营模式更为轻,借助微信等社交流量入口,具有用户社区化易传播、商家集中化管理以及线上线下相结合的特点。

另外,线上模式不仅可以省去门店成本,优化成本方案,其采用预售模式,现金流快,有效减少资金周转压力,同时以销定采,根据订单销量进行采购,一定程度上实现零库存,极大的降低了损耗;平台通过源头直采,优化供应链,顺应消费降级趋势,提供高性价比产品,最终让用户体验到好货不贵。

社区团购这场战役,起于团长,终于供应链。和增长的“生于拉新,死于留存”不谋而合,也表明了其取胜的两个关键点就在于:

前端获取用户的速度与后端供应链的质量。前端市场扩展的多快决定了短期内有多大规模,后端供应链质量决定了这个规模能保持多久,两者相互依存,缺一不可。

综上:

  • 社区团购的关键点:拉新速度、供应链质量
  • 社区团购现阶段增长重点:用户数量和订单量的快速增长

三、用户拉新与激活

1. 拉新

社区团购的战略是团长拉新,所以当前社区团购拉新与激活的关键就在于:团长。

社区团购主要目标为下沉市场用户,以社区居民为主,下沉市场居民形态分为两类:

  • 一类是农村,一个村庄的人基本都是认识的,大半都是相熟的;
  • 一类是村镇等社区,社区内居民会比一二线城市社区居民会有更多来往,也会有相对更紧密的关系。

在这种情况下,团长相当于KOL,由于有天然的地理优势,团长和团员相互之间有一定的信任基础,团长在本地拓展用户就会比平台更容易。

除此之外,平台还可以请团长在自家门前展示平台logo为平台获得更多曝光,这也可以作为与团长合作的其中一项要求。

所以,各大平台把对新用户的拉新换个方式转嫁到对团长的招募上;由于团长和平台是利益绑定关系,所以相比直接找用户,找团长性价比更高,而团长,在这里主要充当了拉新一把手的角色。

万字长文:全面解读社区团购增长之路

社区团购对于团长的拉新也十分卖力,除了在宣传文案下功夫,也用了很多渠道进行团长招募:

  • 线上投放裂变方式:包括当地贴吧、QQ群、微信群、朋友群;本地新媒体平台、KOL、求职网站;当地团长线上推荐裂变等
  • 线下地推方式:平台直接对接社区门店、菜鸟驿站;社区活动地推;线下产品试吃活动等

2. 激活

对于下沉市场用户来说,高性价比的商品更能被吸引注意,各大平台针对新用户(数据指标定义为:已注册但下单次数为0的用户)推出各种优惠补贴政策,比如美团优选、橙心优选和十荟团的新用户1分钱抢购,多多买菜的新用户全额返。

万字长文:全面解读社区团购增长之路

利用优惠政策,配合团长宣传,吸引新用户完成首次下单顺利激活。

在这个过程中,我们把用户的aha时刻定义为“用户注册当日完成1次下单”,对团长的aha时刻定义为“收到1笔佣金”;对于团长来说,只要邀请到新用户注册平台就会有佣金入账,再加上各大平台针对新用户的大力度补贴,注册的用户也会比较容易达到aha时刻。

除了团长拉新并引导激活用户,各大平台在产品设计上也是尽最大可能帮助用户顺利达到aha时刻。

下面从新用户激活路径的产品设计以及新用户选品两个维度具体分析。

1)新用户激活路径

下面以美团优选、橙心优选、兴盛优选为调研对象简单看一下他们的新用户激活路径。

美团优选:

主要路径及页面截图示意如下:

万字长文:全面解读社区团购增长之路

万字长文:全面解读社区团购增长之路

万字长文:全面解读社区团购增长之路

从上面的流程可以看出,整个流程都是比较顺畅没有阻碍的,包括小程序一键登录也是直接调用微信接口获取的手机号和微信昵称信息,用户完全不需要进行任何编辑,最大程度的降低了用户的操作成本,在这个流程中有几个比较特别的点值得拿出来说一下:

① 红包设计

在用户打开小程序进入时会有一个惊喜红包的领取提示,给用户制造惊喜,且以抽奖的形式进行,会让用户有很幸运的感觉;而且是自己主动去操作获得的,在心里上会更有成就感,相对会更重视这个红包(满10元返10元券)。

但是其实无论用户是否领取,都是系统设计好的(从上面购物车和确认订单页面可以看出),但直接送和让用户主动获得达到的效果是不一样的。

万字长文:全面解读社区团购增长之路

② 激活的目标明确

在所有用户必经路径上全部设计“去下单”button,方便用户触达下单。

③ 首单支付成功的引导

引导1:分享到团长社群。这里面有两个点,分享动机和分享结果;从分享动机来看,美团优选从用户视角出发,名义定为提醒团长接单,让用户更有分享动机;从分享结果来看,会让社群更加真实和活跃,猜测平台也希望以此来激活更多的用户来下单。

(但从熟人视角来看,大家自己买了什么东西是不太愿意分享到群里让熟人们看见我买了什么及我又消费了的;而陌生人群反而没有这些顾虑。)

引导2:引导用户关注官方订阅号,增加用户触达渠道。

橙心优选:

主要路径及页面截图示意如下:

万字长文:全面解读社区团购增长之路

万字长文:全面解读社区团购增长之路

万字长文:全面解读社区团购增长之路

橙心优选与美团优选逻辑基本一致,而且活动手法也如出一辙,但橙心优选进入的页面是专门定制的页面,推荐的商品也是团长分享的相关商品。主要有两点说明一下:

① 红包设计

在进入小程序时,橙心优选也会先弹窗提示用户参加抽奖活动,活动逻辑与美团优选一致,不同的地方在于橙心优选会直接转动转盘,送“幸运”好礼,相比美团必须用手点的方式,步骤更简,也能让用户有幸运的心理。但这一步之差不会影响太大,可以根据自身活动情况进行优化。

万字长文:全面解读社区团购增长之路

② 支付完成后的引导

支付完成后与美团的引导点一致,也会引导用户关注公众号,但橙心优胜的地方在于用户关注公众号之后,引导用户传播,这点可以学起来,不断优化每个渠道的定位,以及每个节点的引导。

兴盛优选:

主要路径及页面截图示意如下:

万字长文:全面解读社区团购增长之路

万字长文:全面解读社区团购增长之路

兴盛优选的主路径与橙心优选相同,但兴盛优选没有太多优惠补贴的运营设计,整体来看比较朴实无华。

三家各有千秋,从共同优秀的角度总结来说:

① 从降低阻力的角度来说

进入页面无需登录注册可先查看商品信息,避免冷启动。

主路径都做到极简,页面重要信息的文案和设计都比较清晰容易理解。

② 从增加动力的角度来说

利用团长这个“熟人”的推荐,增加信任度

美团优选和橙心优选均给予新用户最大力度优惠和红包补贴政策,帮助用户“尝鲜”

③ 从助推角度来说

团长是天然的客服,能够帮助平台对新用户进行引导和使用产品,这也是社区团购中使用团长角色的优势;另外橙心优选APP针对新用户在首页专门做了使用流程说明,在团长无法服务到的地方产品主动进行引导。

在外部触达渠道上,主要还是利用团长的社群触达;但只要用户注册后,各家平台也会通过短信主动触达,而且在小程序上也会引导用户开启通知提醒触达;另外,美团优选和橙心优选有开发自己的APP,可对安装APP的用户进行push推送,且在新用户下单后,美团优选增加了订阅号触达方式,基本涵盖了所有可主动触发的触达渠道。

④ 从即时奖励角度来说

在用户完成下单后均对用户进行了“支付成功”的反馈;在后期,各家平台开始用户激励体系的搭建之后,必定会给予用户更多“真实奖励”上的反馈。

从不同之处总结来说:

① 主路径的设计差异

橙心优选和兴盛优选在用户通过团长分享的商品链接打开小程序后,进入的是商品详情页;而美团优选进入首页,即商品列表页。

关于该差异点晓晓的理解如下:

  • 对生鲜品类产品的理解:这类产品和淘宝上的衣服、护肤品性质不太一样,该类商品都是很生活化的偏小金额商品;而且拼的是用户对团长和平台的信任,在菜品的差异上其实并不大,而且在列表页关于商品的所有重要信息基本均可展示完成,所以商品列表页和详情页的差异可能并不是很大
  • 从自身及身边人的操作习惯的观察来看:基于团长在群里的推荐,以及及其便宜的价格(1分钱),会直接加入购物车进行购买,不会特别去到详情页进行查看。
  • 但从对平台运营逻辑的角度来看:美团优选新用户红包是满10元返10元,所以他们希望用户多购买达到10元,所以列表页会更容易促成用户完成这件事;橙心优选送的“1.99元优惠券(满2元可用)”也希望用户能够完成更高的成交金额,所以在商品详情页推荐了更多“邻居再买的商品”刺激用户增加商品;而兴盛优选对于用户没有运营方面的要求,所以没有特别设计,仅按照当前电商的正常路径进行设计。

② 运营手段的差异

  • 美团优选和橙心优选优惠力度更大。
  • 兴盛优选已经运营多年,在面对互联网巨头入场后的巨额补贴狂轰乱炸不得不进行一定的优惠补贴,从这里也能看出,兴盛优选在对新用户的获取上策略可能与美团及橙心不同,更加讲究稳扎稳打。
  • 但美团和橙心的新用户激活补贴上的确很有效,无论是团长在推荐上,还是用户传播,都更容易快速传播和成交。

③ 登录流程的设计差异

  • 美团和橙心在登录时,优先获取用户的微信手机号,然后再引导用户授权昵称;而兴盛却是相反。
  • 在这个设计上,可能不会有太大的影响,但优先获取手机号会优于授权昵称信息,获取到手机号才能对用户进行更多的运营触达,只知道昵称对平台来说,没有运营价值。
  • 在登录流程上,美团采用的引导方式比较一本正经,兴盛优选带了一句slogan,而橙心在这里的设计利用文案和图片设计将流程近一步简化,且充分利用了页面资源,同时也未对用户造成更多干扰。

万字长文:全面解读社区团购增长之路

2)新用户优惠选品

除此之外,对于新用户激活的选品也是一门学问,所以我们简单来分析一下当前美团优选、橙心优选、十荟团的新用户选品逻辑:

橙心优选和美团优选的信任专享商品较多,在首页展示前三个;十荟团目前看只有3个。

不考虑数量上的差距,我们从以下几点分析:

① 新用户激活达到aha时刻,需要让用户感受到产品的核心价值“物美价廉”,价廉很容易做到,收到商品后必须是相对优质的商品;所以,在这个地方,橙心优选选择的商品大多都是相对“标准”型的商品,蔬菜这种就不多,相对会更稳一些,不容易在商品上引起用户不满。

② 产品定位上,社区团购平台希望变成老百姓的菜篮子,所以对新用户的引导上也会有更多这样的选品来填充用户主观意识,美团优选即是如此,在美团优选能够保证物美价廉的基础上,提供更多产品定位相关的商品选择,也会让用户直观了解一些产品定位。

③ 着重说一下“价廉”,无论平台提供的商品是否真的足够价廉,0.01元总会比1.00元更吸睛,可以发现,美团优选的商品放眼望去没有超过10元的,而且有很多都是0.01元;除非是真的精挑细选的用户,否则在第一注意力上,美团的价格会更吸引人。再结合新用户对平台的不了解,也会低成本(几乎无成本)接触。

所以,整体来看,美团优选的品类选择可能更胜一筹。

(最后,新用户激活的选品上,随着后期产品的完善,各大平台也会根据用户画像和数据等更多维度不断优化选品策略。)

四、用户留存

在零售电商平台的留存上,即便下沉市场用户对价格更加敏感,但也对质量有一定要求;两家平台相争,如果一家商品质量不行,在价格相差不是特别悬殊的情况下,即便平台商品价格再低,用户也不会长期选择该平台,更何况,社区团购引流品类不太会拉开太大价格差距。

所以,对新用户的留存,一定要做到物超所值,超出预期,让用户在主观意识上不断巩固对这家平台物美价廉的认知。

而要做到物美价廉,优质的商品、供应链及高效运营管理成为社区团购成功的关键。

成功的社区团购平台需要成熟的线上需求-线下配送-仓储供应链的同城零售产业链,优质的商品和供应链及高效的运营管理为社区团购成功关键。

接下来我们将从选品、供应链、团长运营、产品设计、扩张地域选择这5个维度简单分析一下其对产品和留存的影响。

1. 选品

社区团购本质上是一门零售生意,而零售生意的讲求的就是服务和供应链;之于社区团购而言,平台想要长远发展,选品能力和对区域消费者的理解能力至关重要。

根据艾媒数据调查显示,用户主要在线上购买蔬菜、水果以及肉制品,食材的购买成为用户最主要的需求,社区团购也是基于此为选品重点。

万字长文:全面解读社区团购增长之路

2. 供应链

物美价廉可以说是社区团购的核心竞争力,而要想在保证产品“物美”的前提下保持价格优势,供应链是关键,优质的供应链直接决定社区团购的产品质量以及供应的持续性,因此选好供应商是直接决定社区团购能够做起来的关键点之一

解决方法是优化环节,完善供应链的布局,直达上游,解决信息不对称,批发层层加价的痛点;同时社区团购的预售C2B模式,一定程度可以解决库存积压及产品质量难以保障的问题;另外互联网通过数据积累,构建消费者画像,从而反馈、优化供应链。

如果要细说,里面会有很多很深入的东西在,完全可以单拎一篇文章来说了,所以本篇我们简单来了解一下美团优选、橙心优选、兴盛优选、十荟团、多多买菜的供应链设计。

美团优选:大仓—网格站—自提点的配送机制(从产品设计中也可以看出),当然供应商的招募和甄选也十分重要。

万字长文:全面解读社区团购增长之路

兴盛优选:供应商-服务经理-门店,兴盛优选自建物流体系,让供应商把货源发送到兴盛优选的共享仓,再通过共享仓、B2C仓,服务站,实现12小时内将商品从供货地匹配到自提点

万字长文:全面解读社区团购增长之路

十荟团:从产品中无法了解,从其他渠道了解到,目前十荟团的业务覆盖辐射全国,拥有华中、华东、华北、华南、西南、东北六大区域、百余城市点;而且十荟团始终坚持以城市圈为单位的扩张轨迹,再根据其打造的城市圈模型打造出一个三级仓模式:区域仓(共享仓)+城市仓(分拨仓)+服务站

多多买菜:拼多多从一开始就将供应链的优化定为长期的战略发展重点,很好的为多多买菜赋能;从多多买菜产品中也可以发现,其当前的供应链物流体系也采用网格站形式。

万字长文:全面解读社区团购增长之路

可以发现,美团优选、兴盛优选、多多买菜和十荟团的供应链体系的基本是一致的。

万字长文:全面解读社区团购增长之路

橙心优选:未找到相关资料,猜测其如果要保持供应链优势,大概也会采取该方式,或者会有更优的解决方案。

3. 团长高效运营

团长是链接消费者与商家的关键点,而团长的运营能力就直接决定了社区消费者的购买能力,所以“团长”的运营和服务水平,成为影响社区团购成功的重要因素。

除了拉新目的,“团长”工作还主要包括管理社群、商品推荐以及提醒顾客提货。

团长通过微信社群推荐商品的作用相当关键。团长可以清楚的知道社区比较受欢迎的商品有哪些,可以以此进行推荐,同时也可以选择平台上的高补贴商品进行推荐,团长在帮助团员筛选商品的同时,也能引导团员不断进行消费。

在这个过程中,团长就需要思考如何促进消费、提供周到服务、解答咨询,以及如何处理纠纷和协助售后;但是,团长的业务能力参差不齐,有的团长只是顺便做一做团长收益,做多做少很佛系,有的团长却会很认真的去研究和运营社群,实现自身利益最大化,而这样的团长也是稀缺资源。

所以,如何提升团长的运营能力、如何燃气团长的斗志将变得十分重要。而这也将是当下及未来一段时间里平台运营的重点。

当前各家对团长运营的详细战术在此不做过多介绍,我们简单分析一下平台可以如何更好的管理团长,最大化团长对平台的价值:

  • 团长培训体系:对团长进行培训,平时可以提供一些学习资源,帮助团长提升自身业务能力。
  • 团长固定激励体系:佣金透明及奖励即时到账;并结合任务体系,每月或每周固定分配任务,完成任务即可额外获得多少奖励。
  • 团长多变的酬赏:经常举行一些任务挑战,难度等级要适可,完成挑战即可获得神秘大奖。
  • 团长学习体系:对团长进行管理和运营,展示业绩较好的团长的业绩,并邀请他们分享,表现十分出色的还可以进一步提拔或给予更多资源;此外,并可据此提供团长更多赚钱思路,比如分享的动力是扩大个人影响力,其他有意愿的团长还可以付费跟优秀团长学习运营技巧。
  • 团长关怀体系:在节假日及团长生日等时间节点,为团长送温暖。

4. 产品设计

团长虽说是现阶段拉新与留存的重要角色,但团长对平台的忠诚度并不高,且团长的服务质量是不稳定的,兼职的团长随时可能“跑路”;在这种情况下,如何通过自身产品触发和唤醒末端用户,让用户更加“忠诚”将是产品工作的重中之重。

首先,我们还是来看一下平台当下的产品设计,我们以下几个维度来看一下:

1)产品结构

大体结构如下结构图:

万字长文:全面解读社区团购增长之路

该结构设计比较符合当前电商产品通用设计结构,符合用户认知习惯,除此之外:

  • 美团优选增加了图文菜谱模块,兴盛优选增加了视频菜谱模块
  • 而多多买菜作为拼多多APP内的一个大模块,设计秉承极简,在小程序内设计也同样保持一致,只有首页、订单、购物车三个重要模块

虽然产品内结构基本大致相似,但细节设计仍有不同:

首页:

① 品牌露出

  • 橙心优选:买菜,就是便宜;
  • 美团优选:便宜有好货、次日16点自提、售后无忧;
  • 兴盛优选:一家有温度的社区电商;多多买菜:售后无忧,品牌保障、极速退款、次日自提;
  • 十荟团:次日达。

总结下来,主要卖点为:物美价廉、快(次日达)、售后无忧。

在展示和卖点总结上,美团优选更胜一筹。

② 自提点选择

有助于定位用户所在社区需求,以此进行策略优化。

③ 商品分类入口

有助于用户对平台商品有初步的认知,同时帮助用户进一步选择自己所需要的商品。

④ 运营活动

节日特惠、限时秒杀、万人团购等常规活动设计,利用稀缺以及时间压迫的心理,来刺激用户消费。

万字长文:全面解读社区团购增长之路

万字长文:全面解读社区团购增长之路

分类:

  • 美团优选:首页分类里的商品与首页同类型下的商品排序基本一致,差异甚微。
  • 橙心优选:首页分类入口直接链接到“分类”模块,上滑悬浮分类下的商品与分类对应类目下的商品排序不同。
  • 兴盛优选:直接将首页里的分类入口和下面推荐商品的类型入口链接到“分类”下对应的类型里。
  • 十荟团:首页悬浮入口直接链接到分类,首页固定展示入口进入的商品排序与分类中也完全一致

从首页与分类的关系来看:目前首页内容与分类内容重合度较高,但从长远来看,随着对用户需求的精细化运营以及用户数据的获取,首页会有更多的推荐策略;而分类模块更像“图书馆”,方便按具体类目需求全量查找。

万字长文:全面解读社区团购增长之路

购物车:

在商品推荐上:

  • 美团优选、橙心优选:在购物车根据用户购物车的商品类型优化商品推荐策略,在产品内围绕用户购物第一步做足文章
  • 兴盛优选、十荟团:比较简单,但在后期发展来看,页面资源依然不可浪费;且从拼多多的多样化运营在下沉市场的成功来看,用户能够接受页面的丰满。
  • 多多买菜:由于购物车为弹窗形式,让内容变得更轻,也无需在弹窗上进行更多的内容设计。就生鲜购物场景来看,用户不太会像在淘宝上一样能把购物车加满,而且蔬果肉禽类商品有保鲜期和一定时令性,每次生活需要时候直接加入购物车并购买结清,所以弹窗设计也完全可以满足需求,但对于淘宝这样的产品可能就无法设计成弹窗形式。

关于自提点的设计:

  • 美团、兴盛、十荟团设计有自提点的展示,橙心优选没有
  • 个人思考:由于该类平台与百果园、每日优鲜这种地域线下门店内水果配送不同,不涉及每个门店内商品库存不同的问题,且在此处自提点也不可修改,所以无论是从功能逻辑还是使用场景,自提点的展示似乎有些多余。

万字长文:全面解读社区团购增长之路

我的:

“我的”里面可以看出很多产品的运营痕迹和其他信息:

  • 比如美团的优惠券、红包、活动中心;橙心优选的余额、优惠券、赚钱中心;兴盛优选和十荟团的优惠券
  • 从运营手段也可以看出,美团和橙心相对会有更多的运营思路,逐步完善运营体系设计、用户激励体系设计;而兴盛优选和十荟团相对来说运营痕迹会少一些,但对社区电商来说,运营手段也是十分重要的,尤其产品发展后期。

万字长文:全面解读社区团购增长之路

菜谱:

美团优选和兴盛优选均加入了菜谱模块,区别仅在于形式,我们从该功能的必要性和未来发展的可能性来分析一下。

从功能必要性来看:

  • 根据艾媒数据调查显示,用户主要在线上购买蔬菜、水果以及肉制品,食材的购买为用户最主要的需求,所以结合用户的实际消费需求,加入“菜谱”设计能够扩展用户的使用场景,并将电商加入社交属性,增加用户使用频率,更有利于用户留存
  • 结合抖音、快手类短视频形式菜谱分享的火热程度以及下厨房的成功发展,该功能的加入会给产品带来更多的可能性

从未来发展的可能性来看:

  • 在后期如果验证了该模式的成功,各大社区平台将全部快速投入“菜谱”体系的搭建。
  • 菜谱的形式也将不仅仅限于图文、短视频,还会有中长视频、直采直播等更多玩法
  • 在内容的建设上,也将不再仅仅是炒菜,还会有烘焙、甜点、饮品、水果拼盘等等更多内容的丰富
  • 在运营体系的搭建上,也将会考虑充分利用“学习做菜”这一场景和需求进行更多运营手段的探索
  • 最重要的,平台可以邀请抖音、快手的相关领域的KOL入驻,并吸引更多UGC创作,后期这个博主或将成为新的主力带货“团长”

万字长文:全面解读社区团购增长之路

2)各家平台用户行为闭环设计

hooked模型,应用hooked模型设计用户行为闭环,是提升留存常用的手段。

用户行为闭环,即通过某种渠道主动触达用户,引导用户完成某个关键行为,并给予用户相应的“奖励”;通过用户行为闭环的设计,使用户重复该闭环路径,不断培养和巩固用户使用习惯,使用户形成依赖,在之后有相应需求的时候就会下意识的打开产品。

万字长文:全面解读社区团购增长之路

① 来看下各产品现有的触达渠道

  • 短信:只要用户注册即可获得。但现在这种营销短信很容易就会被手机智能拦截。
  • push:目前美团优选、橙心优选、多多买菜有相应独立或者依托的APP,可以进行push推送
  • 微信生态:小程序、公众号、订阅号、视频号

万字长文:全面解读社区团购增长之路

微信生态矩阵橙心优选比较完善,而且认证官方服务账号,更加权威,增加信任感。

从另外一个角度,在上面新用户激活部分也有提到,虽然各大平台当前都有自己的微信生态矩阵,但仍然需要在合适的时机引导用户关注,否则依然无法触达用户。

② 可能的行为设计

对于平台来说,培养用户的习惯就是打开平台产品并成交,而且本身社区团购电商是相对中高频应用,所以我们的行为设计最主要的是“完成下单”,更高频的行为就是先让用户经常打开产品来逛逛,瞧瞧。

所以,我们针对这两种目的,会有不同频次的推送设计和触达引导方法。

③ 当前存在的行为闭环设计

目前晓晓截图到的仅有短信和小程序服务通知两种触达方式,美团、橙心、多多均有push,但这里没有示例暂且不多说了。

万字长文:全面解读社区团购增长之路

短信以橙心优选为例(加入购物车&购买不再做展示):

万字长文:全面解读社区团购增长之路

服务通知以多多买菜为例:

万字长文:全面解读社区团购增长之路

当前闭环存在的问题:

  • 似乎更加关注小程序打开率,而非闭环的购买率。
  • 当前体验到的除了提货通知这种强关联的,其他类似于红包补贴、降价通知等的提醒,均直接进入小程序首页,接下来没有一个对应的引导;比如多多买菜的商品降价提醒,打开并不是对应的商品,而是小程序首页,路径并不能很好的衔接;以及橙心优选的鸡蛋,也不能直接找到这个便宜的商品进行购买。

闭环优化建议:

  • 针对不同类型的提醒设计更精细化的路径,并形成sop。比如橙心鸡蛋的例子,打开小程序可以直接进入商品详情页,或者把商品放在首页第一位置,便于用户找到对应商品。
  • 将提醒按目标进行分类,一种是不断进入用户视野,让用户记住产品的提醒类型,一种是希望用户点开提醒进入小程序完成购买行为的推送提醒;根据不同目的来设计文案和数据指标。

④ 探索新的闭环设计

由于我们无法实际拿到内部数据,所以根据我们的理解简单从三个维度来思考可能的闭环设计。

a、提升参与频次

目前由于产品还是初期成长期,很多运营手段未加入,我们根据常见玩法分析:

  • 后期引入每日签到等任务体系来增加用户的产品打开率;
  • 橙心当前推出的果园也可以作为打开引导物;
  • 美团和兴盛推出的菜谱功能,为高频功能,可以以此来引导用户回到产品。

b、提升参与强度

对于社区团购平台来说,强度=金钱,单次消费金额越大,强度越高,所以从提升客单价角度考虑:

  • 优质菜谱推荐将金额较大的内容赋予高一点的权重来引导用户增加消费金额;
  • 充分利用当前已有的有门槛红包;
  • 完善用户激励体系。

c、增加使用场景

除了广泛意义上的使用场景,还包括触发渠道的完善:

  • 目前平台的订阅号、公众号、视频号都还没有很好得利用起来,需要以此来增加触点,覆盖用户更多的使用场景;
  • 菜谱增加早餐、甜点、果盘等的类型的制作方法,覆盖用户更多的生活场景。

根据以上分析,以菜谱功能触发举例:

  • 闭环设计:提示有热门/上新/尝鲜等菜谱 -> 点击打开APP或小程序进入相应菜谱详情页 -> 浏览菜谱 -> 根据菜谱推荐购买菜品;
  • 触发渠道:需要根据触发渠道进行划分,比如专门使用公众号和订阅号渠道触达,服务通知主要发送降价等优惠通知及到货提醒,push可以比较综合,因为push相对弱一些;
  • 触发频率:菜谱一天最多触达3次,可以根据早、中、晚三餐时间进行触达时机设计;
  • 数据指标:主要为购买率,还需要监测触达率、打开率、菜谱浏览率;
  • 前提基础:菜谱功能经过数据分析发现的确对用户留存有帮助。

5. 扩张地域选择

除此之外,社区团购平台全部都是选择性以某个地区开始发展,逐步扩增,对于城市的选择也是一门学问,感兴趣的朋友可以通过《社区团购城市选择策略研究》这篇文章了解。

五、未来展望

1. 后续发力重点

总结来说,主要有以下3点:

  • 完善团长管理制度;
  • 持续优化供应链;
  • 完善用户习惯培养机制及用户激励体系。

2. 更长期角度来看

从更长远角度来看,社区团购有可能走上去团长化和与实体店合作共存的道路。

何为去团长化?

短期来看,如何快速招募和管理团长并利用团长资源充分为平台提供价值成为平台发力的一个重点。

但如果没有强运营,团长的忠诚度都是很低的,现阶段情况是一个团长不仅仅是一家平台的团长,而是每家平台的团长,团长也不会只推荐一家社区团购平台的商品,有生意就做,这也是利益绑定必然存在的问题,只要你来开疆拓土,无论你对团长的奖励是什么,团长都会接受。

但在当前阶段,平台还需要团长最大限度的为平台获取新用户,并为社区用户的消费进行引导等多种服务;而团长也需要平台能够为他带来收益,所以这个问题早期是可以被忽视的;但随着平台的发展,市场份额的占有率扩增,平台对团长的要求将会是如何帮助平台最大化的完成订单成交。

这个时候,有可能你费时费力的培训的团长还帮别人家完成了成交额任务,所以最终,要么去团长化,要么让团长忠诚。

要一个人对一个平台忠诚是很难的事情,所以有可能最终平台会发展为去团长化,实现标准化运营。

但是这需要两个前提条件的实现:

  • 第一,用户与平台间建立了良好的信任基础,群成员的规模也相对稳定之后,团长最核心的引流作用会逐渐消失,由此,团长的职能会转变为简单的客服工作。
  • 第二,平台基于流量集中和变现的需求,将用户浏览、购买的习惯由微信群推荐引导至App,那么团长自然而然也不再是运营的核心。

所以,还是需要快速优化供应链,并想尽办法不断培养用户主动使用习惯。

其次、与实体店合作共存,完善消费场景。

挑选有实体店的团长,与其进行合作,为他们提供优质货品,他们不好卖的品类可以形成互相之间的流动买卖,卖的火爆的支持在店里预订。

用户永远都存在即时性消费需求,存在“逛街”需求,而且总有用户喜欢看到商品再购买,尤其在对水果的挑选上;除非有很强的信任基础,平台也能够每次都提供符合口味的水果,否则他们都需要先尝后买。

所以以此来满足用户更多场景下的用户需求,既然干不掉,那就合作共赢。


文章来源:人人都是产品经理  作者:产品经理孙晓晓

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


B端产品设计的潜规则

资深UI设计者

那些关注用户体验的人们经常问我一个问题:什么是B端的用户体验?它与C端的用户体验有何不同?作为一名过去5年多主要从事B端IT产品的设计师,在这里给大家讲述一些我的想法。

首先,B端产品通常有2种类型:企业内部产品(Internal Solutions)和企业对企业的服务产品(B2B)

企业内部产品的用户体验设计有一些独特性:

 

你的工作(可能)永远与你的作品集无缘

很遗憾,几乎所有企业内部产品或项目都被严格的保密协议(NDA)保护着。

绝大多B端项目都是为特定用户提供的专门内部流程。这意味着除了那些每天盯着它用的用户,其他任何人都可能不会看到你的设计。即使你设法获得了将其放入自己作品集的权限,也需要抹掉所有敏感的数据才行。

不过幸运的是,大多数有足够能力来构建自己的定制IT解决方案的公司通常规模很大,而且它们的品牌可能带有足够的“影响力”,这样,项目身价得以抬高,也能让设计师进入面试的下一步流程。

 

测试对象虽然意愿很高,但总是很忙

设计企业内部所用产品的优点:你的未来用户将会是你的同事们。因此,在进行可用性研究时,你无需担忧任何层面的法律问题。另外,由于大多数内部项目都是为了优化和改进现有的工作流程,你的用户往往会非常愿意配合你的调研工作。因为设计不当的产品让他们的工作饱受折磨,因此尽早获得反馈对他们来说是最有利的。

但这其中的弊端是,由于你的同事们需要平衡全职工作,你很可能无法占用他们的宝贵时间。如果你能解决这个问题,他们通常会提供比您预期更多的反馈。

 

 

关于B2B的一些潜规则

您可能无法(完全)满足最终用户

对于C端产品,如果太丑或不好用,消费者可以拒绝使用。而B端产品即使学习成本比较高,但企业仍然可以“命令”所有员工学习这些用于开展业务的专用软件。

B2B产品最终将出售给业务决策者,然后再推给(最终)用户。他们更关心的是量化提升效率(efficiency)和安全性(security)同时预防错误(preventing errors)。大多数组织都在寻找一种解决方案来替代和/或优化现有流程。

这并不是说企业软件不应以用户友好为目标,但通常情况下,只要能够实现某些被企业视为至关重要的目标,其他能省则省。对底线(bottom line)的影响有时会成为最重要的因素。

全球各大企业的用户体验设计领导者仍在争夺一席之地,以证明优质设计的价值。不幸的是,许多企业的用户体验设计师只能在满足业务目标、技术要求和用户需求之间无奈徘徊。

像在大多数项目中一样,在企业领域里,如果可以证明更好的用户体验可以量化地提升生产率,比如可以节省金钱,这样你就有了一个绝佳的机会和挑战。

 

被“鲸鱼用户”左右

如果你在B2B领域工作,可能会很熟悉“鲸鱼用户(whales)”的概念。通常,他们是带给我们最多收入的客户,因此在某个特定产品的路线图中拥有极大的影响力。由于较少的鲸鱼用户简化了需求收集和确认过程,有时你的工作会非常顺畅,但不幸的是,这也可能导致你忽视掉很大一部分用户群体的意见。

我们见过诸多“被需要”的功能看起来并不适合大多数工作流程的案例(因为这是鲸鱼用户的特性)。通常,决策只是为了“去执行”,因为销售团队已经在下一个版本中承诺了这一点,而这个核心客户占产品收入的40%。这通常会使得产品对于其他用户而言就有些随机且不合逻辑了。

通常而言,在设计师进入管理层之前,他们很难影响到销售团队等强大的利益相关者的决策。潜在的利益冲突无疑是需要整个设计团队共同去面对的,大家需要平衡产品的长期愿景和立竿见影的“快速制胜”二者之间的冲突,以便为产品提供可拓展的设计和构建道路。

 

企业总是在旧版系统上运行

几乎所有财富500强的公司都是通过并购而成长为庞然大物的。

每一次的并购,都会将一个完全不同的系统和工作流程修补到现有的系统和工作流程中。很多开发于90年代的软件仍在诸多大型公司中运行。尽管从概念上看,“整合一切(consolidate everything)”似乎很容易,但是协调数据库和系统的过程着实很繁琐,且需要足够的时间。

B端用户体验的大部分工作是将用户从一套旧版(有时是手动)的工作流程中解放出来的艰巨工作。这涉及到对用户目标及多个系统的深入了解,需要我们列出规划,识别冗余和协同效应,然后将其与边缘案例相结合,以检验它产出的结果是否与当前操作模式的产出一致(如果不能优化的话)。

尽管过程并非总是如此艰难,B端软件依旧比C端复杂得多,因为即使其概念是“从0开始做新系统”,其数据还是全部来自于一堆与之配套的旧系统。在系统级别上思考流程、提出正确的问题并有效记录文档的能力是此类项目中最有用的技能。

我不是开发人员,所以我不知道我从Google里找的这张图片是否是能够准确展示典型的后端体系结构。

我所知道的是,对于每个项目来说,开发人员都会创建一个外观相似的图表,该图表展示了数据的来源和去向,它非常复杂,并且在提取,存储和推送数据时可能受到一系列限制。

 

条款和规则

大多数企业或组织需要遵循一套严格的政策法规,并且通常受到各种管理要求的约束。

常见的例子包括:法律/隐私要求(例如GDPR),国际化要求(例如日期格式,语言),无障碍(例如WCAG&ARIA),安全性等等。

这些规则中的每一条都来自于某领域的专家、某类别的检查清单(checklist)抑或是一系列更为模糊情景下的最佳实践(这些实践基于特定的方案和用例)。C端APP监管日渐常规化,同时,由于诸多企业或组织掌握的敏感数据极具货币价值,其受到的监管和审查也在不断增加。

当然,这个问题的答案显而易见,你的确切问题是存在第三方解决方案的,但是由于某些规则或规定,你可能根本无法使用它。

由于必须满足很多这样或那样的标准,对于用户来说,最终的设计往往不太理想,虽然乍一看可能并不明显,但这也是历史上许多政府软件的设计看起来很蠢的原因之一。

 

慢慢改进

与上面的观点类似,B端产品用户的独特之处在于他们对变化的抗拒心理。这意味着你需要认真思考工作流程改变后的结果,诸如使用不同的颜色,或是调整页面内某个按钮的位置等简单变化。

我们甚至还没有谈及信息架构。当你开始做信息架构时,卡片分类研究可能会告诉我们现有的导航设计是完全错误的,或是导航里的某些分类实际上应该嵌套到其他地方。不过你很快就会发现,当实际执行这些变化时,你将面临巨大压力。

知道何时依赖自己的研究和专业知识,何时推进,何时放慢步伐是很关键的,这样你才可以避免疏远过多的用户。毕竟对于这些用户来说,过去几年的工作流程已经根深蒂固,他们需要时间、资源和指导来学习或重新学习这些系统的使用。

尽管他们可能会拒绝改变,但这绝对不代表我们作为UX专业人士就无法引领他们拥抱变化,我们要做的便是了解他们的痛点并在设计时时刻考虑到用户的最大利益。

 

信息密度

许多旧版的B端app产品都有一个共同点,那就是它们的信息密度非常高。

理想的解决方案也许是隐藏所有不必要的信息,仅显示刚需的信息,但是“隐藏掉错误内容”的风险可能非常巨大,以致于不得不将其保留在不断增加的的实体屏幕上。

这就容易导致打包的屏幕设计极大增加了用户的认知负担。而这些负担之所以被用户“接受”,就是因为他们必须且只能“学习”如何使用该软件来完成工作任务。

此外,对于许多管理或监控类的产品,用并别模式查看信息进行比较和参考是非常重要的。复杂的非线性(Complex non-linear)的工作流使得界面设计更具挑战性,因为许多选项都需要既可随时访问又不能妨碍其他操作。

有个很好的例子:为什么Bloomberg(上图)的UI看起来比Robinhood(下图)复杂1000倍?

结论便是,B端产品的界面里,需要牺牲留白空间以展示更多信息的情况并不少见,因为用户经常需要查看更多信息以便完成更复杂的任务。

 

你的机遇

随着公司或组织越来越依赖技术,B端产品的用户体验设计将成为许多公司的主要竞争优势。

如果你具有拥抱复杂性、平衡多个利益相关方观点,并在约束内进行创新的能力,你便能轻而易举的杀入B端软件设计领域。

随着机器学习等诸多振奋人心的新技术出现,各种业务会带着其庞大而杂乱的数据库排队等候。UX将站在如何产生有价值的见解的最前沿,以便弄清用户想要从这些数据中获取什么以及如何对其进行操作和访问。

虽然在很长一段时间里,dribbble(追波)上的精美视觉设计仍将占有一席之地,但更繁重的任务还会落在那些不起眼的B端设计师身上:比如设计电子表格、数据集、草图原型、投入调查以及数小时与用户和利益相关者的交谈和测试。

最终出现在用户面前的内容可能并不完全整洁和简单,但请你相信,在成为备受瞩目的明星B端产品前,其每一处基准点都经过了UX设计师的严格审查。我们的用户已经全力以赴地使用这些产品努力工作,我们的产品也通过清除一些障碍来减轻用户的负担,这已经很不错了。

翻译:April.H  审校:戴猫子 |   UXRen翻译组 #366译文
作者:Yichen He
原文标题:《Designing for enterprise vs. designing for consumers》

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

信息容器的归类与应用

资深UI设计者

信息有各种形式,图、文、视频、音频等,而承载信息的形式也多种多样。
本文意将信息容器进行整理归纳,以总结出一些经验规律。



Part 1

————————

信息容器的概念


信息容器是承载信息的载体,位于内容层。要理解信息容器的概念,首先要理解界面中的层级关系。一个界面除了竖直方向和水平方向维度,还有纵深维度


从底层(远离用户)到顶层(靠近用户),基本上可以分为以下几层:

  1. 背景层

  2. 信息层

  3. 局操作(各种常驻于屏幕的bar、悬浮按钮等)

  4. 浮出层(模态类型的浮出层还需要有蒙版进行隔断)



本文要讨论的“信息容器”,指的是信息层上,装载信息的载体。信息的类型多种多样,可以是文字、图片、视频、各种操作控件等。




Part 2

————————

信息容器的常见类型


常见的信息容器主要有2大类:列表卡片


在整理案例的时候,我不禁产生了一个疑问,到底什么是列表,什么是卡片?如何界定和区分两者?这个问题乍一听有点无厘头,列表不就是列表吗,多个布局一致的狭长单元组合在一起,就形成了列表。那么什么是卡片呢?和屏幕两侧保持一定间距,带圆角的就是卡片吗?


我们不妨先看看下图案例:




2.1 列表和卡片该如何界定?

为什么类似的布局形式,上图中,图1给人感觉是列表,图2给人感觉是卡片,图3既像列表又像卡片?

从内容层面来说,包含的信息类型有:文字、图标/图片、按钮。几乎没有太大区别。

是什么导致我们观感上的不同呢?

电商案例也许可以给出答案。



从电商产品的商品列表页中可以看到,用户可以自主选择两种不同的商品展示模式:列表模式卡片模式

这两种模式几乎可以对应“列表”和“卡片”两种信息容器样式。完全一致的信息量:主图、标题信息、价格信息、辅助信息,相似的展示效率(一屏展示约4.5个商品),不同的信息容器展示形式给人不同的感觉。


单纯从信息层面或者视觉层面都不能界定列表和卡片,如果多维度叠加限定又太繁琐,因此本文给出的列表和卡片直接的区别界定是:可以自主定位关键线索,规划视觉浏览动线。如果视觉浏览大方向是竖直的,那么就归入列表范畴,浏览动线不是竖直而是折线的,都算在卡片范畴。



2.2 常见的信息容器分类:

除了上面说的,最常见的两类信息容器:列表和卡片之外,还有另外两种形式,分别是:无容器和复合容器。

这些容器具体有哪些特点,我们一一来看。






Part 3

————————

列表


列表的定义:将结构一致的信息单元在竖直方向上铺陈下去,形成的信息集合。

不同场景要呈现的信息侧重不同。


举例几种常见的列表形式:

  1. 用户/消息列表

  2. 图文列表

  3. 功能列表

  4. “卡片型”列表


3.1 用户/消息列表

用户/消息列表的内容结构很清晰,头像+身份+内容提要+辅助信息。

图片天然地比文字更具有吸引力,视觉上的优先级排序是头像>身份>内容提要>辅助信息。

当然用户可以很方便地选择关注的对象是图片还是文字,这体现了列表的优越性,浏览动线竖直,可以方便用户根据自己想要的索引快速定位。


这里值得讨论的是头像用方形还是圆形的问题,相信大家都想到过这个问题,同样是社交产品,qq是圆头,微信是方头,这里边有什么原因呢?

本文尝试分析一下,仅是个人意见,欢迎讨论。



按照理论,圆头亲切的形状感知更加适合轻松基调的产品,方头严谨的形状感知更加适合严肃基调的产品。这解释了电商类型产品(淘宝、京东)的信息通知一般都是圆头的,匹配轻松愉悦的网购体验,而金融类产品(支付宝)多是方头。对于同是熟人社交类产品的微信和qq来说,qq用户层年龄偏低,属性相对更加活跃,更加轻松的圆头可能更适合此类用户。


以iOS为例,当用户向左滑动列表时,呼出针对该列表单元的操作。具体列表对应具体操作,操作项数量不同。


方案A:

优点:操作底板宽度适应文案,不会出现空间局促的现象。

缺点:当文案字段长时,列表被推出屏幕外的内容较多,当用户操作分心时,可能会忘记正在操作的对象,虽然这种情况极少发生。


方案B:

优点:操作底板固定,文案折行规则明确,既不会造空间拥挤,被挤出屏幕外的列表区域可控。


方案C:

优点:搭配图标,视觉更丰富。

缺点:图标占据了一定高度,导致文案无法折行,列表被推出屏幕外的内容较多,与方案A类似。


综上,个人认为方案B是最合理的,对于文案长度的宽容度高,即便文案较长,也可以保证视觉和谐,并保留较多列表内容。


用色策略上,使用的是为大众所接受的“语义色”,一些具体的颜色在长期经验积累中形成了固定的语义。


当用户触发了带有一定破坏性的操作时,需要用户进行二次确认

并不是所有情况都需要二次确认,二次确认的样式也有多种。


同样都是模态视图,要表达的信息也相似,都是要求用户进行选择,为什么有些产品选择将对话框居中,有些产品选择将对话框放在底部?这里涉及到关于模态视图的相关知识点,本篇文章旨在讨论信息层面的内容,模态视图涉及到了浮出层的内容,将在下篇文章中进行详细探讨。本篇文章不做过多延展。



3.2 图文列表


信息流产品一般是由图片+重点文案+标签(可有可无)构成。

不同性质的产品想要突出的重点不同,根据内容的重要性权重来分配视觉占比。


从上方几个例子中我们可以看到:

在图文比例从左到右依次提升;

图文布局案例1-3使用了左文右图的方式,案例4-7使用了左图右文的方式。


搞清楚如何图文布局和设置图文比例,就基本解决了资讯流页面最关键的问题。



资讯列表或称feed流,主要根据用户喜好定向推送内容。除了从用户日常浏览、搜索等行为中提取用户喜好信息,用户主动反馈的信息精度更高,用户不惜花费更多操作成本来提示产品,对内容不感兴趣。


从视觉上说:

1、提交反馈的入口(小而浅的icon)都不明显,有些产品用“更多”来提示用户,有些产品用更加负面的“关闭”来提示用户。当用户对内容产生较为强烈的反感时,才会注意到屏蔽入口。常规浏览时,该图标不会影响用户注意力。

2、反馈形式采用模态对话框,用户需要选择具体操作,是屏蔽内容或作者、还是举报或不感兴趣。

3、对话框是否有指向性:从表意明确的角度上来说,带有箭头的气泡更有利于用户定位对象。


从交互上说:

反馈入口热区较小,容易误触,大多数情况下,用户不会注意和点击该图标,用户是以浏览为主要行为。




3.3 功能列表


列表索引一般还是定位文字为主要形式,不同用户的认知水平不同,图标表意始终是一大难点,多用为辅助记忆或单纯提升视觉美观。图标虽然是体现设计风格的重点,但是在具体情境下,如设置页,用户更加在意快速找到自己要找的内容,多度的图标样式,实际上会折损用户的检索效率。


一般功能页面或放置许多功能,常常会超过十几项,这种情境下,检索效率低下是一个痛点。

如何提高检索效率?—— 分组



分组给用户提供了认知线索,根据格式塔原则,用户总是倾向于把距离近的、样式统一的元素归位同类。

毫无分组显然对于检索是不利的,用户需要逐一浏览,该情况适用于列表项无法分组时,如果有分组条件,务必分组,帮用户节约筛选成本。


UI界面中,列表的分割方式常见的有以下3种:

  1. 线条分割

  2. 块面分割

  3. 间距分割



3.4 “卡片型”列表

在我们的固有观念里,大圆角,不通栏,有投影的形象就是卡片。

这种样式也越来越盛行,许多产品尝试将列表也用“卡片化”进行包装。

虽然是相当细节的点,但是精细化处理之后的结果就立刻会与批量化处理的结果拉开差距。

产品级的风格统一来源于点滴细节。





Part 4

————————

卡片


卡片的类型繁多:单列大卡片、泳道、内容流(两列网格、瀑布流)、宫格


4.1 大卡片

从内容展示效率上来讲,单张大卡片就占据占据屏幕(刘海屏)超出一半的高度,用户需要不断滑动屏幕浏览下方内容,操作成本较高。大卡片形式对内容本身,如图片的质量要求很高。这种模式常见于图片社区或垂类电商产品,图片社区(如躺平)本身较为小众、即便是UGC(用户产生内容)单元,用户上传的图片素材平均水平也较高,垂类电商(如Nike)图片品质由编辑控制,质量高且稳定。以上类型产品不以量吸引用户,用户往往更加在意内容本身是否优质。用户没有带着明确的目标,心智更加类似于浏览杂志。产品提供什么内容,就进行浏览。从上方案例可见,除了微信读书之外的3款产品首页都没有突出搜索功能,而是以信息流呈现为主。


与列表分割一致,卡片也有对应分割方式。


大卡片占据屏幕面积大,理论上大卡片的内容质量是经审查的。部分产品不存在大卡片容器的交互,点击卡片直接进入详情页。部分产品通过比较低调的方式向用户收集对于内容的意见。如微信读书长按卡片,可以选择不再显示该卡片内容,产品收集反馈,对于用户喜好的描述可以进一步具象准确。长按不是一个高频手势,用户触发该手势往往是试探性的,代表用户确实对于内容有意见要传达。躺平使用了简约三小点样式的“更多”图标来收纳不常用的收藏和举报操作。




4.2 泳道

何为泳道?顾名思义,常见的滑动手势是上下方向滑动,但有时也会出现横向滑动的情况。一系列对象在一条横向轨道内左右滑动,该类型的形式组合在一起,就好比泳道赛道一般。


可以横向滑动以查看内容的呈现形式,称为“泳道”。泳道可以有多种形式。



停止位置随机:

内容与手势相关度高,比较自由,但停止位置随机,不能保证停下后用户能完美看到当前卡片的所有信息,需要用户微调卡片位置。


停止位置固定:

根据用户滑动速率,模拟物理惯性和摩擦,判断最终展示哪张卡片,并将卡片呈现在屏幕中部,确保卡片上的信息都可以读取。这种交互更加合理,给滑动设置卡点,类似banner效果。




4.3 双列卡片

双列卡片可以看成是大卡片(单列)的另一种表现形式。这种形式更加提高了空间利用率,对于单一信息展示更加克制。平衡了效率和效果,是电商、图片社区、视频等产品类型的首选表现手法。


双列卡片可以细分为两大类:

卡片流(对齐)瀑布流


卡片对齐:

优点:规整统一,视觉动线清晰,浏览舒适。

缺点:对主图尺寸要求高,确定的比例会对商品展示有一定局限。


瀑布流:

优点:图片尺寸宽容度高,满足一定比值区间即可。保证商品的展示完整度。错落的布局容易形成节奏。

缺点:不容易进行比较,若要进行图片间的对比,比较困难,视觉动线混乱。



两列式的卡片布局需要注意内容层与背景层的区分。

大多数产品的背景层是浅灰色,内容层是白色,色差可以建立区分。部分产品背景层是白色,或者说取消了背景层的概念,那么要建立卡片之间的区分,就需要通过间距或者卡片加底色的方式。


个性化推荐模块对电商产品尤其重要,准确地将用户可能感兴趣的产品推荐出去,可以减少用户的搜索、筛选步骤,提升购买效率和愉悦感,从而提升用户对产品的评价。因此,不断收集用户的喜好相当重要,尽管各种算法已经让产品显得越来越智能,但依旧要给用户留下提建议的入口。

上文介绍了资讯类产品中,用户如何给出对于具体信息的反馈,电商类产品原理也大同小异。


从功能上来说,淘宝、闲鱼、京东,都是通过用户手势(点击图标或长按卡片或两者皆可)来呼出选项,用户通过选择来表达意见,从而使推送更精准。


从视觉上来说,淘宝和闲鱼的反馈形式类似,都是在卡片上添加一个黑色半透明蒙版,将有限的选项竖直码放在卡片上,类似小型模态的概念(但是这里不同于严格的模态视图,没有限定用户必须要做出选择,用户可以直接划走)。而京东的逻辑不同,使用了传统阻断性模态视图的处理方式,将下方卡片用蒙版遮挡,希望用户专注于选择。


从阻断感上说,京东的阻断干是最强的,将用户从原本的浏览行为中提取出来,请用户严肃地做出对于当前商品的反馈。这样收集信息的效率更高。由于选项是盛放在带有指向性的小气泡之上,针对性足够,且延展性好,气泡的高宽都可以调整,而淘宝和闲鱼的处理方式,在极端情况下,如选项超过5项时,所有内容放在卡片之上,空间就很紧凑。


这类操作比较隐晦,可点击按钮很不明显,长按手势也不常用。同样是当用户有明确反馈需求时,才会寻找反馈入口,一般情况下,用户不会注意到。以用户常态下的浏览行为为最优先。


闲鱼的交互做的很细致,蒙版出现采用了水波的形式,用户抱着要吐槽的心态,这种精致有巧思的小动效在一定程度上可以缓和用户的烦躁的心理。



除了电商类产品,部分视频类产品长按卡片也会呼出对应效果。

案例1和案例2,长按卡片,都是出现视频片段的预览。效果类似iOS的3Dtouch,在相册中按压具体照片即可预览。而案例3,点击“更多”图标,呼出操作。然而选项只有1项,不符合逻辑,单一的选项无法构成“选择”,这会让人有点摸不着头脑。



4.4 宫格/网格

如果把界面看作是一张大网格,不同的内容占据着不同位置、不同面积的页面区域。

除了我们已经熟悉的“有序”布置,如从上到下依次排列内容(大卡片),或者从左往右依次排列内容(泳道),还有更加灵活多变的排布方式可供选择。

布局的本质是分配界面面积,用以盛放内容,同时运用面积对比进行突出。除了面积对比的方式外,还有其他方式可以突出关键内容。





Part 5

————————

无容器 & 复合容器


无内容的呈现形式比较简单:内容直接置于背景层之上。减少视觉负担,内容为主,形式为辅。

复合容器是指超过一种的容器形式的组合,如卡片中包含列表、卡片中包含泳道等。


5.1 无容器


5.2 复合容器




Part 6

————————

组合与强调


不同的信息容器组合在一起,搭建一个分工明确的界面。界面中不同的信息需要套用合适的形式去呈现。有层级就有对比,对比越大,层次拉得越开,重点就越突出。


建立对比的策略:

色彩对比、面积对比、样式对比、Z轴高度对比、静态动态对比



文章来源:站酷  作者:doo_W

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

B端表单设计思路总结

资深UI设计者

大家是不是时常困惑于,B 端的表单设计体现不出高级感?设计发挥的空间特别的少?

那是你没用对发力点~

B 端:设计表单页面时,一方面须尊重用户的习惯,不要在不必要的地方体现差别。总结了 4 个思考问题:

案例:以创建公众号消息自动推送为例

  • 思考用户用产品做什么事?用户会用该产品创建公众号消息推送,根据用户触发事件,推送相关信息
  • 用户用这类产品最关心的是什么?核对触发事件,检验消息发送状态
  • 用户有哪些思维定势?这里就不举例了(条件不变时,能迅速地感知现实环境中的事物并作出正确的反应)
  • 用户用过什么类似的产品等?……

另一方面要考虑信息层次。

搞定了基本要素后,我们开始考虑如何表现信息层次。

  • 封装度高、信息密度低
  • 如何判断采用哪种布局方式

什么是封装度高且信息密度低?

在了解什么封装度和信息密度前,我先跟大家讨论一下。什么是表单之间的关系。

我所认为表单之间的关系分为 3 种:

1. 常规结构

优点:

平铺所有需要填写的信息,适合内容项较少、内容项无法按照相关性分组的表单

缺点:

  • 表单页中需要填写内容众多,容易造成信息密度过高
  • 操作需要的视觉元素越多,用户的认知负担越重

使用场景:

当需要完成一个简单快速的任务,输入少量信息即可完成创建

B端表单设计没有高级感?那是你没用对发力点!

2. 树状结构

优点:

用于复杂任务时,拆解任务进行编排,适当的任务分割,可以降低用户出错率

缺点:

  • 无法在表单页中根据内容量进行合理地布局
  • 视觉噪点过多,无法兼顾页面展示和用户填写效率

使用场景:

适用于大型、复杂任务

B端表单设计没有高级感?那是你没用对发力点!

3. 显/隐结构

优点:

减少不必要(非重要)的输入项,能适当的减轻用户认知负担

缺点:

  • 虽然减轻用户输入负担,但无法高效的判定任务分割的容错率
  • 用户确认信息有一定难度,无法兼顾页面展示

使用场景:

特殊场景下使用

B端表单设计没有高级感?那是你没用对发力点!

那么用一条完整的链路来表达就是:

B端表单设计没有高级感?那是你没用对发力点!

了解完表单的结构关系知晓利弊后,那么应用在我们实际的场景中表达就是如图所示:

封装密度高且信息密度低

B端表单设计没有高级感?那是你没用对发力点!

△ 图中案例,仅做示例说明

将一个复杂的任务表单,进行封装后,看起来任务量是不是也变少了?操作起来也不是很复杂了?

小结:

分析了解表单的结构关系,判断表单,寻找共性的内容,将他们封装为一个卡片,也可以封装成一个组。主要的目的就是减少用户认知负担,提升操作/使用效率。

如何判断采用哪种布局方式?

关于使用何种布局方式的判断,应从信息的复杂度和关联性两个维度去梳理。根据信息的复杂度和相关性模型,选用相应的信息呈现方式,选用合理的布局方案来承载详情页的内容。

1. 信息的复杂度和相关性模型

B端表单设计没有高级感?那是你没用对发力点!

△ 来源:Ant Design;来源链接: https://ant.design/docs/spec/research-form-cn

2. 区隔方式

根据各个信息之间的相关性,判断各个信息模块之间的亲密度,通常情况下,相关性强的内容尽量靠近,相关性弱的的内容尽量拉开层次。

  • 不通栏分割线:将相关内容分开;
  • 通栏分割线:将内容分成多个部分;
  • 卡片:放置一个主题;
  • 页签:对象描述信息最顶层组织方式,如按版本组织、按意图组织、按阶段组织;

B端表单设计没有高级感?那是你没用对发力点!

△ 来源:Ant Design;来源链接: https://ant.design/docs/spec/detail-page-cn

3. 注意事项

  • 表单内容数量 <7 项,不建议分组;
  • 表单内容数量 7~ 15 个建议分组;
  • 表单内容数量 >15 个建议使用页签分组或采用分组标题栏展开收起样式。

文章来源:优设  作者:交互思维铺子

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



费茨定律在设计中的运用

资深UI设计者

费茨定律由心理学家 Paul Fitts 提出,用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。举例来说,你伸手去拿桌子上的咖啡杯,开始你的手臂迅速地往杯子位置移动,接着你会放慢速度直至找到杯子把手,这个杯子把手的大小与你“抓住”它有着一定的关系。

用一篇超全面的文章,帮你读懂经典的费茨定律

如上图所示,如果光标现在在任易地点想要去点击目标 target,最短路径一定是 D,最短路径上容错的最长路径是 D+W,只要水平上移动超过了 D+W 你就点不到了,而这个点击动作所耗的时间是一个常数加上一个以 D 为正比 W 为反比的函数的和。

让我们来看下面这个例子:图中右侧的红色方块代表目标,虚线代表从起点至目标的移动轨迹,其范围是用户到达目标前微调以弥补误差的区域,在右方有一个较大的目标,因为面积很大所以用户从任意点快速点击都会很容易,在目标上停下来之前不需要做太精细的调整。

用一篇超全面的文章,帮你读懂经典的费茨定律

相反,如果把右边红色方块缩小,用户快速点击目标会困难得多,需要做一系列精细的调整动作。

用一篇超全面的文章,帮你读懂经典的费茨定律

但如果同样大小的目标距离很近的话,因为到达目标范围所需的初始动作很小,所以准确点击它的难度也会小很多。距离越近, 初始动作因为幅度太大而超出目标区域的风险就越小。

用一篇超全面的文章,帮你读懂经典的费茨定律

按钮越大越容易点击

在页面中,大而近的目标区域意味着用户不需要做太精细的调整就可以轻易的到达目标。比如页面中的大按钮。

用一篇超全面的文章,帮你读懂经典的费茨定律

将按钮放置在离开始点较近的地方

夸克浏览器的搜索栏就放在离手最近的屏幕底部区域,相比常见顶部搜索栏更方便操作,效率更快。

用一篇超全面的文章,帮你读懂经典的费茨定律

相关按钮之间距离近点更易于点击

在设计注册、登录界面的时候,通常将「注册」和「登录」放到一起,不仅可以在视觉上增强用户对他们相关性的认知,还可以减少在他们之间的距离 。

用一篇超全面的文章,帮你读懂经典的费茨定律

△ 设计图来自网络 侵删

适用边界

费茨定律鼓励减少距离,增加目标大小以提升用户效率,但反过来亦适用,比如 iPhone 关机,不使用按钮点击,而采用滑动操作,这样虽然降低了用户操作效率,但增加用户操作时间,以起到警示用户谨慎避免误操作的目的,所以“取消”按钮放在底部方便点击的地方。

用一篇超全面的文章,帮你读懂经典的费茨定律

App 弹窗经常把“关闭”按钮放在卡片的右上角离手远的地方,还有开屏广告,广告商希望用户花尽量多的时间停留在广告内容上,这时候广告主会把“跳过”按钮放在难以点击的右上角,以降低用户的误触机率提高转化。

总结思考

按钮越大越容易点击,在移动设备上通常增加按钮点击热区范围以便用户不必精准地点击目标也能操作成功,但是可点击对象大小尺寸要合理不要过分的大;

让相关的内容更靠近彼此,在视觉上增强用户对它们相关性的认知,不过也不能过分靠近,会造成点击压力;

将按钮放置在离开始点较近的地方,比如屏幕底部易操作区域;

屏幕的边角很适合放置像菜单栏和按钮这样的元素,因为在屏幕边缘和角落位置时它们是“无限可选中”的,可以大胆操作而无需“微调”;

定律的反向使用可以适用一些特殊场景,比如想达到某种目的而降低按钮被点击的可能。


文章来源:优设  作者:印迹拾光

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


2021 年度九个设计趋势分析

资深UI设计者

从 7 大设计领域、400 多个设计案例中,我们总结出了 9 条属于 2021 年的设计趋势。

前言

在 2020 年发生了新冠疫情等许多历史性的大事件,但世界始终保持着对未来的希望,好设计的诞生也不曾停步。

通用信息平台 UED 上海团队历时一个多月,从数字产品、品牌创意、平面视觉、工业、空间、娱乐与时尚等多个领域收集近 400 个 2020 年具有代表性、前瞻性的设计案例,对它们进行聚类分析,并结合下一年的时事变化来预测 2021 的设计趋势。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 团队按领域分组收集素材

2021 的趋势重点

设计与时代背景有着密不可分的关系,我们认为会影响 2021 年的设计趋势的因素主要有以下三个:

1. 后疫情时代的影响

新冠疫情的持续除了改变了大众的生活习惯外,也意外地推动了各行业加速线上化转型、提供「无接触」服务,出行上的限制催生了游戏等线上娱乐市场的蓬勃势态,甚至一定程度上疫情也影响了社会和经济格局,导致了一些新政策的出台。

2. 00 后成长为新主力军

新生代的崛起导致了流行风格的一系列变化:二次元等亚文化成功破圈进入主流消费市场、复古设计的重心从 90 年代向千禧年偏移。他们以更开放多元的思维方式和新视角,影响着下一个 10 年设计题材的选择。

3. 软硬件技术的发展

近年来智能设备的性能上限不断被刷新,诞生了许多创新的设备形态,使更生动的交互体验成为可能,另一方面,AR/VR 技术经过上一个十年的雕琢,性能和效果逐步得到验证,具备了量产的技术沉淀,将迎来一波商用普及的浪潮。

我们从去年的设计作品中提炼设计概念,并结合上述的社会背景推测其在新的一年的变化与发展,最终总结出了视觉表现和体验交互两类共 9 条 2021 年度设计趋势。

2021 年度设计趋势

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Adobe MAX 2020 视觉作品 by Stu Ballinger

概念阐述

「 酸性平面」风格融合「Y2K」美学的未来感,形成了独特的「未来酸性金属风」,典型特征有:

酸性渐变:一种会引起不适但足够刺激的迷幻渐变色。这类配色打破了传统美感的标准,追求感官刺激,给人异次元下致幻而不安的感受。

金属感:以熔融形态在环境光下呈现出诡秘的反射,这种反常规的液态质感所带来的违和,在传统科技感上增添了几分神秘。

透明胶质:液体或是 PVC 半透明胶质,配合流体动感的形态,折射出光的幻彩,给人强烈的亦真亦幻感受。

应用场景

未来酸性金属风反差感兼具未来感的特征,决定了它在时尚、音乐、潮流以及艺术圈有很好的延展性。服装鞋包、艺术家创作,以及传达个性自我的品牌平面广告,都可以看到其身影。

相关案例

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ The Future Vision of Microsoft 365 宣传视频

概念阐述

随着产品硬件性能的不断升级,设计语言也开始追求真实感。相比过去,「类玻璃柔光材质」除了更注重「轻」的概念,在质感上也呈现出更加轻盈、细腻以及自然的趋势。

类玻璃材质的表面呈现微磨砂感的半透明质感,透光而不透视,通过清晰的边缘来强化物理质感,两者对比呈现出一种「虚实结合」的美感。该材质多以轻薄的片状形态悬浮于场景中,减轻重量感以带来轻盈的视觉感受。

应用场景

「类玻璃柔光材质」轻盈与通透的视觉感受,能营造出未来感十足的场景,很适合阐述科技智能的概念。因此该风格成为了一大波科技背景公司的设计首选,其中主要以硬件系统以及 B 端、工具类的产品为主,应用场景包括界面设计、推广视频等。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Louis Vuitton × League of Legends Collection

概念阐述

近年来,品牌跨界合作的对象不再局限于品牌之间或明星名流,众多服装、奢侈品、数码产品等消费市场的强势品牌纷纷向游戏和二次元等虚拟 IP 抛出跨次元合作的橄榄枝。这种合作方式成就了「三次元」品牌与「二次元」IP 的双赢局势,将在 2021 年继续发展并造成更广泛的影响。

应用场景

游戏和二次元元素大热,手机、化妆品、服装等产品通过结合该类元素,以新的形式吸引年轻用户:为像素风格的游戏设计服装、为全息的虚拟偶像捏脸塑形、为动漫人物拍摄杂志封面、在一款电子游戏里搭建新品发布会等,相应地,跨界应用对设计师的涉猎领域和技术跨度也有了更高的要求。

相关案例

一线顶尖奢侈品品牌相比以往与动漫游戏类二次元 IP 合作更频繁,除了经典动漫,也不乏新鲜的热度 IP。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

在《Evangelion 新世纪福音战士》25 周年,OPPO 联名这部影响一代人的动画神作,推出了一款从快递包装、外盒甚至是卡针,里里外外都深度融合 EVA 元素的联名机型。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ OPPO × EVA 定制版手机 OPPO Ace2

美国说唱歌手 Travis Scott 2020 年在《堡垒之夜》(一款线上竞技游戏)中办了一场虚拟演唱会。这场演唱会共吸引了 1230 万玩家同时在线观看。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Photographed by Sean Thomas, Vogue, January 2020

概念阐述

「亲生命性设计」原为建筑和空间设计中的概念,意为「运用天然材料、自然光和植物创造令人愉悦舒适的建筑环境」。受城市化进程加剧及全球疫情的影响,人们渴望亲近自然的欲望和需求变得越来越强。产品和自然元素彼此交融,从主客体关系转为互相依赖的存在,以更为和谐与自然的交互方式与用户进行沟通与连接。

应用场景

自然元素将在不同感知维度以更贴近真实自然的方式融入各个领域的设计,比如在工业产品设计中使用更加贴近自然物体的表面肌理,在建筑设计中将人造空间作为自然空间的延伸,在数字产品设计中使用更拟真的自然音效和光照等等。

相关案例:

2021 时尚界不约而同地强调了自然元素的使用和对环境保护的呼吁,各大品牌都用自己的方式演绎了「自然共生」的服装设计系列。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

还原自然界中的真实材质成为了新的设计灵感,被应用到各种设计中。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

Vivo OriginOs 系统通过行为壁纸系统将常用的系统功能和展现真实自然场景的动态壁纸进行联动。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Vivo OriginOs

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 山水 Mountains & Rivers by Particle (Gao Yang)

概念阐述

近年,国人的文化自信逐渐增强,国家扩大内需、扩大消费的政策导向为国内消费品品牌带来了巨大的机会。「中国设计」的标签已经成为新一代的时尚潮流,带有中国本土个性、体现中式美学的设计受到更多品牌的青睐。

应用场景

越来越多中国品牌开始注重汉字 Logo 的使用和设计,更多现代设计力求为中式美学摆脱民俗、皇家的刻板印象,木、石、竹这些蕴含中式精神内核的元素成为了工业设计、建筑设计中新的缪斯。

随着中国的国际影响力进一步扩大,国际品牌也会提高对中国市场与文化的关注,在设计上融入更多本土元素。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

可口可乐中国与汉字文化推广机构「好字在」和方正字库联合推出的这款字体,反映了可口可乐对中国文化的深入理解和对本地化运营的关注度。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

可口可乐联合推出的中文字体「在乎体」

同仁堂旗下「知嘛健康」在北京开设线下体验店,店铺设计提炼汉字、中药、药房等中式元素作为灵感,用现代化的方式呈现,是极具现代感的「中式」空间设计。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 同仁堂旗下「知嘛健康」线下体验店 by 无象空间建筑

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Microsoft Haptic PIVOT 微软腕带触觉设备

概念阐述

在增强现实中,人机交互将更多发生在物理空间里,虚拟的数字信息将借助形变和震动被模拟为触感。得益于新型传感器的拓展应用,硬件设备实现了对温度、形态、力量的数据监测,同时各大硬件厂商也逐步对震动马达等硬件进行了完善升级,从而为进一步的触觉模态设计提供了支持。

应用场景

涉及领域除了现有的游戏、驾驶、健身等场景外,更有趋势被应用于创新教育、操作培训及有风险的试验演练中。

相关案例

任天堂在健身环 Ring-Con 内加入的力学传感器实现了对力量(张力、拉力、压力等)的监测,并利用 Joy-con 震动来对用户动作的标准性进行反馈提示。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 《健身环大冒险》on Switch

微软研发部开发出了一套 Haptic PIVOT 腕戴触感反馈方案,通过活动的机械结构,更逼真地模拟出物体的握持感。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Haptic PIVOT 使用演示

索尼推出配备了音圈马达的 PS5 DualSense 无线手柄,扳机键内增加了一个由电机驱动的齿轮,通过震动模拟出枪支的后坐力、弹簧的弹力、绳索的拉力等物理效果。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ PS5 DualSense 无线手柄使用演示

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Flight Booking AR application by Bala GN

概念阐述

现实生活中,人与人、人与物接触产生的实体服务称为线下服务,由网络等技术支撑的人与硬件设备交互的服务称为线上服务。在硬件设备、网络技术成熟的当今社会,线下服务向线上服务迁移的过程中融入了更多 AR/VR 等虚拟服务,也带来更多新的设计行为和交互方式。

应用场景

原本需要亲临现场才能完成的体验,现在可以通过线上的方式实现,这不仅体现在因疫情催化产生的线上办公、线上毕业展等强需求场景,也在购物、试衣、健身等更贴近生活的领域应用。

相关案例

用户在 Gucci APP 上挑选自己喜欢的手表后,将手机摄像头对准手腕,就会显示「试戴」效果。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Gucci APP 虚拟试表

各大院校毕业展因疫情无法在线下举行,一些学校通过线上展厅的方式,让学生的毕业作品可以通过网络浏览。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 中央美术学院 云端美院

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 香港理工大学 polyudesignshow

Balenciaga 2020 年用一款电子游戏代替了线下时装发布会。在视频游戏中,玩家能够在五个主题场景中欣赏到 2021 秋季系列的新款服饰。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Balenciaga:《后世:明日世界》

硬件设备的创新使线上健身指导有了更合理的使用场景和更人性化的体验,用户通过线上内容和服务在家也可以获得接近健身房的体验。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Tempo Studio:家庭智能健身设备

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ POPMART 泡泡玛特

概念阐述

「情感疗愈」是一种有温度,无攻击性,注重细节的设计方向。这类设计旨在治愈修补心灵中的创伤,不只注重功能的完善,也更在意情感内涵的打磨。它也可以帮助人们敞开心胸,接纳自己内在的所有面。

应用场景

在产品设计中,一些抚慰人心的小功能、小彩蛋往往带有着治愈人心的力量。在角色形象上,柔软、可爱的造型在带给人无攻击感的同时强调着陪伴的意义。在娱乐领域,也出现不一味强迫用户达成某个目的慢节奏「佛系」游戏。

相关案例

网易云音乐来自「张开双臂拥抱别人」动作灵感的抱一抱彩蛋,让原本只有文字点赞的评论区更有温度。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 网易云音乐的「抱一抱」动效

Switch 游戏《动物森友会》在 2020 年异常火爆,归功于其萌系治愈的风格和追求自然随性的生活方式,也让疫情期间的玩家们暂时逃离严峻紧张的现实生活。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Switch:《集合啦!动物森友会》

盲盒的精神内核是「收集、陪伴、治愈」,泡泡玛特签约的 IP 形象,大多以可爱、萌系为主。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 泡泡玛特的盲盒萌系 IP 形象

Disney 与 Pixar 出品的动画电影《心灵奇旅》用轻松的方式探讨生活的意义和人生的价值,电影用它独特的美术风格和感人的故事斩获超高的口碑和评分。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Disney · Pixar《心灵奇旅》

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ OceanPlastic 废弃塑料重造

概念阐述

2020 年世界各地重大自然灾害频发,环境污染严重,刺激着人类对生活环境的审视。更多品牌开始探索材料再利用的可能性,从自然衍生产物出发,从而降低对大自然的破坏。年轻一代对于再创造产品有更高的接受度,循环材料转化为塑料颗粒,组合成独一无二的花纹和肌理,给人专属限量感,再生材料成为新的流行元素。

应用场景

消费者将继续青睐和卫生健康、环境保护相关的价值品牌,越来越多的快消、包装厂商开始研究材料回溯,组建相关部门,加入循环经济浪潮中。

相关案例

运动品牌 Adidas 与 Nike 都推出了由回收废料制作的充满设计感的产品,在宣传品牌环保意识的同时也引领了再生产品的潮流。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ adidas 与 Parley Ocean 合作推出由海洋回收废料制作的联名产品

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 同样使用了废弃材料的 adidas 球衣

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Nike 将生产车间加工过程中产生的边角料转化为产品设计的主要材料

由 99% 废弃奶茶杯+ 1% 废弃原茶渣再生而成的「真垃圾·手机壳」

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ TRASHAUS 真垃圾再生手机壳

Freitag 的 2020 新款 F601 MALCOLM 是一款个性化背包,用一块再生的防水油布保护,并由用空 PET 瓶制成的防水织物制成。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ F601 MALCOLM

除消费产品外,肯德基的可回重复利用餐盘、星巴克倡导的纸质吸管、外卖行业各公司的环保举措等也体现了餐饮外卖行业对循环经济的重视。

结语

在充满未知的 2021,无论是后疫情时代世界的变化、新技术的发明应用或是国际社会环境的走向,都会影响大众的生活习惯、行为方式和审美取向,同时也决定了未来设计的发展方向。但这其中不变的,是软硬件发展不断突破视觉表现的上限、设计师追求「以人为本」的核心理念以及通过设计去提出和解决问题的目标。

我们期待着上述预测性的分析能在今年的设计中被验证。但设计本身是一个迸发新奇创意的过程,也希望上述的设计趋势能激发设计师们更丰富的灵感、为设计领域提供更多的可能性。

文章来源:优设  作者:今日头条UED

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


遇到不同的运营活动,如何快速找到设计风格?

资深UI设计者

在日常产品运营活动中,用户运营设计是不可或缺的一部分,其展示的内容也是各式各样。本文结合腾讯动漫日常的运营活动设计,浅谈一下在遇到需求时,如何根据不同的活动类型快速定位适合的风格,提高运营活动质量,促进用户转化。

遇到不同的运营活动,如何快速找到设计风格?

什么是用户运营设计

1. 用户运营

从定义来看,即以用户为中心,根据用户特性和运营核心目标,制定相应的运营策略,对策略效果进行收集和验证,以达到运营的核心目标。所以用户运营主要围绕用户、活动、目标来展开,借用增长里的 AAARR 概念来说用户运营的目标:

遇到不同的运营活动,如何快速找到设计风格?

作为用户运营设计师,我们应对用户生命周期 AAARR 模型有一些深刻的理解,以最低的设计成本来获得最大的运营收益。

2. 运营设计团队在做什么

目前我们用户运营设计团队主要负责的项目是:腾讯动漫会员和平台类活动设计、运营推广、增长服务等相关业务。基于用户促活和营收核心目的延展长线运营、用户增长、会员服务、大型促销等工作内容。

遇到不同的运营活动,如何快速找到设计风格?

动漫平台常用设计风格

1. Q 版漫画风格

Q 版在动漫设计中比较常见,风格一般会比较可爱、幽默、搞怪···而且有很强的线条表现力,能有效吸引用户注意力,提升页面的趣味性、友好度和品牌感。

遇到不同的运营活动,如何快速找到设计风格?

2. 涂鸦插画

涂鸦风格是一种有趣且极具创意的风格,在页面中使用涂鸦设计,充满自由和力量感,能够打破扁平化的运营视觉,强化故事感和情感性。

遇到不同的运营活动,如何快速找到设计风格?

3. 肌理插画

肌理插画的色彩明快,画面简洁,这种风格通常会加入杂色,增加颗粒感、质感,也会通过明暗色块增加立体感,适合快速迭代的活动需求。

遇到不同的运营活动,如何快速找到设计风格?

4. 孟菲斯插画

使用高纯度、对比强烈的配色,和无规律可循的排版吸引人的眼球,该风格大胆、活泼且富有表现力,通常会运用描边协调画面并突出重点,给人良好的视觉舒适感。

遇到不同的运营活动,如何快速找到设计风格?

5. 渐变插画

渐变插画运用大量低饱和度的渐变,营造出色彩鲜明、对比强烈的光感,渐变插画细节丰富,时尚、前卫的视觉冲击力,在一定程度上也能够促进用户的兴趣点。

遇到不同的运营活动,如何快速找到设计风格?

6. 划重点

插画在动漫平台用户运营活动中是主要视觉触发器,能瞬间传达大量信息。在日常活动中需结合运营主题和用户的需求,合理选择相应的风格进行设计,强化页面的吸引力。同时也应做好运营插画设计的构图、元素、配色等,注重页面细节,强化活动交互,让用户可以更快理解和操作。

实战案例分享

这里用腾讯动漫开直播系列宣传活动为切入点,进行案例分享。

遇到不同的运营活动,如何快速找到设计风格?

1. 活动背景

腾讯动漫上线全新的系列直播活动,覆盖唱歌、聊天、手工、绘画等多种泛次元内容,需要设计预热期和正式期的页面,宣传本次直播活动同时,为腾讯动漫上线直播产品功能打好基础。

2. 设计分析

在设计过程中,要结合实际运营需求,充分发挥专业能力,产出匹配的设计思路。当需求方在视觉要求上无法输出明确风格偏好时,可利用活动主题挖掘用户核心需求并形成有效反馈,从而找到适合的设计风格。

分析&沟通需求

腾讯动漫将借助此次活动,将平台的直播内容和品牌印象最大限度触及给用户。

遇到不同的运营活动,如何快速找到设计风格?

为此我们确立了本次活动在需求上的目标

  • 品效协同,既能够符合腾讯动漫平台属性又能够吸引不同特性用户为活动带来流量
  • 能够引发用户在社区或者其他渠道进行传播,并对系列直播产生期待
  • 将直播活动带给用户丰富好玩互动的定位,挖掘更多潜在用户

用户定位

直播运营活动离不开主播和用户的参与

遇到不同的运营活动,如何快速找到设计风格?

可以看到直播为观众提供更多与喜爱的画手和偶像互动的机会,同时也为主播作者打开了更快速直接的传播渠道。

交互梳理

1.预热页面

核心:打造用户认知,对直播活动内容的理解,流量分发,促使用户关注接下来的直播活动,以及订阅个人喜欢的主播

遇到不同的运营活动,如何快速找到设计风格?

页面的首屏头部区域是利益点区域和活动氛围搭建。中部是强心智内容,也就是纯运营强控制和活动推荐的内容。最后部分是弱心智内容,主要用于活动流量承接的主播内容推荐。

2.正式活动页面

场景化氛围搭建,内容与形式勾起用户点击欲望。

遇到不同的运营活动,如何快速找到设计风格?

页面头部用主题文案和视觉元素,在首屏加入当前直播视频窗口,让用户快速沉浸于直播场景中。在直播的表现上,坚持视频排版为主,融合直播属性,吸引用户关注。

3. 确定风格

关键词提炼

通过对活动定位和用户进行设计分析,我们把对“腾讯动漫开直播”传递的感觉转化为系列可表达的文字,并提取活动关键词“直播、 互动、弹幕文化、潮流、动漫符号、二次元、沉浸感”进行思维发散。

遇到不同的运营活动,如何快速找到设计风格?

遇到不同的运营活动,如何快速找到设计风格?

视觉化表达

基于这些关键词的概念方向及腾讯动漫直播场景内容,对比目前市面上部分直播类设计风格发现更多关注的是直播氛围营造。因此我们在场景化设计时需将轻质感的二次元化视觉元素融入到画面中,结合常用的插画设计类型,我们选取渐变的插画风格更符合直播沉浸感的主题。

遇到不同的运营活动,如何快速找到设计风格?

遇到不同的运营活动,如何快速找到设计风格?

主色调使用炫目的红黄品牌色渐变设计,应用冷暖对比增加直播场景氛围,优化增加荧光质感与光影,使用蓝紫颜色点缀增加视觉丰富度,凸显细节,并有效划分视觉区域,用色彩使设计整体和谐统一,突出活动主题,与体验者达成情感共鸣。

4.设计发力

直播视觉调性营造

我们立足平台品牌属性,从形、品、质三大纬度提炼视觉因子。

遇到不同的运营活动,如何快速找到设计风格?

遇到不同的运营活动,如何快速找到设计风格?

  • 手机/弹幕/爱心图形——直播属性的表达
  • 企鹅娘&黑子元素——体现腾讯动漫的品牌属性
  • 渐变艳丽色彩——通过丰富的光影和渐变塑造更多的细节,打造更加精致的设计效果

二次元平台属性融入

遇到不同的运营活动,如何快速找到设计风格?

针对动漫平台的直播场景,探索出符合他们审美的视觉风格,需将二次元的要素融入,包括形态(物体符号拟人化),比如在唱见 icon 上将话筒加入眼睛;样式(元素 Q 版化),比如开播提醒 icon 加上一只软糯的黑子等

插画风格锁定

预热期在风格上选择了以企鹅娘为主体,手机外框作为基本型去组合头图,荧光黑子和视频黑子左右打造直播氛围,同时在画面上迸发出弹幕和拟人小元素,形成强有力的沉浸感。

遇到不同的运营活动,如何快速找到设计风格?

正式期在风格延续预热页面的组成元素,将主题文字作为头图重点,营造与直播相关的场景,使用手机框型作为整体概念图形,来表现屏幕互动,寓意主播与观众的链接。采取弧形切割头图与页面,将用户的视觉聚焦到直播中模块,突出活动的主题。

遇到不同的运营活动,如何快速找到设计风格?

  • 全时期场景兼容性以及风格延续性

用户运营活动不是做完页面的视觉工作就结束了,在上线之前,我们还需要延展一系列的物料设计,如:app 首屏 banner、小纸条、通栏、福利频道等,每种素材的规格不同,要求也不同

遇到不同的运营活动,如何快速找到设计风格?

遇到不同的运营活动,如何快速找到设计风格?

4. 设计总结

面对种类繁多的运营需求,我们可能无法迅速感知哪种风格会比较贴合活动调性,但通过活动定位和用户需求的分析,可以帮助我们找到视觉方向,然后结合自身的设计方法和技巧,灵活应用到工作项目中。这里要求我们掌握更多领域的能力,发挥出更多不同的表现风格。

在有限的时间和资源下,跨团队的高效沟通能够有效的提升效率,针对运营需求风格偏好,快速定位到相应的设计感觉。

不要盲目参考竞品的风格,首先要考虑自身的品牌调性,根据品牌特色和用户特点来确定风格。项目案例中的设计起初就出现了这样的问题,最后融入了品牌的颜色和二次元属性,才让设计变得合理。

针对多时期业务线下的场景搭建,视觉规范化显得尤为重要,在案例中,预热期和直播期元素互通,视觉风格统一,提升活动的品牌感知,降本增效,提升设计效率,确保宣传资源的一致性。

以上是我对运营设计风格选取的一点设计思考,期待与大家一起探讨交流。



文章来源:优设  作者:腾讯动漫TCD

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

资深UI设计者

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

偶然间发现了一本3年前买入的书《侘(cha第四声)寂》,心里打着哪怕是看上10分钟至少也是没荒废这个假期的念头,读了起来;

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

那么关于“侘寂”,虽然认识不深,但又有一些个小想法,借着假期的余温跟大家唠上一唠:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

百度上对侘寂的解释是:侘寂是现代文学翻译上的一个误解,侘び(WABI)与寂び(SABI)。国人将其整理为侘寂一词。日本美学家冈仓天心的著书《茶之本 Book of tea》把侘び的翻译成“Imperfect”所指的应是侘び美学中,外表的残缺…还有人说“侘寂”是一种思想,一种美学,一种世界观。

我觉得吧,说的太深了不好理解,甚至有点啰嗦了,我尝试着概括了一下,基于在下有限的语言能力大概是这个样子:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

虽然解释中有提到残缺之美,但在我认知里侘寂还真没有什么残缺的感觉,特别是以无印良品为代表的日式自然风格,他们对过于装饰嗤之以鼻,钟情于“不虚张声势,却历久弥坚“的设计;我试图去按照自己的意思揣摩无印良品的设计哲学,结合名词本身,再次总结了一下:侘寂美学不会执着营造表象,取而代之的是尽量流露事物本质,不会随着时间的推移而丧失所谓的“新鲜感”;所以回过头来再看无印良品的设计(不管是平面还是产品),大差不差,我们都会感慨道:真 tm 耐看啊!!!

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

嗯,结合上文,关于“侘寂”这个词,我觉着大概也就是这么个意思了。

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

侘寂是 无印良品 / 宜家家居 等产品设计哲学的灵感之源,也是侘寂理念的追随者。但最大牌的死忠粉就不得不提乔布斯和他的苹果了,老乔本人对日本美学的热爱超越任何人,深受日本侘寂美学影响,也因此成就了苹果手机极简风格的设计(说个后话,这种简约是建立在内在高品质和对细节追求的基础之上的,一定程度上对侘寂轻度的人为干预)。

插个题外话,仔细琢磨一下,不难发现 20 世纪中后期,从包豪斯的第三任校长密斯凡德罗到博朗的迪特·拉姆斯和苹果的设计不约而同的在表达类似“少即是多”的设计理念;这种大一统的现象很奇妙,一定程度上结束了工艺美术和装饰艺术对设计界的统治,这既是开始,也为设计风格的轮回做着准备。

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

回归下主题,国际知名品牌的设计风格被分析得透透的了,我也不赘述了,主要说国内的深受影响的产品。在我的印象里,oppo 的 color OS 算是其一,特别是当年 color OS 6“无边有界”的概念让人着实兴奋一把:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

坦诚的讲,以侘寂为核心出发的产品在我们的生活中并不少见,他们以突出内容为主,没有其他什么过度的装饰;前有 Instagram,Evernote,也有最近大火的 clubhouse;

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

从产品理念上讲他们注重对主线功能的强调,对诱导性功能不太在乎;再聚焦到用户界面上来讲,他们认为保持最舒适的屏效要比塞满每一个像素更重要;哈,那么问题来了,国内的产品(特别是巨型体量的产品)都不约而同的对屏效有着深深的执念,导致他们看起来难受的一比。这次我们先聊聊屏效:

1. 屏效的取舍 

屏效这个词是“坪效”的演变,后者可以理解成实体店铺每平米的营业额,是一个经营效益的指标。所以类比下来,手机屏幕也可以这样计算,就简单理解成 “每一像素可以带来多少商业效益” 就行了。

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

理论上来讲,一般用户最有用的浏览区域为手机前 3 屏,如果更严格点来说是前 2 屏,按这个思路的话,咱大概就能得这么个结论:每一屏里给用户看到更多的东西,那么收益(浏览量/点击率什么的)也会成正比,所以这个结论就一直被传承下去了。但…如果不是抖音的出现,那么怕是我现在还对以上结论深信不疑:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

哎,不是说单屏内展示的越多越牛 X 么,为什么抖音这一屏一个的做法立刻风靡了全球,甚至还把快手这个老对手拉上了这条新体验的船。带着这个疑问,试图刨根问底,追溯源头,冷静分析下了当前的现状:这大概是形式影响商业价值的一个绝妙的 case 了。先看以前,从互联网产品诞生以来,feed 流的广告形式大概也就是这两种了:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

传统的 banner 理论上就是“CPM”,是一种展示付费广告,根据曝光次数收费,这种形式太多见,我们常用的饿了么 / 美团外卖的顶部 banner 都是这样;CPC 不用过多解释,就是点了广告主就给钱的那种,在今日头条刷新闻的时候经常可以看到,还有公众号的底部广告也是这样的原理。再看看抖音的设计:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

抖音的 GD 单页广告的形式基本上是集各种模式的优点于一身,既有品牌曝光(CPM),也有点击(CPC),甚至还有按时长收费的 CPT 整合进来。我猜测创造这种形式的设计师本身也对美学和商业有深刻的理解,不得不说既保证了体验又提升了商业价值,美的不可方物啊~所以说,通过这个例子也许你会发现,屏效和商业价值并不是“是非题”,更像“多选题”,我们总是对所谓的习惯报以崇高的敬意,但事实上这折射出了人的“奴性”,通常我们认为对的事情也仅仅是习以为常罢了。

话说回来,例子虽然生动且具备说服力,但我猜想你应该跟我一样,未必有机会去做这么颠覆性的设计(即使有机会也未必有胆量哈哈哈哈哈),我试着找了几个例子希望能够帮助你在设计上可以 balance 屏效和商业价值:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

最后再给大家分享个压箱底的小技巧,也是之前看到知乎的广告突然间被启发到的:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

当然,以上的例子是尽可能的通过屏效来平衡美学和商业之间的关系,总的来说,侘寂这种理念在我国互联网注重运营的土壤上不是那么的好生长,大家尽力就好~

上点小福利

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

尽管我一直坚持输出设计观点,但我发现好多朋友练就了 “一看就会,一用就废” 的日常技能,所以还是准备了一些经过我严选的模版和素材送给铁子们,希望铁子们在学会理论的同时也能手活跟上,眼高手低不可取,眼手双高真牛 B!

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

总结一下

侘寂之美是许多当代设计师所追求的境界,但互联网貌似就是一滩死肥,无论你怎么施肥,也未必能开花结果,各种方案也会相应的受到各种挑战,说白了这种以美学驱动创新本就抽象不可具象,甚至又一些玄学夹杂其中。假如你也希望能够借势突破,不妨以美学为指导思想,以商业价值为突击点去尝试方案的可能性,或许这样说服力才有可能被大幅提升。


文章来源:优设  作者:负能量补给站

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

用户历程图制作指南

资深UI设计者

编者按:这篇文章来自资深设计师 Taras Bakusevych ,他对于产品和体验有着非常深入的理解,这篇文章深入梳理了如何制作用户历程图才是合理和便捷的,是一篇相当给力的用户历程图终极设计指南:

用户历程图(Journey Mapping)可能看起来是一个复杂的东西,尤其是当你尝试在小组讨论的时候把这个东西说清楚,会发现相当不容易。这篇文章将会为你阐明这一强大工具的使用方法,并且提供一个简单的模板,并且帮你创建拥有足够洞察力的用户历程图,让你像真正专业的 UX 设计师一样,创建便利、深入、有效的用户历程图。

九个步骤搞定!用户历程图终极制作指南(附模板)

为什么要绘制用户历程图

在数字产品当中,用户历程图可能是用来呈现用户如何达成目标的最佳、最常用的工具了。当我们故事以可视化的方式呈现出来,就可以沉浸在用户的体验当中。这也是为什么说用户历程的价值是巨大的。

理解用户历程图,会迫使我们以更加结构化的方式来思考整个用户体验,去梳理和定义事件的顺序、关键阶段以及事件之间的过渡。

同时,用户历程图还能建立起用户和设计师之间的同理心,当你随着用户历程图推进的时候,能够更加深入理解用户的痛苦和无奈,从而帮设计师理解用户的动机。

用户历程图还能帮你真正定义痛点,这是至关重要的。每种产品都应该在某种程度上帮助用户,让用户生活更加轻松,如果你对痛点有所了解,自然就可以改善体验。

九个步骤搞定!用户历程图终极制作指南(附模板)

用户历程图的变化

根据实际的使用场景,用户历程图会有很多不同的呈现形式,里面通常会包括一些图形化的元素将整个历程或者流程呈现出来,而余下的元素则采用解释性的文本来作为支撑。

绝大多数的模板会显得过度装饰,且过于复杂,在很多时候,它们会作为项目中的展示性成果展现在PPT当中,而不是作为一种有效的工具,来帮助团队来洞察需求。

九个步骤搞定!用户历程图终极制作指南(附模板)

如果你上网搜索用户历程图,你会发现一大堆各式各样的图,这些图和实际的理解是脱节的。

用户现状历程图 vs 用户未来历程图

用户现状历程图反映的是用户当前的状态,这反映的是用户历程在优化之前、当下的状态。而用户未来历程图则反映的是用户历程在优化过之后,未来理想的状态是什么样的。

用户历程图 vs 消费者历程图

这两者在结构和目标上是不一样的,主要差别在于用户角色的定义上。有的时候,你的用户确实是消费者,而在很多情况下,用户又不一定是消费者,这就是差别所在。

用户历程图 vs 服务蓝图

用户历程图侧重于呈现客户的前端体验,而服务蓝图则重在呈现后端的构成,以及交付方式背后的业务逻辑以及同产品核心之间的关系。

你可以在 Megan Erin Miller 和 Erik Flowers 的这篇文章当中找到更多的信息。

模板越容易,填写起来就越简单

从来就不存在什么完美的用户历程图,不过你可以基于某个版本的用户历程图来着手。而这里准备的这套模板是经过长期测试和实验之后总结出来的一款,它非常容易上手,复杂度也控制得恰到好处,并且它包含你所关注的绝大多数的指标,甚至更多。下面,我将教你如何逐步完成这个用户历程图。

九个步骤搞定!用户历程图终极制作指南(附模板)

你可以在这里下载 PDF 文档

在工作坊模式下如何填写用户历程图

在研讨会或者工作坊模式下,开始用户历程的研究和搭建,是一个不错的练习方式。在这种情况下,即使的团队有较多的人,也最好按照小组来进行(每个小组3-5人)。根据用户历程的复杂度和涉及的内容的不同,通常你应该可以在 1.5 小时候完成整个用户历程图的搭建。至于你能用到的文具,仅仅 需要多种不同颜色的便签纸,笔和红点贴纸即可。在开始之前,你需要和各个小组先声明和解释整个过程,并且确保所有人对于这个过程的流程、原理和方法的认知保持一致。

九个步骤搞定!用户历程图终极制作指南(附模板)

第一步:设置舞台

在这里,我们需要定义地图的内容,用户的整个行为历程,以及他们试图要达成的目标,都有哪些。这很关键,不仅要确保所有的参与者都很清楚用户场景,而且要借此构建出对于后续设计有帮助的内容输出。

演员——这个历程与谁有关?整个历程图应该只和一个角色有关,也就是要经历整个历程的用户角色。

场景和目标——描述参与的用户的行动的情况和状态,从而增加上下文环境的清晰度。描述用户的目标,期望以及动机都有什么。

当前/未来状态——阐明用户历程所在的阶段。

Ps:即使此刻你要做的是某个未来的产品,也最好不要跳过当前状态,洞察当前的用户和产品状态、痛点、习惯,有助于你去验证想法。

九个步骤搞定!用户历程图终极制作指南(附模板)

第二步:定义阶段

接下来,你需要定义整个用户历程的大的阶段。先把各个阶段定义好能够最大程度节省你的时间和精力。最简单的方法,是先定义第一个和最后一个阶段,然后再来填补中间的各个阶段,不要创建太多的阶段,而是将整个用户历程切分成为有意义的部分。

九个步骤搞定!用户历程图终极制作指南(附模板)

第三步:执行推进

按照用户操作流程,来逐个执行梳理各个阶段用户的行为、状态。千万不要试图梳理得过于详尽和细致,尽量专注于关键因素,确定用户需要哪些要素,才能推进到下一个阶段。

九个步骤搞定!用户历程图终极制作指南(附模板)

第四步:想法,情感和情绪

在这个阶段,要开始描述和用户执行操作紧密关联的的想法,涉及到的问题,还有感受。在很多其他的用户历程图模板当中,这个部分通常是和整个用户历程图是分开的,但是实际上,只有合并到一起才是合理的。

九个步骤搞定!用户历程图终极制作指南(附模板)

在这个部分,我不建议将时间花费在用户情感曲线的绘制上,这样做的实际目标更多是为了更加具有视觉吸引力,并不具备实际的价值。

第五步:关键触点

在这个步骤当中,我们会高亮标注出用户在各个阶段会接触到的物理和数字交互点,以及涉及到的工具、人和服务。我相信各个阶段所覆盖的这些触点,能够帮助我们更好地梳理和构建出整个心智模型,并且能够帮助产品和服务,让它们能够更加切合用户的需求,更好地集成到一起。

九个步骤搞定!用户历程图终极制作指南(附模板)

第六步:合并进度

如果你已经和你的团队创建了类似移情图、价值主张画布,那么你无需在这个事情上重新创建相同的内容,因为用户历程图和以上内容中有大量重复的部分,你只需要迁移过来即可。随后,你可以将进度合并到当前的用户历程图当中。

九个步骤搞定!用户历程图终极制作指南(附模板)

第七步:逐阶段填写

这个步骤,需要将各个不同阶段的内容填写进来。

九个步骤搞定!用户历程图终极制作指南(附模板)

第八步:确定痛点

给每个参与者一些红点贴纸,方便他们在整个用户历程图上,对他们认为是痛点的部分进行标记并投票。痛点可能和情绪有关(比如害怕提供个人详细信息),也可能与行为有关(比如手动输入快递地址等)。这就是为什么最好不要为痛点创建单独的行列,因为可能涉及到的点非常多也非常分散。如果需要对痛点进行深入的描述,使用红色便签纸来进行详细阐述。

九个步骤搞定!用户历程图终极制作指南(附模板)

第九步:改进策略,解决痛点

到了最后的阶段。在确定痛点之后,我们就可以开始思考如何缓解或者消除痛点。通常,我们需要通过改进整体策略,完善功能,集成服务,来解决痛点,当然,更多的时候,可能还需要我们拥抱一些更加狂放的构思,通过创新来搞定痛点。

九个步骤搞定!用户历程图终极制作指南(附模板)

完成比完美更重要

在小而无关紧要的细节上进行争论,很容易迷失方向。我经常会看到某些小组会停留在第一阶段,陷入争论,无法推进。从来都没有任何一个用户历程图是完美的,因为用户总会有不同的习惯,并且需要产品设计师从不同的角度来解决问题。

因此,这需要你和你的团队专注于 80%最关键的用例,而不是在所有可能的事情上做复杂的取舍,并且踟蹰不前。


文章来源:优设  作者:Taras Bakusevych

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

体验设计如何降低成本提高效益?

资深UI设计者

你是否和我有同样的困惑,常常无法客观看待自己的设计,优化的时候又常常不知从哪里下手,看到别的产品设计又无法给出具体的判断依据。



今天学习一下用户体验的结构化衡量标准。不管是日常工作还是作品提升,都可以作为一个方向性的指导。


要想读懂一个信息,多少文字才能解释清楚(认知成本)?网页加载多长时间才算合理(时间成本)?要设置摄像机的时间和日期,设定多少个步骤才算合理(操作成本)?


首先我们来了解一下通用设计法则之——成本效益法则



成本效益法则的概念


百科含义:成本效益法则指的是要从“投入”与“产出”的对比分析来看待“投入(成本)”的必要性、合理性,即考察成本高低的标准是产出(效益)与投入(成本)之比,该比值越大,则说明成本效益越高,相对成本越低;考察成本应不应当发生的标准是产出(效益)是否大于为此发生的成本支出,如果大于,则该项成本是有效益的,应该发生。


从设计的角度来看,成本效益法则一般是用来评估伴随着新功能或新元素出现新增加成本的最后财务回收状况。


用户价值 = 新体验 - 旧体验 - 切换成本


从用户角度来看,成本效益法则也可以用来提高设计的品质。如果与设计互动的相关成本大于收益,就是不良设计;相反,如果效益大于成本,就是优秀设计。用户成本一般包括认知成本、操作成本、时间成本。


体验 = 效益 - 认知成本 - 时间成本 - 操作成本


例如:把走一段路到展览馆看展当作成本,把看展的趣味程度当作效益,如果趣味程度超过走路的成本,那么这个展览设计就是优秀设计。


优秀的展览设计效益大于成本


糟糕的展览设计成本大于效益


每个设计的品质都可以用成本效益法则来进行衡量。如果与某项设计互动之后,用户觉得获得的效益高于此次互动的相关成本,即是优秀的设计;相反,如果成本高于效益,即是糟糕的设计。



怎么做?


若想提高体验的价值,可以从两方面入手:1. 提高效益;2. 降低成本



提高效益更多是产品层面的决策,所以站在设计师的角度,这篇重点从如何“降低成本”展开。降低成本主要有三方面:降低认知成本、降低时间成本、降低操作成本



PART 1 

降低认知成本


1. 减少冗余信息


a. 去掉累赘文案





为了避免客诉,设计常常会“被迫”在首页做冗长的文案提示,比如美团民宿的“今天入住、明天离店”的文字提示,彷佛在跟着文案做“今天入住+明天离店=1晚”的数学题,过于平铺直述反而增加了用户思考。而且过于具体的文案在小字显示的效果下阅读性也不够好,反而增加了用户阅读文案的认知负担。


同样是 1 晚,Airbnb的文案表达简洁明了,日期间的横杠足以理解是从哪天到哪天的含义。


如果说Airbnb是国外产品,调性不同,那么像马蜂窝的解决方案也是层次与阅读都更加清晰易懂的方式。



b. 去掉多余选项



招行银行的首页功能并不是我会经常要用的功能,但是却无法像支付宝那样自定义编辑首页的功能icon,去掉不需要的功能入口。



2. 内容好理解,减少思考,减少记忆


a. 文案与图片匹配度



文案与图片的契合度高更够帮助用户更有效的理解内容,App Store的推荐卡片在这方面表现的非常优秀。



b. 结构框架好理解——格式塔原理



接近原则中指明物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。京喜首页功能模块区分的相对距离差别不够大,加上商品图的视觉干扰,更加影响信息层次的区分。而淘宝的模块信息分组则清晰明确,信息辨识度高,视觉干扰少,能够有效减少用户区分信息的思考。



c.记忆的局限,降低记忆负担


人们工作记忆的容量有限,大约是 4±1。由于短期记忆的局限,设计师应该确保用户可以简单地识别信息,但不能从之前的对话中回想信息。


比如我们经常会发现考试中的选择题比简答题更容易,这是因为选择题要求我们去识别答案,而不是在记忆里回想答案。


再例如搜索,当搜索结果出现时,我们的注意力自然地从输入的词汇转移到了结果上,因此好的设计应该在搜索结果页展示搜索词。把点击过的结果变色也是帮助用户记忆已点过的内容。



知乎的搜索结果不记忆已阅览的内容,而谷歌搜索则帮助用户记忆已阅览过的内容。



 3. 优先级:信息层级


a.用户优先级、b.功能优先级、c.视觉优先级


d.交互优先级



常见的是弹窗按钮,需要区分信息优先级,不让用户产生选择困扰。



 4. 文字、图标的识别性、易读性



美团Tab icon简洁明了,图形与含义符合,文案简洁清晰。而悦会则显得复杂难以识别,不仅文案复杂,易读性比较差,图标也没有准确表达其寓意。



 5. 一致性


a. 内部的一致性、b. 交互逻辑的一致性、c. 元素的一致性、d. 语词的一致性、e. 信息架构的一致性


f. 视觉的一致性



Airbnb的版式从banner到下面的标题分类,对齐方式与字体对比都保持一致风格,图标和插图都是线与线面的风格。对比之下,携程的设计语言则相对不够完整,不仅icon风格不太一致(面和线都有),banner运营位的版式也是比较随意的(文案没有统一的排版规范)。



 6. 提示、引导、反馈



好的引导反馈能够大大赋能业务目标,相对于躺平的关注引导,好好住的类似提示引导,则生硬了很多,特别是两句文案的切换动作比较刻意,加的笑脸表情也跟引导关系不大。而躺平的引导非常的萌,文案与形象风格都很nice,加上形象手指的动态效果,使引导非常的自然讨喜。



 7. 符合用户习惯


比如,Windows 与 Mac 系统的软件关闭方式。使用windows电脑时,我们形成了右上角关闭的操作习惯。后来开始用Mac电脑,关闭入口都在左上角,在一段时间内,每次关闭都要找一下关闭按钮在哪里。由于Mac的关闭方式没有比windows产生显而易见的体验提升,改变操作习惯成本高,部分用户可能会认为Mac的关闭操作不好用。



当然,假如最开始用的是 Mac 电脑,后面再使用 Windows 电脑,也会感到 Windows 不好用,这是先入为主的观念,一旦产生习惯,改变习惯将产生一定的学习成本



PART 2 

降低时间成本


1. 扭转用户对时间的感知



今日头条通过懒加载的方式,将文字内容优先显示,并且将图片位用默认底色先显示出来,用户可以在图片加载出来之前先看文字内容,大大避免了等待的焦虑。我们应该避免像移动营业厅这样的空白加载页面。


 2.  增加等待过程中的价值



王者荣耀游戏开始前的加载界面会有小技巧的提示,等待的时间可以学习一些小技巧。



PART 3 

降低操作成本


 1. 先价值吸引后行动(先浏览后登陆)



每日瑜伽可以先浏览内容,想要了解更多的时候才引导登录,降低了操作成本。而keep却必须要先登录才可以浏览里面的内容,增加了使用门槛。



 2. 预测用户行为



滴滴出行根据用户经常使用的地点预测用户要去的地方,一键选择地址更便捷。



3. 主动替用户选择



美团外卖支付时主动帮用户选择极速支付选项,一方面让用户更便捷,另一方面也能增加银行卡账户的绑定,赋能业务。



 4. 简化关键节点



淘宝确认订单自动选择优惠券,简化了关键流程,降低操作成本,提高下单转化。现在很多购物平台也都实现了这一点。



5. 减少手动输入操作



以闪送为例,自动读取复制信息——一键粘贴——智能识别——自动填充信息,减少了用户的手动输入操作,大大提高了体验的质量与效率。



降低成本的误区


是不是成本越低,这项设计就是越优秀的设计呢?在成本效益法则下,绝不是成本越低,效益就越高,设计决策需要把互动产生的效益考虑在内。


如果一个交互的复杂度能够提高交互产生的效益,那么就应该适当的增加交互的复杂度。



比如我们常用到的密保键盘,打乱的数字顺序能够防止偷窥者从手势位置窃取密码,因此这项交互成本的提高相应的能够大大了我们资产账户的安全效益。


所以,必要时是可以通过提高成本换取更高的收益。但同时如果技术允许,通过手机短信验证登录与面容识别这种成本更低安全系数更高的方式,还是更好的选择,要根据具体的场景具体对待。



总结


每个设计的品质都可以用成本效益法则来进行衡量。如果与某项设计互动之后,用户觉得获得的效益高于此次互动的相关成本,即是优秀的设计;相反,如果成本高于效益,即是糟糕的设计。


设计师运用成本效益法则提升用户体验的维度主要在降低用户的认知成本、时间成本、操作成本。


降低认知成本包括:减少冗余信息;内容好理解,减少思考,减少记忆;优先级:信息层级;文字、图标识别性,可读性,易读性;一致性;提示、引导、反馈;符合用户习惯。


降低时间成本包括:扭转用户对时间的感知;增加等待过程中的价值、趣味性、小贴士。


降低操作成本包括:先价值吸引后行动;预测用户行为;主动替用户选择;简化关键节点;减少手动输入操作。


同时我们也要注意降低成本的误区,并不是成本越低越好,如果提高成本可以换来更高的效益,也要具体情况具体对待。


文章来源:站酷  作者:水原七秒

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档