(本来想结合项目为例,但因为理财产品太具有业务背景要求,所以只写了方法论,比较干。)
面对紧急项目,初级ux往往感到焦虑且无从下手。如果说一天要出一个大项目,可能单一个复杂页面都得思考半天,何况全流程设计输出交互文档?
莫慌,无论大小项目,紧急与否,交互设计的思考点都有“公式”可套。虽然时间有限,还是可以五五分地思考输出,快速高效地给出交付物。
交互设计流程三大步:了解需求——交互思考——画图输出,再紧急的项目,前两步思考都不可省,甚至应该用到50%的时间,边思考边速记边画sketch,思考部分结束了,脑海里有了蓝图,在草稿的基础上才能更从容高效出prototype。(一般交互画图流程:sketch——wireframe——prototype)
一、了解需求
通常pm会带着需求文档或原型来找交互,基于此我们可以大概知道这次需求想做什么,线上已有的是什么;这是从0到1的项目,还是旧功能的更新迭代改版。
有个概览后,我们需要进行需求分析,一般来说以下六个问题需要跟pm明确。
1> 目标用户:用户是谁,整个app用户还是某个什么样的群体
2> 用户目标:解决用户什么问题
3> 产品目标:新增或优化功能为了达成的目的
4> 业务价值:这个需求对业务(公司)有什么价值
5> 业务场景:属于哪个业务节点,前后或相关联业务有哪些
6> 用户场景:用户的典型使用过程是什么(用户任务/用户故事 )
这一步既是让pm自己清晰需求,也便于我们交互设计师在设计的时候有个判断标准和决策依据,哪个方案更符合场景,更匹配需求目标。
这六个问题我都表格化放在我的交互文档.sketch模板里,每次做交互前需要跟pm先明确。(制作交互文档模版也是高效输出的一种方式,这一块可以后谈)
二、交互思考
上一步了解需求后,交互思考有了“原材料”,一般时间充足的情况下,竞品分析,用户调研,用户体验地图都是重要设计环节,但紧急项目里,只能边思考边画信息网图和草稿。
快速思考6要素:WW+TS+TA:“人(who)、事(what) + 时(time line)、态(state) + 触点(touch point)、操作(action)”。一句话概括就是“什么人做哪些事/用户任务,有怎样的时间线和不同信息状态,在什么触点上有哪些操作“。视业务形态而定,这里的”时间线“可以替换为”信息流”,只是举例一种快速进行设计遍历的思路。
思考过程一定要顺手在草稿纸上画出来,可视化信息和流程。拿淘宝购物为例:
1> 人(who):这里的人不一定是真的人,是指交互对象。在淘宝购物里则为:买家,卖家,物流方,系统前端,后台
2> 事(what) :各个交互对象有哪些主要用户任务。如买家:了解产品、购买产品、查看订单、跟踪物流,退换货等
3> 时(time line)或信息流:画出各个交互对象在用户任务里的时间线。如买家时间线1:购买前——购买中——购买成功——买完一段时间;时间线2:发起退货——退货中——退货成功;信息流比如金额的流动,从买家——平台——卖家;诸如此类
4> 态(state) :前面说的交互对象,在自己的时间线和各节点里有什么样的状态,这也是交互稿输出必备的状态表。比如买家支付后,金额冻结在平台,交易成功后,钱到卖家账号;退货中买家不允许做延迟收货操作等
5> 触点(touch point):各交互对象是在哪些页面或模块里进行操作的,大到产品载体如app、网页、自助机,小到页面至模块。如:淘宝首页、产品列表、店家首页、产品详情页、购物车、收银台、购买结果页、订单列表、订单详情等。思考的时候,可以把这些速记在对应的时间线节点下。
6> 操作(action):用户在各个触点执行哪些操作。如:搜索、查看详情、点击交易按钮、查看关联推荐产品等
注:以上的梳理不是单靠脑补,必须非常清楚业务规则和逻辑。在跟pm了解需求的时候,可以顺手记一下信息网,帮助记忆梳理。
交互思考关键点:1)全场景、用户路径闭环;2)各场景的关联页面/区域;3)设计布点,运营策略,信息联动;4)在用户认知的引导上,需求目标的匹配上,安置怎样的线索。
三、画图输出
前面两步思考梳理完,脑海里已经有思路,纸面也有了草图和框架,就差最后一步画图表意。画图的时候,因为时间有限,主要关注关键页面和用户任务闭环,优先呈现完整方案,其次才是交互细节。
1> 优先逻辑,其次细节
2> 设计顺序:骨架(流程、页面)——动静脉(模块、状态)——填铺血肉(元素、信息、交互)
3> 场景式思维+框架式思维
要注意的是,没那么多时间每个页面事无巨细考虑周全,就要把时间用在刀刃上。画图的时候要重逻辑而非细节,比如有个输入框,要侧重思考A用户可以编辑,B用户不可以,C用户在达到某种条件下可以,类似这种逻辑,而非这个输入框激活后边框会高亮加粗,光标闪动,输入法面板自动调起这种交互细节。
设计顺序应该是先骨架(流程、页面),后脉络(模块、状态),最后铺血肉(元素、信息、交互),太细的东西,可以在交互评审和视觉环节一起补齐,何况很多都已有成熟模板,要么自家规范,要么直接用Antdesign的组件。
场景式思维:模拟真实场景,用户在各个场景下是什么样的心理状态,关注什么信息,有什么需求;框架式思维:1)由表及里画图;2)用金字塔原理呈现信息;3)有逻辑有情感有顺序地讲故事。
从了解需求到交互思考到画图输出,每一步都为后一步做铺垫,通过梳理6个问题、6个要素,逐渐在脑海中渲染出交互蓝图,最后用软件呈现出来,交付给团队合作伙伴。
项目无论大小与时间资源,都可以用这种方式去入手。只不过紧急项目更注重效率,非紧急项目可以有更多时间考虑周全。