首页

从2020年终复盘看2021新商机:8个趋势、3个洞察、1种信仰

资深UI设计者

魔幻的2020年已经过去了,我们终于迎来了新的一年。站在2021年的开头,本文作者对2020年进行了总结,盘点了2020年的8个趋势热点、预测了2021年的3个洞察以及为什么新经济公司要做长期主义者,希望读后对你有所启发。

充满期待的2021年已拉开序幕,我决定为2020这一年中值得思考和回味的事情做个总结。桥水基金创始人瑞·达利欧说:如果你不觉得去年的你是个蠢货的话,说明你进步慢了。

2020年的红人新经济领域,究竟经历了哪些有价值的改变和进化?在我的记忆碎片中,瞬间涌现了下面8个趋势热点:

  • “后浪”崛起;
  • 明星红人化;
  • 新国货;
  • 宅经济;
  • 社群卖场;
  • 下沉市场;
  • 红人算法化;
  • CEO带货。

再将上述8个碎片关联起来,清晰呈现了3个行业洞察:

  1. “去中心化”是大势所趋;
  2. 品效合一是必然选择;
  3. “红人”职业化,“职业”红人化

收集碎片,遵循规律,知行合一,我们渐渐踩准了时代趋势。没有预约,时代的机遇也不用刻意安排。

约翰·列侬有一句话:“所有的事到最后都会是好事。如果还不是,那就是还没到最后。”史蒂夫·乔布斯作为约翰·列侬的狂热粉丝,在执掌苹果公司的那些年里,将“长期主义”一以贯之。

什么叫长期主义?“长期主义”的英文叫Long-termism,在我的理解中,就是不赚“短期的钱”,不接受“无战略的盈利”,产品被视作“价值观和信仰的载体”。

8个趋势热点,3个行业洞察,和长期主义信仰,作为我这里复盘2020的基本脉络。如果还没有把复盘、反思当作习惯,也许你的工作还没正式开始。行动时尊重未来的自己,复盘时尊重过去的自己。

一、盘点2020年的8个趋势热点

有人用一句话回顾2020年:“我们无数次凝视深渊,也无数次被深渊凝视。”我们何曾想过,某些时间买个口罩那么难,回一趟家那么难,电影院开个门那么难,奥运会开个幕那么难……

哪怕挑战多多,2020年的新经济热点和亮点仍是层出不穷。

1. 趋势热点之:“后浪”崛起

2020年是一个重要时间窗口,95后、00后的年轻世代,即“后浪”们,正在形成新的流量中心。

你在抖音、B站、快手上看到的,尽是一些诸如“爷青回”、“有内味了”、“AWSL”、“真香”这类新词,类似李子柒、朱一旦、华农兄弟这些网络红人,不断创造很多新的、有趣的东西掀起了“后浪”们的热情。

“后浪”们眼中的有趣,是随心、随喜的。

比如,华农兄弟在院子里宰杀动物,一只公鸡无意中路过,进入了视频画面,观众们一看,像是来送终的,于是“送终鸡”的弹幕流行起来(跟韩国演员宋仲基的名字发音一样),成为华农兄弟走红的一个标配。

农村生活的平淡无奇,可以在“后浪”粉丝的筛选、反馈之下,成为一个一个传播力甚广的红人标签。

任何可以调侃的素材,刺激笑点的瞬间,在“后浪”们眼里,都可以作为话题,作为一种小众爱好,凝聚粉丝,积聚流量。他们时刻想知道,这世界上还有哪些未知的生活方式。

流量向哪里迁移,商业也随之发生变革:流量从线下转移到线上,诞生了亚马逊、淘宝和京东商城;流量从PC端转移到移动端,由于移动端可以随时在线、随处定位,诞生了美团、饿了么和滴滴;流量从四面八方向红人、意见领袖身上转移,天下秀、B站、完美日记逐渐成为焦点。

2. 趋势热点之:明星红人化

2020年,很多一线红人逐渐“明星化”,部分一线红人“带货”流量远超过一线明星,有淘宝主播、有脱口秀红人主播活跃于热播综艺,受关注度都不输影视明星。

很多影视明星在疫情之前就遭遇“失业潮”了,他们不断寻求新的出路,比如主动进入直播电商领域,商业效果反而不敌那些一线红人,于是出现了“明星失业、红人补位”的声音。

影视明星是否真的被草根红人打败?这不是重点。明星主动进入电商直播间给消费品牌“带货”,已经不是新闻了。

明星带货和红人带货的消费逻辑大不相同:红人带货就是物美价廉,高性价比,邻家女孩真诚推荐;明星带货则撬动了粉丝们的“养成心态”,粉丝要支持偶像(爱豆)成长。

直播带货的最大商业阻力,大概就是“人红货不红”了。很多影视明星的粉丝量特别大,也积极尝试直播带货,但翻车的情况不少。影视明星往往太过表现自己,抢走了观众本该对产品(品牌)的注意力。

这就像演员和推销员的区别,一个推销员可以成为很棒的演员,可是演员不一定能成为很棒的推销员。因为推销员要同时做到让人鼓掌叫好,让人愿意掏钱买单。演员就不擅长做后一点,这就是隔行如隔山。

重点是让产品成为关注焦点,而不是卖东西的人本身成为关注焦点。很多重要的内容细节,建议参考我之前的文章《为什么你的直播带货赔钱了》。

3. 趋势热点之:新国货爆发

在2020年天猫“双11”成交过亿的品牌里,有16个是入驻天猫不到3年,其中大部分是新国货品牌;同时,诸如大白兔奶糖、回力运动鞋、谢馥春、百雀羚、马应龙这等祖母级品牌,也正在经历一轮复苏。

按照《彭博商业周刊》的观点这背后的最大推手就是95后、00后新世代消费者,因为从2019年开始,95后和00后成了全球最大的消费群体,这个趋势会一直持续到2030年。

95后、00后是中国“正常”一代的开始,他们没有物质匮乏的记忆,也不缺机遇,所以,不用顾虑这顾虑那,而折叠自己、迎合别人,屈就周围环境。他们就是做自己喜欢的事情,做好自己。

95后、00后是“去中心化”的一代,他们眼中已经没有大众品牌、国民偶像了,他们接受信息的来源主要是社交网络、红人社群,他们买东西、看东西,几乎都会给自己打标签,将自己与芸芸众生区别开。

“后浪”们对品牌认同度普遍降低,不是品牌变得不重要了,而是品牌触达“后浪”消费者的路径不同以往了。

现今,在年轻消费者的购物“决策链”中,从兴趣激发(即“种草”),到研究比价,到下单购买,最后到分享裂变,处于中心位置的,是社交APP和社交红人。绝大多数的“后浪”消费者在进入销售渠道前已经做好了购买决定,在美妆和3C数码品类,这种趋势尤其明显。

过去,品牌公司那种广告轰炸+明星代言的常规做法,依然可以奏效,但是效费比已经大大不如从前了。

在这个变化中,娱乐圈也大受冲击,已经不可能再打造类似“四大天王(刘德华、张学友、郭富城、黎明)”那样的全民偶像。相反,红人主播、红人博主、红人UP主们更加契合“后浪”们的胃口。

4. 趋势热点之:宅经济效应明显

“宅经济”是2020年一个热词,新闻媒体谈了很多。“后浪”们的孤乐主义持续升级,宅起来,线上解决一切问题。

  • 2017年,美团外卖服务了1.3亿单身“孤宅”人群;
  • 2018年,国内的游戏总用户数达到6.26亿,其中“孤宅”用户贡献了一大半销售额;
  • 2019年,天猫“双11”的进口商品,不是婴儿奶粉,不是高科技产品,而是进口猫粮;
  • 2020年,红人新经济迎来引爆式增长,游戏主播、红人博主UP主开始成为一种成熟职业,诸如导购、教师甚至菜农等360行纷纷“红人化”。

“后浪”们普遍有一种“孤乐主义”心态,与其在人群中委曲求全,宁愿选择自己宅起来。阿里研究院的数据显示,95后、00后人群当中,一个人看电影的比例高达54%,一个人叫外卖比例达到了33%……

所以,阿里电商系统开始推一人食、一人租、一人旅行、一人火锅以及迷你小家电、自助唱吧等等。这是一种“单人的乐活模式”,更是一种新的商业布局。

这个商业生态包括远程办公(阿里钉钉、腾讯文档、华为云WeLink)、网购电商(京东、淘宝天猫、拼多多)、社交社区(微信、陌陌、西五街、小红书),资讯服务(头条、百度、腾讯新闻)、外卖生活(美团、饿了么、58同城)、娱乐视频(抖音、快手、优酷)、网络游戏(腾讯游戏、网易游戏)、在线教育(学而思、新东方、简书)、金融理财(蚂蚁金服、东方财富)等等……

这个商业生态更是包括众多头部、腰部和精致的纳米红人,以及背后的7亿粉丝群体,构成了线上最具人气的商业流量中心。当城市越来越大、新经济生态越来越成熟、人际交往越来越虚拟的时候,“孤独的城市动物”正在催化各种商业创新。

5. 趋势热点之:社群卖场兴起

2020年,红人导购已经成为零售行业的重要武器。红人导购最关注的,是社区团购,就是围绕一个线下社区,以近距离社交为起点,来发起团购。

每一个导购员就是一个带货红人,早上在社群里推“超划算的爆款产品”用于巩固铁粉,晚上发布打折信息,定时发问候红包(现金+菜品折扣)用于培养用户习惯。

一位叫香帅的金融课红人教师,讲过一位“皮皮妈妈”,特别能干,她与附近几个小区的团长合作,没有依靠任何平台,利用微信群建立了近千人规模的“团购合作社”——他们几个团长,本身有超市采购、机场免税店、粮油食品企业的工作背景,有很多供应链资源,可以与厂商直接对接。

他们每周组织团购5次左右,商品品类覆盖蔬菜、水果、肉蛋奶,甚至是羽绒服、化妆品、品包包。

传统零售的接触用户过程,是漏斗型的一级一级筛选用户,先要广泛搜罗用户,然后从众多用户里进行精准定位,找到并影响目标用户,从目标用户里筛选潜在用户,再找到普通用户,最终获得忠诚用户。

社群零售的接触用户过程,是宝塔型的一级一级影响用户,要先去找到忠诚用户,通过忠诚用户去找到并影响普通用户,通过普通用户再去影响潜在用户,最终向广泛的目标用户扩大影响。

传统零售是“越筛选越小众”,社群卖场是“越影响越大众”。

6. 趋势热点之:深挖下沉市场生态

过去,很多创业者总是讲“工匠精神”,要精工细料、要死磕细节。但这是要成本的,产品贵到了一定程度,你的市场很难走出北上广深,商业的可复制性也没有了。比如,30元一杯的星巴克是无法下沉到小县城、小乡镇的。

如果你有打江山的那个霹雳手段,将效率做到感人,将价格压到骨头,从一线都市到六线县城乡镇,你都有办法搞定,让现存的、潜在的对手都怕你,那就算你厉害。

看看中国地图,查查政府官方网站,可以清楚看到未来消费市场新的增长引擎,主要来自于国内2856个“县”、41658个“乡镇”、662238个“村”,他们没有高房价或高租金的困扰,可支配收入并不低。

甚至有人直言,藏在县城的万亿生意,尚未被充分发掘。现在的下沉市场越来越好,一个卖大鸡排的本土品牌,门店数量已经超过麦当劳,一个做刨冰起家的本土品牌,门店数量也超过了星巴克。

我看,突破下沉市场的核心方法论就一句话——站在巨人的肩膀上拉客卖货。这个巨人就是当今中国强大的数字商圈生态。

有人认为,腾讯、阿里巴巴、天下秀、滴滴、美团都在做一件事,就是“线上商圈基础设施建设”,它们在各自的领域里“铺路”和“修桥”,而且这个“线上商圈”是没有城乡界限的。

现今1美金的平均快递成本就可以通运全国,品牌也可随时随地触达8亿网购用户。超过100万的红人,透过IMS天下秀平台直线对接万千消费品牌,红人逐渐成为一种主流的且大受欢迎的新兴职业。

现今,想要开创一个新消费品牌,包括产品的研发设计、制造、物流、营销等环节,都会出现专业化的服务商。你只需要专注洞察、连接及服务好用户,将用户或者消费者变成粉丝,集中精力做品牌就好了。

哪怕你身处遥远的深山、疆域的边缘、城市的角落,只要你懂需求、会表达、能沟通,就可以打造个人IP,直连消费品牌,除了红人主播可以带货,可能一篇好文章、一张好图片甚至一曲好音乐,都可以赋能品牌,都可以带货。

很多农村小哥、小镇青年、偏远地区的民宿业者,靠短视频带货赚钱,或是打农家乐广告招徕游客,已经非常普遍了。

7. 趋势热点之:红人算法化

2020年9月,《人物》杂志刊登了一篇热文《外卖骑手,困在系统里》,近几年来外卖平台通过算法系统压缩送餐时间,建立了一套“超时罚款”规则,使得骑手的工作难度越来越大,甚至越来越危险。送餐小哥活在了算法里,压力很大,网络红人可能也不轻松,红人要怎么当,算法来告诉你。

2020年,几乎所有互联网平台都抛弃了按照纯时间线排布内容的算法,改用打乱时间线的智能算法推荐(最保守的微信公众号也迈出了这一步)。

比如:B站首页默认就是推荐模块,哪怕用户订阅列表里的所有红人全停止更新了,也不影响消费者(粉丝)获取源源不断的感兴趣内容。

比如:抖音的分发机制也变得更加务实,红人创作的内容投喂给算法,算法再分发给用户,用户不会在乎哪个红人创作的,用户只在乎自己的口味。

创业者们一定要知道,内容消费,就是当我们刷抖音、微博、微信看到内容的时候,这些消费是目前为止互联网里面最大的消费,而这些内容的源头是红人博主、主播、UP主。最终靠什么发掘其中的商业价值?

答案是:算法。

Google的商业算法,很好理解,就是用户在搜索引擎里搜过内衣,好的,网页打开之时,就会看到很多内衣的消费选择。

Facebook的商业算法,就是另外一种套路,用户可能曾在社交平台上对一个汽车产品点赞,但他的个人页面上,可能会出现完全没什么关系的度假村内容,因为平台通过大数据分析,知道你是谁,就必然需要什么。

红人新经济时代的算法策略,将红人和场景当作“广告位+新货架”。你看到的那些红人,本质上是一个个算法。 你透过直播互动的数据沉淀,清楚知道用户(消费者)的生活方式,在一种生活方式的背景下,用户想要什么,就很清楚了。

红人为什么会变成算法?

在一个时间段内,哪一个产品最好卖?哪一个定价最好卖?哪一些台词最好卖?哪一些包装最好卖?同时,如何应对直播用户的问答?怎样的问题需要怎样的台词、演示细节进行匹配?如何持续改良行为模式,提高直播效率?……

这些都是靠背后动态沉淀的大量数据,进行矫正、优化的。如何驾驭这些数据,靠的就是一套好的算法。“一线红人们”的一言一行、一个眼神,都是基于直播间人气、销售转化等等数据指标,进行算法矫正的。所以,“一线红人们”就是一个一个人格化的算法。

Google、Facebook以及红人新经济时代的商业算法,决定了用户最终会看到什么内容。

Google的推荐系统,基于用户搜索行为,包括搜索的历史记录等等;Facebook获取的,是用户的社交信息,像是居住地、性别、职业,还有用户在平台上的点赞、留言;红人直播模式获取的,是基于红人、粉丝互动呈现的生活方式数据。

  • 搜索商业算法,瞄准你想要什么;
  • 社交商业算法,瞄准你是谁,然后一定会需要什么;
  • 红人商业算法,瞄准你想要什么样的生活方式,自然需要什么。

需要更多深度观察,请参阅我之前的文章《算法时代,伟大的公司如何痴迷于客户》。

8. 趋势热点之:CEO带货潮

2020年的消费市场,典型特征就是“看人下单”,每一个内容账号的背后,每一个红人主播、博主、UP主的背后,都是一个细分消费市场。

“后浪”消费群体主要透过社交分享,实现了基于人与人之间信任关系的购买。淘宝的直播带货,快手的达人卖土特产,小红书的大V种草,西五街的新品测评,以及拼多多的熟人推荐,都是看人下单(而非看品牌下单)的逻辑。

CEO们(甚至很多政府官员)纷纷走上一线,亲自进直播间卖货,不一定是要拿到多少销售额,更重要是,赢得需求洞察上的话语权、产业链上的主导权、公司命运的主宰权。

需求洞察方面,近年快速崛起的喜茶、完美日记,几乎都是CEO直接主管内容团队,每天都在网上跟消费者接触,沉淀了更多源于用户的意见,这就有了在需求洞察上的话语权。

尤其是那些年轻创业者,因为预算有限,会选择低成本、红人化的品牌推广,将自己塑造成为一个红人(意见领袖),把流量导向产品销售,经过多次转发、传播,这些红人CEO不仅给企业省下巨大的广告开支,也让年轻消费者觉着他们和自己贴得更近了。

这个商业效果,是不能用带货金额来计算的。产业链话语权方面,很多红人主播直接绕过了品牌,让厂家直接供货,李子柒、薇娅是这样。也有一些红人主播甚至直接绕过厂家,自己做供应链。

多年以前,比尔·盖茨曾经表示:“要么电子商务,要么无商可务。”可是,现在已经不是B2C了,而是直接绕过商家,从供应商那里买东西,甚至自己做供应链。红人直播带货给电商运营效率,带来了革命性的升级。

组织动员方面,CEO亲自直播卖货,也是要赢得公司命运的主宰权。这给人一个清楚信号,“老板都直播带货了,这么拼,你为何不积极跟上?”这不仅是一种广告效果,更是一种“全员营销”的动员能量。

总体看来,CEO主动直播带货,主动参与内容创作、与粉丝(消费者)对话,这种迅速收集消费需求、汇拢资金、按需生产、分发商品的模式,效率远高于传统电商。

可以预期,未来红人直播带货将会成为新消费品牌的新常态,而CEO直播带货也将成为给公司“立人设”的一种灵活方式。需要更多内容细节,请参阅我之前的文章《董明珠直播带货20万,其实是赚到了“2个亿”》。

二、面向2021年的三大洞察

诺贝尔医学奖获得者纽斯林·福尔哈德说过:“解决问题的关键在于收集到足够数量的碎片,并努力积累到这些碎片之间的关联性。”

华为轮值CEO徐直军直言:“经验是华为最大的浪费。”不要轻易放过一段经历和经验,如果能够从每一段经历和经验中沉淀一点未来可能用得上的思考,积累下来就是大智慧。

2020年的趋势热点当中,可以呈现三大洞察:

1. 流量“去中心化”是大势所趋

去年疫情期间,物流受阻,电商平台的效率发挥不出来,“社区团购(红人导购)”进来补位;孩子上学的节奏受影响,红人教师(和助理们)可以P2P(一对一)进行辅导;公司难以集体办公了,小团队一个个可以自行组织工作任务,即“去中心的自组织”……

红人新经济领域的“去中心化”,十几年来是一以贯之的。

十几年前的红人,主要是传统媒体(营造出格事件)催化走红的;后来,有了博客、视频网站,你要走红还得靠平台的编辑优先推荐;有了社交媒体,诸如Papi酱、雪梨等人,靠生活调性走红;现今,大量红人主播承接了短视频和直播兴起的势能,比如李子柒、手工耿、李雪琴,主要靠优质内容走红。

红人新经济本质上是一种去中心化的呈现方式,除了红人、意见领袖之外,某个物品、某个品牌、某个地方、某样美食、某一首歌,甚至某个虚拟形象都可以成为红人主体,进而与粉丝建立起稳定关系,促进了消费变现。

什么叫“去中心化”?

我举两个例子:过去,村里就你家有一部固定电话,好的,你家很快成了村里与外界联系的中心节点;现在,人人有一部智能手机,人人都成了信息节点,那个连接效率是不可同日而语的。那么,最有价值的就是那个掌握大家联系方式的人。

你上视频网站下载电影,你要下载的那个电影,并不是存在视频网站的服务器(中心平台)上,而是存在无数人的电脑上。

视频网站只是维护了一张列表,上面记录着:谁的电脑上有哪部电影,当你的电脑要下载一部电影时,会自动查一下这张列表。那么,最有价值的就是那个掌握大家资源列表的人。

去年,我们公司被“百万红人”送上A股主板市场。天下秀不是中心化的商业强权,而是掌握了红人资源列表,进行“去中心化的商业赋能”。

据克劳锐《2020年中国红人发展年报》显示:综合了微博、微信、抖音、快手、小红书、B站、淘宝直播数据发现,2020年粉丝量大于1万的红人数量已经达到了900万+,而这些红人日均产出内容数量达到了3750万+。

为什么品牌需要我们?

因为品牌需要在正确的时间、正确的场景,连接正确的红人,以正确的传播方式(文字、图片、视频)出场。

为什么红人需要我们?

因为红人也需要在正确的时间、正确的场景,连接正确的品牌,释放商业价值。这么多的“正确”搭配在一起,就需要有大数据和算法进行精准匹配,而我们就提供了这样一种能力。

2. 品效合一是企业的必然选择

过去的品牌公司会有一个基本考量:营销推广、品牌运营是两个维度的,(营销)追求销售效果or(品牌)追求企业调性?预算该怎么投,怎么平衡这个比例?长期以来,是非常伤脑筋的。

2020年则是实现品效合一的关键一年,其中的重要变量就是红人。红人就是把“粉丝”还原成“消费者”的那个物种,品牌则千方百计找到最合适的红人帮忙。

为什么红人商业(红人广告+直播电商)可以促使品效合一的加速到来?背后有两个核心逻辑:

1)效果革命

红人增进了交易效率的空前提高,过去,从产品到消费者,要经过多层渠道商、经销商,到零售店,最后被消费者看见,决定会不会买,这是一个很长的决策链条。

过去的交易方式,付款需要输入密码,网银需要用 U 盾来支付,现在这些步骤都省略了,刷个脸就行了,甚至可以免密支付。

现在,从产品到消费者,只需要一个直播间,只经过一层物流。除了消费链条大幅缩短,供给和需求之间的连通效率大大提高了。

如今所有的直播带货,从带宽、运算、支付、成交,到最后的朋友圈发文炫耀,一个人从决策到购买的链路缩短到3分钟之内——这是中国互联网历史上完全没有过的。

2)品牌革命

红人作为现今最重要的内容生产者,是广告位+新货架的完美合体。本质上,一切的表达都是文案,一切的产出都是创意,一切的产品和品牌都是内容,一切的内容都是广告。

近几年来,消费品牌纷纷借助红人流量,给自身品牌进行“人格化”赋能,要使消费者不仅仅将品牌当作一个僵化的标签,而是一个可交流、有温度的人格IP。

商业的本质就是消费者的注意力在哪里,产品就在哪里。聪明的品牌越来越清楚,能支持自己走得更远的其实是粉丝,而不是哪个标签或者LOGO。

3. “红人”职业化,“职业”红人化

2020年,是红人职业化、职业红人化的重要一年。

无论你是什么学历、什么出身、什么背景、你喜欢什么、擅长什么,你都可以把自己摆在网络平台上,被所有人看见。比如有很多五星级酒店大厨,因为有一门烹饪的手艺,通过短视频教会更多人做家常菜。

也有很多优秀的老师,把黑板搬到了网上,做更广泛的知识普及;还有医生、化妆师、心理学家、装修工人等等,在网络上分享自己的专业经验,获得很多人的喜爱。

红人的“准入门槛”确实不高,只要你有手机,注册一个账号,就可以开始发视频,开直播。但还有一个事实是,步入社会之后,我们说一个行业,一份工作的“门槛”高低,不仅体现在“准入门槛”,更在于职业化。

什么是职业化?不是在工作技能上有多高超,而是你学会把自己的生活人格和职业人格分开。在合适的地方,合适的时候,扮演合适的角色。

任何人把自身的优势发挥到,都可能成为焦点。但是,能不能长久在里面待下去,能不能胜任这份工作,背后仍需要有专业化的技术(数据、算法)引导。前面讲过,算法可以教你怎么做好红人?

算法之外,更重要是你要用自己的本心与这个世界碰撞。

你随意的一个感受瞬间,分享一首曲子,或者发一条微博、朋友圈、小红书、抖音,都在向身边的人传达着你平凡生活中的点点滴滴,可能被人忽略,可能被人厌烦,也许,也许,你也会被人喜欢,被人关注,被人模仿。只要你是认真的,世界上总有一直喜欢你的人。

那些一直喜欢你的人,就是你的价值观同盟,你也可以成为他们的品味代言人,这也是红人的核心本质。人人都有机会成为红人,无疑你也可以,流量和效果不用花钱买,你的口碑和影响力会自然扩散,成为你的私域流量。

给自己的观点找到知音,让自己的(内容)产品遇见懂你的人,这是“红人”职业化+“职业”红人化的内在本质。

三、1种信仰:为什么新经济公司要做长期主义者

所有的美好都是与你环环相扣的,只是需要时间。

复盘2020,进击2021,但是我们不会忘记,把时间和信念投入到能够长期产生价值的事情上,我们始终是长期主义者。

我的理解当中,长期主义不是一个策略选择,不是你想要什么,不是你赌现在收获or未来收获,而是一种绕不过去的必然坚持。

1. 唯有长期主义者,才能踩准风口

我说唯有长期主义者,才能踩准风口,可能有点反直觉。

你看2020年的直播电商引爆行情,从红人到明星、企业家、店主店员,无人不直播,无商家不转型迈入直播电商,大家都要抢这个风口,但真正赚钱的是极少数人。

你以为红人主播、直播电商是“风口上的猪”,但被风吹起来的,一定是长期主义者。这个领域人家已经深耕十几年了,以前默默无闻,现在终于成功了,你说风口来了,可是,风口就是人家做出来的。

红人,是消费品牌与消费者之间的最连接者。

但是要实现这个连接,并不容易。你要匹配红人与品牌,就要有最完整的红人资源清单;你要精准找到人、货、场的优化组合,就要对红人价值合理评估;你还要有专业的红人孵化机制,以及针对不同需求建立传播矩阵、策略组合,这都需要很长时间的积累和沉淀。

我们去年获得了不错的发展成就,你觉得这是站在了风口上,但是背后十几年的长期准备,很少有人看见。

很多看起来像是风口的东西快速到来,那些没有准备的人,或者没有考虑好的人,或者盲目去应战的人,他一定会尝到非常多的失败。因为任何行业机会都是螺旋进化的,一边发展,一边洗牌。

2. 长期主义是反人性、磨心智的

真正的长期主义者专注做一件大事,而这件大事一定是一直默默取得进展,这个过程是反人性、磨心智的。

“股神”巴菲特总是把自己的投资策略(长期投资、价值投资)开诚布公,贝索斯有一次忍不住问:“你的策略这么简单,为什么大家不照抄你呢?”

巴菲特的回答耐人寻味:“因为没有人愿意慢慢变富。”人性啊,显然更喜欢见效快的努力。

长期主义者多年专注一个细分领域,不敢越雷池一步。

日本人建筑做得好,日本水泥有100多种。法国人面包做得好,法国面粉有100多种。你离开专业,就所知有限了,不能总听人讲故事,那些讲故事的人大多是业余的,他们的故事也只是科普水平。

有人问我,我公司为何不签约、捧红一些自己的红人?我说:“我公司没有红人,也不去签约和捧红某一个红人。但我有红人大数据平台,做了亚洲范围内的自媒体排行榜,甚至教红人怎么成长。

这是我们作为大数据公司、平台公司所应该做的事情”,长期专注,其实是最磨练心智的。

坚守是最不容易的,做好一个企业需要10-20年时间。如果你想做到,可能需要30-40年时间。一个堪称伟大的企业,必须要有50年以上的历练。

在我关注的领域里,基本十年能有一个结果都算比较快了。

四、总结

最后,我想再重复一遍:“很多关键时刻,会有一些运气,比如当下的直播电商热潮,但都不会影响大局。你要保持长期的集中心力建立护城河,也就是那些改不了、夺不走、丢不掉的东西。

真正的长期主义者,不管潮起潮落,人来人往,这些长期不变的东西,就是你公司的基本盘。”

文章来源:人人都是产品经理  作者:IMS李檬

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



移动互联网中被消音的群体和小众社区的“生与死”

资深UI设计者

编辑导读:为了满足不同用户的个性化需求,产品的种类不断丰富。相较于巨头们都热衷的年轻群体和大众化产品,一些小而美的小众产品也在悄悄发展,并且收获了一群稳固的用户群体。本文作者从自身工作经历出发,对此发表了自己的看法,与你分享。

“风口之上,行业之下”应该是很多创业型公司的真实写照。作为创业公司的打工人,在巨头之下讨生活,要比大厂的打工人做着多倍努力的工作已是共识。对外我们习惯称自己的公司“小而美”,对内我们只能在业务之内想尽“奇招”只求不做炮灰活下去!

“风口之上”是指工作大行业是15年的移动医疗和17年的短视频直播,“行业之下”指的是热门行业中的垂类细分领域,在小众人群中谋生存,服务的是肿瘤病患和中老年人群。工作方向倒是始终如一,社区运营从未改变。肿瘤病患社区和中老年短视频社区工作其实都不算成功,某种意义算是失败的工作经历。

在做“肿瘤社区”时,发力点是内容聚合人,人获得内容,此时像做内容圈。中老年的直播则进化为人与人之间的交流,通过直播载体形成群体意识,成为社区圈,下文从两个社区案例的执行层聊聊我“失败”的经验。

一、垂类病种医疗社区

简单说社区形成条件是依托某个属性将大家聚集在一起,彼此产生一定的交互并沉淀优质内容。对于疾病社区的线下映射多见各类病友社团如“**爱心之家”,病友的线上组织则多以Q群垂类论坛形式存在,下文讨论的肿瘤病患社区则依托QQ兴趣部落而建。

首先交代一下背景,公司产品为肿瘤病友社区APP,作为打工人工作职责之一是让目标用户知道并使用产品,在QQ兴趣部落上建“社区”目的就是为了导流。

(部落内嵌在手Q中,并有独立APP,但已被战略放弃,上图为网页端)

回看15年的部落像是社区的1.0版本-贴吧,确定社区调性和方向、做内容、找用户、设规则、做活动并最终达成完成病友社区小生态,形成内容的产生分发并做到产品的导流就是我的工作了。

1. 定调性和方向

社区调性向以玄学著称,大众认可好的社区是有自己的文化如快手的老铁、社区用户有很强的归属感如B站的二次元和有属于站内的故事如知乎的“刚下机……”,但之所以称为玄学是以上并非社区的调性的全部,社区至少是链接内容、消费者和生产者并形成三方间良好粘性的产品形态。

产品定位就是肿瘤病人,那兴趣部落自然也是围绕肿瘤病患做内容的消费和生产,方向也就是肿瘤病患感兴趣的内容方向。

2. 做内容

所谓万事开头难,对于从零做社区填充内容是第一步,运营最苦逼的搬运工作在所难免了,其次利用了信息不对称我也搜寻互联网上已有的内容进行二次编辑整合,尽量简单直白的说明了内容,在这过程中印象最深的是人肉去把中科院肿瘤医院的各科室肿瘤指南变成电子版的经历,作为非医学生的我不要太痛苦。

社区需要优质内容,上述内容虽说干货满满,但此时更像是一个媒体平台。作为刚入行的运营所能参考的就是已有的pc端肿瘤病友论坛贴吧,发现病友自建论坛除“久病成医”的干货贴外,经历贴和求助帖其活跃度是相当高,此时基本可以确定部落对ugc内容的方向-让用户生产经历贴!

因为还处在零起步阶段,没有用户情况下只能继续“运营人”的自嗨并发挥“写作”天赋。由于承担自媒体工作,做故事内容征集写自媒体同时可同步社区作为冷启内容。

到现在还是做基础社区氛围的搭建,在写人物故事时会刻意去寻找真实案例,并有意进行种子用户的挖掘。对于这部分人群尤其年轻的病患,他们需要一个有归属感能够发声证明自己存在的地方,不过难点就是他们对社区的信赖程度,是否愿意发声。此时前面铺垫的内容承担着中立的工具属性,无广告的社区氛围则利于促成用户发声。

在这个过程中主动帮助他们发声,撰文写故事的方式帮助记录生活点滴,降低ugc社区产生内容的智力成本,高度相似的经历提供阅读内容外还可用于用户的二次创作如持续的跟帖互动形成新的消费内容,原型人物会有社区荣誉感,激励持续创作开帖。

相近的内容密度足够高会产生更为细分的内容,带来有效的讨论,有了交流进而有了用户间围绕内容进行互动从而带动整体的社区氛围。

肿瘤社区有个难逃的话题就是死亡,有过同用户的沟通一部分人会乐观面对,但多数人还是恐惧,社区能做的就是客观的记录,社区能做的只是提供精神的寄托,无法替代医学治疗。

3. 找用户

做内容和找用户基本同时进行,好在社区足够垂直,干货内容可以先行一步,另一个好处垂类社区如方向得当用户自然易于发现。

1)QQ群

在15、16年QQ群一直是寻找目标用户的地方,搜索关键词会出现相应的QQ群,虽然微信已经普及仍有部分社群持续这高活跃状态,QQ兴趣部落诞生之初也是同社群结合相当紧密,此时需要做的就是同群主沟通能否接入兴趣部落。

说明兴趣部落同QQ群的关系以及通过填充的内容对应用户存在的需求,但由于人群的特殊性存在部分售卖假药等黑产已经给部分用户带来创伤,对于有公司背景的我和kol沟通还是有一定的难度。

因为社区内有干货内容的存在,作为用户在社群内分享会吸引一部分目标用户通过内容转化关注到社区,另外同群主(kol)沟通中说明社群所不具备且社区所能提供的东西,通过公司已有的公立医院医生资源,为社群提供医生群内答疑等,尽量消除用户的疑虑。

2)微博

对于寻人尤其是大v用户微博应该是最好的渠道了,微博的认证和粉丝关注已经帮你筛选了最精准的用户出来。

通过微博关键词找到了很多精准且在垂类病种中有影响力的医生、病患,除去医生外病患资源是早期社区大V的来源,其抗病经历也可反哺自媒体作为内容传播。在某段时间主要精力就放在同这部分用户沟通上,另外通过微博的前身博客也找到了一个庞大的肿瘤病友组织,他们会定期做线下病友交流分享会,分享治疗心得交换名医资源,甚至出书写传记,其中不乏抗癌明星。

我有幸参与过他们的线下组织并因此结缘抗癌明星,由此也获得其书籍整理电子版并进行传播的权利,这也帮助吸引了很大一部分病患家属,增加了社区的关注。

3)自媒体

在工作时同时兼顾自媒体账号,由于APP功能所限,某些社区功能会以兴趣部落作为承接载体,所以自媒体也会向兴趣部落做引流。

在社区(兴趣部落)做话题征集引导用户生产内容,通过前期铺垫内容让用户从逛社区到融入社区,从参与互动到生产并获得认同和反馈,从社区中选取优质内容在自媒体中进行二次传播。

4)兴趣部落垂类榜单

由于在他人平台上身份等同吧主,除管理社区外就是研究平台规则。社区创建在医疗分类之下,研究兴趣部落医疗垂类贴吧排序规则,争夺曝光资源也是工作之一,QQ的海量用户可通过兴趣部落的排名为其引流关注。

4. 设规则做活动

社区是基于QQ兴趣部落功能,作为创建者(大酋长)只能围绕创建话题、删帖、顶帖等基础的贴吧玩法做拓展。

上述阐述了做肿瘤社区时的一些经验,在运营工作上感悟到内容和氛围的重要,对于垂类社区其价值为细分人群提供率“解决”问题的工具,通过社区的某种行为让目标人群有了反馈甚至产生了社交货币并获得了社交资本。

关于商业模式其实本不该是运营操心的事,但现在回头去看“风口之上,猪也能飞起来”这件事取决于风是否持续的吹,移动医疗行业政策决定生死。再好的交互、再给力的用户体验,为病人提供社区氛围感,聚集无数同属性用户之后能做的也多是医疗之外的帮助,肿瘤疾病可算重症也可看为慢性病,风口过了什么“院外护理、在线诊疗”此类短期难以变现均被资本看作无效弃子。

不过因为各种原因不能同公司继续走一下去,甚至兴趣部落也因其内核趋同贴吧并没有很好的移动化已被鹅厂战略舍弃,现在苹果市场已搜不到其独立APP,QQ上也找不到任何兴趣部落存在过的影子,仿佛从未出现过,唯一证明它存在的地方可能只剩官方建立的Q群,一年未响动的群有了声响,不停@官方询问部落后续……但已无人回复。

二、中老年短视频直播社区

互联网公司中提及中老年多和下沉用户一同出现,少见单独以中老年用户为主要人群的移动互联网产品。相比肿瘤病患为求生刻意寻求带有关键词的产品,对该人群多数不愿承认自己老了且产品下载路径更倾向于社交传播,市场中带有中老年关键词的APP下载量也不尽人意,如果本身不是中老年,除观察长辈手机/家庭群发链接外很难知道他们使用那些产品。

公司始于视频剪辑工具后转型社区,种种原因社区玩家变为中老年人~

或许是2016年千播大战,跟风做了直播,在17年初入职时直播仅支持开播、观看等基础功能,而我的工作就是从社区培养主播、引导社区用户观看直播。

1. “奇特”的产品形态

人有生理、安全、归属和爱的需要,也有被尊重和自我实现的需求,对于中老年人归属和被需要可能格外看重。当中老年人的个人价值不能在社会和家庭得到施展时,很容易陷入精神的空虚,所以也能理解长辈频繁发“养生鸡汤、美文祝福、年画风和游玩照片”之类内容的原因,想必是从中可获得一定的精神满足感。

A产品提供了剪辑功能满足了部分中老年生产“朋友圈素材”的需求,同时在A产品中内容有曝光展示的机会,通过某些策略的制定给予了他们被“重视”的感觉,在理想状态下符合上图“为工具而来,因网络而留下”的认知路径。

2. “友好”的社区氛围

对一款社区产品来说,社区氛围就是产品调性也能说明用户的特质,可以增强用户的归属感,不过另一面就是过于强调调性则造成用户容易抱团,排斥其他用户,产品容易造成天花板,这是产品用户量始终上不来的原因之一。

本文不讨论A产品因社区调性带来的负面情况,重点在社区的进化以及直播如何融入社区。

1)成为提供“社会资本”的工具

“年纪大了就容易怀旧”外出旅行拍照、家庭合影或者日常花草、猫狗等占据着父母的相册存储。父母使用各类工具将照片制作成视频音乐相册时,满足了相册存储功能同时也增加了照片的趣味性而获得了自我满足,分享到社交渠道获得亲友的赞誉甚至请教制作方法,获得了成就感,在自我满足和外部荣誉之下,部分用户获得持续制作内容的动力,工具也就获得了社交传播。

2)成为独特的社区

理想状态下,看到社区中相似的内容聚集时可帮助用户快速融入,相似的内容也可让更多用户有意愿产生相近的内容,从而产生更多的社区内容,社区内容的相似性又帮助找到相似的社区用户如此往复。

但对于UGC短视频产品,绝大部分用户上传的内容对非好友来说都不具备价值,当内容不具优势时,互动或许可带来转机。

不管是用工具心态制成后的站外分享,还是因社区策略制作后的站内“被动”展示,人们都是在寻求最有效的途径来最大化他们的社会资本。平台通过现有用户属性取“最大公约数”来择优选出内容展示,帮助部分用户获得除朋友圈外的额外社会货币,给予社会资本,让其获得满足。

有别于其他群体,产品提供内容曝光、评论展示等基础功能后,由于中老年用户的“人情观-别人给我点赞互动,我要回访”会形成较好的互动行为,上述行为就会产生新的社交货币即除因熟练使用工具、有精美素材制作的视频内容外,良好的社交互动行为也会因此获得他人的关注,这一层“工作证明”降低了社区货币的获得门槛,毕竟多数人创作内容也是寻找“存在感”,内容只是其中的媒介。

虽然内容中的中老年喜爱的视频、游玩影集和年画风音乐MV评论区多见“点赞、真棒、加油期待回访”之类在我们看来不痛不痒的留言,但对他们来说这种公开式的留言方式写出已出于真心而非敷衍,细想线下场景两个不熟的中年人见面不也多是寒暄,而进化为重度社区用户“60后姐妹团爱恨情仇”更像宫斗剧,“出场”方式绝非这么简单,有机会可详聊。

3. “奇特”的直播定位

说回直播,17年市面可参考的直播形态多为肤白貌美的秀场和游戏直播,我的工作是要社区的中老年用户来参与直播,将直播作为用户的内容之一,增加用户对社区的认同感,这也是我开篇说明自己做的是社区运营而非直播运营原因。

1)社区短视频同直播的关系

人的时间有限,使用产品基本就是零和博弈的过程,产品内短视频同直播就是相互依存且相互冲突的关系,短视频本质是认同,是粉丝,直播的本质是注意力,是转化。

对于新用户如果无法快速理解短视频社区的成长路径,即不知道如何制作出符合社区调性的视频作品时,直播或许可以为新用户获得新的社交货币,减少流失并为后续更快的融入社区做铺垫(前提是社区内容同直播内容格调相符)。

对老用户来说,社区原有的视频制作成本高、频次低,无法带动产品高频使用并且部分用户无法通过此类“工作证明”获得满足感,或存在社区的阶级固化,急需新玩法打破现有规则,直播则提供了对社区有粘性但没有找到合适的工作证明的用户。

不管是新老用户对于直播“1.0版本的定位就是让社区用户有更好的归属感,同社区氛围不割裂”

2)直播的成长

有了上述定位就需要考虑下面的问题:

  • 中老年对直播的认知(“直播社区”是什么)
  • A产品做直播的优势(“直播社区”的玩法)
  • A产品的用户为何要参与直播(用户参与“直播社区”的理由)
  • 直播是否能增加用户对产品的认同归属感(用户融入“直播社区”并形成新的文化)

问题1 中老年对直播的认知(“直播社区”是什么)

直播虽已经过千播大战的教育,但目标人群毕竟不同,要从业务层面考虑用户是否对直播有认知,认知程度如何,解决问题最重要,以共情同理心将用户分为一下3种情况:

①社区原有kol:

“富有的,给他更多;没有的,把他仅有的也拿走。”这是《圣经·马太福音》中的一句话,作为社区我们当然不会照单全收,直播冷启我们需要让更多用户知道直播,kol的直播可以让更多用户知道。

这部分用户多有一定的身份标签,根据标签的不同定制直播栏目类似如“名人堂”,在站内做banner宣传、活动推广,给他们直播的理由,将直播打造成他们容易理解的电视栏目,而他们就是上电视的名人。可能内容的趣味性大打折扣,但对渗透有很大的帮助,用户也乐意配合,作为短视频内容的直播延伸。

因为中老用户的学习成本高,他们在社区中已获得足够的成就感并且实际精力不允许拓展太多新玩法,在原有工作证明得以保留的情况下,想要长期持续直播产生内容并非易事,所以注定只能是直播频道的“导流者”。

②社区用户:

这部分用户大概率因kol而看直播,后续做直播活动如歌唱、朗诵比赛等活动脱颖而出。在社区无法获得的满足感但通过直播可获得,由于本身有一定好友,所以直播动力更持续,可将一部分精力放在直播中,该部分为后续社区型直播用户主力军,帮助平台丰富直播内容,拉长直播时长,是直播频道中的主力玩家。

相比图文视频,直播更为立体的展示一个人的性格外貌,通过言谈举止了解这个人的思想,通过环境了解这个人的生活背景,直播丰富了他本人。当我们都爱邓丽君,喜欢她的歌,通过短视频将爱好扩散,通过直播将爱好表演出来,满足了用户多场景互动。

③非社区型用户

直播先是基于内容后是基于人,这句话放在这部分用户中更为直观。没有了社区粉丝基础,这部分用户如能持续直播必懂得一定用户运营技巧,毕竟直播内容由平台把关,定是模仿了部分社区直播内容并加之发扬光大才能得以生存。

说上述话的原因是由于要保证社区调性,对于直播内容、主播年龄都有严格的控制,虽为明确说明,但有意扶持中老年主播如有一定才艺则更是力捧。对于市面常见的秀场类主播尤其年轻貌美、声音浮夸如出现则刻意打压,减少流量,保证中老年主播的“生存环境”,严格把控社区调性。

因为前期对内容的严要求,后续站内原生主播持续生长,出现了很多中老年且实力不凡之人,这部分主播后续成为产品的营收主力军。对比短视频,他们将直播作为新的社交货币并融入到社区之中,与短视频社区也不会存在很大的割裂感。

问题2 A产品做直播的优势(“直播社区”的玩法)

大众认知下如果是中老年直播可能是这样:

优势:

  • 时间充裕,目标群体相比年轻人娱乐时间更多
  • 经济优势,一二线目标用户可消费能力强
  • ③孤独感和被需要感,社会身份的转变需找到新的生活价值
  • ④中老年娱乐内容少,线下受地理位置等因素影响娱乐方式有限,线上专属中老年社交娱乐方式主要集中在微信、k歌和短视频产品中,直播内容较少。

劣势:

  • 学习成本高,主动参与性低
  • 消费理性,区别秀场荷尔蒙消费中老年消费较为理性
  • 常见的秀场类内容及弹幕互动方式对中老年不友好,容易受到忽视从而无法在直播间获得“身份地位”和认同
  • 认知改变难,市面直播多以年轻化内容为主且节奏快,目标用户可能感知”无法参与“甚至抵触心理。

A产品做中老年直播的优劣势:

优势:

  • 有钱:中老年用户集中且”高净值“用户多
  • 想玩:平台无多人及时互动功能,对中老年人线上”群体性“活动的社交需求没得到满足
  • 场景:提供除短视频互动外的社交场景,增加社交货币

劣势:

除中老年直播劣势外,已有社区用户习惯站内功能,任何新功能都会引起短暂的不满,部分占据社交资本用户不愿增加新的社交货币来稀释原有生态。

基于上述优劣势为其添加玩法,优势中针对群体性社交、孤独感和被需要这几点,全民k歌的歌房可获得一定的满足,他们以家族、兴趣爱好为据点,半熟人间邀请制形成独特的社区文化。

但k歌毕竟存在门槛,针对普遍的孤独感,陪伴式和中老年的泛文化类直播内容尚可入手。对目标用户,好的运营方式就是根据特性做活动,前期以邀请制找主播,为主播增加曝光让站内用户都知道开通直播并来围观,通过产品功能让用户参与到直播中。

劣势中的学习成本高那就需要产品的补足,同理心和共情能力之下提出产品策略如上麦互动交互展示方式就需根据目标用户做考虑。

这里说两个值得夸耀的细节,产品虽然迭代了很多营收项功能,但对上麦按钮和麦序数量这两点基本没做过多改变。

上麦按钮:上麦按钮和礼物按钮同级别且优于打字互动和转发,直播业务模式下礼物按钮重要不用过多说明,上麦按钮的突出则出于以下几点考虑:

  • 中老年用户生理机能考虑,语音或视频直接对话效率一定高于打字看弹幕。
  • 对主播来说,主播为社区用户转化且初衷多为打发时间,主播在意的是有人和他说话并且越方便越好,便利的操作有利于用户上麦的互动。
  • 对观众来说,对比其他直播产品上麦并非重点,A产品并没参考主流样式而是根据实际情况为观众提供最便利的上麦互动方式。增加上麦就能增加用户间的互动交流,能弥补内容的不足,甚至从最终付费的心理来看,互动最终让用户间突破主播观众隔阂,让成为朋友变成可能,付费也成为人情的往来。从围观的观众来讲,有内容的互动式聊天肯定要比无主题的单人演讲有趣的多,毕竟在少了颜值的情况下,大家默认关注的是内容,也满足了老年人爱凑热闹的心理,同时上麦的用户也可帮助主播“招呼”直播间观众,调动大家的情绪。
  • 对平台来说,上麦可以增加主播开播时长、观众观看时长、促进用户社交等,对中老年平台在社区内培养直播行为有利而无害,理论上社区化的直播也不希望出现粉丝集中在某一个主播身上,保证每个主播开播都会有一定量的忠粉观看足以。

对于上麦可能有些人会联想歌房或多人窗口直播,但从用户角度则没有了“主播”概念,用户上麦更多是作为主播内容补充,起到参与的目的,而且歌房的出现不利于其他用户开播,会对开播主播数有影响,我们希望的是部分用户通过上麦体验到直播的乐趣,可在合适的机会自行开播并召集好友捧场参与上麦互动,形成新的主播筛选循环。

如果产品参照其他直播将上麦弱化,我相信直播社区化基本等于失败。上述都是因为上麦按钮做的明显带来的好处,坏处有没有?可能的坏处就是上麦观众存在违规行为,虽然这可能会给平台造成负面影响,但毕竟是小概率事件且可以通过技术加人工审核手段及时处理。

麦序数量:这里的麦序数量对比秀场类平台应该少见,多数这个麦序量级直播形态基本已变类歌房小窗口形式。产品没有改变的原因是保证了“主播”身份也满足了中老年爱热闹的心,多人互动有利于形成讨论、互动,帮助直播加速社区化,形成用户好友关系……

问题3 A产品的用户为何要参与直播(用户参与“直播社区”的理由)

上文很大的篇幅都在叙述关于“社交资本、工作证明”的内容,对为何使用直播,简单来说提供了新的社交货币。

短视频是内容,用户之间的交流在于异步的互动,直播则在社区之上更进一步,需要实时面对面的交流互动,这一点其实很考验个人能力,尤其还是在用爱发电的中老年人群里。

也曾寻找过公会,但在成本等考虑之下还是选择了“最笨”但最符合社区化的方式。在做直播内容的时候发现,不管任何年龄层都愿意为“美”消费,用户参与短视频制作是希望追求社交货币,直播能获得满足时他们也乐意尝试。

作为主播他们有了被众星捧月的感觉,我会为这些中老年主播建立粉丝群,引导产生适合的短视频内容帮助分发,为他们吸粉,在直播的过程中作为内容的生产者除精神上的奖励外,还会获得真真切切的收益,参考中老年为各种极速版产品的奖励金而打卡拉新,直播的营收足以带给他们额外的惊喜。

作为观众同样因内容而来,在付费观众中直播打赏可以算是付出网络成本最“少”,网络社交见效最快获得社交资本的方式了,直播间内等级地位较低的人总会突显出小部分付费用户的特殊,当形成足够的社区规模时更是会激励其他人参与到付费买地位的有中(中老年为主的直播社区arppu值约90元+)。

A产品比较有趣的例子是这些付费的中老年用户往往也会开直播,而形成的社交关系此时就会涌入直播间,通过上麦等方式共同为观众打造一个主播没有才艺,但也能持续观看的直播内容,此刻秀场类的才艺内容就无关紧要。开直播,就是交个朋友咯~

问题4 直播是否能增加用户对产品的认同归属感(用户融入“直播社区”并形成新的文化)

说结论,直播对社区归属感的提示有很强的帮助。直播对短视频社区是内容的延伸,主播作为社区的一份子会参与短视频内容的投稿并且粉丝间形成小团体也没有放弃短视频社区,直播录屏、截图等衍生内容作为短视频素材来源之一,运营也会刻意做唱歌等视频活动,帮助直播用户在社区扩大影响力。

3. 直播的困境

短视频可以通过社交渠道不断吸引流量,但直播则是消耗流量的地方,理论上直播是有限时间的生意,主播固定时间表演,观众为这个时间价值买单,短视频社区则起到直播之外用户的消费场景。

传统的秀场直播重头部主播,重付费用户体验,新用户很难在秀场模式下快速融入,平台则努力将未付费转化为付费,付费转化为土豪用户来提升渗透和arpu值。

A产品理论上在用户不断转化直播社区中,通过服务更多的用户就能有更好的营收,但现实问题中老年社区在现有玩法下难变大,他们的审美视角无法同移动互联网用户中的大多数一致,最终结果短视频用户增长缓慢,对于直播这个产品模式如想赚更多钱,必定要逐渐“秀场”化。

在前文提到的三类主播中,中老年社区kol对“人情债”和自己的社交资本看的很重,不会贸然消费自己的社交货币。

社区用户则处在中间层,善于互动的中老年会很快掌握直播要领,获得了社交资本外也看见了实际的收益,但在观众固定的情况下收入也会固定,无法满足企业的利益最大化。

最后一个是新用户或没能掌握短视频社交货币的一群人,他们可能因直播或工具而来,赚钱目的明显,但最大的问题他们没有归属感,他们是主播中最不稳的一群人,但也是直播里唯一能带来新鲜血液的一群人。

今天再看产品信息流的排序基本可推测直播的调性,需要新鲜主播的注入带来新的营收,在盈利和社区化此刻最好的选择可能也是前者……

三、最后聊聊自己

前四年的运营工作给我带来的就是思辨、灵活、快速尝试,认识到运营的执行力的重要,不去尝试所想终究无用。思考社区会想看大家在网络上交流的变化,了解竞品会把已知所有目标用户产品都去体验包括这个行业的优秀产品。工作第五年的自己内心变得迷茫,执行力也变差,处于焦虑之中,希望尽快调整状态,找到合适的工作方式,另外也在努力的系统学习中~


文章来源:人人都是产品经理  作者:马丘

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

论一致性设计那些事

资深UI设计者

为什么ui要有一致性设计


大家有没有听说过一次性设计

一次性设计就是,我今天投入成本完成了一个界面或者营销需求,但也只是完成了这个需求而已,今后再碰到类似的需求依然吃瘪,还得重新投入一轮成本。这种设计就好像一次性的碗筷,用后即扔,非常非常得低效,它不仅没有办法复用,而且无体系、非模块的处理方式非常摧残设计师的精力。


所以保持一致性设计也是可以提升操作的一致性、提高工作效率、延续品牌定位……而且一致性设计是UI和开发交接的一种很好的办法。


一致性设计的好处


对于开发团队而言

1.复用资源,降低设计成本

很多不同的界面中会用到同一个资源,如果见一个重做一个,会很大程度浪费设计的人力资源


2.产品风格及体验不易出问题

因为资源的复用,能基本保证整个产品的风格不跑偏,而在用户体验上,也起码能保持在一贯的水准


3.新人可以快速上手

比较大型的项目中如果人员流动率较高,一致性就相当有必要了。新人先阅读规范后更容易展开工作,根据一致性也能更快了解当前产品


4.程序能提高开发速度

主要也是因为能够复用自用资源,有些界面和控件,程序甚至无需找设计出资源,在产品策划指导下可直接开发


对于用户而言

1.对界面和功能操作的认知统一,学习成本低

熟悉过主要界面/功能后,在其他界面/功能中能基本自由操作


比如在北京开车是靠右行驶,到上海你不用学就知道也是这样。因为中国道路交通相关法律中对此是做了统一规范的。要是这一点不一致的话,到上海突然让你靠左行驶,你肯定要适应一段时间并难免犯错.....


2.提高操作效率

在降低了认知成本后,用户很容易就熟悉了产品的设计风格,那么操作起来自然也更容易上手,效率也更高


3.加强对产品(品牌)辨识度

别人一看很容易辨识出:哦,这是某某等那个产品

常见的产品中保持一致性设计的例子非常多,相信各位天天见,我就不啰嗦了。


一致性的规范提现在哪里


什么是设计规范?

设计规范是一个老生常谈的话题了,网上相关的文章也非常多,但我相信有很多设计师对设计规范的理解还是比较模糊,认为设计规范指的就是字体,颜色,控件规范那些,这种理解其实是比较狭隘的。

于我而言,设计规范用一句话总结就是:设计规范是针对特定产品所制定出来的一整套产品标准,包括流程标准,技术标准,设计规则等等。

今天就只来说最基础的几个小方面(也算是干货满满了)

  • 颜色

  • 字体

  • 组件

  • 交互

其他的一些需要大家根据自己的产品定义



颜色


颜色的搭配和选择影响着产品最后呈现出来的视觉效果,合理的颜色配比能加深用户对品牌的印象。色彩无处不在。

那我们如何去定义颜色规范呢,下面本人分享一套规范,小伙伴们可以根据自己的产品进行套用(如果不对大佬勿喷,一起学习)

1.定义基本的颜色

首先要定义基本色。理想情况下应该有1-3个基本色与产品相关联。


另外需要注意的是     不要使用纯白或纯黑色。白色(#FFFFFF)的颜色亮度为100%,黑色(#000000)的亮度为0%,这种强烈的对比在阅读或操作时会使眼睛疲劳。
最好的办法是     确定灰度色,灰度色适用于大多数界面设计。由于灰色度的H值和S值没有变化,所以只要改变B的数值就能形成一套色板。


基本颜色的使用场景主要是


  • 突出显示重要的界面状态或信息

  • 在交互方面:如文本字段切换、复选框等

  • 提供视觉反馈,如新的消息等


2.60%30%10%配色原则

根据数据反馈60%+30%+10%是是整体画面最有平衡感,也是用户最满意的方案引导用户的视线从一个CTA区域平滑移动到另一个区域。


配色规则如下:


  • 60%的空间用于主色调

  • 30%是空间辅助/次要颜色

  • 10%是强调色或引导色

如图

按其他顺序搭配,它仍然有效

3.了解受众

好的用户体验的关键是理解受众。颜色在这里起着重要的作用,因为颜色的选择会影响用户与产品交互时的感受和情绪。

  • 你需要考虑的问题

  • 谁是你的目标受众?

  • 他们的年龄?

  • 产品的专业化是什么?

  • 你想让产品唤起什么样的情感?


注意:与团队讨论选择时,请始终关注这些问题。

4.色重对比

如果你想把用户的注意力集中在特定的操作上,最好使用强对比度的颜色来帮助用户找到焦点。


对比度帮助用户区分各种文本和非文本元素。更高的对比度使图像看起来更舒服,通过对比检查可以有效地评估颜色的搭配。



一个快速检查颜色饱和度是否统一的方法:


画一个颜色为纯黑(#000000)的矩形,填充模式选择“饱和度”,覆盖在色板上,色板上的颜色会出现饱和度的变化,以此来检查配色的饱和度是否相同。


通过这种小技巧检查颜色的饱和度,能看到别人看不见的东西。


5.命名方式

在系统中使用颜色时,请始终为每种颜色提供确切的名称。保证团队中的每个成员都能理解该名称,很容易就能引用特定的颜色。


最好使用功能性词语来描述UI中的颜色,例如积极、警告、主动等。



另外分享一些将图像生成调色板的实用工具:

  • Coolors.co/image-picker(Web app)

  • Alembic(Sketch插件)

  • Image-Palette(Figma插件)



字体

在项目中文案风格也要和产品定位统一,各个界面出现的文字提示等要风格统一。

主要从五个方面入手


  • 类型

  • 字号

  • 字重

  • 行高

  • 行宽

类型

iOS设备的系统默认字体,中文为苹方,英文&数字为SF UI Text。

Android设备系统默认字体,中文为思源黑体,英文&数字为Roboto。

字号

不同的使用场景,文字的字号也不相同。文字的主使用场景分为:一级标题、二级标题、三级标题、正文和提示文字 。

通常最小字号为12px也有文字最小字号为11px的,特殊情况下,字号为10甚至可能更小,例如标签里面的文字。

字重

字重就是指字体笔画的粗细。字重的等级是用来标明同一字体家族中不同粗细笔画的字型。


UI设计中,常用的字重有两个,一个是常规(Regular),另一个是中黑体( Medium)。

正常文字使用常规体(Regular)。当需要突出层级展示,增加对比时使用中黑体( Medium),中黑体( Medium)常用于标题。



行高

字号大小等于文字高度,如下图所示,字号为16时,行高设置为16,那么其行高也是字体本身的高度(16pt)。

行高= 字号 + 行间距。

如下图所示:行间距距离文字上方为3pt,行间距距离文字下方也为3pt。字体高度为16pt。

行高(22)= 字号(16) + 行间距(3+3)。


在界面过程中,需要规范字号大小和对应的行高。不然的话会存在设计布局问题。


举个例子,设计一个标签时,当字号为14时,行高为20,那么为了保持视觉上字体到四周距离相同,那么上下间距为4,左右间距为8。

因为行间距的存在,不能将上下间距和左右间距设置相同。

如果行高设置为14(文字本身大小),那么上下间距应该也为8pt,而非4pt。


如下表格为iOS设计指南建议字号和对应的行高对照表。



下图是Sketch默认字号和行高对照表


可以看出iOS建议字号行高的对照表和Sketch默认的不一样。


 
Sketch视觉稿到了开发实现,字号和对应行间距会出现不一致的情况,这样会导致还原度出现问题。
解决行高无法完美开发还原的办法有两个:
1、将行高设置为字号大小,这样的话,就不存在行间距的问题,可以保证完美还原。但是由于一倍行高会导致有些机型的字被切掉。
2、使用字体插件,这样它可以自动修复Sketch文档中的字体行高,做到Sketch中字体行高与开发中字体行高100%还原。


行宽

行宽=字体宽度+两侧距离字体的宽度


行宽作用于文本范围,如下图所示:


将行宽拉长,代表着设置了文本内容范围,文本距离右侧语音图标为12pt,表示当文字内容距离语音图标12pt时,文字打点或截断展示。



组件

组件的使用场景有很多今天借一个例子来分析和总结,让大家了解和认识组件的使用和规范。

那就来个最基本的:顶部栏设计

  • 组成

  • 变化

  • 交互方式

来认识组件的模式和规则


顶部栏的常见样式


顶部栏是什么样子,它由什么组成?

通常,顶部栏提供有关此页面总体的信息,以及用户可能对该页面进行的潜在操作。常见的顶部栏如下所示:

顶部栏中常见的组件包括:标题、容器、操作项、导航图标等,接下来为大家逐一介绍各个组件的使用。

顶部标题通常与底部导航一起使用,共同解释页面的信息。

如果一个页面中底部导航只有图标没有文字解释,用户有可能不了解图标的意思,那么解释页面信息的重任就落在了顶部栏的标题上。

大多数情况下,标题位于顶部栏的中间,有时也会在左上角有一个很大的标题作为导航(IOS应用中)。除了解释页面的目的,大标题还可以用于品牌推广。

标题也可以解释用户在这个页面上执行的操作。例如,当用户想修改个人资料时,标题会显示“edit profile”,用来解释操作。

有时,在顶部栏主标题的下方会有补充文本,这样方便为用户提供更多的信息。

容器的趋势越来越不明显容器通常是灰色或者不饱和的颜色,有时容器也会使用品牌主题色,起到宣传和推广品牌的作用。

操作项通常以图标和文本按钮的形式出现在顶栏上 ,当需要时可以在顶栏上显示0-4个图标或文本按钮。

在不同的页面中操作项可能代表不同的含义,但一些常见的图标/操作遵循着一定的规则:


1、返回:当用户进入第二/第三层级页面时,“返回”通常出现在左上角。单击“返回”图标可引导用户回到原始页面。

2、关闭或取消的位置不固定,可以在左侧也可以在右侧,具体取决于是否有其他操作。


这里讨论一个常见的问题,顶部栏中“返回”和“关闭”分别应该在什么情况下使用:使用“返回”:当用户在一个漫长的探索过程中需要不止一步的操作,或者在该页面上没有一个简短而明确的目的时。使用“关闭”:表示一个完整的单页操作,它有明确的起点和终点,在页面上执行特定的操作实现特定的目的。


3、个人资料或帐户有时会出现在顶部栏上,以方便用户编辑个人信息,设置或切换帐户。

4、添加或搜索可帮助用户浏览更多内容或者扩展他们感兴趣的区域,通常出现在右上角作为易触摸的目标。


需要注意的一点是,为了避免引起不必要的关注,顶部栏上的图标/文本按钮通常是线性图标而不是填充图标,并且是非饱和颜色除非它们确实想吸引用户的注意,或者为了提示用户进行操作。


搜索顶部栏 

使用App时我们会发现,有的页面顶部栏中没有标题,而是增加了一个搜索框(淘宝首页)。

根据特定的需要,可以将搜索用在不同页面的顶栏上,因为它在用户浏览内容时为用户提供了更多的价值。

什么时候放弃使用顶部栏?


当顶部有很多内容时,一些App会让顶部栏变得非常简单甚至完全舍弃。

在Robinhood顶部显示最重要的用户信息——每日投资增长,右上角只有一个提示文本按钮,用来邀请好友。


放弃使用顶部栏的常见案例是个人资料页面这样做的目的是自我暗示,这个页面自己可以掌控,个人信息在顶部占据了很大的空间。


 

顶部栏的交互模式

一个页面中可以有很多交互发生,有时顶部栏需要通过改变样式或内容来反映交互动作。

反映滑动位置 


下滑出现顶部栏:当顶部栏有许多重要信息但又占用大量空间的情况下,顶栏的内容可能会根据滚动位置而变化。当用户下拉页面以获取更多内容时顶部栏会出现。

 

下滑隐藏上拉出现:另一种形式是在Google搜索中,用户向下滑动顶部搜索框会隐藏(Google猜测用户希望集中精力浏览内容),但是只要用户向上滑动,中止浏览过程,顶栏搜索框又会出现。


 


不管交互形式如何,这类顶部栏能在用户需要时快速显示:

  • 用户可以进行搜索功能或常见操作;

  • 标题/重要信息作为参考,提醒用户在哪个页面。


下滑隐藏顶部栏:对于那些不会影响用户需求和操作求的顶部栏,通常会随着页面的向下滑动而隐藏。



星巴克顶部有一个令人愉快的问候语,当用户向下滑动并尝试选择要喝哪种咖啡时,它会随着页面滑动而消失。

Airbnb会在顶部展示房屋图片,以便给用户留下深刻印象,但是当用户向下滑动时,顶部的图片也会跟着滑动。

 

反映当前页面的变化 


有时,顶部栏的信息会根据内容的变化而实时发生改变。

最常见的案例是收到消息时的反馈:在微信中,顶部标题会显示用户收到信息数量的变化;Instagram通过顶部小红点的变化来展示收到的消息。

交互式顶部栏

作为页面中必不可少的一部分,交互式顶栏减轻了页面中其它元素的负担。除了常见的图标或文本按钮(添加、取消、后退)的变化,在顶部栏中还会发生哪些有趣的交互?


互动标题 

有的产品服务非常依赖于用户的偏好、位置,例如常见的外卖或打车软件。

在这种情况下,App通常依靠用户的初始输入来决定显示的内容,用户也可以直接在顶栏标题上编辑信息。

交互式图标/文本按钮 交互式图标/文本按钮意味着用户可以在顶部栏上执行某些操作,而不必离开此页面。在robinhood中用户可以在不用切换页面的情况下,直接选择购买股票要用的计算方法,或者把页面上的股票添加到自己的收藏中。

顶部导航 

有的App希望一个页面中能显示多个平行的内容,所以会在顶部栏上设置多个选项,实现更方便的导航。

常见的顶部导航包括分段控件和标签导航:

分段控件导航选项一般不支持左右滑动,选项较少,;标签导航选项的设计更多样,支持左右滑动切换。

https://www.xueui.cn/experience/app-experience/top-bar-ui-design-patterns-and-rules.html

研究过程可能会花费很多的时间和精力,却能让我们真正受益。


总结

一致性设计大方向为产品有更杰出的体验,在保证用户体验良好的同时,我们需要与同类产品做出差异化竞争设计,这就需要我们平时多观察互联网设计趋势,国外设计趋势,集合自己品牌去打造一套好用的产品。


这里推荐几个必看的大厂设计规范官网,建议收藏。

苹果iOS设计官网:https://developer.apple.com/design/human-interface-guidelines

谷歌Material Design设计官网:https://material.io/design

微软Fluent Design System设计官网:https://www.microsoft.com/design/fluent

IBM设计官网:https://www.ibm.com/design/language

Facebook设计官网:https://design.facebook.com

蚂蚁金服设计官网:https://ant.design/index-cn


其实,规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化,又要在设计的过程中给用户制造惊喜。比如,整个UI的配色和字体需要保持统一,但在一些图形,动效上可以做出亮点,让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程。


文章来源:站酷  作者:黑狮力

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

如何让你的图标具有说服力?

资深UI设计者

作为一名UI设计师,图标设计是我们刚入门就必须学会的必备技能之一,它是用户界面中绝对不可或缺的元素。通常我们理解图标设计的含义,是将某个概念转换成清晰易读的图形,从而降低用户的理解成本,提升界面的美观度。随着扁平化设计风格的普及,图标的风格越来越简约,看似简单的图形,实际要准确的表达含义,也是需要注意很多细节的,在如今大同小异的图标中,如何让你设计出的图标具有说服力也是一门学问,今天就给大家全面的剖析一下图标的知识,让你做出的图标有理有据。




目录


1、图标的定义及分类

2、图标的设计规范

3、图标的性格走向

4、图标的评判标准

5、总结



一、图标的定义及分类


1、图标的定义

图标是具有高度概括性的、用于视觉信息传达的图像。图标常常可以传达出丰富的信息,并且常常和词汇、文本搭配相互搭配使用,两者互相支撑,或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。

在数字设计领域,图标作为网页或者UI界面中的象形图和表意文字而存在,是确保界面可用性的基础设施,也是达成人机交互这一目标的有效途径。



2、图标类型(基于功能划分)


2-1释意性图标:

释意性图标是用来解释和阐明特定功能或者内容类别的视觉标记。它并不是一定被点击可交互的UI元素,在很多时候只是有辅助解释其含义的文案。在不搭配文本的情况下用户会借助这些图标来获取信息。不过有时候图标表达的含义可能还不够完整或者清晰,所以会将图标和文案搭配起来一起使用,这样可以大大降低误读的可能性,释意性图标一共可以分为以下三类:


2-1-1纯图标:

例如火球买手APP中的店家“特定标签”,以及图文展示下的“观看数量图标”与“收藏图标”,它们并不需要用文字去解释,用户也知道它表达的是什么。




2-1-2图文结合:

例如造作APP中的“购物车图标”与“收货地址图标”,为了让用户能够很好的明白图标的意图,所以在图标下方会配有文字提示,这样就能大大的降低误读的可能性。



2-1-3纯图标(图标内含文字):

例如开眼APP中视频封面左上角“开眼精选图标”,它把图标与重要文字结合在一起展示给用户,看起来不仅十分具有个性,而且用户对其理解性也非常强。



2-2交互性图标:

交互图标的最大意义在于可以引导用户进行交互行为,是在产品中不可或缺的组成部分。它们可以在用户不同的操作手势下帮助用户执行不同的交互过程,这种类型图标也是APP中最常见的,常见的交互性图标如:搜索、底部标签、返回、点赞、收藏、扫一扫等。



2-3装饰性图标:

装饰性图标仅仅是用来提升整个界面的视觉体验,它并不具备任何功能性。这类图标往往是为了迎合用户的偏好与期望,通过丰富视觉体验的方法来增加内容的观赏性,这样不仅可以吸引并留住用户,还可以让整个用户体验更加积极,最为大家所熟悉的就是滴滴出行APP中的“小车图标”。




3、图标类型(基于基础样式+表现手法)

图标基于基础样式(线、面、线面结合)+表现手法(颜色、透明度、投影、叠加...)划分,一共可以分为20种类型,每种类型的展示方式也都各有不同。


3-1线性图标(6种)

线性图标通过线来塑造轮廓,在界面中App的图标尺寸并不大,所以如果线过于复杂,在小面积中过多的线会对识别性产生较大的困扰。在图标设计中使用的线有粗细之分,常用的App图标设计线的粗细一般有2PX或者3PX,不同的线条粗细所带来的视觉感受也不同,细线显得精致,粗线视觉面积大,显得厚重。



3-2面性图标(6种)

面性图标是通过面来塑造形体的图标,采用了剪影的设计形式,通过线或者面去切割基础轮廓面,通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。



3-3线面结合图标(6种)

线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说,由于元素的多样化,设计更容易获得好的效果。相反,如果运用不当会显得图标非常杂乱,如何有效的把控好两者之间的过度是关键。



3-4拟物化图标

这类图标的特点是通过细节和光影还原现实物品的造型和质感,能给用户极强的代入感,用户可通过对现实事物的联想,快速领会图标表达的意图。但是随着 ICON 的发展,拟物图标也带来了一些问题,因为用户关注的核心永远都是信息本身,华丽的视觉元素或许在用户使用的初期,起到赏心悦目的装饰,但久而久之,这都将成为对用户获取信息的一种干扰,所以现在拟物化的图标很少运用在APP界面之内。



3-5轻质感图标

相较于拟物风格不会有太多复杂的视觉元素,层次简单,用色素雅干净,采用轻投影、轻渐变的方法设计,这类图标具有一定的立体感,能给人轻盈、简洁、精致的感觉,在界面设计中,一般在面积比较大的区域我们会使用加入轻质感的图标。




二、图标设计规范


合理的遵循图标规范可以有利于设计师之间合作使用,指导设计师如何规范的去设计图标,以确保企业所有产品图标风格的一致性和可用性达到统一,同时也是为了后续产品更新迭代有可参考的地方。


1、图标尺寸

为了保证图标的尺寸大小一致性,我们往往会建立基础的网格尺寸来进行绘制图标,常用的网格绘制尺寸为:16、24、36、48、64、128、512、1024。这些尺寸并不是固定的,在设计中也会存在特殊的尺寸,例如谷歌在台式机上设计图标,当鼠标和键盘是主要输入方法时,就会使用密集布局,基础网格就会缩小到20。

下面就以常用的24x24为大家展示:



网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域,同时还能够很好的平衡图标的视觉重心。



*在使用常规图标时避免一部分在出血位。



*在使用多个元素的图标时,避免图标拥挤我们可以让其部分出现在出血位,确保它们之间有足够的空间。



2、图标的keyline

keyline由圆形,正方形,矩形,正交,三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易,并有助于在设计相似比例的图标时有共同的参考准则。


在24尺寸下的keyline构成如下(24尺寸下的出血区域为2):



当把图标画在网格上时可以很好的规范图标,让它们从整体的视觉上看着统一规范。



3、像素


3-1像素统一

在设计一整套系统化的图标时,我们一定要注意图标的像素大小,要运用相同的网格尺寸设计相同线条粗细的图标,包括曲线,角度以及内部和外部笔划。这样图标看起来才更统一,也有利于后期图标的迭代更新。



当然,描边像素的粗细并不是绝对的,如果我们要做一些密集型的图标时,可以考虑适当的缩小线的像素大小。如下,我们设定的系统图标线条粗细为3px,当你用3px作用于指纹图标上时就会显得非常拥挤,并且在视觉上比其余图标更重,这时我们就可以把它的线条像素降级,设定为2px。



3-2避免小数位

我们在用矢量工具绘制图标时,要仔细看好图标的网格尺寸和图标结构尺寸,避免产生小数位。



4、图标的曲率

曲率简单来讲就是图标中带有圆角的边角度数,只要是带有圆角的矩形就都会有一定的曲率。在图标中曲率的呈现方式有两种:外曲、内曲。



外曲与内曲并不一定同时存在,在特定情况下内部结构可以是直角(无曲率)。如下图:当内部结构都是圆角时会发现整个图标稍显臃肿,这时我们可以把部分内部圆角直接变为直角(也可以改变曲率大小),改变后就会发现图标的整体结构会显得更加协调。需要注意的是如果一个图标做了这样的处理,在同等情况下的图标都要做一样的处理,不然图标会显得非常杂乱,不统一。



5、倾斜角度

根据像素的网格线来设置两条对角线,会让你的图标看起来更清晰。在倾斜的角度选择上,不要出现7.8°、14.2°这样的奇怪数值。我们可以将15°的增量用于倾斜角度(也可以采用其他有规律的角度方案),这样会使得整体的图形变化显得更加规律,也能够满足不同图形的角度需求。




6、断点形态

在做很多图标时都会用断点的缺口来打破“全包边图标”的沉闷感,使图标具有透气性,如果想给图标添加断点,那么要保证断点的形态保持一致。



7、图标间距

确保图标内每个细节和元素都有足够的空间,图标的相邻元素之间的空间在整个图标中不应太小,我们可以定义最小间隙以避免轮廓“粘住”,在24px尺寸下的间距不得小于1px。



8、透视

如果在做图标时牵涉到了透视需求,那么就一定要保证图标的透视角度一致。



9、视觉重心

非中心对称图形物理对齐时视觉上会有偏离感,多个不同形状的图标视觉重心并不在一条水平线上,需要微调才能保证平衡感。



10、图形整洁

在图形的处理上,不要留有多余的节点,干掉多余的节点,保持图形的整洁。



11、命名

ICON命名要求较为严格,涉及到我们切图给开发,所以我们命名争取做对,且需严格遵守规则,正确的命名原则:类型_位置_功能_状态_大小




三、图标的性格走向


每个App应该有自己独特的产品气质,同样图标性格也应当与产品气质保持一致。图标性格一共分为了4个走向:粗旷(粗直)、活泼(粗圆)、商务(细直)、精致(细圆)。



1、粗旷类图标

图标结构特点:线条较粗(或面性图标、线面结合图标)、拐角为直角。

粗旷类图标让人看起来非常饱满、刚正,它更多适用于男性、潮流、有格调类型等产品中。例如VSCO,它的底部标签栏图标全部采用了粗线条的直角设计。



2、活泼类图标

图标结构特点:线条较粗(或面性图标、线面结合图标)、拐角为圆角。

活泼类图标让人看起来十分容易接近,能让人感受到温暖、舒适,它更多适用于电商、社交、母婴、二次元、娱乐、直播、美食等产品中。例如闲鱼,不管是在LOGO字体的处理还是APP内部的图标处理,都是采用了线条较粗的圆角设计。



3、商务类图标

图标结构特点:线条较细、拐角为直角。

商务类图标让人看起来十分规矩、严谨、值得信赖,它更多适用于新闻、政府、商务、工具等产品中。例如工具类的思维导图APP,它的可操作按钮都是商务类的图标。因为这类图标的特性,所以目前我们很少在移动端上看到它,它更多适用于PC端的后台界面中。



4、精致类图标

图标结构特点:线条较细、拐角为圆角。

精致类图标让人看起来非常干净、柔和、显得高级感,它更多适用于旅游、品、艺术、领域垂直等产品中。例如airbnb,在APP应用中大部分都采用了精致类图标。




四、图标的评判标准


当图标设计完后,我们应该如何去评判一个图标的好坏?很多设计师并没有完整的评判体系,其实我们可以从这五个维度对图标进行评判:识别性、图标气质、协调性、一致性、品牌调性。


1、识别性

图标最主要的用途就是辅助用户理解信息,特别是对于当图标单独存在时,一定不能让用户产生疑虑。要想图标达到高识别,我们可以从这2个方向入手:大众认知隐喻、真实世界映射。


1-1 大众认知隐喻

在互联网普及的今天,许多界面的隐喻图标已被广大用户熟知认可,对于这类隐喻图标用户不用思考身体就已做出反应,我们在设计图标时可以从隐喻图标中添加修改部分元素,从而形成新的图标,这样既能保证图标的识别性,也能做出差异化。




1-2 真实世界映射

选择真实世界中的物品映射,能使人下意识对图标的作用有近似预期,降低学习成本,提高识别度。




2、图标气质

每个App应该有自己独特的产品气质,而我们所做的图标就是要跟随产品的气质。例如当你要做一款二次元产品,你的图标气质就应该偏活泼、可爱、萌、青春,而不是刚硬、严谨、规矩。



3、一致性

一致性是图标的基础,我们在绘制整套图标时要确保它们的基础属性全部一致,细节统一,图标内容的统一在视觉上也更加和谐美观。图标是否具有一致性,就要从以下七个方向去评判:尺寸大小、图形角度、拐角(曲率)、描边、间距、透视、颜色。


3-1 尺寸大小:网格大小是否统一、是否遵守图标的keyline规则。


3-2 图形角度:是否遵循设定的角度规范(15°的增量用于倾斜角度)


3-3 拐角(曲率):拐角的曲率是否统一,如果图形太多且复杂,那么我们可以根据图标的特性去设定曲率的规则,例如可以设定当边角像素在1-2px时内外曲率为2px;当边角像素在3px时内外曲为2px,内曲为1px;当边角像素大于或等于4px时,外曲为2px,内部则为直角。


3-4 描边:描边大小是否一致。


3-5 间距:是否遵守间距规范。


3-6 透视:透视是否一致,避免在同一套图标中出现正视图/侧视图混杂的情况。


3-7颜色:在图标的配色上要保持一致的规律,采用相同的颜色是比较常见的配色方式。如果采用不同色相的配色方式。也需要保持整体的配色协调,避免出现饱和度、明度反差过大的配色。



4、协调性

一致性代表的是图标的基础,而协调性则代表图标的整体状态,协调性的呈现状态是验证一致性是否合理的标准,当协调性存在问题时,我们就要反过来查看一致性存在的误区并给予修改。在图标的协调性上我们主要审视这三点:视觉大小、饱满度、透析感。


4-1 视觉大小

视觉大小对标的是一致性的尺寸大小与描边大小,当你发现图标视觉大小不对等时,你就要回过去查看你的网格与keyline是否运用正确,确保正确后再查看你的图标是否按照keyline的规范绘制以及描边大小是否一致。(同样尺寸下的图标,从光感上来看描边粗的图标视觉偏大)



4-2 饱满度

饱满度对标的一致性的间距,当你发现图标不够饱满时,你就要去查看你设定的间距值是否偏大,是否合理。



4-3 透析感

透析感简单来说就是留白区域。透析感对标的也是一致性的间距,当元素的描边过大时,我们就要合理的设定间距的最小值,不然整个图标就显得非常臃肿。



5、品牌调性

品牌调性是我们经常提到的纬度,我们打开很多APP都会发现他们的图标设计都非常普通,没有任何特色,过于大众化,虽然都做了一些形式上的改变,但总是与品牌缺乏联动性。其实我们可以结合品牌调性,在图标上做更多的联动、创新。


5-1品牌颜色

色彩是图标设计中重要的构成元素之一,我们可以直接提取品牌色作为图标设计视觉元素。例如站酷,站酷的品牌色是黄色,标签栏的图标(选中状态)就提取了品牌的黄色,让其与品牌调性高度一致。



当然品牌颜色除了可以直接用外,还可以在提取时适当调整色彩的饱和度、明度,做更多的形式变化。例如懂车帝,就在原有的黄色基础上做了些许调整,图标采用黄色透明渐变的处理方式,在与品牌颜色呼应的同时,使得整个图标更加精致、有活力。



5-2品牌LOGO

提取品牌LOGO是最常用的使用方式,我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面,也是进入APP默认的页面,把首页图标替换成品牌LOGO,能反复加强了用户对App的logo印象,这样不但使App内外形成了视觉联系,同时也二次传递了品牌形象。例如大众点评,它的首页标签就用了品牌LOGO。



5-3品牌元素

我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播,它就提取了品牌卡通形象的外轮廓作为首页图标。



品牌提取的元素并不只是所见到的品牌视觉形象,还可以提取与品牌内容强相关的元素。例如QQ音乐,就把音符作为首页图标。



5-4品牌名称

如果你的品牌还不为大众所熟知,那么为了强化用户对品牌名称的认知,可以把品牌名称直接放入标签栏中。例如MONO,就把它的名称分为四个字母分别放在了4个标签内,需要注意的是这类图标不能单独出现,因为它本身不具备引导含义,必须配合文字一起出现,这样才能让用户能易理解。



5-5品牌性格

图标风格可以与品牌性格保持一致,一套带有浓厚品牌感的图标,会让人记忆犹新。例如:每日故宫,它的图标就非常具有特色,结合了品牌的性格以及定位,加入了众多的古代中国元素,整体看起来有股浓浓的古韵之风。



5-6吉祥物 

如果品牌中含有吉祥物,我们可以提取吉祥物的外形,把它用于产品的图标中。例如盒马,它就把盒马的吉祥物做了风格化的处理,放于APP的首页标签。




五、总结

设计师对自己做出的所有设计都必须要有理论支撑,图标也不例外,一套优秀的图标是设计师不断沉淀的结果。看完本文章后,如果大家想要去练习图标,建议找大厂的图标放在keyline里临摹,真的会让你收获不少。


文章来源:站酷  作者:黑狮力

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

头像在界面设计中的运用

资深UI设计者

大约在 3 年前我就注意到像 Facebook 等国外社交 App 在大幅度使用头像。比如明明文字就能表达的地方,偏偏要塞下几个小头像。这个现象我琢磨好久,直到我最近在自己参与的项目中也尝试着加入头像,发现数据非常好看,因此和大家分享一下这个成果。

案例实战!聊聊头像在界面设计中的运用

理论

在没有进行实践之前,我尝试从理论中寻找原因。

视觉传达

头像视觉面积更大、颜色更丰富,比文字更吸引人的注意力。

面孔识别

之前在网上流行过把微波炉竖着放,就特别像笑脸的事件。为什么有两个圆圈一道弧线的图形会被当作人脸的微笑?

案例实战!聊聊头像在界面设计中的运用

科学界对此早有研究,把这种误把具有脸特征的视觉图形当作人脸的现象称为“空想性错视(Pareidolia)”。

早在 1952 年,生物学家赫胥黎(JulianHuxley)就已提出空想性错视源于人类演化的过程。他认为在人类漫长的进化过程中会遇到各种危险,残暴的野兽和同族的人类都具有“脸孔”。对“脸孔”的识别越快,就能让我们在复杂的环境中快速识别潜在的危险或盟友。久而久之,随着人类进化就衍生出与生俱来对“脸孔”的辨识能力。

通过现代科技研究发现,在人类大脑中,梭状回面孔区(right fusiform face area,rFFA)主要负责人脸的认知。它能整合经视皮层处理的视觉刺激,让我们快速识别人脸。有研究发现,只需 130ms 面孔可以被检测到。

案例实战!聊聊头像在界面设计中的运用

很显然,在界面设计中,因为大多数人的头像也具有“脸孔”特征,因此能很快地被用户注意到。

光晕效应

心理学家研究发现,人在观察事物时,并不是对事物部分属性孤立观察,而总是倾向于把具有不同属性、不同部分的对象作为一个统一的整体。格式塔原理即是这一特征的反映。

案例实战!聊聊头像在界面设计中的运用

这个原理不仅作用于视觉,人对其他人的观察也是一样。我们在互相多次交往后才发现和第一印象偏差很大。因为第一印象只是这个人的部分特征,并不完整。大脑会倾向于根据这些部分特征脑补出完整的人,长得漂亮的人会被认为聪明善良,着装正式的人看着技术更专业即是如此,这种被某个亮眼的特征所笼罩,让你脑补完整属性的情况称为光晕效应。

案例实战!聊聊头像在界面设计中的运用

因此抠脚大汉用美女头像能骗到部分男人就见怪不怪了。

基于以上 3 点分析,用户会认为头像背后的就是活生生的人类。

实践

在理论分析后不久我刚好得到了一次实践的机会。在我们的在线问诊 App 中促使用户购买医生提供的治疗方案是核心目标之一,最开始我们的医患沟通界面和闲鱼类似,分为对话和服务卡片两种信息。

案例实战!聊聊头像在界面设计中的运用

通过用户访谈我们发现患者非常在乎医生的回复内容(因为花钱买的就是医生的内容),但是却表示没有注意到治疗方案卡片。我猜测是由于治疗卡片并不像医生提供的内容,更像是我们系统推送的某种广告,因此被用户忽略。于是我做了一个非常小的改动,将治疗方案卡片用医生对话回复的样式包起来,并增加一句文案。患者能正确理解治疗方案也是医生提供内容,结果治疗方案的购买率有明显提升!

案例实战!聊聊头像在界面设计中的运用

增加一个医生头像和聊天气泡,下一步转化也有明显增长。

案例实战!聊聊头像在界面设计中的运用

通过这两次实践团队成员开玩笑说这是“加头像数据就会上涨的方法论”,奈何我们几个词藻有限不能再做更高程度的包装。不过以上案例确实是很好的利用了视觉传达、面孔识别和光晕效应的原理。

扩展

以上实践都是增加对方的头像,那界面上展示用户自己的头像又有什么意义呢?团队成员通过探讨得出以下观点:

1. 切换多账号,避免登错号

有些公司职员需要打理公司的社交网络账号同时也有自己的账号,甚至还有另外的小号。如果一不小心登错号发错内容,可能会导致社会性死亡。推特 App 在发布界面显示自己的头像点击可以切换不同的账号,能有效避免这些问题。

案例实战!聊聊头像在界面设计中的运用

2. 头像让我发言更注意自身形象

自己的头像是自己现实人格在网络上的映射,看着自己的头像在输入框旁边,发言时难免会有“这是我在说话”的潜意识。因此在发表内容时会注意自己的措辞,维持自己的身份形象。同理,如果做匿名社交,在输入框旁边放上匿名头像,也让用户觉得自己带上了面具,发言更肆无忌惮。

案例实战!聊聊头像在界面设计中的运用

3. 头像更像沟通

如果在别人的帖子下面发表评论,有头像更像是你和帖子的作者进行平等的对话沟通,没头像就显得你在芸芸众生中仰望作者。

案例实战!聊聊头像在界面设计中的运用


文章来源:优设  作者:龙爪槐守望者

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



B 端后台类产品的图表设计思路及方法

资深UI设计者

随着大数据的兴起,数据价值的不断挖掘,图表作为数据呈现与分析的有效手段,正扮演着越来越重要的角色。我们在进行 B 端平台设计时也在思考:如何让图表清晰的传达信息,同时带来美观的视觉感受。

为了达到清晰传达和视觉美观的目标,我们结合实际项目,进行大量探索及思考,梳理总结了一套适用于 B 端后台类产品的图表设计思路及方法,涵盖了曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型。

超多案例!B 端后台类产品的图表设计思路及方法

图表视觉层级

图表能够承载大量数据信息,同时视觉元素较多,如果只是凭借设计师的审美喜好进行视觉设计,没有整体信息读取考量,可能会导致重要信息未能凸显,降低用户读取效率。

超多案例!B 端后台类产品的图表设计思路及方法

为清晰传达信息,进一步提升读取效率,我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度,将图表元素分为三类,分别为“底层元素”、“中层元素”和“顶层元素”,并依据不同视觉强度分别设计三类元素。底层元素最弱,顶层元素最强。通过这种方法,梳理图表元素的前后关系,能够清晰把握元素视觉层次,保证信息传递效率。

超多案例!B 端后台类产品的图表设计思路及方法

1. 底层元素设计

在各类图表中,我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰,突出主图形,底层元素全部使用浅灰色进行设计。我们发现,当元素与背景颜色的明度对比在 1.2:1 时,人眼较难看到元素;当对比度在 2.0:1 时,视觉强度过强,易吸引用户注意力。通过元素视觉强度的调研及视觉尝试,最终确定元素与背景对比度在 1.6:1 左右,视觉强度偏弱但人眼能够看清的程度。以保证元素视觉不突兀,只在需要查看时可以被发现。

超多案例!B 端后台类产品的图表设计思路及方法

2. 中层元素设计

中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素,是图表中表达数据的关键元素。与底层元素相比,中层元素采用更低明度与更高饱和度的数据色来表现,使元素从页面中凸显出来,保证可读性。同时在样式上适当加入渐变、描边等样式,丰富视觉层次,带来美观的视觉感受。

超多案例!B 端后台类产品的图表设计思路及方法

3. 顶层元素设计

我们把顶层元素定义为图表高亮信息,内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出,使用深灰色、强调色等强对比度样式,并辅以动画、投影等手法保证明显的视觉强调效果,保证顶层信息最有效的传达给用户。

超多案例!B 端后台类产品的图表设计思路及方法

4. 最终效果

通过层级梳理,并绑定元素重要程度和视觉强度的方法,设计后图表主次信息均按重要程度进行对应视觉强度的展示,让用户能够在第一时间接收到最重要的信息,提升信息读取效率。

超多案例!B 端后台类产品的图表设计思路及方法

图表排版设计

图表排版是指各元素在图表中的尺寸及布局等,对于 B 端后台类产品来说,不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验?我们经过大量讨论推敲,梳理出一套针对 B 端后台类产品的排版规则,力求保证用户图表的使用体验。

1. 图表尺寸

图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大,例如巨量数据的图表挤在名片大小的区域例显示,这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型场景,并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸,针对不同尺寸优化图表的信息展示密度,以达到读取信息的目的。

“迷你图”尺寸最小,舍弃了 Y 轴等不必要信息,利用小面积展示最关键的图表信息,并控制数据密度,保证信息读取。

“中号图表”尺寸受限,限制坐标轴刻度数量和数据的密度,例如曲线图数据点不高于每 4 像素 1 个数据点,Y 轴坐标刻度不超过 5 个,以确保信息密度不过载,这类图表尺寸通常用在针对某大类内容进行多方面检视时。

“大号图表”尺寸最大,不限制数据信息密度,给予最全最详细的展示,这类尺寸通常用在数据详情页等详细分析场景中。

最后考虑到多图表混合排列时,饼图、地图等大面积填色图表,相较折线图等描边型图表,视觉感受更加膨胀。我们缩小了填色类图表的实际高度,保证多种图表混合排列时,视觉感受的均衡。

超多案例!B 端后台类产品的图表设计思路及方法

超多案例!B 端后台类产品的图表设计思路及方法

2. 坐标轴

坐标轴在图表中出现的频率较高,那么坐标轴常见的设计问题有哪些呢?

第一是横纵坐标轴的刻度出现过密情况。

如果坐标轴所承载的是连续数据(连续数据指可量化的,连续不断的,在区间内可任意取值的数据,如时间、金额、人数等),设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据(离散数据指不可量化的,无关联的,不可在区间内任意取值的数据,如分类、软件版本、省份等),可采取增加坐标轴缩放功能解决。

第二个常见问题是刻度的说明文字过长。

如果是 X 轴(横轴)文字过长,除了在可控范围内减少刻度,还可采取文字倾斜 45°~90°的办法(如文字全部为中文,可用竖排代替倾斜 90°),缓解信息过密看不清的情况。

如果是 Y 轴(纵轴)文字过长,需联合研发一起调整数据的单位,比如把“元”调整为“百万元”。

如果不能调整,那就要根据所使用的图表库有针对性调整。例如常用的 Echarts 图表、D3 图表等开源图表库,需要提前预估刻度文字长度并预留出来,否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是 AntV 等可自适应的图表库,则不必提前处理,图表库会自动按刻度长度进行整体调整。

超多案例!B 端后台类产品的图表设计思路及方法

3. 图例

图例作为图表中不可或缺的部分,在各类图表库中位置不尽相同,由于不同图表样式差异很大,图例的位置需整体考虑并适当布局摆放,但在同一产品或页面内,过于随意的摆放图例,会导致页面统一性较差,同时增加用户的浏览成本。我们团队所负责的 B 端商业产品矩阵,作为面向用户的产品集合,产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题,我们基于业务特点,针对 B 端商业产品矩阵制定了图例布局指导原则。

我们以提升屏幕信息密度为目标,分析不同场景的页面排布,制定了顶部和右侧两种较为宽松的指导原则,供设计师在没有明确的更优方案时选用。

当图表是左右两端对齐的类型,例如折线图、柱状图时,建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一排布,减少占用空间。当图表本身左右都有空余空间时,例如饼图,建议将图例放置于图表的右侧。也能够节省页面的空间。

超多案例!B 端后台类产品的图表设计思路及方法

数据色板设计

色板作为常见的数据表达手段,能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工具。我们经过大量探索尝试,梳理总结出图表色彩的两个关键维度:辨识度与统一性。既需要颜色间突出强烈可清晰辨别,又需要颜色整体能形成统一风格,以达到清晰传递和美观的目标。如何平衡辨识度与统一性,是我们遇到的难题。

超多案例!B 端后台类产品的图表设计思路及方法

1. 辨识度

辨识度在图表中有两方面:颜色与页面底色的辨识度,各颜色之间的辨识度。对于第一种,我们采用控制颜色的明亮程度来确保色彩辨识度,尤其对于黄色、青色等本身较亮的颜色,降低颜色的明度,确保在浅色背景下颜色可辨识。

对于第二种也就是各颜色之间的辨识度,通过实验发现单纯的颜色色相变化,例如红色与橙色的区分,人眼不容易分辨。所以采用了色相变化+明度变化的方法,即深红色与亮橙色,深蓝色与亮紫色等,这样用户能在第一眼就明确分辨,保证颜色间的辨识度。最终把颜色映射到色彩空间的三维坐标中,运用欧几里得距离公式测算颜色间的距离长短,来衡量各颜色间色差数值。颜色间距离越远代表色差越大,利用数据辅助衡量辨识效果。

超多案例!B 端后台类产品的图表设计思路及方法

2. 统一性

色彩统一性的作用在于确保图表整体风格一致,色彩搭配舒适,从而带来美观、统一的视觉感受。为达目的,我们首先提炼商业产品设计风格为明亮、强对比,其次把设计风格转化为色彩数值。经过实验,把颜色明度限制在 50%-70%,把饱和度限制在 75%-85%,并在区间内不断波动。这样既保证了色彩视觉感受的统一,各颜色间又能够有清晰的辨识度。

超多案例!B 端后台类产品的图表设计思路及方法

3. 颜色量化与工具

量化颜色,将色彩转化为数值,利用数值来验证设计师的「感觉」,能够保证方案合理性,保证设计质量。但通过尝试,我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料,我们最终决定以小众的 HCL 色彩模式来衡量色彩。其中 H 表示色相、C 表示饱和度、L 表示明度。HCL 区别于传统的 RGB 或 HSB 模式,它能够将人眼对颜色的感知的量化为数值,例如黄色相比蓝色明度更高,都能如实的反馈到数值上。也由于此特性,HCL 模式在诞生距今不到 20 年间,已被一些先锋设计师用于数据可视化的呈现中。

超多案例!B 端后台类产品的图表设计思路及方法

但是 HCL 作为小众色彩模式,目前设计软件鲜有支持,造成了 HCL 色彩不直观、不方便调色等的问题。为解决此问题,我们已初步完成智能配色程序,只需输入品牌色,就能自动生成图表色版,并在风格上与品牌色匹配,达到整体色彩的统一。我们也将一套调配好的色板及 HCL 实用小工具附在文末,帮助大家直观的查看和使用 HCL 模式颜色。

结语

数据价值就像不为人知的宝藏,隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙,是发掘数据价值的强有力武器。通过对图表的不断探索优化,我们希望能够最大化数据的价值。通过图表,让数据最直观的展现;通过图表,让其背后的规律浮出水面被人探知;通过图表,让 B 端不再有难懂的数据。

附:色板及 HCL 工具

超多案例!B 端后台类产品的图表设计思路及方法


文章来源:优设  作者:百度MEUX

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


为什么短视频难逃【单列沉浸式】的真香定律?

资深UI设计者

编辑导语:如今可以说是短视频时代,各种短视频平台充斥着我们的娱乐生活,在如此快节奏的时代,碎片化的时间刚好可以被短视频满足;本文作者分享了关于短视频【单列沉浸式】的分析,我们一起来看一下。

谁能统一短视频领域?

抖音?快手?还是视频号?

目前来看,这个答案是【单列沉浸式】。

准确来说,单列沉浸式不是一款产品,而是一种产品形态。

过去这一两年,抖快两极越发明显,格局变化不剧烈的短视频领域发生的一个还算比较明显的变化是,所有的短视频都开始在产品形态上向抖音看齐了。

包括快手、微信视频号,甚至微博小视频,主流的短视频产品都已经全面拥抱单列沉浸式。

为什么短视频难逃【单列沉浸式】的真香定律?

图:抖音(左1)、快手(左2)、视频号(左3)、微博(左4)

这是不是可以证明单列沉浸式就是短视频消费的最佳形态?

无论是成熟的老产品快手和微博,还是初出茅庐的新产品视频号,为什么短视频难逃单列沉浸式的真香定律?

如果要找一个正确的角度去切入,主要包括三个维度:

  • 单列沉浸式更加适合短视频消费;
  • 单列沉浸式让用户消费的时长增加;
  • 单列沉浸式的商业化更加理想;

01

单列VS双列,沉浸式VS非沉浸式,到底区别在哪?为什么说单列沉浸式是更加适合短视频的消费呢?

短视频是高度碎片化、kill time式的消费,这个消费有个非常大的特征,就是无脑,也就是用脑成本极低。

为什么短视频难逃【单列沉浸式】的真香定律?

图:系统1(左)、系统2(右)

我们在刷短视频的时候,大部分时间是处于左边的系统 1 状态,是快速的、本能的、自动化、情绪化的大脑工作状态,用脑成本低。

为什么同样是2个小时,明明可以完整看完一部电影,很多人仍然选择用短视频来消费?就是因为看短视频不需要动脑,只要被动的接受平台投喂的多巴胺、肾上腺素和荷尔蒙,产生愉悦感就好。

长短视频获得的快乐自然是不一样的,长视频虽然也大量充斥着价值极低的内容,但普遍认为长视频的内容价值远远高于短视频;因为长视频是比较完整、系统的去阐述,比如说长时间铺垫后的高潮、明线暗线的多方交织、一波三折、高潮迭起的情节等;而这些更加高级的价值感都是需要大脑去思考、分摊到时间上面才有意义的。

用户在看长视频是相对高唤醒的状态,在看短视频是相对低唤醒的状态。

单列沉浸式是更加完美的契合这种无脑状态的,因为它的消费成本更低、体验更好。

02

首先是单列相比较于双列,是更加短平快的消费方式,可以减少用户的思考、选择和操作。

在单列中,用户切换视频只需要上下滑,播放完自动切换甚至无需成本;而双列中,用户需要返回重新选择并点击观看;切换视频的成本,双列高于单列。

为什么短视频难逃【单列沉浸式】的真香定律?

图:单列消费路径(左)、双列消费路径(右)

短视频因为时长极短,意味着用户在单次消费的过程中会消费非常多的内容单元,每多消费一个内容单元,双列与单列的成本差就会进一步扩大,双列成本相对的就越高,单列成本越低。

因为单列消费路径短、消费成本低,在相同的时间内,单列比双列能够看到的视频数就更多,效率就更高。

当然,双列可以给用户更多的选择,提高系统整体的容错率,但是这个选择的收益本身就不大;因为短视频价值极低,时长又极短、消费成本极低,这代表着选择的ROI低、选错的成本也低。

不妨将选择的成本分摊到视频消费时长中,长视频因为时长很长就会比较划算且必要性强,而短视频因为时长极短就不划算且必要性弱。

而且现在推荐系统越来越准,在短视频的消费中比人的主观选择还要准,基本上是抹掉了选择带来的收益,还省了选择的成本。

所以单列是比双列更加适合短视频的。

而沉浸式为什么比非沉浸式更加合适,是因为沉浸式可以使用户更快、更好的进入视频情境之中;而忘记真实世界的情境,因为没有其它视频信息的干扰,能够让用户只专注于当前的视频。

为什么短视频难逃【单列沉浸式】的真香定律?

图:可对比视频号单列沉浸式(左)和单列非沉浸式(右)

抖音负责人张楠曾经将抖音的成功在消费端归结为“全屏高清、音乐、个性化推荐、传递美好”四个因素。

全屏高清其实对应的就是沉浸式的消费体验。

手机中的原生相机拍出来的视频就是全屏的,如果将一模一样的短视频放在不同的尺寸上去看,全屏效果无论是视觉冲击力,还是进入其中、身临其境的感受上都是最强的。

这说明全屏高清是当时沉浸式在视频尺寸和清晰度上体验最好的形态,到了现在,全屏依然是最佳,清晰度却已经变成了1080P甚至更高。

单列沉浸式的消费体验更佳、成本更低,且非常适合短视频这种无脑式的kill time消费,自然是最佳的消费形态。

同时,这种形态也是产品上瘾的基础之一。

03

为什么刷抖音会上瘾,停不下来,一刷不知不觉就一两个小时了?

主要的原因可以归结为两个,第一个是用户持续无脑、愉悦的状态,跟短视频的内容有关;第二个则是因为单列沉浸式上下滑。

沉浸式的视频构建了专注的情境,让人忘了时间的流逝;而单列上下滑切换视频成本极低,切换时间极为短暂,这点非常重要;因为这意味着用户基本无缝切换视频,无脑、愉悦的状态不会因为切换而被打断;上下滑简单、不用思考,容易形成习惯,甚至是自然反应。

用户打开抖音不知不觉就继续看下去了,不喜欢就立即划走,像个快乐的魔盒,没有尽头,自然而然就上瘾了。

上瘾后用户时长也就增加了。

时长的增长可以看做是短视频目前阶段绝对的核心指标,首先是因为短视频本来就是杀时间的利器,时长代表着一切;其次则是因为短视频用户数量的增长已经趋缓,只能靠争夺时长来保持增长。

  • 时长增加,代表着平台给用户提供的价值增加,因为帮助用户杀的时间变多了。
  • 时长增加,代表着用户生命周期价值增加,因为可变现的时长也增加了,用户给平台贡献的商业价值就变大了。
  • 时长增加,也代表着打击了竞争对手,因为时长是绝对的存量竞争,人一天24小时是固定的。

这也是为什么那些原本不是单列沉浸式的短视频敢改版的原因,强推一个新的功能尚且要考虑用户的旧习惯、是否接受、学习成本如何,何况这是完全另一种产品形态。

单纯拿用户体验提高是无法有效说动的,因为没有数据去论证用户体验到底提没提高、提高了多少,大厂的产品运营都背着严重的KPI或OKR,但是用户时长的增长就是最有利的支持。

04

单列沉浸式对于平台商业化的贡献其实可以基本从单列的角度去分析,主要有两个层面:

NO.1 单列的变现效率远高于双列。

以目前最主流的信息流广告为例。

单列比双列消费的路径短、成本低,同样的时长内,单列比双列能够消费的视频总数更多,也就意味着可消费的广告更多。

更重要的是,单列的内容推荐完全由系统决定,用户无法选择,系统对流量可以做到100%的精准把控,决定推荐给用户内容就内容,决定推荐给用户广告就是广告;抖音可以做到让广告跟内容一样100%的曝光到用户面前,目前抖音基本上是每5个内容就插一条广告。

双列由于在消费路径上,还需要用户去选择点击观看,意味着转化路径多了一个环节:从瀑布流的图片封面到内容观看的CTR转化率。

为什么短视频难逃【单列沉浸式】的真香定律?

双列形态下,广告的CTR是不可能达到跟内容一样的。

据快手《2019快手创作者报告》披露,快手的内容CTR为20%,但是根据【乱翻书】对实际从业者的访谈,内容CTR和广告CTR的差距要比想象中更大,甚至达到5-10倍的差距,也就是广告的CTR可能只达到1%-2%。

当然,有人说双列因为有了用户主动选择来表示较为明确的需求,所以理论上是可以为每个点击收取更高的价格,类似于搜索广告的价格远大于展示广告,有没有可能正负为零,完全弥补曝光率的不足?

很大程度上是不可能。

双列仍然是展示广告,它跟单列的差距会在一个有限的范围内,搜索广告之所以点击价高出这么多;除了明确的意图带来的高匹配度之外,另外一个很重要的就是搜索是比较急迫的需求,急迫的需求+高匹配度才使得搜索广告的溢价高。

而日常我们刷抖音快手这些娱乐性质的短视频是没有这些急迫的需求的,是需要短视频平台展示的广告来切中或者激发我们需求的;这也是为什么双列形态下,广告的CTR达不到跟内容一样的原因,娱乐性的内容跟广告的内容是不统一的,用户的心理接受度也不会很高——用户上来是看包袱消磨时间的,不是买买买的,而人的主观选择也会趋向于避免广告。

那么单双列展示广告的点击价的高低就来自于命中需求的准确程度+展示效果了,准确率由推荐系统决定,关乎算法和数据;而数据的维度是来自于非常多层面的,不仅仅只是点击广告的数据,所以这方面就算有差距也很难说差距多大;而展示效果的话,单列沉浸式的【大屏+视频】的展示效果远高过双列下的【小屏+图片】。

所以很可能的结果是,单列和双列的广告点击价之差在一个合理的范围内,是很难完全抵消掉内容和广告CTR的差距的。

这样综合来看,单列的变现效率是高于双列的。

单列不仅增加了用户整体变现的时长,同时也提高了整体变现的效率,因为增加的变现时长不仅仅来自于新增的总用户时长,也来自于抢夺了其它消费形态下的时长;比如说快手的单列会抢夺双列的时长,而因为单列变现效率比双列高,所以也提升了变现时长在用户消费总时长中的比例,提高了整体的变现效率。

05

NO.2 单列双列会造成不同的内容生态,影响到公域和私域的强弱,进而影响到平台的整体变现效率。

单列相较会强内容、弱关系,因为单列完全是系统推荐什么看什么,容错率低,系统往往就倾向于推荐头部优质的内容;而双列就弱内容、强关系,因为双列除了系统推荐之外,还要用户主动选择,加强了整体的容错率,所以系统推荐的内容就会更加多元。

相较而言,前者私域弱、公域强,后者私域强、公域弱,而公域强才有利于平台变现。

公域强意味着平台对于流量的掌控权,快手老员工就在内部信中提到:

双列下kol的私域流量粘性太高太强势,很不利于我们把用户的arpu(每用户平均收入)持续做高(直播电商虽然现在势头很好,但本质是kol的私域流量太强,所以我们公域的短视频推小店效果不好),那么今年流量分配也要重新调整……

私域强是有利于平台创作者,公域强才能肥了平台自身,淘宝、拼多多和美团等超大型交易平台之所以收入这么高都是因为强公域,更好的掌握了流量的分发权,进而更的变现;抖音之所以成为超级印钞机,也是因为完全掌握了流量分发,公域能力极强。

单列可以将流量的分发权更加集中在平台的手上,提高了平台整体的变现效率。

或许是基于单列沉浸式在商业化上的这些优点,现在连以双列和中视频为主的B站都坐不住了,也开始加入单列沉浸式。

为什么短视频难逃【单列沉浸式】的真香定律?

图:B站的【单列沉浸式】

B站因为文化氛围好、私域强,无论留存还是用户时长都很理想,但就是整体变现效率低:双列下信息流广告不好变现,同时也为了文化氛围而束手束脚。

新开一个单列沉浸式可以说是创造了新的消费场景,同时也有助于提高变现效率。但中视频在B站的单列沉浸式的视频中占据着比较大的比例,未必会真香。

06

短视频之所以真香,归根到底还是跟短视频这种载体和消费场景密不可分。

短视频因为冲击强(体验好)、消费成本低,所以非常适合碎片化、kill time式的消费。

冲击强跟视频这种载体有关,视频比文字、图片的冲击性更强;

而消费成本低则跟时长有关,因为时长极短,所以消费成本极低,同时时间弹性也极高,又因为时长短,很难承载比较有深度、有价值的内容;再加上碎片化的消费场景,所以用脑成本极低,看短视频大多数时候都是无脑状态。

商业的进化必然是往体验更好、成本更低、更加的方向去进化,单列比双列、沉浸式比非沉浸式的体验更好、消费成本更低,更符合短视频碎片化、kill time式的无脑消费;

但B站的中视频已经有点脱离了这个场景,中视频已经可以承载一些有深度、有价值的内容,很多人在B站也并非完全是单纯的kill time,而是看财经、涨知识等,需要用脑思考,消费成本也比较高。

在这个场景下,双列的多选择、强容错就是有必要的,因为选择的RIO变高了,选错的成本也高了,所以B站做单列沉浸式未必会有短视频这么香。

当然,B站也可以学微博,单列沉浸式只展示短视频,无异于在内部开一个抖音,创造一个完全的短视频产品。

具体会如何,拭目以待吧;希望对你有帮助。



文章来源:人人都是产品经理  作者:顶尖产品思维

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



模态和非模态对话框的应用场景和规则

资深UI设计者

模态和非模态对话框是一种非常常用的用户界面元素,将用户的注意力转移到子任务上。那么何时使用,二者又有哪些区别呢?

模态对话框会打断用户并要求采取措施。当需要将用户的注意力转移到重要信息上时,它们很合适。


为了更好地理解模态对话框和非模态对话框之间的区别,让我们看看术语“对话”和“模态”的含义。

一个对话框(或对话)是指两个人之间的对话。在用户界面中,对话框是系统与用户之间的“对话”,通常会向用户请求信息或采取措施。


用户界面模式是特殊状态,其中同一系统具有一些不同的用户界面。每种模式可能带有不同的命令,或者相同的命令(或操作)可能会产生不同的结果,具体取决于系统的模式。换句话说,在不同的模式下,相同的输入将具有不同的结果。例如,打开Caps Lock的计算机处于特殊模式:所有键入的字母都将显示为大写字母。打开或关闭大写锁定时,键入字母会有不同的效果。或者,在Microsoft Word的“跟踪更改”模式下,所有以前进行的编辑和注释都是可见的(而在正常的默认模式下,不会对其进行跟踪或显示)。


通过对“模式”和“对话框”的了解,我们可以轻松定义模式对话框。

定义一个模式对话框是一个对话框,在主要内容和移动系统到需要用户互动的一种特殊模式的顶部显示。在用户与模态对话框明确交互之前,此对话框将禁用主要内容。

相反,模式(或无模式)对话框和窗口不会禁用主要内容:显示对话框不会更改用户界面的功能。对话框打开时,用户可以继续与主要内容进行交互(甚至移动窗口,最小化窗口等)。

模态对话框最初旨在警告用户错误或需要立即采取措施的其他系统状态。在这些情况下,必须先中断用户才能解决错误。因此,将对话框放置在屏幕中间作为界面的焦点,使其非常有效。这种模式对话框的最大优点是它们引起了用户的注意,并允许他们认识到问题并迅速进行了纠正。

但是,这种原始用法已经发展起来,现在出于合法或不太合法的原因,有说服力地使用了模态对话框和窗口来吸引用户的注意。

模态对话框的缺点

这是模式对话框引起的一些常见问题:

他们需要立即关注。本质上,模态窗口是强制性的,需要用户立即采取行动。由于对话框将系统置于不同的模式,因此用户只有在确认对话框后才能继续进行操作。

  • 它们中断了用户的工作流程。模态对话框迫使用户摆脱他们最初正在处理的任务。每次中断都会浪费时间和精力,这不仅是因为用户必须对对话框进行寻址,而且还因为一旦他们恢复了原始任务,人们将不得不花费一些时间来恢复上下文。

  • 它们使用户忘记他们在做什么。一旦上下文切换到其他任务,由于模态对话框带来的额外认知负担,人们可能会忘记与原始任务相关的一些细节。在这种情况下,恢复原始任务的上下文可能会更加困难。

  • 它们使用户创建并解决了一个额外的目标-关闭对话框。出现对话框时,将向用户的工作流程添加额外的步骤:读取和理解对话框,然后对该对话框做出决定。除非对话理由充分并且确实包含重要信息,否则交互成本的这种增加可能会使用户推迟。稍后我们将详细说明这一点。

  • 它们在后台阻止内容。当对话框出现在当前窗口的顶部时,它可以覆盖重要内容并删除上下文。结果,当对话框询问与刚刚被遮盖的信息有关的问题时,对对话框的响应可能会变得更加困难。

由于这些缺点,模态对话框在用于非关键性活动时会出现问题。

使用模态对话框的准则

什么时候使用模式对话框合适?以下是一些指南,可帮助您确定是否确实需要模式对话框。

1.使用模式对话框显示重要警告,以防止或纠正严重错误。

只要有可能丢失用户的工作或某个动作可能造成破坏性且不可逆转的后果,请中断用户以避免灾难。

要确定什么错误严重到足以引起模式对话框,请考虑以下事项:

  • 如果将用户的注意力从任务上移开,这个问题会更容易或更难解决吗?如果可能的话,最好避免人为错误。但是,一旦发生错误,如果错误消息显示在主要内容中而不是模式对话框中,则可能更容易修复错误。例如,表单中的错误应在发生错误的页面上报告,以便用户在解决问题时可以参考错误消息。但是可以在模式对话框中显示通知用户她的计算机将在10秒后重新启动,以确保用户注意到该消息。

  • 错误是不可逆的吗?不可逆的错误通常会导致信息丢失,这对于复杂且耗时的任务尤其有害。例如,对于电子商务企业而言,未能将项目添加到购物车可能是一个不幸的错误,但如果用户没有注意到微妙的通知,则它不是不可逆的(如果他们确实想要该项目,他们可以重做其操作)。另一方面,覆盖文件或无法保存对数百张幻灯片的更改都是不可逆的操作,因此非常需要中断,并且经常受到干扰。


Microsoft Powerpoint使用模式对话框来防止不可逆的错误或意外的用户操作,例如在不保存工作的情况下退出应用程序。


Google Mail桌面应用程序:当用户在邮件中包含“我已附加”或“请参阅附件”等关键短语后忘记附加文件时,将出现此模式对话框。此对话框可防止用户错误(以及笨拙的后续电子邮件)。


2.使用模式对话框要求用户输入对继续当前过程至关重要的信息。

当缺少信息会阻止系统继续用户启动的过程时,模式对话框可以提示用户输入该信息。

如下所示,Etsy使用模态窗口中断用户的登录信息(当该用户试图将某项保存到收藏夹列表中时)。

每当用户尝试执行需要进一步步骤才能执行的任务时,Etsy都会使用模式对话框。例如,当用户尝试将某个项目标记为“收藏夹”而用户未登录时,将出现一个对话框,以获取执行所需操作所需的信息。


3.模态对话框可用于将复杂的工作流程分成更简单的步骤。

对于工作流,更快并不总是更好。对于耗时且涉及精神(和情感)的任务,一次要索要大量信息可能是不堪重负的。在这些情况下,模态对话框可用于将复杂的信息分解为更简单,更易消化的块。向导是使用模态对话框的常见实例。

但是,必须注意的是,具有多个步骤的模式只会延长花费在主要任务上的时间,从而使用户更有可能一开始就忘记自己在做什么。因此,如果您必须执行多步骤模态,请让用户了解他们的进度,这样他们就不会立即放弃。就是说,如果开始需要多个步骤,则可能有理由为其分配整页。


4.使用模式对话框询问信息,如果提供这些信息,可能会大大减轻用户的阅读量或工作量。

当所请求或提供的信息相关时,模态可以有效地工作,或者可以简化当前任务的完成。

就房地产网站Zillow.com而言,用户无需帐户或房地产经纪人即可浏览物业列表。但是,当他们尝试与代理商联系以获取列表时,站点将显示一个模式对话框,询问他们是否已经有代理商。该信息对于立即进行下一步(联系上市代理)并不重要,但在简化未来的交互过程中仍然很有价值。该对话框使用渐进分析,并一次提出一个易于回答的问题。这些问题的承诺度很低,只关注相关细节。

Zillow.com在用户提交有关特定列表的查询后,要求用户提供更多信息。询问用户此时是否有房地产经纪人是有意义的点, 因为它减少了将来与其他代理进行冗余对话的机会。


渐进分析的关键在于它们遵循用户对工作流程的期望-中断仅在它们与当前任务相关或有帮助时才有帮助。


5.不要将模式对话框用于与当前用户流程无关的非必要信息。

如上所述,模态对话框对用户具有许多缺点和成本。为了使这些费用合理,与任务和重要性的相关性应该很高。与用户目标没有直接关系的模态对话框被认为是令人讨厌的,并且会减少对公司的信任。


此外,当非优先信息以高优先级格式(如模式对话框)显示时,用户将拒绝关注此格式的其他实例。这就像伊索寓言中的“哭狼的男孩”一样-反复误导他人将使他们在真正需要时不会给予您信任。


与普遍看法相反,邮件列表注册虽然对于产生业务线索至关重要,但对用户而言并不重要。在最近的一项网络可用性研究中,我们听到了与电子邮件通讯注册有关的模态对话框的内在鄙视。


GoodHousekeeping.com通过模式化的邮件列表对话框发挥了更大的作用-不仅停用了背景,而且还用全屏照片完全替换了背景,从而删除了用户在网站上的所有上下文。它也出现在用户首次登陆网站首页后的前3秒钟内,使用户没有时间从该页面上收集任何值。该对话框要求的信息对于用户或其工作流程而言并非必不可少,并且几乎不提供上下文或感知的价值。


Wayfair使用模式对话框来请求用户指定应将该项目固定在哪个板上。另一个UI元素(例如主要内容中的一个选项)将更适合于输入此信息。底部:选定木板后,Wayfair使用模式对话框来要求用户邀请朋友加入他们的木板-这对用户来说不是必不可少的操作,并且会增加固定项目的交互成本。


6.避免使用模态对话框中断高风险的流程,例如结账流程。

结帐对用户和企业都是高风险的过程:用户希望确保该过程是安全和无错误的,而企业希望确保用户遵循其购买决定。模态对话框(如果不需要的话)充其量会分散用户的注意力,最坏的情况是削弱用户的信心。

较早的Walmart.com版本使用模式对话框提示用户在结帐期间登录。最好的情况是,这种模式可能会分散用户的注意力,并引导他们进行全面的搜索以查找Walmart.com密码,而不仅仅是以访客身份完成结帐。在最坏的情况下,用户可能会感到他们被迫开设一个帐户,而这又会影响购买决定。此后,沃尔玛重新设计了其网站以删除该模式对话框(但重新设计也完全删除了访客结帐,现在要求用户拥有一个结帐帐户-坦白地说,这令人反感)。


7.避免使用模态对话框进行复杂的决策,这需要模态中没有可用的其他信息源。

模态对话框应用于与用户的简短直接对话。如果模态要求用户进行复杂的研究或咨询其他信息源(可能被模态阻止),则该交互不是正确的UI元素。

边境航空公司使用模式对话框促进基本航班的加价销售。该对话框要求用户决定花更多的钱,但是不允许他们访问做出该决定所需的其他信息(例如,是否还有剩余的体面座位)。


请考虑使用非模式对话框

在任务不是很关键的情况下,非模式对话框可能是合适的。非模式对话框的攻击性不如模式对话框,因为它们允许用户继续其活动并在不相关时忽略它们。但是,它们仍然可能是破坏性的,特别是如果它们使屏幕上的重要信息模糊不清或需要太复杂的交互。

此外,某些非模式对话框不能在设备和浏览器之间很好地转换-例如,台式机上的Chrome中的非模式窗口可能会在iPhone上的Safari中变为模式窗口,例如下面的Meowbox.com。

在Meowbox.com桌面网站(左)上,主页右下角显示了用于时事通讯注册的定时非模式对话框。但是,在网站的移动渲染(右)上,非模式窗口变为全屏模式窗口,迫使用户在向前移动之前提供输入。桌面版本允许轻松消除提示,而移动版本则不允许。


当用户需要在模式之间快速切换以访问某些信息时,非模式窗口非常有用。例如,Google Mail使用非模式窗口作为编写新电子邮件的默认方法。用户可以继续打开此窗口,在不丢失电子邮件的情况下最小化编写的电子邮件(或选择将其最大化到模式窗口)。该单独的视图使用户可以查找较旧的电子邮件或其他信息,这些信息可能有助于撰写当前电子邮件。


Google Mail的非模式窗口使您可以轻松地在写入和读取信息之间进行切换。


涉及模式对话框时,请考虑以下问题:没有人喜欢被打扰,但如果必须的话,请确保值得这样做。


在使用对话框时,还有哪些需要注意的点呢?


1.减少干扰

谨慎使用对话框,因为它们会打断他们。它们的突然出现迫使用户停止其当前任务,并专注于对话框内容。对于模式对话框,用户必须先进行对话操作,然后才能继续访问下面的页面。有时这是一件好事,例如,当用户必须确认一项重要操作时(例如“您要删除您的帐户吗?”),但是对于许多任务而言,这是不必要的,而且通常很烦人

要求确认

在需要用户在继续操作之前进行交互的情况下,或者当错误的代价可能很高时,使用对话框是最有意义的。


不要突然打开对话框

在用户未做任何事情的情况下突然打开对话框是一个非常糟糕的主意。不幸的是,许多网站都用下面的示例用订阅框轰炸了访客。

用户在页面上执行某项操作时,应该始终打开一个对话框。那可能是单击按钮,跟随链接或选择一个选项。

tips

  • 并非一切都值得中断

  • 对话框的替代方法是内联扩展,可以帮助维护当前上下文

  • 不要只是弹出对话框


2.对话与现实世界之间的匹配

对话框应该说出用户的语言(使用用户熟悉的单词,短语和概念),而不是特殊的系统术语。

明确的问题和选项

您应该使用清晰的语言写问题。例如,当您要求用户删除她的文件时,而不是说“释放存储空间?” 问“您要删除文件吗?” 通常,您应该避免道歉,模棱两可或诸如“警告!”之类的问题。或“您确定吗?” 因为它们会带来额外的视觉混乱。


避免为用户提供含糊不清或不清楚的选项。您应该只使用清除选项。在大多数情况下,用户应该能够根据标题按钮文本来理解选择。

错误的示例:在此示例中,轻蔑的操作文本“否”回答了问题,但没有建议之后会发生什么。


很好的例子:平等权利行动文本“放弃”清楚地表明了决定的结果。

提供重要信息

对话框不要遮盖可能对用户有用的信息,这一点很重要。例如,一个对话框,要求用户确认某些项目的删除,应列出要删除的项目。


提供信息反馈

处理完成后,请记住显示通知消息(或视觉反馈)。让用户知道她已经完成了所有需要的工作。

tips

  • 在对话框中使用明确的问题和选项。

  • 设计对话框以产生闭合。

  • 操作后通知用户。


3.追求极简主义

不应该试图过多地塞入对话框。保持其干净简洁(遵循KISS原则)。但是极简主义并不意味着有限。所有信息都应该是有价值的相关的

元素数量和选项

对话框永远不应部分出现在屏幕上。您不应该使用包含滚动内容的对话框。

错误的例子: 巴克莱银行的付款处理对话框中有很多选项和元素,其中的一部分选项仅可通过滚动来使用(尤其是对于通常具有相对较小的屏幕区域的移动设备)。



很好的例子: Stripe使用简单而智能的对话框,仅包含基本信息,这些信息在台式机和移动屏幕上都看起来不错。

操作数

对话框不应包含两个以上的动作。第三项操作(例如“了解更多信息”)通常用于使用户离开对话框,这增加了未完成任务的风险。

对话框中不要包含多个步骤

将复杂的任务划分为多个步骤是一个好主意,但这通常也表明某些事情太复杂而无法要求用户在对话框中完成。


如果交互足够复杂,需要多个步骤(如下面的示例所示),那么它就足够复杂,可以保证拥有自己的页面

tips

  • 通过删除不需要的元素或不支持用户任务的内容来简化对话框

  • 尝试避免对话框包含多个步骤。

4.选择正确的对话框类型

正如上面所介绍的,对话框有两种主要类型。第一类是寻求注意力的模态对话框,它迫使用户在继续之前与他们进行交互。模态对话框通常用于离散的阻塞过程,需要显式的“接受”或“取消”操作才能将其关闭。单击其外部区域时,它不会关闭。第二种类型非模式对话框,允许用户在其外部单击或点击以将其关闭。

您仅应将模式对话框(第一种类型)用于非常重要的交互(例如,删除帐户,同意条款和条件)。

系统对话框也是模态对话框,通常具有以下基本元素-内容,操作和标题。

5.视觉一致性

对话框的背景

打开对话框时,重要的一点是要使后面的页面稍微变暗。这有两个工作。首先,通过对话框吸引人们关注叠加层;其次,它使用户知道该页面当前未处于活动状态。

但是要注意着色。如果您将其设置得太暗,则用户将无法再在后台看到页面。如果将其设置得太浅,则用户可能会认为该页面仍处于活动状态,甚至可能根本没有注意到对话框。

清除关闭选项

右上角的对话框应该有关闭选项。许多对话框在窗口的一角都有一个“ x”按钮,用户可用来退出该窗口。但是,对于普通用户而言,此“ x”按钮并不是一个容易的逃生路线。单击“ x”通常会花费更多的时间和精力,因为它的尺寸较小,用户必须发现并单击(点击)它。

允许用户单击非模式窗口时,可以退出非模式窗口,这是一个好主意。

避免对话框启动对话框

对话框应避免启动其他对话框,因为它们增加了视觉上的复杂性。

tips

  • 大多数情况下,允许用户单击(或点击)以关闭对话框(模态对话框除外)。

  • 对话框应避免启动其他简单对话框。

结论

模态和非模态对话框都非常有用,可以请求或鼓励用户参与。在决定这两种类型的对话框时,请考虑用户上下文和工作流程。避免不必要地打扰用户并中断他们的工作流程。使用户更容易解决问题并实现目标。如果公司希望朝着业务目标持续发展,则在这些设计决策中必须优先考虑用户目标。

涉及模式对话框时,请考虑以下问题:没有人喜欢被打扰,但如果必须的话,请值得确保这样做。


文章来源:站酷  作者:ZZIUP

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


Ant Design 4.0:创造快乐工作

资深UI设计者


第一趴:Ant Design 的基本假定


在我开始所有话题之前,我有问题想问大家,大家工作快乐吗?


我听到了特别积极的反应,说非常的快乐。希望大家说快乐,不是因为今天是周五。


但是呢,其实,工作并没有我们想象中那么快乐,是所有的活动当中快乐指数的,跟躺着带来的快乐差不多的,有些人躺着什么也不干,也比工作快乐。



什么原因导致了工作的不快乐?


第一类,关乎目标。大部分人认为工作是为老板服务,所以很难受。另一类,是因为反馈,很多工作的结果依靠于外界,依靠于老板,所以你跟直属上司的关系,决定了工作的体验。第三类,是我们认为挑战和技能的不匹配,导致了我们工作的不快乐。当挑战大于技能的时候,你就会焦虑,当技能大于挑战的时候,你就会觉得无聊,你的工作就会在焦虑和无聊之间来回地徘徊,这是我们理解的世界。


这个问题,在数字世界中会变得更加的明显。70 年前,第一台计算机出来之后能解决的问题非常的简单,但是 70 几年过去了,数字世界得到了非常大的发展,我身边任何一个小设备都远远大于 70 年的。而现在的我们和 70 年前的前辈们没有本质的区别,我们有 7+2 的记忆法则,最多只能记住 9 个数字,这就导致了在数字世界当中,我们所面临的挑战远远大于人类所掌握的技能。



数字世界往往给我们带来了挑战大于技能,所以你的体验是负能的。如果你的工作更加有趣,挑战能够匹配技能的时候,工作就会变得很好玩。工作就像打游戏一样,你通过了一关,技能得到了提升,工作就会变得持续好玩,所以我们在无聊和焦虑中间寻找平衡,这个平衡就是快乐的通道。


说起工作,大家多多少少会有快乐的体验,但是和躺在沙滩上睡觉的体验完全不一样。某一个下午或者晚上,需要处理一件稍微有难度的事情时,你需要集中所有的注意力,专注于你和你的事情,一抬头两个小时过去了,这是一种极度饱满、极度被满足之后的快乐,它是一种成长的快乐,也是一种挑战和技能匹配的快乐,也是全情投入的快乐,所以我们所说的快乐工作指的是全情投入的工作。


基于这样的思考,我们将每个人都追求快乐工作,作为Ant Design 的基本假定。

第一个原因是,我们认为人或多或少都有这样的快乐体验;第二个很重要的原因在于,对于大多数人而言,我们醒着的绝大部分时间都要工作,如果你无法在工作中体验到快乐,人生将会在焦虑和无聊中度过。

基于这样的思考,我们找到了 Ant Design 的基本假定。就像光速不变基于相对论一样,我们想基于这样的假定,表达 Ant Design 的体系。



Ant Design的设计价值观

这就是 Ant Design 的基本假定,每个人都追求快乐工作,Ant Design 中每个人是谁?我们分成两种不同类型的用户:第一类是用户,第二类叫做设计者。所谓的设计者是创造这些应用性能的人,也就是在座的大多数。


我们将快乐拆成两部分,一部分是快感,一部分是乐趣,基于此,我们衍生出了 Ant Design 四个价值观,设计首先是自然的,其次是确定的,第三,设计是要有意义的,第四,设计是能让用户和产品不断成长的,它是具有生长性的。




第二趴:确定性


所以接下来的分享当中,因为时间的关系,我会重点分享其中的两块。


第一块叫做确定性。分享一个小案例,我刚入行的时候,就碰到了社会的毒打,我想找到我的合作伙伴进行验收发布的环节,因为设计师对细节有非常强的管控情系,我用略微虔诚的态度说:“亲,能稍微调整一下列宽吗?”,他可能没理解我的意思,说“我觉得挺好”,我说“都换行了,哪里好?”,我以为会引起他的注意,结果他回了我一句:“这不重要,你行你上。”


我一开始并不明白,为什么这个世界是这样的?我认为我们都应该有同样的认知,直到有一天我看到他的竞争升级 PPT 的时候,我就明白了,原来他不是针对我,他不换行不仅在产品上,PPT 里也不换行。不同的人有不同的想法,不同的工种也有不同的想法,而我们的工作是需要这样一群人一起合作,就会导致一个问题,当不同的人有不同的、不确定性的想法,会导致研发过程的不确定性。


ETCG 2.0:Ant Design设计的方法论


我们总说,一个人可以走得很快,一群人才能走得很远。我们要想办法怎么让这群人可以步调一致地走得快,又走得远,我们把这套体系、方法论叫做 ETCG 2.0。



这是原有 ETCG 的基础上,进行升级的过程。我们希望面对同样的问题,各个角色都能推理出同样的方案。就像你在春天种下一颗苹果树的种子,你一定在秋天可以得到一颗苹果树,而不是一颗梨树。



ETCG 2.0几个字母分别代表不同的意义,第一个是功能范例,第二个是模板,模板是我们基于业务的抽象,目的是帮助新手或者帮助不同设计师保持设计的一致性,指引页面如何设计,比如这是典型的列表页,由高级搜索和表格组成。今年在模板的基础之上又做了一层更大的精进,我们做了抽象和规范衍生出了模板组件。一行模板组件,当无法满足你的需求时,只要一行代码,就可以得到一个完整的序列。



除了列表页,还有表格页,还有图表、表单,以及布局,构成了我们对系统的抽象,叫做「四表一局」,它大概覆盖了中后台系统、或者企业级产品 80% 以上的业务诉求,同时本着非常开源、开放和普惠的心理,整个「四表一局」正式对外开放,大家可以访问 Ant Design 的仓库下载和使用。


ETCG 中的 C 是组件,是 Ant Design 最早和大家见面的内容,五年的时间里面,我们有了很多数量上和质量上的精进,同时创造了非常多的社会价值。这五年前,非常令我们自豪的是,有接近 1000 名贡献者参与到 Ant Design 的建设中,同时 TOP 50 当中,60% 来源于社区,他们为 2 万家企业提升了 3-5 倍的研发效能,同时我们正式于去年年底成为全球开源第一的组件库。五年前,蚂蚁集团发起了 Ant Design 这个项目,但是它今天所取得的成就是来源于社区和我们的共同努力,这里的荣誉和掌声应该献给所有为Ant Design 贡献过代码的同学,谢谢你们的支持。



ETCG 的 G 有两个。第一个 G,是对组件样式的抽象,我们用了变量化的方式进行了约束和管控,它可以做什么?特别简单,你的老板今天不喜欢蓝色,想要橙色,你只要一行编码,就让组件库发生了焕然一新的变化。



ETCG 的第二个 G,是我们今年重点建设的部分,也是全新的一部分,叫做 Guides,指的是人和机如何进行互动交互的过程。


比如说这里是应该放一个数值输入框,还是放一个输入框?以及如何进行放置?我们将琐碎的交互规则进行抽象和封装,让机器学习这些规则,让机器帮助我们进行这些规则。你只要导入原数据,几乎不用做任何的配置和更改,可以得到可进入生产环境、可研发的表单页面,设计得可能比初级的设计师产生的效果更好,你想要的一切都应该放在合适的地方。


这就是我们对 Ant Design 确定性的理解,不需要设计师参与的设计产品,提升了设计和研发的体验,当然商业化还需要很长的时间。当下如何解决现在碰到的问题?仰望星空,也要脚踏实地。作为设计师,我在想怎么解决五年前的问题,我很想说我行我上。


我们怎么使用?使用 Kitchen 进行编辑化的能力,把 13% 甩给我的合作伙伴。如果你觉得还不够,想做更多的管理和管控,甚至可以用「四表一局」的能力进行服务的搭建,搭建可进入生产环境的服务产品,让设计师变成设计工程师的角色。



第三趴:如何让设计变得更自然?


在今天分享的最后一趴,我和大家聊聊这个场次经常听到的词,那就是“自然”,学术界和产业界对自然有非常多的理解。我们把它定义成了形容词,我们认为这个行为很自然,大家经常在各个场合听到的一句话,设计是关乎如何运作的问题,Ant Design 在这个基础上,要聊的是 how it worksnaturally。



同样分享一个小案例,在我们有一天的用户群里,我们的用户反馈了一个非常有意思的问题。他说语雀可以插入图片吗?语雀的负责人当时在现场,就回到:“当然可以,最基本的能力”。我们的用户问出第二个特别具有代表性的问题:“可是我们找不到在哪里”。语雀是阿里内外都很喜欢的一款文档类文件。编辑页的第一页,我们的工程师特意做成了绿色的,你点进第一个的第一行就是图片上传的功能。但是大家有没有想过?我们仅仅隐藏了一级,就让用户记不起来有这个功能,我们仅仅隐藏了一级,就让用户找不到这个功能。这不是语雀产品特有的特征和问题,而是这个时代大部分问题具有的特征和问题,因为大部分的产品处于 1973 年的基础上。



WIMP 是什么?Window、lcon、Menu、PointDevice,当我们的功能只有 20 几个的时候,这是非常好的设计,总比代码行好太多,今天我们说了数字世界当中,我们的设备、计算机、网络成千上亿倍的发展,用户怎么记得住 8000 个功能?用户怎么定位到 8000 个功能在哪里?所以 WIMP 界面碰到了人机交互的瓶颈阶段。


为什么碰到瓶颈会越来越不自然?第一个角度从人机互动的环节,当用户记不住的时候,就没办法从哪个入口出发。所以 WIMP 界面第一个不自然的原因在于,所有动作的发起都依托于用户。用户一旦记不住,一旦找不到,人机交互就没办法走通,这是 WIMP 界面的第一个问题。



第二个问题,要回到人身上。人的行为分为有意识、无意识的两层,能量消耗比较大的就是有意识层面。WIMP 在于所有的行为依托于用户有意识地触发,这本身就是一个非常消耗脑力的一件事情。在我们面对这么多功能的环境下,这两个问题导致了我们在数字世界当中碰到的巨大问题。因为我们知道系统的功能每天在增加,数字世界不需要遵循物理制造的极限,它可以进入无限备功能的叠加,所以在这个世界当中碰到的挑战远远大于我们所掌握的技能,所以 WIMP 界面碰到了诞生以来最大的问题。



我们如何解决这个问题呢?首先一定要清晰地认识到,人是有意识和无意识两种思维的结构和意识形态的。同时系统也可以分为两部分,一部分是主动功能,第二部分是被动功能,我们要尝试的守正出奇。守正延续了 WIMP 界面常规的功能,让人有意识寻找功能,触发系统的能力。但是出奇要多做一步,除了让用户找功能之外,我们要增加很多的主动式的交互,让功能找到用户。


接下来分享几个案例,在我们的常规设备当中,都已经有这样一些主动式的服务来寻找到你。


第一类是相逢不相识,名字很好听,解释也特别好玩。在语雀当中有一个小功能是我特别喜欢的功能,当我编辑一篇文档,编辑了大于 30%、50% 的文本量,这个钩会自然地帮我钩上,因为它有一个基础的设定:如果这篇文章发生了比较大规模的修改,你的订阅者很自然的想知道你这篇文章做了什么。


第二个相逢不相识的地方,大家可以聚焦一下支付宝。有兴趣可以打开支付宝首页,在你的收款码应用里,解决什么样的问题?解决面对面交易的问题,所以当你输入一个金额完成以后,自然旋转屏幕的时候,这个屏幕会进行自然的翻转,这样对面扫你钱的人,可以看到信息的正面,这非常自然。



第二个主动式交互的类型,叫做可用不可见。和相逢不相识的区别在哪里?就是默默地为你提供了服务,但你可能永远不会知道它的存在。在苹果第一代出来的时候,做了一个非常牛逼的设计,因为大家都知道虚拟键盘,没有物理触感,所以误触率很高。虚拟键盘怎么解决?苹果基于非常有趣的思考,在苹果的全键盘里面,只要输入了 Desig 的时候,通过语义词的分析,N 点击的范围远远大于旁边的 B 或者 M,以及上面的 G 部分,这是帮助你做主动选择的服务,只是我们从来不知道有这样一件事情。所以我们将这些自然的人机互动方式进行整理,包括融入到更多的案例以后,发现人机主动式交互有九种不同类型的分类,除了输入法,更多是通过用户使用情景的上下文进行优化的过程。



我们有了这张人机自然的交互,怎么解决语雀的问题?我和在座的语雀设计师有过这样的讨论,用户说图片上传找不到,我们大部分人的第一反映是把图片上传显示单独放出来。这可能会解决刚才的问题,但是如果明天财务说表格找不到了,我是不是还要把表格拿出来?有人说附件找不到了,还要把附件拿出来吗?我们需要从主动式交互的角度畅想怎么优化人机互动的过程。



回到这张自然交互的工具,提供了一种简易的思维框架。


我们去判断哪些是可以去做的,第一件事特别简单,我们判断用户使用的上下文是什么,我们发现很多产品的通用习惯,直接把图片拖进去,做成小的服务,用户根本不需要知道功能的存在就可以使用。


第二个从原数据角度来理解,图片是一种特殊结构的数据,它是 jpg、png。用户在外部复制了之后,进入编辑页可以主动推送他一个服务,询问他是否要粘贴,本质上并不复杂,但是它确实在 WIMP 界面传统意义的基础上,又提供了初级的部分,又额外做了一部分。


我们所定义的自然里面,是需要我们做更多的主动式的服务,让我们这个海量的功能能够在合适的场景下,去找到用户,从而节约人的脑力和体力。因为对于人来说,我们和 70 年前的爷爷辈们没有本质的区别,我们需要被善待。有感兴趣的同学可以看支付宝的访问码,也期待和大家做更多的互动。


结语

分享的最后一趴,我简单总结一下今天做了哪些事情和分享了哪些内容。第一趴,我们提出了 Ant Design 的基本假定,我们认为每个人都缺少快乐工作,这种快乐工作是和我们平时闲散完全不同的问题。同时大多数人都不可避免的来工作,我们怎么扭转工作对我们的体验,这是人生中非常大的问题。第二趴,我们衍生出新的价值观,这四个价值观中,因为时间篇幅的原因,重点和大家讲了确定性和自然的价值观,这是历史最悠久,也是最有代表性的两块。基于这两个价值观,我们衍生出了不同的组建库也好、可视化资产也好,相关的设计资产以及设计策略,以及配套的设计工具,当然蓝色部分是我们今天介绍的重点。最后这张图特别适合拍照,这是我们系统提供给大家的主动式服务。




文章来源:站酷  作者:Ant_Design 

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


日历

链接

个人资料

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

存档