专栏名称: 交互设计学堂
系统学习交互知识,就找老D。干货分享、在线培训、行知书院三大版块帮你提升自己。 最新资讯-全是干货还有老D点评,每天推送; 交互培训-在线课程帮助小伙伴进入交互行业,只要3个月; 行知书院-老D帮小伙伴们解读经典设计书籍,都是“硬”知识。
目录
相关文章推荐
庞门正道  ·  4招出图,让你的衣服更好卖! ·  3 天前  
庞门正道  ·  这个男人,连续加班4000天!? ·  4 天前  
优秀网页设计  ·  您瞧!这就是讨价还价的后果... ·  5 天前  
优秀网页设计  ·  轻松搞定蛇年红包封面!手把手教程来了 ·  6 天前  
生命的智慧  ·  Nature | 湖库塑料碎片有多少? ·  4 天前  
生命的智慧  ·  Nature | 湖库塑料碎片有多少? ·  4 天前  
51好读  ›  专栏  ›  交互设计学堂

一招教你让交互方案更靠谱——目标导向设计法(下)

交互设计学堂  · 公众号  · 设计  · 2017-05-29 20:04

正文

♝点击上方“交互设计学堂”关注我们,送电子书


之前的两篇文章介绍了什么是设计目标,以及如何确定设计目标。这篇文章介绍一下确定设计目标之后的工作。确定了设计目标之后,可以按照这个通用的流程继续进行:竞品分析→流程图→原型图。竞品分析是一个较大的话题,以后有机会另辟一篇文章跟大家分享。本文重点说一下流程图和原型图。

把一个流程图画出来,需要两步:第一步将需求涉及的元素列出来,并进行归类;第二步根据心理模型进行排序

画完了流程图,需要根据设计目标找出流程中每一步的设计重点。我们来举个🌰 :

【需求】新建视频列表:用户在手机客户端里新建一个视频列表,加入选定的视频。这其中涉及的元素有:列表名称、简介、封面、选择视频(包括上传新的视频和选择已上传过的视频)、标签。

分析一下这些元素:名称、简介、封面和标签是关于视频介绍的,可归为一类;选择视频是为列表添加内容,归为一类


然后根据心理模型,也就是人们普遍的认知,来为它们排序。人们一般是先为列表取个名字,设置好封面这些基本信息,再为其选择内容。所以这里的流程设计为:填写列表信息→选择视频。

请思考一下:由于这个需求涉及的功能点比较简单,可否把这两步流程放在同一个页面呢?这就需要用到我们这次系列文章的核心:设计目标。

分析一下这个需求的设计目标:产品目标是这个功能的完成率尽可能高;用户目标,是快速、准确完成这个任务。由于这个需求是为手机客户端提出的,而手机屏幕的尺寸较小,流程的两步如果放在一个页面,这个页面会变得很长。同时因为该需求需要操作的点比较多(输入名称、设置封面、选择标签、选择视频等都需要操作),如果放在同一个页面,这个页面会变得比较重。因此这里较好的做法是把选择视频这一步挪到第二个页面,从而使页面轻盈,减少用户负担。

流程有了,我们来分析每一步的设计重点。在第一步,涉及输入操作,联系我们的用户目标,因此这里的重点是输入尽可能方便。而选择视频的那一步,迅速找到用户想找的视频很关键,所以这是重点。


带着这些重点,我们来设计原型。在设计填写列表信息页的时候,我希望让这个页面清晰、简单——在没填写内容时,我们使用默认文字来告知用户这里应当填写的内容,并且把标题和简介只用一条线分开。为了使输入方便设计了一个细节:在用户输入标题之后,在下简介区域会自动匹配和标题相关的内容,然后后面有一个“使用”按钮,用户点击“使用”就可以添加上这些内容,减少了用户的输入。同时,标签部分也会为用户根据标题进行自动匹配。所有这些设计,都是为了达到方便用户输入的目的。


在选择视频页面,设计的重点是迅速找到视频。因此,方案采用了一行两个视频的展现方式,方便用户通过封面图迅速辨识视频;同时一行两个的排布方式,并按照视频名称的字幕顺序进行排列,用户浏览效率比较高。在选择了视频之后,页面底部会有提示栏提示用户选择了几个视频,点击可以查看,方便确认。另外,需求里是没有提搜索功能的。但是考虑到如果用户有很多视频,这个列表会很长,不容易找到列表后部的视频。所以方案里增加了搜索功能,帮助用户快速找到视频。


可以看出,一切的设计,都在围绕产品目标和用户目标来进行。

最后顺提一下,在完成了一个设计稿,我们可以对照设计目标,然后通过数据和反馈来看我们的设计有没有达到设计目标。这对我们的成长有很大的帮助:成功的设计可以变成我们的经验,没有达到设计目标的方案,我们可以从中分析原因,避免以后再犯。

获取数据方面,我们可以跟数据分析师沟通需要的数据变化情况,或者自己寻求数据权限来分析结果。获取反馈反面,有两种方式:一是可以通过用户的反馈,比如后台用户的留言,用户调研的结果获取方案的反馈;二是可以通过同事和领导的反馈来检验自己的设计。

以上是《一招教你让交互方案更靠谱——目标导向设计法》的第三篇内容,也是最后一篇,主要介绍了如何画流程图以及原型图。愿你通过三篇文章掌握这一利器,升职加薪走上人生巅峰。

原文链接:http://www.jianshu.com/p/f96fd42928a8

关注作者微信公众号“新设计青年”,及时收取设计和个人成长方面的文章。

欢迎投稿:[email protected]


加老D私人微信18605817040,和老D一起学交互,老D会在朋友圈多发干货文章哦。新手小伙伴可以问老D3个专业问题哦。


交互设计学堂已经开设了新的栏目-行知书院,旨在帮助小伙伴们来高效的学习现在市面上优秀的用户体验书籍比如《交互设计精髓》等等,同时结合老D的工作经验来帮助你们从不同的高度和角度来解读书中的内容。每天一课,积少成多。已有134位小伙伴加入。详细了解行知书院