兰亭妙微工作法:交互设计到底是怎么做的?

经常有人问兰亭妙微的设计师:"你们做交互设计,每天到底在干什么?是画原型吗?"

画原型只是最终的输出手段。交互设计的真正价值,在于把一个模糊的业务需求,一步步转化为用户可以顺畅操作的界面。这个过程有清晰的方法论,不是凭感觉画出来的。

image.png

先搞清楚:什么是交互?

交互设计的经典定义是:通过产品的媒介作用,来创造和支持人的行为。 这句话的重点在 "人的行为",而不是 "界面"。很多人把注意力放在界面好不好看上,却忽略了用户到底要完成什么行为。

一个完整的交互回合,由 "动作" 和 "反馈" 构成 —— 用户做了一个操作,系统给出一个响应,这才叫一次交互。而任何一个有意识的动作,都包含五个基本要素:

  • 人:谁在操作?
  • 目的:他想达成什么?
  • 场景:在什么时间、什么环境下操作?
  • 工具 / 媒介:用什么产品、什么功能来完成?
  • 动作:具体做了什么操作?

举个例子:上班族小明(人),每天晚上睡前(场景),想知道朋友们今天发生了什么(目的),打开微信朋友圈(工具),翻看动态并点赞(动作)。把这五个要素想清楚,设计才有依据。兰亭妙微在项目启动时,第一件事就是把目标用户的典型行为用五要素拆解一遍,而不是急着画界面。

image.png

交互设计的两个核心阶段

兰亭妙微把交互设计的工作流程归纳为两个核心阶段,从抽象到具体,层层推进。

第一阶段:业务模型框架化。

这个阶段也叫 "框架设计",核心是基于用户目标做导航和流程设计。产品有哪些功能模块?模块之间是什么关系?用户完成一个核心任务需要经过哪些步骤?这些问题不解决,界面画得再漂亮也是空中楼阁。

这个阶段的产出物主要是三样:功能结构图(产品有哪些模块、怎么分层)、流程图(用户完成任务的路径和分支)、低保真线框图(页面的大致布局和结构,不涉及视觉细节)。兰亭妙微非常重视这个阶段,因为框架一旦定错,后面所有的界面设计都要推倒重来。

第二阶段:框架模型界面化。

框架定了之后,就进入具体的界面设计。这个阶段关注的是:页面上有哪些元素?元素之间的主次关系怎么处理?怎么引导用户完成操作?按钮放哪、提示怎么写、错误怎么反馈 —— 这些都是这个阶段要解决的问题。

简单说,第一阶段回答 "产品有什么、用户怎么走",第二阶段回答 "每个页面长什么样、用户怎么操作"。

交互设计的五步工作法

在具体执行中,兰亭妙微遵循一套五步工作法,从需求到界面一步步推导:

第一步:从需求目标出发,设计流程和任务,并排定优先级。 不是所有功能都同等重要。核心任务要优先保证顺畅,次要任务可以适当简化或后置。

第二步:根据流程和任务,明确需要给用户提供哪些信息,然后分门别类地组织起来。 用户在每个步骤需要知道什么?哪些信息是必须的,哪些是辅助的?信息组织得好,用户就不用到处找。

第三步:通过信息结构的组织和任务引导,产出一系列关联的界面草图。 这一步还是手绘或低保真阶段,重点是把页面之间的流转关系理清楚,不纠结细节。

第四步:选择信息呈现的框架(用什么组件),以导航的形式搭出布局。 列表还是卡片?标签页还是折叠面板?底部导航还是侧边导航?组件和布局的选择,决定了用户能不能快速找到想要的信息。

第五步:在界面上通过引导帮助用户快速完成任务,同时考虑怎么让操作更轻松、更愉悦、更高效。 这一步打磨细节:默认值怎么设?错误提示怎么写?动效用在哪?

这五步的核心可以浓缩成两句话:对于复杂的任务,尽量简化操作;对于信息量过大的页面,想办法让重点突出、一目了然。

写在最后

交互设计的本质,是在 "用户想要达成的目的" 和 "产品提供的功能" 之间架一座桥。流程和功能解决的是 "用户能不能达成目的",信息和内容解决的是 "系统有没有引导用户完成任务"。

兰亭妙微始终认为,交互设计师的核心价值不是画了多少张原型,而是有没有真正解决问题。让产品更易用、更好用,帮助用户更快地获取信息、更顺畅地完成任务 —— 这才是交互设计的终极目标。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档