封面图
今儿我来和大家唠嗑唠嗑在交互设计中常用的五大设计法则，（假装严肃）咳咳..作为一名优秀的UX设计师，你怎么能不博览群书，在方法论的知识海洋中遨游呢，emmm...学习了解这些设计法则并不是纸上谈兵哦，而是让你的设计更具有说服力的助力剂～
一、费茨定律
费茨定律示意图
费茨定律指的是：使用指点到达一个目标的时间同以下两个因素有关：
1.设备当前位置和目标位置的距离（D）。距离越长，所用时间越长；
2.目标的大小（S）。目标越大，指点到达目标所用的时间越短。
开始举栗子：
左图星爸爸截图，可以看到，星爸爸将“登录”和“加入星享俱乐部”按钮放在了右下角，套入费茨定律，当我们右手拿着手机，以我们的右手大拇指为指点去进行点击按钮的操作，会发现相当的方便和迅速，因为这两个按钮离我们的大拇指指点近，并且按钮设计的尺寸足够大，这样“近且大”的设计不管对于小屏手机还是大屏手机都是通杀的，用户点击的时候不会那么辛苦，不会出现因适配大屏手机而导致按钮距离太远不好点击的问题。再继续观察会发现“加入星享俱乐部”按钮比“登录”按钮设计的要更大，根据费茨定律，按钮越大越容易被点击，所以也可以看出“加入星享俱乐部”这个功能对星爸爸来说更重要，或商业价值更大。
中间闲鱼截图，闲鱼的slogan是“让你的闲置游起来”，鼓励用户在平台多发布自己的闲置，所以在此截图中也可以体现出来，将“发布”icon按钮做的比其他tab上icon按钮更大，让用户在点击或寻找的时候不会那么辛苦，一眼看到，然后迅速点击，icon大点击热区大，点击精准度高～
右图爱奇艺截图，同样是关于续费的功能，为何一个入口小，而另一个入口更大？首先看看两个功能入口各是啥，小的不起眼的入口为“管理自动续费”，是用户取消自动续费的入口，而大的入口为“立即续费”，是鼓励用户去充值会员消费的。所以很明显，帮企业获益赚钱的入口理所应当的更大更显眼更利于点击。当然举这个栗子只是想强调下费茨定律中很重要的一点：如果控件是更重要、使用频率更高，或对于企业来说更有商业价值，更能赚钱的，都是有理由且应当做的更大一些。
二、格式塔心理学
格式塔心理学经典图片-来自百度图片
图一：你看到的是类似于奖杯的形状还是人脸的形状呢？图二：你一眼就看到了这个三角形吗？图三：你看到的是奔跑的人还是箭头？仔细看，你会发现你所看到的这些图形可能是不存在的，而是你的大脑脑补出来的图形，这就是“格式塔”的神奇。
所以我们可以简单解释一下“格式塔”（解释来自《集创思维设计矩阵》这本书）：
“格式塔”可以简单地理解为一种潜意识的脑补行为，人们会把形式上、颜色上、距离上相关的东西归为同类，对具有潜在闭合趋势的对象进行自动闭合，是人对图形的一种自发性心理活动。套用在界面设计上的话，“格式塔”告诉我们尽量将相似的、有关联的信息摆放在一起，不要让用户迷茫，要让他潜意识里就知道哪里能够找到自己想要的信息。
下面请开始我们的举栗子：
上面为网易严选和微信读书的界面截屏，这两张界面设计中都没有使用线条去进行模块间的区分，但用户依然能一眼分清它们间的关系，这就靠的是每个小模块间的距离上的区分、形式和颜色上的统一，来让用户能够自发性的脑补出图中① ② ③部分的三个信息大区块。
距离上的区分：如果想有效清晰的区分信息块，可以遵循一些规律：相关信息之间的间距要 小于 其他类信息的间距，就拿图中网易严选和微信读书界面中所标注的红色线段为例，便可发现～
形式和颜色上的统一：网易严选里每个商品类目的组成元素都是统一的：图片、标签、主标题、辅标题、价格；商品图的背景在颜色上也进行了统一的处理，全部采用浅灰色，这样既不会对主体商品图的视觉呈现产生干扰，同时也有效的通过统一的背景色让用户产生“格式塔”效应自动去对信息进行正确的类别划分。
反馈提示
除了上面截图的栗子，操作反馈也遵循着格式塔法则，将相似、有关联的信息尽量摆放在一起，让用户能够在他的“预见”范围内，无缝连接的得到反馈信息，这样不仅在信息浏览的效率上得到提升，还能让用户对产品有种掌控感，减少用户认知障碍，提升产品体验。吐槽下：有些产品的操作反馈体验就很差，反馈的内容并不在相关信息条目的附近，每次视觉轨迹都要扫视一圈，移动端屏幕小还能勉强忍受，Web端那就真的痛苦啦，不自觉想起找不同的游戏（捂脸）...
今儿这篇唠嗑差不多结束了，其实每一篇文章都是对自己思考的一个记录吧，想说啥说啥，对或者不对也并不是那么重要（当然不对的也欢迎各位小伙伴严厉的指正我哈哈哈），重要的是一直在UX这条路上努力就好～
网友评论