内行看门道!聊聊交互原则那些事儿

 

  刚学习交互设计的新人,面对繁多的交互设计原则,肯定晕头转向。总不能每款产品都按着交互原则一一比对吧?今天资深交互设计师老D由浅及深,聊聊交互原则的那些事儿,特别适合新人呦。

  为什么需要设计原则?

  设计原则其实就是对一些设计过程中基于人类的认知规律对设计做出的一些指导性原则,并且对已经成为行业共识的设计经验做个总结,用来指导设计师界定问题、提高效率。

  经常用的设计原则有哪些?

  先来抛一个老D在早年刚接触交互设计的时候最为大家所认可的几条设计原则:

  1. 可学习性

  目标用户在已有的知识和经验基础上,能正确理解产品界面,无需要思考而一目了然;或者是用户通过自己的学习,借助提示或帮助说明,能够理解产品界面。则界面具有了可学习性。

  可学习的内容包括:明确当前所在位置,知道当前能干什么、接下来要干什么,能快速辨别界面中的元素并明白其功能。在设计时可采用合理的隐喻、习惯用法、有效的启示。例如手机中收音机的调频显示和音量大小控制,模拟真实收音机,一目了然。其实这是隐喻的手法,隐喻是非常利于新用户学习的,从现实世界中直接映射过来。

  2. 一致性

  在相似的情景下,应在几个方面保持一致性:视觉表现、交互行为、操作结果。良好的一致性,可以减少用户学习成本培养用户习惯,也可体现产品设计的严谨。如果有不同,应作相应的区别处理,特别是视觉表现上要予以区分。淘宝、当当、唯品会等网购类型的网站,无论你以什么形式搜索商品,到最后出现的商品都是以表格形式呈现。到你选择商品进入详细页面,对应位置都有相关商品的详细信息、商品评价。再到添加到购物车或直接购买,一系列的交互行为都有一致性。

  3. 简洁性

  少即是多,尽可能精简界面上的元素。当设计出原型,先将元素减半,然后再看能否再简化。生活其实很简单,但很多时候我们人为将其复杂化了。保证主要任务流程顺利完成,消减其余不相关元素的干扰。

  简洁体现在四个方面:减轻视觉干扰、精简文字表述、简化操作步骤。孢子社区的新用户注册是我见过在操作步骤和文字描述上最简洁的,略去了常见的验证码、动态码、重复输入密码的操作。


  4. 流畅性

  用户操作连贯,任务完成顺畅,避免干扰或打断。明确最基本的核心任务,并保证它的顺利执行,辅助操作应在不影响核心任务的基础上展开。

  避免干扰,让用户明确在特定界面中的首要任务和目标,尽可能避免界面上的视觉噪音和其他干扰;避免打断,让用户的操作保持连贯性,模态框的使用要谨慎。Gmail在把邮件删除后,会将删除的弹框设计成List Notification非模态这种方式,提醒用户撤销刚才的删除操作,这种的处理,让删除的流程更加顺畅和轻松自如。


  5. 及时反馈

  界面中任何可操作的地方,当用户发生操作时,都应该及时给予反馈。让用户了解操作已经生效,界面还在用户的控制之下。反馈内容包括:用户操作反馈和产品状态反馈。

  操作反馈,指的是界面元素在用户进行滑过、点击、移开等操作时,元素的反馈变化。状态反馈,指的是产品在运行需要用户等待或者系统出错时的反馈,让用户明白状况。迅雷每次下载完成都有声音提醒音乐播放时的进度条显示就是这类反馈。

  6. 可探索性

  用户在使用产品过程也是一个探索过程,产品应该允许用户犯错,即使犯错了也不能埋怨用户,而且必须给用户重新尝试的机会,让用户处于放松的心态。

  设计过程中,首先要帮助用户避免出错,比如采用合适的控件(相同情况下选择控件比输入控件出错机会更小),给予输入帮助或启示。在登陆邮箱的过程中如果忘记密码,在登陆图标的旁边会有一个”忘记密码?”的提示图标,来提醒用户不用担心,点击进入来解决问题。用户出错后,需要提供撤销或返回功能,使用户返回到上一步操作重新探索。出错反馈要亲和,避免责备用户或鲁莽的打断或推出产品,要礼貌的指出错误所在并提供有用的补救建议。

  这几个条真的是比较经典,不断体会并运用这几条设计原则就让当时不少设计师在当时的情形下做起了交互设计,当时国内市面上靠谱交互设计书的数量一把手就能数完了。

  就这么六个?还有其他的吗?你放心,如果需要还有更多

  一个界面为主要角色设计,而不是为所有人设计。

  为日常场景设计,不要让边缘场景主导你的设计。

  所有的习惯行为都需要学习,好的习惯行为只需学习一次。

  除了输入所有的行为支持鼠标操作;除了绘图所有的行为支持键盘操作。

  在满足需求的前进下,界面的信息越少越好。

  在满足需求的前进下,界面的功能越少越好。

  在满足需求的前进下,界面的交互次数越少越好。

  界面的操作方式最好一目了然,不需要帮助。

  操作前可预知;操作中有反馈;操作后可撤消。

  充分利用隐喻设计。

  让用户知道身在何处。

  界面结构合理、功能布局、措词统一,突出重点。

  日常场景使用的界面应放在主要位置,且尽量的大。

  一般界面的颜色不超过3种,且避免大面积使用刺眼的颜色。

  减少用户的记忆负担,尽量让用户识别,而不是回忆。

  尊重用户的习惯思维和行为,除非你有更好的设计。

  关注用户的目标,而不是任务。

  尽量避免对话框,且对话框深度最多不应超过3级。

  …

  现在是不是已经看到快吐了?嘿嘿

  设计原则这么多,到底该怎么用啊?

  老D深切的感受到如果每次做设计都按照这些原则一条条的去比对,那么就会“一条复一条,原则何其多”,于是老D就简化总结了一下,交互就是设计行为,行为就是一连串的动作,具体到动作中的每一个环节都会有一个受动的对象,比如点击按钮、弹出窗口、阅读弹窗内容、关闭弹窗等等,截取整个一连串动作中的一个对象–按钮来看,分为前、中、后三个阶段:

  前期: 用户在点击前对于点击后的结果心理是有个预期的,是由之前页面的上下文和按钮本身信息(文案、形状等)来决定的;

  中期: 点击的每一步动作都需要按钮有个反馈,鼠标进入按钮的感应区域、悬浮(hover)在按钮上,按钮应该自身有个状态的的变化,比如颜色,点击中也应该有个变化;

  后期 :手动点击后弹出的对话框是否符合用户的心理预期,比如按钮上边的文字是“下载”,预期其实就是下载文档,结果弹出一个对话框告诉你积分不够,这样做的体验就是不好的。

  简单的按钮是这样,复杂的登录注册流程甚至是时间间隔好几天的流程也是这样,都适合用这个三个阶段来划分,只是量的大小问题。

  其实还有一个更为专业的划分方法(交互设计精髓里边说的),老D说一下看小伙伴们是否能搞的懂哈

  虽然设计原则众多,但是可以分为四类:

  一、设计价值 :这个是设计工作是否有效的必要条件,决定了一下几个层次的次级原则

  二、概念设计 :用来界定产品定义,产品如何融入广泛的使用场景

  三、行为原则 :描述产品在一般情景和特殊情景应有的行为

  四、界面原则 :描述行为及信息有效的视觉传达

  亲爱的小伙伴,看不太懂吧?嘿嘿,老D来解读一下吧!

  设计价值 :其实就是这个设计是否符合用户的需求,是否满足用户的目标,交互设计在这一层次能够为用户做什么。这一层做不好,后边的都免谈。

  概念设计 :产品是怎么使用的?以什么形式呈现给用户?是Web还是App?是为新手做引导还是为中间用户提供方便等等。

  行为原则 :这个才是我们上边提到的一堆设计原则,什么及时反馈啦、可学习啦。

  界面原则 :这个就是“布局要突出重点”啦、“一个界面同时最好完成一个任务啦”等等。

  Alan Cooper不愧是大师,提出的四个层次一下就把那么多零七碎八的设计原则统统收在自己的框架之下了。

  符合设计原则与满足用户目标有冲突时如何权衡?

  设计是的本质就是为用户解决问题提供价值,设计以人为本,用户目标是最重要的。

时间: 2024-09-02 14:28:48

内行看门道!聊聊交互原则那些事儿的相关文章

网站设计分析:交互设计那些事儿(二)

中介交易 SEO诊断 淘宝客 云主机 技术大厅 <交互设计那些事儿>之一完工后,承蒙各位抬爱,在微博时代被大量转发和分享,也让我收到一些邮件,询问我下篇为何还不出来?请原谅我的惰性,每个周末都给自己找了不少借口一拖再拖,上个周末又在家里养了两天的病--在此提醒朋友们,换季季节,多喝水,多休息,少生病哈. 一. 理论前提 1. 人机交互与人类信息处理机制理论 既然产品设计出来不是给设计师用的,而是给用户用的,他们如何理解.认知.使用产品才是最重要的.因此"定义用户",&quo

Android平板电脑应用程序设计交互原则和设计案例

文章描述:Android平板电脑上的APP设计须知. 设计师们从来没有像今天这样需要为如此多的移动设备营造用户体验.随着平板电脑持有量的不断增加,我们进入了"后PC时代".各个公司都在极力为用户提供高质量的用户体验,以争取他们的注意力.设计一个成功的Android的应用程序,不仅需要一个伟大的.可以激励用户下载.使用和保存的构想,还需要一个自然流畅而又直观的用户体验. 以下这些内容有助于设计师了解iPad的iOS和Android的3.x"蜂巢"系统的交互原则和主要元

交互设计那些事儿(一)

转载请注明来处,关注我,请点击:http://weibo.com/heidixie 这是一次内部分享,新部门的同学们希望我聊聊我过去从事的交互设计,做个了面对入门者等级的PPT,和各位简单聊了聊.发到微博上,也敦促自己对交互设计从业经历做个简单总结.--类似的文章,貌似自己在三年前也写过-- 一.什么是交互设计 要谈什么是交互设计,先要了解这几个概念. 网页设计年代,大概是从2004年开始热起来了,等到我毕业的2006年,满大街都已经是电脑培训机构,记得当时北大青鸟的百日千才培训就在我每日下班必

聊聊交互设计师与开发沟通的技巧

 开发沟通的技巧-语聊聊骚技巧"> 一个项目或版本开发过程中,交互设计师50%的时间在沟通,40%的时间在思考,10%的时间在写文档.当然,只是个大概值,不同的工作流程下可能略有不同.由此可见,沟通对交互设计师来说,是一项很重要的技能.前期与产品经理.视觉的沟通,后期与开发.测试的沟通,每个环节都很重要且都会关乎到产品上线后的体验.但今天只总结我(交互设计师)与开发的沟通技巧,与君共勉. 首先,多学善问 毕业刚入行的时候,接到的第一个任务是:优化语音查找异常处理流程.对于计算机一窍不通的自

电视平台下的四向键交互原则

一.划分区块 "四向"键(含确认键)与鼠标不同,它的特点是按照焦点顺序移动.所以当含有大量的内容时,需要划分成一个一个的区块,以便于进行快速定位. 在选中某一区块后,再对具体内容进行操作. 二.十字结构呈现 在很多情况下,需要将内容按照不同的功能进行归类,划分为不同的"功能区块".当功能区块含有大量内容时,使用十字结构能够保证用户在任何情况下都能够快速的在功能区块间切换. 标准十字结构: 变种十字结构: 在只有两个模块(或两级内容)时,可以考虑将标准十字结构变形.与

聊聊交互设计新人的核心竞争力

  竞争力一:业务驱动力 最开始,我总在想业务是比较窄的,比如我做电商,以后就只能在电商领域,以业务为导向的竞争力会不会不具有普适性,只能在一个公司一个业务线上具备竞争力?但现在想来,这种观点可能是错误的,交互设计的最终目标是解决复杂问题的能力,这种能力会通过业务得到增长,并且具备绝对的普适性. 除非做的是设计研究,不然优秀的设计最终还是要落实到业务上.在公司的核心竞争力之一,就是对业务的了解.理解和驱动能力.刚入职的新人往往会从小需求入手,一方面是为了了解团队的工作规范,另一方面也是从小处着眼

交互设计那些事儿(二)

<http://www.3lian.com/edu/2011/10-09/11463.htmlwww.3lian.com/edu/2011/10-09/11463.html>之一完工后,承蒙各位抬爱,在微博时代被大量转发和分享,也让我收到一些邮件,询问我下篇为何还不出来?请原谅我的惰性,每个周末都给自己找了不少借口一拖再拖,上个周末又在家里养了两天的病--在此提醒朋友们,换季季节,多喝水,多休息,少生病哈. 一.理论前提 1. 人机交互与人类信息处理机制理论 既然产品设计出来不是给设计师用的,

新美剧《暴君》能接住高规格宣传吗?聊聊背后那点事儿

作为一名美剧迷而言,视频网站引进好剧绝对是值得点赞的事情,近来美剧<暴君>正被腾讯视频高规格推广.一部全新剧集,被腾讯视频拔高到"现象级"的程度来宣传推广,投入了大量资源,仔细观察这部剧,会十分有趣,下面展开讨论下围绕这部剧发生的一些事儿.评判标准先看看7月1日腾讯视频对外发布的<暴君>消息--"摧古拉朽之势秒杀了此前的热播剧<纸牌屋>",顿时对<暴君>肃然起敬,这么牛?!腾讯视频用了大量数据,来"秒杀&qu

聊聊数据权限哪些事儿

序 一般来说,权限有许多种,我们经常用到的一般有操作权限和数据权限两种. 所谓操作权限就是有或者没有做某种操作的权限,具体表现形式就是你看不到某个菜单或按钮,当然也有的是把菜单或按钮灰掉的形式.实际上它的实现机制比表面上看到的要复杂得多,比如:我们从浏览器访问过一个地址之后,实际上这个URL就会在历史中存在,这时就会存在一种可能,有的人虽然没有权限,但是他知道怎么访问的URL,如果他再有一定的技术基础,那么通过猜测,有时候就可以得到真正的操作的URL,这个时候如果操作权限限制做得不到位,那么他就