第六波!快速提升 UI 设计效果的 6 个小技巧

释放双眼,带上耳机,听听看~!
编者按:在进行 UI 规划的时候,很多小技巧能够适可而止地提高界面的规划视觉作用、用户体会。这篇来自Mark Andrew 的文章梳理了 6 个实用性很强的 UI 作用提高小技巧,是系列文章的六篇,原文最早发布于 marcandrew.me 。

编者按:在进行 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 的边框(仅比实践暗影更深一点的颜色),可以让它们看起来愈加明晰和杰出。这种处理方法制造出来的暗影不会显得太过浑浊,也可以让全体视觉愈加明晰。

往期内容:

给TA打赏
共{{data.count}}人
人已打赏
教程分享

UI 连载系列!让设计更高级的12个实用小技巧

2021-7-22 17:16:25

教程分享

2021年最实用的摩登极简风 UI 设计指南

2021-7-26 10:21:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索