大家有没有想过为什么按钮越大，越易于点击 ?为什么相关按钮需要相互靠近摆放 ?为什么 Win 系统要将「开始」按钮放在角落 ?这些设定的背后其实都有一个在人机交互中，非常重要的定律 —— 费茨定律。
看起来很复杂吧， 但实际上并不难，我用一张图给大家解释下费茨定律是什么。当用户需要拖动黄色点到目标区块中时：
费茨定律中的 D 就是从开始点到目标中心的距离，而 W 则是目标的宽度大小。根据公式可以看到，A和 b 都是常量，那么 MT (黄点从左移到目标中心所需的时间)的大小取决于 D 和 W 的值：
当距离一定时，目标越小，所花费的时间越长;目标越大，所花费的时间越短。(小而远的目标区域意味着用户需要将黄点移动较长距离，并且为了能对准目标还需要做一系列的微调，因为目标比较小嘛，所以耗费的时间自然就长了。)
当目标大小一定时，起点离目标中心的距离越近，所花费的时间越短;距离越远，所花时间越长。(这比较好理解，距离比较近嘛~ 所花时间自然比较短了。)
还是拿上面两个界面为例子，大家有没有发现那两个大大的按钮是放在屏幕下方的?原因就是「将按钮放在底部可以使 D 变小」，要知道用户完成整个点击操作是要先将手指移动到目标上方，最后进行点击的。那么在这里 D 就是手指开始悬停的位置到目标上方的距离。根据研究表明，人们在使用手机的时候，75%的交互操作都是由拇指驱动的，而拇指悬停的位置恰恰就是屏幕下方。
PS：关于用户是如何使用触屏设备的，欢迎大家看看这篇读书笔记——「阅读」触类旁通:多终端时代的触屏界面设计 文中提到的书本，也推荐大家买来看看。
最常见的使用就是鼠标右键操作了。点击右键，鼠标的右下或右上方就会出现一个菜单，鼠标移动到对应按钮上，点击一下即可完成操作。
在设计注册、登录界面的时候，可以将「注册」和「登录」放到一起，如果想要突出「注册」则可以考虑将「注册」按钮做大点。
相关联的操作也可以尝试放在一起，不仅可以在视觉上增强用户对他们相关性的认知，还可以减少在他们之间的距离 D。
原因就是屏幕的四角和四边 W 无限大，W 无限大的话，MT 就很小了。像 Mac 的 Docker 更是将费茨定律发挥得淋漓尽致，当鼠标 hover 到对应的 App icon 上的时候，icon 还会放大，从而加大 App icon 的W 。
那是因为光标没法移动到四角与四边之外的地方，你再怎么移动鼠标，光标也没办法移到屏幕以外的地方，所以他们就进入到了「无限可选中」状态。
但是，随着屏幕尺寸越来越大，而且双屏幕的配置越来越常见，这个设计也变没得那么好用了，因为 D 变大了。同理手机端的四角与四边也是「无限可选中」位置，因为手点击屏幕以外屏幕不会响应嘛。(所以各位可以发现左上角按钮一般为返回，右上角为确定)但是在手机上时候，依然会面临屏幕越来越大，按钮越来越不好点击的问题。
明确了设计目标后，需要考虑设计约束与技术限制有哪些?(这里我们不考虑技术问题)对于关机操作来说，本身是个非常高危的操作，一经生效就没法撤销了。那么这里的设计约束就有：
根据约束，我们开始设计方案。在设计时候，我们不妨将我们所学的费茨定律应用到设计之中，估计这里又有同学会问，费茨定律不是教我们设计出易于点击的设计吗?很明显与你提到的约束相违背啊。其实费茨定律不只能正着用，还能反着用。比如我们可以尝试加大 D 和降低 W。
不过正如前面提到的第三条启示，相关的按钮放在一起更便于点击。但是我们实际上并不想让用户点击「关闭手机」而是希望用户点击「取消」，将两个放在一起并不合适，那么我们可以尝试降低「取消」按钮的 D 从而削弱用户点击「关闭手机」的可能，并且根据费茨定律我们可以将「关闭手机」的 W 做小，从而得出乙方案。
触屏的伟大之处就在于，它不仅仅有点击操作，还有滑动操作。通过滑动操作也可以创造出 D 出来。如丙方案所示，完成关机操作的总 D 等于「大拇指移动到顶部滑块的距离」加上「按住滑块滑动到右边的距离」。
为什么很多人会觉得 iPhone 的体验比绝大多数的安卓手机要好，看看这个关机界面就知道原因在哪里了吧 。
网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...
随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...
每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...
今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...
你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...
如何设计一个简单的新闻聚合产品？文章介绍了制作极简的新闻聚合产品的7步骤，好奇的你和我一起来看看。 你知道在三四线的县城，用户在哪里看新闻么？不是在今日头条里，而是...
@DesignerSeany ：今天我将从大家经常用到的百度外卖(iOS v4.4.1)说开去，阐述我自己分析一款App时运用的思维逻辑和过程，当然我说的不一定对，希望能给新手朋友们一些思路。 信息架构梳...
本文以微信首页为例，用三个维度系统地解析一个产品的交互设计的方方面面。 首先我们来做个互动，请各位看官打开自己的微信，然后看到你的微信首页： 然后仔细观察看到了什么...
下篇现在才更新，最后一篇我们聊聊容错性设计方法的应用关键。 1、用户使用场景模拟 用户使用场景模拟是传统的用例分析方法，可以分析用户可能会用到的功能以及产品使用流程，...
大家都说后台产品难做、要求高，这是有原因的。而且这个原因会超出我们的认知，一起来看看吧。 什么是后台产品 后台产品也被我们称为后台管理系统、内部管理系统。简单而言，...