(译)MaterialDesign(九)-Choreography

其他文章

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

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

径向反应

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

连续性

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

所有内容元素都是共享的

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

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

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

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

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

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

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

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

多个共享元素

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

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

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

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

创建

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

创建新平面

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

正确
正确的做法
此菜单从接触点出现,将元素绑定到触摸点。
错误
错误的做法
此菜单显示为远离触发它的触摸点,破坏了其与输入位置的关系。
编排界面

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

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

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

正确
正确的做法
自动触发的界面平滑且快速地出现。
错误
错误的做法
不建议使用过多的动画效果

径向反应

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

使用触摸波纹将屏幕反应连接到触摸点。
从触摸点开始,应用栏会随着新颜色向外波动而更改颜色。
用户输入

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

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

网格列表中的图像在淡出的基础上又加上了水纹波动的径向反应
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容

  • Material motion - 真实的动作 Motion in the world of material d...
    两个朋友指甲阅读 1,821评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,651评论 18 139
  • 一直羡慕有厚一点儿的嘴唇 涂口红也比较好看 一日在电视上看到泰勒 斯威夫特 指着和爸爸说 我也想要这样的厚嘴唇 我...
    柳泽ESTHER阅读 195评论 0 0
  • 第一次在简书上码字,不知道要写些什么才够深刻。就当是跟自己的对话吧^_^ 前几天碰到几个不常谋面的朋友,照例打招...
    林芳坪阅读 735评论 0 0
  • 1、每日金句:岁月不饶人,我亦未曾绕过岁月。 岁月总在那儿,不管你看不看它,管不管它,它不紧不慢的走,从来没有停过...
    奔跑的一梦阅读 141评论 0 0