• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 一招教你让交互方案更靠谱!超好用的目标导向设计法

一招教你让交互方案更靠谱!超好用的目标导向设计法

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

本文主要包含交互设计,经验分享,设计方法,设计理论等相关知识,希望在学习及工作中可以帮助到您

对于一枚交互设计师,设计水平的重要判断标准之一,是看设计师能否产出足够靠谱的方案。对内,方案要能帮助产品不断向前发展,提升产品的数据,为公司带来收益;对外,方案要能满足用户的使用需要,方便用户的操作,提供良好的用户体验。对于交互的同学来说,这些是我们的天职,要想尽一切办法去做好。那么问题来了,如何才能做好这些天职呢?下面我将分三个阶段介绍一个很好用的设计方法:目标导向设计法。掌握了这个设计方法,可以帮你设计出团队内部认可、用户也喜欢的方案。

设计目标

要理解目标导向设计法,首先要理解最核心的元素——设计目标。这就绕不开设计的鼻祖——包豪斯。包豪斯是世界上第一所完全为发展设计教育而建立的学院,在设计史上占据着非常重要的地位。她从1919年创立开始,一直到今天都对设计界有着很大的影响。现在我们看到的很多建筑风格,都依然是包豪斯的老师所创立的国际主义风格。

△ ?包豪斯第三任校长米斯先生于1958年设计完成的西格拉姆大厦,典型的国际主义风格

现在整个世界范围内的建筑,大面积都是这种极简风,包豪斯的影响可谓波及全球。包豪斯学校之所以伟大,是因为包豪斯首次将理性思维的光辉注入了设计活动中。她首次提出要为大工业生产而设计。包豪斯主动将学校和企业界、工业界联系起来,使学生能够体验工业生产与设计的关联。这样的做法,让学生能够设计出真正符合生产标准的作品,而避免了产出只是看起来美好、却无法量产的作品。其次,包豪斯奠定了现代设计教育的结构基础。包豪斯把课程分为“对平面和立体结构的研究”、“对材料的研究”、“色彩研究” 三个方面,使视觉教育第一次比较牢固的建立在科学的基础上。

在这之前,设计都是被划分在艺术的门类下面,设计本身,也被认为是靠感性来进行创作的一项活动。最后,包豪斯首次提出了“以解决问题为中心”的设计理念。设计是为了解决问题,这是设计的终极目标。不论是设计一个水壶,还是一个视频列表,我们的设计方案一定是为了达到某个目标,解决某个问题。设计是为了解决问题,而艺术是为了表达内心。这是两者本质上的区别。从包豪斯开始,设计开始能够真正的为生产服务,发挥了它的最大价值。

以上帮我们明确了设计的本质是解决问题。具体到交互设计领域,我们是靠“设计目标”帮我们理清项目需要解决的问题。交互设计的设计目标由两部分构成:产品目标和用户目标。产品目标一般由产品经理提出(通常包含在需求文档里),也可以由设计师提出(通过分析得出)。常见的产品目标如“提升XX功能的转化率”、“提高XX页面的使用时长”等等。而用户目标,可以概括为“用户通过做XXX的操作,可以满足XXX的需要”,一般需要设计师来分析总结。为了更好的理解设计目标,我们来举个例子。例如现在有一个需求是优化app的登录页面:数据显示很多用户没有完成操作就离开了页面,因此需要立项优化。我们来分析一下这个项目的设计目标。从需求中得知,很多用户没有完成操作就离开了,页面的转化率低,因此这里的产品目标就是“提升登录页面的转化率”。下面来分析用户目标,用户其实是不愿意登录的,因为登录操作麻烦,用户也没有这个习惯。那么,当用户来到这个页面,他的需要是什么呢?答案是快速登录。用户希望登录越简单越好,越快越好。这里需要注意的是,在确定用户目标时,应从用户的角度出发,发现他们的需要。千万不能把用户目标变成了给用户的任务。比如下面这个注册页,就是布置给了用户一堆输入任务。

△ ?让用户在注册时提供如此多的信息,真不知道是注册还是查户口。

设计目标

设计的本质是解决问题,所以做交互设计要有设计目标,而设计目标包含产品目标和用户目标。现在来说说如何确定设计目标。

先说产品目标。这里分两种情况:

1. 如果产品需求是由产品经理提出的,那么先看产品需求文档里有没有写明产品目标。有的文档会写的很清楚,比如”提升登录的转化率”。有的没有那么清楚,这时候就需要我们充分理解产品需求,提炼出产品目标。这个过程往往需要设计师跟产品经理充分的沟通,保证需求理解得清楚、准确。在沟通的过程中有时会发现产品自己也没把这个需求想清楚,这时候一个优秀的交互就得帮产品一起理清需求,明确做这个需求的目的。

2.?如果产品需求是由设计师主动发起的,那么在发起需求的时候,我们要明确这个需求要解决什么问题。设计师发现一个需求,可以从以下三个方面着手:研究数据、进行用户调研/查看用户的反馈、进行可用性测试。以研究数据为例,下面是我在网易的时候,发现的一组后台数据:

第一个曲线图,是网易新闻视听tab的点击量变化图,从中可以看出,在把抽屉导航改成了底导航之后(红线所示),视听tab获得了大量新增点击;第二个图展示的是视听tab里视频的点击量,改版后点击量整体上依然在原位摆动。这样的数据很有问题:更多的用户来到这个tab,但平均看的视频却少了。因此我当时发起一个需求:优化视听tab,在设计上加强优质视频的展示,以提升视频tab的活跃度。此时的产品目标很简单咯,就是提升视听tab的活跃度。

下面说说确定用户目标的方法:主要是从这个功能的场景出发,来明确用户的需要。如何确定场景?这里提供一个模板:

用户场景:在某时间(when),某某地点(where),周围出现了某些事物时(with what),特定类型的用户(who)萌发了某种欲望(desire),会想到通过某种手段(method)来满足欲望。

假设我们在新闻列表里,要插入登录领红包的卡片。这时候,用户的场景可以描述为:在用户浏览新闻列表(地点)的时候(时间),看到了“登录领5元红包”的卡片(出现某物),未登录的用户(特定类型用户)萌发了登录的欲望(欲望),会点击卡片的登录按钮(手段)来登录。通过描述场景,这里的用户目标就可以总结为“登录领红包”。

为了更好地理解如何确定设计目标,我们来再举个例子 :

某理财应用要做一个续约的功能,主要针对购买的理财产品将要到期的用户,提醒他们可以续约。提供的续约信息包括用做续约的本金、续约方式(本息续约)、预期增加收益、续约期限、续约后的到期日、续约说明。续约操作后需要审核,审核一般需要1~2小时,通过后会有短信通知。由于续约能够给公司带来不少收益,因此希望用户在操作上比较流畅,保证不会因为操作而流失用户。

分析一下,从这段需求描述中,产品目标和用户目标是什么?

需求里提到“针对理财产品将要到期的用户,提醒他们可以续约”,所以提醒用户续约是一个目标。需求里还提到好多概念词:“预期增加收益”、“续约期限”等等,这些概念词会增加用户的理解成本,如果用户不能很好的理解,完成续约操作的概率就会降低;而像需求中“希望用户在操作上比较流畅”也是为保证用户不会半路流失。所以第二个产品目标,是保证流程的转化率。

那么,用户目标呢?套用刚刚的模板,这里的场景是:在收到续约推送或者看到理财单里的理财产品可以续约时,购买的理财产品将要到期的用户萌发了想要续约赚取更多收益的欲望,通过续约操作来满足。分析一下这个场景,我们可以得到用户目标是了解续约信息,完成续约操作。

对于续约这类流程性比较强的需求,跟大家分享一个我总结的“流程四阶段”,即“发现、了解、操作、跟进/记忆”。在每一个阶段,都有每一个阶段需要注意的重点,在设计的时候要特别注意。比如在续约这个例子中,发现阶段,重点是“引起注意”;了解阶段的重点是“续约的规则和好处”;操作阶段的重点是符合用户的心理模型,不能让用户觉得不安全;跟进/记忆阶段,主要是注意结果的反馈。

由于发现部分,我们使用push和理财单中的肩标提示,相对来说容易一些。

主要的心思,要花在了解和操作部分上。而这里面的重点,是心理模型。

啥是心理模型?这是我在百度百科上找到的答案:

“心理模型指相互关联的言语或表象的命题集合,是人们作出推论和预测的深层知识基础”。

这是一个比较书面语的定义。通俗一点讲,心理模型就是大家对于事物普遍的认知。

再来一个例子:假设我们来到一个会议室,室内温度13度。我们想通过空调把温度升到24度。在调空调温度的时候,很多人会下意识地把温度调到26,甚至28度,因为人有一种“温度越高,空调会更努力地工作”的认知。

这种认知,就是人的心理模型。而实际上,即使你把温度调得再高,空调也没有为你加速一点点。

空调的制热功能,有自己的一套运作模型,不论你是设置的24度,还是30度,空调把温度升到24度所花的时间都是一样的。

回到续约的例子,人们在花钱购买东西的时候,都希望能有一个类似订单页的确认页面,告诉我我买的是什么,花了多少钱,何时生效。因此,在流程中设计一个这样的页面,就是符合用户心理模型的。

设计目标后

确定了设计目标之后,可以按照这个通用

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

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

相关文章

  • 2018-08-23App设计中,如何更专业地管理设计命名系统?
  • 2018-08-23如何提升界面品质感?来看这篇超全面的总结!
  • 2018-08-23用超多案例,带你全面看懂尼尔森十大可用性原则!
  • 2018-08-23学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!
  • 2018-08-23有意思!一个独立开发者总结的App 迭代设计思路
  • 2018-08-23做好网页排版,不要犯这10种错误
  • 2017-08-06网页设计师也要学习网页代码编写
  • 2017-08-06UCenter Home 站点添加统计代码
  • 2018-08-23做好这个交互文档细节,让你和工程师的合作效率提高50%
  • 2017-08-06html、css基础注意点(前端必看篇)

文章分类

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

最近更新的内容

    • 新鲜出炉!iOS 11中有哪些值得关注的UI 设计细节?
    • 如何掌握设计的节奏?来看这份全面的总结!
    • 一个好的用户界面设计的37个技巧(图文)
    • 描边风设计中,最容易犯的8种问题分析
    • 无论哪种进度条设计,从这4个方面入手就能轻松搞定!
    • 网易云音乐产品负责人:如何做好用户研究的?(上)
    • 成为解决问题的人!总结我在用户测试里吸取的5个教训
    • 让HTML和JSP页面不缓存从Web服务器上重新获取页面
    • 基础知识学起来!如何科学提高UI界面的文本易读性?
    • 2018最具设计感录取通知书,看完让人想复读!

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

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