本文授权转自：黑马青年 ID：（heimauiux）

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

01. 避免卡片上文本信息过多

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

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

02. 减少表单字段的填写数量

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

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

03. 不同输入场景下的键盘类型

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

• 中文键盘：绝大多数表单使用的类型，应对纯中文或综合性文本类型的输入需求；

• 英文键盘：纯英文类型的字段，例如字母类型的用户名、英文名输入等；

• 数字键盘：纯数字类型的字段，例如手机号、身份证号、银行卡号等；

• 数字键盘（乱序）：多用于纯数字密码类型的输入需求，对安全系数要求较高，如支付密码等。因出于安全考虑，这类键盘虽然会增加用户的理解成本，但与财产的安全性相比，显然在可接受范围之内。

04. 行高应跟随字号而变化

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

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

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

05. 基于拾色器右上方选取颜色

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

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

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

06. 表单标签的对齐方式

常见的表单标签对齐方式有三种，左对齐、右对齐和顶对齐。不同的对齐方式都有各自的优点和缺点，我们需要根据项目实际情况来选择最合适的对齐方式。

左对齐：左对齐是最为常见的对齐方式，可充分利用页面的垂直空间，易于扩展。在选用左对齐时，标签字数需在可控范围内，一般不超过4字，否则会降低可输入空间，影响输入内容的长度；

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

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

07. 大胆使用空间留白

为了提高界面利用空间，追求信息的饱和度无可厚非，但过度追求并非是一件好事，当信息过于密集、信息层级较难区分时，会耗费用户更多的时间成本。

不要吝啬界面留白，基于亲密性原则，在合理的将信息进行分组之后，请大胆使用留白，应避免元素与元素、与信息组之间过于密集，保持界面的呼吸感，给用户更为舒适通透的体验。

08. 中性色的设定（黑白灰）

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

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

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

09. 投影的光源保持统一

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

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

10. 避免用占位符替代标签

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

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

文章转载：黑马青年，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/cqos4OdzstOggH6sIstsCg

版权声明：“美啊设计平台”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编排 | 罗家玉

终审 | 苏 菁

▼

想要收获最新鲜的设计资讯吗？
想要抢先参与活动福利吗？
扫描下方二维码进群！
▼
喜欢，给我一个“在看”哦~
?

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。