加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

实例解析「交互设计七大定律」在设计中的应用(上篇)

发布时间:2018-02-21 02:46:08 所属栏目:建站 来源:人人都是产品经理
导读:副标题#e# 一、费茨定律(Fitts’ Law) 1、费茨定律(Fitts’ Law)简介 费茨定律是由保罗·费茨(Paul M. Fitts)博士,在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的,时间是 1954 年;该定律被用来预测从任意一点到
  • 案例二:比如安卓版微信、支付宝和QQ底部导航

在使用APP的时候,我们都会用到软件的底部导航区域,如果大家仔细观察,会发现,任何软件的底部导航都不会超过 5 个,就像下图中的微信、支付宝及QQ界面一样,底部导航也没有超过五个的。

实例解析「交互设计七大定律」在设计中的应用(上篇)

(2)如果导航或选项卡内容很多,可以用一个层级结构来展示各段及其子段,并注意其深广度的平衡。

  • 案例一:比如天猫商城和亚马逊网站的商品分类选项卡

导航是分为多个层级的。如果导航的内容很多放不下的话,我们就可以将它整合归类来分层级收纳,就像天猫和亚马逊官网对于商品分类的处理方式一样,使用父子层级的方式来归类展示商品。

实例解析「交互设计七大定律」在设计中的应用(上篇)

  • 案例二:比如京东及当当网APP分类模块

下图分别为京东及当当网APP的商品分类模块界面,我们不难看出,两个产品的商品分类布局形式很相似,都是用了选项卡的方式来分类商品,层级明确,相应的提升了用户找寻商品的效率。

实例解析「交互设计七大定律」在设计中的应用(上篇)

(3)把大块整段的信息分割成各个小段,并显著标记每个信息段和子段,以便清晰的确认各自的内容。

  • 案例一:比如苹果官网iPhone X 对于语言版本的介绍板块

如下图所示,语言版本介绍模块把一整段语言,分成四个模块的信息来介绍,而且每个模块都要自己的标题,再加上段落之间的空间留白,使得此段信息看起来清晰明了。

实例解析「交互设计七大定律」在设计中的应用(上篇)

  • 案例二:比如支付宝和微信银行卡界面卡号信息的展示方式

正如下图所展示的,为了便于记忆,支付宝及微信的银行卡展示界面,将卡号信息的展示采取了分段的方式,这个也源于我们现实生活中使用的银行卡,大家都知道银行卡的卡号是分段展示在卡上的。

实例解析「交互设计七大定律」在设计中的应用(上篇)

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读