即学即用！20个提升用户体验的实用小技巧

为了帮助大家更轻松地提升设计水平，这里整理了一些简单实用的小贴士。希望这些小技巧不仅能够助力您优化当前的设计项目，还能在未来的设计之旅中为您提供参考价值。

一、避免卡片上文本信息过多

一个卡片内通常会包含图片、标题、详细介绍及行动按钮等元素，这些元素需要以聚焦的形式去呈现，以帮助用户快速扫描内容。当文本内容较长、展示的信息过多时，不利于用户快速扫描，导致用户无法在第一时间快速感知到产品想要展示的、或用户想要知道的信息，很容易被用户过滤。

文本内容过多且无法删减时，我们可以从中提取部分更有价值信息，也可以只显示文本内容的前两行，其他将其省略，以点击展开跟多、内容弹窗或者跳转页面的方式将其完整展示，都不失为一种不错的解决方式。

二、减少表单字段的填写数量

在设计表单时，让用户填写过多的内容会增加其认知负荷，表单完成率也会随之下降。为了减少用户的操作次数，降低使用难度，但凡能让用户选择的就不要让他输入、能够系统获取的就不让用户去选择，要尽可能的减少字段填写数量，让表单显得更加简单。

类似地址、日期这类层级内容，不要将其分成多个字段，最好做成联动选择让用户一气呵成。

三、不同输入场景下的键盘类型

为了简化数据输入，满足不同的类型的文本输入需求，用户在输入不同类型的字段时，应提供对应类型的键盘，便于用户更快完成表单内容，常见的键盘有以下几种：

1. 中文键盘：绝大多数表单使用的类型，应对纯中文或综合性文本类型的输入需求；
2. 英文键盘：纯英文类型的字段，例如字母类型的用户名、英文名输入等；
3. 数字键盘：纯数字类型的字段，例如手机号、身份证号、银行卡号等；
4. 数字键盘（乱序）：多用于纯数字密码类型的输入需求，对安全系数要求较高，如支付密码等。因出于安全考虑，这类键盘虽然会增加用户的理解成本，但与财产的安全性相比，显然在可接受范围之内。

四、行高应跟随字号而变化

有很多设计师在处理大量的文本内容时，为了遵循设计规范，会设定固定的行高数值，例如常用的 1.2、1.5 倍等，需知设计规范是为了避免我们在设计中出错，并非为了规范而规范。

在应对大量的文本类容时，为了让用户有更好的可读性和易读性，行高因跟随字号的大小而变化，字体越小、行高越大，想要视觉上更加细腻，文字越粗（越黑）、行高越大，我们只需要保证在同一字号、字重的条件下，保持同相同数值的行高即可。

如果中文看的不是那么明显，可以试下英文，特别是上一行基线到下一行基线之间的距离尤为明显。笔者因工作中涉及中、英、泰三文切换，在处理行高时不敢有丝毫马虎。

五、基于拾色器右上方选取颜色

在为 UI 选取主色调时，大多都是根据 logo 色来建立 UI 色彩体系，因品牌 logo 会用户各行各业，尤其是平面印刷用色与电子屏幕用色差异过大，故而 logo 色并不能直接用于 UI 设计，我们需要在 logo 品牌色的基础上做出调整。

设定主色调时，可基于品牌 logo 的色相或往邻近色方向微调，然后在拾色器右上方（介于饱和度和明度最大值附近）选取具体的颜色。这种配色方式能让主色更加鲜明，在电子设备中显示也会更加舒适、和谐。不仅如此，在选取辅助色时也可以使用这种方式。

目前市面上那些成熟产品的配色，都会有这种规律，主色都基于拾色器右上角的位置。

六、表单标签的对齐方式

常见的表单标签对齐方式有三种，左对齐、右对齐和顶对齐。不同的对齐方式都有各自的优点和缺点，我们需要根据项目实际情况来选择最合适的对齐方式。
左对齐：左对齐是最为常见的对齐方式，可充分利用页面的垂直空间，易于扩展。在选用左对齐时，标签字数需在可控范围类，一般不超过 4 字，否则会降低可输入空间，影响输入内容的长度；

右对齐：多用于网页表单中，在标签稍长、且字数长度不一的情况下使用。当标签参差不齐时，与左对齐相比，右对齐能拉近标签与输入框的距离，增强内容的关联性；

顶端对齐：会占用较多的纵向空间，通常用于标签长短不可控的场景下，例如常见的英文表单。在中文场景中使用不多，如用户问卷调查、信息搜集等。

七、增加图片文字对比度

在图片上呈现文字时，明明设计稿上看的非常清晰，可一旦落地，总会出现文字看不清的情况。殊不知设计稿很多时候是为了视觉效果刻意为之，而一旦落地，真实场景千变万化，类似淘宝商品图，你总不可能要求千万商家在图片系统文字的位置处理成深色吧。

这种情况，我们只需要在文字位置后方加一个深色层即可，如果是靠近边缘的位置，可以在深色层从中间到边缘拉一个透明度渐变，以确保图片与深色层相接的位置过渡自然舒适。

八、大胆使用空间留白

为了提高界面利用空间，追求信息的饱和度无可厚非，但过度追求并非是一件好事，当信息过于密集、信息层级较难区分时，会耗费用户更多的时间成本。
不要吝啬界面留白，基于亲密性原则，在合理的将信息进行分组之后，请大胆使用留白，应避免元素与元素、与信息组之间过于密集，保持界面的呼吸感，给用户更为舒适通透的体验。

九、中性色的设定（黑白灰）

中性色在 UI 设计中相当重要，虽然仅次于品牌色，但在我们的设计流程中，定义中性色往往会早于定义品牌色，因为在界面配色之前，我们会通过中性色来表现界面信息的层级。

中性色即色彩中的黑白灰，设定中性色是由调整 HSB（色相/饱和度/亮度）中的 B 值高低里形成一个表现视觉强弱的等级阶梯，一般设定 4~5 个等级即可，例如 B 值的 20%（#333333）、40%（#666666）、60%（#999999）、80%（#CCCCCC）、90%（#E6E6E6）。

这里需要注意两个问题，一是要避免使用纯黑色，因为纯黑色在电子屏幕中是不发光的，会与其他发光的颜色产生巨大的反差，不易与视觉浏览；而是设定的黑白灰等级数量不宜过多，否则邻近的色值很难拉开视觉层级。

十、投影的光源保持统一

这可以被视为提升用户体验的一个高级技巧。在给组件添加投影时，如果光源方向或强度不一致，即使这种差异很细微，也可能因为不协调而破坏整体视觉效果，使界面看起来不够专业或者缺乏连贯性。

为了增强视觉上的和谐与统一，所有 UI 组件都应遵循相同的光源方向，使各个元素之间更加协调，帮助用户更快地理解和适应界面布局。此外，通过确保光照效果的一致性，还可以有效地突出重点信息。

十一、避免用占位符替代标签

输入框中的占位符可以为用户提供初步的指引，帮助他们在开始输入前有一个短期的记忆提示。理想情况下，占位符应作为标签的补充。然而，如果只有占位符而没有标签，用户可能会感到困惑，尤其是在他们点击输入框后占位符消失时，可能会一时记不起要输入的内容。

标签对于明确指示用户在表单字段中输入什么信息至关重要。保持标签的可见性不仅能提升产品的易用性，还能特别照顾到那些认知和记忆力较弱的用户。这样可以确保每个输入字段的用途始终一目了然，减轻用户的认知负担，使表单更加友好、清晰且易于使用。

十二、文本看起来沉重，需拉开层级

在处理长篇文本内容时，如果使用大面积的深色文字，读者往往会感到视觉上的沉重和压抑，同时这种布局也容易导致阅读过程中的视觉疲劳和注意力分散。
解决这个问题，可以通过调整文字颜色的深浅来改善阅读体验，减轻文字带来的视觉压力，使长篇文档变得更加易于阅读，还能让整个页面看起来更加舒适和谐。

十三、彩色色背景避免灰色文字

在无彩色背景下处理文字的层级关系时，我们通常只需要调整 HSB 颜色模型中的 B 值（即亮度）就可以达到很好的效果。

然而，在彩色背景下处理文字的明暗关系时，单纯调整 B 值可能会导致整体色彩的不协调，从而产生强烈的违和感。因此，这种方法在这种情况下是不可行的。

为了完美地解决这个问题，我们可以采用以下两种方法：

1. 降低文本的不透明度：通过降低文字的不透明度，减少视觉上的突兀感，这种方法尤其适用于需要保持文字颜色不变的情况下使用。
2. 使用背景色并降低对比度：直接使用背景色，并在此基础上降低对比度。这样可以确保文字与背景颜色之间的过渡更加自然，避免了因颜色差异过大而产生的违和感。这种方法适用于需要保持背景颜色一致性的场景。

十四、选用具备多个字重的字体

如果您的项目只需要满足最基本的 UI 设计需求，那么使用阿里巴巴普惠体、苹方或思源黑体这三款字体中的任意一种就已经足够了。这些字体在设计上都具有高度的可读性和现代感，能够适应多种不同的应用场景。

在选择具有特定行业属性的定制化字体时，建议挑选那些提供多种字重的字体家族。这样，无论在什么场合下，你都能找到合适的字重来使用。

例如健身器材类需要硬朗、较粗的字体，而女性瑜伽类则需要高挑、较纤细的字体，或者那些数字信息权重较高的也会单独定制字体。如果一种字体只有单一的字重，你可能需要寻找其他替代方案或额外购买，这会带来一些不便。只要这款字体包含两三种不同的样式或字重，也已经能够满足很多设计需求，并帮助你创造出富有韵律感的作品了。

十五、图片上的文字蒙版与图片色调融合

我们常常会看到文字叠加在图片背景上的设计，为了确保文字清晰可见，常用做法是在图片上加一层半透明的黑色蒙版，这样可以让白色的文字更加突出，不过，这种方法并不是最理想的。

我们还可以从图片中提取主色调，然后用这个颜色作为文字背景的填充色。让文字、色块和图片就能更好地融合在一起，整个画面看起来也会更加高级和设计感。

十六、图片色调要基于主体色

保持应用程序的一致性和统一性非常重要，这不仅能提升用户体验，还能帮助塑造良好的品牌形象。因此，在同一款应用中，用户应当能够轻松地识别出其主要色调。这就意味着，尽管应用中的各种视觉元素（比如按钮、图标、图片和插画）不必完全一致，但大多数元素都应该尽量采用或融入主色调。

有时，我们可能会遇到这样的情况：找到了一张非常适合某个场景或功能展示的图片，但它的色调却与整体设计风格不太协调。这时，设计师可以通过调整图片的色相和饱和度，让其更贴近应用的主色调；另外，还可以在图片上叠加一层半透明的、以主色调为基础的蒙版，这样既能保留图片的内容，又能使整个界面的视觉效果更加和谐统一。

十七、设计过的默认头像更具亲和力

默认头像可能会出现在应用中的任何地方，背后不仅承载着用户的重要信息，还展示了用户的虚拟形象。通常情况下，默认头像会以一个简单的图标样式出现，但这样的设计往往难以获得用户的共鸣。

特别是个人中心页，许多产品已经不再使用单一、刻板的默认头像，通过增加一些如 logo、吉祥物、插画以及有趣的人格化元素，使产品更加生动有趣，每个独特的头像都代表着产品的独特风格和用户的个性，让用户感受到一种身份上的认同感。

十八、使用简洁清晰的文本标签

在设计表单时，尽量避免使用过长的文本标签，确保它们不会占用多行。过长可能会让表单看起来杂乱无章，增加用户的理解和操作难度，从而影响整体设计的清晰度。特别是在小屏幕设备或复杂的表格中，这种问题会更加突出，因为用户需要花费更多时间和精力来浏览和理解表单内容。

为了提升表单的可读性和操作体验，建议使用简洁明了的语言来编写标签，并确保每个标签都能保持在一行内。如果简短的标签无法诠释该字段的输入要求，可根据实际情况，酌情选用占位符、辅助提示或图标触发小窗方式进行详细说明。这样能使表单看起来更加整洁有序，方便用户快速阅读，同时减少因标签过长而可能产生的歧义。

此外，在移动设备上，这种设计方法尤为重要，因为它能有效利用有限的屏幕空间，确保即使在较小的屏幕上也能提供良好的用户体验。

十九、只需提醒选填字段

在设计表单时，大多数字段为必填项，仅有少数字段为非必填项。为了减少用户的困惑，建议不特别标注所有必填字段，而是明确标识那些非必填字段，例如使用“选填”或“非必填”等标签。

当表单清晰地标示了哪些字段是可选时，用户无需再耗费额外时间猜测哪些信息是真正必需的。这种做法不仅提升了用户体验，使填写过程更加顺畅，还鼓励用户自愿提供更多的信息，即便这些信息并非强制要求。

此外，通过仅强调可选部分，并自然地将其与必填部分区分开来，可以有效减少界面中的视觉干扰，使整个表单显得更为简洁明了。这种设计策略不仅有助于提高用户满意度，还能显著提升表单数据收集的效率。

二十、字体的选择要符合产品气质

虽说黑体（苹方、思源、阿里巴巴普惠）是 UI 设计中的首选字体，但这也仅仅只是建立在不出错的的情况下、满足基本条件而选择，如果想表达出产品的类型、情感、气质等品牌属性，在不影响用户识别的前提下，可选择一款符合产品气质的字体，打造出差异化的浏览体验，对于追求完美的 APP 来说是一个不错的解决方案。
例如，部分艺术、女性类的 APP 会选择使用宋体，整体看起来有一种高端、时尚且优雅的感觉。

整体界面使用特殊字体还是相对较少，为了更好的体现出产品属性/风格，将其融入不同的模块及使用场景，会让产品更有特色，例如 banner、瓷片区、大标题、头图等，对用户的视觉吸引力能得到很大提升。

结语

创造既美观又高效且易于使用的 UI 界面确实需要投入不少时间和精力，还可能要经历多次的迭代与改进。不过，正是通过这一系列细致入微的调整过程，我们才能打磨出一款让客户、用户以及我们自己都感到满意的优秀作品。

欢迎关注作者微信公众号：「能量眼球」