对于设计师来说，在日常的互联网设计工作中面对的主要是两类产品设计类型，一类是C端(Consumer)指的是消费者、个人用户；顾名思义就是面向个人用户提供服务的产品，是直接服务于用户的。另一类是B端（Business）指的是企业或商家；顾名思义就是面向商家、企业级、业务部门提供的服务产品，是间接服务于用户的。现在互联网进入下半场，C端产品逐渐靠近天花板，红利逐渐消退，大部分的企业开始转向B端。
对于设计师来说我们也要对自己有一个清晰的定位和转换，如何才能在业务的转换下，跟上企业的步伐，做好角色的转变和切入。
当然，从C端快速切换到B端设计或者从B端快速切换到C端都不是一件容易的事情，因为B端和C端存在比较大的一些差异。其商业属性，目标用户，使用场景，设计表达，产品诉求，用户体验，设备载体等都是不同的。B端现对于C端的业务而言更为复杂，那么这次就聊一聊B端设计师从哪些方面发掘自身设计价值，更好的为产品服务，提升产品价值。
在我们开始接触B端产品时，先要对B端产品有一个基本的概念，什么是B端产品？
常见的有OA系统，ERP，CRM，SAAS等（这里就不一一赘述，大家可以自行百度查看一下基本概念）
B端产品是帮助企业或者部门协同办公，解决一条业务链问题，将线下操作通过系统化，流程化转移到线上，提高办公效率，节约成本，高效完成任务从而提高企业的效率，减低内部不必要的消耗。
B端产品行业与行业之间的跨越度很大，因为不同的业务属性所要的产品诉求是不同的。但我们作为一个设计师，可能会遇到各种复杂的业务场景，复杂枯燥的行业术语也可能都不精通，就算学习了也不一定能非常懂，而且行业属性较重，我们大概率不是用户，业务场景还原成本高，甚至没有条件还原。所以在做设计的时候还是会懵。往往我们需要深入用户调研，尽可能地接近真实业务场景，与用户共同创造，基于业务底层逻辑提炼出强整合性、高兼容性、高拓展性的系统规范。B端的产品设计也是一个不小的挑战，那我们如何打破这个挑战更快速的接触，适应B端设计呢？
B 端产品相对而言，场景、功能、业务流程、信息架构要比 C 端更复杂，面对的异常情况也比较多，所以 B 端在设计风格上尽量做到简洁。B 端产品实用性大于美观性，在每一个功能的设计都需要你去思考很多方面：用户易用、信息层级、未来扩展，你都要做出取舍，而对于每个模块都需要你思考、结合用户场景。
面对B端产品我们应该如何分析和处理呢？
B 端的业务逻辑复杂，子业务多样化，产品的规则，流程，诉求可能随时就会调整，设计师应当基于B端的产品业务特性，市场与用户的需求，在看似杂乱无章的业务中寻找共性，梳理模块进行合理的整理和设计。
在做B端业务前，我们要对我们即将要处理的业务有一个基本的理解和认知，不同的部门员工因为职业属性，使用产品的诉求也是不同的，所以相对应的设计方案流程也是不同的，这就需要我们充分理解业务流程，有针对性的梳理。
例如：我们要做一个考勤系统，我们需要清楚公司的考勤制度，事假/病假/年假/调休等如何处理，如何提交，如何审批，月底汇算，季度汇算等问题，前期了解的流程越多越清晰，就可以帮助我们规避很多不必要的问题。
要将功能流程归类梳理整合，把杂乱的功能整理清楚，提高用户效能。
用户的时间就是金钱，这对于 B 端商家角色中尤为重要，大量订单的处理、表格化的导入和导出、批量管理和网站运营等方面，对于效率有着极高的要求，商家通过可视化界面来完成某项任务。
在这其中，影响最大的莫过于交互方式了，相信各位一定用过各大银行的网站，页面的导航关联性弱、结构不合理、提示不明确、交互流程过长，甚至有的网站光是登录，就得大费周章。
如何提高效率，我认为主要从以下几个方面着手：
如果你的产品，让人看一眼就能上手，那么说明是非常友好的设计。易用性不一定意味着简单和低智，依据复杂守恒定理（泰勒斯定理），每个应用程序都有自己内在的、无法简化的复杂度。
所以，提高易用性意味着要设计合理的交互，易用性分为对新手（小白用户）友好和对老用户（专家用户）友好，包括数量最大的中间用户。
如果你的界面是仅仅对于新手友好，那么可能完成的任务都是简单而轻松的。但是对于老用户，他需要更复杂的功能来处理大量庞杂的任务；因此在设计的时候，既要提供傻瓜式的操作方式，也要对专家用户提供提高效率的工具。
此处的智能化既包括通过大数据或者人工智能自动将操作步骤变得简洁高效，也包括诸如一些字段输入、自动定位、图片识别、OCR 等方式来使用户的效率得以提升的功能。
以前的用户要抠图可能会在 ps 中操作好几个步骤才能完成，但是随着机器学习技术的发展，ps 已经可以更加智能的抠图。当然，还包括其他功能的智能化。
在 B 端 SaaS 领域，智能化也是一个重要的趋势，针对不同的商家所面临的不同的行业领域，我们或许可以提供更加全面且友好的服务。
提高系统内的一致性，减少用户认知成本。在同一平台内的页面，样式和交互上要尽量保持一致性，不要有的地方是总金额，有的地方是总价格，这会让用户犯迷糊。提高通用性，也意味着你需要关注并熟悉系统内不同功能之间的关联性，尽量做到统一处理。
B端产品多在工作中需要长时间沉浸式使用，为帮助用户集中注意力、高效完成任务，设计风格多为冷静、克制、干净、简洁，相较于视觉，更多的是注重如何让用户理解产品逻辑。如何通过设计的处理更好的提升产品的效率，留住用户，让用户有更流程的产品体验。
在我们进入一个产品内容比较多的网站下，如何才可以让用户快速在网站中匹配到自己需求，解决自己的问题呢？最快速，便捷的处理方式就是搜索框输入关键字，通过用户的关键词在系统中为用户提供最匹配，最合适的内容，缩短用户寻找产品的时间，提升用户的使用效率，让用户有更流畅的体验。
设计要点：
提高搜索框在网站中的曝光率
提升模糊搜索的正确率
尽量不要出现搜索结果为空
文案提醒要简练，让用户扫一眼就知道要表达什么意思，不要让用户停下时间去思考，琢磨文字提示的信息，减少干扰信息，比如在处理input时加入默认提示，让表单更清晰，表意更明确；有字数限制时，要明确可输入字数和已输入字数，这样让用户有一个预期，不会出现输着输着没法输入新的内容。
设计要点：
文字简短，清晰，通俗易懂
文案风格统一
用户使用产品时，用户与产品之间形成一种“沟通”，良好的反馈机制能够大大提升这种“沟通”体验。用户的每一步操作都应当得到相应的反馈，尤其是在错误时要及时纠正，以便用户更准确的操作下一步。但是这种操作不应该只是错误色彩提示。比如当我们在输入表单时，输入错误系统并没有给我们任何提示，只是将输入框变为错误操作的颜色，这样会让用户无法流畅完成操作内容。
设计要点：
及时纠正用户错误，减少用户焦虑
将用户的错误操作清晰明了的表述出来
空状态作用和文章中“承上启下”的文字作用是一样的，空页面可以帮助我们理解上下文，让用户知道即将要发生什么，才会觉得舒服。最好的方式就是“展示和引导”：通过清晰的文字告知用户发生了什么，并且通过按钮/快速链接有效的引导用户行为，避免用户陷入死胡同，不知如何操作下一步。
设计要点：
空界面可以增加一些趣味性，个性化或者打造品牌感（IP形象/品牌logo衍生）
空界面状态保持简洁，直观易懂
引导用户操作
当icon被用于设计时，最好使用用户熟悉和容易识别的icon，以使用户能够迅速地了解其用途。如果icon无法传达正确的意思，就会变成视觉噪音，让使用者迷惑，成为使用者的认知障碍。
设计要点：
icon要易识别，正确传达表示含义
同一层级的icon，要统一标准，设计一致
B端的设计往往会有很多种情况，我们在做名称/数据的设计时尽量模拟真实的上线数据，如果涉及敏感数据可以自己改一下，但是尽量要采用字段长度，这样可以在设计中无限接近上线后的产品，减少后期因为数据展示出现的UI调整。
设计要点：
在设计阶段无限接近真实上线环境
将上线后可能出现的展示样式都要制作出来，避免后期的返工
确定功能操作的优先级，将一些用户关心的数据统计/报表展示一级页面，使用频率高的功能优先靠前展现出来，轻量级操作的信息入口尽量收起，不要展示给用户，以免造成不必要的困扰，增加用户学习成本。
设计要点：
确定功能优先级
高频次入口优先展示，低频次折叠隐藏
B端产品逻辑严密和专业性较高，用户在使用时经常不可避免的操作失误，尤其是涉及到删除数据或者金额方面的操作，我们需要格外的谨慎处理。在用户犯错时，我们要及时的提示用户，这样的操作会带来什么样的后果，提示的文案要注意语气，不要将责任全部推在用户身上，礼貌对待用户。
设计要点：
要及时反馈用户后果，避免因为不当操作造成伤害
页面删除尽量给二次确定，避免用户误点，做个人保护
尽量有垃圾箱回收，方便用户后悔
避免加载中用户等待焦虑，我们可以使用分布式的加载方式预先加载页面框架然后加载内容，在内容未出现前通过占位符的方式展示，优先加载占用网络资源较少的元素，减少用户的等待心理，占位符的方式可以让用户提前了解到页面整体的展示样式效果，给用户加载好的错觉。
在加载过程中我们可以通过这几个视觉表达方式来加载，通过显示品牌元素加载；色块加载；界面布局；灰色图显示等。
设计要点：
避免空白页加载等待，增加用户焦虑
选择最符合产品调性的加载
我们要做到减轻界面视觉呈现，但这并不是意味着减少页面功能。我们要帮助用户简化认知负担，增加界面可读性，降低用户阅读浏览复杂的大块内容时的心理压力和抵触感。将一些复杂的表单内容通过数据可视化的方式让用户更快，更便捷的查看数据，从而对业务有更直观的理解。
设计要点：
数据可视化是一个不错的选择
避免不必要的元素信息
保证可读性
一个优秀的进度条可以让用户减少很多的焦虑，并且让过程和结果步骤清晰可见，进度条的目的在于通过向用户反馈当前响应进度来让用户在等待中放松下来，在用户等待程序处理事情时，不应该把用户仍在一旁傻傻的猜想程序什么时候结束，这个步骤还有多长时间。正是这样的情景下，进度条刚好可以构建用户与系统之间沟通的桥梁。面对长时间的几十秒的操作的进度条不应该只是一个进度模糊显示，更好的处理是应该加入进步完成的百分比，清晰明了告诉用户系统完成了多少工作量还剩多少。
设计要点：
进度条可以打消用户对程序等待响应的疑惑
针对响应时间稍长的进度加入显示百分比
开发完成后设计师要开始设计走查，因为开发不可能百分之一百的还原设计图，所以最后的设计把控是非常重要的，即使是开发按照设计图还原界面但是可能代码实现后还是有些问题，或者是不同尺寸的屏幕适配，或者是加入真实数据后一些展示问题，又或者是页面的跳转/返回以及一些弹窗提示等都需要最后的走查确定；不仅仅是视觉页面验收，交互方面还要考虑去验证思考最符合用户操作体验的流程。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近业务里面有个需求就是开发一个类似微信的聊天页面的H5，不需要像微信那么复杂，但是得有个样子，弄了半天之后终于有了个样子。决定写个博客记一下这个过程，希望后续不会鸽
打字的，聊天item，聊天list。大概就这样了
其中聊天list 用了一个better-scroll这个第三方插件。
首先第一步就是开发这个聊天item
分析一下需求，别人发过来的和我们发过去的是两个排版和样式，但是不用单独写两个，用个逻辑区分一下就可以了，也可以动态绑定css什么的差别很小。
<template> <div class="record-wrapper"> <!-- 时间，后续开发 --> <div class="time"></div> <!-- 消息， msg通用样式 msg-right/msg-left 区分排版左右 --> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <!-- 消息框， msg通用样式 message-wrapper-right/left 区分聊天框颜色 --> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> </div> </template> 这个是只有1边的，逻辑就是在消息那边加个v-if，判断来源，也可以动态绑定css
弄好以后就这样
<template> <div class="record-wrapper"> <div class="time"></div> <div v-if="from == 1" class="msg msg-right"> <div class="img-wrapper"> <img class="img" :src="from1" /> </div> <div class="message-wrapper message-wrapper-right"> <div class="message">{{ message }}</div> </div> </div> <div v-else class="msg msg-left"> <div class="img-wrapper"> <img class="img" :src="from2" /> </div> <div class="message-wrapper message-wrapper-left"> <div class="message">{{ message }}</div> </div> </div> </div> </template> <script> export default {
name: "",
props: {
from: Number, // 1: 自己 2: 别人
message: String,
timestamp: Date,
},
data() {
return {
from1: require("../../../assets/imgs/from1.jpg"),
from2: require("../../../assets/imgs/from2.jpg"),
};
},
}; </script> 个人觉得css还是比较重要的，这里用了sass来写。主要解决方案就是用一个display:flex配合上flex-direction: row-reverse让头像和消息左右排列
<style lang="scss" scoped> .record-wrapper { margin: 4px; padding: 4px; } .time { text-align: center; } .msg { display: flex; flex-direction: row; .message-wrapper { max-width: 220px; margin: 0px 10px 0px 10px; .message { margin: 8px; word-wrap: break-word; //英文换行 } } .message-wrapper-left { background-color: lightslategray; border-radius: 0px 12px 12px 12px; } .message-wrapper-right { background-color: powderblue; border-radius: 12px 0px 12px 12px; } .img { flex: auto; height: 36px; width: 36px; border-radius: 8px; } } .msg-right { flex-direction: row-reverse; } .msg-left { flex-direction: row; } </style>
这个是没有调样式的，只是为了自己嗨弄的，可能会很丑。
最后大概就是这样的
其实我觉得很简单，难点就2个。首先是滑动，这里用了better-scroll这个组件，可以在网上搜，挺好用的。另一个就是页面布局的问题，写点css还是没得问题的。
首先去better-scroll的官网，按着他的核心逻辑抄一下。不详细谈了，总之来说，会有三层嵌套。我个人命名他们为: wrapper 和content和 item 这三层。
先弄一个json，当做会被填充的数据。
export const chatItems = [ { type:1, message:"fdaf地方撒风大撒风阿斯顿飞fd阿斯顿飞安德森发大水发大水发大水奋斗发的大撒风安德森 发大发大水发", from:1, timestamp: new Date() }, { type:1, message:"fdaf地方撒风大撒aa风阿斯顿飞ffdsafsfadsfadsfjlkjsadflkosdajfl asdjlffsaf水奋斗发的大撒风安德森 发大发大水发", from:1, timestamp: new Date() }, { type:1, message:"做紧d咩嘢?", from:2, timestamp: new Date() }, { type:1, message:"？？？", from:2, timestamp: new Date() }, ] 然后开始写vue的代码
<template> <div class="scroll-wrapper" ref="scroll"> <div class="scroll-content"> <chat-item v-for="item in chatItems" :key="item.message" :type="item.type" :message="item.message" :timestamp="item.timestamp" :from="item.from" ></chat-item> </div> </div> </template> <script> import BScroll from "@better-scroll/core";
import MouseWheel from "@better-scroll/mouse-wheel"
import ChatItem from "./ChatItem";
import { chatItems } from "../../../assets/data/items";
BScroll.use(MouseWheel)
export default {
name: "",
data() {
return {
chatItems,
bs: null
};
},
components: {
"chat-item": ChatItem,
},
mounted() {
this.init();
},
beforeDestroy() {
this.bs.destroy();
},
methods: {
// better-scroll的代码
init() {
this.bs = new BScroll(this.$refs.scroll, {
scrollY: true, // 上下滚动
click: true, // 开启点击事件
startY: document.querySelector(".scroll-wrapper").clientHeight - this.$refs.scroll.scrollHeight + 5 , // 初始高度
mouseWheel: true, // 鼠标滚动
probeType: 2, // listening scroll hook
});
// 下面的不要也行，官网抄的顺便留下来了
this.bs.on("scroll", ({ y }) => {
console.log("scrolling:" + y);
});
this.bs.on("scrollEnd", () => {
console.log("scrollingEnd");
});
},
clickHandler(item) {
alert(item);
},
},
}; </script> <style lang="scss" scoped> .scroll-wrapper {
height: calc(100% - 160px); // 留一些空间给 打字的地方 和 header
overflow: hidden; // 非常之关键
} </style>
最后是这个样子的了
文章来源：简书。作者：Good_Nine9
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
关键词：横条、多个菜单选项
这个图标的样式简洁易懂，通常位于网页和App的上下角，用来告知用户这个按钮之外还有更多内容可以探索。
当产品有多个菜单选项时，考虑使用汉堡图标来显示，但尽可能避免在桌面视图中使用。
关键词：垂直、内嵌菜单
通常位于屏幕或窗口的右上角或顶部，是用于打开带有附加选项的图标，打开的内容往往是一个较小的内嵌菜单而不是整个全新的页面。
关键词：水平、内嵌菜单、web
水平三点式菜单同样常位于屏幕或窗口的右上角，用于打开菜单或显示相关项的操作。
因为图标样式是水平的，所以更容易在web上或者在表格等水平方向中使用。
关键词：子分类、子功能
九宫格菜单通常用于打开同一产品中包含不同子产品或子功能，可以在它们之间快速切换，此图标常位于产品主页的右上角。
关键词：过滤、排序
过滤式菜单由三行不同长度的线段水平叠放而成，是最广泛使用的过滤符号。可以将过滤式菜单与“排序方式”选项结合使用，或者与全局过滤器结合使用。
关键词：样式特殊、时尚感更强
作为汉堡图标的替代品，与显示列表菜单的目的相同吗，但是这些样式我们平常见的可能会比较少，更常用在充满现代感、时尚感和艺术感的网站上。
最后
不同的样式可能代表着截然不同的设计目的，常思考这些小而精的细节，是保证产品体验提升的关键。
参考：uxplanet.org/choose-correct-menu-icon-for-your-navigation-7ffc22df80ac
原文地址：Clip设计夹（公众号）
作者：Clippp
转载请注明：学UI网》这些不同类型的菜单图标和用法，我做了个总结分析！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1、在data中声明要设置的定时器名称：
-
data() {
-
return {
-
timer: null // 定时器名称
-
}
-
},复制代码
2、在mounted中创建定时器：
-
this.timer = (() => {
-
// 某些操作
-
}, 5000)复制代码
3、在页面注销时清理定时器：
-
beforeDestroy() {
-
clearInterval(this.timer);
-
this.timer = null;
-
}复制代码
然鹅，并没什么卵用，在切换页面后，定时任务依然顽强的奔跑着。
-
beforeDestroy() {
-
clearInterval(this.timer);
-
this.timer = null;
-
console.log(this.timer) //输出为: null,但是任务依然在继续运行
-
}复制代码
可能是我的姿势不对吧。害羞.jpg
经过在各大论坛一番查找发现：
通过$once这个事件侦听器在定义完定时器之后的位置来清除定时器：
-
const timer = setInterval(() =>{
-
// 某些定时器操作
-
}, 5000);
-
// 通过$once来监听定时器
-
// 在beforeDestroy钩子触发时清除定时器
-
this.$once('hook:beforeDestroy', () => {
-
clearInterval(timer);
-
}) 复制代码
哇，成功了...
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
resize:none
<textarea style="resize:none " rows="8" cols="80" ></textarea>
如果你使用谷歌浏览器或火狐浏览器，你会发现页面上的textarea元素的右下角有个小三角，用鼠标箭头拖拽它，你的textarea就能随着放大或缩小。这是现代浏览器为方便用户而添加的一个辅助功能(很遗憾，不包括IE，如果你使用IE，是看不到的。)。Web程序员在设计网页时，一般给了textarea一个固定的长宽，通常是配合布局而设定。但挑剔的用户往往会认为太小或太大。有了这个可以调整大小的工具后，用户就可以自己选择合适的大小了。
但是，有时候是应用的需要，Web程序员需要禁止这个可以调整textarea大小的功能(IE完全没这个问题！)，也就是去掉右下角的小三角，有什么办法呢？很简单，使用CSS的resize属性。
-
<style type="text/css">
-
textarea {
-
resize: none;
-
}
-
</style>
resize 属性设置为 none ， textarea 就变成了固定大小，小三角也消失了
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
好了，分享到这，文件已打包好
转载请注明：学UI网》我翻遍全网，这11种高级感样机建议下载
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
选择错误的图表类型，或默认为最常见的数据可视化类型，可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容，可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。
当使用水平条时，在基线的左侧绘制负值，在右侧绘制正值。不要在基线的同一侧绘制负值和正值。
删数据起点会导致曲解。在下面的例子中，看左边的图表可以很快的得出结论，值B比D大3倍多，而实际上，两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。
对于折线图，总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势，因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。
折线图是由线连接的“标记”组成，通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的，并且对于较短的时间间隔非常有效，但当数据更新不频繁时，这可能会导致混淆。
例如: 使用折线图来代表年度收入，如果数据是每月更新的，则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值，而在特定时间实际的收入数字是未知的，所以可能会产生误会。在这种情况下，使用垂直条形图可能是一个更好的选择。
平滑的折线图可能在视觉上很好看，但它们错误地反映了背后的实际数据，而且过粗的线会模糊真正的“标记”位置。
通常，为了节省可视化空间，当有两个具有相同度量但大小不同的数据系列时，可能倾向于使用双轴图。但这些图表不仅难以阅读，而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例，只是浏览图表，然后就得出了错误的结论。
饼状图是最流行的也是经常被误用的图表之一。在大多数情况下，条形图是更好的选择。但如果你决定做一个饼状图，有2个比较好的建议:
1）不要超过5-7片，保持简单
2）可以将额外的最小段分组到“其他”切片
如果没有适当的标签，无论你的图表有多好，它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。
将数据放在切片上可能会导致多个问题，在可读性问题上和窄切片上都会有挑战。相反，添加黑色标签能清晰的链接到每个部分。
在确定饼片秩序时，有几种常用的方法:
1）将最大的切片放在12点的位置，然后将下一片切片顺时针降序排列
2）把最大的切片放在12点的位置，第二大的放在顺时针相邻位置，第三大的放在11点的位置，其余的切片按顺时针降序排列
同样的建议也适用于其他许多图表。不要默认采用字母排序，将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图)，以确保最重要的数值占据最突出的空间，减少眼球运动和阅读图表所需的时间。
饼图通常不是最容易阅读的图，因为比较相似的值非常困难。当我们把中间部分去掉，创建一个圆圈图表时，我们腾出了空间来显示额外的信息，但这样牺牲了清晰度，极端情况下，图表就会变得毫无用处。
不必要的造型不仅会分散注意力，还可能导致对数据的误解和用户的错误印象。你应该避免:
1）3D元素，明暗面
2）阴影、渐变和其他扭曲的多彩色
3）斑马图案，过多的网格线
4）过度装饰，斜体，粗体或衬线字体
颜色是有效的数据可视化的组成部分，在设计时考虑以下3种颜色类型:
一个定性调色板最适合显示分类变量。为确保易用性，所分配的颜色应该是不同的。
连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合，可以创建一个连续的颜色集。
发散调色板是两个连续调色板的组合，中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。
看看一个方便的工具- [ColorBrewer]，它可以帮助你生成各种调色板。
根据美国国家眼科研究所(National Eye Institute)的数据，大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。
1）在调色板中使用不同的饱和度和亮度
2）把现有配色去色然后检查对比度和可读性。
确保排版能够准确传达信息，帮助用户专注于数据，而不是分散用户的注意力。
1）选择易读的字体，避免衬线和装饰过度的字体
2）避免使用斜体、粗体和全部大写
3）确保与背景有高对比度
4）不要旋转文字
这个简单的技巧将确保用户能够更有效地阅读图表，而不会扭伤他们的脖子。
如果你的任务是在web和移动项目中添加交互式图表，你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现，并能提供大量交互想法。
帮助用户通过改变参数，可视化数据进行探索。然后得出结论，最大化价值和洞察力。在下面的示例中，你可以看到IOS Health应用使用了各种数据表示的组合。
本文翻译已获得作者的正式授权（授权截图如下）
原文地址：medium
作者：Taras Bakusevych
译文地址：彩云译设计（公众号）
译者：彩云Sky
转载请注明：学UI网》天呐，国外大佬总结的这20条B端图表设计原则，简直太实用了！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语：如今，用户增长越来越难，面对这个情况，本文作者分析了用户增长的两大底层逻辑和两大保障，提出了合格的增长闭环思考和一套切实可行的用户增长方法论。推荐对用户增长感兴趣的童鞋们阅读。
增长越来越重要了！
因为增长越来越难。
我们当初的尝鲜劲头已经过了，各种手机app，装了卸，卸了装，早已找到自己所爱。
产品研发门槛持续降低，各路神仙分分入局，同质化严重，消费者眼花缭乱，一片红海。
这一两年，我一直在做增长，今天分享一些对增长的思考。
增长的底层逻辑到底是啥？
做一次新客户活动，拉动更多的新用户；优化一个注册流程，提升用户注册转化率；通过邀请裂变活动，以老带新的方式，获取新客户。
诸如此类，都是我们常见的获得用户增长的方式。这些增长动作的背后，有什么更深层次的逻辑？
我认为，增长的底层逻辑有两个：精细化、规模化。
基于精细化经营的能力，用相同的模式，获得更多新用户。
精细和规模，相辅相成，相得益彰，这样才能启动增长飞轮。
没有两大保障，增长只是空中楼阁。
在实施增长的过程中，如果要说什么条件是必不可少。
我认为，这两个至关重要：数据支撑和多元角色。
增长涉及方方面面，包括产品、运营、设计、研发等等，有条件的话，可以组建一个完善的团队；没有足够的资源，增长负责人也应该具备各方面的能力经验。
合格的增长闭环思考应该是怎么样的？
着手做增长工作，应该沿着什么样的思路去开展？经过一两年的尝试、总结，下面这条思路，我觉得你可以直接拿去用。
很多人的增长思路是：
用户-问题（需求）-场景-方案-数据
其实这样是不够全面和科学的：
个人拙见，增长的闭环思考应该是：
数据-主要矛盾-用户-问题（需求）-场景-方案-数据
经过上述的分析，然后才是找到目标用户，将用户的问题转化为需求，在什么样的场景触发给用户，对应的解决方案是什么。
6步可复用的增长实战方法。
从用户生命周期经营角度，我将目标增长的人群划分为：新用户、存量用户、流失用户。下面我将按照这三个纬度，讲一讲具体的增长方法。
拉新户，是增长最主要的目标人群。
第一步，通过数据了解下当前业务情况。
1）整体情况
每日新增客户趋势图、累计用户数据趋势图、新客户转化人数、新客户转化金额、新客户转化率等等，了解业务大盘情况。
2）主要流量来源
了解整体情况后，接下来需要对流量端进行分析。
新客户主要流量来自那些渠道？自然流量、老带新、活动拉新、专题项目新增等等，把新客户增加的来源划分清楚，看看各个模块的占比和趋势变化情况。
3）转化情况
对上述流量来源，再进一步分析，各个模块转化情况。每天有多少流量进入，有多少新户注册成功，有多少用户成功转化。
完成上述三步，对整体业务情况，有了大致的了解。
第二步，找出最主要的矛盾。
通过公式拆解法：新客户=渠道流量（渠道1+渠道2+…+渠道n）*转化率（渠道1+渠道2+…+渠道n）
通过数据，你可以重点看几个关键点：
要想提升新增用户，无非从两个角度突破：1是流量大的，提高转化率；2是转化率高的，提升流量。
找出对应渠道，分析流量不高或者转化率不高的原因，为什么是现在这样的情况？
从多方面找原因（mece法则/金字塔）：是渠道流量不行？还是渠道费用太高？是活动设计页面不行？还是本身用户质量就很差？
各个原因逐一研究，找出主要矛盾。
第三步，分析用户特征。
勾勒用户画像：年龄、性别占比、城市、受教育程度、年收入水平、消费习惯等等，对这些用户有画像有大致的判断后，再从身边的朋友，真实接触了解这一类人群。
第四步，剖析用户的需求。
从已知出发，已有的用户为什么会用平台的产品，他们最关心产品什么样的核心功能、服务？这些用户，是否有渠道上特征的差异？这些用户，新开户7天之内，浏览最多、使用最多的是什么功能及页面？
由此做一轮最基础的推演，新用户也会有类似的关注，再增加渠道上的特征。
第五步，找到用户使用产品的触发场景。
比如，打车平台，一般是用户遇到公共交通工具用不了或者是没有覆盖到的地方或者是用户赶时间。
经常下雨天去坐公交就比较麻烦，很多人会选择打车。一个广告平台，根据天气情况情况，给用户推送打车平台以及打车券，那转化率就会很高。
所以，剖析完用户需求之后，找到触发用户使用平台功能的场景，能更高效率地获取新用户。
第六步，提出解决方案。
通过上面分析了，到了最后一步：解决主要矛盾的具体方案。
如果是转化率不高：那就优化转化路径、转化钩子。
这里的设计是要结合用户需求、用户触发场景进行：需求、触发、行动。
给用户一个行动的理由。
比如电商平台：给福利–新人福利券+限时领取倒计时；
又比如：描述用后效果–盖中盖广告，腰不酸了腿不疼了，一口气上五楼，嘿，不费劲儿～
存量用户增长关注的是用户往更忠诚的阶层成长；流失用户的增长则是用户回流。
这两个用户人群，做增长的思路跟新户是完全一样。我就不一一阐述了。讲一些不一样的侧重点：
1）存量用户做增长
从两个方面：横向和纵向两条线着手。
横向方面：让用户更多地体验平台上的其他功能，属于业务的交叉经营。
纵向方面：让用户更深度、更高频次地体验平台的核心功能，比如充会员，充更多的钱；用微信支付，用的频次更多。
2）流失用户做增长
用户的回捞思路，可以根据用户历史的行为制定策略。
A 用户历史有体验某个产品/功能：可以用功能更新/产品上新的方式，进行召回用户；
B 用户之前是活动转化的：可以用回归福利礼包的方式，触达用户；
C用户之前没转化，那用户就像是新用户一样，可以参考新户转化的策略做回流。
上述的三个方法，并不是完全固定的，可以交替着使用，分析数据那个有效就用那个。
总结下：本次的分享讲了增长的底层逻辑、两大保障、闭环思考流程以及完整地演绎了新户做增长的分析流程。
每一个模块，都是有不少的门道的，文章仅仅是点到即止。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com