2023赛季围甲终结 ，柯洁率深圳龙华队初度登顶
2200 2026-07-22 04:35
为了帮助大家更轻松地提升设计水平 ，这里整理了一些简单实用的升用实用小贴士 。希望这些小技巧不仅能够助力您优化当前的户体设计项目 ，还能在未来的小技设计之旅中为您提供参考价值 。
一个卡片内通常会包含图片 、个提标题 、升用实用详细介绍及行动按钮等元素 ，户体这些元素需要以聚焦的小技形式去呈现 ，以帮助用户快速扫描内容 。即学即用当文本内容较长 、个提展示的升用实用信息过多时，不利于用户快速扫描 ，户体导致用户无法在第一时间快速感知到产品想要展示的小技、或用户想要知道的信息，很容易被用户过滤 。
文本内容过多且无法删减时，我们可以从中提取部分更有价值信息，也可以只显示文本内容的前两行 ，其他将其省略 ，以点击展开跟多 、内容弹窗或者跳转页面的方式将其完整展示 ，都不失为一种不错的解决方式 。
在设计表单时 ，让用户填写过多的内容会增加其认知负荷 ，表单完成率也会随之下降 。为了减少用户的操作次数 ，降低使用难度 ，但凡能让用户选择的就不要让他输入 、能够系统获取的就不让用户去选择 ，要尽可能的减少字段填写数量 ，让表单显得更加简单。
类似地址 、日期这类层级内容 ，不要将其分成多个字段 ，最好做成联动选择让用户一气呵成。
为了简化数据输入 ，满足不同的类型的文本输入需求 ，用户在输入不同类型的字段时，应提供对应类型的键盘，便于用户更快完成表单内容 ，常见的键盘有以下几种 ：
有很多设计师在处理大量的文本内容时 ，为了遵循设计规范 ，会设定固定的行高数值 ，例如常用的 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 值可能会导致整体色彩的不协调，从而产生强烈的违和感 。因此 ，这种方法在这种情况下是不可行的 。
为了完美地解决这个问题 ，我们可以采用以下两种方法 ：
如果您的项目只需要满足最基本的 UI 设计需求 ，那么使用阿里巴巴普惠体 、苹方或思源黑体这三款字体中的任意一种就已经足够了 。这些字体在设计上都具有高度的可读性和现代感 ，能够适应多种不同的应用场景。
在选择具有特定行业属性的定制化字体时 ，建议挑选那些提供多种字重的字体家族 。这样 ，无论在什么场合下，你都能找到合适的字重来使用。
例如健身器材类需要硬朗 、较粗的字体 ，而女性瑜伽类则需要高挑 、较纤细的字体 ，或者那些数字信息权重较高的也会单独定制字体 。如果一种字体只有单一的字重，你可能需要寻找其他替代方案或额外购买 ，这会带来一些不便 。只要这款字体包含两三种不同的样式或字重 ，也已经能够满足很多设计需求 ，并帮助你创造出富有韵律感的作品了 。
我们常常会看到文字叠加在图片背景上的设计 ，为了确保文字清晰可见 ，常用做法是在图片上加一层半透明的黑色蒙版，这样可以让白色的文字更加突出 ，不过，这种方法并不是最理想的。
我们还可以从图片中提取主色调 ，然后用这个颜色作为文字背景的填充色 。让文字 、色块和图片就能更好地融合在一起，整个画面看起来也会更加高级和设计感 。
保持应用程序的一致性和统一性非常重要 ，这不仅能提升用户体验 ，还能帮助塑造良好的品牌形象 。因此 ，在同一款应用中 ，用户应当能够轻松地识别出其主要色调 。这就意味着 ，尽管应用中的各种视觉元素（比如按钮 、图标 、图片和插画）不必完全一致 ，但大多数元素都应该尽量采用或融入主色调 。
有时 ，我们可能会遇到这样的情况：找到了一张非常适合某个场景或功能展示的图片 ，但它的色调却与整体设计风格不太协调 。这时 ，设计师可以通过调整图片的色相和饱和度 ，让其更贴近应用的主色调；另外，还可以在图片上叠加一层半透明的 、以主色调为基础的蒙版 ，这样既能保留图片的内容 ，又能使整个界面的视觉效果更加和谐统一 。
默认头像可能会出现在应用中的任何地方 ，背后不仅承载着用户的重要信息，还展示了用户的虚拟形象 。通常情况下，默认头像会以一个简单的图标样式出现 ，但这样的设计往往难以获得用户的共鸣 。
特别是个人中心页 ，许多产品已经不再使用单一 、刻板的默认头像，通过增加一些如 logo、吉祥物 、插画以及有趣的人格化元素 ，使产品更加生动有趣 ，每个独特的头像都代表着产品的独特风格和用户的个性 ，让用户感受到一种身份上的认同感 。
在设计表单时 ，尽量避免使用过长的文本标签 ，确保它们不会占用多行。过长可能会让表单看起来杂乱无章，增加用户的理解和操作难度 ，从而影响整体设计的清晰度 。特别是在小屏幕设备或复杂的表格中 ，这种问题会更加突出 ，因为用户需要花费更多时间和精力来浏览和理解表单内容 。
为了提升表单的可读性和操作体验，建议使用简洁明了的语言来编写标签 ，并确保每个标签都能保持在一行内 。如果简短的标签无法诠释该字段的输入要求 ，可根据实际情况 ，酌情选用占位符 、辅助提示或图标触发小窗方式进行详细说明。这样能使表单看起来更加整洁有序 ，方便用户快速阅读 ，同时减少因标签过长而可能产生的歧义 。
此外 ，在移动设备上，这种设计方法尤为重要 ，因为它能有效利用有限的屏幕空间 ，确保即使在较小的屏幕上也能提供良好的用户体验 。
在设计表单时，大多数字段为必填项 ，仅有少数字段为非必填项 。为了减少用户的困惑 ，建议不特别标注所有必填字段 ，而是明确标识那些非必填字段 ，例如使用"选填"或"非必填"等标签 。
当表单清晰地标示了哪些字段是可选时 ，用户无需再耗费额外时间猜测哪些信息是真正必需的 。这种做法不仅提升了用户体验 ，使填写过程更加顺畅 ，还鼓励用户自愿提供更多的信息 ，即便这些信息并非强制要求 。
此外 ，通过仅强调可选部分 ，并自然地将其与必填部分区分开来 ，可以有效减少界面中的视觉干扰 ，使整个表单显得更为简洁明了 。这种设计策略不仅有助于提高用户满意度 ，还能显著提升表单数据收集的效率 。
虽说黑体（苹方、思源
、阿里巴巴普惠）是 UI 设计中的首选字体 ，但这也仅仅只是建立在不出错的的情况下 、满足基本条件而选择 ，如果想表达出产品的类型
、情感 、气质等品牌属性 ，在不影响用户识别的前提下
，可选择一款符合产品气质的字体
，打造出差异化的浏览体验 ，对于追求完美的 APP 来说是一个不错的解决方案 。
例如
，部分艺术 、女性类的 APP 会选择使用宋体 ，整体看起来有一种高端
、时尚且优雅的感觉 。
整体界面使用特殊字体还是相对较少 ，为了更好的体现出产品属性/风格 ，将其融入不同的模块及使用场景 ，会让产品更有特色，例如 banner 、瓷片区 、大标题 、头图等，对用户的视觉吸引力能得到很大提升 。
创造既美观又高效且易于使用的 UI 界面确实需要投入不少时间和精力 ，还可能要经历多次的迭代与改进 。不过 ，正是通过这一系列细致入微的调整过程，我们才能打磨出一款让客户 、用户以及我们自己都感到满意的优秀作品 。
作者：能量眼球
