对于我们设计师来说，尤其是现在 B 端设计如此流行的情况下，表单设计细节尤其需要各位设计师注意。今天会分享表单设计中那些你不注意的细节点，必须先点赞收藏了，这些干货知识相信你一定用的上。
比如以登录为例，当你把密码输错后，网站清空你刚刚才填好的表单，是不是非常让你崩溃？删除所有数据对用户来说很烦人，这会让你必须重新输入用户名和密码，即便只是拼错了密码而已。
因此，任何专业的用户体验设计师不仅应该考虑顺利的流程情况，还应该考虑失败时应该怎么办。
错误提示
错误提示应该让用户容易找到原因并方便理解。否则，他们可能没办法解决这些错误。所以对于设计师来说，一个非常重要的目标是要设计出一个易于解决错误的流程。一个错误信息应该能清晰的解释到底发生了什么，如果可能的话，最好也提供解决方案。
左边的错误信息很清晰的解释了发生的问题，右边的错误信息对用户来说非常困惑。
1. 什么时候告知用户发生了错误比较好？
当用户出错后，首先要考虑的事情就是应该在用户填表时提醒还是最后通知用户。错误预警中有三种常见模式：
内联/实时：在输入时或移开焦点后立即提供反馈；
提交后/客户端：当用户点击提交按钮之后；
服务器端：当请求发送到服务器后再返回反馈给用户。
这些方法中的每一种都有其优点和缺点。
2. 内联验证
一般来说，当表单非常短小时用内联验证，因为它允许在内存中的数据仍然最新时更正错误。
你可以用内联验证立即告诉用户哪里错了。
3. 提交后验证
另一方面，当表单很大且需要保持关注时，你希望帮助用户保持专注，而不是通过不断显示错误来打断他们。
4. 服务器端验证
服务器端验证是最不友好的方式，但却为网站提供了很高的稳定性。当需要二次检查用户的数据时，这种方法最有效。
5. 如何提示用户错误？
错误提示告诉用户他们做错了，但是他们究竟做错了什么，要如何修复它？很显然，清楚地说明错误，而不仅仅是显示 Error:90803，对用户有很大帮助。
6. 使用积极语言而不是消极语言
错误提示措辞要使用积极语言而不是消极语言。例如，如果用户遗漏了一个字段，与其说”该字段不应该是空的“，不如说”请填写此字段“。当使用积极语言时，用户不会因为一个错误而受到责备，这能减少用户的焦虑感，减少流失。
7. 必要时提供帮助
在某些情况下，用户无法自己修复错误，他需要额外的帮助。例如，当用户无法登录时，大多数应用只提供找回密码，而没有找回用户名。但事实上，用户名和密码都可能会忘记。因此，在这种情况下，尝试提供所有必要的操作和信息资源来帮助用户解决问题。
标签是表单可用性最关键的组成部分。如果标签不清晰，那么其他元素就算把可用性做得再好也没意义。所以，不要让用户来猜测这里面到底要填什么内容。
用不要用一些模棱两可的词，比如‘数字’可能会让人感到困惑，一定要明确意思。
1. 将标签放在输入字段的顶部
许多研究表明，将标签放置在输入字段的顶部可以帮助用户更快地填写表单，因为它允许用户遵循一条垂直线而不是 Z 模式。但是，如果它占用太多的垂直空间，您也可以使用浮动标签。因此，如果你希望用户更快地填充表单，请将他们放置在字段的顶部。
将标签放置在字段的顶部和使用浮动标签，这两种方式都很有效
2. 将标签放在输入字段的左侧
另一方面，当你询问用户比较复杂的问题，用户需要更多时间思考问题答案的时候，研究表明将标签放在输入框的左侧会比较好。
3. 标签应该是可见的，无论什么输入状态
无论你用什么方式，确保当用户填完内容后，标签是可见的。因为，当用户需要再次确认表单内容的时候，他们不用删除填好的数据来查看系统需要他们填什么。
4. 减少不必要的输入项
要填的表单越多，用户就不愿意填完它。所以尽可能地为用户减少不必要的输入项。如果实在做不到，可以将必填和非必填的字段区分开，减少用户的负担。
5. 可见性
不管状态如何，字段都应该是清晰可辨的。此外，活动字段和非活动字段之间的区别应该要明显。
用输入字段应该有高对比度，在所有状态下都是可见的
6. 自动激活 PC 端表单的第一个字段
自动激活表单的第一个字段，这可以提高处理效率，避免用户额外点击。
7. 帮用户预先填好
在某些情况下，你可以帮用户预先填好字段。例如，可以很容易地检测到邮政编码，或者某些数值可能是频繁的。在这些情况下，为用户填充字段。
8. 格式
含有大量小数的数字很难读懂。因此，当要求较大的数字时，需要考虑添加格式以支持可读性。例如，在询问卡号时，使用自动格式化:读取 5678-9876-9738-8394 比读取 5678987697388394 容易得多。
此外，当请求需要特定格式化数据时，要包含一个实例，让用户准确理解要填什么。
输入字段的大小应该与他预期的数据大小相对应
10. 为桌面系统设计灵活的表单
在键盘和鼠标之间切换很烦人。在理想的情况下，用户应该只使用一种媒介来填写表单，但有时，这是不可能实现的。因此，如果用户需要多种媒介来填写表单，至少要尽量减少切换。为此，将需要同一种工具的输入组合在一起。
另外，当创建一个网页表单时，要确保用户可以只使用键盘来浏览表单——使用TAB和方向键。
11. 为移动端系统设计灵活的表单
当在移动设备上时，将你显示的键盘与用户必须输入的数据相匹配。我们经常看到需要数字键盘的输入可以很好地实现这一点，但几乎很少有 APP 显示支持输入电子邮件地址的键盘。
输支持通过显示正确的键盘输入电子邮件
下拉框的使用比单选按钮更有挑战性，因为它需要额外的点击来打开它们。此外，用户无法提前看到选项，这可能会让他们感到困惑。因此，如果你只有少量的选项，使用单选按钮。如果选项的数量超过 4 个，下拉菜单的效果会更好。
1. 复选框
通过勾选复选框，用户应该是同意某些内容。我的意思是，他们应该说，“是的，我想要这个”，而不是，“是的，我不想要这个”。不幸的是，我经常看到有误导性的复选框试图在创建账户时欺骗人们订阅他们的产品。当你不想订阅他们的通讯时，你又必须勾选复选框，像这样的伎俩对信誉是不合适的，所以不要动心使用它们。
通过勾选复选框，用户应该同意某些内容，而不是确认他们不同意。
一个结构充分的表单就像一个与用户的良好对话。所以记住这一点，仔细规划结构。
1. 从简单的问题开始
从简单的问题开始，从用户已经很清楚知道答案的问题开始，像名字、邮件这类。然后再循序渐进问稍微复杂的问题，像账户信息之类的。
首先，一个很自然的顺序，当你第一次见某些人的时候，你会找一些比较好切入的问题，比如叫什么名字啊之类的。其次，当用户已经填了一些字段之后，那么之后会增加他填完表单的机会。
2. 创建逻辑信息块
将不相关的信息按逻辑分组。例如，你可以将结帐表单分为“个人信息”和“帐户信息”组，将信息分组可以帮助用户一次只考虑一个主题。
通过对相关信息进行分组，使表单可被快速扫描
3. 单步 VS 多步表单
当你有很多问题要问的时候，你可能想知道哪一个最有效：单步流程还是多步流程。一般来说，单步表单的转化率更高，因为它看起来更小，而且不会劝退用户。如果你询问基本信息并希望用户快速填写表单，单步表单就非常不错。
当用户被要求必须填写更多复杂信息时，多步表单会更好。为了帮助用户在进行多步骤填写时不至于失去耐心，可以给到进度条，提示还剩多少步。
4. 单列 vs 多列布局
一般来说，用单列布局会更好，因为可以帮助用户更好地扫描，也可以尽量减少用户遗漏填写。
但当用户多次填写同一个表单时，他们更喜欢多列表单，因为这样不会浪费时间滚动。一般来说，在 B 端应用中这种多列表单会比较合适。
设计可用的按钮对提高转化率至关重要。如果按钮上的文字内容比较模糊，会容易劝退新手用户。
根据用户按下按钮会发生什么来命名按钮
1. 提高用户的容错率
对于更复杂的表单来说，按钮最重要的一点是，应该有提交和取消表单的单一方法。用户应该至少有补救的机会。举个例子，如果用户点了在线帮助时，他已经填好的数据不应该被丢失。或者，如果用户由于意外点击了按钮，请求不应该被提交。
2. 主要按钮和次要按钮应该很容易区分
为了避免点击错误的按钮，用户应该能比较容易地区分主要和次要按钮。另外，最好不要只依赖颜色，样式上最好有比较大的差异。
让主要和次要的按钮样式上有比较大的区分度
3. 正确的标签按钮
按功能明确地标注按钮。例如，如果按一个按钮可以创建一个账户，在按钮上的文案叫”创建账户”要好过“提交”。
当用户打开表单时，他首先肯定是想要填完它的。尝试帮助他们而不是用糟糕的设计给他们设置障碍。
不幸的是，这里面提到的许多错误，并不需要多么高级的技巧，而是因为设计没有同理心。仔细思考你的设计流程，检查是否能让所有内容对不同背景和专业知识的人都是清晰的。
通常来说，一般要达到以下目的，大多数指导原则都来自这些规则：
用户应该只输入一次数据
用户应该填尽可能少的信息
用户应该只需要记住少量的信息
用户检查和恢复错误内容应该要很容易
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作者：nanaOMO 来源：站酷
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
译者推荐 | 著名的诺贝尔奖获得者赫伯特·西蒙在对当今经济发展趋势进行预测时也指出：“随着信息的发展，有价值的不是信息，而是注意力。”
在互联网中，设计师多是处在执行层。通常我们会去追寻做这个项目的原因和目标，那对于整个互联网时代，设计师如何通过设计手段紧紧抓牢人类最有限却最有价值的注意力呢？这篇文章就是一个向导，帮助你找到方向。
摘要：电子产品正在争夺用户有限的注意力。现代经济学越来越关注人类的注意力以及产品如何吸引用户的关注。
注意力是数字时代最有价值的资源之一。在人类主要历史进程中，获得的信息是有限的。几个世纪以前很多人不识字，教育是一种奢侈。如今我们可以大规模获取信息。任何有互联网连接的人都可以获取事实、文学和艺术（通常是免费的）。我们面对的是丰富的信息，但我们的大脑处理信息能力和以前一样。每天仍然只有24小时。今天，注意力成为了限制因素，而不再是信息。
在深入讨论注意力经济之前，我们首先需要把注意力的定义阐明清楚。注意力的正式心理学定义和大多数人对注意力概念的看法是重叠的。
注意力：选择性地专注于我们目前正在感知的一些刺激，而忽略来自环境的其他刺激。
在平常的话中，我们经常说“请注意”。这个表达意味着注意力的两个重要特征：有限的注意力和有价值的注意力。当我们“关注”一件事，我们会消耗精神资源的预算，相应的我们会减少消耗在其他地方的注意力。关于人类注意力的理论都认为注意力的能力是有限的。心理学家兼经济学家 Herbert A. Simon 将注意力描述为人类思想中的“瓶颈”。他也提到“丰富的信息造成了注意力不能集中”。一心多用的自负是一种谣言：人们不能同时一心多用。比如，人们可能会在看电视时拿出手机，但是如果他们将注意力转移到手机上，他们就会错过电视节目中发生的一些情节。
注意力是我们个人的宝贵资源。这个资源同样受到商业、政治运动、非营利组织、还有无数其他组织的重视，他们都在试图吸引我们去花钱或者花费时间。在1997年，Michael H. Goldhaber 写道，全球经济正在从物质经济转为基于人类注意力的经济。例如很多在线服务是免费提供的，但在注意力经济中，注意力经济是资源更是一种货币：用户用他们的注意力为服务付费。今天，注意力经济的动力促使企业吸引用户在应用程序和网站上花越来越多的时间。创建网站和应用程序的设计师明白，他们的产品是在竞争激烈的市场中争夺有限的用户注意力资源。吸引注意力的目标导致了很多不同设计趋势的普及，例如：
在我们最新的语音助手研究中，我们发现当用户在开车，亦或是他们的手或眼镜很忙碌的时候，经常用到手机语音助手的功能。一个常见的抱怨是，Siri 或者谷歌助手在手机屏幕上显示结果而不是大声读出内容。比如，即使是简单而常见的问路任务，也可能要求司机将注意力分散在屏幕信息和道路之间。
配文：在 iPhone 上问 Siri 得到的查询结果是展示在屏幕上的，用户需要将注意力分散到任务和屏幕的信息上。
同样，智能手机用户的注意力也经常被当前使用的应用程序、网站、电视节目或其他外部刺激所分散。这就是为什么手机上的会话往往比在台式机上的会话短：中断的可能性很高。
为了理解一个设计是否超出了用户的注意能力，需要在上下文中进行研究。实地研究、日记研究和访谈都可以用来了解人们在现实生活中是如何使用该系统的。
许多用户都知道网站和应用程序在努力吸引他们的注意力。在最近的可用性测试中，一个用户在 AllRecipes 网站上看一个关于“如何做煎饼”的视频，当这个视频播完后，网站会在自动播放列表中加入相关视频，我们的测试者没有发现暂停该视频的选项。在视频上出现的唯一选项是重新播放，或开始观看播放列表中下一个视频。
配文：AllRecipe 网站设计了自动播放视频列表，旨在保持用户对网站的关注
当播放列表在排队时，用户评论到“这似乎让我看电脑的时间比我实际需要的时间更长了”。播放列表在每一个食谱视频播放之前展示一个广告——该网站有明确的经济激励措施，可以将访问者的注意力集中在连续的视频上。一些用户对于无法控制花费在设备上的时间感到无助。数字产品的设计越来越吸引人，经常让用户上瘾。对父母来说，花太多时间在科技上的影响尤其令人担忧。吸引人眼球的设计可能会让年轻人养成习惯，当设备被拿走时，他们可能会经历“戒断”。有些用户会调整自身的行为。其中一些调整是有意识并采取了行动的，以限制在线时间。经过深思熟虑的调整包括设置上网时间限制、卸载某些应用程序或使用家长控制。用户还学会以微妙的方式保护他们的注意力。条幅盲目性（Banner blindness）是对大量信息做出反应而产生适应性反应的一个例子。条幅盲目性指的是当广告放在右边栏或页面顶部时，用户往往会忽略广告。这点就很好的说明了用户是如何适应大量信息的。用户也已经适应了移动设备上常见的通知轰炸：他们已经学会忽略其中的许多通知。在最近的一次可用性测试中，我看到一位女士在她的 iPhone 上浏览新的博客。当会话的第一个通知消失时，她向我道歉并问道：“你还用这个录音进行研究吗？”在我向她确保这不是个问题之后，她继续了这个测试任务。在整个会话期间，还有几个通知从这个用户的手机上发出，但没有一个通知打断她的思路。
我们根据目前观察到的未来预测，为注意力而设计的趋势将会继续演变。很多企业将会选择创造更多抓住用户注意力的广告。自动播放视频和不可跳过的广告几乎普遍不受用户欢迎，但它们将继续作为设计特色。在抢夺用户注意力的军备竞赛中，广告将会变得越来越身临其境。主流的社交媒体平台，如 Facebook、Instagram 和 Snap 都在测试增强现实广告。
一些企业将会持续研究形成习惯的设计，来吸引用户越来越多的关注他们。注意力经济拥有一个乐观的未来也是可能的：最近的发展为更公平的注意力经济带来了希望。越来越多的广告采用了分成收入模式，这使得用户可以用他们的注意力（观看广告）或金钱（保持他们的注意力）来支付。
配文：Spotify 允许用户在其广告赞助的服务上免费听音乐，如果用户希望避免令人分心的广告，他们可以直接为这项服务付费
一些企业已经回应了用户关于分散注意力设计的抱怨。Apple 最近更改了通知的设计，可以在 iPhone 上快速连续删除多条通知，还引入了屏幕时间统计功能，允许用户监控他们对点子设备的使用情况。
结论
数字经济的某些事实可能不会改变。在可预见的未来，广告将为一些免费内容提供资金，应用程序将争夺新用户的注意力，而人们的注意力仍然有限。但是，设计师在注意力经济中有一个选择：他们可以平衡业务需求——— 比如对新用户、广告收入和利润的需求——同时尊重用户的最大利益。
原文标题：The Attention Economy
原创作者：Lexie Kane
原文链接：https://www.nngroup.com/articles/attention-economy/
翻译作者：樱桃小丸子
授权获取：张聿彤
文章审核：王翎旭
文章编辑：王鸿飞
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作者：三分设 来源：站酷
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
“仰望星空，脚踏实地” ，做设计需要想象空间，也要有反思和总结的能力。
让我们来看两个毫无关联的产品的界面。
BI产品
团队协作产品
这两个案例展现了如何选用不同的模式以实现不同的目的。
对于BI产品来说，目的是让数据分析更彻底，提高数据分析效率；更好的整合数据，为企业提供报表，做为企业决策的依据；更好的帮助企业管理者管理企业，提高企业实力。
对于teambition来说，目的是轻松记录要做的事，并与伙伴实时同步进展。让彼此清楚地了解项目整体情况及事项优先级，从而完成目标。
基于产品目的我们可以看出BI产品重效率；teambition 更看重清晰以及使用是否轻松愉悦。
而产品的目的决定了它所采用的设计模式也会不同，下面我们再对照界面看下基于目的在界面设计上有什么不同。
BI产品
团队协作产品
BI数据分析类产品的布局多是小部件组成，这样做会方便用户进行多任务处理。界面设计也会相对比较密集，整个界面承载了很多信息。它使用了紧密的间距、紧凑的控件、灵活的布局和排版方式。
设计模式的概念最早是建筑师克里斯托弗 • 亚历山大（Christopher Alexander）在他的开创性著作《建筑的永恒之道》和《建筑模式语言》中提出的。
《建筑模式语言》里面包含了253个建筑设计模式，大的如城市和道路系统的布局，小的如家庭住宅中的照明和家具。
类似地，我们在创建界面时，也在使用设计模式（组件）来解决常见的问题：使用标签页将内容分成几个部分，并表明哪一个选项对应于当前的页面；使用下拉菜单展示可供用户选择相关选项。
标签页
下拉组件
设计模式分为2类：
第一类：功能性模式（组件库）表现为界面上的具体模块，如按钮、标题、表单元素、菜单等。
第二类：感知性模式（视觉规范）则是描述性的样式，以可视化方式表达和呈现产品的个性，如配色、排版、图标、形状、动画等。
功能性模式有点像名词和动词，它们是界面中那些具体的、可操作的部分；而感知性模式则类似于形容词，它们是描述性的。
例如，按钮是具有明确功能的模块，它让用户能够提交某项操作。但按钮上的文字的样式，以及按钮本身的形状、背景色、填充、交互状态和过渡动画不是模块，而是样式，这些样式描述了按钮是什么样的。
唐·诺曼在《设计心理学》一书中说过：系统映像（界面）和用户模型（用户通过与界面交互而形成的感知）之间存在着一道鸿沟。
在设计团队内部也是如此，比如“范围输入框”组件，你能想象它是一个什么样的组件吗？相信不同的人肯定有不同的心智模型，因为这个组件不是常用组件，在ant design、arco.design组件库中也找不到这个名称组件，因为它是TDesign的产物。
而每个公司都会根据自己的产品特性创造一些非常规类组件名称，这个时候就需要在所有参与产品创建的人之间共享。只有产品内部设计语言一致，才能去培养用户的心智模型，这样才能去除系统映像与用户模型之间的这道鸿沟。
例如上面这个组件，每个人都需要知道这个组件叫“范围输入框”，而不是“输入框”或者“数字输入框”。
例如，teambition的目的是“轻松记录要做的事，并与伙伴实时同步进展”。
于是，我们可以去看产品，设计体系在实现这一目标的过程中发挥了多大作用，以及这些设计实践的效果如何。如果视觉、交互混乱，导致无法实现上述目标，那么可以认为这套设计体系是无效的。
上面介绍了设计体系包含的内容，下面我们针对这些内容进行具体的介绍：
做B端的小伙伴应该都知道ant design，但不知道有多少小伙伴有认真的看过ant design的设计原则。 可能有小伙伴会问这个设计原则有什么用，我最开始也觉得没什么用，后来在参与设计体系优化过程中发现这个原则就是金字塔尖。
例如：用户没有填写完表单，那么表单的提交按钮能不能点？是置灰好，还是按了以后再给弹窗提示。
例如：可编辑表格，是放一个笔状icon来提示可编辑，还是采用鼠标触发时出现输入框以及指针变为文本状态。
日常工作中总会在这些细节问题上争论很久，美其名曰“打磨设计”，其实很多时候就是设计原则在团队内部没有达成共识。
为了避免出现上述问题，我们要建立一套基本的价值观和原则。在一些公司里，尤其是在处于初创期的公司里，尝试建立一套共同的准则是很难的。设计原则是无法量化的，因此定义这些原则可能需要多次迭代。
对于原则到底是什么，可能存在一些争议。有些公司的设计原则偏重于品牌，有的偏重于团队文化，有的则偏重于设计流程。
例如，Pinterest的设计原则便偏重于品牌。
Atlassian公司没有分团队或者产品单独制定原则。
他们的目标是在客户可触及的每一点上都体现一些核心的价值观。比如“大胆”“乐观”“实用但不乏味”作为价值观的体现。
不过，尽管各处的价值观是相同的，但体现程度并不一样。
例如，官网就会较多的提现“”大胆”，但产品里面就不会，正如Atlassian公司的设计经理Kevin Coffey所说的，“没有人想要一个‘大胆的’服务支持页面”。
Atlassian 官网截图 https://www.atlassian.com/zh
Atlassian 设计体系 https://atlassian.design/
我们以TED为例。TED的一条设计原则是“追求永恒，而不是追求潮流”。永恒这个词不光体现在TED的界面上，还体现在TED的整个品牌和设计方法上。
这意味着他们不会为了追逐潮流而采用一项新的技术或引入一个新的设计元素。
例如：定义了原则为“简化”（让产品尽可能简单，简单到几乎感觉不到它的存在）。这种原则就是不实用也不可操作的。
怎么能让团队所有人都能理解？
消除无用的部分。每一个设计元素，无论大小，都必须有一个目的，并遵循它所属元素的目的。如果你无法解释一个元素为什么要在那里，那么它便很可能不应该在那里。这样的定义就清晰很多。
再例如：定义了设计原则为“有用”，什么是“有用”？
从需求开始。如果你不知道用户需要什么， 就无法做出正确的事情。去做调研，去分析数据，去与用户交流，而不是做假设。
好的设计原则也能帮我们确定优先级和平衡点。
Salesforce公司的Lightning设计体系的原则是“清晰、高效、一致、美观”。
这些原则的优先级必须遵从以上顺序。“美观”不应该高于“高效”和“一致”，而“清晰”应该始终放在第一位。按照这种方式对原则进行排序，可以让团队在做设计决策时明确哪些东西应该优先考虑。
Atlassian和Airbnb的团队成员被问及他们的设计原则时，他们都能脱口而出，没有片刻犹豫，没有人表现出迟疑，没有人想要去翻看品牌手册里的原则内容。他们为什么能把原则记得这么牢固呢？因为他们的原则足够简单、实用、易于让人产生共鸣。
Airbnb公司的四条设计原则（“统一”“通用”“风格化的”“对话式的”）便深深地扎根于其设计过程之中。
每当设计一个新的组件时，我们都会确保它完全满足四条原则。如果我们没有这一套原则，便很难就各种问题达成一致意见。----Airbnb 首席交互设计师
每个团队建立其设计原则的方法都不尽相同：有的会召开几轮研讨会，有的可能会征求CEO或创意总监的意见。不过，无论采取哪种方式，都离不开下面几点：
从目的开始
TED网站的主要目的可以用一句话来表述：“尽可能广泛地传播演讲。”因此，TED网站的精神和价值观便是触及尽可能多的人群，降低使用门槛，让产品具有很高的兼容性和可访问性。这意味着优化性能和提升可访问性比添加华而不实的功能更重要，清晰的文案比大胆的设计更重要。
寻找共识
如果你仍处在定义设计原则的阶段，那么一个有效的方法便是让团队的一些人或所有人（取决于团队规模）各自回答关于设计原则的问题。例如，在他们眼里，什么样的设计对你们产品来说是好的设计？他们将如何用既实用又易于理解的五句话向团队的新成员解释设计原则？
面向正确的受众
如果搞不清楚设计原则是为谁写的，就一定会写出含糊不清的原则。有的小伙伴说我们领导就喜欢“美观”，那我们是不是把“美观”放在第一位？一定要搞清楚为谁而写。原则到模式
作为一个设计师，定义设计原则可能对你来说也许并不难， 但怎么把原则、品牌价值、组件相结合，怎么体现在设计模型中，这个我觉得是个挑战。
对于 TED 来说，信息的清晰比美观更重要。试图将每个演讲都 提炼成一个短句可能很难，所以有时候标题可能很长。对标题 进行截断是很容易的，但对他们来说，演讲信息的优先级是最 高的。
因此，他们没有选择相对容易的标题截断方案，而是确保他们的设计模式可以容纳长的标题。
功能性模式是界面中有形的构件（表单）。它们的目的是让用户能够完成某种行为（填写表单），或者激励用户完成某种行为。
功能性模式可以很简单（标签⽂字、输⼊框、按钮 ），也可以组合成更复杂的模式（搜索组件）。
标签⽂字、输⼊框、和按钮
搜索组件由标签⽂字、输⼊框和按钮组成
随着产品的发展，模式也在不断发展。包括风格，甚至功能和交互方式，都有变化。然而，它们的目的基本保持不变。
我们用顶部导航举例：
顶部导航是由logo、搜索定位框、文字下拉框、图标功能按钮、通知按钮构成。导航条里的每一个模块都有自身的目的：搜索定位框告诉我们怎么快速找到想要的东西，导航带领我们浏览全局，指引我们到想去的地方，而后面的的图标按钮让我快速触达。
总的来看，这些模块都有一个共同的目的：引导用户快速浏览使用。随着产品的发展，模式也在不断发展。
例如，随着产品功能越来越多，可能会在导航上面新增设置功能，让用户自己去排布常用功能。又如，我们可能会对导航进行重新布局，把导航按模块分类，采用标签按页展示。把模块下面更多功能放到子页面左侧。虽然我们不断的对模式进行迭代，希望它更好的实现各自的目的或者说更有效地激励用户使用。
在设计开始阶段就阐明模式的目的，能避免在产品发展过程中做重复性的工作。
目的决定了其他的一切：模式的结构、内容及呈现。了解模式的目的，可以帮助我们设计和构建更加稳健的模块。
如果说功能性模式是界面中的组件，那么感知性模式则更像是样式——描述组件是什么类型的，给人的感受是什么样的。下面，我们将探讨感知性模式。
设想我们每个人各有一套房子，且每套房子都有以下这些家具：一张桌子、几把椅子、一张床和一个衣柜。
不过，虽然都有这些家具，但每套房子给人的感觉截然不同：可能是因为家具的样式、材料、颜色、纹理不同，或者是床罩的布料、装饰品的样式、房间的布局和灯光，甚至是房间里播放的音乐不 同。
上述这些属性便称作感知性模式。正是因为它们，可能你的房子就像是一个地中海风格的小窝，而我的房子就像是一个仓库。
而数字产品感知性模式的例子包括语气、排版、配色、布局、插图与图标样式、形状与纹理、间距、意象、交互或动画，以及这些要素在界面中的组合和使用的具体方式。
有时，人们将这样的特性视为产品的样式，或称作皮肤，也就是最外面的一层。但要想取得成效，它们必须不仅存在于表面，还必须存在于品牌的核心，并随着产品的发展而发展。
只有这样，感知性模式才会成为让产品脱颖而出的强大力量。
同一领域的产品，哪怕具有相似的模块，它们给人的感觉也是不一样的。感知性模式通过界面传递品牌，并让品牌被人记住。
看下面的图片，你能认出它们是什么产品吗？
这两张图里面并没有太多的信息，你只能看到排版的样式、一些图形和颜色，以及一些图标。然而那些视觉上的线索极具辨识度，所以你仍然很有可能看出它们分别属于什么产品（即钉钉和飞书）。
这些视觉元素通过有意识地反复使用，便形成了模式，这就是为什么我们可以在没有上下文的情况下认出它们。
在模块化的系统中，想要做到视觉上的连贯统一可能是一件很棘手的事情。模块是由不同的人根据不同的目的创建的。而由于感知性模式是渗透到系统中各个部分的，因此它们可以将系统的不同部分连接起来。如果这种连接是有效的，那么用户就会感受到模块之间的统一性。
例如：飞书和腾讯的相同功能的组件感知模式是不一样的，所以两个公司设计体系不能混用。
如果说功能性模块反映的是用户需要且想要的内容，那么感知性模式关注的则是他们直观的感受或行为。
在《网站情感化设计》一书中，作者提出了一 个简单的方法，通过创建“设计角色”捕捉产品关键的个性 品质。以下是一些有助于探索感知性模式的一些技巧。
情绪板是探索不同视觉主题的绝佳工具。可以使用数字化的方式创建情绪版（Pinterest或花瓣都是一种用于创建数字化情绪板的常用工具）。
如果你目前做的产品是需要体现：科技、质感、智能，那上图应该可以满足这些条件，你可以通过这张图与领导进行沟通达成一致，然后从中提炼出一些颜色、元素、材质，这样大方向就不会有太大问题，只需在细节上进行打磨。
定义好了大致的方向之后，便可以使用样式叠片来更加细致地探究多种可能性。样式叠片的概念由Samantha Warren提出，他将其定义为“由字体、颜色等界面元素组成的能传递Web视觉品牌精髓的设计交付物。”
和情绪板一样，样式叠片可以为用户和产品团队提供有价值的讨论点，并呈现他们对特定设计方向的初始反应。
arco.design 首页这张图可以理解为就是样式叠片，把不同的组件样式叠片放在一起比较，有助于准确地找到设计方向。
当功能模式和感知模式建立完成后，我们将它们集成到产品的过程，它们还将进行演变。
因为在真实的界面中，模块、交互、样式之间相互影响下会产生新的问题，这都是很正常的，是典型的迭代过程，这个过程会一直持续，直到设计语言最终形成。
像ant design、arco.design应该都经历过这个过程，只是我们不知道而已，要不然也不需要花费几年的时间打磨后才发布出来。
平衡品牌性与一致性：
过分关注一致性也会扼杀品牌性。矛盾在于，让设计达到完美的一致性无法确保它依然具有很强的品牌性。有时，这样做反而会削弱品牌性——在一致性和统一性之间存在着细微的差别。
《英国公开大学》的创意总监曾说过：“当你专注于产品一致性的时候，打造产品质感的一些重要的细微之处就有可能会丢失。
发展感知性模式需要为设计师赋予打破常规的权力，鼓励设计师积极地探索更多的可能性。好的设计体系能在品牌的一致性和创造性表达之间取得平衡。
小规模试验：
后期如果发现样式无法满足，我们如何将新的样式引入设计体系呢？
可以先进行一些小规模的试验是一种相当有效的做法。如果某些元素的效果很好，我们就逐渐将它们集成到其他界面中去。
例如，在学习者完成一个步骤时，纯功能性的切换按钮缺乏庆祝和成就的感觉。于是，我们用带有圆形样式、弹跳 动画以及勾号图标的按钮取代了先前的按钮。
虽然新的按钮样式受到了学习者们的好评，但它与设计体系的其他元素格格不入。后来，我们开始在网站的其他地方应用圆形图案、弹跳动画和勾号图标。如果不这样做，那么整个设计 体系给人的感觉就是割裂的。
数字产品都是由团队打造的。团队里的每个人都有各自的具体目标，都有各自的截止日期。这就意味着难免会出现草率加入的模式、重复或错误的模块。
我们能确保一个产品即便有多人协作，却仍能连贯、统一吗？ 只要我们团队对自己的设计体系及其运转方式有共同的理解，我们就能做到这一点。
这意味着我们遵循相同的指导原则，我们对品牌愿景的理解是一致的，我们在设计和前端架构方面有共享的方法，我们知道什么样的模式是最有效的，也知道它们的工作原理。换句话说，创建统一的设计体系需要共享设计语言。
许多伟大的建筑物（如圣家族大教堂、沙特尔大教堂、阿尔罕布拉宫）并不是由一位主建筑师在绘图板上费力地创造出来的，而是由一群人构建出来的，这群人对能将这些建筑物变为现实的设计模式有着深刻的共识。
“几组人可以通过遵循一个共同的模式语言，当场构思出他 们的大型公共建筑，就好像他们共有一个心灵。”
——克里斯托弗 • 亚历山大，《建筑的永恒之道》
我们可以用类似的想法构建数字产品。设计语言可以让人们创建出具有整体感的产品，哪怕不同的人负责不同的部分也是如此。
如果一个界面上的元素没有恰当的名称、团队里人尽皆知的名。那么该元素就没有在你的设计体系中成为有效的单元。一旦你给一个物件命了名，你就塑造了它的未来。
例如，如果你给的是一个表现型的名称，那么它将来就会受到样式的限制：“蓝色按钮”只能是蓝色。
例如，如果你给的是一个状态属性的名称：“幽灵按钮”，它的特点是：按钮形状的透明按钮，但有细实线的边框，常用在有色背景上。
仅仅完成命名还不足以建立共享的设计语言。整个团队都应该 沉浸到设计语言中去，让它无所不在。
让设计模式变得可见：
如果有条件，可以在墙上开辟一块专门展示设计体系的空间，将它称作“模 式墙”
让你的设计体系更加开放，人们会感觉你欢迎他们的加入，欢迎他们提出问题甚至做出贡献。
引用事物的名称：
所有语言的共同特点是，只有不停地使用才能让它保持活力。
它需要成为日常对话的一部分：
这就是为什么需要有意识地使用约定好的名称去引用这些模式很重要——无论这个名称听起来有多奇怪。将设计体系作为入职培训的一部分将设计体系的内容作为入职培训的一部分，新员工了解设计体系就会更加容易。当新员工入职时，他们将了解到设计指南是如何创建出来的，这样他们就可以理解为什么以及如何做出决策。在 《英国公开大学》 内部，他们创建了一个入门性质的线上课程，其中有一章专门对模式库进行了介绍，并包含了 一些小测验和小课程，这样可以帮助新员工更好的理解设计体系。
定期组织设计体系会议：
每个人都讨厌开会。但是，如果你希望每个人都跟得上设计体系的发展，那么组织召开设计体系的会议就是必要的。这是所有设计师和开发人员共同专注于设计体系的时间。一开始，可 以每周举行一次，当团队找到节奏之后，可以每两周举行一 次。团队可以利用例会时间就产品的总体模式（如图标、排版）得出一致意见。同时，这也是分享新模块并讨论其目的、 用途及可能遇到的问题的好机会。
设计体系不是一夜之间构建出来的，而是通过日常的实践逐渐形成的。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作者：夜鹰YEAH 来源：站酷
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
对于B端来说，可能很多UI和前端喜欢直接套用Ant Design或Element ui组件规范；因为之前企业要求并不高，但是随着市场和环境的发展，企业对B端越来越重视，这些模版太类同，显然就太烂大街了。随后字节推出Arco Design、腾讯推出企业级设计体系TDesign、有赞推出Zan Design，很多大厂都推出了适合自己产品的模版和规范，给了我们许多借鉴，能让我们快速作出一个不出错的方案。不过企业、市场的要求显然不止于此，我们的设计追求也不止于此。那么我们如何才能摆脱套模版，提高界面的精致度，提升界面的交互体验呢？
为啥要搭建设计系统？设计系统对我们开发团队中谁有指导作用？
◆ 设计系统可以保证我们产品风格的统一性，降低用户对新产品适应时间和学习成本；对UI设计输出效率有很大的提高，在团队协同中可以大大的减少无效沟通，节约时间成本
◆ 在开发团队中，设计系统对UI、交互、前端、测试等岗位的工作都有一定的指导作用
设计原则是传统智慧的沉淀与未来趋势的结合体，能够帮助我们更好的进行设计活动时代在进步，设计原则也必然需要不断的更新以适应发展新的设计原则要求界面更友好，操作更加人性化。
这里我归纳了8条原则仅供大家借鉴学习:
◆ 可用性：有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作
◆ 易用性：易用是首要考虑的因素，能一步解决的事情绝不两步
◆ 统一性：页面风格、色彩、布局等要保持全局统一，不可为了某一功能的美观而去破坏整体
◆ 亲密性：信息的关联性强，距离就要相应的缩短，让他们看起来是一个视觉单元；反之，则距离要加大，要让用户对信息的区域划分一目了然
◆ 对齐性：在界面中，将元素进行对齐，符合用户的认知，引导视觉流向，让用户更加流畅的阅读信息
◆ 对比性：对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
◆ 重复性：相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
◆ 稳定性：没有任何东西比产品的稳定重要，down机再好的产品也是徒劳。会影响到系统稳定的事情不能做
响应式布局，能够适应各种屏幕尺寸及分辨率，确保整体布局的一致性简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。一般采用栅格系统布局，常用栅格一般是16列或24列。
◆ 栅格：是对界面当中元素横向排布的一种模式，主要用于大型区块间距的排列，不适用于图标与文字间隔的小型元素。
◆ 模度：为界面布局的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，我们网格基数设为8，卡片宽度及间距为8n。常用模度：4 8 16 24 32 40 48 56 64 … 1920
◆ 布局：常用左右布局或上下布局
左右布局以1920页面布局为案例：通常B端产品左侧会有一个导航菜单，假设240px,右侧核心工作区域总宽1632px, 右偏移240px ,列数16列，列宽86px, 间隙16px， 左右边距24px; 左边导航和边距固定不变。
上下布局以1920页面布局为案例：通常左右会有一个留白区域，假设144px,中间核心区域总宽1632px, 右偏移144px ,列数16列，列宽86px, 间隙16px。
设计风格说白了就是用户最直观的感受，“商务、时尚、简约、科技感、沉稳、年轻、高端...”?
决定设计风格的因素有这些：
色彩是UI设计的基石，人脑对于色彩的记忆度要高于形态；除了美学之外，色彩还是是情感和联想的创造者。通过对自然的感知和行为，我们通常对色彩定义品牌色板、功能色板、中性色板，以及衍生色。
◆ 品牌色：是体现产品特性和传播理念最直观的视觉元素之一（例如：我们熟悉的政府蓝/党政红/淘宝橙，他们都能直观或间接的传达产品特征属性）
◆ 功能色：遵守用户对色彩的基本认知，保持一致性，不过多的自定义干扰用户的认知体验，提高用户的阅读理解力，功能色代表了明确的信息以及状态，比如正常、成功、失败、警告、链接等
◆ 中性色：主要应用在界面的文字部分、背景、边框、分割线等场景，根据使用场景，通常将中性色被定义为 3 类：文字、线条、背景
◆ 衍生色：B端产品中颜色的应用场景可能很广泛，要考虑它的延展性，按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色
设定统一的字体规范，无衬线黑体中宫更为开放，布白更为匀称，显示效果更为舒适，醒目利于阅读，更利于视觉信息的传达，在互联网时代后期在界面设计中字体样式还是会以无衬线体为主。
◆ 字体家族：根据系统区分Mac or Windows，如果用户使用的是Mac系统可以优先使用Mac默认字体渲染 ；如果使用的是Win，字体兼容性选择顺序（有购买版权字体的可优先考虑），例：
◆ 字号：为了提升用户的阅读体验，满足用户的可读性，更为舒适、清晰，也能保证界面的层次感（结合WCAG 2.0标准），将 PC/Web 端主字体从以前的12px改为 14px。
◆ 行高：为上下文之间提供了呼吸的空间，规范的行高，可以使得界面层次清晰、重点突出
◆ 字体颜色：WCAG 2.0 中将颜色对比等级分为 3 种，A级，AA级，AAA级，等级越高意味着颜色的对比度越高，呈现出来的视觉压力越大。字体颜色数量不建议太多，根据文字主次关系定义3-4个为宜（例：主文字、辅助性文字、提示文字、轻提示/禁用文字）
◆ 字重：字重不建议太多种，2-3种为宜（例：Regular、Medium、Light）
图形中有图片、图标、图表，都对整体风格有一定影响，设定统一的图形使用规范，可以使视觉效果更加和谐
交互，即交流互动，也就是说我们自己通过我们的五觉：视觉、听觉、触觉、嗅觉、味觉来感受其他事物并和他们之间产生信息沟通的过程。在互联网中交互对象个体主要是人和机器，所谓人机互动，相互配合，共同达成某种目的。
◆ 交互方式：保持产品的统一性，同类别的交互不可有不同的操作感受。要符合大众的认知习惯，可创新但不可违背潜意识，例：wab端页面鼠标交互操作一般有下拉、上滑、按压、悬停，移动端一般左右上下滑动、下拉、上拉、双指缩放...
◆ 交互状态：按钮状态变化，页面状态变化，组件状态变化...交互内容确实太大了，我个人也只接触到的也只是冰山一角，只能抛砖引玉，勾起大家思维，相互探讨学习
◆ 引导：引导一般常见5 种：新手引导）、步骤引导、帮助/操作引导、新功能引导、空白页引导
什么是组件？组件是抽象概念,对面向过程而言是对数据和方法的简单封装。对面向对象而言是一些符合某种规范的类组合在一起就构成了组件。它可以提供某些特定的功能。组件出现的原因软件工程中重复、反复出现、普遍的、有相似的问题的出现,导致开发过程中有大量的代码需要不断的重新设计,开发周期延长,开发复杂度增加。需要岀现一种模型通过剥离掉各个问题的特性,抽取各个问题之间的共性。从而在保证代码的灵活性下极大的增加代码的可重用性。组件的岀现就是为了解决这些实际问题的。
在前端眼里，组件通常是指页面上的视图单元，可以说，UI组件是组件的子集。组件库大致可以分为这几大类：
◆ 导航：固钉、面包屑、下拉菜单、下拉导航、电梯、菜单、分页器、步骤条
◆ 数据录入：自动完成、级联选择、多选框、日期选择框、表单、输入框、数字输入框、提及、步进器、评分、下拉选择、滑动条、穿梭框、文件上传
◆ 数据展示: 头像、标题、卡片、轮播、折叠面板、表格、拖拽排序、高亮关键词、时间轴、走马灯、空状态、徽标数、树、标签、标签页、图片、气泡...
◆ 反馈: 警告提示、抽屉、全局提示、对话框、通知提醒框、气泡确认框、进度条、结果、加载中..
◆ 其他: 锚点、回到顶部、图标...
设计规范是为了更高效的做设计，但不是一成不变的，它在落地使用的时或多或少都会有问题，需要我们慢慢的去反复检验它的合理性，发现不合理的及时更正，不断迭代，不断沉淀，不断优化，这样才能不断提高产品的用户体验。此次分享借鉴一些前辈的经验，主要是整理归纳学习，如有需要补充或纠正的，欢迎大家相互探讨！
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：小鱼ID 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
用户体验（用户使用产品，系统或服务过程中的主观感受）
用户在使用产品过程中建立起来的一种纯主观感受。用户体验这个词最早被广泛认知是在上世纪90年代中期，由用户体验设计师唐纳德.诺曼（Donald Norman）所提出和推广。对于一个界定明确的用户群体来讲，用户体验的共性是能够经由良好设计实验来认识到。用户体验并不是指一件产品本身如何工作的，更明确的是指“产品如何与外界发生联系并发生作用”，也就是人们如何‘接触’和‘使用’。无论什么产品，用户体验总是在细微之处，往往细节最能打动人心。用户体验通常要解决的是用户具体的使用场景，要兼顾视觉和功能两方面的因素，同时解决产品所面临的其他问题。
产品的逻辑简易程度对于用户体验是一个反向指标，产品越复杂用户体验会越发困难。往往产品后期更新迭代中，每新增一个特性，功能或者步骤，都会增加导致用户体验不顺畅或者失败的机会。用户体验的每一个流程，对开发者而言都要经过慎重的考虑和验证。实际上设计出一个最优的解决方案需要更多的时间和精力，往往不得不在各个方面作出妥协。但是一个以用户为中心的设计流程保证来这些妥协不是随机决定的。
为什么每个产品都在强调‘站在用户的角度，提升产品的用户体验’，因为优秀的用户体验就是商机，良好顺畅的用户体验会极大的提升用户转化率，增加用户的留存率。好的的用户体验主要体现在两种形式：“帮助人们工作更快”和“减少他们犯错几率”。牢记“以用户为中心的设计”在开发产品的每个流程都要把用户列入考虑的范围，每一个流程步骤都要代入用户的使用场景中体验，想用户所想。提供优质的用户体验是一个重要的，可持续，良性的竞争优势，用户体验形成用户对企业的整体形象，并以此来界定来与竞品的差异。
在产品的整个开发流程中都要考虑用户有可能采取每个步骤的可能性，并且理解整个流程中每一个步骤用户的期望值。
表现层：视觉设计，我们使用无论任何设备的产品最先看到的就是表现层，内容、功能和美学汇集到一起来产生一个最终设计呈现；
框架层：界面设计、导航设计和信息设计，框架层用于优化设计布局，以达到界面中元素的最大效果和效率；
结构层：交互设计和信息架构，相对于框架层更加抽象，框架是结构的具体表达方式，明确来元素应该出现在哪里；
范围层：功能规格和内容需求，结构层明确了产品的各种特性和功能最优的展示组合方式，这些内容构成了产品的范围层；
战略层：产品目标和用户需求，成功的用户体验，其基础是一个被明确表达的“战略”。知道企业与用户双方对产品期许和目标，有助于确立用户体验各方面战略的制定；
在五个层面应该是自下而上的建设，战略 — 范围 — 结构 — 框架 — 表现；不同的层面位置考虑的方向和侧重点是不一样的，随着层面的上升我们考虑的决策变得更加具体，并且涉及越来越精细的细节表现。每一个层面都是根据下面层面来决定的，每一个层面的决定都会影响上层的可用选择，表现层由框架层决定，框架层是建立在结构层的基础上，结构层是具有范围层，范围层是根据战略层制定的。
按照产品不同属性分为两大类：功能性产品/信息型产品；针对不同的类型将五要素细分展示，功能型产品更加关注的是任务，去思考用户如何完成这个过程，用户使用该产品完成一个或多个任务的工具；信息型产品关注的则为信息，产品应该提供哪些信息，并且方便用户快速寻找，理解，创建一个富信息的用户体验；这种把用户体验划分为各个模块和层面的模式，更有利于我们去考虑用户体验中可能出现的麻烦。所有处在同一层面的要素都会决定最终的用户体验效果。
优秀的用户体验基础是要有明确的“战略”立意，知道企业和用户对产品的期许和目标，才能更好的促进用户体验各方面的完善和优化。我们要用过产品获得什么？用户通过产品可用得到什么？回答这两个问题有助于我们更好的明确产品目标和用户需求，结合两者我们组成战略层。
产品目标：目标的制定切记不要太过具体或太宽泛我们需要在这之间找出一个平衡点，为了更好的用户体验我们需要保证所作出的决策都不是头脑发热拍脑门定出来的，每一个决策，都应该建立在我们确切了解他所带来的联动影响效果。明确的定义出成功的条件而不是定义成功的路径，有时候跑的慢一定不一定就是落后者。既然是赛跑肯定会有终点有结果的产出，我们要明确“成功的标准”制定可追踪的指标，成功的标准不仅仅影响各阶段的决策，也是衡量用户体验工作的具体依据，埋点数据采集，上线后的客户流存率，转化率，新用户的增长率，老客户的使用反馈等等。对驱动用户体验的决策而言有意义的成功标准，一定是可用明确与用户行为绑定的标准，而这些用户行为一定是可以通过设计来影响的。
用户需求：明确正确的用户需求是复杂不易的，因为用户群体存在很大差异性，确定大致目标用户后我们还需要精细化的区分，将用户分成较小的，有共同特性的以此来助力我们更好的明确用户需求，通过不同的角色群体使用产品来分析他们的需求。在针对用户需求研究时我们还可以使用一些市场调研（将你想要的信息通过具体，有效的公式化问题，让用户提交你正确的答案）；现场调查（完整的，有效且全面的方法，了解与产品使用生活场景最匹配的用户行为）；创建人物角色（模拟真实用户使用场景更加贴近用户，再产品思考中和用户更感同身受）。战略应该是用户体验中的起点，但并不意味着项目开始之前战略就完全确定下来，它是可以在整个工作中演变和改进的。
当我们明确了解战略层后，我们就知道产品应该为用户提供什么功能和服务，这些也就逐步演变为范围层。我们要做两个事情来定义范围层 —过程和产品。过程的意义在于当产品还在一个雏形时，可以带动我们去思考流程中可能存在的问题，功能实现的优先级；产品的意义在于明确最终产出的结果，团队有明确的目标。在这其中文档的输出是必不可少的，有计划性说明性的文档输出可以让我们的工作更加有条不紊的推进下去。我们可以从战略层抽象出来 — “我们为什么要开发这个产品？”转而到范围层变为 — “我们要开发的是什么？”在软件开发过程中，范围层确定的是全部功能需求和功能规格。
功能规格：功能规格说明不需要包含产品的每个细节，只需要包含在设计或开发过程中可能出现混淆的功能定义。同时功能规格说明也不需要展望产品未来理想状态，只需要记录在创建产品时确定下来的决议。换句话说，文档不能解决问题，但是定义可以，我们需要不是文档多么详细厚重，而是要足够的清晰和准确。功能说明要明确具体避免主观语气，避免出现歧义，尽可能用量化的可检验的标准来定义功能有助于我们的验收。
内容需求：很多时候我们说到的内容指的是文本。但是图像，音频和视频有时候比文字还要重要。这些不同类型的内容结合到一起，相互协作去满足某一个需求。内容特性想要达到的规模，将对你所做的用户体验产生极大的影响，内容需求应该提供每一种特性规模的大致预估，以便在设计过程中作出最为明智的决策。尽可能早的确定某个人来负责每一个内容元素也是非常重要的，避免后期开发实现达不到我们预期的效果。内容清单的输出也是重要的，究其原因这样团队中的每个人都会清楚知道自己负责的哪些部分，明确责任，提高协同效率。
学会确定需求优先级，了解“不需要做什么”也就意味的我们知道哪些是必须要“马上去做的”，把那些需求点梳理出来，找到一种适宜的方式，让它们符合你长期的规划，这才是真正的价值所在。确定具体，系统的发展要求，并将任何不符合这些要求的想法作为潜在未来功能的囤积，只有通过这种更慎重的途径，才可以真正的管理起整个项目过程。
在罗列出项目需求优先级，梳理出大致的流程，我们对于产品将会包括什么主要内容已经有了清晰的构想。然而，这些需求没有进行全面的整合还是碎片化的存在。而结构层要做的就是整合这些创建一个概念性的结构。结构层适当的将我们关注点从抽象的决策和范围问题，转移到更能影响最后的用户体验具体因素。但是这里的交互设计和信息架构所产出的东西大部分还是概念性的内容。这两项内容并不完全是技术，它要求开发者要有共情能力去理解用户，理解用户行为操作习惯，使用场景，思考方式等。将了解的这些知识代入我们开发过程中，这样会使那些不得不使用我们产品的用户带来更好的用户体验。
交互设计：关注于影响用户执行和完成任务的元素，即关注用户所有操作，同时定义“系统如何配合与响应”这些用户行为。任何一个交互设计的项目都有很大部分牵涉处理“用户错误”当用户发生错误时产品要给出什么提示，并且对于错误发生时，如何防止用户再次发生错误？第一个也是最好的防止错误的方法，就是将产品设计为不可能犯错的。第二个避免错误的方法就是使错误难以发生，即使一些错误发生，产品也应该帮助用户改正错误。有效的错误信息和容易自我解释的界面可以在错误发生之后帮用户纠正。当用户完成一些操作后无法纠正的错误，产品就该提供从错误中恢复的方式。对于那些不可恢复撤销的错误，提供大量警告就是产品唯一可以预防的方法。
信息框架：研究人们如何认知信息的过程，对于产品而言信息架构关注的就是呈现给用户信息是否合理并却具有意义。在以内容为主的网站上，信息架构主要工作就是设计组织分类和导航的结构，让用户可以高效率，有效的浏览网站的内容。信息框架与信息检索和分类体系密布可分，针对分类体系我们可以从上到下或从下到上这两种方法来建立。
从上到下的信息架构从战略层考虑，先从最广泛的，有可能满足决策目标的内容与功能开始进行分类，然后再依据逻辑细分出次级分类；从下到上根据对“内容和功能需求分析”而来，从已有的资料开始，先把他们分为最低级别的分类，然后再归纳到高一级分类，从而逐步构建出反应我们产品目标和用户需求的结构。这两种方法各有弊端，从下而上容易将内容的重要细节忽略，从下而上使架构过于精准的反应内容，对于后期的维护变动不是很灵活。因此我们要尽可能的从两种方式中寻找一个平衡点。一个高效结构的优点就是具备“容纳成长和适用变动”的能力。一个适应性强的信息架构体系，既可以把新内容作为现有结构的一部分容纳进来也可以当成一个新的部分加入。
在充满概念型的结构层牵引出大量需求后，这些需求都是来自我们战略目标的需求。在框架层我们要更进一步的提炼这些需求结构，确定详细的界面外观，导航和信息设计，这样才能使结构变得更加丰满。框架层需要处理更为细节问题，在结构层我们建立了一个框架和交互设计。在框架层我们关注点就是界面的元素以及它们之间的关系。当我们提供用户做某些事情的能力是，属于界面设计；当我们提供用户去某个地方能力，则属于导航设计；当我们要传达想法给用户时，那就是信息设计。
界面设计：成功的界面设计就是要让用户一眼就看到“最重要的东西”，而另一方面，不重要的东西，不应该被注意有时候则它们根本就没有出现在那。设计界面，平面最大的挑战之一就是弄清楚用户不关注的东西并减少他们的比重。将第一要表达的要素快速传递到用户。
导航设计：任何一个网站的导航设计必须同时完成三个目标：1.它必须要提供用户在网站的跳转方式；2.导航设计必须传达出这些元素和它们所包含内容的关系；3.导航设计必须传达出它的内容和用户当前浏览页之间的关系；这三个目标就是必须要纳入考虑的范围，清晰的告知用户“他们在哪里”以及“他们能去哪里”把用户当成是“傻瓜上帝”。
习惯和反射作用是我们与这个世界交互时的基础，我们在使用互联网产品这么多年的时间中，绝大部分的操作效果和下意识的操作方式已经被养成，所以要让你的界面与用户早养成的习惯保持一致是很重要的，界面要与它自身保持一致。这并不是说，每一个界面问题的解决方式都必须毫无条件的死守这些习惯。当某种不同的方式有明显的益处时，你反而应该尝试谨慎的违背一些习惯，到那时需要我们做的每一个决定都要有充分的，明确的理由。有效的使用比喻，就是减少用户在“理解和使用你的产品功能”是的猜忌，让用户第一眼就知道你的图标表达的是什么意思，要有强指示性质。
内容，功能和美学汇集的地方，完成其他四个层面的所有目标并同时满足用户的感官感受。在框架层，我们主要解决放置的事情；在界面设计考虑可交互的元素布局；导航设计考虑在产品引导用户移动元素安排；而信息设计考虑传达给用户的信息要素的排布；在向上就是表现层，我们这里要解决的就是弥补“产品框架层逻辑排布”的感知呈现问题。我们每一次经历最终都是由我们的感觉器官来进行的。在设计的过程中这是用户体验的最后一站：决定我们设计最后被哪些（视觉/听觉/嗅觉/触觉/味觉）感受器官受到呢？
嗅觉和味觉对于用户体验设计师是很少考虑的范围；触觉更多的用于工业设计领域，关注用户和产品之间的物理接触；听觉可以应用到不同类的产品中，如开机/新消息提示等；视觉：这是用户体验师最得心应手饿领域，几乎所有的产品都会涉及视觉设计。代替用“什么具有美感”来评估一个视觉设计方案，应该吧注意力集中在他们能否“良好运作”，对于那些上层决定的目标，设计能否赋能帮助企业更好的变现，设计的本质就是用合适的方式帮助用户/企业完成需求目标；
忠于眼睛评估一个产品视觉设计最简单的方式，就是你的视觉首先落在什么地方？哪个设计要素第一时间吸引注意力？它们对于战略目标是最需要表现的东西吗？用户第一时间接受的信息是你想要表达的吗？设计还是要把握4大基本原则：对比；重复；对齐；亲密性；
不管你的产品多复杂，用户体验都是一样的，创建良好的用户体验最重要的工作内容就是大量收集解决细微的问题。“成功的方法”和“注定失败的方法”归根究底就是：1.了解你正在试着去解决的问题；2.了解这些解决办法所造成的后果；必须要同时考虑五个层面的全部因素，这对于创建成功的用户体验至关重要。
提成正确的问题，面对那些用户体验需要解决的纠缠不清的问题，要抱有一种正确心态，不要以“节约项目时间或金钱”名义对用户体验问题敷衍了事。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：许小鹏 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
用户体验设计师经常需要兼职各个角色职责，除了线框图和原型制作之外，还有可能与团队一起研究、写作等问题。这样的例子不胜枚举，用户体验是一个不断发展的多学科领域，因此优秀的 UX 设计需要广泛的技能开发，UX写作位居榜首。
关注用户从内容开始，内容策略是所有产品信息的制作和开发。用户体验（UX）写作是该学科的专长，它专注于帮助用户用语言实现他们的目标。
语言帮助用户到达他们想去的地方，通过关注用户想要实现的目标，内容策略可以建立忠诚度和信任度。
UX设计师思考页面上的信息层次结构，然后，这将指导用户操作。UX与研究人员一起测试有关语言的假设并提供专业的见解。
当您拥有 UX 写作的基础，并参与品牌建设时，就会发生惊人的事情，用户体验写作可以让品牌茁壮成长。
通常在产品中，使用的词是软件操作，请用动词，它往往是句子中最有力的部分。它将与用户的某些操作有关，
保障用户使用中清楚，需要删除技术术语并将操作置于用户的上下文中。
简洁不仅意味着简短，还意味着简单高效。当我们写作时，需要查看我们的信息每个词语都有不同的工作。
以上是产品写作中的常见问题，在这里不需要标题。在系统接口中很常见，研发提供一种状态，我们通过这种状编写文案。我们应该确保内容优于设计，视觉效果与要表达的内容一致。尽量不要把信息塞进不适合的盒子（代码）里。
在这里，我们删除了标题。正如研究表明，大多数人不会阅读屏幕上出现的每个词语，用户倾向于扫描。他们的眼睛会遵循 F 形图案。阅读第一行，第二行，然后开始向下跳过页面，只捕捉每个句子的第一个或第二个词。出于这个原因，保持我们的文本不仅简洁而且前置。将重要概念放在首位，这样做是为了让人们在浏览页面时能看到那些重要的词。
这个原则永远适用，将最重要的文本放在前面，然后无情地编辑后面的内容。
号召性用语 (CTA) 引导人们进行下一步，您希望引导用户到达他们想去的地方，号召性用语需要与用户想要做的事情产生共鸣，这里的“好的”不是一个好的行动号召。
“再试一次”是一个不错的选择，这不是全部场景，如果用户忘记了密码，而唯一的按钮只有“再试一次”，用户可能会感到沮丧，我们需要给用户多一个选项「忘记密码」。
注意写作时需要结合使用场景，它可能需要提供的一些基本功能，但可以提升产品的用户体验。
如果您注意这三个原则，您将更好地与用户建立联系。
这三个原则并不总是协调一致的，他们之间有一种张力在互相竞争。
当我们使文本清规则时，文案仍然很长，而且不太好阅读。当我们使文本简洁规则时，它使文案更短，但可能牺牲一些清晰度为代价。最后，当我们使文本有用规则时，它变得更长且更不易阅读。
从一个品牌中，我们可以筛选出 3 或 4 个形容词，以及希望用户如何看待它。提取这些形容词，可以采用头脑风暴练习。
想象一下，如果要设计一个约会产品
您会在产品资料中加入什么词或信息？让它在众多产品中脱颖而出，是什么让用户觉得它最有趣？
是什么让用户想要点击并想要了解更多信息？
然后，您可以将这些品质提炼成描述性词语，这些将成为您的品牌原则。
Google Pay 的原则是：新鲜、善解人意、平易近人。
想想您在不同的环境或情绪中听到声音是什么样，这是语气。
声音和语气之间差异，是声音传播手段，语气是根据情况或内容而不断调整的。在一个产品中，就像在不同的情况下以不同的方式与用户交谈，语气的利用容易带用户进入情感化的设计。
例如：
将不同的阶段映射到用户旅程中，可确保用户在整个产品体验中以一致的方式使用产品文案。
对于产品，您的文案写作可能从信息丰富到鼓舞人心或者幽默风趣。创建产品开端与终端后，您需要确定要映射的用户旅程中的哪些时刻，考虑用户体验中不同的里程碑或交互，如注册、引导、或错误提示之类。
为了帮助您确定这些将落在频谱中的哪个位置，您可以考虑：
现在，我们将前面讲的内容，融合在一起做一次UX 写作练习
UX写作原则
举个例子，第一次使用 Android Pay 时需要对用户说什么？
在流程开始时，从以下描述性内容开始：
思考良好的用户体验写作的三个原则，文本清晰有用，但并不简洁。让我们查看看哪些信息是必不可少的，哪些部分可以使用视觉效果？最后编辑为如下所示：
Google Pay 的原则是：新鲜、善解人意、平易近人。
文案已经清楚，简洁和有用，现在需要考虑语气词，还有就是“这段文字是否传达了品牌？”不多，感觉很一般。
因此，回到品牌原则，需要考虑如何让它更新鲜、更令人兴奋，因为这可能是用户的第一印象。
有了这份清单，您就可以让产品在语言上脱颖而出：
作者：唐小白92
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
行业对设计师的要求⼀直都在不断革新，只有「⼀技之⻓」的设计师已经很难满⾜⾏业需要，产品分析已经不仅仅是产品经理的工作内容，对于 UI 设计师来说，也是必备技能之一了，尤其是对于 B 端领域的设计师来说，更需要拓宽视野，思维前置。
那么，该如何去做产品分析呢？本文将从产品分析是什么，如何做两个方面来讲述，为大家提供思路，做真正落地的对设计有帮助的产品分析，提高自己理解业务、处理业务、解决问题的能力，体现出设计师的价值。
对于 B 端产品来说，它只有一个目标，就是解决问题，通过对问题的分析得出解决方案，而任何一个问题都不会只有一种解决方案，在权衡利弊后得出了最终的解决方案，产品就是解决方案的表现形式和实际载体。
从设计师的角度来说，产品分析通常是挖掘产品缺陷，优化产品体验，为产品迭代提供依据，比如：通过深度体验产品，挖掘产品的在功能、交互体验方面的不足，并通过分析制定产品优化方案。一款产品从浅至深拥有无数的可被挖掘的信息，这些信息本身是庞杂冗余无意义的，只有通过分类和清洗才能得到对人有意义的信息，本质上来说，产品分析就是在做信息分类和清洗的工作。
市场分析是对产品所在的市场进行宏观的竞争态势和市场规模的分析。市场分析主要包括行业背景、市场现状和商业模式三部分。可以看到，市场分析其实是从很宏观的一个角度来切入，更偏向于战略层内容，因此市场分析也是三者中距离设计师最远的一个概念。用通俗的话来说，市场分析最主要的目的就是分析产品是否赚钱。
广泛意义上说，竞品分析就是根据分析目的，找到切入角度，对竞争对手或市场进行客观分析，找到竞品或自己的优势与不足，为下一步决策提供科学依据，其实就是「知己知彼」的过程。对于设计师而言，竞品分析的目的更倾向于寻找解决方案，比如：通过竞品分析来寻找参考从而解决自己当前遇到的问题。
不同于 C 端，B 端往往有很坚固的行业壁垒，所涉及业务也非常难以理解，究其原因，来自以下两个方面：
B 端产品很多时候，都是在原有线下业务的基础上进行数字化。逻辑的复杂度本质上是来源于这个行业多年来积累的足够成熟的业务流程与规范，而这些东西没有办法速成，只能靠不断地积累来增进理解。
C 端产品的设计中，设计师大部分情况下都或多或少地就是用户本身，或者带有用户属性，比较容易产生同理心，去发现问题解决痛点。
而 B 端产品不是给普通用户使用的，是给特定群体使用的，这种特质就决定了设计师很难去真正地理解用户的处境，设计师最厉害的特质——同理心也很难派上用场。
有的设计师同学，一接到产品分析的任务，到手就是先去网上看看别人是怎么做的，然后按着人家的结构对自己的产品进行一通分析，其中不乏用到了「用户体验五要素」、「SWOT分析」等看起来高大上的方法论。
按这样做，产出的分析报告不能说错，但是最起码是不恰当的，对设计上的帮助微乎其微。其中有这样两个问题：
产品经理是产品的第一负责人，需要对产品的整个生命周期负责，说人话就是产品经理负责产品做什么不做什么，该什么时候做，而设计师关注的是产品的用户体验。产品是商业的代言人，而设计师是用户的代言人，二者本质上的不同，就决定了在做产品分析时关注点必然不同。如果按着产品经理的思路来做产品分析，得出大环境之类的太过于泛化的结论对设计没有什么实质性的帮助。
用户体验五要素，swot，等等这些高大上的方法论看起来非常有用，从多个维度把一款产品分析得非常清楚。可真实的情况时，往往新手设计师同学既不懂方法论的本质，也不懂使用场景，只是盲目地套用，导致产出的是一篇「八股文」一般的产品分析报告，过于全面但没有重点，什么都是点到为止，对自己理解业务和辅助设计没有实质性的帮助。
我认为，「方法论」本质上是经验主义，使用过去解决问题的方式来解决新的问题。在一定程度上，方法论是有用的，一些简单的问题，确实是有固定解法的，而且，解决问题也更快。但是在更难更特殊的场景下，方法论不再管用了。很多时候，问题表面上看起来一样，可是由于问题的背景不同，所以解法也是不一样的，这时候再采用方法论，就会产生思维固化，强行去套方法流程，得到的一定不是最正确的答案。
在确定了目标和分析重点之后，我们就可以开始进行分析产出产品分析报告了，在这里我整理了几个撰写时的原则供大家参考：
第一点是我们要避免去主观臆断功能的合理性。正如我上面提到的一样，我们并非 B 端产品的核心用户，有些我们感觉反常的地方，但是其实有它的合理性，因为 B 端用户的痛点往往是在特定的工作场景下产生的。因此，在不了解真正用户和场景的情况下，仅凭经验下的结论往往是错误的。
我之前的一个项目的设计中，在给图表配色时，我最初的一个版本是用的近似色去完成的，在发给产品经理初审时被打回来了，理由是这种配色不够明显。我追问原因后才知道，我们的一部分用户是年龄比较大的用户，对比度足够高才能方便他们看清楚。最后出的一个版本是对比度非常高的配色，尽管从设计的角度来看这种配色美观度不足，但是能够让用户看得清楚。
在这个例子中，用户对于美观度并没有很高的要求，反而对于数据的识别度要求更高。我们常听的一句话是「己所不欲，勿施于人」，然而在B端的设计中，我们更要做到「己所欲，亦勿施于人」。
B 端产品有一个很重要的特点，购买决策者与使用者的割裂。我们在思考一个功能时，不能仅仅考虑使用者的体验，也要考虑决策者的想法。
比如钉钉的「已读未读」这个功能，相信大家对这个功能是槽点满满。但是在 B 端产品中，决策链上游是购买决策者即老板，因此就有了这个功能。如果只考虑到用户体验，这个设计从一开始就不该出现。但是，与 C 端产品的流量思维不同，B 端产品不是靠体验来吸引用户存活的，而是靠满足决策者的需要来活下去的。很多大家感觉不好用或者体验很差劲的 B 端产品，仍然活得很好，就是这个道理。
说句题外话，钉钉已经注意到了这个细节，在去年的一个演讲上，钉钉总裁也提到了对这个功能点的考虑，他举了一个场景，在不改变现有设计的情况下解决了这个问题，通过智能手表等外设来预览消息，而手机和电脑依然显示未读，自己考虑好了的时候再去回复。
从战略层到功能架构，再到每个功能细节，采用金字塔原理去遍历，避免遗漏的同时层层深入。
在此处，我介绍一下我认为一份合格的产品分析报告应该包含的部分，各位设计师同学可以根据自己的需要进行适当调整。
因为产品分析是有一定的时效性的，且是针对某一个具体版本去进行分析的，所以在文档开头要列出自己所分析产品的版本，例如（飞书 V5.6.9，钉钉 6.3.35）。
即设计师进行产品分析的时间，留档以供以后查看。
此处要回答的问题是，产品是用来干嘛的，给谁设计的以及怎么赚钱的。
即产品是用来干嘛的，不需要特别具体，只需要在大方面上对产品进行概括即可。举个栗子，抖音定位是一款短视频消费型产品，以“内容”的新鲜有趣为主，强调分享和信息获取，满足幸福快乐的美好时刻需要。
即产品是给谁设计的，在此处需要对客户和用户做区分。客户一般是指企业的 CEO/管理者，他们来决定是否要斥「巨资」购买一款软件。比如说某公司的 CEO 最终决定买钉钉还是飞书作为办公协同软件。而用户一般是企业内的员工，他们使用软件来完成一些日常工作。分析目标用户的意义是，在之后的分析中，我们都要以用户为落脚点，去分析功能的合理性。
需要注意的是，此处并不需要去做一套完整的用户画像，只需要大概描述一下是产品的客户和用户的职位和核心需求即可。
举个栗子，对于某客服工作台产品，
即产品如何赚钱，在这里，我们并不需要用各种很高端的工具——比如商业模式画布，去分析商业模式，我们仅需要知道产品的赚钱方式即可。作为设计师，我们不需要有产品经理那么专业的商业思维，但是我们也一定要能够从商业角度理解产品的价值，一款产品最健康的状态一定是用户价值与商业价值并存。因为本质上而言，用户体验也是商业价值的一部分。
对于B端产品而言，有两种最常见的售卖方式：
1. 本地部署 —— 按软件数量售卖
本地部署是指产品的应用、数据都存储在一台计算机中，这台计算机不与其他任何服务器、计算机相连。21世纪之前的传统 IT 公司大部分都属于这类，比如 Adobe 旗下的产品（尽管他们也在做云，但是更多情况下我们还是把 PS 当做本地产品来使用），那时候 B 端企业的商业模式是：主要服务于大企业客户，通过与顶级的合作伙伴合作，推出顶级的产品，提供一整套软硬件解决方案，并进行深度服务，一次性收取高昂的软硬件费用，并且每年加收不少服务费。
2. SaaS —— 订阅制
21 世纪后，随着云计算技术的发展，越来越多的产品开始部署在云上，也就逐渐发展成了现在的 SaaS 产品，从这个角度来讲，我们通常所说的 SaaS 产品其实就是将本地部署变为云端部署的产品服务。
这时候 B 端企业的主要商业模式是：不仅服务于大型企业，也服务于中小企业。以订阅制的方式，定期收取费用，并且提供不同的版本，进行差异化定价，实现收益最大化。
举个例子，蓝湖就是提供了四个版本并且以季付或年付的方式进行收费。
将需求转化为对应的软件层面可实现的能力，即功能，功能可以实现需求所期望达成的目标。
一个完整的 B 端产品包含若干功能，将一套功能依据业务进行分类整合，形成的抽象化业务模型即功能架构。
功能架构指的是产品是如何由这些功能组成的。我们在分析功能架构时实际上更偏向于产品的实现模型。
信息架构是包括组织系统、标签系统、导航系统、搜索系统在内的综合系统。我们在分析信息架构时，分析的是这个产品是如何将不同的功能组合在一起展现在用户面前的，分析的是产品的呈现模型。
一个成熟的 B 端产品甚至会有甚至会有三四百个功能，我们在分析功能细节前，必须要先厘清架构，以一种抽象的框架视角来全局思考，而不是也仅仅以用户的视角来看产品的表象。
真正地去使用产品，并将产品的所有功能与模块收集到一起。
以模块作为分类依据，将所有功能分到不同的模块里，必要的话，可以继续细分子模块。
在这里要注意，一个功能是否属于某一个模块，不能以这个功能是否在某个页面为依据。一个页面出现了某个功能，只是因为这个场景下用户需要这个功能，而不是这个功能属于这个页面。
以飞书后台为例，很多人在分析时会把首页也作为功能架构图中的一个节点去分析，这是错误的。
首页只是功能的聚合，而非功能模块，例如「添加成员」这一功能应该属于「组织架构」模块中，如果将首页也加入分析，势必会出现功能的重复。
在分析完整个功能架构之后，我们可以深入到每个功能的细节了。其中包括以下两点：
通过绘制功能的使用流程，我们可以模拟用户在使用产品时的流程，发现一些从宏观角度上忽略的点。在绘制时，要注意的是，要控制在页面 & 操作维度，避免拔高到功能维度甚至业务维度。
我们除了要知道这个功能该怎么用之外，还要知道功能与业务的关系 —— 功能背后的需求。
在分析背后的需求时，除了知道这一需求是什么，如果可以多走一步，对需求进行分类，那对于我们了解产品时大有裨益的。
关于需求的分级，在 C 端中常用的模型是马斯洛需求模型，但是这一理论并不适用于 B 端，主要是由于以下原因：
一般而言，我们可以将需求划分为功能性需求与非功能性需求。非功能性需求，指的是隐藏在功能需求背后以及开发需要考虑的的需求，也叫作“跨功能需求”。最常见的非功能性需求就是产品的响应时间，一般非功能性需求是由开发和测试同学考虑的。
而对于功能性需求，有三大类：业务需求、功能需求、产品需求。而这三类需求也有比较立体的层次关系：
业务需求，提出者是业务范围、业务模式和业务规则的制定者，一般是指业务方的高层人物，比如 CEO、高级经理等。产品设计是服务于业务定位的，进而使得产品战略遵循于企业的发展战略，只有这样产品方向才不至于发生偏差，因此，他们提出的需求一般不能违反，换句话说，他们提出的需求是整个系统设计的最高纲领。
用户需求，提出者是基层管理者和执行者。他们关心的是如何使用产品完成自己的工作，提出的需求相对细节，例如对操作、流程上的诉求。
产品需求，由于 B 端产品的复杂性，在建设时需要考虑到功能复用问题，以及与其他系统的架构交互问题。举个例子，语雀 App 是阿里旗下的产品，在开发登录界面时，没有重新开发，而是集成了阿里云的 SDK。产品需求本身对业务实现没有价值，它的价值体现在节省人力和优化软件架构上。
三者虽然并没有绝对意义上的优先级顺序，但是一般而言，B 端产品时优先考虑业务需求，其次关注用户体验，满足用户需求，最后才是考虑产品需求。了解了这一点，我们对功能背后的需求进行分类后，就可以从更高的视角来分析功能的设计逻辑，而不仅仅是停留在好不好看的层次上对功能进行分析。
在《交互设计原理》中是指：对于交互式数字产品、环境、系统和服务的设计，定义人造物的行为方式，即人工制品在特定场景下的反应。
在《交互设计精髓4》定义为：设计交互式数字产品、环境、系统和服务的设计，聚焦于如何设计行为。
而在《超越人机交互》中则是指：设计交互式产品来支持人们在日常工作生活中交流和交互的方式，创造用户体验以增强人们工作、生活以及通信的方式，聚焦在实践上，即怎样设计用户体验。
交互设计即行为设计，关注于如何设计系统如何帮助用户更高效愉快地达成目标。
仅仅知道是什么远远不够，我们更要知道如何去分析一个产品的交互设计好坏。在这里，我提供两个思路供大家参考：
上文提到，交互设计的对象是行为，而这里的「行为」可以拆分为 3 个部分：导航，输入和展示。
设计要点：
例如：掘金的顶部导航，既体现出来了导航本身与包含内容的关系（导航的标签是当前内容的概括），又体现出来了内容与当前页面的关系（当前页面是首页下的一个子页面）。
这里的输入不仅仅指我们日常中的输入，而是一个广义的概念，将所有用户向系统提供信息的方式统称为输入。输入可以通过多种方式完成，包括输入命令、按下按钮、快捷键、甚至打手势、语音等方式。
设计要点：
设计要点：
尼尔森十大原则由毕业于哥本哈根的人机交互学博士 Jakob Nielsen 发表，他提出十大可用性原则，用来评价用户体验的好坏，我们也可以以此为依据来分析一个产品的交互设计好坏。具体的内容网上有很多资料，笔者就不再赘述。
视觉设计即 UI 设计，负责产品的图形、图标、色彩、视觉风格等，从视觉层面把控产品界面设计，决定营造出什么样的视觉体验。
视觉设计的分析内容可以拆分为形、色、字、构、质、动。在分析时，如果是网页端，可以借助浏览器的开发者模式或者谷歌浏览器的插件「VisBug」来详细查看各个维度属性细节。
图标的圆角，卡片的圆角，icon 的风格与统一度（包括：视觉大小，线段粗细，端点类型、拐点类型等）
例如，同样是头像卡片，QQ采用了圆形来体现灵动轻盈的风格，而主打熟人社交的微信则采用了小圆角。
色彩分析包括用色规范、色彩搭配、层级等。在 B 端产品中，色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。
字体的属性有字号、行高、字体、字重等。通过合适字号和字重可以对界面元素划分视觉层级，帮助用户识别。而在一些特殊的场景下，可以运用特殊字体来提高识别度和增加页面美观度。
例如：支付宝使用了常用的 Din pro 作为其数字字体，其他 APP 厂商也分别使用了特殊的数字字体。
此处的构是指页面结构，分为层级和间距两大部分。合适的层级和间距可以帮助用户理解页面，并给予界面呼吸感和通透感。
质感与风格、界面风格，投影数值，扁平还是拟物。
比如说相比普通的单层阴影， Ant Design 采用了三层阴影的表达方式，让阴影更柔和，更符合真实状态。具体可查看 https://ant.design/docs/spec/shadow-cn
最近几年，越来越多的公司和团队已经意识到动效在产品用户体验中的重要性，动效设计已经成为产品设计语言的重要构成之一。
动效设计并不只是为了修饰，使用动效不仅可以更清晰地体现内容元素之间的逻辑和层级关系，还可以提供当前的状态反馈，加强用户对操作行为的感知，给用户以可控的感觉。
除了上述内容之外，我们在分析一个产品时还可以做以下两件事：
在被问到「你觉得这款产品的用户体验好吗？」时，我想大部分设计师同学即使做完了产品分析，也很难回答这个问题。那么，我们该如何做才可以较为准确地回答这一问题呢？
基于这个问题，我们从用户体验的定义出发，ISO 对用户体验的定义有着如下解释：
用户体验，即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。
从定义可以看出，用户体验不仅是主观的，而且范畴非常广，所以在描述时，我们不能仅仅用好/不好来概括。要解决这个问题，要点在于建立一个清晰合适的标准来量化用户体验，体验自查就是在做这样一件事 —— 度量体验。
通过做体验自查，可以达成以下效果：
本质上，设计走查表通常是设计师在完成设计稿后，用于快速遍历方案、修正遗漏或不周的工具。在产品分析中，我们使用这个工具也可以达成体验自查的目标。通常，我们是需要根据产品建立一套适合自己的交互设计自查表的。如果暂时没有，也可以暂时使用网上成熟的自查表来进行。
问题位置：
即体验问题发生的位置。
类别：
不同自查表对问题的分类不同，例如用户体验五要素、可用性原则等。
重要程度：
如果采用正向思考，很容易陷入“都很重要”的困境，所以这里一般采用反向分析法，也就是如果不解决这个体验问题，会造成多大的影响。我这里将重要程度分成了三个等级，分别是：
发生频率：
同样是三个等级，需要注意的是，这里不是以时间频率来定义的，而是以「每经历 n 次业务节点就会出现这一问题」的方式来定义的，如果不好量化，也可以使用每次，经常，偶尔这样的词来代替。
严重程度：
严重程度 = 重要程度 * 发生频率
这里要注意的是，我们作为设计师，提出严重程度的判断仅仅是作为优先级参考，但是真正的优先级和排期还是需要产品经理来做。
问题描述：
即对体验问题的详细描述。
首先，对问题进行重新审查和校验，去掉非体验问题、重复问题、补充不完整的问题描述等，然后整理到一起，这就是整个产品存在的大大小小、各种各样的问题了。
然后，我们通过图表对数据进行二次加工，一般采用雷达图或柱状图。
示例 - 雷达图的使用方式
严格意义上说，这并不是标准的雷达图，只是使用了雷达图的图表背景。
外圈：上述表格中的「分类」
数值：上述表格中的「重要程度」
为每个模块/流程各制作一张表，然后将每个问题都以点的形式置于图中，哪个分类问题最多，哪个模块/流程问题最多？哪些问题较为严重亟待解决？一目了然。
设计的本质是为了更好的解决问题，了解业务是解决问题的基础，也是沟通顺畅的利器。但是想要成为一个业务专家，没有长时间的沉淀上是不太可能的，但是公司一般不会给很长的时间去学习业务，那我们该如何在短期内快速掌握业务知识呢？
在理解业务时遇到的最大挑战就是那些晦涩难懂的特殊名词，如 json 文件，API 等开发中特定的术语。
针对这个问题，在产品分析的过程中，我们可以同步建立一个专业名词库，来记录这些特殊名词，并将这些概念用自己的语言进行描述。这样，在了解产品的同时也对业务有了一定程度的了解。
对设计师而言，相比 C 端的各种炫酷效果，B 端设计很难做的出彩，设计的价值更多是隐形的价值，基本不存在会有人因为你把一个按钮做得好看夸你。从这个角度来说，确实成就感比较低。
但是，通过自己的设计让帮助用户更有效率地完成工作，这何尝不会带来满满的成就感？B 端产品一般是用户不得不使用的产品，作为设计师的我们更应该对自己所设计的产品有着敬畏之心。
最后，给大家分享我很喜欢的一段话，与大家共勉。
本次的分享到这里就结束了，希望可以对大家有帮助。由于文章字数较多，笔者几经修改，仍不免有疏漏错误之处，如发现错误，请读者于评论区或私信指出，不胜感激。
在快节奏的洪流中，保持设计的初心，做有灵魂的设计，我们下篇再见~
作者：靳凯杰ah
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
刷刷手机看看今天又发生了什么热点大事，已经成为现代人茶余饭后消遣时间的主要方式，而搜索热点区别于其他社区类产品，最大的优势是能够把大家关注的事件始末及相关知识服务快速聚合起来，帮助用户更全面的掌握信息。设计师作为连接用户与信息之间的纽带，在项目实践中也进行了系列的设计探索，除助力平台高效聚合呈现信息外，并以更丰富的设计层次诠释热点，帮助用户更便捷的获取所需。
我们先要去了解用户是如何消费热点内容的，基于用户情景认知链路分析用户在事件消费的链路，可以分为三个重要节点：1.热点环境的感知；2.热点事件的理解；3.事件观点的产生。
结合用户的消费路径，我们将设计逻辑框架拆分为三个层级：
1.氛围背景层：分层呈现热度氛围，辅助用户感知热点环境；
2.信息内容层：精细化拼装管理，帮助用户理解热点事件；
3.功能互动层：轻互动玩法设计，激发用户参与抒发事件观点。
从氛围表现层面，助力用户更快速的辨别事件的热度及重要程度。设计师结合搜索热点使用场景以及业务时效性配置诉求，归类了两种设计表现层次：1.日常热度氛围 2. 大事件热度氛围
1）第一个层次：日常热度氛围
主要应用于热点新闻场景，时效性要求高，同时事件热度也会在：“发酵--爆发--消退” 间实时变化，设计根据热度“强弱”程度需求，划分两档视觉展现阶梯，以自动化的方式展现，满足热度的实时变化需求，辅助用户感知当前事件热度。“低热氛围”弱标签设计用以展现上升/今日热点，“高热氛围”色彩背景通顶效果+上榜标签用以展现上榜热点。
如，“马斯克收购推特”，搜索热度持续上升，以第一阶梯-标签方式展示低热氛围；在 “马斯克收购推特” 的事件热度不断增长，成为热榜事件后，以第二阶梯 - 高热氛围自动匹配 ，通过背景及榜单标签的呈现，明确告知用户当前事件的火热程度。
2）第二个层次：大事件热度氛围
主要应用于热点大事件或运营活动场景，个性化展现要求高，同时事件关注度及重要程度也不同，设计根据事件的关注度及重要程度划分为两档阶梯，以人工配置的方式展现，超强的运营氛围，可以让用户充分感知当前事件的重要程度，“A级氛围”头部叠加场景元素设计用以展现大事件，“S级氛围”整页沉浸式视觉设计用以展现重大事件。
如，冬奥会，重大事件，选用第二阶梯 S级氛围，打造超强的运营大事件会场认知。
近几年我们不断的经历各类突发大事件，如：疫情/暴雨/名人逝世等等，每次突然发生的事件都让设计师措手不及，匆忙产出运营氛围设计方案紧急上线，保时效就很难保障质量，因此我们在想能不能总结事件类型提前储备设计，以备不时之需。
不同突发事件会牵动网友不同的情感情绪，比如河南暴雨，我们为受难同胞担心，为救助工作加油，为逝者哀悼；火箭发射成功，我们骄傲喝彩；名人结婚，我们送上温馨的祝福。不同事件带来不同的情感情绪，也要求设计师要用准确的视觉语言表达。
因此我们在前置设计时也充分考虑了事件情感因素，通过对近一年突发大事件的归类梳理，并推导不同细分场景下的用户情绪，通过情绪分类的方式，总结两种视觉设计表达形式：1.实景图合成效果满足严肃/庄重/权威场景情感需求；2.手绘效果满足积极/欢快/庆祝场景的情感需求。结合以上思路我们共储备6大类20个子分类场景的前置氛围+金刚位等运营物料设计，保障突发热点运营设计质效。
截至22年Q1，前置设计已在38个热点场景应用：
为满足用户不同事件场景下的信息需求，设计结合百度搜索：主要内容区（主要需求满足）+ 延展内容区（延展需求满足）的综合聚合能力，通过组件分区布局+精细化规则管理，为热点场景内容的高效拼装打好体验基础。
1）主要内容区
主要内容区，能够帮助用户快速了解事件的主题、时间及主要内容，结合热点事件长期的需求沉淀，设计将主要内容区又细分为主题区域及内容区域。主题区域可承载拼装事件主题、事件倒计时、会场分发导航等主题类组件；内容区域可承载拼装图文/视频/直播等事件主体内容分发组件。通过不同区域内组件拼装规则的制定，业务可以快速选择所需组件进行页面组织拼装，达成分场景个性化满足用户主需求的目标。
如：元宵晚会，热点主要内容区 以“ 晚会直播时间倒计时+ 各卫视晚会分会场导航+图文内容 ” 组件支撑起重大晚会预热期的事件主需求满足。
因为有设计拼装规则，不同大事件活动，各场景内容可个性化满足需求，交互布局设计上又可兼顾横向一致性。
2）延展内容区
延展内容区，能够帮助用户了解事件相关知识信息或提供事件相关服务。业务可根据事件场景需求，选择多个延展内容模板与主要内容区进行拼装，搭建完整页面以呈现不同热点事件内容。
如：俄乌战争-战事场景，脉络卡帮助用户快速了解事件进展 ；冬奥会-赛事场景，数据卡帮助可视化呈现赛事进展；博鳌亚洲论坛-会议场景，百科卡帮助用户科普相关名词知识。
通过氛围打造和内容组织，已经达成用户需求满足的目标，但到此截止，搜索结果的体验还是理智疏远单向的，搜索场景与用户、用户与用户间也无法产生对当前热点的讨论与态度表达。因此设计师对用户的互动行为认知习惯进行分析，并采取具体的设计策略逐步引导用户参与互动。
1）互动唤醒 - 吸引围观增强互动意愿
优化前的热搜结果页，用户的讨论内容都是隐藏在资讯落地页评论区内，需要点击进内容落地页内才能参与“围观”或“讨论”，除互动氛围已脱离当前场景外，也削弱了用户对此事件表态的参与积极性。
通过弹幕滚动+输入框组件组合外显的交互设计方式，将用户讨论外露，不仅丰富热点事件搜索场景的内容维度，同时基于从众心理，进一步刺激用户的参与欲望。弹幕结合事件类型配色来更好贴合热点事件整体环境氛围。
2）情绪抒发-轻互动玩法降低互动门槛
而投票表态+弹幕轻互动组合效果设计，能进一步降低用户交互心理门槛，让用户动一动手指就可以参与其中。在表态/投票抒发情感的同时也可以发弹幕聊聊对当前热点事件的看法，使用户互动情绪表达更充分。
3）惊喜反馈-强化视效打造记忆点
原有设计风格，无法在去世祭奠、颁发勋章等庄重严肃场景精准的表达视觉情感，无互动反馈状态仅有互动前后状态变化。
结合热点场景积极外放情绪及庄重内敛情绪，视觉主要从形/质两个维度进行优化升级，并增加互动反馈动效，同时运营可结合具体事件主题配置，综合提升互动惊喜效果，打造产品记忆点。
视觉层：通过更立体的形态和更丰富的层次质感，更精准的表达情感
动效反馈层：以主图形+辅助元素，通过符合场景氛围的动态效果设计，更充分的表达情感
运营主题配置：在日常反馈基础上，增加运营主题配置层级，为特定主题场景提供定制反馈效果
通过热点环境感知分层呈现、内容组件合理布局拼装满足等设计手段，助力搜索平台以更高效丰富的内容展现形态应对全年3万+热点大事件运营。会场拼装呈现系统的应用场景也在不断扩展，如营销活动、品牌造节等。设计不会止步于此，我们将基于用户需求不断探索深耕，为用户呈现更快速、准确、全面、有温度的搜索热点体验。
作者：百度MEUX
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
2022 年即将过半，疫情在家的我们重新花一些时间，回顾今年最引为人注目的一些设计趋势，有些已经变成现实，有些可能即将会发生。在过去的这十几年里，全国的互联网和移动互联网行业蓬勃发展，引发了 UX / UI 行业的火爆，无论是在设计技术方面还是在设计实践方面维持着快速发展状态。设计探索受到了前所未有的关注。创新也永不停止，正在向各个方向延伸——有的是昙花一现，有的是重塑想象，有的却循环往复。
下面我们将更详细地向你探讨一些 2022 年的设计趋势。
The Badass Project 捣蛋派计划
过去几年里，大字排版的趋势越来越明显，字体尺寸也在增加！接下来，字体更大且几乎没有图像的时尚 英雄形象 网页设计，将成为主流风格。
（英雄形象在网页设计中是一个特定的网页横幅，通常是一个包含与内容相关的大图像页眉）
设计师和用户都越来越习惯在登陆页面前面和中心位置使用超大文字。无论是怪诞的无衬线字体还是现代奢华的衬线字体——这一趋势就是在于越大越好。通过精心选择的字体，网站可以做出比以往更大胆的宣传，以吸引受众的注意力并有效地信息传达。
这些字体选择通过 引人注目的动画进一步生动起来。设计师正在实现通过鼠标移动或向下滚动页面使排版移动并与用户产生互动的创造性效果。以粗体、动画和交互式排版为核心，许多网站也就不使用任何背景图像，让外观变得干净且精致。
MAFF
所以一定要试试这种趋势：把文本尺寸放大，可以将其放置在一些图像上，制作大尺寸的动态标题，让用户从中获得乐趣。最重要的是，要勇于呈现大胆强烈视觉效果，从而可以立即吸引用户的注意力。
案例：Medium 官网——https://medium.com/
Shakib - Sneakerbumb
在经历了充满不确定性和阴郁的两年，我们学会了寻找和珍惜任何享受幸福的机会。我们大量独处时光的花在了数字空间上，这一现象也不例外。
La puce à l’oreille
为了回应这一需求，设计师从 80 年代和 90 年代获得了巨大的灵感；将色彩丰富、质感丰富、复古风格的主题与现代气息结合起来，打造真实的外观。鲜艳的色彩搭配柔和蜡笔肌理、古怪的排版、纹理丰富的背景、跨页面网格的布局、非传统的图像和古怪的插图，都可能会在接下来的一年吸引你的注意力。
Kristen Ryan for MakeReign
随着这一切的发生，我们甚至可以说，在过去几年里，每个人都学会了赋予自己一些自由的生活态度。这为我们提供了更多的实验空间，当然也为设计和其他领域带来了让人愉快的成果。这就是说，设计师们觉得有必要从简单和实用的用户体验转向有趣、搞笑甚至愚蠢的交互。出人意料的是，让别人微笑可能会是你的网站或 app 令人印象深刻的一种方式。
Blumenkopf
野兽派设计从 1950 年代的野兽派建筑运动中汲取灵感，延用其不修边幅、毛糙粗狂的外观形式，和故意做出的丑陋效果。就像在建筑中一样，野蛮主义在网站中揭露和解构(甚至庆祝)这种媒介的底层结构和重要原则。原始、大胆和反动的本性使野兽派设计一直处于数字空间的边缘，因为原始是互联网的全部。然而，近年来，野兽派一直在缓慢而稳定地复苏，现在被一些人称为新野兽派。
Caroselling
随着互联网上干净、传统的网站越来越多，个人网站变得难以脱颖而出。转向野兽派，提供真诚、原始但独特的视觉体验，可能正是提升你下一个网站的方式。
无网格布局，强烈的调色板，重叠的元素，拥挤和几乎混乱的设计只是你的野兽主义工具包的一部分。将它们与等宽和奇怪大小的排版结合起来，缺乏或极少的导航，这相当于没有额外的“空间”或子页面的“开放式版面”，你会得到一个引人注目的粗野派外观。
Work with us
案例：阿里云设计官网——Alibaba Cloud Design - Not Design Just Future
当然，还有更多，但野兽派网页设计的定义规则是没有规则；它反对既定的规则和惯例。更重要的是，你需要用更强烈的意义价值和意图来将你的野兽派杰作与另一个设计糟糕的网站区分开来。
Messenger
Figma、Todoist、Slack和 Messenger 等网站和移动应用程序都把时间和精力集中在桌面客户端版本。
Todoist
越来越多的应用程序似乎也在效仿，因为研究表明，这样用户会感到 更舒适、更安全。用户希望自己的应用程序远离互联网浏览器，远离所有打开的标签，回到指定的应用程序窗口，让人感觉更宽敞、更专注。在使用这些应用程序时，不需要处理数分散注意力的标签，这无疑是一种进步！此外，将通知直接发送到桌面，我们的通知管理也必然得到改善。
Figma
为阿拉伯语国家的谷歌搜索页面布局
用户研究团队利用 人类心理学 领域的洞察，以及 可用性测试，已经能够塑造界面，为用户提供最大的满意度和愉快的体验感受。几十年来，这一直是用户体验设计的核心。
随着技术的快速进步，我们看到数字产品体验的保真度有了空前的提高。这一发展也为不同用户群体之间的细微差异提供了新的理解。年龄、文化、地理位置、日常习惯、社会结构（以及其他因素）的差异可能会导致人们对什么构成令人满意用户体验的期望存在显著的差异。因此，这些体验可能需要类似的设计，但肯定不是相同的设计方法。
随着技术和研究方法的到位，我们开始看到一款产品的多种变体同时推出，以满足不同用户的需求。随着许多大品牌都在努力扩大他们的用户群体，创造本地化的产品体验可能会成为一种大趋势——如果不是标准的话。
NhuSW- Everyfit — Fitness for Everyone
包容性不仅是一种趋势，也是一种运作模式；人类生存和共存是一个不可否认的重要方面。在日益全球化的复杂世界中，我们不断意识到自己与其他个人或社群之间的差异。以同理心驾驭这些差异是我们的责任，并努力将所有文化、性别、性别、种族、能力和残疾都有意义地适当地纳入全球社会。
Spotify
随着数字空间引领着世界的全球化，它也毫无疑问地成为我们包容性努力的前沿。人们总是希望品牌和公司采用更具 包容性的叙述 和语言，并向包容性的平台、产品和服务 迈进。他们被鼓励在图像、语言和视觉语言中推动多样化的表现，这样做不仅仅是为了营销收益，而是为了更大的意义和价值。
这些是我们在 2022 年会看到的趋势和现象。记住，它们是为了提醒我们当前的总体设计趋势。可以使用它们来支持和授权您的设计决策，但不要害怕挑战它们，或用它们为人们创造更多积极有效的体验。
原文标题：UI/UX Design Trends of 2022
文章来源：Codeart
原创作者：Taras Bakusevych & Maja Mitrovikj
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本文主要介绍等距栅格，旨在为有需要的同学解析栅格，从概念、结构和设计上更有效、自信地解决栅格问题，其实主要还是自己对栅格体系的查缺补漏。大家可以对照目录跳着阅读。
事实上，绝大多数的设计师都知道栅格很重要，简单点就是等分运用在内容层。当我们仔细研究栅格相关原理时，只要不嫌麻烦，就会发现在栅格系统下能更快解决设计问题，并让设计更具功能性、逻辑性和视觉美感。
栅格与网格的本质其实是相同的，实现有组织的设计最简单方法之一就是应用网格系统，约束性地为你提供了一个非常基本的设计框架，这是一种久经考验的技术，最初运用在印刷版式中。网格与栅格英文都以“Grid”来表示。但一般我们更愿意在平面设计中更多的称为 “网格”，会存在上下或倾斜，在网页端或移动端中更多的称为为“栅格”。
常见网格系统有三种：直接分割，等距分割，数学分割。本文主要介绍等距栅格，网页中的网格是指使用垂直和水平(较少)等距辅助线对布局进行的划分，它形成了用户界面的基本结构或框架。
平面设计一般用到的是固定的纸张规格，宽度和高度都是固定的，网格会存在上下或倾斜的视图；在界面中栅格宽度跟随不同设备，高度由内容多少来决定，是上下视图。
界面栅格系统是从平面网格系统中发展而来，以依据一定的规律、合理设置基准线来指导和规范界面中的如文本、图像、按钮和其他元素，保证页面的每个区域能够稳健地排布起来。栅格系统的使用，让界面信息呈现更美观易读、更具可用性，对于前端来说，网页也将更加灵活与规范。
将栅格视为一种秩序系统来进行使用，是设计师某种特定的精神和态度的表达，它体现了设计师是以一种结构性、预见性的方式来进行构思和设计。同时，这也是一种职业信仰的体现，设计作品应该是易懂的、客观的、功能性的和具有数学逻辑美感的。
用结构化、系统化的栅格手段进行设计，对设计是具有极为重要的意义的。使用栅格系统就意味着设计遵循普遍与合理。系统化和清晰化、集中精力看透关键问题、用客观取代主观、理性地去看待设计过程。
产品设计中，参与设计的人员越多，用户设备越多，屏幕越多，设计师就越需创建一套栅格系统来组织内容，使设计内容与细节能适应更多场景。合理的栅格系统可以通过调整布局满足产品各设备尺寸的需求。
有序可依，提升协同效率
对于设计师与团队：栅格系统定义了一套底层的、统一的测量单位，当设计团队内对此达成共识时，可以避免因屏幕适配、比例换算产生的像素偏移，适配多种屏幕，提升精致细腻程度，同时保证了设计稿件中元素属性的一致性和规范化，并有效降低设计师的决策成本，提高不同设计师之间的协同效率。同时避免了设计师与前端工程师在细节上的反复沟通确认，提升了整个开发效率。
布局规律，减少认知成本
对于用户：运用网格系统能够让设计更有秩序和节奏感，规避了不同设计师理解不同造成产出差异的问题，如页面节奏，空白等。在保持与原先展示内容基本一致的情况下，页面信息结构更加清晰，提高阅读效率，减少认知成本，提供一致性体验。
栅格使用列在水平方向上拆分页面，以有组织的方式对元素进行布局，并模块化设计多个页面和组件。同时栅格还定义了一组固定的测量单位，指示每个设计元素遵守的尺寸，间距和对齐方式。
最小单元
网格的基本构成就是单元格，由格子组成网。间距都可以用最小单元来增加或者减小，最小单元格是所有设计元素（从排版到列，框，图标和插图）的几何基础，它为所有创造性的决策提供了结构和指导。所以栅格系统的重要一步就是需要先定义好栅格的原子单元大小，我们以最小单元去定义网格系统。
最小单位推荐 8px
目前 web 端最普适易用最小单位的是 8px，我们利用 8px 建立网格，8 的倍数组成了列、行、框的尺寸以及它们的边距和填充，使用 8 的倍数来定义模块的间距与元素的尺寸。
当我们熟悉最小的栅格单位 8px 以后，能有力的减少决策时间。整个设计的元素大小，尤其是间距可以快捷的在脑海中反应出来，8、16、24、32、40、48、56、64、72、80、88、96、192 等，这里都是 8 的倍数或能被 8 整除。让设计师带着工程实现的思维去考虑页面布局，设计侧和工程侧对页面一致性的解读，能够有效降低设计到实现的转化成本，提高开发效率。也要注意间距不能无脑套 8 的倍数，优先用 8，当跨度太大也可以使用 4 和 12。
那为什么不选择 4，6 或 10？
注意的是最小单位应由实际工作来决定，没有绝对的最小单位数值。在适用性方面，4、6、8、10 这四个数值都基本可以满足。
当使用 4px 时，页面就会被分割的非常细碎，当 8 不够用的时候，就要使用 4 了。
最小单元格的数值选择需要从两方面考虑：
屏幕尺寸和分辨率种类有增无减。使得设计师对 “维护适配性” 的难度越来越大，设计稿导出会有@0.5、@0.75、@1、@1.5、@2、@3 倍多种需求，在 1@倍设计稿，奇数（比如 5px）就会出现半像素偏移。而 6 除以 2 得 3，3 就是奇数了，10 除以 2 的 5，6 和 10 不能被 2 除尽。
使用偶数 8px 可以轻松一致地缩放各种倍数而不失真，大多数流行的屏幕尺寸都可以被 8 整除，足够普适，以 8px 为增量进行缩放可提供大量选项，所以推荐 8px。
列 + 列间距 + 大边距
栅格系统由 3 个部分组成：列、列间距、左右大边距。栅格系统是由列和列间距交替分布形成的，列是栅格的数量单位，虚拟的垂直块，用于对齐内容，我们以百分比或固定值定义列宽。竖直方向根据页面内容是可以无限延伸，所以栅格系统在竖直方向的栅格可以不体现出来，设计时只要在水平方向保持规律变化就可以了。
通常设定栅格数量说的就是列的数量，如 12 栅格就有 12 列、24 栅格就有 24 个列。列间距把控页面留白，数值越大，页面留白越多，视觉效果越松散；反之，页面越紧凑，画片分割的越碎。
大边距就是设计内容区以外的空间。我们在设计中一般将大边距宽度定义为固定值，该值决定每个设计的最小呼吸空间，灵活的边距占据了由列，列间距组成的网格后的剩余空间。左右大边距是计算在栅格的总宽之内的，删格系统的宽度就是列、列边距、大边距之和。
也有弹性大边距，会根据不同的屏幕尺寸而变化，就是页面边距可以随着屏幕尺寸的变化而变化。页面边距在移动设备上通常是 12px 到 40px 之间，在平板设备和桌面设备页面边距变化就相对多了。
容器
我们按照页面结构从组件 – 容器 – 区块 – 页面 – 场景进行依次拼装成最终形成产品设计方案。容器集合了下级组件，也可以是多个复杂元素的集合，文字、图片、按钮。如登录区块是由多个标签、输入框、按钮组成。容器是成组的设计元素，形成了独立的内容或功能盒子。区块嵌套容器，由区块组成了页面内容。
栅格规范的是容器间比例，而非具体宽度。容器大小收到栅格系统的限制，栅格系统可以根据需求被 2 等分、3 等分、4 等分、6 等分、12 等分，具体采用哪种比例的组合需要根据需求来定。栅格系统 / 设备分辨率大小在变换的同时会带动区块大小的变化，从而使容器发生变化，如元素尺寸变化，文字换行等。
如下图，共有 32 个容器。对于紧密相关的内容，请考虑组成区块。页面被分割的越碎时，设计中越难把控。
960 栅格系统
这是一个比较单纯的框架。从 1990 年代后期开始就基于表格的布局开始使用的栅格系统 960 Grid System。与早期计算机相比，虽然今天的屏幕分辨率达到了很高的尺寸，但使用 960 像素的宽度依旧可以确保在许多屏幕上能够正确显示。
960 Grid System，是由 Nathan Smith 开发的 CSS 框架，因为早期的电脑荧幕宽度约为 1024，扣除浏览器的卷轴及边框，为 960px，960 Grid System 有 12 栏位、16 栏位版本，960 正是意味着，12 能被 3、4、6 整除，能建立 3 栏、4 栏、6 栏的版面配置，网页的使用也比较灵活。网页版面可以轻松配置，合并，也不会有畸零数，非常适合排版。
960 Grid System 是使用固定宽度 960px，置中对齐画面的方式呈现在网页上，去除左右两边各 10px 的边距空间，留下中间 940 px 的设计内容区，以 20px 作为槽。
而超出 960 的部分的设计元素，就使用定宽设计。
Bootstrap 网页框架
今天市面上看见的响应式网站，多数使用了一些开源的代码或者框架。而应用最广泛的，就数 Bootstrap 了。
Bootstrap 是 Twitter 推出的一套强大网页框架，是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件，也提供了快速建立响应式网页的功能。已经更新到 V5.0.1 版本了 Bootstrap 中的栅格系统是一套响应式、移动设备优先的瀑布流式栅格系统。市面上很多前端框架会对 Bootstrap 进行补充或基于 Bootstrap 开发。
Bootstrap 提供的栅格系统，也是一样将内容区分 12 等分。
它将系统分为 12 列，当然也可以通过变量来改变列数和列宽，水槽宽度，屏幕浮动宽度；其实设置屏幕浮动宽度就是我们看到的屏幕自适应，就是根据屏幕宽度来选择显示参数。Bootstrap 中的栅格流只能作为大的布局定义，那么针对最小单位是该用 8、10、15 还是多少也是需要根据需求去做分析。
12 列结构可以进一步分解 4 等分，3 等分大小的模块。
栅格设计的第一步就是创建画布，对于不同设计的项目，宽度设定是不同的。需要注意第一屏重点内容全部显示，浏览器和 Windows 底栏都会占用屏幕的高度空间，第一屏缩减默认高度 -100px (可调整)。
屏幕宽度
设计师有存在从最大的屏幕 1920 着手设计界面的习惯，最后考虑最小的屏幕上的显示效果。这意味着绝大多数的设计都是从大尺寸开始设计的，通常大尺寸的内容和功能更全面。从小往大适配容易，但是从大往小适配问题就特别多。以 1920px 宽设计的界面在面向小尺寸屏幕的时候多数都很不友好，甚至到了部分页面无法正常预览和使用的地步。所以优先设计最小适配屏幕，然后给出适配方案进行调试。
C 端设计的屏幕宽度是找全网平均数值，而 B 端的目标受众更细分、更具体。类似政府、学校、企业等等，计算机都是统一购买的，这种情况并不需要你去统计全网和其它渠道数据，只要了解具体受众使用什么分辨率即可，以它作为主要输出的画布宽度。如果 B 端设计受众屏幕宽度实在不清楚，可以参考蚂蚁中台设计团队统一的画板尺寸为 1440。
是否定宽(版心)
如果是定宽的设计，便不需要考虑自适应与响应式适配屏幕宽度。版心是源用平面上的说法。根据实际情况，定宽设计如果以 1024 的屏幕为内容主体，1366、1440、1536、1600、1920 的屏幕适配 1024 的内容主体，多余的空间为左右大边距，这种方式设计上容易输出，适配方式更加高效，随之就是可用性较低，对于使用高分辨的用户来说，布局会留下很大的空白。如知乎：
还记得第一次做网页练习的时候我使用的定宽为 1000px。
屏幕终端的宽度不等于我们要栅格的宽度。我们在确定栅格区域设计前，先来熟悉一下 web 产品界面的基础模块和分层逻辑，以常见的 B 端布局为例。
根据模块自身属性及功能定义，常见的模块有九类，分别为顶部导航模块、左侧导航模块、页眉模块、页脚模块、主内容模块、左内容模块、右内容模块、抽屉模块、弹窗模块。
全局控制层为常置的功能底层，是提供稳定性和可预测性、必不可少的层级，具体有顶部导航模块、左侧导航模块等；内容层可分为常置展示层，具体有主内容模块、左右内容模块或上下模块等；临时层为动态出现的功能顶层，始终叠加在基础层及内容层上方，是链接上下体验流程的模块，具体有抽屉模块、弹窗浮层模块。
梳理了相关模块所组合的栅格布局。Web 端有三种基础布局和多种扩展布局。一般来说，栅格区域就是指内容层。前面我们提到了定宽(版心)，版心和内容层还是有差别的，版心+两端页边距=内容区。
那其他模块能用栅格吗？当然可以，有需要就用，不过需要注意使用效率。
首先，创建一个低保真或高保真的原型，设计一些基本元素和交互流程之后，考虑最优的列数。列间距的区域不可以放置内容，我们一般会给列间距设定一个定值来确定列宽大小，这个列间距也是模块间的间距。
栅格数量
常见的栅格系统通常被划分为 12 栅格或 24 栅格。划分的格子越多，承载的内容越精细。也有较少项目会根据实际情况也会划分成 16 栅格、20 栅格，移动设备屏幕尺寸小于 PC 屏幕，想要有更灵活发挥空间，就必须采用列宽较小的栅格。
12 栅格
12 栅格系统在流行的前端开发开源工具库 Bootstrap 与 Foundation 中广泛使用，一些商业网站、门户网站通常划分成 12 栅格，适用于业务信息分组较少，单个容器内信息体积较大的中后台页面设计。根据业务场景可以很容易的将 12 栅格区域划分成 2 等分、3 等分、4 等分、6 等分，以及根据等分容器组合的多种不等分场景，组合也是栅格作为一个界面辅助系统非常方便的原因。
24 栅格
24 栅格系统适用于业务信息量大、信息分组较多、单个容器内信息体积较小，场景复杂的页面设计。相对 12 栅格系统，24 栅格系统变化更加灵活，更适合内容比较多样复杂的场景。我们常见的 B 端 web 设计一般选用 24 栅格，栅格系统大小就是 24 列+23 列间距+2 大边距。
Ant 采用了 24 列、23 列间隔的栅格系统。其中间隔数值是固定的，内容区域减去 23 列间隔后，剩下的部分等分成 24 列。
注意：
其内容模块必须位于若干列上，可以任意分割，比如 6×2，3×4，4×3，下面是不同分割方式设计的信息模块。
只要父级模块对齐栅格，子级元素可以不对齐列，同时子模块也可以有自己的栅格系统。
列宽无法永远精准整除，而相差的像素值往往是无法被用户以肉眼察觉的，栅格不是为了每一像素的精确，而是为了保证浏览效果的秩序、协调与统一。
确定列间距与大边距
列间距与大边距选择 8(最小单位)的倍数，网格将更加一致。可以将间距值把常用的数值整理成号码表，间距复用化：小= 8px，中= 16px，大= 24px，x 大= 32px 等等…这样一来，保持一致性更加容易，更加合乎逻辑，并且开发人员也会高兴，因为他们可以根据屏幕元素之间的关系安全地假定间距。
注意：
列间距的数值越大，页面留白间隙越多
列间距的区域不可以放置内容模块，内容区从列间距开始到列间距结束
非常规设计时不需要栅格系统，根据设计场景可自定义。
栅格系统适配过程中需要考虑三个原则:等比缩放、弹性控件、文字流自适应。随着设备多样化，通用的适配方式是自适应与响应式布局，随之就是栅格系统的变化。我们先聊下断点。
断点，用浏览器打开一个网站，检查元素，右上角会显示视窗当前的分辨率，慢慢缩小视窗的宽度，找到页面布局的变化点，就是我们上面说到的断点或者次断点。
断点设计主要考虑基础的 3 端，一般大于等于 1440 为 web 布局，1439-500 为平板布局，小于 500 为手机布局。每经过一个断点，可以改变栅格大小（比如 16 栅格改为 8 栅格），固定改为拉伸，样式（文字、颜色）。制作精良的话可以设计多个断点，如 480、600、840、960、1280、1440 和 1600px。
固定栅格
固定网格的最大特征是在网页收缩过程中，经过一个断点就会自动减少最边缘元素，其他元素基本保持不变。通过在嵌入式块中排列图块，在工具栏中放置图标等，可以用固定的框来形成网格。栅格列数随着浏览器宽度的减少而减少，边缘图块自动换行，或者有时会溢出滚动条。
首先通过最小单位选择一个基本尺寸，然后以基本尺寸的倍数构建每个盒子框，就会出现一个个网格。
流动栅格
流动栅格是元素随着设备尺寸变化而比例变化，当到屏幕大小变化的断点时，列可以增长或收缩以适应可用空间，边缘元素被减掉。但并不是每一个断点都需要去减少元素，可以适当的按照元素的比例进行大小调整。流动布局兼容性高，能更好的适配多分辨率。
流体栅格非常适合编辑内容，仪表板、图像、视频、数据可视化等。对用户而言，缩放事物的大小比缩放可见事物的数量更为有用。
在每个断点处，列数是固定的，在断点范围之间，实际列宽是栅格区域百分比缩放，而不是最小单位倍数。内容区域是动态运动，就需要运用栅格系统。
混合栅格
内容区域流动和固定栅格组合也是常见的做法，混合栅格既有流动的宽度，也有固定宽度。混合布局对用户十分友好，如下图左侧是固定栅格，右侧是流动栅格。
在初期，网页使用的是绝对静态布局为主。静态布局中如果用户的屏幕大于或小于设计预期，结果会出现的滚动条，过长的行以及对空间的不良使用。后随技术发展，为了兼容各种浏览器，出现了针对各设备适配的解决方案，自适应布局。
后来移动互联网爆发，html5 标准发布，与移动设备、平板电脑和智能设备(游戏机)等需要提供了更丰富的功能，用户希望能够使用各种设备访问任何网站，结合自适应的思想，出现了响应式布局的概念——2010 年由 Ethan Marcotte 提出。
自适应
自适应布局是网页内容根据设备的不同而进行适应，来判断当前访问的设备是 PC 端、平板还是手机，为不同终端分别提供独立的前端代码。自适应设计可以更好地适应用户在现场的各种需求，缺点是成本较高。
自适应设计即创建多个布局，每个静态布局对应一个屏幕分辨率范围。比如你对自适应网站的窗口大小进行调整，每经过一个断点就可以得到不同的布局（页面元素位置发生改变），但在每个布局中，没有经过断点时页面元素不随窗口大小的调整发生变化。每经过一个断点，布局和位置是可改变的，也有特殊，如两个断点间等比缩放，可以保留用户在多个设备间的操作习惯。
自适应设计，变化没必要过于复杂，保留必要的功能入口，不必要的可以隐藏给不同设备切换不同的样式，在同一设备下(断点范围下)实际还是固定布局。
响应式
响应式是通过一套代码，无缝匹配符合电脑、平板、手机效果的前端技术，开发成本更低，高适应性；设计成本更低，一套设计应对多端，最大化提升用户的操作体验；响应式不提供自适应性那么多的控制，多端同步生效，减少运营成本，保障业务效率。
一个典型的响应式布局，通过改变浏览器的宽度就会发生响应变化，而不是像自适应经过设备断点时内容才发生改变。响应式布局中会出现诸多差异较小的状态，同样让响应式布局更加的难以测试和预测。
响应式也存在断点，是网页在收缩的过程中的最小范围。当网页到达这个范围以后，网页内部的元素就要进行相应的变化，用来适应屏幕的变化。
响应式设计的前提有两点：1，页面布局具有规律性，元素宽高可用百分比代替固定数值；2，网页图片必须是可伸缩的。这正是栅格系统本身就具有的典型特点，所以利用栅格系统进行响应式是顺理成章和高效快捷。
响应式网页测试工具：我有反应吗？和 designmodo
总结一下：
自适应布局是内容根据终端不同进行适应，响应式布局是网页的布局针对屏幕大小进行响应。响应式布局等于流动栅格，而自适应布局使用固定断点来进行多个布局。 自适应布局给了我们更多设计的空间，因为只用考虑几种不同的状态；而在响应式布局中就会出现上百种不同的状态，虽然绝大部分差异较小。
自适应与响应式如何选择用哪个呢？
页面功能不多，用户交互少，不需要经常升级，响应式设计从运营的难易和维护的便利性考虑会更好，如逻辑简单并且内容大致相同的官网和展示页面；页面个性化多功能方面考虑，自适应设计更合适，用户体验更好，如功能复杂、用户交互频繁的网站。
全平台适配
除此之外，随着移动设备的生产力逐步加强，手机、折叠屏、平板、电脑之间的界限变得模糊，端与端的差距也在缩小。苹果推出 iPadOS，让移动端的便捷和桌面端的超强生产力进一步融合。而从应用的开发而言 Electron、Flutter 等跨系统框架层出不穷，开发者也在不断尝试在不同平台上用一套代码提供同一套服务，减少系统隔阂所带来的维护成本。
尽管全平台系统设计的概念还不成熟，但我们可以看到打造流畅的全平台体验的必要性。这也许会成为下一代应用的基础规则，正如当初的响应式设计。
figma 有三种不同形式的栅格可供选择：统一网格，列和行。支持单个画板栅格系统的使用和隐藏。
嵌套栅格
与其他工具不同，figma 不会在内容层只局限一个栅格，可以建立多层栅格嵌套。可以利用这一点，在盒子内部设计时，再用栅格用作视觉辅助，可以通过颜色和不透明度来区分不同栅格。
figma 可以通过相对调整画布大小，同步拉伸栅格系统。
内容自适应
当我们拖动窗口的宽度，模块会发生自动布局。定义下级元素针对父模块的响应，做到模块变化的同时下级元素的显示也是合理的。比如相对内容左右间距一致、对齐方向一致、尺寸固定等设置。这就是 Sketch/Figma/XD 中的自适应功能。
其实在设计稿时，使用自适应功能频率不高，不是每个区块都需要自适应的。
固定和拉伸混合使用，在内容自适应框架中，可以将一些元素设置为固定，将一些元素设置为填充容器并与固定和拉伸形式相结合使用。
同时可以修改图层透明度为 0，相当于占位，可以占位搭配组件。
共享样式
在创建栅格系统时，可能需要对不同设备尺寸或其他常见用例上的布局进行不同的更改。为了更轻松地将这些栅格应用于框架，文件和项目，可以将其中的几个合并为一个栅格样式(相当于组件)，然后可以从团队库中共享该样式或者自己复用，简单快捷。
同样有三种栅格可供选择，栅格系统统一使用和隐藏。Sketch 里自适应功能不能隐藏某对象占位，而 figma 可以，当位置隐藏后，布局就会进行调整。
sketch 使用栅格设计需先设置一个总宽度尺寸，点击左下角默认设置还可以将自定义的栅格系统设置为默认，方便以后重复调用，但 sketch 只能储存一组栅格系统的数值。
sketch 怎么以最小单位进行移动？
可以在首选项设置最小单位如 8px，按 shift+方向键就能以最小单位进行调整。
这个网站，输入版心和分割数，自动生成栅格方案。
在实际设计过程中，栅格的使用会伴随着限制条件。我们应当明白，栅格只是为设计师提供便捷的辅助工具，而不是限制设计师的工具。
不过从栅格这个工具来说，完全的自由反而是降低效率。如果能够给出一定的限制，反而会使得我们的设计效率提升。我们不必关心每个区域盒子具体值是多少，只需保证它们存在正确的关系。栅格系统是对界面元素进行横向排布时需要遵循的模式，不适用于类似图标与文字间隔的小型元素安排，而是用于大型区块间距的安排。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
