Material Design Launch Screen 启动页

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

启动页是用户在应用中的第一体验。

目录

用法

占位UI

品牌启动页

用法

当应用程序加载时,可以在应用程序从主屏幕启动时显示启动页,而不是显示空白页。显示启动页可以减少加载时间长的感觉,而且有可能提升用户体验的乐趣。

应用程序运行中时,不应展示启动页。

启动页的类型

有两种类型的启动页:

占位UI启动页显示应用程序实际用户界面的非交互式预览。这种启动页同时适用于应用启动和应用内的页面更新或激活。品牌启动页提供短暂的品牌曝光。

1wqf21gfnqq.png插图

占位UI

用法

对于加载时间较短或不推广品牌宣传的应用,使用占位UI能够实现从启动页向应用程序的最快转场。另外,占位UI也拥有最快的响应速度。

0sxqte3q1pk.png插图(1)

行为

在启动时,核心结构元素(例如状态栏,应用栏和底部工作表)将在没有内容的情况下预先显示,直到应用程序加载完毕。

具有微妙动效的占位符元素应显示在将加载内容的位置。

2ygkbjk1ntz.png插图(2)

在加载占位UI之前先加载品牌指示符。加载内容使用微妙的淡入淡出过渡。

p24mnl42ldl.png插图(3)

不要显示多个进度指示器以分散焦点。

占位元素应固定在内容加载的位置,以避免意外的位置变化。

30j5zreoze3.png插图(4)

不要在加载时展示内容重新排布的变化,这会导致用户混乱不适的体验。

品牌启动页

用法

品牌启动页通过在加载时展示logo或其他能够提高品牌识别度的元素来传达品牌。除了你的logo或标语,不要在品牌加载页上使用文字。

品牌加载页示例

b0pca5uhkvy.png插图(5)

0uax1lvkdfd.png插图(6)

ewpu55tqlg3.png插图(7)

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

游戏中「按钮大小以及位置」的思考

2020-10-11 20:09:37

UI设计

耍好控件 | 大厂都是如何推敲图片列表排版的?

2020-10-11 20:09:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索