• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 眼见不一定为实!全面总结设计中的障眼法

眼见不一定为实!全面总结设计中的障眼法

作者:融360-乾 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App设计,经验分享,视觉平衡,视觉设计,视觉误差,设计案例等相关知识,融360-乾希望在学习及工作中可以帮助到您

视错觉是指在视觉感知上与客观物理不一致的现象。人的大脑在接受视觉系统传递而来的信息后,经过综合地进行对比和分析,会尽可能地做出正确的判断,但是,当信息不够充足或者受到错误干扰时,就会出现视觉上的形态与客观物理上的形态不一致的现象,也就会产生视错觉。

一、常见的视错觉

△ 波根多夫(Poggendorff)错觉

一条直线穿过一个矩形后,在矩形的两侧,线段感觉上下错开了。

△ 缪勒—莱依尔(Müller-Lyer)错觉

上面的横线与下面中间的横线是等长的,但看起来下面的横线比上面的要长。

△ 菲克(Fick)错觉

垂直线与水平线是等长的,但实际看起来垂直线比水平线长。

△ 艾宾浩斯(Ebbinghaus)错觉

中间的两个圆面积相等,但看起来左边中间的圆大于右边中间的圆。

△ 托兰斯肯弯曲错觉

这三个圆弧看起来弯曲度差别很大,但实际它们的弯曲度完全一样,只是长度不一致而已。

通过这些经典的视错觉我们发现,原本一样的长度、一样的宽度、一样的面积在有些特殊情况下视觉看到的和客观实际是不一样的。这是因为人类的视觉系统是一个基于经验和感觉的系统,不是精准的物理纪录和反馈的系统,所以在一定的情况下视觉观察到的和实际会有所偏差。

二、设计中的视错觉与解决方法

在设计当中,也存在视错觉,当出现视错觉的时候就需要以看到的实际效果就是以视觉为基准,去调整设计,以达到在视觉上的完美。请跟随笔者从文字、图形、颜色这个三个大的方面去了解有哪些具体的实例。

1. 文字

汉字和数字的组合场景

在金融和电商领域的设计中,经常会出现数字和汉字共存的情况,但是汉字和数字的设计原理是不一样的,汉字是按照田字格来设计的,数字是按照英文的设计规则来设计的,相同字号的汉字和数字排列在一起,数字会显得小一些。这时候就需要手动去调整数字或者汉字其中之一的字号大小,以达到视觉上的大小平衡。

调整之后由于数字字号更大,所以数字的笔划会粗于汉字笔划,但是没关系,这样正好能平衡汉字和数字的字重。因为数字笔划结构较简洁,汉字笔划相对复杂,字重较重。

△ 调整方法可能适用的场景

但是这种调整方法也需要考虑使用场景,调整字号的方法比较适合用在海报、banner等内容是固定展示的设计中,也可以用在活动 h5 等内容相对固定的设计中,在 app 和网页中如果是数字和汉字的固定搭配也可以应用,但是需要根据具体的情况来灵活应用。

字体设计

△ 横粗竖细错觉在字体设计中的体现

在字体设计中也会存在视错觉。需要注意以下几点,因为「横粗竖细」错觉的存在,所以在需要设计横和竖笔划粗细相同的字体时,需要调整横或者竖的粗细。如上图中黑体「王」字横的笔划细于竖的笔划。

△ 融360品牌形象

不同汉字之间、汉字和数字英文之间的字体笔划数量和复杂度差别很大,解决方法就是笔划多复杂的字体笔划变细,笔划少简洁的字体笔划加粗,以此来平衡字重。看上图的实例,公司的品牌形象,在视觉感受上「融」和「360」的笔划粗细是平衡的,但其实品牌设计的同学是调整过汉字和数字的笔划粗细的。

在出现倾斜交错笔划时需要注意调整笔划,以防止出现波根多夫错觉。

纯英文的标题设计或 logo 设计需要注意视觉调整,因为同等大小的圆形和方形,方形会显得大一些,所以需要微调,把接近方形的字母缩小一点,或者把接近圆形的字母放大一点。

2. 图形

icon 的物理尺寸和视觉调整

△ android 和 iOS 图标规范

尽管谷歌和苹果都提供了给设计师参考的 icon 绘制辅助图形,但是由于辅助图形仅提供了圆形、正方形和长方形这几类常见的 icon 形状,但是在设计中难免会有一些异形的 icon,这时候辅助图形提供的帮助就非常有限了。那么在有很多形状的 icon 并存时怎么确保它们的视觉大小相同呢?

其实几乎所有的 icon 都可以归类为有规律的图形,比如长方形、圆形、菱形、三角形等等,平衡好这些图形的视觉大小,就可以平衡好各种异形 icon 的视觉大小。

icon 总体的图形轮廓可以大体归类为以上几种。上图中的图形物理尺寸一样,但是在视觉上它们的大小差异很大。

怎么去调整它们的大小,让它们在视觉上大小接近呢?有一个规律就是越接近方形的图标视觉感受越大,按照这个规律调整后如上图。

调整后,直接观察好像不能直观的发现大小差异,那么如何去检验是否在视觉上达到平衡呢,这里可以通过整体观察(眯眼大法)的方法,感受图形的整体面积大小,不要被图形的边缘所影响。或者直接模糊这些图形也可以达到同样的效果。

举个例子,来检验下整体观察方法的有效性。如上图这四个 icon,用刚才的调整规律来看,好像圆形的论坛 icon 不符合我们所说的圆在视觉上显得小应该放大的规律。

但是经过模糊后我们发现其实他在视觉上是平衡的,这其实可能是因为论坛 icon 内的双引号是粗于其他 icon 内的笔划。这告诉我们按照图形外轮廓调整大小也需要综合考虑 icon 的内部元素的复杂度,面积等因素,必须经过视觉平衡的检验,不能死板的套用方法。

物理曲线和自然曲线

上图中左边的是 superllipse 图形,就是常说的 Lamé curve,是法国数据家 Gabriel Lamé 发现的。它相比右边用ps直接绘制的圆角矩形看起来更平滑自然,右边的圆角矩形看起来直线和曲线的接口处会有个小「突角」,并且四个边的直线中间会有凹陷的感觉。

那么我们怎么在设计软件中去手动调整圆角而获得一个更加自然的圆角矩形呢?原理就是调整直线和曲线过渡的地方,按照上图所示的方式手动调整曲线,调整过后的圆角更圆润了。sketch 最新版本现已加入了直接绘制平滑圆角的功能。

这种方法同样也适用于圆形按钮。

物理对齐和视觉对齐

软件的对齐方式也有局限性,典型的例子就是播放按钮。这种中心是一个类似三角形或者不规则图形时,软件对齐会显得很怪异。这是因为软件会把两个图形放在2个矩形内,去对齐这2个矩形,产生的结果就是在视觉上并没有对齐。解决办法就是把三角形放在一个圆形的框内,用圆和矩形去对齐,这样三角形在视觉上才是居中对齐。不规则图形则需要手动调整,以达到在视觉上的对齐。

在上图中两根线条和两个矩形的间距是一样的,但是在对比的作用下产生了线条之间的距离要大于矩形之间的距离的错觉,这是因为在粗细的对比作用下矩形之间的距离更小。这个错觉经常出现在输入框按钮共存和信息图表的的设计中。

上图中左边输入框和按钮高度是

您可能想查找下面的文章:

  • 手机APP用户界面设计的10点建议
  • 关于音乐播放App(应用软件)的分析与重设计 如何设计出漂亮的音乐播放界面
  • 写给新手的APP结构指南:首页相关(上)
  • 基础科普!重复与突变在产品设计中的应用
  • 超全面的导航设计基础知识总结(一)
  • 写给UI新手的APP结构指南:注册和登录
  • 用户体验是一种过程,而不是结果
  • 超全面的移动端UI 设计规范整理汇总
  • 感觉设计不舒服但又不知道原因?可能是这8个常见的交互细节问题
  • 这个帮你改善睡眠的APP,是这样设计出来的

相关文章

  • 2018-08-23Facebook设计师:从VR设计实战中总结的5个设计思路
  • 2017-08-06网页设计必备工具 firefox Web Developer插件 CSS工具组教程
  • 2018-08-23遇到特殊的设计问题时,有一条原则帮了我
  • 2017-08-06提高网站可用性和转化率的25个工具
  • 2018-08-23超实用!通用设计法则解析之「导引手册」
  • 2018-08-23高手帮你学规范!iOS和Android规范解析之提示框+警告框
  • 2018-08-232018年即将流行的交互设计六大趋势
  • 2018-08-23阿里巴巴UED总监:新商业环境下设计师的转型三部曲
  • 2017-08-06视觉设计师成长的三个阶段小结
  • 2017-08-06引入CSS的方式有哪些?link和@import的有何区别应如何选择

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 视觉设计师如何做竞品分析?来看这份超全面的指南!
    • 超实用!3分钟带你掌握11个最常用的交互控件
    • 借贷宝怎么推广让大家都来注册呢? 借贷宝推广方法技巧
    • 想成为云计算交互设计师,该具备哪些能力?
    • 项目复盘思路:产品上线后要如何做复盘?
    • 科班高手的方法!16个简单实用的排版小Tips
    • 优设专访!优设×追波人气第一名的设计大神Mike
    • UI / UX设计师应该学习的用户心理学原理
    • 我花了五个小时,完成了iOS 11新版App Store的交互探索
    • 超全面总结!产品设计中的可拓展性原则

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有