现代 UI 和 UX 设计师必备的 10 大技能(上)

1.如何适当地确定对象之间的间距

在确定间距时遵循惯例可以给我们的设计带来统一性，并且可以确保我们在跟其他设计师合作的时候大家能做出一致的设计。

设计师一般用两种方法来精确地确定页面元素的间距。最常见的间距体系有固定网格（Hard grid也称为基准网格）或随意网格（Soft grid）。

固定网格会让内容跟固定的垂直网格对齐，随意网格则定义页面项目之间的间距。

为什么要用固定网格？用固定网格（8像素或4像素）派的依据是，通过使用透明背景框，然后将其与前景元素编为一组，这样跟踪边距以及按照元素进行填充会更容易。然后，我们就可以像对待拼图一样把这些容器捕捉到网格之中。

为什么要使用任意网格？“任意网格”派的观点是，在进行界面开发时，编程语言不会采用那种网格结构，所以网格无关紧要。任意网格对设计师的约束也没那么多，而且不用那么乏味。

我更喜欢用任意网格，因为我可以调整间距去适应内容，而不是调整内容去适应间距。这种设计流程也更快捷，而且不那么会出现完美主义的倾向。

为什么设计间距要以8作为增量？不管是任意网格还是固定网格，设计师都必须用4或8 px来隔开元素。

我们之所以要用8这个魔术数字，是因为如果一个设备是1.5x的分辨率，我们就没法导出一个奇数。

此外，绝大多数现代屏幕尺寸都可以被8整除，这样我们就可以轻松地根据不同的设备调整我们的设计。

2.如何挑选完美的调色板

颜色主题的目标是要和谐，无障碍，并有助于将UI元素和界面彼此区分开。

设计师一般都不愿意从头开始创建调色板，但是其实创建调色板比大家想象的要容易。怎么才能始终如一地创建出干净美观的调色板呢？我介绍4个步骤：

选择一个品牌颜色。作为开始，我会根据品牌、个人喜好（如果是业余项目的话）、研究或颜色心理学来确定原色。

选择系统颜色。为各种元素定义颜色，比方说背景、文本、错误、成功等。

利用基色创建调色板。给品牌和用户界面选定基本颜色后，我会把那些颜色放入Google颜色工具里面，以获取该颜色的不同色彩和色度。

确保访问无障碍。网页内容无障碍指南（Web Content Accessibility Guidelines）建议所有文本和背景之间的颜色对比度至少应该是4.5：1。可以用Stark插件来确保调色板的访问无障碍（如果是用Google颜色工具来生成的话，就应该没问题）。

3.如何给排版建立字体比例指南

排版牵涉到的不仅仅是选择一个好字体。用得好的话，它可以改善界面内的可读性，可访问性以及层次结构，从而增强可用性。

如果你不愿意从头开始创建版式指南，可以试试Material 的字体比例生成器来为段落、标题、按钮等生成字体大小。要为UI项目创建字体比例指南，请按以下步骤操作：

选择要使用的字体。我最喜欢到Google fonts和Adobe fonts去获取高质量UI字体。

字体数量避免超过2种。不要给界面引入新字体，而应使用字体系列。来自同一家族的字体本来就是为了配合使用的，所以既灵活又一致。

确定基本字体大小。我会先确定用于正文的最常用的字体比例，然后再确定合适的行高。

确定行高。根据经验，行高应为字体大小的1.5倍。当然，未必就一定要这样，但这是一个不错的起点，然后可以根据需要进行调整。

定义比例。比例可以提供一致性、节奏性和层次性，因为这是可预测的。要为h1，h2，h3，正文，标题，按钮等设置字体比例，我们需要用一个比例值乘上基本字体大小。常见的字体比例为1.250x ，1.414x ，1.5x和1.618x。

在设备上测试比例。在多种设备尺寸上用不同的比例测试字体，以便确定正确的比例值。

4.如何制作一份完美的案例研究

可以看看我用Figma创建的案例研究模板。

在设计项目结束的时候制作一份全面的案例研究，这个仪式本身就是一个设计项目。

记录设计过程对于很多有进取心的设计师来说已经是根深蒂固的行为了，以至于他们似乎会用尽可能丰富的彩色贴纸来记录下自己的完美时刻。

以下是我的一个案例研究的格式：

介绍

概述。提供项目的高级描述。

客户。客户是谁？解决方案是给谁做的？

角色。你在该项目中扮演的角色是什么？（比方说，首席用户体验设计师）

持续时间。这个项目持续多长时间？

工具。列出你本项目使用的工具。（比方说XD，Whimsical）

定义问题

假设。说明假设了什么样的问题导致项目的启动。

建立问题陈述。用一句话概括你要解决的设计问题。

发现。这是对我们假设的初步验证。在发现阶段，我们要研究问题，找到现有的解决方案以及可能的改进机会。

测试

访谈。假设在发现阶段发现了潜在的机会，那么现在该去访谈潜在的客户了。概要描述受访者人数，调查情况，年龄范围（如果适用的话），性别（如果适用的话）以及访谈时间。

目标。指出访谈期间试图得到的不同发现。

洞察与机会

旅程图。旅程图会帮助你发现这些洞察，以加深你对用户痛点的理解，并找到潜在的机会。在旅程图里，要确保勾勒出用户旅程当中的机会。

机会。通过发现、研究和访谈，我们已经发现了产品的众多潜在机会。概括出你的设计可以帮助解决的3个关键机会。

解决方案

说明解决方案。解决方案陈述要概述设计是如何解决的客户遇到的核心问题的。

设计

设计原则。指导设计决策的原则是什么？

MVP。展示为解决上述问题和机会而建立的最小可行解决方案。

收集反馈。你是怎么收集有关MVP的反馈的？（比方说用户测试、hotjar、google analytics、调查等）

测试洞察。描述从设计测试中得出的发现。也要包括来自用户的评价。

响应反馈的新迭代。设计的过程本质上是迭代的，不断进行的，所以我喜欢根据初步反馈以及提到的未来路线图功能，用更新的设计结束我的案例研究。

结论

总结你的发现、挑战，客户引证以及其他说明，把它们汇总到一起。

5.如何编写有效的UX文案

在理想的情况下，UX写作是专业UX写手的任务。但是，公司一般都是依靠自己的UX团队而不是雇用UX写手来传递清晰的消息。如果你的团队有UX写手，那太好了！如果没有，我有一些技巧可以帮助你向用户传达清晰的消息。

一次性把所有的文案都写好。在设计产品的时候再即兴写文案的想法很诱人，但这往往会导致定调不一致，想要传递的消息缺乏凝聚力。要给所有的告警、消息、模态窗口、解说文本等创建一份文档。

短而美妙（KISS）。UX文案中可能会存在一些通过快速审核就能轻松干掉的错误。与其说：“只有高级会员才能访问此功能”，不如说“成为高级会员获得访问权限”，这样更加简洁明了。

保持一致。跟用户打交道时，一定要坚持用第一人称或第二人称。所以，不要说“在我的账户里面编辑你的位置”，而要说“在你的帐户里面编辑你的位置”。

避免行话。除非我们是给专家设计app。否则避免用行业相关的术语，比方说“缓存”或“配置”。

用现在时态写句子。不要用：“消息已被发送”，而要用“消息已发送”。

以终为始。如果一句话既要描述又要说明实现该目标所需采取的行动的话，请从目标开始。不要说：“把照片拖到垃圾桶，一边将其从该相册中删除”，而要说：“要想从该相册中删除这张相片，请将其拖至垃圾桶中。”