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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
赋予设计理论支撑!经典「交互理论」在实际案例中的应用
0.0°
2020-08-04 原创文章 经验/观点 举报 1063 4 3 0


目录


1.费茨定律

2.席克定律

3.格式塔原理

4.米勒定律

5.奥卡姆剃刀原理



一、费茨定律


什么是费茨定律


菲茨定律是指:到达目标的距离越长、交互元素的尺寸越小,花费的时间就越长。反之,到达目标的距离越短,交互元素的尺寸越大,那么总体花费的时间就越短,体验就越好。比如桌面系统的导航栏位置、鼠标右键、巨大的按钮,都是为了减少用户点击它的时间,提高效率。


设计中的应用


1.由于鼠标指针无法移出屏幕,会在到达屏幕边缘或角落就停止。因此,界面的四个边角可以比显示器中的其他位置更快地进行点击操作。我们能以最快速度移动鼠标,但仍然可以击中目标。这也就是为什么MacOS系统中始终将菜单栏置于屏幕的左上边缘,而不是当前程序的窗口上。




2.当我们点击鼠标右键,菜单会紧贴着鼠标指针的位置出现。这样点击距离就会缩短,我们可以快速的进行选择操作。


3.移动端重要的按钮通常都会放置在方便用户点击的区域,这也就是为什么说3.5英寸手机的屏幕尺寸是最方便的尺寸。因为,用户的拇指可以不费力的点击屏幕大部分的区域,从而进行完美的单手操作。但随着人们需求的变化,屏幕的尺寸越来越大,方便用户能够在最短的时间内浏览更多的内容。


因此,各种新颖的交互手势慢慢出现,归根结底都是为了方便用户用最快速的、最有效率的方式进行操作。



总结


随着被点击对象大小的增加、用户操作的起点与对象之间的距离减小,都会让用户操作的速度得到增加。不过,随之而来的还会有误操作等可能性。所以,我们要对交互元素的位置以及大小进行合理的分配。




二、席克定律


什么是席克定律


席克定律是指,用户做出决定所需的时间和精力会随着选择数量的增加而增加。因此,概括来说就是:少即是快!拿遥控器来举例,上面有很多的按钮。但常用的按钮就那么几个。所以其它按钮的出现会一定程度上干扰用户的使用。因此,苹果遥控器就做到了最简化。



设计中的应用


1.某些产品在新用户首次登录填写信息时,并没有将账号、密码、验证码等多种信息一口气展示出来。而是分步骤,引导用户一步步操作。掩盖复杂性,将复杂的流程分解为多个屏幕。例如:用户填写好手机号点击下一步后,再出现填写验证码的选项。




2.通讯录中的按字母排布虽然现在来看已经是习以为常的设计了,但设想一下:如果通讯录中的人名都不按照字母排布,而是毫无逻辑规整的堆在一起,我们还能快速的找到特定的联系人吗。而按照字母排布的方式,即使没有搜索功能我们也不难找到。


3.导航栏部分,可以与7±2法则搭配使用。他们的共同点就是减少导航内容的数量。如果导航栏上有十几二十几个选项,用户看到是会非常崩溃的。因此,简化内容或进行分类筛选,可以帮助用户提高使用效率。



总结


核心理念就是:少即是快!给内容做减法,帮助用户筛选提炼关键内容,节省用户选择的时间。但定律的根本是简化操作流程,而不是彻底操作流程擅自帮用户做选择。所以,一些必要的操作或需要重点提示的内容依然是要让用户知晓的。




三、格式塔原理


什么是格式塔原理


格式塔原则(分组原则)是描述人眼如何感知视觉元素的规则。原理旨在说明如何将复杂的场景简化为简单形状;或解释人眼如何将分散的元素归为同一图形,而不是单纯的独立元素。原理主要分为:相似度,连续性,封闭性、邻近性、对称性、连通性等。


设计中的应用


1.相似性:人眼倾向于将相似的元素之间建立联系,比如:形状、颜色、大小、属性相似等等,即使它们分隔很远。当人们看到这些特征相似的元素时,便会不自觉的将它们归为一组。



2.连续性:人眼遵循设计的路径,喜欢看到连续的视觉元素或设计形式而不是分离的对象。即使元素是分开的,但视觉有朝一个方向延续的能力。因此,我们会自然的把分离的元素连接在一起,使它看起来是朝着特定的方向。



banner或滚动的卡片样式常见的样式


3.封闭性:人眼更喜欢看到完整的形状,因此会自然地在缺损的元素上寻找完整性。如果某元素的整体是不完整的,用户可以通过自动填补缺失视觉信息的方式来感知其完整的形状。



图形与字母尽管不完整,但我们也可以轻松的识别出熊猫与字母A


4.接近性:①我们的大脑会自然的将彼此靠近的对象关联起来。之所以会产生这种关联,是因为人脑天生就有将事物组织和分组的倾向。②同时,通过统一的视觉属性连接的方式将某些元素归为一组,使我们感知到组或块的存在,而不是零散的单独元素。



页面中的元素通过属性分配、间距或分割线等方式,将内容分配的井井有条。


5.对称性:人们倾向于将物体视为围绕其中心所形成的对称形状。对称会给我们一种稳固与有序感,这是我们出于本能去发现的。




6.主体与背景:人们会自然地会将图像分为主体与背景两个部分。主体是悬浮在最上层的核心内容区域,而其余的则都是背景部分。在实际的设计当中,往往较小的元素是主体部分。




7.共同命运:牵一发而动全身,无论元素放置的距离有多远或它们看起来有多不同,如果它们沿相同方向移动,则被认为彼此之间具有关联系,视为同一组。




总结


格式塔原理中的内容看似基础,但越基础的内容往往越有效。它可以使我们的设计有据可依。可以帮助我们将复杂的信息内容合理组合与分配,让用户第一时间了解到其核心内容,提高效率。




四、米勒定律


什么是米勒定律


米勒定律,也可被称为7±2法则。指的是一般情况下用户对事物的短时记忆容量约为7个加减2个,也就是5至9个(受事物种类比如数字、字母或排布方式等多种因素影响)。如果超过这个数字,人脑的认知负荷便开始增加。


设计中的应用


1.导航栏:我们可以随便打开一个网站,基本上绝大多数的网站导航栏中的选项都不会超过九个。即使超过九个选项,也会进行折叠或是用搜索框等方式进行分隔。而移动端的导航栏中选项多数不超过五个。


2.打开我们的通话记录,可以清楚看到11位的电话号码都被以3-4-4的形式分隔开。除此之外银行卡号被分隔也是同样的道理,方便用户查看。


总结


米勒定律与席克定律有共同点,均是为了减少用户的认知负荷。无论是把选项控制在某个数字内,还是进行隐藏或分类等操作,均是为了帮助用户更有效率的进行使用。




五、奥卡姆剃刀原理


什么是奥卡姆剃刀原理


基本原理:把复杂的事情简单化。当一个简单的方案足够解决问题时,没有必要去寻求更复杂的方案。两个功能相同的产品,使用起来越简单的那一个往往更好。在不损害整体功能的情况下,删除那些无意义无价值的元素。


设计中的应用


1.苹果官网:打开网站,我们就可以清楚地看到新产品。主要的内容也都被以“块”的方式分隔开。看似没有很多的内容,但其实主要信息已经让用户知晓了。




2.谷歌搜索:充分的贯彻了搜索引擎的定义。完美的去掉了其他无用的元素。更多功能被隐藏起来,不给用户过多的干扰。




总结


现在极简风格依然在流行,奥卡姆剃刀原理起了很重要的作用。极简并不代表简陋,根本目的是让用户更加专心不被打扰的进行操作。为了达到这一点,我们可以去掉多余的字段、收起不重要的功能、减少用户点击次数等方式。




六、最后


熟悉与交互相关的理论知识,可以让我们的设计有据可循。构建理论框架,让我们的设计更加可控。在与甲方对接时,可以有理论支撑,也可以很好地体现我们的专业性。





参考文章

https://lawsofux.com/

Powered by Froala Editor

微信公众号:Fly Lab

更新:2020-08-04

收藏

4人已收藏

FLYXMF

WeChat:774842582

  • 31

    作品

  • 3218

    粉丝

  • 36

    关注

  • Midjourney进阶篇,告别开盲盒!一些高效的使用技巧
  • 依靠关键词智能作画丨「Midjourney」基础使用手册
  • 网格系统总结:从初识到应用
  • 金融产品APP Redesign
相关标签

    猜你喜欢

      2020-08-04 原创文章 经验/观点 举报 1063 4 3 0

      赋予设计理论支撑!经典「交互理论」在实际案例中的应用

      0.0°

      你确定要举报赋予设计理论支撑!经典「交互理论」在实际案例中的应用

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2020年05月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      4
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录