标准圆环图

图表中间空心的部分用来展示数据的总数，用圆环的弧长和颜色表示不同数据的占比，图表旁边有图例用来解释说明。

布尔圆环图

布尔圆环图就像是给圆环图做了布尔运算，只表示正负两个值。

比如想重点突出完成率，就使用绿色圆环来表示68%的完成率，圆环其他部分为灰色，同理想重点突出反弹率，就使用红色圆环来表示83%的反弹率，圆环其他部分为灰色。

圆环中心部分用来显示相关数值的百分比和标签。此外布尔圆环图不需要额外添加图例。

标签圆环图

圆环图交互状态分析 

悬停状态

在标准圆环图中，鼠标悬停在圆环图上时，跳出分段名称+百分比+数量值的弹窗。在标签圆环图中，悬停的圆环部分突出显示，其余部分淡出处理。

点选状态

图表段可以是交互式的，点击对应的分段时，右侧的图例也会同步高亮显示。

焦点状态

焦点状态和上面提到的悬停状态类似，唯一的区别在于，焦点状态选中分段后有一个放大+描边的圆环效果，突出展示数据。

空状态

当没有可用的数据时，应该在图表上表明这一点，并给出提示引导用户去点击。

错误状态

圆环图使用指南 

使用分类颜色

保持圆环图每部分颜色都使用醒目的颜色且具有对比性。在圆环图中不建议使用同色系颜色来显示数据，同色系颜色常用在直方图中。

最多使用五个分段

当圆环图包含多个数据分段时，图标会变得难以理解，为保证图标的清晰，尽可能将分段控制在 2-3 段，不要超过5段。如果数据过多，可以考虑使用柱状图、条形图等其他形式的图表。

保证数据准确

圆环图的所有分段加起来的数值应该始终为 100%，没有有多段数据占比过小，可以一起汇总到“其他”分段中。

按顺序排列数据

圆环图的份分段应从12点位置开始按最大值排序，然后按顺时针方向依次按大小排列每个数值。右侧的图例页应该从上到下保持一致的排序。

不要将时间分段

最后 

以上就是圆环图的基本介绍，在之后的分享中，会为大家介绍折线图、面积图、条形图、直方图等一系列数据可视化图表文章~

如果大家想看更多「数据可视化图表」系列内容，记得及时关注接下来的文章~

最后给大家分享一份最新的iPhone13样机模型源文件，有PSD、Figma和Sketch三种格式可以选择，特别适合用来包装作品集。

领取方式：关注公众号，后台回复【13样机】获取源文件

慢慢来比较快，希望对你有帮助！

作者：Clippp

转载请注明：学UI网》数据可视化图表设计指南：圆环图

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

展示二：

展示三：

展示四：

展示五：

业务背景

以我们 CCO 体验设计团队为例，主要服务阿里体系的消费者、商家、经济体等业务领域。随着业务不断扩大、用户角色多、体验复杂、设计师人力有限、定制化需求不断增加，设计面临严峻挑战。

1、业务多：30多个产品应用

2、角色多：覆盖消费者、客服小二、服务管理、业务运营、中台管理、客户  6大类用户群体。

3、体验复杂：设计师需兼顾用户和客户两个视角。

从组织上，85% 设计师纵向支撑业务，15% 设计师横向做标准化，反哺业务设计师。标准化实质解决的问题是保障基础体验一致性。

标准化怎么做

核心通过页面梳理、抽象、分发、衡量，保障基础体验一致性。

案例实战

以数据可视化场景为例，讲述如何做标准化。

1、业务现状

共有11个应用，涉及89个页面。

2、问题

体验不一致：各个工作台页面架构、组件、样式野蛮生长，缺少规范导致体验不统一。

低效：部分场景缺失，组件重复建设，大量定制；沟通协同内耗大，成本高。

3、策略

体验统一：框架、组件、样式。

提效：代码化、工具、交付机制。

4、体验统一

包括框架、组件、样式。

框架

(1) 现有页面收集

(2) 用户场景分析

(3) 页面归类

结合用户看数内容（例：概览、分析、详情）和交互形态（例：平铺、下钻），对页面进行归类。

(4) 确定典型布局

通过统计高频复用形态，确定典型布局。

组件

(1) 页面结构分析

组件的收敛，需要先对页面分析，确定模块层内容。例：模块包含页头、筛选、图表、表格。

(2) 模块层分类

横向收集全部业务，将模块层分类。细分模块扩展形态，放到对应的篓子里。

(3) 模块专项治理

接下来，需要对每一个模块进行专项治理。比如图表模块，再拆再抽象成指标、图表、单选、多选 4类场景。场景里再对主体和变体（也就是扩展形态）分类。

样式

(1) 确定优化内容

围绕视觉凌乱，要做的便是完善设计语言。设计师需要结合自身技术底层，补充缺失规范。例如布局、色板、字体、动效。

(2) 确定组件范围

通过统计高频复用组件，确定需要梳理的组件范围。

(3) 布局

图例位置：线上有9种，通过从业务场景按阅读顺序划分，最终收敛成2种。

组件高度：真实线上情况，只能看2个指标，高度规范缺失。

需要根据用户分辨率调研，提炼典型分辨率。比如用户是win系统，包含菜单栏、任务栏等默认高度，再减去本身页面页头等默认高度，得到 3 档。确定组件建议默认行高 240px。

轴标签旋转角度：现状有顺/逆时针两种，通过分析标签类型，结合阅读顺序、轴与标签亲密度，确定默认角度为顺时针。

(4) 色板

通过场景梳理，确定不同组件使用的色板类型及缺失色板。

补充语义色板：从业务里抽象2类场景，指标和柱/饼/环场景，定义颜色。例如带正面语义，用绿色，比如升、已到岗、正常。带负面语义，用红色，比如降、旷工、失败。

(5) 字体

结合自身业务场景问题，从场景、版权、风格、识别、极值共5个维度选择字体。

举例场景一，纵向数据场景里，将市面上数据竞品用到的字体都横向铺开尝试，做排除法。比如din没版权，苹方非等宽字体，普惠102识别性弱。

举例场景二，在核心数据呈现中，helvetica 品牌风格弱，普惠在1亿以上极值过宽。

最终我们根据自身业务场景特征，用普惠和普惠102，运用在对应场景里。并同前端提炼规则。

(6) 动效

首先，需要确定动效价值，明确动效需要解决的问题。这里围绕舒适度、活力、层级、反馈来讲。

通过动效场景链路分析，确定优化范围。

加载动效：围绕让用户认知过程更为自然。通过组件横向梳理、抽象图形、组合样式的思路，输出方案。比如这里共梳理17种组件类型，抽象成9类，包括点、线、面、饼、环、柱、文本、图标、词云，再进行组合产出方案。

出场动效：通过业务分析、提炼场景、优化效果。比如这里共提炼 3类场景，有通用、监控、舆情。围绕过渡不自然、卡顿、缺少情感化表达来优化效果。

浏览动效：通过提炼场景，来强化元素之间的层级与空间关系。比如单个组件、联动、下钻场景下，围绕点击感知弱、重点不突出、缺少悬停态来优化效果。

沉淀速度参数：将优化动效场景的速度参数，同前端约定规则沉淀组件库。

5、提效

包含代码化提效、工具提效、机制提效。

整体思路

从设计组内到技术产研的提效过程。

提效面向用户依次是：组件设计师、业务设计师、前端、产品。

搭建目前还在进行中，这里主要从交付-工具-代码化来分析。

交付内容

1、业务设计师：sketch/figma物料 (样式、组件、区块、模板、规则 )

2、业务设计师：kitchen工具（样式、组件、区块、模板）

3、组件工程师：组件规范/组件官网

交付机制

新需求：通过评估复用性、抽象、内审、沉淀物料。

现有业务：通过页面梳理归类、抽象、内审、沉淀物料。

6、衡量

从物理到行为层，包括样式、组件、框架、组件交互 共4个维度。通过一致性评分衡量标准化覆盖的好坏。

总结

回归课程，在B类业务里，服务多个产品、多用户角色、体验复杂的场景下，在定制化+标准化团队阵型里，标准化实质解决的问题是保障60分基础体验一致性。

总结：B端体验标准化包括物料的产出、交付以及衡量标准。

产出：包括框架、组件、样式的收敛来梳理、抽象页面。

交付：面向2类用户群体，业务设计，需交付物料和工具。组件工程师，代码化需提供组件规范，组件线上化需助力组件官网的建设。

衡量：一致性评分包括样式、组件、框架及组件交互。

作者：CCO 设计

转载请注明：学UI网》如何做B端体验标准化：以数据可视化场景为例

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

对于设计师来说作品是最有效的话语权，不局限于工作项目的输出才能沉淀更多作品，日常的磨练对于专业提升来说也是至关重要的。从 0-1 去梳理全案设计，是对自己专业基础进行体检的有效方式，通过查漏补缺去不断地完善自己的专业技能。

关于时间戳

时间是最会骗人的，总是无私的赠送给你，不提醒剩余库存，消磨殆尽之时也不会给个提示。

上学的时候我们希望赶紧放学，进入大学我们希望早点毕业，迈入职场我们希望多几年工作经验。一晃十年职场经历时，又在叹息时间过得真快，还是刚入行的时候轻松呀！我们总是这么自相矛盾。我们需要的是成长的过程，不是一步到位的终点，没有过程中的积累和反思，是无法达到专业的顶端的。

时间戳便是以时间为引导线，为大家抓住时间、管理时间和更好地驾驭时间，让你的时间有迹可循。在这里你可以更好的记录自己的思考和寻求帮助，也可以管理自己的资源形成时间轨迹，还可以创建私有化的灵感资源库。只有不负光阴，光阴才不会辜负你我。

以下作品单个界面设计和最终的作品包装使用软件 Sketch，作品仅展示了部分功能和业务，不代表全部业务逻辑。

作者：黑马青年

转载请注明：学UI网》时间戳 【APP UI/UX 设计总结】

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

据埃森哲2021年中国“独角兽”研究显示，45%的独角兽企业认为海外拓展至关重要，其中82%的企业计划24个月内进军海外市场，从游戏、开发者服务和SaaS（软件即服务），到硬件设备、电商等行业，越来越多的初创企业从萌芽期就瞄准了全球化；网经社电子商务研究中心发布的《2021年度中国跨境电商市场数据报告》指出，2021年全年中国跨境电商市场规模达14.2万亿元，相比2020年增长了13.6%，其中出口占比达77.46%。除此之外，IT桔子《2022年中国资本海外投资并购报告》统计，2021年由中国资本参与的海外投资事件数达454起，创下自2004年以来的新高，而2022年仅前2个月，中国资本对海外已有40多起、约50亿元规模的投资。中国贸促会研究院今年3月的报告显示，中国对外直接投资流量和存量连续四年稳居全球前三，近八成中国企业将维持和扩大对外投资意向，看好对外投资前景。
中国经营报 2022.5

不难看出，即时是在疫情肆虐全球的今天，“出海”仍是是中国企业发展的重要方向，包括京东在内，越来越多的中国企业开始重视海外市场，在跨境电商、游戏及其他独立应用开发、投资等方面全面开花，从出海扎营，逐渐成长为全球化企业。

中国出海领先品牌50强

中国企业出海成功与否，离不开一个关键点——本土化设计。作为设计师，面对新鲜未知的市场，如何找到适合海外产品的设计方向？ 在服务京东东南亚业务的这几年中，我们也逐步累积了一些本土化设计的方法，这里就给大家分享几个小心得。

京东的国际化布局也已历时多年，2015年开始正式进军海外电商市场，上线了多个国家馆，并同时开始在海外成立独立站点。2015年底，京东成立了印尼站 JD.ID，后又于2018年成立了泰国站 JD CENTRAL，两大站点立足东南亚市场，逐步形成了全球化的布局，也继续扩张到荷兰等欧美国家。国际化已经成为了京东一个重要的战场。

当一个产品需要进入一个新的国家市场，在初创和快速发展的时期，作为设计师，首先要对这个国家有一些基本认知和了解。

一千个读者眼中就会有一千个哈姆雷特，人和人的差异尚且如此，国家之间的差异就更大了。由于文化背景、历史渊源、自然条件等多方面的影响，来自不同国家的人会对同一个事物产生不同的感受和反应。面对一个陌生的国家，我们需要打破固有印象，抛弃对用户的先天认知，尽量用客观的眼光去看待他们。

我们可以通过一些通用性的行研，来认识市场，从而规避风险，并得到体验设计的大方向。这里可以引用一些经典的分析模型，来协助我们做全方位的行研分析。

PEST是一个非常常用的分析模型，一个行业或者公司能够发展得如何，靠的不仅仅是自身实力，外部环境也很重要，PEST是一个有效判断行业或者公司发展前景的方法。我们可以通过搜集公开资料，来明确目标市场的政治、经济、技术和社会环境。但是这些对设计来说还不够，另一个模型NESC则在这个基础上增加了自然环境和人文环境的研究内容，其中包含了对于东南亚国家很重要的宗教习俗等基础信息。

这两个模型里其实包含了一个以国家为单位的群体大部分的特征，可以极大限度的勾勒出一个国家的基本情况，通过这两个维度的分析，我们可以初步推导出一些本土化基本原则。

举个例子，京东的吉祥物JOY原本是一只小狗，但在伊斯兰教中不允许狗与人有密切接触，为了规避宗教习俗的禁忌，所以印尼站使用了小马的形象作为吉祥物。在很多重视宗教的国家，充分表达对当地文化的尊重，是非常重要的。

这里介绍一个人文研究的理论工具，霍夫斯泰德（Hofstede）文化维度理论，这套理论问世距今已经有40多年历史了，它把文化特征分为6个维度，在研究跨文化差异时被广为引用。

荷兰学者Hofstede（1997）的研究认为，文化对于人就如同计算机程序对于计算机一样；程序限制了我们的思维方式，我们的感知，我们的行动等等，他试图利用主要来自跨国公司IBM的数据来建立各种民族文化的特征类型，这些数据来自对50多个国家的10万人所进行的调查。后续，这套理论被后来者不断完善改进，并逐渐扩张为在全球各个国家定期做大规模调研和信息收集，汇总成国家维度的数值，为文化分析提供了理论支撑。理论中的六个文化维度如下图：

有了这些数据，我们可以更直观的看到各个国家的文化特征和差异点，也可以推导出很多有价值的结论。下图是中国文化和印尼、泰国文化在各个维度的对比：

关于霍夫斯泰德理论的分析和应用，我的另一篇文章里有更详细的解析，感兴趣的同学可以移步观看：跨国文化的设计研究方法

第二个部分就是用户研究。

腾讯有一门经典的课程《像蘑菇一样思考》，其中描述了一个小故事：

有一个精神病人，他每天什么事都不做，打着一把伞躲在角落里，所有医生都觉得这个病人没救了。有一天，一个心理专家站在他的身边，什么都不说，拿着一把伞跟他一样蹲在那里。就这样坚持了一个星期后，他终于向专家身边凑了凑，说了句：“难道你也是蘑菇？”

这个故事告诉我们，用用户的方式去思考，才能发现问题的根源所在。需求来源于对用户的了解——对用户的了解，需要感同身受，变成用户，“我，就是用户”。洞察人性，以己推人，并不是一件容易的事。我们需要了解用户，了解市场，从而寻找机会点，那就需要和用户“对话”。

用研是一个很大的课题，去了解用户，光靠空想是不行的，得真刀真枪的去接近他们，深度访谈、问卷调研、意见反馈、走进场景、观察用户行为等。我们和海外用户的距离很远，但也要了解用户的想法，明白他们的关注点、购物倾向、诉求等，当我们需要做一个用户问卷调研，或者访谈座谈会，最佳方案就是和海外的本土团队协作来完成。

印尼用户问卷调研题干 初稿

上图是我们在做印尼站的用户调研时，和印尼本土的CX团队共同合作完成的一个调研题干。我们把对用户的疑问和好奇，落实在问卷中，通过cx团队的发放、收集和分析，反馈回来，从而获得用户的真实想法。

除了定向调研，周期性的用户反馈跟踪也很重要。

常用的两个指标就是客户满意度和净推荐值，客户满意度更重视用户的主管感受和态度，净推荐值则倾向于忠诚度和推荐意愿，两个指标通常会用在不同的场景中，我们定期追踪的指标是以NPS为主，随时跟踪用户的反馈和数据变化，并定期汇总落实在优化中。

此外，调研一定是颗粒度可细化的，当我们对于一些关键流程节点，已经有了非常明确的调研目的，可以在系统流程中设定一些触发条件，去触发用户对当前操作的反馈，真实的环境场景可以帮助调研者更贴近用户，理解各种用户群的使用场景和需求。

比如搜索列表也的点击低于预期，较多用户长时间浏览搜索列表，翻了几屏的商品，却迟迟没有进入商详页，这是就可以触发对应的问卷提示，询问客户，是否遇到了问题，从而去更精准的找到用户痛点。

搜索列表页浏览到一定深度时，触发的反馈问卷

新业务、新产品的开拓，离不开宏观层面的竞品分析，简单来说就是：知己知彼，百战不殆。

当我们进入一个海外市场的时候，当地往往已经有了一些成熟的本土同行业产品，或其他国际化公司的本土产品，它们很可能已经给本土用户培养了一定的认知基础和使用习惯。我们对当地市场的理解或许还不那么深入，这时我们如果借助类似的竞品，通过横向对比这些竞品以及它们的上下游，可以触类旁通，可以从更宏观的层面来理解这个市场。通过竞品分析，我们可以更好的了解市场和用户，明确我们与竞品的差异点、优劣势，从而达到知己知彼，并可以进一步寻找创新机会。

举个例子，我们在做泰国站的O2O项目时，通过对直接和间接竞品的比较分析，可以明确我们自身产品的能力优势和市场定位。也了解了用户对于这种商业模式的基础认知。

我们提取用户已经形成良性认知的元素和色彩，适度与竞品做差异化，进一步推导得出了instant joy的品牌logo、品牌色和吉祥物。

虽然我们的O2O业务在泰国市场还是一个新模式，但是对打车、便利店、外卖等间接竞品的分析，我们还是可以获得很多有价值的信息，也可以勾勒出用户对于不同业务模式、设计风格、元素的接受程度。

所以，做分析不要拘泥于本行业的直接竞品，从其他行业中选择和我们的产品有类似、相通点的产品，更能带来突破性的启发。我们或许都曾遇到过这样的困境，我们在思考一个新业务如何去突破，或者思考某一个功能如何设计的时候，想遍了各种思路、翻遍了已知的竞品，却仍然想不到突破的方式，也就是遇到了瓶颈。这时候就应该去看一些不同行业的竞品，获取更多的思路。

在做产品的过程中，当我们有明确的目标时，比如需要对一个关键模块做分析推导，就可以通过数据分析去推导策略。

成熟的设计师往往会把自己的设计经验逐渐内化为一种设计直觉，用直觉去做设计，有利有弊，这里不多评判，但是对于一个未知的海外市场来说，直觉就不一定可靠了。

我们来看一组数

这是泰国站单日UV的来源占比，其实和我们直觉的认知是很不一样的，国内的APP流量是绝对王者，PC和M端可能非常少，但在泰国，M端的流量是最高的。很多人会疑惑，为什么？我们接着看数据：

进一步提取各端的数据来源，可以看到APP端的UV来源最多的是高清屏手机，也就是苹果的PLUS和安卓的1080屏幕（进一步看数据就会发现，大部分是安卓手机）。

为什么小屏手机占比这么少？看一下M端流量占比，我们的疑惑就解开了。访问M端的流量占比最高的是小屏和超小屏手机，这部分手机，可能是比较老的机型，或者中国已经淘汰的型号，他们的系统可能不支持安装APP，所以只能访问M端页面。

我们再进一步看PC端，很意外的是，小型平板和超小屏设备占比达到了35%。我们把pc和M做一个纵向对比，可以看到，有一部分小屏设备的分辨率是重合的，其实很多山寨平板电脑，因为设备识别的问题，只能浏览PC版页面，体验是很差的。

不同分析方法是有相互呼应的，我们再去看之前行研的分析就会更有体会。泰国用户的手机占有率极高，移动互联网接受率很强，但他们平均收入并不高，很多人使用的就是小牌低价手机，甚至中国出口的二手手机。

这部分占比极高的用户，他们使用互联网的诉求很强烈，但碍于设备的限制，只能享受缩水版、阉割版的产品。了解了这一客观情况，产品和设计的迭代策略也需要做相应的调整，比如说对于泰国站，我们需要进一步优化小屏的体验，推进响应式页面的落地，以及优化技术层面对端的识别等。

数据从用户中来，通过一系列的数据沉淀、处理和分析找出机会点做决策再回到用户中去，提升用户体验，带动业务增长，驱动业务。

这里分享几个数据分析的常用概念和方法：

这五个概念，串联起了一个数据分析思维的基础框架，也为业务和产品搭建了一个全面的分析体系。

数据分析能力的核心不在方法理论和工具模型，更多的是建立一种数据意识，要能够敏锐的发现应该去关注的数据、并且能够从这些数据中找出潜在的规律，推理出数据背后的导致原因。

最后一部分更偏向于表现层的沉淀，通过设计资产和经验的积累和汇总，优化统一产品前台的设计表现。

设计原则就像英语中的语法，只要遵循语法的框架，随意的搭配都可以组成准确的语言。统一的设计语言能够保证平台的一致性，减少沟通的成本，效率也会得到提升，能够使设计师将更多的时间专注于项目上。

京东的东南亚站点从2015年开始布局，目前有印尼和泰国两个站点，接下来可能还会拓展更多国家，国家之间的差异也会越来越复杂。举个例子，不同国家的文字文本长度差异是很大的，中文排版中比较容易的左右对齐，对于西文就不太适合，所以西文排版更适合上下排列，需要更灵活，并且预留更多的文本空间。

文字本身的结构，也会导致行高的差异，也会一定程度影响排版。

对于图标的设计，国内产品（例如京东主站）使用的图标，相对比较精简，对于国内用户来说可以理解，但对于海外用户，这种设计语义是不够明确的，考虑到多国家理解的通用性，我们还是需要采用更明确语义的设计。

结合各国设计的差异性和统一性，求同存异，我们也在逐步沉淀东南亚站的设计资产库，帮助视觉设计师建立清晰的设计理念认知，在整体的产品设计风格上保持产品线的一致性。资产库不仅用于优化现有站点的体验，也可以助力未来的新站点快速搭建。

因为篇幅的关系，本文重点介绍了本土化设计的五个方向，其实每个方向每个章节都是可以进一步去研究和分析的。

本文中的工具和方法不单适用于海外市场的本土化设计，对于其他业务模式也是很有价值的。很多内容都来自日常的工作总结，也许会有谬误，欢迎大家指正和补充，希望后续继续和大家一起交流学习。谢谢大家～

转载请注明：学UI网》乘风出海——因地制宜的设计心得

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

在互联网产品设计中，标签虽然不是很起眼，但是绝对不能忽视它，只要使用得当，尤其是在电商类产品中堪称神助攻的存在，其功能的强大不是笔者几段文字能介绍清楚的，了解过产品运营、用户行为及心理学的设计师就知道为什么会“爱”上标签了。很多时候，看似简单的组件/元素，背后都蕴藏着不简单的运作方式，其方式的不同，给产品带来的结果也截然不同。

UI设计中的标签可用于传达信息、建立可预知操作等，能帮助或促进用户更快速完成任务、协助产品达成业务目标，深受产品经理、运营者的喜爱，但作为设计师的我们真的能听之任之吗？标签该不该用、怎么用、如何更好的使用都有一定的原则，即便同一个产品，被不同的设计师设计出来也可能是千变万化。本文笔者将根据标签的定义、属性特征及使用场景作出一些思考和探索，帮助大家对标签有一个更清晰的认识。

分享目录

一、标签基本介绍

二、标签在设计中的作用

三、不同场景下的使用方式

四、标签的设计（主产品列表）

五、结语

一、标签基本介绍

1、什么是标签

标签是结合产品内容及属性特征经提炼后产出的关键词，是信息的一种集合方式，便于用户查找、定位以及系统识别。好的标签设计会根据业务需求场景、服务理念形成独特的视觉标记，依托产品、用户目标需求，引导或促进用户进入下一步操作，用以提高商品、信息的转化。

2、标签色彩

标签主要帮助用户快速识别信息、提升信息转化效率，色彩是一个很重要的因素，好的配色能高效、精准的传达信息。在标签的配色中，主要针对以下两种场景：

一种是白色背景，这种没有任何冲突的背景给标签配色创造了极佳的条件，主体色、辅助色、点缀色均可使用，在面对同一组信息多标签的情况下，还能多种色彩混合，以便对标签更好的分类；另一种是图片背景，更多用在封面、头图、商品详情等位置，相比白色背景会受到很多局限，一般使用白色/黑色+不透明度、或者主体色作为标签容器，文字使用黑色或反白处理。

3、标签形状

形状是标签信息传递中的视觉轮廓表现，它是用于承载信息的容器，对文字元素的包容性极强，能使标签信息更加聚焦，让用户在获取内容、信息归类时更加专注。常用的标签形状有圆形、矩形（半圆角、全圆角）、三角形（角标）、气泡或异形，真实情况还得受界面使用场景、品牌调性以及设计规范等因素的控制。

二、标签在设计中的作用

为了对信息进行归类，标签可能出现在任何一个页面，通过精、简的表达方式，希望能引起用户的关注以及激发用户想要进一步了解的欲望。例如双11快到了，手机里的各大应用图标都贴上了双11标签，预示优惠活动已经启动，以激发用户点击的欲望；打开外卖应用，看到琳琅满目的满减、特色标签，也能让我们快速的择优处理。总之，在什么时间、需要使用什么样的标签，主要看产品想达到一个什么样的目的。

1、突出产品特色（营销）

标签的首要任务就是为满足用户的隐性需求而传达特色信息，通过让用户对产品产生联想并增加需求欲望，促进用户完成下一步操作。对于产品而言，标签能传递出折扣、优惠、卖点、特色等与用户利益相关的各种信息，而对于用户来说又能让其快速获取关键信息，降低内容的理解难度等。

例如：美团、饿了么店铺的优惠，如满x减x、免费配送、店铺红包、首次优惠…等标签让用户潜意识的认为能降低经济成本，即便事实并非如此；通过产品特色信息，如品牌、服务、复购率、售出累计、排名…等标签体现出专业、高质量以及热情的服务态度，无时不刻都在击溃用户最后的心理防线，以提高产品的转化率。

2.建立用户操作预知

通过建立用户操作预知，让其在操作之前就能清楚点击后会发生什么。例如：登录腾讯动漫时，会用小标签提示上次的的登录方式，降低多账号的记忆成本；腾讯视频的封面会有VIP（需开通会员）、付费（需额外付费）、等标签，让用户在操作之前就能根据当前账号情况来判断操作之后可能会发生的事情，提前有一定的心理预期。

3、个性化内容推荐

用户在接触一个新产品或新功能时，一开始总会有些不知所措，这时系统会提供一些用户可能感兴趣的、产品希望用户选择的标签，并引导用户操作来获取想要的内容，以满足用户的潜在需求。

4.操作前/后的内容引流

标签既能突出产品特色信息、又不会占用太多空间，所以通过对用户建立好感、吸引其注意力进行引流也是一个很不错的方式。

常见的有两种引流方式，一种是在用户操作之前没有目标，系统通过标签对用户进行方向性的指引，例如淘宝搜索中的历史、热搜、兴趣推荐等。另一种则是用户在完成某个任务之后，产品通过相似或相关联的标签吸引用户继续浏览其他相关内容的潜在需求，以增加用户在应用中的停留时长，例如小红书文章详情页的结尾，会提供与当前内容相关的标签，点击之后可快速查看其他相似的内容。

5、信息分类

通过标签建立有效的信息分类，能帮助用户快速筛选出自己想要的内容，避免用户因浪费大量时间浏览了非需求内的信息而失去耐心。例如淘票票电影评论区，用户可选择自己感兴趣的标签去查找自己想要的信息，提高浏览效率，节约时间成本。

6、从众心理推动转化

当用户对某个商品犹豫不决、无法快速做出决定时，正处在转化的边缘，这时只需要一个“催化剂”，可利用从众心理推动用户转化。例如商品的销售量、收藏量、有多少用户正在下单…等，都会对当前用户的心理产生极大影响，很多时候，用户的想法和行为受到周围人的影响程度，往往超过理性的认知。

三、不同场景下的使用方式

在用户层面，标签提供的是内容的核心或特色关键词，能提升用户浏览效率，帮助其快速做出决策。站在设计角度，标签不仅能多样化的展示各种关键信息、提高视觉表现力，最主要的是能通过设计手段为业务赋能，促进产品、信息的转化。

直白一点，产品经理说“需要重点突出功能的特色、卖点”、运营说“目前我们在做活动，要特别突出折扣优惠”、业务说“有很多用户不知道xxx，需要设计的最明显”……最后一致决定都很重要。相信绝大多数设计师都遇到过这种问题，怎么办？是直接拒绝还是等着各部门撕逼后给出一个确定的结果？

其实面对上述情况，设计师的角色不要只停留在画界面上，应该站在用户的角度去分析，提这些需求的人到底想表达什么（表面上用视觉突出），能给用户带来什么，需要经过讨论，深度分析产品的真实需求、用户的痛点及诉求，从中找到一个最佳的平衡点，然后通过结论来确定设计的可行性、易用性以及视觉表现方式，不要忘了，设计的本质就是解决问题。

最后你会发现，如有必要，将众多信息同时展示出来、而且还不可以影响其他信息的传达并非不可能，使用标签就是一个很不错的解决方式，下面让我们来一起来看看，不同类型的类产品标签在不同的场景下都有什么关联以及不同的使用特点。

1、超链接标签

这种类型的标签以#+文字形式的超链接为主，大多出现在文字内容较多的列表页面、详情页的开头或结尾，也可以理解大家常说的话题，它能让用户通过标签就能了解到这些内容的主题及核心，帮用户快速链接到与该内容相关联的信息。

相信有一些设计师应该经历过这种情况，看新闻越看越感兴趣、刷抖音刷到停不下来、看旅游攻略根本不想睡觉…等，这都是源于系统背后的算法与自动推荐机制，产品的背后总有一双无形的大手在帮我们自动匹配。而＃+文字标签的出现只不过是将关联、或想推荐给我们的内容摆在的明面上（系统、用户推荐均可），把选择权交给了用户，即便用户没有点击标签，划走后或许还是逃不脱系统的算法推荐，可用户一旦主动点击，产品内容会更加匹配，用户的满意度就会更高。这样通过明（用户主动点击标签）、暗（系统算法推荐机制）的双刃剑，不仅能满足用户想浏览其他内容的潜在需求，也达到了产品相关联属性内容的引流。

例如抖音将标签放在了标题后面，用户随时能知晓当前短视频的类型、属性等信息；小红书的文章详情页结尾也会有相关联的标签，用户可通过该标签快速跳到其他相似的内容列表，以便获取更多对自己有价值的信息。

2、图片封面标签

常用在带有封面图片的内容列表中，例如视频、音乐、电商类型的应用，在产品封面配上图标或文字小标签后，不仅让用户对信息有更快速的理解，还能丰富图片内容、让视觉表现更加生动。需要说明的是，因图片本身的色彩比较复杂，一定要注意标签的配色，标签既然作为辅助说明来传递信息，就需要有一定程度的突出，不然，一旦与图片该区域的色彩融合或严重冲突，就会给整个界面的美观度带来负面效果。这种类型的标签大多数只用于信息传递，并无对应的交互操作，分为动态和静态两种类型。

腾讯视频列表封面的标签属于动态，也就是通过后台管理系统随时对内容进行调整，可能今天是A标签、明天就变成了B标签、或者什么都没有，标签的类型数量及样式会有一定的控制，针对分类、功能、权限类的标记非常实用。

京东的商品封面则是静态标签，为了体现出其质量、折扣、品牌等信息，在处理图片之初就将标签融合，让其成为图片本身的一部分，不过会增加相应的制作成本。相比前者，静态标签的使用方式非常灵活且不受系统的控制，对用户的吸引力更强，对产品促销、提高转化率能起到很大的作用。

3、商品列表标签（多元化）

电商应用的产品列表主要为突出特色、卖点来进行促销，类型及样式比较多元化，且单个产品可能多达4~5个标签，以此来吸引用户购买。

以下图淘宝、美团外卖列表为例，使用了线框、浅色底、深色底容器标签以及销量、费用类型的纯文字标签，样式可单用、可混搭，形形色色的展示出了商品的各标签信息层级，无时不刻都在吸引着用户的注意力。

四、标签的设计（主产品列表）

1、精炼

标签作为辅助补充信息的存在，不宜展示大段的内容，所以大家看到过的标签基本都很短。简短的标签是在信息表达清晰、用户能足够理解的前提下提炼出来的，我们这里所说的精炼并非一味的求短，虽然“短”是标签必备的因素，但有时候，过于简短的标签根本没办法给用户传达足够的信息，甚至会导致用户更加疑惑，这也失去了添加标签的初衷。

例如美团外卖列表，标签都很简短，但在用一句话形容、或用户高质量的评价来表达店铺特色时，这个标签占了整整一行的位置，并没有进行特别的简化。

下面是某购票平台，标签也很简短，大部分能一看就懂，但有几个就不一定了，“兑”是什么意思？可兑换火车票、还是购票后可以兑换其他礼品呢；“静”又是代表什么呢？乘车环境安静、人员相对安静还是需要乘客制造安静？虽然我们花点时间也能猜出个七七八八，但这无疑增加了用户的理解难度和时间成本。

2、视觉突出

因为标签本身比较小的原因，一般我们会通过配色来吸引用户的注意，但面对不同的产品属性，其色彩的表现形式也有很大的区别。

在腾讯视频中，采用的固定底色的容器标签，旨在强调产品的特权属性，视觉非常突出；而酷狗音乐采用的是黑色带透明底、文字反白的标签，仅仅作为辅助提示，对封面的干扰比较小、但依然能保持信息的有效传递。

3、一致性

同类型、同视觉权重的标签应尽量保持一致，即便应对多元化，尽量只在色彩上作出调整，其容器的外观形状、字体字号仍需保持相同的属性特征，要让用户一看就知道这几个标签属于同一种类别。

4、差异性

上面说到了一致性，现在又说差异性，乍一看似乎是有冲突，其实不然。这里的差异性是针对不同类型、不同视觉权重的标签，需要通过不同的视觉样式及色彩体现出信息的层级关系。

例如：用户在购买这个商品之前最想知道、且对用户最有吸引力的标签一定是最突出的，用户扫一眼就能看到，根据视觉权重依次类推，最后是对用户来说不是很重要、甚至没有看到也不会有什么影响的这类标签弱化显示。

结语

文中主要总结了标签的作用、不同场景下的使用方式以及设计中的注意事项，不难看出，UI设计中的标签跟我们日常生活中的标签很相似，它不仅能对产品作分类、特色标记，还能在用户犹豫不决的时候起到一定的推动作用，是平台内部信息导流和满足用户潜在需求过程中至关重要的一环。

标签设计不应该是简单的色块+文字的堆叠，它应该与产品之间存在着某种潜在的关联，需要针对不同的使用场景为产品量身定做，形成一套具备专业化的标签体系。好的标签不仅能满足上述提到的基本需求，还能在无形之中给予用户经验的感觉，一度超出用户的预期，最终满足产品的商业价值。

作者：大漠飞鹰CYSJ

转载请注明：学UI网》标签篇 | 打造独特视觉标记、精准传达信息

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

作者：黑马青年

转载请注明：学UI网》【UI设计作品总结】DJI 农业无人机 APP 页面重构

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

作为旧友，当然不能错过近水楼台的学习机会。一方面我在学习和锻炼自己的烘焙技巧，但更多的是，我想从蛋糕创意的过程中，提炼和提升自己的设计能力。下面就和大家在“主题创意”、“设计重点”、“色彩搭配 ”， 三个方面分享蛋糕设计心得。

首先是确定主题，就像我们在做一个设计的时候往往先要找到设计方向和主题，蛋糕设计同样如此，我们要根据客户表达的内容进行发散再聚焦。

例如：“我要给7岁的儿子制定一个生日蛋糕，他喜欢动画片《猫和老鼠》，希望蛋糕是双层的，够10个人食用。”那么蛋糕的主题就出现了——卡通猫和老鼠的儿童风格全家型蛋糕。如何去切合主题并突出主题呢，就是要寻找重点元素，并围绕其进行突破。

接下来就是寻找设计重点，包含整体造型，色彩搭配，装饰元素，线条律动，肌理纹路，比例角度，协调搭配，和谐美感，细节亮点等。身为一名烘焙师，蛋糕上的每一个元素都要经过深思熟虑被设计过的，就像我们做界面设计一样，页面中每一个元素都不是随便安放偶然出现的。

例如下图中的哈利波特蛋糕，设计的重点即在于制作围绕主角的元素内容，金飞贼和魔法杖能很好概括小哈利在魔法学院中最美好的回忆。加之偏暗色的奶油与金色铭文的结合，也表达了魔法世界的尊贵与神秘。

再如下图中两款男孩的世界为主题的蛋糕，设计的重点则是迎合小男孩的各类兴趣爱好，以玩具元素为基础，构建立体的场景或悦动的图形肌理，以活泼和玩耍作为设计重点。

另外，在做蛋糕设计时，也可以遵从“少即是多”的原则，不管元素还是配色都可以简单为主。日常生活中我们不难发现很多蛋糕做的五彩缤纷，很容易抓住人的眼球，但却禁不住仔细推敲。

最后是配色，西点蛋糕的美丽一半是靠味道，另一半则是靠调色。我们常常看到很多文章中使用“秀色可餐”来形容美食，其实这个用法是错误的，秀色可餐只能用来形容人的美貌和景色的秀丽。但我们从中不难看出人们对美食的理解之中，“颜色”是吸引人的第一要素。如果生活失去色彩，将变得毫无生命力。如果蛋糕没有色彩，它将失去灵魂！所以，颜色搭配在蛋糕制作中则更为重要，它就是美观与创意在蛋糕上的最高表现，那么如何进行蛋糕调色呢？

想要把奶油或翻糖调出满意的颜色，首先需要了解色彩的基本常识，虽然对于身为设计师的我们来说，这是再熟悉不过的基础知识，但也不妨让我们一起复习和加强一遍。

1、色彩基本知识

三原色：红、黄、蓝是色彩的最基本单位，就是我们常说的三原色，这三种颜色不能再被拆解成其他颜色，也无法被其他颜色调和而得。

间色：三原色中任何两种原色混合调和而形成的颜色，也叫二次色，和三原色形成对比色、互补色。分别是橙、紫、绿。

复色：是由原色与间色两两叠加得到的颜色，分别是橙红、橙黄、黄绿、蓝绿、蓝紫、紫红。

暖色：红、橙、橙红、橙黄、黄，象征太阳，创造柔和、柔软，温暖的感觉。

冷色：绿、蓝、蓝绿、蓝紫、紫，让人联想起天空、大海，给人平静、坚实、有力的感觉。

2、色彩寓意

每一种颜色都有着各自不同的含义，表达效果也会不一样。（供参考）

3、色彩搭配建议

色彩不能过多，最好在色彩搭配中所有颜色不要超过5种，否则会显得过于花哨。其中，主要配色需占据整体造型面积的50%以上为最佳，30%-40%作为全身辅助色，剩下的作为点缀。

冷暖色的使用，前面我们有讲述不同的色系表达的情绪和亲密程度是不一样的，适合的人群也不一样。一般情况下，我们可以根据人群特点来决定最终的色调。

– 如果送老师、同事或朋友，可以选择冷色系，因为冷色系会令人产生沉稳、正式、高雅的感觉，能够表达尊敬和真诚的情意。

– 如果送长辈、爱人或小孩，可以选择暖色系，因为暖色系会产生热情、明亮、活泼、温暖的感觉，能够表达祝福。

4、调色技巧提示

颜色不宜太艳丽：除非是一些主题非常明确的蛋糕，否则用色上不宜使用过于鲜艳厚重颜色，它会使蛋糕产生一种不自然的感觉，直白的说就是看起来不像食物。所以蛋糕可以多尝试使用一些亮度高、色度低的颜色进行制作，也能体现出奶油的质感。下图中左侧的蛋糕就明显比右侧的主题蛋糕食物感更多一些。

颜色调制尽量由深到浅：蛋糕制作中白色的颜料一般都是奶油，建议一开始调色时尽量用少量的奶油霜，从而避免浪费食材。因为如果一开始用很少量的奶油霜，不小心把颜色调深了的话也是很容易补救，只需要加入一些白色奶油霜进行稀释就可以了。

最后给大家展示一些烘焙实例～
– 节日主题蛋糕，烘托节日氛围：

– 五彩缤纷的甜点系列：

分享了这么多蛋糕制作的心得和案例，大家是看会了呢？还是看饿了呢？^_^

希望这些配色技巧和方案可以为大家不仅在蛋糕制作方面带来灵感，更能将其引入到日常设计工作和生活当中去。当然如果想要品尝老师或者我制作的蛋糕也随时欢迎。

作者：环铁艺术家

转载请注明：学UI网》好吃也要好看——烘焙与设计密不可分

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

海报视觉如何做的有创意？有哪些方法呢？

比如从构图、拟物、光影、嫁接、对比、或者反差？等等等等

每一种又都可以拆分成很多细类。

比如对比在视觉海报中的运用，又有明暗对比、颜色对比、大小对比、虚实对比等等、太多了！

首先我们来分析一下大小对比是如何应用的。

一、大小对比

1、大小对比的作用

我们先看下这张图：

两个元素， 如果一样大，平铺在画面中，就会显得普普通通的，没有任何亮点。

如果我们把其中一个放大，另一个缩小，再来看：

画面是不是有特点了很多，并且有了节奏感， 就连文案排版也有更多的方式。

所以对比就是让画面的两个组成部分/元素，以夸张的手法，布局构图，以让画面产生强烈的反差。以提升画面冲击力，画面纵深，内容丰富度。是非常有效提升画面品质的方法之一。

那大小对比如何玩的精通，玩得高级呢？
我们一起来看一下：

01 人物与人物

⑴ 全身与半身对比

这种半身人物和小人物的对比，或者头部表情眼神与小人物的对比主要可以展示人物细节，后面的人物放大表情传递情绪，前面的人物展示全身，传递状态，可以很好地传递内容，常常用在各类视觉海报中。

⑵ 局部大特写与小人物对比 (下面右侧的图是江湖哥2017年做的图，分析两次了，哈哈，备注下）

这种对比有强烈的大小反差，并且可以很大程度地拉伸画面纵深，表现出很强的空间感！
并且还有一个细节：这两张都是三角形构图，非常稳定。

所以我们在设计的时候要也要注意画面的构图方式，夸张对比同时，要保证画面的稳定和饱满！

⑶ 全身与全身对比

全身的人物对比很小的人物，让画面有更多的空间可以利用， 可以留白想象，也可以打造场景氛围，展示更多场景氛围。

02 人物与场景

⑴ 小场景与大人物

夸张化的对比，让本该小巧的人物矗立在场景里，很容易就营造除了一种巍峨磅礴的视觉感受。

一般需要很高的设计成本，工时不小。简单点的做法我们可以直接在人物下面拼接一些小场景，比如这样：

一些日常小需求中，没有那么多的时间去打磨细节，就可以这样做，既能保证按时完成需求，也能有一定的创意性。

⑵ 小人物与大场景对比

这种方法也非常具有创意性，把一些很小的物体放大，人物缩小， 反差表现两个主体的大小对比。往往也能有出人意料的效果，需要更多的灵感和想法。

小节

创意本身就是打破常规，把不可能变成可能，达到出人意料的效果就是创意。本期分享的大小对比在画面中的各种玩法就是可以很好达成这种目的的方法之一，大家可以多去尝试，和练习，单这一种方法用好了就很牛逼了。

光影是在平面视觉里常用的一种技法方式，在说光影的创意之前，我们先说一下光影的作用。让大家对光有所了解。

二、光影对比

1、光影的作用

我们为了直观一些，直接用几个图片说明。
现在这张图，这是一个瓶子的图形：

我们给瓶子加入光影：

瓶子就变得立体了！

我们给背景加入光影

空间变得有纵深了，画面层次也丰富了起来！

所以光在画面中最基础的有两个作用：
⑴让物体变得立体，更加真实！
⑵增加空间纵深，丰富画面层次！

那我们应该如何利用光影，去做更有创意性的设计呢？

光影、光影，先有光后有影。那我们就先来说说主要表现光的几个玩法：

2、光

⑴逆光
逆光就是主体在正前方，光源与主体重叠的一种使用方式，可以说是我们最常用的光影塑造方法之一了：

它的特点是光源与主体重合，形成很强的对比，在画面可以可以非常好地聚焦视线，强化主体。

⑵侧光
侧光是光从主体侧面打过来的光，一般不会太强：

主要是起到一个丰富画面层次，营造氛围的作用。

⑶顶光
从主体顶部打下来的光：

这种光，可以有效引导视觉，把需要的部分亮起，不需要的部分暗下去，由上至下，吸引人的视线范围和顺序。

⑷聚光
从前方照射过来的灯光：

聚焦视线，不要的地方全部暗下去，是一种最能收拢视线的打光方式了。有些细节比较丰富的聚光画面，暗部也会保留一定的细节，不会是一个纯黑色。

⑸造型
给光赋予一个造型，可以达到一种形式创意上的突破，
比如这种：

把光塑造成一个人物的造型，下面放置对应的人物垂丧的状态，形成很强的人物情绪反差，可以说是非常有创意了。

还可以把光塑造成物体，比如这种：

把偷过来的光塑造成与主体相关的某个物品造型，中间放置一个小的人物，同样也是一种很棒的创意方式。

⑹分割
除了打光方向，造型之外，其实还可以用光来风格画面，也可以起到一些非常亮眼的视觉效果，比如这样：

以上就是光的玩法了，可以看到，光的玩法多种多样，利用好了可以让画面非常具有创意性。

说完了光，我们来接着说说影子的玩法都有哪些呢？

3、影

⑴投射
投射相交来说是比较常规的一种处理方式了：

用投影的方式加入到画面中，可以增加画面层次，渲染氛围，让画面更有深度。

⑵造型
影子也是可以改变造型的：

本来是应该与人物动作一致的影子，被改变造型与人物产生互动或对比，映射出了非常强的故事性，和内容深度，非常具有创意性了。

在一些插画或者游戏视觉中同样也可以应用起来：

内容深度和想象空间直接拉满！

⑶剪影
配合逆光的形式，将主体以剪影的形式表现出来：

剪影的表现形式，为了凸显剪影，背景上都会有一个逆光源存在，并且轮廓要清晰，在素材上刻画一些轮廓光源以让人物变得立体，可以营造出很棒的神秘感，常常应用在神秘嘉宾、新品发售、新角色发布等活动中。

应用在一些游戏中，强烈的明暗对比配合富有气势的人物造型，也可以打造出一些很有视觉冲击力的海报视觉！

光与影的玩法多种多样，既可以让画面变得立体，又可以提高空间纵深。打光方式、造型、剪影、分割等等用法，可以让我们的视觉变得不太平淡单调，让画面拥有无限想象力的创意方式。

海报视觉如何做的有创意？有哪些方法呢？

比如从构图、拟物、光影、嫁接、对比、或者反差？等等等等
每一种又都可以拆分成很多细类。
比如对比在视觉海报中的运用，又有明暗对比、颜色对比、大小对比、虚实对比等等、太多了！

今天就先分析一下大小对比是如何应用的。

其他对比

1、阵营对比

阵营对比的特点是5:5分画面，以对比色铺垫画面，形成强烈的视觉对比，和阵营感。常用于表现两个不同的阵营，或者正反派的视觉表现中。

除了影视海报、游戏，竞技类体育类也常常使用这种对比方法：

主要表现：对抗、竞争、阵营

2、状态对比

状态对比常用于表现同一个人或主体物的多种状态，比如人物的正常状态和特殊状态对比。通过一些技法让两种状态和谐地拼接到一起，是让单薄画面丰富起层次和内容的一种有效方法。

比如用画面拼接的方式：

或者是同一主体，把两种状态表现到一起的方式：

主要表现：人或物的的两种不同的状态，冰对火、明对暗、正常对黑化等等。

3、时空对比

让两个不同的时空联系到一起，形成时间地点上的反差对比。

⑴两个不同空间的对比

由同一个元素贯穿两个不同空间，提供画面的延续性，表现出打破/穿越空间的意境，非常具有冲击力。

⑵两个不同时段的对比：

同一人物不同时期通过倒影等巧妙的表现方式，与主体形成时间上的对比。具有延续时间长河的感觉，为观者提供非常大的想象空间，是一种很有创意性的的方法。

主要表现：空间穿越、时间变化的对比。

4、情绪对比

这种创意方式更多是传递人物的情绪，安静的状态
对比愤怒的状态，快乐的状态对比悲伤的状态，

也可以表现人物的两面性，正常状态和阴暗面等等:

会让观者感受到强烈的情绪传递，视觉表现上反而不会那么注重。

主要表现：重视情绪的传递

5、虚实对比

此虚实非彼虚实。
和我们常说的虚实对比不同，这里指的是虚幻和真实的对比，比如：

用线条或者影子打造一些和实体区别开的虚构元素，和实体的元素形成对比，会有一种很虚幻浪漫文艺的感觉，可以用于表现一些幻想，不切实际的爱恋类似的主题中，能达到很少见的一些视觉效果。情感和创意都能得到很充分的传递。

总结 

以上就是我今天想和大家分享的内容，依旧是一些视觉层面的知识点，希望对大家所有帮助和启发！

作者：慢热

转载请注明：学UI网》第一次写3000字的干货，献丑了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

共识目标大致分为两方面，拉齐理解和对齐标准。

拉齐理解，减小彼此间的认知差距。总体上，我们需要拉齐彼此对度量长短期价值和目标的理解；到各执行阶段，则需要拉齐对所需资源和预期输出的理解。

对齐标准，选择团队认同的维度指标与监测方式。个体对体验优劣的主观感受和不同岗位职责的关注视角不尽相同。总体上，我们需要以产品定位规划为指导，结合客观资源情况选择适合的衡量标准。

如上图举例，一个对内的商户操作系统与其他竞对在系统操作层面的比较意义不大，度量模型中用于和同类产品对标的功能完整性的参考价值降低，则可以考虑暂不纳入监测维度。

确定维度后的下探监测指标是共识最主要的内容。如上举例，当前业务首要关心产品SOP（Standard Operating Procedure 标准操作程序）“使用率”，而这项指标与已确认的参与度指标定义极为贴合，那我们就不妨直接将该项做为参与度内衡量指标优先接入。

二、共识内容

到了具体的共识内容，我们再按立项之前、项目执行，项目复盘的阶段顺序聊聊。

1、立项之前

01.确认要做体验度量吗？
体验度量模型从搭建、验证，到持续分析应用需要一个渐进的过程。充足的数据和稳定的调研机制是良好应用模型的基础。处于探索与深化初期的产品调整较为频繁，数据资源可能也有待完善。这一阶段体验度量理论方法或可以辅助完善线上埋点、建立定期走查、用户调研等机制，但对度量前期数据可用于分析的价值预期要适度降低。

02.首期度量的范围和预期？

首因效应的影响不容忽视。虽然第一印象并非总是正确的，但却是最鲜明、最牢固的，并且决定着以后双方交往的进程。

如上说到，度量需要一个渐进的过程。我们可以选择由局部扩充至整体，也可以由整体完善至局部。首期度量就面临着这样的选择，当然选择的范围也对应着不同的预期。

由局部扩充至整体，围绕业务当前需求，圈定最小度量范围。这样选择，一方面可以适度减低试跑数据的成本；另一方面，首期度量结果还不便向前比对应用分析，但这不妨碍调研监测到的信息为业务当前需求提供辅助价值。需要注意的是，虽然选择了由局部开始，但要始终遵循度量模型既定的统一框架，不能过分定制化。

由整体完善至局部，先监测宏观指标再逐步完善下探。这样选择，一般可以快速选定已处于长期监测的指标接入系统，但也因指标较为宏观，初期不免暂时无法解释数据现象，就需要多期的下探追踪来定位原因。

2、项目执行

01.指标统计

这部分是共识内容的主体，具体指标选取与统计方式我们在《体验度量经验分享：如何搭建体验指标模型?》中进行了梳理介绍。这里补充两个共识小方法，准备详细参考资料和选取整合已有资源。

对应每次共识的内容，参考资料可以有效提高沟通效率。“站在前人的肩膀上”在具体可感的案例指标基础上调整，远比凭空讨论有效。

选取整合已有资源，“避免重复造轮子”。举例满意度维度，如此前已建立了相似的NPS调研制度，那便不必费时费力重新发调研问卷或是开发线上场景化调研能力。接入现有调研数据，选择符合模型需要的数据接入或许更经济适用。然后，在此基础上再去优化指标细项与收集方式。

02.分析提炼

指标选取和统计仅仅是准备，怎么应用现有食材炒出好吃的“菜”，目前依旧需要人工分析提炼。

结合业务所需，明确重点分析方向，深挖原因是收获满意结果的基础。面对大量的数据呈现，虽不可预知提炼的结果，但唯有聚焦能减少迷失，尽量避免最终呈现结果过于泛泛。
分析结果往往包含需求洞察、痛点定位等多条信息，整体打包解决稍不实际。为跟进度量结果逐步落地，需明确优先级共识，推动度量不仅仅停留在“报告”的阶段。

3、项目复盘

01.如何评定度量的投入产出？

每期度量复盘，除共识达成情况和后期调整外，团队内对度量本身的投入产出评定常常有被忽略。

因度量周期较长，定位问题也较宽泛，即便已经定义了问题优先级，通常状况下也不便短期内解决，有些方向性的洞察也会分散应用到更多常规需求上，度量的价值也就没能被很好的跟踪记录下来。这一方面我们的经验也稍显欠缺，与需求绑定似乎还是不够明确的解决方案。拿出来和大家分享，期待收获更多的讨论。

三、共识方式

最后，简要聊聊共识的态度与形式。

中立的态度是沟通的基础。每个环节共识前，可以先单独收集团队成员的思路想法，引导大家放心分享自己的见解，提高收集效率，而不需当即讨论合适与否。

内部访谈，基于团队成员职责差异，制定访谈大纲与沟通顺序，为方便更高效的沟通与记录。内部沟通在达成指标统计共识的基础上，更可以帮我们对产品表象之下的业务逻辑有更加深入的理解。

稳定的节奏，明确每一阶段的待办与负责人，定期组会对齐进度，定期汇总小结，逐层汇报共识，得到更广泛团队成员的认可。

以上，便是对往期度量共识中非理论方法部分的梳理。如何沟通没有标准，共识程度也难以衡量。期待大家提出宝贵意见，共同讨论如何将度量的理论方法更好地应用于业务实践。

作者：李明玥、贺紫蒙

转载请注明：学UI网》体验度量经验分享：如何沟通共识?

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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