交互设计的六条建议

用户头像
宁波/设计爱好者/10年前/7725浏览
交互设计的六条建议

这篇文章提了几条交互设计应该了解的基本原则和设计实践方法,其中有涉及Poka-Yoke(防误措施)原则、Fitts' Law、Hick’s Law 、人类短时记忆这几个方面,如果有兴趣的可以自行去查询相关资料。


写在前面


最近一直挺忙的,之前信誓旦旦的至少要每月出一篇翻译也不了了之。

这两天因为工作上的事情在看很多交互和用户体验的文章,自己看完后又翻了给同事看,想想要不放上来大家众乐乐好了。

不是什么很新的文章,说不定网上也有很多译本了,不过我一直都是觉得好记性不如烂笔头,翻译的过程也是理解和学习的过程,所以尽量都看原文。

一直觉得做设计的交流和分享很重要,既然现在我还不是能够可以分享经验的水准,那么翻译文章学习别人分享出来的东西就很重要了,共勉之。


以下是正文,原文链接在标题下方有链接,保护版权,thx~



交互设计基本原则

交互设计聚焦的是根据用户行为设计契合的界面,因此理解用户如何与科技沟通交流就显得尤为重要。这样你也就能预测用户会如何与系统交互,提前发现问题并解决它,然后创造出新的交互模式。

交互设计的六条建议

在设计交互界面时请考虑如下几点:


定义用户如何与界面进行交互


当用户直接用手指、鼠标或者电容笔接触界面时,他们可以做什么?

 包括按压按钮,拖拽界面元素等等。


用户可以发出什么指令,来间接地与界面互动?

 有一个“间接操作”的例子:当用户按了 “Ctrl+C”, 那么他们预期的是能够复制一部分内容。



 形式需反射功能


界面样式(颜色、形状、大小等等)隐喻怎样的功能? 

 这些都能帮助用户理解界面应该怎样去操作。


在用户做任何操作之前,你需要提供什么信息才能让他们知道下一步会出现什么? 

 在用户决定做下一步操作时这些隐喻就会告诉用户接下来会发生什么,比如带有标签(说明按钮功能的提示信  息)的按钮,在最终提交前出现的说明性文字等等。



 预测和减少出错


■有没有一些措施来预防错误的发生?

 Poka-Yoke(防误措施)原则认为,设定一些限制能够迫使用户调整自己的行为以便顺利地完成下一步操  作。 


■界面显示的错误信息中是否包含了解决问题的方法和产生问题的原因?

 包含解决方法和具体内容的错误信息才是对用户有帮助的。



④ 考虑系统反馈和响应时间



用户每做一步操作会得到什么样的反馈?

 当用户执行了一个动作,系统需要给出相应的反馈,让用户知道动作已被触发并显示动作当前的执行情况。


动作从触发到产品给出响应,多长时间算合适?

 响应(延迟)可以被分为四个阶段: 即刻(少于0.1秒), 断断续续 (0.1-1 秒), 中断 (1-10 秒), 断开连  接,无响应 (超过10秒).



⑤ 战略地安放界面上的每一个元素


界面上的元素大小是否合理可交互?

费茨定律认为,诸如按钮之类的页面元素,应当设计成能够让用户点击的大小。这一点在设计包含可触控组件的app界面时尤为重要。


是否合理利用边界和边角来放置菜单之类的交互按钮?

 费次定律认为,由于鼠标或手指只能在界面边界范围内部活动,因此边界很适合放置菜单和一些按钮。


是否遵循设计规范?

用户已经认识和适应了一些交互样式,知道某些按钮按下去会出现什么样的反应。所以尽量遵循现有的设计规范(减少用户的学习成本),除非有更好的规范出现。




 易学性


一次出现的信息是否 7(±2)个单元内容组成?

George Miller 发现人类的短时记忆一次最多能记住5-9个单元信息,否则就会遗忘或者记错。


用户界面是否最为精简?

特斯拉的守恒定律认为:系统应当尽可能简单,这样才适合用户使用。而怎样才能称之为精简:余下的组件里缺少任何一部分都没法运作


是否使用了常见的版式? 

席克定律认为,下决定的时间取决于用户对于版式、选项的熟悉程度以及选项数量的多少。



引用

·Designing for Interaction: Creating Innovative Applications and Devices (2nd Edition) by Dan Saffer.

·Information Architecture for the World Wide Web: Designing Large-Scale Web Sites by Peter Morville and Louis Rosenfeld.

·Complete Beginner’s Guide to Interaction Design 

·Introducing Interaction Design 


72
阅读原文
|
举报
|
125
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】旅行icon
【新年UI图标】活动icon
【新年UI图标】秒杀icon
【新年UI图标】会员icon
3D卡通UI界面图标可爱插画免扣素
Security Camera UI kit
UI通用设计素材1
UI界面 组件
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI 登录界面设计模板包
新拟态风格 UI设计组件库
3D渐变流体抽象矢量UI背景图
【新年UI图标】钱包icon
UI应用平面图标
高级表盘系列UI源文件
盲盒APP UI设计
我的钱包-UI界面设计-app
钱包ui模板
【新年UI图标】礼物/活动icon
抽象液态渐变UI背景模版
科技医疗透明柜UI界面设计
新能源APP应用UIKit
拟物风质感写实UI卡片合集源文件
你可能喜欢
大家都在看
登录注册