缩略方式

末端截断

• 内容超过列宽时超出的用‘…’省略；
• 标签内文案超出由‘…’省略。
• 长文本截断的通用模式。

中间截断

• 设置开头、末端保留的字符数，在末端保留字符前显示 ‘…’；
• 开头保留字符数根据列宽以「显示尽量多的字符」的原则来确定（极端情况为开头不保留字符，即为「开头截断」；若空间十分有限，则尽量多地保留末端字符）。
• 中间截断在文本的开头相同、末尾字符对区别字段起到关键作用时使用。

场景举例 1：实例名

包括任务名、文件名、表名、系统名等等。

典型案例：完整字段如下：

company_sales_record_20150116

company_sales_record_20150117

缩略结果：

场景举例 2：系列名称

开头统一的系列长名称，通过后半部分来区分的字段。

典型案例：阿里集团的 BU 完整名称如下：

口碑-本地生活事业部-北方大区-北方运营

口碑-本地生活事业部-七星大区-东南运营

缩略结果：

设计要点

• 重要数字、时间不建议缩略。
• 名称列缩略可结合表头的拖拉控制显示与缩略，内容完全显示时‘…’消失。
• 单行文本省略使用 tooltip，多行文本省略使用展开与收起。

• 描述‘…’支持 hover，标签整个支持 hover。
• 标签数量多时建议通过折行全部展示，不建议通过‘…’隐藏后面的标签。

• tooltip 不承载复杂文本和操作。
• 根据使用场景为字段设置合理的字数上限和展示空间，避免隐藏过多的内容。
• tooltip 的尺寸不应过大，建议最大尺寸不超过长 320px、宽 160px。

转载请注明：学UI网》B 类产品设计细节：文本缩略

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

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

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

PART 1 业务诉求-焕新你的生活

用家电创造生活价值，把对的家电与消费者的核心需求联系在一起。针对于我们全新的品牌主张与不断年轻化的核心购买用户,在整个画面的视觉层面上表达出我们的设计语言：生活焕新，家庭，时尚有态度。

PART 2 项目目标

本次618项目在营销层面上，希望借助618购物狂欢这一节点，挖掘各圈层用户对家电618的期待，激活焕新需求，激发用户兴趣，刺激下单的目的。

在设计层面上，首先实现营销方向的焕新、高端及年轻化。在营销方面侧重多元化创新营销助力焕新生活和跨界营销合作线。其次在集团模板的基础上做贴合家电品类的差异化设计，第三通过场景化影响用户心智，做用户看得懂的设计。

PART 3 视觉概念

消费者人群-Z世代

Z世代的审美从小受到信息浪潮的洗礼，“颜值即正义”他们更加追求个人幸福感，拥有鲜明的个性，勇于表达自己的观点，从这些性格特征映射到消费特征，所以他们更加喜欢有文化、有故事、有性格的品牌，非常愿意为品牌买单、为兴趣买单，追求及时行乐；个性化、多元化成为他们的主要人设标签；

概念脑暴

为了进一步提升家电品牌焕新理念在Z世代中的好感度与传播度，根据不同的家电用户群体（中高端用户、家装用户、女性用户、男性用户、年轻粉丝用户），代入主人公居家场景切换视频的设计理念，通过分析群体共性 场景故事包装、动效印象加成让互动变的更有趣、更有温度。

PART 4 系列视觉展示

PART 5 设计过程

主会场

家电618主会场针对于我们Z世代的用户群体，创造了一个年轻化的人物形象，此形象也是搭在我们整体视觉创意的心智锚点；视觉创意设定了客厅，厨房，卫生间，三大日常展现家电商品家居场景，结合我们的人物形象，通过三段分镜动效的表现形式，希望能够给我们的用户带来沉浸式的环境共鸣，从而给用户带来全新的购物体验。

分会场——IP联盟

IP会场是通过小鸡彩虹为载体，号召百大家电萌物联合传播，在大促期间建立高颜值萌物的活动心智，视觉上打造萌趣味性风格。通过站内外联动传播，整体视觉风格统一。促成IP联盟活动的前期流量铺垫与品牌心智的认知。整体视觉创意采用了IP形象彩虹小鸡，整个视觉结合618视觉模板组成引导视觉中心点，萌趣小鸡的形象吸引视觉，以此激发（女性、颜值爱好者、Z时代）三类人群的关注，渗透萌物圈，表达出家电也可以很萌的态度。

分会场——星推官

以集团主风格为核心，保证整体品牌一致性，以明星作为流量会场，背景星星设计元素，渐变质感呈现，突出星推官主题。此次活动初期分析了去年1.0的不足，进行视觉上的优化，整体综艺视觉感更强，页面重点模块进行了交互上的创新，再用户学习零成本的情况下，体验感得到了提升。

分会场——极速焕新家

焕新家是家电第一次与综艺合作的项目，由京东家电独家冠名与东方卫视的强强合作，挖掘各圈层用户对家电618的期待，激活焕新你的生活需求。焕新家的活动视觉不同于618其他的会场，是剪辑整合了综艺的宣传片视频，与综艺节目高度契合，传递用户心智。

PART 6 项目总结

家电今年618整体的视觉设计相较之前，技术上应用了当前一些比较流行的软件工具与设计技法，从用户圈层维度划分，打造了5大全方位覆盖家电用户人群的会场。

从故事场景代入，再到情感化心智打造，设计表现力有过之而无不及，通过多场景，多维度，多样式的玩法，引发用户参与刺激抢购共鸣，最终达成618“焕新你的生活”的创意心智情感表达，后续我们会从大促的体系化建设与模块持续的AB测试入手，通过数据驱动设计，不断深挖家电用户对于我们整个618活动的价值体验。

原文地址：京东设计中心JDC（公众号）

作者：吴晓菊 等

转载请注明：学UI网》3C Design-618项目复盘总结家电篇

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

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

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

知乎消息页有什么问题吗？

首先，我自己并不是一个典型用户，虽然只有三万多关注，但也算是个 KOL 了。

所以我们还是先看看对于互动较少的普通用户来说，消息页长什么样。

普通用户

页面大部分地方是私信列表，然而很多普通用户唯一的私信也许就是系统消息了，所以这个列表意义并不大。

那四个图标——邀请回答、赞同和喜欢、关注、评论和转发，对普通用户来说，数据会有但不会太多。

原本就不多的数据，被分散到四个图标入口的四个页面里，每次查看起来估计挺麻烦的。

KOL 用户

上面是我自己知乎账号的消息页截图。

私信我用得不多，而且陌生人发的消息我也不一定有时间回复，所以我觉得这个功能真的没那么重要。

那四个图标——邀请回答、赞同和喜欢、关注、评论和转发，经常会显示一个特别大的数字，尤其 99+ 那种看上去没啥意义。

而且我很奇怪为啥赞同和喜欢、评论和转发要合并到一起，这让 99+ 这个数字看起来更没意义了。

我虽然很关心这些互动数据，但是每次得要一个个点开看，就觉得麻烦了。

问题总结

• 太过强调使用率较低的私信功能
• 将重要的数据放到二级页面展示，查看不便
• 普通用户：数据不多却要分别点开查看
• KOL 用户：显示一堆 99+，没有帮助

以上这些问题主要来自我的观察分析，顶多再问了问身边的朋友。

如果是工作中的真实项目，最好是搞些问卷和访谈才能更加细致准确一些。

私信和互动哪个更重要？

分析来分析去，我发现上面这个问题才是关键。

知乎目前的消息页是强调私信的，然而我个人认为互动更重要，所以这个方案是有问题的。

观察了一下其它 APP 的消息页，我发现有的是私信>互动，有的是私信=互动，有的是私信<互动。

我发现腾讯视频的结构不错，可以解决掉前面分析出来的知乎消息页面问题：

• 将互动和私信分成两个 tab
• 优先展示互动数据
• 将不同类型的互动数据合并展示，并可以通过 tab 快速切换查看

于是我决定主要以腾讯视频为参考，对知乎消息也进行优化。

优化方案

不论是普通用户还是 KOL 用户，都能一眼看到最新数据变化，评论还可以直接点赞回复。

KOL 用户想要单独查看某种类型的数据，也可以很方便地切换二级 tab。

私信虽然不是默认展示的，但有重要消息的时候，还是可以自动定位到那里，避免用户错过重要信息。

其实原版方案里，还有一些其它问题，例如：动态 tab 是否有必要、私信发送图标是否可以藏在消息私信 tab 里等…

不过由于文章篇幅有限，这些边边角角的问题都不在这里过多讨论了。

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》遇到知乎改版的笔试题，我是这么应对…

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

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

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

00.【前言】

现在我们在目标导向流程的第一个部分：研究。

我是从0开始、系统讲解用户体验设计方法的CC～

01.【为什么会得到错误的反馈】

用户做出错误反馈的原因：

大概会分为这几类情况。

从心理学角度举几个例子来分析一下：

举例一：

当别人穿着新买的衣服，兴高采烈的询问你，“你觉得我这身衣服好看吗？”

通常出于作为一个自认为情商还可以的社交人类而言，哪怕这件衣服在自己看来并不是很喜欢，我们依然会表达出赞赏。

不论是出于礼貌，还是为了促进关系良好的发展，我想很少有人会直接坦荡的说，你这件衣服真丑吧。

有些非常的善良的用户，在调研过程当中，也会出于考虑到我们产品开发者的面子而忽视自己真实的想法。

举例二：

我们在学生时代，老师提出一个问题，“大家都理解了吗？”有些人明明似懂非懂，但依然会逞强的说出“我理解了”这四个字，也是为了掩饰自己的想法，维护自己的面子工程。

用户也一样，他们有可能为了维护自己的形象或不好意思表达自己的想法，说出违心的结论。

举例三：

参加过教师资格证的小伙伴应该都知道，在教师面试的时候，有一个试讲的环节。需要当场对抽到的考题进行备课和试讲。

通常我们在家里准备考题的时候都可以非常流利的进行演练，但到了考试当天，进到考场当中我们又总会紧张到不知道该说什么。

【在陌生环境下，我们经常会觉得不知所措。】

同时面对陌生的人，很多人也很难真实的表达自己的想法。

我们的用户也一样。

02.【我们应该怎么做？】

我自己总结了三种应对问题的方法。

方法一：关系培养法

善良的用户是最好沟通的。

想象一下，对我们的真心朋友，在他真心想得到我们认真的反馈的时候，我们是否可以说出逆耳的忠言？

尝试把用户当作我们的朋友，以一个向好友真心询问意见的语气和用户交流，整个过程不用很正式，告诉他我们只是单纯的朋友间的闲聊和吐槽，真诚的去访谈。

善良的用户更能说出发自内心的想法。

方法二：路人观察法

对于不愿意谈论他们难以理解产品行为的用户，我们不必过分强调访谈的重要性。

通常急切的追问对这类用户而言，更容易产生逆反心理。

我们可以采用路人观察的方法，在公开场合不着痕迹的观察这类用户的具体行为。

有人会疑惑，这说的很轻松，怎么才能不着痕迹的观察呢？

提供一个小的思路，我们可以收集用户页面停留的时间，点击的次数，甚至眼动的频率，又或者观察用户的微表情，来分析用户对于当下产品的理解情况。

当然这是B端产品，如果是适合公共场合使用的产品，可以直接将自己作为一个周边的普通用户，轻松的观察身边其他用户的行为。

方法三：情景营造法

选择用户熟悉的场景，最好是每天办公的办公场所，让周围充斥着熟悉的日常用品，在自己把控范围内的环境来进行访谈，更能够让用户有把握感，主动的表达出想法。

就像我们在自己家里接待客人，远比去别人家做客感觉来的轻松。

如果用户工作场地有限制，必须选在陌生的环境，那我们也注意不要选择看起来就很严谨，很正式的实验室场所，容易增加用户的焦虑感。

小思考  提一个小思考：【你知道怎么样准确的定位自己的访谈目标吗？】下节我们聊这个。

原文地址：达芬奇的火柴盒（公众号）

作者：CC本人

转载请注明：学UI网》用户体验｜我研究的三招，应对用户的回避小心思

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

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

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

01.Go Full Page

设计师在网上冲浪时，看到一些排版精美、设计优秀的界面总想要保存下来，以便日后寻找灵感。

不知道大家都是怎样保存整个网页的。

我之前的笨办法是这样的：先是一屏一屏地截图，然后再拼接起来，特别是拼连接处时需要小心翼翼地对齐，简直是太麻烦了。

现在的高效方法就是使用Go Full Page，它是整个网页的截图工具，可以轻松松松地保存整个页面。

轻轻动一下手指

02.WhatFont

如果我们想查看网页中的字体，这就是神器WhatFont。仅仅通过鼠标停留在字体上就可以查看Web字体，简单又优雅。

03.ColorPick EyeDropper

我经常有一种苦恼，比如同样是蓝色，为什么别人家的颜色这么干净清透，令人愉快？这时候就不得不舔屏了……

ColorPick EyeDropper就是一款吸色工具，能够直接从网页中选取颜色值。

04.Window Resizer

当想对各屏幕的尺寸测试设计稿时，可以使用Window Resizer快速调节，了解设计稿在不同屏幕上的兼容性。

05.CSS Peeper

如果想更加全面的获得网站上的一些信息，比如图标、svg、图片、字体样式、元素间距等等，CSS Peeper便是一个完美工具。

可以查看字体样式，可以查看元素之间的间距

可以查看网页中使用的颜色

可以查看网页中出现的图片或图标

Chrome拓展程序的安装也是超简单，在拓展程序中搜索，然后点击应用就可以啦。

拓展程序地址：https://chrome.google.com/webstore/category/extensions

原文地址：栗子设计喵 （公众号）

作者：栗子

转载请注明：学UI网》设计师必备的Chrome插件，超好用！！！

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

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

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

目录

• 如何从生命周期进行用研重点拆解
• 如何在业务中挑选高杠杆监测点
• 常用用研目标和维度拆分
• 常见思维误区：一定要频繁做沉默/流失用户分析么

如何从生命周期进行用研重点拆解

企业增长周期和用户生命周期这两个周期理论市面上皆有一些增长理论的定义。

从一般企业增长周期来看，会经历以下5个阶段：

• 阶段①：问题/解决方案匹配期 → 主要是调研客户的需求；
• 阶段②：最小可行性产品时期（MVP） → 寻求若干种最小化产品的建立方法；
• 阶段③：产品和市场匹配期  → 提升用户的黏度和体验；
• 阶段④：渠道和产品匹配时期  → 对高优先级的渠道进行大规模的投入；
• 阶段⑤：成熟期  → 并购，国际化和本地化

运营常用的用户生命周期理论AARRR对用户在产品中各个层级的状态也有所定义：

Acquisition→Activation→Retention→Revenue→Referral

每个公司的拳头产品或产品矩阵中的各个子产品可能处在不同的生命周期，在做用研探索时需要具体分析。以酷家乐在近两年的情况为例，其主打产品早已走过0-1的阶段，但在大的框架下会不间断的迭代，如工具功能、生态服务功能。

在这种情况下，用研和业务密集合作的增长类用研项目主要集中在企业增长周期的“阶段③：产品和市场匹配期”之后的阶段，目的是提升用户的粘度和体验，随着产品的螺旋上升，也会对阶段①-③做阶段性小循环；反映在AARRR模型上则是以【用户留存+用户推荐】为重点。

如何在业务中挑选高杠杆监测点

那么问题来了，如何从不同的生命周期进行用研重点拆解？除市场上比较通用的生命周期拆解外，不少公司内部会有一套更加适配业务的体现生命周期的分层。

以酷家乐的业务为例，根据两种主流用户分层定义，即工具用户分层（工具行为是核心行为）和全站用户分层来拆解，我们圈定出了增长和体验中的重点观测用户阶段（橙色标注）：

1. 工具用户分层中，重点关注“沉默/流失用户”
2. 全站用户分层中，重点关注“由注册用户和体验用户组成的纯新用户”

这些会被重点关注的逻辑为：

1. 用户沉默或流失若是由产品客观原因造成，往往是遇到一些比较严重的问题，其有效反馈应该被当做高优先级去处理；
2. 新用户的认知是潜在用户阶段接收市场培育的重要反应，也是其进入并使用产品、接受培育、融合进产品的黄金时期；
3. 活跃/准深度/深度用户这些在目前的追踪体系中是被剔除的，暂时不关注在平台蜜月期的用户，但对全站用户的总体衡量还是有必要的。

常用用研目标和维度拆分

用户需求可以成为产品设计的导向、市场推广的方向，用户增长类型的需求转换成用研目标，一般是：

更具体一些，我们常用的问题维度：

常见思维误区：一定要频繁做沉默/流失用户分析么

这里有一个大家通常会陷入的思维误区：一定要从沉默/流失用户着手调研–他们后来为什么不太用我们的产品了。

通常，大家普遍认为只要可以分析出沉默/流失的原因，按照list上条目进行改进就能降低流失率。但可以换个思维，产品的价值更多的是由认可该产品的用户群体创造的，沉默/流失用户一定程度上属于对该类产品为非刚需状态/需求匹配失败而自然流失掉的人群（非目标用户）。

单纯从调研手段上来讲，沉默/流失用户的调研难度也是很大，定量方法在这里失去了作用，基本只能预先定义好调研圈选人群时“沉默/流失用户”的定义（这里要在平台定义的基础上进一步缩小范围），通过cold call的方式做调研，参与过此类项目执行的同学会发现几个点，尤其是对专业垂直产品（非C端产品）而言：

• ①原因中太多无效信息，如公司倒闭、转型，自己转行；
• ②获取的有效信息大概率和留存用户群体的调研较为一致。

总结一下，沉默/流失用户的调研可做，但在产品无重大变化的前提下，建议长周期循环，如1年做一次足够。服务好留存用户，了解产品何种原因打动用户、如何做会更好，从留存用户中探索各种场景比去硬啃沉默/流失用户更有意义。

当然，也会有一些例外的情况，如公司的一款子产品自推出以来，长期留存非常低，这种处于探索期的产品可能是由于与目标市场匹配不当或当前产品功能做的太差，这种情况会建议关注全生命周期的用户反馈，包括沉默、流失用户；若是因为与目标市场匹配不当，调整目标市场和人群为当务之急，若市场匹配程度尚可，但当前产品功能做的太差，则需重点关注产品概念与体验链路等问题。

原文链接：酷家乐用户体验设计（公众号）

作者：灵雨

转载请注明：学UI网》用户增长类的用研思路概述

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

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

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

1.选择正确的图表类型

选择错误的图表类型，或默认使用最常见的类型，可能会混淆用户对数据产生误解。

一组数据可以有多种表示方式，具体类型取决于用户希望看到的内容。

2.根据正负值确定方向

当数据中出现正负值时，要先确定基线的位置，再确定数据位置，将正值分布在基线上侧(X轴)或右侧(Y轴)，负值分布在下侧(X轴)或左侧(Y轴)。

避免在基线的同一侧同时添加正值和负值，造成用户对图表信息理解错误。

3.始终从零开始绘制条形图

单看左侧的条形图，能发现B的值比D的值要多3倍以上，但在右侧从零开始的条形图中，实际差异要小得多。从零开始可确保用户获得更准确的数据展示。

4.折线图使用自适应Y轴

对折线图来说，如果始终将Y轴的比例限制为从零开始，一旦数据波动幅度很小，那整个折线图会看起来很平坦，效果不明显。

5.使用折线图时考虑时间间隔

折线图是由一条条小线段连接组成，这些线段展示了在短时间内数据是如何变化的。当时间间隔很大或数据更新不频繁时，就要慎重考虑是否使用折线图。

例如想表示年收入，左侧的两个折线图样式都不太合适，每个月的收入是固定的数字，而折线图展现的数据更像是收入的变化，相反右侧的条形图更适合来展示每月具体的收入。

6.不要使用平滑的折线

平滑的折线图可能看着很舒服，但它们歪曲了背后的实际数据，而且过粗的线条掩盖了真正的节点。

7.谨慎使用双轴折线图

当两组数据出现X轴代表的信息相同但Y轴不同时，为节省空间我们可能会考虑用双轴图。

但大部分双轴图难以阅读，只是感觉图表上有很多数据，但远远没有单个图表展示的清晰。

8.限制饼图的切片数量

饼图是最受欢迎但经常被误用的图表之一。在使用饼图时，首先要注意切片的数量最好保持在5-7片。

如果还有很多占比很小的切片，可以将这些全部归到“其他”切片中。

9.直接在图表上标注

如果没有正确的标注，无论图表设计的多好看都没有意义。

直接在图表上标注数据或信息对使用者来说更直观，更节省时间和精力。

10.不要在切片上标注

将数值放在切片上虽然很直观，但可能会导致很多问题，例如左侧饼图数值的可读性问题、切片太薄无法添加数值等，对比来看，右侧饼图添加标注的方式更合适。

11.饼图切片的排序

饼图切片的排序是一个很容易忽略的问题，将饼图切片只是一个开始，通过合理的排序保证用户清晰观看图表才是关键。

常见的排序方法是将面积最大的切片放在12点钟位置，然后按顺时针降序放置第二大的切片，以此类推。

12.避免随机性

同样的建议适用于其他类型的图表。尽量不要默认按字母顺序排序，将最大值放在顶部(水平条形图)或左侧(对于垂直条形图)，以确保最重要的值占据最突出的空间，减少视线运动和阅读图表所需的时间。

13.避免极端的环形图

环形图,又称为甜甜圈图,是饼图的一种变体,本质是饼图将中间区域挖空，用在多样品间的多种数据的比较中。

虽然环形图腾出中间区域来显示额外的信息，但牺牲清晰度走极端会让图表变得毫无用处。

14.让数据自己说话

不必要的设计样式不仅会分散注意力，还可能导致用户对数据误解并产生错误印象，图表在设计上应避免：

3D元素、阴影、渐变；

斑马纹、过多的网格线；

15.选择与数据性质匹配的调色板

颜色是保持数据可视化有效的组成部分，在设计时考虑3种调色板类型：

分类色板(左)适合显示分类数据，当你想区别不连续且内在没有顺序关系的数据时可以使用这种类型；

连续色板(中)适用于需要按特定顺序放置的变量中，使用色调/亮度或两者组合创建色板。

离散色板(右)是两个连续色板的组合，中间有一个中心值(通常为零)。不同的调色板会传达正值和负值。

16.无障碍设计

根据眼科研究中心的数据，大约每12个人中就有1个色盲，图表只有在广泛受众可以访问的情况下才是成功的：

黑白打印可视化图表，检查对比度和可读性。

17.注重易读性

确保图表排版在传达信息并帮助用户专注于数据，而不是分散注意力：

选择字迹清晰的字体，避免使用衬线和装饰性很强的字体；

避免使用斜体、粗体和全部大写；

确保文本与背景形成高对比度；

18.使用水平条形图代替旋转标注

这个简单的技巧可以确保用户能够更有效地浏览图表，而不会使他们感到紧张。

19.建立图表库

如果你的任务是将交互式图表添加到Web和移动项目中，那么首要考虑问题是将使用什么样的图表？

基于定义的库(Highcharts)进行设计将确保易于实现，并为我们提供大量的交互想法。

20.超越静态报告

通过更改参数、可视化类型、时间线帮助用户进行探索，得出最大价值化的结论。例如IOS Health结合使用了各种数据表示来发挥优势。

最后

为大家收集整理了一波创意性的可视化图表，来激发创作灵感，创造更多的可能性～

下载方式

2）公众号后台回复“图表”自动获取下载链接