用户觉得软件不好用通常是由于操作界面不符合常识，交互逻辑出人意料导致的。用什么样的设计来支撑产品体验值得我们深入的思考。
iOS 14 桌面小组件是这次更新当中的重要功能之一。桌面小组件赋予了 APP 全新的入口，更丰富的交互层级，更多样的操作模式。
这个在 Android 上存在了十几年的功能，时至今日，给人的感觉和认知依然不够强烈——时钟、天气、播放控制、快捷开关、待办事项可能是用得大家最多的几个小组件，而绝大多数用户不会主动想到去用小组件功能。
但是简单地用「抄袭」二字来描述 iOS 14 上的这一特性又欠缺妥当——毕竟早在 2005 年，Mac OS X 10.4 Tiger 中的 Dashboard 就已经把屏幕小组件给玩儿出花来了。
2005年 Macworld 乔布斯演示Dashboard 小组件
Maemo 开发者大会上探讨小组件背后的心理学机制
在移动端设备上，单具备触摸屏功能的系统当中，无论是更早的塞班、Maemo，还是同时期的 webOS、Windows Phone 其实都有各自的 Widgets （WP叫动态磁贴，APP 和组件的融合设计）。其中， Maemo 的设计团队甚至曾经聘请过心理学和行为学家来专门研究小组件的用户交互背后的心理学原理。
Windows Phone 中的 APP 快捷方式和小组件是一体化的，多尺寸可选
webOS 中同样也有屏幕小组件
所以，在今天，更值得我们关注的问题在于：作为目前最主流的 iOS 系统，它的桌面小组件在设计上有哪些讲究，而它和 Android 上的桌面小组件有哪些不同？
答案就在 iOS 14 悄悄更新之后的设计规范当中，咱们一起来看看吧。
说明：以下的内容为苹果官方设计指南（HIG）的翻译。
小组件能够提炼 APP 中的关键信息，呈现在 iPhone、iPad 和 Mac 当中最为醒目的位置。小组件以一种令人愉悦的视觉和交互形态，帮助用户个性化地呈现屏幕内容，优化主屏幕的体验。
小组件在 iOS 14 和 macOS 11 及更高的版本上才可用，而相关的开发人员文档可以戳这里阅读：
小组件通常有小、中、大三种不同的大小尺寸，在iPhone、iPad 和 Mac 系统当中，用户可以在小组件库当中找到小组件，并且选取合适的尺寸。选择了小组件之后，用户可以进入界面编辑模式，在这个模式下，用户可以移动小组件到想要的位置，并且可以根据需求进行进一步的设置和调整。比如可以在同一屏上放置多个小尺寸的天气小组件，并且通过设置，让每个小组件显示不同位置的天气。用户可以将组件放置到主屏幕上，也可以放到 iPhone 的 「今日」页面上（也就是所谓的最左侧的负一屏），iPad 的 「今日」 页面上，以及 macOS 的通知中心。
在 iPhone 和 iPad 上，小组件还预制了「智能堆栈」功能，也就是说多个小组件可以在同一区域堆叠，同样的，用户可以将它放置在iPhone 的主屏幕以及 iPhone 和 iPad 的 「今日」 页面上。「智能堆栈」中包含一系列默认小组件，它涵盖了用户经常会打开的各种小组件，并且随着时间的变化，Siri 会帮用户筛选出最符合当前环境和语境下的小组件内容，突出显示。如果用户打开了「自动旋转」的选项，Siri 同样可以高亮显示自定义的小组件堆栈中的相关小组件。
注意：曾经为 iOS 13 以及更早系统版本所设计的小组件，在新版的系统的主屏幕上是不可用的，但是仍然可以在 「今日」 视图和 macOS 的通知中心使用。
尽管用户可以点击小组件进入APP，然后进行更多的操作，但是小组件的核心功能，始终是显示少量但是即时的、有用且高度相关的信息，让用户无需进入 APP 就可以获取信息。明确每个小组件的核心目标，并且梳理整合需要展现的信息，是整个设计过程中至关重要的一步。
在多数情况下，你需要将你的设计目标梳理得非常明确。比如天气 APP 的小组件，需要显示的特定某个位置的天气信息，而一个卡路里跟踪的 APP 的小组件需要显示的，可能是当天消耗的卡路里，而新闻 APP 的小组件可能展现的是热门资讯。通常，小组件可以很专注地呈现程序的一部分内容，就像游戏当中角色所处的状态一样。
在较大的小组件中，你可以显示更多的数据，或者更详细的可视化的效果，当然，不管多大，它始终应该专注于做一件事情。例如在较小尺寸的小组件中，可以仅仅显示当前当地的天气信息，一天中的最高温度，而在中等尺寸的小组件中，同样的数据也被列举出来，但是额外增加了 6 个小时的天气预报。在大尺寸的小组件当中，可以在6小时预报的基础上，还额外展现未来 5 天的天气预报。
小尺寸小组件
中尺寸小组件
大尺寸小组件
人们真正喜欢小组件的地方，是它能够提供有意义的信息内容，而不是提供另外一个程序快捷方式。
通常，设计师需要避免简单地扩大小组件的尺寸而不针对性地修改内容，创建的小组件尺寸变化的同时，它的内容也应该进行相应的优化和改变。
如果小组件的内容没有变化，那么用户可能不会将它置于醒目的位置。尽管小组件不太可能每分钟都有所更新内容，但是尽量保持更新的内容，可以更多地吸引用户的目光，这一点很重要。
比如日历的屏幕小组件，可以针对特定的时间和事件进行独特的视觉处理，比如在生日的展现方式就不一样。
在许多情况下，用户需要提供特定的信息之后，屏幕小组件才能显示有效的内容。比如，用户在使用天气APP的小组件的时候，需要先选择特定的地点；使用股票APP的小组件的时候，需要选择特定的一支股票。不过也有例外的情况，比如 Podcasts（博客） 的小组件默认显示最近内容，因此用户无需预先进行配置就可以直接使用。
这些在使用前要进行的配置选项，不应当要求用户进行过多的设置才可使用，应当足够便捷。同时，用户也无需针对小组件的 UI 进行配置，因为桌面小组件的 UI 界面对于用户而言，是已经配置好的。相关的开发文档可以戳这里查看：
当用户点击小组件的时候，它可以打开 APP 当中对应的页面和位置。比如，当用户点击股票APP 对应的小组件的时候，由于小组件显示的是特定的股票的信息，所以点击小组件之后打开 APP ，APP 应该显示的是这款股票所在的页面和完整的信息。
通常最小尺寸的小组件可以提供一个可点击的元素，而在中大尺寸的小组件当中，可以提供多个可点击元素，比如中尺寸的笔记 APP 小组件当中，可以添加多个笔记条目，点击其中任意一个可以显示对应的笔记内容。
尽管有多个可点击元素对于 APP 而言非常有意义，但是提供过多的可点击元素，可能会让用户迷惑且无法正确点击对的目标。
在有的 APP 当中，用户登录之后可以获取更多的功能和服务，可以在小组件中让用户知道这一点。比如，对于一款预订类的 APP，可以在小组件中包含「登录以查看预订」这样的提示。
为了保持小组件内的信息的相关性和有效性，小组件应该定期刷新以更新内容。小组件不支持连续的实时更新，并且系统会基于种种因素，来调整和限制其内容的更新频率。为了让小组件找到对的更新频率，你需要知道你的 APP 的内容更新频率，并且预估用户会多久查看一次新的数据。举个例子，潮汐变化虽然是实时的，但是用户追踪海滩潮汐信息变化也通常是以小时来计算的。如果你注意到用户查看小组件的内容频率变化，超过了它的信息更新频率，那么你可以考虑在小组件中显示上次更新的时间节点，以便用户知晓它的更新频率。相关的开发人员文档看这里：
小组件本身的更新频率是受限的，你可以让系统来直接更新其中的时间和日期，将注意力集中到开发它的其他功能上。
如果你确定了数据的更新频率，就没有必要将旧有的信息作为占位符来使用。
在 iOS 14 以及更高的版本当中，小组件可以使用丰富且大胆的配色，使用令人回味的配图以及清晰的文本，所有的这些优质的设计素材可以让小组件中的信息和功能一目了然。独特、精美的小组件不仅提供有效的信息，而且还能让整个屏幕内容个性十足。
如果你需要在小组件中呈现品牌LOGO、文字名称、应用图标，那么尽量以无干扰的模式来将内容集成到其中。在某些情况下，比如当你使用屏幕编辑模式来调整布局的时候，系统会在小组件的下方显示对应的 APP 的名称和信息，因此你无需在小组件中再做强调，尽量以色彩、版式等视觉设计来凸显它的特征。
如果小组件中信息过于稀疏，那么它看起来不太具有存在的必要；如果信息量太过于密集，则可能让整个小组件显得臃肿密集且难于使用。你需要寻求合理整合内容的方法，确保人们能够立刻掌握信息，尤其是基本的信息，并且可以在此基础上花费更多的时间来查看细节。你可能在更大尺寸的小组件上，用信息图来替代简单的文本，这样也不会让信息过载，但是呈现形式上的改变，会让体验变得更好。
丰富漂亮的色彩是非常吸引人的，但是色彩决不能影响用户吸收和了解基本的信息。色彩应该可以作为提升整个小组件视觉属性的一种重要手段，但是它一定不能喧宾夺主，影响内容本身。在 iOS 14 的设计素材中，内置了一系列的系统推荐用色。
小组件应该在深色和浅色模式下都看起来非常棒才行。通常，尽量避免在深色模式下，使用浅色的小组件背景并搭配深色的文本，或者在浅色模式下，使用浅色文本搭配深色背景。当你根据使用 iOS 系统内置的语义配色系统来配置背景和文本配色的时候，色彩可以根据你当前的环境，自动匹配。
当然你还可以借助现成的设计素材来手工配置和选择。详细的使用说明可以参考下面的链接：
使用系统字体能够能够让你的小组件看起来非常原生，并且不论是什么样的文本字重、样式，都非常的美观。如果你使用其他的第三方字体，可能很难做到这一点。当然，如果仅仅是在小组件的标题中使用自定义的第三方字体，而正文和其他的文本字体使用 SF Pro，效果也可以做到很棒。具体可以参考下面的规范：
确保小组件中文本正确调用字体，而不是被栅格化之后的视觉元素，这样可以让系统内置的 VoiceOver 读取其中的内容。
SF Symbols 能够帮助你让符号图标以及 SF Pro 的文本可以正确对齐和缩放。相关的内容可以参考下列规范：
当小组件在加载相应的数据之后，就可以显示占位符的内容了，但是这些占位符信息应该足够逼真才能帮助用户认识它。将 UI 中静态的框架和视觉化的占位符结合起来就可以创建出可供识别的预览模式。比如使用半透明的条状矩形来作为文本占位符，使用圆环或者正方形来替代图像和符号。
小组件的描述能够帮助用户更清晰地了解它的功能。巧妙地使用引导性动词能够更好地帮助用户了解它的功能。比如，「查看当前天气状况和位置」以及「跟踪即将开始的活动和会议」。避免不必要的短语，尽量使用平易近人的表达方式。
屏幕小组件可以缩放以适应不同的屏幕尺寸，除了使用 SF Pro 和 SF Symbols 之外，你还需要控制好小组件的尺寸，确保在每个不同的设备屏幕上看起来都很舒适。
为了确保你的图片素材在最大的小组件上看起来都是不错的，可以尽量按使其按比例缩放来匹配较小尺寸小组件的显示。下面是尺寸规范：
为了确保你的设计和小组件完美的匹配起来，请注意匹配两者的角半径，在 SwiftUI 容器内设置正确的角半径。相关的开发文档看这里：
标准的边距为 16pt，如果你的小组件当中包含有文本、图形等元素，请使用标准边距以避免边缘拥挤导致体验不佳。如果使用图形背景来创建分组，或者有按钮元素，那么你可能需要使用窄边距（8pt）。
iOS 和 Android 是目前最主流的两大移动端操作系统，其中 Android 平台的小组件出现得相对更早。但是相比于更加统一的 iOS 平台，百花齐放的 Android 第三方定制化的系统，加上相对宽松的开发机制，使得 Android 平台上的小组件设计极度缺乏统一性。
在 Google Design 页面当中，Material Design 的设计规范在很大程度上已经比 iOS 更加丰富，但是在小组件设计这一章节的内容，可以用简单粗陋来形容。
设计规范中，相对简单地展示了 Android 小组件的4个常见类别，以及4种常见交互。下面是对 Android 这套宽松简单的设计规范的快速归纳：
信息展现型小组件是将对于用户重要的信息，随着时间推移来呈现，比如时间、天气、运动状况，点击即可带用户跳转到 APP 当中。
信息集合型小组件会显示更多的信息，它专注于两个交互：浏览收藏和打开详细信息。
控制型小组件的功能是在不打开 APP 的前提下，直接触发某些 APP 的功能，比如音乐控制。
混合型小组件可以将多种功用混合到一个小组件当中。
Android 小组件通常支持4种交互，一种是滚动浏览，一种是尺寸调整缩放，还有就是导航操作，比如跳转到特定APP当中，最后一种是进行配置调整，比如对组件中的元素进行调整。
单从信息量上来说，Android 系统的小组件设计指南仅仅只是做了最基础的指引，考虑到生态的开放性，这种「放任」是很自然的一件事情。
从 iOS 14 开始，苹果在 iOS、iPadOS、macOS、watchOS 乃至于 tvOS 上的联动与融合，已经变得非常深入了。而 iOS 系统的复杂性开始显露，小组件就是其中的一环。
和苹果一贯以来的UI设计类似，它有着开放的一面，但是它的另一面是约束，这种约束很巧妙，比如说深色模式，你使用官方的设计和开发素材，调用官方的组件，能很快实现颇为不错的效果，但是与此同时，你的设计和开发空间也受到了相应的约束。
在 Android 上，小组件可以更为自由地调整尺寸，但是谁都无法准确预知它在某一款手机上，整体的体验是什么样的。这个小组件的边缘会和哪个图标对齐，风格是不是一致的？这种问题在 iOS 14 上很大程度上是不存在的，单尺寸问题就已经进行了极为详尽的约束——它一定会对齐，在体验上几乎不太可能跑偏。
从小组件开始，我们迎来一个更加丰富、复杂的 iOS 系统。
文章来源：优设 作者：陈子木
本篇文章将分享 Web 端系统布局，从基本布局初识、网格、布局模块到栅格进行完整链路内容整合，以简单易懂的案例与大家进行探讨。
在以往的学习过程中，我发现市面上大部分文章对于 Web 端系统布局内容讲的比较笼统，一般提及较多的是网页栅格相关的内容，但是一些关联性和原子结构等相关内容较少。比如，了解布局时应该需要了解哪些方法论？什么是网格？网格与栅格之间是什么关系？栅格与布局之间是什么关系等。我会从这些缺失出发，结合工作经验与实际案例为大家进行分享。
用户在操作系统时所看到的页面框架其实就是系统布局，它是一个产品最外层的框架结构，一般包含了顶部导航、侧边导航栏、面包屑、图文、卡片、内容等元素。
对于设计师而言，想要了解一个中台，首先要了解它的系统布局，系统布局是页面设计的基础，它与页面的关系，就如同建筑与地基的关系。日常完成需求时，UI 界面反复的调试页面宽度与卡片比例会占用我们大量的时间。为了提高工作效率，并且把更多的时间放在业务、视觉创新等方面，我们就应该需要一套完整的布局规范。
对整个公司产品体系而言，内部员工与普通用户使用的操作系统达到几十甚至上百个，单一的页面布局满足不了各个子项目的使用场景。所以我们从前期的布局框架设计调研到产品业务的特性，定义了中台界面的几大类型，并且在我们的设计规范中定义了几大类型系统布局方式，根据其布局方式定制好栅格，方便日后在各个业务场景中使用，从而能够保持一致性、并且可扩展，方便快速迭代和维护。
视觉层次
对于中台的 UI 设计师们而言，良好的理性思维相对比感性的视觉思维更加重要，因为在 UI 设计师设计页面时需要把很多互不相关的元素有秩序的组织在一起，正确引导用户操作与使用。亨利·亚当斯（Henry Adams）曾经说过：「混沌是自然法则，秩序是人类的梦想」。人们总是喜欢秩序，因为秩序可以让事情变得更容易理解。这同样适用于数字产品的用户界面，当 UI 元素被有序组合和结构化时，人们可以轻松的使用应用程序和网站，并对产品感到满意，所以设计页面时需要结合视觉层次理论。视觉层次理论是设计过程的核心方法之一。最初是建立在格式塔原理的基础上，它观察到了用户对相互关联元素的视觉感知，并展示了人们如何将视觉元素归为一类。那么什么是视觉层次呢？官方概括：视觉层次结构致力于一种用户能够理解的方式呈现产品的内容，以便用户可以理解每个元素的重要性级别。它可以组织页面内容，以便大脑可以根据物理差异例如：大小，颜色，对比度，样式等区分对象。
苹果的设计一直以来都是引领着设计趋势，其设计被国内外用户所认可，所以就以苹果官网作为案例。其中，字重对比：苹果官网在字重上给人眼前一亮的感觉，它采用 Medium+Bold 的字重使得标题与详情内容产生强烈的大小对比，用户进入官网的第一眼便能了解核心内容。颜色对比：在颜色上使用黑色背景承托产品和内容，强烈的黑白对比增强了信息传播中的识别度和对比度。图文排版：在图片与文字排版中使用了文字层和图片层互相叠加的视觉效果，使得页面层次感更加的丰富。如下图：
格式塔理论
往往用户打开页面进行阅读或者操作界面时视觉的第一感受是产品的整体效果，而并不会感知到一些较细节的元素。往宏观来讲当人们感知到一个物体由许多元素组成的复杂对象时，人们会采用有意识或无意识的方法将这些部分安排到整个组织的系统中，而不只是简单的元素级。它适用于不同级别的感知，但是视觉部分似乎是设计师设计界面时最能体现价值的部分，这其实就是格式塔理论，格式塔（Gestalt）这个术语来自德语单词 Gestalt，中文翻译为「形状，形式」。
格式塔心理学家库尔特·科夫卡（Kurt Koffka）的一句话可以捕捉到这一运动背后的基本思想：「整体不是元素基因的总和」。官网概括：「在心理现象中，人们对客观对象的感受源于整体关系而非具体元素，也就是说知觉不是感觉元素的总和，而是一个统一的整体，部分之和不等于整体，因此整体不能分割」。格式塔理论中元素之知见的原则分别为临近，相似，连续，封闭和连接。
在我们的现实生活中有很多自然规律都遵守了格式塔原则，比如说每到秋天，北方的严寒气候不再适合大雁生存，这时候大雁便会飞往较暖和的南方，当人们看到天空正在南飞的大雁队伍，它们组织链接得十分严密，并且群体在往同一个方向移动，所以队伍的形状在我们的大脑中将它们视为一个群组的一部分，产生人字形或一字形的图形。
信息框架
刚刚我们也介绍了视觉层级结构和格式塔理论，接下来简单介绍一下信息框架，它也是在系统布局中需要考虑的内容。信息框架是将信息内容进行组织分层，一个产品的信息框架取决于其特有的业务，他与业务强相关并且需要了解用户群体目标。根据业务和用户目标将内容组织搭建信息框架，形成系统布局的骨架，方便用户在浏览或操作页面时能够快速找到重点内容，提升用户使用效率。我们用今日头条 Web 端和飞书 Web 端两个线上产品作为案例分析吧，今日头条和飞书属于两种完全不同类型的产品，那么其信息架构也完全不同。
今日头条属于门户类新闻客户端，主要是生产内容展现给用户，首先进入到产品映入眼帘的是无穷式的信息流，它不需要用户登录/注册作为身份门槛，而是直观的把内容展示给用户，推送用户感兴趣的内容，也不需要用户决策任何选择，用户只需沉浸式的阅读体验即可，目的是方便第一时间抓取用户、吸引用户达到留住用户的目的。当用户产生兴趣以后想要进入下一步操作如：点赞、评论时才会弹出登录/注册，一方面是获取用户的身份等信息，另一方面是间接性的把用户留下来。从产品业务属性来看，今日头条的布局把重要的内容放入中间，并且占有整个布局的一半大小，其次放在内容两侧；
飞书属于工具协作类产品，用户第一次打开产品需要注册才能使用。与新闻阅读类产品不同的是工具类型产品用户目的比较明确，所以首页做成一个功能介绍页面，作用是引导用户了解产品核心功能从而转化成产品的用户。当然功能介绍页也是一个网站的门面，首页想要出彩，不仅需要在布局上做的合理还需要考虑网站的色彩、插图等元素的统一性。在设计网站时，首页的功能介绍页一定要充分突出自身产品特色，强调出自身产品的优势和亮点，如飞书首页主要是想突出其产品能够提高工作效率，所以直接把「在飞书，享」slogan 这句话放在了首页的第一屏，辅助文案详细的介绍了产品的核心功能，直接抓住用户的痛点。用户完成注册以后，进入到功能页面，如右下图可以看出，其系统布局的模块分成三份，占面积最大的模块属于产品最核心的部分也就是聊天窗口，较重要部分是联系人部分，最小区域是功能 Tab 部分。
小结
所以对于设计师而言，在设计页面时必须熟练掌握一些基本设计基础知识，并且将这些知识灵活运用到实际的工作当中。比如设计师在搭建系统布局时需要熟知页面视觉层次、格式塔理论、信息框架等知识才可创建合理的布局基础。当然布局框架只是整个产品的基础骨架，在骨架确定之后，设计师才可进行下一步的设计，如统一的视觉表达元素，清晰的功能操作，流畅的交互表达。
系统布局规范，需要通过统一的设计元素和间距规范去引导使用者们（使用规范的设计师）跨平台使用并且能够适配不同屏幕尺寸，目的是达到一致性，可适配、可控性原则。
一致性：对于界面来讲，界面中的元素和结构需要保持一致性，如：在使用布局时应当使用一致的网格，基准线和填充，在使用设计元素时配色、图标、文本等需保持一致。
可适配：布局是可自适应的，根据用户在不同的设计环境下能够通过交互动效、界面样式有效作出适配反应。用户操作后需给出即时反应。
可控性：当用户看到界面时应直观有效传递内容，如界面中模块区域明确、内容组织明确、表意明确都能使得用户快速理解。界面需要简单直白，让用户快速识别，减少用户记忆负担。
在设计过程中，为了减少设计师们的日常沟通和理解成本，在设计内部我们统一了一套设计画板尺寸为 1280。经过我们官方调研得出在中台系统中用户使用的电脑屏幕主流分辨率分别为：1440*900、1366*768、1920*1080、1280*800，而1280 是主流分辨率中最小且最为保险的的一个尺寸，在设计页面时设计师如果能够在 1280 尺寸下，缩小宽度或拉升页面宽度都能保证没有遮挡或挤压问题，那么设计是合理的。在我们的规范中页面再小于 1280 时需要吊起系统的横向滚动条。在中台系统中考虑到用户效率问题很少做响应式，所以常规情况下设计师会限定界面的一个最小值。如果设计师把画板设置为 1440 或者 1366 时可能会存在其在画板中页面大小正好合适，但是页面上线以后缩小浏览器可能会发生遮挡或挤压的情况。所以我们建议设计师们使用 1280 宽度画板画图。
首先先分析一下界面框架，我们将页面的用户操作行为进行层级区分。我们至下而上将元素进行层级分层，目的是把用户界面模块化。界面可分成背景区域、内容层、全局控制层、内容弹层，每一层都具备独特性，将界面中所有的信息层级提取分类并且按结构属性分层，目的是能够使得页面视觉和交互逻辑符合用户的习惯认知。之前我们有提到过视觉层次、格式塔理论和信息框架，设计师在创建这一步的时候可以用来指导搭建一套合理的页面信息层级，一个内容模块都属于一个容器，容器可以承载各种内容元素。
背景层
背景层样式固定，在界面中永远置于界面底部，并且一般会给予背景层中性色，作用是方便突出内容层和全局控制层。
内容层
视图结构中最核心和复杂的一层，他与业务强相关，内容层的容器承载了业务场景的用户需要获取的核心信息以及辅助核心任务的操作。容器承载了内容，从 Material Design 中的 Elevation（海拔）概念中可以了解到，它属于第二层级内容，基本布局结构有平行结构或者父子结构。如下图卡片属于容器，卡片中承载了数据图表等内容，整个卡片+内容就属于内容层。
全局控制层
全局控制层我们定义他在内容层之上，属于页面第三层级内容，一般在业务场景中对整个网站的控制以及导航功能如：Header menu、Sidebar menu 组件，如下图中 Header menu 浮在内容层之上。
内容弹层
当前任务或者内容相关的临时出现层，优先级高于内容层，一般承载当前需要临时处理的任务或者需要进行内容补充说明等功能。如：Modal（Dialog 各个平台叫法不一致）、Tooltip、Popover、Notification 等组件 。其中 Modal 是以滑出或者弹出的形式展现给用户。Modal 它包括两种类型，一种是模态内容层不可操控，被蒙版遮罩禁用，比如在业务中需要较为聚焦的分支流程操作时使用。另一种是非模态，吊起弹出层后不印象内容层操作。当然，Tooltip、Popover、Notification 都属于非模态，反馈较轻，不干扰用户使用界面。如下图的页面中的内容弹层使用了 Popover，在次页面它的功能就是加以补充说明。
随着科技高速发展，屏幕分辨率也越来越多样化对于 UI/UX 设计师来讲必须熟练的基本知识方便日常工作所需。首先我们先了解一下屏幕中的一些单位。
在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能导致开发实现稿的视觉不符合设计师心理预期，比如：相同像素尺寸的 UI 元素在低密度屏幕上显得较模糊，而在高密度屏幕上则比较清楚。同一物理尺寸（肉眼所见尺寸）下，低密度显示器的像素个数明显小于高密度显示器的像素个数。
其实像素是与密度没有关联，我们简称密度为 DP (读作 DIP，英文全称 Density-independent pixel )，它是可缩放的灵活单位，可在任何屏幕下现实相同的尺寸，如图显示，红色网格为像素密度，被放大内容为 UI 元素物理尺寸。
所以我们可以得出，DP 可以自适应屏幕的密度，不管屏幕密度怎么变化，实际显示的物理尺寸相同，DP 可以保证物理尺寸的一致性，所以 DP 是目前比较适合 UI 设计的单位。当屏幕的密度为 160 的一个物理像素时，1PD=1PX。要计算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。
关于网格
网格线(Grid Line)，网格线又称布局分割线，它是构成网格结构的分界线。一般在布局中它们是由行网格线和列网格线组成。如下图是模拟网格做了一个示意，其中橘黄色两根线分别是行网格线和列网格线。
网格轨道(Grid Track)，两个相邻网格线之间的空间。你可以把它们想像成网格的行或列。如下图橘黄色的行网格线和列网格线之间的空间既是网格轨道。
网格单元格(Grid Cell)，两个相邻的行网格线和两个相邻的列网格线之间的空间属于网格单元格。这是网格系统的一个「单元」。如下图橘黄色的行网格线和列网格线交叉处即是网格单元格。
网格区域(Grid Area)，由单个或多个网格单元格组成，它是可以用来摆放页面元素。如下图所示，橘黄色的行网格线和列网格线交叉处即是网格区域。
网格设置
在设计界面时可以通过网格定制能够使界面更加有序、整齐、规范，网格的主要用途之一是保持设计元素对齐和排序。通过建立一个网格系统，设计师可以为自己创建一个结构来适配不同的屏幕宽度。
在我制定的规范中一般会把网格的基数设置为 4，它不仅符合偶数的思路同时也能够匹配多数主流的显示设备，如中台系统的用户主流分辨率用 1440*900、1366*768、1280*800。我们可以通过设置网格规范帮助设计师快速搭建页面，使用有律可循的布局空间的设计给到开发减少沟通成本。下图所示设计布局网格由三个元素组成：列宽，间距，边距。
在 Sketch 中设置网格，在菜单栏中找「视图」-「画布」-「网格设置」-弹出浮层可设置网格大小，网格设置的基数设置成4，之后在设计界面时可按照网格基础的倍数作为组件的大小和页面元素间距分割，如下图：
我们放大页面局部大家可以看到，把网格基数设置成 4，每个网格单元格为 4*4 大小。同理，如果把网格基数设置成 8 以后，每个网格单元格大小为 8*8 大小。
界面框架内系统布局是页面所有模块的组合方式，我们定义一个页面框架中基础模块和内容模块的数量最好不超过 3 个。经过调研和归纳总结出 3 大布局类型，分别是上下布局、左右布局、T 字型布局。
上下布局布局是 Web 端运用最广泛的布局方式之一，页面内容区以 feed 流形式展现，一般用在 Web 端官网首页。设计师普遍做法是对两边留白区域为内容区并进行最小值的定义，一般定义值为 1200 较多（具体宽度要设计师如何设置栅格，后面会讲到如何设置栅格），当留白区域到达极小超过极限值之后需要对中间的内容区域进行动态缩放或遮挡，此逻辑需设计师根据业务所需而定。也有少部分设计师会设计成全屏布局，内容随浏览器宽度自适应。
其优点是页面结构清晰简单，强突出内容区，但缺点是布局的规矩呆板，变化少。设计师如果不注意合理的视觉元素和色彩细节变化，用户很容易感觉到乏味，此布局适用于层级较为简单页面。
巨量引擎（Ocean Engine）是字节跳动旗下的营销服务品牌，整合了今日头条、抖音短视频、火山小视频、西瓜视频、懂车帝、Faceu 激萌、轻颜、穿山甲等产品的营销能力，为全球广告主提供综合的数字营销解决方案。我在设计此官网时正是采用了上下布局作为页面布局，顶部导航整合了所有子页面的内容，导航下方为主要内容区并且内容定宽，当时采用此布局原因第一是因为次官网层级较简单只有三个层级内容，第二是官网更需要的是突出内容区，所有页面使用次布局更为合适。
设计师在设计重内容，轻导航类型网站是常用左右布局作为基础框架进行页面设计。此布局把系统页面分为两大模块，其中设计师常见的做法是将左侧设置成导航栏模块并且固定，常常用来控制全局内容。而右侧区域设置成工作区域或内容区，内容区可进行动态缩放。
下图为飞书沟通窗口截图，由于关系到内部信息保密性我把内容进行了模糊，从外观结构上看还是能大致了解飞书结构是采用了左右布局，整个布局结构清晰有理也是符合左右布局特点。从交互体验分析左侧属于导航区，它承载了不同功能并且固定。飞书属于即时沟通产品设计师考虑到浏览器窗口有限所以对导航设计成较小模块，而右边为聊天窗口对于业务属性分析它更为重要，所以模块较大。其导航栏固定，内容区可进行动态缩放。
T 字型布局常用在 Web 端的中台系统中，因为中台系统业务结构复杂、层级多，而 T 字型布局能够解决复杂结构的问题。使用此结构能够把页面结构清晰化，主次更加分明。设计师常常的做法是将顶部作为一级导航栏方便控制全局，二左边设计成是二级导航并且固定导航栏固定，右边的内区域可进行动态缩放（一般会把其设计成栅格动态区域），内容随浏览器宽度自适应。
下图是 Material Design 设计文档，首先简单介绍一下 Material Design，它是由谷歌的设计团队创建的一种语言，宗旨是帮助设计师们创建易用性和实用性较强的网站和应用程序，其设计理念是将现实中的物理学带入进设计中。Material Design 设计文档中的结构使用了 T 字型布局作为基础布局。页面分为了三个模块，其中顶部导航作为页面一级内容进行全局控制，接下来左边为侧边导航作为二级内容控制页面，右边是内容区满足用户使用浏览。从放眼望去整个页面架构清晰明了。
以上为 Web 最常见的三大布局，但是需要大家在实际的工作中灵活运用。设计师在日常工作中可能会遇到更为特殊的业务场景，设计师可以通过整理基础模块然后分析其业务的信息框架，将模块进行相互组合、嵌套归纳可以总结出更多的 Web端布局框架并落地到业务中。
刚刚在定义布局模块中已经分析过了三大布局类型，接下要分享的是 UI 设计师更为关注内容「网页栅格」。网页栅格也是设计师口中常常提及的栅格系统。其实网页栅格系统是从平面栅格系统中发展而来，它延续了平面设计的方法与风格，在网页中使用栅格能够使得网页信息展现更加清晰明了、美观易读。
首先网页栅格系统基本由是栅格总宽度/页面总宽度（W）、一个栅格的宽度（a）、栅格与栅格之间的间隙（i）、一个单元的宽度（A）、外边距（M）组成。
1. 列宽
一个栅格的宽度（a），我们称之为列宽，一个列宽包涵了N个网格单元格（Grid Cell）我们也可以把它看成一个网格区域(Grid Area)，在上面我们已经讲到过网格的内容，主要目的正是为栅格做铺垫。其中我把一个网格单元格设置为4（原因在网格中也解释过，如果忘记的同学可以爬楼看下）。由此可见列宽非固定值，这样可以使内容自由适配任何屏幕尺寸。在栅格中列宽由屏幕尺寸决定。
2. 水槽
栅格与栅格之间的间隙（i），我们称之为水槽，一个水槽宽度大于等于1个网格单元（Grid Cell）。在栅格中水槽为一个定值，宽度可以是N个网格单元，如网格单元格设置成4，那么水槽可以是4、8、12、16…N*4。
3. 栅格单元
1个列宽+1个水槽宽度即一个单元的宽度，一个栅格总宽是由N个栅格单元组成，次宽度不固定，由屏幕尺寸决定。
4. 栅格总宽
列宽+水槽再成以N即是一个栅格的总宽，公式为：W=(A*n)-i。
5. 栅格设置
经过调研我们得出常见的栅格分为 12 列栅格系统和 24 列栅格系统。其中 12 列栅格系统在流行的前端开发开源工具库Bootstrap 与 Foundation 中广泛使用，适用于业务信息分组较少、业务结构较简，单个盒子内信息体积较大的中后台页面设计。24 等分的栅格系统适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计；相对 12 栅格系统，24 栅格系统变化更加灵活，更适合内容比较多样复杂的场景。如下图分别是 12 栅格系统（左）和 24 栅格系统（右）。
6. 小结
在栅格系统结合布局结构和网格做了我做了一些知识结合，其实前面所讲的网格版块和布局版块都是为栅格做一个铺垫，利于同学们更加深入的了解网格、布局、栅格三者的关系。
系统布局只是网页中的基础部分，但也是核心内容，一个产品布局需要根据其业务属性决定。布局搭的好相当地基打得好，但是同时在对美感的追求之上，还应当结合可用性来看待设计。在实际的工作中肯定还会遇到各种形形色色较奇葩的需求，所以希望这篇文章能够做的不是限制而是启发，大家可根据此次分享内容能够进行举一反三利用到实际的工作当中。
文章来源：优设
蓝蓝 http://www.lanlanwork.com