高保真VS线框图,哪一种交互稿更能清晰准确地描述产品？.pdfVIP

高保真 VS 线框图，哪一种交互稿更能清晰准确地描述产品？ 很多产品经常会纠结怎么把原型画得好看，哪个原型工具要彻底学会并熟练使用等等。但是团队的 其他成员并不会关心你的原型画得多好看，也不关心用什么工具画，如果你能准备清晰表达出产品 框架内容，也许在纸上画他们也会接受吧。当然，为了提高工作效率，我们还是会用到一些工具， 比如axure 、墨刀、摩客等等。工具很多也很好用，但是如何利用工具清晰准确地向团队成员描述我 们的产品又是另一回事了，今天就以 axure 为设计工具来讨论一下这个问题。 交互稿主要有两种做法，高保真交互稿和线框图交互稿。到底哪一种交互稿更能清晰准确地向我们 的设计师和开发展示产品框架和内容呢，通过下面两个案例的对比希望给到大家一些帮助，同时欢 迎交流指正。 案例一：高保真交互稿 这是一个只在平板端使用的电话软件原型交互稿，也是我工作上的第一个原型稿。因为要向客户展 示所以我选择了高保真交互稿，每个功能按钮都做了跳转，找了最相似的按钮图标，做了非常多的 动态面板，键盘按钮甚至是可以输入数字进行操作的 … 当然给客户看是没什么问题的，然而交到开 发和设计手中的时候却被喷了一脸翔。 为什么高保真交互稿不适合给开发和设计呢？ 由此可见高保真交互稿并不利于团队成员理解产品功能内容，可以说连一次评审会都过不了的。那 么只剩下线框图供我们选择了，案例二中我将主要讲述如何规范和有效地利用线框图准确清晰地向 团队成员展示交互稿。 案例二：线框图交互稿 这是以 wap 端的新浪微博为原形的一个线框图交互稿，为了让阅读者更好地理解原型内容，我将版 本变更信息和整个产品的功能架构和信息架构等贴在了最前面，如果是比较复杂的 app ，还可以详 细列出各动作手势、目录说明、特殊交互动作等你想要表达给团队的信息。 接下来就是功能页面的交互设计了，每一个 page 描述一个界面，详细描述清楚界面内的功能点，跳 转流程和界面的内容说明（包括不同内容的样式）。我喜欢尽可能在一个 page 页描述同一界面更多 的相关内容，所以把 page 页分割成多个模块，不同的模块描述不同的内容。 ①顶部概述。这模块相当是该 page 页的目录，只是为了方便阅读人员理解而已。这里你可以概述该 界面的定义、目的、功能说明、页面结构、和状态说明等等。 ②状态一（有微博的状态）。在微博首页，主要展示的是用户所关注的其他用户和自己所发的微博 内容，在这里就可以进行详细的设计描述说明了；在左侧简单说明了一下点击页面按钮和微博内容 的跳转关系，右侧则是各种不同微博类型不同格式内容的详细说明。 ③④⑤…“首页 ”其他状态的描述 如何让团队成员更好地理解你的交互稿，其实没有说哪一种方法是绝对正确的。如果你的团队成员 不喜欢这种表达，你可以直接忽略不看；只要他们觉得怎样好，你就怎么做就可以了。如果实在没 有要求心里也没底，也可以参考一下这种做法。 只是希望这些细节处理和表达方式能帮到大家更好地向团队展示原型稿的内容，避免遗漏功能、各 种异常状态和各种细节问题等等。同时也欢迎大家指点交流。 人人都是产品经理（ ）中国最大最活跃的产品经理学习、交流、分享平台