俗话说眼见为实，但其实我们的眼睛经常欺骗我们。眼睛通过光的反射接收信息，然后经过一次「脑补」最终形成我们所谓「看见」的图像。脑补这个过程会因为各种原因的影响导致我们对于「看见」的事物的理解产生偏差。这一点对图形化操作界面的设计非常影响。既然无法绕过，

　　长宽 400px 的正方形与长宽 400px 的圆形哪一个更大?假如这样问你的话，那么答案当然是一样大。但是来看看下面这张图，长宽各 400px 的两个图形看起来并不一样大。你的眼睛告诉你 400px 的正方形比 400px 的圆形更大一些。物体的物理尺寸是一样的，但视觉尺寸却有可能不一样。

　　每个人的感官可能都不一样，但对于我来说，调整尺寸后的两个图形看起来才是一样大的，至少也不会像图一一样，让人第一眼就认为正方形比较大。为什么会这样?因为我将圆的直径增加了 50px。

　　现在我们将图形都叠起来看，看看为什么会产生这种那么明显的误差。400px 的两个图形叠在一起，你会发现整个圆形都被包裹在了正方形之内，而正方形多出的四个面积巨大的 a 区域就是造成这种视觉误差的原因。再将 400px 的正方形与 450px 的圆形叠在一起，正方形无法将整个圆形包裹在内了，圆形超出的四个 b 区域又与 正方形多出来的 a 区域在视觉上互相抵消，所以 450px 的圆形与 400px 的正方形在视觉尺寸上更接近，也就是我们常说的“一样大”。

　　不仅是圆与方，所有的图形都能够造成这样的偏差。当我们追求“看起来一样大”这个目标的时候，某些形状的物理尺寸应该更大一些。

　　这个现象对于界面造成的影响会有哪些呢?譬如说，当绘制一套 icon 的时候，我们当然是追求每个 icon 都看起来一样大。但假如我们只通过物理尺寸来进行量度的画，画出来的 icon 必然会个大个小，乌七八糟，更糟糕的是，这种问题经常发生，手机里随便打开个 app 都能发现这样的问题。

　　在画 icon 的时候，一定要把视觉尺寸这个无法用数字进行衡量的维度考虑进去。视觉重量小的元素要放大，视觉重量大的元素要缩小。建议大家可以去下载 HIG 的标注 icon 与 Material Design 的标准 icon 看看，数百个图标每一个的物理尺寸都不尽相同，但看起来全部都是一样大的，这是高水平的表现，值得细细学习与参详。

　　不是每个人都会有空给每个图标加个框来测量视觉尺寸的平衡，这里教个大家一个老司机才会的办法，搞个高斯模糊，如果高斯模糊之下每个图标看起来都差不多大，那么就可以说大致达成了视觉尺寸相等。

　　面对那些不需要由我们画的 icon，比如分享到 Twitter、分享到 Instagram ，官方已有提供的 icon，用起来也要注意。

　　另外一个达不到视觉尺寸相等的重灾区就是表单配按钮这种常见的组合。通常是长方形的表单如果和直径相等的圆形按钮摆在一起，必然也会出现圆形按钮看起来比较小的问题。

　　处理方法相信大家也都知道了，略微放大按钮，这样整个表单和按钮才能达到视觉平衡，视觉尺寸才能相等。

　　对于这个现象的处理方法并没有那么简单，就拿上面那个例子来讲，有没有除了放大按钮以外的其他处理手法呢，当然是有的。条件允许的话我们可以对按钮添加一些颜色，让它看起来的视觉重量更重，这也能达成视觉尺寸相等。

　　物体有物理尺寸，但是人眼所见，并对面积或体积自行加以理解后所认知的视觉尺寸并不会与物体的物理尺寸完全相等。

　　视觉对齐可以说是视觉尺寸这种现象的一种逻辑上的延伸。还是跟上半部分一样，来看张简单的图，这两个东西对齐了吗?

　　以物理尺寸的角度来看，它们绝对对齐了，因为这两个长条是一样长的。但是，由视觉的角度来看，上面那一条是不是看起来比下面那一条长一点?

　　试着增加下面那条长条的长度。让下面那条长条多出 20px，这时候它们看起来才是对齐的，达成了视觉对齐。

　　以下这种彩带样式的图相信大家都做过，要让整个图看起来平衡、整齐，就要利用上这种现象，有意识地加长需要加长的部分，才能做到对齐。

　　我们再看一个实验例子，带背景的文本要如何进行对齐。这时候要根据背景颜色的深浅决定对齐的方式。

　　如果是浅色背景的话，我们就不需要改变文本的长度，直接添加背景，浅色的背景由于视觉重量轻，尚且不会造成什么不好的影响。

　　如果是深色背景的话，做法就不一样了。如图所示，我们要让黑色背景与文本对齐，而放置于黑色背景之内的文本要有一定程度的缩进，这样才能达到视觉对齐的效果。

　　与浅色背景不同，深色背景的视觉重量本身比较重，要让文本看起来更加一体的话，就一定要这样做。否则抓眼的背景会过分突出，让看起来对齐的感觉消失。

　　左边的浅色背景输入框框体不会与标签文字对齐，框内文本才会与标签对齐。右侧的深色边框的输入框的框体就要与标签文字对齐，而框内容无需与标签文字对齐。再看看发送按钮，左边的发送按钮与浅色背景的输入框为了达成视觉对齐故意地做短了一点点，右边的发送按钮也因为形状的缘故被故意地做长了一点，达成视觉对齐。

　　看起来非常简单，可是仅仅一个对齐的细节还是非常多的。现在我们单拿一个按钮出来挖掘更多细节。看看下面这个按钮，你会觉得里面的文字是完美居中的对吧。

　　它们看起来是居中对齐的，但实际上并不是，右边箭头形状的按钮中的文字在物理上并未居中对齐，它距离左右两边的边距是不一样的，这种形状的按钮文字必须靠左一些才能看起来对齐。

　　说完了水平居中，垂直居中也有非常多的细节要注意。这里告诉大家一个东西，对于大部分操作系统而言或者说较为成熟的设计语言而言，垂直居中必定以按钮文字的首一位大写字母的高度开始算起，但在 Sketch 中，所有的文字都会默认地带上行距，所以在制作文字按钮时，无论是中文还是英文，一定要注意调整行距，这样才能做到你所需要的垂直居中。

　　以次为排列原则基本上都会让文字(以首位大写字母算起)上下边距相等。大家都这样做的原因是在英文里面，有升部的字母(而大写字母的高度与升部字母的高度大体相似)(l,t,d,b,k,h)要多于有降部的字母(y,j,g,p)。

　　说完了文字按钮，再来说说 icon 按钮，相信这个问题你也经常看到过。看看下图，哪一个按钮看起来对齐得比较好?

　　好吧，希望你能够看出来左边那颗按钮是有问题的，实际上我在画这枚按钮的时候确实点了对齐，但是为什么还会出问题呢?跟文字按钮对齐一样，对齐的方式选错了。一般来说，我们都会默认将飞机当做是一个正方形来进行对齐，但由于图形形状的缘故，这样做必然是错的，将会导致 icon 过于靠左。

　　右边侧那枚按钮看起来就是对的，面对这种特殊的，带角的形状，一定要保证每个角距离按钮边缘的距离是一样的，而这种对齐的方式不能再将 icon 当做是一颗正方形来看。

　　如下图，播放按钮也有三个角，那么做它的对齐工作也要注意啦。左边图那枚按钮就是直接点对齐的产物，看起来非常奇怪，对吧?

　　圆角也有细节?不是设置一下就好了么?当然不是，一个简简单单的圆角也有很丰富的细节。我们前面说过了，眼睛看到的东西并不能尽信，先来看看下面五个圆并尝试回答哪个圆最圆。

　　我问过了很多人，大部分的回答都是 3 和 4 比较圆。第一个圆有点瘦，而第五个又有点胖，都不是很圆。还是学上面用到的套路，我们把 3 和 4 叠起来看。实际上 3 号是一个正圆形，而 4 号圆被做胖了一点点，并不是一个正圆，不过也正因如此，很多人会认为 4 才是一个正圆。

　　这里存在一个现象，经过一点点修改(变胖)的圆对于人的肉眼来说会比正圆更像正圆，这句话有点拗口，但是就是这个道理。看看下图，左手边的圆是一个正圆，右手边的圆是一个经过修改的圆，你瞧瞧是不是这个感觉。

　　那么我们又该如何利用这种无法规避的错觉呢?利用这一点最常见的地方就是圆角啦，而最著名的实例当然就是在 iOS 里面最常见的圆角了。

　　我们常用的几款设计软件，Sketch、PS、Ai 提供的圆角设置用的是非常直接的计算，就是用一个物理正圆来计算你要的圆角，我们上面说到，人眼不会认为正圆是正圆，所以这也是你无法在 Sketch 直接画出 iOS 圆角的最大原因。

　　打开这些软件做个圆角试试看，人眼对于直线在某个点开始转成曲线非常敏感，软件确实使用了一个完美的正圆来做圆角，但是给人的感受就是生硬且不自然。

　　这枚非正圆因为胖了一些，多出来的那点正好给予了一定的过渡，让直线向曲线的改变更加平顺。这也是更接近 iOS 圆角的圆角制作方法。

　　这个技法在 App 的 icon 的制作上也有大量的使用空间，在深入分析之前，我们来看看下面两个 icon。

　　左边是 Sketch 正圆圆角直出，右边是非正圆手动制作的 icon。很明显，右边那个更像 iOS 的 icon，看起来非常悦目，非常舒服。业界内也将绘制出这样的圆角的曲线称为 Lamé 曲线 (Lamé curve)，由一位法国数学家， Gabriel Lamé 发现并命名。

　　这种曲线的方程式如下，从 iOS7 起，iPhone 所有的 icon 都基于此进行设计。除了那些 blingbling 的细节以外，除了这一种说法之外，还有说是由连个堆成的羊角曲线拼出来的。iOS 还有很多这些内涵深厚的细节，不得不感叹用户界面设计真是一门精深的学问。

　　后面人们又根据黄金分割等理论加上了一些必要的参考线，最后就形成了 iOS App icon 的设计规范。

　　网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

　　随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...

　　每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...

　　今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...

　　你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...

　　毕业后加入百度成为一名交互设计师已经整整两年了，这里把一些想法体会，工作职场的相关经历写下来，以供新人参考。 最早接触交互设计时觉得学交互设计非常酷炫，例如像钢铁侠...

　　大概在一年前，我遭遇了设计生涯中最重要的一个挑战，当时我需要为Facebook的商业产品设计一个具有凝聚力的视觉系统，它将应用在给全世界成千上万的企业用户所用的企业服务当中...

　　我经常会和好朋友们说，设计师要踏踏实实的多练习，练多了，没准人生巅峰就来了!当然如果你能在练习的过程中带上一点点的思考，那就更棒了，迎娶白富美都不是问题。每一次的练...

　　Echo ：交互输出文档里面最重要的是做设计时的多方面思考。 前言：用户体验部在大型的互联网公司里面都是核心部门，交互设计师们对接着各自的产品经理及项目，因业务不同，每个...

　　随着移动优先的趋势，APP的设计也越来越受到公司重视，不断地提高APP的设计质量是每个设计师的追求，有哪些设计中的细节被你忽略了呢?让我们一起来看看这些细节你都把握住了吗。...