页面状态列表

工作区右侧第一个标签即是页面状态列表,快捷键是“4”。页面状态列表展示的是某一页面内包含的所有状态,使用页面状态可以帮助你实现页面内交互效果。

页面状态和页面的关系:

页面状态从属于某页面,原型内每个页面下都可以新建若干状态,不同状态内的组件数量是一致的。默认状态是页面的基本样式,进行相关交互操作后,可以切换到其他状态或页面。

状态可以连接至其他页面,但页面不支持直接连接至状态。

状态内组件的移动方式为“神奇移动”,而页面内移动方式为系统内置动效,如移入、弹入等。

*注:“神奇移动”是指系统会自动生成组件由初始位置移动到最终位置时的过渡动画。

页面状态的特性及使用方法:

页面状态的特性:

  1. 一致性:同一页面内,不同状态下的组件数量固定的、一致的,增删组件会对全部状态产生影响;页面内新建状态与当前所选状态的页面布局一致。

  2. 独立性:各状态间组件位置或外观的修改都是独立的。

使用步骤:

  1. 点击「+ 新状态」创建一个与默认状态布局相同的新状态;

  2. 选中状态二,对某组件位置或外观进行修改;

  3. 将「默认状态」内组件链接至新状态即可;

  4. 双击可自定义状态名(除全局及默认状态)。

什么是全局状态(状态0)?

简介:

全局状态,顾名思义就是在此状态内对组件进行修改,会对全局(也就是此页面内所有的状态)造成影响。

由于页面状态的一致性(组件数量一致),在新建多个状态后,只能通过选中全局状态来添加新组件;在全局状态中,对某组件的修改会对当前页面内所有的状态造成影响。

在何种情况下使用:

  1. 增加或删除某组件时

  2. 想统一修改状态内某组件外观、位置时

使用方法:

打开页面状态列表,点击「0 全局状态」后即可添加新组件或统一修改某组件外观、位置。

*注:全局状态中的组件不可以设置链接。

页面状态的使用规则:

新增状态:

  1. 默认状态 + 新状态 = 复制默认状态;

  2. 状态3 + 新状态 = 复制状态3。

新增组件:

(默认状态 切换 全局状态)+ 新组件 = 以默认状态布局为准增加新组件;

(状态3 切换 全局状态)+ 新组件 = 以状态3布局为准增加新组件;

统一修改某组件位置或外观:选择“全局状态”后直接调节组件即可;

页面状态快速上手指南:

跟随以下课程内容,快速掌握页面状态的使用:

第一期课程#页面内交互怎样玩#apple watch

第二期课程#页面内交互怎样玩#Material Design中的FAB交互效果

第三期课程#页面内交互怎样玩#—FAB效果之播放器

results matching ""

    No results matching ""