对于大多数网页设计师来说，你的成品需要在各种类型和尺寸的设备上进行外观和工作，这是显而易见的。创建多个设计来实现同一目标的日子已经一去不复返了。
这一切都归结为选择响应式或自适应设计模型，以实现任何规模的一致网站设计。
但是响应式和自适应之间有什么区别？它们真的只是一回事吗？让我们来看看并解释你需要知道的一切。喜欢记得关注UI范，每天更新，打造你的知识武器库！
1.与设备无关的设计的两种方法
2.响应式设计
现在比以往任何时候都更重要的是，我们正在设计旨在沿着不同体验的梯度观看的作品。响应式网页设计为我们提供了一条前进的道路，最终让我们能够“为事物的潮起潮落而设计”。
而这正是我们目前关于响应式网站的思想学派的起点。
无论设备或浏览器如何，该设计都适用于任何视口尺寸。
响应式设计对搜索引擎友好（谷歌甚至推荐它）。
允许设计中的很多精确度，以便设计师可以调整任何或每一个细节。
高度移动友好的设计选项。
与你可能用于网站项目的大量主题、网站构建器和工具兼容的常见设计实践。
该设计将具有统一和无缝的外观，这将提升整体用户体验。
320 像素
480 像素
760 像素
960 像素
1,200 像素
1,600 像素
自适应设计最常见的用途是将旧设计转换为更适合移动设备的设计。这并不是说它不会发生在新的开发中。
5.自适应设计的优点
由于配置错误，您在设计时可能会遇到一些不太常见的设备（例如平板电脑）的问题。
自适应设计可能是劳动密集型的，需要更多的开发时间和成本。
由于内容重复，搜索引擎在使用自适应网站时会遇到更多困难。
有一个偷偷摸摸的现实，你设计同一个网站六次。
文章来源：站酷 作者：UI范
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编者按：资深产品设计师 Taras Savytskyi 将自己在初创团队中的设计经验浓缩成为今天的这篇文章，如果你也是设计团队中唯一或者主要的设计负责人，需要考虑到设计系统的问题，那么这篇文章的6个总结，应该能够给你不少帮助：
成为公司当中唯一负责产品设计的设计师，其实并不是一件容易的事情。你可能会非常忙碌，因为你需要处理很多事情。你需要考虑产品的设计，交付物料，和研发人员协作，在沟通会上做QA，做用户访谈等等。
此外，你可能还需要保持你的设计技能持续精进。比如 Figma 或者 Sketch 更新了新的功能，推出了新的插件，你可能需要持续关注。我们通常会使用 Figma 来作为主要的设计和协同工具，所有的设计、探索、头脑风暴都在其中完成。
我加入 Statflo 之后不久，作为公司唯一的设计师，我需要设计一个全新的 APP，在这个过程中我需要设计一个全新的设计系统，帮我足够快速地创建后续的原型。
刚开始的时候，你不需要太多的素材。你可以直接调用绝大多数的原子组件，比如按钮、下拉菜单、表单、字体、配色，等等。默认初始状态的样式无关紧要，因为后续点击几下就能够快速调整样式。
但是这也意味着，你需要在第三方设计系统当中，找到重要的、足够灵活的、合适的组件来套用。你可以从下面几个设计系统开始着手：
免费： Ant Design Open Source, Lexicon DSL
付费：Tetrisly , Venus Design System，73px
在此之后，你如果要继续推进你的设计系统，你需要首先关注几件简单的事情：配色、排版和基础组件。
完成这几个部分能够帮你更快地完成整个体系的搭建。比如你预设了不同状态的配色，那么当你完成某个UI组件的默认状态的设计之后，可以快速添加其他状态的样式。
又比如，如果你不确定在输入字段当中使用什么图标，那么你只需要创建一个 16×16 的正方形，使用灰色填充，作为占位符，等后续图标素材确定之后，再填充进去就好了。
当你是初创团队中唯一的设计师的时候，你有很大概率需要自己构建一套设计系统。如果你想在这件事情上节省时间，那么最好的方法，就从你当前正在做的这一个 UI 组件开始，将其中所有的元素转化为固定的组件，逐步拓展出设计系统。
以这种方式来执行，可以节省大量的时间，并且这种方式能够帮你更快明确哪些元素在一开始可能就是重要的。
在理想情况下，你的设计流程是绘制小元素，然后逐步组件成为你所需要的组件，这样的处理机制让你无需花费时间来反复更新组件的设计。
不过，以这种方式来创建设计系统的时候，你可能会碰到一个问题：你可能会忙于设计，而忘记将创建特定的组件，相反可能会复制一堆完全相同的画板。这个时候，手动撤销操作可能是一件极度麻烦和无聊的事情。这个时候，你就需要一个专门解决这种问题，这个插件名为 Master，创建者是 Gleb Sabirzyanov，它可以帮你将这些重复的画板转化成为一个固定的组件。
但是这还不够。如果你执行的操作足够多，这些你所复制的元素可能已经应用多个画板和页面当中，这个时候，你需要借助名为 The Similayer 的插件，来帮你搞定相似组件的识别问题：它可以一键识别出分散在各处相同的元素，然后你可以将他们转化成你所指定的 UI 组件了。
有时候项目和项目之间是有间隔时间的，这个时间段就特别适合你去覆盘之前设计的组件，将其逐步改进融合成为一个系统。相信我，你在这件事情上所花费的时间，将会在你下一次创建新的功能和组件或者原型的时候，得到回报。
我一直试图在自己每周的日程表当中，腾出几个小时的时间专门来做这件事情，帮我完成我的设计系统的增量更新和迭代。
在创建设计系统的过程中，尤其是当你在不同的项目过程中，各种组件总是没法正确的命名。根据我的经验，在设计的时候，怎么命名方便怎么来其实是很合理的，一开始一定不要纠结，留着在后面的阶段再行解决都好，之后单独梳理命名、路径、结构、嵌套等等关系，比起你一开始做某个小组件的时候就纠结这些事情要更加合理，也更加方便。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标在 UI 中扮演着重要的角色，并且已被证明是过去几十年 UI 设计趋势的象征。在图形用户界面的发展早期，图标在计算机的显示技术限制内尽可能仔细地模仿现实世界的物体；它们旨在将用户体验从现实世界链接到计算机世界。这可以从苏珊·卡尔 (Susan Kare)为第一台麦金塔 (Macintosh) 设计的图标和微软 (Microsoft) 在 Windows Vista 和 7 中的拟物图标设计中看到。
当用户界面从这种拟物风格转变为 Windows 8 和 iOS 7 的“扁平”风格时，图标设计也转变为单色、线性风格。随着 Android 12 的发布和谷歌新版设计系统—— Material You (或 Material Design 3) , 所有主要操作系统现在都使用这种风格。
但是为什么各大设计系统都使用这种风格的图标呢？设计师意识到图标不仅仅是风格统一、为功能补充说明的辅助图形——设计师制作的图标等同于印刷师制作的字体。 这让设计师意识到图标对于用户体验来说和字体一样重要。
图标的设计考虑与字体类似，并且经常出现在文本旁边。
— Material Design 3 指南Iconography [旨在] 与 San Francisco 系统字体无缝集成。
— Apple 人机界面指南
Apple 的 SF Symbols 就是最好的例子：它的图标与系统字体具有相同的九种权重，并与文本的大写高度对齐。这也意味着图标可以遵从用户对更粗的 UI 文本的可访问性设置。
Apple 的 SF Symbols 图标集设计为与系统字体相同的九种权重。资料来源：苹果
它们还与系统字体的大写高度对齐，以更好地补充文本。资料来源：苹果
Uber 的设计团队也绘制了字体图标来完善他们的 UI 字体 Uber Move，设置了三种不同的强调程度。
资料来源：优步
因此，为什么字体图标是单色的并用轮廓绘制的原因就很清楚了：它们不是模仿物理对象，而是模仿我们的书写系统。现代字母，尤其是拉丁字母，基本上是由线条而不是填充形状组成的。他们从类似物理对象（如埃及象形文字）的象形文字到更抽象的物理对象表示进行了类似的转变。例如，你不需要画一只鸟来谈论一只鸟；您只需写一组表示“鸟”的字母或符号即可。
通过设计类似于字体的图标，设计师认识到图标是向用户传达信息的重要媒介。图标可以打破语言障碍，而文本对于那些不熟悉图标的人来说仍然是必不可少的。将两者设计为看起来相似可以减少在阅读文本旁边的图标时的认知负担。
默认为字体图标的另一个好处是填充的图标现在可用于表示状态或强调，如粗体文本。例如，Material Design 3 中的“活动状态用填充图标表示” ，Apple 在他们的人机界面指南中建议“使用填充变体来表示选择”或“赋予符号更多视觉强调” 。Twitter 2021 年的重新设计更进一步，活动页面仅通过填充图标和粗体文本进行区分，没有任何颜色变化。
Twitter 仅使用填充图标和粗体文本来区分当前页面。陪审团仍然不确定这是否足够容易访问。
未来不一定能够被准确预测，但是看看字体系统的历史，已经有了明确的关于什么图形代表什么意思的规范：符号“a”总是表示“a”，字母“ant”表示蚂蚁。这些符号的绘制方式仍然存在差异（大写字母 A 可以有衬线或没有衬线），但它们在不同字体中的外观基本相同。
图标似乎也朝着这个方向发展——上面的“添加文件夹”图标在苹果、谷歌和微软的图标集上具基本相同的设计：一个带有“+”符号的文件夹。随着图标在 GUI 中变得越来越普遍，用户对于什么符号代表什么意思的认知越来越趋同，就像字体一样。
如何才能使用字体图标？在您的应用程序中使用图标时，您应该使用使用您正在使用的字体设计的图标集：如果您使用的是系统字体，这很简单，现在系统字体都具有系统图标字体。但是，如果您使用另一种 UI 字体，则可能没有专门为该字体设计的图标集。使用普通的线性图标集就足够了，例如开源Feather 图标或Iconic.app「1」。如果你像我们一样使用 Material 图标，你可以轻松切换到字体图标。（似乎 Google 现在已将此样式作为 Material Design 3 的默认样式。）
个性化正在成为 UI 设计中越来越重要的元素。虽然自 20 世纪 90 年代以来就存在自定义壁纸和主题，但设计人员现在正在寻找更多方法来个性化整个系统的 UI，主要是用户选择的壁纸。谷歌的 Material Design 博客说得最好：“用户在物理和数字世界中使用个性化的图像定制他们的桌面，并提供舒适和快乐。” 壁纸是用户首先看到的东西，并作为 UI 的背景。因此，让 UI 的其余部分适应此元素是轻而易举的事。
将壁纸融入 UI 的技术已经存在一段时间了，从 Mac OS X 的 Aqua 界面中的半透明 Dock 和菜单到 Windows Vista 中的半透明窗口标题栏和 7 的 Aero Glass 主题。众所周知，iOS 7 为其 UI 的许多部分带来了模糊的背景，整个屏幕（如通知中心和控制中心）都使用了可以透出用户壁纸的毛玻璃效果。
最近，墙纸开始影响几乎整个 UI。当 Apple 在 macOS Mojave 中引入暗模式时，他们在基于壁纸的窗口背景中加入了一种色调，称为桌面色调。根据人机界面指南，它“帮助窗口与其周围的内容更和谐地融合在一起。”
后来他们在 Big Sur 的主要重新设计中扩展了这一点，将桌面着色也应用于光照模式：
Windows 11 在其 Mica material 设计系统中引入了类似的元素，他们的设计指南将其描述为“一种不透明的材料，它结合了用户的主题和桌面壁纸，以创建其高度个性化的外观。” 它还使用此色调作为当前活动窗口的标志。
将它提升到一个新的水平是 Android 12 中的 Material You，它为应用程序的背景、按钮和其他控件的明亮强调色以及更中性的文本颜色着色。整个调色板由每个用户的独特壁纸生成。
这是他们新设计理念的一个关键元素，“如果形式跟随感觉，而不是形式跟随功能呢？” 这是对 UI 设计现状的彻底拒绝，它寻求一种“通用”设计，具有技术上最先进的界面来满足用户需求。看看其他人是否效仿这种哲学会很有趣。
Material Design 团队在他们的公告中遗漏的是他们如何做到了这一点，尤其是因为他们说他们“必须找到一种方法，让任何颜色组合都具有可访问的对比度 [...]，而无需对每一种颜色进行测试。”深入了解 GitHub 上最近发布的Material color 实用程序存储库，揭开所有谜团：
Material 团队基于CAM16和CIELAB（或 LAB）颜色外观模型构建了自己的颜色系统：“色调、色度、色调”或“HCT” 。CAM16 是 LAB 的继任者，旨在匹配人类对颜色的感知方式。
这些模型的关键是“色调”或 L* 值，它描述了颜色的感知亮度或亮度，L* 值 0 表示黑色，100 表示白色。这在创建可访问的调色板时非常有用，可确保颜色根据感知亮度具有足够的对比度。
在网络上，WCAG 2 指南规定正文的最小对比度为 4.5:1。直接使用感知亮度作为描述颜色的值使这变得更加直接，正如材料团队解释的那样：“与对比度不同，测量 L* 中的对比度是线性的，并且计算简单 [...] 50 的差异保证了对比度比率 >= 4.5。”
有了这些知识，剩下的就是生成具有不同色调或 L* 值的颜色调色板，并对其应用任何色调。然后为 UI 元素使用足够对比的对。例如，一个按钮可以有一个 L* = 40 的背景色和白色文本 (L* = 100)，它很容易通过最低对比度要求（L* 差异 > 50）。
这是一种轻松生成可访问颜色的强大技术，但它不需要材质颜色实用程序。LAB 可以表示为 LCH（亮度、色度、色调），类似于 Material 的 HCT，其中 L 值可以用来计算对比度。（这比现有的 HSL 等表示更好，即使亮度值相同，HSL 的感知亮度也会有所不同。）您可以在本文中了解有关 LCH 的更多信息。
（此外，LCH 正在作为 CSS Color Level 4 的 一部分进入 Web 标准！因此您可以 lch (40% 44 49) 在 CSS 中编写而无需将其转换为 HSL 或 RGB，但目前仅在 Safari 中支持。Lea Verou，他编写了上面链接的文章是 W3C CSS 工作组的一部分，正在开发这个非常标准。）
因此，您只需要一个起始颜色，将其转换为 LCH，然后修改 L 值以制作调色板。然后使用一对亮度差为 50 或更多的颜色，以确保可获得的对比度。
我们可以在下面的材质颜色系统中看到这种技术是如何使用的：调色板中的色调与 LCH 亮度值相匹配。（他们还修改色度（类似于饱和度）和色调略微跨色调。）我制作了一个小型网络应用程序，显示由材料颜色实用程序生成的调色板，以获得下面的 LCH 值。
在 Material 的 HCT 之前，Lyft和Stripe的设计团队探索了同样的问题，Stripe 也最终使用了 LCH。我已经将他们的两个探索联系起来，这是极好的阅读。
有一些工具可以在 LCH 之间进行转换：
Lea Verou 制作了一个LCH 颜色选择器，
在Colord网站可以让你从LCH转换为十六进制或RGB，
如果您有 Mac，Sindre Sorhus 的System Color Picker非常棒，而且
Accessible Palette使用 LAB/LCH 生成调色板。
我使用这种技术为Rowy添加主题，允许用户选择自己的强调色，同时保持可访问性并为关键 UI 元素着色。源代码具有我使用的确切 LCH 值。
当你想要设计一个带圆角的“卡片套卡片” UI 时，内部的卡片应该具有较小的半径，区别在于间距的大小。如果使两者的角半径相等，则内部卡片看起来不合适。这种技术在数字设计中已经有一段时间了，甚至是 CSS3 规范的一部分。
这也存在于硬件设计中：屏幕的圆角与iPad Pro和 iPhone X 设计上的设备框架相匹配。在带有圆形屏幕的 iPhone 上，底座与屏幕的曲率相匹配——Apple 甚至在软件中提供了精确的点大小。您还可以在视频播放器中看到与屏幕曲率匹配的其他元素。
奇怪的是，这个原则不适用于使用单个圆角半径的 UI 元素。在 Material Design 2 中，对话框和内部按钮的圆角半径都是 4dp，尽管它们之间有 8dp的间隙。macOS 在优胜美地时代的设计中类似，Windows 10 几乎所有 UI 元素都使用方角。
但是，对于 Big Sur 和 Windows 11，通过增加较大 UI 元素的角半径来近似这种效果。在 macOS 中，按钮的圆角半径现在为 5pt，对话框窗口的圆角半径为 10pt，而且它们都使用“平滑角”来匹配 Apple 硬件的角。与此同时，Windows 11 以圆角以前的尖角而闻名，按钮为 4 像素，窗口为 8 像素。
总体而言，用户界面似乎也变得更加圆润：
Big Sur 增加了圆角半径，使用了平滑的圆角，看起来更圆润；
iOS 15 引入了带有全圆角的按钮样式；
Windows 11 移除了大多数 UI 元素上的尖角；和
与之前所有版本的 Material Design 形成鲜明对比的是，Android 12 增加了对话框、导航抽屉和完全圆角按钮的半径。
将最小的 UI 元素设置为某个基本圆角半径，然后将较大的包含元素（如对话框）设置为更大的圆角半径。尝试使它们与较小元素之间的距离成比例，或将较小的角半径加倍以进行简化。这是它在我们的应用程序中的外观，角半径加倍：
最初开发字体时，它们是用金属蚀刻的物理设计，具有固定的字体大小。当排版师为不同的尺寸设计相同的字体时，他们通过改变间距和比例等方面来将设计修改为最佳：这被称为光学尺寸。您可以在本文中了解有关光学尺寸的更多信息。
可变字体是一种基于 OpenType 的新字体格式，允许设计人员自定义字体设计的特定“变化轴”（或变量），例如非固定粗细、倾斜和光学尺寸。您可以在这个优秀的可变字体入门 中了解有关可变字体的更多信息，它使用Roboto Flex，这是谷歌 Roboto 字体的可变字体扩展。
2021 年，所有主要操作系统现在都使用这种可变字体技术来实现 UI 排版中的光学大小：
Apple 的系统字体 San Francisco于 2015年发布，具有两种光学尺寸：“显示”适用于 20 磅及更大的尺寸，“文本”适用于所有更小的尺寸。2020 年，Apple 将这些字体发布为单一可变字体 SF Pro，以光学尺寸作为变化轴。Apple 的系统图标 SF Symbols也使用可变字体技术。
对于 Windows 11，微软将其系统字体 Segoe UI 重新设计为Segoe UI Variable，具有自己的光学大小轴。
作为 Material Design 3 的一部分，Google 引入了GS Text 和 GS Variable，这是其企业字体 Google Sans 的演变。
另外值得注意的是：这些字体都是不同风格的无衬线字体。旧金山是新怪诞的，Segoe是人文主义者，而Google Sans是几何的。
可变字体是一项相对较新的技术，生产它们的成本很高，所以资源没有那么多，尤其是在免费和开源领域。到目前为止，我发现的唯一具有光学尺寸的开源可变字体是Roboto Flex，但它似乎还没有完成。Rasmus Andersson 被广泛使用的 Inter 字体正在进行 OpenType 的 Bata测试。同时，为突出的标题使用更具表现力的字体可以提升您的设计。对于Rowy，我在小文本中使用 Inter 作为字体，在品牌表达的标题中使用 Space Grotesk。
扁平化设计已经存在了十多年，它的主要目标是通过剥离 UI 元素的杂乱和装饰来专注于内容。在iOS的15设计指南状态，“明快，漂亮的界面帮助用户了解内容以及互动。”
最新的操作系统版本通过更少的层级来迭代这个概念。导航栏在iOS 15和Android 12 中是透明的，并在您滚动之前融入背景。
在桌面上，macOS Big Sur 混合了标题栏和工具栏，直到您滚动或悬停在栏上几秒钟。Windows 11 中的一些应用程序根本不区分标题栏，而是将内容放在一个独特的卡片式层中。
这些元素都实现了相同的目标：减少周围的视觉混乱并提升内容的视觉突出度。
如果您有一个停靠在边缘的导航栏，请在不需要区分时将其混合到背景中，例如当用户尚未滚动时。如果您有主要内容，请将其放置在与背景不同的微妙层中。我们使用了一个 React UI 库 MUI，它使我们可以轻松实现导航栏仅在滚动时区分的效果：
同样，更多的 UI 元素被插入，不再占据其容器的整个宽度。当 iPhone X 引入屏幕上的主页指示器代替主页按钮时，Apple 更改了他们的指导方针，规定带有圆角的嵌入式按钮，避开iOS 7 中引入的全角按钮。许多其他固定到的元素的最佳实践已更改屏幕底部适应新的 iPhone 设计。
在 iOS 15 中，Apple 正在更多应用程序（如“设置”和“邮件”）中插入“表格视图”。这似乎是为了应对 iPhone 屏幕尺寸不断增长的情况，指南指出，“在紧凑的环境中，插入的分组表格可能会导致文本换行，尤其是在内容本地化时。”
在 macOS Big Sur 中，他们将此设计扩展到邮件中的列表，与iPadOS 设计一致。它也出现在整个系统的菜单中，包括菜单栏。请注意，点击目标延伸到菜单的边缘，就像之前的全角设计一样。Windows 11 在其菜单和导航项中共享相同的样式。Android 12 的系统 UI 和应用程序通常也遵循这种风格。
这种风格可以提高可访问性，因为元素和它们的容器之间的分离现在扩展到所有四个方面，但我还没有发现任何支持这一点的研究。当搭配和谐的圆角时，它可以使菜单看起来更现代。
设计师们正在添加更多的方式来显示状态，而不依赖于颜色，这对于色盲的人来说是无法实现的。以下是我注意到的一些例子：
Spotify 在 shuffle 和 repeat 按钮下方添加了点，而不是在 2017 年仅仅依靠改变它们的颜色。
Material Design 3 显示一个药丸状指示器，并在导航栏中为活动页面使用填充图标。
Windows 11 向列表和导航窗格中的选定项目添加了一致、独特的行。
这决定了重新设计Rowy 的切换按钮：
在 Android 12 中，开关现在在主要操作系统中具有相同的基本设计。这使用户可以更轻松地在这些平台之间切换并减少认知负担。
我在所有这些设计决策中注意到的首要主题是设计师将用户界面设计置于透视之中。他们敏锐地意识到数字界面在哪些方面适合人类体验并与物理世界互动。
轮廓图标模仿文本的融合认识到图标在通信中的重要性。
越来越个性化的界面元素——尤其是你所采用的材料方向——承认人们喜欢用自己的方式制作东西，包括他们每天使用的技术。
和谐的圆角和插入元素的灵感来自实物和工业设计，因此我们的软件与硬件更紧密地匹配。
使用具有光学尺寸的可变字体可以追溯到排版的起源，并且与颜色以外的差异化元素一起，它们提高了所有人的可用性，尤其是残障人士。
更小的事情也有帮助：减少视觉混乱以提升内容使用户能够专注于他们想做的事情。并且使用标准的开关设计消除了确定 UI 元素功能所需的任何认知负担。
这种思维背后的UI设计使我们很好地起来为下一代对AR / VR计算为中心的虚拟实境，在虚拟实境一经验将不得不回答他们是如何改善人类的经验和交互与物理世界。设计人员已经在研究如何使设计系统适应这种变化。看看上面的决定，应用色彩科学（Material 的 HCT 考虑到观看条件）和提升内容的插入元素有助于这些 UI 元素从 2D 世界过渡到 3D 元世界。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
相比于去年 iOS 14 带来的小组件和 APP 资源库的功能，今年 iOS 15 的升级幅度似乎确实没有那么大。
接下来就从设计师的角度来看看 iOS 15 带来的视觉和体验的变化。
iOS 15 对通知中心进行了视觉排版上的优化，放大了 APP 图标并置于卡片的左侧，让用户可以通过图标更轻松的区分和查看消息。
消息小卡片的圆角也更加圆滑，圆角接近于与控制中心按钮的大小，这种圆角更大的设计也更容易将用户的视线过渡到内容中心，同时也使得 iOS 系统设计风格能够更加一致。
在通讯类 APP 的推送中，采用了联系人照片 + APP 小图标的组合形态，增加信息来源的辨识度，以这种形式更清晰地告知用户，所收到的信息的来源和属性。（目前国内的 APP 例如微信、飞书的消息通知等都还没有完全适配）
值得注意的是，iOS 15 还可以根据用户设置的时间来定时推送，这些定时推送会构成一个较大的通知摘要卡片，而摘要的内容会进行智能排序，这种机制将会对设计和运营有较大的影响（所以 APP 通知推送会因为这种机制形成新一轮的内卷么？）
随着营销推送的内容越来越密集，用户承受的信息压力也越来越大，苹果也在尝试构建更多细分场景下的推送管理，在 iOS 15 中用户可以选择让 APP「静音一小时」或者「今天不再推送」来避免干扰。
新版 Safari 有较大的改进，iOS 15 将顶部的地址栏和底部的工具融合到了屏幕底部，成为了一个悬浮的交互控件，并在视觉上进行了简化，右滑动地址栏可以在不同的页面中快速切换，向上轻扫地址栏，则可查看所有打开的标签页，这种在底部操作的交互方式也更符合大屏化的趋势。
这种左右滑动和向上轻滑也明显能感觉到是从 iOS 整个系统的手势操作中迁移而来，而这种手势可以极大的降低用户的学习成本。
在页面向下滚动时，悬浮的地址栏和工具栏会自动隐藏到底部，界面看起来沉浸感也更强。
这种交互方式的变化逻辑也符合交互设计中的费茨定律：
费茨定律
任意一点移动到目标中心位置所需要的时间，与目标距离正相关，与目标大小负相关
这里举个例子来简单理解一下，手指当前的位置与按钮的距离 D 越长，所需时间越长；按钮的宽度 W 越大，所需时间越短。应用到产品设计中就是将按钮放置在离手指较近的地方，比如屏幕底部易操作区域，完成任务的时间也就会越短。
夸克浏览器同样是将输入框以及一些常用操作置于底部，这是因为我们正常握持手机时，大拇指离底部更近，所以需要进行点击操作的时底部的输入框操作起来更方便，也更快。
Safari 的这种交互方式在移动操作系统已经有了一些案例，三星的 one UI 以及安卓阵营中的众多产品也都逐渐往这种大屏化的交互逻辑发展。
此外，Safari 采用了新的标签栏设计，同时可以对繁杂的标签页进行整理和保存，标签组支持多设备间的无缝同步，在任一设备上的改动，都能及时同步到所有设备上。
在使用 iOS 15 的过程中能清晰的感知到，iOS 整很多界面卡片设计更加和谐了，我们最常用的设置页就整体卡片设计上做了区块化和圆角化的处理。要比之前系统直线分割的界面柔和许多。
这种通过使用大留白、两侧缩进的卡片设计使得界面所呈现的功能更加清晰，也更能够突显内容，同时和苹果自家产品 App Store、Apple Music 等产品的设计风格更加靠近。
同样天气 APP 主界面也做了布局的改动，增加了卡片化的设计，信息组织也更加直观清晰。天气 APP 头部的天气背景也进行了重新设计，动画背景更加真实，能够准确地反映出太阳的位置和降雨情况，相比之前会美观很多。天气 APP 也增加空气质量、温度、降水强度，空气质量地图等诸多功能。
除了通知、Safari 浏览器、天气、钱包、地图等常用功能的更新外，iOS 15 新版本在其他方面也做了更多功能性的升级，这里就来简单看下有哪些重要的更新。
1. Live Text
首先就是 iOS 15 中为照片带来了「实况文本」功能，在这个功能的帮助下，在相册里长按图片，就会弹出复制、查询、翻译和学习等选项，这个新功能估计也是 iOS 15 更新最实用的功能之一了~（这个功能在锤子手机的“大爆炸”中也有）
Live Text 还可以识别照片的各种元素，比如地标、动植物和花卉种类等等。配合 iPhone 自带的系统搜索——聚焦搜索（Spotlight），根据文字元素来搜索图片。
2. 专注模式
iOS 15 加入了「专注模式」，能助你更好地专注重要信息，由之前的「勿扰模式」升级而来，包括勿扰模式、工作模式、个人模式以及睡眠模式。每个状态可以设置不同的显示通知，并可与其他设备同步。
3. 大闹钟回来了
在此前的 iOS 14 中，设定闹钟的控件改为了数字输入，在随后的迭代中又改为了很小的滚轮输入，这种过小的交互空间受到了很多用户的吐槽。
iOS 15 中苹果又将闹钟设置改为 iOS 13 的大滚轮，随手上下拖动拨盘就轻松的设定好闹钟了。
4. 桌面小组件
不知道小伙伴有没有发现，在 iOS 14 中桌面重叠的小组件没法拖动出来，只能手动删除再重新添加。在 iOS 15 苹果就解决了这个问题，小组件现在可以从堆叠状态移出，同时可以选择智能轮换和小组件建议是否打开。
桌面还有一项大的变化就是可以整页移动了，相比 iOS 14 只能一个一个拖动 APP，整页的切换和隐藏大幅缩短了 APP 布局困难者的“编辑”时间。
此外，iOS 15 相机和天气的图标也进行了一些细微调整。“健康” APP 中新加入了健康趋势，其中包括静息心率、睡眠和有氧适能，持续观测健康状况的变化。FaceTime 中也增加了空间音频、人像模式、语音隔离、同播共享等功能。相册增加了 EXIF 参数显示等。
除了系统及界面以外，iOS 在 Human Interface Guidelines（界面设计指南）的内容上也有了一些更新，比如新增了包容性的设计原则，SF Symbols 3.0 图标的新增，以及新的空间交互的设计。更多关于 iOS 人机界面设计指南可参考 ：https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
总的来说，虽然修修补补又一年，但 iOS15 系统在细节设计以及新功能上确实提升了用户体验。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当我们设计Web表单时，往往用最直觉的设计经验本能驱动我们去解决一些看似在界面设计中最简单的问题，但每每到细微之处，又会有无数疑问从细节中冒出来给我们的设计造成困扰。
例如：在表单界面Label（标签） 和 Input（输入框） 上下还是左右排列合理、Label要不要加冒号、输入框到底多宽合适等等......
以上这类问题看起来并不影响用户完成任务，很久以来也少有人关心这些细微之处会不会对用户有什么影响。
以至于，我表达想写一篇探究这些细节的文章时，同事会偷笑说：你都开始研究标签末尾要不要加冒号了吗......，太冷了——真是个冷知识！
确实如此，这些偏门、细碎的内容，鲜少有人会去留意和思考。因此我在写下这些分享内容时期望可以达到目标是：“冷知识虽然冷，但有用”。用我了解的这些表单设计冷知识：启发你的冷思维、引出你的热思考。
话不闲聊，我们开始讨论第一个问题：
///
01.标签末尾要加冒号吗
有个表单细节不知道你有没有想过，标签末尾是否要加冒号？
这个问题在我前团队发生过激烈争论，有同事说：“不要加，占用间距，而且没人会留意它......”,也有人说：“要加，从含义上讲，冒号的作用就是提示上下文或总结上下文的停顿。加上之后能更好表示标签与输入域的关联......."。
听起来好像都有些道理，那到底谁更对呢！
首先，我们追溯一下 Web 发展史，早期可访问性核对清单中通常坚持要标签带冒号，因为屏幕阅读器一度必须依赖各种技巧才能理解标记不明的表单。
而随着技术发展，Web表单使用“label”标签（tag）可以做正确的标记，那么屏幕阅读器就能通过标记（markup）把标签（label）和相应的字段对应起来则无需再借助冒号。
不过在客户端又有些意外！曾经 Windows Vista 指南中明确要求使用冒号， Mac Aqua 也有此要求但规则会稍灵活一些。这种情况是因为某些情况下屏幕阅读器在桌面环境与可阅读源代码的网页标记相比会遇到一些困难，桌面环境不会直接显示代码。也是这个历史原因，造成 Vista 和 Aqua 各自都有大量其标签包含冒号的历史表单。因为实在没有必要把它们全部改掉，直到今天客户端的表单依旧延续这一规则。
通过Web发展史我们明白表单标签带冒号的产生是为了解决早期屏幕阅读器的识别，如今的屏幕阅读器技术已转变为识别标签的底层代码，无需借助这种形式了。所以从这点来看要求标签带冒号已经站不住脚了。
那从情感角度分析标签带冒号的是否对用户体验有影响呢？
回到最开始，我和同事们的争论……
先简单说下答案，无任何影响！
在《Web表单设计·创建高可用性的网页表单》中，作者（卡罗琳·贾雷特）曾经做过大量的表单测试，最终证明从未有一名用户谈论冒号是否出现，即使是有些在其他环境中很介意标点符号的人似乎在线上表单中也未曾注意到。
从以上两个角度不难发现，无论是从技术发展还是情感体验，都证明可不必要求表单带冒号；因为可用性访问清单不再有这样的要求，用户研究也证明几乎没有人会留意表单冒号是否出现。
这样的结论，看似表单带冒号是失败了……，但这并不妨碍它作为一种习惯或传统延续至今，无论在客户端还是Web设计系统中仍然常见。例如：苹果电脑的Mac系统，国内阿里的Ant Design Web设计系统。
因此，得到以下几点建议：
如果你希望自己的网页表单与流行的桌面环境保持一致，请使用冒号。
如果你已有大量使用冒号的表单，请保持继续使用下去。
如果你在建立一个新的系统，你也可以索性抛硬币决定，不过要严格遵循一种方法。
///
02.哪种标签对齐方式更好
在表单中标签与表单域的对齐方式，如果你的团队已有明确的规范和使用场景，你只要拿来主义即可。可如果某天由你主导定义一个新的表单规范时，不知道你会不会重新考虑哪种标签对齐方式更好，怎样区分使用场景！
通过科学实验发现，无论是在眼动仪的热图，还是在许多可用性测试的观察结果中，用户在填写网页表单时视线主要集中在输入框的左侧。他们的视线几乎不会落到输入框的右侧，甚至都不会瞟上一眼。
以此为基础，我们在网页表单设计中有3种最常见的标签对齐方式：顶对齐标签、右对齐标签和左对齐标签。你可能会说还有混合对齐标签、内联标签、图标标签等，这些确实存在但并不是最核心的几种对齐方式，它们基本是在这3种形式上变化，不脱离本质。
下面我们逐个分析一下：
1.顶对齐标签：
马泰奥·彭佐从2006年7月进行眼动研究发现，从标签移动到输入框只需50毫秒。比左对齐标签快了10倍，后者需要500毫秒；比右对齐标签方式快2倍，后者高达240秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。
优势：
最利于减少表单填写时间（标签和输入框位置最为靠近）；用户视线固定，动线一直向下（清晰的完成路径）；节省大量横向空间（可用于以多种方式组合的相关输入框）。
劣势：
占用额外的垂直空间（如果可提供使用的垂直屏幕空间较小，应当谨慎使用顶对齐标签）；建议使用输入框50%至75%的高度作为相邻输入框间距。
适用场景：
希望用户快速填写表单，完成任务；同时，当输入项存在主次之分时，对标签扩展性要求高。
2.右对齐标签：
如果要尽量减少表单占用垂直屏幕空间，右对齐能提供快速完成时间。马泰奥·彭佐的眼动研究发现，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在170毫秒和240毫秒，而填写完成时间比左对齐快2倍。
优势：
标签与输入框相邻（方便快速填写）。
劣势：
右对齐布局造成左侧不齐，影响了快速游览表单的效率问题；若标签文字宽度变宽，右对齐还存在灵活度问题。
适用场景：
既要减少垂直空间，又要加快填写速度的场景。
3.左对齐标签：
在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。根据马泰奥·彭佐的研究，典型扫视时间为500毫秒，很长说明用户经历了沉重的认知压力。
优势：
容易游览标签；占用垂直空间较少。
劣势：
标签和输入框的相邻间距增大；适合于用户不熟悉表单要收集的数据或问题无法分成易处理的内容组，左对齐标签游览表单问题会更容易。用户只要上上下下阅读标签左栏，不会被输入框打断。
适用场景：
表单中存在较多的复杂或敏感信息，希望用户放慢速度、仔细思考（在一些注册类表单中较多使用）。
单从效率角度看，顶对齐标签>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。
因此，得到以下几点建议：
如果你希望用户放慢速度，仔细思考表单中每个表单项，左对齐标签是个好选择，特别是含有大量可选输入框或高级设置的陌生数据时；
而顶对齐标签在一些国际化产品的表单设计时，会有更好的延展性；
至于，右对齐标签虽然与表单域联系紧密，便于用户填写，但是要考虑好标签的长短不齐如何解决。能否精简标签内容，以及确定好表单与界面的边距。
///
03.标记必填与可选字段的困惑
许多表单设计中，有个常见问题：是否应该标记必填字段？如果表单中的大多数字段或全部都是必填的，我们是否仍然应该标记它们？
先简单回答：是肯定的，用户有时需要通过必填标记来评估工作量，了解输入信息量的最低限度。我会在下面具体解释原因。
了解不标记必填字段的诱惑
通常，设计师会觉得每个必填字段都有一个标记是重复的、丑陋的、占空间，而且干扰界面，甚至可能看起来很扰乱（有认知负担！）。因此通常采取以下一种或两种策略：
1.在表单顶部显示说明，说明中除非另有解释，否则所有字段都是必填；
2.只标记可选字段，因为它们通常较少；
3.在某些特殊情况下，也会什么都不做：相信用户会神奇地知道需要填写什么字段；如果不知道，那么只需要点击提交报错即可。
这些方法有什么问题？如果你这样想，我来告诉你
1.用户一般不喜欢阅读表单顶部说明。不难想象，用户不太可能阅读表单顶部的说明。表单字段需要自给自足，毕竟，每个字段都有特定指令——它的标签，为什么用户需要阅读其他任何东西来填写它呢？
2.即使用户阅读了说明，也可能忘记。你可能会说：用户阅读了顶部的说明，怎么就会忘记——这么简单的事情？
的确容易忘记，特别是当表单很长或填写表单被打断时（这种情况在移动端很常见）。即使用户记得，但这占用了工作记忆，增加了认知负荷。换句话说，你让用户完成任务更难了。填写表单本身对用户来说就相当有挑战性——为什么要让它更具有挑战性？
3.用户必须扫描表单以确定是否为必填字段。不难发现，无论是否在表单顶部包含说明，结果都可能相同，用户会忽略或忘记。他们会扫视表单，找到一个标记为必填或可选的标识。
而且有些用户甚至不会费心去环顾四周，他们只会做出假设。他们会想——“嗯，邮箱——不需要我的邮箱吧？先空着呢”。即使用户没有留空，也不得不暂停来思考一个字段是否需要填写，减慢交互速度并使过程看起来更长、更乏味。
想要解决以上问题很简单：标记所有必填字段。尽量明确和清晰展示每个必填字段，并标记它。当然，就像有些设计师所说：界面出现大量必填标识（红色星号*）确实会增加视觉噪声。甚至重复的星号 * 会带来一些认知恐慌。但相比之下，两害取其轻，这些负面因素是轻微的。
如何标记必填字段？
这里包含至少有两种方式：星号*（红色）和“必填”提示。星号*在网页上已经很常见，用户熟悉其含义。优点是它不占用太多空间，也看起来与标签文字足够不同，所以使用它。
可以使用其他标记形式吗？当然可以，但是最好遵循市面上常见的形式（雅各布定律），这样更符合用户认知。
星号应该在字段标签之前还是在字段标签之后？
这不一定有实际影响，但将其放在标签之前的一个原因是，只需扫视标签的最左边字符，就能轻松定位必填哪些字段。
星号*是一种视觉标记，应当仔细考虑表单中的标识位置。标识在标签左边能指引用户迅速浏览界面，并判断出必填项。如果在右侧由于输入框形式、长度各不相同，标识和输入框对齐会导致难以浏览和判断。
是否也应该标记可选字段？
虽然这不是强制性的，但标记可选字段确实减轻了用户思考：如果没有这个标识，用户要环顾四周，并根据其他标记字段推断该字段是可选的。如果“非必填”在字段标签旁边，那该任务会变得更容易。不描述可选字段，这没问题，但这样做会是一个很好的额外帮助。
为什么登录表单没有标记必填？
登录表单很短，一般由两个字段组成：用户名和密码，这两个字段总是必填的。如果使用星号*，标记这些字段的成本很低，并不会出错。但是，绝大多数用户都使用过很多登录表单，他们是知道要登录需要输入邮箱/用户名和密码的。所以，在登录表单中，可以省略这种形式。
而在注册表中不标记必填字段是危险的。注册表单因产品而异——不同公司在创建帐户时需要不同类型的信息。它不仅仅包含用户名和密码，所以请标记所有必填字段（包括用户名和密码）。
因此，提出以下几点建议：
基础前提，尽量去除任何不需要回答的问题，特别是涉及到用户隐私的内容。可以更容易让用户填完表单。
为了增加表单填写的机会，请尽量减少用户需要付出的努力和他们需要记住的信息。有很多方面有助于解决这些问题，但标记必填字段（以及可选字段）是最容易的方法之一。
///
04.表单域提供一些默认值有必要吗
先给出答案：这是肯定的！
在《选择的悖论》一书中，作者巴里·施瓦茨讨论了生活中选择过多的影响。并提出策略应付无处不在的过多选择。他特别叙述了智能默认的能量——即在满足多数人需要的地方放置选择——来帮助人们做出明智的选择。
而在Web表单中也有很多地方能利用智能默认减少不必要的选择次数或输入，加速表单完成过程。所以，只要合适就在表单域中预先为用户填写你认为他们想要的输入值。
通过提供合理的默认，能有效节省用户时间，就是这么简单。应用分担了用户思考或输入答案的工作。填写表单永远不是一件有趣的事情，如果这个模式能把表单填写的时间减少一半，用户会非常感激。
你可能会问：默认值不是用户想要的，误导用户怎么办？
在设计有默认值的表单域时，你要思考默认值是否是大多数用户可以接受的答案，如果不确信可以先去做一下用户调研，了解用户的心声。
就算默认值真的不是用户想要的，至少你也为他提供了一个示例来告诉用户答案应该是什么样子的。这一点也可以节省用户几秒的思考时间——或避免一条错误信息。
但并不代表所有的表单域都要给出默认值，我们只是尽可能的让用户节省时间。
如何使用：
在第一次向用户显示表单时，用一个合理的默认值预先填写文本框、组合框或者其他控件。也可以使用用户之前提供给应用的信息来动态地给出默认值（例：通过身份证自动识别出生日期；利用邮编，推导出对应省/市）。
如果只是因为你觉得不应该留下空白的输入域，那么不要使用默认模式。只有当你有理由确信绝大部分用户，在绝大多数情况下，不会修改这个取值时才提供默认值——否则，这将会给用户带来额外的工作！
///
05.输入框的宽度如何设定
有一个容易被忽视但实则举重若轻的问题，表单中输入框宽度如何设定？
在表单设计中，对于 Checkbox、Radio 等控件，很明确必须跟随内容自适应处理。但对于Input、Select等你会不会产生困惑，是定宽处理还是跟随内容更好。
不知道你是否试图这么理解过？输入框作为用户填写信息的主要方式，其表现形式是否可以提供给用户填写表单的有用线索。
唐纳德·诺曼的著作《设计心理学》中详细讲解过心理暗示方面的内容。而宽度的变化就是一种有效暗示。
在真实场景中，大部分输入框是存在理想长度的，那么就应该向用户暗示所需输入内容的长度来减轻判断负担。
下图就是典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理，反而容易误导用户对输入金额的判断，造成一种不安全感。
表现形式要为用户填写提供有用线索，采用不同长度的文本框提供了暗示；这种暗示是一种有用线索，当输入框长度长短不定时，用户会很自然地思考为什么这样；填写输入框时会自然考虑这些线索。
请注意！保证暗示效果的同时，不要设定太多的宽度，反而会让表单显得凌乱；太少又会让表单看起来都像四四方方的盒子。最佳方法是找到适合产品的最佳模度值和数量。
什么是模度值和数量呢！
落在具体设计上要先梳理产品中常见的表单类型，然后设置一个默认宽度。以此为基础来有规律的增加长度，并考虑清楚它们的适用场景；从而定义出不同的模度，最终制定出整洁有序的模度规范。这样就可以让一线的设计师们跳过部分繁琐磨人的细节思考，快速搭建出合适的表单宽度并合理有效。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
众所周知，黑帕云这样的产品几乎使用了所有类型 B 端的组件。
由于我司设计资源有限，所以在拥有了组件库、设计师定好了设计规范之后，作为产品经理就直接可以手撸设计稿了。
这是是前面一文《 B 端产品中，一个 Epic 基本功能设计的过程》 提到，作为一个长大了的产品经理，有时候没有资源给你做交互没有资源给你画 UI 的，你要自己学会自给自足。
这个系列就是作为产品经理的我，在这两年中“自给自足”做设计的的一些总结与发现。
自给自足的前提是，前面说的组件库和设计规范，即拥有一个设计体系（Design System）。
关于设计体系的定义和内容各家都不同，我找出来了以下案例供参考。
Tilio（一个写作和笔记应用）联合创始人，有十年 UX 设计经验的阿拉·霍尔马托娃在《设计体系：数字产品设计的系统化方法》一书中这么定义：
设计体系是为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。
模式指的是界面中那些重复的要素：用户流程、交互方式、按钮、文本框、图标、配色、排版、文案，等等。
实践则是我们如何创建、捕获、共享和使用这些模式，尤其是在团队协作时做这些事情的方法。
书中将设计体系分成以下几个部分：
设计目的、设计原则、组件库、样式指南，以及用于提高设计师和开发人员沟通效率的工作流程和实用工具。
整理之后，可以参考下图：
可以发现，以上设计体系无论如何定义概念，都是由设计原则+设计指南+一些基础的元素（比如 Design Token、Material Foundation、Icons）+组件库+其他资源工具构成。
形成这些内容的目的都是为了给自己产品建立一套保证设计质量、提升设计决策、提升沟通效率的“工具包”，从而让产品形成自己的符合设计原则的风格。
所以设计体系是什么不重要，重要的是如何在遵循设计原则下，能够高效做出高质量的设计。
一个开源设计原则和方法的网站 Design Principle 这样定义设计原则：
Design Principles are a set of considerations that form the basis of any good product.
译为“设计原则是构成任何好产品的一套基础考虑因素。”
比如 Salesforce 的设计原则是：清晰、高效、一致、美观。并且优先级由前到后。
可以理解为 Salesforce 会追求清晰大于高效、一致、美观，比如在产品设计中，让用户清楚的看到、理解、自信地去操作要比任何事情都要重要。
这个准则很容易理解，可以推论出 Salesforce 在度量体验时，将“易用性”放在了第一位，即作为一个 SaaS 产品，不能有任何让用户产生疑惑的地方。如果在设计上的美观而要牺牲清晰，这就是不可取的。
有了设计原则之后，下一步是需要一个组件库。这里说的组件库囊括了无论是原子化的颜色、字体、阴影、Icon 这些基本的元素，还包括了已经封装好的组件，如 Button、Alert、Toast、Text Input。
关于为什么要组件化，也不多说了，之前看过一篇阅文体验设计 YUX 的《组件化思维—— 适应并推动业务及产品变革的设计案例》写的非常清楚。
接下来我通过 Minecraft 这个游戏来总结了组件库。
玩过生存模拟类游戏大家都知道，在游戏中会有一些可以靠双手劳动得来的基础材料，比如砍树砍来的木头、地上捡的石头、挖矿挖的燧石。这些基础材料可以合成一些简单处理过的材料，比如把木头合成为木板。然后可以再把半成品进一步加工，比如木棍。
在 Minecraft 这个游戏中，如果玩家要制造一个弓箭，需要一个弓和一个箭。弓和箭的合成又需要一些半成品和成品或者原材料来加工制作，如下图：
对应在设计组件库中可以对照查看，一个完整的页面是可以通过一些元素、控件、组件、大组件组成：
在系列开始之前，先声明一下文章的范围和适用人群。
关于 「B 端设计总结」这一系列，主要是我个人在已有了我们的设计规范和组件库后，“自给自足”的情况下探索出来的一些组件使用规则，更偏向产品经理或者交互设计师来参考。
所以系列中不会写设计规范，比如说字号、颜色、间距等等这些属于设计规范中内容。而是基于已有的规范，总结之前我们功能中涉及到的该使用哪些组件，也可以称之为狭义上的设计指南（Design Guidelines）或者设计模式（Design Patterns）。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
很多人认为设计思维是全新的概念，这其实是一种常见的误解。设计已经实践了很长时间：纪念碑、桥梁、汽车、地铁系统都是设计过程的最终产品。纵观历史，优秀的设计师都应用以人为本的创意过程来构建有意义且有效的解决方案。
在 1900 年代初期，夫妻设计师 Charles 和 Ray Eames 实践了“边做边学”，在设计他们的 Eames 椅子之前探索了一系列需求和限制内容，即使在 70 年后的今天仍在生产中。1960 年代的裁缝师让·缪尔 (Jean Muir) 以她对服装设计的“穿着设计”方法而闻名，她非常重视自己的衣服在他人看来的穿着感受。这些设计师都是他们那个时代的创新者。他们的方法可以被视为设计思维的早期例子——因为他们每个人都深入了解了用户的生活和用户未满足的需求。著名的 I ♥ NY 标志背后的设计师 Milton Glaser 很好地描述了这个概念：“我们一直在寻找，但我们从未真正意识到......正是对人的注意让你真正掌握那些东西。”
尽管有这些以人为本产品的早期例子，但设计在历史上一直是商业世界的事后想法，是仅用于修饰产品的美学。这种主题设计应用程序导致公司创建的解决方案无法满足客户的实际需求。因此，其中一些公司将他们的设计师从产品开发过程的下游（他们的贡献有限）转移到了起点。他们以人为本的设计方法被证明是导致公司差异化的一个因素：那些使用它的公司已经从创造符合人们需求的产品中获得了经济利益。
为了在大型项目中能够采用这种方法，需要对其进行标准化：一种将创意设计过程应用于传统业务问题的正式框架。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 与 Roger Martin 共同创造了特定术语“设计思维”，并将多年来酝酿的方法和想法封装成一个统一的概念。
设计思维是一种伴随着过程而生的意识形态。
定义：设计思维是一种思想主张，一种注重实际操作，以用户为中心的设计方法来解决问题的思路。这种以用户为中心的设计想法有可能会带来创新，而创新可以带来产品差异化和竞争优势。设计思维包括 6 个不同的阶段，如下所示：
设计思维框架遵循 1) 理解、2) 探索和 3) 实现的总体流程。在这些更大的范围内分为 6 个阶段：同理心、定义、构思、原型、测试和实施。
同理心：进行研究以了解用户所做的、所说的、所想的和所感受的。
想象一下，你的目标是改善新用户的入职体验。在此阶段，你将与一系列真实的用户交谈。直接观察他们的所作所为、他们的想法以及他们需要什么，问自己诸如“什么激励或阻碍了用户？”之类的问题。或者“用户在哪里经历了挫折？” 目标是收集足够的观察结果，以便可以真正理解你的用户及他们的观点。
定义：结合所有研究并观察用户存在的问题。在确定用户需求时，开始寻找创新机会。
在定义阶段，使用在“同理心”阶段收集的数据来定义需求。整理所有观察结果，并在用户当前的体验中进行比较分析。不同的用户是否有一个共同的痛点？识别那些未能满足用户的需求。
想法：集思广益，提出一系列疯狂的创意想法，以解决在“定义”阶段确定下来的未能满足的用户需求。给你自己和你的团队完全的言论/想法自由；在此阶段没有任何想法是不合适的，收集大家的各种想法，此阶段想法的数量超过质量。
在这个阶段，把你的团队成员聚集在一起，勾勒出许多不同的想法。然后，让他们彼此分享想法，混合再混合，在彼此的想法上再产生新的想法。
原型：为想法子集构建真实的视觉展示。此阶段的目标是了解以上几个阶段形成的想法中，哪些是有效的，哪些是无效的。在这个阶段，通过输出原型的过程，来权衡想法的影响与可行性。
让你的想法可操作。比如，做一个新的登录页面，画一个线框图，并在内部寻求大家对此的反馈。根据反馈对其进行更改，然后用快速而简单的方式继续进行原型设计。然后，与另一组人分享。
测试：把原型给到你的用户来获取用户的真实反馈。问问自己“这个解决方案是否满足用户的需求？” “它是否改善了他们的感受、想法或完成任务的方式？”
将你的原型展示给真正的客户，并验证它是否实现了你的目标。用户的观点是否有所改善？新的登录页是否会增加用户在网站上花费的时间？在用户操作原型时，持续测试和观察用户。
实施：将设计付诸实施。确保你的解决方案得以实现并触及到最终用户的生活。
这是设计思维中最重要的部分，但也是最常被遗忘的部分。正如唐诺曼所宣扬的那样，“我们需要做更多的设计工作。” 设计思维不是魔法，并不能让你从实际的设计中解脱出来。Milton Glaser 的话引起了共鸣：“没有“创造性”这样的东西。仿佛创造力是一个动词，一个非常耗时的动词。这是在你的脑海中思考一个想法，并将这个想法转化为现实的东西。这将永远是一个漫长而艰难的过程。如果你做对了，那感觉就像是在创作。” 尽管设计思维对产品的影响很大，但只有执行设计想法才能带来真正的创新。设计思维的成功在于它能够改变最终用户生活的某个方面。第六步：实施——至关重要。
为什么我们要引入一种新的思维方式？采用设计思维的原因有很多，足以值得单独写一篇文章，但总而言之，设计思维实现了这些优势：
这是一个以用户为中心的思考过程，从用户数据开始，创建满足真实的而不是想象的用户需求的产品，然后用真实用户测试这些产品。
它利用集体的专业知识并在团队成员中建立了一种大家都认同的想法，并得到广泛支持。
它通过为同一问题探索多种解决途径的过程而来带来创新。
Jakob Nielsen 说：“一个解决错误问题的漂亮界面将会失败。”设计思维解放了创造力，并将它们集中在正确的问题上。
上面的过程一开始会觉得很深奥，千万不要认为这就是打开成功之门的钥匙，相反，应该把它当作梯子，在需要的时间和地点为产品提供支持。
每个阶段都意味着迭代和循环，而不是严格的线性过程，如下所示。在构建和测试初始原型后，通常会返回到理解和定义两个理解阶段。这是因为直到线框原型化并且想法把变为现实，才能真正体现您的设计。很难一次性就准确评估您的解决方案是否真的有效，在这一点上，循环进行用户研究是非常有帮助的。为了做出正确的决策或确定开发顺序的优先级，还需要了解用户的哪些信息？之前没有研究过的原型产生了哪些新用例？
也可以重复阶段，通常需要在一个阶段内多次进行练习，以达到进入下一阶段所需的结果。例如，在定义阶段，不同的团队成员具有不同的背景和专业知识，因此看待问题的方法也不同。在定义阶段花费大量时间来使团队成员对问题的认知达成一致是很有必要的。
设计思维具有可扩展性。对以前那些无法改变思维方式的公司，现在有了一个大家都可以理解的指南，并增加了产品成功的可能性。这不仅适用于产品设计等传统的“设计”主题，还适用于各种社会、环境和经济问题。设计思维很简单，可以在各种范围内实践；即使是棘手的、未定义的问题。随着时间的推移，它可以应用于改进搜索等小功能，也可以应用于设计颠覆性和变革性的解决方案，例如：重组教师的职业阶梯，以留住更多人才。
我们生活在一个体验的时代，无论是服务还是产品，我们都对这些体验抱有很高的期望。随着信息和技术的不断发展，它们在本质上变得越来越复杂。每一次迭代都会带来一系列新的未满足的需求。虽然设计思维只是解决问题的一种方法，但它增加了成功和突破性创新的可能性。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
小伙伴们画好视觉稿后，是不是页面的交互/视觉规约经常丢三落四，常常在设计宣讲时被开发测试提问？自己表面镇定，内心慌的一笔：这个...我没想到，那个...我没想到...
要想在宣讲时能够从容应对各种问题，就需要在设计稿完成后，把设计规约提前想好，那么设计规约要从哪些方面写起呢？往往B端产品的页面更加复杂，要补充的交互规约更多，小Zi就从实际工作中总结一些，供大家参考～
先来看个列子：
一个页面，交互和标注规则很长很长，很多同学反馈说不知道交互规约从何写起，看了上面的列子，大概从以下几个方面来书写规约：
大方面我习惯于分成【整体】和【具体内容】来写。
首先从整体来考虑，首先要考虑页面是如何布局的，是自适应？还是定宽？常用的网页布局有：静态布局、百分比布局、响应式布局；页面的整体布局方式，也决定了页面具体内容规约的撰写；
参考文章《3种常用网页布局与设计注意点》：https://www.zcool.com.cn/article/ZMTIwMjYxNg==.html
1.页面整体滚动区域
滚动区域是从哪里开始？是页面级滚动吗？
2.滚动条的样式
需要给出滚动条的视觉和交互
举例：
页面“加载”是做设计时常常忽视掉的，因为大家肯定是重点考虑有内容的情况，并且页面数据是否需要加载、加载时长等等需要根据前后端接口返回情况确定。
1.补充初始状态的页面；初始页面是骨架图还是保持不变，是否添加页面引导？等都是需要考虑的；
2.补充页面数据为空的样式；
举例：
页面级加载的样式是什么样的？也需要补充到设计稿中；
举例：
比如“无权限查看”“记录已被删除”“已被拉黑”等等情况；
举例：
当补充完页面整体上的规则之后，就可以着手补充页面具体内容的规约了。具体内容的规则其实和整体规则从大方向是差不多的，也是那几个方面，只是更细节：
如果页面整体是定宽的，那么内容也是定宽的，就不需要考虑内容随着页面拉伸或缩小带来的变化；如果页面整体是自适应的，那么具体模块可以根据功能需要来设置哪些区域自适应，自适应的规则是什么；
举例：
B端产品设计场景更复杂，内容更加不可控，再加上电脑屏幕大小适配，页面宽度可自由拉伸，种种因素都要我们更加仔细的考虑页面的各种极限值情况，如何写全面设计规约是难点。相信在设计评审会上开发和测试最常问到的一个问题也是：这里内容过多怎么展示？虽然我们在设计的时候是按照80%的场景去考虑，但是剩下20%的极限场景也需要我们给出设计规则。
内容过多，具体划分还可以分成以下几类：文字过多、选项过多、弹窗内容过多、按钮/标签过多、表格内容过多、功能过多等等情况，每种情况下有哪些解决方式呢，可以参考文章《B端交互设计之内容太多怎么办》：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html
举例：
用户反馈，页面中肯定不少，我们画页面时也会画出大部分提示，但是缺少提示/反馈依然是设计师常忽略的内容，主要是提示的场景非常非常的多，而且有很多细分情况：
1.数据处理慢的提示
问题举例:操作的数据过多时，后台数据处理慢是否有提示？
2.操作后的提示
成功、失败、进行中等，还有部分成功，部分失败的情况
问题举例:启用失败时如何提示？
3.无权限、禁用等的提示
问题举例:项目列表-阶段没有权限时，需要添加tips提示；
4.缺少二次确认提示
问题举例:新建页面点击取消是否需要二次确认提示?
1.校验的时机：是失焦后还是提交按钮时，还是实时的
问题举例:表单的必填校验，是失焦实时校验，还是在提交时校验？
“实时校验”是在用户浏览表单时实时检查用户输入的有效性，而不是在用户提交表单时一次性检查全部输入：
验证消息显示在靠近输入的区域，并一起显示；
2.校验的样式：是在下方出提示，还是全局提示，还是什么的；
举例：
不仅要考虑页面整体的滚动区域，有些模块也是单独需要滚动的；
滚动区域是哪里？包不包括表头？标题？有没有内容需要锁定？滚动条的样式？这些问题都要给出规则。
问题举例:信息内容过多时，容器内展示不下怎么办？--答：展示不下时容器内出现滚动条，滚动区域是整个内容区；
1.数字输入超长的显示
问题举例：极限数字如何显示，比如筛选结果超过三位数：999+
2.数值是0时，是否有特殊的规则
问题举例：数值为0时，是否显示此模块？
3.是否有输入限制，比如，限制正整数、小数，小数精确到几位等等；
我们一般默认热区就是触发控件的区域，但是有时可能视觉上图标需要小一点的，但是热区需要更大一点，就要特殊标注出来。总之，方便用户操作为上。
举例
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
颜色会潜意识地为观看者提供有关应用程序的大量信息，即使他们从未阅读过任何文字。
什么是色彩心理学？
不同的颜色实际上可以对人类的情绪甚至行为产生深远的影响。这是全球各城市许多绿色和蓝色倡议者背后的想法：绿色和蓝色使观看者感到更加平静和放松。
绿色对减轻压力（和其他因素）的影响如此深远，以至于实际上可以帮助人们延长寿命。
这对应用程序设计意味着什么？
嗯，颜色的影响不仅仅是观众喜欢与否，还会影响他们的感受。例如，深浅不一的蓝色会激发忠诚和可靠的感觉。绿色激发舒适和幸福。黄色与快乐和刺激有关。红色让人兴奋并引发欲望。
但是那些不一定是感觉的东西呢？人们是否也倾向于将某些价值观与颜色联系起来？
这项调查要求人们选择与某个词相关的颜色。他们发现：
信任 = 蓝色（34% 的受访者）
速度 = 红色 (76%)
便宜或便宜 = 橙色 (26%) 和黄色 (22%)
高品质 = 黑色 (43%)
高科技 = 黑色 (26%)、蓝色 (23%) 和灰色 (23%)
可靠 = 蓝色 (43%) 和黑色 (24%)
乐趣 = 橙色 (28%) 和黄色 (26%)
恐惧、恐怖 = 红色 (41%) 和黑色 (38%)
应用程序设计人员在开发应用程序时最好牢记这些关联。然而，这些都不是应用程序开发人员绝对必须遵循的硬数据。相反，它们是开发人员可以遵循的指南，并结合下面讨论的其他设计原则。
围绕颜色的文化差异
在选择颜色时，牢记应用程序的受众始终是至关重要的。
例如，在西方文化中，白色往往代表纯洁或纯真。然而，在亚洲的某些地区，白色是用来表示哀悼、厄运和死亡的。显然，如果应用不当，这可能会产生严重的意外后果。
为此，设计人员应该了解他们的受众并相应地选择颜色，这在日益全球化的社会中并非易事。
选择主调色板
应用程序设计人员和公司等都应该在确定其品牌的主要调色板之前进行仔细研究。最重要的是考虑观众和他们想要传达的内容。
蓝色是一种流行的颜色，因为它与信任和可靠性有关，但它也变得有点过度使用了。
橙色可以与廉价联系在一起，但也可以与乐趣联系在一起。
红色可以令人兴奋和振奋，但也代表恐惧。
更好的使用颜色来设计应用将有助于塑造观众的感知。设计人员需要了解颜色关联以及用户如何下意识地查看设计以创建成功的调色板。
色彩和谐
一旦应用程序设计人员确定了主要颜色，就该选择其他颜色了。使用一种颜色很简单，通常不会很引人注目。
但是，选择的颜色需要很好地搭配。
冲突的颜色会让观看者感到不安或有压力。相反，应用程序设计者应该寻求创造一种赏心悦目的组合。一种会让用户感兴趣并让他们对应用程序感觉良好的应用程序，从而引导他们尝试它。
这里有一些设计师可以遵循的基本原则，以在他们的设计中创造和谐的色彩。
单色
首先是在整个设计中坚持使用相同的颜色，但使用不同的色调。这增加了产品的兴趣但又不会很突兀。
类似色
另一个流行的选择是使用类似的颜色。这种方案也很难搞砸，尽管设计人员确实需要了解每种颜色的饱和度。
此方法可以使用色盘上彼此相邻的颜色。例如，绿色和蓝色，或橙色和红色。
互补色
互补色方案使用调色板上彼此相反的颜色。例如，黄色和紫色或蓝色和橙色。
使用互补色时，设计师必须仔细选择阴影和色调。如果做得不好，很容易创建一个视觉上不和谐的方案。
但是，如果做得好，互补色可以使应用程序设计真正流行起来，并在众多其他不那么吸引人的应用程序图标中脱颖而出。这可以使用户更有可能选择该应用程序而不是其他类似功能的应用程序。
分裂互补色
这种方法有点复杂，但可以产生一些引人注目的结果。它采用三种颜色，一种颜色和两种相邻颜色的互补色。例如，从紫色开始，然后添加橙色和绿色。
设计师必须小心使用这种方法，错误的组合会使设计从有趣变成突兀。
正确的应用程序设计颜色
总而言之，应用程序设计中的颜色世界非常复杂。没有一种颜色会吸引所有观众，也不会适合所有品牌。然而，选择正确的颜色绝对意味着一个成功的应用程序和一个普通的应用程序之间的区别。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在贝壳，有店东、圈经、CA等多种服务角色依赖数据信息作业，各种各样的数据被用于管理、分析和制定目标。但是，房产垂直领域的数据非常庞杂，数据体量也在急剧增长，图表的应用场景越来越复杂，除了pc和移动端的数据看板，还出现了线下门店大屏场景。
与此同时，数据展示一直处于无可视化规范的状态，导致频频出现“数据堆叠”“数据出界”“数值无单位”等可读性低的问题。因此，把这些复杂、抽象的数据，通过更直观更容易理解的可视化方式展示出来，建立一套专注于房产领域的可视化组件规范，变得尤为重要。
图1 数据部分展示现状
Kecharts项目从汇总和梳理数据展示问题出发，聚焦并抽象问题点，旨在建立起统一的可视化规范。同时，我们还对极端数据的展示进行计算规则处理，从人工配置的效率考量，系统性地帮助用户进行高效分析和决策。
数据规范的第一步，解决“知道什么数据用什么图表，了解颜色的使用规范、数据排版展示的要点、适配性原则”等基础规范，从配色、布局、基础展示规则上，满足数据展示的美观度和可读性。
最难解决但也最有价值的痛点是：数据体量大、维度多带来的“不确定性问题”，想要把海量、高维的数据以准确有效的方式展示，需要建立高质量的交互和配图规则。因此，我们在梳理基准展示规范的基础上，也对极端情况进行了一系列的规则处理。
数据往往是由平台自上而下传达到城市，再由专业的商业分析师对数据进行分析和处理，很多数据需要人工绘制和展示。因此，Kecharts在设计数据规则展示的同时，也要考虑数据的可配置输出规则，尽可能减少人工操作成本，降低由于人工分析水平不同导致的报告质量方差。
建立基础可视化规范，是为了将图表展示拉到基准线水平，也是当前要做的第一步。基础的规范建立，可以让图表迅速换身衣服，第一时间提升用户的感受。所以，第一步首先解决配色的使用、基础的布局、图形的基本表达等方面的规范问题，满足数据的基础美观度。
图2 配色色板图示（局部）
优化前，Kecharts各种配色之间关联性低，与整体平台的表现层形式不统一。优化后色板的样式与KeDesign（贝壳设计系统，“UXD笔记”公众号后台回复“贝壳”，领取VI规范文档）无缝融合。现有配色方案饱和度更协调，阅读体验更友好。
由于数据体量大，我们尝试将8种常用色扩展成10种常用色以及24种扩展色来更好地满足业务需求。并且根据不同品牌主色，进行明度调整。除此之外还增加了更沉稳的商务主题以及暗黑主题配色，满足特殊业务场景的使用。
图3 配色的概念图
基础布局
图表的构成，由一系列独立的图形与法元素结合而成，如包含标题区、操作功能区、面包屑、图例区、单位区和图表区，通过合理的基础布局增强图表的秩序性和一致性，同时规范标题、图例等元素的展示适配规则。
图4 数据基础布局规范（局部）
精细图形
整体的图形展示细节也做了统一调整，从整体排布、字体、字号、圆角、描边粗细、数据轴、标签等方面进行了优化设计，使整个图表看起来更加精细。
基础的配色、字号、布局调整之后，基本满足了数据的展示基准，从基础合理性展示和视觉感提升上，有了一定的改良。
图5 基准规范后的对比
图6 栅格化设计图示
定义图表的适配规则
定义四种图表卡片的适配方案，当图表放大或缩小到某一区间时，内部布局会根据图表大小变化进行有权重的删减，使图表在多种区间内能够将核心数据表达的更清晰。
图7 栅格化设计图示
满足了数据的基准展示，并没有达到完整的可视化展示规范，海量和高维带来的展示问题依旧存在。所以，在建立基准规则的基础上，结合贝壳数据的特色，需要集中处理极端情况带来的问题，从基准线提升到具有易用性的“标准线”。
图8 以饼状图为例的极端情况分析
过滤数据
首先从底层数据进行过滤，过滤底层占比0%的数据，减少数据呈现量。将占比为0%的大部分数据在图表的可视化展示中去除，转移到图例中展示，满足了用户需要完整数据的诉求外还大幅度提升了图表的可视化程度。
元素优化
优化标签、线条、指示等元素的展示规范，从定义边界位置、规范标签的展示内容上，对图表内元素的极端情况做适配处理。
智能检测
为了消除信息过载带来的标签碰撞，我们制定了标签的智能检测规则，当两个标签重叠超过1/3时，自动化地隐藏部分标签，被隐藏的部分可以通过悬停展示详细信息，不经意间大幅度的提升图表的展示美感和用户的浏览体验。
图9 饼状图为例的处理过程
从单点问题扩展为通用性规范处理，在不同类型图表的极端情况处理过程中，从全局的角度出发，对极端情况下出现的核心问题做汇总并抽象，在颜色、碰撞、超图形等方面，输出极端情况处理规范。
图10 通用性智能检测规则（局部）
数据分析和传达的过程，依托于人工过滤、处理、绘制和展示，考虑数据的配置输出，人为水平难以把控，尽可能减少人工不必要的操作成本，从而提升数据报告产出的质量。
在配置自由度时结合产品定位、属性和功能进行思考。用户希望数据通过配置层处理后转化为可视化图表。普通用户期望通过简单的操作快速搭建数据看板；高级用户希望对可视化图表有精细化的自定义需求。
我们尽量用智能处理代替人工对数据无效数据的筛选，对数据的展示做智能的适配，如指标卡的展示，前置设置了一系列的展示模版，在用户选择指标数据的同时，会根据指标的数量做自动化贴合排布。与此同时，保留了一定的人工可配置自由度，支持用户可自由配置指标卡的细节展示等。
图11 指标卡用户配置示意
因此，针对大量杂乱的数据，数据的呈现通常需要两层呈现给用户。第一层是数据库和数据源，会自动过滤掉存在的垃圾数据和无效数据。
第二层是数据分发层，尽可能的通过自动化的配置去辅助操作员进行数据的分发和最终数据面板的呈现效果。通过简化操作流程和匹配人为操作习惯，降低学习成本，提升操作效率，为操作者提供“顺其自然的设计”。
图12 数据处理分层图示
Kecharts的初衷是保证数据的真实、高效展示数据、遵循美学原则。我们遵循数据能够真实呈现的原则，在可视化表达中确保不遗漏、不误导，确保数据准确性。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com