交互癖UI交互设计交互设计

故事板的前世今生

2015-12-02  本文已影响478人  Flugel_Yan

一故事板的前世

故事板的出现,是用于广告及视频创作前期,用来快速表达作者是创作理念。漫画还有视频的很多分镜头其实也是大致一样的概念。

故事板的前世是这样的,下图是宫崎骏的魔女宅急便分镜故事板

魔女宅急便分镜头

要知道,你看到的电影镜头是这样来的,下面就是故事板和电影镜头最终版的对比图

《云图》故事板和电影镜头对比




故事板的今生

故事板的类型

故事板的类型,偷懒了引用了【PM必看:用户场景神器—故事板

文字故事板

我们要描述一个好的用户场景,需要对用户使用这个产品的过程有一个基本的了解,还需要对用户角色和使用情景有所设想。好的用户情景,可以贯穿整个产品设计的过程,模拟现实的用户操作和交互方式,用于产品的可用性评估。

使用简单的语言描述人物角色、情境及用户使用情景,尽量避免不要给出具体的用户行为和交互动作。

合理的文字故事板应该注意以下几个方面:

确定角色,多个角色做多个故事板;

确定确实必须完成的目标;

确定故事的出发点或事件;

明确角色信息及关注点;

确定故事板的数量,取决于人物角色和目标数量;

书写故事,从触发到结束;


用户Tina:性别、年龄、职业、收入、学历、使用习惯、使用网络、关键特征、目标以及故事描述,这些作为人物角色模型的故事板信息内容。

图片故事板

对于交互设计师而言,图形故事板是最快让他人获取自己的想法的最佳手段。通过图形故事板,用户就像在看电影一样,融入到情景当中。

通过反思各个场景的的事件,提醒团队该注意哪些方面,反思交互效果,能够让他人通过看得见的方式面面加以注释。

在图形故事板中,用户通过一连串的用户行为,连接成一个完整的用户场景。

(故事板就是一个用户场景)

(事件/行为是具体的人和系统的交互行为,它将人、物和环境结合起来,构成了整个故事的内容)

(把角色放在某个场景里,讲一个故事。故事中应该包括对问题的研究和自己的想法)

如果着重研究线下任务,则故事板中线下场景居多,如关注屏幕任务则会展现界面居多。当然如果完全关注屏幕任务就是我们的线框图和原型了。

故事板关注的是屏幕任务和线下任务结合的边缘地带。

故事板是传统交互设计方法的重要补充工具,平时我们的原型设计仅仅局限于屏幕环境的设计,忽略了屏幕之外的使用情境,通过故事板绘制的关键使用场景有利于我们理解屏幕之外的用户目标和动机。其实有经验的设计师会在产品设计初期假想一些应用情境,只不过他们没有画在纸上而已。

另外,故事板不仅仅是设计师头脑中假想情境的具象化,他还可以使一些模糊的用户需求更加具象更有说服力,在设计沟通的过程中能发挥巨大的作用。

故事板揭示了用户与产品的各个交互行为,他可以让pm像用户一样,融入到用户的使用情景当中;又可以以一个旁观者的状态,观看全局,反思和总结使用场景的问题及真伪。

以上故事板的类型,偷懒了引用了【PM必看:用户场景神器—故事板

怎么制作故事板

步骤一:写故事场景,描绘现实场景

我在一次工作中,需要列一个场景:邀约朋友来家里吃饭休闲一条龙。

步骤二:分解现实场景(适用于步骤较多,逻辑复杂的情况)

但是看似简单的一个任务,仔细想来并没那么简单,我邀请朋友吃饭,那就涉及到邀约、商量吃什么、告知朋友位置、帮朋友开门、采购以及后续的打扫和休息等一系列活动。

于是我讲这个任务做了进一步分解:邀约——置办——接待——善后打扫——休闲

现实场景分析

人物设定:Miss米(业主)、朋友们(外来访客)、小郭(门卫)

场景(邀约):

场景一:周五Miss米在公司上班,想周末干嘛好呢,后来想到邀请朋友们去家里吃饭,举行姐妹pa。

场景二:Miss告诉朋友,周六中午来自己家吃饭,来一个欢乐的姐妹pa。

场景三:朋友们各自决定是否要来参加。

场景四:姐妹们在群里热聊吃些什么好呢,商量菜单。

场景(置办):

场景一:确定了菜单后,列下购物清单

场景二:Miss米拿着购物单去到超市购物

场景三:MISS米购买了清单上所需的菜品

场景四:Miss米想到需要买些一次性餐具和饮料

场景(接待):

场景一:朋友A从家里出发,向Miss米咨询具体位置

场景二:朋友A开车根据导航到了Miss所在小区的门口

场景三:门卫小郭上前询问朋友A要到访业主家具体栋数

场景四:门卫小郭确认完毕后,帮朋友A打开门禁

场景五:朋友A到达楼下,按房间号,让Miss米帮忙打开楼下门禁

场景(善后打扫):

场景一:吃完饭后,朋友们提议等会去小区内的会所进行按摩服务。

场景二:Miss米(业主)打电话给按摩馆进行预约。

场景三:Miss米(业主)和朋友们(外来访客)到达按摩馆进行按摩。

场景四:消费完毕,进行支付。

场景(休闲):

场景一:吃完饭后,朋友们提议等会去小区内的会所进行按摩服务。

场景二:Miss米(业主)打电话给按摩馆进行预约。

场景三:Miss米(业主)和朋友们(外来访客)到达按摩馆进行按摩。

场景四:消费完毕,进行支付。

步骤三:描绘线上场景

因为我的目的在于通过软件帮助用户解决整个流程中的各种事项,所以分析各部分,我线上场景做了以下总结:

解决方案

场景(邀约):

步骤一:Miss米(业主)在业主APP上发布邀请函,包含日期、地理坐标、聚会主题、业主所属房号信息等。邀请函发出后,提供给Miss米(业主)一定的优惠购、购物券、积分券等。

步骤二:Miss米(业主)分享邀请函至微信群等

步骤三:朋友们(外来访客)在该邀请函下方报名,邀约确定后,Miss米(业主)和物业相关人员可以收到到访人员时间及人数相关信息。

步骤四:Miss米(业主)和朋友们(外来访客),可以在邀请函下填报菜单,软件提供“摇一摇菜单”“灶神菜单”“蔬菜大拼盘”等方式提供给菜谱推荐,辅助确定菜单。

场景(置办):

步骤一:菜单确定的同时,为Miss米(业主)提供购物清单

步骤二:根据购物清单,提供购物车功能以及网上超市推荐功能,Miss米(业主)可以用发布邀请函所得的优惠券等在由商家和物业提供的购物平台(网上超市、生鲜配等)进行购买。

场景(接待):

步骤一:朋友可以根据邀请函所提供的地理位置,进行导航到达小区

步骤二:到达小区门口后,将邀请函打开给小郭(门卫)查看,放行,进入小区。

步骤三:Miss米(业主)可实时查看朋友们的位置。

步骤四:朋友到达楼下,点开门,Miss米(业主)可以通过手机帮助朋友远程开门,打开楼下的门禁。

场景(善后打扫):

步骤一:Miss米(业主)通过软件进行预约家政服务。

步骤二:家政服务接单,并派阿姨上门打扫。

步骤三:打扫完毕,进行支付(可以使用营销策略获得的券等)。

场景(休闲):

步骤一:Miss米(业主)通过软件进行预约按摩保健服务。

步骤二:商家接单,提供按摩时间。

步骤三:消费完毕,进行支付(可以使用营销策略获得的券等)。

步骤四:根据每个步骤绘制故事板,并添加描述语言

在上一步中,已经对每个小场景进行了步骤描述,接着按照每个步骤进行绘制即可,如果上面的描述一幅图表达不出,那说明第三步中的分解不够详细,还可以进一步做分解。


我的故事板

01_邀约场景

01-邀约场景

02_置办场景

02_置办场景

03_接待场景

03_接待场景

04_善后打扫场景

04_善后打扫场景

05_休闲场景

05_休闲场景

BY Flugel_Yan   2015/12/2

上一篇下一篇

猜你喜欢

热点阅读