如果想知道某个网站配色方式，除了打开开发人员工具或是检视源码，也有第三方服务可以使用，即使无法完整复制别人的配色，也能快速得知网站使用的颜色代码或配色模式，取得颜色的色码或色彩名称。有没有任何更直觉、简单的方式来完成这些工作呢？若你有类似的需求，接下来要介绍的服务或许可以满足，这项服务会提取特定网页使用的颜色，让颜色相关信息更一目了然。
本文要介绍的「Alwane」是一个网页色彩提取工具，可以在使用者输入特定的网址后取得该网站使用的颜色代码或描述，产生为调色盘链接，重新分类、编排各种颜色，最简单的使用方式是输入网站网址就能提取，也能显示其他相关色彩，如果想分析、保存某个网站或品牌使用的颜色，Alwane 是个非常方便而且好用的工具。
除了将提取的颜色代码以可视化方式呈现，还能够以调色盘或是程序代码方式呈现，包括 CSS 和 SASS 两种显示程序代码，对于要取得特定的网站颜色来说很有用，若有类似需求的话不妨打开 Alwane 网站试试看。
网站链接：https://alwane.io/
使用教学
开启 Alwane 网站后直接在左上角「Extract CSS Colors」输入要提取颜色的网址，预设情况下会从 HTML 和 CSS 样式表单取得颜色，如果某些情境下需要从 JavaScript 获取颜色可在「Advanced」设定选项找到。
从提取后的色彩结果可以看到各种颜色分布，包括颜色的预览、变量名称和色码（hex code），从左侧可选择为颜色重新分组、排序或是切换 CSS、SASS 色码。
从上方选项切换调色盘或程序代码模式，也能快速将所有 CSS 代码复制到剪贴簿。
如果想要保存或分享网站的配色、调色盘、CSS 等信息，点选右上角「Generate」就能产生链接咯！
值得一试的三个理由：
栅格一直都是很多同学非常疑惑的地方，无论是栅格的日常使用，又或者是栅格在整个产品当中的作用，一直以来都有非常多的疑惑，今天就来聊聊栅格在实际工作如何使用，以及产品之间究竟有何区别。
上期回顾：
其实在说栅格的使用，我们就在讨论网页当中的布局方式，以及他们之间的不同点。
布局方式，本质上就是去处理窗口宽度与网页内容的关系
用户会使用浏览器打开不同尺寸的窗口宽度，而网页内容究竟应该如何去适应这些窗口尺寸？
通常会分为：固定布局、流式布局、自适应布局、响应式布局
固定布局是一种最为简单的方式，它的设计逻辑是将页面当中的内容 “写死固定” 在屏幕上，内容不会随着本身窗口宽度进行改变，所有元素都使用 px 作为基础单位
当然在固定布局当中，窗口大小与页面内容会存在两种基本关系：窗口过大则将页面元素进行居中，窗口过小则展示横向滚动条
固定布局的好处是这种方式相对简单，只需将页面设计好即可，不会存在太多兼容性的问题（因为也压根没有考虑兼容性的相关问题）
固定布局通常出现在 老旧的政府项目、网页的登录注册中
流式布局是最基础的变化布局，它的设计逻辑是将页面当中的元素设计成可以流动的 “水” ，通过在页面，设计不同的“杯子”容器来装下页面内容
这里的“水”一般指的是 文字、图标、以及一些页面重复出现的元素。而杯子通常是我们设计的容器，它高度固定，只会变化其宽度，比如卡片、外层容器控制宽度 等等...
因为“杯子”的限制，也就导致水会根据杯子的宽度进行延展流动，进而形成流式布局
使用流式布局可以通过较低的开发成本，来实现一个页面当中多尺寸的小范围适配，如果屏幕尺寸跨度较大，则会比较困难
而流式布局最常使用的方式就是通过栅格系统，来确定整个“杯子”的宽度，进而让“水”能够在页面当中实时滚动展示
这里有两个需要注意的点：
在研发层面，杯子的大小是需要进行限制的，通常会去设定它的最大值与最小值，当它超过最大值则居中对齐，当他
在流式布局当中，窗口超过其最大值则固定左侧，右侧空白补充；窗口小于其最小值则展示横向滚动条
比如与上方同样的案例，将页面当中内容的文字实现成流式布局，并且将其流体布局的宽度限制为 200px - 120px，这时则会形成页面的宽度变化，会导致内容发生直接的变化
流动的“水” 需要去考虑它漫出的情况，即在“水杯”高度固定的情况下，整个宽度无法装下如此多“水”的情况，通常我们可以使用 “...” 进行标注。这个思路后续在响应式布局当中也会体现
自适应布局是将差别较大的屏幕尺寸，去创建多个不同的设计稿，每一个设计稿去对应 一个用户实际的尺寸范围。改变屏幕分辨率就可以去切换不同的设计方案
通俗一点来说，自适应就是去单独设计桌面端、平板端、移动端的页面，并且将它们三者进行独立，而系统通过不同尺寸间的 屏幕断点/浏览器 UA 等...（实际前端判断远比这个更加复杂，但是为了方便理解可以暂且这么认为），进而适应出不同的设计页面
而通俗一点来说，自适应是使用多套代码去对应多个页面，并且都是在业务非常复杂的情况下进行使用，在国内当中最常使用便是 桌面端与移动端 的产品
比如 语雀 当中的 桌面端与移动端就是一个典型案例，他通过判断用户的使用设备，将页面拆分为了，桌面端、移动设备端、小程序（单独设计适配的）。因此只需要将每种设备的设计思路分析清楚即可
自适应布局与栅格
自适应主要是表达多个设备尺寸下进行切换的 布局方式，在不同的设备之间，也是需要去使用流式布局以及其他布局方式
而不同的设备之间，屏幕分辨率的差异就会涉及到一个关键点，屏幕断点
屏幕断点
屏幕断点，又叫媒体查询 @media，因为在整个设计当中，屏幕尺寸是极其复杂的，除了我们常见的尺寸：1920、1080、1440、1366
用户还可以通过调整窗口的大小，进而改变网页尺寸。而屏幕断点，最主要是判断屏幕的宽度，来确定目前的尺寸究竟应该采取什么设计方案
比如在设计一款成熟的 B 端产品时，因为商业的缘故我们作为各大平台（钉钉、企微、飞书）的 ISV（合作上架），产品上架到不同平台时，需要对不同平台尺寸进行调整，比如钉钉为 1024px、企微为 980px、飞书为 1280px，这时为了满足用户的实际场景，会将这几类特殊的尺寸作为屏幕断点进行对应的布局设计，以满足不同产品当中的最佳实践
关于屏幕断点的媒体查询，是在前端 CSS3 代码当中，提供给用户校验整个屏幕的宽度，比如在下图前端代码当中，则代表在屏幕尺寸小于 480px 时，使用 字体大小为 16px
而确定断点才是这其核心，这里给大家提供两个思路，实际设计当中还会更为复杂：
物理断点：也就是屏幕当中，已经划分好的断点方式，比如显示器的全宽大小、不同设备之间的屏幕分辨率差异
设计断点：在设计过程当中，一些必要的屏幕尺寸。比如上方讲到不同平台的设计问题
其实屏幕断点不是最终目的，最终还是想通过屏幕断点，将页面当中不同的不同元素的处理方式实现在设计稿中，如果不需要，完全可以不考虑增加屏幕断点。
这里先多聊一句，其实响应式的大规模普及，是源自 2015 年 Google 的倡导（可以看到 Google 旗下的很多产品都采取的响应式布局，例如 YouTube），它最初的目的非常简单，就是为了提高响应式在移动终端上的运行效率。因为在 2015 年时，安卓 生态下的屏幕尺寸多到可怕，以至于需要有一套解决办法来让用户运行并使用。
响应式布局是确保一个页面当中所有的设备（桌面端、平板端、移动端）都能够展示出非常满意的效果，进行产生的一种技术方案。它更像是 流式布局与自适应布局 的结合，它能够通过对屏幕尺寸的快速响应，进而对页面的内容进行更为细致的变化。
通俗一点来说就是通过一套代码去实现多个页面，并且将多个页面的内容进行细化，进而能够快速适配多个设备。
对于多个设备，最主要是调整页面栅格数量、水槽宽度、页面距进行适应，比如在 YouTube 当中，就是通过响应式布局，让页面实时响应进行处理。
响应式布局与栅格
比如以 Ant Design Pro 的页面进行拆解，你会发现它在 575、767、991 的尺寸中，页面布局发生变化，然后根据屏幕断点之间的页面布局，采用向下兼容的适配方式，Ant design Pro 屏幕断点可以划分为 320、576、768、992、1200，响应策略如下图：
你会发现布局其实是依赖于栅格，而栅格的使用，正是由于不同的布局所导致。只有通过栅格，才能够确定流式布局的比例、响应式布局的变化方式，但是在 B 端产品当中，并不是所有页面都需要使用栅格，经常看到一些作品集其实是为了栅格而栅格
在 B 端产品当中在，真正使用栅格的地方更多是工作台、官网，而其他相对复杂的页面是没办法使用栅格，而对我们每一个产品而言，可以优化的点就是在屏幕尺寸较小的情况下，默认让整个产品导航菜单收起，以提供给用户更多展示内容。
文章来源：优设网 作者：CE青年
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
什么是栅格？我这里就不做说明了。很多优设的文章都写的很清晰了。这篇文章仅从我最开始接触栅格所遇到的困惑和部分设计师始终纠结的点来和大家一起讨论讨论。
B 端到底用什么尺寸进行设计？
要弄清楚用什么尺寸设计，首先要确定布局。我们常用的就是上下布局、左右布局、“T”字布局。其他布局基本上是这三者的延伸和拓展。上下布局一般是固定顶部，有点类似于 PC 网页设计，实际上也差不多。现在的B端设计中很多都会搭配着这种布局用，比如帮助中心、消息通知，客户入网申请等（这些我都遇见并做过）。左右布局和“T”字布局，一般固定左侧，右侧区域做自适应。
我们看一下百度统计最新出来的当前计算机分辨率数据，从统计的数据中可以看出，小尺寸的屏幕是越来越少了。但是不是我们就要用最小的尺寸或者用份额最大的 1920 进行设计了？
显然不是按照这个维度来确定尺寸的。对网页设计来说，设计师差不多都知道有一个 1200 有效内容区域的说法。如果没有特殊要求，上下布局也是遵循这个原则的。设计师中绝大部分，包括我很多同事平时基本上用的 1920 和 1440 两种尺寸来进行设计。对于 B 端来说，不管你采用 1920 或者 1440，在做上下布局页面定宽设计的时候，遵循 1200 有效内容区域这个原则就是没有问题的，看了很多文章上面举例了 960、990、1024、1156 等等，大家都不用纠结，没有特殊要求，这些都没啥问题。
上下布局在 B 端设计中是一个补充，有的可能有，有的可能没有，所以用 1920 还是 1440 最好还是根据左右布局来，保持统一。两年前我看过一篇大厂写的布局的文章，用的是 1280 的尺寸，记得是说因为考虑缩小浏览器会发生遮挡或者挤压（别问我为啥还记得，因为当时对于尺寸纠结的太厉害，至今难以忘怀），现在因为技术等方面的发展，个人认为再用 1280 的做已经不合适了。1440 的尺寸目前做中后台是比较通用的，大家也可以参考看一下蚂蚁 Ant Design。至于 1920 的用来设计 B 端行不行呢？我认为也是可以的，我就用过，也没用户反馈说显示有问题，我就当他没问题了。不过我还是建议大家在做 B端设计的时候用 1440 的来做，特别是用户群很复杂的情况下，方便低分辨率的电脑查看。当然如果我们给某一企业做定制服务，那就没尺寸的问题了，照着客户电脑尺寸来就行了。
现在有很多插件可以进行布局，软件一般也有自带布局功能。这里不做陈述：
这里介绍我常用的 sketch 布局。
这里我也创建了一个 1440 的网格系统，供大家参考，大家也可以根据自己的实际情况去建立自己的网格。
顶部高度没有特殊要求建议不要超过 100px，我一般就是 60-80px 内设定的；左侧可以根据目录内容自己设定一下，一般 200 多就差不多了。边距我一般设定 20px、24px。这样再对剩下的距离做栅格就行了，列宽保持偶数即可。
有时候做栅格的时候会遇到一部分列宽是 42px，一部分列宽是 43px，这种设定也是可以的，回归到栅格系统的意义，栅格本质上不是为了保证像素级精确，而是为了保证浏览视觉级别的秩序、协调与统一，所以大家没有必要纠结。
“没有绝对正确的栅格设计，只有最适合的栅格设计”，希望这篇文章可以帮助对栅格有疑惑的设计师们，同时也期待大家留言，大家一起学习探讨。
文章来源：优设网 作者：神经蛙
前言
表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。
生活中，大多数人都不喜欢表单，比如前段时间有一些许久没有联系过的朋友让我帮忙填写一下调查问卷，作为一个热心市民的我，自然是选择点开链接帮忙填写；一鼓作气填了一段时间后，看着剩下的问题，我不耐烦的放弃了填写这个调查问卷。所以作为设计师，我们应该“由内而外”而不是“由外而内”的去设计表单，如何让表单变得更容易让人接受也是设计师应该考虑的问题。
更多兆日UCD的干货：
表单是一种用于信息添加、录入的页面类型。是连接用户与数据库的桥梁，通过引导用户进行信息的填写，从而提交数据给后台。在用户填写提交时，还需要对用户输入内容进行校验与反馈，保证用户信息填写的完整度。
填写表单是一件麻烦事，当我们想做的是投票、网上购物或者添加好友之前，总是会有表单防碍着我们。正因为多数人不喜欢填写表单，所以在做表单设计时，我们的首要目标是让人们迅速轻松的完成填写，同时获得系统和用户想要的东西。
1. 表单拆分
基础表单中会有以下六个元素：
1. 标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。
2. 占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述，当用户输入信息时即消失。
3. 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等
4. 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……
5. 提示：描述该输入项需要的输入类型，如：上传的文件类型
6. 按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，建议将按钮悬浮固定在底部。
当我们开始制作某一表单的时候，我们需要强迫自己思考一下每个元素的 UI 问题：
2. 表单录入模式
表单根据录入模式可以分为：单步表单、分步表单和高级表单
① 单步表单：
单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。
② 分步表单：
内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。
③ 高级表单（分组表单）：
高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。
3. 表单的页面框架
表单的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。
整页式（新页面）：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。
弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。
侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。
我们在选择页面框架时通常需要综合以下三个因素去考虑：
4. 表单的排列方式
① 布局方式
在制作表单的时候分成两种排列方式：单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局：
1. 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上至下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。
2. 多列布局的表单会导致用户的视觉路径变长，用户需以 “Z” 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。
但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。
单列布局
优势：视觉路径清晰，填写效率高，体验好；
劣势：垂直空间占用率高。
建议使用场景：表单内容较少的情况下使用单列布局
多列布局
优势：省空间，能够放置更多的控件；
劣势：视觉路径模糊，填写成本高，填写易出错。
建议使用场景：关联性强的填写项横向排放，且将该列中最重要填写项的放于最左侧。
② 标签对齐方式
标签的对齐方式有：左对齐、右对齐和顶对齐，除了需要考虑单列式布局还是多列式布局，还有我们也需要考虑标签的对齐方式。
马泰奥·彭佐在 2006 年 7 月对表单的每种对齐方式做过眼动测试研究，根据研究结论做出以下分析：
顶对齐标签：
研究中，从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍，后者需要 500 毫秒；比右对齐标签方式快 2 倍，后者高达 240 秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。
优势：眼动测试中移动速度最快，最有利于提高用户填写表单的效率。标签字数相比于左右对齐标签可容纳更多字数。
劣势：纵向空间占用率高，对于小屏用户不太友好（设计前需要考虑用户使用场景以及使用设备）
建议使用场景：希望用户快速完成表单；对标签的扩展性高，有国际化需求（中文转英文，英文会比较长）；更适用于弹窗式、侧边栏式布局。
右对齐标签：
如果要尽量减少表单占用垂直屏幕空间，右对齐能提供快速完成时间。研究中，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在 170 毫秒和 240 毫秒，而填写完成时间比左对齐快 2 倍。
优势：标签和输入框位置紧密，更方便填写
劣势：右对齐的布局会造成标签的左侧不齐，影响快速阅读表单的效率问题；如果增加填写项标题字数过多，整体的表单页都需要修改，右对齐灵活性低。
建议使用场景：适用于需要填写效率但受到屏幕垂直面积限制的页面。更适用于整页式布局。
左对齐标签：
在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。
优势：易浏览标签；占用纵向空间较少
劣势：标签和输入框距离较大，表单填写效率低
建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局
输入字段上方的粗体标签
在顶对齐的情况下，设计师可能会想：如果我们将标签进行加重，这增加了它们的视觉重量，并将它们带到了布局的最前面，这样说是不是可以让用户更好的去完成表单的填写呢？但事实却和设想相反：粗体标签反而增加了用户填写的负担。
粗体标签导致从标签移动到输入字段的扫视时间增加了近 60% ，从没有粗体标签的 50 毫秒到有粗体标签的 80 毫秒，更突出的标签没有明显优势。粗体标签更难让用户阅读和感知——可能是因为粗体文本和输入字段的相邻粗边框之间存在更多的视觉混淆。
小结
标签位置：单从效率角度看，顶对齐>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。在大多数情况下，将标签放在输入字段上方效果更好，顶对齐的情况下标签的扩展性更高，且用户不会被迫分开查看标签和输入字段。需要注意在视觉上将下一个输入字段的标签与前一个输入字段分开。
粗体标签：阅读粗体标签对用户来说有点困难，因此最好使用纯文本标签。但是，当使用粗体标签时，可能希望将输入字段设置为没有粗边框。
1. 什么是表单的校验
为了让用户准确的填写表单，在用户填写表单中/填写表单后，常常会增加我们常说的“反馈提示“，针对反馈信息的准确性，我们会采用两种校验形式：前端校验和后端校验。
① 前端校验：
主要负责校验输入的内容格式是否正确；例如常见的手机号格式是否正确、密码格式是否符合要求。
② 后端校验：
与数据库相关，主要负责校验输入内容是否正确；例如常见的手机号是否存在，密码是否正确。
③ 校验触发条件：
④ 报错方式：
2. 校验形式
根据不同的校验触发条件和报错方式，我们可以组合成以下几种校验形式：
① 输入时即时验证，即时报错
用户在输入的过程中进行实时验证，输入框处于聚焦时开始提示，随着输入的过程，符合要求后已与用户通过验证的反馈。例如在注册阿里云账号时，设置密码需要满足三个条件，这里采取了即时验证。
优点：可以实时告知用户表单的填写时候符合规范
缺点：实时验证会使用户分散注意力，也有可能会引起用户的反感
使用场景：注册时需要设置密码，通过密码不同的组成，时判断密码的强度，比如纯数字密码符合最低安全要求密码，但增加大些字母和小写字母后就形成了更安全的密码
② 失去焦点后即时报错
用户在输入完成后进行验证，输入框失去聚焦后（即用户点击输入框以外的位置后）与用户进行反馈。例如在注册网易邮箱时，填写完毕后即时报错。
优点：为用户修改错误节省时间、避免出现很多错误需要改正的情况。
缺点：如果输入有误，用户需要多一步操作，点击会有错误的输入框进行修改。
使用场景：注册用户名时，取消聚焦后会反馈用户名是否可用，不可用的情况下是被注册还是格式有问题。
③ 操作后（保存/提交/下一步）后全部报错
用户完成表单填写后，点击操作按钮（保存/提交/下一步），系统将表单统一上传到后端数据库中进行对比后集中与用户进行反馈。
优点：减少对用户的打扰，减少后端服务器压力，提高效率
缺点：用户只能点击按钮后才可以得到反馈，不能及时修改；若表单过长，用户返回修改的路径也将增加。
使用场景：登录账号是判断密码是否正确
在大数据盛行的今天，人们不仅仅讲究以事实说话，更愿意以数据讲话。数据作为结果的直接衡量指标，更真实、也更具有说服力，那如何直观的展示数据，帮助决策者做出正确决策或行动，发挥数据最大的价值？可视化数据大屏应运而生，让我们一起来谈谈吧
说到数据大屏的时候，我们要先了解一下数据可视化，那什么叫做数据可视化呢？比较专业的解释是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，并进行交互处理的一种理论、方法和技术，它为我们研究、处理、分析数据提供了理论依据。
我们人的大脑处理视觉信息的速度比文字快几万倍，将抽象的数据转化成图表、图形能更快速帮助我们更快理解数据中的含义，趋势以及相关性。
简单来说，可视化数据大屏，将我们难以理解的抽象的数据概念以图形化的形式展现，方便我们快速理解这些数据的含义，也方便这些重要的信息在最短的时间内传给最重要的人。
数据大屏可分为信息展示类、数据分析类、监控预警类，多展示酷炫的效果，数据之间有层次区分，好的数据大屏是布局、色彩、图表、动效的综合运用。
数据可视化，让很多员工从繁琐复杂的数据工作中解脱过来，那它到底有什么优点呢？
近几年来，国家的相关法律政策相继出台，大数据企业的技术研发水平不断提高，促使大数据行业市场规模从 2014 年的 212.5 亿元增长至 2020 年的 548.5 亿元，数据可视化对于公司发现解锁数据潜在价值意义重大。
有研究表明，人类可以用比处理文字快60000倍的速度来处理图像，可视化能直观呈现大量数据，以前企业员工检测到数据进行汇总分析需要数小时，可视化通过特定的格式来呈现大量数据几乎不费时间。
视觉形式的数据更易理解，数据可视化能快速显示操作、运营与结果之间的关系。企业管理不是凭空作决定，正确的方式应该是，依据所获得的数据信息来做辅助分析，数据可视化内容能让管理人员和决策者清楚看清数据趋势，快速制定及消化关键指标。
比如当上图科学决策平台的网络总数特别时多，决策者可以快速调取相关数据找出异常原因 —— 是上次活动运营推广到位，故增加了很多用户？也就是决策者可以通过异常数据快速钻取数据，用来解释正在发挥作用的运营条件或决策与所遇到的指标之间的关系。
根据Aberdeen报告收集的信息，利用数据可视化的组织能够及时访问信息的可能性比其他组织高28％。数据可视化有助于我们以客户和投资者能理解的方式向他们提供信息，它比PPT更容易让人理解，也能吸引那些对企业内容运作了解甚少的人。
比如上方的区域经济地图，通过地图与定位街道区域内容、颜色结合的展示样式，很容易看出各街道产值、税收等，也更有场景感；居民可支配收入版块，通过颜色区分、大小圆形、时间线来直观展示居民收入变化内容，形象且清晰。
制作数据可视化的工具有很多，最常见的就是Excel工具，非常容易上手，基本人人都会，操作简单，但它的缺点也很明显，没什么特色，静态数据展示过于死板，样式老旧。第二类是Python等编程类工具，这类优点是码数据速度快，自动获取，看起来很高端，但缺点也很明显，如：学习成本高、学习比较困难、很难比较熟练的掌握等。
第三类就是SAAS类可视化工具，这类工具容易上手，操作简单、动态数据自动获取、动态效果无敌炫酷，不需要下载安装，缺点就是部分渲染组件比较耗费电脑配置。那我们今天就来推荐几款常用的SAAS工具。
网易有数大数据是一个企业级的大屏大数据可视化展示系统平台，具有深度的交互式数据探索。它有丰富的使用场景，支持数据接入、数据导入处理、数据分析生成报告等，用户无需编程，简单拖拽即可生成可视化图表。缺点是数据探索性分析能力有限。
网易有数可视化实战案例——业务安全大屏。通过大屏进行业务安全监控，清晰的展示各业务分布要点的数据情况，顶部实时更新各重要区域数据情况，销量对比、售后情况，产品产比，以及用户分布也有清晰的直观展示。
FineBI作为一款商业智能（BI）软件，拥有丰富的报表编辑和数据分析功能，同时它也支持可视化大屏的编辑。决策报表采用了画布式操作界面，通过拖拉拽可以想成一个强大的、全面的可视化大屏，能实现在一个页面整合不同的数据，完美的展示各类业务指标，实现数据多维度分析。缺点是大屏组件不够丰富，开发拓展性不强，不支持云端托管等。
帆软可视化实战案例——银行大屏驾驶舱。通过大屏直观展示银行存款、贷款数据，业务办理详情等，图表形式展示内部管理、外部管理情况，分行放贷统计情况等，便于数据管理查看及决策制定参考。
Data V是阿里云内部的可视化大屏开发平台，同时面向开发者和零基础用户，支持大屏图形化编辑和在线编程开发，可帮助非专业的工程师通过图形化的界面搭建专业水准的可视化应用。
它有海量行业模板，DataV数据可视化设计团队会定期从大量真实项目中寻找优质场景，制作为模板，涵盖媒体、零售、工业、电商、金融、防疫、气象等多个行业，为用户提供会议展览、业务监控、风险预警、地理信息分析等各种设计参考。
产品功能方面，它有丰富的可视化编辑工具，提供多种业务模块级的非图表组件，只要通过拖拉拽便可创造出专业的可视化应用，另外丰富的组件库与模板库包含多种场景模板，简单修改即可快速投入使用。智能化工具拥有主题配色，一键美化、大屏智能生成等工具，快速解决在搭建可视化应用时遇到的整体样式配置困难。专业的地理信息可视化，支持地理轨迹、飞线、热力分布、3D地球等效果，同时数据驱动三维世界生成，低代码交互配置将复杂逻辑可视化呈现，整体效果更炫酷。它还有灵活开放的部署方式，支持多种发布方式，如：链接分享、二维码发布；支持自定义组件接入；支持云上部署，也支持线上开发。
DataV数据可视化实战案例——智慧工厂生产控制大屏，综合呈现了每个生产阶段的生产状态参数，将整个车间的情况汇总到一个调度控制中心，方便管理人员了解各阶段的工作情况。
袋鼠云数据可视化EAsyV，拥有业内领先的数据可视化大屏故事策划、视觉设计、前端和数据开发技术实力，尤其擅长3D模型展示，基于GIS地理信息展示等。它里面有丰富的组件，样式制作精美，支持多种不同类型的数据导入，还有动态面板和交互功能，让大屏看起来更灵动。
EasyV数据可视化实战案例——宁波图书馆可视化平台。大屏包含人流分析监测、读者画像分析、借阅行为洞察等，从多角度全面的帮助用户及时把握场馆运营效果，为其提供馆内建设与活动运营的监控分析服务。
深色的大屏设计能让其数据显示更明显，也方便营造科技感，另外大屏设计图表文字的颜色要统一，避免出挑的内容分散用户注意力，使用图片或者是动态的背景，也可以让大屏更有氛围感。那除了这些，好的大屏还有哪些特质呢？
首先是策划有故事。从客户的真实需求去梳理数据可视化内部的视觉传达，确保内容传达克制有条理，有重点、有故事。尽可能让用户花费更少的时间获取更多信息，完成数据空间到图形空间的映射，让数据的价值被看见。
如上方的品牌销售数据大屏，销售额与门店数，数据明显，与销售额相关内容有季度线上线下销售额，会员数、款式数量、爆款排行等，故这块内容排在左侧。右侧就是区域订单、毛利统计。中间放用户关心的地图区域分布、爆款分析等内容。
其次是可视化要有效率。通过工具软件，数据可视化变得更简单高效，变得灵活易实现，多端适配，加入组件化的拖拉拽操作，加入了多种交互和远程控制，能有效率的实现海量数据实时同步，实现高效率、高质量大屏交付。
最后是大屏要有数据价值。数据可视化最重要的还是要落实到数据上，脱离数据谈美观是不切实际的空想，数据可视化就是要充分利用并方大数据的价值，保证数据实时、全域、精准、让数据讲话。
设计可视化数据大屏时我们设计师要抓住问题的重点，即这样设计出来的内容能不能真的让数据产生价值，能否经得起业务部门推敲？是否为企业经营提供了帮助？思考完这些再去做的大屏更有价值，大屏做的酷炫是其次，能够让人一目了然的看见关键信息，联想到业务实际，才是我们设计师最需要关注的方向。
文章来源：站酷 作者：知果日记YRrui
费茨定律(Fitts'sLw)是一个描述人类运行学的经验公式，用于计算人们移动手指或鼠标等设备到某个目标的时间，以考虑目标大小和距离为主。
费茨定律的公式是T=a+blog2(D/S+1)，其中T是时间，a和b是实验测得的常数，D是目标的距离，S是目标的大小。说明了在给定目标情况下，目标距离越远，需要的时间越长；在给定距离的情况下，目标越小，需要的时间越长。
费茨定律广泛地用于人机交互界面设计中，例如在B端常用的设计按钮上，可根据该定律来选择适当的目标大小和间距，以使用户更好地达到业务目标。
比如在B端产品弹窗界面设计中，确定和取消按钮都会放在右下角，使得用户更容易点击。确定按钮更高频故放在最右边，视觉表现更明显，使其更容易一眼点击。此外，两个按钮之间的距离也很重要，因为它会影响到用户的点击时间，为了让用户更容易进行选择，按 钮间保持12px距离，避免用户误触。
1956年美国心理学家乔治·米勒对短时记忆能力进行了定量研究，他发现人的短时记忆能力广度为7±2个信息块，记忆信息超过了该范围就容易出错。因此心理学家把这个神奇的记忆容量规律称为“7±2法则”。 在人机交互设计界面中，如果要引入新的元素或操作，应该尽可能地减少其数量和复杂性，以便用户更容易理解和记忆。
比如在B端卡片设计中的操作按钮一般会控制在7-2法则即5个操作按钮，若有其它操作会隐藏在更多按钮里面，把频次较高的按钮放在一级展示中，频次较少的按钮放在二级浮窗展示中。通过分解复杂的任务和信息，减少冗余内容使得用户更容易理解且更快完成业务过程。
格式塔原理是心理学的一个概念，也广泛应用于设计领域中。该原理认为人类大脑在处理感知信息时，会自动将信息组织成具有整体性、完整性和结构性的形态，即所谓的“格式塔”。
在设计中，格式塔原理有几个常见应用：
1.相似性原则：相似的事物更容易被视为一组，与不同的事物分离。因此，设计师可以使用相似的颜色、形状、大小等元素来将相关的信息组织在一起，提高信息的可读性和易用性。
2.接近性原则：接近的事物更容易被视为一组，与远离的事物分离。因此，设计师可以使用空间布局来将相关的信息组织在一起，提高信息的可读性和易用性。
3.对称性原则：人类大脑喜欢对称和平衡的形态。因此，设计师可以使用对称的布局来吸引用户的注意力，提高视觉吸引力和美感。
4.闭合性原则：人类大脑倾向于将不完整的形状视为完整的形状。因此，设计师可以使用封闭的形状来强调信息，使用户更容易理解和记忆。
相似性原则的应用比如在B端的卡片设计中，所有的卡片样式相似在人脑理解中默认会视为相同的一组数据。
接近性原则比如在B端的表单设计中，常常会将一组数据通过接近性原则组织在一起，提高信息易读性。
对称性原则常用在大屏与报表设计中，通过对称性布局提高视觉美感，吸引用户注意力。
闭合性原则常用于连续性表格或图形等设计中，通过不连续性来让用户大脑形成封闭路径强调后续可读信息。
比如在下面的表格中通过形状的不连续性反而让用户大脑更快感知到还有信息可以滚动查看。
雅各布定律(Jacob'sLaw)是一条常被引用的交互设计法则，它由美国心理学家Donald Norman提出。该定律指出，人们在使用任何新系统时，都会将他们以前所经验过的类似系统的知识应用于新系统。
雅各布定律的核心思想是，在设计新系统时，应该考虑到用户的现有经验和期望，并尽量避免创造完全不同的界面模式。这样可以使用户更容易理解和掌握新系统，并减少学习成本。
比如在B端设计中常用到的图表编辑快键可以延用用户在其他系统常用到的快捷键，如win或mac系统都常用到的快捷指令可复用到B端产品的快捷操作中。
防错原则(Principle of Fail--Safe or Fault-Tolerance)是一种设计思想，其目的是减少或避免因错误或故障而导致的不良后果。它通常被用于设计高度可靠的系统或设备，以确保在错误事故发生时，系统或设备仍然能够继续正常运行，或者能够平稳地停止运行，以避免进一步的损害或危险。
在界面设计中如设计可撤销操作，通过系统中允许用户执行可撤销操作，以避免因误操作而导致的不良后果。
或在界面设计中常用到的反馈和提醒弹窗等操作，以帮助用户及时发现错误或故障，并采取适当的措施。
泰思勒基本定律(Tesler’sLaw)由Larry Tesler于l984年明确提出，也称 「复杂性质量守恒」。
该基本定律觉得：该定律认为每一个过程都有其固定的复杂性，存在一个临界点，超过这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。
可以通过简约至上的隐藏、转移、删除等原则进行用户体验的提升。
早在14世纪，哲学家、圣方济各会修士奥卡姆的威廉提出来了奥卡姆剃刀原理，这个原理说的是“切勿浪费较多东西去做较少的东西同样可以做好的事情”，后来以一种更为广泛的形式被人们知晓“如无必要，勿增实体”。
奥卡姆剃刀常用于两种假说的取舍上：如果对于同一现象有两种不同的假说，我们应该采取比较简单的那一种。对于几个功能相同的设计，在设计都可用的情况下，则选择视觉干扰较少的设计。
在设计上则能够指导我们对产品做减法，去减少不必要的元素，在进行设计的时候，先分析用户的的主流程是什么，流程内的引导尽量弱化，没有必要则不增加。
比如在B端产品设计中的登录页面以登录流程为核心，不需要增加其它没必要的流程。
除了以上七大定律外，也有尼尔森的10大设计原则，与以上定律基本一致。总而言之，交互设计规律的宗旨都是帮助设计师创造易用、高效、愉悦的用户体验。在B端产品设计中，将交互定律贯穿于产品设计中可以提升产品易用性，降低学习成本，使产品更规范，对企业用户的工作效率与商业价值都有积极的影响
文章来源：优设网 作者：丽创轻文
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
六、B端C化未来的设计方向
文章来源：优设网 作者：酷家乐UED
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
相信很多设计师同学都接触过B端产品，对于很多设计师而言，遇上B端产品是一件令人又爱又恨的事情，爱是因为目前市场上大多数的公司主要经营的都是B端系统，B端系统相对于C端来说UI界面显得并没有那么的重要，所以设计师的责任也相对没有那么重，而恨是因为目前大多数B端系统页面都是由前端UI框架搭建的，前端同学很多时候直接套用组件即可，所以UI设计师对于整个系统来讲也显得可有可无，导致设计师话语权也特别的低，甚至有些做B端系统的公司压根不用UI设计师也能完成项目开发。
但是作为交互设计师(小公司一般是产品经理)在B端却特别吃香，并且拥有主要的话语权，因为我们主导这整个系统的基础逻辑与业务逻辑设计，所以无论是前端还是后端同学都需要根据我们的设计进行开发，最终完成整个系统。
因此，今天这篇文章并不是告诉大家有哪些前端UI框架或后台组件等..（相信这些大家也看得太多了，工作中都是套框架，能用得上的没几个），而是从交互上如何去看懂B端后台的基础逻辑以及以后自己晋升成产品经理或者交互设计师时，怎样去设计一个完整闭环的系统。
B端产品和C端不同，C端产品大多数都是针对个人用户，设计的关系结构相对来说比较简单，每一个用户拥有的权限都是一样的，例如微信、淘宝等，我能看到的页面你都能看得到，很少不存在权限差异问题。
而B端产品的用户一般都是企业，企业用户一般会管理着多个角色，也就是角色多元化（例如一些校园系统角色就分为：普通教师、级长、主任等角色），不同的角色对系统的需求和职能也不一样，我们需要根据角色的需求去划分不同的权限，让他们互不干扰但又满足他们的需求问题，因此B端产品的基础逻辑比C端产品相对复杂。
看完上面文字的同学可能蒙了，又角色又权限的，能不能说点人话？
行！其实很简单，B端系统无非三个逻辑（也是三个页面）：用户管理、角色管理以及菜单管理。（有些系统因为业务需求可能有部门管理，那么算上部门管理就四个）
为什么我把菜单放到最前面跟大家讲？是因为菜单管理比前面两个相对简单，而什么是菜单也特别好解释，大家可以直接认为系统左侧的页面列表就是菜单，系统中拥有多少个页面那么就有多少个菜单，你的菜单越多就以为着你的权限就越多。
菜单管理的作用就是用于管理员对整个系统页面的管理（管理最主要就是增删改查），而有一些公司为了减少开发工作量会直接不要菜单管理，有多少个页面都由代码直接写死，管理员不能通过页面进行人工配置，这样会导致以后扩展会非常麻烦，当然了，有一些系统的菜单几乎不改的话，代码写死也没问题。
在讲解用户之前我需要提前跟大家讲一下什么是权限，准确来讲应该是权限分为哪些？
在目前的后台系统中，权限一共分为三种权限，分别是菜单权限（也就是上面介绍的）、数据权限以及操作权限。
菜单权限决定了用户有没有这个页面，例如学校系统中，主任有看到所有教师的教学数据的界面，而教师却没有这个功能，那么在给主任新增账号的时候就应该把对应菜单赋予进去。看上去很复杂，其实具体操作就是新增的时候把对应的菜单勾选上就可以了。
数据权限则决定用户能不能看到对应的数据。还是学校系统的例子，初中部主任只能看到初中部所有教师的教学数据，而高中部主任也只能看到高中部教师的教学数据，不同用户能看到的数据也是不同的，所以在新增的时候需要给用户配置（一般配置就是勾选）好对应的数据权限。
但是这里有一个问题，配置数据权限时我们如果一个一个人去勾选配置的话会特别的麻烦，假如初中部主任只能看到初中部的老师，那么我在给他配置账号的时候需要一个一个的初中老师勾选上，张三、李四、王五..等等，如果人多的话可能需要勾选成百上千次，用户体验就会变得特别差，因此现在的系统在配置数据权限时都是以部门为单位进行配置，也就是说，直接选择部门就代表着拥有整个部门的数据权限。
最后操作权限即决定了用户有没有对数据进行操作（一般是增删改查）的功能。还是上面的例子，初中部主任拥有查看教师的页面以及数据，那么他能不能对教师们的数据进行增删改查或者导入导出呢？这就取决于操作权限的配置了。目前很多的后台系统在配置菜单权限的时候同时需要把操作权限进行配置（因为只能先有页面才能进行操作），操作权限一般就是增加、删除、修改以及查询，当然如果页面还有导入导出或者其他功能，这些也需要在操作权限中进行配置。
用户其实也很容易理解，B端系统的用户其实就是需要登录进系统的账号，所以有一些系统的用户管理也叫账号管理。
因此用户管理的作用就是对登录进系统的账号进行增删改查等，当我们需要对别人提供一个账号时，我们就新增一个用户的账号密码给他们，直到他们用完了再把他们的账号进行删除。
那么问题来了，上面我们说到，不同的用户可能有不同的需求问题，那么就意味着我们每一个用户给要他们分配不同的菜单去做他们的事情。
例如在学校系统中：普通教师只负责自己班级学生的成绩录入，所以普通教师只有班级成绩录入的菜单，但是学校主任却不一样，他不仅仅能看到各班学生成绩，还能根据各班成绩进行对比分析，年级学生排名等等..
因此在刚开始的传统权限系统中，我们会直接把相应的菜单权限、数据权限、操作权限赋予给用户，每新增一个用户我们就选择好所有的权限都勾选上赋予给用户，最后提供给用户进行操作。
然而这种操作方式有一个弊端，就是如果每新增一个用户，系统管理员就需要重复进行勾选相同的权限，那么就会耗费大量的精力（一个用户要配置的权限特别多，如果用这个方式操作的话新增一个用户可能就需要花费很长时间）。因此，为了解决这个问题，我们在用户与权限之间建立了角色管理。
系统中角色的定义其实跟生活中是一样的，我们把固定的权限集合到一起从而形成了角色。例如，生活中UI角色就负责页面的视觉设计，而交互设计师则负责了产品的逻辑或者用户体验设计，这些角色拥有的权限一般很少变化，也几乎不会进行删除或者修改，就好像UI设计师或者交互设计师这些角色不会一时半刻就被完全消灭一样。
有了角色，我们可以先把对应的权限集合赋予给角色，然后新增用户时，再选择用户对应的角色即可。
这样做的好处是什么呢？好处就是当我们新增用户的时候，如果是相同角色的用户，我们不再需要重复去大量勾选相应的权限了，只需选择好该用户是那个角色就可以间接对用户赋予权限，并且后续要对用户进行权限的修改也十分便捷。因此，在现在的后台系统中，大多数都是采用权限赋予角色，然后新增用户时再选择用户对应的角色的方式。
如果看完上面的知识点还有点懵的话也没关系，这部分给大家展示在后台系统中菜单管理、角色管理与用户管理的实际应用是怎样的。
第一步先查看菜单管理有哪些内容，一般情况下，一个成熟系统的菜单页面几乎是已经固定不变的，那么也就是说菜单管理列表中所拥有的菜单都不需要怎么操作，列表中有多少数据就代表着系统总体有多少菜单。
第二步进行角色管理，如果是成熟系统的话，角色管理的角色也早已经分配好了，我们并不需要过多的进行操作，但如果是刚研发完成的系统，那么我们就需要根据现实的用户需求进行角色的设置，具体添加角色的主要参数包括角色名称、菜单权限、数据权限以及操作权限（其实也就是上文介绍的三种权限），其他的参数都是根据自身业务进行添加。
最后一步就是用户管理，配置好角色后，我们就可以根据需求进行用户的新增操作，例如现在我们需要新增一个账号进行登录系统，那么在用户管理页面中点击新增按钮，随后填写用户名称与密码，最后选择用户角色，点击确定按钮即可完成（因此，新增用户的三个必要参数是用户名、密码以及角色，有部门的需要填写所属部门，其他参数根据系统业务进行添加）。添加完成后你们可以试一试使用自己所填写的用户名密码登录后台系统，随后体验一下作为其他角色是否能完成自身需要的业务。
用户管理、角色管理以及菜单管理是B端系统最基础的逻辑，也是同学们将来需要转岗B端交互设计师或者产品设计师所必须掌握的知识，上面所介绍的仅仅是RBAC模型中最简单的一种，现实设计中可能出现各种情况，因此关于这次的B端产品设计我想给大家几点Tips：
1、在现实开发中，后台系统并不一定像我上面所说的那么完善，有些系统并不需要菜单管理，老板要求直接代码写死就好了，又或者有些系统就只有一个角色，那么角色管理也不需要了，这些情况都是有可能发生的，所有我们做设计的时候除了运用自己的知识以外，更多的是工作经验，知识是死的，人是活的，永远别忘了设计的本质是解决用户需求问题。
2、很多时候后台的逻辑管理会比我上面说的要复杂的多，例如一个用户可以拥有多个角色吗？不同角色能不能有相同的权限？如果有角色被删除了，那么该角色关联的所有用户应该怎么处理？可能你认为这些并不是自己目前需要考虑的问题，但是除非你以后并不想晋升到更高的位置，不然这些问题以后肯定会遇到的。
3、上面介绍的管理操作都是基于超级管理员账号（admin）进行操作的，如果你拿一个普通账号的话一般是没有对应的菜单权限，我担心有同学看完文章后马上登录自己的后台系统进行操作，接着登录进去找了半天都没有找到对应的菜单在哪里。
好了，最后希望文章能让大家有所收获，如果大家有不明白或者其他想法的话，欢迎大家一起探讨，共勉。
文章来源：优设网 作者：北沐而川
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计规范是指对设计的具体技术要求，是设计工作的指导规则。一般包括总体目标的技术描述、功能的技术描述、技术指标的技术描述,以及限制条件的技术描述等。
Design System 最开始是 Guide 演化而来，Guide 是一套可指导、可延续、可扩展、可统一的、可区分的视觉指引手册，指导相关设计结构完成统一性与对外区分性。具象层，它是一种设计方法；抽象层，它是一种思考模型。
设计规范一般会具体到公司级别、某一类产品线、某个产品等。今天主要讲具体某个产品的设计规范，主要是为该产品制定统一的用户体验、品牌、视觉等方面的规范，当然是在满足以上公司级别和某一类产品线层次的设计规范的基础上。
设计规范由设计原则、设计语言和组件库构成，在设计原则的指导下使用设计语言和组件库创建体验一致的用户界面。
设计原则是指：整个设计体系所要遵循的全局原则，是为我们设计提供方向指导的。
设计语言：是指设计所包含的语言体系。具体包含了：色彩、字体、图标、布局等。
组件库：相当于积木玩具的一个个积木，每个组件就是一块积木，通过组件的拼搭可以迅速搭建出一个个页面。下面我会具体说明组件库。组件库具体包括：按钮、导航、表单、数据等等。
B端产品和C端产品制定设计规范差别还是蛮大的，最主要的差异大致是：
C端产品的设计规范：目标几乎都是为了更好的打磨用户体验的一致性和标准化；
B端产品设计规范：由于用户体验更复杂，学习成本更高，所以它的目标侧重点是：除了布局的不同外， 相同业务场景下，相同产品功能需要有一致的，标准化的体验，降低学习成本，提高工作效率，即统一体验。
创建原型时可直接调用组件库，能搭建出高保真的原型。
与设计师和前端沟通更加顺畅，小的修改可以直接和开发沟通不需要通过设计师出图，极大增加了前期的节奏，提升沟通效率。
对于只有一个设计师的项目：可以让那个设计更加规范，有些简单功能迭代可以直接个研发沟通，不用再单独出图，减少重复性的工作。
对于同一个项目由多个设计师共同协作时：可保证设计各方面包含体验、设计、交互等等的统一性。减少设计成本，提升设计及沟通效率。
对于接手新项目，能尽快的了解产品，快速入手。
对于开发完成验收走查，有了前期的规范及比较详细的设计尺寸，开发的设计还原度会更高，减少重复及没必要的设计走查。
开发可以按照设计规范建立好公共组件库，极大的提升开发效率。
可复用的东西确定了下来不会频繁改动，设计走查的问题也会逐渐减少。
对于模棱两可的交互可以有地方看交互样式了，不需要再询问设计师。有更多的时间专注于测试功能上的问题了。
通用的组件前期测试后了以后，后续就不需要重复测试，极大的提升工作效率，避免重复工作。
前期制定及评审设计规范以后，有一套笔记明确的规范，可减少各个职位方面的沟通成本，提高沟通效率。
目前市面上有很多多的第三方设计规范，比如：antdesign，element，那有人就会问有必要自己重复造轮子做一遍吗？
我觉得是非常有必要的，为什么呢？
1、每个产品有各自独有的品牌调性，如果都用第三方 的设计规范，那同质化会很严重，很难做到差异化，也就很难在竞争中脱颖而出。
2、 世上本没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。
3、第三方的的成熟的组件库，我认为应该把它当成模式，在他们的基础上去做自己的设计规范。
个人工作中总结出两个比较建议的规范建立时间点，探索期和成长期。
产品在导入阶段，产品还在处于极大变动的时候，这个时候做设计规范，其中就蕴含可极大的风险。但是也不是不做规范，这阶段规范主要涉及到色彩，字体，间距，布局，栅格等通用设计原则以及常用业务组件的定制。此阶段搭建的规范具备高效性以及灵活性的特点。
不适合搭建特殊的业务组件，比如：当领导想要突然调转方向也不会很慌，改动较小就可以完成整体的规范转向）此时搭建规范组件库需要考虑到预留后续更改的空间。
当产品进入成长期处于较为稳定的版本，整个团队对业务的理解也都很熟悉了，这个适合创建符合业务场景的组件库，有了前期的积累这个组件库会更加符合产品及业务逻辑。
在制定规范前，设计师需要明确产品中主要有哪几种分类，将最基础的分类定义好方便后续针对分类内容进行整理。B端产品与C端产品既有共同性也有着很大的差异化，可以借鉴但是切忌生搬硬套C端的设计规范。
Ant Design是由蚂蚁集团体验技术部经过大量的项目实践与总结，逐步打磨出来的，基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验，是非常完整的一套设计规范。
TDesign是腾讯企业级设计体系，也是去年才发布的。虽然才发布，但是作为一款诞生于腾讯内部开源，却是经过了超500项内部业务检验的企业级设计体系，TDesign 汇集了腾讯众多优秀组件库能力和设计研发经验。
内含丰富可复用的设计组件资源，如色彩体系、文字系统、动效设计等，覆盖支持 Axure、Sketch、Figma、Adobe XD 等各大产品设计软件。可以按照需求查看对应组件的使用教程和代码演示，只需简单的引入操作，即可搭建属于自己的产品界面。
Element是由饿了么公司前端团队开源一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源。4、AT-UIAT-UI 是一款基于 Vue 2.x 的前端 UI 组件库，主要用于快速开发 PC 网站产品，在众多的的组件库中，AT-UI 属于视觉风格比较清新的一款。
是有赞 PC 端 Web UI 规范的 React 实现版本，提供了一整套基础的 UI 组件以及常用的业务组件。通过 Zent，可以快速搭建出风格统一的页面，提升开发效率。目前有 50+ 组件，这些组件都已经在有赞的各类 PC 业务中广泛使用。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目标是创造一个将经典的设计原则和科技、创新相结合的设计语言，并且在不同设备上提供一致的体验底层系统，并同时支持触摸、语音、鼠标、键盘等输入方式。
iOS 的人机规范指南，保持了苹果一贯的风格。虽然没有 Material Design 规范那么细致全面，但是核心的设计原则在每个组件的设计说明中都有渗透。作为 iOS 系统的设计基础，建议每个设计师都需要仔细研究。
Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。
NutUI-JDL 是一套基于京东物流视觉规范的移动端组件库，包含了36+高质量组件和详尽的文档和实例。
设计师在开始准备设计规范时，首先需要确定设计风格和设计尺寸，页面布局是做居中固定式，还是全屏响应式。如果是全屏响应式的网页设计，那要选择怎么样的屏幕来做效果？等等这些问题
接下来分别来展开说明。
纯白风（网页大背景是纯白色;文字背景是线框，轻淡色（灰）;文字一般用深色）
轻淡风 (网页大背景是浅灰色;文字背景是白色;文字一般用深色）；
深色风（网页大背景是深色;文字背景是带有透明度的纯色；文字一般用白色）
我们在开始设计之前，要确定好使用哪种风格，一旦确定下来，后面的所有页面和元件的设计，都得基于这个风格来设计。
据数据显示，目前市面上比较流行的是：轻淡色背景风+全屏响应式的设计风格，也是相对比较保守安全的设计。
接下来需要考虑尺寸是做居中固定式，还是全屏响应式。全屏响应式的网页设计，选择怎么样的屏幕来做效果。
设计规范中，分辨率尺寸的问题，一直以来是我们设计师讨论最多的。
决定产品设计尺寸分辨率大小的因素大致包含以下两点：
目前市面上主流的排在前3的屏幕分辨率为1920*1080，1440*900，1366*768。
做B端产品时，现在市场上的设计师一般都会采用的是1440*900。为什么不用市场占有率最高的1920*1080和1366*768呢？
1、由于B端产品的特殊性，它的尺寸分辨率大小，是取决于用户使用的电脑设备条件。由于员工电脑显示屏大部分都是统一采购的，尺寸也就大致统一，所以开发适配的分辨率可以按这个统一尺寸进行设计。
2、因为它的兼容能力会比较强，向上适配或者向下适配误差会比较小，不管是市场占比最高的主流1920*1080尺寸，还是一般般的1366*768尺寸，都完全可兼容。
注意：别忘了设计出极端情况（宽度为1280，以及宽度为1920）的效果图，力求前端开发实现的效果和高保真设计图误差最小。
假如你产品的用户用的设备主要是市面上占有率最高的24寸办公室显示器，也就是1920*1080分辨率的话，那毫无疑问，在选择设计尺寸上，直接选择1920*1080分辨率。
比如我现在做的产品，除了移动办公，web基本都是固定办公，管理人员使用的办公设备（电脑）屏幕一般都是台式电脑，那这个时候，我们在设计时就会同时考虑它的占有率和兼容能力。所以我们采用的是：1920*1080分辨率。
所以设计师们在选择尺寸上，一定要灵活使用，不能一味的认死理只选择1920 或1440某一尺寸，而是要对您的产品用户的具体情况做好分析，从而得出最适合你们产品的设计稿的尺寸。
注意点：
如果希望设计稿完全还原程度高的话，还特别要考虑浏览器的适配，比如说它的顶部固定区域（当前网址，书签栏等的高度）必须排除在外，剩余的部分才是我们设计稿的真实高度。
拿我们常用的谷歌浏览器举例，如下面公式所示：设计实际高度=电脑分辨率 -（网址栏+书签栏+页签高度)
上下布局包括："顶部菜单栏、主体内容"两大区域。其中顶部菜单栏是固定不变的，主体内容根据不同分辨率进行自适应动态缩放。另外还需要把主体内容左右两边空白区域最小值确定好；
优势：内容区域可操作空间大。
劣势：导航区域限制数量，如果导航选项内容比较多，用顶部横向导航的话，就会显得很拥挤。另外，横向导航一般有“展开”，“折叠”，和“收起”三种状态，加上内容很多的情况下，横向导航就特别难做到尺寸适配。
左右布局包括："左侧菜单栏、顶部栏、主体内容"三大区域。其中顶部菜单栏、左侧菜单栏是固定不变的，右侧主体内容根据分辨率进行自适应动态缩放。
左右布局时，左侧菜单是支持收缩或展开，收缩状态下也需要有固定的宽度。
优势：导航部分可扩展性强，适合导航选项内容都是比较多的情况。且只有“展开“和”收起”两种状态，在不同屏幕情况下，宽度的自适应也能更加得心应手。
劣势：相对内容区域空间变少。
现在很多后台管理系统采用，"顶部一级导航栏、左侧二级菜单栏、主体内容"三大区域。其中顶部菜单栏、左侧菜单栏是固定不变的，右侧主体内容根据分辨率进行自适应动态缩放。
优势：结构更清晰。可承载更多层级内容。更适用于复杂且层级多的产品。
所以，可以得出结论：设计师在选页面布局的时候，要全局考虑产品框架及内容。
1、如果导航选项内容比较多的话，或者不确定有多少内容的情况，从美观和操作难易程度、可用性来评估的话，选择第二种左侧导航是最适合B端产品使用的。
2、如果内容选项确定很少，就没那么多限制，“左侧纵向”"顶部横向"都好使
特别要注意
1、同一个产品需要考虑它的统一性，不能这里使用顶部横向，那里用左侧纵向。
2、如果是个更新迭代的版本，就还得考虑老用户之前的使用习惯，避免引起不必要的麻烦。
在确定好导航的布局后，就基本上能确定整个产品的页面布局了。
B端产品，一般会在整个页面的左上角放企业的LOGO，顶部栏高度48+8n，侧边栏宽度200+8n。
我常用的是顶部栏高度：56px或80px，侧边栏宽度：200px，侧边栏收缩状态宽度：56px或80px，右侧的侧浮窗宽度：400px。（具体高度宽度尺寸，设计师可根据具体情况来定，不需要按部就班这么死板）。
同时需要确定好主体内容的上下左右边距，以及主体内容区域中各模块的安全距离，内容超出区域的，通过滚动查阅更多。
Windows系统：中文Microsoft YaHei(微软雅黑），英文Arial；
Mac字体：中文PingFang SC（平方字体），英文 Helvetica；
常见的字体大小为：12px、14px、16px、18px、20px、24px、26px、28px、30px（一般都是采用偶数字号，文字大小12+4n）。
注意：
在设计过程中，设计师对字号应该有一个全局观，在同一个界面内，尽量少用大小太接近的字号。比如一个页面中，如果同时用了12px、13px、14px、15px、16px、18px排版，文字的层级对比会比较弱，没有主次之分，用户阅读困难，视觉效果也显得凌乱。
所以，刚接触B端产品的小白设计师，如果不知道怎么运用不同字号字体的情况下，可以直接以这组字号12px、14px、16px、20px、34px的字号为参考使用，这样的分布会层次明晰，能够有个比较不错的布局结构。
“行高”根据文字大小和使用场景来定，公式如下，
行高=文字大小+8px（或6px，视情况而定，我常用8）
例如：12号字体的行高=12+8=20px
同一个界面中，一定不要出现多个不同字体。尽量选择用户设备里自带的字体来进行设计，比如说WIN系统默认用系统自带的“微软雅黑”，不能使用特殊字体。
如果必须要用特殊字体，建议用图片替代。如果用户的设备里没有你使用的这些字体的话，会默认显示设备的系统自带字体，最终效果就会和你的设计稿相差很多。
从视觉方面来讲，为了让整体界面更简洁具有美感，体验感更好，在使用字体方面，一般字体种类不超过2种，越少越好。因为页面的层次感主要是靠字号大小及颜色拉开层次，如果字号在变，字体种类也各种变化，整体就会感觉很凌乱，没有统一性。
颜色规范包含“品牌色”、“辅助色”、“中性色、图表色”四部分。
品牌色系：即产品主色调，主色调的设定直接影响产品气质和直观感受，也是产品的对外的形象。品牌色是根据这个产品的特征和定位、用户群，以及使用场景等综合考虑最后确定的。
品牌色的一般用于LOGO 、操作状态、按钮颜色、其他一些可操作图标等。
1、品牌色一般建议选择冷色系。这样有效避免与“错误提醒”的红色、黄色相冲突，让人误解。但要是被硬性要求必须选暖色系作为主色调，就得格外注意调节好主色调与错误提醒的区别了。
2、注意选的品牌色（主色调）不要太刺眼。要保证用户长时间使用也不至于颜色太亮太刺眼，而产生的视觉疲劳。
辅助色系：辅助色一般用于“提示”。类似：成功、失败、警告、无效等内容等。
中性色系：中性色涵盖黑、白、灰三个不同层级，通常在文本、背景、边框、分割线用到它们。同一色相，只要改变它的透明度就能表现出不同的层级。
B端产品的文字中，一般会有：一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字、说明文字等。
为了区分层级，提升用户的阅读体验感，通常会根据具体需求，把字体颜色的深浅，大致分成3到5个层级。常见的有#333333、#666666、#999999这个组合，这个组合的层级区分比较分明，适应性比较广，设计师在设计时可以直接作为参考。
图表色：我们常见的后台管理类产品， 像数据可视化、统计图、多个标签的不同配色方案，所以一般还会设定图表的颜色。
按钮是任何用户界面不可或缺的交互元素，B端产品中用到按钮的场景特别多，类似：登录注册，保存，表单，弹窗，导航，提交，确认等等。
常见的按钮形式包含这六大类：图标文字组合的按钮 ，主按钮，次按钮（线性按钮），按钮菜单，文字按钮，图标按钮。
常见的按钮交互状态包含六种：
正常状态、聚焦状态（使用Tab键或方向键来对网页进行访问输入的聚焦状态，在设计时很多设计师都会把这一状态忘记，导致用户无法用方向键控制光标位置，会降低用户的使用体验感）
悬停状态（鼠标正在按钮上，但不点击，需要注意的是平板电脑和移动端设备上不会展示悬停状态，因为手指跟光标不一样，无法在屏幕上进行悬停 ）
激活状态（点击按下状态）
加载状态（等待期间不可操作，在B端产品中Loading状态特别重要，能缓解用户的焦虑情绪）
禁用状态（不可操作状态，置灰显示和透明度（40%）代表不可操作状态）
按钮圆角：在开始设计产品之前，设计师都需要对按钮圆角有具体的规划。按钮四角都是直角会比较有距离感和强烈的引导性，容易分散用户注意力，所以我们一般会采用视觉上给人比较柔和亲近感觉的圆角按钮。
但按钮的圆角并不是越大越好，因为在相同尺寸下，按钮圆角小的，操作热区会更大，页面的使用效率也会更高，更容易操作。同时还要特别考虑到下拉菜单的设计，所以圆角大小一般采用偶数：2px,4px,6px,8px,16px为宜，不宜过大（这里的圆角弧度的值有一定的倍数关系或基数关系，例如：4/8/16, 4/6/8，4/8/12，都是可行的）。
注意：圆角大小也会跟着按钮尺寸的大小有相应的变化。
在B端产品中，当确定好网格基数时（通常网格设定为：4px。按钮的高度会分两种情况：
1、一种是宽度为高度的倍数关系。
2、第二种是如果宽度为高度的倍数关系，从视觉上看达不到想要的效果的话，设计师就可以灵活设置。
讨论到按钮的尺寸，我们需要大致知道如何设置网格基数。
在设计中，我们需要在常用的绘图软件（如：Ps、Sketch）里找到我们的网格功能，设定好一个数为基数，然后按照这个基数来进行按钮的绘制，按钮就相对比较规范了。
那如何用绘图工具设置网格基数呢？方法如下：在Sketch绘图工具中找到：【视图】-【画布】-【网格设置】- 弹出网格设置对话框进行设置就好了
把网格基数设置为【4】的原因：它是谷歌Material Design绘制小组件的规范，模块之间定义的基数就是【8】。
假设我们定这个基数为4，那采用的尺寸数值就需要是基数4的倍数。比如B端产品中，常用的按钮高度尺寸有：24px、32px、36px 、40px、48px，这些都是可以整除基数4的值。例如：32/4=8，40/4=10，这里的4为基数。
按钮的宽度尺寸，一般是确定好文字到边框左右两边的距离（例如如图Padding值为12px)后，开发会根据文字内容的多少自适应的。
按钮间距，按钮之间的间距也遵循基数为4的倍数，比如：16，24，32，40，48等。这里的基数定为偶数（一般为4或8）
从广义的定义来讲，表单是指用于数据录入的一切形式。从狭义上来讲，表单在大家更广泛的认知印象中，表单则是一类包含输入框、下拉选择框等常见控件的组合形式的页面才属于表单。表单的本质核心是提交数据，所以凡是具备采集数据并完成采集后提交数据的交互形式均可称之为表单。
表单在设计上的结构有：1、标题；2、表单标签；3、占位符；4、表单域；5、提示信息；6、操作按钮；
表单的设计必须优先考虑为用户减负，提高效率并简化填写流程。另外表单中组件的选择需要依据具体的数据类型和具体的业务场景进行合理正确的选用，为用户提供高效的数据录入表单，降低用户操作成本、认知负担，并提高数据采集效率才是表单设计的根本目的。
可交互输入域，是构成表单的核心内容，是表单用来采集数据的入口。输入区是用户交互最多也是最能影响使用体验的区域，不同类型数据选择与之相应的录入方式，对提高表单操作效率和用户体验大有裨益。
表单并不是把一些不同类型的输入框排排版、标清楚必填非必填、哪些表单比较复杂适当的加个说明就完了
其实，表单设计远远不止这些，表单本身也是一个小产品，它也需要有需求的支撑、也需要嵌套使用情境、也需要考虑用户的心理模型；从表单的产生到表单在页面上如何呈现，再到使用表单时与表单之间的交互，每一步都需要投入大量的思考来做好表单。
后面我会专门有一篇16000+的文章聊聊这个B端产品中比较核心的表单，有兴趣的朋友可以关注一下，大概五月份就会发。
表格在整个B端产品比较常见的，它的地位也是相当重要的，我们在设计表格时需要注意一下几点：
一般以左对齐为准。与左边表格边距尽量保持在10px以上的间距。（特别注意：金额和操作的标题和内容需要右对齐）
默认展示的列数为3-8列，如果需要展示更多列数，则需要优先固定展示重要列，其余的列的内容会以滚动条滑动而展展示出来。
宽度的尺寸大小自适应，但需要根据文字的重要性显示，重要文字内容优先完整显示。
字符不要多，最多可输入8个。如果文字太多，就需要做文字信息精简化。
表格内容超过一屏，就需要显示竖向滚动条，注意：表头需要固定，但表格内容可滚动展示。
表格的某些单元格无数据内容时，需要用“—”表示，需要区别于“0”。
标题栏高度（标准高度为56px）；内容栏（标准高度为56px，偏大的标题栏高度为80px），内容区和标题栏水平居中对齐。
列的对齐方式（垂直方向）除了需要始终保持“右对齐”的：金额，最右侧操作列内容外，其他的内容可自行左对齐或右对齐。行的对齐方式（水平方向）
当表格栏的高度尺寸小于80px 时，一般只有一排内容，内容水平需要居中对齐。当表格栏的高度尺寸大于80px时，如果是有两排内容，所有的内容需要顶对齐；但是如果既有一排内容 又有多拍内容的话 ，内容水平则需要居中对齐。
表格中的内容，会根据字段的长短定义所占的百分比，完成表格占比，从而达到希望实现的最佳效果。
滚动条分为横竖两种，当表格内容超过一屏时，就需要显示滚动条。竖向滚动条时， 需要固定表头标题栏和页码。只需滚动表格内容部分即可。横向滚动条时， 需要固定第一列 和 正在操作的项列。只滚动表格内容部分即可。
仅提示用户相关内容，不需要用户做任何交互动作。类似：toast弱提示通知提示等弹窗（（一般3-5秒会自动消失：包含普通信息，成功信息，失败信息，警告信息）。
另外还有，鼠标经过的时候即可出现而不用点击的弹窗（这个弹窗通常会设计一个浮动带有阴影效果的框，不需要遮罩）。比如提示说明，显示更多信息，鼠标移过后立即消失，它不会影响下一层（当前页面内容）页面的视觉效果和操作。弱弹窗尺寸一般根据文字多少自行适配。
第二种是强弹窗。它是一个需要用户必须对这个对话框进行操作后才可以离开。
例如弹出的列表，详情，表单等的确认信息弹窗、错误提示弹窗。这些强弹窗一般会对下面一层的页面做一些遮罩处理，例如添加上一层有透明度（例如30%，50%都可以）的黑色/白色，给下一层页面的内容做模糊滤镜等等；
在写弹框规范时，应了解各自项目中需使用弹框的有哪些内容，给出相关大小弹框的比例，哪些为固定尺寸，哪些为适配比例。以及对于通知提示给出停留多少时间后自动消失，弹窗弹出状态等等相关的交互规范。
缺省页是互联网中常见的场景，当遇到网络不好、页面中没有内容数据、暂无资料等等情况，所导致的空白页面。
大致分可为：系统类缺省页，信息类缺省页，空白类缺省页。
遇到这些情况时，设计师一般采用一些插画&文字的组合放置本来空白的页面中提示或引导用户进行下一步操作，以缓解用户的焦虑情绪。（也就是我们常说的情感化设计的一种方式）
设计规范很大一部分是组件库，所以就把组件库单独拎出来聊聊。
做一个比喻，组件库相当于积木玩具的一个个积木，每个组件就是一块积木，通过组件的拼搭可以迅速搭建出一个页面，而设计规范就相当于搭建的“说明书”。
通常我们将组件库分为基础组件和业务组件两大类，前者是系统通用组件（图标/按钮/输入框等），后者是由业务决定的相对更复杂的组件模块。
而对于B端产品和C端产品，二者的组件库又有些许差异。C端的组件库更追求极致的交互和视觉体验，因此需要考虑视觉、性能、实现、兼容性，另一方面，C端会根据活动、节日切换不同的主题，也要考虑组件视觉上的个性化扩展。对于B端而言，组件库更看重可复用性和稳定性，保证可以支持业务快速迭代。另外B端会涉及到各种各样的数据录入与展示，因此相对更高的要求是大而全，覆盖面广。
在业务已经发展到一定体量情况下，需要将项目中具备复用性及拓展性的模块进行拆解，对于B端产品来说筛选的时候会依据之前迭代的版本内容，把页面一一罗列出来，将可替换与相似的模块提取，并利用思维导图的方式统一归纳，并做成可以被替换的组件。组件的替换建议合成一个大的排期进行替换，避免了线上组件不一致导致体验问题。
以我们现在的产品为例：依据产品类型将组件拆分为：基础组件 、业务组件、数据可视化组件、常用模块。
将产品拆分后，此时得到很多可复用组件。我们再依据原子设计理论针对性进行拆解直至拆分出5个层面：
从原子开始重新依据定好的视觉规范进行更改，再由原子组成新的分子。
在与开发沟通设计规范制定的过程中，常提到他们写CSS样式的时候是采用盒子（box）去写的。通过一个个盒子填充来将我们的组件元素放入其中，最终形成前端展示的页面。
走查时使用浏览器我们也可以看到开发写的盒子，了解盒子也可以方便我们走查时知道问题在哪。
搭建组件库的步骤
对于新产品来说，业务体量较小，较难抽取共性，组件也不全面，因此较好的方式是参考大厂的组件库确定要做哪些组件，它们的相对成熟，参考价值较高。
对于已经成熟的产品来说，我们可以直接全面体验查看页面，找出所有用到的组件，除基础组件外，提炼出复用率高的业务组件进行结构化和组件制定。
以提示弹窗为例，演示单个组件的建立方法。
1. 定义组件：根据业务定义提示弹窗使用场景，用于重要信息的提醒，且需要用户自己关闭操作。
2. 拆分组件：这一步是将组件拆分为元件。对提示组件进行拆分后得到如下：
3. 重组输出根据业务场景，我们把各个元件重组为组件，建成组件集，并定义各种组件的使用规则。
在组件库建立完成后，只有在日常设计中真正使用组件库，提高组件库在设计稿中的覆盖率，才能真正达到组件库的效果。这就要求我们要输出一份完整的组件库描述文档，在团队中进行推广，加强设计团队的公用意识。设计团队内部可以直接维护一套组件库，设计师设计时直接调用公共组件库组件使用。
另外，我们还要与开发工程师配合逐步完成现有页面的组件替换。
组件库的内容并非一成不变，而是在不断地更新，以保证所包含的组件都是最新和有用的。与其他数据一样，组件也会有增删改。我们需要定期对组件库进行维护。
增加：当有新的组件产生时，我们需要通过判断它的拓展性和复用率，以确定是否将它入库。
删除：随着产品的不断升级迭代，如果某个组件已经不用或复用率很低时，我们可以考虑是否要将它删除。
改：不可避免的，组件会随着业务而进行升级，我们可以通过数据埋点和A/B test的方式来确定某个组件是否要进行改动。
组件扩展性弱：
有时候设计师做出来的组件虽然看着很好，但是实际上使用时，适配效率很低，用组件去扩展和重新做的效率差不多。
大部分时候设计师手中都有任务，于是这个任务就落在了相对不是那么忙的设计师手里（一般是新设计师），但是新设计了解业务相对来说是不够的，做出来的东西就像是是空中楼阁，抛开业务谈设计规范的都是很难落地的。
设计师不了解开发的实现方式，可能会做出来以后，开发较难实现，然后开发也就不会做。
首先，设计规范的作用是巨大而延迟的，不能即时产出很大的价值，另外一方面，设计规范的落地会增加开发工程师很多的工作量，且无法量化成果。这也导致很多时候设计师无法争取到足够的开发资源来做这件事，所以，很难导致达到预期的效果。
设计师需要更加全面的了解产品及业务流程。
前期需要做好用户画像，弄明白产品的目标用户的差异，不同用户的使用场景。只有弄清楚各个角色的关系以及功能设计的逻辑，具体用户年龄，解决什么问题，才可以产出更符合用户需求的设计。
如果是新的产品，那就需要去详细的看类似的竞品的功能及业务流，并且了解公司产品的定位及方向，所以就大致清楚设计的大方向。
系统整理产品情况，最好是做思维导图形式，可以更好的梳理同类型的产品功能及组件，也就能更好的提高组件的复用性。
在制定规范前，需要明确产品中主要有哪几种分类，将最基础的分类定义好方便后续针对分类内容进行整理。
团队沟通其实是一门艺术，那需要如何做呢？
首先，写一份设计规范的价值的提案给领导，争取到足够的资源，包含设计资源、开发资源。如果领导的主导参与，那这个事情就好推动多了。
然后，把设计规范的设计工作交给熟悉业务的设计师来做，通过业务提炼复用率高的典型元素，优先开发，最大化投入产出比。
搭建设计规范和我们日常处理工作需求类似，并非输出一份文档就结束了。我们还需要将做好的设计规范推广给各个职能部门的同事包括设计小伙伴，PM和开发小伙伴的团队内外，并且需要得到团队内的一致认可才算是初步完成。
召开专门的设计规范会议，以清晰明确且有效的方式把详细的内容传达给各个相关人员，在一致认可规范的情况下，以达到内容的传达到位。同时，这个时候，就可以依据开发人员的反馈，做落地的修改规范文档。
1、如何推广给PM
利益点：提升协作效率，减少工作成本
在启动设计规范的整理之前，内部宣讲让PM对于设计规范的搭建已经有了一个基础的概念。然后争取到更多的开发资源。否则PM不会分配资源给予时间去搭建整体的设计规范。
可以从提升PM与设计的效率和降低原型搭建成本作为切入点，通过组件库以及通用模版的搭建，PM只需要极低的成本学习一下组件库怎么使用，即可搭建高保真的原型界面。甚至完善好组件库后直接不需要设计的参与，开发通过原型组件库搭建页面。
利益点：提升设计效率，减少人力损耗，保持体验一致性
设计规范一般由团队内小伙伴共同制定，基本上已经对规范的优势达成共识。因此主要讲讲如何更好在团队内部使用规范。
团队设定主要负责维护的设计人员，其他人员在设计时候，通过Sketch Library 共享组件库可以直接调用组件，并建立更新日志规范项目流程提升效率，定期维护的时候其他人员统一告知负责维护的设计人员，统一定期修改更新升级维护。
利益点：封装组件，更少的更改，提高验效率，缩短研发流程
需要研发团队认可设计规范，前期前端的参与是必不可少的。
在制作规范时设计师了解了前端开发的一些简单原理，前端开发也能及时了解设计师的想法，大家不再是各司其职而是串联起来共同协作，当规范确认下来前端就不会频繁改动组件，而且在有限的项目时间中。设计规范的统一极大缩短了设计和前端开发所需的时间，为后面的项目争取了空间。
一套完整的规范包含内容是非常多的，难以在1个版本迭代里面修改完。
因此可以采用敏捷开发的思想，小步迭代快速推进，将设计规范的覆盖放在每次迭代过程中。设计师需要将自己作为设计规范这个项目的产品经理，针对现有的需求进行拆分，并排出优先级分版本迭代进产品里面。
可以依据从大到小的原则进行优先级排序。对产品设计风格影响大的先排，影响小的后排。
设计规范的制定不单单是对于设计师，在嵌入版本里面要随时与产品和开发多沟通，以便达到更好的落地效果。
接近1.5万的文字梳理，感谢你看到了最后。接近尾声了，制定及梳理设计规范对于设计师来说个人成长有哪些方面呢？我个人觉得可以从这几个方面来说；
通过整理规范，需要收集目标用户，使用场景、前期调研、产品功能梳理等众多资料，这期间我们需要去发现信息以及整理信息。庞大的信息收集，那对于个人的收集整理信息的能力是一个很好的提升，同时对产品会有更全面的认识。
归纳总结能力
将收集好的信息进行分类整理，这要求需要一定对逻辑性。在设计基础框架时合理对分类可以协助我们处理好每个控件对层级，这项能力无论实在工作还是日常中都有着巨大对好处，可以帮助我们从一堆繁杂的事物中“提纲挈领”，换言之就是“化整为零”，做减法，提取出最关键对因素。
将信息归纳整理好后，需要对全局进行思考，全局的设计及交互都需要考虑到位，比如什么情况下适合跳转页面，什么情况下适合给与用户弹窗。大体符合什么交互原则。
除了对大体交互需要考虑到位，细节上也不可以忽视，比如异常情况，极端情况该如何去处理，组件之间该怎么去配合等。在日常工作中我们也可以逐渐有意识去培养此类技能，对项目全局思考的越多，那么对整体项目对把控能力也就越强，与他人合作也会越显得专业。
在整个推广设计规范的过程，就是提升沟通表达能力的过程。
另外，整理设计规范时，难免会遇到模凌两可举棋不定的时候。此时可以寻求向上或者向下的资源寻求帮助，具备良好的表达能力能迅速帮助我们将问题阐述清楚，表达能力是设计师需要具备的重要技能之一。
我们每次在求助他人或向他人汇报，都需要在全面复盘问题过后做到心里有数，将问题自己复述一次是否有漏洞或者没考虑清楚的地方。长此以往你表达的事情会更清晰，别人也更容易听懂你说的事情快速理解内在逻辑，那么说服别人推动工作的难度也会越小。同事对自己的逻辑思维，表达能力都是很好的锻炼。
这里总结了几个工作中与上下游沟通的小技巧希望能帮助到小伙伴们：在开始与他人沟通之前我们需要搞清楚我们沟通的原因与对象
原因里面包含：
对象里面包含：
当然在沟通时还需要考虑方式和语气，这些都需要好后斟酌。如果遇到情绪不太好的开发，这个时候反倒我们更不能将情绪激化，一般这些情绪化对态度过一会都会消散，可以采取冷处理等情绪过后换一种方式沟通看看。
由于产品性质和业务阶段，身为B端设计师更加需要贴近一线场景，深入了解业务逻辑和用户使用场景，在不断深入的用户调研中，也收获了一些心得和经验，所以和大家分享一下我常见的三种用研方式，相关物料可以通过文章底部的原文链接得到获取方式
1.1设计师为什么需要了解用研
我们对产品进行设计探索的本质是利用已知信息去挖掘未知信息，最终利用获得的信息进行决策的过程，信息的完整、准确程度与判断力、等共同决定了决策过程中错误决策的概率高低
用研的过程就是一个信息的收集与处理的过程，在信息不足时我们可以通过同理心来“侧写”用户心智推测信息，这一点从事C端设计的小伙伴应该感同身受，但由于B端用户画像与设计师自身往往偏差较远，单纯的通过同理心来感知用户心智的门槛和难度较大
此时我们就需要通过用户研究的手段获取更准确更完善的信息，通过用户研究，设计师可以贴近一线场景，了解用户的真实场景和工作诉求，切身感受到产品的业务逻辑和使用链路，以便我们进行更准确的设计决策，同样的，这样也可以让我们的设计方案在讲述时有理可依，有据可靠，更容易获得上下游的信任
接下来是我对于可用性测试、用户访谈、问卷调研的学习总结，简单与大家分享，大家有什么见解也可以互相交流
1.2用研的纬度
这是《赢在用户》书中经常被人用到的用户研究二维分布图，这幅图很好的展示了用户研究的纬度，横轴是研究用户的结果；纵轴是理解用户的方式，行为、态度，即观察用户做什么、听用户说什么，因此，用研主要通过定性调研和定量调研分别关注用户的行为或者态度
那么什么是定量，什么是定性，行为和态度之间又有什么样的关系，在正式进入用研工作之前，有必要对这四个方向进行一个简单的了解
定性与定量
定性与定量是用户研究中常用的两种方法，两者之间性质和分析方法有一定的差异
定性研究主要回答“是什么”和“为什么”的问题，是对种类或者质的差异的分析，说白了就是通过经验、逻辑、同理心等非量化的方式去分析【主观】的信息
定量研究，除了能告诉我们是什么以外，还能告诉我们“是多少”，一般指具体【客观】的数据信息
通过上述示意可以发现，定量更加在意得出的数据，至于为什么会得出这个结果，就需要通过定性数据去验证，因此定性分析在一定程度上会更偏向于阐述某件事物的意义
二者是站在不同的角度看待问题——定量关注数，定性关注人，在实际工作中定性与定量往往相互配合，例如通过定量挖掘关键数据，再用定性剖析原因，最后定量进行验证，两者结合以求得研究效果的最大化
行为和态度
行为主要是指用户的某种动作，比如操作时的点击、滑动，以及视觉的关注点、肢体语言等，这些都是下意识，无需思考的行为数据，这些数据可能与信息层级、传递效率、操作时长、交互链路等息息相关，观察收集这些行为数据的最终目的是了解用户为何按照自己的方式进行操作，与我们预期设想的路径有什么不同之处，进而探究是什么促使用户做出的行动
态度则是用户的主观想法或者情绪，情绪会诱发用户产生一系列行为，例如操作遇阻时的焦虑，对产品体验不满的愤慨或者Aha moment时的惊喜这些都反映出了用户对于产品当下体验的一个态度，关注这样用户态度就能收集到产品体验的信息，所以，用户行为导致了某种结果，态度则揭示了影响行为的根本原因
在了解了定量与定性，行为与态度之后，我根据目前工作中常用到的可用性测试、用户访谈、问卷调研，并对每个方法的适用场景和进入调研的关键动作进行详细分析
在开始进行用户调研之前，我们需要根据具体情况确定调研形式，以便实施后续的展开工作，根据用研目的、产品设计阶段、频次、所需样本量和成本等多方面因素进行考虑，选定适合当下情况的调研方式
1.1明确测试目的
首先应该以目标为导向，确定需要测试的产品是什么，想要验证什么样的结论或者达到怎样的预期，是为了发现产品或原型中可用性的问题，还是借此与竞品进行有效性、效率、满意度的比较，或是对某些功能点进行测试
1.2设计测试任务
在明确测试目的后开始设计测试任务，测试任务是可用性测试的核心内容，需要根据已经确定的测试目的结合用户在实际使用过程中可能存在的场景和需求，将任务场景化，然后对复杂任务的整体流程进行拆解，列出任务列表，以此来编写任务提纲
任务包括场景，操作和具体目标，设计的任务要有代表性，对应的功能或模块必须是功能使用的典型场景、尽量模拟用户真实的使用场景；在任务描述时做到语言简洁，避免指定的操作或引导用户，若任务流程较长，可以进行拆解形成多个用户触点，但触点操作不需要告知用户，仅在用户操作时进行观察即可
1.3 设定衡量指标
在设计好测试任务后，我们需要为任务匹配对应的可用性指标，目的是为了通过指标反应测试内容的可用性问题，帮助实施者有重点的进行观察和记录，还可以结合ASQ量表帮助测试者对每个测试任务的完成情况和满意度进行反馈
可用性指标主要包括有效性、效率性、满意度；这三者构成了衡量指标的一级指标，而每个一级指标下还包括更加细分的二级指标及衡量方式和标准，这就构成了可用性指标对照表；我们依照可用性指标对照表对每个任务的重点有了基本的概念，并且可以根据具体任务描述和衡量指标得到测试记录表
现在我们对每个任务的可用性指标有了基本的概念，但是可用性问题除了从实施者角度去观察用户行为和结果，还需要帮助测试者结合任务进行自评和反馈
而在帮助测试者进行任务反馈时，需要将有效性、效率性、满意度站在测试者的角度进行更加通俗易懂的拆分和信息传递，并且能够做到量化分析，这也就是ASQ评估量表的作用和目的
有效性可以理解为任务的完成情况，即成功完成、求助后完成，未能完成
效率性则是针对特定任务，观察其完成时间是否在正常范围内，其任务完成路径是否符合标准路径，是否存在偏离和犹豫的地方，在进行定量研究时常用指标有任务完成效率、理想路径偏移率等
满意度则是用户自我报告数据，包括任务完成难易度评价、任务完成满意度评价、及评价原因
根据场景描述、测试任务、节点反馈和ASQ评估量表，我们可以得到“任务卡片”，“任务卡片”可以帮助用户快速进入角色，明确内容，量化反馈，在每次任务完成后，将测试者所勾选的ASQ选项对应的分值相加，便可以得到任务评估分值
1.4准备测试脚本
可用性测试一般情况下需要两人协同配合进行，通常一人安排任务鼓励用户发声，一人观察记录，由于涉及内容较多，成本高样本含量低，对被试用户进行的活动任务也比较复杂且环环相扣，所以为了保障测试任务更好的实施，一般情况下会准备一份较为完整的测试脚本以供团队更好的配合
一般测试脚本包括自我介绍、访谈预热、测试规划、测试任务、量表问卷（可选）、结束语、记录文档、相关文档
1.5准备测试原型
1.6招募用户
用户可以大概分为新手用户和专家用户两种类型，当然也可以进行更精细的划分，例如（萌新、高浅、活跃、专业）在招募时为了结果可靠，应避免产品设计相关人员的参与，选择有代表性的用户，其中真实的产品目标用户为最佳，测试者不宜过多，一般5名左右就够了
例如调研XX产品的直播教室的可用性问题，就需要招募已在平台入驻且售卖直播课的老师，在招募时还需要进一步的筛选，如果招募的5名老师都是长期使用平台产品进行直播上课，用户对于产品功能足够了解，关注点会与新手用户会产生较大的差异
1.7准备场地
包括预约测试场地、记录设备、分配主测员和观察记录员、准备相关话术及活动礼物
测试场地：一般选择安静明亮的房间/会议室进行，访谈者和用户最好呈90度的座位
记录设备：安装测试产品的电脑、手机；记录设备可以使用录音笔、相机或DV。设备要稳定，电量充足
2.1暖场
在了解用户情况和布置任务前，不要太直接的进入测试氛围，营造一个相对轻松的交流环境。先聊点轻松的话题，“您从哪里过来的呀”“平常工作忙不忙”等问题，缓解气氛，把用户带入测试场景。可和用户聊聊被测产品相关的小问题，平时怎么用的？一般什么时候用？感受怎么样等等
2.2布置任务
向测试者发放任务卡，结合任务卡中的角色和使用环境对任务进行简单的介绍，如果是专家用户任务就不用过多描绘场景，可以具象更具体的任务——“上传一门新的课程、将课程分成基础班和进阶版分别售卖”等等
2.3观察并记录用户使用过程
这个过程观察记录和引动测试者随时的发声很重要，与其他用研方式不同的地方在于可用性测试可以了解到用户在操作时的想法和行为，用户的发声思考可直接影响可用性测试的效果和结论
我们可以适当引导用户进行思考发声，甚至可以为用户做一些简单的示范，例如 在新建时，可以说“我准备新建一门课程”，“我正在寻找建班功能，我现在遇到一些问题”等等，将自己操作时的想法表达出来，不需要刻意去思考，这有助于主测员去了解测试者的想法和感受
每个任务完成后，通过“任务卡片”重点回答测试者任务的完成情况，遇到的问题，询问测试者的态度和感受，还需记录任务完成的时间；与任务不相关的反馈可以记录在备注中，而在记录时尽量采用词组、短句的快速记录方式记录核心内容，整理后作为优化任务帮助产品进一步提升可用性和易用性
2.4进行量表问卷
ASQ量表
上面在介绍可用性指标及任务卡片时我们有提到ASQ量表，其主要涉及有效性、效率性、满意度3个方面，安排在用户完成单个情景任务之后，这时用户对于任务流程的操作感受是最明确和清晰的
SUS量表（可选）
SUS量表一般在相对完整产品整体的大型可用性测试后才会使用，因为一般的中小型测试任务比较集中和针对，用户无法感知整个系统，量表针对测试设置10个问题（有效性、效率、满意度），包含5个选项：1分（非常不同意）、2分（不同意）、3分（一般）、4分（同意）、5分（非常同意）
在布置问题时，奇数问题采用正面阐述，偶数问题采用反面阐述，以此来确保用户评价的可靠性
单个测试者提交量表后，我们需要计算量表分值，奇数项计分采用“用户打分”-1，偶数项计分采用“5-用户打分”，由于是5点量表，每个题目的得分范围为0-4，共10题，所以最大值为40，而SUS的范围在0-100，所以需要将所有转换分相加后乘以2.5，即可获得SUS分数
3.1问题归类分析
简单测试直接根据发现的问题优化设计即可；如果目的是用于讨论和汇报，需要对记录内容进行整理和输出，这时需关注问题的出现频次、优先级和用户反馈，按照问题维度分类，将不同用户暴露的相应问题进行合并，罗列问题所对应的功能点、可用性指标、用户比例、用户反馈及相关现场记录文件，之后基于问题对业务和体验的影响划分优先级并且标出对应的PM同学，最后针对这些问题给出优化建议
问题优先级的划分方式
通过前期记录观察以及录音录屏我们可以发现用户在任务测试中遇到的问题，根据问题对任务完成度的影响，我们可以划分为P0（紧急问题）、P1（重要问题）、P2（次要问题）的方式对问题进行优化和排期
P0：用户遇到阻力且无法解决，未能完成任务的问题
P1：用户遇到阻力且反馈频次较高，在求助后完成任务的问题
P2：用户遇到阻力但可以自行解决，完成任务但感到不顺利的问题
3.2输出测试报告
较大的可用性测试在得出结果后需要向团队内的成员分享，所以需要进行一次报告输出做到内容对齐，一般包含整体概括、重点发现、项目背景、测试过程、测试结论、优化方案几个模块，具体汇报形式是不受限制的，一般文档形式输出较为高效，keynote汇报从内容和形式上会更加丰富
整体概括可以将测试背景及测试结论简单的阐述，其中测试背景包括（项目背景、测试内容、施测情况），测试结论包括（测试结论、优化建议）
项目背景就不必多说了，将业务背景和测试目的进行简单概括即可
测试过程包括准备阶段（如何招募用户、招募了多少名、用户的基本信息和类型；有哪些测试任务、如何进行测试和记录形式）及测试阶段（本次测试安排的任务、设计的量表问卷、现场的录像照片）两个环节进行展示
测试结论需要将暴露的问题进行问题描述，结合整理的文档表格详述问题未读和用户反馈
最后，结合问题提出完整深入的优化建议和解决方案
3.3后续跟进方案
探讨解决方案：协调产品、设计等多个角色来探讨合适的解决方案，要注意，设计时要思考新方案是否会带来新问题，并再次通过可用性测试来验证新的方案。
持续跟进：了解项目结果的落地情况；已改进的问题或遗留的问题可在下个版本的测试中继续跟进
在进行问卷调研之前，我们需要认识到问卷调研包括两种调研类型，定量调研与定型调研，实际上大部分的问卷都是定量调研，需要大量的用户样本，在收集问卷后需要分析数据占比来验证用户想法，另外小部分就是定型研究，一般原因是因为用户样本量较小，通过小样本量来研究产品的可用性问题
1.1明确调研目的
问卷调研中设计者并不直接接触用户，所以在问题的深度和广度上是有限的，一份问卷不能解决多个问题，通常会围绕解决1-2个核心问题去研究，在设计问题之前需要明确此次问卷调研的目的，然后围绕这个目的去思考各种问题，通过怎样的问题达到怎怎样的结果
例如通过思考和确认，针对我们这款由0到1的知识教育平台型产品，其调研的目的主要在于
需求验证，包含对用户进行市场分析、了解现状、发现问题，从而提供解决方案，再到两端用户是否满意现在的解决案
用户接受并付费的意愿如何。收集用户信息、挖掘分析用户的付费意愿以及付费习惯
问卷的目的一般可以分为六个方面：
1.2目标用户分析
对调研用户进行分类是较为重要的环节，用户类型不同，问题内容也不同，只有在不同角度不同用户下设计的不同问题才会获得有价值的结果
这种情况在问卷中还是比较常见的，例如我们填完问题一后，根据选择的不同，可能会跳转到问题三或者问题五，这就是问卷设计者根据不同用户分类进行的多种问题设计
例如在收集知识平台满意度和相关竞品使用习惯时，个人机构和组织机构的视角是不一样的，B端客户和C端消费者的视角也是不一样的，所以在问题设计时需要分开对待
问题根据用户分类设计的好处在于问卷后期可以快速验证产品的用户类型和比例，提高调研质量和数据可信度，便于后期对用户进行更加深入的调研
举例
结合上面调研的目的及用户分类，以此我们思考在问卷的设置方面：
对于B端（老师）来说，首先要了解的是客户目前是否有在使用我们提供的服务、什么时候会使用、使用的频率是多少、目前使用的体验如何、有没有遇到什么问题、有什么建议、对我们提供的解决方案是否愿意接受
对于C端（学生）来说，首先需要了解的是用户基本信息，是否使用过课程相关的服务，用过哪些竞品、吸引用户的点在哪等等
1.3内部需求对齐
当需要有问卷调研的需要时，首先应该与团队内部各合作方对齐调研意向，一方面是为了避免过量的问卷投放打扰到用户，另一方面问卷调研属于团队项目，在团队内部充分讨论调研目的后或许你会了解到各业务方当下最关心的用户问题从而调整调研问卷的内容甚至得到更好的解决办法，这样一来才能将问卷调研的价值最大化
例如教育平台侧在新版本上线前为了调研售课老（机构）师对平台使用的满意度和深层次的需求问题，那么在发起调研之前，需要跟产品、教研、客服等业务合作伙伴对齐需求
2.1划分问卷模块
设计具体问题之前，我们需要预设几个问卷的模块，通常围绕几个类型：用户类、行为类、产品类、态度等，在得出完整的问卷之前，我们不需要考虑问题的先后逻辑是否合理，先根据调研目的和模块类型进行问题穷举，当用户模块相关问题写完后再继续写下一个模块的问题，直到所有模块的问题都已经设想完毕，在对问题进行重组
用户类：收集用户基本情况，方便我们了解用户群体，比如：职业、学历、团队构成
行为类：了解用户的行为或者与围绕产品相关但不涉及产品本身的问题。比如：有没有在其他平台入驻、售课时视频课比较多还是直播课比较多
产品类：了解用户直接与产品相关的体验问题。比如：对产品印象如何、一般使用某产品的哪些功能、频率怎样、还用过哪些竞品、喜欢哪些功能
态度类：用户对产品的看法。比如:评价、好感、想要的功能；尽量避免提一些无法判断、没头没尾的问题，一方面对产品优化没有帮助，另一方面会降低用户的的期望
2.2衡量问题类型
问卷的问题形式是多样的，题目类型主要有封闭/半封闭问题、量表式问题、开放式问题组成，需要根据具体目的来选择相对应的问题
封闭/半封闭题型的选择在于能否将答案穷举，避免出现用户因为没有合适的选项而随便勾选答案的情况
量表题型在答案上有明显的程度高低区分，设计者对该问题有进行统计的需求
在问卷中应尽量避免较多的开放问题，一般在针对某种方向/某个定性的问题做预探索时使用
这里只对问题的类型做简单的概述，具体的形式是多样的，例如选择题可以有单选、多选、图片选择；量表题除了打分之外，还有排序和点数分配等其他形式
2.3问题重组
在得到具体的问题后，我们需要对问题进行重新编排，通过改变问题的前后顺序来保证用户在可控的情况下进行真实的问卷回答，除了按照问题的难易度之外，还需要根据问题的属性由浅入深的重组问题
例如问卷开始先安排过滤题用于过滤用户，识别用户是否符合问卷的目的来保证问卷数据的质量，然后按照暖场型问题、渐入型问题、高难度问题、敏感问题来对问题进行重组，当然这些顺序并不是固定的，需要依据具体的问卷内容进行调整
关于过滤问题：
用户在实际问卷回答中，受到各方面因素的影响有很多，例如有时用户出于自我暗示、自尊心或者时间紧张状态下，很难根据自身实际情况完成问卷调研，而是随机挑选或者作出相反的选择，这种问卷在回收后会对定量分析造成干扰，所以我们需要依据问卷重要程度，安排适量的过滤题来避免此类情况的发生
比如在对于关于产品改版的满意度调研中，向用户询问有关产品功能的问题
如果用户回答“某某功能”，但在是否知道时选择了否，或者使用时长很久，但却不知道某某功能时，在后期数据中，可以将这部分无效问卷去除
问题注意事项
3.1问卷评审
一切准备就绪，是不是准备投放问卷了？别急，许多问卷在投向用户之前，往往会忽视通过内部手段进行问卷自评，通过问卷自评可以发现这份问卷有没有偏离最初的调研目的，你所设想的问题用户是否可以正确理解、问卷是否有可优化的空间等
一般自评包括3个环节：问卷自审、问卷内审、问卷内测
问卷自审
问卷设计完毕之后，需要根据最初确定的调研目的对问卷进行自审，可以站在用户的视角对问卷进行第一次填写，确定问题是正确有价值的，是有其他选项，也可以估算回答问卷所用时间，问题中的词语是否能被用户理解且没有歧义等
问卷内审（可选）
不少公司内部有设立专门的用研团队，在确立调研需求初期就应该与需求方深度绑定，有明确的需求认知，有句话叫当局者迷，邀请用研团队参与审查可以从专业角度把控用研目标，评估问题是否能被用户接受等，他们可以从一些不同的角度发现问题
问卷内测（可选）
内审之后，可以借助产品的代表性用户（一般3-5人）进行问卷内测，通过观察填写情况来检验问卷设计的合理性，例如观察答题时间、用户类型与题目是否关联等等，确保证问卷上没有其他问题
3.2预计采集样本量
内测完毕之后，就可以向用户投放问卷了，为了避免给过多的用户造成打扰，我们需要根据产品的用户数量判断问卷的投放数量
一般没有明确规范多少用户投放多少问卷，基本都是自己判断，一般如果总用户量不足30，需要至少覆盖50%（15个）；如果总用户量30-100，30人以上就可以；如果是总用户量100-1000，覆盖20%-50%就可以。
3.3选择投放渠道
我一般常用投放渠道有：1）飞书推送；2）站内公告；3）其他内部资源
问卷调研基本分为线上调研，线下调研两种方法，线上通常是问卷投放或者电话询问的形式，线下一般与用户访谈相结合，做到定性定量相结合；选择投放渠道时，一般根据调研目的、投放预算、预计采集样本量、统计分析成本来进行判断
一般用研团队会使用专业的解决方案快速作出数据分析，比如SPSS，而设计师在实际工作中很少会接触到此类工具，因为此类视角下探索的方向和内容更加具体，变量在可控范围之内，不太需要复杂的分析模型，较为常见的更偏向Excel或者问卷平台自带的分析功能，所以我们可以对分析思路做一个简单的了解
4.1数据清洗
前面在问题设计时我们有讲到筛选题相关的内容，加入筛选题的目的就是在数据分析前便于我们将异常问卷剔除出去，保证最终结果的准确性，除了观察筛选题的选项之外，我们还可以根据问卷填写时长、量表打分规律、问卷填写完整度等几点进行问卷筛选
4.2问卷分析
看整体
还记得我们设计问题的第一步划分问卷模块吗？模块通常围绕几个类型：用户类、行为类、产品类、态度等，在分析问卷时可以基于这些结构得出一个较为整体的情况分析，例如用户群体结构（用户类）、存在的问题和新的诉求（用户建议）等，通过对比相同角色的回答，找出共性的问题和信息
看差异
在得出整体结论之后，我们可以通过差异分析深入挖掘更多信息，例如观察不同用户角色对于产品的建议或者评分，会发现用户角色对于产品的建议和需求是不同的，这种分析方法重点在于找到两个可能存在关系的因素，通过对比不同角色的回答，找出差异和影响因素，根据上述举例就是将（是什么）（怎么样）进行差异对比
问题归类
根据反映问题的模块对用户问题进行归类分析，写明用户的问题描述和具体模块，并且对后续优化提供解决方案
4.3产出报告
问卷报告一般包含调研背景、问卷回收情况、调研结论（功能优先级、用户反馈、数据展示等）、整体评价（功能评价、体验评价）、等，分析时从数据出发找出差异，分析原因，给出结论，在具体汇报时可以按照先结论后具体问题的方式呈现报告，同时可以结合数据提供相对应的解决方案
1.1明确访谈目标
明确访谈目标，可以保证访谈内容在大方向上是一致的，例如调研班主任实际外呼的场景及外呼时关注的信息，在访谈时就不会去问关于主讲排课的问题，也可以防止访谈过程中遇到富有表达欲的用户偏离主题，在访谈过程中难免有用户兴致勃勃的谈论自己对产品的看法，在这种情况下，拥有明确的访谈目标可以保证深陷用户的情境中不迷失访谈方向，保证访谈的最终结果是有价值的
1.2确定访谈类型
根据不同的访谈目标，可以分为三种访谈类型：
开放式访谈
在围绕的主题和问题上都是开放的，没有固定的问题也没有固定的答案，采访者可以根据受访者的表现进行相应的问题补充，受访者可以充分表达自己的观点和意见，氛围最为轻松，接近人们日常的对话，适合进行定性研究。但即使是选择了开放式访谈也需要事先准备访谈提纲来确保此次访谈是有效的
结构式访谈
有严格的问题顺序，采访者必须按照顺序和题目提问，受访者回答的答案都是固定的A、B、C、D，这就需要采访者必须有一个很清晰的目标，在问题的设计上要仔细推敲和打磨受访者可能回答的形式，当然，再缜密的设想在实际访谈中也会有意外，所以也会设置一些开放性的问题让受访者可以自由的进行表述，并给出更加开放和深入的回答，适用于定量数据的研究
半结构式访谈
是实际工作中运用的最多的一种形式，在形式上是结构式与开放式的结合，包含了固定的的问题之外，也设置了开放式的问题，根据访谈时的受访者的实际情况进行问题的增减，适合定性+定量研究
按照访谈的途径来划分，又可以分为线上和线下两种，在受访者不方便的情况下可以进行电话访谈的方式来进行，但是如果访谈包含较为复杂的经历和过程的询问，线上访谈比线下访谈要逊色不少
1.3设计访谈提纲
明确访谈目的与访谈类型后，就要基于访谈目的，拟定访谈提纲，访谈提纲是方便与用户交谈过程中抓住核心，保证访谈高效有序进行的关键，就类似一个标准流程，保证需要研究的问题都可以包含在内，访谈提纲一般包含五个部分，分别是访谈目的、开场白、提问访谈、用户演示、结束语（基本信息、过往经历、产品感受、流程体验、竞品体验），其中提问访谈可以根据具体的访谈内容展深挖细节或者发散问题
提问访谈是提纲中较为重要的一环，问题设计要由易到难，由浅入深，由边缘到核心，在开始阶段设计一些简单的开放式问题来营造访谈的氛围，这个过程中可以了解用户的基本情况或者对产品的使用情况，等访谈向一个方向聚焦时，再逐渐收缩问题范围，逐步追问核心问题
设计好的问题还需要整理成访谈记录表，在进行访谈、时，一方面按照访谈清单大纲尽可能的进行脱稿提问，另一方面则需要记录用户对于问题反馈，记录问题时记录员最好记录用户的逐字稿，以便于后期进行记录整理时不与用户表达产生偏差
1.4招募用户：
用户招募是较为重要的一环，承接访谈前后两个阶段的关键节点，用户招募准确，后面的访谈才有实际意义，招募哪些用户是由访谈目的所决定的，一般招募环节分为三部分
1.41.明确目标用户
招募用户的选择是由访谈目的决定的，不同的访谈目的所招募的用户是不一样的，一般按照使用产品深度的纬度来划分用户
核心用户：产品中较为活跃的用户
边缘用户：产品中即将流失或者已经流失的用户
潜在用户：当前并不是产品用户，但在产品定位的用户群体中
而访谈目的一般有两种情况
研究产品所存在的问题，例如研究一下最近用户活跃度为什么下降
研究产品目标用户所存在的需求，例如研究用户对新功能的满意度
所以如果访谈目的是发现产品现存的问题，那么应该去寻找核心用户，他们那对于产品有着明确的认知；但如果为了增长，则应该寻找边缘用户和潜在用户，他们会告诉你他们需要什么，你需要做什么
1.4.2多渠道招募
面向内部用户的产品进行用户访谈时，一般直接找对应访谈者的leader或者pm沟通即可，而在对外产品时则需要根据确定的筛选条件进行用户招募工作
核心用户的招募相对边缘用户较为简单，一般可以通过行为日志数据、登录时留下的联系方式、产品用户群或产品内运营推送推送来招募核心用户
潜在用户由于对产品接触较少，一般通过问卷、外包招募、熟人推荐的形式进行招募
1.4.3验证目标用户并邀约
在得知用户是否愿意接受访谈后，需要再次验证这些用户是否真的符合样本特征，要注意的是，筛选访谈对象要注意平衡，避免同一类型的对象占了过多比例，导致访谈结果不全面
例如做一次关于学习平台APP的功能优化访谈，就要避免对象大部分是管理者、80后的情况，因为用户不是目标用户、80后用户的需求频率不大
很显然，90后/95后/00后、大学生/刚进入职场的职场新人才是我们的目标用户，那就根据这类人群的角色模型来筛选邀约对象
1.5准备场地和物料
场地选择
用户访谈的可选场地有很多，大部分是请用户到公司来使用公司的会议室，或者有的公司拥有休息区或者共享空间，环境较为舒适和温馨，也是可以的
需要注意的是，场所的选择也会对访谈有些影响。应该尽量选择温馨舒适的环境来打消用户的紧张感
物料
采访者需要提前准备好物料，包括访谈记录表、访谈提纲、录音设备；访谈时可以一人负责提问，另一人负责记录，在使用录音设备对受访者进行录音时，需要提前告知并取得同意
2.1开场白
在一切准备工作ready之后，可以进行访谈了，访谈中难免遇到一些不善表达的用户，如果一开始就切入正题进行访谈，访谈者可能在紧张的状态下无法与采访者达成信任关系，气氛就会有些尴尬
所以需要先进行简单的寒暄和自我介绍让气氛轻松起来，还可以简单介绍访谈的背景、流程、内容、时间，告知受访者今天只是探讨问题，没有对错之分，所以希望畅所欲言，不要掩饰真实想法
2.2访谈并记录
还记得咱们前面准备的访谈提纲吗？在进行简单的暖场之后，我们可以先对用户的基本情况和使用经历进行询问，从职业、流程、爱好等基础信息作为切入点，为用户营造特定的使用场景，然后再进入访谈环节
访谈时，抛出问题的目的不仅仅是得到用户的一个结论，而是希望用户借此将自己的体验和前因后果告诉采访者，然而很多时候，用户告诉我们的信息都比较浅显，比如“我想要个xxx功能”“我觉得xxx挺好的”，这时我们需要对用户想法刨根问底，从而证实用户说的“想要xxx功能”是否合理，或者看能否想到其他解决方案
如何刨根问底？
1、结合梯子理论，通过问用户以下4个层层递进的问题，来了解用户需求和用户心理
属性：对于这个产品，你最在乎什么功能？
利益：你为什么在乎这个功能，它可以解决你什么问题？
心理：解决这个问题，可以达成你什么目标？
价值观：你为什么在乎这个目标？
2、情景再现
回答提问时，用户很少会去主动联想具体使用场景下的体验问题，比如当你问“上次旅行去哪玩了？”用户大概率会回答“去环球影城玩，人特多排队两小时，玩了个什么叫鹰马过山车，20秒，下次去绝对买优速通...”并不会告诉你怎么去的、以什么标准定的酒店、为什么选择这个项目/地点，等等这些更想要了解的问题告诉你
我们需要帮助用户在基本体验之上还原体验的动机，引导用户对使用场景进行还原，了解用户当时场景下的行为，再针对场景和行为去挖掘用户产生这种体验感受的动机
3、鹦鹉学舌
复述的时候，有时用户还会根据你的复述追加一些他当时没有想到的关联信息，比如“你的意思是。。。我的理解是。。。对不对？”这样可以避免双方理解的偏差，还可以总结提炼用户的观点。这样又可以挖掘到更多内容
2.3结束语
在访问结束后，我们可以与用户一起快速回顾访谈的内容，如果用户有提出一些意见或者建议我们可以再复述一遍进行查缺补漏，并将事先准备好的礼物或者酬劳送给用户表示感谢，向参与度高，善于沟通的优质用户表示保持联系，留下联系方式方便后续进行可用性测试或者再次访谈
3.1整理访谈内容
一般是在两个用户访谈之间的间隙进行笔记的整理， 将用户的口头语言转换为书面语言，这样一方面减少后续因访谈内容大量堆积而形成的整理压力，另一方面可以根据上一场访谈进行复盘，从而对下一场即将开始的访谈进行内容调整，在整理时我们需要将重点放在用户的提出的问题和负向反馈上
3.2问题归类分析
整场访谈结束之后，我们会发现用户会提出各种各样的问题，我们需要依据问题的纬度进行分类，将不同用户遇到的相同问题进行归纳
问题归纳主要包含两个部分，主要问题和具体问题，主要问题就是访谈中出现的较为明显的反馈问题，例如“超7成用户对首页推荐的内容并不感兴趣”，而具体问题则需要明确用户反馈原因、对应的功能模块和问题类型
3.3产出报告
访谈报告是至关重要的，一方面可以和大家共同讨论发现用户真实想法，另一方面也方便产研团队根据问题关键点投入人力作出进一步优化，一般在访谈当天完成结论报告，时间有限是以关键结论为主，具体问题可以后续补充。访谈报告一般包含访谈背景、参与人员、用户信息、主要问题、具体问题、用户建议、优化建议
本篇文章是我学习到的用户调研的三种方式，调研方式不重要，重要的在于如何理解用户需求，真正了解用户想要的是什么，无论B端还是C端，产品最终还是要服务于用户，作为设计师同样需要了解用户研究，只有对用户足够了解才能作出高体验质量的产品
以上就是我关于用户研究的学习和分享，欢迎大家一起交流讨论~
文章来源：站酷 作者：Hi阿良
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com