交互设计五层模型

网上有很多文章,也有很多书,都在讲五层模型。这五层模型是交互的基础,是怎么来的?目的是什么?要输出什么文档证明经过了五层的思考分析呢?

五层模型包括战略层、范围层、结构层、框架层、表现层。是从概念到成品,抽象到具体的过程。美其名曰科学的产品开发流程。

每个层级里有每个层级要实现的目标,也就是任务导向,跟玩游戏一样,这个层级通关了就开始下一个层级,配上图,自己看~

Jesse James Garrett的《用户体验要素:以用户为中心的产品设计》

弄明白五层的定义和逻辑之后就开始逐步的讲解啦~敲黑板,注意注意。主要讲每个层级要实现的目标以及可以通过什么方法来实现。从逻辑上来讲,完成一个事情可以拆分为目标,方法和输出。用户的目标是什么,为了这个目标采取了什么样的方法论(方式,行为),得到了什么样的结果(产出物,输出物),这个结果是否可行(可用性)。

一、战略层:全局与定位 

1.目标:企业需求和用户需求

企业需求包括公司需要什么,规模?品牌?盈利?比如通过满足用户的需求来盈利。淘宝满足用户的网上购物需求,同时也有广告和商家的拥金。百度提供搜索服务的同时也可以通过关键词和推送来盈利。

用户需求包括用户需要什么?给用户提供什么样的服务?比如滴滴便捷共享的出行服务,乘客出行更方便快捷,司机获得利润,平台获得佣金。

2.方法:市场分析和用户研究

市场分析会用到常用商业画布,SWTO四象限,竞品分析;而用户研究会用到用户访谈,用户画像,同理心图,卡片分类。这些都是方法论,这里就不细说了。

3.输出:用户需求白皮书和竞品分析报告

用户需求白皮书包括数据需求,功能需求,业务需求,品牌需求,技术需求。竞品分析要寻找有标志性的产品,比如教育有K12,有成人教育,还有早教等。竞品分析包括交互分析和视觉分析,各自的优劣性等。


二、范围层:功能范围和需求优先级

1.目标:功能列表和优先级 

先建立业务模型(BO模型),是B to C,B to B, 还是C to C。梳理清用户,公司之间的关系。比如淘宝BO模型包括消费者,平台和商家,商家发布商品,消费者下单购买,平台提供信息阅览和信誉。所以需要发布、评价、推荐、购物车、支付等等功能

2.方法:列举功能和优先排序

怎样列举功能呢?通过用户建模,进行用户分类,比如苹果是5,香蕉是7;大白菜是10,胡萝卜是12。设定相差小于等于2的是一类。包括首要用户、次要用户、补充用户、负面用户。比如blibli上有二次元的、学习的、玩游戏的~明星有颜粉、路人粉、女友粉等。

优先排序根据场景来,KANO模型排列出重要且紧急的,紧急但不重要,重要但不紧急,不紧急也不重要的。KANO模型就不细说了。

3.输出:功能文档和需求里程碑

就是平时干活要看的文档和交付时间,人员分配。


三、结构层:信息结构和交互方式

1.目标:建立信息结构图(IA)和交互模式图(DPL

信息结构就是分类和内容,比如网页的分类导航,网页上的文字。有种工具叫业务字段表,列出了字符串的值和变化的范围。

DPL包括视觉库和交互库,比如对于手机,交互是输入,输入人的指令;视觉是输出,告诉人现在的状态。交互方式包括点击、长按、上下滑动、拖动、手势等,也就是动作+状态,采取了一个行动,这个行动导致了界面的一个状态,比如按钮的状态有未点击,正在点击,已点击,不可用,此外还有沉浸式和下载中的状态。

2.方法:卡片分类法,用户体验地图,原型设计

卡片分类法包括封闭,开放,和半开放。开放型的是用户可以自主地对卡片进行分类,区别于封闭型的分类

用户体验地图是场景的连续,一个APP下载,注册登录,浏览使用,会员,直到厌恶离开不再使用。也可以说是流程图当中着每个阶段的体验。

3.输出:信息结构图,低保真原型


四、框架层:导航,模式,组件

1.目标:导航,模式,组件

卡片分类决定了导航,比如阅读的APP里有小说,杂志,和成功学。模式指的是要解决的问题,也就是任务,比如文章列表页,表单页,登录注册页,发送邮件页,上传图片页,拍照页,扫二维码页等等。固定的功能解决固定的问题。

2.方法

主要是确定页面和每个页面里的功能,画高保真原型

3.输出:线框图,原型图,高保真原型


五、表现层:版式,颜色,运动

到这里视觉规范和交互规范要确定,让设计师们效果图的风格保持一致。交互动画,颜色,字体,极限场景里的界面展示(无网络、加载中、加载失败、无内容)。就是界面展示的视觉设计部分,也就是传统的设计学要派上用场了。


总结:

战略层通过市场分析和用户研究得到需求白皮书;范围层通过列举功能和功能排序得到需求优先级;结构层通过卡片分类和用户体验地图得到信息结构图;框架层根据行业规范绘制高保真原型;最后到表现层的视觉设计。理论是理论,实际是实际,工作当中往往有诸多不同。比如敏捷设计(design sprint),这又是另外一种方式了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容