@龙爪槐守望者 :本文不打算讲 Axure、xmind 怎么用,为软件完全可以自学,也不打算普交互设计是什么,好像解释篮球是什么并不能教会他们打篮球。我希望能教大家些东西,能上运用起来真正解决问题。交互设计画布正是这样好工具,它能帮助设计师从全局看待个需求,找到真正问题,综合所有素提出可解决案。文末有交互设计画布 Axure 组件以及 PDF 下载。
一、交互设计核心要素
首先从个实问题开始。
小明是外地人,28岁,熟练使智手机,第一次来京,他想得实大厦见一个友,但上午10:00到西二地铁后知道怎么走,如果你是一个地图App 的设计师,请设计一个步行导航功帮助他顺利的到达得实大厦。
△ 小明如何才到达得实大厦
可以这思考,的起点是西二旗地铁站,现在目标是去得实大,其实这个目标隐含了3个前提:
- 准确,是到了得实大厦,是到了他地方。
- 安全,不能在路上着着出车祸了。
- 比较效率,得实厦本不远,用户肯不希望绕远,能点好。
从起点目标,肯定会经过一些步骤,把关键步骤列出来,如下图所示。
△ 需求、目标和关键步骤
我们一一骤分析设,首先手机启动 App,启动界面,我们可以一些宣传语,安抚一下小明因迷产的焦躁,比如:「行导航,找方向不再难」。
△ 启动界面
接下来输点,用手机的 GPS 定位功能把当前所处的位置自动显示在地图上,为预防定位不准,把点做到输框内证随时以修改。下一个步骤是输终点,显里也需要一个输框。之开始导航个步骤肯定需要一个按钮来触,三步联系非常紧密,因此做到一个界面里。
△ 导航设置界面
小明跟着导航路线走是最为关键步骤,除了在地图上显示前位、线路以及实大厦位,有其他素可能影响这导航成败。
如天气,一雨地铁附的路太好走,我们需要根据天气给予户同的路径。第二是光线,小明是白天得实大厦,是晚上,白天光线很强,颜色太浅的界面可会有点看清,设计的时候应该反差较大的颜色,还要自把手机的亮调。第是户的行为,稍微观察就会发现,户在使地图导航的时候,是先看会地图,再走,然后观察地图确认自己是否走得对,此往复。有可小明走过头了才看地图,遇到键的路线变,如转弯的时刻,我们可设置一个震或者语音,醒户及时打开手机查看线路,及时改变行走方向。此外我们最好设计一个剩余时间和路程,降低小明的焦虑,否则他知道么时候才到,心会较急躁。
△ 导航界面的设计
最后是达了得实大。这大家可以回忆一下,你了一个预定地点,你是怎确定了呢?一种法是问附近的人「这是得实大吗?」还有观察楼房上有没有大的文字招牌。可惜,得实大貌似没有。所以在界面上可以把得实大的图片放在上面,方便用户现实环识别比对,再提示用户导航完成,给个退出按钮,整个步行导航的初步计就完成了。
△ 导航完成界面
以就一交互设概的过程。
辛向阳(卡内基梅陇大学设计哲学博士,香港理工大学人机互业开创人,江大学设计学院前院长)将互设计总结为个核心要素:人、目标、场、行为、工具(媒介)。
是指用户,这是交互主体,在这里案例是指小明。目标是指用户期望结,在这个案例小明期望结是准确、安全、高效到实大厦。场景,这个词比较抽象,可以理解为用户所处环境,比如天、照、旁边有没有其他等等可能用户为生影响素。工具(媒介)是指用户交互象,这里是手上地图 App。最后是为,用户过做出为,括媒介为(击、缩放)和其他为(走路),过这些为到目标。
△ 交互设计五要素
因此交互设计可解为:充分考虑户、场景、媒介对目标的影响,通过设计媒介的使方式,改变户的行为,促使户达到目标。
△ 交互设计五要素图解
不同的用户年龄、是否熟练能使用机、职业、性别和心情,都对用户达成目标有大的响。比如上图不是,是老,50岁,从来没用过地图 APP、眼睛和耳朵都不好使,计的候就要别注,比如把文字和图要放的别大,最好能语音播放声音。景:比如气、光照、下雨了就得换条路,哪发生了车祸提醒用户注等等。工,本案例的智能机,如果 GPS 没开还得提醒用户开,快没了得提醒用户充等等。有非常多的因素响着用户达成目标。
交互设师的职责就权衡这些影响因素,设好的方案,帮用户好的达目标。验的设师验的设师的区别之一能众多因素中速找到影响用户达目标的主因素。
二、交互设计画布1.0
我们把这些素整合一张表格,形交互设画布1.0版。然后把面的例子稍加变化,假如小明从通州车到得实厦,设的驾驶导航功能。目标、场景、媒介又什么变化,该如何设媒介的使用方式改变用户的行呢?
比目标,想想看,个目标和步行的目标的区别是——他首先得在得大厦附近停车,步行到得大厦里,所以里的一目标应该是,准确、安、快速的在得大厦附近停车。其他因素对目标的影响和初步决方案我列几个在画中,欢迎补充。
△ 互设计画1.0
有了交互设计画布,在分析需求时能找准,全盘统筹去考虑问题,设计案时不会走偏。
三、用户需求和商业需求
仅仅考虑用户需求是不够。很多时候个需求并不是用户提出来,而是公司下命令。假如你是百度网盘设计师,板希望提高自动备份功能打开率。你要设计个案,你该如何应?
我们可把公司达的这个命令叫务需求或者务目标,自备份的打开率,更多的户开启照片自备份很好解,如果备份的照片越多,户偶来查看照片,就越离开百盘,产黏性就会,而且照片占的空间越多就需要付,这些付将给公司带来错的盈利。
之前提的交互计五要素中的目标其实是用户体验目标,因为这是用户希望达的。业目标和用户体验目标之间有关,业目标是:提高动备的开率。为了达成业目标,必须让用户开动备开关。也就是说这的用户体验目标是:更多的用户开动备开关。只有先达成用户体验目标,业目标才有可能完成。
△ 用户体验目标和业目标
四、用户行为受何影响
下来的就是计该析如何让用户开动备开关?
这里介绍一新模型,动机、担忧、障碍。
动机是指用户进行某行动的一个推动力,果个推动力不够强,用户就不产生行动。担忧和动机刚相反,担忧是用户在行动前的一个疑虑,果疑虑越少,用户行动的能越大。障碍是用户在行动程中遇到的阻碍因素,阻碍越小,做出行动肯定更顺。我们的用户验目标是更的用户打开自动备份开关。
△ 动机、担忧和障碍
现在我们想想能用户创造什么动让他生打开开关动?
如:有的户可是为了节省手机空间容量,希望把多余的图片备份。有可是旅游来,准备备份一旅游拍摄的照片。还有可是因为外诱惑,如打开自备份送10钱。
那在用户开动备之前,会有什担忧呢?比如担心网盘不安全,隐私会不会泄露。或者觉得提供的空间不够大,备一半空间就不够了。还有网盘会不会不稳定,哪数据丢了就找不回来了。
动机担忧用户出行动之的,障碍则用户行动过程中的。假如打的骤非常多,径很,或者界面内很复杂,用户就可能会中途弃打自动备份了。
△ 创造动机、排除担忧、解决障碍
现在我们来看下图,竞品是何创造动机、排除担忧、决障碍的。
△ 竞品是何创造动机、排除担忧、决障碍
解释为如何发生模型有很多,例如坦福大学教授 BJ Fogg 认为为(Behavior)由动(Motivation)、能力(Ability)、触发(Trigger)三位体生,用户有意愿,能力足够并由个事件触发,才会生为。
△ B=MAT
总的来说,人的行为受到观因素(人本身的情绪、思考、经验等)和客观因素(物环境、社会环境、工具等)的复合影响,这中某些因素可对户产生行为有益,那么我们在做设计时就应该放大这些因素的影响从而激励户产生行为。对于产生行为有害的因素,我们应当进行引导和抚。
△ 主观因素客观因素影响用户行
五、交互设计画布2.0
根据以的梳理,交互设画布2.0的型了。每次接到新需求的时候,行基本的梳理竞品分析后,我们可以把这张画布打印一张行填写(也可以使用 Axure 元件库电子版填写)。新增的需求这栏,用于填写需求方给的背景信息、资源限制。后一栏机会/挑战填写综合面的因素发的难点以及灵感、初解决方案。
在项目的进行中,把填写的画贴到明显的位置,提醒自己把握局,不要走偏,果现新的灵感和漏掉的条件,也以随时补充到画中。
思维和记忆能力是有限,在思考个局部时往往会陷入其钻尖,甚至遗漏些要条件。画布意义在于提供个思考框架,并不是定要把画布填写满满,才是好,按需填写甚至画布依据自己思维习惯进改造。
△ 交互设计画布 Axure 电子版
△ 交互设计画布正
△ 交互设计画布反
无论是自己思考还是团队协作,画布是一项非好的工具,除了我整的这张交互设计画布,面上还有他类的画布,例如商模式画布和户同心画布。
△ Airbnb 的商模式画布,来源:http://blog.sina.com.cn/s/blog_8a9e31500102wszx.html
△ 户同心移情画布
下载地址
上图是下载后含5个文件,下载地址:https://pan.baidu.com/s/1BdK-fJ8chkQfIzHPkWt99w,提取密码:6g6k
注作者的微信公众号:「龙爪槐守望者」
图片素材作者:Sahil Sadigov