(译)MaterialDesign(九)-Choreograph
2017-02-02 本文已影响219人
sakasa
运动中的Material在过渡中共享元素的交互来一起用户关注。
表面创建
交错创建的新曲面的编排。
径向反应
将用户输入与触摸波纹连接到表面反应。
连续性
通过仔细选择跨过转换共享的元素的数量和类型,在转换期间保持清晰的焦点。
所有内容元素都是共享的
当表面扩大时,大量的元素在过渡期间应保持可见。
复杂的转换应该保持单个元素可见(见下文)。
来自此展开的卡片的所有元素形成扩展的卡片的标题。
极少的共享内容元素
当扩张表面时,如果在转换之后仅存在单个元件,则该元件应该是转换的焦点,控制所有其他元件。
将非共享内容锚定到单个共享元素的移动。
如果视图之间没有共享元素,则将所有交叉渐变元素固定到表面,垂直移动。 表面修剪他自己中的内容。
将所有非共享内容锚定到表面扩展的垂直运动。
无共享平面(不推荐)
如果没有公共平面在过渡中共享,新曲平面将从另一个位置进入屏幕,创建一个新的焦点。
多个共享元素
当在转换期间多个元素保持可见时,应仅包括最重要的元素。 一些元素可能在过渡期间消失,但是一旦过渡完成,它们就会重新出现。
正确正确的做法
使用最重要的共享元素将用户的焦点引导到下一个视图。
错误错误的做法
避免创建没有焦点的场景,例如通过使用许多共享元素或在转换期间让元素交叉路径。
布局意识
当任何元素在转换完成时未完全加载时,请在元素出现的位置留出足够的空间。 这防止了当元素最终出现时的布局偏移,并且避免当触摸目标突然跳开时用户的疑惑。
正确正确的做法
在过渡期间为未加载的元素腾出空间,并在完全加载后正常显示它们。
错误错误的做法
不要将布局作为元素加载到视图中,因为这会分散注意力并导致焦点移动。
创建
新的Material表面及其内容可以从没有创建。
创建新平面
将新创建的界面与创建它们的元素或操作关联。 新表面通常从触摸点的径向或矩形膨胀出现。
正确正确的做法
此菜单从接触点出现,将元素绑定到触摸点。
错误错误的做法
此菜单显示为远离触发它的触摸点,破坏了其与输入位置的关系。
编排界面
当同时创建多个新曲面时,快速交错每个界面的外观。 在单个方向创建清晰,平滑的焦点路径。
正确正确的做法
列表项有一个公用的入口。 网格项从左到右,从上到下填充。
错误错误的做法
列表的项目不应同时出现在列表中。这样会消除清晰的焦点。
错误错误的做法
具有共同入口的项目不应该以颠倒顺序出现。
错误错误的做法
在下一个项目之前,不要等待每个项目完成动画。 开始每个项目的交错入口不超过20毫米。
自主界面创建
在没有用户输入或没有原点的情况下创建的曲面应该使用渐变,位置和缩放转换的优雅组合。
正确正确的做法
自动触发的界面平滑且快速地出现。
错误错误的做法
不建议使用过多的动画效果
径向反应
使用径向动作来表明用户输入和表面反应之间的连接。
使用触摸波纹将屏幕反应连接到触摸点。
从触摸点开始,应用栏会随着新颜色向外波动而更改颜色。
用户输入
通过使用触摸波纹将用户输入连接到屏幕反应,以指示触摸点,并确认接收到触摸输入。 对于触摸或鼠标,这发生在接触点。
在触摸点附近发生的屏幕反应应该比更远离的反应更早发生。