眼睛是人体一个很奇怪的器官，因为它总是会对我们说谎。但如果你了解了人类视觉的感知特性，你就可以构建人性化的设计。类型
400像素的正方形和400像素的圆哪一个大?从几何的角度来看，圆和正方形的宽度和高度是相同的。但看完下面的图片我们会发现正方形比圆所占的视觉重量多。视觉重量相关的词语很适合来描述视觉效果。
对我而言，很明显是相等的。因为我将圆形的直径增加了50像素，所以很难说其中的哪个图形所占比重大。
发生这一情况的原因是，我将第一个例子(400像素的正方形和圆)和第二个例子(400像素的正方形，450像素的圆)分别重叠了。注意下面的正方形超出圆的‘a’区域，圆超出正方形的‘b’区域。左边的圆形破坏了整个正方形，使得正方形中还包括了4个边;右边的圆形和正方形是平衡的，它们都不包含彼此，每个图形中都有4个碎片。
为了在视觉上与正方形保持平衡，可以用菱形或三角形来实现相同的效果。相比较它们应该更宽、更高，这样与正方形的面积才会相似。根据区域的方法可以很好地完成简单的形状。
如何在界面中使用这一特点呢?举例来说，当你创建一组图标时，最重要是让它们平衡，所以图标没有太过突出或是太过微小。如果将图标直接放在正方形区域中，会看起来更大。
建议让视觉上的小图标重量超过的图标本身区域，让视觉上较有重量的图标与图标之间的区域留一些空间，以此来修正不同形状的图标重量。
最简单的测试是用模糊的图标来检测视觉平衡。如果图标变成或大或小相似的斑点，它们的视觉比重就是相同的。
但有些时候我们也会用现有的图形，比如，作为分享和喜欢按钮的社交网络商标。Facebook和Instagram的图标都是方块状的，而Twitter是用一只鸟的剪影来代表的，Pinterest是由一个环绕的“P”代表的。这就是为什么Twitter和Pinterest的图标会大一点，以至于它们和Facebook和Instagram的图标看起来是平衡的。
视觉平衡的另一个例子是放置在文本框的圆形按钮。如果按钮直径与文本框的高度相等，从我们视角看到的按钮会比文本框小一些，但如果放大一点按钮直径，整体看上去就会更加平衡。
但如果改变按钮风格，放大直径将不是必需的。下面图片的按钮和文本狂都是80像素高，由于临近文本框的按钮有黑色填充，所以右边按钮的重量平衡会更好些。
对较低的条纹应用了视觉补偿。允许尖头增加20像素超过上面的条纹长度，这个补偿尖头之间的差距，使两条条纹的视觉相等。
如果正在创建折叠条纹的文本海报或者是把一张有明显“discount”字眼的产品卡片放在在线商店里，注意要使他们的视觉重量达到平衡。如果它是一个长方形，尖头边缘应该有点其他形状。
对于英文的纯文字的段落背景应该怎样调整?这取决于背景的视觉密度。如果背景是浅色的，可以将段落和其他文本一起突出显示。
一个可以应用密集背景的不同方法。下面图片中，黑色背景与其余的文本对齐，而其中的白色文本则以缩进形式放置。
与浅色背景不同的是，黑色具有很大的视觉重量，如果目标是无缝地插入一个段落，最好是按照下图所示的方式对齐。
左边输入栏的浅色背景可以超过输入标签和用户输入。右边缘的“Send”按钮不完全符合右边缘输入背景，从视觉角度看更深色的按钮的视觉重量更重一些。
右边的输入栏有固定的边缘，标签要和边缘对齐，用户在文本框中的输入的内容要缩进。“Send”按钮的三角形一边要向右移动一点，这样才能和上面的矩形输入栏看起来平衡。
右边按钮用了一个小窍门，由于右边缘是三角形，将单词稍微向左移了一些。此外，像箭头一样的按钮比矩形按钮的像素宽40，但看起来却和矩形按钮是相同的。
文本按钮不仅要水平对齐，字和背景还要垂直对齐。第一个方法是用于各种操作系统的界面，网站和应用程序。基于大写字母的字体高度(大写字母高度)，等于“H”或“I”的高度。
基本上，大写字母的上下空间要和按钮边缘相等。由于命令名通常都是在标题中写的，有更多的上半部分出头的英文字母——上半突出部分(l、t、d、b、k、h)，下半突出部分(y、j、g、p)。
另一种方法是用小写字体(也叫x高度)的高度将名字和背景对齐。在无衬线字体中，它等于字母“x”的高度。
下面是几个例子的对比。左列的“Cancel”和“OK”的大写字母高度明显比右边的好，因为“Cancel”没有下半突出的部分，“OK”全部都是大写，所以通常使用按钮。右列中只有“Sync”按钮适合小写字母高度，因为它的名称有上、下突出的元素;“Cancel”和“OK”的单词似乎太高了。
图标按钮的情况稍微有些不同。让我们来看看当下流行的圆形按钮中的“发送”图标。哪种图标按钮更能平衡?
或许你已经注意到左边的图标按钮有问题。这是由不同的对齐方式形成的。左边是将图标当成矩形。某一程度上这是对的，因为当你将一个SVG或PNG文件发给开发者时它是在平面上的一个矩形表单。右边展示了图标所有的尖头边缘都与圆形按钮背景的距离相等。
什么可以比圆更圆?之前我从没考虑过，但就像我在文章开头所说的一样，我们的眼睛很奇怪，有时看到的并不是我们想的那样。看看下面图片中的圆，哪个是最平滑的圆形?
我之前问的人会在3号和4号圆之间做选择。1号和2号明显过窄，5号过于饱满。如果重叠第3个和第4个，一个是几何圆一个修正圆，我们会发现第2个比第1个视觉上稍微重一点，所以我们看上去会更圆一些。
为了说明我的理解，我用三个著名的集合字体——Futura、Circe和Geometria来表达字母“o”。因为高质量的字体是基于人类的视觉感知和复杂的视觉系统而建立的，所以它们的圆形看起来比几何图形更圆。这些字母你看上去会有不舒服的体验吗?
把这几个几何圆重叠。即使是最几何的Futura体的“o”也有四个部分。Circe和Geometria的字母尽管他们的高度和宽度都相等，但还是比圆宽。
我们应该如何运用这一现象呢?例如，在Photoshop、Illustrator或Sketch中使用嵌入的圆角特性，但视觉效果不是很好。
应用程序的图标也是一样的。不能简化地使用标准圆角达到完美。在讨论这一话题前先来看看2个不同的圆角形状。
第1个是在Sketch上创建的圆角矩形。第2个是超椭圆，也可以叫作拉梅曲线(Lamé curve)。是由法国数学家Gabriel Lamé发现的，根据使用的公式，从一个像四角星形状变成实际上是圆形的正方形。
Marc Edwards提出了拉梅曲线公式，它的形状是平滑而完美的。从iOS 7系统开始的图标都是根据它做成的。
使用像超椭圆这样的形状的主要好处是它们的很圆且光滑的外观。另一方面，这些非标准的形状很难插入到真实的界面中。你可以将多个SVG组合在一起，将特殊的公式或脚本加入到代码中，或者使用像Apple为其应用图标所做的PNG掩码。
关于设计过程本身，有一个简单的方法可以解决圆角的问题。需要将可转换的圆形效果转换为一个轮廓，输入图形编辑模式，并手动移动曲线进行处理。
有时一个不理想的几何图形看起来更像一个近似方形。你可能会想说，“这是什么废话?”那么，你对下面的方块有什么想法?哪个形状看起来更像一个近似方形呢?
当我得知我们的眼镜比它的宽度更敏感时很惊讶。它解释了为什么在几何字体中，字母“o”总是比几何圆更宽，字母“H”的垂直部分总是比水平部分粗。
网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...
随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...
每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...
今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...
你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...
@Mockplus原型设计 ：许多人可能认为搜索框不需要设计，毕竟这只是两个简单的元素。然而，在内容繁杂的网站中，搜索框通常是最常用的设计元素。当用户遇到相对复杂的网站时，他们...
一个出彩的登录界面，将提升产品的品质，赋予产品独特的气质。登录界面也是一个发挥情感化设计，提升用户体验，拉近与用户之间距离的兵家必争之地。 现在很多的大型网站把登录...
这篇文章，给大家分享一个后台设计的小技巧。 后台产品的判断标准 我们已经将后台产品定义为一款办公性质的产品，满足用户在工作当中的一些需求。这让后台产品的好坏能够简单...
好的设计往往需要好的内容作为基础支撑。无论是内容还是设计，想要让两者最大化的搭配，往往是需要进行调整和优化才行。 当你的内容需要迁移到移动端上的时候，要怎么让内容和...
网页首屏的重要性是不言而喻的，用户打开网页的第一眼看到的就是首屏中的信息，它是网页的门面，颜值担当，也是给予用户第一印象的核心部分，也是品牌形象呈现的窗口。 值得一...