笔者在车联网行业任职HMI视觉设计师，由于HMI设计发展的较晚，所以基本上在开始进入到这个领域的人，大多来自于互联网行业。由于互联网行业发展的比较早，形成了一套成熟的工作流程，即：分工明确的递进式协作：交互设计师要等到产品PRD评审结束才开始介入需求，然后交付黑白线框稿等给到视觉设计师继续跟进。这种工作模式可以让每个人在自己的岗位上做得更加专业，成为垂直领域的专家。在车联网行业发展初期的时候，这种工作模式对于传统行业的来讲，比较新颖、高效，所以在一定程度上促进了行业发展，但汽车操作系统的设计还是有很多不同于互联网设计的地方，所以本文旨在讨论HMI工作流程，如何分工，怎样高效的进行设计协同，以期望探索更适合车联网行业的设计协同方案，希望对你可以有所助益。
对于HMI设计来讲，需要了解很多专业知识，比如：屏幕、硬件、三电、法规……这些东西都会影响到设计的视觉表达，所以设计协同就显得尤为重要，那么什么是设计协同呢？指设计师在设计之初，即可开启分享与协作，让协同者尽可能早的参与到设计中，通过提供一系列工具，让协同者有更加友好地体验，保证每个人都可以准确找到相应需求的内容，并且快速提出修改意见与反馈。简单地讲，就是让每个人都参与到设计过程中，以使最终的结果能够满足用户的需求。
从产品功能逻辑层面来讲，HMI设计的“复杂度”是具有有一定的“限制性”的，即保证安全第一，过度复杂的设计必然影响驾驶和乘坐人的安全。所以对于设计，是需要进行全方位评估的，必然会涉及到不同的角色。同时随着项目的不断发展，设计团队也在不断壮大，设计师之间的协作也越来越多，相应的沟通和协作成本就会不断增加。如何才能更高效的合作，并把设计质量和一致性做得更好，是我们需要解决的问题。所以设计协同的最终目的是为了解决问题，做正确的事，让设计师做真正该做的事情。
让设计师专注于真正重要的事情，而不是把精力放在可以自动化处理的事情上。对所有人员的工作进行集中化管理，所有人员基于统一数据源进行协作。
通过构建团队资产库，比如设计规范、控件组件库等，通过建立健全设计规范，让数据沉淀，一方面让设计师的设计有据可依，提升设计的专业性，另一方面，减少因为人员变动造成的数据丢失。
在设计之初，就让协同者参与到设计之中，保证每个人都可以准确的找到他们的需求内容，并快速提出修改意见与反馈，让设计师更有针对性的解决问题，让设计师无需做重复性的工作。
在HMI设计的工作流程中，主要涉及到的角色有产品经理、交互设计师、视觉设计师、研发工程师、测试工程师、项目经理。
不同角色主要工作内容是：
围绕着HMI设计的整个工作流程是：
产品经理确认需求，输出PRD文档；交互设计师收到PRD文档以后，基于需求，梳理功能，完善业务流程，完成交互文档的制作，输出UE文档；视觉设计师在收到UE文档以后，针对交互文档中的流程页面，进行视觉设计，输出UI文件给到研发同学；研发同学根据UI文件和交互文档进行代码化，完成以后进入测试环节，测试工程师和产品、交互、视觉都需要参与到测试过程中，当完成测试工作以后进行发版。
涉及角色
自己、设计师小团队。
痛点
工作中很多重复的内容，比如：Button、List等使用的地方很多，如果每个元素都重新绘制，势必会投入很多时间，同时因为人为因素，难免会出现不统一的地方。那么怎么样解决这个问题呢？
协同方式
当团队初期发展的时候，或者整个团队只有少数几个设计师的时候，通过汇总通用样式和组件，形成视觉指导Guide，方便通用样式的复用，减少重复工作量，达到快速完成视觉设计的目的。
优点
通过样式库和控件组件库的搭建，形成了一定的共有样式，方便复用，有效的减少了重复工作量。
缺点
由于控件组件库是在设计进行到一定程度以后提炼的，会存在滞后性，并且随着设计工作越来越往后，会发现前期的控件组件存在不合适的地方，需要对之前的工作进行修正。
涉及角色
设计团队内部。
痛点
当公司发展到一定的阶段：
当设计团队越来越大，大家分工越来越细，想法越来越多，就会发现，复制粘贴guide的方式，已经无法满足团队的发展了，经常出现组件不能满足使用的情况，或者是组件相似但不知道怎么选择等问题。
同时因为没有统一的流程，会发现不同的业务对于同一功能交互逻辑的不统一现象，比如：搜索是很多业务都会使用的功能，因为没有统一定义，有的业务会采用即时搜索模式，有的业务必须点击搜索以后才可以进行搜索，并且这种问题，前期很难发现，只有到了中后期走查的时候才会发现。
所以在后期会针对每一个差异点进行统一，需要全流程重新来一遍，费时费力。那么怎么才可以避免这种情况的发生呢？答案就是构建设计系统。
协同方式
设计系统不同于guide的地方是：样式，控件组件只是设计系统中的两个组成部分，除此以外，设计系统还包括了一系列的标准来指导设计。比如：图标、动效、音效等。这些标准记录了设计团队内达成一致的一系列的决定，比如如何选择控件，如何在不同的控件中选择。正是这些标准才确保了设计方案不仅仅只解决一个问题，而是可以被复用的。这些标准也是为什么用户能获得一致的体验的原因。
通过设计系统的建立，让设计规模化，继而进一步强化车机系统的统一性，同时为设计师在做设计时提供一个很好的指导方向，让团队内不同成员的设计在风格上保持一致，提升设计团队的专业度。关于设计系统的建立本文就不再过多描述，后续会出专门的文章进行详述，这里主要是讲述设计系统搭建以后的协同方式。
设计系统的搭建需要专门的人或者团队进行，当搭建完成以后，需要输出的资源有：UE控件组件库、颜色/字体样式库、UI控件组件库、UI控件组件说明文档。这些资源各有什么用呢，接下来进行详细说明：
UE控件组件库
提供给交互设计师，基于提供的内容，交互可以快速的构建界面、交互和流程等，就像搭乐高一样。可以快速的构建一些产品原型或者是实验性的功能，来进行测试以快速验证想法。
颜色/字体样式库、UI控件组件库
提供给UI设计师，形式可以是Sketch Libraries，一方面方便设计师调用，使不同的设计师的设计变得更加统一，且更加可预测，同时组件也可以让设计师更多的时间专注于如何构建更好的用户体验，而不是去纠结于样式的调整。
UI控件组件说明文档
提供给研发，可以是pdf之类的文档形式，主要是详细的描述每一个组件的各种属性，以及里面包含的交互逻辑等，帮助研发搭建起研发自己的底层代码平台。
那么这些资源和不同的角色之间是怎么协作呢？UE控件组件库不需要常常更新，完成后给到交互设计团队，供交互设计师使用搭建UE文档。在项目开始之前，负责设计系统的UI团队进行颜色/字体样式库、UI控件组件库制作，完成以后分享到团队内，供业务设计师使用进行界面设计，同时进行UI控件组件说明文档的编撰，完成以后提供给相应的平台研发，让平台研发进行组件代码化。当代码实现以后进行走查，检查是否按照UI准确的实现。当业务设计师完成了业务的界面设计以后，进行评审，输出给对应的业务研发，研发对于相应的视觉界面进行对应的代码化，使用组件的地方直接调用平台代码，剩下的由业务研发进行代码化。
优点
组件由专门的UI设计师和研发团队负责，当出现设计变更以后，业务设计师可以快速通过组件库更新最新的视觉样式，同时和平台研发对接，进行代码修改，而不需要每个业务研发单独修改，大大减少了跨部门的协作沟通成本。
缺点
团队内需要专门的设计师构建设计系统并负责日常维护。
涉及角色
设计、交互团队。
痛点
由于需求的不确定性，以及车联网项目周期较长等特点，会出现需求经常变更的情况，那么交互就需要不停的更新交互文档，UI也需要不停的输出视觉文档，往往一个项目结束以后，会有几十份甚至上百份的设计文档的情况出现。
协同方式
随着云端化办公软件Figma的兴起，为多角色协作提供了可能性，目前主流的工具有：Figma、MasterGo、Pixso、即时设计等在线软件。
设计文件现在是一个链接，这意味着：
UI设计师不必再等到交互完成评审，输出交互文档以后进行视觉设计，交互和设计完全可以合二为一，输出一份高保真交互流程文档，并且输出的文档可以供研发直接浏览器查看，而不需要像之前一样，不停的进行设计资源的输出。极大的节省了设计师输出时间。优化了协作工作流。
优点
协作设计，云端办公，多角色参与。
一键获取文件，不需要通过其他平台转化，步骤简单；自动生成代码与标注。设计稿修改后自动更新，无需重复下载。
缺点
云端保存，会有数据泄露的风险。
必须在线操作。
涉及角色
UE、UI、研发。
痛点
由于公司发展，业务线增加了很多适配线，这块的工作基本上属于：把已有的UI适配到另一个屏幕尺寸下，需要设计的地方不太多，需要花更多的时间去重新按照最新的屏幕尺寸搭建一遍UI界面，属于用时间换业绩，为了达到这个目标，可以采取的方式大致分为两种：
第一种是增加更多的人力，不管是招更多的人，还是增加更多的供应商人员，都会增加业务支出，并且由于业务无法一直保证饱和，所以会出现一段时间忙的要命，招了很多人员，过了这段时间，业务不太多了，大家都闲了下来，但是开支还是必要的，所以这算是一种没有办法的办法，对于团队或是公司来讲，并不可持续。
另外一种方式就是重新梳理工作流，减少一些重复无意义的工作，比如像是系统设置等瀑布流式的界面，不同车型下的区别只来自于功能的有无，界面上并无太大区别，这里所说的工作，不仅仅指设计师的界面设计工作，同时也包括了研发同学的研发落地工作，同时因为研发同学的适配，也会造成测试走查环节，这些都是一些重复性的工作量，所以是否有一种更好的协作方式可以避免这种情况的发生呢？
答案就是我们接下来要讲的一种全新的工作模式：C2D2C模式。
协同方式
由于设计团队在早期的发展中，积累了大量的设计资产。这些设计资产的沉淀就是设计标准化的基础，将设计资产转为封装好的代码组件，也就是C2D的过程。然后将封装好的组件通过低代码平台进行属性配置、搭建页面、布局调整实现页面的设计就是 D2C 的过程。通过平台设定交互行为和绑定后台数据，完成整个系统，最后再进行站点发布，就实现了 C2D2C 的完整流程。
C2D2C（Code to design to design）的模式，简单讲就是研发同学把设计资产通过设计标准化和研发工业化的方式完成代码化，然后让设计师调用已经代码化的设计资产进行设计工作，这样子当设计师完成了界面设计的时候，相当于同时完成了前端开发，接下来研发同学只需要根据拿到的界面添加简单的逻辑就算完成了研发工作，实现中后台设计研发流程的整体提效。
优点
由于样式、组件已经完成了代码化，那么在适配工作中，控件组件化高的界面就可以直接生成代码，不需要设计师重复设计，同时由于减少了设计师和研发的参与，节省了大量沟通成本，也减少了很多因为人为因素而产生的bug。
由于设计师减少了重复工作量，可以有更多的时间集中在视觉表现上，有效提升了设计输出的质量，保证了产品的设计感。
对于大量适配项目的团队，可以由设计师直接配置项目组件，无需经过研发，减少出错概率，极大提升工作效率。
缺点
前期需要研发同学代码化基础控件，所以需要投入人力、精力进行前期的工作。
由于控件提前进行了代码化，后续可能会出现无法满足业务需求等情况出现，所以需要有人及时对代码进行维护更新。
涉及角色
产品、UE、UI、研发、测试。
痛点
基于上面讲述的C2D2C模式，已经完成了一个共享平台的搭建，由于配置需要研发的参与，所以始终需要研发同学作为集成人员，并不利于其他角色的使用，那么怎么样可以让产品同学，设计同学，或者说是普通用户使用呢？
协同方式
一个优秀的共享平台是需要所有人都可以在其中使用的，所以，当公司或者团队发展到稳定阶段，我们需要重构工作流，以需求为导向，搭建全员工作平台，基于设计师和研发搭建的平台基础上，提炼需求，强化个性化和定制化，满足品牌产品的个性化需求，具体来讲，就是把UI界面中元素提炼出相应的功能，生成功能清单，通过选择不同的功能，生成相对应的界面。
当完整的共享平台搭建完成以后，团队中的每个角色的工作内容都发生了变化，产品的工作是构建更多的需求，交互设计师的工作是构建更多的交互形式，产品架构，UI设计师的工作是设计更多更好的界面布局，视觉表现，然后研发把上述内容通过代码汇总进我们的需求池中，扩展我们的平台丰富度。
HMI设计工作，就变成了：客户在我们的配置面板中选择需要的需求，喜欢的布局，想要的视觉，点击完成，就可以即刻看到高度定制化的一套系统。
优点
让每个人回归工作的本质，不需要为了一些重复的繁杂的内容而疲于奔命，做更有价值的工作，实现工作的价值
赋能行业，可以满足车企定制化的需求，提供车企一套完整的车机系统解决方案。
缺点
投入大，对于小体量的业务来讲短期无法创造价值。
对于现在的行业环境，增速提效已经达成了基本共识，设计协同就成了一个大课题，但是不同的企业，不同的团队面对的具体问题不一样，可使用的资源也不太一样，那么采用哪种协同方式并无定式，需要根据实际情况，进行具体分析，毕竟效率的提升是为了创造最大的价值。我们所有的努力最终目的是为了解决问题，做正确的事。
作者：菘蓝C 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
最近 AI 绘画越来越成熟，能做的事情也越来越多，很多同学经常在群里或私信中问我关于对 AI 绘画的观点和看法，以及 AI 绘画对 UI 设计师有什么影响，所以今天独立写一篇内容，来具体讨论下这个话题。
首先输出一个太长不看版的结论：
AI 绘图可以协作 UI 设计师更快地完成一些边角料工作，但无法取代 UI 设计师的核心价值，不会对 UI 岗位造成大范围冲击……
那下面就来具体讨论吧！
相信大家都有这种感觉，2022年开始，AI 绘画突然就毫无征兆地火起来了，用火遍大街小巷来形容一点也不过分，当我走在地铁和机场等公共场所都能随处可见 AI 绘画作品的展示。
其实AI绘画这个技术一直都有，比如 OpenAi 的 Dall·E，但真正产生质变的时候是从 2022 年2月 Disco Diffusion 发布以后，让 AI 绘画的能力得到了质的飞跃。
随后一些使用它创作的作品开始流通，且在美国的某数码绘画比赛中由 AI 作品获得冠军，彻底吸引了公众的视线。随后，一系列新的 AI 绘画工具开始开发和上线，包括目前为大家所熟知的 Stable Diffusion 和 Midjourney、NovelAI。
从上线到现在不到1年的时间里，这些软件都完成了多次的大版本更新和迭代，让 AI 绘图的能力越来越强，准确性越来越高，我们甚至很难想象再过五年以后会发展到什么可怕的地步。
除了目前已经正式发布的绘图工具外，还有很多新的产品正在热火朝天的开发阶段，如巨头 Adobe 的 Firefly ，Stability 的新产品 REimagine 等。
产品的多样性，差异化，以及本身的进化，为视觉设计和艺术创作提供了全方位的支持和可能性，也对相关行业产生了巨大的冲击。
我们不得不面临一个很现实的问题，AI 是不是会取代大多数插画、设计师？
这是很有可能的，不管是从网上，还是认识的朋友学员那边获得的反馈，高度依赖插画、场景建模的行业，都在受到 AI 的剧烈冲击，有的将接入 AI 制定成 KPI 要求全团队 ALL IN，有的在跑通AI工作流以后直接启动裁员进程或关闭外包渠道。
AI 的出现对于美术行业，就像燃油车出现对马车的革命，照相机的出现对手绘的冲击，是非常值得思考的，因为我们或多或少也身在其中。
因为在产品方向，Midjourney 已经可以通过指令生成用户界面了，试用 ChatGPT-4 已经可以用指令10秒创建一个可以操作和访问的网页，看起来未来已经提前朝我们走来。
所以 UI 设计师是不是很快也要被取代直至消亡？
相信有长期看我们公众号分享和公开课的同学，应该知道我一直在强调，界面对于 UI 设计师的工作只是必要但占比并不高的部分，如果认为我们的工作价值仅仅是最后产出的视觉界面，那淘汰多数 UI 设计师的方式根本轮不到 AI 来动手，按目前市面流通的前端框架和组件库就够了。
之所以有大量的现成素材、模版、组件库，还不能淘汰 UI 设计师，原因就是整个项目设计过程中所需的变通、灵活性、抽象思维要求，是它们完全无法覆盖的。
一个稍微成熟点的项目设计图产出和交付，是需要经过下面这个流程的：
从这个简化的流程模型里，大家要明白专业的设计稿输出是有 “黑箱” 加工步骤的，要在这阶段，对工作的需求进行大量的研究、分析，并做出决策确定出设计目标或者方案。
在现代设计团队中，直接拿到需求就做设计稿的模式是很难产出高质量设计的，或者应对更专业严格的要求。设计师需要在这个阶段投入大量精力，尽可能提升设计产生的价值，减少出现不良影响的风险，以及 —— 说服团队接受当前的设计思路。
而这是 AI 绘图完全无法实现的东西，我们使用 AI 绘画仅仅是输入做好的决策，让它生成结果，但没办法通过输入业务、需求的疑问，让它给出一个有详尽理由和逻辑的设计成果。
可能有同学会下意识的想到，那我们用 ChatGPT 这样的工具，提出问题，让它自己给出解答并直接给出绘图指令操作绘图工具生成界面，顺带再自己开发号产品，不就行了，一个人就是一个团队，人人都是产品经理终于实现……
这个业务模型非常合理，看起来似乎完全可以实现。但真的有项目经验的自己去思考一下，就会发现中间存在的问题无穷无尽。
第一点，“黑箱” 是给出问题答案的分析处理过程，ChatGPT 再怎么神通广大，也需要我们去给到有效的问题和需求，它才能给你有用的答案。那么问题来了，你怎么和它描述具体的业务需求、产品需求、体验问题和各类用户痛点？
以上一篇分享为例，我们优化 Stable Diffusion 的输入框，光和 AI 说优化输入框约等于废话，你得告诉它怎么优化，那怎么优化这件事不就是得去找出原产品问题的缺陷嘛？如果我自己去找完缺陷了，那最后画那点图例的工作量有什么了不起的呢？
更何况一些复杂的业务，尤其是B端行业，完全无法用简单的几句话描述清楚，要搭配各种框架图和流程图，光开一个业务评审和培训的会议，可能就要花非常长的时间。
所以该用什么形式去和 AI 描述这些抽象的信息内容？
第二点，还是以上面案例为例，在这个输入框中，包含很多交互的小细节，输入框内光标的操作，键盘的操作边界在哪里，输入文字后提示关联的逻辑，不同输入指令类型要区分怎么和 AI 描述，全都成为问题。
所以光生成一个界面是没有意义的，这个界面做的再好看再美观，也不代表它有真实落地的可能，只是完成了设计工作的一小部分而已。所以看到这里是不是感觉很熟悉？和我们在追波上看到的各类飞机稿案例没有太大的区别。
第三点，上面的模型只是一个非常简化的流程，有过真实的项目经验就应该知道流程中会有反复拉锯的事件，需求的变动，设计稿的修改，方案的调整，这些零碎的工作去和 AI 提，你会发现有输入问题的时间，可能设计早就修改完了。
尤其在最终的标注和切图环节，涉及到设计时对设计稿的制定，标注和切图实际上有很多主观性和经验化、场景化的输出要求，它需要设计师在经历整个项目流程后自行判断。
除了以上三点，还有很多其它的问题难以解决，而这些问题的总和，决定了没有出现真正的人工智能之前，使用 AI 来输出 UI 界面是一件不靠谱的事情。
只有视觉领域没有前期那么多条条框框，也没有后续一系列交付和维护需求的场景，才是 AI 真正产生价值和影响的方向。
用 AI 做 UI 设计不靠谱，但是不代表对UI设计师没价值。这话听着可能挺拗口的，但事实如此，因为在国内的UI设计环境中，UI 设计师的工作内容往往不局限于产品设计一个领域内。
还包含下面这些操作：
我相信大多数 UI 设计师做平面和运营设计的感受就和上坟的状态是一样的，上坟起码是怀有对先人献花，做平面和运营设计只会产生对自己深深的唾弃……
所以 AI 的出现可以很好的处理这部分的需求，比如一些虽然用处不大，但就是甲方还是老板就是想用的 3D 风格图标。
或者，在登陆页用的比较滥俗的 3D 场景背景，为了这样的东西花很长的时间去建模和渲染，投入和收益是完全不成正比的。所幸使用 AI 也可以帮助我们非常短的时间内获取想要的效果。
还有就是各类运营设计图，互联网运营设计和一般的品牌广告视觉比较起来，就是对创意性的忽视，画面并不需要埋伏大量的隐喻、内涵或故事，就是单纯的应景和吸引用户注意力，这恰恰也是 AI 最适合输出的东西。
包括广告 Banner、H5、启动页等，都可以通过 AI 快速生成一些高质量的插画，来替代我们自己从头开始绘制的苦恼。
所以你看，对于我们职业价值不高的这些杂活，AI 都可以很好的去完成，而且可以肯定未来可以完成得越来越好，我们就可以节省更多的时间，不管是投入精力给体验和交互，还是准点下班，都符合我们自身的利益。
所以，UI 设计师对 AI 的态度并不是敌视和悲观，而是要把它当作救星和帮手，把我们从运营设计的水火中拯救出来……
不仅是观念上的调整，掌握一定的 AI 绘制技巧也是必要的，将他们融入到你正式的工作流程中，所需投入的精力也远远小于你从头开始学插画和 3D 渲染。
相信不久的将来，UI 设计师的招聘中部分要求手绘和建模的 JD，会替换成熟练使用 AI 绘图。
作者：酸梅干超人 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
看完本篇文章，你会学到以下内容：
1，什么是弹窗？
2，弹窗的规范如何定义？
3，弹窗使用规则是什么？
4，什么是抽屉？和弹窗对比优缺点是什么？
一、什么是弹窗？
弹窗是在保留当前页面状态的情况下，告知用户并承载相关操作。
思考：弹窗里面哪些构成原件可以根据业务属性可以有可以没有呢？
答案：标题区和操作区。
二、弹窗的规范如何定义？
1、定义弹窗的大小规范
弹窗的的大小有两种定义方式。一种是固定大小，一种是自定义大小。需要根据自己的业务场景二选一。
弹窗宽度一般定义为三种。分别为560px，720px，960px，都是8的倍数方便记忆。尺寸并不是定死的，可以根据自身业务场景调节。
弹框固定高度会有一个最小高度200px，一个最大高度560px。在其之间的高度是由内容区的内容决定，超过最大高度560px时出滚动条。
弹窗自定义高度，只定义最大高度，随着页面拉升缩小，弹窗边距不变。
2、定义弹窗内容规范
定义：标题栏操作栏高度，内容区边距。
3、弹窗类型
弹框类型是根据使用场景区分提示弹窗，自定义弹窗两种
弹窗优点：没有跳出父级页面，弹窗任务完成后仍然会留在父页面进行操作，减少用户操作中步骤体感
弹窗缺点：信息承载量少，信息内容过多的时候会出现上下左右滚动条，弹窗会降低用户操作效率
三、弹窗使用规则是什么？
1、不超过两种操作选项
假如承载的操作项比较多，建议新跳转一个落地页。
2、多步骤操作，选择用页面承载
3、尽量避免弹窗叠弹窗
第一个弹窗的内容考虑用页面承载或者第二个弹窗是否可以用气泡或者下拉来承载。
假设一定要叠，二级弹窗的复杂度要低于一级弹窗，满足形式上的平衡，遵循从大到小的逻辑或者是覆盖上级，完成任务后点“返回”返回。
四、什么是抽屉？和弹窗相比优缺点是什么？
抽屉是信息承载量和页面比肩，又兼具弹窗的优点。
作者：鲲sky 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
看完本篇文章，你会学到以下内容：
1， 什么是表单页？
2，表单页设计原则
3，表单的构成
4，表单的交互
5，页面布局
6，提升表单易用性
7，体验衡量指标
1、采集/录入数据信息。2、编辑数据信息。3、特殊的条件设置。后台产品的本质是针对数据的增、删、改、查。而增、改、查都可以用表单完成。
OA系统里面的请假申请，报销申请，录入员工，新建会议。教育类的创建课程。HRM系统里面发布职位以及物联网管理系统新建设备等等。
用户快速定位重要信息和目标选项同时文案和组件能够准确传达相应含义
整体表单排布有合理的交互形式；科学的信息布局和组织形式；尽可能“少操作一步”用户在面对50和表单和500个表单的心理压力是不一样的。
操作前：提示和防错。
操作中：实时反馈与纠错
操作后：合理的保存、清空、取消、撤销机制。
表单通常由表单标签、表单域、提示提示、操作按钮四部分构成。
左标签
优点：表意明确，节约纵向空间，多用于web端
缺点：不太适用于移动端等狭长空间
顶标签
优点：对齐舒适，节约横向空间，多用于移动端及英文场景下。
缺点：纵向空间利用率不高
行内标签
优点：最节省空间，多用于注册登录
缺点：输入状态标签消失，用户陷入迷茫
左对齐标签
视线从标签移动到表单域时间为500ms，这比右对齐标签所用的时间长的多，所以更适合阅读，用于详情的陈列。
特点：阅读效率高，操作效率较低；
右对齐标签
视觉动线参差不齐，不适合高效阅读，但适合高效操作，更适合表单填写。
特点：阅读效率不高，标签指向明确，操作效率高
步骤一：根据业务已经有的字段长度定义4-5种宽度规范，建议宽度可以是8或者是40的倍数。
步骤二：根据你要搭建的表单，选用合适的规范，长度与输入预期成正比。有人会说排出来的表单左边没对齐，右边也没对齐，其实这就是B端产品特征那就是是好用大于好看，就要给用户一种心智那就是给你的这个长度那就是要输入一个这么长的内容。
避免“正确的废话”：给不到用户任何的帮助还增加了用户的阅读成本。
按钮常见位置：一般出现在页面顶部、跟随表单里的内容、表单内容底部、页面底部。
按钮阅读顺序：按钮出现页面右上角或右下角时，阅读顺序是从右往左，这符合pc端操作习惯以及人阅读习惯。按钮跟随表单内容或在表单内容底部时，阅读顺序为从左往右，这符合人的填写顺序从上往下，从左往右。
底部按钮右对齐：一般用在弹框，因为弹框页面比较小，右对齐比较符合操作习惯。
底部按钮居中：一般用在页面中，因为右下角操作距离会有点远，所以表单用页面承载的话按钮建议居中。
表单中字体全部统一采用14px。表单上下间距一般有三种，1.内容与内容间距为24px。2.内容与说明文案间距为4px。3.内容与子内容间距以及及子内容之间的间距为8px。
表单交互方式有四种。1.原位编辑；2.气泡卡片；3.弹窗/抽屉；4.页面跳转。
原位编辑
编辑内容即为展示内容，容量低于5个时使用。
气泡卡片
设置项与看板内容紧密相关时使用气泡卡片，建议设置项低于5个。
弹窗/抽屉
设置项与看板内容可以有关联也不可以没有，大于三个以上的录入项使用。
如果录入项较多，用弹框承载出现翻页的情况下可考虑使用抽屉。
页面跳转
如果容量超出了弹框/抽屉的承载量并且录入项与看板没有那么强的关联性可采用页面跳转的方式。
页面布局方式有四种。1.分组；2.锚点定位；3.标签页；4.分步骤
5.1.1标题分组
设置项超过7个；彼此间的关联性较弱且可以分类去归纳
5.1.2卡片分组
有多个设置项，多个分类；彼此之间的关联性更弱，分类明确
有多个分类的情况可通过锚点定位迅速找到相关信息
彼此之间没有特定的相关性，可以独立设置。每个设置包含了多个录入项且使用了标题分组。
小结
当录入项少于7个时使用基础布局；当录入项在7-15个时可采用标题分组，卡片分组、锚点定位布局；当录入项大于15个时需采用标签页布局。
利用步骤条将大型，复杂任务拆解为多个部分，并按照相关性分组。
建议3种分组依据
1.采用必填项划分，把必填的选项分在一起；2.采用相关性划分；3.以操作成本划分。把好填的简单的表单放在前面，复杂的放在后面。
提升表单易用性方式有5种。1.信息降噪；2.清晰易读；3.高效智能；4.防错纠错；5.所见即所得
场景一：当表单中大多数都是必填只有极少数非必填时
场景二：表单项非必填项比较多，可将低频的非必填项收起
场景一：尽量采用单列布局，视觉动线流畅，不容易遗漏信息；按enter键换行。
场景二：如果出于业务方需要，必须在横向添加内容，那最好有一定的分组依据。但这样就不应该出现竖向分组，以免遗漏信息。
6.3.1根据上下文信息可以自动获取的，无需用户再次填写。
例如根据手机号带出用户姓名；根据地址带出邮政编码；根据身份信息带出生日。
6.3.2提供合适的“默认项”。
例如根据行业现状提供常规的比例分配；根据定位把地区做默认的填充。
6.3.3提供搜索、联想，自动显示匹配的信息
用户在进行输入等操作时可以提供智能辅助，例如表单填写时对需要录入信息的区域提供辅助提示，通过自动补全或联想词来帮助用户快速录入信息，在保持用户的操作自由度的情况下提效。
6.3.4 OCR识别文件内容
对于一些标准证件信息的录入，可以通过OCR识别文件内容。当用户上传图片后，运用图像识别技术提取关键信息并自动填入结果。
6.4.1对于长数字，四位一空格，用来分段
例如输入银行卡号；充值场景下输入手机号等
6.4.2为用户封闭不正确道路
将超出时间选择范围的日期置灰。电话号、身份证录入时只允许输入数字同时设置字数上限。
6.4.3告诉用户哪里错了，而非简单粗暴的错误提示
表单页对填写的物料内容进行映射，展示真实效果预览，降低用户心理的不确定性。适合对移动端、小程序、H5页面的设置。
体验衡量指标有4种。1.任务完成率；2.任务完成时长；3.必填项目数；4.易用度评分
7.1任务完成率
7.2任务完成时长
7.3必填项目数
结合业务场景给出最适合的必填项设定，提高用户填写效率。
7.4易用度评分（用户完成某项任务的难易程度）
易用度可通过调研问卷和评分量表获取。
作者：鲲sky 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
设计做到极致注重的就是对于细节的把控力，大厂的设计师之所以比较优秀，就是他们具备很好的细节把控力。想要提高产品设计的能力，发现设计细节和思考设计深入的能力至关重要。
最近在体验产品的时候，发现了一些设计细节做得比较好的优秀案例，分享给大家学习一下。
分享目录
一、Banner 轮播转场的品牌化
二、情感化的弹窗设计
三、最小化显示提高空间利用率
四、动态化的设置引导
五、沉浸式的活动氛围设计
六、人性化的提示设置
七、动态感知的温度设计
八、无处不在的广告位开发
九、主题化的图标设计
十、新颖的卡片式设计
一、Banner 轮播转场的品牌化
立足于品牌做设计，才能强化自身产品的差异化。如何在更多设计场景中融入品牌基因，是设计师需要深入思考的关键。
最近在使用腾讯视频 APP 时，发现首页 Banner 图在轮播的转场过程中，以品牌 LOGO 造型作为转场过度。一个小小的细节强化了用户对于品牌的记忆度，也体现出专属的设计差异。
二、情感化的弹窗设计
通过弹窗设计可以提高用户操作效率，也是传播信息（活动/广告）最直观的形式。但是体验多了用户便会开始排斥，提高弹窗的情感化设计变得尤为重要，降低用户的排斥感才能提高弹窗的作用。
很多娱乐影视等 APP 都会有“青少年模式”弹窗提示，抖音将弹窗视觉表达融入了精美的国风插画。也通过针对性的内容作为设置的引导，提高了用户对“青少年模式”的深入理解，增强了体验的积极性。
插画的形式在弹窗设计中表现比较突出，比如嘀嗒出行 APP 将“推送通知”的弹窗设计运用插画增强情感化表达。相较于生硬的表达方式用户更能接受，通过营销的文案引导用户授权，提高了产品的感官体验。
三、最小化显示提高空间利用率
对于工具型产品不同用户的操作焦点不同，更多定制化的体验才能提高用户的操作效率。
钉钉 APP 在协作栏目中，默认展示的各类工具可以进行收起，实现最小化显示。用户可以根据使用习惯和操作方式选择收起/展开，提高了当前空间的利用率，自定义的功能设计可以提高用户的操作体验。
四、动态化的设置引导
为了提高用户隐私权益，手机系统针对产品调用权限进行了阻力设计，需要用户的授权操作。提高用户的各类功能授权就需要设计师探索，降低用户的排斥感和提高授权的利好政策才能获得授权。
抖音在引导用户开启通知权限的设计中，采用了动态画面的表达来强调开启通知的利好政策，以此来攻破用户的心理防备。相较于生硬的弹窗提示，动态的表达和引导性的文案更能拉近与用户的距离感。
五、沉浸式的活动氛围设计
沉浸式的体验可以带给用户更好的场景感，提高用户的参与度。在活动的设计中，不断向游戏化和沉浸式方向加强体验，提高活动的趣味性和强化用户参与的积极性。
腾讯视频在情人节的互动活动设计中，就将抢红包的活动融入到当前的界面中，红包雨铺满整个屏幕，以趣味性的形式满足用户心理。不隔断与界面之间的联系，降低活动对用户的干扰，进而提高活动氛围感和参与度。
六、人性化的提示设置
短视频近些年改变了大家的生活方式和娱乐形式，也有用户容易过度依赖进而影响休息质量。
抖音作为短视频领域的头部产品之一，在增强用户体验的同时也要起到良性的引导作用。当用户刷短视频一定时间后会弹窗提示休息，而提示时间用户可以根据自己的实际情况进行设置，灵活的设置可以让用户合理分配时间。健康使用的引导可以让用户感受到产品的温度，提高用户体验的认可度。
七、动态感知的温度设计
天气预报是用户关注度较高的信息，对于温度的感知可以让我们出行更容易把控。在产品中显示天气情况也是一种情感化的升级，可以带给用户更有温度的体验。
利用饿了么 APP 点餐之后，首页会显示配送情况和当前的天气温度，背景以动态的天气画面增强视觉感知。也希望用户可以根据天气情况对外卖员多一份理解，加强人与人之间的宽容心，带给用户更强的情感化体验。
最近在使用爱奇艺 APP 时，发现左上角的品牌位置也结合了天气情况，结合顶部视觉区域的流体渐变，新增的天气预报和品牌 LOGO 完美的通过动效过度。整个设计表达流畅自然，感官体验也是非常值得学习的。
八、无处不在的广告位开发
广告是众多产品实现流量变现的方式之一，广告位的开发也是见缝插针，如何在仅有的空间增加更多广告位，产品设计师也在不断探索。
最近在使用腾讯视频 APP 时，进入到个人中心时会默认有个下拉广告。这个见缝插针的广告位新增，对于设计师来说让我感受到了广告的无处不在，不过对于用户来说是否会心生排斥感得通过数据去验证。但是作为产品设计师这也是一个启发，将有限的空间进行深度开发，还不会影响已有的结构布局，这也是一个启发性的案例。
九、主题化的图标设计
图标是产品中不可或缺的存在，图标设计的研究也是设计师需要重点对待的技能范围。精美的图标不仅可以提高产品的感官体验，也能吸引用户的关注度，进而提高业务模块的点击欲。
最近在使用顺丰速运小程序时，寄快递栏目的各业务入口图标设计非常引人注目，结合主题化的图标设计突出了活动传播力度。对于工具型产品而言，强化氛围感可以打破用户原有的认知，不仅可以突出活动主题，也能强化用户对产品的视觉感知。
十、新颖的卡片式设计
卡片式设计已经流行好几年了，目前依然是非常普及的 UI 设计趋势之一。如何进一步强化卡片式设计的创新度，我们需要不断的尝试和总结。
哗哩哗哩 APP 的创作中心设计也许是一个不错的启发，卡片内部右上角的视觉强化使得原本普通的表达变得更有视觉感。突出的设计也成功的吸引了 UP 主的注意力，强化了该入口的点击欲。这样的设计表达在保留卡片式设计的基础上，也是一种新颖的视觉表现，可以作为突出业务入口的表现方式进行探索。
作者：黑马青年 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
一、前言 —— 1.1 阅读之前、1.2 调研背景、1.3 分享目的、1.4 术语说明
二、市场分析 —— 2.1 行业背景PEST、2.2 市场现状
三、主流工具 —— 3.1 调查筛选、3.2 工具介绍、3.3 分析模型、3.4 结构层、3.5 框架&表现层
四、功能体验 —— 4.1 创建大屏、4.2 分享导出、4.3 更多玩法
五、探索思考 —— 5.1 未来迭代、5.2 设计价值
阅读提醒
1、文章上篇约10300字，阅读时长约20分钟。全文主要分享本人对当下主流可视化大屏搭建工具的调研分析，浅谈对可视化行业的探索思考。由于篇幅有限，阅读体验更佳，故分为上下两篇，上篇简述可视化行业的市场分析，拆解分析主流工具（DataV、Raydata、EasyV、森大屏）的结构层、框架层和表现层。下篇接着讲主流工具（DataV、Raydata、EasyV、森大屏）的功能体验，浅谈可视化行业未来的探索和思考。
2、文中的拆解分析部分，多款工具可能存在较多重复观点，由于篇幅有限，故不再赘述。
适合读者
B端UI设计师、产品经理，可视化行业相关从业者及爱好者。
调研时间
2022年9~10月
调研方式
桌面研究、问卷调查
首先，本次分享仅作为个人学习交流，文章观点仅代表个人。目前比较少有可视化工具的产品分析，本次通过调研，希望了解更多可视化大屏工具的背景、知识，也希望能通过文章的形式，达成两个分享目的：一、提升自身的复盘总结能力，鼓励将知识沉淀后输出分享；二、借此机会与更多行业相关者分享交流学习。
数据可视化
关于数据视觉表现形式的科学技术研究。
数据可视化平合
它是大数据内在价值的最终呈现手殷，它利用各类图表、趋势图、视觉效果对数据进行分析并展现，帮助用户发现内在规律、发掘深度规律、指导经营决策。
大屏搭建工具
利用简单拖拉拽、低代码开发等方式，帮助非专业工程师快速实现炫酷大屏的数据可视化大屏效果的互联网工具类产品。业务场景主要有行业可视化、智能终端、模拟演示、数据统计分析。
在2011年左右，国内帆软公司研发简单的可视化产品，起名“FineBI”，解决了用户个性化的可视化分析的需求。随着技术发展和行业趋势发展，在满足智能分析报表的基础上，又迎来了更高的可视化大屏的挑战，国内如光启元Raydata、阿里DataV等可视化大屏工具开始出现，各大厂商如京东、百度、网易有数等纷纷踏上可视化赛道，随着近年的政策支持企业数字化转型的浪潮下，可视化行业得以快速发展成熟，为企事业单位解决了一个又一个可视化分析难题……
本次调研经过桌面研究，分析出近年来可视化行业背景和市场现状。
从政策、经济、社会、技术这四个方面，分析数据可视化行业的背景，得出以下结论：
一、在政策方面，数据可视化行业受到政策扶持；
二、在经济方面，IT产业体系扩大且成熟；
三、在社会方面，数据可视化解决企业痛点，机会点在政企和医疗行业；
四、在技术方面，企业通过数据可视化进行精细化管理成为现实。
* PEST分析法 是对宏观环境进行分析，以便找到机会，认清威胁与挑战。所谓PEST，P是政治(Polotics)，E是经济(Economy）, S是社会(Society），T是技术(Technology)。这种方法就是将这4个元素分别写在4个格子中，并罗列出这4个元素相关联的与产品有关的环境因素，最后投票选出3~5个点子作为PEST分析的结果。
P政策
中国相继出台多项政策（如《“十四五”大数据产业发展规划》）重点扶持数据采集、数据安全、数据处理、数据存储及大数据在产业端的应用等方面的快速提升，进一步利好数据可视化平台等相关细分产业的快速发展。
制定5个发展目标、6大主要任务，明确大数据产业将步入“集成创新、快速发展、深度应用、结构优化"的高质量发展新阶段设置数据治理能力提升、重点标准研制及应用推广工业大数据价值提升、行业大数据开发利用、企业主体发展能级跃升、数据安全铸盾六个专项行动。（参考来源：头豹研究院）
E经济
2021全年国内生产总值突破110万亿，GDP达114万亿元，按不变价格计算，比上年增长8.1%，两年平均增长5.1%。
我国IT产业在经历了三十多年的发展后，已经基本形成了产业规模庞大、专业门类齐全的IT产业体系，2020年我国IT支出达2.9万亿人民币。
在应用软件领域百花齐放，2021年上半年我国软件业完成软件业务收入44198亿元，同比增长23.2%；全行业实现利润总额4999亿元，同比增长13.6%。另外，对于云计算、大数据、物联网、人工智能等新一代技术，我国也由单点向融合互动不断演进。（参考来源：头豹研究院）
S社会
数据可视化可有效解决企事业单位在传统数据分析的痛点，降低了企业数据分析成本，助力企业在技术层、业务层、管理层及决策层等层面的决策能力。
受疫情影响，政务及医疗领域对公共卫生等等公共领域掌控力度加强，因此，中国数据可视化未来市场增长点将主要集中在政务及医疗卫生领域。（参考来源：头豹研究院）
T技术
伴随着互联网、物联网快速发展，中国数据量持续增加，通过对数据的可视化处理及分析，企业端对日常精细化管理成为现实。
过去5年间，中国数据产生量快速增加ie中2017年的6ZB快速增加至2021年的16ZB。预计未来5年中国数据产生量将继续增加，有望于2026年达到62ZB。（参考来源：头豹研究院）
分为市场阶段和市场规模，说明当前数据可视化行业的市场现状。结论如下：
一、国内数据可视化平台市场尚处于发展期，潜在市场容量非常巨大，前景广阔；
二、预计未来5年国内数据可视化平台市场规模快速增加，复合增长率达32.5%。
市场阶段
国外可视化展现平台行业起步较早，市场相对成熟，消费者认可较高，而国内可视化展现平台行业市场还处于发展期，虽然2012年呈现出小爆发式增长，但市场尚不成熟，还有待于培育，然而国内人口基数大，随着国内经济的发展，人民生活水平的提高，收入的增长，对精神生活方面的消费也不断增加，国内潜在市场容量非常巨大，前景广阔，因此，可视化展现平台行业的发展将逐渐向本土化转移。
当前，中国数据可视化平台行业尚处于发展早期，36.8%投融资事件主要发生在早期A轮阶段，行业尚具有较大发展潜力。从地域分布情况来看，中国数据可视化企业主要分布于广东省、北京市、上海市、江苏省及浙江省等区域，约占总体的93.5%。当前，中国数据可视化行业投融资较为活跃。其中约36.8%的企业处于A轮融资阶段，2家企业已于新三板挂板，其中，观远数据于2022年2月完成C轮融资，共计2.8亿元。（参考来源：头豹研究院）
市场规模
过去5年间，中国数据可视化平合市场快速增加，由2017年的13.2亿元快速增加至2021年的43.8亿元，复合增长率达27.1%。预计未来五年中国数据可视化平台市场年复合增长率有望达到32.5%。（参考来源：头豹研究院）
根据上面的行业背景和市场现状，从政策扶持、经济增长、社会机会点增加、技术革新、市场阶段成熟、市场规模扩大方面都是正向推动着可视化行业的快速发展，于是，市面上逐渐出现了很多数据可视化大屏搭建工具，目的是有效解决企事业单位在传统数据分析的痛点，助力企事业单位快速进行数字化转型，整合数据、提高数据展示效率及辅助管理决策。
经桌面研究、问卷调查后，发现并整理出市面主流的数据可视化大屏搭建工具梯度说明。以工具满意度、行业普及率、用户量几个维度来划分梯度：
第一梯队有阿里云DataV、腾讯RayData、袋鼠云易知微；
第二梯队有腾讯Banber（现改名RayData Report）、山海鲸可视化、森工厂森大屏、51WORLD、华为云DLV；
第三梯队有微兔可视化、ByteV中台等。
*本次未归入调研范围内：京东、百度、网易有数等厂商可视化产品，以及一些开发大佬的开源大屏工具
*使用腾讯问卷自发进行问卷调查，主要渠道为微信群，有效样本量较少，数据仅供参考
第一梯度的阿里云DataV、腾讯RayData、袋鼠云易知微的工具满意度、行业普及率、用户量综合评分较高，还有第二梯度的森工厂森大屏对比其他竞品产来说，产品形式不同，后面将以阿里云DataV、腾讯RayData、袋鼠云易知微、森工厂森大屏这4个工具产品来进行体验分析。
调研版本：*阿里云DataV - 企业版试用 - V6.2； 腾讯RayData - Web版 - V2.6.0； 袋鼠云易知微EasyV - 个人版 - V5.1.0； 森工厂森大屏 - V2.10.11 。
*EasyV2022年12月上新了「节点管理」功能（类似DataV的「蓝图」功能) 会与本次调研版本有一定差异。
*由于阿里云DataV在调研后2023年UI进行较大更新，所以会与本次调研版本有一定差异，更新日志传送门：https://developer.aliyun.com/article/1127824?spm=5176.14082271.J_5834642020.1.42c74dcf64Y3FZ#slide-12
阿里云DataV
a.产品简介
使用可视化应用的方式来分析并展示庞杂数据的阿里云产品。其中DataV企业版试用是适合刚接触DataV的新用户，轻松搭建可视化大屏，汇报、客户参观必备。而DataV数据可视化企业版是开箱即用实时数据大屏搭建工具。
b.产品特点
智能识图；蓝图节点编辑器；三维城市编辑器；BI分析组件
c.产品版本
企业版（本次调研）、专业版、尊享版
腾讯光启元RayData
a.产品简介
专注3D数据可视化原型设计。RayData Web是B/S架构开发的网页端可视化系统搭建工具，支持在线3D可视化编辑，轻松构建商业级数字孪生项目。
b.产品特点
3D模型风格独特；图表工作站；模型场景工作站；提供定制服务
c.产品版本
个人版、Web版（原名专业版，本次调研）、Plus版（私有化部署）
袋鼠云易知微EasyV
a.产品简介：
数字孪生，EasyV是低成本无门槛上手数据可视化大屏的工具，数据看板可视化，轻松设计 高效搭建。
b.产品特点：
素材资源丰富；资源社区氛围好；提供定制服务
c.产品版本：
个人版（本次调研）、高级版、尊享版、运行平台（私有化部署）
a.产品简介：
拖拉拽搭建可视化大屏，内置丰富模板和在线图表开发工具
b.产品特点：
数字孪生工具链生态完善；蓝图节点编辑器；图表工作站；提供建模服务
c.产品版本：
基础版（本次调研）、专业版、高级版
本次调研使用【用户体验五要素】模型方法来分析主流工具DataV企业版试用、Raydata Web专业版、EasyV个人版、森大屏基础版，主要侧重在表现层、框架层、结构层。
此处说明一下，例如本次调研的属于功能型产品，那么功能型产品的结构层侧重于交互设计，通常可用思维导图、流程图方式来说明情况。再往上看，功能型产品的框架层侧重于信息设计、界面设计，大致模块尺寸大小、位置摆放，通常可用低保真原型、交互文档来说明情况。到了模型最顶层，不论功能型还是信息型产品的表现层都是感知设计，关注视觉如何呈现，通常运用形、色、字、质、构、动着6个维度进行整体视觉设计。
用户体验五要素来自Jesse James Garrett 的《用户体验要素》一书：战略层、范围层、结构层、框架层、表现层。
在结构层中，DataV企业版试用、Raydata Web专业版、EasyV个人版、森大屏基础版4款产品略有不同（且名称叫法不一），整理总结出共性，产品包括系统页和编辑器，系统页下包括项目列表、资源管理、用户管理、帮助中心，编辑器下包括顶部导航栏、组件库、图层面板、画布区、信息面板。
为了更清晰了解4款产品的产品设计侧重点，接下来，对比分析它们的结构层。
关键词：强调品牌感、帮助中心、灵活切换蓝图
DataV企业版试用分为系统页+编辑器。系统页顶部是轮播banner图，强调品牌感和打造产品差异化。
系统页主要包括我的可视化、我的数据、我的资产、教程，其中我的可视化包括3个创建入口，分别是PC创建、移动端创建和识图创建，满足用户在不同场景的使用需求。系统页中教程层级放在一级菜单下容易被用户发现，对小白用户比较友好，快速观看视频教程。
编辑器中包含画布编辑器和蓝图编辑器。进入编辑器后，可切换画布编辑器与蓝图编辑器，放在同一层级，方便用户从画布编辑器中添加图层到蓝图编辑器中。
画布编辑器（PC和移动端基本一致）包括图层、资产列表（资产包、组件库）、工具栏、画布、页面设置、组件设置。蓝图编辑器包括导入节点、逻辑节点、工具栏、配置面板。
关键词：可视化统计、定位专业用户、画布占比大
Raydata Web专业版分为系统页+编辑器。系统页主要包括工程列表、资源管理、数据管理、权限管理。因为产品定位是专业版，所以弱化了帮助手册的入口，同时编辑器中也是基于熟悉掌握工具的用户而设计的。类比于Raydata Web个人版，系统页的更多帮助入口更为明显，适用于新手小白使用。
系统中的资源管理包括3D资源和2D资源，显示资源数量，以环图可视化的形式表现，系统中的权限管理也同样显示人员数量，数据统计一目了然。
编辑器中的大纲、概要与其他产品结构不同，大纲包括系统UI层（放2D）、层级（放3D）、页面（2D&3D），概要分不同情况而定，处于UI层时显示2D组件，处于场景层时显示3D组件。
画布编辑器包括顶部栏（基础功能、组件库）、概要、大纲、画布、页面设置，页面设置（画布设置、组件设置）。其中组件库折叠在顶部栏中，增大了编辑器中画布的占比，让用户更关注当前画布操作。
关键词：素材资源、帮助中心、画布占比大
EasyV个人版分为系统页+编辑器。系统页包括我的应用、我的数据、终端交互（高级版有）、组件开发（尊享版有）、后台管理、门户管理（高级版有）、资源中心。
其中系统页的资源中心包括应用模板、设计素材、主题资源，有入口可跳往素材广场，EasyV的素材资源十分丰富，该跳转入口可以很好引导用户去使用官网设计素材，轻松搭建大屏。帮助菜单位于常驻悬浮于系统页侧边栏，其包括操作日志、帮助文档、视频教程、问答中心、版本日志，帮助菜单对于新手小白比较友好，操作路径简短，方便新手查阅帮助资料。
编辑器包括任务栏（基础功能、组件、资源）、图层、画布、详情设置（页面设置、组件设置）。同Raydata Web专业版产品，其中组件库折叠在任务栏中，增大了编辑器中画布的占比，让用户更关注当前画布操作。
关键词：工具链、模板推荐、蓝图和代码二开
森大屏基础版分为系统页+编辑器。森大屏的结构和其他产品不同，由于数字孪生工具链生态比较完善，打通其他工具链入口（森工厂旗下有低代码、零代码、森大屏、森城市、森园区、森展厅、森拓扑、森数据、森模型等），所以系统页顶部导航菜单可快速切换工具。
系统页包括了个人中心、帮助手册、我的大屏、推荐大屏（模板），侧重展示推荐大屏，引导用户优先选用模板进行大屏快速搭建，生产提效。
编辑器包括大纲、工具栏、画布、画布属性、资源管理、菜单栏、资源中心、蓝图和代码二开。编辑器中与DataV不同的是，蓝图、代码与画布位于同一层级，用户可随时使用蓝图来链接交互事件，也可进行代码二次开发操作。
将4款产品的框架层和表现层进行拆解分析。
在框架层中，大体而言按钮、输入框等控件圆角较小，看起来比较方正，弧线的异形设计，容易体现科幻造型。在登录页中，页面布局各有差异。在编辑器中的布局大体一致，画布都位于界面中心，强调用户最关注大屏设计的画布区域。高频操作的组件库在页面的位置各有差异。
在表现层中，主要通过形、色、字、质、构、动这6个维度来进行对比分析。DataV企业版试用、Raydata Web专业版、EasyV个人版、森大屏基础版4款产品的整体视觉调性都是以暗色、科幻风格为主。登录页都选择了亮色风格界面，系统页和编辑器都是暗黑风格。部分产品品牌字体以直线为主并加入弧线和粒子元素，科幻的界面动效主要体现在加载页面。
阿里云（DataV企业版试用）- 登录页
DataV 的登录页统一由阿里云登录页进入。以中心布局（核心面板偏右），三维模型+灰色背景+线条点缀的形式进行设计，主题色是阿里的橙色。因为DataV是阿里云旗下的产品，共用入口，所以此处没做额外的产品登录页以强调 DataV 产品一致的品牌感。
Raydata Web专业版 - 登录页
Raydata Web 登录页以中心布局的形式，无其他设计元素，只保留关键信息，同其他竞品相比略显单调。登录页的浅色风格与进入系统页和编辑器的暗黑风格，缺乏界面整体色调的一致性。界面控件主题色使用蓝紫渐变色，与系统页和编辑器的蓝色也略有差异。（可从Raychart产品使用手册发现，旧版布局为同EasyV）
EasyV个人版 - 登录页
EasyV 的登录页有2处触发，常规触发和资源中心触发，分别以左右布局的全页和弹窗形式进行框架设计。弹窗的形式不需额外跳转，让用户在资源中心挑选素材时能更快进行登录操作。登录页以左右布局的形式，插图与登录模块大致各占50%，深色插图的和浅色登录模块的两个色块形成强烈视觉对比，更能吸引用户注意。
森工厂（森大屏基础版) - 登录页
森大屏的登录页以中心布局的形式，有利于聚焦视觉，背景使用简约抽象的形状来点缀画面。灰色背景+抽象图形点缀，与浅色登录模块拉开视觉对比。按钮主题色是橙色，是因为森大屏是优锘科技森工厂旗下的产品，共用入口，所以此处没做额外的产品登录页以强调森大屏产品一致的品牌感。
DataV企业版试用 - 系统页
顶部轮播图占整个页面四分之一左右，强调品牌感同时打造产品差异化，Banner内容为统一风格的3D模型场景+无衬线字体标题为主，一级导航边缘弧线的流光动效表现科幻酷炫风格。
一级导航栏与轮播图的重叠关系，半透的玻璃质感，仿佛是用户透过一层玻璃，打开可视化世界的大门，结合暗黑风格的界面，给用户一种进入游戏的沉浸感、跃跃欲试的冲动。纵向与横向结合的混合导航，对于后期有规划新功能而言，拓展性较强，缺点是占用面积大、交互路径长，适用于大屏项目数不多的情况下，若项目数量较多，可能有空间不够的焦虑。
我的可视化中的3个创建入口按钮使用了扁平加光感强、冷色调风格插画，引起用户注意，快速识别创建功能入口。主题色使用比较鲜艳活跃的蓝色，辅助色为青色，占用面积不多，起到丰富点缀画面的作用。设计元素的四周轮廓不做圆角处理，显得整体界面比较方正端正、硬朗严肃的印象。
Raydata Web专业版 - 系统页
左上方展示品牌Logo，清晰写明当前产品及版本，符合用户认知。品牌元素融入进顶部栏右侧头像及皇冠图标，加深品牌印象。
以侧边悬浮导航的形式使用户快速定位查找功能模块的位置，拓展性较强，以较瓷片“大包小”的结构，聚合了较多功能模块，如果是小分辨率屏幕的情况下，经常要鼠标轮滑来回滚动才可看到下方功能模块，导致不够灵活高效。侧边导航模块中的图标统一为形状较方正、偏冷的中性色、扁平微渐变风格。敬请期待的蓝色沙漏图标在界面中略微突兀出，缺少图标风格一致性。
界面为偏冷中性纯色，无背景装饰，同登录页只保留关键信息（如大屏项目卡片），不加过多装饰的简约风格调性保持一致。按钮主题色使用比较灰的蓝色，透出沉稳柔和的调性。设计元素的四周轮廓略微加了些圆角，同DataV硬朗的感觉则稍微缓和一些。
EasyV个人版 - 系统页
上方展示品牌Logo，同Raydata，不再赘述。对于创建大屏按钮而言，DataV用的是插画按钮的形式，Raydata是用卡片按钮的形式，而EasyV则用图文按钮的形式，而图文按钮的优点是占用面积少。
同DataV，选用了纵向与横向结合的混合导航，拓展性较强，不再赘述。二级导航底部使用了动态插图点缀界面，插图是不断旋转的科幻装置，角度带有透视，让扁平的整体界面附带了层次感、空间感。右侧侧边菜单的帮助图标提供给用户快捷操作，对新手小白友好。
缺省页运用情感化设计，以2.5d插图的表现形式缓解用户负面情绪，配色在深色界面中显得比较明显，个人认为可以适当弱化插画亮色部分。主题色使用鲜艳活跃的蓝色为主，在深色的界面中同样相对明显、突出。设计元素的四周轮廓既有全圆角，也有小圆角，界面形状统一性待加强。
森工厂（森大屏基础版) - 系统页
左上方展示品牌Logo，同Raydata，不再赘述。由于是森工厂旗下的工具链，所以森大屏的系统页顶部栏可进行工具切换，界面左右两侧留白很多、版心小、浅色风格，让整体界面更像是一个前台官网的印象。
使用了像是混合导航的方式，用“像”这样表达是因为，顶部栏是工具切换栏，而侧边悬浮导航1竟然是所有工具的个人中心，侧边悬浮导航2却是当前工具森大屏的资源中心，右侧内容区是当前工具森大屏的我的大屏、推荐大屏模块。框架上有一定程度不太符合用户认知，导致引起疑惑和误解。尽管如此，配色上使用橙色（森工厂）和具体工具主题色来区分当前位置，能一定程度防止用户混淆概念，通过多次在顶部栏切换工具，可预知上面提到的导航1是指所有工具而言的，而导航2则是指当前具体工具而言。
右侧侧边菜单提供用户快速反馈的入口，简单便捷。其中侧边菜单的问号图标与顶部栏的一样，跳转链接一致，而文案却使用了“常见问题”和“帮助中心”2种，重复功能入口也许考虑的是为了增加点击，而同个界面重复堆放功能入口的合理性还有待考究。图标使用了毛玻璃和线性图标的表现手法，为界面提升质感。设计元素的四周轮廓加了小圆角，整体给人的感觉更为亲切、友好。
DataV企业版试用 - 画布/蓝图编辑器
整体暗黑风格的界面下，能使得用户设计深色风格的可视化大屏时，保持更专注的状态。题外话，DataV新版本的编辑器界面可切换有浅色风格，同理，浅色编辑器界面则更适合在设计浅色风格的大屏的场景。通过不同深色色阶的背景色块让每个功能模块的框架位置区分得清晰明了，另外整体配色、形状方面都遵循视觉呈现一致性，降低用户认知成本。
在编辑器左上方无退回系统页的返回按钮，用户只能通过切换浏览器标签页回看系统页，而无法在当前页返回上一层级回到系统页，所以对于想要快速返回上层的场景下，则显得不那么便捷。顶部栏左侧的画布编辑器与蓝图编辑器选项按钮归于一组符合用户认知，可快速切换当前编辑器进行大屏视觉设计或链接交互事件。画布编辑器和蓝图编辑器的画布外区域保持视觉统一，使用了点平铺的背景与画布做出层次区分。
右侧的属性面板中展示组件的配置功能，当信息较多时，用视觉较弱的分割线区分每组的配置信息，数据之间比较紧凑，提高面积利用率。编辑器中多处的功能组使用了格式塔原则的接近性，让距离更近的功能组更有关联性，层次清晰有序，降低用户认知成本。
图标表现方式只使用了单色线性图标一种，让整体界面表现得更简洁、轻量化，忽略图标形状而让用户更多去关注功能。配色、圆角遵循视觉呈现一致性，当功能被选中时，会以蓝色背景、图标反白的方式强调该功能的状态、位置。
Raydata Web专业版 - 编辑器
同DataV，暗黑风格界面，不同深浅色块背景区分功能模块，且界面左上方无退回系统页的返回按钮，不太便捷，不赘述。
大纲与概要类似于页面与图层的关系，像设计软件Figma的Page（页面）与Layer（图层），大纲与概要位于界面左侧的区分上下模块，框架从上至下摆放，符合用户认知。对于新手小白，还需额外查看教程引导才能认知大纲与概要的框架，因为此版本定位为专业版，所以弱化了帮助指引，简化界面，让专家级用户更沉浸地、不受过多干扰地使用。
组件库位于顶部，占用面积小，前面结构层提过，作用是增大了画布占比，让用户更专注设计，不赘述。
图标表现方式使用了单色面性图标和微渐变扁平投影图标，界面顶部是组件库，这些微渐变图标呼应了系统页同样使用了为渐变风风格。为了强调组件库这种用户高频操作区域，使用了更吸引用户注意力的微渐变扁平投影图标，而其他区域则使用单色面性图标，弱化视觉，让界面轻量化，让用户更多去关注功能。同DataV，同样使用格式塔原则的接近性，层次清晰，降低认知成本，不赘述。
配色、圆角遵循视觉呈现一致性，当功能被选中时，会以蓝色背景、图标反白的方式强调该功能的状态、位置。
EasyV个人版 - 编辑器
与其余3款工具不同，EasyV在编辑器左上方有退回系统页的返回按钮，方便用户快速返回上层的系统页。
同Raydata，组件库位于顶部任务栏中，占用面积小，前面结构层提过，作用是增大了画布占比，让用户更专注设计，不赘述。
图标表现方式使用了单色微渐变线性图标，部分图标线细节还用半透明效果，而部分则用了不透明度渐变的方式，提升图标质感，让整体界面轻量化而不至于过于单调。配色、圆角遵循视觉呈现一致性，降低用户认知成本。
森工厂（森大屏基础版) - 编辑器
同DataV，暗黑风格界面，不同深浅色块背景区分功能模块，且界面左上方无退回系统页的返回按钮，不太便捷，不赘述。
编辑器的任务栏设计类似本地客户端软件的顶部菜单栏，通用的“文件、编辑、视图、排列、图表、调试、帮助”菜单都放在了顶部任务栏，符合用户交互习惯，缺点占用面积较大。
与Raydata结构一样，同样有类似设计软件Figma的Page（页面）与Layer（图层）的关系，森大屏把图层放在画布底部栏，而大纲放在组件库的左下角位置。可能考虑不占用过多面积而折叠在左下角，但缺点也很明显，层级较深，难以找到大纲中的画布元素，对新手小白不太友好。通过画布底部栏切换图层，这里图层也是分2D和3D，还可设置图层为全局图层，即预览大屏时跳转任何地方都始终显示该图层，可减少重复劳动设计。
蓝图和代码二开也位于画布底部区域，同DataV，森大屏也有蓝图功能。底部有蓝图和代码二开的切换按钮，方便用户链接交互事件和调试二改组件的时候，不完全遮挡画布，让用户更易感知当前所处位置和状态，无需来回切换页面而增加操作成本。
界面图标表现方式同DataV，只使用了单色线性图标，让整体界面表现得更简洁、轻量化，不赘述。画布外区域使用了点平铺的背景与画布做出层次区分。
上篇简述可视化行业的市场分析，了解到国家政策如《“十四五”大数据产业发展规划》大力支持可视化行业的发展，可视化行业解决企业痛点，助力企事业单位进行数字化转型。随着数据可视化行业的发展，可视化报表分析工具逐渐衍生出更利于辅助分析的可视化大屏工具，随后进行桌面研究、问卷调查后，筛选出4款主流工具（DataV、Raydata、EasyV、森大屏），分别对它们的结构层、框架层和表现层进行拆解分析。
设计师在了解和体验工具型产品时，也要对其行业有一定的思考，这样更有利于了解业务、用户以及产品。下篇接着讲主流工具（DataV、Raydata、EasyV、森大屏）的功能体验，浅谈可视化行业未来的探索和思考。
那么，下篇再见！
如何让自己的产品在保证基本的可用性和易用性的同时，还能让界面看起来柔和、更富有亲和力？一个产品能留住用户的虽然是内容本身的质量与吸引力，但一个小小的细节却能够阻止用户的流失，成为内容转化的最后一道防线，让人眼前一亮，值得借鉴。
体验目录：
01. 【剪映】化繁为简，突破性的C端深度编辑交互界面！
02.【剪映】组合操作，简化界面跳转的“批量编辑”
03.【必剪】轨道按钮文案自适应滑动跟随
04.【剪映/IOS】首页新增（试试看）教程专区板块，快速入门软件
05.【剪映】“剪同款”功能，让用户快速出片
06.【剪映】上滑升起列表，让用户查看选择更加直观
07.【剪映】不同类型的模块，分区展示
08.【剪映】选中特效后，自动播放（特效预览效果）
09.【剪映】滤镜功能“单行浏览”的原因以及必要性
产品体验：
在此前，用户想要对视频进行剪辑操作，用户大多都需要使用电脑的Ae、Pr等剪辑软件，此类软件体量大，操作门槛高，而且需要有电脑的存在，在人手一台智能手机的今天，剪映等专业剪辑APP的出现，填补了用户需要在手机上进行视频剪辑的需求空白。
剪映的UI交互界面，既保留了Ae、Pr等专业剪辑软件的界面特点（画面轨道，音频轨道），也大大的降低了剪辑软件的操作门槛。
剪映的UI交互精明之处在于，它将专业剪辑软件的复杂，位置隐蔽，但又常用的剪辑操作。「整合」成为底部一个个显眼的功能图标，并且用极为精简易懂的文案，对功能进行了一个充分的描述。这一举动，大大降低了用户对剪辑软件复杂功能的理解门槛，用一种整合式的思维，提供功能给用户合成使用。这简单易懂的交互体验，也大大提高了用户的黏度，忠诚度。让小白用户接触了剪映后，再也无法回到Ae、Pr了。
交互思考：
在AI人工智能浪潮下，一切机器辅助，机器完成，需要人效的地方越来越少，在这大背景下，我们软件的用户只会变得越来越懒。
在新时代的背景下，我们UI、交互设计师，需要一种宝贵的「化繁为简」能力，在不影响最终呈现效果的前提下，将一个软件的交互体验，文案、功能理解，以及功能使用操作做得越简单，用户的黏度，忠诚度就会越高。
一个工具类APP何为「好用」？也许就是像剪上映一样，“化繁为简，成效依然”
产品体验：
在剪映中，识别字幕的交互逻辑，是自动识别所有视频片段的语音，并且插入时间线中，识别字幕是【批量进入时间轴】的。所以想统一进行编辑，得一个个反复选中，然后逐一检查，这种累人的交互体验，让用户用了第一次就不会想用第二次。
剪映推出了「批量编辑」交互功能。
语音识别后，用户点击其中一个识别字幕，底部第一个功能就是「批量剪辑」功能，点击后，可以一键编辑全体的识别字幕内容，减少了用户调整识别字幕是的操作交互时间，增加了用户操作效率
设计思考：
在产品的功能交互设计中，不妨使用剪映的「整合思维」，将一些重复性高，标签统一，可统一操作的元素整合在一个功能中统一编辑，减少用户的操作切换与跳转，增加用户的交互体验与操作效率
产品体验：
在必剪中随着用户左右移动，轨道按钮的文案也会跟随移动，让用户无论滑动到何处，什么位置，都能清晰的知道轨道的应用名称，而不会出现混淆的情况。最大程度上，减轻了用户的理解成本
设计思考：
当我们的图标，功能板块，或者某些重要信息，被用户左右、上下滑动导致超出屏幕展示区域，用户想回头找到这些元素，就得重新滑动到对应位置，走一趟“回头路操作” 。这对用户来说其实是不便捷的，对交互设计来说，是不聪明的
我们可以利用【必剪】的文字跟随交互，来举一反三，让一些重要的功能，信息区域，随着用户的滑动而自适应跟随，最大限度地保证用户他不错过这些重要的功能、信息。
产品体验：
在用户（特别是大龄用户），在初次使用【剪映】这种有一定入门难度的APP的时候，其实都是感到陌生的，新手指引虽然能一定程度解决此问题，但是新手引导只能在第一次打开APP时展示，而且新手指引有非常强的局限性，它只能告诉能这功能要怎么用，而无法告诉你这功能的使用场景。
所以在首页中新增一个软件使用技巧、教程专区，可以让有需要的用户第一时间观看课程，入门软件，而且课程用户可反复观看，不像新手指引般一次性展示。
这种交互体验，大大减轻了用户入门软件的难度。
设计思考：
在我们设计的产品是一个工具型软件，且有一定入门、使用难度的时候，不妨参考一下【剪映】的首页+软件使用教程 的交互思维。
用最低成本教会用户如何使用这个软件，而且展示位置是每次打开APP时都会看到的首页，不用担心一些粗心的用户错过。
产品体验：
在剪映Tap栏中，有一个 “剪同款” 功能，选中对应的视频模版后，填入自己相册的素材，听过自动剪辑，特效覆盖，自动填充文字、BGM等一系列操作，支持用户一键快速成片。
设计思考：
在流量为王的时代，内容输出效率就代表了一切，剪映的 “剪同款” 功能，就是让用户的内容输出效率大大提高，将输出内容的过程简单化，无脑化，用户无需再去想用什么创意，视频用什么BGM，以及视频特效如何制作，这些都由APP的模版设计师帮你搞定，用户需要做的，就是提供出自己的素材即可。
这给予了我们产品设计师一个启发，在我们设计产品时，是否也能关注一下，急需内容输出，但内容输出困难的领域呢？也能把一些可自动化实现的步骤（如特效，BGM，字幕等等），交给系统，用户只需参与拍摄或提供一小部分素材，即可生成一条优质的内容。解决用户输出内容痛点，从而留存用户数量，从而实现用户量变现。
产品体验：
在剪映APP中，一些展示选择列表的功能中，用户上滑，列表都会随之升起，让用户可以更直观的查看选中其中内容，大大增加视觉传达效率。
让用户不会被窗口高度限制，更高效地浏览、选用列表中的元素，增加产品功能成效效率
设计思考：
当我们的浏览窗口，因UI布局高度受限时，设计师可以通过【窗口随着滑动响应移动】的交互方式，使得界面UI交互更多变幻，更为灵活。
产品体验：
在剪辑APP中，难免会有许多种类不同，作用各样的模块，但是剪辑轨道UI展示的空间有限，如果没有分区思维，那么整个剪辑轨道将会变得杂乱不堪，用户用久了看到各种轨道模块，也会疲劳过载
而剪映提供的UI解决方案也非常值得参考，将各种不同种类的效果轨道模块，分区展示，在用户点击【特效】前，剪辑轨道不展示所有的【特效模块】，在用户点击【特效】功能后，才展示对应的【特效模块】轨道
设计思考：
在我们面对多种不同类型，但是作用相同对象的作用对象时，利用交互思维，在UI界面上进行视觉分类很重要，否则你整个APP的操作界面将会杂乱无章。
剪映给了我们一个很好的参考，就是将不同种类的对象 【分区展示，分区管理，分区操作】，最大限度的保证交互界面的简洁舒适，且分类也能让用户更好的“点对点”进行操作，节省寻找对应操作对象的时间，所以，分类思维 是目前作为交互设计师的一项必不可少的技能了。
产品体验：
在剪映APP中，当用户选中特效，系统会自动播放【特效预览效果】，且自动暂停（如特效时长3s，那么系统播放完3s特效效果后会自动暂停，不会继续播放）
用户可以直接了当地查看特效与画面融合的效果，而不用选中后，再点击播放预览效果，觉得效果不满意，还得反复切换。这种交互方式，大大节省了用户的选择模版时间，让其成为（选择+预览=选中） 的高效交互流程
设计思考：
在我们设计一些需要实时预览的功能时，我们不妨参考一下剪映的（选择+预览=选中）的高效交互流程，让用户免去反复操作预览，重复选择的无效交互，提升用户在工具型APP的内容输出效率
产品体验：
当用户在剪映中唤起滤镜功能列表时，难免会感到惊讶，以及提出疑问：“为什么剪映要用单行浏览这种低效的交互方式？”
但是只要你仔细思考，并付出实践你就会明白，剪映在滤镜列表中，使用单行浏览的原因。
因为用户对滤镜的选择，是出于此滤镜的画面效果，所以展示滤镜效果时，滤镜效果图的比例大小是否清晰显得尤为重要，所以，剪映牺牲了一些浏览效率，但是大大保证了用户对此滤镜的浏览精读。
另外，滤镜列表不同于特效列表，具有大量重复图片填充。滤镜几乎每张填充的图片都是有所不同的，所以使用多行列表式排列，在多种不同颜色，不同风格的图片填充下，画面会变得杂乱不堪
设计思考：
当我们遇到，填充图片风格各异、或者注重展示画面的列表设计时，可以参考剪映，牺牲一下浏览效率，保证浏览舒适度，精读的设计方式，来防止我们设计的列表在视觉交互上显得杂乱无章
作者：坚行 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
追波年度最佳作品来自大家最熟悉的UI8团队中的Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。
为什么看似平平无奇的作品却能获得追波年度最佳作品呢？既不是C端也不是纯B端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年追波设计流行趋势之一。
MetroUI是Windows8的界面设计语言，在2010年至2013年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动To B 、To G 的发展元年，通过几何色块（MetroUI）实现B端产品与C端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。
最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现B端设计重功能和交互体验，视觉点到为止的设计理念。
下面我们来欣赏年度最佳作品里面的流行趋势吧。
字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。
通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我Love你”、“我ai你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。
在标题文字上添加曲线来突出重要文案是2021追波最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。
除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。
多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。
多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。
B端设计的火爆带动了B端相关模块设计，更多的人也愿意尝试B端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于PC屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。追波的B端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。
仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。
复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是B端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。
B端C化是B端产品设计的视觉表现力慢慢往C端产品设计的视觉靠齐，国内B端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B端产品也开始移动化、智能化，国内主流还是通过小程序、H5来现实B端产品C端化。
轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。
轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。
为什么人加色块的组合方式能流行起来？还是B端行业流行带动的。B端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。
当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。
这种风格更适合大公司，国内的一些手机厂商OPPO、VIVO等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下UI扁平化的设计趋势。苹果Mac OS Big Sur系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三维彩色玻璃的视频教程可以在B站搜索“透光艺术-C4D创建彩色玻璃的4个技法”，完全能满足UI设计师。当然还有一个好消息就是Mac用户可以享有OC一年免费的使用权，具体安装购买方法可以上“某宝”就可以轻松搞定，真香。
轻拟物这几年一直流行，在UI设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如B端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。
简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在B端产品界面中更加需要简洁设计，我们最熟悉的Sketch软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。
几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B端产品视觉设计C端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年追波B端产品的视觉设计一定会更上一个台阶。
几何图形另一个场景化的地方就是品牌，作为一名UI设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。
暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。
在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome插件）用来测试界面的对比度。
为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在B端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从0到1搭建B端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。
产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。
插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。
几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。
线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。
界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C端产品微交互和动效已经很成熟了，一部分功劳来自iOS系统原生自带的效果。B端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。
Mg动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。
MacOS Big Sur系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。
为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更佳出彩。
P4D是PS加C4D的设计表现技法，也是视觉设计的最后一个环节，通过PS对C4D的渲染图片进行调色，利用PS的调色技巧可以很好的解决C4D打灯光的瑕疵，还可以利用PS强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过PS的后期合成来实现，这也是P4D的强大之处。
卡通IP设计最近三四年技术的迭代已经慢慢的走上成熟，卡通IP也从传统的纯PS手绘技法，转到C4D建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。
卡通IP火的本质更适合做营销，相比于品牌或Slogan，卡通IP具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通IP已经是互联网B轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。
对于UI设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。
C4D三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中C4D软件对于域、动力学还是有一定的优势。
作者：水手哥。 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
设计过程被描述为多个阶段，每个阶段都包含不同的活动来完成该阶段，它没有统一的标准流程，每个公司和设计师都有自己的流程版本。
尽管存在多个流程，但一般流程和阶段类似于以下内容:
了解问题：初步了解问题。观察、采访和倾听用户。
定义问题：解释和定义要解决的问题。
构思：通过头脑风暴产生尽可能多的想法。
原型设计：构建原型并与其他人分享（ 再次缩小解决方案空间，为实验阶段 ）。
测试：测试可能的解决方案、实施、改进或重新设计。
传统的问题解决采取有条不紊而又科学的形式。该过程从一个问题开始，定义要采取的步骤以及达到解决方案的工具或方法。
设计思维是一种创造性的策略，可以产生创造性的未来结果和/或创造性的问题解决方式，它应该被认为是一种以解决方案为中心的思维策略。
它通常被描述为一种创造性、主观和感性的对许多大型组织的分析逻辑（ 布朗，2008 年 ），或作为分析和创造性推理模式的组合（ 邓恩 & 马丁，2006 年；利特卡，2015 年 ）。
设计思维来源于常规问题解决方法，常规问题解法是设计思维的基础。
从解决问题到设计思维，Liedtka (2013)
结果发现，设计思维实际上也是一个解决问题的过程，而不仅仅是一个创新过程（ 利特卡，2013）
一个例子是，丰田采用设计思维从头开始分析其西海岸的一个客户联络中心，在重新设计过程中，组建了一个由一线呼叫代表、软件工程师、业务主管和变革代理组成的跨职能团队，这一举动最终改变了客户和员工的服务中心体验。
我们每天都会遇到问题，但是当我们解决同样的问题时，它们就成了例行公事（ 似乎已经忘记它们是问题了 ），我们甚至都没有意识到正在解决这些问题。例如，我的办公室在 30 分钟路程之外，该怎么到达那里？开车、坐火车或巴士到目的地；除非车子轮胎被刺破，否则你就需要弄清楚如何到达办公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 与 Roger Martin 共同创造了特定术语：“设计思维”，并将多年来酝酿的方法和想法封装成一个统一的概念。
设计思维是以人为中心、开放式、基于问题的方法论。这种方法最初是为了改变工程教育中的教学方式，而工程师处理和解决问题的方式有其设计思维的基础。
设计思维一词可以追溯到 1987 年 Peter Rowe 的著作：“设计思维。” 他描述工程师和建筑师处理问题的方法有很大不同。
90 年代初，认知科学家 Don Norman 加入 Apple 团队，担任他们的用户体验架构师，这使他成为第一个在职位中包含 UX 的人。他提出了“用户体验设计”这个术语，因为他想“涵盖人们对系统体验的所有方面，包括工业设计、图形、界面、物理交互和手册。” 从那时起，这些领域中的每一个都将用户体验，扩展到了自己的专业领域。
设计思维在解决“棘手问题”时特别有用。
棘手问题的特征
“棘手问题”一词是由设计理论家 Horst Rittel 在 1972 年创造的，用来描述本质上非常模糊 \ 特别棘手的问题。棘手问题，有很多未知因素，没有确定的解决方案。问题或解决方案可能与另一个棘手的问题有关，因此这是一个需要设计思维的持续过程。贫困、饥饿和气候变化是一些现代的棘手问题。
设计主题的范围是普遍的，因为 设计思维可以应用于人类经验的任何领域。
它可以用于：
符号和视觉传达：这包括平面设计的传统工作，如排版和广告、书籍和杂志制作、科学插图、摄影、电影、电视和计算机显示。
材料：这包括对日常用品的形式和视觉外观的传统关注 —— 服装、家用物品、工具、仪器、机械和车辆。
人类活动和组织性服务：包括对物流的传统管理关注，结合物质资源、工具和人类低效的序列和时间表，以达到特定的目标。
复杂的系统或环境：生活、工作、娱乐和学习。这包括系统工程、建筑和城市规划的传统关注点，或复杂整体部分的功能分析及其随后在层次结构中的集成。
设计思维起源于设计师的培训和专业实践，但这些原则可以被每个人实践并扩展到每个活动领域。（布朗，2013 年）
在企业中，设计过程可以为企业环境中的问题解决带来创新思维。它还可以用于医疗保健，通过向护士、医生和管理人员教授设计思维技术，我们可以激励相关从业者贡献新的想法。
不管是什么设计，理解和研究问题是必不可少的，因为我们能够从其出发，从而进行以用户为中心的设计。
设计思维的最早阶段是搞懂你能带来的情感价值。设计思维方法迫使你停留在提问与质疑阶段，而不是准确定义出问题后进入下一阶段。我们都有过快进入解决方案模式的倾向，所以设计思维方法迫使你真实地存在于这个不清楚、有时还非常混乱的时刻，从而使你对要解决的问题产生更好的理解。（利特克，2013）
传统的问题解决涉及提出一个解决方案，但设计思维首先使我们发散，试图为问题生成各种可能的替代解决方案。然后让我们进行收敛性思维，缩小多种可能性，找到单一的最佳解决方案。
根据利特卡和奥美 (2011) 的说法，设计思维的全部意义在于学习一种新的、系统的解决问题的方法。正如我们思考创造力一样，即使是设计思维也可以通过实践来教授和改进。
设计过程从来都不是线性的，它由多次失败和迭代组成（布朗，2018）。
首先，设计师试图将问题与过去的类似案例联系起来。如果这种方法不能提供任何解决方案，下一步就是使用知识和创造力作为一种实验思维形式来产生新的想法。使用决策矩阵对这些想法进行评估，从而会产生被进一步分析和测试的解决方案。如果成功，它将被实施。如果不成功，则需要重新表述问题，并重复该过程。这是一个迭代过程，即循环方法。
这一持续不断的重新再设计过程，源于和客户亲密接触的洞察。
学习设计思维不仅仅意味着学习一套新的工具。它还意味着：学习收集和分析大量数据；学习挖掘对象可能的形态而不是自主认为他是什么；学习管理不确定感，以及与许多新的伙伴合作（ 利特卡和奥美，2011）。你可以进行的研究类型分为三类：生成性研究、评估性研究和验证性研究。
一种常见的表述 —— 实际上是设计思维的另一种视角 —— 即设计师应该预料到会“很快失败或经常失败”（布朗，2009）。
当过程早期发生故障时，例如被拒绝的原型，实质上它可以为有效解决方案提供关键见解。这种观点与传统的先形成理论，再检验正误的方式相矛盾。
Airbnb、Braun 和百事可乐等多元化公司都在 采用设计思维并将其作为核心战略。例如，IBM 为全球旗下的 44 个设计工作室聘请了 1600 名设计师，并且正在培训数以万计的设计师员工建立深度创新能力 ( O'Keefe, 2017 )
设计思维为我们解决问题添加了以人为本的元素。当我们试图通过牢记人们的想法来解决问题，并使用基于直接观察乃至访谈的研究时，我们便会捕捉到与消费者需求一致的意外见解和创新。
它有助于将成功的产品更快地推向市场，最终节省企业资金。
IBM 的健康和人类服务组织的设计思维实践，通过有效使用设计和设计思维帮助企业将缺陷数量减少了 50% 以上。这种更高效的工作流程导致计算出的 ROI 超过 300%。
由于复杂的问题从来不能被所有人完全理解，因此在尝试设计解决方案时，处理歧义和多个并发的思路方向的能力是至关重要的素质。
设计思维通过综合和归纳思维，帮助实现质的飞跃。它允许通过解构来测试约束，并允许通过多样性思维和批评思维，来拥抱和探索歧义。
消费者通常不知道他们有什么问题需要解决，或者他们无法用语言表达出来。只有经过仔细观察，设计者才能根据真实消费者行为中看到的东西来识别问题，而不是简单地根据对消费者的想法来确定问题。这有助于定义模棱两可的问题，并找到解决方案。
该方法鼓励“跳出框架思考”（“疯狂的想法”）；它蔑视显而易见的事物并采用更具实验性的方法。
在早期的流程阶段鼓励大胆的想法，以产生创造性的解决方案。使用它是为了让设计师可以尝试开发新的不受约束的思维方式，或对常见问题的创新解觉方法。
根据大多数设计学院的说法，具备特定特质的人能够更好地发挥设计思维的作用。
同理心：从多个角度想象世界 —— 同事、甲方客户、实际使用者和消费者的角度。要成为更好的同理心，必须倾听和观察他人的行为，注意并获得洞察力。
综合思维：重要的是不仅要有分析能力，而且要能够提出新颖的解决方案，还要凭直觉。
乐观：除非你相信有解决方案，否则在遇到挑战且解决方案遇到瓶颈时，你可能会放弃。
实验主义：重大创新并非来自渐进式调整。设计思想家以创造性的方式提出问题并探索限制因素，并朝着全新的方向发展。
协作：产品、服务和体验日益复杂，因此必须拥有一支具有不同背景的团队，以帮助从多个角度看待问题。
当我们想到一个问题的多种解决方案时，对我们解决问题会非常有帮助，因此“功能固定性”阻止了我们以新颖的方式使用旧工具解决新问题。想要摆脱功能固定，首先是要让人们可以使用“改造后的衣架进入上锁的汽车”。这也是盗贼第一次可以用信用卡撬开简单的弹簧门锁。
为了帮助设计师利用文科和技术理论，整合多个领域的知识以找到创新的解决方案，我们采用设计思维来获得洞察力。该方法侧重于可视化和操作，因而帮助我们更容易地了解实际解法，而不仅仅是理论模型。
第一批美国公司在 2000 年代初期开始实施设计思维，这一概念引起了德国投资者 Hasso Plattner 的兴趣，他于 2006 年资助创建了两所设计学校（d.schools），其中一所位于波茨坦大学（德国），另一所位于美国斯坦福大学。由于两所学校都成功地为大型组织提供了高管设计思维培训，因此该研究重点关注这些国家，以寻找早期实施者。
设计思维通常涉及希望参与整个设计和开发过程的庞大利益相关者团队。
观点、才能和经验的多样性被认为是注入新思维的部分重要来源。多样性确保通过融合不同的观点、技能和知识来产生创意（卡振思，2018 年；萨梅和德拉赫-扎哈维，2013 年）。设计思维的协作方法和工具可帮助团队以积极的方式利用他们的差异。
决策是平等的，因为每个成员的意见都被征求和使用（卡尔格伦等，2016）。
当 IDEO 去 Apple 展示他们的鼠标时，它不是什么花哨的设备，而是一个用胶带粘起来的原型。
低保真原型制作起来既快速又便宜（ 想想几分钟和几分钱 ），但可以从用户和同事那里得到有用的反馈，这符合快速验证、廉价试错的原则。为每个想法投入尽可能少的资源意味着前期投入的时间和金钱更少。此外，将多个原型带到现场进行测试为用户提供了比较的基础参考，同时也有助于揭示某些需求。
为了创新，设计思维意识到认知和行动对创新过程很重要。认知包括接受度、乐观和创造性的信心（ 凯莉 & 凯莉，2013；郑，2018），而行动包括快速原型设计、旅程地图和假设浮现（ 假设浮现：assumption surfacing，这是一种评估技术，涉及写出潜在的假设和反假设。）（ 卡尔格伦等，2016；利特卡，2015）
如果领导层不欢迎风险、模棱两可和风格的改变，实施起来就会变得更加困难。它会被管理者“质疑”其具体指标
沃尔特斯 ( 2011 ) 声称，由于设计思维的模糊性，它与组织文化相冲突。
据受访者称，在日常业务中使用设计思维之所以不会是最优选项， 因为它是资源密集型的，增加了工作量。（ 丽莎等，2016）
在医疗保健等规避风险的行业和公司中，“经常和早点失败”的方法被认为是非常困难的。
许多设计师反对设计思维这一观点，设计思维不仅关乎一个过程，而且关乎改变思维过程并提高人们可能提出的解决方案的创造力。
“设计思维”的推广已被大型全球公司用来增加业务。不过，在更广泛的设计世界中，我甚至会说“设计思维”的过度宣传导致了所提供设计质量的下降。—— Yasushi Kusume
弗吉尼亚理工大学科学、技术和社会助理教授 Lee Vinsel 在《设计思维运动是荒谬的》中写道，“归根结底，设计思维与设计无关。这与文科无关。这与任何有意义的创新无关。如果这意味着重大的社会变革，那肯定不是关于“社会创新”。这是关于商业化的。”
观察人们的行为以及他们如何与环境互动，可以为你提供有关人们想法和感受的线索。
你可能认为你知道问题所在，但只有通过观察才能了解消费者真正需要什么。
宜家派设计师到人们家中，观测他们的互动行为来了解他们的需求。这将使设计者能够推断这些经历的无形含义，以发现洞察。这些洞察提供创新解决方案的构思方向。而事实上，最好的解决方案来自于对人类行为的最佳洞察。
Good Kitchen 是一家为老年人和体弱者提供膳食的社会服务机构。起初的问题似乎是设计不当的膳食菜单。然后设计思维揭示了无数问题，所有问题都源于服务本身的性质。因此，经由对服务进行了彻底改革的之后，最终提高了客户和员工的满意度（利特卡，2014）
作者：用尽晴天来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
对话框是一种重要的交互方式，主要用于完成信息传递。对话框很常见，但并不见得每一个设计师都可以百分百地弄明白对话框这个概念。这篇文章是对「对话框」的一个简单梳理和总结，希望可以解决大家心中的一些疑惑。
01
了解对话框
对话框是叠加在应用主窗口上的弹出式的窗口。对话框以对话的方式让用户参与进来，在对话中它给出消息或要求输入。
当用户完成消息的阅读或者作出选择后，可以取消或者接受该对话框，之后，这个对话框便消失了，把应用的主窗口交还给用户。
关于对话框的概念，以下是百度百科的解释：
对话框越来越广泛地被应用于软件、网页、以及移动设备中。它可以保留用户当前进程的情况下，指引用户完成一个特定的操作 。
按照对话框的交互方式，可将其分为「模态[1]对话框」和「非模态对话框」。我们可以把他们看作是两个小家族，模态家族的人比较强硬，而非模态家族的人相对温柔一点。两个家族的主要区别：是否强制用户对其进行回应。
模态对话框：是位于浏览器的主页面核心区域，需要用户对它做出相应交互，模态才会消失。而对话框会因为自身的吸引程度、停留时间、信息量承载多少被划分为多种对话框类型进行区分，常见的对话框分别为：普通对话框、内嵌表单对话框、分步表单对话框、文件选择对话框、复杂信息展示对话框。
△ 何时使用模态对话框
1）在重要的警告时使用，避免出现严重问题、或修正已出现的问题。
例如：用户录入信息后未保存就要关闭时，弹出模态对话框提示用户保存。
2）在需要用户输入信息或进行某操作，才能继续当前流程的时候使用。
例如：在使用Canva资源网站时，点击“上传”会弹出模态化的登录/注册窗口，引导登录/注册后使用。
3）用来将复杂流程拆分成简单步骤。
例如：Teambition-分步骤的模态对话框式创建项目。
4）用来获取信息，该信息可大大减轻用户的后续操作/精力。
例如：在转账场景中，如果先复制一个账号，打开手机银行APP（以招商银行或平安口袋银行为例），系统会通过模式对话框询问用户是否向这个账号转账，这样的设计做到了预判用户行为，节省用户后面的操作成本。
非模态对话框：与模态完全相反，它更加温和，不会强制打断用户正在进行的现有流程，对用户的干扰比较小。通常这类对话框只会在屏幕上短暂停留，几秒就会消失，也因此用户容易忽略它们的存在。因此非模态对话框不适合展示重要信息、不能承载大量文案，常见的类型有：通知提醒、全局提示、警告提示、气泡卡片、文字提示。
△ 何时使用非模态对话框
1）在获取与当前流程不必要信息的时候使用。
例如：平安口袋银行和平安数字口袋采用气泡卡片展示更多功能或引导用户登录。
2）不打断重要流程中使用。
例如：在平安口袋银行APP中购买理财时，如果遇到疑问的话，不会弹出框提示让客户咨询投顾，而且采用气泡框形式提示，不打断用户购买。
简单来说，两者的优缺点见下表：
02
从前面讲到的定义来看，对话框最主要的目的是：传递信息。那么从目标导向的角度来看对话框，对话框要传递的信息的常见应用场景主要有以下五种：
属性对话框是向用户呈现或让用户改变所选对象的属性或者设置。一般来说，在属性对话框中，用户可以修改当前的选择，也可以设置应用程序的全局属性。该对话框适用于非频繁操作和或仅需要设置一次的属性，属性对话框常见在一些设置、详情中。
例如：Windows 11系统的设置界面，可设置系统的全局属性。
功能对话框通常从菜单中打开，是最常见的模态对话框，只控制单一功能，如打印、文件上传/导入、插入对象或拼写检查。该对话框不仅允许用户启动一个动作，而且也允许用户设置动作的细节，属于模态对话框。
例如：浏览器的打印功能，会弹出模态化的打印窗口，用户可设置打印的细节。
例如：飞书的文档导入功能，使用模态化对话框，引导用户选择文件类型或进行批量导入操作。
进度对话框是由应用程序启动的，而不是由用户请求而启动的。它们向用户表明当前应用正在忙于某些内部功能，其他功能的处理能力可能会降低。
每个进度对话框都应该向用户清晰地展现如下信息：
例如：使用Axure软件导出html文件时的进度提示，既提醒用户当前Axure正在运行，又告知用户当前文件导出进度。
例如：使用Sketch软件导出文件时的进度提示
通知对话框将一些重要信息报告给用户。来源可以是一些触发的事件，也可以是其他用户的通知。
常见的有通知中心对话框，处理完成某个操作的告知等等。
例如：花瓣的通知提醒
例如：脉脉的隐私政策阅读提示和汽车之家的开启通知提示，均采用模态对话框方式。
公告对话框，和进度对话框一样，由应用程序直接启动，不是由用户请求发起的。公告对话框有三种：错误、警告、确认。
这种对话框通常不会要求用户填写什么，只会询问你“真的要进行吗？”或者告诉你一件事情。所以在这种对话框上，一般只会有只有[取消]和[确认]，或者[OK]。
属性、功能、进度对话框，是用户主动请求的--它们为用户服务。但是，应用程序发起的公告对话框--它们为应用程序服务，常常会牺牲用户利益。由于公告对话框比较常见且常常牺牲用户利益，那么我们怎么把这些讨厌且无用的公告对话框直接铲除掉，换成更加友好、能给用户带来真正帮助的交互方式呢？接下来我们来一起看看怎么让公告对话框“名声鹊起”。
03
我们可以从应用本身和对话框本身着手提供友好的交互方式，减少公告对话框的出现频率。
解决用户错误的方法不是指责用户，让用户再认真一些，或者给他们更多的指导练习，而应该优化应用设计，让犯错变得困难。
示例：登录蓝湖时的短信验证码输入框
示例：转账时输入金额的数字键盘，金额大小的位数提示；平安口袋银行的身份证号专属键盘。
示例：输错密码是一个很难避免的错误场景，语雀密码登录支持可见密码，一来是考虑安全问题，二来在用户输错的场景下可以打开眼睛，即可见密码，减少出现错误频率。
示例：在支付宝聊天窗输入一串数字，支付宝发现这个问题后，提供了识别后直接转账的功能，预判了用户的惯性，减少错误发生。
Zoom - 拉会前预设值在加入会议室的界面，提前选择是否在进入会议房间后“不自动连接语音”和“保持摄像头关闭”，有效避免忘记闭麦或者忘记关摄像头就直接加入了线上会议的意外尴尬。
在很多破坏性的操作都会二次进行提醒，让用户确认操作，比如说删除操作。在删除之前都会询问用户“你真的要删除吗？”想一想……你在看到这些提示的时候，是不是眼疾手快地按下那个「确认」按钮？
这种对话框在没有容错处理时，非常容易被我们这种无脑按「确认」的用户酿成大错。比如我“手贱”只是试试这个删除，然后就把某个表几千条辛苦写了一个月的数据删掉了，由此可见系统的容错处理有多么重要。
示例：Windows系统在早期的时候，删除文件时会让用户进行二次确认，但这是完全没必要的，因为删除文件不是真正的删除，还会在回收站里面。
Mac系统：在回收站删除文件将是永久性删除，此时的确认对话框才是对用户有用的。
从对话框本身的设计优化出发，我们可以对话框的使用场景和文案方面着手进行优化设计。
其实什么时候使用对话框、是否使用取决于你要给用户展示的信息是否重要。
例如你在手机上买了一张电影票，支付失败的结果如果用toast展示就会容易被用户忽视。那么等到用户到了电影院才发现自己购买失败，那么用户极有可能当场卸载你的产品。
模态弹框会打断用户当前操作流程，所以「使用对话框要克制」。总原则是：能在界面展示就不用弹框，能用非模态弹框的就不要用模态弹框。总之，重要的信息优先考虑使用对话框。
具体的使用原则有：
如果非要使用对话框，那么请使用友好尊重用户的方式。当我们说到人与人之间的交流时，语言是重要的媒介，而用户与产品之间同样如此。
在设计过程中应始终努力设计出有效的提示性文案，但是, 一定是有比没有要好吗？个人认为也是不必要的，糟糕的提示性文案甚至会破坏产品中最好的用户体验。例如以下几种情况：
因此糟糕的提示文案设计会误导用户在产品中采取不必要的操作, 从而使他们感到生气和困惑，甚至可能会破坏品牌对用户的忠诚度，产生本末倒置的结果， 也给用户带来不佳体验。
所以，语言是使产品更加人性化的主要因素。产品的文案则充当了语言的角色，它可以使用户参与其中，影响他们的情绪，并把这种人机的功能性关系转化成人类的个人情感体验。而这种用户的情感体验才能够真正的彰显品牌个性，从而与其他产品区分开来。
△ 错误提示设计三步法
总结：
对话框可以成为帮助用户完成目标的有用助手，而不是让他们在每一步操守挫败的可怕绊脚石。通过保持对话框的可管理性，并且只有在他们的功能真的属于另一个房间的情况下才调用他们，你将很好地维持用户的工作流状态，保证他们会成功完成任务，并且满怀感激。
蓝蓝设计的小编 http://www.lanlanwork.com