恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
交互设计之“费茨定律”“格式塔”
0.0°
2018-03-23 原创文章 经验/观点 举报 1396 5 10 0

今儿我来和大家唠嗑唠嗑在交互设计中常用的五大设计法则,(假装严肃)咳咳..作为一名优秀的UX设计师,你怎么能不博览群书,在方法论的知识海洋中遨游呢,emmm...学习了解这些设计法则并不是纸上谈兵哦,而是让你的设计更具有说服力的助力剂~


一、费茨定律

费茨定律示意图

费茨定律示意图


费茨定律指的是:使用指点到达一个目标的时间同以下两个因素有关:


1.设备当前位置和目标位置的距离(D)。距离越长,所用时间越长;


2.目标的大小(S)。目标越大,指点到达目标所用的时间越短。


开始举栗子:

Image title


左图星爸爸截图,可以看到,星爸爸将“登录”和“加入星享俱乐部”按钮放在了右下角,套入费茨定律,当我们右手拿着手机,以我们的右手大拇指为指点去进行点击按钮的操作,会发现相当的方便和迅速,因为这两个按钮离我们的大拇指指点近,并且按钮设计的尺寸足够大,这样“近且大”的设计不管对于小屏手机还是大屏手机都是通杀的,用户点击的时候不会那么辛苦,不会出现因适配大屏手机而导致按钮距离太远不好点击的问题。再继续观察会发现“加入星享俱乐部”按钮比“登录”按钮设计的要更大,根据费茨定律,按钮越大越容易被点击,所以也可以看出“加入星享俱乐部”这个功能对星爸爸来说更重要,或商业价值更大。


中间闲鱼截图,闲鱼的slogan是“让你的闲置游起来”,鼓励用户在平台多发布自己的闲置,所以在此截图中也可以体现出来,将“发布”icon按钮做的比其他tab上icon按钮更大,让用户在点击或寻找的时候不会那么辛苦,一眼看到,然后迅速点击,icon大点击热区大,点击精准度高~


右图爱奇艺截图,同样是关于续费的功能,为何一个入口小,而另一个入口更大?首先看看两个功能入口各是啥,小的不起眼的入口为“管理自动续费”,是用户取消自动续费的入口,而大的入口为“立即续费”,是鼓励用户去充值会员消费的。所以很明显,帮企业获益赚钱的入口理所应当的更大更显眼更利于点击。当然举这个栗子只是想强调下费茨定律中很重要的一点:如果控件是更重要、使用频率更高,或对于企业来说更有商业价值,更能赚钱的,都是有理由且应当做的更大一些。


二、格式塔心理学

Image title

格式塔心理学经典图片-来自百度图片

图一:你看到的是类似于奖杯的形状还是人脸的形状呢?图二:你一眼就看到了这个三角形吗?图三:你看到的是奔跑的人还是箭头?仔细看,你会发现你所看到的这些图形可能是不存在的,而是你的大脑脑补出来的图形,这就是“格式塔”的神奇。


所以我们可以简单解释一下“格式塔”(解释来自《集创思维设计矩阵》这本书):


“格式塔”可以简单地理解为一种潜意识的脑补行为,人们会把形式上、颜色上、距离上相关的东西归为同类,对具有潜在闭合趋势的对象进行自动闭合,是人对图形的一种自发性心理活动。套用在界面设计上的话,“格式塔”告诉我们尽量将相似的、有关联的信息摆放在一起,不要让用户迷茫,要让他潜意识里就知道哪里能够找到自己想要的信息。


下面请开始我们的举栗子:

Image title

上面为网易严选和微信读书的界面截屏,这两张界面设计中都没有使用线条去进行模块间的区分,但用户依然能一眼分清它们间的关系,这就靠的是每个小模块间的距离上的区分、形式和颜色上的统一,来让用户能够自发性的脑补出图中① ② ③部分的三个信息大区块。


距离上的区分:如果想有效清晰的区分信息块,可以遵循一些规律:相关信息之间的间距要 小于 其他类信息的间距,就拿图中网易严选和微信读书界面中所标注的红色线段为例,便可发现~


形式和颜色上的统一:网易严选里每个商品类目的组成元素都是统一的:图片、标签、主标题、辅标题、价格;商品图的背景在颜色上也进行了统一的处理,全部采用浅灰色,这样既不会对主体商品图的视觉呈现产生干扰,同时也有效的通过统一的背景色让用户产生“格式塔”效应自动去对信息进行正确的类别划分。


Image title

反馈提示


除了上面截图的栗子,操作反馈也遵循着格式塔法则,将相似、有关联的信息尽量摆放在一起,让用户能够在他的“预见”范围内,无缝连接的得到反馈信息,这样不仅在信息浏览的效率上得到提升,还能让用户对产品有种掌控感,减少用户认知障碍,提升产品体验。吐槽下:有些产品的操作反馈体验就很差,反馈的内容并不在相关信息条目的附近,每次视觉轨迹都要扫视一圈,移动端屏幕小还能勉强忍受,Web端那就真的痛苦啦,不自觉想起找不同的游戏(捂脸)...


今儿这篇唠嗑差不多结束了,其实每一篇文章都是对自己思考的一个记录吧,想说啥说啥,对或者不对也并不是那么重要(当然不对的也欢迎各位小伙伴严厉的指正我哈哈哈),重要的是一直在UX这条路上努力就好~



更新:2018-03-23

收藏

5人已收藏

S1mple_

一枚在UX道路上努力的射鸡师~

  • 4

    作品

  • 2

    粉丝

  • 14

    关注

  • #2018UCAN会议记录#蜕变与重塑-新零售时代的产业升级
  • 「确定」和「取消」按钮到底谁左谁右?
  • 产品设计分析-微医
相关标签
用户体验设计

    猜你喜欢

      2018-03-23 原创文章 经验/观点 举报 1396 5 10 0

      交互设计之“费茨定律”“格式塔”

      0.0°

      你确定要举报交互设计之“费茨定律”“格式塔”

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年03月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录