腾讯高级设计师分享:交互设计师必备模板!

腾讯高级设计师分享:交互设计师必备模板!

作者:我是产品汪 发布:2026-09-11 11:36 0浏览

回答 共1个

作为交互设计师,天天画的就是交互稿。而对于很多新手交互设计师以及想转行做交互的同学们来说,一定都非常想知道大厂的交互设计师画出来的交互稿具体是什么样子的。但和视觉稿不同,交互稿里面体现了太多产品本身的逻辑,难免设计到一些敏感内容,所以具体的交互稿不太适合直接分享,这就是比较尴尬的问题了。不过,这不妨碍我为你们做一份交互稿模板嘛!一来我自己也在用,二来可以造福大众,何乐而不为呢!但我必须强调:框架是死的,人是活的,不一定要拘泥于某种形式,你可以根据自己的需要自由修改。模版一:PPT型的分页交互稿第一个是PPT型的分页交互稿。这个样式最早是从腾讯CDC团队流传下来的,我在第二家公司的时候就从他们的博客中看到过,当时还用做过一个模板。而我现在所在的团队用的也是这个,因此我过来后就自己重新用做了一版,方便以后使用。这一块我也定义了元件,你可以直接复制一行,然后修改里面的内容,“更新内容”的文本支持多行输入。这种分页型的文档一定要有目录,备注好每个模块对应的页码,否则十几页看下来都晕了,每次想找到对应的界面还得重新翻一遍。具体的内容页面才是交互稿的核心,一般会用小气泡和箭头进行标注,然后在右侧用对应的数字和它们对应,写下详细的交互说明。其中最重要的气泡我当然也做了元件,选中之后直接在右边修改数字就好。使用这套模板做好交互稿后,使用->PDF即可将交互稿导出成PDF文档。我很喜欢这个格式,比起PPT来,PDF在任何平台都可以很通用,包括手机、Mac不用特地装什么软件都能很好地打开。模版二:长图型长图型的流程交互稿另一种是更常见的交互稿形式,这也是我进腾讯后的这几年一直在用的格式。如果你曾经用过上文介绍的PPT型模板,你一定会发现:它的好处是PDF分页格式非常整齐,比较适合一次性做一个大产品的交互功能介绍,而不适合小功能的频繁修改。而今天介绍的这第二种,则是更加轻便快捷的类型。1.内容模块这种长图型的交互稿,优点很明显:你的发挥空间很大,可以直接在一片空白上尽情地阐释每个界面、每个流程,展开说各种细节;分享和阅读都很方便,最终格式是一张PNG长图,随手一发就能给老板、产品经理和其他相关同事,电脑手机都能查看;不存在分页和各种格式限制,所以画起来和修改起来都很快,小迭代要的就是效率。它的结构分为:交互稿标题、日期:按照项目、模块、功能的方式命名(如:电脑管家V12-清理垃圾-深度清理图标化改版),可以最大程度地规范交互稿名称,让其他人很容易理解交互稿涉及的是什么内容;需求背景:简单介绍为什么要做这次设计,出发点是什么,遇到了什么问题;主要界面:这次设计中,涉及到的所有主要界面,先陈列出来方便大家快速评审和讨论,视觉接手后可以根据这些来开始风格设计;流程说明:有了主要界面后,我们还可能需要对一些操作流程进行说明,比如怎样发送一条语音消息,怎样删除一条会话等等;异常状态:最后还要记得检查一下,每个界面在没有内容时的空状态、断网时的异常状态,弹出各种通知的位置等等,千万不要等到开发同学找你的时候才想起来。上面所说的,就是一份交互稿的常见内容模块了。2.模板使用(该模板是专门给Mac平台的用的,请注意!)里面的每个模块我都做了元件,你只要选中就可以在右侧更改内容了。是不是很心动?源文件下载写在最后感谢大家的阅读,末尾做个小广告,我的新书《交互思维:详解交互设计师技能树》已上市,这是我自己九年多来做交互设计师的经验总结,也是市面上第一本详细介绍交互设计师所应该掌握的职业技能的书,很适合所有希望了解交互、学习交互的设计师和产品经理。同时书中也有我进腾讯的成长故事,以及一些个人工作和学习方法的分享,绝对物超所值!(寇敬),男,33岁,腾讯高级交互设计师、腾讯学院认证讲师,9年工作经验的资深互联网人,曾任MIG桌面安全产品部轩辕设计组组长,目前在腾讯游戏工作室负责《乐高无限》创造型沙盒游戏的用户体验设计。负责过的产品有腾讯电脑管家、加速小火箭V2.0、腾讯手游助手、腾讯网游助手等。曾在OPPO手机、金蝶软件等企业工作,有着、移动端等多平台的丰富设计经验。新注册用户即可获得墨刀高级企业版的15天免费试用!开始体验一下吧!

0赞同

2026-09-11 11:36:03