作为交互设计师,天天画的就交互稿了。而于很多新手交互设计师以及想转做交互学们来说,定都常想知大厂交互设计师画出来交互稿具体是什么样子。
但视觉稿不同,交互稿里面体了太多产品本身的逻辑,难免涉及到一些敏感内,所以具体的交互稿不太合直接分享,这就比较尴尬的问题了。
过,这妨碍我为你们做一份交互稿模板。一我自己也用,二可以帮家,何乐不。
但我必须重点强调一句话:框架是死的,人是的,一定要拘泥于某种形式,你可根据自己的需要自由修改。
第一个是 PPT 的分页交互稿,这个样式最早是从腾讯 CDC 团队流传来的,我在第二公司的时候就从他们的博客中看到过,当时还 InDesign 做过一个模。而我现在在的团队的是这个,因此我过来后就自己重 Sketch 做了一版,方后使。
1. 封面
封面很简单,就文档标题作者,顶部一通用的文档标题栏,面的内包括:
- 项目名称:尔法项目(示意)
- 页面标题:iOS 主界面框架(示意,根据每页的内行变化)
- 版本号:1.0(每修改一次都要 + 0.1,当然你可直接变成 2.0、3.0)
- 修改期:2018-07-24
- 页码:为当前页码和总页数
我在 Sketch 中为这个模中需要改的容都定义了 Symbol,如这个标题栏,你只要中之后,就可在右边的属性面中自定义里面的容。
2. 修订记录
订记录这页,记录了从文档立开始,更新主要内容,以及相关员,便后期交接时候应品经理、游戏策划和设计师查看。有时候交互稿更新是改小处地,如不备注会很难找到,可能以后你自己都会遗忘。
这块我也定义了 Symbol 元件,你可以接复制,然后改里内容,「更新内容」文本支持多输入。
3. 目录
这种页型的文档一定要有目录,备注好每个模块对应的页码,否则十页下来都晕了,每次想找对应的界面还得重新翻一遍。
4. 内容页面
具的内容页面才是互稿的核心,一般用小气泡和箭头进行标注,在右用对应的数字和它们对应,写下详细的互说明。
结构可以有多种,比如上面这种竖屏的界面可以是左右结构,如果是横屏界面还可以是上下结构等等,根据情况由调整。文字段落的式已经定义好了,直修改套用就行。
其中最重要的气泡也做了件,选中之后直在右边修改数字即可。
5. 导出方式
使用套模板做互稿,使用 Sketch 的 File -> Export Artboards to PDF 即将互稿导出成 PDF 文档。我很喜欢个式,与 PPT 相比,PDF 在任何平台以通用,包括手机、Mac,不用特地装什么软件能很地打开。
另一种是更常见的互稿形式,也是我几年进腾一直使用的式。
如果你曾经用过上文介绍的 PPT 型模板,你一定会发现:它的好是 PDF 页格式非常整齐,比较适一次性做一个大产品的交互功能介绍,而不适功能的频繁修改。
今天介绍这第,则是更加轻便快捷类型。
1. 内容模块
这长图型交互稿,优很明显:
- 发挥空间大,可以直在一片空上尽情地阐释每个界面、每个流程,展开说各种细节。
- 分享和阅读都很便,最终格是张 PNG 长图,能随手发板、品经理和其他相关事,电脑手都能看。
- 不存分页各种格式限制,所以画起修改起都很,小迭的就效率。
来看张基本样例:
它结构分为:
交互稿标题、日期
按照项目、模块和功能命名(如:电脑管家 V12 -理垃圾-深度理图标化改版),可以最大程度地规范交互稿名称,让其他很容易理解交互稿涉及是什么内容。
相关负责
应品经理,交互稿作者,便评审时或者交接后找。
需求背景
简单介绍为什么要做这设计,出发是什么,遇到了什么问题。
主要界
这设计,涉及到所有主要界,先陈列出来便大家快速评审和讨论,视觉接手后可以根据这些来进风格设计。
流程说明
有了主要界后,我们可能需要些操作流程进说明,比如怎样发送条语音消息,怎样删除条会话等等。
异常状态
最后要记检查下,个界在没有内容时空状态、断网时异常状态,弹出各知位等等,千不要等到开发学找你时候才想起来。
面所的,就一份交互稿的常见内模块了。
2. 模板使用
该模板专门给 Mac 平台的 Sketch 用的。
载后(载方式见末),打开你会看到这个界面:
里面的每个模我都做了 Symbol 元件,你只要中就可在右侧更改容了。
比下面的文档基信息:
我还把能用到的各种字大小、颜、对齐方式做成文字样式:
选中文字,在右下拉框中选择你要的样式就。
互稿用的是黑白灰,还有蓝为标注。
我一直用的几种,够用。
是不是很心动?别着急,先把个 Sketch 文件存成 Template(模板)。
,你就以在新建文件时,选择从模板处新建,直接用个模板开始画稿。
链接:https://pan.baidu.com/s/1p0Jc2iIFW223hiNvaf6tAQ
提取码:6qfj
作者:WingST(寇敬),男,33岁,腾讯高级交互设计师、腾讯学院认证讲师,9 年工作经验资深互联网,曾任 MIG 桌安全品部轩辕设计组组长,目前在腾讯游戏 NEXT Studios 工作负责《乐高限》创造型沙盒游戏用户体验设计。
负责过的产品腾讯电脑家 V11.0、加速小火箭 V2.0、腾讯手游手、腾讯网游手。曾 OPPO 手机、金蝶软件企业作, PC、Web、移动端多平台的丰富设验。
感谢家的阅读,末尾小广告,我的新书《交互思维:详解交互设师技能树》马就市了,这我自己多交互设师的验总结,也市面第一本详细介绍交互设师所应该掌握的职业技能的书,合所希望了解交互、学习交互的设师产品理。同时书中也我腾讯的故事,以及一些人作学习方法的分享,绝对超所 → https://item.jd.com/12576242.html
这我所总结的「交互设师技能树」。
欢迎关注作者的微信公众:「落羽敬斋」