赞助商
立即赞助

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

交互设计3年前 (2021)发布 流光
2.2K 0 0

@龙爪槐守望者 :本文不打算讲 Axure、xmind 怎么用,为软件完全可以自学,也不打算普交互设计是什么,好像解释篮球是什么并不能教会他们打篮球。我希望能教大家些东西,能上运用起来真正解决问题。交互设计画布正是这样好工具,它能帮助设计师从全局看待个需求,找到真正问题,综合所有素提出可解决案。文末有交互设计画布 Axure 组件以及 PDF 下载。

一、交互设计核心要素

首先从个实问题开始。

小明是外地人,28岁,熟练使智手机,第一次来京,他想得实大厦见一个友,但上午10:00到西二地铁后知道怎么走,如果你是一个地图App 的设计师,请设计一个步行导航功帮助他顺利的到达得实大厦。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 小明如何才到达得实大厦

可以这思考,的起点是西二旗地铁站,现在目标是去得实大,其实这个目标隐含了3个前提:

  • 准确,是到了得实大厦,是到了他地方。
  • 安全,不能在路上着着出车祸了。
  • 比较效率,得实厦本不远,用户肯不希望绕远,能点好。

从起点目标,肯定会经过一些步骤,把关键步骤列出来,如下图所示。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 需求、目标和关键步骤

我们一一骤分析设,首先手机启动 App,启动界面,我们可以一些宣传语,安抚一下小明因迷产的焦躁,比如:「行导航,找方向不再难」。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 启动界面

接下来输点,用手机的 GPS 定位功能把当前所处的位置自动显示在地图上,为预防定位不准,把点做到输框内证随时以修改。下一个步骤是输终点,显里也需要一个输框。之开始导航个步骤肯定需要一个按钮来触,三步联系非常紧密,因此做到一个界面里。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 导航设置界面

小明跟着导航路线走是最为关键步骤,除了在地图上显示前位、线路以及实大厦位,有其他素可能影响这导航成败。

如天气,一雨地铁附的路太好走,我们需要根据天气给予户同的路径。第二是光线,小明是白天得实大厦,是晚上,白天光线很强,颜色太浅的界面可会有点看清,设计的时候应该反差较大的颜色,还要自把手机的亮调。第是户的行为,稍微观察就会发现,户在使地图导航的时候,是先看会地图,再走,然后观察地图确认自己是否走得对,此往复。有可小明走过头了才看地图,遇到键的路线变,如转弯的时刻,我们可设置一个震或者语音,醒户及时打开手机查看线路,及时改变行走方向。此外我们最好设计一个剩余时间和路程,降低小明的焦虑,否则他知道么时候才到,心会较急躁。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 导航界面的设计

最后是达了得实大。这大家可以回忆一下,你了一个预定地点,你是怎确定了呢?一种法是问附近的人「这是得实大吗?」还有观察楼房上有没有大的文字招牌。可惜,得实大貌似没有。所以在界面上可以把得实大的图片放在上面,方便用户现实环识别比对,再提示用户导航完成,给个退出按钮,整个步行导航的初步计就完成了。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 导航完成界面

以就一交互设概的过程。

辛向阳(卡内基梅陇大学设计哲学博士,香港理工大学人机互业开创人,江大学设计学院前院长)将互设计总结为个核心要素:人、目标、场、行为、工具(媒介)。

是指用户,这是交互主体,在这里案例是指小明。目标是指用户期望结,在这个案例小明期望结是准确、安全、高效到实大厦。场景,这个词比较抽象,可以理解为用户所处环境,比如天、照、旁边有没有其他等等可能用户为生影响素。工具(媒介)是指用户交互象,这里是手上地图 App。最后是为,用户过做出为,括媒介为(击、缩放)和其他为(走路),过这些为到目标。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 交互设计五要素

因此交互设计可解为:充分考虑户、场景、媒介对目标的影响,通过设计媒介的使方式,改变户的行为,促使户达到目标。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 交互设计五要素图解

不同的用户年龄、是否熟练能使用机、职业、性别和心情,都对用户达成目标有大的响。比如上图不是,是老,50岁,从来没用过地图 APP、眼睛和耳朵都不好使,计的候就要别注,比如把文字和图要放的别大,最好能语音播放声音。景:比如气、光照、下雨了就得换条路,哪发生了车祸提醒用户注等等。工,本案例的智能机,如果 GPS 没开还得提醒用户开,快没了得提醒用户充等等。有非常多的因素响着用户达成目标。

交互设师的职责就权衡这些影响因素,设好的方案,帮用户好的达目标。验的设师验的设师的区别之一能众多因素中速找到影响用户达目标的主因素。

二、交互设计画布1.0

我们把这些素整合一张表格,形交互设画布1.0版。然后把面的例子稍加变化,假如小明从通州车到得实厦,设的驾驶导航功能。目标、场景、媒介又什么变化,该如何设媒介的使用方式改变用户的行呢?

比目标,想想看,个目标和步行的目标的区别是——他首先得在得大厦附近停车,步行到得大厦里,所以里的一目标应该是,准确、安、快速的在得大厦附近停车。其他因素对目标的影响和初步决方案我列几个在画中,欢迎补充。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 互设计画1.0

有了交互设计画布,在分析需求时能找准,全盘统筹去考虑问题,设计案时不会走偏。

三、用户需求和商业需求

仅仅考虑用户需求是不够。很多时候个需求并不是用户提出来,而是公司下命令。假如你是百度网盘设计师,板希望提高自动备份功能打开率。你要设计个案,你该如何应?

我们可把公司达的这个命令叫务需求或者务目标,自备份的打开率,更多的户开启照片自备份很好解,如果备份的照片越多,户偶来查看照片,就越离开百盘,产黏性就会,而且照片占的空间越多就需要付,这些付将给公司带来错的盈利。

之前提的交互计五要素中的目标其实是用户体验目标,因为这是用户希望达的。业目标和用户体验目标之间有关,业目标是:提高动备的开率。为了达成业目标,必须让用户开动备开关。也就是说这的用户体验目标是:更多的用户开动备开关。只有先达成用户体验目标,业目标才有可能完成。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 用户体验目标和业目标

四、用户行为受何影响

下来的就是计该析如何让用户开动备开关?

这里介绍一新模型,动机、担忧、障碍。

动机是指用户进行某行动的一个推动力,果个推动力不够强,用户就不产生行动。担忧和动机刚相反,担忧是用户在行动前的一个疑虑,果疑虑越少,用户行动的能越大。障碍是用户在行动程中遇到的阻碍因素,阻碍越小,做出行动肯定更顺。我们的用户验目标是更的用户打开自动备份开关。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 动机、担忧和障碍

现在我们想想能用户创造什么动让他生打开开关动?

如:有的户可是为了节省手机空间容量,希望把多余的图片备份。有可是旅游来,准备备份一旅游拍摄的照片。还有可是因为外诱惑,如打开自备份送10钱。

那在用户开动备之前,会有什担忧呢?比如担心网盘不安全,隐私会不会泄露。或者觉得提供的空间不够大,备一半空间就不够了。还有网盘会不会不稳定,哪数据丢了就找不回来了。

动机担忧用户出行动之的,障碍则用户行动过程中的。假如打的骤非常多,径很,或者界面内很复杂,用户就可能会中途弃打自动备份了。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 创造动机、排除担忧、解决障碍

现在我们来看下图,竞品是何创造动机、排除担忧、决障碍的。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 竞品是何创造动机、排除担忧、决障碍

解释为如何发生模型有很多,例如坦福大学教授 BJ Fogg 认为为(Behavior)由动(Motivation)、能力(Ability)、触发(Trigger)三位体生,用户有意愿,能力足够并由个事件触发,才会生为。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ B=MAT

总的来说,人的行为受到观因素(人本身的情绪、思考、经验等)和客观因素(物环境、社会环境、工具等)的复合影响,这中某些因素可对户产生行为有益,那么我们在做设计时就应该放大这些因素的影响从而激励户产生行为。对于产生行为有害的因素,我们应当进行引导和抚。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)
△ 主观因素客观因素影响用户行

五、交互设计画布2.0

根据以的梳理,交互设画布2.0的型了。每次接到新需求的时候,行基本的梳理竞品分析后,我们可以把这张画布打印一张行填写(也可以使用 Axure 元件库电子版填写)。新增的需求这栏,用于填写需求方给的背景信息、资源限制。后一栏机会/挑战填写综合面的因素发的难点以及灵感、初解决方案。

在项目的进行中,把填写的画贴到明显的位置,提醒自己把握局,不要走偏,果现新的灵感和漏掉的条件,也以随时补充到画中。

思维和记忆能力是有限,在思考个局部时往往会陷入其钻尖,甚至遗漏些要条件。画布意义在于提供个思考框架,并不是定要把画布填写满满,才是好,按需填写甚至画布依据自己思维习惯进改造。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 交互设计画布 Axure 电子版

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 交互设计画布正

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 交互设计画布反

无论是自己思考还是团队协作,画布是一项非好的工具,除了我整的这张交互设计画布,面上还有他类的画布,例如商模式画布和户同心画布。

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ Airbnb 的商模式画布,来源:http://blog.sina.com.cn/s/blog_8a9e31500102wszx.html

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

△ 户同心移情画布

下载地址

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

上图是下载后含5个文件,下载地址:https://pan.baidu.com/s/1BdK-fJ8chkQfIzHPkWt99w,提取密码:6g6k

注作者的微信公众号:「龙爪槐守望者」

用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

图片素材作者:Sahil Sadigov

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@龙爪槐守望者 :经常能看到在很多 App 的 Navigation Bar(iOS 叫导航栏,安卓叫 App Bar /应用栏)下方、列表上方或者页面...
UI控件
卡片式设计采用图像与文字说明相结合的方式将信息传达给受众,在有限的矩形空间中建立了无限的可能性。 时至今日,卡片式设...
UI 设计
今年做了大量的 HTML5 项目,遇到了很多坑。在这个过程中学到了一些之前不具备的知识,所以这篇文章就简单分享一下这方面的话...
H5
@Daidai丶呆 :本篇文章写写近期看到的比较有趣的话题,「一款好产品,所需具备的条件」。 产品角度 早前有看到张小龙说 :一...
ui设计
最近花了一个多月的时间阅读、整理iOS人机界面指南,起因是发现在招聘岗位要求上“熟悉iOS/Android/Web端设计规范”频繁被提及...
iPhone 设计规范
旅程映射创建了一个完整的体验视图,正是这一过程将不同的数据点聚集在一起并进行可视化处理,以了解产品需求,从而可以吸引...
产品设计
年前的时候出过一份交互校招题,这里面有偏流程和概念的基础知识考察,也有眼见和互联网行业了解的一些考察,对于在校生来说...
交互设计
怎样的交互设计才算清晰完整,下面是从实际项目中总结出来的一些经验,分享给大家,共同学习进步。 产品交互设计稿和研发结果...
交互文档