交互设计基本原则+七大定律

一个页面只做一件事

去除杂乱

用户的注意力非常珍贵,我们也要根据用户的注意力进行设计。杂乱的界面展示了过多的信息,让你的用户非常的累:每一个加进去的按钮、图片、文字都会使界面更加复杂。

一屏一个主要操作。对于使用者,你设计的每一个页面应该仅提供一个具有真正价值的单一操作。这会让你的应用更易上手,更易使用,必要时也更容易添加功能。100个清晰的屏幕比1个杂乱的屏幕更好。

让导航更加明显、不言自明

导航确保用户在跳转时不迷路,告诉用户当前在哪,可以去哪,如何回去等问题。

全局导航需要使用清晰明了的视觉图形,无须解释

所有导航必须一致,不要再不通过页面内隐藏或移动导航

对手指友好的点击目标

让你的触碰点7-10mm大,这样他们可以用手指准确的点击到。这样大小的目标对于用户手指来说非常舒适,在点击时,目标的边缘也是可见的。这可以让用户在点击目标之后得到清晰的视觉反馈。

文字内容应易读

移动端设计的规则之一:文字至少要有11pt,这样才能保证他们不需要放大就可以在移动距离内看清。

通过行高或字间距来提高可读性。大一些的空白有时可以让最杂乱的界面看起来具有吸引力和简洁。

让界面元素清晰可见

你需要借助颜色和对比来帮助用户理解你的内容。为了支撑可用性,你可以选定主要、次要、强调颜色。确保元素间有足够的颜色对比度,这样低视力的用户也可以看见和使用你的APP。

文字颜色和背景颜色必须拥有足够的对比度,这样文字才具有可读性。W3C对主体文字和图片文字提供了如下对比度建议:

小字需要与背景有至少4.5:1的对比度;

大字(粗体14pt/18pt,甚至更大)需要与背景至少有3:1的对比度;

界面拥有足够的对比度对于移动端是非常重要的:用户在户外时,手机可能因为光线而只拥有较低对比度。

图标或其他关键元素也应当采用上述建议的对比度。

根据手的位置设计控制点

Steven Hoober在他的移动设备使用调查中发现,49%的用户只依赖一个手指去完成所有的手机操作。下图中的图样大致是移动手机屏幕的可达区域示意图,各颜色代表了用户可以触及的与手机屏幕交互的点。

绿色代表用户可以轻松触及的区域;黄色代表用户需要一点稍微伸展一点;红色代表用户可能需要调整手持方式才能达到的点。因此,手的位置应该影响着移动端设计时各控制元素的摆放问题:

一级菜单、高频按键和常用操作应该放置在绿色区域内,因为这样子单手很容易交互。

反向操作(例如删除和消除)应该放在单手难触及的红色区域,因为你可不想误点击到它们。

减少输入

移动端打字是很缓慢且易错的过程。因此,使用一款移动APP时应尽量减少打字输入的需求:

让表单短且简单,去除一切不需要的内容;

适当时使用自动填充

利用各种智能传感器,摄像头、麦克风、陀螺仪,以及私人数据地理位置、账户信息

这样用户只需要输入最少的信息。

减少等待

减少等待、稳定快捷,才能帮你留住用户。许多研究都表明,用户能够忍受的最长等待时间的中位数,在 6~8 秒之间。这就是说,8 秒是一个临界值,如果你的页面打开速度过慢,等待 8 秒以上,大部分用户会离你而去。

在等待过程中转移注意力

instagram在点击上传照片后,会回到首页的位置,同时告诉你照片正在提交,而不是显示一个上传进度的界面,让用户看百分比。

减少点击

产品在使用过程中经常会有一些多余的点击,对于用户而言,这些不必要的操作都是附加工作。附加工作消耗用户的精力,但是不直接实现用户的目标。消除附加工作,可以提升操作效率,改善产品的可用性。交互设计师应该对产品中附加工作高度敏感,才能把产品设计得更高效。

反馈明确

及时恰当的反馈能告诉用户下一步该做什么,帮助用户做出判断和决定,让用户知道系统运行良好稳定。所以,要营造和谐的人机对话环境,我们必须做到适时明确的反馈。

非模态的反馈,不打断任务流

减少使用alertbox,使用list notification,toast list等方式来提醒用户。

Gmail是第一个把删除的模态弹框设计成List

Notification这种方式的,提醒用户撤销刚才的删除操作,这种非模态的处理,让删除的流程更加顺畅和轻松自如。

自动保存用户的输入成果

移动端输入的环境复杂,容易出错。再输入后要离开时要二次确认

断网或网络不稳定时,仍然可以发布但是显示叹号提醒稍后重试。

交互设计七大定律

Fitts’ Law / 菲茨定律(费茨法则)

定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小。

菲茨定律的启示:

1.按钮等可点击对象需要合理的大小尺寸。

2.屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。

3.出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。

Hick's Law / 席克定律(希克法则)

定律内容:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。用数学公式表达为反应时间 T=a+blog2(n)。

在人机交互中界面中选项越多,意味着用户做出决定的时间越长。

例如比起 2 个菜单,每个菜单有 5 项,用户会更快得从有 10 项的 1 个菜单中做出选择。

神奇数字7±2法则

1956 年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个。

The Law Of Proximity 接近法则

根据格式塔(Gestalt)心理学:当对象离得太近的时候,意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框,因此当相互靠近的功能块是不相关的话,就说明交互设计可能是有问题的。

Tesler's Law 泰思勒定律(复杂性守恒定律)

该定律认为每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计,收件人地址是不能再简化的,而对于发件人却可以通过客户端的集成来转移它的复杂性。

对于这个定律的理解

事情的复杂性是肯定存在的,人趋于简单这个事实也是存在的。

如果复杂是针对一个任务流而言:看是非常复杂的任务,而使用者在具体使用过程中往往关注或聚焦其中的一部分,所以可以通过将任务进行拆分完成,也可以分割成各个独立的简单任务,这是一种简化,当然也是一种复杂,因为拆分、分割本身就会更为复杂,这一点需要平衡,而我所在的团队中平衡者往往是交互设计师。当然这取决于交互设计师的经验和能力。

如果复杂是针对功能操作或信息传递,交互设计中的四个策略的组合使用可以解决这个问题,如将信息组织更便于理解、识别,将次要并繁琐的转移或隐藏,将没有必要的信息删除等,交互中有化繁为简之说,其实是规繁为简、删繁未间。规繁为简更多应该是组织,转移,隐藏。删繁为简则为删除,移除不必要的说明,不必要的考虑。我之前的理解是尽量不要删繁为简(因为删除的往往是别人的辛苦工作成果),而我现在的理解是从删除并删的合理才是真的产品设计过程中正确的减法,这一点往往是不易的。

还有一种复杂变得简化的方法就是“破”,打破、改变现在的实现方式,利用新的规则、方式、硬件设备、技术让复杂直接的简单化,也就是创新。现实视觉中有很多创新,留意即可发现。身边最为直接的信息传递的方式信件-电报-电话-手机等。

复杂确实是存在的,复杂度确实也是守恒的,但是我们至少可以做一些事情,让消费者、浏览者(这里不说用户)的感觉(视觉、触觉、知觉)变得简单。

防错原则

防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。如上图所示我们的评论功能快,在留言框没有内容或邮箱格式不正确的时候是无法获取验证码的,只有两者都满足了才可以。

Occam's Razor 奥卡姆剃刀原理(简单有效原理)

这个原理被称为“如无必要,勿增实体”,即如有两个功能相等的设计,那么选择最简单的。

奥卡姆剃刀的原则不是求真,而是求简。因为我们可以对本体世界做出无数多个可能的论述,这些论述都有可能是对的,但都不一定是对的,甚至这些论述在使用起来的时候得到的结果会是一样的。而为了方便,我们只能选择最简单的那个。

注:非原创

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 210,914评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,935评论 2 383
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,531评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,309评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,381评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,730评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,882评论 3 404
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,643评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,095评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,448评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,566评论 1 339
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,253评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,829评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,715评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,945评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,248评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,440评论 2 348

推荐阅读更多精彩内容