UX Pedia Presents
本文约2286字，阅读需要6分钟
资深经验合集 Part.2
创建美观又实用的用户界面需要花费一定时间，而且在设计过程中，还要进行大量的迭代与优化。通过多年来的经验累积，我发现有的设计进行一些简单、快速的调整后，就可以大大提升效果。
本指南中，我整理了2020年12个月中流行的UI/UX技巧，而这些技巧可以毫不费力地帮助我们改善设计与用户体验。
18 字体越小，越应注意行高设置
当你的字体变小时，增加行高为了更好地提升信息的可读性，字体变大时则适度降低行高。
19 使用x-height或Il1，测试所选字体可读性
怕大家不理解，辞典酱提供一个额外的小科普：x-height是指给定字体中，任何给定尺寸下小写字母x的高度，它提供了一种描述任意字体一般比例的方法。
x-height更精准的定义是基准线(baseline)与小写字母的中线(mean line)之间的距离
在印刷中，x-height是一行文字的基线与小写字母(即不包括上升笔画或下降笔画)的主体顶部之间的距离。弧形的字母，例如a，c，e，m，n，o，r，s和u倾向于略微超过x高度。作为字体最重要的尺寸之一，x-height用于定义小写字母与大写字母的相对高度。
确定字体可读性另一种方法是进行Il1测试，通过比较特定字体的三个字符：大写i（I），小写L（l）和数字（1），因为字母之间的外观差异可以帮助确定可读性，尤其是在使用Sans Serif字体时，要牢记的是，易读性是检验页面效果的核心目标之一。
20 突出显示菜单中最常用的操作
在设计应用程序内部使用的菜单时，请确保在屏幕上突出显示最常用的操作，如上传图像、添加文件等。
21 从图像中选择颜色，使产品栩栩如生
从产品图片中选择颜色，将你选取各种色调和阴影应用到背景、文本、图标等部分来增加视觉特点，让设计更有个性。
22 根据字体x-height来设置行高
具有不同x-height的字体，需要不同的行高测量值，以实现文本每行之间正确的分隔。即使有2个相同18px的字体，它们的x-height也会相差很大。
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 技巧「秘籍」系列就结束了，希望能帮助到大家！技巧不分贵贱，能帮助到我们作图的，都要认真对待呀。
／End. 
相关引用
-翻译自原文
https://uxdesign.cc/the-ui-ux-tips-collection-volume-one-f69f0969ed17
-图片、GIF来自网络；封面动图 by Cindy Suen
-未经UX Pedia允许不得转载
往期推荐：
辞典说 | Glassmorphism，是新拟物风格的“进化”？
辞典精译 | 资深设计师精选全年经验，总结2020 UX/UI技巧「秘籍」（上）
辞典说 | 个人网站建站工具最强测评！
辞典精译 | 必看，10条给UX设计师的职业路径建议
  UX 辞典  
策划│雪诗
翻译│梦奇
编辑│梦奇
• 扫码加辞典酱 •
• 成为学习交流小队一员吧 •
形象理解用户体验，时刻关注设计趋势
Powered by Canopy Institute of Design
2020©UX Pedia. All Rights Reserved
「喜欢UX辞典的推送，请设置个 星标☆ 」
「下次就能 第一时间 看到惹」
 赞了吗  在看吗 
 戳下这里呗  别害羞 :  ) 
继续阅读
阅读原文