从Facebook Paper中看手机UI设计

meng发表于 2014/06/01
通过Cocoachina:Facebook的 Paper在应用商店不断上升的排放量,我们可以知道,这款软件必定是软件开发者的热议话题,今天和大家分享一下这些令人惊喜的设计细节。
1首先是视图页面和群组
右上角的「hamburger」图标翻转成一个”X”,并带有轻微的弹跳效果,并且页面中按次序进出的列表项目所带的延迟滑动动画效果也很不错。
upload/2014-08/140811113970598.gif

2 关闭弹出视图

当没有更多滚动空间时,Paper中几乎每个弹出视图或者菜单都可以通过继续上拉或者下拉来关闭。
upload/2014-08/140811113970591.gif
3 具有动态光泽效果的标题

Paper中的每个标题都有漂亮的发光效果,这一点让我想起iOS的‘Slide to Unlock’文本,如果能搭配数据刷新就更酷了。
upload/2014-08/140811113970592.gif

4. 关闭消息(朋友视图或者通知)

你可以多看一次这个动画效果,并注意每个细节的变化。下拉时,背景界面会有被拖拽下拉的视觉效果,消息气泡上的箭头也会被拉伸,下拉至一定程度时,气泡和三角箭头会缩回到原来的位置,非常令人吃惊。

5. 后台加载

打开卡片查看页面,在你完全打开卡片之前Paper就已经开始加载了,这一点可以让用户体验更为流畅和快捷。

p2

6. 关闭Web页面

关闭web页面时有轻微的弹动效果,并且卡片上还有动态的光泽效果。

p3

7. 全景照片

全景照片功能是Paper早期发布的demo视频中的亮点之一,当然也吸引了不少人的关注。我非常喜欢照片底部那个小小的滚动条,用以展示你在照片中的当前位置。有人已经用HTML/CSS/JS重新实现了这个效果–这里是教程

p4

8. 搜索

Paper中没有粗制滥造的动画。当展示搜索结果时会有渐渐淡出的视觉效果,并且淡出是有延迟的。

9. 卡片上的字体

Paper每个卡片上的字体都是体现了原始网站上的字体。

10. 快速查看时间线

全屏查看卡片内容时,你可以向上拉动卡片显示隐藏在当前页面下的内容。不过有意思的一点是,你不能继续上拉返回内容列表界面。

11. 轻扫关闭

左右轻扫关闭新闻,卡片会灵巧地折叠,并略带弹动效果。



©2010-2014 秦皇岛易博网络科技有限公司 我们专注于微信开发 | 网站建设 冀ICP备12004938号-3