(译)MaterialDesign(九)-Choreography

其他文章

运动中的Material在过渡中共享元素的交互来一起用户关注。
表面创建

交错创建的新曲面的编排。

径向反应

将用户输入与触摸波纹连接到表面反应。

(译)MaterialDesign(九)-Choreography_第1张图片

连续性

通过仔细选择跨过转换共享的元素的数量和类型,在转换期间保持清晰的焦点。

所有内容元素都是共享的

当表面扩大时,大量的元素在过渡期间应保持可见。

复杂的转换应该保持单个元素可见(见下文)。

来自此展开的卡片的所有元素形成扩展的卡片的标题。
极少的共享内容元素

当扩张表面时,如果在转换之后仅存在单个元件,则该元件应该是转换的焦点,控制所有其他元件。

将非共享内容锚定到单个共享元素的移动。

如果视图之间没有共享元素,则将所有交叉渐变元素固定到表面,垂直移动。 表面修剪他自己中的内容。

将所有非共享内容锚定到表面扩展的垂直运动。
无共享平面(不推荐)

如果没有公共平面在过渡中共享,新曲平面将从另一个位置进入屏幕,创建一个新的焦点。

多个共享元素

当在转换期间多个元素保持可见时,应仅包括最重要的元素。 一些元素可能在过渡期间消失,但是一旦过渡完成,它们就会重新出现。

(译)MaterialDesign(九)-Choreography_第2张图片
正确
正确的做法
使用最重要的共享元素将用户的焦点引导到下一个视图。
错误
错误的做法
避免创建没有焦点的场景,例如通过使用许多共享元素或在转换期间让元素交叉路径。
布局意识

当任何元素在转换完成时未完全加载时,请在元素出现的位置留出足够的空间。 这防止了当元素最终出现时的布局偏移,并且避免当触摸目标突然跳开时用户的疑惑。

(译)MaterialDesign(九)-Choreography_第3张图片
正确
正确的做法
在过渡期间为未加载的元素腾出空间,并在完全加载后正常显示它们。
(译)MaterialDesign(九)-Choreography_第4张图片
错误
错误的做法
不要将布局作为元素加载到视图中,因为这会分散注意力并导致焦点移动。

创建

新的Material表面及其内容可以从没有创建。

创建新平面

将新创建的界面与创建它们的元素或操作关联。 新表面通常从触摸点的径向或矩形膨胀出现。

(译)MaterialDesign(九)-Choreography_第5张图片
正确
正确的做法
此菜单从接触点出现,将元素绑定到触摸点。
(译)MaterialDesign(九)-Choreography_第6张图片
错误
错误的做法
此菜单显示为远离触发它的触摸点,破坏了其与输入位置的关系。
编排界面

当同时创建多个新曲面时,快速交错每个界面的外观。 在单个方向创建清晰,平滑的焦点路径。

(译)MaterialDesign(九)-Choreography_第7张图片
正确
正确的做法
列表项有一个公用的入口。 网格项从左到右,从上到下填充。
(译)MaterialDesign(九)-Choreography_第8张图片
错误
错误的做法
列表的项目不应同时出现在列表中。这样会消除清晰的焦点。
(译)MaterialDesign(九)-Choreography_第9张图片
错误
错误的做法
具有共同入口的项目不应该以颠倒顺序出现。
(译)MaterialDesign(九)-Choreography_第10张图片
错误
错误的做法
在下一个项目之前,不要等待每个项目完成动画。 开始每个项目的交错入口不超过20毫米。
自主界面创建

在没有用户输入或没有原点的情况下创建的曲面应该使用渐变,位置和缩放转换的优雅组合。

(译)MaterialDesign(九)-Choreography_第11张图片
正确
正确的做法
自动触发的界面平滑且快速地出现。
(译)MaterialDesign(九)-Choreography_第12张图片
错误
错误的做法
不建议使用过多的动画效果

径向反应

使用径向动作来表明用户输入和表面反应之间的连接。

使用触摸波纹将屏幕反应连接到触摸点。
(译)MaterialDesign(九)-Choreography_第13张图片
从触摸点开始,应用栏会随着新颜色向外波动而更改颜色。
用户输入

通过使用触摸波纹将用户输入连接到屏幕反应,以指示触摸点,并确认接收到触摸输入。 对于触摸或鼠标,这发生在接触点。

在触摸点附近发生的屏幕反应应该比更远离的反应更早发生。

网格列表中的图像在淡出的基础上又加上了水纹波动的径向反应

你可能感兴趣的:((译)MaterialDesign(九)-Choreography)