HI,下午好,新媒云不收取任何费用,公益非盈利机构
24小时服务热线: 4000-162-302
请扫码咨询

新媒易动态

NEWS CENTER

详解影响交互设计的两大要素

2020-03-08

  1. 夏天拿着海尔空调遥控正向对着空调按下黄色按钮,空调就会启动吹风降温,躺在沙发凉风吹在脸上很惬意、舒服;
  2. 晚上驾驶的宝马汽车夜视仪检测到行人时,提示驾驶员注意避让,仿佛车子在告诉我前面有人快减速;
  3. 手指在苹果电脑触控板上滑动,显示屏上的箭头会跟随,电脑会乖乖的听从我的指令;
  4. 微信APP打开扫一扫商户二维码,我们银行卡或微信内钱会转到商户手中,此时商户喇叭响起“微信到账…”;

百科定义:

交互是一门研究系统与用户之间的交互关系的学问。系统可以是各种各样的机器,也可以是计算机化的系统和软件。人机交互界面通常是指用户可见的部分。用户通过人机交互界面与系统交流,并进行操作。小如收音机的播放按键,大至飞机上的仪表板,或发电厂的控制室。人机交互界面的设计要包含用户对系统的理解(即心智模型),那是为了系统的可用性或者用户友好性。

下面分析交互在整个产品设计中所处的位置,我们只对互联网产品进行分析,参考《用户体验5要素》:

  • 首先,战略层产品经理或需求分析师对需求进行分析和产品定位,得出用户需求和产品目标。
  • 接着,需求转化为范围层的功能和内容。
  • 再次,由交互设计师把这些内容和功能,细分成结构层的信息架构、页面与页面与人之间的互动关系。
  • 然后,绘画出草稿原型,既架构层的导航、界面、信息字段。
  • 最后,视觉设计师完成视觉,包括颜色、图片、字体、图标等视觉风格设计。 

这样,我们就清楚的知道交互设计师负责的是结构层和框架层的工作。


笔者对互联网toC的APP产品交互设计给出的定义:基于用户需求、场景的分析,梳理出信息、导航、界面的架构 和 人与页面之间的交互,并产出最后的原型页面

但笔者实际工作中发现中小型公司(500人以下)产品经理会包揽这部分工作。下面我们详细说下这两大部分工作:

一、信息、导航、界面架构工作

信息架构是交互设计师开始着手做的工作。做这项工作前不得不提产品经理的需求分析及产品定位阶段,只有充分理解产品经理或需求分析师给出的内容,才能进行信息架构>导航>界面原型>其它交互。

通常交互设计师跟着产品经理过需求会。理解用户需求时,一定要找到对应的场景。

举个小例子:电商购物车,就是用户在购买多件商品场景时,有这样核心需求——当用户不需要某个购物车内商品场景时,购物车内商品可以去掉。

怎样交互才能达到这种目的?当用户购物车内商品全不要了场景怎样交互?当用户喜欢购物车某件商品,嫌贵的场景,又怎样交互?在大型电商节日,当购物车内某件商品不参与活动时,购物车结算场景或最后订单怎样提示?等等。

综上所述,交互设计师,既要理解用户需求又要找到对应场景。

当然这些工作大部分还是产品经理或需求分析师去做,并产出目标用户画像、他们的主要需求点、对应场景、以及触达这些需求点的具体流程(俗称业务流程)、其它内容(内容包含功能、主要信息字段)。

但为了产品更好的与用户交互,交互必定要深入理解这些产出文档(俗称MRD、PRD)。

当然,这类文档还有其它一些内容,像行业调研、竞品分析、财务报表、团队规划等,但这些与交互工作没有因果关系。只需要把以上的几点深入理解即可。

再说说产品生命周期中非成长期,成熟期,也就是后期的交互工作。

工作内容都是一样的,大部分是迭代,每次的交互改版,都需要数据做支撑。交互优化是为了达成某项数据目标,通过A/B test进行数据测试。新项目接手时,产品经理用多种需求分析工具,拆解出用户需求给出产品内容,评审过会后,交互设计师对这些功能内容进行拆解归类。

  • 首先,在草稿纸上或xmind上列出所有字段,产出一份思维导图文档,这些字段包含的是功能和用户需要的信息。
  • 接着,对这些信息架构归类。
  • 再接着,进行导航设计。
  • 最后就是界面原型设计了。

例如,在线课堂产品,产品经理给出这样一个架构,里面包含了范围层以上所有架构,在这个架构上,交互设计师先配合产品经理完成粗略的原型图和简单的交互逻辑,这样结构层的工作基本完成。剩下的框架层由导航和界面组成,也可能对内容架构进行细微调整,但需要与产品经理充分沟通协作。

界面设计(原产品经理的粗略原型基础上迭代)视觉设计师也会有较少参与,最后由视觉设计师完成最后的表现层工作。完成后由产品经理统一组织过会审核。

以下,笔者根据需求场景梳理的架构图,为信息架构思维导图和导航设计思维导图。



二、人、页面的交互工作

经常会听到产品经理和视觉设计师说交互是跳转、弹窗等单个影响因素,其实交互不是这些单一的因素。

下面进入正题,以下是笔者做交互设计总结到的工作内容,或者说影响到交互的一些主要因素。

有时候交互设计师和视觉设计师会配合完成其它重要的交互或者视觉,他们之间会穿插一些重复的工作。例如:字号、字体颜色、图片尺寸 质量、图片未加载前预览图规格、非wifi的图片质量、icon的风格及动画效果等。

  1. 页面:引导层、初始状态、跳转、浮层二次确认、新页面、返回刷新原页面;
  2. 表单:注册登录、搜索、日期、复选、其它;
  3. 弹窗:有活动推送、系统反馈、危险提示操作、功能模块;
  4. 空状态:断网、无数据、支付回调错误、其它错误;
  5. 其他状态:在线,离线,忙碌、登录,未登录、其它状态。;
  6. 角色:不同用户角色的权限;

对于同样满足需求的产品,人、页面交互影响着至关重要的用户体验

  • 有的产品从起初的信息功能导航架构都没有分好,不相干的字段或功能混合在一起让用户一头雾水。
  • 有的页面跳转,一会儿左边切换,一会儿从上侧切进来。
  • 有的用户点半天,页面居然没反应。
  • 有的甚至在没有权限的用户进行危险操作时,没有做好及时提醒和阻止,给用户造成巨大损失。

1. 页面

引导层,对于一些迭代后重要的新功能、转移位置的功能、新的内容或者操作,需要引导或说明给新用户。


相关推荐