赞助商
立即赞助

大厂怎么做设计?免费送你腾讯高级设计师自用的交互稿模板!

交互设计3年前 (2021)发布 流光
3.3K 0 0

作为交互设计师,天天画的就交互稿了。而于很多新手交互设计师以及想转做交互学们来说,定都常想知大厂交互设计师画出来交互稿具体是什么样子。

但视觉稿不同,交互稿里面体了太多产品本身的逻辑,难免涉及到一些敏感内,所以具体的交互稿不太合直接分享,这就比较尴尬的问题了。

过,这妨碍我为你们做一份交互稿模板。一我自己也用,二可以帮家,何乐不。

但我必须重点强调一句话:框架是死的,人是的,一定要拘泥于某种形式,你可根据自己的需要自由修改。

模版一:PPT  型的分页交互稿

第一个是 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

大厂怎么做设计?免费送你腾讯高级设计师自用的交互稿模板!

这我所总结的「交互设师技能树」。

大厂怎么做设计?免费送你腾讯高级设计师自用的交互稿模板!

欢迎关注作者的微信公众:「落羽敬斋」

大厂怎么做设计?免费送你腾讯高级设计师自用的交互稿模板!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

按钮在产品界面中是非常重要的元件之一,按钮作为用户引流和行动触发来说都是至关重要的。如何把按钮设计做到最好,是设计师...
ui设计
从少年到大叔,只用了5年,还记得我刚入职的第一份工作的导师和我说:「设计没有什么捷径,有的只是多看、多想、多做,逻辑思...
ui设计
我们在进行设计的时候,往往遇到以下的场景: 这就是信息的无限性和手机屏幕的有限性之间的矛盾,如何把信息合理的展示给...
App设计
@Daidai丶呆 :本篇文章我从「召唤类按钮」与「工具类按钮」两个角度详细拆解了其内在逻辑,希望帮到各位更好理解按钮设计逻...
交互设计
医疗行业的交互设计,跟其他行业有何不同?有什么要特别考虑的点?设计师应该注意哪些方面? 我们请来腾讯医疗健康事业部-万...
ui设计
写文章也像做一款产品一样,随着技术的进步、知识的迭代要进行合理的优化与更新。过去的 2 年里,移动设备的更新迭代让振动反...
iOS振动
从接触交互设计到现在也有一段时间,而这是第一次比较全面的接触游戏交互,网上也蛮少有游戏交互的实习体验,目前为猪厂用户...
交互设计
在经典的尼尔森十大启发式当中,「系统状态可见性」可以说是如今交互设计领域当中,最为重要的原则之一。通过向用户展现当前...
交互设计