杂项 ![]() 滚动条 ![]() 渐进式公开箭头 ![]() 后退按钮 后退按钮的字形提供了 3 种不同大小,以便外环的权重等于 16pt、20pt 和 42pt。这些字形设计用于支持分层。 ![]() HTML 的后退箭头 记得添加其他代码,创建环绕这些字形的圆环。 ![]() 用于控制的图标的字形 这些字形设计为以 14pt 大小显示。记得使用其他代码,创建环绕这些字形的圆环。 ![]() ![]() ![]() ![]() ![]() ![]() 六、动画 如果你有心做动画,喜欢折腾捣鼓,那就试试吧。PowerPoint 中部分动画的“平滑结束”比较用得上,但至今配合动画延迟也没有尝试出完全相同的程度。Modern UI 中很多动画的“位移-时间”图像是曲线。 1、底部 Action Bar:https://content5.ssl.catalog.video.msn.com/e2/ds/42bad77c-661f-457f-ad89-9fdf0742d807.mp4 这个使用进入动画“飞入” – 从底部 – 持续时间和平滑结束时间自行设定。 2、隐藏面板 Charm:https://content5.ssl.catalog.video.msn.com/e2/ds/629ed613-3265-42f6-878c-c057313643d3.mp4 设定方式与上一条同理。但视频中还是早期样式,Windows 8.1 中面板与其上的文字有动画延迟,显得更有活力。视频中文字内容和面板还是一个整体。要做新样式,将文字内容与底部面板分离,设置动画延迟。 3、弹出动画:https://content3.ssl.catalog.video.msn.com/e2/ds/2a38b01a-a40b-491e-8802-5a9572a123a2.mp4 包括一个平移,它是在弹出元素淡入时从初始位置到最终位置的垂直移动。平移距离和方向由应用指定。在大多数情况下,平移应为 50 像素,以向上方向移动。不过,如果弹出元素显示在触发弹出的 UI 元素下方,则平移应是向下移动 50 像素。例如,此下载平移将适用于从导航栏或从应用标题触发的浮出控件。这是为了向用户提供弹出元素与其触发元素之间的可视链接。 更多动画自行操作、观察。 我是从介绍其设计准则这个角度来回答如何制作这种风格的 PPT 的,试图把重点的一部分呈现出来,整理下大家纷乱的感知,我认为这样做更实际。 ![]() 这是我看到的一个提炼: Metro UI 设计具备以下五点原则: 1. 干净、轻量、开放、快速 2. 要内容,而不是质感 3. 整合软硬件 4. 世界级的动画 5. 生动,有灵魂 # 注释 # 在【一、字体】中提及的 SS01 样式,出现了一些复杂的情况,感谢 @prox 用心的查证,手动点赞!因 @prox 网络问题无法发表,在这里贴出他的修正内容: Segoe UI 的两种造型? @佳伟发现列出的 Segoe UI 字体,字形竟然是不一致的。 ![]() 作为 Segoe UI 的粉丝,我不辞劳苦(?)地找到了一台 Windows 7 电脑,使用 QQ 远程协助截下了如下珍贵图像。po主真的很拼…… 这是 Windows 7 下的 Segoe 字体集。 ![]() 在图中,发现了两个名为“Segoe UI 常规”的文件。它们分别是这样的: ![]() |