如何让交互稿的体验更好?网易设计师总结的10个知识点

编者按:想做一份看起来比较专业的交互稿非常容易,但想做一份优秀体验的交互稿就不简单了。想进阶成资深交互设计师,这个环节必不可少。今天这篇好文总结了10个方法,让你的交互稿体验更棒,赶紧来学!

如何让交互稿的体验更好?网易设计师总结的10个知识点

编者按:想做一份看起来比较专业的交互稿非常容易,但想做一份优秀体验的交互稿就不简单了。想进阶成资深交互设计师,这个环节必不可少。今天这篇好文总结了10个方法,让你的交互稿体验更棒,赶紧来学!

在自己的时间和精力较多的情况下,可以尝试优化一下自己的交互稿体验,并逐渐可以养成思维和习惯;而当自己时间和精力有限的情况,保证设计方案的质量才是关键。

上周偶然的机会,看到老大在帮别的团队筛选简历,看到了一个同学的简单交互稿,只有界面信息的排版和页面跳转流程,缺少了很多交互稿应有的内容。后来,想起之前和同事聊起交互稿到底该如何表现的问题,就想着可以稍微总结关于交互稿的一些问题。

其实,想做一份「看起来」比较专业的交互稿是非常容易的。只需要拿到一份比较专业的的交互稿,进行学习和模仿就好了。这也是我刚刚开始工作时采用的方法。我曾经认识一个非常想学交互设计的学生,因为并没有太多面对面的接触,我也选择了这种方式,给了她一份自己的交互稿,让她学习。

然而,「看起来」比较专业的交互稿只是表象,其实交互稿是交互设计的基础,而体验才是我们关注的核心,很多时候我们都不愿意称自己为画线框图的人,我们讲思维、讲方法。但是,能够带来优秀体验的交互稿不单单在传递思维、方法,还会大大的节省我们的沟通时间并且提升我们的工作效率。也能够在不知不觉中提升我们的影响力。

也许,不同的团队有着自己的交互稿设计规范来提升体验,而我们团队在设计师们的不断变革和优化中,逐渐积累了一些提升阅读者体验的要点,希望能够彼此学习。

1.  不同复杂度的需求应有不同的设计

我们会在工作中遇到不同复杂度的需求,因此,我们也应该有着不同的交互稿展现,比如一个非常简单的优化,不会涉及太多修改和分析,就完全不需要过多冗余的内容;而一个复杂庞大的需求,就需要复杂的分析和展现。因此,在我们进行交互稿的设计之前,就需要对需求的复杂度有清晰的认知,进而能够明确该采用什么方式来展现设计内容。

举例说明:图1-1至1-3中的三个需求的交互稿分别对应着:简单、适中和复杂的需求。

简单的需求可预见的无需太多的更新迭代,有着比较明确的优化迭代,可能无需太多角色(可能不涉及视觉和产品),则无需太多的复杂信息,用最简单的信息传递想要优化和修改的体验问题即可;针对稍微复杂的优化,则需要一些必要的信息,比如可能需要有需求背景、流程图、更新记录等;而非常复杂或者全新的产品,可能会涉及到更多的内容,如图1-3所示,将会在以下的注意点中提及。因此,优秀体验的交互稿也是根据不同场景和情况、不同需求相应的变化的,而不是一成不变的。

如何让交互稿的体验更好?网易设计师总结的10个知识点

2. 需求简介和涉及的各角色展示

需求肯定需要一个名称来标明是什么需求,最好能够清晰明了,并且标注相应的版本,以方便未来需要用到时候能够清晰的查看到。

针对稍微复杂点的需求,可能会牵扯到各种角色,一般的移动端产品大致包含:产品经理、交互设计师、视觉设计师、iOS开发、AOS开发、Web开发、服务器开发、iOS测试、AOS测试、Web测试、服务器测试等。

而下图中的需求简介能够无形中提升体验:当某个角色因为某些问题,需要找到相应的人时,无需再去需求列表中寻求,在交互稿中也能一一查看。另外,需求来源的标明也能够让各个角色清楚的知道需求的重要程度和优先级,比如图中的需求来源于「老板」。

如何让交互稿的体验更好?网易设计师总结的10个知识点

△ 交互稿中的各角色的说明

3. 清晰的更新记录,可直达更新内容,并有清晰指示

设计其实是个过程,没有完美的设计,只有更优的设计。在不断的设计过程中,不可避免的会涉及增添、删除、修改。

因此,清晰的更新记录不仅能够帮助各个开发、测试等角色清楚的明确修改的内容并及时跟进查看;也可以让自己更明确的总结和回顾在需求中自己的那些经历,进而避免下次做设计的过程中遗漏和修改。下图中即为笔者自己的交互稿中的更新记录案例。

如何让交互稿的体验更好?网易设计师总结的10个知识点

△ 交互稿中的更新记录

另外,上图中更新记录的条目,都需要点击链接直达增加、修改的地方;当然,删除的则不需要链接直达。而在修改或新增的内容页面内,最好能够明显标出,方便阅读的角色能够直接看到,如下图所示,用红色明确的标识出时间和状态(补充)。

如何让交互稿的体验更好?网易设计师总结的10个知识点

△ 交互稿页面内明确标识修改时间和内容

4. 需求介绍、背景和分析,帮助各角色理解需求

很多需求不单单是一个名字就能完全说明的。交互设计师在进行设计和研究的时候,往往会进行需求的分析和明确,而这样的过程,如果可以的话,在交互稿中适当的展现,能够让团队角色更清楚的了解需求,也能够无形中让开发和测试们加入了需求的分析中,而不单单只是实现需求。

而这些在交互稿中的展现,也一定是有目的性的,没必要将全部的分析内容都放入,也要有筛选的放入。全部内容展现,一方面阅读者无从看起,另一方面自己也辛苦。而笔者建议一般放入的内容有:需求背景、需求说明和分析、产品目标、用户目标和风险点即可。

5. 交互设计方法的内容,无形中说服各角色理解设计

交互设计师不单单只是线框图的呈现和一些细节说明,我们的方法论中有人物角色、场景、流程、信息架构、数据等等,这样才是我们做设计的整个过程。选择性的将这些内容放入交互稿中,其实在培养其他角色用户思维的同时,又能够无形中说服开发工程师们帮助理解和实现我们的设计。

另一方面,流程图、信息架构图、业务逻辑图等之类的图表,能够方便开发和测试理清开发和测试逻辑,无形中提升了他们的工作效率。

6. 采用不同方式,可视化的表达,达成体验原则

交互设计师的体验原则有很多,比如一致性,易理解等等。而我们也可以在交互稿中使用很多不同的方式来达成这样的原则。在这些原则中,最重要的一项就是易理解。而可视化、分类归纳等方式也是比较好用的方式,如图所示,通过状态的归类区分的方法来使开发和测试很快明确不同状态的提示条的规则。

如何让交互稿的体验更好?网易设计师总结的10个知识点

△ 绑卡送优惠券的提示条的交互说明

而笔者在工作中,还会使用一些其他可能的方式来达成体验原则,比如下图中的表格状态分类、流程图和线框图结合的方法。我们每个人在画交互稿的时候,多去考虑一下阅读者的体验,可能就会想尽各种办法来满足他们。

如何让交互稿的体验更好?网易设计师总结的10个知识点

△ 通过表格来进行分类显示

如何让交互稿的体验更好?网易设计师总结的10个知识点

△ 线框图和流程图相结合的显示

7. 一个页面只讲一件事情和流程

一般我们团队的设计师,都不会将一个需求的所有设计放入一个页面中,而是每个页面只讲一个流程和一件事情,而这件事情或流程必须是有始有终的,而不是中途就断掉的;如果一定要中途断掉,也最好能够引导到其他页面(通过文字或直接将页面显示出来,或者直接可跳转)。

一个页面讲一件事,不单单是我们做设计的方法之一。也是我们在设计交互稿时,使其他角色更专注某一条流程的方式;否则,会使阅读者的思维和设计师的思维都变得混乱,也会影响我们自己的设计。

8. 追求交互说明的阅读体验

我们往往要写一堆堆的交互说明,少则几条,多则十几条甚至几十条。而开发和测试们看到这些密密麻麻的字时,自然不愿意阅读。如果我们还不能够把间距、字体粗细、字体大小、字体颜色、段落分类做好,将使他们更不愿意阅读我们的交互稿。所以,需要在写交互说明的时候,就考虑他们的感受,也要用不同的方式来写,比如下图中的隔行间距,字体粗细、颜色变化等。

如何让交互稿的体验更好?网易设计师总结的10个知识点

△ 交互说明的字体大小、颜色、间距、粗细等

而在标注上,我们可以采用很多标注形式,比如大标题的标注是1;二级可以是圆点、abc等等;再到三级再进行变化。而不是一成不变的从1写到99。

附中文排版指南:《好学易用有格调!写给大家看的中文排版指南》

9. 考虑不同角色的不同需求

交互稿有很多人要看,开发要照着交互稿逻辑进行开发、测试要照着交互稿的规则写测试用例(如果不全,我们得补)、视觉要看着交互稿中的界面进行视觉创意等。

因此,我们在设计时要尽量考虑不同角色的需求,这是在交互稿中的方方面面中都要注意的。比如第8要点图中第4条,针对视觉,写出视觉需制作两种图标;而有些时候,我也会在适当的地方标明视觉可进行创意发挥;而在开发和测试层面,则需要严谨的逻辑和易理解的方式。

10. 通过遍历方案和界面,关注极端情况

交互设计自查表是一个好东西,可以让我们很方便的关注到极端情况,但是我感觉实行起来还是没那么容易的。而我现在采用遍历的方法来走查我的界面和方案,即通过交互设计的思维去关注极端情况。

一个界面,从场景和流程上看会有这些问题:它是怎么出现,如果出现不了怎么办;界面中的每一个元素是怎么出现的、如果出现不了怎么办;界面中的每一个元素的状态是如何的、是否有多种状态;界面中的每一个元素的操作是如何的;界面中的每一个元素操作后的状态是如何的等等。而每一个元素、每一个页面都这样过一遍,会减少很多极端情况的丢失,如下图所示,通过遍历写交互说明。

如何让交互稿的体验更好?网易设计师总结的10个知识点

△ 通过遍历来写PC端群空间动态详情的交互说明

而遍历不单单能用在写交互说明上,再深一步还可以用在设计方案本身上,比如为什么要有这个元素或信息;这样的元素和信息能带给用户什么;用户能不能理解;可不可以有其他方式;能不能更简洁等等。但往往这个层面的遍历会耗费大量的时间和脑力,所以包括我在内的很多人应该都会忽视,还希望自己未来能更多的尝试这种方式来审查设计方案。

交互设计自查方法:《看了都说好!如何建立交互设计自查表?》

总结

其实还有很多能够提升交互稿体验的方法,比如第10点的遍历图中「A7-动态详情页」这样的标注会使每个页面更清晰,但会增加和耗费我们在设计交互稿的时间。曾经,视觉团队反馈,可以将所有界面放入一个页面,这样可以更方便视觉设计师查看等等。

其实,很多方法和规范是死的,人是活的。在什么样的场景下,满足什么样的需求才是王道。而我们的交互稿的初级目标是可用,终极目标才是体验更好。

在自己的时间和精力较多的情况下,可以尝试优化一下自己的交互稿体验,并逐渐可以养成思维和习惯;而当自己时间和精力有限的情况,保证设计方案的质量才是关键。

欢迎关注作者「网易UEDC」的微信公众号:

如何让交互稿的体验更好?网易设计师总结的10个知识点

「高手经验!帮你打造思路清晰易使用的交互稿」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34466/

(0)
震天下震天下
上一篇 2017-12-03 14:09
下一篇 2017-12-05

相关推荐

  • 交互设计中的情感化!

    文/金雅庆UI即User Interface 用户界面的简称。UI设计是指设计人和产品或服务互动的一种机制 , 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。交互设计是一种如何让产品易用,有效而让人方便的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理...

    2018-03-09
  • 从第三代锁屏,看移动端交互设计的未来趋势

    每年的梅花网传播业大展都是传播业界的一大盛事,我们不仅能看到过去一年整个市场和行业的进步与创新;也会看到互联网、移动互联网催生的一系列产品,它们共同预示着未来的发展方向。今年的梅花网传播业大展上,我…

    2017-08-01
  • 巧用9大服装穿搭技巧,助你轻松搞定专题页设计!

    到目前为止,我已经写了好几十篇关于Banner设计的文章了,目前应该还没有人把Banner设计讲出这么多门道出来吧(脸红ing……哈哈)。但是,我今天想升级一下,不讲Banner设计了,而是给大家讲一下Banner设计的进阶版——专题页设计(做好专题页的前提就是做好Banner设计,这也为什么我会在前面那么大篇幅讲Banner设计的原因咯)。

    2017-05-17
  • 对于交互、视觉设计师来说,至少要了解的产品知识

    之前在设计体系规划里面有提到过,产品常识也是我们需要了解的内容,其中产品定位就是最基础,也是最重要的一个概念,因为项目后期的所有工作都是围绕产品定位所展开的。比如还是上面那个例子,使用人群是单身男女,我们将使用人群细分为:18-25岁、25-35岁、35-45岁和45岁以上的单身男女。最后将目标用户定为25-35岁的单身男女,当然为什么选取这部分人群需要一些理由,比如这部分群体的经济比较独立,年龄更适合步入婚姻的殿堂等等。比如我们的主要功能是即时通讯,那即时通讯会分为很多使用场景,比如上下班的路上、睡觉前,起床后等等。比如产品的特色是“更容易约会成功”,那为了达成这个大的产品目标,我们需要细化,将其分解成多个小的用户目标,如快速看到周围单身异性的信息状态、快速了解周围哪些异性对自己有兴趣等等。

    2017-05-09
  • 【译文】“防止用户犯错:避免有意识的错误”

    西南航空的手机网站对已经过去的日期使用了灰色的背景,使你明白在预订一个航班时这些日期是不可选择的。不幸的是,对下个月的日期也使用了相同的设计,这意味着不可选。Polarr是IOS系统里很受欢迎的照片编辑工具。右侧的编辑控件(温度,色调等)需要你点击那个方块,然后向左或向右滑动而改变参数。然而,这些控件并没有展示出用户应该如何与其互动,所以新手用户很可能需要试错几次才能明白应该如何正确的使用这些功能。另外的一个交互困难就是:由于控件在屏幕的最右侧,你可以很轻松的向左滑动而减少参数数值,但水平空间有限,当你想向右滑动增加参数数值就会存在困难。IOS 8中,为帮助视力不好的用户阅读体验,提供放大显示图标和文字的功能。但是改变变焦需重新启动手机,这是一个重功能,需要花费一些时间,所以IOS系统会在你使用这个功能前,预览变焦完成后的样子。这个体贴的预览功能可以帮你评估出你是否真的需要操作变焦。Hipmunk提供快速浏览恢复选择机票过程的所需信息,甚至是被打断。在预订过程中的第二步,它清楚地显示了旅行的日期,在机场的问题,最便宜的出发程已被选中,以及用户被要求再选择一个回程航班。即使注意力分散了一段时间后,用户可以简单地恢复这个过程,而不会不小心偏离原本对航班的计划和要求或尝试重复已经完成的步骤。苹果新出的图片软件运用了一个很传统的对话框确认用户是否真的想删除最近爬山旅途中的照片,并且通过highlight 24张照片表示删除范围。更好的是,确认删除操作的按钮清楚地标示是删除,而不是一般的确认。Gmail 提供对破坏行为很有帮助的撤销功能,如误删了92封邮件。这个功能被证明是非常有用的,Gmail现在支持在发送email中允许点击发送键30秒内中撤销。Tweeter的字符限制条件很有名气,他们在用户超过那个字符限制前就会提示用户剩余的字符数。当一个tweet过长是,他会显示出超过的字符,高亮出那些超出的字符,并且使发送键不可使用,以让用户明白他们需要如何修复错误。

    2017-05-30
  • "用户体验“真是个万恶的东西。

    前些天跟一个在央企大鳄担任要职的朋友聊天,说起某互联网新闻媒介公司被责令整改的事情,(其实我都不确定每天操劳四化建设工作的他知道不知道这件事)我本人并没有什么观点,只是看周围的人都在吐槽说国家管的太碎了,于是就想听听他怎么说。没想到君付之一笑,言道”活该,就应该封了它,它那么大的用户群体,它那么强的社会传播性,它不负责传播正能量谁负责?难道让警察叔叔们一张张发传单传播吗?你做产品做好了挣钱了就应该想想怎么对社会发展负责,不然国家和这个世...

    2018-05-05
  • 信息与交互设计专业委员会走访北京服装学院艺术设计学院

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn第四站——北京服装学院2017年11月3日上午,信息与交互设计专业委员会卞亚君秘书长及秘书处谢老师、王老师一行三人到北京服装学院艺术设计学院进行了走访。新媒体系主任丁肇辰教授热情地接待了我们,在交谈中丁教授向我们介绍了学院的基本情况以及带学生做的一些研究项目及活动。如《都会寝室》项目,面向20-35岁人群,致力于通过卧室环境控制、健康食物推荐等,改...

    2018-01-31
  • 交互体验,是最好的科普教育——天宁小学参观丽水市科技馆活动随记

    点击上方“莲都区教育局”可以关注哦充分利用身边的公共科普资源,激发学生的科学探究兴趣,享受交互体验式的科普教育,增强学生的科技创新意识,这是我们安排学生走进科学馆进行参观体验的根本目的。这次天宁小学的孩子们真的是赚到了!面前的这个机器人可不简单,它的中文名叫阿尔法。2016年央视猴年春晚上,540台阿尔法机器人与歌手孙楠共同演绎歌曲《冲向巅峰》,那气场堪比国庆大阅兵。工作人员对阿尔法机器人作简要介绍:阿尔法是一款仿人型智能机器人,可直立...

    2018-01-30
  • 如何减少哑铃图中的颜色,提高用户体验?

    有奖互动话题,文末等你概述作者在 #MakeoverMonday 2018 的第 2 周的课题上,制作了一张哑铃图来比较男性与女性在寻找伴侣时所注重的特征排名。他目标是展示不同国家的男性或女性在寻找伴侣时是否都会将某一特征看作重要因素。这样让作者立即想到了哑铃图,但是他的第一份草稿存在一定的问题。Viz 中的颜色太多了,我们很难从中发现趋势。之前作者也曾遇到过这个问题,但是他觉得真正的解决办法应该是,在不减少 Viz 中数据数量的情况下...

    2018-04-19
  • 作为交互设计师,都应该尝试的低保真原型测试

    即便你是一名如此经验丰富、作品惊艳、才思敏捷、手法高超、声名显赫、有强大号召力……的设计师,如果你还未亲手尝试过低保真原型测试,我依旧会推荐此方法。

    2017-05-09