即学即用！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 界面确实需要投入不少时间和精力
，还可能要经历多次的迭代与改进
。不过，正是通过这一系列细致入微的调整过程，我们才能打磨出一款让客户 、用户以及我们自己都感到满意的优秀作品 。

作者：能量眼球