简介 ：包容格式是一种用于文本输入的模式，使用这种模式后，可以让用户输入文本内容时不用关心格式或语法，从而轻松达到预期目标。
例子 ：Google 搜索输入框
用户操作界面时只是想完成某件事或某个操作，而不是考虑「正确」的格式或复杂的UI。计算机擅长弄清楚如何处理不同类型的输入。如果计算机无法正确处理多种类型或格式的文本内容，那么用户在输入内容时就会有明显的受阻感。
所以，让用户输入所需的任何内容，然后让计算机来处理结构或格式，才是一种比较理想的方法。这种模式可以极大地简化界面，并使其更容易被用户理解。
相关资料：
https://zhuanlan.zhihu.com/p/343497540
用户可能会输入不同类型、格式的文本内容，而我们希望用户可以不用太关心格式问题，同时希望界面保持简洁。很多时候，用户输入的数据可能类型、格式不一（例如存在空格、连字符、缩写或大写等等），如果提供不同的输入类型，那么界面就很可能不够简洁。这种模式可以很好地将数据类型有效处理。
使用条件：
输入内容存在不同类型或格式；
希望用户输入比较容易；
希望界面简洁；
核心思想：将界面设计问题转化为编程问题。
我们需要考虑用户可能输入的文本类型：
简单的例子：只要求输入一个只有格式不同日期或时间；
复杂的例子：搜索某些关键词，根据关键词获得不同的结果；
由于业务场景不同，每个应用程序使用此模式的方式可能不同。只要确保软件对各种输入格式的响应与用户期望的一致即可。因此建议与用户进行真机测试。
用户需求：将特定股票添加到个人关注列表。
东方财富的股票搜索框，用来帮助用户快速找到目标股票。该搜索框就使用了「包容格式」这一模式。用户既可以输入股票代码进行查询，也可以输入股票的名称进行查询。
用户需求：输入信用卡号
很多产品都有输入信用卡号的场景，用户应该只要输入16位数字，而不需要明确这 16 位数字的格式。输入的内容中是否带有空格对结果不应该有任何影响。
gumroad 的信用卡号输入框允许用户随意输入他们的信用卡号。信用卡号字段接受空格作为分隔符（不包含空格也可以），然后这个输入框会立即将输入的卡号格式化。
用户需求：创建日程
我们会有很多方式来表示日期，例如周一、星期一、2021/06/20、6-14 等等。在 macOS 日历中创建日程时，用户可以输入各种格式的日期，输入框都会正常识别到该格式，并按照其日期创建日程。
你可以在下方查看「包容格式」更多的案例：
https://airtable.com/shr9tuJY8zKxAIdfo/tblXEEC6HykKOL3Ef
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
众所周知蚂蚁集团的B端产品是一个庞大的系统，数量多且功能复杂，而且变动频繁，常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件，根据原子设计理论可以得到一些稳定且高复用性的内容。
随着这两年B端产品的逐渐白热化，越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标，蚂蚁集团体经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。通过组件化设计规范，降低冗余的生产成本，让设计者专注于更好的用户体验。
针对B端产品反复出现的一些设计体验等问题， Ant Design 给出标准的设计原则，实现跨应用交互一致性的有效融合。依照这些原则使用 Ant Design 组件设计界面，既减少了不必要的认知成本，又能够提升设计的效率。考虑到需要适应各种定制化的业务场景，设计原则具有一定的灵活性，万变不离其宗，通过了解设计原则的构建逻辑，高效组织信息、帮助建立用户与界面的互动等原则性要求，可以衍生出更具场景特性的设计方案。
可以说 Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则，并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充，我在看书的过程结合『Ant Design 』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明，这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。
稍微了解 Ant Design 的小伙伴都知道，本系统是针对B端后台系统，承载媒介是PC端的浏览器。使用的人员主要包括：用户体验设计师、交互设计师、UI设计师、前端程序员等。
顾名思义『 设计原则 』主要是针对设计师在创作页面时依照的标准。虽然『 Ant Design的设计原则 』是 Ant Design 系统的一部分，但是前文已经提到，此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华，所以设计师可以把这些原则运用到任何的设计领域，并不要局限于企业后台系统的PC端产品。
为了方便大家理解，讲一个小故事。故事来自于《写给大家看的设计书》，作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后，发现其中有一颗叫约书亚树的树，造型奇特，自己从未见过。于是决定出门转转，然而发现外面到处都是这种树。故事到这里就完了。
可能大家会想，这个故事要讲一个什么道理呢？简单来说就是，当你手中有个锤子，满世界都是钉子。当你了解到下面要讲的十个设计原则后，你会发现它们处处都适用。
十大原则如下：
亲密原则（Proximity）
对齐原则 (Alignment)
对比原则 (Contrast)
重复原则 (Repetition)
直截了当 (Make it Direct)
简化交互 (Keep it Lightweight)
足不出户 (Stay on the Page)
提供邀请 (Provide Invitation)
即时反应 (React Immediately)
巧用过渡 (Use Transition)
对于一个初级设计师而言，想要了解UI用户体验等知识，学习 Ant Design 的设计原则算是比较快能上道的，因为 Ant Design 是吸取了很多前辈的精华，提炼而成的系统。打个简单的比喻，对于设计师而言 Ant Design 就是设计师学习『 视觉规范 』，掌握『 设计原则 』最好的字典。
接下来我就给大家说说我是如何快速理解 Ant Design 的这10条设计原则并运用到工作当中。
Ant Design 定义了10条设计原则，根据『 席克定律 』选项太多不易记忆，于是我找到了这些设计原则的共通性，将其归为4类，也就是大家只需记住四类设计原则，在工作中适当延展即可。
包含 Ant Design 的设计原则有：『 亲密原则 』『 对齐原则 』『 重复原则 』『 对比原则 』。
「视觉层级清晰」的重要性体现在 交互前 用户看到的内容结构是清晰明确的 。一个层级混乱的界面，任何信息的传达都是无效的。所以保证清晰的排版布局是人机交互前的基础。
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
纵向间距：在 Ant Design 中，通过「小号间距」「中号间距」「大号间距」这三种规格来划分信息层次结构。这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。
增加元素：通过增加「分割线」来拉开层次。在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次。注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是纵向间距，8 是「基础间距」。
组合排布：为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。（注：栅格是另外一个模块的内容，这里不赘述。）
复选框内：在一个组件内部，元素的横向间距也应该有所不同。
正如「格式塔学派」中的连续律（Law of Continuity）所描述的，人类的视觉系统往往倾向于将看到对象的直线继续成为直线，曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，「整体不同于其部件的总和」。——摘自「维基百科」
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
推荐使用：标题和正文左对齐，使用了一个视觉起点。
不推荐使用：标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。
冒号对齐：冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。
需要区分主次场景：
不需要区分主次的场景：「通过」和「驳回」都使用次按钮，系统保持中立。在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
总分关系：通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
常见类型有「静态对比」、「动态对比」。
静态对比示例：用不同颜色的点，来表明不同状态。
动态对比：鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
线框重复：
设计要素重复：
文案格式重复：
包含 Ant Design 的设计原则有：『 直截了当 』『 足不出户 』『 简化交互 』『 即时反应 』。
「交互操作高效」的重要性体现在 交互时 用户操作流畅、简单、用时短。如果仅仅只是解决高效的问题，却忽略用户能否理解流程如何操作，那这样的解决方案也是徒然。有的时候并不是解决实际时间的长短，而是用户的心理时间是否太长的问题，就像我们打游戏往往会觉得时间过的很快，但是在等待页面加载时却不耐烦。
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
变化盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》
心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
气泡提示：对于操作的反馈是必要的，下文会提到，但是为了减少打断用户，轻量级的反馈气泡提示即可。
输入覆盖层：鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。不用弹窗或跳转的形式编辑，只需要在触发图标附近弹出浮层即可，这样避免用户视动线的混乱，减少打断用户操作的心流。
正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
常规的编辑模式，界面都会跳出一个弹窗或者是一个页面跳转，无形之中用户走了更多的流程路径，如果能在当前页面就把编辑问题解决掉那就符合了 Ant Design 『 足不出户 』的设计原则。
文字链/图标编辑：
状态一：在可编辑行附近出现文字链/图标；
状态二：鼠标点击「编辑」后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。
多字段行内编辑：编辑模式在不破坏整体性的前提下，可扩大空间，以便放下「输入框」等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。
拖放图片/文件：在早前很多产品在上传功能上，都是跳出弹窗再选择文件上传，现在基本都可以实现拖拽上传了。这样的设计大大提高了用户使用上传功能的效率。
模糊搜索：系统根据用户所查询的关键词，智能匹配可能的结果。
定时自动更新：新增的列表项「高亮」，持续几秒后恢复正常。不需要用户手动刷新，减少不冗余的操作。
人们在思考的时候，是需要依靠大脑神经元之间相互传递信号，而回忆是需要调用更多的的神经元传递信号，简单地说就是非常费脑子。
搜索历史：搜索历史的功能，可以减少用户的回忆，使得整个体验更加轻松愉悦。
根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互，起到信息降噪的作用。
费茨法则 ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。
列表嵌入层：将列表为多层级时，隐藏弱层级列表内容，可以让用户更加直观地看到重要信息。当我在聚焦某一个列表模块的内容，鼠标悬浮即可展开。
标签页：标签也换可以将信息内容进行分类，让用户更易理解。
渐进式展现：用户在填写表单时，会根据当前录入的数据，展现下一项需要填写的内容，这样的展现方式可以屏蔽掉无关紧要的内容。
悬停即现工具：鼠标悬停时，出现操作项。这样将不重要信息或者操作隐藏起来，不会干扰到用户浏览其他重要内容。
包含 Ant Design 的设计原则有：『 简化交互 』『 巧用过渡 』『 即时反应 』。
「系统反馈及时」的重要性体现在 交互之后 立即给出反馈。就像「牛顿第三定律」所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
牛顿第三定律 ：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》
实时预览：根据用户的输入，提供关于密码强度和有效性的实时反馈提示。
文字链热区：当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
Receding: 与当前页无关的信息元素应采用适当方式移除。
Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
表格加载：网络不好或者表格数据过多，都有可能导致加载缓慢，这时有一个小动画可以缓解用户的焦虑感。
富列表加载：用户在打开列表时，页面无法做到一次性加载所有的数据，同时有为了减少翻页的繁琐操作，就有了下拉自动加载的。
页面加载：当用户访问的页面体量过大时，系统会通过给出倒计时或完成百分比，来缓解用户焦虑，并且给用户友好可控的感觉。
滑入与滑出：可以有效构建虚拟空间。
折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
对象增加：在列表/表格中，新增了一个对象。
对象删除：在列表/表格中，删除了一个对象。
对象更改：在列表/表格中，更改了一个对象。
状态一：用户更改了「详情」中的值；
状态二：用户点击「保存」后，详情所在的网格出现「黄底」，表明该对象发生了更改；
状态三：底色持续几秒后，恢复正常。
对象呼出：点击页面中元素，呼出一个新对象。
用户常常会疑惑自己的操作是否成功了，哪怕是失败了也是需要系统反馈，这样才能安心进行下一步的操作。
页面反馈结果：
气泡反馈结果：
包含 Ant Design 的设计原则有：『 提供邀请 』『 足不出户 』『 即时反应 』。
「用户自由可控」的重要性体现在 交互前对下一步操作的预判；交互时 不论操作后的结果多严重都要允许用户自主决策；以及交互后 能否对自己的操作结果反悔。
很多富交互模式（eg：「拖放」、「行内编辑」、「上下文工具」）都有一个共同问题，就是缺少易发现性。如果用户在操作前就能得到下一个交互层次的提醒和暗示，以表明在下一个界面可以做什么。 这样人机交互的过程往往更加自然、顺畅。
点击刷新：对于设计师而言，最常见的例子要属花瓣了，我们时长会沉浸在我们浏览的瀑布流卡片中，如果系统强行刷新当前页面，用户很有可能迷失。邀请用户主动更新，既不会错过新的消息，又不会导致我们的心流被打断。
未完成邀请：用户在当前页面无法完成登录操作，为了减少用户迷茫的焦虑感，系统告知用户点击“更改”链接，可以去向何处。
悬停邀请：鼠标「悬停」时，出现「选择此模板」的按钮。
虽然系统中缺少不了一些危险操作或者不可逆操作(eg：删除、重置、重装系统等)，但是仍然要用户自主决定是否继续，我们能做的就是让用户再三确认。
弹窗提示：虽然弹窗打断用户心流，但是对于重要的操作，这样是最保险的方式。
删除知识库提示：是钉钉中，删除「知识库」这一重要内容，是不可逆的，系统需要用户谨慎操作。
如果说「自主决策」中提到的案例都是不可逆的，那「准许反悔」的后果严重性会弱一些，系统对用户的操作没有那么强的阻断性，所以要准许用户反悔的，
删除撤销：用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。
Ant Design在"幸福者示例中"写到“Ant Design 无法保证业务产品能否成功，但是能帮助业务产品『正确的成功』或者『正确的失败』。”
如果团队有一个产品idea，我们需要通过最少的资源开发此产品并投入到市场中，通过听取用户反馈，验证idea是否可行，快速迭代最终做出更完善的产品。但理想是美好的，但现实是骨感的，在前期研发的过程中通常会出现两个情况。创业团队没有足够的设计资源和时间，前几个版本的产品通常用户体验非常差，这种情况体验差有可能让用户放弃这款产品。创业团队没有好的方法论和协作模式，需要磨合，设计和开发进度一延再延，结果错过了风口，市场被竞品抢占，还没上线就倒闭了。
Ant Design提供了一套完整的界面实现方案，即有代码框架能直接拿来提高开发效率，每个界面组件都经过蚂蚁金服多个项目的考验，具备优秀的用户体验。用Ant Design来做0-1，能快速发布用户体验优秀的产品，听取用户反馈，快速迭代。
当然，创业是九死一生，市场和用户口味都充满了不确定性，谁也没有能力保证产品是否成功，但是只要你能高效的产出质量优秀的产品，不断试错，说不定以后就能成功。
用 Ant Design 就能高效的产出高质量的产品，减少设计和开发的不确定性。
因为我们公司就使用了 Ant Design 的系统，所以时常会与前端小伙伴沟通，以下都是他们在使用过程的感想。
Ant Design 提供的大量功能比较全面且UI风格统一的组件，能帮助开发者快速搭建通用场景下的应用界面。这大概是得益于蚂蚁金服业务线上极为广泛的应用场景，驱动了 Ant Design 团队通过对使用情况的观察汇总，整理出来了这么一个组件库。他们的经验积累如此之丰富，足以让这个库支持大部分其他前端开发者的需要。
其设计团队给出的设计规范相当详细且经得起推敲，令许多其他团队获益匪浅。
我见过太多宣称自己在乎用户体验的公司，给用户的产品质量确实比较高，但是自己员工内部使用的系统和管理一团糟。种种不便让员工经常加班，情绪消极，这样的团队抄抄竞品达到行业标准体验还行。要想突破是不可能了，因为创新需要员工有充沛的精力和主动性，天天加班谁还有这精神。
用 Ant Design 系统提供的设计工具和组件框架能给设计师和开发者减少负担，能用更少的时间呈现给用户体验好的产品。这样带来的好处不仅仅是设计师和开发者觉得少加班成就感高而幸福，他们重新恢复活力和激情能做出更有创意和竞争力的产品，给公司带来更大的收益，这是一个三赢的结局。
一定有小伙伴会有这样的疑问，目前市面上有这么多的第三方设计规范，例如 Ant Design ，Element UI，有必要自己造轮子做一遍吗？
这里要视情况而定，如果公司产品是初创期，而且研发人手不足，那确实没有必要自己造轮子。反之在资源足够的情况下，是有必要设计团队重新做一套属于自己产品的规范组件库的，因为B端自身的业务性决定了市场上没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。
对于比较普通的设计解决方案是可以的，但是 Ant Design 包含的组件细节仍有不足，毕竟 Ant Design 没必要投入过多的精力在组件细节深入度上，规范定义的越是精细，对于产品组件而言可延展性就越差，限制也会越多。而 Ant Design 只需要解决80%企业，80%的通用问题即可。
当市场大部分产品都在使用 Ant Design 设计系统时，产品的同质化就会很严重。为了避免这种情况发生，我们就有必要从设计语言、设计原则、设计组件三个部分开始，设计自己的规范。那些大厂的成熟的组件库该如何用呢？我认为应该把它当成一个字典，有不会的地方，可以去参考人家的成熟的解决方案。
这篇文章简单的介绍了一下 Ant Design 是什么、 Ant Design 的设计原则是什么以及 Ant Design 的优缺点。当然也重点总结了一下，设计师如何运用 Ant Design 的设计原则，可以将这些原则分为四类：视觉层级清晰、交互操作高效、系统反馈及时、用户自由可控。希望大家通过这篇文章能够更深一步了解 Ant Design 的设计原则，并将其灵活运用到设计工作中。
参考文献：
《Ant Design 官网》
《设计心理学 1 》 [美] 唐纳德·A·诺曼
《写给大家看的设计书》 美国罗宾·威廉姆斯(RobinWilliams)
《web界面设计》 Bill Scott Theresa Neil
《维基百科》
《如何评价 Ant Design 这个项目（一个设计语言）？》 龙爪槐守望者
文章来源：站酷 作者：菜菜不甜
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
面对企业级产品，由于系统复杂度和业务领域的专业壁垒，用户、产品、业务、技术的理解和分析难度都远远高于C 端。特别是进入业务深水区，技术术语层出不穷，角色链路错综交织，场景越来越复杂，在理解和分析业务上设计师需要耗费的精力越来越多，设计师如何高效且深入的分析业务，直接影响到设计解决问题的深入度。基于蚂蚁金服CTO 线的业务土壤，我们不断尝试打磨，探索出以JCD 为核心的企业级产品设计思维，助力设计师在深耕业务上有章可循，有方法可用。
做企业级产品 3 年多，刚从 C 端业务转过来时，最大感受是对业务理解起来很艰难。随着经验的增加，对 0 到 1 产品驾驭起来轻车熟路，可到业务深水区，还是感觉痛苦。技术术语层出不穷，用户角色多，一个用户身兼数个角色，系统之间的关联关系也很复杂，随着业务的深入设计师会感觉对产品逐渐失去掌控力。一个简单的芝麻信用分，需要 20-30 个中后台产品和各种角色一起协同支撑。然而复杂是守恒的，系统复杂性的总量是一个衡量，当前台的呈现更简单时，隐藏在幕后的复杂性就增加了。
我们面临系统的复杂性表现在三个方面：
多角色，重协同。
链路长、错综交杂。
技术术语多，业务难理解。
但企业级产品会有一个主线，是从「事情」的角度出发，关注一件又一件事情被完成。企业场景下我们再把事情描述的具体一些，就是一个又一个的 Job 。设计师要做的就是通过设计，包括参与的角色、使用的工具以及协作方式等，让 Job 被高效完成。
我们先对比一下，从「用户」视角和从「Job」视角出发，关注的维度有哪些差异呢？从用户视角出发我们需要关注用户的个人痛点、情绪、兴趣、人种志（年龄、性别、收入）等信息，会更关注人，核心是为了满足用户的需求。在Job 视角下，需要关注 Job 的目的、参与角色、协作方式、工具等信息，而且 Job 对角色是有要求的，比如航空公司飞行员，按岗位要求，他需要不断提升自己业务能力，每年要去复训两次，学习新的技能和知识来满足岗位对飞行员这个角色的要求。
基于我们的业务土壤，以及出发视角，我们探索出一套适合企业级产品的设计思维，JCD（Job - Centered Design ）以 Job 为中心，设计完成 Job 所需要的一切，包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它是一套适用于企业级产品设计的发现问题、解决问题的方法论。
在 JCD 设计思维下，将设计流程分为四个阶段，发现、构思、呈现、度量。每个阶段下有不同的方法、产出、资产。Ant Design 在「呈现」阶段帮设计师大大提升了效能，设计师才有更多的精力投入到「发现」阶段去更深入去理解业务和角色。接下来重点分享一下在发现阶段的两个方法，角色分析和业务分析。
常用的 C 端的用户画像，如下图，会关注用户人口统计学的信息，如名字、性别、年龄、所在地、家庭情况、用户的习惯、爱好等信息，这些信息在复杂的企业级产品中是不需要去关注的。
在JCD 的视角下，我们企业级产品的角色画像应该关注的三个维度：角色概览、工作能力、工作内容。而工作内容是最核心需要关注的信息，包括了工作的描述、工作的痛点、需求和使用的工具。
一个角色往往需要完成多个Job，描述一个Job 包含：
四要素：情景、角色、活动、目标。
一个句式：在什么情景下，角色需要完成什么样的活动，来达成一个目的。
举个例子，在飞行前 1.5 小时（情景），角色（飞行员）需要去查看飞机情况（活动 A ）、气象情况（活动 B ），来判断能否起飞（目标）。
为了给设计提供具体的依据，我们需要进一步纵向解构Job，来构建 1 个完整 Job 场景，设计师可以阶梯式对一个 Job 进行拆分，Job 下面有多个 Activity，Activity 下面有多个 Task 组成，Task 下面有不同的 Action，到这种颗粒度可影响到设计界面中的具体元素。
看一个具体案例，如何拆解一个 Job，首先用我们的上面的四要素和句式描述。Job：飞行前 1.5 小时，飞行员需要查看飞机情况、查看气象情况，来判断能否起飞。在飞行员这个角色的 Job 里包含了两个 Activity ：1. 查看飞机情况；2. 查看气象情况。查看气象情况这个 Activity 下包含了三个 Task：1.查看起飞地天气；2.查看降落地天气；3.查看备降地天气。
每个 Task 下面会有不同的 Action。除了 Job 的纵向拆解，我们还需要关注每个 Job 场景下的需求、痛点、费力度、成就感。
做好一件复杂的事情，往往需要多个角色在多个工作场景中协同配合。我们会以Job 场景为核心，梳理角色之间的协作关系，建立全局视角。比如，在飞机起飞前，机组飞行员查看飞机和飞行信息、查看起降地天气等；同时乘务组空姐们为此次飞行做相应准备工作。准备完毕，机长会通知机组和乘务组开始登机。上飞机后机组需要检查驾驶舱情况，乘务组检查客舱情况，检查完毕，会一起协同机场地勤人员安排乘客登机。完成登机后，飞行员需要联系机场管制申请起飞........ 设计师可以通过Job 场景去串联角色之间的协作关系，如下图。
以上是「角色分析」的方法，是从 Job 出发洞察角色的工作需求以及协作模式，帮助设计师构建角色协同的全局观。
业务分析的方法是借鉴面向实体的思路帮助设计师去深入分析复杂业务。企业级产品中会有各种技术术语、复杂的数据流转、业务逻辑等，我们需要一个系统的方法来分析和理解业务，为设计提供准确有深度的信息输入。我们的用户大部分是软件工程师，这个思路可以让设计师在理解和认知上对齐用户的心理模型。我们业务分析的有三个维度：
产品定义
实体建模
业务逻辑
通过以上三个维度，从纵向和横向去深入和全面的理解业务。
通过沟通交流、桌面研究的方法，去了解产品和用户相关信息，熟悉相关概念和技术背景、沉淀信息资料，来收集产品的信息，具体的产出有名词库、产品画布、产品的关系图、业务结构图、产品形态图等，这里不展开详述。
实体建模是本次分享的重点，实体建模按照面向实体的思想分析业务，围绕实体进行问题和内容抽象和分析，聚焦于产品内实体和实体间的关系，以及实体的生命周期的分析。
我们先看什么是实体，参考领域建模（此处感谢幻星给实体的定义）给实体一个定义：实体是产品中客观存在，具有唯一标识的并可以相互区分的业务载体，通常包含属性和行为。
企业级产品系统的实体，很多情况下都是熟悉的字母，陌生的单词，在设计之前设计师如何去准确、系统的去分析实体。
举个例子，现实世界中，「机票」是一个实体，在产品里，可以把「机票订单」看成一个实体。围绕着机票订单，我们梳理出它的基本属性信息，以及它具有的所有状态和对应操作，设计师可以进一步把这些状态和操作梳理出一个「机票订单」这个实体从产生到消失整个生命周期经历的过程。这些分析可以作为后续任务流程和设计细节的信息输入。
一个实体不能构成一个产品，一个系统会有很多实体存在，我们需要进一步去梳理「机票订单」与系统中其他实体的联系。在下图的案例中，机票订单与机票是聚合 n：1 关系, 一张机票订单会包含多张机票，机票订单与收支明细是关联 1：n 的关系，一张机票订单会关联到多个收支明细，比如会有支付成功、退款等明细。
以上是实体建模的过程，产品定义和实体建模都是对业务内容层进行理解和梳理。但是我们的业务除了内容外，还有很多复杂的业务规则、业务流程，我们也需要进行梳理和分析，这样设计师才能对业务有全面的理解。
所以我们需要把结合实体、业务规则、业务流程，进一步梳理业务逻辑。最终会得到一张业务逻辑图，不仅能够帮助设计师洞察到业务的本质，也能帮设计理解业务的全貌。
第二个方法业务分析，是通过面向对象分析思路去深入的理解业务，为设计提供更精准，更有逻辑的依据。
回顾以上三部分内容，JCD 是什么？Job - Centered Design 是以 Job 为中心的设计思维。JCD 的定义：以 Job 为中心，设计完成 Job 所需要的一切，包括角色、工具、协作关系等。以 Job 被高效完成为决策依据的设计思维。它包含了原则、流程、方法&工具、产出&资产，上面重点分享了其中两个方法「角色分析」和「业务分析」。
文章来源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这是5月参加阿里设计周“智能与计算”分论坛后的感想小结，因为论坛大部分在讲算法和实现方式，所以在这里我就其中的AI与设计相关部分做一些深入分享。
我的思路大概分为三个部分：AI时代的来临；AI如何影响设计；未来的设计何去何从。
第一部分：聊聊AI时代来临，设计的世界发生了什么变化？
每个时代的设计都有不同的定义，农业和工业时代的设计更多是指设计师通过手工制作的方式阐释自己对美感和艺术的理解。
到了信息时代，设计除了要考虑美感，还要考虑是否实用和好用。设计的对象开始从真实世界转向数字世界，设计思想开始考虑以用户为中心的设计；设计方向也增加了很多领域，包括都多媒体艺术、游戏设计、网页设计、移动应用设计等。
在人工智能时代下，AR设计、智能硬件逐渐发展，设计的改革更多考虑的是如何将真实世界和数字世界进行融合，如何在自己产品上更好地阐释艺术、美感和实用性。
第二部分，AI如何影响设计，设计因为人工智能而产生了哪些改变呢？
结合论坛的内容，我觉得从以上五个方面产生了较为深远的影响。
人工智能帮助设计师解决在创意过程中面临的一系列问题，将重复劳动变得自动化 ，节省设计师大量的时间，减轻设计师的工作量。
数据驱动自动生成，取代人工建模，减少了设计的时间成本。通过组件标准化，来构建三维几何，然后geometry格式入库，最后由渲染引擎绘制。
再比如，双11期间有1.7 亿个BANNER，都来自阿里的“鹿班”AI设计系统。设计数据—机器学习、训练模型—生成设计结果并评估。如果这些工作量由人工来完成，那么设计师真的就成了“没有感情的作图机器”了。
当今社会，随着产业智能的发展，在这个变革中，挑战不单单来自技术，也来自客户对智能数字体验的极致追求。这给开发人员和设计师都提出了全新的难题，在可视化领域，通过技术和设计两个角色更紧密的捆绑，产生了让人欣喜的化学反应。
从原始数据到图表并不是直接的，它需要经过交互的分析，得到指标结果，最终以可视化图表呈现，而呈现的视觉方式是多样化的。
这就是所谓的两种数据，三层讲述：
第一步是原始数据的准确转译，工具需要数据对接能力，即对现状的讲述。
第二步是分析过程，从脚本模式跨入数据驱动，让数据的分析变得可知可信。
第三部是观点数据的表达，也就是创作强化，将结论以可视化的多样形式被表达。
这是根据地图的原始数据得到的多种可视化设计方案，同一份原始数据，却得到了不同的形式表达。
因为仅仅有准确的数据结论是不够的，因为数据需要更好地被讲述和表达，如果仅仅将数据呈现给用户，那么理解难度将会大大提高，而设计是为了让产品变得更加容易使被理解和使用。
第二点，体现在建筑的三维可视。
首先，在二维地图选取建模范围，通过智能化的处理，根据数据构建初始的三维地图。
然后通过数据联动，将城市建筑虚拟还原。
整个过程从数月—> 数周—> 数天，时间大大缩短，人力成本减少，释放更多的精力去进行创意工作。
建筑三维化的应用：比如车道级地图。
相比于传统地图，车道级地图导航在信息精细度、定位准确性、动态信息丰富度上有大幅提升。
车道级导航能清晰显示道路上的虚实标线、自己的车行驶在哪条车道上，还能在地图上看到车身摄像头和雷达检测到的周围车辆、锥桶、防撞桶等。
当设计对象从单个产品转变到用户的经历和当前环境时，设计师不能只考虑自己的产品体验，需要从大局出发，思考每个产品之间的联动，考虑不同场景下自己的产品如何服务用户以及如何与其他产品联动。产品设计从单体变成一块需要考虑兼容上下左右外部环境的拼图。
智能化的场景的改变对设计有哪些影响呢，我们来看这张图：设计的场景从有形—>无形、静态—>动态、永恒—>瞬间的转变。体验设计的趋势从GUI到TUI(实体交互)，再到Radical Atoms，场景的改变对设计的影响维度不是单一的。
设计场景在AI时代不仅局限于手机，还涉及到实时场景的设计情况。
比如谷歌的实时翻译、语音翻译。输入与输出是同步进行的，这就对设计提出了新的要求。
此外，还有语音智能VUI，彻底打破了以往的交互体验，改变了人和工具之间的互动关系，反向塑造着人类的认知方式和学习行为。下面来看一个小爱5.0案例：
对话是人与人之间交换信息的普遍方式，语音交互设计涉及系统学、语言学和心理学，因此它比 GUI的交互设计更加复杂。
体验设计经历了PC时代、Mobile时代，现在进入IoT体验时代。设计的解决方案与技术的发展息息相关，设计和技术互相促进带来新的体验革命，设计师一直在探讨和实践在新技术环境下的新体验设计，并基于出行、医疗、社区、政务等行业持续挖掘服务聚合模式与场景体验的创新。
在新零售的场景下，购买和支付流程发生了改变，这就需要设计师重新思考消费者的心理地图。例如无人零售、Amazon Go、支付宝IOT支付等等。下面来看一下Amazon Go的案例：
如何让用户使用更便捷、体验更顺畅；要向用户提供什么样的服务，如何让用户注意到我们的产品，如何向他们传递企业的服务价值和特点，这是IOT新零售下需要设计深入研究的方面。
在云端实现企业产品的全区域管控，监控的设计视觉和交互又是不一样的，比如论坛上的案例：荷鲁斯之眼、全区域覆盖的云监控等等。
通过对多个实体空间中的数字设计探索，重新塑造人与空间的交互界面，提升人们对于空间的使用体验。下面举个例子：
AT&T discovery district是一个数字化的互动商业社区。
它从重新审视建筑本体开始。通过虚实和光影的变幻，营造出了实体空间体验，空间本体就是对话的那个界面。实体空间和数字内容的结合，构建出人与建筑之间新的交互界面。
广场的数字球体入口，人的位置和数量变动，球体内的灯光也会跟随变动。
人工智能促使了交叉学科的工种产生：数字体验设计师、创意工程师。这两种职业是做什么呢？面对正在到来的智能时代，体验设计师和创意工程师将共同面对“AI”这一全新的命题，在智慧工地、智慧教育、数字警务室、神经符号AI等应用中，提炼出智能感设计方法、利用图形技术能力自研产品并赋能业务。
数字世界中的设计师：横跨了艺术、文化、科学、商业多个学科；从传播学、心理学、应用科学和统计学进行用研，去解决用户遇到的问题。
它不仅涉及到需求分析和产品设计，还贯穿至产品运维、测试、发布、分析，从设计洞察中做出创新设计。
未来的设计师将融合人工智能和创意编程技术，在世界数智化的大潮中找到新的定位和新的机遇。
第三部分，在人工智能时代下，未来的设计会走向哪里？新时代的设计师怎样找准自己的定位呢？
人工智能的成熟对部分设计师来说简直是灾难性的打击，之前无论是通过技法还是数据分析才能完成的工作，人工智能一下子就可以完成，后续根本不需要这么多设计师来完成这些工作。那么设计师是否会被人工智能取代？我们先来看一张人类能力地图：
这张图中，海拔高度代表这项任务被计算机执行的难度，不断上涨的海平面代表计算机现在能做的事情。从图中可以看出，目前人工智能水平预警线距离代表艺术的山峰还很远。
人工智能没有人类的跨领域推理、抽象类比能力，也没有人类的主观能力如灵感、感觉和感受；更没有人类特有的灵魂、爱、意识、理想、意图、同理心、价值观、人生观等，这导致人工智能在未来很长一段时间内都无法很好理解人类的心理和行为是什么，在解决推理和情感问题时会不尽人意。
设计除了解决问题外，还涉及对美的理解和创作，美感是对美的体会和感受，它是复杂的，包含了历史、文化、环境、情感等客观因素和主观因素，所以在不同的时代、阶级、民族和环境中，有着不同文化文化修养和个性特征的人对美的定义也不同。
人工智能依赖数据和经验解决问题，它能解决大部分智力可解决的问题，但解决不了需要情感和美感才能解决的问题。而设计的擅长领域，是人工智能不擅长的：跨领域推理、抽象能力、常识、审美、自我意识与情感。那么AI与设计的关系怎样的呢？
设计是为了解决问题。人工智能使机器代替人类实现认知、识别、分析、决策等功能，其本质是为了让机器帮助人类解决问题，也就是说，人工智能在一定程度上也是一种设计，它会创作出与人类思维模式类似的解决方案。所以AI与设计师是一种共生关系。因此设计师不用杞人忧天，担心自己被人工智能取代。
随着AI 技术的成熟，设计必定会发生新一轮的变化，在未来，更多领域和行业需要用到界面设计、人机交互等技能，各行各业的设计师需要掌握以上技能才能更好地服务当前业务。那么未来的设计将走向哪里呢？
新一代的设计师是“与互联网共同成长的一代”，相信在未来几年里有更多的新晋设计师会掌握编程开发能力以及其他能力，综合素质会比目前的设计师更强，所以我们要保持终身学习，懂得如何将自己的能力和经验转换为优势，这样才能在设计道路上不被超越。
那设计师可以从哪些方面来应对智能时代的机遇和挑战呢？
每一代人都有被下一代人取代的风险，但有些很厉害的人就不容易被取代？因为他们在不断创造价值。无论在社会、行业还是在企业里，当具备一定的影响力后，他们能更容易积累人脉和资源，然后反哺自己的价值，就跟滚雪球一样，当雪球越大，他们越不容易被别人取代，设计师需要有这样的意识。
设计师需要懂得更多领域的知识和技术才能拓宽自己的视野，这些领域包括但不局限于传感技术、网络技术、智能仿真技术、虚拟技术、生物技术、纳米技术等。因此科学与艺术是可以并且很有必要相通与交融的，设计师一定要学会跨界思考。人工智能时代下，数字世界和物理世界会逐渐融合，大到城市建设、公共服务、衣食住行和医疗；小到智能家居、穿戴式设备，这些机会将会留给已准备好的挑战者，所以设计师一定要拓宽自己的视野，不要把自己的目光局限在界面设计上。
如果不想被人工智能领先，人类的设计应该是创新的（未成熟、未被发现规律的），包含更多元素的（更多复杂参数如历史、文化、环境、情感等），“设计”这个词语就涵盖了以上元素。人工智能在艺术设计上还远远达不到人类的水平，深耕艺术设计将会为设计师带来更多机会。
在人工智能时代下，当产品基本都能满足永不需求时，能为产品带来活力和差异的除了自身的底层技术基础，更多的是艺术型设计师的理念和风格，以及自身的品牌。就像时尚品牌优衣库和Gucci，单件商品两者的品牌和设计所带来的的利润差距巨大，相信未来的人工智能产品也会面临类似的问题，设计师应该考虑如何为产品赋予更多价值，如何彰显用户的个性。
既然AI是一个强大的工具，那么我们要思考如何运用它来创造更多的价值。AI能够快速便捷地获取大量信息，帮助设计师拓展自己的视野，不断更新自己的世界观，从新的视角看待问题和解决问题。除了快速获取信息外，设计师也应该考虑如何通过AI提高自己的工作效率，例如哪些纯劳动力工作交给AI去做效率会更高；哪些工作可以和AI一起协同完成更能激发创意。
最后，用一本科普书改编的话来结尾：一想到，还有95%的问题留给开发同学，我就放心了。
最后附上一张本文的脑图：
参考资料：
[1]阿里设计周.智能与计算.2021
[2]薛志荣.AI改变设计.2019
[3][美]詹姆斯·弗拉霍斯.智能语音时代.2019
[4][美]梅瑞狄斯·布鲁萨德.人工不智能.2018
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
智能家居越来越普及，智能化的生活是由一个个智能设备组成，这次通过近距离体验智能面板，来研究一下它们是如何提升产品体验的。
随着互联网的发展，生活智能化越来越普及，各类智能产品逐渐出现到人们面前，在体验的过程中，其实里面有很多细节需要深挖和思考。很多产品细节的背后都是为了提升用户操作效率、兼容用户使用场景、满足用户情感表达，以最终达到对用户体验的提升。作为智能产品的设计师只有充分了解市面上的智能产品，才能设计出更好的产品。
开关对于每个人都不陌生，它用来控制设备的状态，传统开关的数量和要控制的设备数量有关，设备越多，开关越多，为了简化人们的操作，智能面板孕育而出，它不仅可以操控家中单独的设备，还可以对一系列设备进行联动控制。
1. 使用场景
室内近场控制，满足用户家中近距离控制设备的场景。
2. 产品选择
Gira、ORVIBO、绿米
为什么选他们？
3. 研究方向
本文将从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
Gira g1
TFT 屏、KNX 协议、定价 8000 元起
KNX 属于欧洲总线技术，稳定性最好，需要从设计阶段介入，高门槛的技术要求让 KNX 难以实现全民普及。
ORVIBO 智能开关
多点触控电容屏、Wifi、蓝牙、Zigbee、定价 899 元
Wifi、蓝牙、Zigbee 属于无线通信技术，稳定性不如 KNX，但免布线，易扩展，利于全民普及。
Aqara 智能开关 S1 触摸屏
IPS 屏、zigbee 协议、定价 899 左右
通过以上分析，Gira 的人群定位是有全屋定制需求的高消费人群，其他两个品牌的人群定位是面向尝鲜体验的广大普通消费群体。
1. 功能点对比
通过功能列表中的对比发现，三个品牌的产品都通过场景联动设备执行来提高人们的操控体验，通过左右滑动来快速切换功能模块类型；
Gira 和 ORVIBO 支持快速返回首页、面板内排序；
ORVIBO 的个性化体验最好，它具有语音控制、设备自动添加、设备自动归类功能，这些差异点让它比其他两个产品更加智能。
以 Gira G1 为例，从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
界面整体用以黑白灰为主，搭配少量颜色，给人简洁干净的感觉；
思考：智能面板除了具有功能属性，还具有装饰属性，黑白灰为经典搭配，可以更好兼容各种家装风格，还可以更好的展现内容；少量的颜色用来强调正在运行的设备状态。
辅助色大方向上使用两对互补色，在色环上形成了一个矩形，通过调节亮度饱和度达到统一和谐多彩的效果。
主要分为 2 大层级：功能卡片列表、设置为第一层级，设备控制为第二层级；
对于 gira 这种全屋定制的产品，家中一般会有很多设备，功能卡片放置在第一层级的好处是，便于用户浏览锁定目标功能卡片。
区域 1 显示 KNX 协议类型，室内外温度，时间；这部分内容占比很小，说明这些内容用户不常用，但用户会偶尔还是会看一下；
区域 2 为房屋名称，返回上一级、返回首页、设置、展示形式切换，这一区域全局置顶显示，用户在多级操作后，可以很快速的返回到首页；
区域 3 显示设备、场景的数量，用户可以清楚的掌握家中设备场景的数量；
区域 4 为设备场景列表，用灰色背景来强调主操作区域。
一屏最多 6 个设备，通过左右滑动来展示更多设备
思考：为什么不是上下滑动，而是左右滑动
有 2 点猜测：
卡片内容从上到下依次为设备场景 icon、名称、状态及快捷操作；
用户可以通过 icon 快速锁定设备类型，通过名称确定目标设备，进行快速操作；
各功能模块独立划分，快捷操作区域可以很好的兼容不同设备的功能键。
操控界面划分为 2 部分，一部分为信息展示区，内容为设备名称、所属区域；
另一部分为控制区，这部分区域固定，可以让不同的设备控制看起来更统一；
大面积区域留给核心功能，辅助功能布局在四周，便于用户准确操控。
设备控制界面通过左右划动快速切换其他设备，不需要返回菜单界面。
手掌长按屏幕，可唤起提前设置好的开关功能，这时面板相当于简单的开关，可以很快速的关闭开启所在区域的灯。
Gira 这样做还原了开关的本质，当想要开启或关闭该房间内的灯时，就不需要到菜单界面找这个设备了。
灯
灯操控界面用刻度形式表现，每一度为一个刻度，并且还可以通过中间的加减号进行精确到 1 个百分比的亮度微调，品牌方想为用户打造成清晰准确调控的形象；
但在实际使用场景中，我们不大会对灯进行这么精确的调节。
温控器
温控界面同样可以精确调节，每 0.5 摄氏度为一个刻度；
温控的精准调节，就比较贴近我们日常的使用习惯，温控器控制界面是没有开关的，因为目标人群家中多数是中央空调，随便就可以关闭，对于大户型的用户来说是不友好的。
右下角的定时按钮可以让设备在特定时间内以某一状态运行。
窗帘
窗帘的状态值与操控条左右排列，这样的排布好处是可以让操控条长度最大化，便于用户控制；
窗帘控制界面只分为有调角度的和没有角度的；
窗帘操控条竖直排列，向上滑到顶部为窗帘全开，滑到底部为全关；
窗帘的行程和角度都用百分比的形式展现。
设计设备控制界面的思考方向一般有 2 种：
1. 界面控制方式要和设备的实际运行方式一致
这种思考方向要考虑实际窗帘有左右运行和上下运行之分，上下划动的操控方式来控制左右运行的窗帘会有认知上的偏差；
百叶帘的角度有正向和反向转动之分，如果只按最后的遮光百分比来做，会造成设备兼容问题。
也就是说为了模拟真实的操控方式，需要设计出若干不同种类窗帘控制界面。
2. 界面控制方式与设备运行结果关联
这种思考方式不需要考虑窗帘的种类及开合方向，将所有种类的窗帘行程及角度归为开、关两种结果状态，
就像 Gira 这样，只需要做两套界面就可以兼容几乎全部的窗帘设备。
Gira 竖排控制条的优势
如果横向布局，那么左右滑动切换设备时，会触发控制条左右手势，造成误操作。
背景音乐
设备列表中背景音乐卡片的快捷按钮很特别，由静音、播放、下一曲组成，我们设计的时候一般会做成对称的：上一曲、播放、下一曲，Gira 并没有这么做，因为在背景音乐的使用中，一般有几种需要快速响应的场景：用户在家中发起临时谈话，需要暂时安静一下；不想听了；这首歌的风格不喜欢；
背景音乐操控界面功能和音乐应用差不多，唯一不一样的是，底部可以快速切换歌单，可以很快速切换不同音乐风格。
文件夹功能
随着设备、场景的增多，用户可以根据自己的喜好将设备或场景归类放置，便于快速定位功能卡片；
点击文件夹卡片，进入到显示着众多功能名称的文件夹界面，点文件夹，才能进入功能卡片列表，为什么要多一个文件夹查看的界面。
我们想象一下有这样一种场景：面板中有几十个功能卡片，用户想开启娱乐场景，这个场景好像在客厅文件夹或走廊文件夹里，于是去客厅文件夹快速翻看这里面有没有，再点进去操作。
Gira 这样做符合用户在功能卡片多的情况下快速选择的习惯。
排序功能
可以通过拖动来调节设备卡片在菜单中的位置，省去了去后台设置的步骤；
定时功能
定时列表用具象的时钟来体现开始运行时间，还用黑白来区分夜晚和白天，对于用户来说扫一眼图片就可以知道运行时间，这种体验很好。
以 ORVIBO Mix Pad 为例，从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
整体运用深色色调，使用几何图案作为背景；
用白色体现基础信息，用色彩强调设备场景的状态及天气信息；
运用圆角元素，更加生活化。
颜色运用比较丰富，以蓝、橙两互补色为主，其他颜色分别为它们的邻近色；既能保持强对比，还能让颜色变得柔和。
主要分为 2 大层级：首屏、设备控制界面、场景列表、闹钟为第一层级；设备类型、设置为第二层级；
智能面板一般装在墙面，用户站立操作，用户不可能花太长时间来操控；
欧瑞博的人群为广大普通消费群体，家中的设备不会太多，设备控制界面层级前移，可以方便用户直达控制区，用完即走。
首页主要分为 2 个区域：
日期天气区
时间、日期、天气状况信息，可以满足用户日常出门关注的内容，并且在这个区域有多种表现形式供用户选择，既保持个性化还不失统一感。
快捷控制区
可以将常用的功能置顶在首页展示，最多设置 2 个，用户在首屏既能看到日期天气还可以控制设备，大大提升了屏幕的利用率和用户的操作效率。
这样做的好处：
当用户准备出门时，看了一眼面板上的天气，点一下关玄关灯，就可以直接出门了，不需要滑到灯的菜单界面找到玄关灯然后再关闭它，真的很方便。
底部有向上滑动提示，告诉用户下面还有重要内容。
卡片内容左右排布，从左到右依次为 icon、名称及状态、快捷控制，这种排布的好处是可以缩小每个卡片的高度，从而提高屏幕利用率；
但有个问题就是，左右排布的方式，内容最多呈现 4 个文字，需要考虑这几个字能否清楚的定义该卡片功能。
上滑可以查看全部功能卡片，给用户在手机上浏览信息的熟悉感；
在新的操控设备运用用户熟悉的交互方式可以降低用户的学习成本；
移动端上常见的手势对应结果有：左右滑——代表切换，向下滑——代表唤起相关功能设置，向上滑动——浏览更多信息。
用户在首屏左右滑动就可以切换不同功能模块，不需要返回上一级，在设备类型少的情况下，这种盲操会比较方便。
下滑进入功能类型选择、系统设置界面，这一区域相当于导航，可以实现功能模块间的快速切换。
多种手势的组合可以在有限的屏幕内操作更加灵活，但手势太多会带来一些问题：
针对以上问题解决的方法可以是：
场景卡片分为未激活、运行中、运行结束三种状态；
场景运行状态变化在卡片 icon 区域体现，既传达了运行的过程，又不会打扰到用户。
点击卡片列表最底部的编辑按钮，可以选择将某一功能卡片置顶到首屏，方便用户快捷操作。
将普通灯、场景、门窗等操控方式相近的设备进行了归类显示，并且和空调、色温灯、背景音乐等设备放置在同一层级；
从交互体验层讲：由于家里的普通灯、场景、门窗的操控方式简单统一、数量多，按照类别整合在一起便于查找控制；
从视觉层讲：设备操控界面布局形式多，会给用户造成整体视觉上的不统一，增加学习成本。
空调
空调控制界面，只能通过左右滑动以整数的形式来调节温度，开启中的时候，背景会有对应模式的色彩氛围效果，给用户更直观的感受；
底部只保留用户最常用的模式、风速、风向三个功能。
色温灯
色温灯界面默认为用户推荐 6 种不同场景下使用的色温选项，底部提供亮度调节功能，用户只需要去选择，大大缩短了用户的操作路径。
个性推荐在电商类产品中很常见，推荐机制基于对用户行为习惯的分析，需要强大的后台数据支持，智能家居这一块通过穷举用户生活中的设备使用场景、目的从而提炼出对应的功能选项可以大大提升产品使用体验。
窗帘
窗帘控制界面采用半写实风格，给用户更加直观感受，学习成本低，拖动窗帘区域就可以进行行程的控制，由于没有微调按钮和行程状态百分比，所以无法做到窗帘精准控制；
选择这种写实的设计风格，需要考虑设备控制界面布局、样式对新增窗帘类型的兼容性。
背景音乐
背景音乐默认界面只保留了当前播放音乐封面元素，更多复杂操作被隐藏到了下一级界面，用户在当前界面可以进行暂停、播放、收藏等简单操作；
在小屏幕中做设计时，有时候会在一个层级界面中堆砌许多功能按钮，使界面变的臃肿，一来容易让用户误操作，二来让用户找不到重点功能，操作效率低下；
我们在处理这些信息时应该结合使用场景，按用户的使用频率进行权重划分，将权重低的进行隐藏处理，突出核心功能，减轻用户操作负担。
智能家居厂商大多都是靠卖硬件赚钱，欧瑞博巧妙的运用会员机制结合背景音乐功能来售卖音乐服务（49 元一年），更加具有互联网商业思维。
在语音设置中，可以选择是否开启语音控制，系统默认 2 组唤醒词激活语音控制；
欧瑞博为用户提供了更便捷的语音控制功能——快捷口令，说出指令就可以快速执行，由于没有房间、设备名称的限定，这个功能只能实现面板内所有同类型设备的开或关，适用于小户型简单的场景。
传统上添加一台新设备需要：选择要添加的设备——选择网关——输入正确Wifi密码——进入设备配网流程——配网成功——设备名称设置，操作流程繁琐，中间稍微有些环节没有操作对，最后就无法成功添加设备，欧瑞博通过简化中间过程，成功解决了这一痛点。
用户可以在面板中直接设置首屏的风格样式，系统一共有 3 种风格外和一个随机演示选项供用户选择，并且这三种风格的功能架构是一样的，只是对背景图、元素大小、布局做了设计区分。
以 AQARA S1 为例，从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。
整体使用黑色做背景，用白色体现基础信息，底部的色块元素貌似起装饰作用，和天气情况并没有联系；
首屏主要分为日期时间和环境状况 2 个区域，天气、温度、湿度、空气质量信息并行排列，个人认为用户对这 4 个信息的关注度是不一样的，看看我们手机上的天气 app 的信息排布就知道了，这样并列排布会让用户分不清主次。
颜色以蓝色及其邻近色为主，搭配少量的对比色，整体色调统一。
主要分为 2 大层级：首屏、设备控制界面、场景列表为第一层级；设置为第二层级；
形式和欧瑞博一致，都是为了让用户更便捷的操控；
但进入设置页面，设置主题类型的步数比欧瑞博的多一步，用户设置完成后还得一步步返回，这里可以将用户常用的“显示”内容上移一个层级，减少页面跳转次数；
AI 手势这种有特色的功能隐藏的太深，不便于用户的使用。
绿米同样运用左右滑动进行首屏、场景列表、设备间的快速切换，对于相同类型的窗帘设备，并没有整合成列表放置同一屏，而是另起一屏，设备多的时候就会存在操控效率低的问题。
下滑进入系统设置界面，这个区域只有一个设置功能，有点浪费空间，索性就把设置下一级的功能选项移到下拉页面，还能提高用户的操作效率。
场景运行过程以进度条的形式在卡片底部体现，对用户的干扰小，并且只传递出开始到结束的过程，没有成功提示，这种逻辑是正确的，因为面板只是传达出了一个命令出去，具体什么时候传出、接收设备是否正常运行，这些信息面板是获取不到的。
场景列表与设备控制界面一个层级，温控器、调光灯运用半圆的元素作为控制区域，新颖的设计风格是绿米智能面板的特色；
仔细看，会发现设备控制界面不统一，相同功能的开关按钮，在不同的设备中位置却不一样，还有就是普通灯是偏写实的 3 路开关样式，其他界面却是抽象的圆环几何样式，不统一的界面会增加用户的学习成本。
空调
空调控制界面，通过上下滑动以整数的形式来调节温度，新颖的操控方式让用户加深对品牌的印象；
底部开关、模式、风速同级展示，这里存在几个问题：1、用户在设置空调时很容易误点关闭按钮；2、缺少常用的风向调节，功能缺失造成较差使用体验。
灯
普通灯可以在 App 中设置 1、2、3 路开关样式，这种形式同样存在问题：一屏最多放三个开关，屏幕下方大片区域空置，利用率低。
窗帘
窗帘控制界面显示窗帘的名称及行程状态；窗帘的开、合，绿米给了 2 种方式：滑动控制、全开全关按钮；
增加暂停功能可以提升使用体验，因为用户在操控窗帘设备时，会以窗帘实际的运动行程为依据来决定窗帘需要开合到什么程度，而不是看界面上窗帘的位移，当用户觉着窗帘行程可以了，按暂停键就可以准确停留在用户想要的位置上。
调色灯
调色灯用户可以自定义或选择系统推荐的颜色；
为了涵盖大多数的用户偏好，调色灯的 4 个推荐色采用色环上差距大的颜色，并且根据用户使用场景筛选出常用的几种色调，排除了用户不常用的绿色、紫色、粉色。
用户可以根据自己的使用偏好，将最常用的功能模块页面放到第一屏，这个功能在一定程度上可以提升操作效率，当设备多，还是需要切换很多屏。
用户使用面板分为：紧急情况、常用情况，紧急情况不一定常用，就像出门需要关灯；常用情况不一定紧急，例如看时间
绿米为了让用户便捷，给出默认页自定义功能，存在的问题是：如果用户把灯作为开机第一页，那么日常中看时间要翻页；日期时间作为第一页，开关灯需要翻页，都不是特别便捷。实际上可以做成像 Gira 那样，通过增加手势唤起快捷开关功能，首屏留给日期时间，既满足了日常需要，又能满足紧急需求。
通过上述分析，我们得到了这些产品的共同点与差异点，以及背后的思考方式，了解共同点可以让我们弥补自己产品的不足，不被市场淘汰；学习它们差异化的思考方式可以帮助提升我们产品的竞争力。
作为一名合格的设计师，除了学习视觉技法和理论，还应该多玩、多看、多思考真实的线上产品，体验其核心操作流程，推敲和思考产品设计背后的原理和逻辑，才能不断提升体验设计思维。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：Aaron杜斌
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
智能产品的设计过程中，常常用到动效设计，那么动效设计用在哪些地方及对提升智能设备体验带来什么帮助，是这篇文章要讲的。
上期回顾：
通过大小、位置和透明度的变化，使得界面与界面之间、界面上元素的出现和消失都有关联，让用户和产品的交互过程更流畅，给用户更好的体验。请看以下案例：
1. Nest 温控器控制界面
Nest 温控器从时钟转变到温控调节界面的过程中，时钟的指针向圆心收缩，周围的时间刻度生长并一起向中心收缩，指针收缩动效对应温控调节界面温度值的显现，时间刻度的生长收缩动效对应温度刻度的显现，由于元素之间进行有关联的变化，操控过程中会有丝滑流畅感。
2. Gira 窗帘设备
当用户调节行程时，中间的控制点跟随手指实时运动，而进度条会有延时拖拽效果。为什么会是这样呢？原因是：用户在控制面板上的操作是需要由面板向窗帘设备发送指令的，也就是说面板上控制窗帘到窗帘设备运行中间会有一小段时间间隔，用户会有延迟感，所以 Gira 在控制窗帘行程的过程中，进度条为了与窗帘设备运行同步，加入延时效果，让用户感觉操控响应快的错觉。
3. Nest 新款温控器
用户在滑动切换功能时，功能 icon 会按照先后顺序由大到小变化，由于连续性运动，每个元素运动都有衔接，会有流畅操控感受。
4. Nest 智能锁
用户输入密码后至锁打开这段时间，数字依次向下消失，锁 icon 逐渐出现并且打开，体现出柔缓的感觉；实际上动效有时候可以弥补设备执行缓慢的不足，当设备需要长时间才能执行时，这段时间加入动效，动效运行时间和设备实际执行时间一致，用户就会觉得很顺畅；也可以让动效运行时间小于设备执行时间，这时用户会觉得操控反应更快。
通过动效能够帮助用户使用功能，对功能的方向、位置、唤出操作、路径等进行暗示和指导，方便用户在最短的时间内来学会操作产品的一些功能。请看以下案例：
1. Amazon Echo
用户第一次设置好监控后，通过放射动效提示用户双击屏幕，通过上下扩张的箭头动效提示用户可以通过手指来进行监控画面的放大缩小。
2. Lenovo Smart Clock
当设备第一次配好网重新开启后，通过遮罩、圆点大小位置运动搭配文字告诉用户长按屏幕可以控制什么功能。
顶部弧形的上下变化，告知用户下拉可以控制什么功能。通过简单的元素既能起到提升用户的作用，还不打扰用户。
通过动效给用户展示需要的内容及产品侧想让用户了解的内容，让用户更乐意更易于理解，强化功能感知。请看以下案例：
1. B&O 触控音箱
双击音乐标题，进度条从左向右生长出现、操控点放大出现，既强调了进度条这个隐藏功能，还暗示用户可以拖动操控点从左向右拖动操作。
2. Google Nest Hub 调光灯界面
用户从列表进入调光灯界面时，调光条灰底从左向右弧度生长，随后当前亮度条生长出现、亮度值出现，先暗示了用户可以从左向右弧度操作，后强调了当前设备状态。
3. Google Nest Hub 睡眠质量检测界面
用户查看睡眠质量数据时，睡眠质量标题信息渐隐渐现，睡眠数据条、数字生长，让数据展示有主次之分，强调了用户想要看的内容据，更人性。
在产品设计里面有一个非常重要的原则：让用户有操纵感。这种操纵感不仅仅表现在对用户的操作有了反应、有了显示，还有一种方式是让用户知道当前产品运行的状态，是正在等待还是正在加载，还是正在下载或变化，那这种状态的告知也是增强用户操纵感的方式之一。请看以下案例：
1. LG 智能洗衣机
当用户往洗衣机里加入衣物后，出现量杯倒入洗衣液的动画，告知用户当前洗衣机正在进行哪一个环节，我们分析一下这里加入动效的用意，首先，一般的洗衣机没有屏幕，有的话也就显示当前的功能选项，LG 的这款洗衣机是液晶屏，那么它的定位就是高端人群，通过融入动效，打造差异化，提升使用体验，加深用户对 LG 品牌的印象。
2. Lenovo Smart Clock 起床闹钟功能
用户设置好起床时间后，系统会根据时间段自动进行背景颜色的过度，来模拟天色的变化，直观的告知用户当前的时间是白天还是晚上或是黄昏。
3. Orvibo 除湿界面
设备进行除湿的过程中，面板上圆形元素进行旋转，伴随粒子扩散效果，模拟水分子消失的过程，直观形象的告诉用户现在正在做什么。
4. Lenovo Smart Clock 猫眼通话界面
用户接通猫眼后，通话 icon 进行电播扩散动效，模拟声波扩散效果，准确的向用户告知当前通话中的状态。
5. Google Nest Hub 语音唤起
当用户说话唤起语音控制时，原先的全屏画面收缩，响应用户的指令，四周留白，为通话内容提供展示空间，然后彩色点元素起伏变化，通话内容出现，告知用户已接收到指令；随后彩色点元素旋转加载，体现正在执行中。在语音控制的每一个环节都加入动效反馈，会让用户觉得他不是在和一个冰冷的机器讲话，富有人情味。
6. Orvibo 窗帘控制界面
运用轻拟物效果和与实物一致的运动方式，用户可以直观的看到窗帘的行程位置与开合状况，大大的提升了产品易用性。
面对一款新的智能产品时，用户可能不知道怎么操作它，通过动效向用户交待页面内容之间的关系，让用户清楚的知道从哪里来，到哪里去，更易于理解从而可以快速上手使用。请看以下案例：
1. Nest 温控器设置界面
温控器的设置模块通过左右滚动以便在有限的屏幕中展现，那么模块的下一级页面跳转做成像 App 那样左滑切入是无法明确层级内容的，此时需要一个与左右滑动不一样的动效来区分模块的切换，Nest 运用翻转效果，强化了层级感，清楚交待了页面翻转后面的内容与页面前的关系。
2. Google Nest Hub 设备控制界面
用户从顶部导航中进入设备列表过程中，设备列表页面从右向左进入，暗示用户“当你想返回上一级，可以左滑离开哦”，用户上下滑动设备列表时，屏幕左边滑动条出现，更加明确了“左滑返回上一页”的功能；
当用户通过列表进入操控界面以及切换功能页时使用淡入淡出的效果，弱化它们之间的跳出感，来强调它们是一个层级的内容，从细微处可见 Google 的设计师在动效的使用、选择上非常克制，值得我们学习。
3. Google Nest Hub 日程提醒界面
用户发出查看日程安排的命令时，日历界面从左到右进入，告诉用户这是一个新的页面，接着日期数字 21 进行大小位移变化，月份不做变化，为了强调这是 21 号的日程，2 条日程信息按照时间先后从下向上运动，交代了日程处理的优先级。Google 设计师将信息展现的每一步都让用户看的清楚明白。
在可用性良好的前提下，通过一致性、趣味性的动效设计和创新的交互方式为产品增加亮点，带来更惊喜的体验，传达产品的气质与态度。请看以下案例：
1. Google 多端运行动效
在品牌塑造上，Google 已被证明做得极为成功，而且在视觉表现层面，Google 系产品具备着“一致性”和“连贯性”，这让 Google 获得了品牌识别上的利益。在不同设备的动效设计中，Google 都统一使用代表品牌的红、黄、蓝、绿颜色和几何图形，遵循化繁为简的设计准则，通过简洁贴近真实的运动方式，让产品更有人情味，让用户更加专注于内容。
2. 智能圆镜
用户在靠近圆镜设备时，镜面中心人脸识别 icon 缩放，周围点元素波动扩散，吸引用户的同时，传达出科技感。
3. Apple HomePod 命令反馈界面
当 HomePod 在执行一项指令时，顶部的屏幕会出现彩球融合翻转动画，多变朦胧的色彩可以唤起用户情绪，球体间的融合过程让产品生动有趣，让用户感受到品牌的人情味。
4. Apple Watch 洗手提示界面
Apple Watch 洗手功能开启后，会有一个 20 秒的倒计时，倒计时以肥皂泡沫消失扩散的形式展现，很贴合当前洗手的情景，让原本一个普通的倒计时变得生动且有趣味性，用户更加乐意使用，强化了用户对品牌的感知。
5. 智能温控器
这款温控器已经有一定年代了，当时那个年代，能用到温控器，那就很有科技感了，智能温控器还将流动的线条动效运用至透明背景上，向用户传达了超前的科技感，只要见了就会记住这款产品。
下面为大家整理了一份动效在产品中的应用场景以及设计思路：
实际上智能产品中的动效设计，并不是要向用户炫技，也不是做的越炫酷越好。动效是以解决问题为目的的一种手段。我们要去观察现有好产品的动效设计落地点及分析他们的小心思，从而运用至自己产品中，提升产品使用体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：Aaron杜斌
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
相比于去年发布的 macOS 11 和 iOS 14 的 WWCD 2020，今年的 WWDC 确实是显得变化没有那么大，在系统视觉层面上，macOS 12，iOS 15，iPadOS 15，watchOS 8 似乎并没有那么多「革命性」的改变。老实说视作为一次日常的产品功能迭代就好了。
不过，iOS 15 当中有不少颇为不错的新功能，比如实况文本（Live Text），功能更强的 Spotlight，全新的 Safari 浏览器，全新的安全机制，等等等等，这些功能足以为用户提供更好更安全的使用体验，但是另外一方面，有很多功能对于设计师和开发者这边有着巨大的影响。
目前来看，Facetime 的多人通话的升级，共享当前界面和屏幕给他人的 Shareplay 很大程度是为了应对全球疫情之下，用户被封闭和隔离的使用场景，这些功能需要系统级的支持。
而从照片中获取文本信息的实况文本功能、超强的聚焦搜索功能，还有新的相册自动生成回忆视频的功能，则和苹果自身在机器学习领域的挖掘息息相关，对于想要在这一领域有所建树的团队，可以参考这些内置的功能，如何用好神经网络的软硬件，可以参考相关的开发文档。
关于 iOS 15 在我看来最值得聊且对于设计和运营有较大影响的部分，其实是全新的通知推送系统，以及 「专注模式」这一功能。在整个发布会结束之后，苹果的 HIG 页面当中，只有一小部分的内容随着新系统的发布而随之更新了，而这其中就包含信息推送和 「专注模式」的部分。
信息推送和当下用户日常内容和信息消费习惯紧密关联。越来越多的 APP 和越发频繁的信息推送给用户带来的信息压力已经成为一个广泛存在的问题，一直到今天，这个问题都没有一个足够完美的解决方案。
针对注意力管理的问题，iOS 15 所给出的解决方案算是一个比较折衷且比较合理的处理机制。
在基础的信息推送内容的视觉设计上，iOS 15 针对通知栏的小卡片的排版视觉进行了优化，放大了 APP 图标并置于卡片的左侧，对于通讯类 APP 当中用户发送的信息，则采用了用户大头像 + APP 小图标 的组合形态，增加信息来源的辨识度，并以这种形式更清晰地告知用户，所收到的信息的来源，以及它的属性。
iOS 15 还可以根据用户设置的时间表或者所处的模式，快速收集每天收到的的通知，构建成为一个较大的通知摘要大卡片，而摘要的内容呈现将会按优先级进行智能排序，位于顶部的卡片相关度最高。（所以 APP 通知推送会因为这种机制开始一轮新的内卷么？）
值得注意的是，新的推送摘要因为是按照优先级排列，所以各种 APP 当中优先级最高的通知将会被汇总到一起。
摘要信息的组织并不是借助单一算法来实现的，同样的，其中用到了机器学习的功能，借助神经网络芯片来更好地对信息进行针对性的筛选，并推送给用户，以图更好的体验。
在原本的 iOS 14 当中，对于单个 APP 的推送管理方式比较简单，除了「关闭」，就只能选择「隐式推送」，
在 iOS 15 当中，用户可以针对单个 APP 的推送进行更细致的选择和处理：
更多选项当中，可以选择让 APP 「静音一小时」或者「今天不再推送」以避免干扰。
整个 iOS 15 的通知处理的机制都是围绕着降低用户信息载荷的目标来进行的，除了管理层级的细化，专注模式更是之前 iOS 14 中「勿扰模式」的全面升级。
其中，为了对推送通知进行更加细致的处理，通知功能的类型也有了更为详细的分类，并且在 HIG 设计规范进行了更为详细的说明。相关详细内容在第四节。
「专注模式」是为了应对信息过载的问题，并且试图改善推送通知影响用户注意力的情况，希望借此来帮助用户更加专注于进行中的任务。
系统基于常见的几个使用场景，提供了「个人」「工作」「睡眠」三个场景，并且保留了之前的「勿扰」模式，单击底部「+」号还能添加更多模式，其中还包括「驾驶」和「游戏」等不同的预设场景模式。
除了「勿扰」模式之外，其他模式下，用户可能会收到与这些场景相关的应用，而用户可以在 iOS 15 的系统智能推荐之下，快速增删当前模式下可以推送通知的 APP。
在指定模式下，用户收到的推送通知的内容、类别都会高度相关，降低干扰性。
同样的，为了搭配不同的专注模式，还可以基于模式设置特定的主屏和桌面小插件，成为当前模式下的信息和管理中心，更加方便地管理当下的任务，达到「专注」的目标。
而「专注模式」更为智能的一点，是系统会根据地理位置信息，有意识地提醒用户是否要切换模式：
同时，当用户将手机设为特定模式之后，绑定同一帐号的其他设备也会自动切换到同一专注模式之下，达到统一管理的目的：
当然，除了基于位置进行「专注模式」的切换之外，用户可以通过右上角下拉的「控制中心」对「专注模式」进行手工的切换管理。
而无论是新的通知系统还是「专注模式」，在信息管理的颗粒度上都比以往更加细致，这很大程度上是基于新的推送通知的类别管理，这一部分内容在 HIG 设计规范上已经得到更新，并且有着非常详细的说明。
下面是关于推送通知章节更新的主要部分（考虑到篇幅，对部分非关键内容进行了精简）。
https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/notifications
用户希望收到他们关心的事情的通知提醒，但并不总是喜欢被打扰。为了帮助用户管理整体体验，需要在发送任何通知提醒之前获得用户的许可；系统允许用户在「设置」>「通知」中更改，并调整推送提醒样式，可以预览，并且可以和 Siri 交互。用户还可以在「设置」>「专注」中让所有通知都静音（某些地区的政府警报除外）。
相关开发人员说明，请参阅 UserNotifications。
在 iOS 15 及更高版本中，用户可以通过指定专注模式时间，设置专注模式下通知推送的具体行为，而进行细粒度的管理。专注模式可帮助用户在他们为睡眠、工作、阅读或驾驶等不同状态下，定义这一时间段内通知推送的具体行为。
用户可以筛选出哪些通知或者 APP 可以在特定专注模式下，被推送给用户。比如在工作专注模式下，用户可能希望收到来自同事、家人以及工作相关的 APP 推送的信息，用户可能还希望收到时效性较强的通知。
尽管专注模式下，可能会有一些通知被延迟推送给用户，但是通知信息在收到的时候即立刻发挥作用。
想要定制化地推送信息，那么你需要确保你的 APP 能够支持信息直接推送，就像电话或者短信样的通讯通知（communication notifications），而其他类型的弱时效性的推送则使用非通讯通知（noncommunication notifications） ，而想要支持通讯通知，你需要引入 SiriKit ，这也意味着用户可以使用 Siri 来进行自定义通知推送行为。具体的参阅INSendMessageIntent和UNNotificationContentProviding。
为了更好的方便用户针对推送通知进行管理，你需要对你的 APP 的推送通知的中断级别进行定义，不同级别的定义决定了通知何时推送，系统在不同状态下是否要推送，以及如何处理。目前，将推送通知的中断级别划分为4个等级：
具体的属性还可以参考下面的表单：
值得注意的是，这4个层级是逐渐递进的，因为后两种推送通知需要的优先级较高，所以最好获得用户的许可。
此外，在设计通知推送系统的时候，还有3个关键的注意事项：
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：陈子木
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们都知道，数据是支撑决策的重要依据，于是我们可以看到，几乎所有的产品，都会具有数据统计分析的功能模块。往大了说，比如数据中台；往高端了说，比如数据大屏、数据看板、数据驾驶舱；往本质了说，其实就是数据的统计分析。作为一个非数据型产品经理，或者是初级产品经理，该怎样设计这个功能模块呢？
如果你刚好为此苦恼，不妨试一下我最近研究的这三步曲：统计+分析+可视化！
关于数据统计分析，首先表达一个我蛮认同的观点：
好的数据分析师，要像眼科医生一样：配眼镜可能有很多专业的方法，有很多专业的工具，可在配的过程中，医生纠结的不是自己的理论，而是关注用户看得清不清楚，不断问用户“这样可以吗？这样更清楚吗？再这样试试呢？”
—— 接地气的陈老师
相信在工作中，大家经常会碰到一些“孔乙己”式的数据统计分析，一开口就是“xx 指标体系”，再加上一大堆什么“权威的、标准的、BAT 认定的”这之类的修饰词汇。这特么就是典型的虚假数据分析啊，因为这些大多数时候，耗时费力，却没有解决实际问题。
并且这种虚假的数据统计分析，还有它遵循的理论模型：
而真正的数据统计分析，就像太极拳的精髓一样：“只重其义，不重其招，你忘记所有的招式，就练成太极拳了。”（以解决业务问题为根本）
要搞数据的统计分析，那第一步我们得先有数据，也就是数据的统计工作。提起数据统计，那自然绕不开数据埋点。如果你们公司从来没整过埋点这个事，那也不用大费周章，因为界内已经有很多成熟的埋点公司了，例如神策、友盟等等，直接花钱办事就完了，也不贵。
我们今天研究的，是通过埋点，能够获得哪些数据呢？总结下来，大概有这么五类：
埋点获取五类数据
来来来，我们逐个剖析一下，这几类数据，具体都包含什么，以及获取这些数据有啥用。
1. 整体概况
实时数据意义：可以获取到每个小时的产品实时数据，帮助你了解产品目前的实时情况。
使用概况意义：产品整体的使用情况，包括用户量、访问情况、留存等，帮助你对产品整体指标有一个大致的了解。
2. 用户获取
渠道访问意义：每个渠道的用户的使用情况，包括渠道中新用户的占比、留存等，帮助你了解产品在获客层面上的优势与不足。
版本数据意义：每个版本的使用情况，帮助你了解在产品升级的过程中，是否在活跃和留存方面有所改善。
3. 活跃与留存
访问流量意义：产品的每日访问数据，指标集中在新老用户的访问行为上，提供访问次数、时长、次数分布、访问时段高峰等指标，帮助了解新老用户在使用产品时的一些行为特征。
用户留存意义：提供用户 7 日，次日，次周，次月留存的数据，帮助你了解新老用户的使用粘性。
4. 事件转化
自定义事件意义：用户自定义关键事件，系统会自动生成该事件的发生次数、人数以及分布情况，也就是能够看到用户都在干啥。
收益类事件意义：用户自定义收益类事件，系统会自动生成该事件的发生次数、人数以及分布情况，会根据你选择的数值类型属性，计算该数值的总值、人均值以及次均值。也就是能够看到用户都咋花钱的。
5. 用户特征
用户特征意义：能够看到我们的用户，都是哪些牛鬼蛇神~
有了埋点的数据以后，那就是怎样利用这些数据，充分发掘这些数据的价值了。数据分析的套路就更多了，把下面这些学会，应该“二八原则”里面的“八”就能够搞定了~
1. 常见的数据分析指标
综合性指标：反映产品的整体情况。
流程性指标：反映用户的使用行为。
业务性指标：反映具体的业务情况。
2. 常见的数据分析维度
数据细分：通过不同的细分维度分析，往往可以追溯到问题发生的原因，还能为后续的一些动作提供参考依据。
数据对比：没有对比就没有伤害，一方面是横向比较，即自身和别人进行对比，如常见的同比、环比；另一方面是纵向比较，即自身和自身进行对比，比如行业竞品、全站数据、AB 测试等。
3. 常见的数据分析方法
HEART 模型：Google HEART 模型的提出，可以让大家反思自己的产品设计思维，同时运用相关设计工具去提高 HEART 五项指标来完善用户体验，打造更好的产品。
AARRR 模型：该模型出自于《增长黑客》，它是在 2007 提出，当年的获客成本还比较低廉，而这种模型很简单又很直观地突出了增长的所有重要元素，所以这个模型很长时间内都很受欢迎。
RARRA 模型：而现在获客的成本与日俱增，市场情况和 2007 年已经完全不同。现在黑客增长的真正关键在于用户留存，而不是获客。于是，一个突出了用户留存重要性的模型 RARRA 诞生了。
有了统计的数据以及分析的维度之后，最后一步工作就是可视化啦！
而想要完成这一步，又快又好的方法，那自然就是参考各种规范啦，首先我们可以去一个叫做「e-charts」的网站，去查看各种可视化图表，因为开发很多时候，就是依照这些开源的图表库进行撸代码的~
而我们设计的时候，就需要借助各种原型组件啦。数据可视化的内容有很多，我们来举几个典型例子：
1. 折线图
注意事项：选用的线型要相对粗些，线条一般不超过 5 条，不使用倾斜的标签，纵坐标轴一般刻度从 0 开始。预测值的线条线型改为虚线。
2. 柱形图
注意事项：同一数据序列使用相同的颜色。不使用倾斜的标签，纵坐标轴一般刻度从 0 开始。一般来说，柱形图最好添加数据标签，如果添加了数据标签，可以删除纵坐标刻度线和网格线。
3. 条形图
注意事项：同一数据序列使用相同的颜色。不使用倾斜的标签，最好添加数据标签，尽量让数据由大到小排列，方便阅读。
4. 饼图
注意事项：把数据从 12 点钟的位置开始排列，最重要的成分紧靠 12 点钟的位置。数据项不要太多，保持在 6 项以内，不使用爆炸式的饼图分离。不过可以将某一片的扇区分离出来，前提是你希望强调这片扇区。
饼图不使用图例，不使用 3D 效果，当扇区使用颜色填充时，推荐使用白色的边框线，具有较好的切割感。
5. 其他
这种数据可视化的图表还有很多，而它的意义就在于，用图表代替大量堆砌的数字，有助于阅读者更形象直观地看清楚问题和结论。我也在工作中搜集到了一些不错的数据可视化原型组件，有需要的同学可以自行下载啦~
好了，以上就是今天的所有内容了，正如前言所说的，我们今天只讨论武功招式，不讨论内功心法。
延伸一下：数据统计分析，最终还是要从业务中来，到业务中去，一切的形式，都是次要的，关键还是要以解决业务问题为根本、但对于我们这些“新手”来说，经验主义自然也是要借鉴的！相信今天总结的内容，也足够支撑大家比葫芦画瓢啦。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：晓庄同学产品笔记
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
生活在地球上的我们，每时每刻其实都在感受着重力的存在。除了物理层面的影响，重力是否会改变我们对于视觉画面的认知呢？又或者说，物理学中经常听到的重力概念，和设计中的构图、排版又存在着怎样的关联呢？
我们或许能够从格式塔学派对认知心理学的研究里，寻找到一些蛛丝马迹。
人们的大脑总是会去脑补眼前看到的事物。就像我们看到的这三个被遮挡住的圆形图案，位于中心的倒三角虽然没有实际出现，但我们确实认为它是存在的对吧。
视觉本身是很容易被周围环境影响的，就像我们现在看到的这个画面。如果忽略掉空间和透视的话，你还会觉得右侧的竖线更高吗？
而实际上的情况是，左边的竖线高度要远远高于右边的竖线高度。
再看这个例子，两侧位于中央的白色球形，它们之间，谁看起来更大，谁又看起来更小？也许有的朋友会说左边更大，这个答案是没错的，但它也仅仅是看起来更大而已。
如果我们在画面中拉出两条辅助线，我们就会发现，原本右边看起来更小的圆球，要比左边的圆球更大。
通过刚刚的几个小测试，相信大家已经对于用眼睛的判断能力有了一些认识了，是不是有一种眼见不一定为实的感觉？视觉重力原则，其实就是建立在这样的认知基础之上的。我们大脑所认为的重心或平衡感，和真实的情况，往往并不相同。
在做版式设计的时候，我们的构图越接近重心的平稳状态，就越会激发和谐的美感。因为重力在自然界中是再平常不过的现象了，生活在这样环境中的我们，自然也会有这种审美上的倾向了。
我们来看这个例子，这张纸最稳定的位置在哪里呢？答案是它的正中心。
我们把信息添加在页面的中心位置，现在它看起来更平稳了吗？然而并没有，可问题出在哪？一定是我们没有把文字摆正吧？上方的区域（a），看起来要比下方的区域（b）面积更大一些，真的是这样么？
可实际上，文字确实是在页面的正中心位置上了，这同样我们的眼睛在作怪。
所以为了抵消视觉上的这种坠落感，我们需要将文字略微向上移动，这样我们看这段文字才是真正居中的。
正向
我们再举个例子，这是一个数字 8，我们来仔细观察一下它的造型，顶部与底部的负空间看起来是一样大的对吗？
垂直翻转
而事实上并不是这样的，通过将它倒置，我们就会更明显的看出来，其实为了抵消人眼的错觉，我们在做字的时候，需要将上面做的更小，底部做的更大一些。
这是两个完全等大的黑色圆形，但它在视觉上其实并不是平衡的，人们的眼睛会觉得右边更轻，这虽然没有顶部和底部那么明显，但也确实存在。那么解决的方法就是将左边的圆形略微缩小一些，现在这个页面看起来平衡多了。我们总是会下意识的认为左侧要更重要些。
⇧ 画作：The Creation of Adam
看这幅画，很明显左侧的内容要比右侧更少，可如果我们将它镜像翻转过来，它原版的平衡感就会被打破了。人们更多会认为左边看起来更重了。
同样的，在我们的汉字设计中，也会应用这种做法，比如林字的两个木字旁，就并不是左右等大的，因为这样在视觉上会显得不平衡。所以需要将左侧的偏旁削弱，才会在视觉上看起来更加和谐。
具有左右结构的汉字，基本上都遵循了这个原则。形成了左收右放的构成样式。
汉字“田”的中心十字笔画，为了看起来是居中的感觉，实际上也特地微调了文字的重心部分。利用辅助线，我们会更容易察觉到这其中的变化。可以看到，横笔部分，向上移动了很多。竖笔部分也相应向左做了位置上的调整。
人们常说，细节决定成败。也正是这些不起眼的细节，拉开了专业平面设计和业余设计师之间的距离。相信看到这里的小伙伴们，应该已经领略到了视觉重力原则在设计中的重要地位了。那么光知道有这么一回事儿可不行，我们更应该去了解它的特点，以及尝试着去掌握它。
我们看到的所有图像，无论抽象的还是具象的，其实都是具有重量感的。那么都有哪些因素会影响到视觉重力的大小呢？找到视觉重心之后，我们又要怎样去利用它们？接下来我们就一起去寻找相应的答案。
色彩对视觉重量有影响吗？我们看画面中的这两个图形，是不是很明显感觉到右边更重呢？黄色的色相本身的视觉明度就要比蓝色更浅，所以我们会感觉到右边更重。
为了抵消颜色对视觉重量的影响，我们需要降低蓝色的面积，这样才能让两个图形看起来是平衡的。
那么换成具象的物体呢？道理其实也是一样的。我们依然可以把它们看成是纯粹的色彩。经过这一步分析，我们是不是发现了左侧红色的苹果，显然会更深和更重呢？
所以，为了保持左右的平衡感，我们也需要把红色相应的缩小一些。
我们看这两个图形，它们谁更重？左侧的八边形，它的页面边缘更复杂，角度变化也更多，所以承载了更多的信息量，相比正方形更简洁的造型来说，左侧会更重。
那么换成大小相同的秤砣和棉花呢？谁更重？几乎没悬念了，棉花完败。当具象的物体出现时，结合以往的视觉经验后，谁更重谁更轻也就很显而易见了。
对齐也需要考虑到视觉重力吗？如果你也有这种疑问的话，接着往下看。这是两个马克杯，它们虽然造型类似，但是色彩却不同。很显然蓝色的版本会更重，而在位置上更靠近左边，也就显得更重了。
所以，为了抵消这种重量上的轻微不平稳，我们可以把颜色更浅的橙色放到左侧的位置上。这样虽然色彩上橙色更轻，可由于它的位置更重要，也就不会给人不平稳的感觉了。
那么构图基本确定之后，我们为这两个杯子搭配上一段文案信息。这样两个商品的展示也就做完了。你发现这两个组合出现什么问题了吗？当文字信息加入到页面之后，是不是觉得哪里不对呢？
电脑是看不懂图像的，所以用到对齐命令时，它们会围绕着像素的边缘去做对齐。可问题在于，并不是所有图片的视觉重心都刚好在方框的中间位置。
所以我们要去修改的地方，也正是这个视觉重心的对齐位置。现在再看这两个组合，是不是感觉和谐了很多。
当西文和汉字相互组合时，需不需要考虑到视觉重心的对齐呢？我们看，如果仅仅是依据边缘进行对齐的话，就会让西文部分看上去很小。而正确的做法是需要我们忽略掉一些文字边缘的。
分别找到两组文字的视觉大小。只有这样，才能让两组文字在视觉面积上达到相同的重量。当然，文字字重部分也是需要做出相应匹配。我们看，经过调整后，中西文的搭配明显要更加平稳了。
但也是有例外的，比如这个例子，明明是按照之前的调整方式，仅仅是更换了文字的内容。为什么它看上去依然没有对齐呢？这里的问题其实出现在西文部分，有些单词组合，字母并没有占据下伸部的空间。所以在整体上，就会显得有高低的错落感。
这种情况，当然就需要重新去匹配了。解决方法依然是对齐文字之间的视觉重心部分。所以，方法并不是死记硬背的。我们需要根据不同的情况去做出有针对性的调整。
接下来我们来做一个包装的案例。它是一个螃蟹口味的海鲜调味料。首先，我们选择这个手绘的螃蟹作为这个画面中的视觉焦点，把它放在版面的中心位置。经过前面的学习，我们知道了，选择对齐元素时，我们要忽略掉那些细枝末节的部分，才能找到真正的视觉中心位置。
找到了视觉重心后，我们把它安排到页面真正的中央部位。顶部和底部的空间，我们就继续调整其他的信息。首先从层级上来说，在页面顶部我们需要一个相对第二大面积的文字组合。
而其余的元素，围绕着底部的负空间去排列就可以了，到这里这个包装也就做完了。
无论是版式设计，还是绘画摄影，构图从来都是一个讲究的事情。想要做一版在视觉上平稳的版面，最简单的办法，就是把主体固定在页面的中心位置。可是这种对称的设计，由于太过完美，也多少会给人一种单调和乏味的印象。那么有没有一种既让页面保持平衡，又能在结构上做出变化的设计方法呢？这就引出了我们接下来的内容了。
这个案例，属于网页中会出现的广告页面。首先，如果我想要让版面达到平衡状态，就需要把主体的重心安排在页面的中央位置。
但是，为了让页面中加入更多信息，我们也不得不让主体向页面的一端靠拢，从而预留出足够的空间。
可这样就导致了页面的不平衡，左侧的文字重量并不能平衡整个版面。
其实，解决的办法也很简单，我们可以试着将主体略微移向页面的中心部分。这样一来，就实现了一种动态的平衡状态。
这背后的知识其实很简单，就是最基本的杠杆原理。如果天平两端并不平衡，那就让更重那个的靠近中心，更轻的远离中心。这样也就恢复到平衡状态了。
这同样是一个网页中会出现的广告页面。我们看，它都出现了哪些问题。版面中所有的元素都集中到了顶部，这就导致了页面底部重量过轻，顶部重量过重的极端对比。也就是我们俗称的头重脚轻。那么经过调整之后问题依然存在。过多的空白，会让人们感觉这个版面作品没有完成。所有的重量都集中到了版面的左侧，这依然是一个极端的构图。
正确的做法应该是怎样的呢？我们可以将重量最大的元素安排在中心位置。并且让其他元素以对称的样式排布。
当然，你也可以将信息放大，和原本的图像进行一个叠压组合，形成一个更重更大的整体。
又或者，采用顶部图像，底部文字的做法，让页面中的重量分配均等。
反过来也是一样的，顶部安排文字，底部安排图像。
再或者，我们可以将信息安排在页面的左侧，形成左字右图的配置。这样的构成，有助于人们第一眼发现你想传达的信息。
而反过来呢？图像就成为了更重要的那个。人们会先看到图，然后紧接着去阅读相应的文字信息。
到这里，我们分别从细节的刻画，再到元素的重心对齐；又从视觉重心的动态调整，一直讲解到了宏观页面的构建思路。我们可以看到，视觉重力原则几乎渗透了整个设计流程。很多时候我们其实并不缺乏理论知识的武装，可一到自己实际动手，就马上缴枪投降了。矛盾点还是出在对理论知识点灵活运用上，接下来我就带着大家再做几个案例。
打算做一套大米的包装设计。产品的名字就叫高山岩米。它长什么样子呢，就像我们现在看到的这样，类似葡萄干一样，和我们平时见到的大米颜色是有一些区别的，据说营养价值很高，也被誉为米中黄金。
我想利用图形的切割来表现这个岩米的部分。同时，在辅助一个篆书结构的山字，以这样的图形来体现这个主题内容。并且，我也希望这个大米的部分是镂空的，能够透过它看到真实的米。
主视觉的刻画差不多后，接下来我把它放到包装上，并且将其他信息也一并加入到版面里。不过这样一来，信息和主视觉相互叠压，对于内容来说可能会有些相互干扰了。所以我们来试着编排一下。到这里，好像出现了我们前面提到过的问题了，那就是，整个布局显得头重脚轻了。
接下来再试着调整一下。现在我们把底部和顶部的空间都占据了，同时也预留出了三分之一的留白，这该不会有什么问题了吧。相信看到这里的小伙伴应该都能看出问题了，那就是这样的配置确实有些左重右轻了。留白可以有，但绝对不是这样做的。
除了我们之前提到的上图下字，或者是左图右字之外。我们当然也可以综合的应用它们。我们现在这个构成，其实就是一种全包围的结构。
又或者，将一部分内容放在底部，而主要去刻画上方的文本样式。这就形成了类似半包围的结构。
如果说之前的版本是上下样式的半包围构成的话。那么接下来的这个构图，就是融合了重心动态布局的左右样式半包围构成了。
当我们不知道怎样去安排版式构成时，视觉重力原则就成为了一个很好的参考依据。
我们再做一版活动海报。画面中出现的各种电器，都是经过退底处理的。这样的处理，能够让它们毫无违和感的出现在同一个页面中。
在页面的部分，我加入了这个活动的具体内容。展览的主题叫《模块世界展》，是著名设计师迪特拉姆斯的个人展览。
拿到这样的内容时，最保险的做法就是让顶部的图片成为一个更大的组合。上图下字，很平稳，也很保守。
我们可以看到，图片部分，我尽量将它们还原成了现实中它们本来的比例关系。
或许，我们也可以再换一种思路，相对的更突破一些。将图片通过颜色划分成组。我们能够看到，其中有全黑的，也有彩色的，更有白色的。
除了像刚刚的堆积到角落，我们也可以把图片组合规划成对角线的样式，在这样的形式下，版面构图依然是平衡的。
我们当然也能让图片组合划分成一个更大的组合，以及一个更小的组合。
又或者，打乱图片的顺序，完全依据视觉重心去匹配其中的位置关系。
最终，我决定从展览的主题中寻找突破口，以“错位”的手法去呼应“模块化”这个概念。不仅仅是文字部分的错位和拆解，图片部分也通过硬边的投影，形成了一种嵌套于版面中的视觉印象。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：研习社
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天我要和大家介绍的这位设计师，他在业内被誉为是“信息可视化设计”领域的天花板。一提到信息可视化这么高大上的词，相信大家都多少有些了解，在日益复杂的信息交流活动中，将信息图表化已经是一名设计所必须掌握的技能之一了。
举些常见的例子，比如在公共场合中，我们看到的交通标志，以及用来显示地理位置的地图、将时间具象化的时刻表等等，这些数据都以某种图形化的形式呈现在我们周围。
而信息可视化领域也不仅仅是将简单的数据绘制成图表那么简单，比如要弄清楚社会中隐藏着的各种问题，从而促进新观点的提出和对问题解决的思考。这种并不以信息为主导，而是着重于根据创建者的主题来选择要传达的信息，并寻求接收者的主动解释。
而我们今天要介绍的这位设计大神就是这个领域的专家
△ 中野豪雄 TAKEO NAKANO 图形设计师
1977 年出生于东京都。武藏野美术大学毕业，师从著名设计师胜井三雄。2005 年设立中野设计事务所。以信息的构造化和上下文的可视化为主题，在各种领域探索图形设计的可能性。日本 typographic 年鉴大奖赛，同最佳作品，造书装帧比赛经济产业大臣奖等获奖。入选世界海报三年展和拉哈蒂国际海报双年展等。作为邀请作家参加了国际泰晤士报双年展“首尔 2011”。文艺博物馆永久收藏。武藏野美术大学、多摩美术大学教授。
咱们先来看看中野老师平时的作品都长什么样吧！
是不是很厉害！但说实话，这种信息的密度，工作量绝对是巨大的！而在一些访谈中，中野老师也明确指出，自己更倾向于采用更宏观的视角去做设计，因为这样不仅能够达到传达目标，同时也由于对比的存在，进而产生崭新的视角。
图中我们现在看到的信息可视化海报，是 graphic trial 2015 的一次展览。老师一共设计了五张 B1 大小的凸版印刷海报。内容是关于地震的四年时间里，哪些话题被人们报道直到事件完结，然后回归到日常生活中。以及在大数据为主的信息社会中，思考有关制作印刷物的意义。
人们在地震发生时，所接受到的信息，就像图中展示的这样，是从喧嚣到日常化的推移和演变，老师会考虑到，促进这个过程的因素和推动力是否能够被可视化。从当代语言推动社会发展的角度去考察，想象着是否能将这个语言本身地图话。从而建立起一个提供人们思考的平台，这也是平面设计能否引发舆论争议的关键。
首先我们从信息收集的角度来向大家讲解，这张图是国立情报研究所的北本先生制作的数据图，搜索关键词是“受灾地”。图中折线展示的是，受灾四年间，相关词被搜索的高峰和频率。
接下来我们来看这张语言地图是如何被延展出来的，常规情况下，我们形容时间的话，当然会使用线性的横向时间轴。而中野老师的解决办法，是将时间轴以环形的方式呈现，并且将起点与终点之间的差异可视化。
五张海报，分别从受灾后第一个月、半年后、一年后、两年后以及四年后展开。呈现出由远到近的视角变化，第一张海报中，展示的是受灾后 31 天内的变化，逐渐到最后一样，受灾后 1460 天时，人们对于这个事件的关注转变。
老师从北本先生那里得到的数据，大概可以划分成四个种类，分别是时间、主题的力度、语言关键词频繁出现的次数以及与东日本大地震的关联度。时间就是刚刚提到的，以环形角度的方式呈现。话题的力度越高，就会离中心越近，反之就越远。频率则是按照关键词出现的数量，以圆的大小来呈现。另外也通过颜色来区分与地震话题相关的词语。
△ 一个月，六个月，一年，两年，四年
最终就呈现出了这样的画面，首先这个项目是单人项目，所以合成这样图的工作量是非常巨大的，过程当中老师也请到了一些研究者对这个项目进行一些帮助。整个海报的重量据说非常重，拿起来大约有二十四千克。
如果使用常规的四色印刷的话，也就需要利用青品黄黑去合成不同的颜色。不过这样最终的效果并不理想。
于是老师选择了专色印制，也就是每一种颜色都单独去印制一版。单独印制一张海报，就需要反复印刷 16 版。
其中的黑色，也就是全部 16 版叠压到一块的效果，可以说是黑中之黑了。当然这个黑色也是有所比喻的，也就是庞大的信息是无法单独存在的，当所有信息混在一起，才能比对出彼此的联系。
第一张图展示的是灾害发生时的第一个月，画面中展示了很多的圆圈，大部分都发生在外圆，也就是说当时各种各样的搜索关键词，与灾害相关联，被搜索的频率非常高。在色彩的区分中，我们也能感受到相当强大的热度。
这是两年后的情况，也就是说圆的一半就是一年，左半边就是第二年，可以很直观的看到，前半年使用的暖色是比较多的，当来到了后半年时，话题热度逐渐冷却的样子。
来到第四年的时候，也就是圆的四分之一是一年。右半边展示的是过去来年的样子，而左半边就是又过了两年之后的样子。整个图标展示的是起点“311”大地震动开始的日期，直到截止四年后的 3 月 11 日。
可以看到暖色的部分逐渐变得零星起来。为什么会有这样比较有规律的分布呢，那是因为暖色出现的位置都是所谓的纪念日，也就是人们会想起那次事件的日期。
比如其中烟花这个词，就是从灾难过后才开始频繁出现的，它代表了人们对于灾难的一种寄托，人们期盼着生活能够回归正轨。
这样的可视化设计，意义在于人们能够通过它，俯瞰全局，通过使用宏观的视野来连接新的视角，让人们意识到它们没有注意到的观点。各个词语，会根据时间轴的变化与联动，起到唤醒记忆的作用。通过这个设计作品投影人们过去的经历。
它是从整体到部分之间的一种信息差异。就图的整体视角来看，它表示了“人们遗忘的节奏”，进而对遗忘进行批判。另外从图的部分视角出发，它表示了“记忆的意外发现”包含了对回忆的期待。
看到这是不是觉得中野老师很厉害呢。那么接下来，咱们再来看看他的成长经历
成为一名设计师的契机有很多，比如父母是设计师，或者是有看过一部激动人心的电影海报，想要成为一名从业人员。可中野老师选择设计这个专业时却完全不是这样的。
他选择的了一种极度理性的方法，逐一排除自己不喜欢的东西。
但这种做法本身就很难，最终中野犹豫着要不要选择美术专业。始终没有鼓足勇气的他，还是向附近的预备校老师请教了这个事情。
听了中野的情况后，老师的评价是，他觉得中野很适合平面设计这个专业，还问他要不要试试呢？
因此在报考志愿里，中野写下了武藏野美术大学和多摩美术大学。如果按照主角光环的剧本，这个时候，中野老师应该就已经平步青云，从此走上人生巅峰了。
然而现实却是，在第一次考试中，他却落榜了。作为“差生”的他，周围都是什么样的人呢？插画、摄影甚至编程，这样的拥有特殊技能的人几乎占据了大多数。在这样的环境里，中野老师当时却并没有什么特别的特长，对于不善于表达的他，在当时感到很无奈。
那时的他一直在问自己。我的特长是什么？我的兴趣点是什么？有次散步的机会，他终于得到了灵感。那就是虽然自己没办法做出特别厉害的作品，但踏踏实实的绘制图形却是可行的。
当意识到了这一点之后，于是在一次研究宋体（明朝体）的过程中，就产生了做一本书去记录这段悠久历史的想法。他想通过探索历史的过程，去寻找属于自己的兴趣点。
当从宏观角度看待一段历史的进程，通过推演，人们总能或多或少看到未来的一些可能性。通过研究书籍的过去，会发现最初的书籍形态起源与泥板，也就是说，从人类发展初期就存在了书的概念。
就是这样一步步的研究，信息的宏观样貌，如果从宏观的视角来看待的话，会发现人们通常能够了解到的信息其实并不多，当从更高的维度看到相同的事件时，是能够展现出事物本质的。所以在之后做视觉图表作品时，中野就开始有意识的展现从整体到局部之间的相互对照。
我们接下来一起看看中野老师还有哪些精彩的作品吧！
以信息结构和文章脉络的可视化设计为主题，探索各个领域中平面设计的可能性。
△ 这是中野老师从 2012 年到 2013 年期间，为建筑杂志设计的封面，因为是月刊，所以在两年时间里，一共做了 24 本。
杂志的内容主要和灾害相关，比如第一版，是关于日本东北地区的一些内容、第二本是关于海啸的内容，除此之外，还有关于建筑产业、能源、以及关于福岛灾难重建等问题。
每本杂志都有各自的特征，数据来源主要由政府以及大学中的一些数据研究者们提供。当接收到这些信息之后，中野老师需要甄别哪些内容是需要保留的，哪些是需要删减的。在这个过程中，不断的思考”怎样才能将这些数据清晰的传达给读者”这类问题。
这个展览是 2018 的时候，中野老师在印刷博物馆策划的一个天文学与印刷的展览 。主要展览的是 15 世纪到 18 世纪的书籍和印刷物。希望能够以全新的视角，向大家展现天文学与印刷之间的关系。画面中左上角的同心圆，是哥白尼提出的太阳中心说，从此人们开始以全新的视野观察这个世界。
这是这个展览的宣传单页，博物馆的宣传单页通常都是 A4 尺寸的，最初老师设计了八张相同的传单页面。
随后最终通过局部特写的方式，构建出了八种不同的传单样式。如果全部收集完全，可以拼接成完成了一个大画面。
从天文学和印刷术之间的关系开始发展联想，结合了天文学，哲学、数学等等一些学科，统一展现出了宇宙的这个概念。老师分别从三个角度思考这个问题，分别是“秩序”“整合”“规格”。
如果把文字去掉，我们会看到这样一张插图，我们来分析一下为什么需要做成这个样子。
这里的横轴代表着时间，竖轴代表着规模，画面顶部展现的是关于宇宙的图像，而下方主要以人的视角，展现了地球的图像。学术本身是建立在各种各样的理论之上，前人建立起的理论，可能会被后来者推翻重建，逐步形成了我们今天的天文学。
这个展览中会展示各种各样的宇宙学理论体系，通过各种各样的宇宙论，去展现这个世界的演变。让人们随着时间的进程，在各种学术体系中了解了文明的变迁，通过图像让观赏者提前在脑海中呈现出视觉化的内容。也就是说，我们从看到这个宣传画面的那一刻起，这个展览的内容就已经开始了。
这个展会的名字叫《改变世界的信息》，画面长度有 12 米左右，这个画面是展会的入口处。从数据我们可以看到，受到贫困和灾难的人群，占据着百分之七十的人群。
中野老师针对这一点，将世界各个地区以及不同的国家，把其受灾的程度和数据都集中到了一块。分别是水资源、粮食、能源、医疗、住房、交通、识字率、通讯等问题。一共有一百多个国家。
通过这个图，我们会发现这其中每一个问题都是相互牵制，相互影响的。比如说水的问题就和所有的内容都有关系。整个图标并非是想要解决某些问题，而是希望人们在看到它们时，能够从中发现到一些问题。
通过人们的议论，去碰撞出全新的思考。由此可以知道，图表设计其实是对社会非常有帮助的设计领域。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：花瓣 作者：研习社
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com