希希部落

记录喜欢的设计和美好事物,发现新知,启发设计灵感

23个Facebook Paper中的设计细节

在美国当地时间2月3日,即社交网络巨头Facebook成立十周年之际,正式发布移动新闻阅读应用Paper,成为开发者设计师们热议话题,在App Store里也获得了很高的用户好评率;最近也有很多抨击的声音,但是一些细节设计和交互设计还是给人带来很大的惊喜,还是有很多设计值得学习的;


认识下Facebook Paper 的设计主管:Mike Matas


1. 视图页面和群组

右上角的「hamburger」图标翻转成一个”X”,并带有轻微的弹跳效果,并且页面中按次序进出的列表项目所带的延迟滑动动画效果也很不错。


2. 关闭弹出视图

当没有更多滚动空间时,Paper中几乎每个弹出视图或者菜单都可以通过继续上拉或者下拉来关闭。展开和关闭的动效都是像气泡一样冒出或缩回。


3. 具有动态光泽效果的标题

几乎所有的大标题都有漂亮而柔和的闪光效果,就像iOS设备锁屏界面中“滑动来解锁”的文字那样。如果该效果能与内容刷新的过程配合起来也许会更好。


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

可以多看几次下面的演示,注意每个细节中的变化。当你下拉时,整个界面背景也会呈现带有“拖拽感”的下拉效果;消息气泡的尖角会被拉长,到一定程度后,气泡及尖角会脱离之前的“黏结点”,然后缩回到图标的位置,同时整个界面轻微弹跳着上移到原来的地方。


5. 后台加载

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


6. 关闭Web页面

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


7. 全景照片

 除了全景照片本身的交互方式以外,比较值得留意的是照片底部的滚动条,用来表示当前视图区域在照片整体当中的位置。


8. 搜索

当你在搜索框中输入文字时,界面当中原本的内容会很自然的淡出,而且列表单元的淡出是有次序和延迟的。


9. 卡片上的字体

网页卡片上的字体与其他视图中的是不同的;Paper有意通过字体的变化来展现原页面的内容。


10. 快速查看时间线

在全屏模式下查看内容卡片时,可以通过上拉卡片查看隐藏在底部的内容队列。不过继续上拉并不能让你返回到内容队列的界面当中。


11. 轻扫关闭

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


12. 聊天头像

挺有意思的交互模式,在以前的Facebook应用当中也有出现过。头像滑入视图后细微的弹跳效果很舒服。


13. 删除草稿

如果你正在写消息,你可以下拉一次展示删除按钮,再次下拉则会删除草稿,删除按钮处的圆形指示条会显示删除进程。

要进行两次下拉操作才能完成删除,而不是长按。或许设计师在进行用户测试时发现一次下拉操作会造成意外删除吧。

 

 14. 页面历史新闻

我还没弄清楚这个细节的实用性,但当你查看页面或者资料时,向左/右滑动可以在时间轴中往返或者更新。


 

 15. 查看或者关闭图片

在大多数Facebook app中,我们都可以看到这种交互设计,但是现在看来仍然很有意思,即通过抛掷操作来打开或者关闭视图,很好地与图片进行了交互。

 

 16. 开关切换

这个设计细节着实让我疑惑不解,哪一个是打开?哪一个是关闭?对于iOS应用来说,向右滑动表示关闭。但出于一些原因,这个计在Paper中并不是十分明显。

 

 17. 写消息时添加或者移除照片

照片被添加或移除过程中的动效很微妙;照片添加进来之后,原本的浅灰色提示文字也会通过动效缩小并上移,为照片腾出更多的展示空间。

 

 18. 分类管理 

在上半部分的大图上点击并长按,会开启分类管理。那些小卡片不紧不慢抖动着的样子,让你觉得它们等待着被移动、重新排列、添加或移除。


 

 19. 搜索细节

在搜索结果中左右滑动,可以看到一个漂亮的橡皮筋式的视觉反馈。

 

 20. Likes模式扩展 

点击Likes最右侧的“更多”按钮,头像会依次向左下方滑去,最终成为纵向排列的扩展模式,以便同时展示头像和用户名。(

 

 21. 标题的淡入淡出

 非常合理与细心的动效。向右滑动界面的过程中,头部的白字大标题在接近右侧图标的时候会逐渐消失,避免与图标混淆在一起;而在即将移出图标区域的时候又会逐渐呈现出来。

 

 22. 下拉展示其他卡片和状态栏

我喜欢这个下拉当前卡片展示背后其他卡片的设计,同时也可以展示状态栏。


 

 23. 点击“Like”按钮出现烟火绽放视觉效果

点击页面左下角的‘like’按钮,会有一个蓝色烟火绽放视觉效果,并且带有轻微的弹跳效果。


©希希部落
Powered by LOFTER