虽然三维图形带来的立体感很强，但用在可视化设计中，很容易出现问题。

一方面，三维图形具有X、Y和Z坐标，容易造成图表间的遮挡关系，遮挡会掩盖一部分的数据，让精准比较数据信息变得困难。

另外，透视使对象看起来像是位于三维空间中，但在数据可视化中，它会造成错误的层次结构：前景图形看起来很大，背景图形很小，数据关系被不必要地扭曲。

设计要点：

三维图形很有吸引力但可能会遮挡重要的数据信息，并扭曲数据间的比例关系；

如果没有绝对需要尽可能使用二维图形样式。

2.数据太多

在设计中，很多人总想在一张图表中尽可能多地展现内容，把各种数据信息聚合在一起。

这样的想法本身没什么错误，但重要的前提是要有清晰的认知，明确知道到底要展示哪些数据。

如果可视化中包含太多数据，信息的展现会变得不堪重负甚至难以理解，这样的话包含的数据再多也没有任何意义。

设计要点：

避免数据可视化的信息过载，如果一张图表中包含的信息过多，反而会让用户混乱；

3.省略基线

一组数据往往各不相同，数据差值的大小也不确定。为了使可视化效果看着更舒服，有的设计师通过改变坐标轴比例来展示数据关系。

最常见的例子就是让Y轴代表的数据不是从0开始，借此夸大数据之间的差异，让数据的变化更加明显。

设计要点：

图表的美感再怎么重要，也要服务于精准的数据表现；

4.选择错误的可视化方法

每个数据可视化方法都有自己的特点。例如饼图适合用来比较一个整体中的不同部分，但不适合用来比较几组不同的数据。

通过饼图的比例划分，虽然可以直观地显示三家企业的收益，但使用条形图会让这三家企业之间的差异更加明显。

如果目的是为了显示一段时间内的收入，那么折线图会是比条形图更好的选择。

设计要点：

5.混淆关联

数据可视化更高的价值在于探索和发现不同数据间的相关性，通过比较几组不同的数据关系，找出其中的关联性，从而得到一个更有根据的验证结果。

显示相关性最常用的方法是将几组不同的数据叠加在同一个图表上，但当叠加的数据数量过多时，图表会变得难以识别。

另外一旦强行关联几种相似的数据，有可能造成结果的混乱。一个有意思的例子是冰激凌销量的增加与暴力犯罪的激增有关，因为这两者都是因为气候变化造成的结果。

设计要点：

透过数据间的关联性发现事物本质是有意义的，但要考虑数据间的关联是否有依据、是否合理；

6.放大有利数据

数据的增长或下降和时间是不可分割的。放大时间范围是很多公司经营中投机取巧的方法。

比如只在图表上向用户展示业绩增长的4-6月份(上图)，这样看起来公司业绩增长幅度特别大，但如果将X轴的时间缩小到一整年(下图)，才会发现公司真实的经营状况，4-6月份的业绩增长仅仅代表了公司业绩持续下跌中的小幅上涨。

设计要点：

避免放大的可视化效果与数据整体不一致；

7.避开常见的视觉联想

视觉元素影响用户的心理，图标、色彩和字体都具有影响观者感知的作用。

下图的可视化描述了美国各个地区宗教信徒占所有居民的百分比，但使用的颜色与地图的设计元素(蓝色的水、绿色的植被和棕色的土地)太过相似。

▲ 分析数据可视化很耗费精力。在看到这样的图表时，我们第一时间联想到的应该是国家的地形情况，可能很难在这个熟悉的认知下去重新理解这个图表代表的其他含义。

设计要点：

8.过分纠结于数据可视化

数据可视化将难以表现的数字关系赋予了易于理解的形式。最理想的方式是可以通过可视化清晰、简洁地传达数据关系。

但是并不是所有的数据都需要使用可视化来表现，有时候一个简单的数据搭配一个流行的颜色就足以说明问题。

设计要点：

数据可视化是一种交流工具。像其他所有工具一样，有时它是合适的，有时可能另一种工具更适合。

为回馈一直以来关注和支持Clip设计夹的读者，将免费赠送3本《写给UI设计师看的数据可视化设计》书籍给大家，帮助大家更好地学习数据可视化设计。

参与方式：详见原文。

作者：Clippp

转载请注明：学UI网》数据可视化设计常出现的错误，你一定要避免！

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

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

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

转载请注明：学UI网》数据之美：地理空间数据可视化II

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

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

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

标准圆环图

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

布尔圆环图

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

比如想重点突出完成率，就使用绿色圆环来表示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咨询、用户体验公司、软件界面设计公司