UI设计中图形理论和视觉偏好上的冲突

时间: 2020-11-28 17:06 关注度: 280

UI设计中图形理论和视觉偏好上的冲突

我们在UI设计中经常会遇到图形理论和视觉偏好上的冲突,这时候应该以视觉偏好为标准去决定方案的输出,即便它不符合理论,但只要符合人眼的视觉偏好,这就是好的方案。视觉错觉是人眼奇妙的生理特征。大家在设计领域的精进中,对视觉错觉的了解是非常有必要的,这能够让我们了解视觉的特征,从而做出符合视觉偏好的设计。 我拥有被馈赠的礼物——可疑的超能力,能够一眼就发现设计作品在视觉上的缺陷。对于这种缺陷我就像拥有蜘蛛侠的蜘蛛感应,每当我看见不对齐、扭曲、或者不美观的东西时,我的后脑勺就会发出刺痛感。01. 说明文本过浅你有没有注意到放置在填充形状旁边的文本颜色看起来更浅亮?这是字体平滑效果,使得文本看起来比原始颜色更浅,字体越小,这种视觉效果越强。02. 小字体,更纤细在某些字体中,使用更小的字号会导致文本更加纤细和半透明化(字体平滑效果使然)。如果你坚持要用小字号(有时候这会营造某种感觉),那就按你想要的来,但请务必加粗:使用粗体,你的设计仍保持整洁,说明文本依旧纤细,但更加引人注目,而且清晰易读。03. 背景图片上难以阅读的文本在背景图片上放置文本是一种常见的做法,但如果图片是动态变化的,你要确保无论背景颜色如何,文本都保持可读性。这可以通过足够的对比度和渐变底色来实现:半透明渐变图层是一种好方法,即便是放置在浅色背景图片上也可以确保文本保持可读性。04. 行距错误说起文本,这是一个重要的内容,处理大字体时,行距可能会成为一个问题:根据字体的不同,将行距设置为比字体大小大2pt-5pt。05. 元素不对齐一种称为”视觉补正“的技术(通常用在字体中),通过将按钮往左侧微移来修正不对齐的错觉。06. 表单对齐的不一致当表单使用不同元素时(不同形状、边框或者水平对齐方式),可能会发生视觉错觉,使得表单看上去似乎没有对齐:每种元素的设计都略有不同(有些边框是椭圆形的,有些不是),尽管有明确的对齐策略,但结果让人感觉完全扭曲。有许多可能的解决方法 —— 我选择将所有的圆角改成方角,并将所有的说明文本和边框对齐。元素类型更加一致,左对齐的效果就愈加明显,整个表单变得更加整洁和设计良好。07. 不对齐的图标有时你要做一点儿欺骗,移动/调整某些图标的大小使其视觉上的对齐:一些图标感觉很大(电话、音频),而有些图标则因其设计和物理中心的不同而感觉没有对齐。一个可选的解决方案是选择外观一致的图标使其看上去一致(比如一组圆形图标)。另一个解决方案(前文介绍过)是微调每个图标,使其并排放置时的效果更符合人眼视觉偏好。这意味着你可能要将图标放置在实际设计中,对其进行修改,重复试错几次,直到设计看上去完美为止。08. 不对称的图形我们在元素中心位置使用非对称图形(比如三角形)时,几何中心会造成视觉上的错误,使人感觉图形放错位置。09. 不同的图标主题如果你使用一些现成的图标,最重要的是选择看上去像是来自同一系列的图标。通常,我们会陷入漫长的寻找过程中,寻找那些最好看的图标,却忽略了不同图标之间的视觉差异。10. 按钮说明文本多行显示有时候设计会比复制更好。11. 长文本用户体验写作应该是设计流程中的一环。一些设计考虑因素将决定文本的长度,而某些文本考虑因素将决定设计。根据经验,文本应该简洁明了。12. 点击对象太小交互元素必须满足1cm x 1cm(0.4in x 0.4in)以支持足够的选择空间并防止胖手指的点击错误。苹果公司在12年前就说过,但找到不容易点击的按钮仍然非常容易。解决方法也很明显:按钮的尺寸要大于视觉内容的大小(无论是图标还是文本)。13. 烦人的边框半径里面那个形状的半径看起来更大,但这只是视觉上的错误。实际上,两个半径是相同的,但眼睛无法捕捉它们的一致性。将圆形按钮放在圆形框架中,会发生相同的事情:框架和按钮都是一样的圆角边框,但它们看起来就是不一样。在这种情况下,“欺骗”是通过在框架中使用完全不同的曲率,以消除视觉错觉。14. 恼人的边框(一般而言)说起边框,太多的线条会让你的设计显得拥挤。设计师经常讨论留白,但随着产品的演化和新特征的引入(有时没有经过适当的设计流程),框架和边框不知不觉间出现:摆脱便捷,改用空格分隔每组元素,就不会造成不必要的混乱。15. 使用灰色而不是透明度许多设计师在标题中使用不同的灰色阴影,从而在标题、副标题和正文之间建立层次结构。不幸的是,当文本放在彩色元素(例如背景图像)上时,灰色往往失效了。因此,我们应该使用一定透明度的白色来让元素吸收背景色:使用透明度来代替纯灰色,这会让你的半透明元素融合背景颜色,使其感觉上更自然。