如何使交互稿的体验更好

1、 如何使交互稿的体验更好 想做一份“看起来”比较专业的交互稿是非常容易的。只需要拿到一份比较专业的的交 互稿，进行学习和模仿就好了。然而，“看起来”比较专业的交互稿只是表象，其实交互稿是交互设计的基础，而体验才是我们关注的核心，很多时候我们都不愿意称自己为画线框图的人，我们讲思维、将方法；但是，能够带来优秀体验的交互稿不单单在传递思维、方法， 还会大大的节省我们的沟通时间；提升我们的工作效率；也能够在不知不觉中提升我们的影响力。网易交互设计师张书超大大总结自己和所在团队的工作经验，为大家带来如何提高交互稿的体验方法总结，干货满满喔1.不同复杂度的需求应有不同的设计我们会在工作中遇到不同复杂度的

2、需求，因此，我们也应该有着不同的交互稿展现，比如一个非常简单的优化，不会涉及太多修改和分析，就完全不需要过多冗余的内容；而一个复杂庞大的需求，就需要复杂的分析和展现。因此，在我们进行交互稿的设计之前，就需要 对需求的复杂度有清晰的认知，进而能够明确该采用什么方式来展现设计内容。 举例说明：图 1-1 至 1-3 中的三个需求的交互稿分别对应着，简单，适中和复杂的需求。简单的需求可预见的无需太多的更新迭代，有着比较明确的优化迭代，可能无需太多角色（可能不涉及视觉和产品），则无需太多的复杂信息，用最简单的信息传递想要优化和修改的体验问题即可；针对稍微复杂的优化，则需要一些必要的信息，比如可能需要有

3、需求背景、流程图、更新记录等；而非常复杂或者全新的产品，可能会涉及到更多的内容，如图 1- 3 所示，将会在以下的注意点中提及。因此，优秀体验的交互稿也是根据不同场景和情况、不同需求相应的变化的，而不是一成不变的。 2.需求简介和涉及的各角色的展示 需求肯定需要一个名称来标明是什么需求，最好能够清晰明了，并且标注相应的版本，以方便未来需要用到时候能够清晰的查看到。 针对稍微复杂点的需求，可能会牵扯到各种角色，一般的移动端产品大致包含：产品经理、交互设计师、视觉设计师、iOS 开发，AOS 开发，web 开发，服务器开发，iOS 测试，AOS 测试，web 测试，服务器测试等。而图 2 中的需求

4、简介能够无形中提升体验：当某个角色因为某些问题，需要找到相应的人时，无需再去需求列表中寻求，在交互稿中也能一一查看。 另外，需求来源的标明也能够让各个角色清楚的知道需求的重要程度和优先级。 3.清晰的更新记录，可直达更新内容，并有清晰指示设计其实是个过程，没有完美的设计，只有更优的设计。在不断的设计过程中，不可避免的会涉及增添、删除、修改，因此，清晰的更新记录不仅能够帮助各个开发、测试等角色清楚的明确修改的内容并及时跟进查看；也可以让自己更明确的总结和回顾在需求中自己的那些经历， 进而避免下次做设计的过程中遗漏和修改。图 3 中即为笔者自己的交互稿中的更 新记录案例。 另外，图 3 中的更新记

5、录的条目，都需要点击链接直达增加、修改的地方；当然，删除的则不需要链接直达。而在修改或新增的内容页面内，最好能够明显标出，方便阅读的角色 能够直接看到，如图 4 所示，用红色明确的标识出时间和状态（补充）。 4.需求介绍、背景和分析，帮助各角色理解需求很多需求不单单是一个名字就能完全说明的。交互设计师在进行设计和研究的时候，往往会进行需求的分析和明确，而这样的过程，如果可以的话，在交互稿中适当的展现，能够让团队角色更清楚的了解需求，也能够无形中让开发和测试们加入了需求的分析中，而不单 单只是实现需求。 而这些在交互稿中的展现，也一定是有目的性的，没必要将全部的分析内容都放入，也 要有筛选的放入

6、。全部内容展现，一方面阅读者无从看起，另一方面自己也辛苦。而笔者建议一般放入的内容有：需求背景、需求说明和分析、产品目标、用户目标和风险点即可。 5.交互设计方法的内容，无形中说服各角色理解设计交互设计师不单单只是线框图的呈现和一些细节说明，我们的方法论中有人物角色、场景、流程、信息架构、数据等等，这样才是我们做设计的整个过程。选择性的将这些内容放入交互稿中，其实在培养其他角色用户思维的同时，又能够无形中说服开发工程师们帮助理 解和实现我们的设计。 另一方面，流程图、信息架构图、业务逻辑图等之类的图表，能够方便开发和测试理清 开发和测试逻辑，无形中提升了他们的工作效率，就像第 6 点所提到的一

7、样。 6.采用不同方式，可视化的表达，达成体验原则交互设计师的体验原则有很多，比如一致性，易理解等等。而我们也可以在交互稿中使 用很多不同的方式来达成这样的原则。在这些原则中，最重要的一项就是易理解。而可视化、分类归纳等方式也是比较好用的方式。 而笔者在工作中，还会使用一些其他可能的方式来达成体验原则，比如表格状态分类、流程图和线框图结合的方法。我们每个人在画交互稿的时候，多去考虑一下阅读者的体验， 可能就会想尽各种办法来满足他们。 7. 一个页面只讲一件事情和流程一般我们团队的设计师，都不会将一个需求的所有设计放入一个页面中，而是每个页面只讲一个流程和一件事情，而这件事情或流程必须是有始有终

8、的，而不是中途就断掉的；如果一定要中途断掉，也最好能够引导到其他页面（通过文字或直接将页面显示出来，或者直 接可跳转）。 一个页面讲一件事，不单单是我们做设计的方法之一。也是我们在设计交互稿时，使其 他角色更专注某一条流程的方式；否则，会使阅读者的思维和设计师的思维都变的混乱，也会影响我们自己的设计。 8. 追求交互说明的阅读体验我们往往要写一堆堆的交互说明，少则几条，多则十几条甚至几十条。而开发和测试们 看到这些密密麻麻的字时，自然不愿意阅读。如果我们还不能够把间距、字体粗细、字体大小、字体颜色、段落分类做好，将使他们更不愿意阅读我们的交互稿。所以，需要在写交互 说明的时候，就考虑他们的感受

9、，也要用不同的方式来写，比如图 8 中的隔行间距，字体粗 细、颜色变化等。 而在标注上，我们可以采用很多标注形式，比如大标题的标注是 1，二级可以是圆点、abc 等等，再到三级再进行变化；而不是一成不变的从 1 写到 99。 9.考虑不同角色的不同需求交互稿有很多角色要看，开发要照着交互稿逻辑进行开发、测试要照着交互稿的规则写测试用例（如果不全，我们得补）、视觉要看着交互稿中的界面进行视觉创意等。 因此，我们在设计时要尽量考虑不同角色的需求，这是在交互稿中的方方面面中都要注意的，比如图 8 中第 4 条，针对视觉，写出视觉需制作两种图标；而有些时候，我也会在适当的地方标明视觉可进行创意发挥；而

10、在开发和测试层面，则需要严谨的逻辑和易理解的方 式。 10.通过遍历方案和界面，关注情况交互设计自查表是一个好东西，可以让我们很方便的关注到情况，但是我感觉实行起来还是没那么容易的。而我现在采用遍历的方法来走查我的界面和方案，即通过交互设计的思维去关注情况。一个界面，从场景和流程上看会有这些问题：它是怎么出现，如果出现不了怎么办；界面中的每一个元素是怎么出现的、如果出现不了怎么办；界面中的每一个元素的状态是如何的、是否有多种状态；界面中的每一个元素的操作是如何的；界面中的每一个元素操作后的状态是如何的等等。而每一个元素、每一个页面都这样过一遍，会减少很多情况的丢失。而遍历不单单能用在写交互说明上，再深一步还可以用在设计方案本身上，比如为什么要有这个元素或信息；这样的元素和信息能带给用户什么；用户能不能理解；可不可以有其他方式；能不能更简洁等等。但往往这个层面的遍历会耗费大量的时间和 脑力，所以包括我在内的很多人应该都会忽视，还希望自己未来能更多的尝试这种方式来审 查设计方案。结语其实，很多方法和规范是死的，人是活的；在什么样的场景下，满足什么样的需求才是王道；而我们的交互稿的初级目标是可用，终极目标才是体验更好。在自己的时间和精力较多的情况下，可以尝试优化一下自己的交互稿体验，并逐渐可以养成思维和习惯。而当自