你知道吗？视力，听力和行动能力完全健康的人，可以轻松地读写，可以有效执行多任务，并且始终可以正常工作的人约占总人口的50％？其余的人都是戴着眼镜或有色盲，手腕或耳朵受伤，生活在嘈杂的环境中或网络信号质量差，忙碌或忙碌中，阅读障碍或有注意力障碍等。

这意味着大约一半的用户可能很难使用我们的产品或浏览我们的网站。因此，我们可能错过了提高用户满意度并扩大受众范围的机会。

不过在设计阶段实施一些简单的原则就可以改善交互和整体用户体验，极限设计可以为所有人带来价值，我们称之为“包容性设计”。

什么是包容性设计？包容性设计考虑了尽可能多的人的需求和能力，而不仅仅是针对残疾人。它认识到我们的需求会随着时间和环境的变化而变化，因此它会预测错误，挣扎和不同的交互方式。它的目的是在问题发生之前解决问题，提高标准并改变良好产品设计的标准。

包容的用户界面是善解人意，有意识且可访问的。年龄，性别，教育程度，财富和能力等不同特征，在不同环境中生活或工作，获得技术水平不同的不同人群可以舒适地使用它。

我们将使用POUR作为在用户与界面之间创建简单，轻松，快速交互的参考。

POUR代表

• 可以理解：数字内容可以轻松地以不同方式进行解释或处理吗？

• 可操作：数字产品能否轻松自如地进行功能和控制？

• 可以理解：用户可以理解界面的功能和内部信息吗？

• 健壮性：数字产品是否与不同的辅助技术和设备兼容？

设计师如何提供帮助

作为设计师，我们当然不能控制以上所有要求都能做到。但是我们应该承认，人们遇到的许多可访问性问题是由设计阶段未做过的决定引起的。因此，设计师有很多机会可以有所作为。仅通过做出更明智的设计决策，我们就可以影响（改进或协助）四种经验。

• 视觉体验：这包括形状，颜色，对比，文本样式-产品界面的所有图形元素。

• 听觉体验：这是指与产品互动时产生的声音，音量和清晰度。

• 认知经验：这描述了用户花费在解释界面上的时间，以及使用界面需要多少注意力和精力。

• 运动体验：这包括执行任务或与产品交互所需的所有动作和动作。

通常，可访问性被认为是对创造力的挑战；但是，如果我们认为这是一个创造性的挑战，那么我们会开辟全新的可能性领域。真正好的可访问性的诀窍不是在功能或功能上进行折衷，也不是在美学上取舍，而是使功能和创意体验也可以访问。

改善视觉体验

1.颜色

对比度对比度是亮度或颜色的差异，使物体从周围环境中脱颖而出，并可能对清晰度产生显着影响。高对比度使视觉元素从背景中脱颖而出，更加引人注目。

专家提示：纯粹的＃000000黑白色会给眼睛带来强烈的对比度，甚至会影响阅读障碍者。这就是为什么我们倾向于避免使用它，而是选择深灰色的原因。

亮度

亮度描述从光源发出的照明水平或从表面反射的光量。明亮的颜色反射更多的光线，并会干扰我们阅读和处理信息的能力。

避免在背景或较大表面上使用鲜艳的颜色。请勿在文本上或文本附近使用鲜艳的颜色，以免干扰文本。如果品牌要求特定的高亮度颜色，请尝试建议使用饱和或较深的颜色。如果你绝对必须使用明亮的颜色，则应将其用于突出显示动作的方法最小化，并将其与较深的色相搭配以达到平衡和高对比度。

专家提示：任何含有超过50％黄色的颜色都会自然反射更多的光。这意味着黄色，橙色，绿色和蓝绿色是高风险颜色，应谨慎使用。

色盲

色盲是无法区分特定颜色（通常是红色和绿色，偶尔是蓝色）的一种，它比你想象的要常见。

专家提示：不要仅仅依靠颜色；颜色不应该是传达重要信息的唯一方法。您可以执行以下操作：

• 使用下划线表示链接和斜体，或使用粗体突出显示文本

• 将图标与文本一起使用可传达成功或失败的信息

• 使用纹理或图案作为图表

• 为按钮或明显的通知使用清晰的视觉样式，针对焦点或活动状态使用不同的字体样式

2.版式

字体选择

通信是每个数字产品的首要目标，可以借助印刷术及其正确应用来实现。内容应清晰易读，这意味着易于识别和解释，轻松阅读和处理。

简洁明了对于快速阅读和解释至关重要，请避免使用复杂的字体，因为它们只会增加视觉干扰。选择正确的字体家族，针对那些具有清晰定义和独特形状的字符，因为视力障碍或阅读障碍的人可能会因某些字符或其组合而感到困惑。

字体样式

字体样式还会影响弱视或阅读障碍者的阅读性能。我们应该注意并谨慎使用字体样式（如斜体，下划线和大写）的频率和位置。

根据“英国阅读障碍协会”的规定，应避免使用斜体，特别是对于较大的副本块或较小的字体。这是因为它们使字母倾斜，显得更加尖锐，因此更难以阅读。

正文也应避免使用带下划线的字体样式。给长的段落加下划线会增加视觉噪音，从而降低阅读性能，而给短的句子或单词加下划线会与活动链接相关联，并可能引起混乱。粗体是添加对比度和强调的更好选择。

尽管没有确凿的研究，但有一些证据支持也应避免主要针对正文使用大写字母。似乎所有大写字母的统一外观会降低单词形状的对比度，从而使扫描变得不那么容易。此外，大写看起来有点紧张，可能感觉好像有人在向您大喊大叫。

专家提示：平衡是关键。谨慎使用每个样式并赋予其含义甚至可以提高可读性。

字体大小

您知道绝大多数人戴眼镜或隐形眼镜吗？实际上，十分之六以上！此外，约有62％的人通过手机访问互联网，这还不包括应用程序的使用情况。当视力不佳的人在旅途中在小屏幕上使用技术时，可能会出什么问题？

使用较大的字体。通常，16px被认为是最具有包容性的，但是请注意，字体可以以不同的比例站立，并且字体的大小可以相差很大。切勿低于14px，事实上，大多数现代网站的正文都使用18px字体，而标签，标题或工具提示仅使用14px或16px。

专家提示：此外，避免使用薄而轻的字体，因为对于较小的字体或在明亮的光线下可能难以阅读。

段落格式

帮助人们轻松浏览内容应该是我们的首要目标，因为只有20％的人可以阅读内容，其中55％的人可以快速浏览内容。我们的工作是通过使用舒适的段落格式来尽可能地支持人们。

研究表明，用于支持可读性的平均在线行长（包括空格）约为70个字符。标题，字幕和项目符号点将有助于扫描，而左段对齐将使文本更易于阅读。

较长的文字墙使人们参与的机会大大减少。成功的段落长度不超过5到6个句子。

空格将帮助患有认知和注意力障碍的人，保持阅读重点。对于其余的内容，它只会使阅读更加愉快和流畅。根据WCAG，最佳做法是将行高（行之间的间距）设置为相对于该类型大小的1.5相对值。段落之间的间距也至少应比行间距大1.5倍，因此必须明确定义。

提示：行距不应超过2.0，因为它可能产生相反的效果并分散读者注意力。

复制版面

作为设计师，我们经常陷入过度设计布局的陷阱，以使它们看起来引人注目或独特，从而将可用性放在一边。这就是为什么我们看到诸如文本的一部分之类的趋势在彩色或带纹理的背景上重叠图像或文本的趋势。只要我们知道如何以及何时使用它们，我们仍然可以享受其中的一些趋势。

当在彩色或带纹理的背景上使用文本时，我们需要确保它们之间的色彩对比度足够高，同时在整个重叠区域都保持一致-意味着在副本下没有较浅和较暗的区域，也没有过多的细节干扰。较大的字体大小和较重的字体粗细也会提高对比度。

专家提示：一如既往地“了解您的用户”。时髦的布局并不适合所有人。

改善听觉体验

您可能在想，视觉设计如何影响听觉体验？因此，想象一下您正在与一个俱乐部的朋友交谈。我敢打赌，您只能听见她说的话的一半，但是您可以通过看着她的嘴唇移动，肢体语言和面部表情来保持对话的进行。由于视觉效果的支持增强了模棱两可的声音，因此您最终可以理解它们。

在用户界面中，声音对于不同的人可能意味着各种各样的事情。它们也很容易在嘈杂的背景中丢失，因此最好以视觉提示来支持它们。

我们的目标应该是提供听觉和视觉提示的反馈，支持错误，通知以及与相关和邻近图形元素的重大交互。我们还必须确保视觉线索保持足够长的活动时间，以使人们能够看到和阅读，同时又不隐藏任何重要的内容。

一个好的做法-不限于支持声音辅助技术，是在UI元素中添加描述性标签，并在图像中添加标题，以便于在屏幕阅读器中轻松导航。为视频使用字幕是改善听力体验的另一种方法，对非母语人士也有帮助。

最后，我们不应该忽略声音是问题的情况，这就是为什么我们需要视觉替代的原因。有些人可能对特定的声音敏感，或者处于声音可能引起干扰的情况下。然后，这是一个好习惯，让人们可以选择关闭声音而不必调低扬声器音量，从而使此功能清晰可见。

专家提示：避免使用不必要的自动播放声音和音乐，因为它们会打扰甚至惊吓别人。

改善认知体验

1.知觉

视觉清晰度

清晰度是用户界面中的第一个也是最重要的属性。成功的用户界面使用户能够识别和解释他们所看到的内容，了解产品的价值和所要采取的行动，预测使用产品时会发生什么以及与产品成功交互。

• 形式跟随功能是一项原则，指出对象应反映其预期的功能或目的。为了在用户界面中实现此目的，我们使用了附加功能，附加到UI的视觉提示/属性，以显示用户与其交互的可能方式。

  支付能力取决于用户的身体能力，目标，过去的经验，当然还取决于他们认为可能的情况。按钮应该看起来像按钮，就像链接，菜单标签，表单等一样。使用清晰的符号/功能可以帮助用户识别或解释界面，并轻松进行交互。

• 
  

• 在用户界面中使用熟悉的和已建立的设计解决方案将帮助用户预测结果并自信地采取行动。因此，使用设计模式来解决常见问题是一个好习惯，该设计模式是经过测试，优化和可重用的解决方案。

  设计模式建立在过去的经验和可能性的基础上，并附加到特定的目标上。为避免眼前的问题，选择正确的设计模式应该是我们避免混淆或压力大的交互的第一要务。

• 
  

• 建立一致的视觉语言是获得更全面界面的关键。具有相同功能和/或重要性的重复交互式UI组件应始终以相同的方式外观和操作。因此，导航，按钮，链接，标签，错误等元素应在整个产品中具有一致的样式，颜色和动画。
  值得注意的是，一致的视觉语言不仅可以通过附加含义和减少视觉噪音来帮助互动，而且还可以增强产品的个性，提升品牌知名度，建立情感联系和信任。

  
  

层次结构

视觉层次结构是指图形元素的视觉重量及其排列方式，使用户可以轻松地探索和发现内容。通过为页面元素分配不同的视觉权重，我们可以对内容进行分组并影响人们感知信息和浏览产品的顺序。

• 颜色是第一大关注焦点。彩色元素将脱颖而出，因此在层次结构中位于较高位置。明亮的颜色会更加突出，因此，考虑到这一点，我们应该仔细安排和分配颜色，以将眼睛引导至正确的位置。

• 视觉元素的大小（例如印刷，按钮，图标和图像）在确定重要性方面几乎与颜色一样强大。较大的图形吸引了用户的注意，并且显得很重要。对于排版，明显不同的尺寸缩放比例可以帮助建立内容层次结构，并使内容扫描变得轻松而轻松。

• 辅助视觉层次结构的另一种方法是通过设计一致性和例外。一致对齐，外观相似，重复或相邻的元素给人的印象是它们是相关且同等重要的，而偏离元素以及不寻常的形状和有趣的纹理或样式将更加显着。太多的设计例外会引起人们的关注，并会增加复杂性，因此，谨慎使用它们是一个好习惯。

专家提示：研究格式塔原理及其在UI设计中的应用将有助于我们理解视觉感知和分组以改善视觉层次。

色彩应用

颜色不应该是传达信息或增加意义的唯一方法，但它仍然有用且很有影响力，因此不应将其视为装饰性元素。颜色具有含义，尽管没有硬性规定，但是太多的颜色会导致信息疲劳，并且不一致地使用颜色会导致混乱。

• 避免使用太多颜色。通常，三种颜色足以描述页面的所有重要视觉元素。60–30–10规则可以帮助我们建立完美的和谐。其中60％的彩色项目由原色组成，以创建统一的产品主题，具有30％的辅助颜色增强含义和/或创建引人注目的效果，以及10％的强调色，以补充和辅助主颜色和辅助颜色。

• 此外，我们需要确保为消息使用正确的色调。除了美学，颜色还可以创造情感和无意识的联系。特定阴影的含义会因我们所处的文化和环境而异，并且颜色通常具有不同的含义-在西方世界，错误是红色，成功是绿色，信息是蓝色等。

专家提示：可以将我们自己的含义分配给颜色，只要它们不与既定规范重叠，并且我们在整个产品中使它们保持一致。

符号学

符号学是对符号/图标及其含义的研究。它着重于人们如何形成和解释这些含义，这取决于人们所看到的上下文。在用户界面中，图标是可视语言的一部分，用于表示功能，功能或内容。符号学可以帮助我们设计立即被识别和理解的图像。

• 尽管这些年来，我们已经开发出具有大多数人接受和理解的含义的图标。用户还习惯于使用特定于平台的图标，并且可以轻松地进行解释。在可能的情况下，最好遵循这些既定的解决方案，以获得熟悉和流畅的体验。

• 当然，在某些情况下，我们需要设计具有特定功能的自定义产品特定图标。这些图标必须尽可能简单明了，以确保清晰度。它们还应该具有一致的视觉样式，以传达其功能或与其他非功能性元素区分开。

• 最后，我们不应该仅仅依靠视觉隐喻来传达含义，因为某些关联可能并不那么明显。如果图标需要标题来描述其含义，则可能不合适。如果不确定，请与实际用户一起测试我们的设计会有所帮助。

专家提示：图标不仅易于解释，而且还可以具有多种含义。因此，将标记与功能图标结合使用是一种很好的做法。

2.互动

记忆

许多心理学实验表明，健康个体的处理能力非常有限。在我们的短期记忆中，我们大多数人平均可以保留7项，具体取决于个人。我们的大脑并未针对数字产品所需的抽象思维和数据记忆进行优化，因此良好的设计会有所作为。

• 减少页面上可用选项和信息的数量，以及使用清晰的标题，面包屑和“后退”选项来访问以前的内容，将帮助用户记住或提醒自己他们在哪里，打算做什么或要做什么。是必需的。
  

• 交互元素上或附近的清晰可见副本将帮助用户在整个交互过程中保持知情和自信。例如，表单标签应始终可见，动作不应隐藏在悬停后面，按钮应提供目标位置的上下文，并且各节的标题应明确。

  
  

专家提示：通过称为“块”的过程可以增加我们的短期记忆和处理能力。这是我们在视觉上将项目分组以形成更容易记住的较大项目的地方。

改善运动体验

菲茨法

菲茨法则为人类的运动和互动提供了一个模型。它指出，将指针（光标或手指）快速移动到目标区域所需的时间是其距目标的距离除以目标大小的函数。意味着较小的目标会增加互动时间。

根据Fitts法则，我们旨在减小用户与目标之间的距离，同时增加其尺寸。该法律主要适用于导航和按钮。菜单和子菜单元素应在附近，而按钮，链接和分页应在较大区域上单击，以实现更快更准确的交互。

专家提示：根据可用性最佳实践，按钮/链接的最小尺寸为42x42像素（重击尺寸）。

奖励：提高绩效

到目前为止，我们已经建立了包容性设计，旨在让尽可能多的人访问并实现他们的目标或解决他们的问题，尽管他们有自己的情况。我们可能很幸运，可以使用进的设备或超高速互联网，但是当我们的信号不太好时，我们会感到挣扎。对于大多数人来说，老式设备和糟糕的互联网已成为常态，因此，为获得最佳性能而设计是一件大事。

• 极简主义是关键。如果我们打算创造一种可以被尽可能多的人使用的产品，那么我们就应该摆脱不必要的一切。图形，图像或动画是有价值的，还是增加了视觉噪音和加载时间？如果是的话，那就必须走了。

• 图像优化是帮助提高数字产品性能的另一个标准。通过将图像调整为合适的大小，然后通过诸如ImageOptim和TinyPNG之类的工具运行它们，可以节省宝贵的千字节和实际的加载时间。

• 开发人员通常使用的一种提高性能的技术是“延迟加载”模式，其中图像的加载是异步的，并延迟到需要时才加载。例如，如果您快速滚动到页面底部，则在网站完全加载之前，您可能会看到类似网站线框的内容。“渐进图像加载”的一种替代方法是“渐进图像加载”，其中我们显示一个空的占位符框<div>，然后用小的低质量模糊图像填充它，最后用所需的高质量图像替换它。

在每个数字产品中都遵循上述最佳实践，这是高可访问性标准的良好起点。但是总会有改进的余地，并且更好地了解我们的用户可以揭示提高无障碍标准的新方法。因此，有必要花费一些时间和金钱来更多地了解我们的不同类型的用户，因为他们可以教会我们很多有关使包容性体验成为现实的知识。

了解我们的用户将帮助我们练习同理心。“赋权”不是偶然的设计思维过程的第一步。在移情阶段，我们的目标是加深对我们正在设计的人员及其独特视角的了解，因此我们可以在进行任何设计决策时与他们认同并代表他们。

zhuanz

新拟物化设计只是一种风格吗？

最近正火的新拟物化风格（Neumorphism）在 2019 年底，设计师 Alexander Plyuto 所提出的「Skeuomorph Mobile Banking」作品中亮相。之后不仅被选为 2020 年界面趋势，又称为 soft UI。但这种风格在真实世界落地时，可视性上受到许多争议。

确实，新拟物化风格它算是一种风格，但又不是只有视觉上的风格这么简单，它延伸出来的议题，其实是扁平化跟拟物化之间的战争。

拟物化与扁平化的瑜亮情结

拟物化是 Apple 在早期设计中大量使用在界面上呈现对象属性、材质的方式。然而在 2013 年 ios7 发布时，Apple 开始为了画面简洁大量将界面元素扁平化，紧接着 Google 在 2015 年发布了 Material Design，宣示扁平化在 UI 设计中扮演着主导趋势的角色。2020 年真是百家争鸣的一年，首先是 BMW 发表的扁平化新 logo，接着是这一波新拟物化的反击。究竟代表新拟物化可能夺回界面风格主导权？或仅是 2020 年昙花一现的视觉风格呢？

扁平化VS 拟物化，我们可以思考的五件事

我认为新拟物化的概念其实是融合扁平化与拟物化的集大成，它建立在扁平化风格之上，又将组件带入了拟物化的元素，提高用户的判断力。不过在纠结于扁平化与拟物化哪个比较好时，有五个议题是可以让 UI、UX 设计师去思考的。

1. 多数年长者对于扁平化界面提供的视觉元素暗示无法理解。

大家身边一定都有那种已经把 Line 操作得滚瓜烂熟，但是每次要用 Line 加好友时，还是不知道怎么操作的长辈。最早期当人类还没进入屏幕时代前，我们所使用的界面大多是实体产品上的控制界面，而这些界面上的每个开关、按钮，都只有一个输入源，对应到一个功能（一对一），我们因此就这样与产品进行简单的交互动作。然而在屏幕上这个简单的交互模式被改变了，像是用键盘跟鼠标可以辅助我们，在系统中进行抽象与复杂的无限多任务（一对多）。

△ 你偏好用哪个微波炉加热咖啡呢？Image credit:Bence Mózer

让我们再来看看对长辈最重要的 Line 加好友功能，我们先不论这个功能在整个 APP 中被埋得多深，因为找到加好友的入口真的对长辈来说是看缘分～

在我引导长辈找出二维码画面的经验中，发现他们都是用死记的方式，把下一步要按哪个键、在画面的哪一个角落，记下来。但由于加好友功能并不是每天都会操作的，因此在学习上的效果，就像是高中时没有把课文理解、吸收就硬死背下来一样困难。

我们来看看「显示行动条码」在扫描二维码画面中，是否真的具有可以被点选的暗示。在扫描画面背景单纯的时候（如下图情况 1），「显示行动条码」的 button 底色是有透明度的黑、扁平化后没有阴影提供可以按的暗示，不过因为有大圆角的造型，勉强还是可以诱使人点点看；但一般情况下，扫面画面背景不会那么理想的无其他干扰（如下图情况2），button 原本的透明黑完全融入了后面的背景，这时候只剩下「显示行动条码」的文字，已经不具备可以被点选的提示。

△ 情况 2 中，显示行动条码的 button 看起来可以按吗？

扫描画面中的外框有一定的透明度，在可操作暗示（affordance）上已经不具有实体的特征，如果又放上有透明度的 button 在上面，让人充满不确定性，年长者无法将这样的情况与现实生活中的经验联想在一起。

2.以颜色做区别真的是最好的方法吗？

你知道同一个颜色，每个人看起来会不一样吗？而不同颜色在不同环境下，却又能看起来像同一个颜色吗？

不同意新拟物化设计的人中，有人主张运用颜色的引导用户操作界面的色彩元素不能从界面设计中抽离。但事实上，不同年龄、性别，视觉锥细胞中的活跃程度不一样。同一个颜色，不同人看，明度跟彩度会有差异。基于种种现实，由色彩的引导是好还是坏呢？

例子1：关于人类的视觉锥细胞

同一个颜色，不同人居然会看成不同颜色？

为什么阿嬷喜欢买大红大紫的衣服？这个偏好除了受到个人喜好影响外，也关系到阿嬷视觉锥细胞的活跃度。老年人在上了年纪后，部分视觉锥细胞开始退化，因此对于蓝色、绿色这类冷色系的颜色，老年人会开始接受不到这个区段的光带来的刺激。因为视觉锥细胞对冷色系的刺激降低，导致阿嬷在菜市场逛街时会被偏暖色系的物品吸引。所以会买热情系服饰不是阿嬷本人的意图，而是老化的锥细胞在作祟。

例子2：关于学习观察颜色这件事

不同颜色居然看成同一个颜色？

不同颜色却看起来很像，有可能是光线造成，也有可能是使用者必须学习去观察才知道的。日本的 JR 跟 Metro 系统，有着完整且细腻的视觉辨识系统。设计师理想中的情况是，我们将每条路线定义成不同颜色，可以让使用者更容易学习辨识路线。

但实地走访过东京的地下铁跟 JR，常常会发现跟错指示，才发现是潜意识辨认错文字或是颜色。我自己遇到过的经验是，在新宿站想要找都营大江户线时，因为在改札口看到了同样粉红色的标志，原本已经要哔卡进去，才发现那是京王新线的 IC 入口标志。

△ 新宿驶的改札口前，有两个同为粉红色的引导指标

所以说，高龄者或是天生视觉锥细胞有缺陷的人对于颜色无法清楚辨认外；大部分人可以借由学习来增强色彩辨识，除了可以对相似颜色进行更细节的判别外，也可以学着辨认不同光线（暖光、冷光）下造成的色彩差异。

但是，当我们在设计中，迫使用户学习、习惯我们制定颜色的意义。可能会在新手 onboarding 时造成适应上的负担，也有可能让他们在使用别的系统造成错乱。

3. 对于颜色被定义的意义各个文化、区域、种族都相同吗？

在不同文化之下，对于色彩的观察与运用也不一样，举个大家可能都有发现的例子，当你在不同城市旅游的时候，有没有发现不同城市的优先座颜色不一样？你能猜得出来，哪一个是台北捷运上优先座的颜色吗？

△ Image credit:wikipedia.org

当颜色在不同约定成俗下，有不一样的意义，又刚好缺乏文字或图像引导的时候，可能会让使用者解读成不同的意义。例如：红色具有热情、喜气、带来财运的意涵，但同时又具有危险的警示意义。

当设计师觉得红色可以引起使用者的注意，而把 button 设计为红色时，却可能让没看清楚文字的用户，认为按下这个 button 是危险的举动。

△ Image credit:photoAC

4. 光与影（明亮面跟阴暗面）给使用者的可操作暗示（affordance）一样吗？

新拟物化设计中假设了人在使用界面时，会运用与生俱来能判断光影效果的能力。这是真的吗？让我们来做个小实验：

为什么在台北车大厅席地而坐的人，会选择坐在黑色的棋盘格上呢？如果根据人类从大自然中所得到的可操作暗示来说，有阴影的地方可以提供人类休憩的功能，例如树阴下的阴影处。

△ Image credit:中央社、wikipedia.org

如果这样说得通的话，代表光亮的区域对人来说是可以行走、活动的地方；而阴影处则是休息与暂停处。

根据以上的推测，我们做个小实验，把车站中的 2 个不同区域的地面上分别涂上白色与黑色，来让受测者选出哪些区域可以暂停，哪些区域可以走动：

问题Ａ：假设你要在车站的大厅等朋友，你会选择站在哪里等他呢？

假设：受测者会选 2，因黑色区域（影子）让人觉得可以暂停、休憩。

结果：符合假设

1：白色柱子前的白地面 32.5％； 2：白色柱子前的黑地面 67.5％

问题Ｂ：哪一边的楼梯是往上的方向呢？

假设：大家会选 1，因为黑色区域（影子）让人觉得可以踩上去。

结果：符合假设

1：白色立面＋黑色地面 61.3％；2：黑色立面＋白色地面 37.8％

由实验Ａ、Ｂ可得证，虽然实验结果符合先前假设，大多数的受测者可从阴影判断要走哪条路，但还是有不少（30%以上）的受测者不认同。所以在用使用光亮阴影的设计暗示时，还是会遇到使用者感知的不同的问题。

5. 深度认知不同是导致判断物体距离的能力受影响，也就是所谓的视差。

新拟物化设计中，将界面组件以类 3D 的方式呈现，使用户在操作界面时必须去感知界面组件的远近以判断重要性，而在深度认知上有障碍的用户此时就会受到挑战。用户可能会遇到，不知道哪个组件才是浮在最上面、最重要的；若界面中的组件有三种以上的阴影深浅，会让用户在判断时要更花脑力判定物件在立体空间中的深浅。

总结

新拟物化风格中的光影表现提供了使用者人类最原始的操作意图：可操作暗示，是一个好的出发点，然而必须针对 APP 性质的不同而有所改良。在设计较走生活风格理念，而操作界面不复杂的 APP 时，非常适合用新拟物化风格来诠释：例如电子书服务、音乐软件；但在设计功能导向，且有大量信息化图表的界面，例如：移动网银，还是需要以扁平化的界面为主要信息架构，新拟物风格可能会是极少量界面元素中，拿来呈现生活中真实物的质感（例如：用户的信用卡）、或是作为亮点（例如：优惠卡片）的呈现方式，此类型 APP 中最重要的卡片与图表对于此种风格，一定要谨慎使用，必定三思三思再三思。

文章来源：优设    作者：Muse Chang

今天和大家聊一个很多朋友常年卡在 P5/P6 需要关心的命题——如何从业务出发打造具有商业价值还能兼顾用户体验的设计，此篇不谈理论，就通过 4 个经典的重量级产品案例就给大家安排明白啥是「一拳超人」式体验设计——就一个字「强」。

滴滴出行-xpanel

滴滴出行应该属于大家的高频使用 app，但是使用的功能一般还是集中在叫车流程，所以大家可能不太会关注到 CDX 设计团队一个非常核心的设计成果——xpanel。

简单来说 xpanel 就是一个附着于第一信息架构层级上，垂直 Y 轴且支持 X 轴拓展滑动的 Feed 卡片位。内容上分为「消息卡片」「主体卡片」「拓展卡片」三个维度，首屏保障除了「消息」与「主体」外三分之一「拓展卡片1」的露出。

但在简单的交互背后蕴藏的是基于业务的 UGD（用户增长设计）设计思考，这里引用 2018IXDC 会上滴滴主讲人的原话来说就是：

对特定场景垂直领域的深耕和挖掘，寻找「接触点」，帮助获取更多的功能、内容、服务、特性、品牌、运营甚至是喜好……进而实现业务的「有效增长」（转化、变现、留存）。

通俗一点解释就是 xpanel 利用主卡与拓展卡之间的信息架构关系，把拓展卡平衡的分为几类，比如「与产品功能相关的卡片」「与运营相关的卡片」等。

把本来被 LBS 地图一屏内抢占的空间通过简易的交互模式补偿回来了，这样既不打破用户的核心体验 focus 在地图与主卡上，同时又增强了运营、功能的玩法与拓展，可谓双赢。

根据这几年滴滴 xpanel 的线上应用，拓展卡片基本挖掘涵盖了以下场景的露出：优惠福利、出现卡券、会员体系、安全相关、出行提醒、拉新导流、运营活动等，未来可拓展的价值内容会更多。看着各路出行类 app 又纷纷长期沿用 xpanel 的设计，想必线上的数据反馈应该也是很正向的。

抖音-TopView

在上篇文章《多维度解析 | 抖音vs快手的产品设计策略差异》中的商业化模块里简要提及过抖音的 Topiew 超级广告位，这里单独拿出来和大家解析一下它究竟有多6。

从功能角度看，它是一个从开屏延续到端内视频信息流的广告位，占据了用户从进入抖音的第一视觉。

从交互角度看，topview 主要展现以开屏沉浸式视频 3s 播放→淡出互动转化组件 3s（完美融入原生视频信息流），剩余操作手势与功能等同原生视频信息流。

在这样一个有着 1 亿+第一曝光的产品位置，单纯只做常规静态开屏稳当入账不香吗？事实是抖音确实让它不香了，没有创新就没有新的收获。基于业务和当前产品形态下的交互模式使抖音有一个天时地利的优势——沉浸式体验，在这样的交互模式下给视频化的开屏提供了很好的承接入口。从开屏开启到融入信息流，在交互形态的切换中又为广告内容的播放时长赢得了更多时间。

更可怕的一点是 3s 播放后融入原生视频信息流中的 TopView 除了正常收割广告转化带来的单量，还可以通过右侧的主页链接轻松引流进行粉丝沉淀（今天就算你不买，先关注我，成为我的潜在用户，来日我再推一个新商品视频，你可以第一时间看见也许感兴趣就买单了）。

说完这些大家仔细回忆一下平常我们接触的有视频广告的视频平台，别说 60s、30s，15s 我们都嫌长，但为啥 TopView 显得相对没那么惹人烦呢（上次留的思考题）？个人认为除了抖音在选择合作品牌时会倾向符合平台气质的品牌合作（细数它合作过的品牌：Mac、宝马、林肯、vivo 等）保障广告质量和提供「跳过」外，直接融入信息淡出的互动组件会不仅会给用户新奇感，还会激发用户的互动欲望。

最后看一组数据（与宝马合作数据），曝光数：1.1 亿+；有效播放率：53.82%；点击率：13.26%。所以你猜一个最长可以展示 60s 的品牌视频内容、同时进行品牌粉丝沉淀、良好体验带来更高有效播放的亿级曝光广告位能值多少钱？

淘宝-二楼

2016 年淘宝启动了一个项目要做一款内容化栏目——以视频为主，每晚更新一期，类比「一千零一夜」的故事。

那么在满满当当的淘宝运营区里该选择哪一个来试玩这个有趣的「新栏目」呢？是在头部的 10 宫格里再挤进去一个图标呢？还是在热门推荐里挤出一个 tab 呢？还是做一个悬浮的右下角的运营位？显然都不太合适。

根据这款产品每晚 6 点钟才可以使用，早上 7 点就会消失的游戏规则，最适配它的入口是一个不占界面原生空间，同时又有一定仪式感的位置。于是下拉 loading 的大空区成为了设计师们考虑的阵地。

△ 不知道这个banner为什么要排挤我

但地方选好了，又有了新顾虑。因为 iOS 的用户基本被系统洗脑了下拉手势，对于他们来说下拉=刷新，贸然在下拉刷新的手势基础上再叠加一个无关联的结果显然是有风险的。因此从交互上需要界定 2 个维度的指标来保障新栏目的体验。

• 下拉速度（速度临界值：速度多快？→刷新，多慢？→新栏目）——以速度为优先衡量指标（只要速度快，拉的距离再大也是→刷新）
• 下拉距离（距离临界值：拉到多少距离进入新栏目？）——兼顾单手用户操作难度

反复试错 2 个指标数据的实际体验之后，新栏目有了安身之所，赐名「二楼」。进入「二楼」的整体交互和现在的短视频产品玩法基本雷同，全屏竖滑切换，小图标带货。下拉加载位的开发，从普通 loading 动效到运营位的植入基本被各类电商平台轻松复刻了，因此这一切看上去更没什么了得，但对于原创来说那毕竟是 4 年前。

豆瓣-叠加上滑板

谈到豆瓣我算是半个老用户了，豆瓣自身是个比较复杂的集合多条业务线分支（「小组」「同城」「阅读」「音影」……）的多生态产品，这里我们主要拿它 18 年 6.0 大改版中影音模块的详情页大改造来说事儿。

△ 可能有很多人已经忘记6.0前的豆瓣电影详情页长啥样了，带你回顾一下。

看完对比图，视力正常的朋友乍一看都能看出 6.0 版详情页整容得有多成功。但具体成功在哪里，可能不仅仅是好看这么简单。

大背景从海报上智能取色虽然不算是什么稀奇的做法，但是加了适度的渐变应用在这里也可以说是非常的恰到好处了。另外深底色和视觉比重加大的外链区都突显了「第三方播放」与「购票选座」的视觉感知。让用户沉浸在电影详情中并引导他们走向「豆瓣的主要收入来源之一——电影票分销与第三方视频播放产品引流」正好是 6.0 豆瓣改版一个「小小的目标」——更务实（商业化）。

从交互层面看，且不说评论头部吸底这个事情是不是也是因为 6.0 商业化的影响（评论区增加「话题」进行重点运营），这个交互本身我觉得还是很强大的。强大的体现在于良好的空间收纳能力与信息拓展能力。我给它起了个好听的名字叫-叠加上滑板（不好听也认了吧，毕竟也没有内部人员告诉我他们是不是起名字了）

这里可能又会有很多人质疑它与用户已洗脑的上滑手势之间的冲突，这点解释起来和上文淘宝「二楼」有些类似，区别是豆瓣并没有做上滑速度 or 距离的临界值，只是把滑动区域做了隔离。而对比它的效仿者 boss 直聘，人家倒是在交互上做了进一步优化，适配自己的产品情况做了上滑叠层卡隐藏和上滑距离临界值。

这个故事告诉我们，要抄也要抄得比人家的交互更优秀才不丢人昂。

文章来源：优设    作者：Nana的设计锦囊

最近身边的一些小伙伴，总会遇见B端设计工作，对于这种偏后台设计的B端设计，总会有大量的表单设计需要做，结合以前自己也有过不少表单设计的工作，在这里给大家分享一下自己对于PC端表单设计的研究，聊一聊表单在PC端中的运用。

表单的作用

商业离不开数据，而数据总会依赖不同的表现形式，不管是word文档，还是数据可视化，都是浏览者通过表现形式来对数据进行阅读和分析，因此表单的设计就是一种表现形式，我们将捋一捋如何通过表单更好的让用户阅读顺畅、操作方便、总而言之就是更好用啦。

表单信息的分割方式

无线分割：顾名思义，列表的信息之间正常情况下没有分割线等方法来分隔，仅仅是用间距来分隔开内容。好处是元素更少，画面更简洁，但是视觉可能就没那么清晰了，使用的出场率一般。

有线分割：同样字面意思，就是通过简单的分割线来分割列表中的信息，让视线左右移动的时候更加稳定、轻松，在表单设计中使用的出场率非常高。

斑马线：通过深浅交替的色块，以及色块产生的对比来分隔列表中的信息，深浅深浅的循环就好像斑马线，使用时是通过色块产生对比，所以也可以使用带有适量饱和度的色块来区分，占页面面积比例较大，适当用色可以使得画面更加活泼、丰满，斑马线也是出场率极高的一种展现形式。

斑马线+分割线：很容易理解，就是斑马线风格+分割线的结合，用色块区分的同时又加了分割线，信息之间的区分对比更加强烈，但是画面层级就多了一些，没有其他的看起来简洁，使用出场率也一般。

卡片式：跟卡片式风格其他设计一样，分别用悬浮的色块来区分，间隔的地方是背景色，分隔的力度比较强，内容区分的很清晰，弊端是更加占画面的位置，尤其在信息很多列的时候，会增加大量的高度，用户需要更多时间进行下翻的操作。使用出场率相对其他形式来说稍低。

可控制页面显示数量

场景：用户需要阅读大量的表单数据，且需要频繁的翻页、跳转。

如图，左下角可以设置界面中每页显示信息数量的多少，用户可以根据自己的需要自由设置，当浏览的数据较多的时候，不再需要频繁点击下一页来浏览信息，只需把每页显示的数量调高，如此便减少了大量的操作次数。

像这样允许用户可以自由编辑来改进体验的方式还有很多，比如可以设置显示密度，就是以一样的方式自由调整信息与分割线的间距。除了行间距，有的可以自由设置每一列的列间距，用户可以根据自己的习惯来设置。

列表+可视化

场景：用户需要浏览大量的数据，并需要对数据反复进行计算、分析。

在使用大量的文字列表展示数据的同时，使用数据可视化加以配合，用户可以更好的预览到数据的大致情况，又可以在列表表单中阅读到详细的数据。

根据条件排序

场景：用户想根据某种条件的大小排序，来先后阅读数据。

通过点击第一排小标题行，可以选择不同的方式调整信息的排序方式，就和电商商品排序一样，可以选择金额高到低或者低到高排序，也可以选择别的方式进行排序，从而更快找到自己所需要的内容。

筛选过滤

场景：从一大堆混杂的数据当中，寻找符合条件的自己所需要的数据。

添加筛选功能，过滤掉自己不想浏览的内容，通过条件筛选，更快的更的找到自己想要的内容、缩小查找范围、减少达到目的所花的时间。一般通过下拉按钮的形式选择不同的条件来进行筛选过滤。

关键字搜索

场景：已知列表中某信息的名称关键字，想从大量混杂的列表中快速找到。

跟筛选过滤一样，添加关键字搜索功能，用户提供部分关键字，可通过关键字查询，最快最的找到想要的那一条内容。一般该目标内容是用户已知的，有时候是针对性的。

悬停展现操作

场景：精简设计风格的界面，不想界面中内容过于繁多。

如图，鼠标悬停在哪一行，哪一行才会显示该列表后面的操作按钮，好处是减少了视觉干扰，能更快的找到捕捉到操作位置，弊端是用户不进行交互的时候无法发现操作按钮如何出现。

可展开列表

场景：想快速获取列表中某信息的其他附属内容。

如图，点击某一行后，展现该行的一些附属信息。可以不用跳转页面而进一步了解该行信息的详情。

可编辑列表

场景：在浏览列表的同时，需要频繁的对列表中的信息进行编辑。

用户可以直接对列表信息进行修改、编辑，省去了跳转再编辑的麻烦步骤，更节约时间，用户操作起来更加方便。

快速预览

场景：需要充分了解列表中不同信息的详细说明，频繁跳转又过于麻烦。

和可展开列表的作用类似，但是可展开列表显示的内容有限，快速预览的功能可以用侧弹框的方式、弹出对话窗口的方式、以及其他方式对选中的内容直接展示详细信息。用户不需要跳转至详情页就可以了解到大量信息，省去繁琐的交互流程。不再需要频繁的跳转到详情-返回-跳转到另一个详情-返回-跳转-返回。使用快速预览的功能就可以很好的解决这一问题。

（PS：弹出对话窗口的方式，可以同时弹出好几项列表的详情信息进行对比，但是侧弹框因为高度优势，可以展现更多内容）

自定义列

场景：列表中每条内容显示信息参数过多，且很多不想浏览。

自定义列表功能是用户可以自由设置每行信息参数的内容，比如我不想列表中显示金额这一项，就可以删除，想要的时候可以添加回来，这样用户可以保留自己想要的那几项内容，可以更快更方便的阅读到自己关心的那几项参数，节省了用户的有效时间。

固定头部

场景：列表横向或者纵向过多，下翻或横拉的时候标题头被隐藏，不知道自己当前浏览到的参数属于哪一项。

交互过程中，可以把第一排重要的东西固定，列表内容翻动的同时，第一排仍然在原位不移动而且覆盖列表中的其他信息，很多自带的框架都是这样的形式，使用的出场率也是非常高，这样用户可以随时查看到自己看到的内容是属于哪一项属性，或者是属于哪一条信息，可以是横向固定，也可以固定竖直的第一排标题，也可以固定最后一块操作点击区域，具体如何固定、是否固定，根据整体的需求来选择。

间距的规则

通常表单都是大量的文字，大多数的文字高度都在该行高度的三分之一左右。过于紧密用户浏览不顺畅，过于分开显得画面过于松散，不同的分割方式，间距也会有所不同。

总结

其实上面的每一条都是一个小总结，每一条在大部分的列表中都可以用到，主要还是根据实际需求来运用这几点，比如分割的方式根据主体风格来搭配，不要为了设计而设计盲目运用，毕竟设计都是以内容为主，尤其是表单设计，本身就是更好的表达内容。

本文发布于人人都是产品经理。

有句话叫：「设计无小事」，很多看似不起眼的东西却起着至关重要的作用，比如这期要说的线条，很多人对于线条的理解有局限性，比如：线条的形态可以是曲线、直线、折线、粗线、细线、实线、虚线等等。其实已经牵扯到了点、线、面的知识，这也是很多科班生在学校必学的知识点，但是这期所说的线与点线面中的线还是有所不同的，点线面中的线可以是线条、可以是文字或者是看不到的视线，而是今天着重说的是设计中很直观的线条。下面我们还是通过实际的案例逐一分析：

线条可以引导视觉

设计类的知识很多都和日常生活息息相关，尝试着把设计类的知识点与日常生活想结合，对于记忆和理解来说会更加得心应手，例如：

图中的闪电可以视作为设计中的线条，给人的视觉感受是通过闪电把天与地连接为一个整体，而闪电在图中的作用就是串联整体，那么回到这里的正题：线条有引导视觉的作用该怎么理解呢？再举一个现实生活中的案例：

我们选择从北京到拉萨开车去，出发之前可能需要在地图上看下路线，知道途径哪些省市，规划好行程路线，这里绿色的虚线就起到了引导视觉的作用。回归设计中道理是一样的，线条可以引导用户把原本杂乱无章的视觉点规整为有次序的视觉元素，例如：

当看到左侧这张海报时我们视觉次序会出现很多变化，比如：1>A>3>B>4>C>2 或者 A>2>C>4>B>3>1 等等 N 多种顺序，这时给人的感觉就是杂乱无章的，毫无视觉次序而言；而看右侧的海报给人的感觉却是条例清晰的，相比而言只是多了两条线，但是却在整个海报中起到了引导视觉的作用，它可以给与用户阅读海报时视觉辅助的作用，让用户以右>左>右的视觉次序欣赏、阅读，看似很不起眼，其作用却至关重要。

前面也说了，线的形态可以有很多种，例如：

这里是以真实的可口可乐吸管作为设计中的线条，同样起到了视觉引导的作用，但是我们不难发现，这里的线条不仅仅只有一个作用，也牵扯到另一个作用：线条有串联整体的作用。

线条能够串联整体

在排版时我们有分组原则，即把互想关联的元素彼此靠近，无关联的相互疏远。在页面中我们会把同一色块上的元素视作为一个整体；下面我们说下线条所带来的串联整体的作用是如何体现的，比如：

△ 图一

△ 图二

图一因为大面积的留白能使得用户很容易分辨出自行车与文案是一个整体，但是相较于图二而言，其整体性略显不足，而且给人的感觉太过单薄、重心不稳；图二的整体性更强，这里的矩形线条就起到了串联主题的作用，类似的还有：

不难看出，这些案例中的线条都有串联主题的作用，线条使得主题元素整体感更强、画面板式更加严谨；对于整体的视觉传达也起到了串联、引导的作用；在文字排版中，也有类似的线条，比如：

同样是通过线条把文案更加整体化，也起到了串联的作用。

线条可以突出主题

突出主题的方式有很多种，像我们之前所说到的留白、对比。接下来继续说下另一个可以突出主题的方式—线条，下面看个案例：

通过对比观察我们发现，右侧海报整体感更强，主题文案信息更加清晰，主体更明确。其中的原理可以理解为：因为线条的存在，使得主题信息有了一定的范围，在视觉上等于是在海报中划定了视觉焦点，从而起到了突出主题的作用。当然还有其他的表现形式，比如：

很好的诠释了线条的作用——突出标题序号。在进行创作时，作品的每个元素都要做到有理有据，否则只是一味的抄袭，到再创作时脑袋里还是一片空白，只有明白了其中的设计原理，才能做到活学活用。再看几个案例：

突出主题也许一个线条就可以表现的淋漓尽致，因设计目的的不同，线条所发挥的作用也不尽相同。下面继续分析：

线条可以分割整体

前面说了线条有串联整体的作用，而这里又说可以分割整体，是否存在矛盾呢？下面举个简单的例子：

在小文案的区域中间我加了两个线条，看似很小的改变，其目的是把文案很准确、严谨地分割为三个小整体，希望能给用户带来识别性更强的阅读性，再举个例子：

这里的线条把月份和日期分割、英文和中文分割开，使得用户对于信息的捕捉能力以及可辨识性都提升了很多，而线条的作用就起到了分割的作用。

线条有修饰的作用

线条也能起到修饰、衬托的作用，很多小伙伴会忽视这一点，其实线条也可以成为海报中衬托画面、修饰主题的元素，例如：

海报中的线条起到了衬托、修饰主题的作用，假如把这些线条都删除，画面整体会显得相对单薄。

更多设计中线条的应用：

总结

线条的作用我们分为四个逐一分析，其实它们之间也存在着相辅相成的作用，不能以一概全，线条所起到的作用可以是一种，也可以是多种，比如：我们前面「可口可乐」的案例，即有串联整体的作用，又有引导视觉的作用。只要我们在使用的时候能明确目的，而不是机械式的抄袭，那么最终一定会得心应手。

文章来源：优设    作者：美工美邦

文章来源：站酷    作者：设猎派

这篇文章来自于 Invision 出品的书籍，围绕规划、设计、构建和实现设计系统的实践经历来指导读者，其中包含了经验丰富专家的真知灼见和一手经验。我很喜欢，也分享给大家，推荐阅读。这是一个系列，一共有 7 章，感兴趣的话，持续关注吧。

20 世纪 60 年代，计算机硬件技术的升级开始超越软件发展的速度。计算机的处理速度变得越来越快，价格也越来越便宜，但计算机软件开发仍然处于缓慢、难以维护的境地，并且还很容易出错。两者之间的差距以及解决这个问题的困境被称之为「软件危机」。

在 1968 年的北约软件工程会议上，道格拉斯·麦克罗伊（Douglas McIlroy）提出了基于组件开发有可能是解决「软件危机」的方法之一。基于组件开发是一种通过复用代码来提高编程潜力的方法，该方法能帮助编程工作更、更易于扩展。这样做既能减少编程工作量又能提升软件开发的速度，让软件更好地运用现代计算机的力量。

在 50 年后的今天，我们又面临着类似的挑战，只不过这一次是在设计领域。在 UI 设计中，设计的角色是在为特定需求量身定做解决方案，所以很难去基于整个应用进行扩展。

你有没有走查过你输出的界面，发现自己使用了几十种类似的蓝色，或者同一个按钮不同的用法，将这些样式组合对应到你设计的每一个 UI 界面，就会意识到一套不成体系的设计是多么的难以维护。

△ 一份 UI 样式走查收集的成果，里面罗列的十几种类似的按钮样式说明之前团队挖的坑有多深。

在这种状态下，设计要跟上开发的速度，公司可以选择做以下三件事：

• 雇更多的人
• 提高设计速度
• 找到一个适用于多个问题的解决方案

通过复用设计，设计系统能够帮助团队更好、更快地构建产品——复用性使规范成为可能。这是设计系统的核心和价值。一个设计系统是一个可复用组件的合集，由清晰的规范作为指导，组合在一起构建成各种的应用程序。

50 多年来，工程师们一直在遵循着这个理念执行工作。现在是时候让设计充分发挥其潜力加入他们了。

用系统思维扩展设计

你可能已经清楚地意识到，设计系统已经成为当今软件行业的一个热门话题，并且理由也很充分。很多企业投资设计系统，因为他们认识到产品体验能够带来竞争优势，不仅能吸引和留住客户，更降低产品学习成本。

在重视设计系统的公司内部，通常能看见这种情况：

• 设计团队不断壮大。
• 设计师分布在整个公司的团队中，可能在多个部门。
• 设计在整个公司平台上的各个产品中都起着关键作用。

如果你是设计师，那么前面所说对设计的投资听起来可能会令你很兴奋，但其实也带来很多挑战。当一个应用由不同的团队负责迭代各自模块的时候，你将如何跨平台设计一致的 UI？又如何使所有团队能够进行快速迭代？当团队的设计师设计出新的独立样式时，你又将如何处理这种不可避免的设计需求？

要了解如何应对上述的挑战，我们要先了解什么是设计系统。设计系统将个体和整体两个概念各自的优点结合在一起。

1. 标准

拥有 MAC 用户界面的技术知识是产品设计的关键因素，但了解用户界面背后的理论，才能够帮助你创造出色的产品。——苹果人机交互指南

为了设计卓越的用户体验，不仅要了解设计系统背后的内容，还要了解其设计的原因。我们一般会通过建立和遵守标准来达成共识，这样做能消除主观性和歧义性，保证产品团队内部不会出现摩擦和混乱。

这套标准的内容涵盖了设计和开发。例如对命名约定、无障碍标准和文件结构等等，帮助团队达成共识，减少出错。

视觉语言是设计标准的核心部分。定义颜色、形状、类型、图标、布局和动效的样式和用法对于创建品牌一致的用户体验至关重要。系统中的每个组件都包含这些元素，它们在表达品牌特性中扮演着不可或缺的角色。

没有标准，决策时就会无据可依。这不仅不能扩展设计，还会造成复杂、差劲的用户体验。

超越平台

视觉语言可以不局限于单一平台，可以在 Web，iOS，Android 和其他平台上延续。将规范文档展示在设计系统网站的醒目位置，能够帮助系统开发者了解组件的样式和交互模式。例如，Google 的 Material Design 就深入到其产品视觉语言的各个层面。

2. 组件

组件是系统中复用代码的一部分，它们充当应用程序界面的基础。组件的复杂性各不相同。将组件简化为单个功能（如按钮或下拉菜单）可以增加其灵活性，使其更易于复用。复杂的组件，如特定类型数据的图表，可以很好地满足其应用场景，但是这种复杂性限制它的使用场景数量。组件的复用性越高，需要维护的次数就越少，规模也就越简单。

基于组件的开发通过复用代码来减少技术开销。建立标准规范了这些组件的用途、样式和用法。两者结合在一起，就相当于为你的产品团队配备了一个清晰的系统，让他们了解到为什么和怎么做。

设计系统的价值

让我们详细看看设计系统如何帮助你解决一直以来的痛苦。

1. 扩展式设计

随着团队的成长，设计师通常会将注意力集中在应用程序的独立功能区域，如搜索和发现、帐户管理等。这就会导致设计碎片化，就像是一座设计的巴别塔，每个设计师都将他们的设计语言往上添。当设计师单独而不是系统地去解决问题时，就会发生这种情况。

没有通用设计语言统一产品和设计，用户体验就会开始崩溃。当缺乏设计规范时，设计讨论就变得毫无用处。为了使团队内部保持一致，必须要有一个共享的来源——可供参考的官方样式库。

大多数情况下的样式库都是静态的内容，例如设计模版。但是静态的参考几乎立刻就会过时。这就是为什么有的团队会建造像 Shopify’s Polaris 站点这样的网站——一个设计系统站点，用该设计系统构建而成，记录系统的所有方面，包括组件、指南和交互最佳使用场景。因为它是与系统一起构建的，所以它能够保持其永远是的。

对于产品团队而言，内部设计系统站点是最佳、最易访问的共享来源。它提供了一个引力，使团队成员保持一致和同步。

2. 管理你的债务

随着应用程序和团队的时间积累，会慢慢形成债务。这种债务不是金融债务，而是技术和设计债务。这些债务是因为解决独立问题获得的。设计债务由大量不可复用和不一致的样式和惯例组成，而维护它们是不可能完成的任务。随着时间的推移，这些债务的累积会成为减缓增长的巨大负担。

创造行为本身并不会产生债务——就像花钱本身并不会产生金融债务一样。但使用设计系统将使你的设计和代码保持足够简洁，同时仍然允许你进行升级和迭代。

3. 一致的设计

一致且重复使用的标准化组件，使你应用程序的易用性大大提升。标准化的组件还能让设计师花更少的时间关注样式，花更多的时间专注于提升用户体验。

4. 更快的原型

在设计系统下工作，你可以像玩乐高一样快速拼凑流程和交互，构建无数的原型和方案进行快速验证，从而帮助团队快速获得数据和结论。

5. 提高可用性

页面样式的不一致会影响产品的可用性，当 CSS 因为数不清的不一致样式元素和交互增加时，页面加载时间也会加长，这会导致很糟糕的用户体验。它还可能产生冲突的 CSS 和 JavaScript，从而可能破坏你的应用程序。通过使用设计程序，通过构建一个整体的组件库（而不是每页）来避免这些冲突，从而花费更少的时间来保证产品质量。

6. 建立可访问性程序

可访问性在组件级别就可以实现，针对残疾人士、网速较慢和老旧的计算机上进行优化。这是一个建立易用性程序很好的方法， 在第 3 章「构建设计系统」中，Katie Sylor-Miller 解释了设计系统如何帮助你改善产品的可用性，并保证遵守你所在国家/地区的法律。

（译者注：美国残疾人法案于 1990 年 7 月通过并签署，其中有规定网站的可用性必须遵守《美国残疾人法》（ADA）的相关内容。）

设计系统的误区

即使有上述说的这些好处，在团队内部推行一个设计系统的时候，仍然很难说服团队成员。设计师可能会感到局限或束缚，但通常这些被感知到的弱点正是设计系统的最大优势。

让我们来揭穿那些你在推行设计系统时经常会遇到的误区吧。

误区1：过于局限

误区：负责深入独立业务的设计师看到的设计标准可能会与其他需求的不一样，因此，他们会认为通用的设计系统过于局限，可能无法满足某些特定业务的需求。

现实：设计师通常会设计出自定义的解决方案以满足应用中的独立的业务，从而增加了设计和技术的负担。而使用设计系统，这些被设计的新解决方案可以被反馈到设计系统里面，使每个人都可以使用这些改进方案。

误区2：缺乏创造力

误区：如果设计师被限制在一个设计系统下做设计，那么他将不能去自由地探索设计风格。前端的工作通常包含着各种样式风格的更新。对应用程序的风格进行改版通常不是一个小任务。这也可能是一个很大的风险，因为从事这项工作会移除一部分的旧资源，可能会对可用性产生负面影响。

现实：设计系统的组成部分是相互关联的，这意味着当一个位置进行更改时，这项更改会在整个系统中同步，这使得系统内的样式更新工作变得轻而易举，但影响却大得多。以前是几周甚至几月的工作量，现在可以在一个下午就能完成。

误区3：一劳永逸

误区：设计和构建完设计系统后，工作就完成了。

现实：设计系统是有生命的，这意味着需要不断对其进行维护和改进。但是由于应用是由设计系统的复用性组件提供支持的，因此该应用会自动同步设计系统的改进内容，从而减少维护应用程序的工作量。这就是设计系统提供的扩展能力。

总结

设计系统不是一时流行的方法，也不是未经检验的假设。为了让设计找到与技术的快速发展相匹配的同等方案，基于组件的设计和开发是一种行之有效的可靠解决方案。

现在你已经了解了创建设计系统的真正价值，让我们在下一章中深入探讨实际的设计过程吧。

文章来源：优设    作者：彩云译设计

奔驰法（SCAMPER）是能够帮助我们拓宽解决问题的思路检查列表。在解决问题的过程中，如果感到束手无策，可以尝试从列表中显示的方向重新思考问题，从而打开解决问题的思路。你将通过本文熟练掌握其运用方法。

SCAMPER的方向

SCAMPER 是七个英文短语的缩写，同时也代表着七个解决问题的方向，这七个方向是：

• 替代
• 整合
• 调整
• 修改
• 另用
• 消除
• 逆反

SCAMPER 法的具体实践步骤：

1. 首先列出现有产品或服务让团队止步不前的问题、障碍、困惑等。
2. 就 7 个切入点找出合适的定义（请参阅我们下面的步骤指南）。
3. 根据需要创造的对象或需要解决的问题来设计问题。
4. 逐项加以讨论、研究，从中获得解决问题的方法和创造发明的设想。
5. 评估可行方案，落实流程改善或进行产品改良。

示例：麦当劳

麦当劳家喻户晓的知名度得益于极具传奇色彩的麦当劳创始人雷·克罗克先进的经营理念。毕竟麦当劳的出现让人们的生活模式发生了翻天覆地的变化。时至今日，我们仍然可以从麦当劳的商业战略中识别出 SCAMPER 法的踪迹：

• 另用：出售餐厅和房地产，而不是简单的汉堡包。
• 消除：让客户为自己服务，从而避免高昂的人工成本。
• 调整：让顾客在用餐前付款。

SCAMPER的步骤

替代

这里需要考虑的总体问题是：何物可被「取代」？

寻找当前选项的替代选项。这些替代选项可以是人，物或方案等一切等同于现有选项的东西。例如产品的替代材料，服务的替代方案以及后备人员等。

思考清单：

• 我可以对零件进行替换吗？
• 我可以更换哪部分工作人员？
• 我可以更改规则吗？
• 我可以更改成分或材料吗？
• 我可以使用别的方法吗？
• 我可以改变形状、颜色、粗糙度、声音或气味吗？
• 我可以把这个想法用在其他项目上吗？
• 我可以改变自己的感受或态度吗？
• ……

整合

这里需要考虑的总体问题是：可与何物合并而成为一体？

将现有产品和别的产品或系统结合在一起使用，或者能否与其它产品合并而成为一个整体？

思考清单：

• 组合起来怎么样？
• 能否装配成一个系统？
• 我可以将各种想法进行综合吗？
• 我可以把目的进行组合吗？
• 我可以把各种部件进行组合吗？
• 我可以合并哪些流程或步骤？
• 为了降低生产成本，我可以合并哪些方面？
• 我可以在哪里建立协同？
• ……

调整

这里需要考虑的总体问题是：原物是否有需要调整的地方？找出所有可以调整的选项。

思考清单：

• 可否改变一下形状、颜色、音响、味道？
• 是否可改变一下意义、型号、模具、运动形式？
• 能否更换一下先后顺序？
• 可否调换元件、部件？
• 是否可用其他型号，可否改成另一种安排方式？
• 原因与结果能否对换位置？
• 能否变换一下日程？
• ……

修改

这里需要考虑的总体问题是：可否改变原物的某些特质，如意义、颜色、声音、形式等？修改现有的所有或部分选项，重新组合出新产品。

思考清单：

• 能否添加部件？拉长时间，增加长度，提高强度、延长使用寿命、提高价值？
• 现在的东西能否缩小体积，减轻重量，降低高度，压缩、变薄？
• 能否省略，能否进—步细分？
• 能否添加额外的功能？
• 能否扩大目标群体？
• ……

另用

这里需要考虑的总体问题是：可有其它非传统的用途？不断寻找现有产品的新用途，将现有产品推广到新地方。

思考清单：

• 它可以用在哪些地方呢？
• 是否有新的方式来使用它？
• 扩展以后是否还有其他用途？
• 是否还有其他市场呢？
• 哪些目标群体可以从该产品中受益？
• 还有谁可能会使用它？
• 它能让原本不打算使用它的人使用吗？
• ……

消除

这里需要考虑的总体问题是：可否将原物变小？浓缩？或省略某些部分？使其变得更完备、更精致？消除不必要的选项，减少不需要的功能。

思考清单：

• 我可以消除或简化哪些内容？
• 我可以减少时间或其他组件吗？
• 如果我删除某一部分会发生什么？
• 哪些是必要的或不必要的？
• 我可以取消这些规则吗？
• ……

逆反

这里需要考虑的总体问题是：可否重组或重新安排原物的排序？或把相对的位置对调？重组或重新安排选项的顺序，或把选项的位置对调。

思考清单：

• 倒过来会怎么样？
• 上下是否可以倒过来？
• 左右、前后是否可以对换位置？
• 里外可否倒换？
• 正反是否可以倒换？
• 可否用否定代替肯定？
• 可以有其他的顺序或者构造吗？
• ……

SCAMPER的由来

这个检查列表最早是为头脑风暴设计的，旨在激活参与人员思路，起到发散思维的作用。心理学家罗伯特·艾伯尔总结了这些列表并做出最终的解释。目前奔驰法主要用在产品改造和服务升级的过程中，但它对普通问题的解决也有帮助作用。

文章来源：优设    作者：陆小凤不传奇