什么是栅格？我这里就不做说明了。很多优设的文章都写的很清晰了。这篇文章仅从我最开始接触栅格所遇到的困惑和部分设计师始终纠结的点来和大家一起讨论讨论。
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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
众所周知，「用户体验五要素」出自Jesse James Garrett 的《用户体验要素》一书：战略层、范围层、结构层、框架层、表现层。
产品设计者和开发者的角度可以对应理解为：为什么做、做到什么程度、这些东西如何组成、规划用户操作行为、如何呈现这些东西。
「Live Activities设计规范」由苹果出品，原文为英文，上一篇已翻译https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了个人对其内容的叙述方式存在一点意见。为了更好的记住&理解「Live Activities设计规范」，使用比较熟悉的「用户体验五要素」对内容进行整理。
原文提供的Live Activity定义如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
从原文可以提炼出Live Activity显示特点：
1. 内容是频繁更新的、有进度/状态显示的、用户关心的。
2. 内容的信息量是一眼就能看完的程度。
但上述仍是表象，并非实质，接下来思考这几个问题：
1. 为什么显示的是进度/状态频繁更新的内容？
2. 为什么要强调用户关心的？
3. 为什么信息量是一眼就能看完的程度？
没有Live Activity时，频繁更新主要靠push推送。但push容易被其他APP的push覆盖，且随着各种APP的频繁使用，用户获取关键信息的效率和通过push打开APP的次数反而在下降。
进度/状态频繁更新的内容，说明每个状态存在的时间短，如果被覆盖/忽略，同一状态就不再复现，用户所关心的，或APP所希望用户关心的，就看不到了。比如：什么时候取外卖、待付款、上传成功等等。
当下我们所处的时代是信息泛滥的时代，需要对信息作精简，但用户的操作是可以多条线进行的，比如比如边看剧边吃饭、上班摸鱼/等外卖、比如听音乐的时候写作。
信息内容和量是官网一直在强调的，需要精简，只展示用户需要的，基本达到一眼看完的程度，目的就是知道变化的是什么，当前状态是什么。
分析了这么多，大胆推测一下Live Activity的设计初衷是：快&准确&轻。而终极目的是打动用户，形成好体验，进而推动口碑和销售；为各APP提供新的通知形式，互惠互利。当然Live Activity在一定程度上也弥补了硬件上的缺憾。
关于这个层次相当于规定功能范围&信息边界限制，就是什么要，什么不能要。这部分的信息官网给出许多，在此将其分类梳理如下，为避免大家不好查找官网/译文对应出处，在句未已标注。
1. 仅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平台注意事项）
2. 非iPhone14的仅针对iOS16有锁屏Live Activity展示。（源自：什么是Live Activity-锁屏）
3. 支持用户手动清除锁屏状态下的Live Activity。（源自：实际操作）
4. 支持用户直接关闭对应APP的Live Activity。（源自：最佳实践方式第3/c条）
5. 支持Live Activity自动开始&结束。（源自：最佳实践方式第6/f条）
6. 限制跟踪活动/状态时长不超过8小时。（源自：最佳实践方式第1/a条）
7. 限制活动/进程结束后展示时长不超过4小时。（源自：最佳实践方式第8/h条）
8. 支持更改背景颜色&不透明度。（源自：设计有用的Live Activity第5/e条）
9. 限制内容布局。（源自：设计有用的Live Activity第5/e条）
10. 限制不同设备的展示尺寸。（源自：规范）
1. 避免在Live Activity中显示敏感信息。（源自：最佳实践方式第4/d条）
2. 避免在Live Activity中显示广告和促销活动。（源自：最佳实践方式第5/e条）
3. 只提供正在进行的任务/事件的关键摘要。（源自：最佳实践方式第2/b条）
4. 在任务/活动结束前，给用户提供关闭Live Activity按钮。（源自：最佳实践方式第6/f条）
5. 点击Live Activity直接定位到对应页面，无需用户二次导航。（源自：最佳实践方式第7/g条）
6. 考虑在活动结束后，锁屏上在合理时段后自动删除Live Activity。（源自：最佳实践方式第8/g条）
（个人猜测）由于是提供一个展示区域，且展示区域有限，所以对于层级架构，一级展示什么，二级展示什么，各阶段展示什么，这些都没有做明确规定&建议。各家APP可以根据自身实际情况进行设计。
通过Live Activity的展示形式，可以总结为2点：吸引、查看（摘要&详情）。
1. 一般是在原深感摄像头两侧展示（电话会直接展示扩展型），分为紧凑型和最小化。
2. 紧凑型在仅有一个活动/事件的时候展示，虽被原深感摄像头分割两端，但仅作为一条信息展示，为了视觉上的统一，这里的颜色不支持开发设置，使用的是系统默认色值。
3. 最小化在存在多个活动的时候展现，左侧和原深感摄像头粘连，右侧独立成岛。
4. 不管是紧凑型，还是最小化，都可以通过点击原深感摄像头区域，进入APP内页，或者长按唤出扩展型。
1. 进入内页的查看基本就是各家显神通了，这里主要讲扩展型和锁屏。
2. 原则上是不支持在扩展型和锁屏做复杂操作的，基本点击是进入APP。
3. 扩展型是用户长按紧凑型/最小化唤起的展示区域，内容是可以自定义的，当然官方也给了相应的建议，具体如下。内容信息种类多的可以采用这种信息左中右排布，底部预留大按钮。内容信息少的可以采用左内容右操作的方式。
4. 根据一致性原则，锁屏展示的布局框架应该与扩展型差不多，同样可以点击打开APP。只是在锁屏状态如果有多个任务同时进行，是会全部展示的，所以要注意品牌的传递，避免用户混淆服务方。
对于如何呈现这些东西，苹果还是写了很多建议，确保视觉上的一致性和美观。
1. 紧凑型状态下，为了保证两侧信息的连贯，除了语句阅读连贯，还需要在图形和颜色上具有一致性，视觉上连贯。
2. 锁屏状态下的背景是可以自定义颜色、图像、不透明度的，当然文字的色值和不透明度也是可以定义的。这就涉及到两者间的对比度对信息阅读的影响。
3. 设计师不仅要考虑最佳状态，还有深色&浅色模式下的，以及不同环境光、设备亮度下的显示。还有一点很容易忽视的，就是在用户自定义的墙纸下显示的效果。不仅要注意信息获取，还需要考虑美感问题。
1. 紧凑型和扩展型之间的布局要保持一致，两者间的变化过渡效果是可以预测的。
2. 一般来说，扩展型和锁屏状态下的信息间标准间距是20pt。
3. 在某些情况下，例如图形和按钮，您可能需要使用更紧凑的边距，以避免挤满边缘或形成混乱的外观。
1. 内容和Live Activity边缘之间的边距需要保持一致，请遵循SwiftUI规则。
1内容和Live Activity边缘之间的边距需要保持一致，，发现以圆角边界为测距点得到的间距关系较为舒适。即：圆形/大致为圆形的图形保持上下，3. 以及左侧或者右侧间距一致即可；方形/大致为方形的图形保持圆角边界与容器圆角边界垂直对齐即可。同一位置的多个图形圆角需要相对统一，才能确保间距的一致性。
需要适应不同机型的尺寸。具体的尺寸规范如下。
动态岛使用44个点的角半径，其圆角形状与原深感摄像头相匹配。
下表中列出的所有值均以pt为单位。
ps：左侧为宽度，右侧为高度。
以上就是整理分析的全部。
在整理分析过程中加强了对「用户体验5要素」各个层划分的理解，也对Live Activity在各个层次上的要求更加明确。
企业级B端产品具有行业壁垒高、业务复杂、服务角色多等特点，在大型迭代项目中，如何做好设计协同，把握设计一致性和还原度常常让很多设计团队感觉无从下手，找不到切入点。在长期的项目实践中我们发现，做好设计规范能规范可以帮助个人、团队以及整个企业提高效率和产出质量，保障用户体验统一。
那么，我们该如何做好体验标准化，保障基础体验一致性？下面将和大家分享我们公司在构建设计规范的实践案例。
以我们设计团队为例，随着业务不断扩大，定制化需求不断增加，大型迭代项目做不好设计和开发协同，导致出现“体验一致性差”“设计效率低”“还原度不可控”等问题。如何有效解决这些问题呢？可以通过构建设计规范，以保证一致性，实现工作提效。
从不同角度出发，构建设计规范都能发挥积极的作用。
对企业来说：有利于实现产品经理、设计和研发的输出一致。设计侧主动建立产品设计规范，很大程度上是为了做好设计管控，实现原型、设计稿到线上页面统一的设计语言，从根本上提升设计质量和还原度，提高用户满意度。
对个人来说：当多个设计师共同协作同一项目时，由于设计理解不一致等原因，容易出现设计控件使用混乱等问题。若有详细的设计规范作为引导，有利于实现产品各个模块间的一致性。组件化的工具也能减少机械重复性的工作，让设计师将更多精力投入到用户研究和提升用户体验上。
产品有不同发展阶段，设计规范同样也有，不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多，保证投入产出比最大化；同时也要构建一个合理的规范迭代思路。
该阶段的产品核心目标是「验证产品或商业模型」，业务需求都是小步快跑、频繁迭代。产品处于从0到1的野蛮生长状态，存在着“先满足功能，再优化体验”的情况，导致该阶段的产品体验往往不太过关。
搭建目的：通过定义原则，梳理关键页面和流程，搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断；从页面到流程，又能对应设计参照标准；同时业务可以在规定的框架下发展，不仅让产品体验的根基牢固，而且不会限制功能设计自由。
搭建范围：「全局说明」「页面布局」「通用流程」
该阶段的产品基本形态已稳定，也形成了初步的模型结构。后续迭代是在现有结构的基础上，进行增加或优化功能。虽然探索期定义了产品原则、布局和流程，但探索期产品的自由生长，会导致不少设计细节不一致，从而影响了产品整体的体验和效率。
搭建目的：通过回溯整理过往设计，沉淀优化成完整的交互规范。再根据规范统一产品体验，进一步优化流程和效率， 让整个产品体验达到相对稳定的状态。
搭建范围：「全局说明」「页面布局」「通用流程」「基础组件」「业务组件」
好的设计规范有很多优秀的例子，例如Google、Apple、Microsoft这些引领全球设计风尚的公司，设计规范已经上升为设计语言，指导旗下所有产品的设计。国内做的优秀的案例，比如Ant Design，Element，arco.design等，像这类的产品已经实现了端到端的体验一致，把交互、前端和视觉的事情一并解决了，是值得学习的典范。这些优秀的设计规范都包含以下几个特点：灵活性，可扩展性，系统性和标准性。
一般团队内部构建的设计规范都源于某一产品或者业务，因为主要是团队内部成员使用，追求的是投入产出比最大化。所以可在行业通用设计规范的基础上，适度参考行业设计规范，能复用的直接参考，同时专注于业务本身，具有业务特性的再集合业务综合考虑，使整个规范制定效率更高，科学性、指导性更强。
设计规范的执行和推动主要分为四大步骤：
类型梳理：分析业务场景，整理和归类组件，评估具体组件优先级和迭代计划；
全局说明：统一布局，色板，字体，常用样式，规范设计语言；
抽象设计：将设计共性抽象出来，构建组件通用方案；
效果验证：通过定性/定量数据追踪效果，分析原因，迭代改进；
收集现有设计页面，分析业务场景，再参考行业通用规范的定义，整理和归类组件，可以先罗列完整，再根据产品实际业务需要进行增删改。
全局说明：明确影响整站各个模块、各个页面设计的原则和规范，指导我们后续各种规范的定义和设计。包括统一布局，色板，字体，样式等设计规则。
基础组件：可参考行业通用规范中的基础组件分类和组成，因为大部分基础组件都具有一定的通用性，站在巨人的肩膀上更高效。这里我们根据实际情况，将基础组件分为导航，通用，数据展示，数据录入，反馈5个大模块，每个模块下再细分各小类，构成基础组件的类目。
业务组件：根据业务需求，可以定义属于自己的业务组件，这也是区别于其他通用行业组件库的一个核心部分。
因为在大体量产品设计中，每个模块都由不同的同学负责，这样全局产品的把握就会降低，需要去补充全局规范说明去维持产品全局通用部分的一致性。包括布局，色彩规范，字体，样式等；
抽象设计是设计规范中最核心，工作量最大，难度最高的一个环节。我们可以将它拆解成几个部分，先做出基础组件，再基于基础组件和业务需求抽象设计业务组件，最后抽象成页面模板。
基础组件
组件库的搭建，就一定要提到原子思维。道尔顿原子论认为，物质世界的最小单位是原子，原子是单一的，独立的，不可被分割的，在化学变化中保持着稳定的状态。这个原子理论同样适用于设计系统中。
其中，最小单位设计元素就是基础组件。我们在做设计系统的时候希望当你改动任何一个原子，你有自信其他所有依赖于这个原子的部件全部自动更新。只有满足了这一点，设计系统设想中的效率、解放生产力才会真正实现。例如，在sketch中，分享样式和嵌套符号的使用。
业务组件
在构建完基础组件后，可以根据业务需求，将使用频率较高的组件进行评估，抽象成业务组件。
一般业务组件可分成两大类：
一类是由多个基础组件组成的带有业务需求复合组件，如：复合标签，快捷时间选择器等；
另一类是针对特定业务场景的业务组件：如地图，站点等；
页面模版
在完成基础组件和业务组件的构建后，我们可以根据全局说明，利用组件搭建页面模板。页面模版不仅能有效的提升组件的使用效率，也能提供很好的组件使用示范效应，加强设计说明和组件之间的结合。
组件质量评估：从物理到行为层，包括样式、组件、框架、组件交互 共4个维度。通过一致性评分衡量标准化覆盖的好坏。
系统应用层面的评价：
系统是否帮助业务提效；
当业务不能直接应用系统，能否灵活改动；
系统是否帮助业务变得更有竞争力、更创新；
迭代机制
当我们完成设计规范的整体构建后，对于新需求，通过评估复用性、通用性和优先级，低级别的走定制设计完成交付。高级别的通过抽象设计、内审、沉淀到组件库中。
机制提效
在完成设计规范的构建后，我们可以联合产品经理和前端工程师，帮助每个环节的人员快速搭建产出物，推动上下游机制提效。
例如，我们会基于设计规范，为产品经理提供符合设计规范的Axure元件库，产品经理使用元件库，可以快速搭建原型，产出prd，与设计师、开发的沟通也更加顺畅。简单的修改可以跳过设计师出图这一步骤，直接和开发沟通，极大加快前期的节奏。甚至通过借助元件库，产品经理可以搭建出高保真原型，用于直接和用户确认或者给客户进行demo的演示。
基于设计规范，推动研发实现组件代码化，通过设计标准化可以达到研发工业化。通过定义标准规范，提高流程、组件的复用率，开发侧就可以制定相应组件，形成前端脚手架，方便后期迭代的组件化使用，有效地避免不必要的分歧点和重复造轮子，同时减少上线前设计走查、测试的工作量，保证落地效果，提升生产力。
以上就是我们在构建自己的企业设计规范的流程，最后，给大家展示一下，我们目前的企业设计规范和部分应用情况。
2022年新建装扮中心整合各类装扮的分发入口。搭建皮肤商城、主页背景商城、头像商城、挂件商城4大装扮基建；高效扩充皮肤、挂件、个人主页封面和头像等个性化装扮资产，受到年轻用户的喜爱，佩戴装扮用户迅速增长数以百万计。
0-1搭建拓装扮资产规模的经验，今日与大家分享。
一 整合升级四大装扮基建，搭建系统装扮能力
拓新装扮场景，提升装扮曝光：百度APP个性化装扮场景已覆盖首页皮肤、个人中心皮肤、个人主页封面、个性化挂件和头像。
我们将百度APP原有的装扮能力整合升级，新建“装扮中心”统一分发，并在个人中心增加了一级入口，为更多的装扮形式与玩法创造更多可能。通过装扮中心、皮肤商城、个人主页背景商城、挂件商城、头像商城“四大装扮基建”支撑百度APP个性化装扮的分发和佩戴操作。
提供易用的装扮佩戴体验，增强装扮展现的吸引力，是装扮基建方向的设计目标。
1. 易用性
我们在全场景提供实时预览能力，装扮预览所见即所得；按装扮类型统一界面布局，降低理解成本。
2. 增强装扮吸引力
2-1 提升装扮展现丰富度：
装扮中心作为装扮聚合展现核心场景，提供套装装扮，界面内融入丰富动效、定义刷新策略持续推荐新内容，增加对装扮运营展现能力。
2-2 串联互通增强可逛性:
各装扮能力之间串联互通，通过分发场景间跳转进行交叉推荐增强装扮吸引力。我们从三条路径上为装扮拓展了分发入口。第一条：装扮功能内的场景，在装扮商城之间增加相关功能跳转、在皮肤和套装的预览页底部拓展更多推荐入口。第二条：在用户的非装扮使用路径上拓展入口，如在头像预览页、个人主页背景预览页引导用户设置头像和个人主页背景。第三条：以非常驻的弹窗形式，推荐装扮活动，吸引用户体验装扮功能。
2-3 丰富装扮玩法：
a. 限时免费装扮：精品套装装扮包括动态皮肤、动态头像、挂件、个人主页封面，支持一键佩戴四项个性化装扮，是百度APP的付费装扮功能。我们探索限时开放给用户免费使用玩法，效果超预期，收获了一大波装扮新用户。
b. 结合任务活动：将“佩戴装扮”作为运营任务，帮助用户获取任务金币，也把热门装扮作为任务奖励。
c. 与大型运营活动结合：与世界杯大型运营活动结合，设计度晓晓世界杯16强球队套装皮肤，通过限免使用，提升装扮渗透。
二 持续扩充皮肤/挂件/个人主页封面/头像等个性化装扮资产
装扮资产扩规模，重点考量通过提升设计质量增加装扮吸引力和快速扩规模的效能如何提升。
1. 精细化打磨，打造百度APP装扮套装
1-1 表现手法-本能层：
深入研究画面风格，在年轻化现代审美指导下，选择偏东方的设计风格，如国风、二次元风格等，因为这类风格多用图形、线条、颜色来处理空间关系，画面不会过于厚重，既迎合年轻用户喜好，又不过多打扰APP内容区域阅读消费。
举例：七月中元节的装扮设计中，整体配色偏暗、低饱和度的深紫色、偏灰的蓝色，可以传达出静谧、神秘的氛围。在色彩构图中没有用过多的色彩搭配，使用高明度差来刻画画面结构，因为明度反差处于人视觉的最底层。如果能用黑白反差区分层次，会首选黑白。在周围环境色中使用偏灰的蓝、紫色，并且与人身上的暖色对比，让人物更加突出。而在画面元素的刻画上增加飘带、鱼尾的流动感，这种带有东方感的元素，这种留白、平衡构图和侠气感，也有很强的东方特征，同时通过厚涂风格中常用的使用饱和度差异、大透视效果营造场景的空间感，增加画面的细腻程度。
1-2 内容-行为层：
在装扮具体的内容绘制中融入共情元素，吸引用户注意。比如结合节日、大事件推送套装，并在绘制中增加洛丽塔、国风、JK等年轻用户感兴趣的元素。
1-3 内涵-反思层：
通过积极情绪引导、激发思考，让用户感到心之向往或心生愉悦，可使用神情、动作、装饰花的花语等多种手段进行情绪暗示。
2 单品扩量，保证各类装扮的更新频率
与套装制作不同，单品的更新需要更加短、频、快，需要更加直接解决Z世代用户痛点。
2-1 协助用户搭建社交符号：
头像，作为用户在网络世界身份的象征，我们从横向团队项目中大量引入能代表身份状态、游戏爱好等方面的资源，快速补充头像单品资源库，我们也根据用户调研了解到有76%用户愿意和朋友使用“闺蜜/情侣头像”，我们在头像库中上线情侣头像，并将完善“头像分享卡”等功能形成体验闭环。
2-2 帮助用户表达自我：
百度APP头像挂件和游戏、社交、直播场景中的头像框不同，并不为了彰显关系、体现出社交关系中的尊贵感，百度APP用户更希望借助头像挂件来表达观点，为自己的主张、个性贴标签。
2-3 结合用户兴趣引起关注和共鸣：
在罗盘大数据中，我们发现，王者荣耀、和平精英、元神等游戏中，25岁以下年轻用户的占比都非常大，并且都愿意花钱购买皮肤装扮。二次元的游戏、动漫内容不仅仅受Z世代喜爱，且Z世代的渗透率最为突出。各大手游设计中也在不断的融入二次元元素，我们借力百度AI画图技术-文心大模型快速补充了二次元、游戏等风格方向的装扮。
三 建立规范平台，提物料输出效率
为了展现更好的效果、适配更多的装扮场景，且兼顾历史与开发成本等原因，装扮物料规则复杂，且种类繁多。《百度APP装扮体系设计规范平台》应运而生，它涵盖 5 项装扮能力、2项运营能力；每项能力均配有一键预览及导出物料模板。随功能迭代及时更新，保障了装扮物料的高效输出。
结语
目前百度APP装扮已经完成了第一阶段的建设，沉淀出一批受用户喜欢的装扮资产，未来我们也将不断探索、创新更多装扮玩法，未来也将探索出共创平台，成为一个装扮生态。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
。
随着技术及经济的发展，人们对计算机系统、机器等的要求，从单纯的「 可以用 」逐渐变为想要「 更好用、容易用、用得舒服 」等更加丰富的使用体验，也就是常听到的好的「 用户体验 」。
「 用户体验（User Experience ）」这个概念，最早由唐纳德·诺曼（Donald Arthur Norman）提出，他希望用这个词，来涵盖个人使用系统时的体验、各个方面的体验 ，包括工业设计图形、交互界面、物理交互，以及与人的交互。
而「 用户体验 」产生的基础，是「 用户使用了机器 」，即人跟机器有发生接触、交流、互动等，然后用户会形成主观上的体会、感受。这里的「 机器 」泛指各种「 产品 」，类比诺曼所说的，即物理界面、虚拟界面、系统、硬件等。
因此，好的「 用户体验 」是基于好的交互设计。而对交互设计「 好/坏 」的影响因素，涉及到人、产品、使用环境这三者，也就是人机工程的内容。
概括一下百科对「 人机工程学 」的解释：
将 「 使用物的人 」和 「 设计的物 」以及 「 人与物共处的环境 」作为一个系统来研究（人-机-环境系统）。在人、机、环境这三个要素 本身特性 的基础上，科学地利用三个要素间的 有机联系，来寻求系统的 最佳参数。
其中关于人的「 本身特性 」包括人体结构和机能特性。主要有人体各部位的尺寸、重量、面积、活动、相互关系等，眼耳鼻舌身对应的视、听、嗅、味、触觉，以及动作习惯和认知。这部分大愚认为可以把「 结构特性 」当作人的硬件，具有一定的普遍/通用性；而「 认知 」则是人的软件，个体间存在一定差异。
然后，就到了这篇文章的主要内容，人的「 结构特性 」部分。
注：下文中提及的人体结构特征是基于大部分人的情况描述，内容也是围绕人机交互有关的方面，不是人体结构特征的全面介绍。
人体结构中对人机交互产生影响的主要有眼、耳、身（皮肤）对应的：视觉、听觉、触觉，以及四肢、颈椎的尺寸、受力情况和活动幅度等。下文将对这四部分的基础内容进行整理，还有聊聊一些交互、体验设计上的应用。
人与周围环境发生联系的感觉通道，最重要的就是「 视觉 」，约占80%的信息是通过视觉来获得。因此「 视觉显示 」是人机交互系统中用的最广泛的一种形式。
人眼正常感受光谱的波长约在400nm-780nm之间（大概这个范围，网上相关资料关于这个数值存在微小差异），对应的色相是紫色-深红色，也就是常说的彩虹色。
而负责感受光的细胞是视锥细胞和视杆细胞。
视锥细胞，约占95%，复杂感受强光及有颜色（彩色）的视觉，在环境光线亮时起作用，用来区分色彩。研究数据表明视锥细胞对光谱中波长为555nm的「 黄绿色 」部分最敏感。
视杆细胞 ，约占5%，复杂感受弱光及没有颜色（黑白）的视觉，在环境光线暗时起作用，用来区分黑白。研究数据表明视杆细胞对光谱中波长为507nm的「 青绿色 」部分最敏感，对极弱的光刺激敏感。
如果涉及一些特定的工作环境（昏暗）的应用设计时，就可以考虑下此时作用细胞的特性，进行合理的设计设置。
正常情况下，瞳孔会根据环境中的光量来调整大小。当有光线较强时，瞳孔会收缩变窄；当光线很暗时，瞳孔会膨胀来让更多的光进入眼球。
可以把这个理解为一个保护机制，在强光下，通过收缩来减少光对眼睛的高强度刺激；而弱光下，对感光细胞刺激不足，为了不让眼睛过分费力地去寻找目标和识别目标而引起视觉疲劳，所以瞳孔会放大，让更多的光进入。
而接收光的刺激，看到物体后，是否可以准确获取信息（看清物体、识别文本、图像等）则跟视敏度相关。
视敏度 ，就是眼睛能分辨物体细微结构的能力，也就是看清物体的能力。相关实验数据表明，增强亮度可以提高视敏度。也就是说，亮度越强，人眼对物体的识别能力就越强。
下面提到两个实验，其中「 正对比极性 」，指在浅色背景上显示深色字体文本，就是对应我们界面设计中的「 浅色模式 」；而「 负对比极性 」，指在深色背景上显示浅色字体文本，即「 深色/暗黑模式 」。
实验1. 德国杜塞尔多夫精神病研究所的Cosima Piepenbrock等相关人员，对「对比极性对视敏度和校对的影响」的研究结果表明：人眼在「浅色模式」下的视敏度要优于「暗黑模式」下，字体越小，浅色模式的优势就更明显。
实验2. Agelab实验室的乔纳森·多布雷斯（Jonathan Dobres）等相关人员，对「 环境光照条件（模拟白天/夜间）是否影响正对比度极性的优势」的研究表明：夜间，深色模式下阅读小字体文本比浅色模式下阅读要困难得多。 而人们对文本的识别，「浅色模式」下比在「深色模式「要快，白天比晚上更快。
对上面两个实验可以用环境光的强弱对视敏度的影响来理解：为方便理解，可以假设我们的界面尺寸足够大，大到覆盖我们视野范围，那就可以将浅色模式中的浅色背景类比为白天（环境光度亮），深色模式中的深色类比为夜间（环境光度弱），而屏幕内的文本、信息，就是我们要识别的物体。亮度越强，人眼对物体的识别能力（视敏度）就越强。
从上面的实验来看，无论在白天或夜间环境下，「 浅色模式 」都要比「 深色模式 」更好用。
但根据德国蒂宾根大学的Andrea Aleman等相关人员的一项研究表明，长时间处于「浅色模式」下可能会导致近视。其表现为，阅读「浅色模式」下的文本时，脉络膜（跟近视有关的一层膜）会明显变薄；而阅读「深色模式」下的文本时，这层膜明显变厚。
可以理解为长时间处于「浅色模式」下，意味着视敏度的持续维持在较高状态，就像人在长时间高强度工作下可能会导致健康受损一样，眼睛同样也可能会受到损伤。因此相对长期来说，「深色模式」则是更友好的一种形式。
那通过适当的设计，是否有可能找到这两者之间的最优解呢？
注视区域光照不足、光线过强、光线分布不均匀、光源闪烁、眩光、反光、目标过小、目标不稳定等，都会造成眼睛超负荷工作，导致视觉疲劳。
光照不足，对应界面交互，可以指屏幕亮度过低，也可以理解为内容和深色背景间的对比度不足。
光线过强，则是屏幕亮度过高，也可以理解为内容和浅色背景间的对比度不足。还有大面积高明度色彩的使用。而像汽车远光灯，也是常见的一种光线过强的产品，并且常常被错误使用。
闪烁，会对眼睛造成很大的负荷。在高亮度下，眼睛除了视敏度会增强外，对闪烁的感知也会增强。这方面涉及的产品设计，如显示器的刷新频率，要到达某一程度，人眼才感觉不到屏幕的闪烁。
目标过小，在可识别及相同环境下，目标过小，识别所需的时间越长，也就是更费眼。像界面中的元素，文本字号、图标等，都需要有舒服的可读性。
反光，跟工业产品设计的关系比较密，反光是很容易引起视觉疲劳的和视力伤害。但生活中好像处处有反光，高楼大厦连片的镜面窗户/墙、我们正在看的电脑屏幕、手机屏幕、公交车广告牌的保护罩、汽车的后视镜等等，都会在某些瞬间让你觉得眼睛受到了亿点伤害，这也是很常见的一种光污染。
水平方向上，双眼视野角度通常可达到120°视角。其中「 有效视域 」为30°，即人眼能立刻看清物体的存在和动作轨迹的范围。其余部分称为诱导视野，也就常说的「 余光 」。
而眼动（头部不动）「 舒适转动区 」通常为60°。
如果以眼睛距离屏幕40cm为例，水平最佳视野宽度大概就是21.6cm，在72dpi下，约为600px。在进行文本宽度设定时，可以以此作为依据，来设计内容的显示宽度。
垂直方向上，视野角度通常可达到135°视角，「 有效视域 」为30°，「 舒适转动区 」为55°。
关于「 最佳视角范围 」及「 眼动舒适区 」的应用，在汽车领域的HMI设计和一些较为复杂的交互活动中有比较多的体现。
听觉对信息传递的感知仅次于视觉，同视觉一样，利用以前的经验来解释输入。
相比视觉，听觉更容易引起注意，且反应速度快，可以捕捉各个方向的信息，不受照明条件限制。
人类听觉系统对声音的解释可帮助设计人机交互界面中的语音界面，而对有能力缺陷的人，如视障人士来说，「 听觉（语音交互） 」更是一种替代视觉显示的重要形式。
声音有三个要素：音调（频率）、响度（振幅）、音色（材质）。
人类可以听到的声音频率范围为20Hz-20kHz，正常情况下人耳可分辨出约 40多万种 不同的声音。
对语音的辨认频率范围为260Hz-5600Hz。正常情况下，人类语言的频率在：500Hz-3000Hz之间。
感受性、识别性最高的频率范围在1000Hz-4000Hz，低于500Hz，或高于5000Hz时，要达到一定响度才能被听到。
0－20dB，几乎感觉不到
20－40dB，相当于低声说话，轻柔的响声
40－60dB，正常谈话的声音
60－70dB，会感到吵闹、长时间会损害神经细胞
超过70dB，让人感觉烦躁，无法集中注意力
85-90dB，短时间内影响人的听力，破坏神经细胞
超过90dB，听力受损
超过140dB时，引起的是痛觉，而不是听觉，会完全损害听力（欧盟界定的导致听力完全损害的最高临界点）
人耳对各种音色的分辨能力非常强，对经常听到的音色也具有很强的记忆力。
比如在同一频段同时演奏不同的乐器，人耳依然可以分辨出有哪些乐器在进行演奏，也能识别出不同动物的叫声。
而对于熟悉的人，比如对父母兄弟姐妹等，经常只通过说话的声音，就能知道是谁；通过脚步声，也可以辨认出来是谁来了等等。
除了对声音的「 音调、响度、音色 」这三个要素的感知之外，人耳还能辨别出听到的声音是「 从哪里/哪个方向传来的 」，也就是声源方位感。
瑞士的神经科学家通过研究发现：粗糙的声音（上限约为130 Hz）激活了大脑某些特别的区域。
当重复的声音被认为是刺耳的、无法忍受的时候（特别是在40-80Hz之间），会引起持续的反应，刺激杏仁核、海马体和脑岛，特别是跟突出、厌恶和疼痛相关的区域，而正因为有这些区域参与声音的处理，才会使这类声音会让人感觉到难以忍受。
这也是警报声的应用原理，通过快速重复的频率来引起人们的注意。再结合声音传播不受光照、方向、角度等影响的特性，来提高警报声被人耳检测到的概率。
其他让人感到烦躁、难受的声音，如汽车喇叭声、尖叫声、婴儿哭声等等通常也是在这一频段。
视觉上的三维图效果，是眼睛先呈「 散焦状态 」，视焦点前后位移产生层次感，从而看到三维平面图画的立体效果。
而人耳的听觉跟视觉相反，可以从众多的声音中「 聚焦到某一点 」上，也就是听觉的「 聚焦效应 」。
比如我们听交响乐时，大脑皮层可以抑制其它乐器的演奏声，把精力和听力集中到其中的一种乐器声音上。还有在公交地铁上，我们同样可以集中精力听广播报站的声音，而忽略车上的其他喧闹声。
这个特性也让语音交互的场景拥有更多的可能性。
触觉属于动觉交流领域，即通过身体的运动/动作来交流。
跟视觉、听觉的感知相比，「 触觉 」最大不同是它的非局部性（全身皮肤），以人体为介质，对皮肤、肌肉的感受器进行刺激，能够 敏感、强烈和更迅速 的被用户感知，及时传递信息。也 不易受环境影响，无论环境吵杂，或是光线不佳，对其体验效果的影响都不大。
但「 触觉 」传递的信息远少于视觉和听觉，通常作为视觉和听觉反馈的补充。而对有能力缺陷的人，如听障、视障人士来说，「 触觉交互 」的应用则是一种很重要的形式。
同时也是用户体验过程中重要因素之一，会直接影响用户对产品的情感体验与交流。在工业产品设计中感受较多，如日常工作生活中常见的家居用品、鼠标、键盘、手机等的外形设计、材质触感等。
人类的皮肤表面散布着触点，一般指腹最多（人类手指的触觉敏感度是前臂的10倍），其次是头部，最少的是背部和小腿。触点的大小不尽相同，分布不规则。
通过对冷、热、尖锐物体的判断，让身体及时远离危险和伤害，可以对人体起到保护作用。
同时也具有表达情感，辨别情绪的功能。有说法认为「触觉」可能是用来传达人的情感的最佳途径，就像「 拥抱 」和「 安慰的文字/语言 」，体现的情感强度就很不一样。
借助Haptics技术，通过作用力、振动等「 触觉反馈 」，可以起到传递信息的作用。但想通过「 触觉体验 」来传达恰当的、有用的信息，需要先理解人类是如何诠释不同的「触觉体验」的。
比如想要通过「 振动感知 」来传递有用的信息，需要先了解怎样的振动频率、强度、节奏可以让使用者意识到其代表的是什么意思：成功、失败还是其他呢？这涉及到「 认知 」方面的内容。
通常情况下，「 触觉反馈 」是作为视觉、听觉反馈的一种补充。
如在触控屏上用虚拟键盘输入文字时，通过按键的「 振动反馈 」，让用户清晰及时地了解到自己已经成功按下了某一个按键。相关研究的结果也表明：虚拟键盘加入振动反馈后，是可以提升用户输入时的准确度。
而一些特定场景下，「 触觉反馈 」可以很好的替代视觉和听觉反馈。
比如驾驶汽车时，驾驶员需要将大部分的注意力放在道路环境上，那么通过「 触觉反馈 」，将部分操作结果传递给驾驶员，这一可以在一定程度上减轻驾驶员在视觉和听觉上的负担。
人类的动作通常分为三类：先天、模仿、训练得来的。
由于肢体的结构特点，「 先天 」和「 模仿 」的动作，通常存在一定的局限性。
颈椎前屈幅度35-45°，后伸35-45°，左右侧屈各45°，左右旋转各60-80°。
当颈部前倾时，颈椎承受的压力逐渐增大：
前倾0°时，为头部重量，约为4.5-5kg；
前倾15°时，承受压力约为12kg；
前倾30°时，承受压力约为18kg；
前倾45°时，承受压力约为22kg；
前倾60°时，承受压力约为27kg。
结合前面我们讲过的人眼转动的舒适角度和视野范围，可以为一些物品的设计提供参考。
直立，腰伸直自然体位时，腰部可前屈90°、后伸30°、左右侧屈各20-30°、左右旋转各30°。
人体平（仰）卧位时，腰椎承受的压力最小。
膝关节屈膝角度可达120-150°（小腿后部和股后部相贴）。人坐立时，膝关节弯曲90°，小腿和地面垂直放置对腿部最好的，屈膝小于90°时，长时间保持会影响下肢的血液循环。
伸直时一般为0°，有过伸状态5-10°。膝关节屈曲时，有轻微的内旋和外旋运动，约为10°。
肘关节弯曲角度可达140°、过伸角度为0-10°、旋前80-90°、旋后80°-90°。
打字时，手肘弯曲接近90°（水平放置）是最放松的。
掌侧可以外展约70°，指间关节屈曲约90°，掌拇关节屈曲约20-50°。
和手腕连接处的腕掌关节，能够进行较大程度的屈伸，收展，完成对掌运动。这是拇指特有的，是拇指骨外展，屈和旋内运动的总和，使拇指尖能跟其他的手指和掌面接触。
掌指关节屈曲约60-90°，近节指间关节屈曲时约为90°，远节指间关节屈曲时约为60-90°。
在使用手机等数字界面时，用「 食指 」和「 拇指 」进行触控是比较自然和常见的行为。
根据麻省理工对人类触觉的实验，食指、拇指的宽度和触控区域有以下数据：
食指平均宽度约16~20mm、指腹触摸区域尺寸约10~14mm、指尖触摸区域尺寸约8~10mm。
拇指平均宽度约25mm、指腹触摸区域尺寸约12~16mm、指尖触摸区域尺寸约10~12mm。
触控控件的最小尺寸要大于触摸的最小尺寸。控件过小，一方面会增大准确触控的难度，另一方面手指会造成遮挡，导致用户无法明确是否已经正确触摸了相应的控件。
（手指触控这部分本来放在上面关于触觉的内容里，后面想了下，「触觉」更多的是指「反馈信息」层面的作用，所以还会归在肢体动作、范围里比较合适。）
用键盘打字时，在某些瞬间，多数手指只是放在键位上，没有击键行为，因此键盘按键的驱动力需要大于手指重量产生的力，才足以支撑手指。
ANSI 1988 年建议键盘击键的理想压力应该在0.5N-0.6N之间，一般0.25N-1.5N的压力都是可以接受的。
而对于一些特殊的设备按键，比如工业键盘类的，则需要更大的按键驱动力，因为这类产品的工作环境和活动相对复杂，需要更谨慎的操作。
单手对手机等触屏设备进行操作时，一般以四个手指和手掌为依托，用大拇指操作为主，而成年人拇指长度约为6-10cm。
数据表明，一般成年男性，单手全屏操控的屏幕尺寸最大约为4.5英寸，而成年女性，单手操控的极限约为4.0英寸。超过这个尺寸，单手进行全屏操控会有一定困难。
而目前主流的智能手机基本在5英寸以上，根据拇指关节的活动幅度，单手操作时在手掌位置不动的情况下，拇指触及的区域只是很局限的一部分：
以上就是体验设计中涉及人体结构特性的内容部分。
感谢阅读，期待交流。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com