首页

UI设计-个人集锦

前端达人

收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏



转自:站酷

作者:Lyxi106


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

合群汽车APP

前端达人

为海南合群汽车销售公司设计的一站式服务平台APP



转自:站酷

作者:RainBow丶Lin


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

工具管理系统

前端达人

收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏




转自:站酷

作者:戏欢你


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


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

雪涛

魔幻的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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



万字干货!超全面的色彩与应用指南

周周

万字干货!超全面的色彩与应用指南

色彩是影响用户最简单和最重要的一个因素。研究表明,人们只需 90 秒就能对一种产品做出下意识的判断,而其中高达 60%以上的判断仅基于颜色。因此,选择合适的颜色对于改进产品的转换率和提高产品的可用性是非常有用的。在没有文字的场景中,颜色的搭配非常重要。如何配色可以使设计感更强,如何配色更好看,哪些配色不好看,解决这些问题就需要学习色彩理论。

色彩基础知识

我们身处在一个多彩的世界中,物体的不同颜色,会让我们产生不同的情绪。色彩,即光从物体反射到人的眼睛所引起的一种视觉心理感受,按字面含义上理解可分为色和彩。「色」是指人对进入眼睛的光传至大脑时所产生的感觉,「彩」则指多色的意思,是人对光变化的理解。色彩的基本理论虽然老生常谈,但在 UI 设计中具体怎么运用,还有关于色彩的性格和含义,都是我们需要了解的。因此在学习 UI 配色之前我们先来了解色彩的基础知识。

1. 色彩常识

原色

所有的色彩都源自“红黄蓝”三种原色,很多人误以为三原色是“红绿蓝”,其实不是。红绿蓝是显示上的三原色,计算机屏幕的显示是色光三原色(红 red,绿 green,蓝 blue)即 RGB 组成的,每一个像素的颜色都用三原色值来显示,与美术上的三原色不一样。原色是其他颜色调配不出来的。把原色相互混合,可以调和出其他种颜色。

万字干货!超全面的色彩与应用指南

虽然 RGB 在显示设备上表现良好,但并不够人性化。因为人们判断颜色,往往是通过:这是什么颜色?是不是太艳了?是太亮了还是太暗了?这样的感官维度,而很难通过红绿蓝的亮度层级去判断。所以人们后来基于 RGB 衍生出了 HSB 模式和 HSL 模式。

印刷三原色为青(Cyan)、品红(Magenta)、黄(Yellow)。是减色模式,混合为深灰色,并不能产生黑,所以在印刷时加上黑色油墨,才能产生纯正的黑,就是 CMYK 颜色模式。

万字干货!超全面的色彩与应用指南

间色

又叫“二次色”。它是由三原色两两混合调配出来的颜色。红与黄调配出橙色;黄与蓝调配出绿色;红与蓝调配出紫色,橙、绿、紫三种颜色又叫“三间色”。在调配时,由于原色在份量多少上有所不同,所以能产生丰富的间色变化。

万字干货!超全面的色彩与应用指南

复色

也叫“复合色”。复色是用原色与间色相调或用间色与间色相调而成的“三次色”复色是最丰富的色彩家族,千变万化,丰富异常,复色包括了除原色和间色以外的所有颜色。例如,黄色与橙色混合得到橙黄,红色与紫色混合得到紫红。

万字干货!超全面的色彩与应用指南

冷暖色

最后由三种原色、三种间色和六种复色组成的系统就称为十二色环,从紫色至黄绿为冷色,黄色至紫色为暖色。冷色令人联想到天空、海洋、冰雪等,产生寒冷、理智、宁静等感觉;暖色则令人联想到太阳、火焰、热血等,产生温暖、热烈、危险等感觉。

万字干货!超全面的色彩与应用指南

虽然可以用「冷」、「暖」色系来划分色彩,但配色的变化却有千种万种。借着色彩的组合方式,从「非常冷」到「凉爽」到「暖和」再到「炎热」都可以用不同的配色组来表现色彩的印象。

  • 知识点:

不同的色轮由不同的人发明,他们对于色彩的见解不一样,因此创建出来的色轮用途也不一样。比如:伊顿色轮又被称之为美术三原色,是由颜料的三原色混合叠加而成;RGB 色轮主要运用于电脑、手机、平板等一系列科技产品,RGB 的三原色是光的三原色;CMYK 色轮主要用于印刷领域。

2. 色彩三属性

丰富多样的颜色可以分成两大类,即有彩色系和无彩色系。彩色系的颜色具有三个基本特征:色相、明度和饱和度,在色彩学上被称为色彩三大要素或色彩三属性。

万字干货!超全面的色彩与应用指南

色相(Hue)

色相是自然状态下的色彩,是色彩的相貌。简言之,色环上没有改变明暗的色彩。色相是色彩的首要特征,是区别各种不同色彩的标准。例如红、橙、黄、绿、青、蓝、紫就是其中不同的基本色相。黑色是没有色相的中性色。不同的色相在人眼中的差异是色相本身对应光的波长不同而造成的。红色波长最长,紫色的波长最短。

万字干货!超全面的色彩与应用指南

饱和度(Saturation)

饱和度是色彩的纯度,他表示颜色中所含有色成分的比例。增加饱和度,色彩会变得更强烈、鲜艳生动;降低饱和度,颜色中灰色成分越大,色彩会变得暗淡乏味。当一种颜色掺入黑、白或其他色彩时,纯度就产生了变化,当掺入的颜色达到很大的比例时,人的眼睛就无法感知出来了。

万字干货!超全面的色彩与应用指南

饱和度为 0 的颜色为无彩色,就是黑、白、灰。数值越大,颜色中的灰色越少,颜色越鲜艳。饱和度高的地方给人感觉靠近,而饱和度低的地方则给人的感觉很遥远。高饱和度和低饱和度的色彩都给人坚硬的感觉。

明度(Brightness)

明度,指色彩的明暗度,反应的是色彩的深浅变化。以自然界为例,一些物体在早晨和晚上的色彩不同。如树木和山脉,早晨色调浅;傍晚因为光线减少了,色调变得偏暗。距光源越近的物体,明度越高,反之,则明度越暗。

万字干货!超全面的色彩与应用指南

明度在 UI 设计中扮演重要的角色,明度运用得好,可以实现好的对比效果。明度达到 100%时,色彩就会变成白色(黑白模式下);明度是 0%时,就会变成黑色。色彩的明度变化往往会影响到纯度,例如蓝色加入黑色以后明度降低了,同时纯度也降低了;如果蓝色加入白色则明度提高了,纯度却降低了。

3. 色彩的搭配

完整的 UI 配色应包含主色、辅助色和中灰色。主色通常与品牌色一致,辅助色一般选择与主色色调一致且能拉开层次的颜色,强调色选择与主色相对立的互补色。下面我们来学习几种常见的配色方案。

单色

单色是指某个色彩的明度变化,即在色彩上叠加 10%-90%白色或黑色得到的一组颜色。单色搭配由于彼此之间色彩相同,因此能和谐共处,但因较为朴素也就不容易引人注目,而且会给人一种单调的感觉。单色配色在色彩变化上也适合长时间阅读,颜色波动较少,比较适合沉浸式交互的界面设计。

万字干货!超全面的色彩与应用指南

虾米音乐就是单色搭配的最好例子,它将主色橙色用在主要功能入口、标签栏图标等所有界面的关键元素上,给人非常精致和统一的视觉体验。

万字干货!超全面的色彩与应用指南

如若想要在色彩变化上融入一点微妙的变化,可以尝试在色环中选用两侧相近的颜色,这样色彩层次丰富了而统一感也不会变,称之为“邻近色配色”。

邻近色

是指在色相环中相邻的两种颜色,在色相环上相距 60°,或者相隔五六个数位的两色。它可以在同一个色调中建立起丰富的质感和层次,优点是阳光、活泼、稳定、和谐但不单调,理所当然称为最安全的配色法则。邻近色色相相近,冷暖性质相近,传递的情感也较为相似。例如,红色,黄色和橙色就是一组邻近色。邻近色表现的情感多为温和稳定,没有太大的视觉冲击。

万字干货!超全面的色彩与应用指南

美颜相机的主色是粉色,将浅粉色和浅紫色作为辅助色,既能信息区分又和谐统一。

万字干货!超全面的色彩与应用指南

互补色

互补色是指在色相环上对立(180°)的两个颜色,色相环上夹角呈现一条直线,例如黄色和紫色、橙色和蓝色、红色和绿色等。互补色有着非常强烈的对比度,在颜色饱和度很高时,可以产生许多十分强烈的视觉效果,就会使这两种颜色都显得更加鲜明,也将视觉冲击力强度提升至峰值。这类配色形式优缺点和对比色很相似。常给人一种潮流、刺激、兴奋的感觉,把互补色放在一起,会给人强烈的排斥感,搭配不好会很山寨。

万字干货!超全面的色彩与应用指南

Airbnb 的主色为红色,界面设计中使用主色的互补色「墨绿」作为主色调,给人清晰、简洁的感觉。

万字干货!超全面的色彩与应用指南

分裂互补色

分裂互补色是指寻找三种颜色,其中两种互为邻近色,另一种与它们形成互补色,例如黄色和蓝色、洋红。这种搭配既能保持互补色强烈的对比及视觉上的趣味性,又能让颜色变得柔和。

万字干货!超全面的色彩与应用指南

36Kr 将蓝色作为主色,互补色黄色作为辅助色用在图标、标签上,再选择黄色的邻近色红色作为另一辅助色,用在不同的信息上,有助于用户区分产品信息。

万字干货!超全面的色彩与应用指南

对比色

指在色环上相距 120°~180°之间的两种颜色,也是两种可以明显区分的色彩,包括颜色三要素的对比、冷暖对比,彩色和消色的对比等。对比色能使色彩效果表现更明显,形式多样,极富表现力。需要注意的是,互补色一定是对比色,但是对比色不一定是互补色。因为对比色的范围更大,包括的要素更多,如冷暖对比、明度对比、纯度对比等。这类配色形式优点是视觉冲击力强烈、富有跳跃性、突出、点缀能力强,比如常用作画面中的点缀色,或与主体固有色成对比关系的背景色,用于突出主体。缺点是大面积使用比较难把控。

万字干货!超全面的色彩与应用指南

马蜂窝的主色是黄色,对比色蓝色作为辅色用在标签、小图标上,红色作为强调色用在价格等信息上。

万字干货!超全面的色彩与应用指南

对比色也不单纯是两个颜色之间的对比,而是色调之间的对比!对比色还包括:补色对比、色相对比、明度对比、饱和度对比、冷暖对比,饱和度越高对比越强烈,明度反差越大对比越强烈。

四元色搭配

四元色搭配在色环上形成了一个矩形,使用不是一对而是两对互补色。将其中的一个颜色作为主色,其余颜色作为辅色进行搭配可以得出不错的效果。

万字干货!超全面的色彩与应用指南

四元色是比较难以平衡的颜色,不过搭配好了会非常出彩。不信可以自己用用感受一下,尤其是使用其中一个颜色作为主色,其他的三个颜色作为辅助色的时候。

万字干货!超全面的色彩与应用指南

4. 色彩和光源关系

了解了色彩的基本知识,下面说说色彩和光源的关系。如果想描绘好对象的色彩,那么就必须了解对象的固有色、光源色、环境色及它们之间的关系和变化。

固有色

即物体本身的颜色。是指在光源条件下物体占主导地位的色彩,如红色的罐子、绿色的植物等。物体的固有色并不存在,在绘画过程中为了观察方便经常引入“固有色”这一概念。从实际方面来看,即使日光也是在不停地变化中,何况任何物体的色彩不仅受到投照光的影响,还会受到周围环境中各种反射光的影响。所以物体色并不是固定不变的。

万字干货!超全面的色彩与应用指南

光源色

物体只有在光源的照亮下才能观察到它们的色彩。光源有自然光(太阳、天光)和人造光(灯),这些光源都各自具有不同的颜色。太阳光是偏黄色暖色光,月光是偏青的冷色光,阴天则更多的是蓝灰色的天光,普通灯光是偏黄色的暖色光。光源的颜色对物体的颜色影响很大,想象一下一个置于红色光源照射下的蓝色物体会是什么颜色。

环境色

物体周围环境的颜色就是环境色。环境色对物体的影响非常大,如在红色背景下的白色物体,由于光源打到红色背景上的背景反射光也会“染”到白色物体上,因此白色物体的部分表面会蒙上一层淡红色的色彩。所以,设计师在用电脑作图时也需要考虑并想象环境色的影响。

5. 色彩空间

Lab

Lab 的全称是 CIELAB,有时候也写成 CIE L*a*b*。最突出的特点是它的生理特性,一是它包括人眼所看到的所有颜色,是目前为止色域最宽的色彩空间,二是跟人眼一样,首先看到的是明暗,其次是色彩,可以用数字化的方式描述人的视觉感应,在计算机视觉中广泛应用。

万字干货!超全面的色彩与应用指南

LAB 颜色空间中,L 表示亮度,取值[0-100]对应[纯黑—纯白];A颜色表示从绿色到红色的范围,取值[-128—+127]对应[绿—洋红];B表示从蓝色到黄色的范围,取值[-128—+127]对应[蓝-黄],正是暖色,负是冷色。Lab颜色空间中亮度和颜色是分开的, L通道没有颜色,a通道和b通道只有颜色。不像在RGB颜色空间中,R通道、G通道、B通道每一个既包含有明度又包含有颜色。

在表达色彩范围上,最全的是 Lab 模式(其次是 RGB 模式,最窄的是 CMYK 模式),它弥补了 RGB 色彩模型和 CMYK 色彩模式色彩分布不均的不足。也就是说 Lab 模式所定义的色彩最多,且与光线及设备无关,并且处理速度与 RGB 模式同样快,比 CMYK 模式快数倍。

Hsb

HSB 和 HSV 是同一个东西,只是名称不同。在 Photoshop 拾色器上可以看到每个颜色都有一组 HSB 值,H 表示色相、S 表示纯度、B 表示明度。色相值为 0~360 度,即圆;纯度和明度值为 0~100%,因此,了解 HSB 模式的原理,就能了解色彩的本质。

当我们需要调配同色系色彩,保持色相不变,只需要改变纯度和明度即可。如下图所示的 3 种同色系绿色,他们的色相(H152)都一致,仅在纯度和明度上有所变化。

万字干货!超全面的色彩与应用指南

当色相和纯度都为 0 时,色彩称为中性色,也称为灰度色,即黑白灰。其中,灰不是单指某一种颜色,而是一系列从黑到白的过渡色。

万字干货!超全面的色彩与应用指南

灰度色多用于文字,通常一个应用中的文字不应超过 3 种灰度色。深黑用于标题、正文等主要文字;浅黑或深灰用于辅助、提示性文字;浅灰用于禁用、失效等状态文字;纯白用于深色按钮文字。

万字干货!超全面的色彩与应用指南

此外,灰度色由于没有任何色相,始终沉着冷静,减少对内容的视觉干扰,因此常用于界面背景色,例如 MOO 音乐的界面设计。

万字干货!超全面的色彩与应用指南

Hsl

HSL 色彩模式是工业界的另一种颜色标准,是通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。在原理和表现上,HSL 和 HSB 中的 H(色相) 完全一致,但二者的 S(饱和度)不一样,L 和 B (明度 )也不一样。

取一个颜色试试看,先选一个颜色 #0688F9,放入 “HSL Color Picker”,显示 HSL 数值为:H(208), S(95), L(50),但是我们放在 Sketch 里面看一下,显示的 HSB 数值为,H(208), S(98), B(98) 。

万字干货!超全面的色彩与应用指南

HSL 的 H 代表的是人眼所能感知的颜色范围,这些颜色分布在一个平面的色相环上,取值范围是 0°到 360°的圆心角,每个角度可以代表一种颜色。色相值的意义在于,我们可以在不改变光感的情况下,通过旋转色相环来改变颜色。在实际应用中,我们需要记住色相环上的六大主色,用作基本参照:360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红,它们在色相环上按照 60°圆心角的间隔排列。

万字干货!超全面的色彩与应用指南

HSL 相比 RGB 的优势

我们来做一个基于 HSL 的调色实践。你可不可以快速说出“海棠红”所对应的 RGB 色值?如果再加一点橙色进去,把亮度提高一点,色值又是多少?想想那应该是一个介于洋红和红色之间的,性感娇艳的颜色。我们可以假定它在色相环 H 上的角度是 330°左右,饱和度较高,亮度适中,看看那是什么颜色?

万字干货!超全面的色彩与应用指南

em…我们想要的颜色应该再接近红色一点,让我们把色相(H)+20°到 350°,现在好多了。

万字干货!超全面的色彩与应用指南

通过改变色相值 H,我们实现了色相从洋红向海棠红的偏移。 大感觉接近了,但还是略微有点灰暗,我们可以通过增加饱和度(S)+15%,让这个颜色变得更鲜活,看起来更亮丽。

万字干货!超全面的色彩与应用指南

感觉还是差点,海棠红是属于少女的颜色,应当再嫩一点、通透一点,不会这么强烈。那可以通过增加亮度 L,+10%试试看,嗯,这才是我们想要的颜色。

万字干货!超全面的色彩与应用指南

同理,如果想加点橙色进去, 再亮一点,我们通过心算就大致可以确定色相环的相位和亮度值。在这里,我们需要让 H 增加 20°,L 增加 5%。

万字干货!超全面的色彩与应用指南

在使用 HSL 调色的过程中,不需要了解复杂的色光混合原理,这是一个自然的、感性的、易于理解的过程。相比之下,RGB 调色方式显得非常笨拙复杂、难以理解,而 HSL 是多么的友好。

  • 知识点:

需要提醒一下的是,CSS 代码里支持的是 HSL,而不是 HSB。如果和前端对接时,UI 给到的是 HSB 的色值,那么最终落地的颜色效果会与设计稿有出入。Photoshop 中的 Hex 和 RGB 颜色可以直接在 CSS 文件中使用,但是 Photoshop 中的 HSB 模式颜色和 HSL 是不同的。

Yuv

YUV,是一种颜色编码方法。常使用在各个影像处理组件中。YUV 在对照片或影片编码时,考虑到人类的感知能力,允许降低色度的带宽。Y 表示明亮度(Luminance 或 Luma),也就是灰度值;U(Cb)表示色度(Chrominance);V(Cr)表示浓度(Chroma);通常 UV 一起描述影像色彩和饱和度,用于指定像素的颜色。

万字干货!超全面的色彩与应用指南

采用 YUV 色彩空间的重要性是它的亮度信号 Y 和色度信号 U、V 是分离的。如果只有 Y 信号分量而没有 U、V 信号分量,那么这样表示的图像就是黑白灰度图像(回想一下小时候看的黑白电视)。彩色电视采用 YUV 空间正是为了用亮度信号 Y 解决彩色电视机与黑白电视机的兼容问题,使黑白电视机也能接收彩色电视信号。

色彩心理学

色彩心理学是美术知识学习中非常重要的一部分。他所研究的是色彩通过对人视觉上的刺激,而引发人情感和感官上的变化,通过日常生活中人们对应用色彩的经验积累而归纳总结出人类对色彩心理上的预期感受。在生活中,色彩心理学对人们对颜色的认知有很大的影响。为什么交通信号灯用红色表示停止通行而不是绿色呢?为什么大多快餐店用红色或黄色作为品牌的主色?这都是色彩心理学的相关知识。

万字干货!超全面的色彩与应用指南

虽然红、蓝是受到最普遍喜爱的颜色(通过对 App Store 应用流行颜色分类统计得知)。但并不意味着这一准则可以套用在所有产品上。产品的属性是什么,用户定位是什么,要传达的产品气质是什么等等,这些都是选择应用图标的颜色时需要考虑的问题。世界上第一间 Airbnb 房间是在一条叫 Rausch street 的街上诞生的,因此 Airbnb 的主色被命名为「Rausch」的温暖颜色。在挑选主色调的时候,4 名设计师前往世界 13 个城市,只为了更好地理解 Airbnb 的理念:热情、能量和自信,这正是 Rausch 要传递的信息。除了 Rausch 以外,Airbnb 还有其它九种颜色,包括 Kazan、Beach、Tirol、Foggy 等等,它们也都是以 Airbnb 的社区街道命名的。

万字干货!超全面的色彩与应用指南

下面来讲解每一种颜色都各自带有什么样的性格,只有理解了颜色的性格才能正确的使用它们。

黑色

黑色代表着品质、高端、时尚、低调、权威、严肃、稳重,是一种充满质感的颜色。它是所有色彩中最有力量的,能很快吸引用户的注意力。作为一种无彩色,能让它和其他色彩百搭,黑色+金黄色,给人一种奢华精致的感觉;黑色+银灰色,则给人一种成熟稳重的感觉;黑色+红色,给人一种时尚潮流的感觉。因此黑色是一种永远流行的主要色彩。

万字干货!超全面的色彩与应用指南

白色

白色代表着纯洁、简单、纯真、朴素、信任、开放、雅致,白色常常被认为是“无色”,即不是色彩。单一使用白色通常不会引起任何情感,但是当白色与其他颜色配合使用时,白色能很好的衬托,大量的留白让其他元素脱颖而出。在界面设计中,作为无彩色的白色,常用于背景色,缓和各种颜色的冲突,以衬托其他色彩,提高画面明度,提高文字可读性。

万字干货!超全面的色彩与应用指南

灰色

灰色是代表着睿智、老实、执着、严肃、压抑、沉稳。介于黑色和白色之间,也属于无彩色,没有色相也没有纯度,只有明度的变化。它和任何颜色都能很好的搭配,也常常用于背景色或用于突出其他彩色。灰色不像黑色那么坚硬刺眼,他更有弹性,它比黑色更有深层次的力量。因此在画面中,很少出现纯黑,基本都是用深灰色来代替黑色,也可以用浅灰色来代替白色。

万字干货!超全面的色彩与应用指南

红色

红色代表着喜庆、热情、欢乐、斗志、奔放、自信,是一种充满能量的颜色。这是最醒目和强势的颜色,一登场即获得全场的关注,甚至能引起一些生理反应,例如心跳呼吸加快等。红色最能烘托气氛,在中国传统节日里都使用热闹的红色来装饰,因此也就不难理解每逢佳节各大电商应用活动页一片红,为的就是发冲动,引人消费。同时红色也代表了警示、告诫。所以在界面设计中常用红色的文字和按钮来警示用户慎重操作。

万字干货!超全面的色彩与应用指南

橙色

橙色代表着温暖、欢乐、辉煌、健康、阳光、年轻、华丽,是一种充满朝气的颜色。橙色并不像红色那样咄咄逼人,而且它烘托出的活跃气氛没有危险的感觉,反而是一种友好。因此越来越多的应用避开常见的红色和蓝色,而选择橙色的原因。

万字干货!超全面的色彩与应用指南

黄色

黄色代表着信心、青春、聪明、尊贵、辉煌、时尚,是一种充满活力的颜色。黄色是明度极高的颜色,其鲜亮的色调使它在众多图标阵列中显得尤为突出。尽管在警示效果上没有红色那么明显和强烈,但是还是能给人很醒目和危险的感觉(例如道路警示牌)。同时因为过于明亮,也是一种非常难以运用的颜色,性格不稳定常有偏差,和别的颜色配合使用易失去本来的性格。不过黄+黑的搭配很流行,例如站酷和美团外卖。

万字干货!超全面的色彩与应用指南

绿色

绿色代表着健康、生命、青春、宁静、自然、和平、安全、舒适,是一种充满希望的颜色。绿色给人无限的安全感,当情绪低落与消极时看一些绿色,能缓解我们焦躁的情绪。绿色在生活中被广泛运用,如安全出口的颜色就是绿色,但绿色的饱和度要适当控制,如高饱和度的绿色也会令人兴奋,引起注意。

万字干货!超全面的色彩与应用指南

青色

青色代表着坚强、古朴、活泼、清爽、柔和、优雅、希望,是一种充满灵动的颜色。青色是一种介于绿色与蓝色之间的颜色,如果无法界定一种颜色是蓝色还是绿色时,这个颜色就可以被称为青色。豆瓣的主色调是青色,很符合豆瓣小清新的气质,带给用户恬静的感受。

万字干货!超全面的色彩与应用指南

蓝色

蓝色代表着冷静、科技、灵性、自由、放松、未来、理智、纯净、商务,是一种充满理性的颜色。蓝色是天空的颜色,是大海的颜色。在色彩心理学的测试中发现,几乎没有人对蓝色反感。纯净的蓝色通常让人联想到海洋和天空,可以抚平内心的伤口,让人的内心感到平和,有助于人的头脑变得冷静。例如 twitter 的主色调是蓝色,在社交应用里蓝色是一种很安全的颜色,高纯度的颜色传递了信赖、年轻和沟通的氛围。

万字干货!超全面的色彩与应用指南

紫色

紫色代表着高贵、浪漫、优雅、性感、幸运、梦幻、时尚、创造性,是一种充满神秘的颜色。是小孩子和有创造力的人十分喜欢的颜色。紫色的光波最短,在自然界中较少见到,所以被引申为象征高贵的色彩。紫色的明度在所有有彩色的颜色中是的。与不同的颜色结合会展现出不同的风格特色。紫+粉常用于女性化的产品调性,黄色是紫色的对比色。

万字干货!超全面的色彩与应用指南

色彩对用户体验的影响

当我们讨论色彩的时候,聊的更多的是色彩的搭配。虽然有些设计师认为有些色彩是一些纯粹的美学上的选择,但是实际上,色彩对于用户的心理和行为的影响相对更深,最终会反映在用户体验和行为反馈上。

当然,色彩理论是一个相对复杂的主题。从用户体验的角度上来说,色彩所涉及到的远不是配色方案这一个维度。通常,我们聊得最多的是不同色彩所产生的心理效应,以及多色彩搭配时,相互之间的影响和可访问性上的问题。设计师可以将色彩更好地运用到设计中,而无需重新考虑整个过程。一旦设计师掌握了基础知识,色彩理论中最有意义的部分之一就是学习将更多意想不到的色彩融入他们的设计中。

万字干货!超全面的色彩与应用指南

1. 色彩心理学和用户体验紧密关联

界面颜色的情感影响不容忽视。尽管有些颜色在 Ui 设计中是“通用的”(例如,黑色,白色和灰色,实际上几乎所有好的设计中都使用了其中的至少一种),但它们结合使用的颜色可能会对体验设计产生巨大影响。当然,颜色的使用方式也会对颜色的感知产生巨大影响。以蓝色为例,在简约的布局当中,大面积使用蓝色作为主色调,和在大面积白底上使用很小的一抹蓝色用来强调 CTA 按钮,所带来体验是截然不同的。

尊重文化差异

人类对于色彩都有着共通的认知,但不同国家对于色彩赋予了不同的含义。红色在中国象征着喜庆、财富和爱情,而在西方国家被赋予了流血、牺牲、暴力和激进的文化意义,贬义的味道更重一些。而白色与红色相反,白色在中国代表了死亡、反动和投降,以白色为主的设计常常会被视之为过于「素」,认为不够吉利。而西方国家却认为白色高雅、纯洁和幸运,因此要根据不同的文化背景,使用不同的色彩,才能更好地降低被误解的风险。

万字干货!超全面的色彩与应用指南

另外一方面,随着现代主义运动的普及,白色也拥有了更加现代的特征。在日本,白色甚至和当地文化结合,延伸出更加细腻独特的精神特质,随着日本战后设计领域的发展和崛起,白色在这一地区的含义则更加丰厚。原研哉在《白》一书当中,针对白色的含义和特征进行了非常深入的探讨,之后的《Subtle》一书当中,虽是围绕纸来探讨微妙的体验,但是也没少提及白色本身的特征。

万字干货!超全面的色彩与应用指南

例如股票交易市场,在国际股票市场通常是绿涨红跌,这是因为红色在西方国家代表着财政赤字,绿色代表着财富;而在中国正好相反是红涨绿跌,这是因为在中国红色象征着财富。

万字干货!超全面的色彩与应用指南

设计师必须根据产品的目标受众来审视其调色板的文化含义,这一点很重要。如果产品要面向全球受众,请确保在使用的颜色和图像之间取得平衡,以防止负面的文化内涵。如果产品主要只针对特定文化,则设计师可以不用太关心所选调色板在其他文化中可能产生的影响。

历史对配色的影响

时间变化对于配色所带来的影响不仅仅如此。比如中日两国在色彩使用上,还存在一个非常典型的差异,历史上日本在一个很长的周期内是作为中国的属国所存在的,这也使得中国自古以来崇尚饱和度较高的正色,而日本则大多使用饱和度偏低的间色,这一特征可以从两国的传统色上体现出来:

万字干货!超全面的色彩与应用指南

△ 中国传统色:https://color.uisdc.com/

万字干货!超全面的色彩与应用指南

△ 日本传统色:https://color.uisdc.com/jp.html

性别误区

或许天生如此,女性不喜欢灰色、棕色和橙色。她们钟爱蓝色、紫色和绿色。而男性不喜欢紫色、棕色和橙色。男性喜欢蓝色、绿色和黑色。只要记住,当你的产品目标用户群是男性时,选择能传达男性气概的色彩,想象下你把运动类应用的界面使用女性色彩,结果可想而知。

万字干货!超全面的色彩与应用指南

△ 男女最喜欢的颜色

万字干货!超全面的色彩与应用指南

△ 男女最不喜欢的颜色

3. 针对色盲用户群体的设计

你有没有想过你的 APP 使用人群中会有视力障碍者?

当人们谈论色盲时,他们通常指的是不能感知某些色彩。 大约 8%的男性和 0.5%的女性患有不同程度的色盲——他们在识别部分或者全部颜色时有困难。面对如此庞大的特殊受众,设计师理应关注他们的需求。

万字干货!超全面的色彩与应用指南

△ 正常人和红绿色盲看到的相同色彩

因为色盲有多重表现形式,例如红绿色盲,蓝黄色盲和单色色盲。所以运用多样的视觉线索来连接你 APP 的重要状态是很重要的。绝不要仅仅依靠色彩来表示系统状态。 相反,应使用元素(如笔画,指示符,图案,纹理或文本)来描述操作和内容。需要注意的就是不要简单认为色盲就是简单的分不清红绿,色盲用户对色彩的感受差异不仅仅是单独某种的问题,是某些范围色光的敏感程度问题。

有趣的事实:Facebook 的标志和不怎么讨喜的蓝色配色是特意挑选的。因为 FB 创始人马克·扎克伯格是红绿色盲,他对蓝色的识别是最好的。他曾说过,“蓝色是我生命中最丰富的颜色,我几乎可以看见这世上所有的蓝色。”

万字干货!超全面的色彩与应用指南

△ facebook

Photoshop 有非常实用的工具来帮助模拟色盲,在「视图」的「校样设置」菜单内选中就可以使用了。这个功能让设计师可以看到在色盲用户的眼中你的界面是什么样子的。

万字干货!超全面的色彩与应用指南

△ pinterest登陆页红绿色盲视图

下面以点状图信息图形为例,来说明如何为色盲用户优化信息图:

万字干货!超全面的色彩与应用指南

优化采用了这样一些手段:1.调整配色,将色盲人士容易混淆的红、绿、橙色换为红、蓝、黄色。2.调整明度,使图中几个颜色在明度上差异更明显。3.为不同元素赋予不同形状。所有使用点元素的信息图,都可以参考这种解决方式。

在实际设计过程中,我们需要在美观和友好之间进行权衡。我们也可以采用一些交互手段,避免同一界面中元素太多太过杂乱的问题。

4. 流行趋势对色彩的影响

这是更长维度上的变化,在短时间以内,流行色的趋势变化,对于用色也同样存在影响。这种影响在时尚行业有着非常直接的体现,而在网页和 UI 设计行业,同样存在。比如 2020 年的潘通年度流行色是「经典蓝」(Classic Blue),也就明白了为什么 iphone12 今年的主打色是蓝色了。

万字干货!超全面的色彩与应用指南

所以,当你在设计的时候,如果你的目标用户群体有着清晰的地域或者性别偏向,你可以有目的地利用这些知识来规避设计陷阱,更好地发挥色彩本身的功能和优势。如果受众广泛,则可以尽量使用通用性更强的色彩来进行设计。

  • 知识点:

你知道世界上的颜色是什么吗?

是否存在一种色彩,是不分性别文化,大家都会喜欢的呢?确实有人通过大规模的调研和探索找到了一种世界上的色彩:马尔斯绿(Marrs Green)。来自全世界 100 多个国家 3 万多人响应号召完成了这项投票,并且最终选取出来的一款绿色。

万字干货!超全面的色彩与应用指南

色彩在UI设计中的应用

1. 色彩的应用

人脑对于色彩的记忆度要高于形态,即一个 App 给用户留下深刻印象的往往是界面的色彩。例如说到支付宝,我们可能想不起它的首页长什么样子,标签栏图标是那些,但能马上记起它的界面主色是蓝色。因此运用好色彩对 UI 设计十分重要,它能直观的呈现产品的气质和性格,能有效的帮助用户组织和阅读信息,与界面设计产生联系和记忆。好的配色往往依靠设计师审美、感觉搭配出来,但合理的颜色搭配必定存在合理的配色规律和配色方法论的支撑,下面结合相关案例为大家讲解色彩运用的几个技巧。

不得触碰的禁区

分析研究了很多优秀设计作品,发现他们在用色的时候有一部分区域是不会使用的,也就是我们常说的“配色禁区”。当然,这里的“禁区”是带双引号带的,并没有什么绝对的禁区,只是说这些颜色不易控制,在连基础色都没有驾驭好之前,尽量少碰。

配色禁区大概分为这三种:三角形禁区、矩形禁区、扇形禁区(红色为禁区),如下图:

万字干货!超全面的色彩与应用指南

综合看来,不管是那种禁区,右下角区域的颜色是很少用的。毕竟他们又脏又深,当然什么颜色都能驾驭的大师请略过。

  • 知识点:

在界面设计中,一般主色和辅助色都集中在右上角,次要的和不可点的颜色都集中在中上方,而文字信息和背景色则集中在左侧,右下角禁区是我们要重点避开的对象。

色调一致

在 App 设计之前应先确定界面的主色调,主色将占据界面中很大的比例,通常是品牌色,而辅助色、点缀色、背景色等都应以主色调为基准来搭配,这样才能保证 App 整体色调的一致。色调一致的界面,能带给用户始终如一的视觉体验。例如马蜂窝将黄色(品牌色)作为主色,以及从主色搭配出的蓝色(对比色)贯穿 App 始终。

万字干货!超全面的色彩与应用指南

60-30-10 原则

60% 30% 10%的原则,是达到色彩平衡的最佳比例。在 60%的空间使用主色,可以运用到导航栏、按钮、图标等关键的元素中,使之成为整个 App 的视觉焦点和色彩关系;30%的空间使用辅助色,可以平衡过多的主色而造成的视觉疲劳;最后剩下 10%的空间为点缀色,可以用在一些不太重要的元素又需要区分的时候。6:3:1 原则构建了一种丰富的色彩层次,让界面看上去和谐、平衡和不杂乱。

万字干货!超全面的色彩与应用指南

哔哩哔哩将粉色运用到页签、标签栏、按钮、入口图标等上,蓝色的辅助色用在角标、图标上,还有黄色、红色用在一些小图标、小标签上,主次非常清晰明了。

万字干货!超全面的色彩与应用指南

色不过三

经常很多大神在网上说配色不要超过三种色,其实就是「色不过三」原则,即在一个页面中不要使用超过 3 种颜色搭配,这也和上面说的“60-30-10 原则”类似,即一个主色、一个辅助色和一个点缀色。但在实际 UI 设计中,迫于产品的需要可能会使用更多数量的色彩,但切记不可超过 7 种色相(注意不是 7 种色值),每个色相还可以运用其饱和度、明度的变化分解出丰富的色彩搭配。

万字干货!超全面的色彩与应用指南

美团外卖的首页 20 个功能入口大图标的背景用了 9 种不同的色彩,每种色彩又包含一种低饱和度色彩进行彩色渐变,但并没有显得杂乱,而是呈现一种年轻时尚的律动感。这是因为这里虽然使用了 9 种不同的色彩,但仔细观察发现只使用了 3 种色彩,其他 6 种则是从前者邻近色中提取出来的搭配,再将它们错落放置,呈现出丰富多彩的色彩搭配,整体和谐统一。

远离纯黑色和纯灰色

黑色就像没有生命力的深渊,使用户陷入冷冷的负面情绪中。远离纯黑色和纯灰色,是因为它们不存在于现实世界里。尝试在纯黑和纯灰中加入一些色调,会让界面看上去更柔和自然。另外,纯黑色还会与白色产生强烈的对比度,看久了会使人疲劳,让用户产生焦虑的情绪。MONO 的导航栏并不是深黑色,而是加入了蓝色的低饱和度蓝黑色,它的界面背景也是加入了蓝色的的浅色,这样就不会让界面看上去死气沉沉的。

万字干货!超全面的色彩与应用指南

遵循色彩心理学

前文我们已经了解过各种色彩的心理学知识,就是为了我们在进行 App 设计时提供依据。这些色彩都是源于人类对大自然最原始的感受,蓝色的天空、绿色的草地、黄色的沙漠等等,自然的色彩,对于我们来说是司空见惯的,但其中却蕴含着丰富的美感,并达到了和谐统一。网易云音乐使用红色作为主色,这种热情奔放的颜色传递出一种充满能量、自信的气质。

万字干货!超全面的色彩与应用指南

良好的可读性

良好的可读性在界面设计中能为用户提供主次分明、层次清晰的阅读体验,而一个可读性差的界面则会成为用户浏览的障碍。那如何确保界面具有良好的可读性呢?这就需要在界面设计中注意色彩搭配的对比,如在浅色背景上使用深色文字,在深色背景上使用浅色文字,使用高对比的度的亮色展示重要的元素,用低对比度的浅色来体现需要弱化和次要的内容。例如苹果 Music 的主要功能入口,标签栏图标、按钮等都是用了高纯度的红色,与其他元素形成鲜明对比,就连深灰色的辅助文字都有着清晰的可读性。

万字干货!超全面的色彩与应用指南

从大自然中获得灵感

配色中尽量使用大众熟悉的色彩,如自然界中人们常见的色彩等。从大自然中获取的配色灵感可以使你的设计更加切合用户的审美,非常自然。而艺术是对自然的直接反映,是非常宝贵的资源,值得好好利用。我们可以搜集各种与自然风光相关的图片,从中提取色彩运用到设计中,这些几近完美的搭配呈现出来的和谐美感能瞬间打动人心。天气应用 Marline 就是一个很好的例子,它的界面背景渐变就参考大自然的变化,随着不同时间段呈现出清晨、日出、正午、日落、深夜、雨天等渐变色,打开应用即唤起了用户的快乐情绪。

万字干货!超全面的色彩与应用指南

将 UX 颜色与品牌相匹配

品牌价值在创建调色板中发挥关键作用,但是它们不是唯一重要的因素,行业规范也是关键。使用与品牌主要竞争产品几乎相同的配色方案不失一种好方法。配色在品牌视觉中所发挥的作用是不言而喻的,但是,色彩本身的内涵和情绪特质并不是全部。比如一个行业当中,很多产品都使用了蓝色,那么你的产品继续使用蓝色,可以让用户更快「识别出」你所属的领域,但是本身也存在让人混淆的风险。如果你想要在视觉上脱颖而出,可以试着使用不同的色彩。

万字干货!超全面的色彩与应用指南

△中国区或美国区,红色和蓝色都是最流行的颜色。

在进行品牌设计的时候,选择配色的第一步,始终是了解各种颜色或者色相的气质和情感属性。然后,在具体设计的时候,再进一步根据品牌的气质和需求,再在色相的基础上调整明暗和饱和度。也可以打破常规创造出与众不同的配色方案。

从强调色入手

想要让配色方案更加突出,在设计中添加强调色可能是最容易入手的地方。举个例子,一个律师咨询的 App 可能会使用传统的蓝色作为基础配色,但是,如果能够加入柠檬绿作为强调色,会显得独特很多。

冷暖色对比搭配

冷暖对比色是自然平衡的规律,可以在设计中大量使用,这样的配色会使作品非常的出彩,同时不显单调,让用户感觉舒服平和。而且这种搭配方法基本没有啥缺点,使用在设计中,技巧性比较多,对设计的细腻感受要求比较高,需要多练习。

万字干货!超全面的色彩与应用指南

黑白色搭配不过时

黑色是所有中性色中最强的,而白色是最常用的背景颜色。黑色是一个很好的选择,有种高端和永恒的感觉,而白色可以带给用户自由,宽敞和透气的感觉。如上所述,黑色和白色也是最大的对比色,如果合理的使用黑色配合白色,会营造出一种优雅的氛围。

万字干货!超全面的色彩与应用指南

强交互色彩

交互色彩在执行过程中必须清晰且在界面中保持一致。号召性用语必须相对于背景具有足够的对比度,并且相对于其他组件必须具有足够的视觉权重,以便用户可以轻松识别它们。Nike 健身应用中,「开始」按钮以高饱和度的柠檬绿作为主色,从背景中脱引而出。

万字干货!超全面的色彩与应用指南

但是,交互色彩并不总是以最具饱和度或最亮为特征,而是通过色调、形状、大小或对比度,从屏幕上脱颖而出。因此,交互色彩的有效性将基于用户识别交互区域和执行任务的速度来衡量。同时,次要功能权重要更轻,并在视觉上更接近信息元素。如上图 Nike Training 界面中,“设置”和“声音”按钮只用简单的白色,减轻对主按钮的干扰,也避免了页面中出现多个强交互按钮。

保证良好的可读性

可读性是任何设计中的重要因素。你的颜色应该清晰易读,尤其是在处理文字时。因此对比度对视觉效果的影响就非常关键,对比度过小,就会使得界面出现灰蒙蒙的效果。清晰的对比度,一般会采用色彩的两极,黑纸白字或白纸黑字。而在彩色背景上要让内容清晰可见,就需要搭配纯白或高明度的文字,避免灰色文字。也要注意避免彩色背景上搭配互补色和明度接近的文字,因为这两种搭配会产生一种“震颤效应”,发出光晕的视觉效果。

万字干货!超全面的色彩与应用指南

UI 中的阴影

没有完全纯黑的阴影,阴影的颜色是会受到物体本身固有色的影响,一定要避免使用纯黑色(#000000),使用不太深的灰色,效果会更好。对于有颜色的元素,好的做法是为阴影设定与元素相同的颜色,并使其更暗一些。

万字干货!超全面的色彩与应用指南

如果是有颜色的元素,并且它处在黑暗的背景下,一般情况下,是不建议使用阴影的。但是如果你一定要用,把阴影透明度调到小于 10%及以下,并且颜色跟随主色调来。比如按钮为绿色,则可以为按钮设定一个更深的绿色阴影,并加上小于 10%的透明度数值。如下图,左侧的按钮阴影很自然,右侧的则有一层模糊发光的效果,显得不够漂亮。

万字干货!超全面的色彩与应用指南

  • 知识点:

为什么「超链接文字」要用蓝色?

简单说,因为在最早期的网站页面中,蓝色能呈现最高的对比度。

万字干货!超全面的色彩与应用指南

Tim Berners-Lee——web 的主要开创者,被认为是最早用蓝色链接的人。

一个很早期的 web 浏览器 Mosaic,用的是深灰色背景和黑色文字。那时候,能用的非黑色、最深的文字颜色,就是蓝色。所以,让超链接文字突出显示,同时保证可读性,就选定了蓝色。此后超链接文字都用蓝色的传统沿用至今。

2. App 设计中的色彩搭配

App 的色彩搭配能直观、快速的反馈到用户的大脑中形成记忆思维。好的色彩搭配可以加深用户对产品的印象;明确界面的视觉层次,让用户分清主次信息;同时还能给用户赏心悦目的视觉享受。那么,在 UI 设计时该如何进行色彩搭配呢?我们可以从 App 中都包含了那些色彩开始,通常一个 App 中包含了主色、辅助色、点缀色、背景色这 4 类,下面就以微信读书为例进行详细的讲解(个人角度)。

主色

主色是指在配色中处于主导地位的色彩,给用户的第一眼印象,通常是产品的品牌色。在 App 设计中,主色一般占有色相色彩的 60%的比例。这里指的是 60%的界面都使用到的主色比例,而不是使用面积(因为通常一个界面中使用面积最大的是背景色)。还有就是背景色多为浅灰色或白色,它们都属于无色相色彩,因此不涉及到配色过程中。我们看到微信读书的第一印象,就可以判断它的主色为蓝色,这也是它的品牌色。在标签栏、按钮、图标、注册登陆全都使用了这种纯净的主色,使界面看上去非常和谐一致。

万字干货!超全面的色彩与应用指南

辅助色

辅助色与主色相辅相成,辅助色的功能是帮助主色建立更完整的形象,使界面丰富精彩起来,避免画面过于单一。通常,主色的邻近色、互补色、分散互补色和三角对立色都可以成为优秀的辅助色,但注意辅助色不宜过多,否则就会使界面看上去花哨分散了主题。根据 6:3:1 原则,辅助色可以占有色相色彩的 30%或更少为宜。

万字干货!超全面的色彩与应用指南

在微信读书中,绿色、橙色、梅红、蓝紫色是除了主色以外使用最多的颜色,它们都是辅助色,主要用于功能图标和栏目分类上。虽然辅助色看起来有点多,但其实都是从主色的邻近色和对比色(及其邻近色)中提取出来的搭配,而且只用在页面中很少的地方,这种搭配技巧既可以丰富色彩的搭配,传递出年轻活跃的产品气质,又保证了整体搭配的和谐统一。

万字干货!超全面的色彩与应用指南

点缀色

点缀色是除了主色和辅助色以外的另一种色彩,通常体现在细节上。其作用是,当页面中主色和辅助色不能满足关键信息的提示时,就需要点缀色来吸引用户眼球,还有就是利用点缀色来平衡画面的冷暖色调。点缀色通常都是分散的,使用面积小,颜色非常显眼,能与主色形成强烈的对比。一般点缀色是主色的互补色。在微信读书中,使用了香槟金、梅红和红色作为点缀色。香槟金用在文章分享按钮上,梅红色用在点赞图标上,强调其特殊性,红色用在通知及退出登录提醒上,用于警示。

万字干货!超全面的色彩与应用指南

来康康这三种点缀色与主色之间存在什么样的关系,在色相(H)上,3 种点缀色为邻近色,与主色为互补色;在明度(B)上,3 种点缀色均为高明度色彩,起到强提醒的作用。这种强对比的互补色的点缀色可以快速引起用户注意力。

万字干货!超全面的色彩与应用指南

背景色

背景色就比较好理解了,通常为了衬托内容,大多数 App 都是用浅灰色作为背景色,以白色作为背景色的对比色,来区分视觉层次。建议是可以根据前景色来提取背景色,将其调亮或变暗,这样可以让界面色调更加统一。在微信读书中背景色是偏蓝色调的浅灰色,而不是纯灰色,背景对比色是在白色里加入了蓝色色相,而不是纯白色,整体对比较柔和,给人清爽通透的感觉。

万字干货!超全面的色彩与应用指南

  • 知识点:

支付宝 Alipay Design 团队提出过一个配色原则:

以同色系配色为主导,多色搭配为辅。

同色系为统一的色相,使用中可以加深品牌色的感知,可以让界面更有层次,同时可以让界面保持色彩上的一致性;由于业务的多样化,我们需要多色搭配为辅;多色的辅助颜色,也可称之为功能色,可设定不同的任务属性和情感表达;再搭配中性色黑白灰,赋予更多的变化和层次。两种配色通过主次、使用比例,可灵活运用在业务的各个场景中,具有非常好的延展性。

3. 迷人的渐变色

不同于单一色彩,渐变色不属于任何色彩,它营造出千变万化的视觉效果,却又不会增加视觉负担。相较于单一的色彩,渐变色的复合性质让它在界面设计中具有更强的视觉冲击力,有助于快速抢占视线。如今,这种的色彩正逐渐成为一种潮流,究其原因是目前大量的扁平风格造成 UI 设计的严重同质化,人们需要追求更加个性的视觉语言来满足日益增长的设计需求。下面我们来了解几种常见的渐变的使用技巧。

色相、饱和度、明度的渐变

色相(H)渐变是指由一种色彩向另一种色彩的过渡,这种渐变因跨度大产生的视觉效果非常明显;饱和度(S)渐变是指同一种色彩不同纯度的过度,其产生的视觉效果比较和谐单调;明度(B)渐变是同一种色彩不同明暗的过度,这种渐变的视觉效果给人一种沉静的氛围。

万字干货!超全面的色彩与应用指南

渐变的表现形式

在界面设计中经常看多各种各样的渐变表现方式,使用最多的有以下几种:

  • 水平渐变

这个很好理解,是指角度为 0 的线性渐变,是最流行的渐变形式。界面设计中多用在导航栏、进度条、按钮等元素上,能让画面变得精致而通透。例如京东使用橙红渐变的设计语言贯穿整个 App,从应用图标到导航栏、按钮、标签,全部都运用了这种由红色到橙色的过渡。仔细观察发现在很多小标签上都使用了水平渐变设计手法,使产品看起来更年轻化。

万字干货!超全面的色彩与应用指南

  • 知识点:

在水平渐变中,通常把轻(亮)的色彩放在左边,重(暗)的色彩放在右边,这样由左向右的方向感刚好与人的浏览习惯保持一致。而反过来就会与人的浏览视线相悖,应避免。

垂直渐变

即角度为 90°的线性渐变,它通常被用在正方形或竖条形的元素上,如注册登陆页,个人中心头部等。垂直渐变中上下两种色彩的深浅变化会产生截然不同的视觉效果,上浅下深会让给人一种凸起的立体感,而上深下浅会给人一种凹陷下去的空间感。例如「纪念碑谷」的背景是采用了单色相和多色相的垂直渐变作为游戏背景,在让整个画面丰富的同时又不会太抢夺主体的色彩,使画面显得清新透气而不沉闷。

万字干货!超全面的色彩与应用指南

角度渐变

角度渐变通常有对角渐变和多角度渐变。有角度的渐变相比水平和垂直渐变,它的使用场景更广,如图标背板、启动页、注册登录页、标签等。想让界面更加绚丽、动感和迷人,这时候我们可以考虑多组渐变搭配使用。

万字干货!超全面的色彩与应用指南

色块渐变

渐变的颜色不只可以运用在一个色块上,还可以运用在一组色块上。设计师运用一组近似性色彩,将每个菜单项清晰区分开,让界面平衡在一个频率上,这样的画面更有节奏感和舒适性。不同于平滑的渐变,色块渐变不再是单纯的背景装饰,在某些地方还具有一定的功能性,比如使用不同的色块来分割的列表样式。Clear Todos 是一款日常任务清单的 APP,它抛弃了传统的列表样式,使用了一系列色块来作为列表的分割,非常漂亮和精致。

万字干货!超全面的色彩与应用指南

径向渐变

是指色彩以圆心向四周扩散的渐变,是一种模拟光源照射的视觉效果,因此光源是整个画面的视觉焦点,将关键元素放在光源中心就会成为主角。通常被运用到大背景上,如启动页、引导页等。Solar 天气应用的背景就是径向渐变,光源扩散的效果营造出一种梦幻般的美感。

万字干货!超全面的色彩与应用指南

和谐的渐变色

渐变色是由一个色彩走向另一个色彩的过程,有着迷人的视觉效果。如果你仔细观察两种色彩的过渡关系,就会发现不是每次都会得到满意的效果,例如红绿渐变就很糟糕,因为它们两者是互为对立的色彩,但是如果加入黄色的过渡色就会好很多。原因是当两种色彩之间超过 90 度就会导致其渐变色看上去不太和谐自然,只有控制在 90 度之内才会产生美妙的变化。如何改善超过 90 度的两种色相的渐变呢?这时候可以在两色之间加入过渡色进行调和。例如当从黄色到蓝色渐变时,就可以加入紫色作为过渡才能呈现完美的视觉效果。

万字干货!超全面的色彩与应用指南

  • 知识点:

在搭配渐变色时,尽量只改变其色相(H)、饱和度(S)、明度(B)中的一项,这样才能创造出和谐的渐变色方案。

创建调色板及配色工具

调色板帮助我们在设计项目中建立色彩规范、提高工作效率。通过上文对色彩基础知识的学习,接下来为大家介绍几种简单易用的创建调色板的小技巧,以及 Materia design 配色方法和配色网站推荐。

1. 从设计作品收集色彩

打开 dribbble,每一幅作品预览页左下角都有一份自动生成的配色板,很多同学可能不知道这个配色文件是可以下载的。将调色板保存到本地,为自己在创作时提供灵感。在 ps 里的操作步骤是:点击“窗口—色板”,然后在色板的属性面板右上角打开“导入色板”,载入刚下载的色彩文件即可。

万字干货!超全面的色彩与应用指南

它也有颜色搜索工具,输入或选择颜色值即可搜索相关配色的设计作品。

万字干货!超全面的色彩与应用指南

2. 从图片取色

这种方法也很常用,不需要任何插件,丢一张图片到 Ps,然后将图片「马赛克」处理下就可得到一组配色。例如,我们需要一组同色系的绿色,在网上(建议 unsplash 或 500px 等专业图片网站)找一张树叶的图片,接着将图片在 Ps 中打开,进入“滤镜—像素化—马赛克”,在打开的窗口里调节单元格大小即可。

万字干货!超全面的色彩与应用指南

同时,建议平时多去收集好看的摄影图片和优秀的配色方案,看的多了就知道什么是好的什么是 Low 的配色,对提升审美也有很大帮助。

万字干货!超全面的色彩与应用指南

△ pinterest画板

3. 自定义色块叠加

该方法稍微复杂一点,示例步骤如下:第一步绘制一个正方形做底板,填充一个颜色#5354F0;第二步分别在正方形的上和下 1/3 处叠加 20%的白色和黑色;第三步分别在正方形中和右 1/3 处叠加 40%、80%的紫红色#DF56FA;最后改变紫红色图层的混合模式为叠加即可得到一组蓝紫色色调的调色板。

万字干货!超全面的色彩与应用指南

4. 色彩系统

Materia design 调色板

Materia design 从生活场景中提炼出 19 个充满活力的色彩,旨在和谐地协同工作,可用于开发品牌调色板。Materia design 提供了一整套调色板,从原色开始,延伸出其他许多色彩,这些色彩和谐相处,可用于产品设计的品牌色。基础色的饱和度是 500,Google 建议以此作为产品应用的主色调,可以再选择一种辅助色,并在主色的基础上进行饱和度,明度变化,构成一套配色方案。

万字干货!超全面的色彩与应用指南

如果上面的色板不能满足你的需求,你可以选择一个主色,Materia design 调色板生成工具会为你生成完整的色板。

万字干货!超全面的色彩与应用指南

主色和强调色

在色彩选取时,需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色,建议选择饱和度为 500 的基础色作为主色,根据设计需要在主色的基础上增加 1~3 种不同饱和度、明度的色彩建立层次感,再选择一种强调色突出重要内容或操作,例如 FAB 的背景色。

万字干货!超全面的色彩与应用指南

深/浅背景上的文字

Materia design 通过文本的不透明度建立在不同背景上的深浅对比,对于浅色背景上黑色文字,主文字不透明度 87%,次要文字不透明度 60%,禁用文字不透明度 38%;而黑色背景上的白色文字正好相反;彩色背景上的白色文字不透明度 100%,分割线不透明度 12%。Ant Design 也定义了一套用于界面文字、背景、分割线的中性色,在落地的时候同样也是按照透明度的方式实现的。

万字干货!超全面的色彩与应用指南

背景

为了提高应用之间的一致性和阅读的可读性,背景色根据设计需要选择纯白色或饱和度依次为 50、100、300 的灰色。

万字干货!超全面的色彩与应用指南

5. 配色工具推荐

颜色是一个很难掌握的概念-因为有无限多种可能的颜色组合,对于很多设计师来说还是一件蛮困难的事,为了让设计配色变得容易些,下面推荐几个常用的配色网站,希望能帮助大家在日常工作中节省更多的时间。

Adobe Color

Adobe Color 是一个基于网络的应用程序和创意社区,提供免费的色彩主题,并且在 Adobe 相应的软件中也提供了扩展程序,比如我们常用的 Photoshop 和 Illustrator。

万字干货!超全面的色彩与应用指南

△ https://color.adobe.com/

Adobe Color 通过拖拽色轮或输入自定义色值,可以创造出基于相似、互补、三原色、正方形等不同色彩规则的配色方案。除此之外,还支持 CMYK、RGB、HSV 多种色彩模式的配色调整。用法很简单,点击颜色块上的小三角确定基础色,就会自动生成 5 个基于你所选色彩规则的配色方案,拖动下方的颜色条时相应的也会改变配色方案。如果没有灵感可以通过顶部导航进入“探索”页,这里为我们提供了很多提取好的颜色和图片,有的是摄影作品,有的是设计作品,上方的轮播图提供的一些其他内容,比如潘通流行色、Adobe 社区和手机端的 APP 等等,非常的实用。

Eva Design System

Eva Design System 是一个基于深度学习算法的配色网站。适用于给我们的产品或品牌生成一个系统的配色方案。右上角可以切换浅色模式和深色模式的对比。

万字干货!超全面的色彩与应用指南

△ https://colors.eva.design/

Colorhunt

Color Hunt 是由设计师 Gal Shir 创建的开放调色板集合,每天更新丰富的配色方案。颜色卡片下方可以看到更新的时间和喜欢人数。鼠标悬浮在任一色块上显示颜色值,点击颜色卡进入详情页可下载和分享,惊喜的是还可以添加到 chrome 浏览器,方便随时随地使用。

万字干货!超全面的色彩与应用指南

△ https://colorhunt.co/

Grabient

Grabient 是一个非常漂亮且实用的渐变配色网站,支持 CSS 样式代码复制、360 度渐变旋转、自由增加或删除渐变颜色等功能。设计师可以在色块下方自由添加和调整渐变的色系、以及线性渐变方向。

万字干货!超全面的色彩与应用指南

△ https://www.grabient.com/

当然,以上这些配色工具只是为我们提供方便的,而不是主导我们的,所以在使用配色工具的时候最好是要有一定的理论基础作为支撑,让你的配色有理有据,切忌生搬硬套。

  • 知识点:

对于新手设计师来说,颜色越少越容易把控画面。色彩层级越精简,就越容易达到整体色彩平衡,掌握好色彩的功能划分必然会让你的配色过程保持思路清晰从而提率。

万字干货!超全面的色彩与应用指南

同时,不管是 2C 还是 2B,很多大公司都构建了自己的设计系统。如果你想学习别人是如何进行配色布局的,最快的方式就是研究他们的设计源文件。

6. 关于色彩空间配置(附加内容)

建议设计软件使用 sRGB 作为色彩空间的默认配置,而不要采用未管理( Sketch 中默认是未管理),若团队协作请提前保持色彩空间配置的统一性。如果有需要针对广色域色彩空间做项目,可以单独设置该项目文档的色彩空间为 Display P3 或者 Adobe RGB。

Mac 系统色彩空间配置

建议所有 macOS 用户都在系统偏好设定的显示器颜色设定当中换用 sRGB IEC61966-2.1 这个校色方案,可以极大改善系统显示效能。如果有外接显示器,也建议使用外接的默认选项,默认选项一般可以发挥出该显示器的最大色彩性能。

万字干货!超全面的色彩与应用指南

Sketch 色彩空间配置

Sketch 默认颜色配置是 Unmanaged「非托管」, 我们可以在「偏好设置」中为 Sketch 指定默认的色彩空间配置,如此一来每次新建设计文档将会默认采用我们的设置作为默认的色彩空间,不用每次新建文档都单独设置一次。

设置方法:Sketch → 偏好设置(Preferences) → 通用(General) → 颜色描述文件(Color Profile),修改下拉框选择器的内容为 sRGB IEC61996-2.1。(其他设计软件设置方法类似)

万字干货!超全面的色彩与应用指南

如果要更改已有的文档为 sRGB 色彩配置,可以通过文件——更改颜色配置,在弹出的对话窗里对文件进行色彩空间的更改即可。

写在最后

其实无论是色彩理论还是配色方法,最本质的东西就那些,更多的还是需要设计师在日后的工作中不断的摸索和积累。这篇文章全部写下来耗费了不少时间(小声 BB:其实每篇都是),抱歉内容确实有点多,但其实已经是收着点写了。就像大树一样,有很多分枝不断生长,需要了解很多细分出来的深度知识。这也是写这类文章的乐趣,通过不断的查阅资料,把过去很多模糊的概念摸清楚了。果然学透一个知识点的最好方式就是把它讲出来才能真正为自己所有。关于色彩的知识先分享到这里,希望对大家有所帮助,文中有不严谨或错误的地方,欢迎大家指正,一起学习成长。


文章来源:优设网     作者:印迹



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


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

雪涛

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

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

“风口之上”是指工作大行业是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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

周周

2020 年,新冠疫情席卷全球,后疫情时代的需求也促使设计师们不断提出更有意义的医疗解决方案。作者梳理了医疗保健类 APP 的类型,从产品的研究、功能特性、导航、颜色等角度提出了针对医疗保健 APP 的一系列设计建议,简单直观的界面、便捷的功能,以及积极的情感,才能使用户接受并喜欢原本 “令人生畏” 的医疗产品。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Justas Galaburda 绘制的插画

在移动应用市场中,的应用类别是 “游戏”,而 “健康与健身” 类勉强跻身前十名。2020 年是十分艰难的一年,但也创造了很多机会,例如,移动应用市场中医疗行业的产品大热,受到多方关注,这类产品直接影响人们的健康行为,可以使人们的生活更加轻松愉快。

为此,大批创业人士开始关注医疗这一领域。首先,你需要制作一个功能强大的 APP,因为如果一款产品不能交付使用的话,它就一文不值。但是,这种功能必须通过设计能力来呈现。一个好的医疗保健 APP 设计,应突出其最重要的细节,引导用户进行操作,并提出下一步建议,从而产生必要的行动。APP 本身可以成为有效的潜在客户开发工具和公司的主要产品。对于一个健康或医学相关的产品来说,用户界面或用户体验设计尤为重要。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ George Frigo 设计的呼吸检测 APP

本文将探讨一些医疗保建 APP 设计的成功案例和经验,这对设计师和企业来说都很有帮助。

医疗保健应用的类型

值得注意的是,“医疗保健类 APP” 是一个综合性概念,涵盖了许多与健康和医学相关的数字产品。

医疗保健 APP 类型很多,包括但不限于:

  • 医护人员与患者进行远程咨询的 APP(远程医疗)
  • 患者与其电子健康病历(EMR,Electronic Health Records)进行交互的 APP
  • 记录和管理患者生命体征的 APP
  • 提醒患者何时服用药物或进行运动的 APP
  • 用于医学计算的 APP
  • 包含医疗信息的参考型 APP
  • 健身和运动类 APP
  • 健康生活方式和健康管理类 APP(日常饮水量、睡眠管理等)

这似乎是一个相当宽泛的主题(例如,卡路里计数 APP 和医学教育解决方案相差甚远,却都属于这个领域)。但是,有一些通用的设计方案,可以提高任何一款 mHealth APP 的易用性。( mHealth(Mobile Health,移动医疗或移动健康):通过移动设备提供与医疗相关的服务,例如,通过 PDA、移动电话和卫星通信来提供医疗信息和医疗服务等。)

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△Victor Nikitin 的医疗类 APP

如何设计移动医疗保健 APP

一款 APP,即使它不是企业的主要产品,也可能具有巨大的价值。例如,用于医疗工作的配套 APP,能够为客户提供信息和服务,从而减轻员工的负担。如果一款医疗保健类 APP 是企业的主要产品(例如,健身或冥想 APP),因为没有硬核的业务场景支持,会有很大的风险。有时,这类 APP 设计中的不足会导致用户完全放弃使用它。

为了避免这种情况,我们来看看设计医疗保健 APP 的 12 个要点,以及它们如何帮助设计师们设计出更具针对性、更直观、更的 APP。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Anatoly 设计的 Healthcare APP

1. 研究 – 成功的第一步

在制作 APP 界面原型之前,你需要了解产品的目标受众是谁,他们的地理分布、社会人口特征以及心理特征是什么。因为没有一种产品可以满足所有人的需求。用户的兴趣和能力决定了他们如何与 APP 进行交互。因此,回答以下问题将对你有所帮助:

  • 产品的目标受众是谁?
  • 他们喜欢什么?
  • 他们每天都使用哪些 APP?
  • 他们使用这些 APP 是出于什么目的?

一般来说,患者和医生都会使用医疗保健类 APP(假设我们将生活方式类 APP 的用户也视为患者)。这两类用户在功能和 UI 设计方面有不同的需求。

医务人员通常需要快速找到一些数据项,例如 EHR / EMR、药物规格、诊断和治疗建议、参考材料等。但是,患者希望能与尽可能少的信息进行交互,且这些信息应该简单易懂。因为这类用户中有很多是老年人,或是存在某些障碍的人。

只有在进行适当的用户研究,并得出相应结论后,设计师才可以着手进行医疗保健类 APP 的设计。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Chahua 设计的健康管理 APP

2. 每一个案例都简洁明了

对于一般人来说,医学是一门复杂的学科。所以在设计医疗保健类 APP 时,请尽可能地让它们保持简单,这有助于让用户平静下来,并保持专注。

“复杂性是你的敌人。很多傻瓜都可以让事情变复杂,而让事情变简单是很困难的。” — 理查德·布兰森

为了让医疗类 APP 看起来很重要并给人留下深刻印象,而将其界面做得过于详细,是没有意义的。即使该产品是为医务人员设计的,也最好 让界面和逻辑易于理解。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ lgor Savelev 设计的医疗类 APP

在设计医疗保健类 APP 的用户界面时,请提供有意义的用户引导,并 使界面直观易懂。否则,用户可能会在触达该应用核心内容之前就对其体验感到沮丧。

如果该 APP 清晰明了,医生及患者双方都更容易接受。这样一来,用户易于学习上手。即使它是针对医疗的解决方案,人们也不会感到不习惯。

为帮助用户在比较舒适的节奏下了解产品功能,请使用渐进呈现的原则,逐步为用户提供指示。从新手指引开始,将应用程序中的每个操作分成可管理的小模块,每次仅提供一个指引。(渐进呈现(progressive disclosure):每次只展示用户当前需要的信息,引导人们平缓地由简单状态进入复杂状态。例如将原本复杂的逻辑隐藏起来,通过更易于认知的界面形式帮助人们轻松完成最为基础的任务。)

另外,采用被动输入、自动输入、调整键盘和动态验证字段的方式,能够限制用户必须输入的信息量。

所有医疗信息必须由受过相关教育且具备专业知识的专家提供。否则,内容要么不完整,要么包含错误,对于医疗产品来说是不可接受的。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ yurig 为医生设计的医疗类 APP

3. 功能和特性

医疗保健类 APP 的 功能及特性取决于其用途和目标受众。例如,医疗中心 APP 需为用户提供个人帐户,在该帐户中,用户可查看其就诊记录、就诊建议以及预约情况。如果没有安全加密的视频会议和通讯功能,远程医疗 APP 将毫无意义。毕竟医疗类 APP 依赖的是可靠且有用的通知。

主页承载着一个 APP 的主要功能。请试着回答这个问题:用户为什么使用你的 APP?或与之类似的 APP 呢?如果用户访问 APP 是为了记录或接收某些信息,或是联系医生,查看他们的进程等,那么这个功能应该位于 APP 的主页。

重要的是,正如前文所提到的,避免一次性出现太多功能,从而造成混乱。不可否认的是,这种情况经常发生在老版本的 APP 上。这些 APP 常常不断添加新功能,偏离焦点,以至于只有专家用户才能理解它。

(专家用户(super-users):专家用户在生活中愿意给予企业反馈,主动做口碑,或是积极分享、点赞等,这些无法以价钱衡量,却能在品牌价值传递、产品创新、营销推广等经营各环节,为企业带来实质贡献。)

根据帕累托原理(二八法则),80% 的用户倾向于使用不超过 20% 的功能。因此,务必确认哪些功能对用户来说是最重要的。

(帕累托原理( Pareto’s principle):也称二八法则。在任何特定群体中,重要的因子通常只占少数,因此控制具有重要性的少数因子,即可控制全局。)

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Manoj Dalvadi 设计的 Medicine APP

4. 便于探索与享受的导航

清晰的导航结构是一个有效的医疗保健类 APP 的必要条件,也是医疗保健类 APP 用户界面设计的基础。没有清晰的导航,APP 是不会被广泛使用的。完善的导航意味着率和易用性,这对用户来说是十分有价值的。医疗专业人士需要的是能够快速开展工作的应用,因为他们花费了太多时间在处理电子健康档案(EHR)上。一项由斯坦福医学院展开的调查发现,医生花费在每个病人身上的时间,有 62% 是用于处理电子健康档案。如果针对医务人员的 APP 不够简洁,那 APP 便失去了使用价值。同样的,对于患者来说,他们也不会喜欢混乱的导航,即使当前的任务不是很重要。

重要的信息应放在明显的位置,并在必要时提供详情。根据 3 次点击原则,系统应保证用户在 3 次点击之内,找到所需信息。

为了使 APP 导航结构清晰,可采用标准的 APP 导航组件,如汉堡菜单、标签栏或抽屉式导航等。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Alex Samofalov 设计的医疗类 APP

颜色的选择

一般来说,APP 的颜色选择取决于目标受众以及该 APP 的主题。

医疗保健类 APP 设计通常采用中性色调,尤其是冷色调的蓝色和绿色,背景一般为 白色。设计师这样做是为了达到以下效果:利用柔和的色彩和医疗保健行业的联系,缓解用户焦虑并增加可信度。因此,在医疗保健类 APP 的用户界面中,亮红色或黄色是很少见的。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Adam Sokołowski 设计的医疗类 APP — Pharmagy

但是,考虑到医疗类软件的多功能性,颜色选择并没有特别的限制。主要思路是,这类 APP 的整体外观应营造积极的印象,不应引起焦虑、恐惧或其他不良情绪。

例如,深色的健身 APP 看起来优雅且有品味:

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Saepul Rohman 的 UI 设计—健康及锻炼类 APP

而亮色为 APP 增添了许多活力:

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Michal Parulski 设计的移动健身 APP

追求个性化

APP 的个性化定制是近年来最显著的设计趋势之一。特定的功能与特定的用户模式相适应,并且系统会暗示用户下一步可执行的操作,以免被用户忽略。

这些技术的目标是,帮助用户更快地利用 APP 解决问题。因此,有必要识别和分析用户模式,并跟进他们的变化。

正如每个人都有着不同的健康状况,用户希望他们所使用的 APP 也能提供同样独特的体验。除此之外,在非医疗保健行业,也有 33% 的用户会因个性化程度不足而卸载应用程序。

在设计医疗保健类 APP 时,可以使用许多自定义选项,如颜色主题、个性化通知、交互元素,以及利用 AI 定制个性化推荐等。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Jawad 设计的在线咨询 APP

无障碍性是必需的

无障碍的 UI 设计对任何 APP 来说都很重要,对于医疗类 APP 尤为重要。

移动医疗解决方案针对的是不同年龄,具有不同视觉和听觉能力、身体和心理特征的用户。因此,医疗保健类 APP 主要功能的设计,应保证每个潜在用户都能访问。请考虑可能存在的限制,并努力克服它们的负面影响。例如,有晕动症的人不会喜欢过多的动效。

但这并不意味着一个医疗保健类 APP 的界面中只能有两种颜色,也并非所有文本字号都要非常大,但这确实意味着设计师将面临一些挑战。对于医疗保健类 APP 来说,其中的挑战也许相对多一些。无障碍设计能带来更多的机会,而不是负担。试着从浏览 W3C 网页中关于无障碍指南的内容开始,尝试使用色盲模拟器,如下图这种。

无需多言,试试移动端无障碍设计的常用方式:将主要元素的尺寸控制一个拇指大小的区域中、添加将视图改为水平模式的选项,以及放大文本的选项等。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ keithar 的对比度分析仪和色盲模拟器

积极态度的力量

医学不仅复杂,而且通常令人生畏,即使涉及的医学内容不多。一个比较聪明的办法是使 APP 看起来与医学毫不相干。这将消除用户因刻板印象而产生的压力,并使体验更加愉悦。

除了使用柔和的颜色,还可以在用户使用 APP 的不同阶段 推送鼓舞人心的消息、有趣的图片、欢快的语音或其他元素。医疗保健类 APP 用户界面中的图像和图标,应始终带给用户积极、愉悦的情绪,并 营造一种无痛感和安全感。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Mahdieh Khalili 设计的冠状病毒 APP

区别于 Web 设计

当产品已具备现成的网站,企业方甚至设计师为了降低制作成本,可能会想从产品的网页版中 “借鉴” 一些解决方案直接应用在移动端设计中,这很可能导致用户拒绝使用 APP。

用户与移动设备间的交互不同于与电脑间的交互。移动设备的屏幕比显示器屏幕或笔记本屏幕小。此外,用户与移动设备交互的方式不同于在电脑上进行的操作。在移动设备上,我们做任何事情都依赖手指的移动,不愿意输入冗长的文本,但同时希望系统能更快地工作。

一般来说,尽管 APP 中的导航也很重要,但对于移动设备而言,更需关注的是交互设计。在大多数情况下,人们喜欢使用网站来获取信息,使用 APP 来完成任务。此外,APP 还集成了智能手机的功能,如加速度传感器和摄像头,这也是导致 APP 的用户界面设计与 Web 版有所不同的原因。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Grace Saraswati 设计的健康健身类 APP

好事过头反成坏事

视觉吸引力与功能性之间的平衡是非常重要的。医疗保健类 APP 必须便捷,且不能分散用户对内容的注意力。

图形元素,包括动画,应始终以满足使用目的为前提,来考虑是否需要,如数据输入,以及说明用户与系统间的微交互等。不能仅仅因为它看起来不错而添加。不要过度使用渐变和阴影,要将用户注意力集中在主要信息上。字体也只需选择一种,可以通过改变字号和其他特征(如斜体、粗体)来做区分。

使用简单的配色方案可以更清晰地传达品牌信息,并创造更好的导航效果。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Dibbendo Pranto 的健康及活动追踪交互设计

是否借鉴竞争对手

你可能会在某些点上考虑,是否要借鉴一些竞争对手的成功案例。好吧,如果这有用的话……一方面,抄袭其他产品是不明智的,因为 它们的设计可能并不完善。你采纳的可能是竞争对手的错误决策,以至于阻碍 APP 的未来发展。

另一方面,你应该先对其他应用进行分析,对竞品进行研究。应该参考用户以前使用其他 APP 的经历,并进行借鉴,从而降低用户的学习成本。添加太多创意会使 APP 显得很烦人,用户需要花大量时间去习惯并学习操作。为此,可以参考苹果制定的人机交互指南(Human Interface Guidelines )和谷歌制定的材料设计指南( Material Design)。

“用户大部分时间是花在别人家的网站上。” — 雅各布定律

(雅各布定律:用户在其他千千万万个网站中积累经验,学会如何使用网站,当一个网站跟其他网站一致时,用户会立刻知道该如何操作,但如果违反了雅各布定律,用户会毫不犹豫地离开。)

必须根据品牌、服务和产品细节来进行设计。例如,健身类 APP 与医学计算器有着很大区别。设计必须完全符合目标受众的要求、APP 的功能细节及主题场景等。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△ Martyna Zielińska 的医疗提醒 APP

可用性测试

最后,重要的是要记住,每个设计师都有自己的观点,认为这个或那个决定是合理或有效的。他们可能会对 APP 架构和导航的一致性,严谨的设计解决方案,以及产品的实用价值深信不疑,以至于忘记了测试。通过不断的实践,设计师提高了自己的共情能力,可以更好地理解用户需求。但事实上,直觉和经验带来的潜在陷阱也会给应用带来负面影响。

只有在分析用户与 APP 界面交互的相关数据后,才能得出相对准确的结论。测试有助于及时获得反馈,覆盖 APP 中的所有行为场景,并检查交互模式。

用户的积极参与是成功的关键。相关测试受众的年龄、职业、地理位置、性别、文化和宗教背景等要尽可能接近目标受众,越接近越好。尽可能多地让他们使用 APP 的主要功能并收集反馈。

这份医疗保健类 APP 设计的 12 个要点,我先收藏了

△  Alex Samofalov 设计的患者卡片 APP

结论

设计所关注的并不仅仅是颜色和字体,而是创造价值和解决业务问题的能力。健康是一个敏感且具有挑战性的问题,需要特别注意。设计师们一直努力地在医疗类 APP 极高的安全性及可用性要求与界面美观性之间取得平衡。

经过深思熟虑的医疗保健用户体验和 UI 设计是一种极好的工具,它能凭借简单直观的界面、便捷的功能以及它所带来的积极情感等,吸引用户参与体验。


文章来源:优设网     作者:TCC翻译情报局



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


论一致性设计那些事

雪涛

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




目录


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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

天猫海信中央空调旗舰店-双十二主页面

前端达人

天猫海信中央空调旗舰店-双十二主页面
已于双十二更换使用
本来是双十一建的模使用的,页面都做好了,后因配合线下活动修改了页面,使用了线下海报改版的页面度过了双十一,所以就不上传双十一的图了,抱着既然做了就不能浪费的原则,双十一改成十二就上线使用了。
(PS:第一次使用C4D,一边百度一边建模,一边百度一边打光调材质做的。。。)

仅用于展示,未经允许,请勿用于任何用途



转自:站酷

作者:杜失忆


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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档