移动交互设计那些值得你学习的原理

标签: 交互视觉 移动交互 设计之下 | 发表时间:2014-04-15 09:42 | 作者:漓江
出处:http://www.woshipm.com

买了本《设计之下》,是搜狐UED团队写的书,挺好的。今天又拿来体会了下,顺便摘抄点下来,算是读书笔记,感谢搜狐新闻客户端UED团队。

2012010602025533796575

一、解析需求

1、交互设计的五要素

人、动作(情感、典型、策略、用户研究、流程、动机)、环境、工具、目的

创起来的流程是这样子的,人,通过工具,完成动作,达到目的,在环境里。

2、解析需求的过程可以获得以下两点东西:

第一点、理清项目所设计的框架问题,以及没一个功能之间的内在联系,为之后的原型设计奠定坚实的基础;

第二点、通过分析项目所服务的用户、平台(包括硬件特性、交互方式和竞品等多方面)、使用环境和目标等,明确每一处设计的评估标准。

二、原型设计分为三阶段

概念设计、低保真原型和高保真原型。概念设计用来传达内容,是最初的解决方案;低保真原型可以具体到信息的布局和传递,从框架细化到内容;高保真原型则基本可以达到产品上线后的效果,此时交互设计师需要对每一个细节负责。

三、交互设计

<一>如何让操作流程简洁?

1、使用自然思维而不是程序思维。

做交互时应该遵循用户的认知,并且结合生活实际情况来设计,不能用程序固话的逻辑思维来定义交互行为。

2、围绕用户的目的和行为来设计。

用户看到产品的第一个想法是“我能用它来做什么?”,着手设计之前要理解用户的目的和行为,他们想要做什么,先做什么再做什么,是否会再同一时间去做不同的事情,抱着不同的目的和心态,适合的操作流程可能会有很大的差异。

3、少点一次就更方便了吗?

只要是有意义的点击,都不会多于,交互设计师不能只管减少了操作步骤,应该在减少步骤的同时减低用户的认真和使用障碍,操作步骤是根据任务来设定的,不是越少越好。

4、将常用的功能提前。

5、不妨遵循用户已经成型的用户习惯。

<二>反馈的形式

1、气泡状提示

通常出现在画面上过一会儿后就自动消失,用于告知任务栏状态和操作结果。由于气泡的特性,它容易被用户忽略,所以并不适合承载太多的文字和重要信息。

2、弹出框

一般会承载两个操作按钮,有时候会强迫用户操作并屏蔽背景的所有内容,对用户有打扰最大的一种提示效果。用户通常会想马上关掉,所以弹出框上的文字最好简洁,能够帮用户快速做出决策。

避免滥用,如果不是太重要的反馈,就用气泡提示用户就行,避免吓到用户。

3、按钮/图标/链接的按下状态

这类反馈是基于人在现实世界中的经验来的,也是手机最常见的一种反馈。

4、声音

能在一定程度上给用户反馈,不过有时候会打扰到用户,有时候又因为环境外因而导致听不见,因此不能将声音作为主要反馈,而且要你管给用户能够关掉提示音的权利。

5、震动

是比较强的触觉反馈,可以用来代替或者加强声音提示。在有些游戏中主角死亡时手机会震动,这种提示有些惊悚,所以最好不要乱用。

6、动画

能给用户提供有意义的反馈,帮助用户直观的了解到操作的结果。并且好的动画能给用户留下好的印象,提升愉悦感,甚至成为吸引用户的一个因素。

在某些比较久的操作里,用户动画来提示操作的进度,可减少用户的焦虑。

<三>反馈出现的位置

1、状态栏

此位置不是很显眼,建议显示不重要的或者跨画面的提示。

2、导航栏

一般是连接状态的展示,临时将导航栏的内容代替为连接状态,表示当前产品正在努力连接网络拉去数据中,这个位置适合现实临时的较为重要的提示类信息。

3、内容区域上方

通常为下拉刷新,是加载新内容的一种快捷方式,默认的提示信息是隐藏的,向下拉才现实对应的提示信息,以引导用户进行操作。

4、屏幕中心

反馈消息在屏幕中心,通常为整体的、比较重要的提示信息。需要引起用户的重视的、系统的提示均可以显示在此位置。

5、菜单栏上方

这个位置没有限制,可根据需要灵活使用,可以是应用的整体信息的提示,也可以是与界面底部内容相关的提示。

6、底部

在次位置提示并没有特别的好处,或许是对于新形势的一种追求。现在越来越多的应用将弹出框放在此位置,因为弹出框本来就会屏蔽画面,所以覆盖在菜单栏刚好符合弹出框的交互特性。

总结:反馈的设计原则

为用户在各个阶段提供必要的、积极的、及时的反馈;

避免过度反馈,以免给用户带来不必要的打扰;

能够及时看到效果的、简单的操作可以省略反馈提示效果;

所提供的反馈要能让用户最便捷的方式完成选择;

为不同类型的反馈做差异化设计;

不要打断用户的意识流,避免遮挡用户可能会去查看或者操作的对象。

<三>动画的重要引导作用

1、引导作用和提示作用

页面层级结构引导、手势操作引导、状态提示、隐藏功能提示、吸引注意力

2、反馈作用

边界反馈、过程反馈、结果反馈

<四>考虑各种特俗的情况

无网络、空白页面、超量的内容显示、失败、加载中、重复操作、输入错误、分辨率影响

(以上内容书书籍的交互设计部分,视觉部分的我没摘抄,都是实战型的内容,建议去买书过来具体看。)

本文系 芒果道长 授权发布,转载请注明来源于人人都是产品经理并保留本文链接


微信号:woshipm,干货天天推荐,欢迎关注

相关 [移动 交互设计 值得] 推荐:

移动交互设计那些值得你学习的原理

- - 人人都是产品经理
买了本《设计之下》,是搜狐UED团队写的书,挺好的. 今天又拿来体会了下,顺便摘抄点下来,算是读书笔记,感谢搜狐新闻客户端UED团队. 人、动作(情感、典型、策略、用户研究、流程、动机)、环境、工具、目的. 创起来的流程是这样子的,人,通过工具,完成动作,达到目的,在环境里. 2、解析需求的过程可以获得以下两点东西:.

移动端交互设计的信息组织

- - 用户体验与交互设计
对于我们中很多人来说,移动端设计是一个崭新的机会. 但是,如果你过去是桌面端的网页设计师,如何将经验转换到移动网页端呢. 当然,已有的一些工具,经验,技能仍然适用,只需开始思考下如何在手机上进行组织和布局. 当你开始组织移动端界面的内容和操作时,一些可靠的信息架构准则:比如,清晰的标签(labeling),平衡的宽度和深度,妥当合理的心智模型,这些仍旧十分重要.

2012年移动应用交互设计趋势

- - 曉生語錄
2011年涌现出诸多优秀设计,随着操作系统的更新和硬件性能的提升,交互设计又被提升到一个新的高度. 不再是将内容从互联网搬至移动设备,而是解决设备本身的问题,根据用户需求从操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性,为用户带来新颖的交互体验. 本文汇总今年热门产品的界面案例,希望能从中总结出未来一年需要重点关注的设计趋势.

移动设备的简单交互设计

- - Tech2IPO
用户访问移动站点不仅消费内容,还会完成某些任务. 就拿坐飞机来说吧:用户在航空公司的移动站点中经常要完成航班状况查询,登机手续办理、搜索并订票等任务. 移动用户界面(UI)的设计是如何帮助用户完成任务的呢. 移动站点传达和展现交互的最佳方式又是什么呢. 为了找出在移动设备上设计简单交互的最佳方法,我对航班状况查询的任务做了些调查.

2014年移动应用交互设计10大趋势

- - 百度MUX
在移动互联网飞速发展的这几年,每年都会有一些新鲜的设计趋势涌现出来. 2014年,又有哪些新的设计趋势脱颖而出呢. 百度MUX有一群关注趋势的小伙伴,从大量的APP中去发现设计范式,挖掘设计趋势,预测出2014年在移动产品中会被广泛应用的十大交互设计趋势. 希望这些新颖的设计模式,为设计师们带来创新设计灵感,进而为用户带来新鲜有趣的体验.

20130320早读课:三大移动平台上的交互设计差异

- - 互联网er的早读课,专注产品、用研、交互
推荐理由:iOS,Android,WindowsPhone可以说是目前移动互联网上最主流的三个平台,在文中,作者@ 可风f 从布局形式、导航逻辑、应用间联系、多任务、分辨率、设计风格等几个角度比较了三者之间的差异,需要我们在多平台设计时注意. 之前早读课也曾分享过 @MoonMonster 的一篇文章,但没有WindowsPhone平台的信息,欢迎延伸阅读→.

交互设计-简单

- DayuLu - 腾讯CDC
  交互设计是近几年流行的一个词语. 现在市场上有许多资料来介绍什么是交互设计,如何做交互设计等. 从场景,任务,用户,操作等分析. 但由于受实际情况的限制,往往不能很深入. 所以笔者结合实际工作体验与大家分享下,具体做设计时候是怎么考虑的. 如果要说什么是一个好的交互设计,个人浅见就是简单. 本文以下内容都是围绕简单2字进行展开.

交互设计初体验

- - 微博UDC
9月初,我来到新浪微博UDC部门交互设计岗位实习. 在接近四个月的学习时间里,我对交互设计行业有了深一步的了解,认识到了交互设计师的一些具体职责. 鉴于之前接受的知识大多来自书本或网络上的文章,在校期间参与项目的机会并不多,因此,我对此次实习做了一些总结:一方面,希望鞭策自己,在以后的工作中有所进步;另一方面,也希望能帮助刚步入交互设计行业的同学更快的适应工作,更好地学习交互设计.

交互设计入门–了解交互设计

- - 互联网的那点事...
为什么会有交互设计,交互设计能够做什么?. ▎1.成功的互联网产品具备哪些要素. ①当你的Boss需要做个产品时,它首先必须是可实现的,这也是为什么核心程序员架构师的待遇普遍较高的原因,因为他们是生产力. 那么成功的产品首先要具备– 可实现模型. ”当然不是,产品的终极目标是盈利,你的领导也只关心这个.