来,我们先瞅瞅

1,做交互原型会用到哪些工具?

1,菜单栏 - 原型-菜单下的所有功能

2,菜单栏 - 视图 - 显示原型

3,工具栏 - 链接、热区、预览、cloud  (这4个工具)

2,工具栏里没这4个工具?

来,我们把它找出来: 鼠标放在工具栏处- 右键 -自定义工具栏

找到(链接、热区、预览、cloud )这4个工具 - 拖拽到顶部默认工具栏上 - 完成

3,页面之间是怎么跳转的?

方法1:通过工具栏上的链接工具 / 快捷键W

选中A画板上的元素(图层/图层组) - 点击链接工具 / W - 点击B画板,就完成了A到B的跳转。

方法2:通过热区/快捷键H(热区就是可点击区域,点击这块区域就会跳转)

点击 - 热区工具 / H - 在B画板上画出热区。然后把链接线拖拽到A面板。  这样,就完成了B到A画板的跳转。

4,如何预览交互效果?

工具栏上 - 预览按钮/快捷键 ⌘+P   ⌘+W 关闭预览窗口

5,连接线太多太乱,怎么办?

有个小方法,可以减少返回链接线(如上图蓝色线)的穿梭。

就是

所有的返回/关闭 链接都可以用:菜单栏 - 原型 - 链接到上一个画板来代替

“链接到上一个画板”就是,自动返回到来的画板。从哪来,回哪去。

设置“链接到上一个画板” 后,会有个黄色的返回icon出现在画板左上角。

用“链接到上一个画板”功能,好处:

1,页面多时,不用在千里迢迢的寻找上一个画板拖拽链接线。

2,如果是在热区上执行的这个命令,那么热区可复制到其他画板上,进行复用。

6,页面跳转时,怎么做画板从左/右进入的动画?

A元素-链接到 B画板后, 点击A元素,右侧面板中可选择动画样式(从右侧、从底部、从左侧、从顶部移入画板)不想要动画的话,可点击第一个按钮-无动画

7,滚动时,如何固定图层位置?

点击要固定的图层 - 右侧面板  调整尺寸(靠边固定 - (顶对齐 就固定 左、上、右)  (底对齐 就固定 左、下、右)) - 勾选 滚动时保持固定

8,链接元素 如何转化成热区?

选择元素 - 原型 -转化为热区

9,如何快速找到目标画板?

A链接到B,如何快速找到B?

只要点击A元素 - 原型 -定位到目标画板。  B画板就会自动显示在屏幕居中位置。

10,如何删除链接?

1,元素删除链接:

选择元素 - 原型 - 移除选项的链接   (第2种方法:选择元素- W - esc )

如果想一键清除所有链接线,可框选所有画板 - 原型 - 移除选项的链接

2,热区删除链接:

点击热区 - delete   (按shift 可多选)

11,如何设置预览时的默认首页

假如把ABCD四个画板做成了一套交互原型,点击B画板预览,那么默认显示的就是B ,点击C画板预览,默认显示的就是C,这时候,如果把A画板设置为 - 画板起点 -那么,之后不管你是点B,还是C,预览时第一个页面显示的都是A

操练起来:

做好一组交互链接后,选择(要作为首页的)画板 - 原型 -设画板为起点(设置后,画板左上角会出现一个小旗子图标),有旗子的画板默认为每次(重新)预览启动看到的第一个页面。

12 ,有几种演示效果的方法?

1,Sketch软件内部预览

2,Sketch Mirror APP 内实时预览

(USB连接或同局域网内预览操作)

3,Sketch Cloud

云端团队协作预览

(登录Sketch Cloud后 - 将项目文件上传至官方云端 - 邀请项目成员及权限设置-就可实现在线多人预览啦!)

小提示:

1,交互动态必须在“画板”上进行,画板外的图层,是没办法做交互的。

2,显示/隐藏原型交互线  control+F

3,做链接时,最好一去一回, 就是A跳到B, B返回A,这样算是一个完整的来回。

养成这个习惯,页面多的时候也不会遗漏。

sketch如何做设计稿交互_sketch 交互原型制作方法相关推荐

  1. sketch如何做设计稿交互_Sketch交互设计入门到精通教程

    随着移动互联时代的发展,交互设计师的职位市场需求愈加巨大.而目前,市面上的UI交互设计师相对较少,其就业前景非常乐观. 课程介绍 本套<Sketch交互设计入门到精通教程>,将从交互设计师 ...

  2. sketch如何做设计稿交互_用 Sketch 绘制一份美观的交互稿

    经常有人问我:"你的交互稿怎么画得那么好看?能不能教教我?" 其实,我更期待听到的是:"你的方案怎么做得这么好?能不能教教我?" 毕竟,交互稿只是需求的沟通工具 ...

  3. sketch如何做设计稿交互_设计师用Sketch做设计稿时是用1倍图还是用2倍图做

    相信很多人跟我一样一直在纠结到底用一倍图做ui设计还是二倍图?国外的设计师喜欢用一倍,国内的设计师比较多用二倍,实际上两种选择都有自己的好处,今天就打算给大家抛砖引玉一下. 375x667px :一倍 ...

  4. sketch如何做设计稿交互_《动静之美——Sketch移动UI与交互动效设计详解》历程...

    随着移动互联网的迅速崛起,对移动产品界面的设计质量和迭代速度都有了更高的要求,市面上开始涌现出一批专门针对移动UI设计的软件,Sketch便是其中的佼佼者.Sketch因其强大的功能以及极低的入门门槛 ...

  5. sketch如何做设计稿交互_交互设计师是做什么的——交互设计的历史、现状和未来...

    交互设计是定义.设计人造物系统的行为的设计领域,它定义了两个或者多个互动的个体之间交流的内容和结构,使之互相配合,达成某种目的.--百度百科 交互设计师是以人的需求为导向,理解用户的期望和需求的同时, ...

  6. sketch如何做设计稿交互_设计干货 | Sketch 的交互插件强势更新,再也不用为跳转的事发愁了!...

    可能很多人对 InVision 是做什么的不太清楚,这里稍微科普一下,除去需要 VPN 来提速(不是被墙),这家公司应该是目前所有原型工具中最优秀的,没有之一.无论是对于产品的理解.体验的设计,还是对 ...

  7. sketch如何做设计稿交互_当屏幕可以折叠,交互设计怎么做

    折叠屏终端上市,无形中增加了电商平台的开发运维成本.笔者根据折叠屏的特点,提出了三种交互方案,看看如何在折叠屏上展示界面. 2007年,当乔布斯举着没有物理键盘的iPhone向全世界展示他的新发明时, ...

  8. sketch如何做设计稿交互_做交互设计不可不知的十大原则

    交互界最知名的"尼尔森十大可用性原则",或者称之为"尼尔森十大交互原则",这是尼尔森(Jakob Nielsen)博士于1995年提出的非常经典的十大准则,虽然 ...

  9. sketch android设计,安卓手机预览sketch设计稿的偏方

    在Android和iOS都使用同一套设计风格的情况下.我见过很大部分的视觉设计师,都喜欢并擅长从iOS端开始设计工作. Android和iOS的交互方式大大不同,设计风格也各有千秋.甚至在某一个官方设 ...

  10. sketch设计android,安卓手机预览sketch设计稿的偏方

    在Android和iOS都使用同一套设计风格的情况下.我见过很大部分的视觉设计师,都喜欢并擅长从iOS端开始设计工作. Android和iOS的交互方式大大不同,设计风格也各有千秋.甚至在某一个官方设 ...

最新文章

  1. Unity UGUI获取鼠标在屏幕的准确点击位置
  2. Facebook 田渊栋:NeurIPS 2020 中了两篇,感觉还算不错
  3. docker redis集群搭建_Redis集群模式搭建
  4. RocketMQ读书笔记7——吞吐量优先的场景
  5. Git 本地仓库管理
  6. 深入浅出mfc学习笔记——六大关键技术之仿真_运行时和动态创建
  7. excel调用python编程-如何在excel中调用python脚本
  8. android万年历有什么作用,基于android的万年历农历怎么算
  9. .Net读取XP文件夹中的Thumbs.db文件
  10. 问题 seata_架构设计 | 基于Seata中间件,微服务模式下事务管理
  11. java移动端接口测试_走进Java接口测试之测试框架TestNG数据驱动(入门篇)
  12. 11-Mybatis 延迟加载策略
  13. Java Swing框架实战
  14. wordpress评论框_如何通过过滤和阻止它们来抵御WordPress垃圾评论
  15. 有谁知道千千静听中的波形特效是怎么做的?
  16. ufs 固态硬盘_看够了UFS/eMMC纠纷 再看笔记本固态硬盘速度的区别吧
  17. PHPer 为什么会被 Javaer 鄙视?
  18. STM32学习笔记--I2C
  19. 颜色恒常性评价指标——角度误差【弧度角度】避坑
  20. java中斜杠/和反斜杠\

热门文章

  1. 在线有道翻译突然页面变了?
  2. 利用vtk实现管状模型沿中心线切割平面
  3. 自媒体剪辑中常用的premere快捷键
  4. 宏碁Aspire 4560试用手记
  5. 解决OneNote for Windows 10 不能打开onedrive上已有笔记本问题
  6. 单目结构光三维扫描仪的标定与三维重建
  7. 简单典型二阶系统_关于石墨烯结构的典型拉曼光谱特征,这一篇讲得非常透彻!...
  8. 在用mybatis时报错java.lang.AbstractMethodError: com.mysql.jdbc.ServerPreparedState
  9. 《炬丰科技-半导体工艺》 砷化硼热管理
  10. 机器学习数据集划分方法