社区编辑申请
注册/登录
快速提升 UI 设计效果的 6 个小技巧
移动开发 Android
在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Mark Andrew 的文章梳理了 6 个实用性很强的 UI 效果提升小技巧。

编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Mark Andrew 的文章梳理了 6 个实用性很强的 UI 效果提升小技巧,原文最早发布于 marcandrew.me 。

在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候,我们大多只需要进行有限度的微调,即可达到颇为不错的效果。在之前,我已经撰写了很多实用的 UI & UX 优化小贴士(看完文章在文末获取),这篇文章继续增加 6 条实用的建议,一起来看看吧!

1、保持信息简短直白,去掉枝节

确保文本信息足够简短,切题,去掉文本当中不必要的修饰和枝节,让用户容易理解,有直接对话的感觉。

向用户呈现清晰简洁的信息,有助于更好地达成预期的目标。

2、在创建较长文本时用 20pt 字号

对于长篇的文本内容,比如博客文章,项目描述,正文文本部分建议使用 20 pt(甚至更大也可以)的字号,这样能够确保整体内容的可读性。

当然,在具体应用的时候,需要根据实际设定的字体来灵活处理,有些很纤细的字体在 20 pt 的时候阅读体验不够好,这个时候可能需要适当放大。

3、不要仅靠色彩来传递报错信息

在设计的时候,不要仅靠颜色来传递信息,这一行点很重要。尤其是在表单的报错信息当中,仅仅给输入框增加一圈红色的描边,并不足以让用户清晰地意识到出错,以及要如何修正。

一方面,要使用明确的指引信息帮用户了解要如何改正错误,另一方面,需要考虑到有视觉障碍的用户无法通过色彩感知到信息。

实际项目中,使用图标和文本来共同传达信息,有助于让信息更容易理解,提升整体的可访问性。

4、使用4pt基线和8pt网格来控制纵向间隔

说道字体和排版,可以将 4pt 基线和 8pt 网格系统结合起来使用,可以在设计中制造出更强的韵律感。

借助 4pt 的基线来做行高的控制,使用 4pt 的倍数(4pt、8pt、12pt、16pt、20pt)来设置行高的数值。

最主要的原因在于,在传统的 8pt 网格系统当中,行高的控制相对而言比较粗糙,可选的范畴比较窄,单独使用 4pt 基线系统来控制行距则会好很多。

5、减少标题文本的字间距和行高

和较长的正文文本不一样,标题文本通常会比较短,但是相应的,因为文本尺寸较大,你需要适当地降低字间距和行高,来确保标题的整体感更强。

适当的降低行高和字间距能能够获得更好的可读性,也会让视觉舒适感更强。

6、使用多层次阴影和微妙的边框让元素突出

在 UI 界面当中,可以给元素添加多层次的阴影,或者使用非常微妙的 1px 的边框(仅比实际阴影更深一点的色彩),可以让它们看起来更加清晰和突出。这种处理方法制造出来的阴影不会显得太过浑浊,也可以让整体视觉更加清晰。

责任编辑:未丽燕 来源: 优设
相关推荐

2021-05-29 09:52:15

2021-07-03 08:07:16

2022-05-17 15:34:08

视觉效果UI 界面设计

2019-03-14 09:22:31

UI设计视觉

2021-09-04 15:54:02

2022-07-13 09:24:38

UI界面设计用户

2020-01-03 09:27:10

UI设计师网格

2020-05-20 13:06:20

UI排版设计

2022-03-09 09:23:18

Windows 11UI视觉风格

2021-05-10 10:18:54

2021-03-31 09:10:25

UI设计经验

2021-01-13 09:53:32

AppUI设计互联网

2020-06-11 16:20:38

UI趋势设计

2018-04-20 09:00:47

UI设计应用程序易用性

2014-07-17 15:38:43

2020-10-14 10:04:26

UI设计元素

2016-01-29 10:06:47

2011-03-29 14:11:10

UI界面UI设计

2020-06-11 08:38:04

UIUI设计移动开发

2018-11-11 10:59:38

同话题下的热门内容

Android中实现系统声音录制-RK3399开发板源码修改Android 9 用户比 Android 12 多,系统碎片化问题依旧严重

编辑推荐

支付宝即将下线收款业务:2018年1月1日起正式执行,网友炸锅了!史上最详细的Toolbar开发讲解,此篇必读!你终于可以在Android的Gboard上用中文打字了查看文档的8款优秀Android PDF阅读软件Android Pie的9个隐藏功能:你可能错过的若干优秀技巧
我收藏的内容
点赞
收藏

51CTO技术栈公众号