2020年流行的UX/UI设计技巧「秘籍」分享(下)

创建美观又实用的用户界面需要花费一定时间,而且在设计过程中,还要进行大量的迭代与优化。通过多年来的经验累积,我发现有的设计进行一些简单、快速的调整后,就可以大大提升效果。

本指南中,我整理了2020年12个月中流行的UI/UX技巧,而这些技巧可以毫不费力地帮助我们改善设计与用户体验。

18 字体越小,越应注意行高设置

当你的字体变小时,增加行高为了更好地提升信息的可读性,字体变大时则适度降低行高。

19 使用x-dataheight或Il1,测试所选字体可读性

怕大家不理解,辞典酱提供一个额外的小科普:x-dataheight是指给定字体中,任何给定尺寸下小写字母x的高度,它提供了一种描述任意字体一般比例的方法。

x-dataheight更精准的定义是基准线(baseline)与小写字母的中线(mean line)之间的距离

在印刷中,x-dataheight是一行文字的基线与小写字母(即不包括上升笔画或下降笔画)的主体顶部之间的距离。弧形的字母,例如a,c,e,m,n,o,r,s和u倾向于略微超过x高度。作为字体最重要的尺寸之一,x-dataheight用于定义小写字母与大写字母的相对高度。

确定字体可读性另一种方法是进行Il1测试,通过比较特定字体的三个字符:大写i(I),小写L(l)和数字(1),因为字母之间的外观差异可以帮助确定可读性,尤其是在使用Sans Serif字体时,要牢记的是,易读性是检验页面效果的核心目标之一。

20 突出显示菜单中最常用的操作

在设计应用程序内部使用的菜单时,请确保在屏幕上突出显示最常用的操作,如上传图像、添加文件等。

21 从图像中选择颜色,使产品栩栩如生


从产品图片中选择颜色,将你选取各种色调和阴影应用到背景、文本、图标等部分来增加视觉特点,让设计更有个性。

22 根据字体x-dataheight来设置行高

具有不同x-dataheight的字体,需要不同的行高测量值,以实现文本每行之间正确的分隔。即使有2个相同18px的字体,它们的x-dataheight也会相差很大。

23 突出最重要的元素

结合字号、字重、颜色与版式,可轻松突出UI中最重要的元素,简单微妙的调整,让用户体验变得更好。

24 为表单错误添加辅助提示

添加错误提示是一种简单又有帮助的额外视觉辅助,能帮助用户填写任何形式的表单。

25 在移动设备上创造大量可访问区域

在为移动设备设计时,尝试创造足够大的可触碰区域,方便点击。对于只包含文本的按钮和链接来说,尽量使用带有标签的图标。

以下是iOS & Android推荐的最小点击区域:

44 x 44pt,适用于iOS

48 x 48dp,适用于Android

26 尽量只在短标题中使用大写

如果你想在标题中使用全大写,确保标题尽可能短,最好只有一行。如图中的对比,过长的全大写标题带来的视觉感受并不好。标题中加大字母间距,看起来也更顺畅。

27 提高浅色文字和图像之间的对比度

浅色文本在浅色背景下应当是易读的,在文本后建立一个不完全透明的深色背景,就能轻松提高对比度。

28 标题类推荐字体

这些衬线、无衬线字体,我以前用过很多次,我发现它们非常适合做标题,让设计有一点温暖和个性,在fonts.adobe.com上可以下载。

29 正文类推荐字体

一直用于长体文本的Serif和Sans-Serif商业字体的一小部分,非常推荐,同样在fonts.adobe.com上可以找到。

30 垂直标题和正文统一版式规则

垂直段落在搭建视觉层次结构时,有必要按顺序排列边距。如图所示,左侧段落在标题上使用了相等的顶部、底部边距,但这样做却失去了与正文的粘性。针对这种情况,最好在标题顶部留出更多空白,而标题底部减少留白,这样两个部分的联系也会更牢固。

31 下载进度条,列出详细数据

涉及到下载时,避免使用超级简洁的界面,因为对用户来说,详细的数据信息会带来更友好的使用体验。使用颜色、进度百分比数字或是一个简单的图标表示,让用户能随时取消下载。

32 标题言简意赅,不要啰嗦

标题要简短活泼、指向重点。人们进行扫描,越简短的标题,用户在浏览时就越能快速消化。不过,简短的标题并不万能,要看你自己的目标受众、设计情境是否适合。

33 好的设计会「说话」,选择合适的字体

每一种字体都有自己独特的「声音」,刚开始使用字体时,你会经常混淆不太能快速区分,但不要害怕多看多找不同,慢慢提升自己的认知。

34 为正文选择合适的行长,提高可读性

45-75个字符,被认为是单列页面最舒适的行长区间,其中66个字符的行长(包括字母和空格)是最佳选择。当然,字体大小和行高也会一定程度上影响可读性,但行长最好保持45-75个字符之间。

写在最后

至此,上&下 UX/UI 技巧「秘籍」系列就结束了,希望能帮助到大家!技巧不分贵贱,能帮助到我们作图的,都要认真对待呀。




原文:https://uxdesign.cc/the-ui-ux-tips-collection-volume-one-f69f0969ed17

翻译:UX 辞典

每天更新,
全站高品质素材免费下载!