响应式调整功能可以实现智能调整组件大小，适应不同设备尺寸，以便查看设计内容适配效果，不需要按多种设备尺寸重新设计。

使用软件：即时设计

临摹用时：30min

学习要点：了解「响应式调整」、「变体」和「原型功能」方面的内容。

设计知识点

响应式调整

响应式调整功能可以实现智能调整组件大小，适应不同设备尺寸，以便查看设计内容适配效果，不需要按多种设备尺寸重新设计。响应式解决的不仅是「视觉效果」的问题，而是「用户体验」的问题，它包含了性能、交互、效率等多方面内容，也就是说，对于一个线上的响应式页面，我们不仅要关注视觉上看到的，也要关注我们操作、使用时的感受，这些综合因素最终影响着用户使用时的效率与体验。

添加响应式调整

选中画板中的图层，选择「添加」，添加响应式调整。

响应式调整可分为两类：水平方向响应式调整、垂直方向响应式调整；

选择响应式调整图示或选择下拉菜单内容即可对响应式调整方式进行选择。

点击此链接查看「响应式调整」的功能介绍：https://js.design/tutorial/guide/location&layout/Resize

变体

变体是整理和使用引用组件的一种全新方式，可以帮你按类型、尺寸、样式等对引用组件进行统一管理，使用时在右侧快速切换组件类型即可完成切换。

创建变体

变体是对引用组件统一管理，只需选中引用组件后，在右侧属性面板中点击「添加」即可完成创建。

点击此链接查看「变体」的功能介绍：https://js.design/tutorial/guide/variant/Variant

原型功能

「原型功能」可以让你在设计稿中直接添加交互设计，帮你更清晰地梳理文件流程、构架、模拟用户交互方式。

原型模式

添加交互事件前，首先需要选择「右侧属性面板 -> 原型」进入原型模式。

添加原型设计

进入原型模式后，需先选中「画板内图层」或「画板」，才可以添加交互事件。根据触发形式的不同，原型可分为两类：人工触发、自动动画。点击此链接查看「原型设计」的功能介绍：https://js.design/tutorial/guide/proto/Prototype

Powered by Froala Editor