• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)

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

作者:龙爪槐守望者 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含交互设计,交互设计案例,商业需求,用户需求,经验分享等相关知识,龙爪槐守望者希望在学习及工作中可以帮助到您

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

一、交互设计核心要素

首先从一个实际的问题开始。

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

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

我们可以这么思考,小明的起点是西二旗地铁站,他现在目标是去得实大厦,其实这个目标隐含了3个前提:

  • 准确,是到了得实大厦,不是到了其他地方。
  • 安全,不能在路上走着走着出车祸了。
  • 比较有效率,得实大厦本来不远,用户肯定不希望绕远路,能快点更好。

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

△ 需求、目标和关键步骤

现在我们一个一个步骤来分析和设计,首先是手机启动 App,有个启动界面,我们可以放一些宣传语,安抚一下小明因为迷路产生的焦躁心情,比如:「步行导航,找方向不再难」。

△ 启动界面

接下来输入起点,利用手机的 GPS 定位功能把当前所处的位置自动显示在地图上,为了预防定位不准,把起点做到输入框内保证随时可以修改。下一个步骤是输入终点,显然这里也需要一个输入框。之后开始导航这个步骤肯定需要一个按钮来触发,这三步联系非常紧密,因此做到了一个界面里。

△ 导航设置界面

小明跟着导航路线行走是最为关键的步骤,除了在地图上显示当前位置、线路以及得实大厦的位置,还有其他因素可能影响这次导航的成败。

比如天气,一下雨地铁站附近的路不太好走,所以我们需要根据天气给予用户不同的路径。第二是光线,小明是白天去得实大厦,不是晚上,白天光线很强,颜色太浅的界面可能会有点看不清,所以设计的时候应该用反差比较大的颜色,还要自动把手机的亮度调高。第三是用户的行为,稍微观察就会发现,用户在使用地图导航的时候,是先看会儿地图,再走,然后观察地图确认自己是否走得对,以此往复。有可能小明走过头了才看地图,所以遇到关键的路线变化,比如转弯的时刻,我们可以设置一个震动或者语音,提醒用户及时打开手机查看线路,及时改变行走方向。此外我们最好设计一个剩余时间和路程,降低小明的焦虑,否则他不知道什么时候才能到,心理会比较急躁。

△ 导航界面的设计

最后是到达了得实大厦。这里大家可以回忆一下,你到了一个预定地点,你是怎么确定自己到了呢?一种办法是问附近的人「这里是得实大厦吗?」还有观察楼房上有没有很大的文字招牌。很可惜,得实大厦貌似没有。所以我们在界面上可以把得实大厦的图片放在上面,方便用户与现实环境识别比对,再提示用户导航完成,给个退出按钮,整个步行导航的初步设计就完成了。

△ 导航完成界面

以上就是一个交互设计大概的过程。

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

人是指用户,这是交互的主体,在这里案例中是指小明。目标是指用户期望的结果,在这个案例中小明期望的结果是准确、安全、高效的到达得实大厦。场景,这个词比较抽象,可以理解为用户所处的环境,比如天气、光照、旁边有没有其他人等等可能对用户行为产生影响的因素。工具(媒介)是指用户交互的对象,这里是手机上的地图 App。最后是行为,用户通过做出行为,包括对媒介的行为(点击、缩放)和其他行为(走路),通过这些行为到达目标。

△ 交互设计五要素

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

△ 交互设计五要素图解

不同的用户年龄、是否熟练能使用手机、职业、性别和心情,都对用户达成目标有很大的影响。比如上图不是小明,是老明,50岁,从来没用过地图 APP、眼睛和耳朵都不太好使,设计的时候就要特别注意,比如把文字和图要放的特别大,最好能语音播放声音。场景:比如天气、光照、下雨了就得换条路,哪里发生了车祸提醒用户注意等等。工具,本案例的智能手机,如果 GPS 没打开还得提醒用户打开,快没电了得提醒用户充电等等。有非常多的因素影响着用户达成目标。

交互设计师的职责就是权衡这些影响因素,设计更好的方案,帮助用户更好的达成目标。有经验的设计师和没经验的设计师的区别之一是能在众多因素中快速找到影响用户达成目标的主要因素。

二、交互设计画布1.0

现在我们把这些要素整合成一张表格,形成交互设计画布1.0版。然后把前面的例子稍加变化,假如小明从通州开车到得实大厦,而你设计的是驾驶导航功能。目标、场景、媒介又有什么变化,你该如何设计媒介的使用方式改变用户的行为呢?

比如目标,想想看,这个目标和步行的目标的区别是——他首先得在得实大厦附近停好车,再步行到得实大厦里,所以这里的第一目标应该是,准确、安全、快速的在得实大厦附近停好车。其他因素对目标的影响和初步解决方案我列了几个在画布中,欢迎补充。

△ 交互设计画布1.0

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

三、用户需求和商业需求

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

我们可以把公司下达的这个命令叫业务需求或者业务目标,提高自动备份的打开率,让更多的用户开启照片自动备份很好理解,如果备份的照片越多,用户偶尔来查看照片,就越离不开百度网盘,产品黏性就会提高,而且照片占用的空间越多就需要付费,这些付费将给公司带来不错的盈利。

我们之前提到的交互设计五要素中的目标其实是用户体验目标,因为这是用户希望达到的。业务目标和用户体验目标之间有关联,业务目标是:提高自动备份的打开率。为了达成业务目标,我们必须让用户打开自动备份开关。也就是说这里的用户体验目标是:更多的用户打开自动备份开关。只有先达成用户体验目标,业务目标才有可能完成。

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

四、用户行为受何影响

接下来的就是我们设计师该分析如何让用户打开自动备份开关?

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

动机是指用户进行某行动的一个推动力,如果这个推动力不够强,用户就不会产生行动。担忧和动机刚好相反,担忧是用户在行动前的一个疑虑,如果疑虑越少,用户行动的可能性越大。障碍是用户在行动过程中遇到的阻碍因素,阻碍越小,做出行动肯定会更顺利。我们的用户体验目标是更多的用户打开自动备份开关。

△ 动机、担忧和障碍

现在我们想想能给用户创造什么动机让他产生打开开关的行动?

比如:有的用户可能是为了节省手机空间容量,所以希望把多余的图片备份。也有可能是刚旅游回来,准备备份一批旅游拍摄的照片。还有可能是因为外部诱惑,比如打开自动备份送10块钱。

那在用户打开自动备份之前,又会有什么担忧呢?比如担心网盘不安全,隐私会不会泄露。或者觉得我们提供的空间不够大,备份到一半空间就不够了。还有网盘会不会不稳定,哪天数据丢了就找不回来了。

动机和担忧是用户做出行动之前的,障碍则是用户在行动过程中的。假如打开的步骤非常多,路径很长,或者界面内容很复杂,用户就可能会中途放弃打开自动备份了。

△ 创造

您可能想查找下面的文章:

  • 交互设计和心理学之间的18条奇妙联系
  • Apple Watch 交互设计中四个全然不同以往的经验揭密
  • 资讯类产品阅读列表的交互设计思考与经验分享
  • 163邮箱登录框交互设计的改进经验与分享
  • 超全面!Android 应用与iOS 应用之间的设计差异对比
  • 超全面的设计异常情况和处理方式汇总
  • 以Apple Music为例,为你解读格式塔7大法则
  • 界面设计中,交互方式是选择滑动还是点击呢?
  • 新手交互设计师如何迅速成长?爱彼迎高手来教你!
  • 在开始 VUI 设计之前,你需要做些什么?

相关文章

  • 2018-08-23GUI和VUI 到底有哪些区别?来看这篇超全面的总结!
  • 2018-08-23交互设计师的产出物是什么? 来看Airbnb 设计师的答案!
  • 2018-08-23每天刷抖音停不下来?原来是用这3个设计让你上瘾!
  • 2018-08-23实战案例!人气APP 最右4.0 全新UI 升级背后的设计思路
  • 2018-08-23UCAN2017回顾!当新技术来临时,设计会发生哪些变化?
  • 2018-08-23沪江UED团队出品!用户体验设计师进阶实战指南(下)
  • 2017-08-0620个国外优秀的网页色彩搭配案例分享
  • 2017-09-11webpack从入门到放弃
  • 2018-08-236个小技巧帮你从线框仔进阶成UE设计师!
  • 2018-08-23如何做好微交互,增加产品魅力值?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • webpack实现热加载自动刷新方法
    • 深度好文!如何积极正确地使用「预设计」方法?
    • 网站前端性能优化之javascript和css篇
    • 在大公司,APP的设计流程和时间分配是怎样的?
    • HTML页面输出应该遵循的几点原则小结
    • 学会给配色做减法,让你的设计更加高端!
    • 超全面总结!如何画出专业的原型图?(上)
    • 超实用!Apple 官方的图层命名方法之控制器篇
    • 亿万好评的新版微博小黄脸表情,设计师是这么做出来的!
    • 三八XX节专题页设计该怎么玩?看这篇就够了!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有