首页

如何使用色彩可视化出行耗时

资深UI设计者

比对出行时长

每天,世界上有40亿人在城市中穿行,这个不断增长变化的群体占据了世界人口的一半还多。了解人们如何出行以及出行的演变对于改善我们的城市、环境和数十亿人的生活至关重要。我们创建了 Uber Movement,来帮助大家增进理解。

视频地址:https://youtu.be/bszvEIMVsIc (需翻墙)

目前,Uber已在全球700多个城市提供服务,所有出行数据不仅能帮助我们提高服务质量,也有可能帮助到城市规划师,以及那些渴望提高城市建设水平的人。Uber Movement允许用户以多种方式查看数据:用户可以查看某个日期某次出行的平均耗时,也可以查看某个区域不同日期范围内的平均耗时,或者可以对比同一个区域不同的两个行程的耗时。

图1:从华盛顿市中心出发到各地所需的出行时长

图1中的截图展现了从华盛顿市中心到达城市其他区域的平均耗时(在2016年3月16日铁路运输因维修而暂停服务)。截图a中显示了晚高峰的耗时情况,截图b显示了两周前铁路运输未中止的耗时情况,截图c则比对了两个时段下的数据,指示出铁路服务暂停对路面交通带来的严重影响。如图示,在上述情况下,晚高峰时段从1400 K St NE区到1500 Kearny St NE区的平均出行时间增加了67.8%。

对于需考虑在哪里新增公交线路的公共交通机构,以及那些判别什么时候主干道需要进行道路养护的城市机构,都能够通过这些数据了解到什么时候减少车道会对交通的影响最小,应向驾驶者提供哪些替代路线。

 

眼见为实

为了让这些数据有价值,必须让它们有使用价值。这就需要数据可视化的加持了。作为负责 Uber Movement 的产品设计师,我需要确保我们分享的数据是尽可能清晰易懂的。

我们遇到了一个有趣的问题:如何展示两个不同却又有关联的可视化元素。「时长热力图」展现了在一个特定的日期(例如,2016年1月11日星期一下午)下,从任一起始点到某个位置的耗时(以分钟为单位);也可以是一个跨度长达几个月(例如,2016年3月至5月的工作日早晨)的平均耗时。这个热力图使用了相邻色,基于相同的颜色来调整色调由亮至暗(如下图1所示,浅蓝色至深蓝色)。

「比对热力图」能够让用户对比相同路线不同时段下的平均耗时。这里需要凸显信息的对比度,哪一个时段下的耗时更少,少多少?对于该热力图,我们使用了对比色(如图2)来表现数据由0至两极(快与慢)。如果差值为零,则表示两种情况下的耗时相同。我们企图通过两个对比的颜色尽可能的凸显差异。

我们的用户会在这两种热力图中连续反复切换,所以我们需要将这两种模式从视觉上明确区分出来。

图2:早期设计的5阶色(左侧单位为绝对耗时,右侧单位为相对耗时比)

在早期的设计中(如图2),5阶相邻色(由淡绿色至蓝色)被用来表现路程的绝对耗时,而5阶对比色(由绿至淡黄再到红色)则用来表现两种条件的对比。

初期尝试使用五个颜色梯度,但在可用性测试中发现地图的色彩辨识度低(见下图3)。主要有以下几个问题:

  • 我们通过颜色表现由A点至B点的路程耗时,每一个目的地区域根据时间被赋予5阶范围中的一个颜色,并有20%的透明度,叠加在地图上。这样的设计呈现出由中心至外围的渐变效果,区块之间对比度较低,使它们看起来糊在一块,让色彩背后的数据以及地图上的标签都不那么易读。
  • 结果就是,5阶色彩没有足够的对比度将中心至边缘的区块区分开来。
  • 另外,5阶色彩不足以满足不同城市,不同时间段耗时的有效展示。

显而易见,可用性测试的参与者难以从地图判断出耗时,特别是当地图缩放聚焦在市中心时,也难以区分两种模式(耗时热力图/对比热力图),见图3。

图3:西雅图的出现时长

图3,以早期的设计效果(5阶相邻色)查看从西雅图市中心至其他区域的平均耗时,截图a 展现了西雅图所有区域的耗费时长,颜色让区块看起来“糊在一块儿”。截图b则展现了缩放聚焦至市中心区域时的效果,难以区分不同区域。

 

设计探索

通过多步的探索实验,我将这个复杂的设计难题拆解为几个不同的小挑战,并验证不同的方案,最终获得一个色彩系统达到易读性最理想的热图效果。

1.通过相邻色和对比色两个样本有效区分耗时热力图和对比热力图

由于同时应用相邻色与对比色,所用的配色就必须是“四色系”配色方案以明确区分。(译注:tetradic color 的翻译可能不合适,根据定义,其为一种大胆的配色方案,四种颜色对立均等地分布在色轮的四个方向上。)我使用了 Uber Movement 的品牌色(#2473BD)作为相邻色的基准色,然后使用 Paletton.com 列举了几组“四色系”配色方案,将四种颜色分配为两对互补组合。

图4:为实验准备的色阶方案

 

2.根据时长间隔等比或是梯度增加色组的色彩阶层数

早期设计从5阶色彩范围开始(如图2、3),两种模式的热图都产生了一种“糊在一块儿”的渐变效果。我们希望这个系统可以满足不同体量的城市,从市中心到外围区域的平均耗时跨度从30分钟到1.5小时不等。仅使用5种颜色来表现0至1.5小时,显然不足以让用户有效辩识地图上的时间跨度。

我实验性地将色彩范围的阶层从5增加到9,11,13。时间间隔分别以等比增加与梯度增加罗列(梯度增加以30分钟为总时长)。

表1:5、9、11、13色阶方案(左侧为等距增加,右侧为非等距增加)

之所以选择了梯度增加,是因为根据我们与城市规划者的沟通,了解到他们是基于「交通分析区(TAZ)」这种交通规划模型来进行分析的,它将每个区域以人口密度划分。城市区域的人口密度相比郊区会高很多。基于市区人口密度高,在市区对交通状况进行定义时,以每5分钟为间隔相比在郊区更有效。

颜色组通过 Chroma.js颜色助手计算生成。通过单颜色的变体给予一种连续性(见图5)。图中左侧(方案1)使用了单色系,右侧(方案2)则通过不同色调的颜色组合增加色组内的对比度。

图5:用于实验的2个色阶(左侧为淡色系,右侧为多色系)

 

3.尝试通过提升对比度去除掉区间的渐变效果

我将不同的颜色方案放到测试环境中去看看实际效果。为了去除渐变效果,在不受时间值和透明度影响的情况下,使用了彩色比例尺上的离散色值(见图6右侧的效果)。这样处在相同色彩尺度区间的区域看起来合并了,能够很好地辨别出区域之间耗时的异同。

图6:采用离散色值消除渐变色。(从左侧变为右侧)

早期的配色方案是基于「耗时」调整的色值,并且使用了20%的透明度,由此显示出一种「渐变效果」,导致邻近区域过于相近,用户难以根据颜色判断数值差异。新的配色方案则取消了以上两点,这使得相同时间的区域合并,清晰的色带使其更易读。

我还开发了个程序用来计算邻近色组的对比度(见下方表2),方案2配色中的9阶色彩范围表现出最佳的平均对比度,其次是11阶。考虑到平均路程耗费时长在不同城市会有较大的差异,方案2中的11阶色彩能提供最好的扩展性与可读性。与早期方案相比,新方案的对比度提高了30%。

从上面的图表可以看到,方案2配色有更高的对比度。其中,颜色阶次越少,对比度也越高。

 

4.在测试环境中对比颜色方案

基于以上的结果,我将方案1(单色系)排除了。我们将方案2放到测试环境中查看了两种间隔取色策略的效果。(译注:这里的两种策略指的是上面图表1呈现的两种取色方案。一种是例如每10分钟递进一个色阶,等分;另一种则是会变化,例如前30分钟每5分钟递进一个色阶,超过30分钟则每10分钟递进一个色阶。

表2:邻近色组的对比度计算

下图7展示了波士顿城整体区域的热图效果,让我们再看看聚焦到市中心的效果如何。

图7:波士顿城整体区域的热图效果

图8更进一步地确认了「变化时间间隔取色」提供了更高的对比度。

图8:「变化时间间隔取色」后的效果

 

5.对配色色阶进行微调

在这一系列的实验之后,才明确了这个方案(方案2中的11阶色彩)属最佳效果。能够很好地满足视图中大跨度时间差的呈现。不论是城市的整体纵览或是聚焦在市中心区域,都能提供最佳的对比度。

我们的内部团队对实验进行了评审和测试,并最终敲定了色彩范围(见图表1),结果将在近期发布。

随着越来越多的用户在 Uber Movement 中探索他们的城市,我们也在不断的学习与迭代,让数据更有效地为大家所用。

 

因效用而美

数据可视化的最终目的还是信息沟通。当我们试图清晰地传达事实时,创作物的美学不是附属品,而是一种内在价值。美感不只是粉饰。当数据可视化被合理地创造时,它因效用而美。

我们以一种微小的方式,通过不断试错与探索,试图让人们以一种全新的视角看看这个世界。它是有效的,也即是美的。



文章来源:UXRen    作者:Dawei Huang


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

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

资深UI设计者

新版本的改动介绍

在9月底双十一临近的关口上,淘宝上线了 9.13 新版本,对首页做出了巨大的改版,堪称这 5 年来力度最大的改版幅度。

我们先来简单看看新版本有哪些重要的改进:

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

  • 去掉了分类分页器
  • 顶部轮播图下移,改成竖状的
  • 减少瓷片区的数量,进行卡片化分离
  • 删除推荐商品瀑布流的分页器
  • 推荐商品卡片的类型调整
  • 商品卡片不再直接跳转详情页

如果只是通过视觉角度上来看,新改版必然是比过去的老版本 “清爽” 得多,毕竟精简掉了大量的内容。尤其是两个分页器组件,除了占空间外,实在找不出什么要去点击的必要。

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

轮播图从顶部撤离和瓷片区进行合并,是一个比较有趣的设定,不仅广告图的面积减少,而且营销推荐位全部集中到一起,使得模块的划分更集中。

现在的首页从上到下的结构即:

  • 搜索栏
  • 业务入口
  • 营销模块
  • 推荐瀑布流

如此化繁为简的改造发生在淘宝APP身上,就像看一出浪子回头的感人戏码…

但不要这么容易被结构上的改造欺骗,改版后的淘宝降低了模块的数量,但只是把减少的元素在其它地方呈现。即这次改版的重点——推荐瀑布流。

细心的同学应该都发现了,瀑布流卡片已经出现在了第一屏的底部,即使不用上滚也可以看见卡片的头部了。

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

并且瓷片区也采用了瀑布流式的双列布局,通过瓷片区白色背景的衬托,这半截露出的图片反而显得越发显眼,越能吸引我们控制不住自己去上滚一下康康推荐了什么东西。

当我们开始浏览瀑布流的推荐内容以后,淘宝夹带的大量私货就进来了,我们来统计下总共有哪些类型:

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

实际的卡片类型,可能还不止我罗列出来的这些。这个本来是用来推荐商品的列表,已经演化成一个聚合了算法推荐内容的 “巴别塔”。

而其中最重要的商品卡片,甚至也不能直接点击就跳转到商品详情页中,而是添加了一个中转页面,进一步根据算法推荐相关商品,能直接跳转进详情页的少数商品卡片,应该是有做广告投放的定向导流。

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

这样改版后的目的,不难分析出目的是为了进一步增加用户 “逛淘宝” 的几率和时间,让本来打开应用就搜索—购买—关闭一条龙的用户,也会不自觉陷入信息流的海洋中去。

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

可能很多人会觉得,难道不应该让流程更短,购买步骤更容易,才符合优秀交互设计的定义嘛?

下面我们就做一些具体的分析吧!

关于新设计的思考

对于一个商业应用来讲,交互不是为了无条件迎合用户的,虽然无论是 UX 还是 UED 的概念里,都爱强调用户至上论,体验为王之类的。但是…

1. 商业诉求 > 用户体验

只有在用户量高速扩张,商业目标是需要用户获得良好体验、口碑的情况下,用户体验的重要性才和大家在童话里了解的一致。更多的时候,是产品想喂用户吃金坷垃时,我们要想办法让用户心甘情愿的吃下去并快速成瘾。

淘宝通过不同的方式获取了大量用户的数据,资料、喜好、购物倾向等等,在庞大的商品数支撑下,可以通过算法给你推荐无穷无尽的商品,总有你会感兴趣的部分。

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

只要增加了信息流的曝光次数,不要让用户那么快完事,过早的陷入剁手的悔恨,抽起事后烟……

那么他们就会被这种简单的产品形式俘获,做多巴胺的奴隶。抖音是这样的、微博是这样的、知乎也是这样的。为什么一个购物应用不想着最快的方式促成交易,而是让用户在里面绕圈子,原因也只能有一个 —— 流量。

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

大家都知道双十一将近,各家电商平台作妖时间又到了。但这两年的电商行业已经发生了巨大的改变,那就是直播、短视频带货形式带来的变局。

这两年,以抖音、快手为代表,兴起的短视频、直播带货风潮,已经成社会的热门话题,薇娅没事就在综艺里和爱豆们一起带货,李佳琦身体有恙上微博热搜,罗永浩靠带货上演 “真还传”……

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

本来,购物方式的多元化,对于大型平台来讲是非常有帮助的。无论是十几年前就开始出现的社会化电商平台、返利网、或值得买,都可以促进电商行业的繁荣,促进平台和整个产业链的发展。

但是,直播、短视频的兴起和过去的这些行业全部不一样,它们本身并不依附于电商平台,但却拥有海量的流量和用户基数。而当这样的流量引擎在变现问题聚焦在电商时,直播和短视频头部平台就有了和电商平台们叫板的资格。

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

2. 直播电商规模,不算短视频

主流的数据预测报告中,20年的直播电商规模都会达到万亿级别,直播电商的高速发展是没法阻挡的大趋势,它的发展会抢夺存量用户的注意力,有大量的用户购物逛商品,不在淘宝APP内,而是通过其它平台转化,再进来下单,或干脆在外部下单,这是绝对不能被容忍的。

所以淘宝不仅要紧跟趋势,也要对抗外部的竞争,在今年加大对短视频、直播的投入,也就顺理成章。根据淘宝研究院的数据,过去三年直播带货的规模增长在 150% 以上,是全球增长最快的电商模式。

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

同时,双十一的直播观看用户 18 年为 1793 万人次,19 年为 4133 万人次,同比增长 131%,对比 618 数据,毫无疑问今年肯定也会保持的增长。

淘宝App五年来最大力度改版,从设计师角度为你详细分析!

并且前几年淘宝双十一喜欢玩的病毒式推广活动成效已经越来越差,再让用户去集福,首页上增加一大堆烟花缭乱的游戏和活动,已经不能再帮助双十一获得快速的增长了。

所以今年,淘宝在国庆前,上架了首页新版本的设计,在应用形态上押宝信息流的算法推荐机制。不仅要开始改变用户使用淘宝的习惯,也在为后续的双十一做预热,相信届时会有大量的直播内容露出和短视频推荐。

至于还有什么新花样或杀手锏还没秀出来,我们就拭目以待吧……


文章来源:优设    作者:超人的电话亭


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


APP设计实例解析,深色模式为什么突然就火了?

ui设计分享达人

苹果在2019年6月发布的iOS13中增加了“黑暗模式”,用户打开“黑暗模式”后,应用界面将会变为深色,随后Google Android 10的发布同样搭载“黑暗模式”。为了适配系统,不少APP纷纷推出了深色模式。

使用OLED屏幕的设备,在纯黑色下可以有效降低耗能,进一步延长续航时间。除此之外,深色模式还可以有效解决OLED屏烧屏、费眼的问题。小摹对几款常用APP的深色模式进行了体验,并为大家分享我的体验感受。从这些案例中,或许我们可以找到深色模式流行的原因。


微 信

深色模式是一种可以降低视觉疲劳且有助于用户专注的全新外观。与传统夜间模式最大的区别是,深色模式不仅保证了弱光环境下的体验,在强光下仍具有可读性。

虽然深色模式也被叫做暗黑模式,但并不代表要将底色变为纯黑。如果使用100%的纯黑底色,长时间阅读时,反而会造成眼睛疲劳。微信的深色模式里,聊天背景及主页面底色采用的就不是纯黑,而是深灰色。

此外,纯黑和纯白的高对比度也会造成视觉疲劳,因此微信的深色模式中,使用了浅灰色作为字体颜色,既能保持清晰显示,又降低了对比度,减轻了用户的阅读负担。如果设置了聊天背景,聊天背景图片也会自动调暗,便于阅读。

虽然整体色彩加深,但微信在设计时仍保持着清晰的层次。比如置顶聊天窗口的灰色会比其他窗口稍浅,聊天消息的标题和摘要也采用了明度不同的浅灰色来区分层级。除此之外,微信的彩色线型图标在黑色背景上也变得更具科技感,颜值提升了不少。

微信的深色模式除了可以帮助用户缓解夜间视力疲劳外,在白天使用也几乎没有障碍,总体来说,体验感觉较好。


Q Q

如果说微信的深色模式更加注重颜值,那么腾讯旗下的另一款社交工具QQ则更加注重用户的深夜阅读体验。

首先,微信在切换深色模式时,需要重启软件后才能生效。QQ在切换夜间模式时,则采用了一个平滑的渐变过渡,让用户可以快速适应场景切换。其次,为了减少夜间光线对人眼的刺激,QQ降低了信息与背景的对比度,对用户头像等图片增加了遮罩,使其在弱光环境中看起来更加柔和。

当用户开启夜间模式时,还会有一个设计彩蛋:部分图标会根据模式切换而改变。如消息图标会从笑脸切换为休息的状态,这种具有趣味性的设计,也会拉近用户与产品之间的距离。


豆 瓣

普通模式下的豆瓣APP背景色为纯白色,白天看偶尔都觉得有些刺眼,更不用说睡前必刷豆瓣的用户有多煎熬。在被用户骂了一轮又一轮之后,豆瓣APP终于也推出了夜间模式。

豆瓣的夜间模式和微信一样,同样保留了五颜六色的图标。同时,豆瓣在设计时始终保证内容有良好的对比度和清晰的视觉层级,保证了信息结构的准确传达。

在配色方面,为了避免“死黑”让整个界面太过死板,豆瓣在黑色中还混入了蓝紫色,让背景色看上去更加通透。底部导航等主要按钮则使用了豆瓣的主色调绿色,在夜间模式下既能清晰展示,又不会显得过于刺眼,同时也保证了在强光模式下可以正常浏览。


知 乎

另一款社区APP知乎和豆瓣存在同样的问题。知乎在设计夜间模式时,知乎采用了主色调蓝色+深灰色的搭配,深蓝和灰色作为背景,展示出的效果既有强烈的对比,又摆脱了深色的压抑感。

与豆瓣不同,知乎的文本颜色选择了对比度更低的灰色,通过字重进行区分。虽然这样会让整体页面看起来比较和谐,但内容变得不够突出,无法在最短时间看清标题,对于一个以内容为主的社区来说,无疑会给用户带来不太好的体验。

知乎在设计夜间模式时目标应该很明确,即只考虑用户在夜间的使用,因此整体色调都很暗,在强光环境下无法正常浏览。


bilibili动画

B站刚推出深色模式时收到了许多批评,字体和背景色对比不强,视频封面仿佛蒙了一层雾,一刀切的暗化处理,导致用户浏览体验极差。

在最近一次更新中,B站终于对深色模式进行了优化,适度提亮了视频封面和图标的亮度,将多彩型图标调整为了单线型图标,既统一了画面风格,又提升了界面阅读体验。

设计深色模式时,必须注意各页面的配色及对比度都要尽可能地统一。在深色模式下点开B站创作中心或推荐服务中的版块时,加载画面仍然是白色,突然出现的强光无疑会对眼睛造成刺激,对于用户来说体验感也极差。


百度网盘

高饱和度的色彩会在深色背景上产生炫光的视觉效果,引发视觉疲劳。百度网盘的深色模式下,背景接近全黑,图标却没有太大的调整,给用户带来的阅读体验并不好。

同样,由于背景颜色太深,导致百度网盘的文本和背景对比度太大,也存在难以阅读的情况,对于诵读困难症患者来说,在阅读时会感觉文字在旋转、模糊。

在设计深色模式时,除了背景颜色尽量使用深灰色以外,还需要确保绝大部分区域保持深色,尽可能使用数量有限的色彩。把握好对比度和饱和度,才能设计出舒适的深色模式。

综上所述,合理使用深色模式,可以降低屏幕亮度,不仅可以减少耗电量,还能减小对自己或他人眼睛的刺激。除此之外,深色模式对背景色、文字以及系统图标的颜色都进行了优化处理,可以提升阅读舒适度。对于喜欢深色或黑色系的朋友来说,深色模式更是一种不同于普通模式的全新体验。


除了APP,不少生产力工具也都采用了深色界面,比如PS、摹客等。以摹客为例,用户在进行设计时,深色界面不仅仅能降低眼睛疲劳度,还能突出你的设计内容,打造沉浸式的设计体验。


随着苹果“黑色模式”的推出,深色模式逐渐成为APP设计的流行趋势。作为设计师,也一定要掌握APP深色模式的设计技巧。从上述APP设计案例中,我为大家总结了以下几点建议以作参考:

1.避免使用纯黑色;

2.避免使用高饱和度的颜色;

3.文本颜色选用高亮色,但不宜使用纯白;

4.做好情感化设计;

5.注意结构和层次感;

6.允许用户自由切换深色模式和普通模式。


文章来源:UI中国  作者:摹客产品协作设计

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

合理打造“稀缺性”,提升你的设计转化率

资深UI设计者


摘要:本文原标题为《用户体验中的稀缺性:心理偏见成为常态》,文章对当前设计稀缺性的情况进行了简要分析,并给出了一些需要牢记的小贴士,阅读预计需要7分钟。

 

你知道稀缺性是咋回事吗?

我随意观看了Unbox Therapy对这个杯子的某个测评视频,很显然这个杯子是不会倒的。我一直在笑,但在视频的最后,我也很好奇人们对杯子的需求是什么。

在亚马逊上,它以14.99 美元的价格限时出售,原价为24.99美元。不锈钢版本仅剩下3个库存。我喜欢不锈钢的杯子,而且这是一个减价品,而且它很快就会售空。如果不买,我就要用之前会倒的杯子喝咖啡了。错过它的话太可惜了。

是的,多数时候这个杯子不会倒

 

稀缺性让事物变得有吸引力

稀缺性是一种心理偏见,它让我们觉得稀缺的东西比富足的东西拥有更高的价值。一般来说,我们更偏爱那些更难得到的东西。

 

稀缺性已成为常态

和大多数现象一样,稀缺性从线下兴起。昂贵的餐厅用大盘子装小份食物,以突出食材的稀缺性;名牌大学限制招生名额,以保持排他性。

这看起来很贵

但随着科技企业变得更加成熟,数字产品变得更加精细,稀缺性很快走向了线上,现在稀缺性已成为增加吸引力最流行的方法之一。

目前人们已经习惯了在线上浏览时看到并期待某种形式的稀缺性,运用稀缺性已经不再具有竞争优势,而是为满足用户需求而做的最基本的起点。

 

稀缺性融合了多种偏见

稀缺性变得流行起来,因为它非常有效并相对容易实现。而它如此富有成效的原因在于它结合了多种偏见:

1. 损失厌恶(Loss Aversion)

如果我们不去购买某个稀缺性产品,这基本上意味着短期内我们将失去这个产品本身,而从长期来看,我们也将失去可以选择它的自由。加倍的损失=加倍的痛苦。

2. 社会认同(social proof)

通常,当一款产品需求变高时,这款产品会变得稀缺。一旦出现这种情况,就意味着有其他人在过去购买了这款产品,所以它一定是有价值的,我们也该抓住这个机会。

3. 预期后悔(Anticipated regret)

当面临一个决定时,我们不仅会预期会发生的事件,还会预期我们可能会经历的与之相关的后悔。决定现在就采取行动是我们试图消除这种可能性的努力。

 

 

稀缺性会以不同形式出现

尽管稀缺性可以被应用于品质、体验等不可量化的特征,但当评估对象是可量化的物品、地点等时,稀缺性的应用效果会更加出色。这就是像亚马逊和Booking.com这样的公司接受它并广泛使用它的原因。

基于这些可量化的对象,稀缺性有三种主要的形式:

1. 限时稀缺(Time-limited scarcity)

当对时间进行限制时,就会产生一个截止时间,让人们在截止时间之前采取行动。当看到截止时间时,人们不确定之后是否还能获得这个产品,除非他们现在就采取行动,但这样就增加了压力,从用户体验的角度来看,反而缺乏了同理心。

举例如下:

  • 亚马逊的限时秒杀活动:好
    限时秒杀活动仅持续几个小时,页面上会显示截止时间。页面还会显示已购者占总限购人数的百分比来凸显紧迫感。
  • 在Interaction Design Foundation上的课程:机智
    在报名截止前显示倒计时。已报满的课程仍然会显示出来,让人们知道错过机会是什么感觉。
  • 在eBay上购买东西:糟糕
    eBay对限时产品会用一个红色的图标和一个模糊的“即将售罄” (Almost gone)的标签。不显示下架时间的做法考虑不周,而且是可以被商家操纵的。
  • 在Airbnb上找房源:一般
    Airbnb通过显示剩余房源比例来表现供给的有限性,并通过一个“难得发现(Rare Find)”的标签来让用户对他们的搜索结果感到幸运。

2. 限量稀缺(Quantity-limited scarcity)

有限或稀少的产品供给会让人们觉得这威胁到了他们选择的自由,进而激发他们做出反应,来对抗这种威胁并维持他们对资源的获得权。

限量稀缺被认为比限时稀缺更有效,因为供给的结束是不可预测的,完全取决于需求而不是时间。

举例:

  • 在Booking.com上搜索酒店:印象深刻
    Booking.com在运用稀缺性上跑得飞快,可谓是行业里对博尔特,他们的成功在很大程度上都要归功于限量稀缺。网页不仅显示剩余房间的数量,还会显示一大堆的标签和文本,让你感觉自己下单78物超所值。Booking.com很聪明的运用了自己拥有的大量数据,网页提供的信息量虽然很大,但都很有用。
  • 在Ryan Air上预定机票:好
    Ryan Air利用低价机票优先出售这一事实,以强调低价机票仅剩的数量。
  • 在Selfridges上购买衣服:巧妙
    Selfridges 网站上的产品详细信息同时显示了可购买和不可购买的尺码。这让可购买的尺码看起来更稀缺。这样显示是微妙且有用的,因为有些人的尺寸介于两个尺码之间。

3. 访问受限稀缺(Access-limited scarcity)

它指的是限制对信息、群组或空间等功能的访问。研究表明,潜意识中的抑制力会让人们更重视那些受限制的功能,而不是那些不受限制的功能,因为排他性让他们觉得自己很特别。

举例:

  • 成为Medium的订阅者
    如果你想要阅读Medium上的所有文章,就需要向平台付费,成为他们的特权用户。
  • 加入Tinder Select
    Tinder(交友App)的“Elo”排名系统基于吸引力对会员进行排名,并邀请排名靠前的会员加入名为“Tinder Select”的封闭版本。尽管这把其他用户排除在外,有点见利忘义 ,但Tinder还是达到了其目的:通过奖励让受欢迎的用户感到与众不同。

 

 

稀缺性有争议,但本不应该有

如果稀缺性适合我们所设计的产品,那它可以优化用户流量并对业务目标产生影响。稀缺性还会重构信息,并在有紧急需求时提醒用户。

有些人可能会说,这迫使用户做出了决定,但只要数字是真实的,还有什么其他的选择吗? 我们如果没有及时告知用户产品稀缺的情况,难道就不会造成他们对遗憾或挫败感吗?这样我们难道不是正在创造糟糕的用户体验吗?只要我们向人们展示的是事实,催促人们做决定看起来反而是公平的。

话虽如此,我同意一些企业会不道德地通过虚假库存和会员资格来利用稀缺性,但是他们同样也可以通过任何其他方式来达到其可疑的目的,而且从长期来看,这样做总是会导致信誉丧失。

 

 

稀缺性的应用应该遵循一些规则

为避免争议,下面是一些可以最大化利用稀缺性并真正提升用户体验的建议。

可以做的事情:

  1. 利用稀缺性来提高感知价值并加速转化
  2. 利用时间稀缺来促销时效性强的产品
  3. 利用数量稀缺来让人们意识到库存短缺
  4. 利用访问稀缺来强调受限功能的优势
  5. 利用A/B测试来测试哪些稀缺性信息最适合你的受众
  6. 利用可用性测试来测试信息对可信度和信任度的影响
  7. 利用动画元素来强调紧迫性(例如,显示一个发光的红色图标来突出实时状态)

不可以做的事情:

  1. 在未做用户测试之前。不要使用稀缺性
  2. 如果库存的数量不可靠的话,不要使用稀缺性
  3. 如果信息不能保证不会出错的话,不要使用稀缺性
  4. 不要编造虚假数字来人为的制造稀缺产品

 

结论

稀缺性会让我们对稀缺的东西赋予更高的价值,随着时间的推移,这已经成为增加吸引力的必由之路。稀缺性的方法很有效,因为它结合了多种偏见(损失厌恶、社会认同和预期后悔),并拥有不同的形式(时间、数量和访问受限)。

稀缺性是有争议,但这些争议本不应该出现,因为我们并不能对用户隐藏信息。如果你遵循一些简单的规则,稀缺性可以帮你提高用户体验。

文章来源:UXRen    作者:David Teodorescu



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

备战双十一,直播带货主播选品有何底层逻辑?

资深UI设计者

编辑导语:双十一剁手节快到了,各个商家已经开始在各大平台开启双十一预热活动;如今的卖货模式也有所变化,不是仅靠打打广告,推送信息,如今直播带货已经成为了各大商家青睐的卖货模式;本文作者分析了关于直播带货主播的选品有何底层逻辑,我们一起来看一下。

距离双十一这场年度大战已经不到一个月,各个相关环节都已经进入“战备”状态;当然,逃不过直播二字。

如今再说直播带货,想必大家都不会感到陌生;经历过2019年李佳琦、薇娅出圈带来的高速发展,今年年初黑天鹅事件的催熟式暴增;明星直播带货首秀、企业总裁直播自救等等相关话题都成了热搜常客,霸占众人眼球。

直播带货从2016年起步以来,短短三年多时间就成为了一项“全民运动”,它的发展其实带着必然性。

一方面,处于移动互联网时代,智能手机、4G网络的普及以及如今5G的发展,都极大提升了用户网络浏览的便利性。

另一方面,用户手机网络购物习惯已经养成。

据统计,2019年通过手机进行购物的网民超7.07亿,占手机网民的78.9%;而相较于图文、短视频等介质,直播带货能够更加全面、立体地展示商品,通过主播讲解推荐,实现足不出户的陪伴式购物体验,用户可以边看边买,实时互动性强。

突破了时间和空间上的局限性,直播成为更具带货优势的载体。

备战双十一,直播带货主播选品有何底层逻辑?

从风口成为行业大趋势,直播电商竞争必然日益激烈;以淘宝直播为例,2019年,平台诞生了177个带货过亿的主播;这背后是千亿级的货品量、货品品质、货品服务保障的诉求。

今天,我们想来聊聊,直播电商“人、货、场”三要素中“货”遵循怎样的底层逻辑呢?

一、直播选品四大维度:品牌+产品+价格+用户

直播带货中,并不是所有的产品都能进入直播间。

许多商家透露,部分顶流主播的选品率,一般不超过5%;主播往往会形成自己比较固定的选品配比,交个朋友CEO黄贺就曾在采访中总结出老罗带货直播间的一个选品规律:食品一场直播占到30%左右,日化、日用百货占到30%左右,数码家电占到20%,新奇特产品占到20%。

究其底层逻辑,主播在选品时,通常会考虑四个维度:品牌、产品、价格、用户;并根据直播节奏,安排产品上播顺序,最终确定引流品、畅销品、利润品、特色品等品类进入直播间。

备战双十一,直播带货主播选品有何底层逻辑?

首先,在品牌层面挑选时,主播通常会考虑品牌知名度、品牌产地、品牌供应链这三方面。

高知名度品牌可提升直播间声量并起到引流的效果;如水果等带有地域特色的产品往往会因为产地而影响质量;完善的品牌供应链则是确保产品从售前到售后流畅运作的基础保障。

从产品层面看,在标品、非标品两个大范围下,主播往往希望自己的直播间内有着更为丰富多样的产品组合;比如同一场直播里,同时包含着新品、热销品、库存品;新品可作为特色品存在,热销品作为利润品,库存品则是充当低价引流的钩子产品。

直播带货刚起步的时候,标品更受主播青睐,明码标价一定程度上降低了直播的难度,用户购买更依赖产品本身。

随着产业的逐渐成熟,主播专业度的提高,高单价、低复购的非标品类在直播带货中逐步增多;比如昂贵的珠宝翡翠,在直播产业中已经成为一个不容小觑的亿级市场。

备战双十一,直播带货主播选品有何底层逻辑?

从左至右依次是抖音直播、快手直播、淘宝直播

从价格层面看,低价是公认的最佳引流方式;主播往往希望利用价格差或者更大的优惠力度来吸引用户,除此以外还可能采用赠品、大礼包等形式。

从用户层面看,主播在推荐产品时,也有刚需产品、非刚需产品的差别;会根据自己粉丝的用户画像、使用场景、消费能力、兴趣爱好等进行选品。

以薇娅一场日常直播为例,该场直播共38件产品,各个价格区间商品占比相差不多;其中包括19.9的网红低脂红薯番薯仔地瓜干作为钩子产品,也包括价格超过3000元的刘雯同款鄂尔多斯羊绒衫提高直播间品牌价值;而价格区间在100-300元,300-500元,500-1000元的产品数量比例一致,商品价格结构均衡。

备战双十一,直播带货主播选品有何底层逻辑?

数据来源:知瓜数据

另外,薇娅直播带货起于服装,逐渐扩展到各个品类,到如今形成稳定的选品策略;但是基于对粉丝属性的考虑,在如今的商品分布中,女装/女士精品类产品占比仍然是最高的。

二、主播、品牌成熟度对直播卖货品效影响大不同

不同影响力的主播,不同成熟度的品牌,直播带货在品效两方面的差异非常大,主要可以分为四个区间:

  • 品效爆棚=高知名度/社交热度+头部主播,比如李佳琦+完美日记;
  • 有品增效=知名度/社交热度较低+头部主播,比如薇娅推荐的网红爆品;
  • 有品无效=知名度/社交热度较低+员工/导购/尾部主播,比如商场导购直播;
  • 品效兼优=高知名度/社交热度+中腰部主播,比如李子柒螺蛳粉+美刻美食(淘宝直播,粉丝数:6.48万),GMV超30万。

备战双十一,直播带货主播选品有何底层逻辑?

三、直播电商“货”的未来发展趋势

直播电商正处于高速发展阶段,主播或是用户对于“货”的选择也越发挑剔。

前几天,淘宝直播官方就举办了一场“双11主播选品会”,以满足主播们对商品品质、性价比等方面提出的更高要求。

未来,直播电商中的“货”将呈现以下趋势:

1)万物皆可直播,非标品渗透率逐渐提高

随着直播电商的发展,冲破了我们对产品的刻板观念,如汽车、房产等以往只能在线下进行的品类也拥有了更多可能;薇娅已经卖过火箭,下次又会是什么,我们可以大胆发挥想象。

2)货品规范化,主播形成自己的选品策略

随着行业的不断成熟,各地政府推出相关扶持及规划化文件,包括“货”在内的各个方面都将得到规范化发展;如今,集中拥有资源的头部主播都已经形成独有的选品方法论,这对中小主播来说,也将是一种示范作用。

3)品效协同,产品进入直播间更加理性

主播和产品是一个双向选择的过程,品牌经过前期试水,对直播带货带来的品效影响有了更直观感受,对于直播间的选择将会更加理性;一定程度上,也起着对行业的正向促进作用。


文章来源:人人都是产品经理    作者:面朝研究院


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


图标设计指南

资深UI设计者

图标是UI设计中除了文字之外最不可或缺的视觉元素,在设计中看似只占一个很小的区域,但是它却是考验设计师基本功的重要标准,了解图标相关的概念,以及正确绘制的方法,是入门 UI设计的必备条件。

两万字超强干货!设计师必看的图标设计指南

本文将对图标进行系统的介绍,篇幅所限,本文只针对图标设计中最重要的设计概念和设计思路为主。大家如果对图标的其他方面感兴趣,欢迎给留言,后续出相关系列内容。过程中也有针对几种典型的图标进行实操代练。想要把图标设计的更好,这就需要我们在平时勤加练习外,还要进行深度的思考,希望我的这篇梳理可以给大家带来帮助。

图标概述及发展历程

1. 图标的定义

图标,也称为icon或Picoto,是计算机世界对现实世界的隐喻和概括,代表软件产品中的功能及操作。

两万字超强干货!设计师必看的图标设计指南

图标做为国际通用性语言,生活中随处可见,例如商场导视中收银台图标、出口图标、卫生间图标等,又或者是日常手机里使用的那些App图标,如微信、电话、短信等。的确,图标的形式有很多种,它可以应用在很多场景中,并且表现方式非常丰富,有线的、有面的、还有拟物的等。

两万字超强干货!设计师必看的图标设计指南

粗浅划分的话,UI设计中常见的图标大致分为两大类,第一类我们称之为「标志性图标」,比如手机中应用启动图标;第二类我们称之为「功能性图标」,这类图标经常出现于 App 或网站中,用于功能性指示引导或操作。

2. 图标的重要性

对于UI设计而言,图标可以说是整个产品的点睛之笔,它甚至可以直接影响着一款产品的形象和气质。在不少 UI 界面中,图标几乎是这个页面的核心支撑体,它直接影响着产品的视觉体验和产品调性。它有以下几点好处:

  • 全球通用:Windows,iOS, etc., 中文版和英文版甚至各种语言版本,在不打开菜单之前,基本上都长一样;
  • 节约空间:如果能用一个图标清楚表达含义的时候,就不需要用文字,比如用一个“叉”代表「关闭」;
  • 快速定位:图标可以用它独特的形状或者颜色让人快速定位到一个功能;
  • 上下文的定位:比如小飞机的图标单独放出来不确定是什么,但是在和收件箱在一起它就可以认为是发件箱了。

两万字超强干货!设计师必看的图标设计指南

3. 起源

图标的发展历程其实有些类似中文、英文等语言的发展,大体也分为两个阶段:

实物 → 符号;符号 → 新符号

来看一个小例子:

两万字超强干货!设计师必看的图标设计指南

左边这个东西叫软盘,可能很多小伙伴没见过(事实上我也没有),「保存」图标就是将「软盘」符号化之后形成的图形,「软盘」是「保存」图标的实体。但随着时间的推移,人们逐渐将长期接触的符号本身作为一种新的实体,在大家的眼里,它不再是一个具象事物的抽象符号,而是直接当成一个实体来使用,甚至这个符号的实体已经淡出历史,但人们还在习惯性使用这个符号。

如你所知,图标、标识都不是界面设计师所创造的概念,它的存在可以追溯到人类文明诞生之初,在漫长的历史长河当中,早期用来传达信息的图标演变为系统的文字,而在地图、图书、壁画和建筑等各种各样的地方,还存在着用来代表和传达特定概念的图标和标识。

两万字超强干货!设计师必看的图标设计指南

随着技术的发展,计算机诞生了,而显示器的出现,也为图形化界面的诞生,铺平了道路。20世纪70年代,施乐在位于帕罗奥托的研究所当中,诞生了最早的拥有图形化界面的电脑,著名的「 Xerox Alto」。这款昂贵的概念机最终并没有走进大众的视野,但是它的后续机型施乐之星在1981年问世,并且成为了计算机史上的重要里程碑,而 Xerox Alto 对于乔布斯和比尔盖茨的启发,更是引发了计算机历史上最著名的一场战争:苹果VS微软,Windows 对抗 Macintosh。当然这都是后话。

4. 拟物图标

80年代,想做的具象(拟物),却因为像素和机能的限制无法实现,所以对好的标准是越具象越好 。到了1995年计算机显卡的显示能力得到革命性的改变,Photoshop 5.0的发布,恰好让憋屈了这么多年的图形和UI设计师们巴不得立马上天(终于可以施展拳脚了)。从win95开始,到osx/win7的这十来年正是UI拟物化发展壮大并大行其道的阶段。同时也是显示技术飞速发展的十年,从640×480,到800×600,到1024×768,到1920×1080 / 1920×1200,再到4k,再到retina屏,平面显示技术能达到的水准基本已经是人眼能感受到的。

两万字超强干货!设计师必看的图标设计指南

当人们对计算机尚不熟悉的时候,用户的需求是“弄懂这玩意到底是干嘛的”,是用户体验的核心。拟物化的图标和界面会给予用户具象化的引导,比如回收站,音乐,电脑,文件夹的图标,用户可以直接联想到现实中的物品并更快的理解这些程序或者文件的作用。包括立体的按钮引导用户点击,用户都可以通过联想,更快的理解操作/互动的方式。这样可以降低用户的学习成本,缩短学习周期,让用户更快的适应计算机的使用,弄懂这玩意到底是干嘛的。

来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年,苹果借由Macintosh,首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大,全新的样式使得它在信息传达的功能性上有了明显的提升。

两万字超强干货!设计师必看的图标设计指南

但是随着 ICON 的发展,拟物图标也带来了一些问题,华丽的视觉元素或许在用户使用的初期,起到赏心悦目的装饰,但久而久之,这都将成为对用户获取信息的一种干扰。如今人们对各种常规交互模式人们也早已了然于胸,用户的需求也从“弄懂这玩意这么用”变成了“快捷更舒心的使用”。用户用的方便变成了用户体验的重心。

再者,大家都熟悉的事物其实非常有限,而 APP 的创新却在不断进行,很多创新的产品本身在现实世界就没有参照物,所以也决定了拟物图标必然会被扁平化取代。

5. 扁平化

从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦——拟物图标的质感、光影会分散用户的注意力,形成「视觉噪声」。于是UI设计师开始探索更新的表现形式来设计界面中的图标。如微软引领的Metro风格图标设计和Google引领的长投影风格的图标设计。 不管你喜欢与否,当年的微软让 Metro 和扁平化赚足了眼球,甚至让人一看到扁平化就想到Metro。

两万字超强干货!设计师必看的图标设计指南

区别于拟物化更加接近于真实的实物,扁平化则是简化真实的物体,转而通过抽象、简化、符号化的设计元素来表现。

2013年,苹果推出了iOS7 开启了拟物向扁平转变的风潮。在iOS7中对整个界面的图标、按钮、字体、信息层级等各方面都进行扁平化设计。苹果的这一系列动作打破了人们对扁平化风格的芥蒂,并最终推动了整个移动端扁平化设计的进程。

两万字超强干货!设计师必看的图标设计指南

那么,苹果公司在坚持了多年的拟物化设计风格之后,曾经作为该风格的引领者和受益者,为何会突然转向,热情地拥抱起扁平化设计来了呢?难道是因为我们视觉疲劳了吗?答案很简单,

  1. 因为使用了Retina屏,屏幕清晰度支持扁平化更多的细节;
  2. 当具象化慢慢达到了,当大师们发现具象化已经不再有挑战时,于是开始尝试从别的角度表达;
  3. 高度的拟物在一定程度上减轻了学习成本,但是提高了辨识成本。

总之,扁平化这种二维设计已经成为一种更加流行的设计风格。所有元素的边界都很干净利落,较多使用色块和符号化的图形以及无衬线修饰的字体,界面更加整齐简洁。使用这种设计风格的优点是可以更加简单直接的将信息和事物的工作方式展示出来,将一切干扰信息弱化,减少认知障碍的产生。

两万字超强干货!设计师必看的图标设计指南

虽然扁平化的优点有很多,也适合当下技术发展需要的,但是缺点也是显而易见的。譬如表现形式太过于抽象、缺乏情感的传递,而事实上发展到今天的扁平化设计确实也在不断的优化自己~使得自己更加的适应时代的发展。另外还有一个点就是所谓的 “审美疲劳”。当你一直看着简单的东西,久而久之就会越来越烦,你就会越来越想要看那些丰富多彩的东西。反之亦然。这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢,即“认知简约”。也许当满世界都是扁平化后,拟物化的设计却又变得更显眼了呢?最近流行的“新拟物”风格就是最好的证明。

6. 微扁平、轻拟物

由于扁平风格表现形式单一,同质化严重,缺乏个性,图标慢慢开始发展到微扁平轻拟物的方向。相较于拟物风格不会有太多复杂的视觉元素,与扁平风格又有了更丰富的情感内容,所以现在界面中,在面积比较小的区域我们使用扁平图标或线形图标;在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。

两万字超强干货!设计师必看的图标设计指南

7.「新拟物」风格图标

苹果在 WWDC2020 搞了个大新闻:macOS 将与 iOS 统一步调,从X86 平台迁移至ARM 平台,并从macOS 10迭代为macOS 11。这 20 年一遇的 Mac 大版本更新被称为Big Sur。

macOS Big Sur是第一个将「新拟物」设计投入大规模商用的操作系统,这可视为「新拟物」在实用化道路上的首次胜利。值得一提的是,在 Big Sur 的 ” 外观 ” 设置里,多了一项名为” 自适应强调色 “的选项。苹果将主题色的指定权留给开发者,这是否暗示新一代 App 在光影上会有更丰富的效果?

两万字超强干货!设计师必看的图标设计指南

「新拟物」设计的精髓在于对光线的绝妙运用。它把光效拿捏在 ” 扁平 ” 与 ” 拟物 ” 之间,进而打造一种全新的视觉体验。

不同于传统的拟物,「新拟物」虽然将符合物理规律的光影效果引入界面,但它所模拟的材质是自然界不存在的。换句话说,「新拟物」是将真实光线用于虚拟对象,而 ” 拟物 ” 是还原实际物品在特定光照下的效果;

两万字超强干货!设计师必看的图标设计指南

由于整个设计界将不得不考虑新拟物风格,围绕该风格的可能性将会有爆炸性的发展,并且这种新的数字空间设计理念如何能够合理地适用于用户界面设计和功能性将取得更大的突破。与以往一样,第三方应用将比苹果更大胆、更快速地推动这一风格——这也是我们将会真正开始解锁新拟物优势的时候。

应用图标的类型及作用

产品应用图标(也叫启动图标),是指产品「品牌标识」中独立的图形,也是产品品牌的核心组成元素。作为产品所有视觉通信中必不可少的元素,其使用率非常高,所以该独立图形在设计中应做到最简化。

一个小问题:为什么iOS系统中图标形状是统一的圆角矩形?

苹果官方给出的解释是在空间有限的的区域,太多形状显得杂乱,如果形状不规则,就无法控制统一间距,设计师水平也不一样,这样统一规范能保证标准。推荐一个iOS启动图标资源网站,设计时可以找找灵感。

两万字超强干货!设计师必看的图标设计指南

△ iOSIcon gallery

而安卓应用图标就没那么规范,处于百花齐放的状态,各家厂商都在设计独属于自己的视觉语言。大家都不一样,也就导致没有个性之美。

两万字超强干货!设计师必看的图标设计指南

安卓应用图标设计规范网站

两万字超强干货!设计师必看的图标设计指南

应用图标的类型

应用图标有不同的风格,这些风格有可能偏拟物,也有可能很扁平,有可能很抽象,也可能很具象。通过不同的设计风格可以更加标新立异,从而被用户记住。因此能在第一时间赢得用户的好感和记忆非常重要,将产品图标设计的好看且容易被人记住就成了非常重要的任务。应用图标的风格主要有以下几种。

1.  中文文字图标

中文是我们的母语,每一个汉字都令人记忆深刻,文字也是最直白的信息,而且不容易被曲解,所以很多国内的产品都会使用文字作为自己的产品图标。中文设计模式即字体设计,提取应用名称中的一个或多个汉字,进行设计变形,变形后的字体图形具有产品属性的外貌特征。常见中文图标又分为单字、多字和字加图形的几种类型。

单字

提取产品名称中最具代表性的文字,通过对笔画及整体骨架进行字体设计,以达到符合产品特性和视觉差异化的目的。其优点是可以直截了当的传递产品信息,识别性强。

两万字超强干货!设计师必看的图标设计指南

多字

多字图标设计要注意的是整体的协调性和可读性,一般为2-3个字,最多两行(四个字)排列。

其优点是更加直接的告诉用户产品名称,达到品牌推广的目的,减轻用户记忆成本。其缺点是如果图标上的文字和下面的辅助文字完全一样,会显得重复啰嗦,像介绍了两遍自己一样。

两万字超强干货!设计师必看的图标设计指南

字加图形组合

文字加辅助图形的组合,也是常见的产品图标设计方法,相比纯文字图标,显得更加丰富有独特的产品的气质和属性。需要注意的是做好文字和辅助图形间的平衡。

两万字超强干货!设计师必看的图标设计指南

2. 英文字母图标

英文设计与中文设计的设计模式相似,通常是提取应用名称的首字母融合产品的功能卖点或行业属性进行创意加工,新的字母图形依旧保持本身的识别性。

单字母

通常提取英文首字母进行设计,由于英文字母本身结构简洁,稍加改动就很容易达到设计感于识别性兼备的产品图标。需要注意的是英文字母本来就少,都用字母很容易创意雷同,难以形成差异化。

两万字超强干货!设计师必看的图标设计指南

多字母

提取产品全称或几个单词的首字母组合而成,形成独有的产品简称,方便用户记忆。

两万字超强干货!设计师必看的图标设计指南

字母加图形组合

字母加图形组合的设计形式比较广泛,图形分为几何图形和通过提炼的图形。通过字母与图形进行创意加工,可以使应用图标视觉表现更加饱满。

两万字超强干货!设计师必看的图标设计指南

3. 数字图标

直接用数字做应用图标的相对较少,但是数字识别性强,易于传播的特点。利用数字进行设计能给人亲和力。难点是怎样与品牌形成强关联性。

两万字超强干货!设计师必看的图标设计指南

4. 特殊符号图标

由于符号本身的含义会对产品属性有一定限制,所以特殊符号在应用图标的设计案例中相对较少。如“$”符号可代表与金钱有关联性的产品,无法运用在与此属性无关的产品上。不过也正是由于自身属性强的特点,可以很好的诠释关联的产品属性。

两万字超强干货!设计师必看的图标设计指南

除了中英文图标,还有图形类图标比较常见。这种类型的设计模式的优点就是直观醒目和简洁大方,视觉冲击力强。常见的有以下几种:

5. 几何图形

几何图形的设计模式给人简约、现代、个性等视觉感受,从单个具象图形到复杂的空间感营造,几何图形的表现形式非常丰富。不同的形状给人的情感表达不同,如三角形给人传达个性、稳定、现代、时尚等,添加圆角后又会更加亲民、可爱。我们可以结合产品特征,合理的选择适合的形状图形进行创意。此类型较考验设计师的图形创意能力。

两万字超强干货!设计师必看的图标设计指南

6. 单双形/剪影

单双形是指应用图标只展示单个或两个的剪影图形。通常有两种设计方式,在深色背板上使图形反白,背景可以是单色也可以是渐变色;在浅色的背板上让图形填充颜色,图形可以是单色也可以是渐变色。这种设计模式的优点是简洁明确,易于用户在众多的应用图标阵列中快速找到目标。

两万字超强干货!设计师必看的图标设计指南

7. 线形

线形的设计模式分为两种设计方式,在深色的背板上让图标反白,背景可以是单色也可以是渐变色;在浅色的背板上让图标填充颜色,图标可以是单色也可以是渐变色,或是其他视觉效果。纤细的线框图形传递出简洁轻快的气质,适合于文艺、清新的应用,在界面设计时保持这种干净明快的风格,才能与应用图标设计表里如一。线性风格一定注意不可太细,如果做得太细,在手机上看会非常尖锐,显得不易点击。例如airbnb,它的背景是一个微渐变,线性风格曲线组成“A”,同时是一个小蜜蜂。

两万字超强干货!设计师必看的图标设计指南

8. 动物图形/剪影

动物作为图标设计元素是比较常见的方式之一,通过提取动物整体形象或者局部特征部位作为设计元素,背景填充单色或渐变色,简洁明了。动物给人的印象比较可爱,有助于加深用户对产品的印象。常见的表现形式有剪影、线性描边风格、面性风格等。

两万字超强干货!设计师必看的图标设计指南

9. 卡通形象

卡通风格的产品图标会让用户更有好感,一个可爱的卡通形象有助于加深用户对产品的印象。很多决策者会认为卡通是一种低龄的审美,这种想法其实是错误的。卡通可以说是一种各年龄层都能接受的风格,例如Bear,它的卡通形象是一头洁白的北极熊,简洁的形象设计与产品的阅读体验一致。

两万字超强干货!设计师必看的图标设计指南

10. 正负形

以正形为底突出负形特征,以负形表达产品属性,传递产品信息。例如NPR One,图标中的负形图形是对话气泡,告诉我们这是一个媒体或社交的应用,而正形图形强调产品气质。

两万字超强干货!设计师必看的图标设计指南

11. 白色渐变

白色渐变的设计模式与透明白色相似,都是通过白色不透明度来构建出图形的立体控件感,它比单纯的剪影图形更加具有质感,这种质感带给了我们视觉上的享受。例如印象笔记·圈点,它是一只白色的鹅毛形象,垂直的线型渐变使鹅毛富有了生命力一般,显得更加轻柔。

两万字超强干货!设计师必看的图标设计指南

12. 彩色渐变

色彩比任何图形都更能抓住用户的注意力,同时色彩更加具有情绪,能传递出应用的产品气质。比起白色渐变图形,彩色渐变图形的色彩表现更加丰富。多种颜色进行渐变衔接的时候要注意色相的对比,营造空间感。应用图标的背景和图形的色彩要拉开对比,一般为白色或浅色背景。

两万字超强干货!设计师必看的图标设计指南

13. 无

无,即没有设计。除了背板什么也没有。虽然这类设计模式比较独特,但我们并不鼓励,因为用户很难从一个颜色上得到有用的信息。例如“黄油相机”的图标设计成一块黄油的样子已深入人心了。

两万字超强干货!设计师必看的图标设计指南

14. 应用图标的作用

打开率是一款移动应用的重要数据,应用只有被打开才有它的运营价值。在我们手机里安装了许许多多的应用,除了一些我们每天必须使用的应用如微信,其他大多数的应用在没有使用场景时很难想到去打开他们。因此,这些应用如何在手机屏幕上吸引用户的注意,鼓励用户打开显得非常重要。于是在应用图标上做文章就显得很有必要,常见的设计手法有:

  • 品牌传播:在游戏领域比较常见,在应用图标上打上品牌的旗号就能或者用户的注意;
  • 营销事件:将营销事件(例如双11)展示在应用图标上,折扣、促销等都能吸引眼球;
  • 核心卖点:将核心卖点出现在应用图标上,引起用户注意,从而提高应用被打开的频率;
  • 节日氛围:节日通常伴随着消费,因此电商类应用最注重节日氛围的主题设计,每年春节期间桌面图标几乎一片红,非常有节日气氛;

两万字超强干货!设计师必看的图标设计指南

应用图标绘制方法及流程

1. iOS应用图标

在设计模板还没有如今这么发达时,设计师需要设计启动图标(1024x1024px)之后按照程序员的要求切出几十个不同尺寸的图标。比如,在手机中@3x情况下桌面图标尺寸为180x180px,在@2x情况下为120x120px;在应用商店图标需要使用的尺寸是1024x1024px;这个工作太烦人了,好在现在我们只需要专注在启动图标设计本身上了。在苹果给我们的这套资源中,有 Template-AppIcons-iOS 这个文件。打开这个文件,用我们自己设计的启动图标替换掉智能对象里的内容,你会发现所有尺寸的图标都变成了我们的图标。iOS的圆角图标并不是标准的圆角矩形,而是某种连续曲线。

两万字超强干货!设计师必看的图标设计指南

我们把两个圆角曲线放大重叠后进行对比,其中灰色线框为标准圆角矩形绘制的圆角,红色为iOS平滑圆角,它与圆角矩形拥有相同的对角线锚点,区别在于其曲线稍微向中心收紧。

两万字超强干货!设计师必看的图标设计指南

事实上,我们很难在Retina屏幕上区分这么细微的差别,因此设计师在绘制iOS应用图标时不必过分纠结它的圆角,直接绘制成直角矩形交给开发同学即可,如果应用图标需用于展示,可以绘制120*120px圆角矩形、27px圆角半径代替。

2. 安卓应用图标

安卓应用图标同样需要很多尺寸,主流需求是1024px、512px、144px、96px、72px、48px六种。设计师提供给程序员的同样是直角矩形,然后程序员通过代码进行切割使其变成圆角图标。

3. iOS应用图标设计流程

在我之前的设计作品中,有个“影记”的摄影社区APP,本篇我们就以此为产品案例抛砖引玉来学习一个iOS应用图标的绘制过程。

寻找隐喻

隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为,即人们看到某样东西或听到某件事情能够马上在大脑中形成联想。例如说到摄影,马上就能想到相机、快门、闪光灯、暗房等。然后通过这些联想词,去找一些气质相符的图片制作情绪版,通过情绪版可以感受到产品的调性,然后从中提取一些形状和色彩作为产品图标的主要造型。

两万字超强干货!设计师必看的图标设计指南

竞品分析

应用市场各类产品不胜其数,在同类应用中存在大量相似的应用图标设计,如何保持应用图标的唯一识别性非常重要。唯一识别性不单单指图形与其他应用有所差异,避免创意撞车,让用户在脑中形成思维模式,它还指图形表意是否清晰,是否符合用户的心里预期。

两万字超强干货!设计师必看的图标设计指南

提取关键词

根据收集的图片,创建情绪版,结合自己的产品提取关键词,然后就知道在接下来的设计中应该突出什么。我们从“影记”中可提取首字母“Y”,相机中的“快门”“信号灯”“开关机”,并依次将关键词描绘成下列图形。

两万字超强干货!设计师必看的图标设计指南

抽象图形

确立了首字母“Y”、“快门/开关机”和“信号灯”作为应用图标的主图形,接下来将绘制好的3个图形相结合,即完成初步设想。

两万字超强干货!设计师必看的图标设计指南

图标栅格线

使用iOS应用图标栅格线作为设计依据有助于建立和谐的图标绘制比例,并与iOS系统保持统一,下图为iOS系统天气应用使用了图标栅格线。将图形放置在图标栅格上调整大小并注意图形与其比例协调。

两万字超强干货!设计师必看的图标设计指南

丰富细节

通过上面图形组合已基本完成应用图标的设计,接下来我们还应从颜色、质感、背板等着手丰富图形的细节,建立起应用的产品气质。“影记”作为摄影师分享佳作平台,摄影师们用的器材颜色大多以黑色为主,因此酷酷的黑色更适合作为应用的主色。白色的信号灯过于普通,使用相机本身发出的橘红色灯光作为信号灯的颜色,使其更加具有动感和活力。整体像「消息气泡」的造型暗示可以在这里进行摄影交流。

两万字超强干货!设计师必看的图标设计指南

多场景测试

将应用图标设计稿交付开发提交至App Store上架,正确的图标设计稿应是直角矩形,iOS会自动应用一个圆角遮罩将图标的4个角遮住,假如图标设计稿自带圆角,就有可能露出图标透明区域。

两万字超强干货!设计师必看的图标设计指南

△ 注:上图非实际大小,仅表明不同分辨率下的比例关系

此外,应用图标还会以不同的分辨率出现在不同场景中,例如在iPhone 8plus上需@3x(120px)的图,而在iPhone7的设置页需要58px的图,就需要将120px的图缩小。将大图缩小成小图时,一些细节就会丢失,使画面变得模糊,因此设计师应对小尺寸图标进行细微调整,去除不必要的装饰元素,以确保应用图标在小分辨率应用场景下也能保持清晰的识别度。

两万字超强干货!设计师必看的图标设计指南

功能图标的设计规范

除了产品图标,还有一种图标被称为功能(或系统)图标,功能图标指的是担负一定功能和含义的图形,一般来说需要像文字一般地被人迅速理解,所以表达方式上不适合特别复杂,如微信底部四个系统图标就使用了比较简洁的线性风格。

功能图标在UI设计中占据非常重要的作用,几乎存在于每一个应用界面中,无论是在导航栏、工具栏或标签栏,还是在首页、详情页或个人中心页,都随处可见功能图标的身影。功能图标具有明确的表意功能,其作用在于替代文字或辅助文字来指引用户进行快速导航,它具有图形化的符号,比文字更加直观,符合普罗大众的认知习惯,有助于用户形成记忆思维,提高应用的易用性。同时设计精致、风格统一的功能图标提升了产品视觉效果,不但给用户带来视觉上的愉悦感,还带来了良好一致的使用体验。

1. 图标的规范

图标是良好设计系统的基本组成部分,对营销材料非常有帮助。他们是插画内容的基础构建块,但他们也具有很高的技术性。因此科学严谨的设计规范能帮助我们设计精致、风格统一的图标。

两万字超强干货!设计师必看的图标设计指南

2. 图标尺寸

一致性是设计图标的关键,在绘制时,一定要确保所有的图标都相同大小。在UI界面设计中,网格的大小必须要是4或12的倍数(安卓是8的倍数,iOS是4的是倍数)。@2x下作图要保证是4的倍数,这样可以整除2,适配@1x的屏幕;@3x下作图就需要是12的倍数了,这个数值可以整除2、3、4,适配@1x和@2x的屏幕,界面中通常使用的图标尺寸24*24px、48*48px。这里建议用48px做为常规图标设计尺寸。

两万字超强干货!设计师必看的图标设计指南

通常我们只需要选择一个通用的尺寸来绘制,然后让开发人员根据倍数调整可能需要的尺寸即可,这样就不用一遍又一遍的去绘制不同大小的相同图标了。

不过当我们的图标涉及一些复杂的细节时,还是需要根据尺寸大小单独绘制。比如我们的系统图标可能是24px,但是营销图标是80px,两者的使用差别会很大,那么我们就需要为那些较大的尺寸添加一些细节。

两万字超强干货!设计师必看的图标设计指南

知识点:

这里建议从最大的尺寸开始,然后依次绘制小一点的。因为删除和简化细节要比添加容易得多,也能的保留图标原始状态。

图标绘制基于48x48px画布绘制的线性图标,线宽默认为4px,不同场景缩放比例使用:

  • 图标为32x32px时,线宽3px(基准线宽)
  • 图标为24x24px时,线宽2px(基准线宽)
  • 图标为16x16px时,线宽2px(基准线宽)
  • ……

如果你要绘制描边图标,那么需要保证所有的笔画都是相同的粗细,并且笔画之间的间距不要比笔画本身更细。

两万字超强干货!设计师必看的图标设计指南

3. 图标的keyline

图标网格为图形元素的一致但灵活的定位建立了明确的规则,keyline是网格的基础-。通过使用这些核心形状作为知道,你可以跨系统保持一致的视觉比例。

两万字超强干货!设计师必看的图标设计指南

4. 图标关键图形

图标栅格用于图标元素绘制的参考并帮助建立清晰的内容轮廓边界,关键线有助于促进图标统一性,简化设计过程中比例调整成本,绘制小图形需要参照小正方形的keyline。

两万字超强干货!设计师必看的图标设计指南

5. 图标的拐角

两万字超强干货!设计师必看的图标设计指南

直角拐角:当基础图形为满容器正方形时,建议使用3X圆角,当基础图形为满高(宽)矩形时,建议使用2X圆角。当基础图形为较小(小于1/2宽高)矩形时,建议使用1X圆角。

两万字超强干货!设计师必看的图标设计指南

非直角拐角:根据图标场景,通常情况下无论角度,默认均为1X圆角;特殊弧度的曲线“拐角”情况除外,根据图标设计需要单独考虑。

两万字超强干货!设计师必看的图标设计指南

6. 图标区域 封闭和非封闭

封闭区域,有闭合曲线构成的为封闭区域,可以进行独立颜色填充;

非封闭区域,由非闭合曲线构成的非封闭区域,原则上是不能进行独立的颜色填充;

两万字超强干货!设计师必看的图标设计指南

封闭区域为曲线形状且有相交线段时,原则上是不能进行独立的颜色填充;

7. 图标绘制规则

当线段与曲线相交或者与直线非垂直相交时,线段末端用圆头端点;

当线段与直线垂直相交时,线段末端用方头端点;

当圆点的直径与线宽一样时,圆点用图形绘制,不用线段;

当圆形和方形在小于16px时建议用图形绘制,不要用线;

两万字超强干货!设计师必看的图标设计指南

倾斜角度

根据像素的网格线来设置一条线的起点和终点,会让你的图标看起来更清晰。图标中的倾斜角度应为45的倍数,保持与keyline中的对角线或十字垂直相交线保持平行关系,若是矩形外框,倾斜角度也可以与矩形的对角线或十字垂直相交线保持平行关系。应避免用13.7°,81°等这些奇怪的数值。

两万字超强干货!设计师必看的图标设计指南

线段和端点

为保证风格的整体一致性,图标所有线段端点默认均应为与线段同宽的圆角端点,通常情况下线段端点和可编辑节点坐标以整数坐标为佳。默认基于48px画布绘制的线性图标,线宽默认为4px,无论直线和曲线在任何时候线宽都应均保持一致。

两万字超强干货!设计师必看的图标设计指南

图标断口与间距

内部结构与外框的间距不得不小于线宽,内部元素之间的间距不得不小于线宽的1/2px。

外形框的端口尺寸关系:4px、8px、12px,建议尺寸为4的倍数。

两万字超强干货!设计师必看的图标设计指南

图标风格变换

图标在特定规律下允许不同风格之间的变换,分别为线性风格(默认)、填充风格、混合风格、多色混合风格。

两万字超强干货!设计师必看的图标设计指南

单双像素描边

如果为图标设置1像素的边框,边框应该使用外部或内部的描边样式,但是不建议居中描边样式,居中描边的1px边框,虽然在放大它们的时候,它们看起来很清晰。但在100%比例大小显示的时候,它们会模糊。双数用居中描边,单数用外描边,所有锚点要与网格对齐不能出现偏移。

两万字超强干货!设计师必看的图标设计指南

线段闭合

所有线段结合处应为闭合状态,避免错位出现。

两万字超强干货!设计师必看的图标设计指南

统一透视

如果图标有透视需求的话,就要统一透视角度,例如图标透视方向朝左,那就统一所有图标的透视角度都朝左边。

两万字超强干货!设计师必看的图标设计指南

8. 视觉栅格

除了像素栅格,还有视觉栅格。视觉栅格可以帮助我们找出图标的中心在哪里,以及人眼能感知到它有多大。圆形和弧形物体看起来会比正方形更小。因此我们应该在绘制图标时设定一个固定大小的容器,这样它们在导出时就都是相同的尺寸了。添加内边距可以让图标在视觉上看起来更加平衡,避免以后开发时还需要重新调整。

两万字超强干货!设计师必看的图标设计指南

9. 视觉重量

绘制图标不光要满足物理上大小统一,还要实现视觉上大小统一。设计师要懂得调节图标大小以避开视觉上的觉错。

UI界面的图标通常可以近似的看做以下的基本格式之一:横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。 如果把它们做成高斯模糊效果,你就会发现它们具有相同的视觉重量,因为它们变成或多或少相同的斑点效果。

两万字超强干货!设计师必看的图标设计指南

根据图标形状,将它们放在相应的框架中。你就会发现,方形图标比三角形或细长图标更紧凑。

10. 图标绘制细节

清晰是图标的基本要素,在sketch中,参数不要有小数点,让图标占满像素网格。因为计算机不能识别小数点,导出图标时计算机会把不能识别参数的部分拉伸填满像素网格,导致图标出现虚边。

两万字超强干货!设计师必看的图标设计指南

通常从一套图标中最复杂的那个开始,因为它会帮助我们定义相同的视觉重量,让所有的图标视觉重量保持一致。因为当图标具有不同的细节层次时,更复杂的图标会吸引用户更多的注意力,而且视觉上看上去更重。

两万字超强干货!设计师必看的图标设计指南

11. 图标的颜色

默认颜色:如果是功能图标,那么最好只使用一种颜色:黑色。否则你的组件可能变得过于复杂,不利于和其他设计师协作。而对于营销图标,出于品牌宣传的目的,你可能会想要使用两种颜色,个人认为图标最好是单一颜色的,3种或3种以上颜色的东西都是插图,而不是图标。

选择状态颜色:未选择图标颜色为#000000,透明度为87%;未激活图标颜色为#000000,透明度为54%;禁用图标颜色为#000000,透明度为38%。

两万字超强干货!设计师必看的图标设计指南

12. 功能图标的风格

功能图标在UI设计中占据非常重要的作用,几乎存在于每一个应用界面中,无论是在导航栏、工具栏或标签栏,还是在首页、详情页、或个人中心页,都随处可见功能图标的身影。功能图标具有明确的表意功能,起作用在于替代文字或辅助文字来指引用户进行快速导航,它具有图形化的符号,比文字更加直观,符合普罗大众的认知习惯,有助于用户形成记忆思维,提高应用的易用性。同时,设计精美、风格统一的功能图标提升了产品视觉效果,不但给用户带来视觉上的愉悦感,还带来良好一致的使用体验。

常见的功能性图标风格大致有三种:线性图标、面形图标和扁平化图标。但其实我们可以将「扁平化图标」可以看作是「线性图标」和「面型图标」的一种组合形式,所以归根到底,基础的图标风格有两大类:「线性图标」和「面型图标」;

两万字超强干货!设计师必看的图标设计指南

线性图标

线性图标是通过线条来表现物体的轮廓,它比面形图标更能塑造优美的外观,且作为贯穿图标绘制的线条本身就是一种设计语言,因此绘制整套线性图标会更加统一,具有整体感。例如twitter和微信底部的tab图标等。在一个场景下的几个同等重要的图标,如果线条粗细不一致,会给人一种权重上存在差异的感觉。所以,在绘制线型图标时,通常会使用统一粗细的线条。

两万字超强干货!设计师必看的图标设计指南

线性图标具有辨识度高,清晰,简约易识别等优点,线性图标不会对页面造成太多的视觉干扰。缺点是:线性图标的创作空间较少,太复杂的线性图标对识别性产生较大的困扰。

两万字超强干货!设计师必看的图标设计指南

常用的App图标设计线的粗细一般有2PX或者3PX,不同的线条粗细 ICON 所带来的视觉感受也不同,细线显得精致,粗线视觉面积大,显得厚重。圆角粗线条的 ICON 显得饱满而可爱,个别 App 的底部标签栏图标采用粗线条设计,但粗线条的 ICON 图形较为极简才适用。

线性图标根据样式还可以分为:双色线性图标、线面填充图标、线性渐变图标。

两万字超强干货!设计师必看的图标设计指南

线性图标使用场景

在iOS所有原生应用的导航栏和工具栏都采用了2px线框的图标设计,很多APP产品的标签栏都选择用线性风格的图标设计。无疑,线性图标可以减少视觉干扰,让用户集中在产品核心功能上,同时轻量化的视觉语言也与扁平化的设计风格更为融合。它比面形图标更能塑造优美的外观,且线条本身就是一种设计语言,因此绘制整套线性图标会更加统一,具有整体感。

两万字超强干货!设计师必看的图标设计指南

通常,在UI设计中,线性图标很少和背板同时存在,因为线条的图形视觉表现力较弱,容易埋没在背景色中,但也不是必须的,如果掌握好一定的规则,一些简单的线性图标和背板的组合也会很协调。

面形图标

面形图标是以面为主要表现形式的图标,通过线或者面去切割基础轮廓面,通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。在「微信」底部标签栏中,未选中的图标是线性图标,而选中的图标则是面形图标,同时颜色会变成微信的品牌绿色再次暗示用户选中状态。面形图标占用的面积要比线性图标多,所以更加显眼。实际上,苹果在新的设计规范中也建议开发者在APP底部标签栏中全部使用面形图标,是否处于点击态通过改变填充图标的颜色进行区别。这是因为填充图标看上去像可点击的。

两万字超强干货!设计师必看的图标设计指南

面形图标具有表意能力强,细节丰富,情绪感强,视觉突出,创作空间大等优点。面性图标可以让用户迅速定位图标位置,预知点击后的状态。但是面性图标在页面中不可过多出现,否则会造成页面臃肿,难分主次,用户视觉疲劳。

面性图标根据不同的配色样式可以分为:单色饱和度填充图标,纯色渐变图标和多色渐变图标。

两万字超强干货!设计师必看的图标设计指南

基于最基本的「线性图标」和「面型图标」,通过不同的形态和风格的组合,再结合丰富的 表现手法,就可以设计出形形色色的图标风格了。比如:不同粗细线条线性图标的组合,或者面面组合,或者线面组合。大家在设计图标的时候,需要根据自己的产品特征、受众和使用场景,去选择适合自己的表现形式。

面形图标使用场景

面形图标具有广泛适用性,通常在运动、时尚类应用的标签栏出现。由于面形图标的视觉占比最大化,具有强烈的视觉表现力。

两万字超强干货!设计师必看的图标设计指南

功能入口的面形图标通常分为反白和正形两种类型。反白即在彩色背板上显示白色的图标,正形即图标直接填充色彩且无背板。在带有背板的图标设计时要注意图标与背板的尺寸比例,虽没有严格的绘制标准,但从整体视觉效果上考虑,图标尺寸最好不低于背板直径但1/2,最大不超过背板直径的0.618(黄金比例),同时还要考虑所有图标的视差一致。

两万字超强干货!设计师必看的图标设计指南

13. 扁平图标的使用场景

扁平化图标实际上是线性图标和面形图标的一种组合形式,这种类似插画感觉的图形一开始多用于引导页、空状态也的情感化设计,后来逐渐在标签栏、首页主要功能入口也出现了扁平化图标的身影。精致的扁平化图标令人赏心悦目,拉近了与用户之间的距离,从而建立起良好的用户印象。

两万字超强干货!设计师必看的图标设计指南

14. 品类区图标

品类区图标的卫视通常是位于搜索框、banner之下(也俗称“金刚区”),而且品类区区域通常会占屏幕22%-25%不等,且位于屏幕头部,从用户阅读屏幕内容的视觉流来说位置至关重要,而且是聚合各类子版块的入口,为各个子版块分发内容引导流量。所以其重要性不言而喻,产品要让用户通过不同类型展示方式的组件找到相应的功能,而图标具备精炼高度概括内容的特性,识别度也大于文字,所以「金刚区」的图标设计通常以图标+说明文字为主。

两万字超强干货!设计师必看的图标设计指南

常见的设计手法有:圆形底板+45度渐变+白色面形+微投影;45度渐变+扁平图标+微投影;简单线性;45度渐变+不透明度+面形图标。

两万字超强干货!设计师必看的图标设计指南

15. 文字图标

文字图标是指用文字直接表示特定含义的图标符号。由于文字本身就是一种演化而来的符号,英文的首字母或者词语关键字本身也具备很强的信息浓缩性,因此在某些场景下,采用文字或字符作为图标,是一种很不错的表现手法。

两万字超强干货!设计师必看的图标设计指南

比如「提示」图标,使用一个圆圈包裹一个英文字母「i」,意为 information,表示「注释信息」的含义;比如停车场直接使用「Parking」中的首字母 「P」,这些都是比较约定俗称的使用方式。还有一些场景,很难用象形或者表意的方式进行表达,那么就很适合使用文字符号,例如京东/天猫某些商品具备「正品保证」的标识,这个概念太抽象了,很难用象形去概括,创造新的表意符号又很难被大众接受,这时「正」字就很适合作为这个场景特定的图标符号,作为针对中国用户群体的产品图标,简单粗暴且有效。

知识点:

如果可能的话,尽量避免在图标中使用文字。因为图标应该是全球性的。如果你确实需要文字图标(例如货币符号等等),那么请你自己绘制,而不是直接使用字体。

16. 动态图标

这几年动效设计的热度稳定增长,只有静态排版的时代正在过去。动效的出现,也让图标拥有了更多的可能性。动态图标可以让你的app或网站生动有趣,在我们所常见的各种数字产品当中,UI组件和各色元素都已经动画化了。

两万字超强干货!设计师必看的图标设计指南

运动中的物体比静态的物体更能快速引起人们的注意,在UI设计中尝试添加一些动画及动画图标,不仅能在视觉上快速吸引用户,还能使产品更具交互性,提升产品的趣味性。分享几个动态图标资源网站:

useAnimations:支持所有设备、网站、Android和iOS,可以免费用于个人和商业用途。

两万字超强干货!设计师必看的图标设计指南

useanimations.com

Lordicon:每一个图标都提供线性轮廓和面形剪影两种风格样式,并且图标是基于Lottie动画引擎的矢量动画图标,大小完全可扩展,兼容所有主流浏览器。

两万字超强干货!设计师必看的图标设计指南

△ https://lordicon.com

Icons8 Animated icons 2.0:提供的动态图标格式包括 Lottie 适用的 JSON、GIF 和 After Effects 格式,透过网页可以搜寻、预览动态图标效果。

两万字超强干货!设计师必看的图标设计指南

△ https://icons8.com/animated-icons

Feather:设计师Cole Bemis制作的一个开源图标库,可自行调节图标大小和线条粗细。

两万字超强干货!设计师必看的图标设计指南

△ https://feathericons.com/

17. 图标命名规则

科学和的命名规则能够帮助我们快速定位到自己制作的图标,并且帮助开发缩短命名时间,加强团队写作效率。切图可按照“业务_类型_功能_大小_状态”的格式进行命名。

两万字超强干货!设计师必看的图标设计指南

切图命名的格式建议为全英文,可在切图之前对图层进行命名,常用切图命名对照表如下所示。

两万字超强干货!设计师必看的图标设计指南

如何绘制功能图标

1. 图标绘制方法

图标的绘制方式主要有两种:布尔运算 和 贝塞尔曲线。

布尔运算

布尔指的是乔治·布尔,19世纪的一位数学家,为了纪念布尔在符号逻辑运算中的杰出贡献,所以将这种运算称为布尔运算。

布尔运算听起来比较难,但其实非常简单,布尔运算采用的数字逻辑推演法,主要有数字逻辑的联合、相交、相减。设计师在使用软件过程中引用了这种逻辑运算方法,对应到设计软件中,就有:合并形状、减去顶层形状、与形状区域交叉、排除重叠形状。例如两个圆形相减可以得到一个月亮的造型,这就是布尔运算。

两万字超强干货!设计师必看的图标设计指南

  • 合并形状:将两个形状合并为一个,取的是合集;
  • 减去顶层形状:用底层图形减去顶层图形所得最终图形;
  • 与形状区域相交:得到的形状是两个图形重叠的部分,取的是交集;
  • 排除重叠形状:简单理解就是减去两个图形重叠的部分,与「与形状区域相交」相反;

基本上通过布尔运算,我们能绘制出常见的大部分图标了,但有时我们需要针对某些线条进行单独的调整,又或者我们需要打造一套手绘风的矢量图标,这个时候就需要用到贝塞尔曲线了。

贝塞尔曲线

贝塞尔曲线适用于二维图形绘制的数学曲线。1962年法国工程师皮埃尔·贝塞尔(Pierre Bézier)所发表。他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线是绘制矢量图形时的重要工具,使用钢笔工具画出的所有图形一般来说都是贝塞尔曲线组成的。

贝塞尔曲线包括:节点、控制点、控制线、曲线这几个基本概念。

矢量图形便是由这几个基本概念构成的。图形由基础节点作为支撑构成,控制点和节点之间的线段称为控制线,控制线就像皮筋一样,调整控制点的位置,可以改变曲线的形状,就像被皮筋(控制线)拉扯一样。

两万字超强干货!设计师必看的图标设计指南

节点包括 4 种基础属性类型,一种是没有控制点和控制线的「直线节点」;另一种是「镜像关联节点」,这种节点控制其中一侧的控制点,另一侧的控制点会发生镜像变化,适合绘制对称结构的曲线;再有一种是「无关联节点」,即节点两侧的控制点可以各自自由控制它们那一侧的曲线而不互相影响;最后一种是「不对称关联节点」,这种类型下,节点两侧的控制点和节点会永远保持在同一条直线上,但是却不会对称控制线的长度。

知识点:

在 Sketch 中,我们可以在选中节点后通过快捷键 1 / 2 / 3 / 4 来快速切换当前节点的类型,加快绘制效率。

钢笔工具

绘制自由贝塞尔曲线常用的工具便是钢笔工具,钢笔工具也是所有矢量软件的核心工具。它的使用对于新手可能稍微薇有点复杂,但是一但上手,会非常方便。The Bézier Game 这个是一个非常不错的练习钢笔工具的网站,以游戏的形式练习钢笔工具,通关的时候你对钢笔工具就已经轻车熟路了。

两万字超强干货!设计师必看的图标设计指南

绘制实战

这里选择了几个比较典型的图标,简单演示下绘制方法和各自的绘制思路:

面性

眼睛:布尔运算相交 / 相减 / 合并形状

绘制一个正圆,然后复制这个正圆形,通过布尔运算「与形状区域相交」得到眼睛外轮廓,再绘制两个圆通过「相减」与合并形状得到眼睛造型。

两万字超强干货!设计师必看的图标设计指南

位置定位:旋转 / 相减

这个图标由两个大小圆形相减,得到环形,再绘制一个和大圆半径相等的正方形,和圆环左、下对齐,最后逆时针旋转45度完成。

两万字超强干货!设计师必看的图标设计指南

WIFI:相加 / 相减 / 旋转

绘制多个圆通过布尔运算的相加减得出三个圆圈嵌套“靶子造型,再绘制一个正三角形,和靶子图形相交得到Wi-Fi图标。

两万字超强干货!设计师必看的图标设计指南

齿轮:旋转 / 相减

通过两个图形的布尔运算得到环形,然后绘制一个梯形,复制一个镜像,将其对齐环形两端,复制梯形编组并旋转复制三次(45度),最后合并全部形状完成。

两万字超强干货!设计师必看的图标设计指南

铃铛:相加 / 相减

由3个矩形组成铃铛主体,铃铛顶部圆顶结构通过设置全圆角所得,铃铛底部的半圆使用圆形和矩形进行布尔运算,完成。

两万字超强干货!设计师必看的图标设计指南

线性

放大镜:旋转 / 相加

绘制一个正圆和一条线,用对齐工具将其居中对齐,编组后逆时针旋转45度即可。

两万字超强干货!设计师必看的图标设计指南

时钟:钢笔 / 剪刀工具

绘制一个正圆和一个矩形,使圆形的左下角对齐圆形中心,用钢笔工具在矩形左边和下边增加两个锚点,再用剪刀工具减去多余的线条即可。

两万字超强干货!设计师必看的图标设计指南

雨伞:相减 / 剪刀工具

绘制一个正圆,再绘制一个矩形与其相减得到伞顶,然后绘制一个矩形,通过剪刀工具减去多余部分,得到伞架,伞把手圆角化处理,完成。

两万字超强干货!设计师必看的图标设计指南

相机:合并

绘制一个矩形和一个梯形,通过合并得到相机主体,再绘制一个正圆完成相机镜头部分,完成。

两万字超强干货!设计师必看的图标设计指南

爱心:相加 / 旋转

绘制两个正圆和一个直径与圆形等宽的正方形,然后逆时针旋转45度所得。

两万字超强干货!设计师必看的图标设计指南

2. 制定规范

无规矩不成方圆,规矩的出现可以让一切杂乱的东西变得合理,统一起来。在设计上也是如此,规范具有统一输出,指引细节、便于查看的好处,规范就是一组图标中的规矩,所有图标的绘制都按照规矩来,最终的成品就会显得井然有序。

小小的图标是由很多图形元素组成的,在这些图标中,元素的一致性是建立一个共同视觉于洋的关键。熟悉这些元素可以更容易地理解每个图标和他们之间细微的差异,也将帮助我们学会图标设计的底层结构,依次是笔画末端、圆角、留白、笔触、内部角、禁绘区。

两万字超强干货!设计师必看的图标设计指南

在制定规范时,我们通常先绘制出一个符合业务风格的图标,然后根据这一个图标定制后续的图标规范,依次按照上述图标元素进行规范。如果是渐变填充图标还要规定它的渐变角度,光影角度等。在一组中的图标需要在这些图形属性中进行统一,这样的图标虽然形状不一样但是在视觉上看起来是属于同一系列的。

两万字超强干货!设计师必看的图标设计指南

制定规范的三个过程:

  • 拆分细节:将图标中的细节元素(圆角、笔画末端等)进行分解,并在规范中制定细节元素的使用法则。
  • 风格定位:根据产品调性,业务属性在规范中制定相应的色彩、质感风格。
  • 功能划分:不同功能(金刚区和标签栏等)的图标要区分开来,功能相近的包括色彩、质感应该采取相近性。

两万字超强干货!设计师必看的图标设计指南

△ 图标设计规范

3. 线性or面性

设计中,我们应该是用「线性图标」还是「面性图标」呢?

其实二者没有太明显的选择优劣,很多场景下已经越来越模糊,但总的来说,还是有一些法则可以作为参考:

常用的手法:在App的底部导航栏,选中状态使用面型图标,而非选中状态使用线性图标;

16px左右的小图标慎用线性图标,线性图标在16px下,可排布像素的区域较小,这个时候线性图标不容易设计;

面型图标比起线性图标,除装饰性外具备更强的视觉信息层次感,更具引导性,比如金刚区功能图标、IOS设置界面,使用面型图标;

车载等系统界面,更适合用面型图标,面型图标的视觉面积较大,短时间内更加容易识别;

线性图标看起来通常会更加细腻精致,适合比较精致简洁的设计或者女性化产品设计;

两万字超强干货!设计师必看的图标设计指南

4. 图标导出

文件格式是导出图标的关键。不同的人需要的文件格式也不同,如果你为外部合伙人提供图标,那么可能会提供1x、2x和3x.的png文件,以适应多种设备。而对于开发和其他设计人员,则通常需要导出.svg文件,这些文件可以在设计程序中编辑,并且可以通过代码在应用程序或浏览器中绘制。导出的svg可以用sketch的官方插件「sketch-SVGO」进行代码优化,压缩svg的体积,精简svg代码。

两万字超强干货!设计师必看的图标设计指南

△ sketch-SVGO 插件官方下载页

svg格式仅支持居中描边的图标,并且不支持投影,因此对于复杂丰富的图标还是切img图为好。

两万字超强干货!设计师必看的图标设计指南

5. 图标管理和交付

完成图标后需要进行视觉检视,避免任何多余的线条或形状,保证尽可能整洁。检查所有线条是否都在标准框架内,让其他人帮忙来检查你的图标是否整洁是非常有必要的。对图标精心设计评审,合格后再加入资源库,这样避免多人同时修改而造成混乱,同时提升团队协作效率。推荐一个免费的图标管理工具:Nucleo,团队协作需要付费。

两万字超强干货!设计师必看的图标设计指南

△ 图标资源管理工具:Nucleo

图标设计的评判标准

我们了解了 icon 的基本知识,那么如何设计一个好的 icon 呢?怎样评判我们的 icon 是否合适,是否贴合整个产品呢?我们需要了解什么才是一个好的 icon 。

我们可以从以下五个方面来检验,分别是:识别性,规范性、统一性、呼吸感与品牌感。

两万字超强干货!设计师必看的图标设计指南

1. 识别性

图标就是帮助用户理解信息,所以识别性(也可以说是可访问性)是一个图标最重要的一项,尤其在没有文字说明的情况下,一定不能让用户产生疑惑。我们检测图标的可读性通常要将图标的背景色底板在黑色和白色之间进行切换对比,不论是黑色还是白色的背景都可以看清图标的全部细节,还需要确保图标中的每一种颜色都是可见的。

图标识别性可以分为两类,分别是含义识别和视觉识别。

  • 含义识别:是视觉语言是否可替换文字语言,简言之就是让你的图标可以被用户理解,不会让用户产生歧义。
  • 视觉识别:图标的大小,复杂度,颜色,线条的粗细,这些影响视觉识别的因素识别性是否高。

两万字超强干货!设计师必看的图标设计指南

灵活的设计思路,在保证识别度的前提下灵活发挥,尝试各种不同风格的表现形式。

两万字超强干货!设计师必看的图标设计指南

当然,脑洞也不要太大,失去了原本的含义,造成误解。

两万字超强干货!设计师必看的图标设计指南

2. 规范性

规范性也是做好一个图标的基础,我们要保证图标在视觉大小的一致性,图标饱满度、遵循同一种规律,细节统一性。

视觉大小的一致性:在相同尺寸的基础上分析形状间的视觉差异,来审视视觉上是否统一,如一样尺寸大小的圆和方形的视觉大小就不一致,那么我们可以规定它的最大尺寸,进而在尺寸规范中适当调整,使得视觉大小达到统一;

两万字超强干货!设计师必看的图标设计指南

  • 饱满度:常用的衡量方法就是正负形衡量法,在图标所占区域的矩形框中,看图标的正形的面积是否还可以增加;
  • 相同规律:同一套图标必须是以同种风格呈现的,例如是否全部使用了圆角或直角的风格,圆角大小、绘制风格是否一致;
  • 细节统一:包括像素是否对齐、圆角、描边粗细是否统一的问题;

3. 统一性

在绘制多个类型相同的图标时,我们需要注意这一套图标合集需要在视觉上保持统一性。在一整套产品中,会有很多种图标,但是图标的功能不一样,所表达的内容也不同。这时,图标一致性的意义就体现出来了,根据格式塔原理中的相似性原则:人们会将如元素彼此相似的东西感知为一组。这也意味着如果具有相同功能、含义和层次结构级别的元素,则应在视觉上保持统一匹配。

两万字超强干货!设计师必看的图标设计指南

图标内容的统一会让用户明白相似的图标所代表的的功能也相同,而且在视觉上也更加和谐美观。因此我们在绘标后还需检查线条的粗细比重,边角的大小,配色方案,细节层次和设计元素在整个合集中是否是不变且一致的。

图标的统一性可以从:线条粗细、设计语言、复杂程度、颜色规范四个大的方向去着手。

线条粗细:相同功能类型的图标线宽粗细统一,有背板的图标线条不易过细;

两万字超强干货!设计师必看的图标设计指南

设计语言:可拆分为透明度(拉开层次)、圆角(圆角还是直角)、断线开口(开口位置)、设计特征四个纬度去规范;

两万字超强干货!设计师必看的图标设计指南

复杂程度:如果不能简化图标,就保持同一组图标的墨水重量一致,简化太复杂的图标,增强辨识度;

两万字超强干货!设计师必看的图标设计指南

颜色规范:对于线面结合的扁平图标建议最多用两种颜色,活动入口图标如果需要的色彩数量多,那就需要保持敏感,从一种色彩的周围小幅度提取另一种色彩或多种色彩,调整其色相、饱和度、明度就能搭配出许多和谐的颜色。

两万字超强干货!设计师必看的图标设计指南

4. 呼吸感

呼吸感的意思就是适当留白。不管是图标还是界面,适当的留白可以突出主体内容,让内容具备易看性。在图标的绘制过程中,我们应该注意图标元素之间的间距不宜过近,元素也不宜过多。图标是一个物体的简略缩影,目的是为了表达内容,让用户快速理解,太过复杂的细节会影响图标的识别速度。因此在图标的绘制过程中应该删除所有无法传达图标意义的元素,避免使图标变得太过复杂难以识别。

两万字超强干货!设计师必看的图标设计指南

5. 品牌感

品牌感就是我们上面谈到的要与品牌理念相符,传达给用户的感受一致,通过吸取品牌色,提取品牌元素,采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解,寻找自己产品独特的品牌气质,挑选合适的技法。然后把这些元素具象化,融入在界面设计中。

两万字超强干货!设计师必看的图标设计指南

那么,该如何提升品牌感,打造属于自己App的独特风格呢?品牌基因为我们提供了一些线索,这是近年来非常流行的一种趋势。

图标的品牌感

我们都知道图标在APP设计中的重要性,但是打开许多APP你会发现他们的图标设计都非常普通,似乎是在图标网站上下载的素材。虽然一些优秀的设计师在进行图标设计师加入一些诸如圆角、断线等设计语言,但是仍逃脱不了与其他APP设计雷同、毫无个性的通病,使得UI看上去普通、不精致,缺少产品气质。

那么,该如何打造属于自己APP的独特风格呢?品牌基因为我们提供了一些线索。它是由平面设计中的VIS(视觉识别系统)引入的一种设计策略,通过对品牌形象进行延生设计形成一套完整的视觉符号。每一个APP都有其品牌形象,代表了与众不同的气质。接下来,我们就来学习如何利用品牌基因进行图标设计。

1. 提取品牌图形

通常一个App的第一个tab是首页,是用户进入App后看到的第一个页面,最常见的图标设计是一个小房子的图形。首页是App中最重要的页面,承载了整个产品的核心功能,是用户浏览最多的地方,因此使用一个让人印象深刻的品牌图形作为“首页”图标是必要的,不但使App内外形成了视觉联系,同时也二次传递了品牌形象,加强了用户对App的良好印象。例如网易云音乐的首页标签就直接使用了它的品牌图形,其优点不言而喻。

两万字超强干货!设计师必看的图标设计指南

但是请注意,这种设计策略并不适合于所有的App,当第一个tab被赋予特定功能,就不可使用品牌图形,否则用户会难以理解。例如微信第一个tab是聊天列表,此时使用气泡就比品牌图形更加合适。

还有另外一种情况。通常一个App的最后一个tab是个人中心,即“我的”。如果App的品牌图形是动物图形,也可以使用其整体或局部图形来作为「个人中心」的入口图标。

2. 提取品牌色彩

色彩也是图标设计中重要的构成元素之一,合理协调的色彩搭配让用户在浏览页面时感觉舒服。从品牌形象中提取色彩作为图标设计的依据,可以给用户带来由内而外一致的视觉体验。在设计时提取品牌色彩可适当调整色彩的饱和度,明度,既可以将图形整体填充色彩(例如微信),也可以局部填充色彩,还可以填充为图标背景色,使图标之间形成色彩上的关联。直播应用Bigo Live的品牌色是青蓝色,在标签栏的图标设计上(选中态)将图形局部元素填充青蓝渐变色,活泼清爽的搭配带给用户轻快的感觉,与整体品牌调性高度一致。

两万字超强干货!设计师必看的图标设计指南

3. 提取设计语言

在VI设计中通常提取辅助图形作为设计元素,这在图标设计中同样适用,当所有的图标都具备了相同的设计元素,他们就构成了一套完整的视觉符号。例如飞猪的品牌图形就很特别,猪的头部轮廓是由大写字母F演变成的翅膀造型,因此可以看到“我的”小人图标的也使用了类似的轮廓,这样他们就形成了某种视觉联系。

两万字超强干货!设计师必看的图标设计指南

4. 提取产品气质

品牌形象决定了产品的气质,而产品的气质决定了吸引什么样的用户。就如当我们第一次看到一个人的时候,往往会根据他的外貌形象特征,产生一个大致的印象,这就是一个人的气质。APP也同样,例如传递传统手工艺人社交的「东家」,其产品流淌着古朴、温润、精致的人文气息,它将宋体汉字的笔画进行拆解组合,创造出具有东方韵味且极具形式感的图标设计。

两万字超强干货!设计师必看的图标设计指南

5. 拆分品牌名称

App标签栏图标最常见的形式是图形加文字的组合,由于文字本身就能传达最直接的含义,因此图形的识别性并不那么重要了,我们就可以在其视觉表现形式上赋予更多创意和个性。MONO是一款阅读类App,它的标签栏图标直接将品牌名称中的4个字母拆分成4个图形。虽然每个字母与其对应的功能模块本身并没有直接联系,但加上标签文字的辅助也不会造成阅读困难,而且产品本身的用户人群就是比较能接受新鲜事物的年轻人,因此这样的创意反而给App设计加分了。

两万字超强干货!设计师必看的图标设计指南

6. 展开形象联想

我们日常使用的众多App大多数都有着相同的功能模块:首页、发现、动态、我的等,因此也就出现了很多雷同的图标设计。比如“首页”是尖顶房子,“发现”是眼睛,“动态”是气泡,如果有差别也只是设计风格的差异,有的直角有的圆角,有的线性有的面形。这样的设计没有品牌归属感,试一下将这些图标单独拿出来就无法判断它是谁,它从哪儿来?

两万字超强干货!设计师必看的图标设计指南

优秀的设计师不仅要具备将图标绘制精美的能力,还要具备丰富的设计想象力,不拘泥于设计规范的条条框框,有时候打破规则才能设计出优秀的图标。“首页”除了小房子我们还可以想到什么?马蜂窝的做法就很巧妙,“首页”图标是“蜂巢”,而蜂巢是马蜂的房子,这样的设计与品牌形象紧密相连,简直完美!不过的改版好像已经改没了。

两万字超强干货!设计师必看的图标设计指南

知识点:

总之,要想在绘制整套图标时建立统一风格,就要从外观和颜色上确立主风格,在局部寻求个性特征,将两者结合,并融合产品属性和符合用户定位,先在脑海中构思出清晰的概念,然后在稿纸上绘制草图,最后确立一个最佳方案上机完成,只有不断地思考和打磨才能创作出最佳的设计方案。

两万字超强干货!设计师必看的图标设计指南

写在最后

图标设计是UI设计中非常重要的环节,在尺寸有限的界面上,小小的 icon 可以更加简单的表达含义,传递给用户正确和友好的指引。建议每位UI设计师在平时做大量的练习尝试各种不同的风格,以满足不同的业务需求。另外,关于如何绘制keyline线,还有的iphone12样机,有需要的同学可以出门右转私信我。


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


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

2020-2021 设计趋势 · 年轻文化篇

ui设计分享达人

It is ultra experience

About Millennials and Generation Z


——————————

Intro 前言



很难界定千禧一代(生于20世纪80年代至2000年初)和 z 世代(生于1995年以后) ,但那些已成为当前消费市场中心的人与上一代有着不同的价值观和文化品味。他们表现出的消费特征是强调个人幸福而非群体,分享而非持有,体验而非产品。不仅仅是购买东西,他们倾向于通过购买包含社会价值观和信息的东西来表达自己的信念,他们也喜欢展示自己的成功或财富,并且乐于投资昂贵的品。与老一辈为了一个遥远的未来而牺牲了现在不同,他们关注的是现在。


It is difficult to define the millennials (born between the 1980s and early 2000) and the generation Z(born after 1995), but those who have emerged as the center of the current consumer market have different values and cultural tastes from the previous generation. They show the consumption characteristic that emphasizes individual happiness rather than group, sharing rather than ownership, and experience rather than product. They tend to expresses their belief by purchasing things containing social values and messages, not just purchasing things. They also enjoy the 'flex' culture that shows off their success or wealth, and invest easily in expensive luxury goods. Unlike the older generation who sacrificed the present for a guaranteed distant future, they are concentrating on the present.




千禧一代:在美国,千禧一代通常指的是出生于1980到21世纪初的人。对于千禧一代的界限有很多分歧,但2018年3月1日,《纽约时报》宣布,美国皮尤研究中心对1981年至1996年的千禧一代进行了定义。千禧一代也被称为 Y 一代,意思是他们是 X 一代的下一代。因为熟悉 IT 技术,这一代人也被称为技术一代。在《时代》杂志上,他们把这一代人称为“自我一代” ,因为这一代人的思考和行动以自我为主。


Millennials: In the United States, millennials are usually referred to births from 1980 to the early 2000s. There were many disagreements about the boundaries of the millennial generation, but on March 1, 2018, the New York Times announced that the Pew Research Center in the United States defines millennials from 1981 to 1996. The millennials are also called generation Y, which refers that they are the next generation of the generation X. This generation is also called 'tech generation' in the sense that they are familiar with IT technology. And in Time magazine, they called ‘me generation' because it is a generation that thinks and acts mainly on oneself.




Z世代:指的是1995年后出生,在全球和美国市场上已占据最高人口比例,超过了千禧一代的人。目前,Z世代处于十几岁到二十多岁的年龄段,他们被称为数字原住民,不像千禧一代生长在模拟和数字文化的混合环境中,他们从小就接触到数字环境。


Generation Z: It is a word that refers to births since 1995 and already accounts for the highest proportion of the population in the global and US markets, surpassing the millennial generation. Currently, the generation Z are in their early teens and mid-20s which are called digital natives who have been exposed to the digital environment since childhood, unlike the millennials who grew up in a mixed environment of analog and digital culture.


首先,我们将用6个能代表千禧一代和z世代的关键词来总结他们的特征。其目的是了解处于趋势中心的他们,解读流动的变化,并预测未来。我们将以匹配每个关键词的例子来研究年轻一代的特点。


First of all, we will summarize the characteristics of millennials and generation Z with six keywords that can represent the them. The purpose is to understand these generations that are the center of trends, read the flow of change, and predict the future. We will look at the characteristics of the younger generation with examples that match each keyword.



对于千禧一代和Z一代来说,被认为是某一特定阶层的专有财产的文化,如向公众传播的游戏、动画和科幻电影等,已经成为他们生活的一部分。品牌历来在战略上排斥流行文化,但他们目前正试图通过针对千禧一代和 z 世代的各种合作以反映年轻一代的品味和文化。


The culture that was regarded as the exclusive property of a specific class, such as games, animation, and SF movies spread to the public. For the millennial and generation Z, these cultures has become part of life. Traditionally, luxury brands have strategically excluded popular culture but they are currently trying to reflect younger generation’s tastes and culture, by conducting various collaborations targeting the millennial and generation Z.



#Supreme#StreetBrand#Drop


嘻哈和滑板在过去只是亚文化,现在成为谈论潮流不可或缺的因素。拥有滑板运动员感性和理念的街头品牌Supreme,受到全世界年轻人的支持。他们与许多品牌合作,激发年轻一代的收集欲望。千禧一代和Z世代毫不犹豫地将资金投入到他们喜欢的东西上。许多具有亚文化精神的公司和品牌正在引领这一潮流。


Hip-hop and skateboard culture which were only subcultures in the past are now an indispensable factor in talking about trends. The street brand Supreme, which has the sensibility and philosophy of skateboarders, is supported by young people around the world. They collaborate with many luxury brands which stimulates the desire of young generation to collect them. The millennials and generation Z does not hesitate to invest on the things they like. Many companies and brands which has the spirit of subcultures are leading the trend.



#Popmart#ArtToy#Blindbox#Unboxing


不同于动画或电影中的人物形象,艺术玩具是以艺术家的作品为基础,用3D形式制作出来的具有艺术感的人物。在中国,它们现在是最为热门的购买项目。千禧一代和Z世代喜欢享受爱好和表达个性的需求,使得这个市场正在迅速增长。过去,艺术玩具是一种只有少数人喜欢的文化,但千禧一代和Z世代不把钱花在业余爱好上,他们把这种收集艺术玩具的文化传播给了大众。


An art toy is a kind of figure which is produced in 3D form based on artist's work with an artistic sense added to the toy, unlike the animation or movie character figure. This art toy figure is the hottest shopping item in China, and this market is growing rapidly with the demand of the millennials and generation Z, which likes to enjoy hobbies and express their personality. In the past, art toy was a culture which only a few people enjoyed but millennials and generation Z who does not spare money for hobbies, has spread this culture of collecting art toys to public.




复古是一种持续数年的潮流,如今,年轻一代更注重将旧的潮流创造诠释为新事物,而不仅仅是发现旧的东西。千禧一代和 z 世代不怀念过去,但过去本身对他们很有吸引力。比起始终如一的文化,他们认为多样性和原创性是时髦的,他们没有经历过的内容是新出现的。


Retro is a trend that lasting for several years, and these days the younger generation focuses more on creating and interpreting the old trend to a new thing beyond just discovering old items. Millennials and generation Z are not nostalgic in the past, but 'past' itself can be attractive to them. They think that diversity and originality are trendy rather than consistent culture and the contents they have not experienced are coming up newly.



#UglyShoes#Balenciaga#Sneakers


Balenciaga在2017年发布了一款名为triple S的运动鞋,这是他们品牌之前从未见过的设计。它包含一个大的外底,一个不同成分的多层鞋帮,并被至少设计了3-4种颜色。triple S打开了ugly shoes的时代,因为设计得很像爸爸会穿的运动鞋,这种鞋也被称为“老爹鞋”。在不同品牌中,他们发布了代表“ugly shoes”的运动鞋,并变得非常流行。90年代是运动服装的全盛时期,许多品牌都使用技术重新推出当时热销的产品。这些款式不是根据铁杆趋势匆忙制造的,它蕴含着品牌悠久的传统。年轻一代对这些品牌的设计和故事充满热情。


Balenciaga released a sneaker called triple S in 2017, which was a design that had not been seen in their brand before. It was consist with a large outsole, an upper with various parts in layers, and at least designed with 3-4 colors. This triple S opened the era of ugly shoes, which also called daddy shoes since design resembled the sneakers that dads wore. In various brands, they released sneakers representing ugly shoes and became very popular. The 90s was the heyday of sportswear, and many brands are relaunching popular products sold at the time with added current technology. These models are not made in a hurry according to the iron trend, containing the brand's long-standing heritage. The young generations are enthusiastic about the designs and stories of these brands.



#RetroRadio#RetroProduct#RetroInterior


千禧一代和Z世代在物质丰富的生活环境中长大,他们倾向于追求有价值的生活。在购买产品时,除了实用性,他们更喜欢独特性或故事化的产品。收音机曾经是记忆的产物,但最近又形成了以年轻消费者为中心的,复古收音机的新的消费趋势。集感性设计、故事性和多种功能于一体的复古收音机,成为年轻消费者喜爱的礼物,也是年轻一代想要拥有的室内配饰。


Millennials and generation Z who grew up in a materially rich living environment, tends to pursue a worthy life. They prefer products that are unique or story-like in addition to practicality when purchasing products. Radio was once a product of memories, but recently a new consumption trend for retro radio has been formed, centering on young consumers. Retro radio, which contains sensual design, story and various functions, became a gift that young consumers enjoy and an interior accessories which young generation would want in their home.



在认为环保就是性感的态度下,千禧一代和Z世代喜欢素食主义,觉得假皮草很新潮,甚至会考虑制作过程来购买化妆品。现在,企业已经读懂了这些市场趋势,并开始改变营销方式,只有注重可持续性而不是追求简单美的公司才能生存下来。


In the attitude of considering eco-friendly as sexy, the millennials and generation Z enjoys vegetarianism, considers fake fur trendy, and even buys cosmetic products by considering the process of making it. Now, companies have read these market trends and started to change marketing, and only companies with sustainability in mind rather than pursuing simple beauty survive.



#Patagonia#DoNotBuyThisJacket#Eco-friendly


Patagonia是一家以引领环境保护和自然保护而闻名的公司,他们发布了一则“不要买这件夹克”的广告,两年内销售额增长40%。年轻一代不是通过广告来购买Patagonia的产品,而是赞同他们的理念,即尽量减少对环境的破坏,追求公平交易,并且告知一件夹克的制作过程如何影响环境,通过商业来保护环境。


Patagonia is well known as a company that has been leading the environmental protection and nature conservation activities. They posted an advertisement called 'Do not buy this jacket' and sales increased by 40% in two years. Instead of advertising to buy their products, young generations sympathize with Patagonia's philosophy of minimizing environmental damage, pursuing fair trade, and preserving the environment through business by notifying how the process of making one jacket affects the environment.



#Freitag#UpCycling#Sustainability


Freitag品牌包包由卡车防水布、汽车安全带、废弃自行车橡胶管制作而成,是环境保护和循环再造的代表。它回收现有的废弃品,并通过添加不同的价值进行再创造。尽管售价高达200-600美元,但它目前有400家商店,去年的收入为10亿美元。


The brand Freitag represents eco-friendly and up-cycling by making bags with truck waterproof fabrics, seat belts for cars, and rubber tubes for waste bicycles. It is a representative brand of up-cycling that recycles existing discarded products and re-creates them by adding different values. Despite the high-priced bag of 200 - 600 USD, it currently has 400 stores and revenue of 1 billion USD last year.



我们称这些年轻人为“中性”的一代,他们接受不同的种族、性别和文化背景,并承认其价值观。与上一代相比,千禧一代和Z世代更了解和熟悉那些与自己不同的人,他们对同性恋和跨性别问题也很感兴趣。他们没有按照别人设定的标准去调整自己,而是有一种接受和肯定现状的意识。


We call this young people as ‘gender neutral' generation who recognize various races, genders, and cultural backgrounds and admit their values. The millennials and generation Z are more familiar with people who are different from themselves than the previous generation, and they are interested in homosexuality and transgender issues. Rather than adjusting themselves to the standards set by others, they have a sense of accepting and affirming the way it is.



#GlobalPrideCrossing#AnimalCrossing


针对性少数群体的活动在任天堂游戏《动物之森》中举办,这款游戏在今年很受欢迎。由于时间和空间的限制,以前没有机会参加活动的人们,可以轻松地在虚拟空间中参与活动。


A campaign for sex minorities was held at the Nintendo game 'Animal Forest', which became very popular this year. Because of the limitations of space and time, people who did not have chance to participate in the campaign before, were able to easily get involved in the campaign in the virtual space.



#Non-BinaryEmoji#Memoji#Apple


苹果在其系统为每个表情符号添加了“性别中立”的选项。区分男人和女人的视觉元素被排除在外,比如头发的长度变为中等长度,并使用灰色,这样衣服的颜色就不会让人想起特定的性别。肤色也拓宽了选择范围,让用户选择与自己相似的颜色。苹果2019年推出的表情符号功能为更多种族和性别提供了多种选择,包括脸型、肤色、发型等,人们可以对苹果的性别和种族问题一目了然。


Apple added a 'gender neutral' options to every human emoji in its system. The visual elements that distinguish men and women were excluded, such as the length of the hair coming mid length and using gray color so that the color of the clothes would not be reminded of a specific gender. The skin color also broadened the range of choices which made users choose colors similar to themselves. The Memoji feature which Apple launched in 2019, offers a variety of options for more races and genders, including face shape, skin color, and hairstyles, giving a glimpse of Apple’s gender and racial issues.



数字原住民通常被称为“拥有智能手机的一代人”,智能手机的发展比其他任何技术都更主导着数字原住民的生活。他们熟悉互联网和IT,并且喜欢图像和视频内容,而非文本,喜欢手机而非电视机和计算机。视频是千禧一代和Z一代最突出的交流工具,他们把大部分时间花在YouTube上进行搜索、学习、消费和交流。YouTube已经成为他们不可或缺的服务。由于他们是通过视频学习和交流的一代人,许多公司利用影响力,在视频内容营销上投入大量的资金。在决定购买时,他们不是根据广告,而是通过各种渠道收集到的信息和经验来判断产品的价值。前几代人主要受老一辈人的影响,而这一代人则受年龄相近的影响者的影响。此外他们热衷于分享自己的兴趣和生产内容,他们可以被视为文化的消费者和生产者。


Digital natives are often called 'generations born with smartphones', and the development of smartphones dominates the life of digital natives more than any other technology. They are familiar with the internet and IT, and prefer images and video content than texts, smartphones rather than TVs and computers. The most prominent communication tool for millennials and generation Z is the video. They spend most of their time on YouTube in searching, learning, consuming and communicating. YouTube has become an indispensable service for them. Since they are a generation that learns and communicates through video, many companies invest a lot of money in video contents marketing using influencers. They judge the value of the product based on the information and experience collected through various channels rather than advertisement when deciding the purchase. While previous generations were mainly influenced by older generations, this generation is influenced by similar ages of influencers. In addition, they are familiar with sharing their interest and producing contents, and they can be seen as a consumer of culture and a producer.



#GucciGang#Youtube#Influencer


17岁的说唱歌手Lil Pump穿Gucci产品演唱的Gucci Gang,在Billboard排行榜上名列第三。他通过Facebook,Instagram和YouTube对这首歌进行各种视频营销。2017年,以“Gucci” 和 “Gucci-ish”为关键词的谷歌搜索量也高居时尚类榜首。当其他品牌担心自己的品牌形象会在网络空间受损时,Gucci在网络进行投资,使Gucci成为千禧一代和Z世代喜爱的品牌。


A 17-year-old rapper Lil Pump who is wearing Gucci products all over his body sang Gucci Gang and has reached number 3 on the Billboard charts. He conducted various video marketing through Facebook, Instagram and YouTube with this song. The number of Google searches with the keyword 'Gucci' or 'Gucci-ish' also topped the fashion category in 2017. When other luxury brands worry that their brand image will be damaged in the online space, Gucci invest in online branding and made Gucci a brand loved by millennials and generation Z.



#Meme#TikTok#Challenge#Remix


通过摘录、模仿和再加工一些现有内容而产生的模因,是业余爱好者和粉丝自愿创作并传播到SNS的一种游戏文化。它像病毒一样迅速传播,并给分享相同模因的群体一种强烈的同质感。最近,它作为一种代表千禧一代和 z 一代的数字游戏文化受到了广泛关注。美国杂志《纽约客》称TikTok为模因工厂,TikTok在美的用户年龄60%为16到24岁之间,它是一款经过优化的应用程序,用户可以消费15秒左右的短视频,也可以自己制作内容。年轻人可以通过TikTok来复制和创造新的模因。TikTok不同的两个视频有多种混音,并且不同的人编辑相同的图像,可以产生新的,感觉不一样的图像。此外,“挑战”文化最近在TikTok变得流行起来。从表演特定任务,到舞蹈挑战,再到偶像歌曲,各式各样的挑战正在TikTok中举行。因此,千禧一代和Z世代正通过TikTok积极地引领内容市场。


The meme, which is created by excerpts, parody, and reprocessing some of the existing content, is consumed as a play culture that amateurs and fans voluntarily make and spread to SNS. It spreads rapidly like viruses and gives a strong sense of homogeneity to groups that share the same memes. Recently, it has been getting attention as a digital play culture representing the millennial and generation Z. The American magazine New Yorker also called the TikTok a meme factory, which the 60% of Tiktok users in US are 16 to 24 years old. TikTok is an app optimized to consume short videos of about 15 seconds or to produce content by oneself. Young people can reproduce memes or create new memes by using Tiktok. There are many remixes of two different videos of Tiktok, and new images are recreated in a different feeling depending on the person who edits the same images. In addition, the 'challenge' culture has recently become popular in Tiktok. Various types of challenges are being held, ranging from to perform a specific mission or dance challenge to dance to the songs of idols. As such, the millennials and generation Z is actively leading the content market through Tiktok.



千禧一代和 z 世代把消费看成是当前的满足感,而不是未来的储蓄,新的体验是必须的投资。即使减少了其他方面的开支,他们也会根据自己的心情和目的,投资消费一种不同寻常的、更加现实的体验。


The millennials and generation Z who focus on consumption for current satisfaction rather than savings for the future, new experiences are a must-investment. Even if they reduce the expenditure on other parts, they invest in consuming an unusual and more realistic experience depending on their mood and purpose.



#GentleMonster#CultureExperience#RetailExperience


创造与众不同的概念空间,引导用户体验和购买眼镜产品,Gentle Monster在空间上充了产品购买与体验价值的空间策略,给千禧一代和Z世代带来好感。针对线上线下,他们同时有效满足了这几代人的体验型消费倾向。


Gentle Monster's spatial strategy, which made a space of unusual concept and lead to experience and purchased glasses products in it, filled the experiential value of product purchases in the space and led to the favorable feeling of the millennials and generation Z. It is effective to meet the experience-oriented consumption tendency of these generations by simultaneously targeting on-line and off-line.



#NRC#Nike+RunClub#SNS#BrandExperience


Nike通过各种营销活动,提供令人愉悦的跑步体验,引领跑步趋势。在每年都举办高水平跑步活动,并且可以与专业教练和参与者一起训练的Nike + Run Club上,根据不同的距离、速度和水平等技能,Nike为跑步者提供定制的跑步程序。Nike的营销策略注重运动的难忘体验,而不仅仅是销售运动鞋,因为那些体验到跑步乐趣的年轻消费者会在社交媒体上,不断上传展示自己跑步记录的照片。


Nike is leading the running trend through various marketing activities that provide a pleasant running experience. Nike + Run Club, which hosts the highest level of running events every year and can train with professional trainers and participants, provides customized running programs for various runners according to their skills such as distance, speed and level. Nike's marketing strategy is focused on the unforgettable experience of sports, not just selling sneakers, as young consumers who have experienced the pleasure of running on social media every day are constantly uploaded with photos that boast their running records.



千禧一代和Z世代追求理性消费,并首先倾向于投资自己。接受一个品牌的方式也取决于品牌所追求的价值,它所具有的风格,以及它与自身的契合程度。过去,品牌在战略上排斥流行文化,但现在他们正在针对年轻一代进行各种尝试。千禧一代和Z世代正在成为最有影响力的消费者,品牌需要的是能够直接吸引他们品味并带来乐趣的营销,而不是他们过去所追求的优雅的品牌战略。


The millennials and generation Z pursues rational consumption and tend to put investment on theirselves first. The way of accepting a brand is also selectively done depending on what value the brand pursues, what style it has, and how much it fits with themselves. In the past, luxury brands have strategically excluded pop culture, but now they are showing various attempts targeting the young generation. For the millennials and generation Z , who are emerging as the most influential consumer now, brands will need marketing that can directly attract their taste and give fun rather than the elegant brand strategy that they have pursued in the past.




Chrome Hearts x Converse Chuck Taylors


Chrome Hearts和Converse合作打造的全明星运动鞋已经发布。这款联名运动鞋世上仅有一双,用Chrome Hearts的识别标志-金属十字徽标紧密地贴在匡威运动鞋中设计而成。这款运动鞋在Bam Margiela的Instagram上发布,他一直在发穿着联名运动鞋进行滑板运动的视频。


The all-star sneakers which is created through a collaboration between Chrome Hearts and Converse have been released. The collaboration sneakers are only one pair exists in the world and designed in a form that metal cross logo, which is the signature of Chrome Hearts, is tightly attached in Converse sneakers. The sneaker was released on the Instagram of Bam Margiela, who has been releasing videos of his skateboarding wearing collaboration sneakers.



Chanel Game Center


品牌Chanel开了一家游戏中心,当你进入这个游戏中心,你会发现一个化妆品与娱乐共存的世界。以游戏机为概念,Chanel的目的是购物+娱乐。比起引诱人们对品牌进行单次性购买,重要的是让他们体验品牌并塑造一个年轻的形象。质量和苛性比固然重要,但是针对千禧一代和Z世代,品牌体验是否有吸引力和是否有乐趣更重要。


Luxury brand Chanel opened a game center. When you enter this game center, you will find an interesting world where cosmetics and entertainment coexist. Chanel aimed at the effect of shoppertainment (shopping + entertainment) with the concept of a game arcade. Rather than inducing one-dimensional purchase of a brand product, it is important to make people experience the brand and to make a young image. The quality and caustic ratio are important, but it is more important whether the brand experience is attractive and fun to target the millennials and generation Z.



Louis Vuitton x NIGO


Louis Vuitton设计师Virgil Abloh和NIGO(日本街头时尚的传奇人物和Human Made的创始人)进行了一次合作。NIGO曾为日本代表性街头品牌Bape工作,Humanmade是NIGO于2010年创立的服装品牌,正在推出基于日常主题的美国复古休闲服装。这一合作,是通过Louis Vuitton 2020年秋季前系列外观手册公布的,由标题为LV2的设计产品组成,用Nigo的风格表达Louis Vuitton的特征。当这两个在高级时装和街头品牌领域处于领先地位的品牌打破界限,展现出前所未有的融合,千禧一代和Z一代都非常喜欢。


Louis Vuitton's designer Virgil Ablo and NIGO, the legend of Japanese street fashion and the founder of Humanmade, have collaborated together. Humanmade is a clothing brand founded in 2010 by NIGO, who worked for a representative street brand in Japan, Bape. Humanmade is introducing American vintage casual style costumes that are based on everyday themes. This collaboration, which was unveiled through Louis Vuitton's 2020 pre-fall collection look-book, consists of design products with the title of LV2 and expressing Louis Vuitton's signature in Nigo's style. When the two brands that were leading the way in each area of high fashion and street brand broke down the boundary and showed the fusion which has never been before, the millennials and generation Z love it.




Burberry


掉落式销售策略是指,通过一些商店或社交网络以惊人的方式销售限量版或小批量生产的产品。受Supreme等街头品牌投放策略的启发,Burberry每月17日推出一款针对年轻一代口味,仅限于线上销售的新产品。掉落式销售策略是一种能够满足千禧一代和Z世代渴望拥有特殊产品需求的策略。


The sales strategy called drop refers to the way in which limited editions or products made in small quantities are sold in a surprise manner through some stores or social networks. Burberry has launched a new product that targets the tastes of younger generations on the 17th of each month, which is limited to online, inspired by streetwear brand drop strategies such as Supreme. The drop-type sales strategy is a strategy that can satisfy the needs of the millennials and generation Z, which has a desire to own special products.



PALACE


PALACE是一个以滑板服装为主,对年轻人有很大影响的英国街头品牌,在英国被称为“Superme”。PALACE使用街头文化经常引用的复古元素来打造品牌形象。PALACE 公司有意通过模拟VHC(家庭视频系统)的拍摄方式进行市场营销。他们还通过模仿不同的品牌或制作看起来像是开玩笑的产品说明页,来迎合想要独特和新鲜事物的,年轻一代的口味。通过这些营销,PALACE得到了喜欢复古和街头文化的年轻一代的好评。


PALACE is a British street brand which mainly has skateboard clothing and has a great influence on young people that it is called Superme in UK. As a street brand, PALACE uses retro elements that are often cited in street culture to create the brand image. PALACE has intentionally attempted marketing through analogue VHS (video home system) shooting. They also try to target the tastes of younger generations who want unique and new things, by parodying different brands or making product description pages that seem to be written as a joke. Through these marketing, PALACE has got a good response from the younger generation who like retro and street culture.



Lululemon


与其他时尚品牌不同,Lululemon强调通过品牌而不是产品本身获得体验。Lululemon有各种各样的项目,如瑜伽、冥想、现代舞和跑步,顾客可以定期参加,并一起享受锻炼和文化。Lululemon的 核心哲学是汗水生活,这是一种喜欢流汗,热爱生活的人的生活方式。千禧一代和Z世代更喜欢穿能让自己满意的衣服,而不是穿衣服给别人看,Lululemon品牌本身就能吸引到他们。现有的时尚服装市场总体呈下降趋势,但运动休闲服装市场在年轻一代中稳步增长。


Different from other fashion brands, Lululemon emphasizes the experience that can be gained through the brand than the product itself. Lululemon has various programs such as yoga, meditation, modern dance and running that customers can regularly participate in, and enjoys exercise and culture together. At the heart of Lululemon’s philosophy is sweat life, which means a lifestyle of people who love sweating and love their lives. The branding of Lululemon alone could appeal to the millennials and generation Z who prefer to wear which can satisfy themselves rather than to wear clothes to show others. The existing fashion apparel market is declining overall, but the athleisure wear market is steadily growing in the young generation. 





Alexander Wang x McDonalds


去年11月,Alexander Wang发布了一款新产品,缎面午餐袋。因为外形酷似麦当劳的午餐袋,这款产品备受关注。Alexander Wang后来与麦当劳合作发布了午餐袋和野餐篮。他说“麦当劳品牌一直是最接近流行文化的品牌,能够参与到创意项目中来,我感到很荣幸”。麦当劳中国首席营销官徐佳婷(Christine Xu)也提到,“与Alexander Wang的合作反映了中国消费者对新理念和创新的强烈渴望,我希望这次合作能使人们微笑,能给他们的日常生活带来微小但令人惊叹的快乐”。


In November last year, Alexander Wang released a new product, the satin lunch bag clutch. This product got some attention because the shape resembled McDonald's lunch bag. Alexander Wang later released McDonald's lunch bag and picnic basket through collaboration with McDonald's. He said "The McDonald's brand is always the closest to pop culture and is honored to participate in creative projects,". McDonald's China CMO, Christine Xu also mentioned that "The collaboration with Alexander Wang reflects the strong desire of Chinese consumers for new ideas and innovations. I hope this collaboration will make people smile and give them a small but amazing pleasure in their daily lives."



CocaCola NewCoke x Stranger Things


1985年,可口可乐推出一种新配方赢得了百事可乐的竞争,但由于现有消费者的强烈反对,新配方在上市三个月后就停止了生产。30年后,这款新可乐随Netflix电视剧《怪奇物语3》回归。30年前没体验过新可乐的年轻一代通过这部剧对新可乐的味道产生了好奇,可口可乐通过一家特殊的弹出式商店复制了新可乐的配方以及设计,并对这款限量版新可乐进行销售。


In 1985, Coca-Cola launched a new recipe to win their competitor Pepsi, but it stopped production in three months after its launch due to strong opposition from existing consumers. The New Coke, returned with Netflix drama ‘Stranger Things 3’ in 30 years. Young generations who have not experienced New Coke 30 years ago have been curious about the taste of New Coke through this drama, and Coca-Cola has reproduced the recipe as well as the design through a special pop-up store, and sold this limited edition New Coke.



Gompyo Flour


Gompyo最初是韩国磨坊公司具有代表性的面粉品牌,但现在,它与LG家居&保健、Run Rabbit、Swanicoco和4XR等各种品牌合作,以复古概念展示了厨房清洁剂、化妆品、服装、啤酒等各种产品。虽然“面粉等于Gompyo”在中年人中根深蒂固,但它被认为是适合年轻一代的,新颖而有趣的品牌。这种激进而富有挑战性的变化使其成为的复古品牌。


Gompyo was originally a representative flour brand of company called Korean mill, but now it is showing various products such as kitchen detergent, cosmetics, clothing, beer through collaboration with various brands such as LG Household & Health Care, Run Rabbit, Swanicoco and 4XR in retro concept. The fact that flour equals Gompyo is a stereotype that has been deeply rooted in middle-aged people, but it is recognized as a new and fun brand suitable for the the younger generations. This radical and challenging change in Gompyo has made them the most popular retro brand.



Jinro Soju


Jinro是最近随着newtro潮流而更新的品牌之一。 Jinro透露了“ Jinro is back”的logo和浅蓝色瓶包装。这款重新诠释了他们原来品牌形象的产品在推出后两个月内就实现了销售目标。 Jinro正通过与Obey,Covernat等街头时尚品牌合作,与户外品牌Helinox发行野餐装等方式,努力吸引年轻一代。


Jinro is one of the brands that have recently renewed with the newtro trend. Jinro revealed the 'Jinro is back' logo and light blue bottle package, which reinterpreted their original brand identity has achieved the target sales amount within two months after launching . Jinro is making efforts to appeal to the younger generation by collaborating with street fashion brands like Obey, Covernat and releasing picnic sets with outdoor brand Helinox.





Louis Vuitton x LOL


积极抓住年轻消费者的Louis Vuitton也将数字营销扩展到了电子竞技领域。Louis Vuitton与英雄联盟合作的特别目标似乎是中国消费者,因为他们希望利用LoldCup (英雄联盟+世界杯)在中国的流行来扩展消费者的体验。


Louis Vuitton, which is aggressively marketing young consumers, has also expanded its digital marketing to e-sports. The Louis Vuitton's League of Legend partnership seems to have especially targeted for Chinese consumers since they expect to expand customer experience by utilizing the popularity of LoldCup(League of Legend + World cup) in China.



PUBG x BAPE


韩国皇室游戏PUBG与日本街头品牌BAPE合作。通过这次合作,BAPE发布了含有PUBG品牌元素的标志性产品,比如鲨鱼迷彩拉链风帽、短袖衬衫、背包和其他物品。如果用户在现实中购买这些产品,他们将获得可以在游戏中使用的代码,这些代码可以获取 BAPE的物品。通过这款合作产品,PUBG的用户不仅可以在现实,还可以在游戏中看起来独特而时尚。


A Korean battle royal game PUBG and a Japanese street brand BAPE collaborated together. Through this collaboration, BAPE's iconic products such as shark camo zip-up hood, short-sleeved shirts, backpacks, and other items with PUBG brand elements were released. If the user buy these products in reality, they will be given code to get BAPE items that can be used in the game. Through this collaboration product, PUBG users can look unique and trendy not only in reality but also in the game.



Animal crossing


与被新冠疫情捆住了手和脚的现实世界不同,动物之森允许人们在虚拟空间中享受日常生活,它给那些不得不呆在家里的人带来了满足感。在这个游戏中,你可以通过换几件在现实中很难穿的衣服来展示你的时尚感。随着游戏对时尚越来越感兴趣,品牌也进入了虚拟世界。Valentino在动物之森中发布了二十种风格的衣服,Mark Jacobs 免费发布了6套,Anna Sui和 GCDS也有参与。对于追求个性和自我满足的千禧一代与Z世代来说,游戏中的服饰和配饰成为了一种很好的推广品牌的方式。


Unlike the real world, where Corona has tied people’s hands and feet, the Animal Forest allows people to enjoy everyday life in the virtual space which has provided surrogate satisfaction to those who have to spend time at home. In this game, you can show off your fashion sense by changing several luxury clothes that are hard to wear in reality. As the interest in fashion in the game grew, luxury brands also entered the virtual world. Valentino introduced twenty styles of clothes in animal forests, and Mark Jacobs distributed six new clothing free of charge in the game. Anna Sui and GCDS also participated. The luxury costumes and accessories in the game have become a great way to promote the power brand for the millennials and generation Z who pursues personality and self-satisfaction.



Zepeto x Blackpink


全球AR角色服务公司Zepeto与韩国偶像Black Pink有过一次代表性的合作。由于 Zepeto APP没有时间和空间的限制,粉丝可以和Black Pink的角色合照,并一起享受和参加各种各样的活动。如今,年轻一代喜欢在网上创建他们自己的角色,这些角色生活在网络空间,比在现实拥有更多的自由。


Global AR avatar service Zepeto has presented collaboration with Korean pop idol Black Pink. Since there are no restriction in time and space within Zepeto app, fans can take pictures with avatarized Black Pink members or enjoy a variety of activities together. These days, young people enjoy creating their own character (multi persona) in the online space, living in the online space that can have more freedom than reality. 



Fortnite x Travis Scott


Travis Scott在 《堡垒之夜》的游戏世界中举办演唱会并发布新歌。1230万用户在世界第五大游戏中同时观看了这场show。他们实时演出,用户则在游戏中交流和享受这场演唱会。在因为新冠疫情无法举办演唱会的情况下,通过游戏进行的虚拟演唱会给年轻一代带来了特别的乐趣。


Travis Scott held a concert at the Fortnite Games and also released the new song.12.3 million people watched the show at the same time in this fifth largest game of the world. They performed in real time and the users communicated and enjoyed the concert in the game. In a situation where Corona can not have a real concert, virtual concerts through games have given special fun to younger generations.



Peace Elite x Tesla


《和平精英》是腾讯游戏公司出品的一款皇室战争手游。通过与美国著名电动汽车品牌特斯拉合作,《和平精英》的用户可以在游戏中直接驾驶特斯拉。此前,当《和平精英》推出一款可以在游戏中驾驶的玛莎拉蒂时,游戏用户增加到了2700万。与特斯拉的合作也有望产生巨大的广告效应。


Peace Elite is a battle royal mobile game made by Tencent Games. Peace Elite has included Tesla cars that can be driven directly within the game through collaboration with Tesla, a well-known American electric car brand. Previously, when Peace Elite launched a Maserati car that can be played in the game, the number of game users increased to 27 million. The collaboration with Tesla is also expected to have a huge advertising effect.





Snapchat x Demian Hirst


当代最著名的英国艺术家 Damien Hirst发明了一种 Snapchat镜头,任何人都可以在Snapchat APP中使用AR技术来体验他的旋转作品。有了这个镜头,人们可以用Demian Hirst完成作品的方式在APP上作画。Damien Hirst和Snapchat建议通过这个项目,向那些致力于为弱势群体提供现代医学科学的非盈利组织捐款。这项捐赠政策使Snapchat得到了不大会为社会或环境花钱的,千禧一代和Z世代的巨大反响。


One of the most notable British artist of contemporary artists Damien Hirst created a Snapchat lens that allows anyone to experience his spin works using augmented reality within the Snapchat app. With this lens, people can paint on the app the way the actual Demian Hirst completes his work. Through the project, Damien Hirst and Snapchat are recommending donations to non-profit social organizations that strive to provide modern medical science to vulnerable communities. Through this donation policy, Snapchat was able to get a great response from the millennials and generation Z who does not spare money for social or environmental significance.



KAWS Virtual Gallery


随着新冠病毒对空间的日益限制,世界各地的一些画廊和博物馆允许人们在线观看他们的展览。最近墨尔本国家美术馆与年轻一代喜爱的艺术家 KAWS共同举办了一个虚拟展览。进入NGV网站,人们可以在一个由3D构成的空间里欣赏一个逼真的展览。此外,KAWS还与Acute Art合作,创作了可在全球12个城市体验的AR雕塑。Acute Art通过积极利用VR和AR等尖端技术,引入了新的视觉艺术形式。通过手机的AR技术,用户可以自由地观看用3D实现的KAWS雕塑。采用这一先进技术的展览超越了时间和空间的限制,同时展示了绿色展览的可能性。


With the corona virus increasing spatial constraints, several galleries and museums around the world are allowing people to view their exhibitions online. Recently, the National Gallery of Melbourne opened a virtual exhibition with KAWS, the artist who is loved by younger generations. Entering the NGV website, people can enjoy a realistic exhibition in a space composed of 3D. In addition, KAWS has created AR sculptures that can be experienced in 12 cities around the world by collaborating with Acute Art, which introduces new forms of visual art by actively utilizing cutting-edge technologies such as VR and AR. Through the AR technology of the mobile phone, the user can freely view the KAWS sculpture implemented in 3D. The exhibition using this advanced technology transcended the constraints of exhibition space and time, and at the same time showed the possibility of eco-friendly exhibition.



Apple [AR]T


使用AR技术,苹果发布了一款名为[AR]T的体验系列。该系列由交互式 [AR]T Walk组成,其中包括世界著名的当代艺术家的AR作品;以及Apple Store的[AR]T,用户可以在全球所有苹果商店体验AR作品。[[AR]T Walk的概念是体验旧金山、伦敦、香港和东京等城市,并在每个城市街道行走的同时,通过iPhone的AR技术欣赏艺术作品。在Apple Store的[AR]T中,用户可以在苹果专卖店欣赏Nick Cave扩增现实的艺术作品。专注于向数字原生一代分享有趣经验的方式,令苹果的AR技术推广取得了成功。


Apple has released an experience series using augmented reality called [AR]T. This [AR]T series consists of interactive [AR]T Walk, which includes AR works by world-renowned contemporary artists, and [AR]T at the Apple Store, where you can experience AR works in all Apple stores around the world. [[AR]T Walk has the concept of experiencing cities such as San Francisco, London, Hong Kong, and Tokyo, and enjoying art through the AR technology of iPhone while walking the streets of each city. [AR]T at the Apple Store, which can be experienced in the Apple Store, can enjoy Nick Cave's augmented reality artwork in the Apple Store store. Apple's AR technology promotion focusing to share interesting experiences to the digital native generation has been successful.



千禧一代和Z世代都是数字原住民,他们使用移动设备的比例远远高于其他任何一代。通过移动设备,这些年轻一代可以进行超越时空限制的交流,他们喜欢通过图像和视频与同龄人交流,通过社区获取新闻和信息,也更加自由地展示自己的个性。这几代人的这些特点也被应用到了移动APP的首选项上。对于千禧一代和Z世代来说,从通信到社交,购物到银行,移动APP几乎应用于他们日常生活的每一部分。本节我们将分享市场上正在兴起的年轻一代的移动服务。


The millennials and generation Z are digital natives who use mobile devices overwhelmingly higher than any other generation. These younger generations who can communicate beyond the spatial and temporal limits through mobile devices, enjoy communicating with peers through images and videos, get news and information through the community, and reveal their individuality more freely. These characteristics of this generations have also been applied to mobile app preferences. For the millennials and generation Z, mobile apps are used almost every part of their daily lives, from communication to socializing, shopping and banking. In this section, we will share about the mobile services that are emerging among the young generation market.



年轻一代喜欢根据图片或视频来寻找、编辑和分享他们想要的信息,他们喜欢不厌其烦地制作和消费在线内容来展现自己。此外,千禧一代和Z世代热衷于不到一分钟的短视频。因为年轻人非常渴望用简单易行的方式制作和分享他们的日常故事,可以制作短视频的,像Instagram 和 TikTok一样的APP越来越受欢迎。


The younger generations enjoys finding, editing, and sharing information they want based on images or videos. They enjoy showing off themselves by producing and consuming online contents without repulsion. Also, the millennials and generation Z are enthusiastic about short videos of less than a minute, not long breathing. Like Instagram and TikTok, apps that users make their own short-form videos have gained popularity because young people had a great desire to make and share their everyday stories in a simple and easy way.



Tiktok


TikTok提供各种各样的工具帮助人们进行短视频内容创作。通过AR技术修饰人脸的滤镜、各种贴纸、速度控制器、反向播放和慢动作等功能,只需按几个按钮,就可以应用于用户的视频。不像其他视频平台,用户可以在TikTok轻松地编辑他们的视频并分享乐趣。


TikTok provides a variety of tools that helps people to create a short form video contents. The filters that decorate faces through AR technology, various stickers, speed controler, reverse playback and slow motion function can be applied to the user’s video just by pressing several buttons. Unlike other video platforms, users can be easily edit their videos and share to have fun.



Instagram story


Instagram Story是一项功能,它允许用户将照片和视频分享到订阅源,并实时分享他们的日常生活。Instagram Story有一个特点,内容会在24小时之后消失。因为知道内容会很快就消失,用户可以以一种更随意的方式,实时展示他们的日常生活。Instagram Story受到喜欢获取关注,喜欢展示和表现自己的千禧一代和Z世代的欢迎。


Instagram Story is a function that allows users to upload photos and videos to their feed and share their daily lives in real time. The Instagram Story has a special feature that contents disappears after 24 hours. People can show their daily lives in real time, in a more casual way since they know the content will disappear soon. Instagram stories gained popularity from millennials and generation Z who enjoy receiving attention and enjoying revealing and showing off themselves. 



IGTV


Instagram还推出IGTV,一个新的,允许用户上传长达一小时视频的视频平台。IGTV开通移动优化视频频道,降低了新影响者的门槛。虽然在YouTube上发布内容的用户比例要远远低于使用它的用户,通过在IGTV的个人账户上发布内容,Instagram有让用户成为内容生产商的潜力,而不仅仅是使用者。


Instagram also launched IGTV, a new video platform that allows users to upload videos up to an hour long. IGTV opened mobile-optimized video channels and lowered the threshold for new influencers. While YouTube has a significantly lower percentage of YouTubers who publish content than consumers, Instagram has more potential for users to become a provider than just al consumers by posting content on their personal accounts using IGTV.



与前几代人在书籍或门户网站上搜索信息不同,千禧一代和Z世代喜欢通过在基于视频内容的手机应用或社交媒体上提问来获取答案,它们可以提供即时的反馈和交流。


Unlike previous generations who searched books or portal sites for information, millennials and generation Z like to get answers by asking questions on video contents based mobile apps or social media that can provide immediate feedback and communication.



Youtube


YouTube是千禧一代和Z世代用来获取信息的最大移动APP。例如当年轻一代想知道如何烹饪时,他们会搜索YouTube而不是阅读书籍或在门户网站上搜索。根据最近的一项研究,59%的千禧一代和Z世代更喜欢从YouTube视频中学习,55%的人说他们在YouTube上学到的东西实际上很有帮助。对于这几代人来说,YouTube已经成为教育和娱乐的平台。


YouTube is the largest mobile app used by millennials and generation Z to acquire information. For example, when they want to know how to cook, younger generation search YouTube instead of reading books or search on portal sites. According to a recent study, 59 % of millennials and generation Z prefer to learn from YouTube videos and 55% said what they learned on YouTube was actually helpful. For these generations, YouTube has become a platform for education as well as entertainment.



Twitch


Twitch是一款千禧一代和Z世代都喜欢的,特定游戏流媒体服务。Twitch针对的是想在游戏文化中进行积极交流的游戏粉丝,作为一名社区成员,他们在Twitch内感到联系,自愿管理和扩大Twitch的文化,并喜欢观看和交流他们喜欢的 star streamers.


Twitch is a game-specific streaming service which millennials and generation Z like. Twitch is targeted for game fans who wants to actively communicate inside the game culture. Game fans feel connected within Twitch, voluntarily manage and expand Twitch's culture as a community member and enjoy seeing and communicating with their favorite star streamers.



Reddit


Reddit是美国的一家社交新闻网站。大致来说,它是一个巨大的社区网站,但它专注于分享有趣的新闻和信息,而不是像社交网络一样注重成员之间的交流。千禧一代和Z世代通过访问Reddit社区来了解他们感兴趣的主题。调查显示,87%的千禧一代和Z世代表示,Reddit社区包含了他们想要的所有信息。


Reddit is an American social news community site. Basically, it is a huge community site, but it focuses on sharing interesting information and news, rather than on communication among members like social network services. The millennials and generation Z visits Reddit community to learn about certain topics they are interested in. According to the survey, 87% of the millennials and generation Z said there are communities in Reddit that contain all the information they want.



随着千禧一代和Z世代的口味变得更加个性化和细分化,他们希望获得的是适合自己口味的内容。精选服务对个人口味进行分析并推荐合适的内容。最近,AI技术可以让用户更加细致地获得他们想要的内容推荐。


As the tastes of the millennials and generation Z are becoming more personalized and subdivided, they want content that suits their own tastes. Curation service analyzes individual tastes and recommends suitable content. Recently, AI technology has allowed for users to get recommendation of contents they want more delicately.



Spotify


Spotify的每周发现功能, 可以自动分析用户听过的,并推荐适合他们口味的音乐。用户听得越多,越能得到更好的推荐。通过这个功能,Spotify已经成为世界上最好的音乐流媒体平台,它满足了许多千禧一代和Z世代的口味。


Spotify's discover weekly feature is a function that automatically analyzes the music that users have listened to and recommends music which suits their tastes. More and more they listen to, the they can get better recommendation. Through this function, Spotify has become the world's best music streaming platform, satisfying the tastes of many millennials and generation Z.



Zamface


Zamface是一项利用AI技术搜索 beauty YouTubers,并给用户推荐适合他们口味的美妆视频的服务。Zamface在年轻一代中越来越受欢迎,它的订阅用户中,95%的年龄在13至24岁之间。Z世代通过beauty Youtuber的视频关注和学习化妆方法,这是准确读取了他们的需求,并利用AR技术不断对服务进行创新的结果。


Zamface is a service that recommends makeup videos suitable for users by searching the video contents of beauty YouTubers with AI technology. Zamface is gaining huge popularity among younger generation that 95% of all subscribers are aged 13 to 24. This is the result of accurately reading the needs of generation Z to follow and learn makeup methods through the beauty Youtuber video and continuously innovating the service using AI technology."



现在的信息服务有很多,但很少能受到千禧一代和Z世代的喜爱。比起面对面,年轻一代有时候会觉得在网上交流更舒服。他们更熟悉实时分享自己现在的状态。有些服务就专注于这些特性。


There are a lot of messaging services but few of them are loved by the millennials and generation Z. Younger generation sometimes feel more comfortable communicating online than meeting face to face and they are familiar to share their online status in real time. There are some services which focused on their characteristics. 



Facebook Messenger


Facebook messenger在用户界面只留下两个按钮,将功能最小化,并特别强调社交功能。Facebook messenger带来了Instagram story的功能,用户可以在messenger中查看朋友的故事,也可以随时查看朋友的连接状态。千禧一代和Z世代通过移动设备与每个人建立联系是自然而然的。对于他们来说,不需要与真正的朋友见面,就能感觉到彼此在一起,因为这样,facebook的messenger收获了巨大的人气。


Facebook messenger minimized the function by leaving only two buttons on UI and particularly emphasized the socializing functions. Facebook messenger brings the Instagram story function to check the friend's story in the messenger and the user can always check the friend's connection status. It is natural that millennials and generation Z are connected to everyone through mobile devices. For them, Facebook messengers are gaining huge popularity by making them feel if they were next to each other without actually having to meet friends in real.



Zenly


Zenly 是在一款基于谷歌地图的社交网络信息服务,它在青少年中很受欢迎。Zenly 有一项普通messenger服务没有的独特的功能。如果你使用Zenly ,你可以获知你朋友的位置,速度和剩余电量,当你与朋友相遇时,APP警报会显示你正在遇见他的事实。 Zenly 在Z世代中如此受欢迎的原因是,其他几代人经常认为分享自己的位置是对隐私的侵犯,而年轻一代则认为共享位置很有趣,可以确认与朋友的关系。


Zenly is a social network messenger service based on Google Maps and is popular among teenagers. It has cute and simple interfaces and various functions which younger generation likes. Zenly has unique functions that are not available in ordinary messenger services. If you use Zenly, you are able to know the location, speed, and remaining battery amount of registered friends, and when you meet friends, the app alarm shows the fact that you met them. The reason why Zenly is so popular among generation Z was that other generations often thought that sharing one's location is an invasion of privacy, while younger generation reckon sharing the location is considered fun and confirm the relationship with friends.



考虑到千禧一代和Z世代强调概念和故事的性格特征,许多公司为之创造了新的角色,并通过年轻人可以共情的故事与他们进行交流。 年轻人现在熟悉图像或视频而不是文字,他们通过创建自己的角色内容来引领新文化,并通过将自己喜欢的角色转化为“文化因子”来自愿推广。 此外,虚拟网红已经成为一种新的营销工具,以热衷于网红的年轻人为营销对象。


Considering the characteristics of the millennials and generation Z who emphasize concept and story, companies create new characters and communicate with young people through stories that they can sympathize with. These generations, who are familiar with images or videos rather than texts, lead a new culture by creating their own character contents and voluntarily promote the characters which they have affection by making it into memes. In addition, virtual influencers have become a new marketing tool to target young generations who are enthusiastic about influencers.




许多公司根据年轻一代的口味,使用角色IP内容来制作短视频。 最近,可以实时反馈用户响应并可以在社交平台上快速传播和轻松消费的短视频内容,已成为一种有效的营销工具。 它以机智的短片而不是长篇故事片吸引年轻的消费者。


Many companies use character IP contents to produce short forms of video according to the taste of younger generations. Recently, the short video content that can check the user's response in real-time and can be rapidly spread and consumed easily on SNS has become an effective marketing tool. It attracts young consumers with a witty short video rather than a long story video.


以BT21角色品牌为例,通过使用其角色IP在TikTok中制作模仿的格式,产生了大量与年轻一代的口味相匹配的内容,并受到年轻人的喜爱。 此外,它们还提供了用于粘贴TikTok视频内容的角色贴纸,使用户可以自然地在他们制作的内容中宣传角色。 以Spotify和华为为例,通过使用一些适合年轻一代口味的流行艺术家的人物IP分享短视频,将新的品牌形象传达给了这些世代。


In the case of the BT21 character brand, by producing a parody the format in Tiktok using their character IP, they produce contents that match the tastes of the younger generations and get their favorable feeling. In addition, they provide character stickers to be used for editing Tiktoc video contents that allow users to naturally promote the characters in the contents they make. In the case of Spotify and Huawei, the new brand image was conveyed to these generations by sharing short videos using some trendy artist’s character IP that suits the taste of the younger generation.




千禧一代和Z世代人都熟悉IT设备,他们很容易以数字形式绘制事物。 这些世代倾向于将自己的日常生活制作成短片,然后将其上传到社交平台上。 他们制作这些简短的动画片来表达自己的个性。 卡桑德拉卡林(Cassandracalin)和Min4rin则是根据作为女性的经历来日常创作。 他们的漫画获得了女性的大力支持和同情,并且还出版问世。 这些案例成为Instagram被认可为另一个网络卡通平台的开始。 以洋基基为例,他幽默地在自己的社交平台上刊登了关于“工作中非理性状况”的简短漫画。 随着千禧一代和Z世代的到来,他的故事已在工人群体中引发许多话题,而且这些内容已通过书籍、在线表情包、商品和广告的形式被大众消费。


The millennials and generation Z are familiar with IT devices that they easily draw things in a digital form. These generations tend to draw about their daily lives into a short cartoon and upload it in their own SNS. They produce this short form cartoon to express their personality. Cassandracalin and Min4rin draw their daily lives based on experiences as a woman. Their cartoons had gained a lot of support and sympathy from women and came out as a book. These cases become the start for Instagram to be recognized as another webtoon platform. In the case of Yangchikii, he humorously published a short cartoon on his SNS about an irrational situation at work. Along with the millennials and generation Z, his stories have become a lot of issues among workers, and these contents have been consumed through books, online stickers, goods, and advertisements.



千禧一代和Z世代人认为,表情包是一种新型的交流工具。 表情包是数字世界中独特的交流工具,可帮助清晰直观地表达情感并理解信息。 对于那些喜欢在不面对面的情况下进行交流的人来说,表情包已成为一种超越语言障碍的强大交流工具。 如今,千禧一代和Z世代使用表情包多于书写,他们甚至只使用表情包交谈。


Millennials and Generation Z thinks emoji as a new way of communication tool. Emoji is a unique communication tool in the digital world that helps to express emotions clearly and intuitively understand the message. For those who prefer to communicate without meeting face-to-face, emoji is emerging as a powerful communication tool beyond the barriers of language. Nowadays, millennials and generation Z use emoji more than writing. They even talk through using emojis only.



随着表情包成为一种新的交流工具,头像表情包通过将千禧一代及Z世代的个性和自我表达,而让AR技术进一步发展。 年轻一代使用他们自己的头像表情包来表达自己并创造新的文化。


As emoji became a new communication tool, avatar emoji evolved one step further by applying the personality and self-expression of the millennials and generation Z to AR technology. The younger generation uses their own avatar emojis in various contents to express themselves and create a new culture.



千禧一代和Z世代使用的在线表情包包含了小众情感的表达,而且他们更喜欢轻便且大致带有直观信息的表情包。 随着小众情绪表达的在线表情包变得流行,习惯了数字绘图的年轻一代倾向于自己制作在线表情包。 即使它不那么精致,但如果年轻人能够共情这个概念,它也会受到年轻人的喜爱。


The online stickers used by the millennials and generation Z contain B-class emotions. And they prefer the stickers which are light and roughly drawn with intuitive messages. As B-class style online sticker becomes popular, the younger generations who are accustomed to digital drawing tend to make online stickers themselves. Even if it is not a well-drawn, it can be loved by young people if they can sympathize with the concept. 



随着在线表情包在年轻一代中的流行,它已成为角色行业的重要组成部分。 由于个人可以在社交平台上出售在线表情包,因此出现了各种角色,受欢迎的角色则扩展到了角色商品业务。 这些角色IP可以通过快闪店、在线商店,甚至可以直接与各种品牌进行合作。


As online stickers became popular among the younger generation, it became a big part of the character industry. As individuals were able to sell online stickers on the SNS platform, various characters appeared and popular characters expanded to the character goods business. Pop-up stores, online stores, and even collaborations with various brands are being done with these character IPs. 




在千禧一代和Z世代的支持下,网络卡通市场急剧增长。网络卡通最近已成为制作电影、戏剧和游戏的主流内容。 随着全球OTT市场的扩展,具有良好故事和想法的网络卡通内容成为IP业务的机会。 网络卡通的流行,让《上帝之塔》和《高中之神》被制作成了动画。 它已经在全球发行,包括亚洲、美国和欧洲,并且在海外市场上有很多粉丝。 Itaewon类也是基于网络卡通在Netflix上制作的。 它在亚洲市场排名第一,并取得了巨大的成功。


The webtoon market has grown steeply based on the support of the millennials and generation Z. Webtoon has recently become mainstream content that was made into movies, dramas, and games. As the global OTT market expanded, webtoon contents with good stories and ideas became an opportunity in the IP contents business. The tower of God and the God of High School was made into an animation according to the popularity of Webtoon. It has been released all over the world, including Asia, the United States, and Europe, and has many fans in the overseas market. Itaewon class was also produced on Netflix based on Webtoon. It was ranked top in the Asia market and was a great success.



网络卡通IP在角色IP行业中占据很大一部分。 使用网络卡通IP设计的角色商品受到年轻一代的喜爱。 另外,各家公司与网络卡通IP进行合作以推广其品牌,因为它们可以自然地推广其产品并为消费者(尤其是年轻人)带来乐趣。


Webtoon IPs occupy a large portion in the character IP industry. The character goods designed with webtoon IPs are loved by the young generation. In addition, various companies collaborate with webtoon IPs to promote their brands because they can promote their products naturally and fun to consumers, especially to young people.




虚拟网红是由主要消费者群体的变化和科学技术的发展创造的一种新的数字IP趋势。 它们主要在Instagram,Twitter,Facebook和Snapchat等社交媒体上活跃。 即使他们不是真实的人,但却能通过与粉丝交流来表现自己,并且拥有大量的关注者。 这种虚构的特征已经成为利用社交媒体的公关市场的新趋势。


Virtual influencers are a new digital IP trend created by the changes in the main consumer group and the development of science and technology. They are mainly active on SNS such as Instagram, Twitter, Facebook, and Snapchat. Even though they are not the real person they act one by communicating with fans and have a significant number of social media followers. This fictional character has become a new major trend in the PR market utilizing social media.



在某些情况下,品牌会自己创造虚拟网红。 肯德基(KFC)创造的桑德斯上校(Colonel Sanders)使人想起了该公司的创始人形象,只不过看着更年轻一些。 韩国老牌饮料公司Binggrae创建了虚拟角色“ Binggraeus”。 Binggraeus有一个概念,他是做Instagram推广Binggrae品牌的王子,该品牌反映了年轻人喜欢的小众文化。 Binggraeus能够通过制作具有个性的各种文化因子,并通过与年轻人积极沟通,来自然地推广他们的产品。 这些有影响力的人显然正在将品牌推广给年轻一代,也被用作各种品牌活动的主要典范。


There are also cases that brands create virtual influencers themselves. KFC has created Colonel Sanders which reminds the founder of the company but in a young-looking. And Binggrae, which is the old beverage company in Korea, created the virtual character, ‘Binggraeus’. Binggraeus has a concept that he is the prince who does Instagram to promote the Binggrae brand which reflects the B-class culture that young people like. Binggraeus was able to promote the product naturally by making various memes with the character and actively communicates with young people. These virtual influencers are clearly promoting the brand to the young generation, and also are being used as the main model of various brand events.



图形设计趋势不断变化,以反映千禧一代和Z世代的特征。年轻的一代更喜欢他们能够直接体会到的机智或感性的图像,而不是精心打磨和精致的图像。 针对年轻人,可以快速应用于各种媒体的设计正在引领潮流。


Graphic design trends keep changing to reflect the characteristics of millennials and generation Z. This younger generation who prefer witty or sensual images that they can empathize with rather than well-polished and refined images. Targeting young people, designs that can be applied quickly to various media are leading the trend.



过去,品牌标识设计更加精致和不变,通常应用于印刷和应用程序。 但如今,媒体变得越来越多样化,品牌标识也正在转变为一种灵活的形式,可以适应这种变化。 许多品牌正在进行多种尝试,以在千禧一代和Z世代人身上打上烙印。


In the past, brand identity design was more refined and immutable and usually applied to print and applications. But these days, the media is becoming more diverse and brand identity is also changing into a flexible form that can be adapted to this change. A lot of brands are trying various attempts to imprint identity on millennials and generation Z generation.



A lot of brands tend to make short logo animation with their brand logos. The brand logos are not an unchangeable element in brand identity anymore. The brand identity can give a fun and easy impression to appeal to millennials and Generation Z. 


许多品牌倾向于使用其品牌logo制作简短的logo动画。 品牌logo已不再是品牌标识中不可更改的元素。 品牌形象可以给千禧一代和Z世代一个有趣轻松的印象。



随着数字平台的发展,海报也正在演变为移动海报。 由于千禧一代和Z世代都熟悉视频内容,因此他们对移动图形比对精致图像更感兴趣。 而且,与过去不得不将所有内容打印在一页上的情况有所不同,通过运动图形以更加有趣的方式显示更多信息变得更加容易,这也吸引了年轻一代的关注。


With the development of digital platforms, posters are also evolving into moving posters. Since millennials and generation Z are familiar with video content, they are more interested in moving graphics than refined images. And unlike in the past when we had to print everything on one page, it is easier to show more information in an interesting way through motion graphics which is also a point that young generations are attracted to. 



艾米莉·洛佩斯(EmilyLópez)的动态海报是由字体和复古图形组成的,感觉粗糙而怪诞。 罗伯托·华纳(Roberto Warner)的海报采用简单的版式和图纸制作而成,突出了艺术家希望使用动态图形显示的内容。 许多图形海报倾向于具有复古风格或由年轻一代喜欢的简单有趣的图形元素组成。


Emily López's moving poster is composed of type and retro graphics which feels rough and grotesque. Roberto Warner's poster is created with simple typography and drawings which highlights what the artist wants to show using motion graphics. A lot of graphic posters tend to have a retro style or composed of simple and fun graphic elements that young generations will like.



千禧一代和Z世代宁愿主动参与并独自体验新事物,而不是单方面看到信息。 许多设计师或艺术家试图通过使用诸如AR之类的新技术,使年轻一代参与他们的作品。 年轻一代对与他们互动的图形更感兴趣。


Millennials and Generation Z prefer to participate actively and experience new things on their own rather than seeing information unilaterally. Many designers or artists try to make the young generation participate in their works by using new technologies such as AR. The young generation feel more attracted to the graphics which they can interact with.



Agenda 2020和后印刷时代都是使观众参与到使用AR观看展览的项目,并且有很多使用AR技术的图形实验,使人们可以通过图形海报体验三维技术。 通过让人们积极参与该项目,自然地将品牌形象烙印于热衷有趣和新体验的年轻一代中。


Agenda 2020 and post-print are both projects that involve audiences to view exhibitions using AR. And there are a lot of graphic experiments using AR technology to let people experience three-dimensional experience through graphic posters. By letting people actively participate in the project, it can naturally imprint the brand image on the younger generations who love interesting and new experiences.



过去,似乎只是由儿童绘制的类似涂鸦的图像往往不被认为是不错的图形。 但是,千禧一代和Z世代更喜欢以一种轻松自由的方式表达自己的情感和个性,他们倾向于将“涂鸦式的插画”视为一种时髦的图形。 有一点可以证明这种说法,许多希望得到千禧一代和Z世代支持的时装品牌都渴望与绘制涂鸦风格图形的插画家合作。


In the past, doodle-like images that seem to have just been drawn by a child could not be recognized as a nice graphic. However, the millennials and generation Z who prefer to express their emotions and individuality in an easy and free way tend to see doodle style Illustration as a trendy graphic. As proof of that, many fashion brands that want to be supported by the millennials and generation Z are eager to collaborate with illustrators who draw doodle style graphics.



Margonzales是一位专业的滑板手和艺术家。 他过去从事滑板很长一段时间,他从街头和滑板场景中汲取了灵感并在推出了自己的作品后就成为一名艺术家。 他的自由奔放和个人主义插图受到许多年轻人的欢迎,并在他与Supreme发行合作产品时闻名世界。


Margonzales is a professional skateboarder and artist. He had been a skateboarder for a long time and became an artist when he came up with his artwork where he got inspiration from street and skateboard scenes. His free-spirited and individualistic illustrations were enjoyed by many young people and became known all over the world when he released a collaboration product with Supreme.



萨姆·考克斯(Sam Cox)是一位来自英格兰的艺术家,比杜奇先生更著名。 他的作品的特征在于图案、角色和对象像病毒传播一般不断扩展。 乍一看,他的作品看上去很幼稚,但气氛明亮,受到很多人的喜爱。 他最近还与芬迪开展了有趣的合作。


Sam Cox is an artist from England who is more famous than Mr.Doodle. His work is characterized by the constant expansion of patterns, characters, and objects just as viruses spread. His work looks childish at first glance but has a bright atmosphere that seems to be loved by many people. He also recently conducted an interesting collaboration with Fendi.



丹尼尔·约翰斯顿(Daniel Johnston)于2019年去世,是歌手兼作词人和视觉艺术家。 他一生中大部分时间都在精神疾病中挣扎,这影响了他的图形风格。 2020年,街头品牌Supreme与其合作推出了联名产品。


Daniel Johnston, who passed away in 2019, was a singer-songwriter and visual artist. He had struggled with mental illness for much of his life which had been influenced his graphic style. In 2020, street brand Supreme launched a collaboration product with him.



俗话说,潮流在变,复古风格如今却风行一时。 现在,可以使人联想起80年代和90年代游戏和动画的图形重新成为一种时尚风格。 复古风格对某些人来说可能是怀旧的,或者对某些人来说是新鲜的。


As there is a saying that trend is going around, retro styles are now all the rage. Graphics that remind you of games and animations from the '80s and '90s are now recreated into a trendy style. Retro styles can be nostalgic for some people, or fresh and new for some.



Hanavbara是一个受欢迎的Instagram使用者,拥有24万追随者,主要绘制以K-pop偶像为主题的插图。 他的插图使人们觉得自己正在观看90年代的动画场景。 另外,Pixeljeff的插图让人想起90年代游戏中的场景。 过去由于技术限制而制作的粗糙且简单的虚线游戏图形现在被当成了表达个性的一种方式。 随着这种复古趋势,许多艺术家倾向于从过去的文化中获得启发。


Hanavbara who is a popular Instagrammer with 240,000 followers, mainly draws illustrations with the theme of K-pop idols. His illustration makes people feel like they are watching a scene from animation in the 90s. Also, Pixeljeff's illustration reminds people of a scene from a 90s game. Rough and simple dotted game graphics which used to be made because of technology constraints are now used as a way to express individuality. Many artists tend to get inspired by the past culture following this retro trend.



路易威登最近发布了一个有趣的视频。 维吉尔·阿布洛(Virgil Abloh)制作了一个动画,名为“与朋友的动物园大冒险”,这是路易威登男装系列的新概念视频。 他们正在根据千禧一代和Z世代的需求,做出独特的新尝试,以摆脱传统时装秀的形式。 另外,最近包含了老式动画图形的Toon-out等动画过滤器在年轻人中也很流行。 包括Doja Cat在内的许多艺术家都制作了复古音乐录影带。 这种复古风格已成为针对千禧一代和Z世代的新趋势。


Louis Vuitton recently posted an interesting video. Virgil Abloh created an animation called "The Adventures of Zoooom with Friends" which is a new concept video for Louis Vuitton's men's collection. They are making a unique and new attempt to change in accordance with the needs of millennials and generation Z, away from the format of traditional fashion shows. Also, animation filters such as Toon-out which contains old-style animation graphics were recently popular among young people. Many artists including Doja Cat, made a retro-style music video. This retro style has become a new trend targeting millennials and generation Z.


——————————

千禧一代占人口的31.5%,Z世代人口现在占比为32%。 千禧一代已经在改变世界,Z世代也开启了新的范例。 他们是现在和未来的真正消费者。 这篇研究文章研究了这样的情况:这些世代具有比其他任何世代都更为独特的个性,它们正在成为未来的力量,并且正在发生变化,以理解和反映这些世代在设计和营销方面的文化和品味。 我们希望本文能够帮助人们了解这些世代的特征,并了解他们所领导的趋势。


The millennials consist of 31.5 % of the population and generation Z is now 32 %. Millennials are already changing the world and generation Z is also opening a new paradigm. They are the real consumers of the present and the core of the future. This research article examined the cases where these generations, which have more distinct personalities than any other generation, are emerging as future power, and changes are taking place to understand and reflect the culture and tastes of these generations in terms of design and marketing. We hope this article will help people understand the characteristics of these generations and know the trends they are leading.

文章来源:公众号ISUV

做设计能用到的三条设计曲线,学起来准没错!

资深UI设计者

作为人类,我们无法总是理性地看到事物的本质。社会心理学告知我们,人类的感知与决策,在一定程度上,会带有偏差。而作为设计师,我们可以主动利用这些偏差,设计更好的产品。

做设计能用到的三条设计曲线,学起来准没错!

本文介绍了三条曲线,它们都将认知偏差做了可视化的表达,前两个来自日常收集整理,后面一个由笔者总结工作经验得出,下面开始吧。

双曲贴现

1984 年,经济学家 Mazur 提出模型:我们的大脑难以处理冗长的信息,因为不确定性随着信息的增加而增加。随着时间推移,我们对收益的感知下降。

做设计能用到的三条设计曲线,学起来准没错!

决策中,我们倾向于把长期的权重调低:无论是收益还是成本,只要时间够长,我们都倾向认为它不够重要。

举例来看:各大银行如何吸引潜在用户办理信用卡?可以承诺在后期,提供专业的优质服务与购物优惠,也可以信用卡办理完成的当下,让用户领取诸如行李箱、厨具套装之类的礼品。虽然两种方式都有可能吸引来用户,但原本办卡意愿相对低的用户,大部分是被当下的礼品所吸引。换言之,这部分用户是「额外的」。

做设计能用到的三条设计曲线,学起来准没错!

各大互联网产品都深谙此道,比如购买会员的页面,首月打折/首月免费/一年后付费都是惯用的手法,就在当下,给用户利益,促进转化。

做设计能用到的三条设计曲线,学起来准没错!

技巧总结:比起稍后的利益,我们更倾向当下给用户一些甜头,哪怕甜头很小。

峰终定律

峰终定律由诺贝尔奖得主 DanielKahneman 提出:人们对于一段体验的评价,取决于这段时间内最好的体验,与结尾的体验。我们的大脑最擅长「以偏概全」,它不会无差别收录所有内容,只会去记录离自己最近、让自己印象最深的点。

做设计能用到的三条设计曲线,学起来准没错!

宜家是峰终定律最好的践行者。顾客的购物流程中,差强人意的体验不在少数。比如店员很少,难以及时获得帮助,比如购物路线很长,对于有明确购物目的的顾客不太友好,比如永远要排的结账长队等等。

做设计能用到的三条设计曲线,学起来准没错!

但是宜家把握了它的「峰&终」。「峰」是过程中的小惊喜,比如随时可以坐下体验的沙发躺椅,比如偶尔出现的极便宜的家居用品,比如贴心的铅笔与尺子;「终」就是结账出口外,抚平顾客排队焦躁的冰淇淋与热狗。

做设计能用到的三条设计曲线,学起来准没错!

而这些产品宜家本可以提高售价,但却没有。因为用一个美味便宜的冰激淋结束购物之旅,糟糕体验被抛到脑后,人们回想起宜家时,会选择性地认为整个流程都非常棒。

做设计能用到的三条设计曲线,学起来准没错!

游戏产品也非常善于遵循峰终定律让玩家玩得更尽兴。比如疫情之后大热的 Switch 健身环大冒险。

做设计能用到的三条设计曲线,学起来准没错!

运动时,系统会一直强力夸夸为玩家打气,完成动作都会有及时的鼓励给到,创造一个接一个的体验「峰」值。每一次通过关卡,还会让玩家站直并高抬双手,将健身环举过头顶坚持几秒,画面里的「终」是非常有仪式感的 ending 动作,让玩家成就感满满。

做设计能用到的三条设计曲线,学起来准没错!

技巧总结:在满足了用户的常规体验之后,用心打造一些带有巧思的设计,安排在流程的中间与结尾处,给用户创造峰值体验。这不仅有可能让普通用户转化转化成忠诚用户,还能极大提高产品满意度还能带来口碑效应。

徒劳曲线

租房产品中,用户在 APP 内挑选几套心仪的房源,再约房东/经纪人去实地看房,是很典型租房用户场景。我们发起「看房路线」这一功能的设计。使用看房路线,用户能够在选好x套房源后,根据智能规划的看房顺序与路线,辅以时间提示与导航,有条不紊地去实地看房,妥妥贴心功能。

做设计能用到的三条设计曲线,学起来准没错!

我们大费周章产出了设计方案,上线后的效果,无论是使用频率与使用深度,都不理想。调研后发现,实地看房的场景,其实存在极大的不确定性。用户在看房中途,可能做出决策租赁某一套,也可能被经纪人带领去看别的房源,从而中断原本的计划。

做设计能用到的三条设计曲线,学起来准没错!

用户是完全自由的,他们会寻求最熟悉、最好用、最稳妥的途径去解决自己的非娱乐性问题。至于导航,用户平时使用什么同类产品呢?高德地图、百度地图这类很成熟的地图类应用。

用户不会因为场景不在专业的地图APP内,就原谅打折扣的导航体验。用户预期远高于实际产品开发程度,这种认知偏差,需要产品人来买单。

做设计能用到的三条设计曲线,学起来准没错!

总结这个功能的问题出现在哪里?其一,设计缺失,没有将线下流程的旁枝侧节考虑全面;其二,设计过度,但没有成本去满足用户的高阶需求。如何调整用户的预期到合理的区间,我们做设计时的「度」怎样把握,徒劳曲线应运而生。

做设计能用到的三条设计曲线,学起来准没错!

横轴是设计投入程度,纵轴是用户满意度,随着设计投入程度的加大,用户的满意度呈递增态势,但到了一定程度,满意度会断崖式下跌至谷底,这个阶段的设计投入便是徒劳。当设计投入快到达极限时,满意度又陡然到了一个新的高度。

我们要将自己的设计置于一个合理的区间,并将用户的期望调整同步。当有足够成本支持(无论可观支持抑或主观争取)时,把握机会,为用户创造体验。

做设计能用到的三条设计曲线,学起来准没错!

技巧总结:要引导用户在使用产品的时候,对功能有合理的预期——如果不能提供完善的服务,就用朴素的设计方案满足用户的基本诉求,而非好高骛远。在用户有更加合理选择的时候,给与用户便利,尊重用户的自由。这样不太功利的思考与设计,很可能带给你的产品带来更快的迭代,与更多的用户。

双曲贴现、峰终定理、徒劳曲线,三条曲线尝试将人们的思维偏差暴露出来,利用得当,事半功倍。希望能带给你一点启发。


文章来源:优设    作者:58UXD


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


论用户有多懒!

ui设计分享达人

满足用户的懒是用户体验的本质,利用用户的懒是探索人性的设计!





用户有多懒?


从我生活中的一个例子说起,我成功让公司洗手间的纸变得够用了。 

事情是这样的,公司每个楼层的洗手间每天只提供一卷纸,每次中午之后大多就是缺纸状态,这让人很不爽! 

洗手间装有两个抽纸盒,一个靠里,一个靠外,每次保洁阿姨,都把卷纸装在离洗手池较近靠外的抽纸盒中,这就满足了人们洗手后很方便的拿到纸来擦手。 

有一次在洗手间门口遇到保洁阿姨,我跟她说“大姐以后把纸装在里面的抽纸盒,这样用的时间长”,她笑了笑(当然我先说的是,两个都装上)。卷纸装在里面之后,结果有时我晚上加班还有。 






人有多懒,洗手后一多半人不再选择多走几步去拿纸擦手。所以在产品中和生活中,有时当你觉得有些设计不合理时,有可能是设计者的故意为之。 


人有七宗罪,其中就有懒惰,懒是人的天性,是刻在骨子里的基因。


现在互联网产品几乎都是在满足人的懒,买菜不用去超市、饿了可以叫外卖、不想看书读给你听、不想打字有语言功能等等,互联网的发展把人惯得越来越懒,也正因如此,才成就了许许多多的产品。




 产品中如何满足用户的懒  


很多产品的商业属性是满足人的懒,其实产品中好的交互设计,通常也是以满足用户的懒,而让用户感受到好的体验。 


1、简单简洁

电影《教父》中一句台词给我印象深刻, “能用半分钟看清楚事物本质的人,注定和用半辈子看透的人,有不同的命运”,这句话在产品设计中,反过来看就是, 能用一句话说清楚的事情,为什么要长篇大论,复杂不会给带用户带来价值,而是消费了他们的认知,因为用户很懒。 

下图是产品中很常见的通知设置,天猫读书的提示文案太啰嗦,用户根本不会逐字的阅读,用户看提示文案就是一扫而过,这是因为用户懒而养成的行为习惯。 



2、为用户多想一步

满足用户的懒,就是给用户制造“爽点”,在产品的交互设计中为用户多想一步,用户就会觉得用的很爽,觉得产品懂他。 

当手机截图后,在一定的时间内打开微信对话框点击加号图标,截图会自动预备发送,因为用户的操作行为大概率就是要发截图。 

iPhone手机长按微信应用图标,会弹出一些即时性强的功能入口,这大大提高了产品的使用效率,用户一旦使用一次就会爱上。 

在此之前,如果面对面互加好友,需要好多步才能打开二维码,主要还不好找到,对于陌生的朋友等待时间长了,难免会有一些尴尬的气氛。 



为用户多想一步,就是思考用户的行为目的是什么,然后在设计上为用户提供快捷的操作方式,这样就能提高产品的使用体验。


设计产品时不能总以自己惯有的思维方式去设计,要能把自己变成当下产品的用户,站在用户的角度去寻找答案解决问题。




3、的交互方式

用简单的方式,让用户轻松完成任务。一般来说,用户完成一项任务花费的时间越少,在易用性、性的体验上也就越好。 

这点在手机解锁的交互演变上能体现出来,以前手机都是密码解锁,然后有了滑动解锁,又有了指纹解锁,再到现在的面目解锁,每次的演变都是在减少用户的操作,提高了使用效率。 

手机解锁的演变过程 

与手机解锁相同的还有APP的登录演变,从繁琐的输入用户名密码登录到如今与电信运营商合作识别手机号一键登录,你会发现每一次的变化,同样是在减少操作提率。 


另外要强调的是,产品设计者要善于结合自己的产品思考问题,不能看别人有什么就加什么。 

别人家产品有第三方登录快捷方便,你也加,但其实如果不结合自己产品去思考,为什么要加,要满足什么,目的是什么,加上可能就是多此一举,制作麻烦,比如有些B端对内的产品根本不适合第三方登录。 


4、保持探索创新精神

有位产品大佬曾经说过,“用户习惯的操作路径,不要试图去改变,改变就会影响用户体验”,这观点听着似乎没毛病,但其实有问题,至少我是不认同的。 

试想一下,每次微信大改版的时候,是不是有很多人都会抱怨,“改的什么呀,用的好不习惯”,究其原因就是用户的懒惰所致,对于改变熟悉的事物,普通用户本能上就是会有排斥心理,因为他(她)懒的去适应。 

然而随着时间的推移,用户会慢慢发现原来这样的设计好像是比以前好用了。 

用户再次适应有两个原因:一是因为用户又习惯了,二是确实是产品的创新设计提高了体验。 

所以,改变操作路径,只要经过团队验证测试后,对体验和效率是可以提升的、有利的,就可以去尝试转变用户原有的操作习惯,如果是好的改版,用户很快就能适应并感受到变化后的价值。 


5、产品中用户懒的做的事

产品设计者们有必要知道的事,用户使用产品是懒惰的,用户在没有硬性需求的情况下, 很少有人更改产品的默认设置,也很少有用户看系统消息和群发的短信,所以用这两种方式推广活动,转化率极低。 

对于推送消息,不要那么频繁,除非你是新闻类产品,推送频率高用户会直接关闭推送。另外,有很大一部分用户,对于绝大多数的产品不会开推送,因为他(她)不希望被推送所打扰。 

有些功能从产品的角度希望用户使用,但如果设计上不能吸引用户,那用户肯定是懒得摸索使用,所以改变用户的懒,就得让无聊的设计变得有趣、有激励,从而吸引用户,这样才能改变用户的懒的状态。 

产品的体验设计,其实就是满足用户的懒,但其实能把懒用户通过设计手段调动起来一定是探索人性后的设计。 


 最后 


其实,因为人性中的懒,才成就了如今的互联网盛世;因为人性中的懒,人们才为省力气发明了轮子、嫌沟通麻烦才发明了电话等等,从某种程度上看,是因为人性中的懒才推动了社会的进步。 

我们从更高一个层面去思考这个问题,是哪些人创造了互联网盛世,又是哪些人推动了社会进步,绝对不是懒的学习、懒的改变自己的人,而是那些善于思考想要改变“懒”的人。


文章来源:站酷-吴星辰

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




设计师要懂的原子设计(AtomicDesign)理念

周周

“我们不设计页面,我们设计构成元素的系统。”——Stephen Hay 

原子设计理论并不是什么高大上的规则。

随着网页设计的持续发展,我们认识到开发设计系统(design system)的重要性,它最早就是为了让网页设计师更容易理解网页的构成,后来才延伸到UI设计当中。


简单来说,当公司的业务产品逐渐扩大时,我们需要制定一套完整的设计系统,提升设计和开发的协作效率,统一所有设计师的输出物。 开始设计系统的制定时,大部分设计师可能都会先去网上找到大厂现成的设计系统,当拿到他们的成品的时候,会把自己的产品进行拆解和借鉴,这的确能快速解决问题,但是如果不理解其中的组织规则和逻辑,只是借鉴他们现成的设计系统,只能了解个大概,知其然而不知其所以然。因此,原子设计理论的出现就是为了帮助我们去搭建设计系统,这套理论已经逐渐被国外一些大厂应用于创建统一和富有层次的设计系统。

原子是所有事物的基本构成物质。每一个化学元素都具有不同的性质,并且它们一旦被分解就会失去其意义。

分子是由两个或两个以上的原子通过化学键结合在一起的。这些原子的组合具有自己独特的性质,并且相较于原子来说,更具实际意义和可操作性。
有机体是由分子有机地组合在一起的。这些相对复杂的结构可以从单细胞生物一直到像人类这样难以置信的复杂生物体。 


 宇宙中的物质都可以被分解成为原子元素。

碰巧的是,我们的界面就是由一些基本的元素组成的。Josh Duck的“HTML元素周期表”完美阐述了我们所有的网站、APP、企业内部网、hoobadyboops等等是如何由相同的HTML元素组成的。

△Josh Duck的“HTML元素周期表”

接下来和大家细聊一下什么是原子设计;原子设计到底好在哪里;为什么要有设计系统;以及该如何利用原子理论创建自己的项目组件库。

原子设计(Atomic Design)理念最早是由国外网页设计师Brad Frost提出的,他从化学元素周期表中得到启发,发现原子结合在一起,可以形成分子,进一步形成组织,从科学的角度来讲,在宇宙中的所有事物都是由一组有序的原子组成。

Brad将这个概念应用到界面设计中,仔细观察后我们不难发现,界面其实就是由一些基本的元素组成,文字,颜色和图标等都是一个个原子。

 

通过原子设计,我们可以把界面看作是一个连贯的整体,同时也是一些元素的集合,每个元素都不尽相同,互相结合产生更多层次和结构,模块之间相互统一。说到底,原子设计其实是一种设计方法论,它由原子、分子、组织、模块和页面共同协作,由此创作出统一和富有层次的设计系统。 

简单来说:原子结合在一起,形成分子,进一步结合形成的生物体。原子理论意味着在已知宇宙中的所有事物都可以分解为一组有限的原子元素。

原子设计是一种方法,由五个不同的阶段一起工作,以更慎重和更具层次的方式创建界面设计系统。从而创造出更有效的用户界面系统的一种设计方法。

它的五个不同阶段是:

原子(Atoms):为页面构成的基本元素,例如标签、输入框、文字、颜色等;
分子(Molecules):由原子构成的简单UI元素,例如按钮;
组织(Organisms):相对分子而言,较为复杂的构成物,由原子及分子所组成;
模板(Templates):以页面为基础的架构,将以上元素进行排版;
页面(Pages):将实际内容(图片、文章等)放置在特定模板内;

 

原子设计不是一个线性的过程, 它更像是一个心理模型,来帮助我们把用户界面看作是一个连贯的整体,同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面,让我们更深入的了解每一个阶段哦~

原子

如果原子是物质的基础组成部分,那么我们用户界面的“原子”就是那些构成我们用户界面的基本构件了 。在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线等。 


在团队开始新项目时,为了保证各个页面具有统一的设计风格,我们会制定一套简易的视觉规范,在关键的设计元素上,各个设计师达成一致,这样就能很大程度保证不同页面的风格统一,并在这个基础上去探索更有创新意义的设计方案。

 


在模式库中,原子一目了然地展示了所有的基本样式,当你回来继续开发和维护你的设计系统时,这是一份很有用的设计参考指南。

分子

分子是原子组合建立的元素,两个原子即可组成一个分子。

在界面中,分子就像是一个由UI元素组成的相对简单的组织。例如,搜索框里的文字和图标共同打造一了个搜索表单分子。

 


 以按钮为例,它的组成元素包含了文字、色块、图标和栅格。合并后,这些抽象的原子从毫无关联到又一个共同的目的,图标和文字互相配合传达意义,颜色定义了按钮的特性,栅格为按钮定义了一个尺寸和规范。

 


将单个元素组装为简单的功能组是我们一直以来构建用户界面的方式,可帮助UI设计人员和开发人员坚持单一职责原则,这种方式简单且复用性高,可以保证界面具有良好的可用性。

以界面设计中的表单为例,表单是一个非常常见的设计元素,一个表单分子是由文字、图标和线条原子组成。这些原子合并后,得到的是一个可以应用在任何信息展示或者功能入口的组合。

 

组织

组织是由分子或原子或其它有机体组成的相对复杂的UI部分 。这些组织组成了界面的不同部分。

通过结合分子和原子,我们可以构建更复杂和可扩展性的模块,这个称之为组织,其实也可以称之为组件,这些组件组成了界面的不同部分。同样以表单为例,一个表单我们可以通过数量的组合,以及间距的调整,元素的增减,在界面中表达不同的场景和含义。从建立分子到建立更精细的组件,这为设计师和开发人员提供了重要的内容构建思路。

 

组件在解放设计师生产力方面有着重要的作用,我们可以把界面中常见的组件进行分类整理,如搜索、表单、图片和卡片等,这些常用组件基本能满足日常的设计需求。以Aribnb为例,他们主要分为3类:卡片、表单和内容。每个标签内容的设计形式尽量都保持统一,因此负责不同内容模块的设计师只要选择同一个组件就能完成页面的设计。在短时间内就可以完成页面超多的复杂项目,极大的提升了团队的设计效率。

 

在网页端最典型的例子就是网站导航,搜索表单,我们几乎访问的每个网站都会看到这些类型的组件。 

模板

原子,分子和组织的这种语言有助于我们有意识地构造设计系统的组件。但是,最终我们必须采用一个更适合描述我们最终产出的语言,这样才好汇报给老板、客户和同事,简单来说就是说人话。

 

模版的本质就是线框图,在这一步我们基本可以看到一个产品的形态。我们可以不断调整组件和分子组合在一起的效果来尝试不同的方案,找到一个相对合适的方案。模版的意义就在于可以专注于页面的内容结构布局,而不是页面的最终内容,此时模版内容是随时可以调整的,尝试不同的方案,在多个模版中进行对比,在这个阶段改动和沟通保证了成本。因此,模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。

 

模板是页面级别的对象,它将组件放置在布局中,并显示设计的底层内容结构。在设计一个有效的设计系统时,必须在布局的环境中展示组件的外观和功能,以证明这些部件组成了一个功能良好的整体。

 

模板的另一个重要特征是它们专注于页面的底层内容结构,而不是页面的最终内容。设计系统必须考虑内容的动态性质,因此,把例如标题和文字段落的图像大小和字符长度此类组件的重要属性说清楚是很有帮助的。

页面

页面是模板的具体实例,填充了真实的内容(图片、文字等)后形成页面,也就是常说的「视觉稿」,将占位符替换为有代表性的真是内容,使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的视觉方案。

 

页面阶段是原子设计中最具体的阶段,由于一些众所周知的原因这个阶段非常重要。别忘了,这可是用户在访问你的界面时会实际看到和交互的内容。

除了演示用户所看到的最终界面之外, 页面对于测试底层设计系统的有效性是必不可少的 。在页面阶段,我们可以看到当将真实内容应用于设计系统时,所有这些模式如何运作。所有的一切看起来都很棒吗?如果答案是否定的,那么我们可以回过头去修改我们的分子、生物体和模板,以更好地满足我们内容的需求。

 

页面还提供了一个表达模板变量的地方,这对建立强大而可靠的设计系统至关重要。以下是模板变量的几个例子:

用户在其购物车中有一个商品,另一个用户在其购物车中有十个商品。
网页APP的仪表板通常显示最近的活动,但是该部分对于首次使用的用户是禁用的。
一篇文章标题可能是40个字符长,而另一篇文章标题可能是100个字符长 

在所有这些例子中,底层的模板是相同的,但用户界面将会随着内容的动态性质而改变。这些变化直接影响了底层分子,有机体和模板的构建方式。因此,创建解释这些变量的页面有助于我们建立更具弹性的设计系统。


 这就是原子设计!这五个不同的阶段同时协同工作,以产生有效的用户界面设计系统。


原子是最基础的UI元素,并且是可以用作界面的元素构建块;
分子是用于形成相对简单的UI组件的原子集合;
组织是形成界面各个部分的相对复杂的部件;
模板将组件放置在布局中,并演示设计的底层内容结构;
页面将真实内容应用于模板,设计出视觉稿,并最终成为开发落地的依据;

 

原子设计为制作设计系统提供了清晰的方法。客户和团队成员通过实际的设计流程与步骤,能更好的去理解设计系统的概念。原子设计使我们能够从抽象的设计中过渡到具体的设计中来,因此我们可以对一个设计系统进行一致性和可伸缩性等类似特性的控制。


通过模块化的设计系统调动组件,可以使我们开发新的产品时,从开始就可以对产品进行严格的把控与一定程度上的控制,进而规避了事后风险。开发之前不确定好系统模块化,毫无逻辑的去开发,开发到一半发现功能与需求对不上等问题逐渐产生,会导致产品的延期、人员成本的浪费、资金成本的增加,产品的迭代率的下降、进而影响市场先机与市场占有率。 

原子化设计与原来的样式库设计思路不一样,原子化设计从抽象到具象,从元素到组件,让设计师从底层开始思考,对整个设计会有更清晰的理解。同时也能让设计更加统一,在新增组件的时候更谨慎。

原子设计的原理可以保证任何一个设计组件的构成与开发构建组件一一对应。同时应用原子设计的设计软件(e.g., Sketch, Figma)可以给新设计师足够的自由满足需求变通,并且可以保证同一个设计组件的更新会覆盖到任何一个使用这个组件的设计中。 

原子设计为我们提供了一些关键的见解,帮助我们创建更有效、更深思熟虑的UI设计系统。

那么、 


如果产品规模小只需要1,2个设计师,大概率是前期不需要大费周章搞一个需要开发配合的设计系统。可以只利用Sketch或者Figma做一个像贴纸一样的设计组件库。但是功能多了怎么办,公司来新人了,当新设计师产出后就会发现与原设计师设计的风格不一样,慢慢发现整体设计风格不统一了,只靠一个简单的组件库很难能满足新功能需求,新功能贴纸上没有设计或者设计需要变通,又或者是新设计师忙着交工忘记检查自己新组件和已有组件的异同。

 

这时候就会需要一个设计师领头去重新整理设计系统,走查发现同一个正文所用的十几个不同字号,又或者是十几个透明度不同的灰黑色字体,所有组件跟现有上线产品对比整理好后一并交给开发,开发再一一整理代码库。

设计系统(Design Systems)对于很多年轻设计师可能十个新名词,但是设计规范和组件等我们应该还是有一定认知的。在设计的过程中,我们会被其影响。在我们日常所使用的App产品中,如Apple、Google、Airbnb、Uber、滴滴等,他们的产品体验非常流畅,用户使用产品时能够地满足需求,在其良好的体验背后都有着一套强大的设计系统做支撑。


为什么需要设计系统

 

1、团队协作,体验一致。以滴滴为例,虽然只是一个简单的打车应用,但是其旗下的业务却很多,快出、出租车、顺风车等,每个业务都由不同的团队和设计师负责。可以想象如果没有设计系统,任由各模块设计师自由发挥,风格各异,出来的结果可想而知。而有了设计系统的帮助,就会感觉界面风格非常统一,感觉是出自同一个设计师之手,可见其设计系统的功劳不小。

 


2、系统的管理多样性。在设计过程中,我们会发现过程中,我们会发现每个业务的形态都是基于不同的场景,因为场景的多样性,在表现上就会催生出不同的样式。如果每个业务都用一种样式表达,久而久之当业务增长过快时,我们现有的设计模式就会难以满足。Airbnb的设计方式就是非常值得参考的一个案例,从最开始是提供民宿,到后来新增的餐馆服务,你会发现房源和餐馆都用了同一套图文信息结构,只是在内容的细节上有一些不同。这样可以降低设计的难度。设计师不用为每个场景思考一个设计模式而烦恼。同时,用户在浏览不同场景的内同时,在相互切换中也不会产生为违和感,一切都是很自然的操作。

 

 

3、帮助产品成长,避免一次性设计。互联网产品的成长模式是一种渐进式迭代,在产品初期的主要诉求是快速上线,等到产品上线获取一定的用户,证明它可以活下去时再逐步完善,增加更多的功能。每一次的迭代都是站在我们之前的思考之上,每一次的优化都会让我们的设计更进一步,这是我们期望达到的结果。

 


以Uber为例,新版本继承了黑色按钮的设计,并和地图进行了结合,地图的配色和旧版本相比也变得生动了,这种改变并不是一蹴而就,而是建立在原有版本之上。

一致性(Consistency):由于分解界面成单一元素,不论在哪一个页面,UI元素的互动性是相同的,例如颜色变化、字体的排序、以及反馈。不但让使用者体验相同,在视觉上更为和谐。


效率(Efficiency):由于建立了组件库,一旦要更改某一个元素,可以马上施行、应用。


跨部门的共通语言(Collaboration):不仅方便设计师思考页面的和谐性,也可以让工程师、测试检验清楚页面的逻辑架构及变化,减少不必要的来回沟通

在此,顺便浅谈下设计系统。

通常,设计系统包含的内容由设计原则、设计语言和组件库,这是一个整体的概念。

 

设计原则

设计原则是一个产品的核心设计理念,设计的本质就是解决问题,在制定设计原则时要建立在这个中心思想之上。这些问题也许是一个业务形态,例如打车的场景,也许是一个设计形式,如表单。设计形式又很多,我们应该如何选择呢?相对合理的方法就是建立一个规则,所有的问题和形式都想这个规则靠拢,减少不确定性,这就是设计原则的出发点。因此我们可以理解为,设计原则就是一系列的规则,是我们设计过程中要遵循的中心思想。

例如:苹果把审美作为第一要素存在于设计原则中,它的产品往往也是品味的代名词,看看它的设计原则就知道了:

审美的完整性

一致性

直接操作

即使的反馈

隐喻

用户可控

 

△ 官网:https://developer.apple.com/design/ 

再来看看Material Design,Google对其定义是一个完整统一的系统,结合了理论、资源和工具的数字体验产品,相比而言它的设计原则就是更加独特,这是它的设计原则:

材料是一种隐喻

大胆/图形/强调/

运动赋予意义

灵活的基础

跨平台 

△ 官网:https://material.io/design

由此可以看出,和iOS相比,Material Design的设计原则更加的抽象,因为他拥有一个独特的设计世界观,用还原的方法和物理方法呈现出它的本质,通过抽象的视觉卡片传递出设计的目的和原则。

设计语言

 在建立设计原则后,下一步就是制定一套设计语言规范,设计规范是设计系统的表现层,面向的对象是团队设计师和开发者,他能帮助设计师的设计输出保持风格统一。同样也能帮助开发者高度还原设计。非常有利于设计师和开发者的协作。这套规范包含的有:字体、颜色、图标和栅格。 

组件化设计

组件化设计主要作用有两点,一是保证多人协作效率,组件化设计可以快速完成一个简单页面的设计,提升设计效率;二是保持产品体验的统一性。同时,组件化设计环节在设计系统中是一个相对重要的工作,需要有一个全局观,要有较强的设计水平和沟通协作能力,这样,组件化的落地才会得到很好的推进。

 

在多屏时代,我们时时刻刻都在设计产品界面,需适配多系统,其中很重要的一点是如何在多系统之间保持体验一致性,很多人想到的就是规范,要想做一套严谨逻辑好,灵活的设计规范,那么原子设计可以帮助我们来很好的实现它,它在构建设计系统中算是比较科学的一种方法,国外很多设计团队都在使用这样的设计方法。比如以下这几个团队: 

1、Airbnb

Airbnb设计副总裁Alex Schleifer在IXDC2017国际体验设计大会上分享了这一创新React Sketch app 管理设计系统, 这是为Airbnb的设计系统而设计的,其实就是个实时更新的代码数据库,可以实时查询sketch数据、代码,也可以下载图标、设计模块,所有工程师、设计师都可以免费下载。

△ 官网:https://airbnb.design/events/when-we-use-systems/

2、Frames

Frames 使用了精致的组件和先进技术,并结合 Sketch 构建了强大的 Web 设计系统,同样能满足修改原子,全局同步更新的功能,支持响应式布局。提供了近百个网页模板,可以非常迅速地完成效果图制作。

△ 官网:http://framesforsketch.com

3、Nested Symbols

这是一套免费的设计系统,它将按钮、输入框、下拉菜单、通知等控件,都制作成了嵌套符号,方便自定义和编辑。

△ 官网:https://www.janlosert.com/ 

原子设计理论最大的价值,就是为设计体系/组件库的构建提供思路和方法,如果你不满足于市场上现有的设计系统,我们还可以自己创建。因此我们首先要为产品设计出一个独特的视觉语言作为起点。这个视觉语言一定要有力度、易于扩展,必须能在所有地方奏效!


接下来就以 Sketch Library 功能来实现组件库的创建。

第一步:定义颜色(color)

将颜色添加 Main、Text、Status 等一级分类,例如:Color/Status;再添加二级分类,例如:Color/Status/Success 等,命名需使用「 / 」 符号区分层级结构。定义好颜色和命名后,将每个颜色转换成 Symbol,便可统一调用。

 


第二步:定义字体(font)

根据设计规范,将不同字号的文字样式罗列出来,例如:Title 1、Body、Body2 等,按照「样式名称/颜色/对齐方式」的层级结构,将文字赋予 Text Style,整理出所有的字体样式。

第三步:定义图标(icon)

将图标放置在 24*24px 大小画板内,从定义好的颜色系统中选择合适的 Symbol,这样替换图标颜色时直接选定义好的颜色就可以了。在属性面板中锁定尺寸(size)大小,并把调整尺寸(Resizing) 设为上下左右同时吸附,以确保图标在使用时可以等比缩放。

 

第四步:加入其他元素(Elements)

 

根据以上对原子的定义和命名方式,依次完成对其他原子、分子和组织的定义,例如:按钮、表单、空状态等,整个过程都是通过 Symbol 的不断嵌套,最终实现组件库的创建。

 

第五步:加入组件库

 

使用快捷键「cmd+, 」打开 Preferences 面板,选择「Libraries」(组件库)标签,点击「Add Library」(添加组件库)按钮添加刚才的 Sketch 文件,完成后就可以从其他的 Sketch 文件中,对此库里的元素进行调用了。

 

 

写在最后,原子设计是一套具有科学严谨的创建设计系统的方法论,是一个构建UI系统的心理模型。

 


原子设计使我们可以将我们的界面UI细分为原子元素,并通过这些元素组合在一起形成最终的界面。

原子作为整个理论最基础的元素,当我们改变其中的原子时,整个体系都会发生变化。原子的设计概念和sketch中的“符号”有异曲同工之妙,当我们改变其中一个元素时,其他所有包含这个元素的页面都会发生变化,可以保证整个系统的一致性和层次感。原子设计为界面元素提供了应用规则和组织原理,这套方法论对于设计系统建立、团队协作、产品迭代都具有非常重要的指导意义。

经常有同学问ios设计规范,安卓设计规范在哪看这类问题,最后,来推荐一些大平台的设计网站,上文出现过的下面就不重复了。我们耳熟能详的优秀设计都是来自于这些世界互联网公司,说真的,审美这东西还真是人家说了算~


反正看看又不要钱,都去康康呗~

 

Google Design

谷歌设计中心,它非常全面的展示了谷歌的设计工作和概念。包括Material Design在内的所有关于设计、体验、产品等互联网领域的探索。 

△ 网址:https://design.google/

Fluent Design

微软基于Windows10的设计语言,包括人机界面布局、控件、样式及资源下载。

 

 

△ 网址:https://www.microsoft.com/design/fluent/#/

 

IBM Design Language

IBM设计语言是伟大设计的代名词,他将人们的需求转化成精心打造的产品。在这里可以学习IBM设计团队一用户为中心设计的新思维方式。

 


△ 网址:https://www.ibm.com/design/

 

Facebook Design

脸书设计官网,在国内,我们常常看到脸书的设计文章被翻成中文为中国设计师所学习

 

 

△ 网址:https://facebook.design/

 

Uber Design

作为全球第一家即时打车应用,优步其超前的设计理念和优秀的用户体验成为同类产品竞相模仿的对象。

 

△ 网址:https://www.uber.deign.com/


Ant Design

蚂蚁金服设计平台是阿里旗下子公司,基于蚂蚁金服生态系统的跨设计与开发的体验解决方案。

 

△ 网址:https://design.alipay.com/


参考资料

《原子设计》官网

Airbnb 设计规范

Apple 设计规范

Material Design设计规范

Google及其他

文章来源:tob.design

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

日历

链接

个人资料

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

存档