Sketch 100版本按钮交互和可滚动交互实例01

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

Sketch 100版本按钮交互和可滚动交互实例01_2.jpg

Sketch 100版本发布,原型交互制作能力获得全方位增强,下面将为您详细解锁这些原型交互的新功能:

1.悬浮与按压交互

过去的原型虽可模拟点击/Tap行为,但在诸如工具提示、预览卡片等场景中,则缺乏与真实体验一致的交互表现。Sketch 100推出了悬浮(Hover)和按压(Press)两种全新的触发方式。

下面我们为”watch movie now“按钮添加一个hover和press状态,先绘制好两个按钮的覆盖层,这里注意两个按钮的原型属性要是覆盖层。

Sketch 100版本按钮交互和可滚动交互实例01_3.png

我们先来添加hover状态,将白色按钮链接到hover按钮,图层可见性选择默认。交互操作选择“显示”,触发选择“悬停”。然后对齐好按钮的位置。这样悬停的状态就制作好了。

Sketch 100版本按钮交互和可滚动交互实例01_4.png

接下来我们添加press状态,将hover按钮链接到press按钮。图层可见性选择自定义“显示”,触发选择“按下”。所以hover按钮有两个触发动作一个是“悬停”,一个是“按下”。同样的对齐好按钮位置,这样按下状态就制作好了。

Sketch 100版本按钮交互和可滚动交互实例01_5.png

点击预览按钮就可以得到下方的预览效果了。

2.可滚动交互

本次Sketch的更新除了按钮交互外,还更新了“可滚动交互”,这类交互可用在堆栈卡片和地图等使用场景。例如:

1》利用横向可滚动交互制作可滚动卡片区域

制作好横向滚动的卡片,将卡片组设置为组件,这样方便后期修改卡片的内容。

Sketch 100版本按钮交互和可滚动交互实例01_10.png

选中卡片组件,点击原型-设置可滚动,选择水平横向滚动即可。并将滚动的蒙版与画板边缘对齐。

Sketch 100版本按钮交互和可滚动交互实例01_13.png

Sketch 100版本按钮交互和可滚动交互实例01_14.png

点击预览然后用双指在触控板横向操作就可以看到效果了。

2》利用四周滚动制作地图效果

准备好地图蒙版组,点击原型-设置可滚动,选择四周滚动。

Sketch 100版本按钮交互和可滚动交互实例01_15.png

点击预览然后用双指在触控板操作就可以看到效果了。

注意:如果用鼠标是无法预览可滚动的交互效果的。

Sketch 100的交互原型更新内容还可应用于更多场景,我们将在近期更新更多的交互使用场景,敬请关注!

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作