怎样合理设计产品交互框架,这里有6个细分步骤

这六点无论是对产品新人还是有经验的PD都是很重要的,按照整个流程可以避免很多问题,也会让我们的工作变得有节奏,而不至于丢三落四,确实对产品的把握。


这六点无论是对产品新人还是有经验的PD都是很重要的,按照整个流程可以避免很多问题,也会让我们的工作变得有节奏,而不至于丢三落四,确实对产品的把握。

怎样合理设计产品交互框架,这里有6个细分步骤

这个问题有很多种答案,在我所有项目中,交互框架的确定是非常重要,非常费时费力的,但是实际中又很容易被忽略,被轻视,入行的新人特别容易陷入到细节自我陶醉,而忘记产品的宏观建设。

这是很危险的。

回答这个问题我们首先谈一谈最熟悉的三个文档——MRD、BRD、PRD。三者可以完整的概括一个产品从想法到雏形的历程,每个人对三个文档都不陌生,但是写得好又是另外一回事了。产品的交互框架就在这三个文档中,但是却不够独立和尊重,往往被忽略和轻视,无法将骨头从肉里清晰的剔除出来,总是零零散散。

三个文档比较抽象,一般人驾驭不了,也就更无法剔出骨头了。我今天介绍一个新的方法流程,这样的流程才是做产品本质的精髓,而三个文档只是漂浮在这个精髓上面的肥油罢了,不会写也没关系。

一个产品从一个灵感到真正可操作使用的实体,需要经过的流程很多,我们今天只谈到产品设计环节的细分步骤。

1. 定义形式要素、姿态和输入方法

形式要素指:web、移动端、pc端、ipad、智能硬件产品等;公共场所还是私人领域、光线充足还是比较暗、小巧轻便还是功能为先。这些产品的使用环境要素需要我们结合人物模型和使用场景提炼出来。

姿态是指用户在和产品交互时,付出多大的精力和时间,以及用户的姿势等信息,例如PC端一般放在桌子上,用户坐在椅子上比较常见,也会放在腿上,坐在沙发上。姿态决定了用户对产品的定位和喜好,为我们对产品的使用场景提供参考依据。

2. 定义功能性和数据元素

很好理解,功能性是用户希望通过某产品获得什么样的服务,转化成我们得设计语言就是功能。功能是一个抽象的概念,它以功能元素为载体而真实存在。功能元素包括数据元素操作工具、数据视觉和结构化管理方式(交互设计精髓4-100),例如,我们在设计产品时,用户可以点击某个按钮删除某条信息,可以点击某个空间切换页面布局。

数据元素更方便理解一些,就是我们需要在产品中呈现给用户的具体信息,包括文本、图片等所有可见的独立数据。难点在于,我们需要在设计产品时为数据分类,将实现模型中的数据元素转化为用户日常界面的表现语言来描述,并根据数据间的优先等级决定是否展示(一定要考虑数据之间的关系)。注意:数据元素的集合也就构成了技术开发中的搭建数据库,需要对数据自上而下进行拆分,能够整合而不至于散乱。

3. 确定功能组和层级

经过之前的功能性和数据元素的系统整理,我们需要将这些根据需求定义出来的功能和数据进行分类分组,以便梳理产品的架构,由微观到宏观。简单点讲就是讲产品的所有数据和功能打包分组,划分到每个一级板块,对产品的基本架构尤其更清晰的认知。这一步骤需要注意不同功能和数据的对接,数据和功能横向上的层次比较。

一个产品有很多功能,按照重要性可以分为核心功能、次要功能、辅助功能、补充功能。那么不同的功能也具备不同的层级和属性,将同类别的功能打包在同一个功能组,并按照重要性和产品场景划分层级,哪些放在首页,哪些显示,哪些隐藏,功能之间的逻辑顺序;一般情况下,功能是否属于同类别是根据数据是否相关来决定的。

4. 勾画交互框架

经过对功能和数据的分组,我们可以大体在心里对产品的架构样式有了感性的认识,那么勾画简图是很快的。我们在这里需要注意的是,将所需要组合的功能组合层级,通过块状的元素描画出来,不要做过多修饰,简图更多承担着初审的任务,付出过多的细节工作影响了对框架的理解,也会由于过早牵涉细节缺乏产品的统一性。

在这一板块,我们更多地需要尝试,这种尝试必须尊重交互原则和模式,并且是经过验证或者有根据的,而不是随心所欲,那样会使得产品脱离现实,变得迷茫或者低劣。多绘制几个方案,比对优劣,选取,然后定稿。只有对所有的框架都进行了反复修改后,产品的交互框架才算基本定型——不要妄图一次成稿,不修改。

5. 构建关键线路情景剧本

我们首先定义一下什么是关键路线——结合使用场景,针对每个功能理想状态下的路径,这种路径一定具备高频、精魄、重要三个标志属性。那么接下来我们讲一下关键路线的使用方法和作用

关键路线就是,结合人物模型+场景+数据和功能元素,以任务为依托,使得最初设定的人物模型和交互架构产生充分、反复、频繁的接触,并最终通过磨合,发现不合理的设计,并对产品的架构产生更加深刻清晰的认知。对关键路线图的使用越频繁,越能够对产品的细节问题进行深刻考量。这和我们在可用性测试中提到的任务走查很像,只是后者更侧重对产品测试,而我们是在架构完善过程中对该方法的运用。

6. 通过验证性的场景来检查设计

既然是验证性的场景,那么这里提到的场景一般都是针对当前设计中遗漏、丢弃、新增和次要的场景,由于设计过程的不完美性,因此我们必须对已经完成的架构采用这场验证性场景进行回归检测。

1)替代场景

替代场景是人物模型决策过程中,关键节点的可替代选择,包括例外情形、不常使用的工具和试图和次要人物模型的部分用例以及变体。

2)必须使用的场景

有些场景是必须使用的,而它出现的频次和场景又很不普通,例如恢复出厂设置,清空数据,这些都是周期很长,频次很低的操作,但又是针对这一类需求必然进行的场景步骤。因此,设计中经常遗漏。

3)边缘情形场景

这里提到的就是异常情况处理。我之前在一片文章中提到将产品设计在功能上分为正常功能和异常处理。那么这里就是提到的异常处理。异常处理也成为边缘情形场景,例如,打电话突然断电,聊天突然断网,打字手机没有收录该字。这类场景不是设计的主要场景,也不应该付出极大的精力,但是由于涉及到系统稳定性和产品的可用性,一般在开发过程中经常出现,我们需要对这类情形进行统计汇总,并和开发对接,避免开发中BUG的频次,也满足用户的异常需求。

关于交互设计框架,就讲这些;这六点也来自交互设计精髓4(106),结合了我自己的理解。这六点无论是对产品新人还是有经验的PD都是很重要的,按照整个流程可以避免很多问题,也会让我们的工作变得有节奏,而不至于丢三落四,确实对产品的把握。

 

本文由 @白三 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27750/

(0)
CatherineCatherine
上一篇 2017-05-18 21:51
下一篇 2017-05-18 23:45

相关推荐

  • 互联网产品经理常用工具有哪些?

    互联网产品经理的工作是复杂和多样的,PM们通常要负责产品各方面的事务,因此工作中需要用到的工具有很多,现在就跟这笔者一起来看看互联网产品经理常用工具有哪些,想走产品经理路线的同学可以提前了解一下。一、产品经理的主要工作"工欲善其事,必先利其器!"既然是"善其事",关键就是搞明白产品经理相关的工作内容,针对工作合理有效的利用软件,才能达到事半功倍的效果。要说到产品经理的职能,这是另开新篇的话题,这里我们先通俗概括一下PM的主要活动:1、参...

    2018-03-13
  • 从周星驰的电影出发,浅谈用户体验的四个特点

    周星驰电影很受大众欢迎,而且具有很强的生命力却是一个不争的事实。而大众欢迎,生命力强正是我们在用户体验所追寻的目标。只有用户知道你核心性能和速度直接超越暴风影音,差异化才出得来。
    ——马化腾

    2017-05-03
  • 专业的网页风格指南应该如何制作?

    文案规范
    视觉指南

    配色方案,包括每种色彩的具体参数,以及其他可接受的色调
    字体和排版方案,包括每个部分的字体类型、尺寸、字重以及具体用法
    LOGO,包括它的样式、变体、尺寸以及位置的说明
    拼写、关键词的选择、文案的风格(包括按钮、社交媒体等)
    图片使用规范,包括色彩、裁剪规则和视觉表现方面的标准
    SEO信息,比如可选的标签和关键词
    栅格标准(主要用作网页排版和印刷)
    空间与留白方面的说明(设计的松紧度等)
    关键点的说明(团队成员可能会提出的问题或者有待澄清的点)

    在内容表述上不要限制太多,这毕竟是风格指南,重点是视觉上的引导,设计是核心;
    将相关、相联的条目整合到一起做快速指引:一个页面介绍色彩,在另外一个页面做排版的规范等等;
    用图片案例来展示界面应有的外观,而不要单纯用枯燥的文字来做介绍;
    提供可用的具体说明。比如配色方案中提供色彩的RGB或者CMYK的具体值,确保色彩的运用能够一致;
    将一部分的设计案例分解说明,确保每个元素的功能和使用规则都足够明晰;

    2017-05-22
  • 汽车仪表盘信息系统设计:偏重的是视觉设计而不是交互设计

    从交互设计的角度来看待汽车仪表盘信息系统设计,文中所用的交互设计观点是来自他人的各种总结。

    2017-05-11
  • 用好的交互设计来管理复杂-“Tab”

    标签可能看起来像一个微小、乏味的图形用户界面设计,但我们合理的运用Tab的特点,易用易理解,就能为你的用户体验加分。

    2017-05-18
  • 设计神器Figma出马!Sketch、PS有些慌了,因为...

    这年头真的是“长江后浪推前浪,一浪更比一浪强”,许多新产品、新工具纷纷冒出头来,就拿我们设计师的设计工具来说吧,Photoshop 算是一名老将了,它也是我们走上设计不归路的第一个敲门砖(当然还有 CDR);被 PS 折磨的要死要活的时候 Sketch 和 Affinity 杀了出来,一个是专攻用户界面的矢量设计,另一个则像是加强版的 PS 和 AI;Sketch 和 Affinity 还没用熟又冒出个 Figma:说出来你可能不相信,...

    2018-04-17
  • 全新的交互体验 | 三星Bixby中文版首发体验视频

    在三星盖乐世 S8 | S8+发布之时,三星还发布了全新语音助手“Bixby”,但中文适配需要时间所以让国内的星粉久等了!为了可以让国内小伙伴快速上手,饼饼特地做了 Bixby中文版体验视频,快速了解 Bixby来这里看就对了!三星Bixby不同于一般的语音助手,在满足一般功能操作的同时还可以进行更深度操作,比如发微博、微信发红包、打开相机自动拍照以及导航等;有关更多Bixby的深度功能,我们期待与大家共同挖掘!点击下方“阅读原文”,了...

    2018-01-30
  • apple watch 中文手册:开始

    重要 本文档是开发过程中使用的API或者技术的初步文档。苹果提供该文档以便于开发者使用苹果产品上使用技术和编程接口。后期该文档中信息会有所变动,所以依据本文档开发的软件应当使用最终的操作系统软件进行测试…

    2015-06-15
  • 短期记忆与用户体验:为脑力的局限而设计

    人类大脑不适于抽象思考和记忆数据,但网站常常要求我们这么做。许多可用性指南都取决于认知局限。

    2017-04-27
  • 回顾交互设计的过去,并展望其未来

    你好,这是2017年的第13篇文章。除了电脑和手机,越来越多承载了新交互形式的产品涌现。语音、体感等更加自然的交互方式会不会成为主流?未来的产品形态和交互方式会走向何方?当NUI(自然用户界面)代替GUI时交互设计师和视觉设计师该何去何从?人机交互的未来在哪?这些问题都值得我们去思考……

    2017-05-04