今天和大家聊一个很多朋友常年卡在 P5/P6 需要关心的命题——如何从业务出发打造具有商业价值还能兼顾用户体验的设计，此篇不谈理论，就通过 4 个经典的重量级产品案例就给大家安排明白啥是「一拳超人」式体验设计——就一个字「强」。
滴滴出行应该属于大家的高频使用 app，但是使用的功能一般还是集中在叫车流程，所以大家可能不太会关注到 CDX 设计团队一个非常核心的设计成果——xpanel。
简单来说 xpanel 就是一个附着于第一信息架构层级上，垂直 Y 轴且支持 X 轴拓展滑动的 Feed 卡片位。内容上分为「消息卡片」「主体卡片」「拓展卡片」三个维度，首屏保障除了「消息」与「主体」外三分之一「拓展卡片1」的露出。
但在简单的交互背后蕴藏的是基于业务的 UGD（用户增长设计）设计思考，这里引用 2018IXDC 会上滴滴主讲人的原话来说就是：
对特定场景垂直领域的深耕和挖掘，寻找「接触点」，帮助获取更多的功能、内容、服务、特性、品牌、运营甚至是喜好……进而实现业务的「有效增长」（转化、变现、留存）。
通俗一点解释就是 xpanel 利用主卡与拓展卡之间的信息架构关系，把拓展卡平衡的分为几类，比如「与产品功能相关的卡片」「与运营相关的卡片」等。
把本来被 LBS 地图一屏内抢占的空间通过简易的交互模式补偿回来了，这样既不打破用户的核心体验 focus 在地图与主卡上，同时又增强了运营、功能的玩法与拓展，可谓双赢。
根据这几年滴滴 xpanel 的线上应用，拓展卡片基本挖掘涵盖了以下场景的露出：优惠福利、出现卡券、会员体系、安全相关、出行提醒、拉新导流、运营活动等，未来可拓展的价值内容会更多。看着各路出行类 app 又纷纷长期沿用 xpanel 的设计，想必线上的数据反馈应该也是很正向的。
在上篇文章《多维度解析 | 抖音vs快手的产品设计策略差异》中的商业化模块里简要提及过抖音的 Topiew 超级广告位，这里单独拿出来和大家解析一下它究竟有多6。
从功能角度看，它是一个从开屏延续到端内视频信息流的广告位，占据了用户从进入抖音的第一视觉。
从交互角度看，topview 主要展现以开屏沉浸式视频 3s 播放→淡出互动转化组件 3s（完美融入原生视频信息流），剩余操作手势与功能等同原生视频信息流。
在这样一个有着 1 亿+第一曝光的产品位置，单纯只做常规静态开屏稳当入账不香吗？事实是抖音确实让它不香了，没有创新就没有新的收获。基于业务和当前产品形态下的交互模式使抖音有一个天时地利的优势——沉浸式体验，在这样的交互模式下给视频化的开屏提供了很好的承接入口。从开屏开启到融入信息流，在交互形态的切换中又为广告内容的播放时长赢得了更多时间。
更可怕的一点是 3s 播放后融入原生视频信息流中的 TopView 除了正常收割广告转化带来的单量，还可以通过右侧的主页链接轻松引流进行粉丝沉淀（今天就算你不买，先关注我，成为我的潜在用户，来日我再推一个新商品视频，你可以第一时间看见也许感兴趣就买单了）。
说完这些大家仔细回忆一下平常我们接触的有视频广告的视频平台，别说 60s、30s，15s 我们都嫌长，但为啥 TopView 显得相对没那么惹人烦呢（上次留的思考题）？个人认为除了抖音在选择合作品牌时会倾向符合平台气质的品牌合作（细数它合作过的品牌：Mac、宝马、林肯、vivo 等）保障广告质量和提供「跳过」外，直接融入信息淡出的互动组件会不仅会给用户新奇感，还会激发用户的互动欲望。
最后看一组数据（与宝马合作数据），曝光数：1.1 亿+；有效播放率：53.82%；点击率：13.26%。所以你猜一个最长可以展示 60s 的品牌视频内容、同时进行品牌粉丝沉淀、良好体验带来更高有效播放的亿级曝光广告位能值多少钱？
2016 年淘宝启动了一个项目要做一款内容化栏目——以视频为主，每晚更新一期，类比「一千零一夜」的故事。
那么在满满当当的淘宝运营区里该选择哪一个来试玩这个有趣的「新栏目」呢？是在头部的 10 宫格里再挤进去一个图标呢？还是在热门推荐里挤出一个 tab 呢？还是做一个悬浮的右下角的运营位？显然都不太合适。
根据这款产品每晚 6 点钟才可以使用，早上 7 点就会消失的游戏规则，最适配它的入口是一个不占界面原生空间，同时又有一定仪式感的位置。于是下拉 loading 的大空区成为了设计师们考虑的阵地。
△ 不知道这个banner为什么要排挤我
但地方选好了，又有了新顾虑。因为 iOS 的用户基本被系统洗脑了下拉手势，对于他们来说下拉=刷新，贸然在下拉刷新的手势基础上再叠加一个无关联的结果显然是有风险的。因此从交互上需要界定 2 个维度的指标来保障新栏目的体验。
反复试错 2 个指标数据的实际体验之后，新栏目有了安身之所，赐名「二楼」。进入「二楼」的整体交互和现在的短视频产品玩法基本雷同，全屏竖滑切换，小图标带货。下拉加载位的开发，从普通 loading 动效到运营位的植入基本被各类电商平台轻松复刻了，因此这一切看上去更没什么了得，但对于原创来说那毕竟是 4 年前。
谈到豆瓣我算是半个老用户了，豆瓣自身是个比较复杂的集合多条业务线分支（「小组」「同城」「阅读」「音影」……）的多生态产品，这里我们主要拿它 18 年 6.0 大改版中影音模块的详情页大改造来说事儿。
△ 可能有很多人已经忘记6.0前的豆瓣电影详情页长啥样了，带你回顾一下。
看完对比图，视力正常的朋友乍一看都能看出 6.0 版详情页整容得有多成功。但具体成功在哪里，可能不仅仅是好看这么简单。
大背景从海报上智能取色虽然不算是什么稀奇的做法，但是加了适度的渐变应用在这里也可以说是非常的恰到好处了。另外深底色和视觉比重加大的外链区都突显了「第三方播放」与「购票选座」的视觉感知。让用户沉浸在电影详情中并引导他们走向「豆瓣的主要收入来源之一——电影票分销与第三方视频播放产品引流」正好是 6.0 豆瓣改版一个「小小的目标」——更务实（商业化）。
从交互层面看，且不说评论头部吸底这个事情是不是也是因为 6.0 商业化的影响（评论区增加「话题」进行重点运营），这个交互本身我觉得还是很强大的。强大的体现在于良好的空间收纳能力与信息拓展能力。我给它起了个好听的名字叫-叠加上滑板（不好听也认了吧，毕竟也没有内部人员告诉我他们是不是起名字了）
这里可能又会有很多人质疑它与用户已洗脑的上滑手势之间的冲突，这点解释起来和上文淘宝「二楼」有些类似，区别是豆瓣并没有做上滑速度 or 距离的临界值，只是把滑动区域做了隔离。而对比它的效仿者 boss 直聘，人家倒是在交互上做了进一步优化，适配自己的产品情况做了上滑叠层卡隐藏和上滑距离临界值。
这个故事告诉我们，要抄也要抄得比人家的交互更优秀才不丢人昂。
文章来源：优设 作者：Nana的设计锦囊
最近身边的一些小伙伴，总会遇见B端设计工作，对于这种偏后台设计的B端设计，总会有大量的表单设计需要做，结合以前自己也有过不少表单设计的工作，在这里给大家分享一下自己对于PC端表单设计的研究，聊一聊表单在PC端中的运用。
商业离不开数据，而数据总会依赖不同的表现形式，不管是word文档，还是数据可视化，都是浏览者通过表现形式来对数据进行阅读和分析，因此表单的设计就是一种表现形式，我们将捋一捋如何通过表单更好的让用户阅读顺畅、操作方便、总而言之就是更好用啦。
无线分割：顾名思义，列表的信息之间正常情况下没有分割线等方法来分隔，仅仅是用间距来分隔开内容。好处是元素更少，画面更简洁，但是视觉可能就没那么清晰了，使用的出场率一般。
有线分割：同样字面意思，就是通过简单的分割线来分割列表中的信息，让视线左右移动的时候更加稳定、轻松，在表单设计中使用的出场率非常高。
斑马线：通过深浅交替的色块，以及色块产生的对比来分隔列表中的信息，深浅深浅的循环就好像斑马线，使用时是通过色块产生对比，所以也可以使用带有适量饱和度的色块来区分，占页面面积比例较大，适当用色可以使得画面更加活泼、丰满，斑马线也是出场率极高的一种展现形式。
斑马线+分割线：很容易理解，就是斑马线风格+分割线的结合，用色块区分的同时又加了分割线，信息之间的区分对比更加强烈，但是画面层级就多了一些，没有其他的看起来简洁，使用出场率也一般。
卡片式：跟卡片式风格其他设计一样，分别用悬浮的色块来区分，间隔的地方是背景色，分隔的力度比较强，内容区分的很清晰，弊端是更加占画面的位置，尤其在信息很多列的时候，会增加大量的高度，用户需要更多时间进行下翻的操作。使用出场率相对其他形式来说稍低。
场景：用户需要阅读大量的表单数据，且需要频繁的翻页、跳转。
如图，左下角可以设置界面中每页显示信息数量的多少，用户可以根据自己的需要自由设置，当浏览的数据较多的时候，不再需要频繁点击下一页来浏览信息，只需把每页显示的数量调高，如此便减少了大量的操作次数。
像这样允许用户可以自由编辑来改进体验的方式还有很多，比如可以设置显示密度，就是以一样的方式自由调整信息与分割线的间距。除了行间距，有的可以自由设置每一列的列间距，用户可以根据自己的习惯来设置。
场景：用户需要浏览大量的数据，并需要对数据反复进行计算、分析。
在使用大量的文字列表展示数据的同时，使用数据可视化加以配合，用户可以更好的预览到数据的大致情况，又可以在列表表单中阅读到详细的数据。
场景：用户想根据某种条件的大小排序，来先后阅读数据。
通过点击第一排小标题行，可以选择不同的方式调整信息的排序方式，就和电商商品排序一样，可以选择金额高到低或者低到高排序，也可以选择别的方式进行排序，从而更快找到自己所需要的内容。
场景：从一大堆混杂的数据当中，寻找符合条件的自己所需要的数据。
添加筛选功能，过滤掉自己不想浏览的内容，通过条件筛选，更快的更的找到自己想要的内容、缩小查找范围、减少达到目的所花的时间。一般通过下拉按钮的形式选择不同的条件来进行筛选过滤。
场景：已知列表中某信息的名称关键字，想从大量混杂的列表中快速找到。
跟筛选过滤一样，添加关键字搜索功能，用户提供部分关键字，可通过关键字查询，最快最的找到想要的那一条内容。一般该目标内容是用户已知的，有时候是针对性的。
场景：精简设计风格的界面，不想界面中内容过于繁多。
如图，鼠标悬停在哪一行，哪一行才会显示该列表后面的操作按钮，好处是减少了视觉干扰，能更快的找到捕捉到操作位置，弊端是用户不进行交互的时候无法发现操作按钮如何出现。
场景：想快速获取列表中某信息的其他附属内容。
如图，点击某一行后，展现该行的一些附属信息。可以不用跳转页面而进一步了解该行信息的详情。
场景：在浏览列表的同时，需要频繁的对列表中的信息进行编辑。
用户可以直接对列表信息进行修改、编辑，省去了跳转再编辑的麻烦步骤，更节约时间，用户操作起来更加方便。
场景：需要充分了解列表中不同信息的详细说明，频繁跳转又过于麻烦。
和可展开列表的作用类似，但是可展开列表显示的内容有限，快速预览的功能可以用侧弹框的方式、弹出对话窗口的方式、以及其他方式对选中的内容直接展示详细信息。用户不需要跳转至详情页就可以了解到大量信息，省去繁琐的交互流程。不再需要频繁的跳转到详情-返回-跳转到另一个详情-返回-跳转-返回。使用快速预览的功能就可以很好的解决这一问题。
（PS：弹出对话窗口的方式，可以同时弹出好几项列表的详情信息进行对比，但是侧弹框因为高度优势，可以展现更多内容）
场景：列表中每条内容显示信息参数过多，且很多不想浏览。
自定义列表功能是用户可以自由设置每行信息参数的内容，比如我不想列表中显示金额这一项，就可以删除，想要的时候可以添加回来，这样用户可以保留自己想要的那几项内容，可以更快更方便的阅读到自己关心的那几项参数，节省了用户的有效时间。
场景：列表横向或者纵向过多，下翻或横拉的时候标题头被隐藏，不知道自己当前浏览到的参数属于哪一项。
交互过程中，可以把第一排重要的东西固定，列表内容翻动的同时，第一排仍然在原位不移动而且覆盖列表中的其他信息，很多自带的框架都是这样的形式，使用的出场率也是非常高，这样用户可以随时查看到自己看到的内容是属于哪一项属性，或者是属于哪一条信息，可以是横向固定，也可以固定竖直的第一排标题，也可以固定最后一块操作点击区域，具体如何固定、是否固定，根据整体的需求来选择。
通常表单都是大量的文字，大多数的文字高度都在该行高度的三分之一左右。过于紧密用户浏览不顺畅，过于分开显得画面过于松散，不同的分割方式，间距也会有所不同。
其实上面的每一条都是一个小总结，每一条在大部分的列表中都可以用到，主要还是根据实际需求来运用这几点，比如分割的方式根据主体风格来搭配，不要为了设计而设计盲目运用，毕竟设计都是以内容为主，尤其是表单设计，本身就是更好的表达内容。
本文发布于人人都是产品经理。
有句话叫：「设计无小事」，很多看似不起眼的东西却起着至关重要的作用，比如这期要说的线条，很多人对于线条的理解有局限性，比如：线条的形态可以是曲线、直线、折线、粗线、细线、实线、虚线等等。其实已经牵扯到了点、线、面的知识，这也是很多科班生在学校必学的知识点，但是这期所说的线与点线面中的线还是有所不同的，点线面中的线可以是线条、可以是文字或者是看不到的视线，而是今天着重说的是设计中很直观的线条。下面我们还是通过实际的案例逐一分析：
设计类的知识很多都和日常生活息息相关，尝试着把设计类的知识点与日常生活想结合，对于记忆和理解来说会更加得心应手，例如：
图中的闪电可以视作为设计中的线条，给人的视觉感受是通过闪电把天与地连接为一个整体，而闪电在图中的作用就是串联整体，那么回到这里的正题：线条有引导视觉的作用该怎么理解呢？再举一个现实生活中的案例：
我们选择从北京到拉萨开车去，出发之前可能需要在地图上看下路线，知道途径哪些省市，规划好行程路线，这里绿色的虚线就起到了引导视觉的作用。回归设计中道理是一样的，线条可以引导用户把原本杂乱无章的视觉点规整为有次序的视觉元素，例如：
当看到左侧这张海报时我们视觉次序会出现很多变化，比如：1>A>3>B>4>C>2 或者 A>2>C>4>B>3>1 等等 N 多种顺序，这时给人的感觉就是杂乱无章的，毫无视觉次序而言；而看右侧的海报给人的感觉却是条例清晰的，相比而言只是多了两条线，但是却在整个海报中起到了引导视觉的作用，它可以给与用户阅读海报时视觉辅助的作用，让用户以右>左>右的视觉次序欣赏、阅读，看似很不起眼，其作用却至关重要。
前面也说了，线的形态可以有很多种，例如：
这里是以真实的可口可乐吸管作为设计中的线条，同样起到了视觉引导的作用，但是我们不难发现，这里的线条不仅仅只有一个作用，也牵扯到另一个作用：线条有串联整体的作用。
在排版时我们有分组原则，即把互想关联的元素彼此靠近，无关联的相互疏远。在页面中我们会把同一色块上的元素视作为一个整体；下面我们说下线条所带来的串联整体的作用是如何体现的，比如：
△ 图一
△ 图二
图一因为大面积的留白能使得用户很容易分辨出自行车与文案是一个整体，但是相较于图二而言，其整体性略显不足，而且给人的感觉太过单薄、重心不稳；图二的整体性更强，这里的矩形线条就起到了串联主题的作用，类似的还有：
不难看出，这些案例中的线条都有串联主题的作用，线条使得主题元素整体感更强、画面板式更加严谨；对于整体的视觉传达也起到了串联、引导的作用；在文字排版中，也有类似的线条，比如：
同样是通过线条把文案更加整体化，也起到了串联的作用。
突出主题的方式有很多种，像我们之前所说到的留白、对比。接下来继续说下另一个可以突出主题的方式—线条，下面看个案例：
通过对比观察我们发现，右侧海报整体感更强，主题文案信息更加清晰，主体更明确。其中的原理可以理解为：因为线条的存在，使得主题信息有了一定的范围，在视觉上等于是在海报中划定了视觉焦点，从而起到了突出主题的作用。当然还有其他的表现形式，比如：
很好的诠释了线条的作用——突出标题序号。在进行创作时，作品的每个元素都要做到有理有据，否则只是一味的抄袭，到再创作时脑袋里还是一片空白，只有明白了其中的设计原理，才能做到活学活用。再看几个案例：
突出主题也许一个线条就可以表现的淋漓尽致，因设计目的的不同，线条所发挥的作用也不尽相同。下面继续分析：
前面说了线条有串联整体的作用，而这里又说可以分割整体，是否存在矛盾呢？下面举个简单的例子：
在小文案的区域中间我加了两个线条，看似很小的改变，其目的是把文案很准确、严谨地分割为三个小整体，希望能给用户带来识别性更强的阅读性，再举个例子：
这里的线条把月份和日期分割、英文和中文分割开，使得用户对于信息的捕捉能力以及可辨识性都提升了很多，而线条的作用就起到了分割的作用。
线条也能起到修饰、衬托的作用，很多小伙伴会忽视这一点，其实线条也可以成为海报中衬托画面、修饰主题的元素，例如：
海报中的线条起到了衬托、修饰主题的作用，假如把这些线条都删除，画面整体会显得相对单薄。
更多设计中线条的应用：
线条的作用我们分为四个逐一分析，其实它们之间也存在着相辅相成的作用，不能以一概全，线条所起到的作用可以是一种，也可以是多种，比如：我们前面「可口可乐」的案例，即有串联整体的作用，又有引导视觉的作用。只要我们在使用的时候能明确目的，而不是机械式的抄袭，那么最终一定会得心应手。
文章来源：优设 作者：美工美邦
42个设计思维中的一个知识点~
设计思维 - 激活空间
1.激活空间 - 概念
激活空间的意义在于元素与空间的搭配，能让页面产生灵动性和活力；另外激活空间还有一个影响比较难理解； 当主元素占用版面的主导位置，其他空间过大就会造成观众视线的停顿与停滞； 这样就会导致主体与次客体不会产生一定的关联性； 这时就需要“激活空间”来使两个元素有一定的联结；
2.空间的概念
在我们理解“激活空间”的概念之前，先来理解一下“空间”的概念。因为平面是一个二维的空间，是二维零曲率广延的一种面，因此我们在定义空间时不需要考虑三维的“第个三维度（一个方向的向量）”带来的影响，我们只要定义空间中的最小单位与空间的相对关系，和定义空间的边际就可以了。如下图所示，平面二维空间中x轴与y轴无限大，那空间也会随之变大。而三维空间中z轴的不断扩大，空间就会随之变大。
只有在有边际的空间中置入一个要素，即使这个要素是最小要素，空间也能被界定。例如一个正方块（一个要素），被放置到一个参照的方框中，这时小的空间就会被界定。如下图所示，二维平面和三维中坐标轴的范围就是界定后的空间，而坐标轴中具体的一个单位就相当于平面中的单一要素。当把要素放入一个有边际的空间中，这个空间就会被界定。
到这里我们只需要了解当我们定义空间中最小的单位，空间也就被界定下来了，理解这个概念就行了。这里的空间中最小的单位指的就是“元素”，而元素被设置好后空间就被界定了下来，这里元素的位置影响着空间，元素激活了部分空间，即激活空间。这了不理解也没有关系，我用简单的图来进行绘制，大家就能理解激活空间的概念了。
3.激活空间 - 理解部分
当我们在一个空间中置入一个元素（一个圆），这时我们就会发现这个元素占了一整个空间。这里如果不好理解就用生活中的例子举例，例如大家都站在自己家的卧室里，并且站在中心点也就是正中间，那这时候给人的感觉就是你占用的一整个卧室的感觉，也就是说整个卧室的空间就被你（视觉元素等于一个圆）所占据了。
接下来大家仔细看啊，如果当我移动一个元素（一个圆）的位置，大家感觉一下平面会有什么样的变化。是不是感觉上面有元素，但下面的空间有些空啊。这是因为只元素只激活了上面的空间，而下面就成了空白的空间。
接下来我再把平面中的这个元素，向左移动一些位置，大家注意看会有什么样的变化。是不是会发现，左面这一小块的空间被激活了，而右面和下面的一大块是空白的空间。
这时当我再分裂出一个相同的元素，并把这个元素向右移动，这时我们观察后会发现，上面一整块的空间都被激活了，而下面的一整块还是空白空间。并且两个元素之间产生了一定的关联性，它们看上去更像一个整体了。
接下来我再分裂出一个元素，并且把它的位置移动到最下方，这时我们观察就会发现下面的空间被这个元素激活了，但是中级的部分还是处于空白的，也就是空白空间。如下图这个状态呢，我其实可以延伸出另一个设计思维，那就是“把留白当做一种视觉元素”，但今天就不讲这么多了。这时我们再观察，三个元素所占的位置，是不是刚好能填满一个版面啊，那也就是说他们三个整合到一起，又占据了整个平面。
4.激活空间 - 实际案例1
如果讲到这理论讲的就差不多了，像细节部分大家通过类似的想法脑补一下就行了，接下来我们讲一下激活空间的设计思维如何应用到我们的实际设计当中。我们先来看一个设计作品，如下图所示，大家通过自己的思考，想一下这个作品哪里有问题？
这个作品的问题在于，蓝色标出的部分的视觉重量明显要比红色部分大，而且红色部分之间空白空间占的面积太大了，这样两个红色元素之间就缺少了一定的关联性，整体也会显得十分不协调，那要如何解决这个问题呢？
当我们把红色区域之间的空白空间，用其他元素把它激活，把这里的空间激活，那上下之间就能产生一定的关联。并且用一个有颜色的元素，这里的左右的视觉重量也达到了一定的平衡。
5.激活空间 - 实际案例2
再讲一个案例，咱们看一下第二个案例，我们直接看作品看看它都有啥问题？直接这么一瞅是不是标题的位置不太合适，似乎位置太高了，而下面的冰山看上去很不舒服，不知道哪里有问题，有没有这种感觉？
这个作品的问题在于冰山这块的视觉重量偏左，而且冰山的物理重量并不重，再加上企鹅在上面就会造成物理重量上的不平衡，从自然角度来看也不是很和谐；另外标题与冰山之间的留白太大了，这样就造成了视觉停滞，没有元素可看了，也没有办法引导视线了，也会造成观众对作品整体的影响与理解上的差异。
我们要怎么解决这个问题呢，冰山的物理重量不平衡，我们给右侧画一个企鹅，让它把右面的区域的空间激活，那整体的物理重量相对就平衡了；另外标题与下面元素的距离，可以通过设置新元素-太阳的方式，来使上下之间具有关联性。
6.激活空间 - 实际案例3
再讲一个案例，咱们看一下第三个案例。我们直接看作品看看它都有啥问题？看这个作品总感觉太碎片化了，整体性差没有统一感，而且也不规整并很混沌，元素之间的关联性也不强，有没有这种感觉？
这个作品最主要的原因就是留白产生的负形会对作品产生缺乏整体性的影响。因为这些空间看上去是开放的，没有约束的，零散的且没有统一感的，这时我们需要通过增加元素，利用激活空间的方法来布置它们，这样这些元素就具有了统一性，整体性也就会更强。
这样的整体感就强了一些有没有~
转自：站酷-罗耀_UI
这篇文章来自于 Invision 出品的书籍，围绕规划、设计、构建和实现设计系统的实践经历来指导读者，其中包含了经验丰富专家的真知灼见和一手经验。我很喜欢，也分享给大家，推荐阅读。这是一个系列，一共有 7 章，感兴趣的话，持续关注吧。
20 世纪 60 年代，计算机硬件技术的升级开始超越软件发展的速度。计算机的处理速度变得越来越快，价格也越来越便宜，但计算机软件开发仍然处于缓慢、难以维护的境地，并且还很容易出错。两者之间的差距以及解决这个问题的困境被称之为「软件危机」。
在 1968 年的北约软件工程会议上，道格拉斯·麦克罗伊（Douglas McIlroy）提出了基于组件开发有可能是解决「软件危机」的方法之一。基于组件开发是一种通过复用代码来提高编程潜力的方法，该方法能帮助编程工作更、更易于扩展。这样做既能减少编程工作量又能提升软件开发的速度，让软件更好地运用现代计算机的力量。
在 50 年后的今天，我们又面临着类似的挑战，只不过这一次是在设计领域。在 UI 设计中，设计的角色是在为特定需求量身定做解决方案，所以很难去基于整个应用进行扩展。
你有没有走查过你输出的界面，发现自己使用了几十种类似的蓝色，或者同一个按钮不同的用法，将这些样式组合对应到你设计的每一个 UI 界面，就会意识到一套不成体系的设计是多么的难以维护。
△ 一份 UI 样式走查收集的成果，里面罗列的十几种类似的按钮样式说明之前团队挖的坑有多深。
在这种状态下，设计要跟上开发的速度，公司可以选择做以下三件事：
通过复用设计，设计系统能够帮助团队更好、更快地构建产品——复用性使规范成为可能。这是设计系统的核心和价值。一个设计系统是一个可复用组件的合集，由清晰的规范作为指导，组合在一起构建成各种的应用程序。
50 多年来，工程师们一直在遵循着这个理念执行工作。现在是时候让设计充分发挥其潜力加入他们了。
你可能已经清楚地意识到，设计系统已经成为当今软件行业的一个热门话题，并且理由也很充分。很多企业投资设计系统，因为他们认识到产品体验能够带来竞争优势，不仅能吸引和留住客户，更降低产品学习成本。
在重视设计系统的公司内部，通常能看见这种情况：
如果你是设计师，那么前面所说对设计的投资听起来可能会令你很兴奋，但其实也带来很多挑战。当一个应用由不同的团队负责迭代各自模块的时候，你将如何跨平台设计一致的 UI？又如何使所有团队能够进行快速迭代？当团队的设计师设计出新的独立样式时，你又将如何处理这种不可避免的设计需求？
要了解如何应对上述的挑战，我们要先了解什么是设计系统。设计系统将个体和整体两个概念各自的优点结合在一起。
1. 标准
拥有 MAC 用户界面的技术知识是产品设计的关键因素，但了解用户界面背后的理论，才能够帮助你创造出色的产品。——苹果人机交互指南
为了设计卓越的用户体验，不仅要了解设计系统背后的内容，还要了解其设计的原因。我们一般会通过建立和遵守标准来达成共识，这样做能消除主观性和歧义性，保证产品团队内部不会出现摩擦和混乱。
这套标准的内容涵盖了设计和开发。例如对命名约定、无障碍标准和文件结构等等，帮助团队达成共识，减少出错。
视觉语言是设计标准的核心部分。定义颜色、形状、类型、图标、布局和动效的样式和用法对于创建品牌一致的用户体验至关重要。系统中的每个组件都包含这些元素，它们在表达品牌特性中扮演着不可或缺的角色。
没有标准，决策时就会无据可依。这不仅不能扩展设计，还会造成复杂、差劲的用户体验。
超越平台
视觉语言可以不局限于单一平台，可以在 Web，iOS，Android 和其他平台上延续。将规范文档展示在设计系统网站的醒目位置，能够帮助系统开发者了解组件的样式和交互模式。例如，Google 的 Material Design 就深入到其产品视觉语言的各个层面。
2. 组件
组件是系统中复用代码的一部分，它们充当应用程序界面的基础。组件的复杂性各不相同。将组件简化为单个功能（如按钮或下拉菜单）可以增加其灵活性，使其更易于复用。复杂的组件，如特定类型数据的图表，可以很好地满足其应用场景，但是这种复杂性限制它的使用场景数量。组件的复用性越高，需要维护的次数就越少，规模也就越简单。
基于组件的开发通过复用代码来减少技术开销。建立标准规范了这些组件的用途、样式和用法。两者结合在一起，就相当于为你的产品团队配备了一个清晰的系统，让他们了解到为什么和怎么做。
让我们详细看看设计系统如何帮助你解决一直以来的痛苦。
1. 扩展式设计
随着团队的成长，设计师通常会将注意力集中在应用程序的独立功能区域，如搜索和发现、帐户管理等。这就会导致设计碎片化，就像是一座设计的巴别塔，每个设计师都将他们的设计语言往上添。当设计师单独而不是系统地去解决问题时，就会发生这种情况。
没有通用设计语言统一产品和设计，用户体验就会开始崩溃。当缺乏设计规范时，设计讨论就变得毫无用处。为了使团队内部保持一致，必须要有一个共享的来源——可供参考的官方样式库。
大多数情况下的样式库都是静态的内容，例如设计模版。但是静态的参考几乎立刻就会过时。这就是为什么有的团队会建造像 Shopify’s Polaris 站点这样的网站——一个设计系统站点，用该设计系统构建而成，记录系统的所有方面，包括组件、指南和交互最佳使用场景。因为它是与系统一起构建的，所以它能够保持其永远是的。
对于产品团队而言，内部设计系统站点是最佳、最易访问的共享来源。它提供了一个引力，使团队成员保持一致和同步。
2. 管理你的债务
随着应用程序和团队的时间积累，会慢慢形成债务。这种债务不是金融债务，而是技术和设计债务。这些债务是因为解决独立问题获得的。设计债务由大量不可复用和不一致的样式和惯例组成，而维护它们是不可能完成的任务。随着时间的推移，这些债务的累积会成为减缓增长的巨大负担。
创造行为本身并不会产生债务——就像花钱本身并不会产生金融债务一样。但使用设计系统将使你的设计和代码保持足够简洁，同时仍然允许你进行升级和迭代。
3. 一致的设计
一致且重复使用的标准化组件，使你应用程序的易用性大大提升。标准化的组件还能让设计师花更少的时间关注样式，花更多的时间专注于提升用户体验。
4. 更快的原型
在设计系统下工作，你可以像玩乐高一样快速拼凑流程和交互，构建无数的原型和方案进行快速验证，从而帮助团队快速获得数据和结论。
5. 提高可用性
页面样式的不一致会影响产品的可用性，当 CSS 因为数不清的不一致样式元素和交互增加时，页面加载时间也会加长，这会导致很糟糕的用户体验。它还可能产生冲突的 CSS 和 JavaScript，从而可能破坏你的应用程序。通过使用设计程序，通过构建一个整体的组件库（而不是每页）来避免这些冲突，从而花费更少的时间来保证产品质量。
6. 建立可访问性程序
可访问性在组件级别就可以实现，针对残疾人士、网速较慢和老旧的计算机上进行优化。这是一个建立易用性程序很好的方法， 在第 3 章「构建设计系统」中，Katie Sylor-Miller 解释了设计系统如何帮助你改善产品的可用性，并保证遵守你所在国家/地区的法律。
（译者注：美国残疾人法案于 1990 年 7 月通过并签署，其中有规定网站的可用性必须遵守《美国残疾人法》（ADA）的相关内容。）
即使有上述说的这些好处，在团队内部推行一个设计系统的时候，仍然很难说服团队成员。设计师可能会感到局限或束缚，但通常这些被感知到的弱点正是设计系统的最大优势。
让我们来揭穿那些你在推行设计系统时经常会遇到的误区吧。
误区1：过于局限
误区：负责深入独立业务的设计师看到的设计标准可能会与其他需求的不一样，因此，他们会认为通用的设计系统过于局限，可能无法满足某些特定业务的需求。
现实：设计师通常会设计出自定义的解决方案以满足应用中的独立的业务，从而增加了设计和技术的负担。而使用设计系统，这些被设计的新解决方案可以被反馈到设计系统里面，使每个人都可以使用这些改进方案。
误区2：缺乏创造力
误区：如果设计师被限制在一个设计系统下做设计，那么他将不能去自由地探索设计风格。前端的工作通常包含着各种样式风格的更新。对应用程序的风格进行改版通常不是一个小任务。这也可能是一个很大的风险，因为从事这项工作会移除一部分的旧资源，可能会对可用性产生负面影响。
现实：设计系统的组成部分是相互关联的，这意味着当一个位置进行更改时，这项更改会在整个系统中同步，这使得系统内的样式更新工作变得轻而易举，但影响却大得多。以前是几周甚至几月的工作量，现在可以在一个下午就能完成。
误区3：一劳永逸
误区：设计和构建完设计系统后，工作就完成了。
现实：设计系统是有生命的，这意味着需要不断对其进行维护和改进。但是由于应用是由设计系统的复用性组件提供支持的，因此该应用会自动同步设计系统的改进内容，从而减少维护应用程序的工作量。这就是设计系统提供的扩展能力。
设计系统不是一时流行的方法，也不是未经检验的假设。为了让设计找到与技术的快速发展相匹配的同等方案，基于组件的设计和开发是一种行之有效的可靠解决方案。
现在你已经了解了创建设计系统的真正价值，让我们在下一章中深入探讨实际的设计过程吧。
文章来源：优设 作者：彩云译设计
奔驰法（SCAMPER）是能够帮助我们拓宽解决问题的思路检查列表。在解决问题的过程中，如果感到束手无策，可以尝试从列表中显示的方向重新思考问题，从而打开解决问题的思路。你将通过本文熟练掌握其运用方法。
SCAMPER 是七个英文短语的缩写，同时也代表着七个解决问题的方向，这七个方向是：
SCAMPER 法的具体实践步骤：
麦当劳家喻户晓的知名度得益于极具传奇色彩的麦当劳创始人雷·克罗克先进的经营理念。毕竟麦当劳的出现让人们的生活模式发生了翻天覆地的变化。时至今日，我们仍然可以从麦当劳的商业战略中识别出 SCAMPER 法的踪迹：
替代
这里需要考虑的总体问题是：何物可被「取代」？
寻找当前选项的替代选项。这些替代选项可以是人，物或方案等一切等同于现有选项的东西。例如产品的替代材料，服务的替代方案以及后备人员等。
思考清单：
整合
这里需要考虑的总体问题是：可与何物合并而成为一体？
将现有产品和别的产品或系统结合在一起使用，或者能否与其它产品合并而成为一个整体？
思考清单：
调整
这里需要考虑的总体问题是：原物是否有需要调整的地方？找出所有可以调整的选项。
思考清单：
修改
这里需要考虑的总体问题是：可否改变原物的某些特质，如意义、颜色、声音、形式等？修改现有的所有或部分选项，重新组合出新产品。
思考清单：
另用
这里需要考虑的总体问题是：可有其它非传统的用途？不断寻找现有产品的新用途，将现有产品推广到新地方。
思考清单：
消除
这里需要考虑的总体问题是：可否将原物变小？浓缩？或省略某些部分？使其变得更完备、更精致？消除不必要的选项，减少不需要的功能。
思考清单：
逆反
这里需要考虑的总体问题是：可否重组或重新安排原物的排序？或把相对的位置对调？重组或重新安排选项的顺序，或把选项的位置对调。
思考清单：
这个检查列表最早是为头脑风暴设计的，旨在激活参与人员思路，起到发散思维的作用。心理学家罗伯特·艾伯尔总结了这些列表并做出最终的解释。目前奔驰法主要用在产品改造和服务升级的过程中，但它对普通问题的解决也有帮助作用。
文章来源：优设 作者：陆小凤不传奇
品牌 IP 化最大价值在于：通过挖掘品牌的人性，赋予性格、文化、价值观更像一个有血有肉有灵魂的人，通过持续的内容生产，吸引用户参与，进而使用户产生精神共鸣，在与用户产生关系的过程中给予情怀和温度、最终实现商业价值。
IP 在百度上解释为：（Intellectual Property）知识产权，指的是通过智力创造性劳动所获得的成果，并由劳动者享受成果的专有权利，是一种无形财产。现在市面上见到的 IP 现象呈现出来的是一种新商业现象、新商业模式、一种新的思维方法，比如我们见到的漫画、电视剧、明星、小说、游戏等……
用一句话解释：IP 就是自带流量、散发魅力、可以吸附粉丝、商业转化。
十多年前，品牌设计被叫做企业形象设计（VI），他的基本要素就是：企业 logo 图形、标准字、辅助图形、吉祥物设计等。设计师通过创意设计出简洁生动的图形传递品牌的形象，这个图形就像一个符号占领用户的心智。
企业的最终是要售卖产品达到盈利的目标，就要投入大量的成本去各种渠道推广品牌形象，比如灯箱广告、电视广告、车体广告投入等，以保持品牌曝光度。
1. 品牌IP化
近十年来，在早期一些互联网品牌变化中，我们发现京东、天猫、当当、国美……很多品牌都在打造动物形象。
从 2016 年开始，各个企业的品牌设计出现的一些新的方向，他们打造符合品牌的 IP 形象符号或者 IP family，比如知乎刘看山、 AcFun 的 AC 娘、哔哩哔哩的 2233 娘、QQfanmily、MTfamily，用一些傻呆、萌、贱、骚等个性鲜明的形象吸引粉丝，获得用户对品牌的好感度。
傻呆、萌、贱骚的个性IP形象：
IP族化：
从过去品牌设计发展到如今品牌 IP 化后，品牌逐渐变得有温度、有人格灵魂、更容易互动了。
1. 从理性功能定位转变到情感精神寄托
品牌设计在推广中强调的是产品功能，属于漏斗式输入。而品牌 IP 化追求的用户对价值和文化认同，提供给消费者的是一种情感的寄托。比如《故宫》不再是过去威武严肃的印象，以俏皮、卖萌的周边形象深受年轻人的喜爱，故宫的文化、传统元素也找到了新的传承渠道。
2. 用户购买行为由需要转变为热爱
品牌是通过传统的定位理论占据用户的心智，当用户需要什么产品？选择什么品牌？是根据产品融入脑海中品牌理念而选择了这个产品。比如当我们需要买去屑洗发水选择买海飞丝洗发水。
品牌 IP 后在一定程度上弱化了品牌，利用天生形象优势、人格魅力、深受用户追捧。用户的购买行为是感性的，由内心热爱驱动购买。比如爱莎这个形象深受女孩子的喜爱，有关爱莎的裙子、玩偶、绘本、电影等孩子会不顾一切要求购买。
对于企业来讲，是否可以生产一些吉祥物就可以进行品牌 IP 化吗？
其实并不是那么简单！品牌 IP 化远远不止于做一个动物卡通形象就可以了。我们在前面说到在 2012-2015 年互联网品牌大量采用动物形象，但是他们并没有形成品牌 IP 化。
判断品牌 IP 化的三个特征是看品牌 IP 化后是否具有内容持续生产力、跨界连接力、商业衍生力。
1. 品牌IP化可以持续输出内容、具备内容生产力
品牌 IP 化通过自身角色和人格设定，吸附更多的用户的喜欢和追捧。品牌 IP 化的形象可以成为一个优质的内容源，提供持续的优质内容，不断引发与用户的关注和互动。
内容具有持续性：
line 在全球深受粉丝的追捧，这很大一部分原因在于 line 不断持续制造内容。line 最初是韩国的一家通讯公司，2013 年因为表情包深受用户的热爱，并因此带来 10 亿的收入，之后 line 打造了ugc模式，由用户创作表情上传带来 147 万美金的收入。此后几年持续创作有新成员加入，制作新的热点和内容。
2016 年布朗尼妹妹丘可加入
2. 品牌IP化具有连接力，可以连接用户、跨平台、跨品牌连接不同圈层
连接不同圈层：
在以往品牌对产品的推广上，由于产品特点、行业本身的壁垒，品牌难以跨越圈层和其他品类进行营销方式上的更多尝试，而 IP 营销则打破了这一壁垒，跨越了产品品类和行业的界限，带来了营销方式和品牌创新上的更多可能。
比如 linefrineds 与京东、天猫、优衣库、VANS、悦诗风吟、施华洛世奇合作推出了很多联名款的产品：T 恤、护肤品、项链、运动鞋等。这些合作跨越了行业、品牌等。
连接粉丝或用户：
最初，熊本熊只是熊本县政府宣传案的「副产品」，但这只熊火爆程度比肩哆啦 A 梦。在形象产生一个月便策划一系列神奇而疯狂的事件，比如聘任熊本熊为临时公务员，熊本熊大阪失踪，寻找腮红事件等。这些具有热议感、刷屏感、卷入感事件曝光和粉丝持续产生了连接。
品牌 IP 化赋予鲜明的形象与性格，这样形象与性格能与用户产生更近的互动，当这个形象持续产生内容输出后，让用户会产生更强的参与感、立场感，品牌与用户也就更强地连接一起。
延伸阅读：熊本熊之父的故事
3. 品牌IP化具备衍生力，实现商业闭环
品牌 IP 化只是品牌在互联网时代的一个新的工具或者方法论，最终都是要实现商业价值。要想实现商业变现、长久发展，必须有不断跨界合作、衍生周边产品和服务的能力。比如 line，最初由一个卡通形象，慢慢发展到漫画、表情、周边。他可以在不同时代捕捉到当下的流行，并与之紧密结合，达成品牌 IP 在不同品类和不同时期都保持强有力的衍生变现能力。
品牌 IP 化最大价值在于：通过挖掘品牌的人性，赋予性格、文化、价值观更像一个有血有肉有灵魂的人，通过持续的内容生产，吸引用户参与，进而使用户产生精神共鸣，在与用户产生关系过程中给予情怀和温度、最终实现商业价值。
文章来源：优设 作者：咏舍
数据可视化是传达信息的最好的方法之一，它可以直观地呈现数据，快速吸引用户的注意力。但是如果设计师对图表设计的理解有偏差，在界面呈现上可能会对用户产生错误的引导，因此笔者结合自己的工作经验对图表设计进行总结，希望每位设计师都能成为优秀的数据搬运工。
下面我将从功能、交互和UI深挖图表设计的各个知识点，敲黑板划重点咯～
1.概念
图表泛指在屏幕中显示的，可直观展示统计信息属性（时间性、数量性等），对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好的将对象属性数据直观、形象地“可视化”的手段。
如果说表格可以承载数据的全面性，那么图表可以完美展现数据的特点和变化，它对数据的解读能力是表格无法做到的。
2.使用场景
(1)比较数据差异情况。基于分类的数据，可以通过比较数据来了解不同分类的差异，比如柱状图。基于流程的数据，可以通过比较数据了解数据的变化趋势，比如折线图。
(2)分析数据关联情况。展现数据间相互关系和数据的流向。比如桑葚图。
(3)查看数据分布情况。对于错综复杂的变量之间关系，可以通过图表来找出规律。比如利用气泡图进行回归分析。
(4)了解数据构成情况。发现各变量的占比情况，比如饼图。
3.原则
(1)轻量。众所周知表格是可以承载数据的全面性，但将相同的数据用可视化展示时，设计师总想将所有的信息堆砌在图表上，显得图表非常笨重，因此增加了用户的思考时间。在此建议明确你图表类型的特点，将主要信息呈现在图表上或者分层展示图表，比如数据钻取功能。
(2)直观。设计师应该将数据信息清晰而直观地表达出来，使用户一眼就能洞察事实，更快地发掘商业价值并作出决策。
(3)美感。缺乏美感的数据可视化仅仅是数据展示。美感包括两个部分，第一个部分是整体协调美，比如对图表中的各个元素（标题、网格、坐标轴、缩略轴、图例、提示信息、预警线和辅助线等）进行合理的排版和使用协调的配色。第二部分是局部细节美，比如设计师根据流行趋势给图表加上渐变色。
我将用一种最复杂的图表类型-双轴图当作示范。
1.标题。包括左对齐、居中对齐和右对齐。在选择某种对齐方式前，请兼顾图例的摆放位置。
2.栅格。包含点状、线状和斑马线。
(1)根据数据特点选择横纵向辅助线，横向引导线增强水平方向的导视。纵向引导线增强垂直方向的导视。
(2)线状建议用虚线，因为不是用户确定指向值。
4.缩略轴。包括滑面和滑柱。
(1)拖动滑柱滑动，增加或较少滑面，从而改变查看密度。
(2)拖动滑面滑动，保持滑面长度，进行前后移动。不改变查看密度，只改变查看范围。
5.图例。离散型数据包括横向排列和纵向排列，连续型数据包括连续图例。
(1)所有图表类型的排列方式要统一，所以要考虑整体的图表空间是适合横向排列，还是纵向排列。
(2)所有形式总长度超过内容区换行或换列。
(3)双轴图包含了2种图表类型，不同类型的图例样式要有所区分。
(4)连续型数据通过渐变色来展示数据大小的变化。
7.预警线。数据超过阈值就会报警，帮助用户监控数据。
(1)预警线建议用实线，并用警示的颜色引起用户的注意，最好用邮件或短信通知用户。
8.辅助线。用户设置某值作为数据参考进行比较，比如设置平均分为参考数值。
(1)辅助线建议用虚线，仅起参考作用。
1.加载方式。加载动画建议使用和图表相关的样式。
2.排除异常值。允许用户剔除高度异常点，因为异常值会影响用户对整个图表的分析。
3.数据钻取。单击某个数据可以看到该数据的详细信息，变换分析的粒度。
4.适配
(1)增减留白。图表大小固定不变，只是增减留白空间。
(2)等比缩放。图表的长宽都以相同比例缩放。
1.颜色
(1)颜色主题
1)深色背景。适合较少信息内容。
优点：可以通过布局建立良好的视觉层次，深层次地反映内容，而且视觉吸引力强，给人以高端的视觉感受。
缺点：可读性低。页面太过聚焦所以对留白的平衡要求较高。
2)浅色背景。适合较多信息内容。
优点：可读性高，增加了页面空间。
缺点：内容不聚焦，信息过少则页面显得太空。
(3)颜色生成规则。一个变量统一用一种颜色，再按配色方案依次出每个变量的颜色。 使得同一图表的色彩搭配和谐且具有美感。
(4)视觉缺陷。世界上有一部分人群有视觉缺陷，他们无法通过颜色来得到来精准地区分图表的维度和变量。作为设计师不能忽略这部分较为庞大的特殊群体。
设计师常用的PS和AI提供了模拟红色盲和绿色盲的校样设置，选择“视图—校样设置—红色盲型/绿色盲型”。
想要从根本上解决这个问题，推荐一篇腾讯设计师的文章信息图形中的颜色探讨—面向色盲人士友好的设计解决方案。
2.布局
视觉层级要符合逻辑层级，利用信息深度引导用户阅读。每个元素要保持一致，保证布局的整体协调。
3.插画
符合主题和整体基调，简单易懂，数据可视化具有一定的认知门槛，有时候需要插画来提高用户的理解力。
4.留白
信息过多容易造成视觉压力，合理的留白可以增强用户对信息的吸收能力。
5.字体
避免有个性的衬线字体，字体要保证清晰可见。字体大小适中，太小影响阅读，太大容易占用图表控件。普通字体大概12px，标题用14px。
1.使用大厂开放的图表库
图表库的图表类型丰富且统一，而且大大节省了开发时间，比如百度的Echart和阿里的G2。
2.在专业数据分析网站获取灵感
笔者刚开始学习数据可视化就是拿着数据表格不停地在竞品上摸索，作为一名用户去感受这些图表的交互体验。这里推荐一份数据可视化网站名单。
1.先懂数据，再谈可视化
为此我们要了解图表类型的适用场景和局限，可以看33种经典图表类型总结，轻松玩转数据可视化。了解这些可以帮助大家通过UI设计更好地展现图表的特点。比如展示各地区的人口密度，可以用柱状图来展示，但是我们发现用地图会更加接近用户的期望。
2.为了数据，过度可视化
很多时候设计师在图表上很难展现自己的设计功力，从而会给图表增加过多的视觉效果，比如3D效果。
3.真实数据，友好可视化
数据产品不要试图去掩盖问题，而要反映真实数据，暴露问题，并且和用户一同解决。比如对数据阈值进行监测，预警线就是很友好的可视化方式。
转自：简书
作者：idatadesign
链接：https://www.jianshu.com/p/816f10b7d594
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
现如今无论是工作汇报，产品设计，后台设计甚至是数据大屏，越来越多的设计师需要和数据打交道。尤其是想要做B端的设计师，数据可视化更是必不可少的一个技能。数据可视化，可谓是越来越体现一个设计师的专业能力。
因此掌握数据可视化能力，是面向未来的设计师所必备的能力。然而尴尬的是，国内没有一款针对于教学数据可视化的全套解决方案，这让很多渴望学习的设计师摸不着头脑。所以这也促使我开启了这个系列――「设计师需要了解的数据可视化」，希望能够给大家带来一些不一样的内容，为大家梳理一个完整的数据可视化框架。
今天带来的就是这个系列的第一篇，数据可视化的概念以及数据可视化设计的基本准则。最近一直在做国际外包，时间非常的零散，而写逻辑性强的文章又非常耗费精力。所以从开题到现在，用了将近2个月的时间才将这篇文章彻底收尾。全文总计25000字左右，阅读需要20分钟左右，干货满满，请大家做好准备。（如果没有时间，我之后我也会将该内容录成音频，如果有兴趣，可以持续关注我）
什么是数据可视化
数据可视化就是借助视觉的表达方式（不局限于文字），将枯燥的，专业的，不直观的数据内容，有趣的、浅显的、直观的传达给观众的一种手段。
非设计师在制作数据可视化时，往往会因为重点突出数据的重要性，而让可视化图表变得枯燥乏味。而设计师在制作数据可视化时，又会因为过度注重绚丽多彩而让数据的呈现效果大打折扣。所以在这种大环境下，催生出了数据可视化行业。作为设计师，如何拥抱这个新兴的行业，如何把握设计与功能之间的平衡，从而更好的沟通与传达信息，即是本文的重点。
信息图表，就是数据可视化后产生的结果，就是我们在工作汇报中，项目介绍中，以及后台系统中经常见到的数据图表。信息图形由信息和图形两个词语组成，它被称之为「信息图形」(Infographics或Information Graphics)。
信息图形最初是在旧的纸质媒体上刊登的，更加有助于人们理解新闻信息的可视化内容。
信息图表的分类
根据木村博之的定义，从视觉表现形式的角度，将「信息图表」的呈现方式分为六大类：图解(Diagram)、图表(Chart)、表格(Table)、统计图(Graph)、地图(Map)、图形符号(Pictogram)。
1. 图解—主要运用插图对事物进行说明
文字有时候是一种匮乏的信息传递方式，而可视化的方式，则是人类最本源的一种信息传递方式，图解就是将很多无法准确或用语言传达的内容，以生动形象的图形解释出来。下图是一张经典的对于咖啡种类图解，38种咖啡配方，不必要用多余的文字解释，直接用图解表示，简单明了，清晰易懂。
2. 图表—运用图形、线条及插图等，阐述事物的相关关系
图表通常用于简化人们对于大量数据之间的关系的理解。人们通常理解图表会比理解数据要快很多。图表和图解唯一的不同点在于，图解是用可视化的方式去传递信息，而图表则是用来去阐述信息之间的逻辑关系。流程图就是典型的图表。
下图是一张宠物狗的进化图，用巧妙的方式清晰地向我们传递了，狼是如何被人类驯化成不同种类的宠物狗的。
3. 表格—根据特定信息标准进行区分，设置纵轴和横轴
表格是按照行和列或者采用更复杂的结构排列的数据，表格广泛应用于通信、研究和数据分析。其实表格并没有一个确定的定义，它会因为不同的行业和谈论环境而存在差异.
4. 统计图—通过数值来表现变化趋势或者进行比较
统计图是根据统计数字，用 几何图形 、事物形象和地图等绘制的各种图形。它具有 直观 、 形象 、 生动 、 具体 等特点。统计图可以使复杂的统计数字简单化、通俗化、形象化，使人一目了然，便于理解和比较。因此，统计图在统计 资料整理 与分析中占有重要地位，并得到广泛应用。
下图是大城市通勤的时长统计，通过这些柱状图，我们能很清晰的看出各个级别的城市通勤时长的比例关系，并了解他们的拥堵时长和非拥堵时长分别是怎样的情况。
5. 地图—描述在特定区域和空间里的位置关系
将真实的世界转换为平面，在此过程中必然要讲一些东西略去。实际上，要说「省略」是地图上最关键的词也不为过，无论是哪种信息地图，最重要的是让用户找到想要看到的信息。
信息地图也可分为两大类：
第一类，将整个区域的布局或结构完整呈现的地图。
第二类，将特定对象突出显示的地图。
以下是美国各州拥有枪支人数占总人数的百分比统计图。
6. 图形符号—不使用文字，直接用图画传达信息
所谓图形符号（也就是我们常说的icon），基本就是通过易于理解、与人直觉相符的图形传达信息的一种形式。生活中处处存在图形符号，包括地铁站出入口上的地铁标识，路边的指示牌与限速标识。人们会约定俗成的运用一些符号来代表一些固定的意思，比如厕所门口的男女标识，很多商店为了个性化设计，使用了不常用的符号来表示男女，这会给消费者造成很大的困扰，因为这脱离了他们常见的理解范围。
图形符号的设计原则是尽可能不使用文字，其作用有两条：
避免语言不通造成的困扰。
更便捷的、更清晰的传递信息。
多年来，最经典的图形符号应用案例可以说是奥运会和残奥会的运动图标了。图形符号可以说已经成为奥运会和残奥会的重要组成部分，就像火炬传递和运动会LOGO一样，从赛事门票到奥运村的品牌，图形符号都在被广泛使用。
下图即为东京奥运会的运动图形符号（局部）
达到数据可视化目标的基本方法
目前我们工作中经常遇到的数据可视化，大多数是制作数据图表（即统计图 Graph），所以我们本文的主要教学内容也是围绕着如何制作统计图来说。
制作统计图的过程可以被四个步骤，分别是：明确目的、选择图表、视觉设计、突出信息。
明确目的：明确数据可视化的目标，通过数据可视化我们要解决什么样的问题，需要探索什么内容或陈述什么事实，并选择合适的图表。
选择图表：围绕目标找到能提供信息的指标或者数据，选择合适的图形去展示需要可视化的数据。
视觉设计：以可视化的手段将数据转化成有趣的设计语言。
突出信息：根据可视化展示目标，将重要信息添加辅助线或更改颜色等手段，进行信息的凸显，将用户的注意力引向关键信息，帮助用户理解数据意义。
1. 明确目的
大多数情况，明确图表本身要达到的目的，比制作好图表本身更加重要。如果对数据认识不清，就会造成2种结果：
无法拟定合适的图表标题，从而使读者失去阅读图表的兴趣。
无法选择出正确的可视化方式，从而使图表难以理解。
知识点 01：好的图表标题 ―― 等于成功的一半
大多数图表都需要一个好的标题，这样才能让面试官知道他们在看什么。
标题应该是一个结论，是你希望面试官从中获得的信息（有意义并且有趣的部分），而不仅仅是对图表展示内容的概括（即无意义且无趣的部分）。
2. 选择图表
Andrew Abela 根据统计图的主要功能，将所有的统计图分为了四大类：比较、联系、分布、构成。在其资料的基础上，我制作了一套更适合设计师的「图表选择器」（The Way of Data Visualization）。
所以作为新手的我们，只要能熟练掌握这六种图表，即可应付大部分的使用场景，而对于我们这种更专业的人士来说，上述的「图表选择器」能够大大提高我们的工作效率。
3. 视觉设计
接下来也是数据可视化中最重要的一步，视觉设计。很多时候我们在设计图表时没有既定的规则，全凭借在平面设计和UI设计中获得的知识来进行设计。但之所以数据可视化被单独细化成一个类别，并在国外蓬勃发展，甚至衍生出了专业的数据可视化设计师，就证明在数据可视化领域，很多规则是与其他设计不同的。
一个最简单的例子，市面上大多数的配色方案都在数据可视化领域不适用。
毫无包容性的配色方案
首先，适用于数据可视化的配色方案，一定在明度上是有变化的。很多配色方案不仅不具备这种特性，甚至不会考虑包容性。UI设计的配色方案看起来都很绚丽多彩，但是很明显，他们是为了用户界面而设计的。色盲人士往往很难去阅读那些运用了低包容性配色方案的可视化图表。
没有足够多的颜色种类
另一个问题就是，大多数配色方案并没有足够多的颜色种类。
在构建一套完整的可视化图表时，我们往往至少需要6种颜色的调色板来进行设计，我们见过的大多数配色方案并不具有这么多种颜色。
虽然这些配色方案同样绚丽多彩，但是他们不能灵活应对图表中复杂的信息层级。
难以区分层级的配色方案
渐变配色方案可以轻松解决上述两个问题（颜色之间有明显的对比，且可以无限细分颜色种类）。但很抱歉，这样的配色方案同样不适用数据可视化，我们举一些简单的例子大家就可以明白。
这些渐变色看起来没什么问题，但是当我们选择其中一个，将其颜色分类扩充到10时，问题就出现了。
你能区分出最左边的4个颜色之间有什么差别吗？恐怕很难。
前面的阐述，大多数是为了让大家对数据可视化有一个清晰的概念。在「视觉设计」这一章我将重点讲解，数据可视化（即图表制作时）需要注意的设计准则。下面的内容主要解决大家在数据可视化中所遇到的三个问题。
如何制作数据可视化图表？
如何快速的制作数据可视化图表？
如何制作一份兼具实用性和美观性的数据可视化图表？
适用于所有图表的制作规则
1. 图表中的线条
有无刻度线
当数据的数值非常重要时，一定要使用刻度线来让观众更清晰的了解数据。
如果你的听众只需要了解A数据大于B数据，那么刻度线是没有必要的，只需在坐标轴上使用小刻度即可。如果你的读者要花一些时间在柱状图上并感兴趣A数据是45.65而B数据是37.66，那么使用刻度线将有助于他们理解。
刻度线的颜色
如果确定要使用刻度线，则需要使它们比作为实际数据的点或者线条要层级低。因为这些刻度线也属于背景的一部分。
总结来说，不要使用全黑或者全白的线条。如果你的背景颜色是白色或者浅色系，那么你应该让你的线条灰一些。你也同样可以让这些线条变成亮灰色，点状或者虚线.
负空间的刻度线网格
你也可以使用灰色的背景，然后将刻度线反白。这是一种很好的利用负空间做设计的方法。或者刻度线可以用稍微偏黑色一点的灰色，因为很明显这样会让刻度线更融入背景一些。
坐标线
坐标线应该比刻度线，线条更粗，颜色更深，才能让整个图表显得更有主次的区分。
2. 选择合适的坐标上下限
选择合适的坐标下限
一般来讲，我们应该把我们的坐标下限设置为0。
有人会问，这样的话我们的数据就会变得没有那么起伏变化了。那可能是因为你的数据本身就没有那么长势喜人。
但同样，其实很多事情可以反过来思考，之所以有人愿意不把坐标轴设定为0为起点，其实就是为了在视觉上让人形成对比强烈的感觉，从而突出业绩。这种方法的使用因人而异。
比如在小米的发布会中，为了对比，小米把数据的下限起点设置为了10000，从而使小米的跑分数据看似跑赢了友商一倍还多，但其实小米的数据增长，只比友商高出了25%。
再举个例子：这张条形图也是经福克斯新闻准许使用的。
3月31日目标的值为7,066,000，比6,000,000高17.8%，然而第二个柱形几乎是第一个柱形长度的三倍。
这也同时提醒我们要注意，在观看别人的图表时，仅仅观看柱状图的高低趋势往往不能得出正确结论，需要注意坐标轴起始位置有没有被人做过虚假处理。
同样的，有些人为了汇报业绩，也会使每个刻度的跨度不一致，从而提高柱状图整体的对比度。这种情况也应该多留心观察，不要被表面的内容所迷惑。
选择合适的坐标上限
坐标轴中另一个需要注意的点即为坐标上限。上限界定的方式有两种，可根据需求自行判断。
如果只是为了比较各个数据的数值，可以用数据的最大值作为坐标轴上限。
如果是需要将数据与某个最大值比较，则用此最大值作为上限.
3. 刻度值
虽然Y轴的刻度值标签通常放置在刻度线的最左边，但我们也可以把它们放置在其他的地方，比如刻度线的顶部。（但此时一定要把握好亲密性原则，稍不注意就会引起观众的困惑，这也是我们经常会在看其他图表时遇到的问题，到底刻度值标记的是哪一条刻度线？）
刻度线和刻度值相辅相成，这会让图表看起来更加规范。刻度值放置在哪里无所谓好坏，只是需要根据不同的场合加以使用。
间隔均匀
在坐标轴上应该使用均匀的跨度0,5,10,15,20，而非不均匀的跨度0,3,5,16,50。这里即呼应上方「坐标轴下限」中的最后一点，有时图表制作人也会用不均匀的刻度来蒙骗我们对数据产生误解。
当然，此处的举例只是夸大了错误的效果，现实生活中的不均匀刻度往往更加隐蔽，需要我们仔细去甄别。
不要使用非水平和竖直的文字标注，也不要使用转行
有时坐标轴上的注释文字会很多，所以很多人为了妥协，在小空间内显示出所有的文字标注内容，而使用倾斜的文本，或者将文本转行处理。
不要用过于复杂的设计形式，数据可视化的第一要义是简单易懂，所以在遇到标签文字过长时，可以采用以下方法进行解决。
4. 数据的处理与排序
我们在每次制作前都对数据进行排序，而不是随机排布。这样我们可以在图表中为观众展示更多信息，即某个数据在总的数据库里面的序列。
大小排序
我们还是从一系列国家的数据开始。
目前的排布很随机，或者是按照字母表排序的。接下来我们要按照数值从大到小进行排列。
我们随机挑选一组数据，比如玻利维亚(Bolivia)，再上图中，我们只能得到玻利维亚的数据值，以及他大概在数据库中排在中游的位置，仅此而已。但是下图中，根据大小排列好的数据，我们不仅可以获得刚才的两个信息，同时还能马上知道玻利维亚在整个图表中的排名（第四名）。同时你还可以看到吉尔吉斯斯坦（Krygyzstan）和越南(Vietnam)居于榜首而美国(America)是倒数第一，这就是好的图表能给我们带来的「更多的信息」。
我们再看一遍按照字母表排序的图表，你能轻易的输说出「冈比亚(Gambia)」排名第几吗？
刻意的序列
在发布会中我们常常见到，为了突出自己产品的强悍，往往要与友商的数据做对比，在这种情况下，我们的数据也不是随机排布的，我给这种数据排布方法起了个名字，叫「刻意的序列」。
在 魅族 16th 的发布会中，这张旗舰机重量对比的图表很有讲究，可以发现，除了索尼（最重的手机）以及 魅族 16th（最轻的手机）外，其余所有的手机都是按照降序排列。不看颜色对比，把 236g 的索尼和 152g 的魅族放置在一起进行讲解，以更加突出魅族的轻薄。
那么这个图表的数据排序其实经过了三次处理。
把重量从高到低排序。
把重量最高的和的手机单独放置，并给予特殊颜色单独显示。
把这两个数据放置在最后，再次突出对比，吸引观众注意。
这就是我们学习数据可视化时非常需要注意的细节点，在数据可视化中，细节决定成败。
5. 关于图例的设计
数字需要四舍五入
我们有时为了保证图表的清晰整洁，并不能完全选择符合数据上限和下限的数字作为刻度，而是选择一些取整的数字。
同样的，这不仅仅适用于图例中的数字，同样适用于坐标轴上下限的数字。
标记图例的边界比标记图例的范围更好
在需要用多种颜色做区分的图表中，有时可以通过标记图例边界而不是标记图例范围的方式，来提高观众的阅读效率。
水平或者垂直方向的图例
对于数字的刻度，水平图例往往比垂直图例更加容易阅读，因为这符合我们的阅读习惯。
但是，对于有类别区分的图例来说，垂直图例往往效果更好，因为我们可以在图例的右边放置更长的文本（跟坐标轴的注释同样的道理）
删除内部边界
有时我们甚至可以更简约的表示图例，当你只想表达一个渐进的过程，24和55之间的差异并不重要，观众只需要知道后者比前者大即可。在这种情况下，我们可以尝试只标记出图例的最大值和最小值，而不必要标记出每个边界或者颜色，这样可以给观众减少不必要的信息负担。
6. 图表上的文字信息
文字标注的作用，不是来填充空白的，而是用来强调相关信息或拓展额外的背景知识的。
引用消息来源
大多数情况下，我们制作的图表都不会将原数据附在旁边，因此最好在图表中引用你的数据来源。一般来说，引用规则是在左下角防止数据来源信息，往往采用特殊字体
用数字辅助表达
有时你需要在你的图表中标注出数据值，而不仅仅应该依赖视觉元素向观众传达信息。
通常来说，不需要太严谨的图表，我们会对数据值进行一定程度的处理。
有小数的值四舍五入。(234.19 ―― 234)
在数据的量级非常大时，将一定位数数字取整。（52,133 ―― 52,000)
当所有数据的量级都非常大时，将一定位数的数字缩进单位中。（521,000,000 元 ―― 5.21 亿元）
Y轴刻度值尽量转化为千位分隔符，如K，M，B。
Y轴最大值取值要恰当，保证图表占据2/3以上。
如果我们不这样处理，你就会发现你的图表总是不那么整洁。
7. 控制字体的数量
图表中的字体数量以及字体大小的种类加起来不要超过3种（标题和副标题除外）。通常来说，我们在制作时会把注释和坐标轴标签设置为两种字体样式，所以只需要确保将这两者统一起来，那么就可以保证我们的图表不超过3种字体样式。
柱状图的制作规范
1. 柱状过宽或过窄
过宽的柱会让图表看起来笨重，尽量保持柱的轻薄，这样可以保持优雅的外观，但是太薄了会让用户很难对数据进行比较。
标准的数值为，柱的宽度为「柱与柱间距」的2倍，当然这只是个参考值，实际我们根据不同的情况，对宽度作出调整。
2. 尽量不要超过7个值
一般进行数据比较时，柱状图建议不要超过5个数据值，对于条形图来说，建议不要超过7个数据值。
折线图的制作规范
1. 有层次区分的折线/曲线
当我们在制作一个复杂的折线图时，我们想要显示其中的一条数据，最好的方法就是加强它与其他元素的对比，从而提高它的重要性层级。
利用我们之前的方法，把其他的数据变为灰色。
将我们需要强调的曲线置于顶层。
2. 什么时候是用折线图
2017年1月和2月的大米出口量是相关的，他们代表一种数据在不同时间下的数据值，因此我们可以用折线图将它们连接起来。但是2017年1月的大米出口量和玉米出口量（16万吨）是不相关的，所以我们不能随便用折线图来代替柱状图。
用折线图可以很好的表示每天去医院的人数，因为统计每天去医院的人数可以用来观察趋势。
3. 按照时间推进的数据并不能总是用折线图来表示
有时我们也需要进行一些区分。如果我们想要绘制美国大规模枪击事件的伤亡人数随时间推移的图表。这些枪击事件确实是一个接一个发生的，但是它们本质上却没有关系，所以你不能用折线图（应该用条形图）。
但是，如果按年份对它们进行归类，并计算每年的伤亡人数。这样的情况下可以使用折线图进行统计，因为统计结果的趋势变化是有意义的，是可以得出相应的结论的。
4. 使锯齿状的线条平滑
如果你的折线上下浮动过于剧烈，那么你应该尝试拉长时间间隔，比如不每天采样而以周为单位来采样。观众们不会去阅读锯齿状的线条，或者说他们不会喜欢这样的图表。
5. 在你的折线图中绘制数据点
当有些特定的数值特别重要时，我们可以在线条上标注出他们，如果你有大量的数据需要展示，或者你只想展示数据的走势，那么其实你只需要使用折线就足够了，不需要增加数据点。不信你可以试试，大量的数据点 = 混乱不堪的界面。
饼图的制作规范
饼图和圆环图在数据可视化方面生病狼藉，但却是使用的最频繁的图表之一。饼图是一种应该避免使用的图表，因为肉眼对面积大小不敏感，并且几乎没有对与角度大小的概念。更何况是肉眼完全无法重合比较的图形。
例如上面左图，我们很难去比较每日从肉类（Meat）中摄入的卡路里与从糖类（Sugar&Fat）中摄入的卡路里数量的比例。人眼的直觉中，糖类与肉类的比例应该在2：1左右，但实际的比例却是1.5：1。
上述右图将这一现象放大的更加明显。人眼的直觉中，办公与接待的数值差距非常大（这是由于我们直觉更习惯从面积上做判断），但实际上接待与办公的比例为1.5：1。
很多设计师认为饼图应该是被禁止使用的图表，我觉得不能说的太绝对，不管怎样，迄今为止事实情况是，仍然有很多人在使用饼图，所以我们至少可以争取正确的使用他们。
虽然如此，但是在强调个体与总体的比例关系方面，饼图还是有其独特的优势。
1. 避免过度分割饼图，否则最终会导致根本无法阅读
那么有同学会问：分割多少块是过度分割？这是一个需要在实际制作时进行判断的问题。一个简单的方法，如果我们已经很难从图中看出其中一块扇形是另一块的两倍大了，或者好几块较小的扇形看起来差不多大时，那么就不能再分割了。此时可以考虑把较小的类目归入一个更大的：「其他」模块。
如果一定要给出一个确切的分类数目，我认为一般不要超过9个，超过的话，建议用条形图来展示，不要太依赖于饼图。
例：这张饼图来自维基百科，它展示了国家的不同区域。
左边这张饼图已经分割出了无数个扇形了，但旁边另分离出一张饼图，显示出了左图中更多的，看不到的更小国家的情况，以此来提供更多的信息。其实还有很多的方法可以展示这组数据，例如树状图或者普通的地图。局限较大的饼图只适用于展示只有几组值的数据。
除饼图外，环形图（甜甜圈图）亦可表示占比，其差异是将饼图的中间区域挖空，在空心区域显示文本信息，比如标题，优势是其「空间利用率更高」。
2. 饼图的起始位置要得当
人们的阅读习惯往往是从12点钟开始的（跟表盘类似）。所以我们在制作饼图时也要遵循观众的阅读习惯，从12点钟方向开始制作，这样才能呈现出更加清晰的数据。
3. 饼图的顺序要得当
这个规则与其他的数据图表一致，我们在拿到数据后，不要急于去进行数据可视化，而是应该对数据进行排序处理，一般来讲，我们对于图表都要进行从大到小的数据排序，才更有利于我们展示数据，但是有一个例外的情况。
当数据中包含一个类别叫「其他」时，无论其他的内容占比为多少，我们最好都把他放置在饼图的最后来展示。
4. 切割的展示方式
有时，我们可以想一些创意形式来解决饼图对比不够明显的问题。
当我们将饼图分拆开来设计时，将他们设置为同一起点，我们可以清晰的对比出数据的大小，但严格意义上来讲这已经不算是饼图了。
散点图的制作范围
1. 散点图可以承载最多四个维度的变量
当包含多重变量时，散点图本身包含2个维度的数据，当出现更多维度时，我们可以通过改变散点的颜色和大小甚至是形状来对数据进行更多维度的划分，这个时候，散点图即变成了气泡图。
2. 尽量为散点图添加趋势线
通过添加趋势线，可以更好的让观众感受数据的变化，人们不会愿意接受未处理的数据，往往倾向于接受已经被处理好的数据结果。
面积图的制作规范
面积图又叫区域图，与折线图很相近，都可以用来展示随着连续时间的推移数据的变化趋势。区别在于，面积图在折线与类别数据的水平轴（X轴）之间填充颜色或者纹理，形成一个面表示数据体积。相对于折线而言，被填充的区域可以更好的引起人们对总值趋势的注意，所以面积图主要用于传达趋势的大小，而不是确切的单个数据值。面积图有三种不同的形态，根据数据以及背景的不同，均有其最佳的展示环境。
1. 尽量不重叠，使用透明色
当图表中要展示多组数据时，最好保证所有的数据都不重叠，这样才可以更好的展示数据。如果无法避免重叠，则应该适当的设置颜色和透明度，使得重叠的区域变得更加易读。
2. 不要超过四个类别
面积图只适合展现少量的数据，最多建议不要超过四个类别，否则就会导致非常难以识别。因此在多个类别下，要尽量避免使用面积图。
突出信息
1. 重要的内容用颜色区分
有时我们为了突出展现某部分数据，需要对它们进行特殊的处理（包括添加辅助线，更改颜色，线条粗细等方法）来加大它们与其他数据的对比，以吸引用户注意，并表明你想陈述的观点。
如上左图，通过添加辅助线和标红的方式，来显示快递公司未达到60万件派件标准的月份，从而突出显示公司业绩不合格部分。如上右图，通过对9月份的颜色区分，来突出显示二手房价格在9月份达到前所未有的高度。
2. 把不重要的内容变为灰色
对于不太重要的内容，我们通常会把它们的层级降低，将其变为灰色往往是一个好方法。（如上左图中1-6月与9月数据的配色，以及上右图中1-8月数据的配色）
通常来说，我们会用灰色来标记：
未被选中的元素或者背景。
为重要的数据点做对比的数据。
（在交互图表中）不是当前选中的元素。
3. 没有那么多重点信息
如果你觉得每个信息点都很重要，然后为他们都做了特殊的备注，那么请把他们都去掉，因为那恰恰证明他们都不重要。
数据可视化的精髓就在于你去用视觉元素去帮助用户做筛选，如果观众们真的很想知道每个数据代表什么，那或许你应该给他们展现一份表格而不是图表。
4. 添加必要的辅助说明
关于这个图表，如果我们不进行标注的话，它只能讲述故事的一部分。如果要把故事讲述的全面，那么就必须添加一些标注。
如果我告诉你，这个图表想告诉我们，在第6天的时候该团队使用了敏捷开发，在使用新技术初期，Bug数量明显上升，而后瞬间下降。加上了标注，图表讲述了一个跟之前完全不一样的故事。
所以，我们为了更好的说明我们的目的，有时需要对图表进行特殊处理，包括做一些突出某些信息的标注。
5. 添加必要的辅助线
这一点主要针对于柱状图和折线图，比如当我们想要呈现两个不同时期的数据变化时，添加辅助线可以更直观地体现出其中的变化。
比如像这个图表，为了体现出响应速度有很大的提升，，添加了相关辅助线并标注了相应的数字，使 PRO5 和 SONY Z3+ 之间的对比更加明显.
转自：简书
作者：极创设计
链接：https://www.jianshu.com/p/a8996c452c2d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
