内容
什么是用户界面设计？一个更好的问题是，用户界面的设计实际上是什么？美学？可用性？辅助功能？他们都是？所有这些因素如何结合在一起以实现最佳的用户体验？首先应该选择哪个？
可访问性应始终放在第一位，为实现最佳可用性奠定基础（使用顶级网站构建器将对此有所帮助）。然后，当UI既可访问又可用时，就美观而言应该已经相当不错了（UI设计工具将在此起到帮助作用）。然后，要确保您的设计可以在所有级别上使用，您需要对其进行彻底的测试，这可以通过我们选择的最佳用户测试工具来完成。让我们仔细看看大多数设计的基本元素，以及如何确保视觉一致性。
01.选择您的版式
出色的排版（像设计的许多方面一样）归结为可访问性。视觉设计无疑会增加用户的整体体验，但最终，用户正在与UI交互，而不是将其视为艺术品。清晰的字母可以使内容更清晰，单词的可读性可以帮助用户有效地消化内容。两者都比任何视觉美学都重要。
但是，精心设计的版式在美学上仍可以令人满意。仅需进行一些简单的排版改进，黑白Helvetica（或类似字体）就可以成为一件美事。所谓增强，是指调整字体大小，行高，字母间距等，而不是调整字体或文本的颜色。
当人们无法理解“漂亮”字体时，它实际上是丑陋的，因为挫败感总是胜过美学。出色的设计是平衡而和谐的。
与用户界面设计的许多方面一样，微调视觉效果以平衡可访问性和美观度并不是挑战。挑战在于在整个设计中保持一致性。一致性在重要性各不相同的元素之间建立了清晰的层次结构，从而帮助用户更快地理解UI，甚至更有效地消化内容。
关于可读性和可读性，WCAG 2.0 Web内容可访问性指南定义的最小可接受字体大小为18pt（或14pt粗体）。最佳字体大小在很大程度上取决于字体本身，但重要的是要牢记视觉层次结构以及该基本大小如何与摘要和标题区分开来（即 h1>, h2>, h3>).
使用您选择的UI设计工具（我们将使用InVision Studio），创建一系列文本图层（Ť），然后调整所有大小以与以下模板相关联：
- h1>：44像素
- h2>： 33像素
- h3>： 22像素
- p>： 18像素
对于InVision Studio（和所有其他UI设计工具），这是通过使用右侧的“检查器”面板调整样式来完成的。
接下来选择您的字体，但是要小心，因为您可能会注意到某些字体是18px > 和22px h3> 看起来并没有什么不同。我们有两种选择：调整字体大小或为标题考虑其他字体。如果您认为您的设计将是大量文本，则选择后者。
请记住：
- 视觉UI设计通常是一种直觉
- 什么都没有决定；一切都可能改变
线高
最佳的行高可确保文本行之间具有足够的间距，以实现良好的可读性。这正被越来越多地视为“标准”； Google的Lighthouse Audit工具甚至建议将其作为手动检查（如果文本包含的链接可能由于行距不够理想而过于紧密，甚至会发出标记）。
WCAG再一次帮助我们解决了这一问题，声明行高应为字体大小的1.5倍。因此，在UI设计工具的“行”（或类似）下，只需将字体大小乘以–至少– 1.5。例如，如果正文文本为18px，则行高为27px（18 * 1.5 –您也可以直接在Inspector中执行数学运算）。但是，请再次注意-如果1.6倍感觉更合适，请使用1.6倍。请记住，不同的字体将输出不同的结果。
现在考虑在设计中使用真实数据还为时过早，但是至少我们仍然应该使用一些实际数据（甚至是lorem ipsum）。 InVision Studio有一个本机真实数据应用程序，可以帮助我们了解排版的实际外观。
段落间距
段落间距不是我们可以使用InVision Studio的Inspector声明的样式。相反，我们需要使用智能参考线（⌥）手动对齐图层。与行高相似，魔术倍数为2倍（字体大小的两倍）。例如，如果字体大小为18px，则在进入下一个文本块之前至少应有36px的空间。字母间距至少应为0.12。
但是，在开始创建组件之前，我们无需担心。
共享样式
如果您的UI设计工具支持该功能（InVision Studio尚不支持），请考虑将这些印刷样式转换为“共享样式”，以便在确保视觉一致性的同时快速重用它们。这通常是通过检查器完成的。
02.选择正确的调色板
为您的设计选择完美的色彩远远超出了美观范围：它可以为您的网站的整个层次提供信息。
当涉及到UI设计时，习惯上来说颜色是我们喜欢的第一件事，但我们被告知直接进入视觉设计是一件坏事。这当然是正确的，但是在视觉一致性方面，颜色应该是首要考虑的问题，因为它还扮演着其他角色。
UI设计中的颜色可能非常有效，但是由于某些用户（实际上很多人）患有各种类型的视觉障碍，因此并不总是可靠的。话虽如此，它不一定与所使用的特定颜色有关，而与颜色的类型有关。当涉及品牌时，这可能不是正确的，因为在这方面将颜色用于情感影响，但是在UI设计中，颜色也用于传达意图，含义以及视觉层次。
顶级工具和资源01. 斯塔克
Stark插件与Sketch和Adobe XD兼容，可帮助您直接从画布上检查颜色对比度并模拟色盲。即将提供对Figma和InVision Studio的支持。
02.颜色
颜色是一组90种颜色组合，它们具有适当的颜色对比度，以满足WCAG 2.0准则-其中一些甚至可以满足AAA标准。
03. A11y项目
A11y项目是所有与可访问性相关的大型枢纽。它包括资源，工具，技巧，教程，由Stark插件的制造商创建，并获得InVision的资助。
三种颜色
颜色具有含义，因此不要过多使用颜色是很重要的。太多的含义会导致用户必须理解和记住更多的内容–更不用说让我们担心的更多颜色组合。一般来说，这是推荐的格式：
- 号召性用色（也是主打品牌色）
- 中性深色（适合UI元素或深色模式）
- 对于上述所有情况，变浅和变暗的变化
这将启用以下功能：
- 暗模式很容易实现
- 我们的CTA颜色永远不会与其他颜色冲突
- 在任何情况下，我们都可以强调和不强调
设置您的调色板
使用您选择的UI设计工具，为每种颜色（名称分别为“品牌”，“中性/浅色”和“中性/深色”）创建一个相当大的画板（轻按A）。然后，在每个画板上创建其他较小的矩形，以显示颜色的暗淡变化以及其他颜色本身。
我们认为较亮和较暗分别为白色增加10％和黑色增加10％。完成后，在每个画板上显示印刷样式的副本。这些文字层的颜色应为中性光，但在中性光画板上应为中性深色。
对比
接下来，我们需要检查我们的颜色以获得最佳的颜色对比。有多种工具可以执行此操作，例如适用于Sketch和Adobe XD的Stark插件或适用于macOS的Contrast –但是，诸如Contrast Checker或Color Contrast Checker之类的在线解决方案就可以了。
检查每种组合的颜色对比度，并相应地调整颜色。如果您不确定要使用哪种颜色，请尝试使用Color Safe的建议。
03.样式链接和按钮
尺寸
按钮和链接很像印刷术，应该有一些变化。毕竟，并非所有动作都具有同等重要的意义，而且正如我们前面所讨论的，颜色是一种不可靠的交流方法，因此它不能成为影响视觉等级的主要方法。我们还需要用大小玩具。
什么是视力承受能力测试？视觉承受能力测试是一种可用性测试，用于确定点击目标是否看起来可点击。将设计从Studio同步到Freehand（⌘⇧F），将结果网址发送给测试人员，并让他们圈出他们认为可点击的元素。
非InVision Studio用户也可以使用Freehand，但是InVision Studio用户可以从InVision Studio无缝地将其设计导入Freehand，这是从用户那里获取视觉反馈的最快，最有效的方法。
通常，我们建议将按钮文本声明为18px（与正文文本相同），但是按钮本身的大小有3种变化：
- 普通的： 高度44像素（圆角：5像素）
- 大： 高度54像素（圆角：10像素）
- 特大： 高度64像素（圆角：15像素）
这使我们能够使某些按钮在不依赖颜色的情况下显得更加重要，并且还可以嵌套按钮（例如，在外观极简的表单字段内使用按钮）。
深度
无论点击目标是按钮还是表单字段，都应使用阴影来增加深度，从而建议交互性。所有按钮和表单字段的所有变体的单一阴影样式都可以。
互动性
每种按钮类型都需要变化以指示其悬停状态。这向用户表明，他们尝试做的事情是完全可以的，并确保他们继续进行下去。
实际上，这是保持视觉一致性的较为复杂的方面之一，因为在创建状态时，颜色通常是要更改的首选样式。幸运的是，这些状态更改可能相对微妙，因此可以将颜色更改为稍浅或较深的颜色，这就是它们的目的。这也适用于链接。
决定是否这样做会导致我们使用一种已经具有重要意义的颜色，从而导致用户感到困惑，或者决定提出另一种颜色。决定使用辅助颜色是完全可以的，但应保留该颜色以用于营销视觉效果，而不是用于UI元素。少即是多（而且容易）。
请记住对每个画板重复此步骤。不要在品牌画板上包含品牌的号召性用语按钮-稍后我们将介绍某些组合不起作用时的情况。
04.创建您的组件
组件可节省大量时间，所有UI设计工具均提供此功能（例如，在Sketch中，它们称为“符号”）。在Studio中，我们可以通过选择应组成组件的所有图层并使用create创建组件。ķ 捷径。
使用组件
利用线框线框非常有用，不仅用于设计高可用性的UI，而且对于确定长期来看我们的UI将需要什么。有点像面向未来。
这并不意味着我们需要设计组件负载或为任何可能的情况做好准备，而是意味着我们需要采取“如果……怎么办”的态度。
例如，如果我们的线框要求使用3x1组件，但我们知道内容不是一成不变的，那么稍作考虑就会使我们想知道：“如果该组件最终变成4x1会怎样？”经验法则是：仅针对已经存在的用户需求进行设计，但要尝试使解决方案相对灵活。否则，我们将在稍后处理一些非常混乱的“设计债务”。
现在，我们可以通过从左侧的“库”>“文档”将其拖动到画布上来重用该组件，尽管请记住，此工作流程可能会因您的UI工具而有所不同。
这种创建样式指南（并最终创建设计本身）的方法特别适用于基于模块化/卡片式的布局，尽管“公共区域”（例如页眉，页脚和导航）也是组件的最佳选择。
就像我们处理印刷样式，颜色和按钮一样，我们必须记住仔细地组织我们的组件。
利用我们的规则
早些时候，我们曾说过不要在品牌颜色上使用品牌CTA按钮，因为品牌CTA按钮显然需要在所有其他产品中脱颖而出。那么，如何在仍然可以使用品牌CTA按钮的同时创建品牌组件呢？毕竟，如果我们将中性深色按钮（例如导航按钮）或仅次于重要性的按钮使用，那将不是一个选择，对吧？
正确的。因此，这将是创建组件的理想机会-特别是标题+文本+按钮的组合。请注意，我是如何创建一个中性色的“卡片”背景幕以启用品牌按钮的。同样，中性光表单域（表单域通常是白色的，因为心理模型历来是纸质表单的代名词）在中性光照背景下看起来并不惊人，因此只能在中性暗背景下使用-直接或在内部中性的深色成分。这是我们在遵循规则并保持一致性的同时使设计灵活的方法。
压力测试
理想情况下，确保我们设计稳健性的最快，最有效的方法是对其进行压力测试。对设计进行测试意味着残酷。假设我们有一个导航，导航量为X个导航项目，因为这是必需的；为了真正确保灵活性，请尝试通过添加更多导航项来更改这些要求，或者，要在工作中真正使用扳手，还可以尝试添加视觉层次比其他导航项更高的导航项。我们的大小，版式和颜色规则是否允许这样的事情？还是为了提供最佳可用性，我们是否需要另一条规则？
请记住，添加规则和弯曲规则之间是有区别的。边缘情况越多，一致性就越差，因此，出于可用性的考虑，多数情况下最好重新考虑一下组件。
05.记录和协作
我们如何使自己和其他可能使用我们设计文件的设计人员更容易使用我们的设计文件？您会发现，将它们安全地存储在可靠的共享云存储中非常重要。
颜色
第一步是将所有颜色保存到“文档颜色”样例中（如果我们还没有这样做的话）–当我们需要在设计中应用它们时，这将使它们更易于访问。为此，请从检查器中打开颜色选择器小部件，从下拉菜单中选择“文档颜色”，然后单击+图标将颜色添加到色板。在大多数UI工具中，其工作方式相同。
共享库
接下来，我们需要将我们的文档（包括印刷样式，颜色，按钮，公共区域和基本组件）转换为共享库。
从本质上讲，这意味着每个元素都必须是一个组件，即使它仅由一层组成。单击左侧“库”侧栏中的+ 按钮，然后将此文档直接导入到新文档中。没错：我们的文档现在是一个库，可以用来设计具有保证一致性的UI。
InVision Studio在某种程度上受到限制，因为它尚未与InVision的官方设计系统管理器工具同步，但它很容易将库存储在Dropbox中，以供其他设计师随时使用和更新。进行更改（在本地或远程）时，每个使用该库的Studio文件（再次在本地或远程）都会询问您是否要更新颜色和组件。这就是跨团队维护设计库的方式。
回收一切在设计视觉上一致的用户界面时，请重用所有内容。设计按钮，然后使用按钮创建按钮组件，然后使用
按钮组件以创建其他组件，例如警报和对话框。
只是不要创建不需要的组件。请记住，建立图书馆是一项持续不断的协作工作。它不必一次全部完成，也不必一个人完成或一次完成。它只需要传达一种语言。
大规模设计
随着设计的扩展，对其进行管理变得越来越困难。我们可能需要进行各种调整以保持其高效性和可维护性，尤其是因为InVision的DSM尚不能与Studio配合使用。
例如，我们可能想使用文本层来注释我们的库，以解释各种元素的用例。对于印刷样式，我们甚至可以编辑文本以使其更具描述性（例如“ h1> / 1.3 / 44px”）。这说 h1>s应为44px，线高为1.3。
设计交接
设计移交工具显示设计中每个元素使用的各种样式，以便开发人员可以构建应用程序或网站。这些工具包括样式概述以及“文档颜色”色板的副本。开发人员甚至可以将这些样式复制为代码，如果您决定创建任何书面设计文档并且希望包含组件的代码片段表示，那将是非常不错的选择。
如果您担心要对网站进行故障排除和管理，请确保您拥有正确的网络托管服务会有所帮助，但是对于您的设计系统而言，InVision的设计移交工具Inspect是可以使用的。要使用它，我们在InVision Studio中单击“发布到InVision”按钮/图标，打开结果URL，然后点击切换到检查模式。真的很方便
该内容最初出现在网络杂志上。
