• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > Sketch 49 的交互原型新功能怎么用?来看这篇教程!

Sketch 49 的交互原型新功能怎么用?来看这篇教程!

作者:UIBANG 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含sketch,sketch教程,sketch新功能,经验分享等相关知识,UIBANG希望在学习及工作中可以帮助到您

Sketch49 交互原型新功能,对于 UI 设计师们来说是不是新福利呢?我们一起看看!

看到2月28日 Sketch49 新版本发布的消息,打开了官网看到了最新的版本更新视频,确实还是挺激动的。UIBANG 来和大家一起看看 Sketch49 的版本更新了哪些新功能吧。

一、交互原型功能

画板( Artboards )和热区( Hotspot )链接实现页面间的跳转,实现动态交互原型(类似交互软件 Marvel 中的热区链接?)。

Sketch49 版本中的交互原型预览图(话说这线条敢不敢再乱点,页面多了眼会瞎么?相比之下 Principle 还算很好了)我觉得这也是 Sketch需要解决的一个使用体验问题,期待后续版本可以有好的解决方案。

二、便捷的效果预览

设计制作的交互原型,可以通过三种方式预览查看。

1. Sketch软件内部预览(类似于 Principle 中的预览窗口,或 xcode 中的模拟器)。

2. Sketch Mirror内实时预览( USB 连接或同局域网内预览操作)。

3. Sketch Cloud 内实时预览(登录 Sketch Cloud 后可将项目文件上传至官方云端,实现在线多人预览,并可进行讨论。)

三、其他更新

  • Sketch Cloud 中文件可安装为 Libraries。
  • 增强复制粘贴大型文档性能。
  • 改进? EPS/SVG 格式文件 导入。
  • 渐变锚点改为单击增加。
  • 图层列表拖入画板内不再是位图。
  • 优化缩略图性能新增原型设计模板及修复已知 Bug。

四、交互原型功能教程

1. 页面链接跳转(也就是画板之间的切换)

更新到 Sketch49 后,在工具栏右侧会发现「Link」功能按钮。

选中画板中的一个对象后可激活「Link」按钮(仅选中画板无法创建链接)。

创建 Link 链接后,我们会发现 Sketch 左侧图层矩形上的变化(多了一个曲线箭头,表示有链接)。

修改页面切换动效。

从左至右分别是:无 、向左切换、向右切换、向上切换、向下切换(第一个版本可能比较保守,没有太多动效选择)。

2. 如何取消链接操作

选中原有链接对象 — 矩形 ,右侧面板中可编辑链接。

或将 Target 修改为 none。

检测页面逻辑可以通过查看跳转目标验证。

3. 如何创建热区

在 Sketch 中 热区称为? Hotspot ,可以通过菜单栏中的 Insert(插入)找到,也可以使用快捷键 H。

在画板内鼠标左键圈出「热区」范围,箭头指向目标画板(页面)。

在自定义工具栏中可以为「热区」添加快捷入口。

4. 如何预览交互效果

Sketch 软件内部预览(黑屏的小伙伴请看文末说明)

连线操作完成后,点击 预览按钮。

Sketch Mirror 手机内预览(暂无 Android 版本,且无法像 Principle 缓存至手机内离线操作)

打开 Sketch Mirror,按照在 Sketch 内设置的交互操作即可。

当忘记操作热区时,会有红色线框提示。

Sketch Cloud 云端团队协作预览?

注册/登录? Sketch Cloud。

登录后可将当前项目上传至 Sketch Cloud 云端。

邀请项目成员及权限设置。

上传成功后可查看当前原型项目。

五、Sketch49 预览窗口「黑屏」怎么回事?

本人也遇到了这个问题,郁闷了很久,找了几个小伙伴一起帮忙测试,发现疑似问题是OS X 版本导致,我的 MacBook PRO(10.12.6 )可正常预览显示,家中的 iMAC(10.13.3)却一直无法连接。

但是暂没有看到官方解释,我也仅仅是个人猜测,也欢迎小伙伴们共同测试留言给我。

六、总结

本次 Sketch 更新的力度还是很大的,能看得出它在移动端设计上越加强大,真希望有一天能「统一六国」,UI 设计师们可能也不会那么折腾,那么累了。

欢迎关注作者微信公众号:「UIBANG」

uibangqr

「Sketch实用教程」

  • 《简单实用!七步学会用 Sketch 搭建复杂表格》
  • 《提高沟通效率!帮设计师记录修改位置的Sketch插件PinLog》
  • 《实用全面!教你用Sketch Libraries构建组件库/设计体系》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

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

  • 高手进阶技巧!全方位深入理解 Sketch 库(上)
  • 高手进阶技巧!全方位深入理解 Sketch 库(中)
  • 大公司如何做设计系统?24 个 Sketch 组件库源文件合集下载
  • 我们拿到了InVision Studio 的内测资格,设计师们关心的都在这里
  • 免费高效!用 Paddy 让你的 Sketch 学会自动排版!
  • 学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!
  • 两分钟认识一款把 Sketch 变成 Principle 的插件:Diya
  • Sketch 49 的交互原型新功能怎么用?来看这篇教程!
  • 简单实用!七步学会用 Sketch 搭建复杂表格
  • 新鲜出炉!五个超方便的Sketch 48 新功能介绍

相关文章

  • 2018-08-23是谁剥夺了设计师的话语权?来看资深设计师的总结!
  • 2018-08-23自学水彩没你想的那么难,说说我是怎么自学的
  • 2018-08-23这个帮你改善睡眠的APP,是这样设计出来的
  • 2018-08-23写给UI新手的APP结构指南:用户引导和提示
  • 2017-08-06iframe在IE6下出现横向滚动条的解决方案
  • 2018-08-23如何用设计思维指导实际工作?这里有份超详细的解答!
  • 2018-08-23我们用这个设计方法,从零开始做出了「轻芒杂志」
  • 2018-08-23超实用!如何正确使用控件系列之提示框(Toast)
  • 2017-10-15node.js调试使用node-inspector
  • 2018-08-23用3个案例,让你学会移动端的长表单设计

文章分类

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

最近更新的内容

    • 新闻资讯类App 该如何设计?这儿有一份UX分析
    • 常用的几个单页应用程序网站分享
    • 「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard
    • UX专家如何做设计评审?来看这份深度总结!
    • ie6下关于html编码问题导致js出错css不被应用的解决方法
    • Web前端开发者必知的9个实用CSS属性
    • 2018年即将流行的交互设计六大趋势
    • 超实用!聊聊移动端跨平台开发的各种技术
    • 基础知识科普!目标导向设计之“情景场景”与“设计需求”
    • 让你的网站IE8浏览自动用IE7兼容模式

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

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