• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 我们拿到了InVision Studio 的内测资格,设计师们关心的都在这里

我们拿到了InVision Studio 的内测资格,设计师们关心的都在这里

作者:喜马拉雅XUED 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含InVision Studio,sketch,ui设计,界面组件,神器推荐,设计软件等相关知识,喜马拉雅XUED希望在学习及工作中可以帮助到您

为什么说 Studio 是最值得期待的设计工具?因为这是一款集成了视觉设计,快速原型,动效制作,团队协作于一体的全能设计工具。得益于移动互联网的快速发展,Sketch 最近几年的发展也是顺风顺水,近乎行业标杆,价格也由最初的 $99 (大版本内的) 一次性付费,变成了 $99/year 的订阅付费。由于 Sketch 的先发优势,即使后来者如 Figma、Adobe XD 是如此优秀然而也并没有搅局成功,那么随着 Studio 的到来,UI 设计圈即将迎来怎样的变化让人期待。

知名设计协作服务提供商 InVision 于2017年10月18日放出了新一代设计软件 Studio 的宣传视频并开放内测申请,团队原计划于2018年1月发放 Early Access,由于某些原因延期至3月份。另外,由于多达20多万的申请人数已经远远超过官方预期,转而实行分批随机发放。

机智的我们使用了多个 Email 在官宣当天便申请内测,经过半年的等待, 终于拿到了期待已久的 Early Access,本文将基于版本 Version 0.10.40 展开介绍 Studio 的各种特性。

一、视觉设计

打开 Studio,首先弹出的是欢迎窗口,可以看到右侧列表里会出现你最近打开的 .sketch 文件。没错,Studio 能够兼容 Sketch 的文件格式,不过当前还不能做到完美兼容,比如导入我们常用的带有 Symbol 的 Sketch 文件时,Symbol 将无法显示。

进入 Studio,页面布局和 Sketch 类似,也是 macOS 上较为常见的布局样式,左侧图层列表与组件库,顶部的工具栏,右侧的检查器。拥有暗色和亮色两套主题是个比较好的设计。一来在不同环境光下选择不同的主题能帮助缓解视觉疲劳,二是根据不同色彩的设计稿选择对比更舒适的主题也更容易专注。(Sketch 也有改暗色的付费插件,访问 midnightsketch.com)

Studio 作为后来者,在交互、功能以及快捷键上很大程度借鉴了 Sketch, 是否抄袭见仁见智,但这么做的好处是很大程度降低了学习成本,方便设计师迁移至 Studio,如果你精通 Sketch、XD,那么 Studio 对你来说上手将会相当容易。

我们尝试做了四张简单的页面,在这几张页面的绘制过程中,Studio 基本能满足常用的功能需求,比较遗憾的是对位图的编辑功能还不丰富,比如基本的模糊,裁剪,投影,混合模式等暂不支持。Studio 当前 Bug 较多,流畅度一般,图片边缘渲染精度不高,抗锯齿效果有待加强,距离成为主力的设计工具还有一段路要走。但如果你是产品经理或交互设计师,那是完全够用的,可能还会有惊喜哟。

Studio 也提供类似 Sketch Mirror 一样的预览 APP(安卓暂不支持预览仅可查看线上项目),在 iPhone 上预览设计稿暂不支持数据线连接,只能通过 WiFi,那么问题来了,在复杂网络环境下(比如在有上千台设备同时在线的公司内网)的刷新有极大延迟,跟 Sketch Mirror 早期类似,相信后面会支持数据线连接来预览。

二、动效与原型设计

早在2016年,InVision 收购了一款名叫 Silver Flows 的工具,这是一款 Sketch 插件,能在 Sketch 里实现原型设计(页面跳转,转场效果,调用iOS系统控件等),被收购时,Silver Flows 还处于内测阶段,而后做功能阉割后整合在 InVision Craft 插件内,那么现在也将顺其自然的集成在 Studio 中。

说起动效制作,大家首先想到的必定会是强大而性感的 After Effect,然而 Studio 也不弱,虽比不上 AE 的全能,但胜在轻量,易上手。Studio 的动效实现原理和 Keynote 的「神奇移动」颇有几分相似(同时也类似 Principle),通过2个画板来固定一组动作的首尾关键帧,同一元素会自动补全中间的过渡帧,非同一个元素会以渐隐渐现的形式展现。

我们通过上部分的4张图片,制作了一组动效来演示喜马拉雅用户在购买付费专辑时的试听与支付过程。动效中用到了遮罩,变形,位移,缩放,旋转,渐隐等常见效果,可以看到 Studio 是可以轻松完成的,不过偶尔会出现 Bug(比如2个画板之间的同一个元素不能识别导致无法链接)。而眼尖的朋友可能发现了,动效中的封面图在矩形与圆形切换的过程中,画面会出现卡顿。

在时间轴编辑面板里,可以对图层逐个编辑时间关系,在预览时,最慢可选择0.1倍速播放,方便你观察调整动效细节。Studio 也支持动效缓动节奏的调整,自带 POP 弹性效果,让你告别 AE 表达式。不过目前使用下来的感觉是缓动调节在灵敏度和精度上距离 AE 还有一点差距。

△ 触发条件与缓动调节

△ 连接页面跳转

三、团队协作

协作是 InVision 的老本行,早期凭借优雅的产品设计,强大的原型能力,且宣称永久免费等优点俘获了一大批用户(后更改为1个项目免费),现在我们可以通过 Studio 将设计稿上传至 InVision 服务器,随后即可在 Web 端使用协作功能了。

Tips:Sketch 用户也可通过官方插件直接上传设计稿。

在 Web 端,我们同样可以查看动效与页面跳转,同时还具有组内成员讨论与标注功能(标注里包含参数属性,切片,CSS代码以及文件图层),对需要远程协作的团队来说会相当方便,唯一的缺点是服务器在国外,由于没有国内 CDN 节点的缘故,访问速度较慢,有科学上网的加成会比较顺滑。

△ Web端播放动效

△ 成员讨论,添加批注

△ 标注,CSS代码与切图

在 Web 端里还有「随手画」的功能,方便大家在脑暴时做快速原型工具阐述想法。

比较遗憾的是,目前的版本并没有找到官方视频里宣传的「共享设计系统」的功能,视频截图可以看到,该功能看上去类似程序员们使用的 Git,通过 Pull 拉取的方式来更新规范化的设计组件,集中管理的方式将大大方便大型 UED 团队的设计规范版本控制,且组件库将会提供角色管理与权限管理,让不同项目成员互不打扰。

四、有待完善与已知 BUG

当前版本还不支持安装第三方插件,不过官方承诺会开放丰富的公共 API 给开发者。

缺少了三角形、星星、多边形、直线、箭头等形状工具。

自家 Craft 插件也暂不支持 Studio;暂不支持按最近的操作再制;暂不支持版本控制;对齐像素偶尔失灵;暂不支持形状图层填充位图;不能像 Principle 一样导出动效视频或 GIF。

官方宣称支持响应式设计,试用下来好像功能不完善,不支持同时固定左右或上下边距。

没有类似 Adobe XD 的跳转路径图,当修改跳转逻辑较为复杂的文件时可能会难以定位到,也不方便他人二次编辑。

对位图编辑的支持暂时一般,比如基本的模糊、裁剪、添加投影、混合模式等都还不支持。

目前不支持导入 Svg,但是可以通过 Sketch 中转后使用 Svg 素材,也不支持 Svg 切片导出。

中文字体无法修改字重,且无法通过手机预览,某些特殊字体在电脑上的预览也无法正常显示。

五、问与答

1. 目前对 Sketch 的兼容性如何?

官方未给出完整的不兼容属性列表,目前已知不兼容 Symbols,以及部分未知属性不能完全还原(也可能是 Bug)。

2. 怎么申请内测资格?

访问 https://www.invisionapp.com/studio ,填写邮箱即可。

3. 是否支持中文或多语言?

暂时仅支持英文。

4. 是否支持 Windows?

即将支持(开发中)。

5. 软件是否收费?

未知,内测期间免费,官网也注明会永久免费(按 InVision 的套路,未来大概会在功能限制下免费吧,当然收费也是无可厚非的)。

六、在哪里下载Studio

好消息,我们发现即使没有获得 Early Access 邀

您可能想查找下面的文章:

  • 我们拿到了InVision Studio 的内测资格,设计师们关心的都在这里

相关文章

  • 2018-08-23这7种设计误区,会影响网页内容的体验
  • 2017-08-06网页中使用任意字体之实际操作附演示
  • 2018-08-23超干货!如何利用记忆心理学提高用户体验?
  • 2018-08-23做好这个交互文档细节,让你和工程师的合作效率提高50%
  • 2018-08-23产品需求一直不能落地,还好前辈教我这个流程
  • 2018-08-23高手带你读经典!我从《纽摄》获得的30条手机摄影启示
  • 2017-08-06iframe在IE6下出现横向滚动条的解决方案
  • 2018-08-23UCAN 干货总结!阿里设计如何助力设计产业升级?
  • 2018-08-23从字盲到字体达人!五分钟教你学会查询+识别不认识的字体
  • 2018-08-23查遗补漏!网页设计过程中需要注意的12个常见问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • http请求与响应全过程
    • 网页设计中的文字的大小的搭配的方法 小文字,大体验
    • nodejs extend包
    • 学会这两招,快速提升设计师的作品集格调!(实例演示)
    • 复制和粘帖是封装的大敌
    • 用PS这个黑科技,轻松搞定视觉设计的团队协作!
    • 做设计八年后,我发现设计最难的是分寸
    • 动手试试!手把手教你如何适配 iPhone X
    • 内部教程!超详细的支付宝设计规范之线上字体篇
    • 从历代iPhone 官网设计,纪念 iPhone 诞生十周年

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有