Cocoachina：Facebook的?Paper?自前幾日上架App Store后就成為開發(fā)者設(shè)計(jì)師們熱議話題，在App Store里也獲得了很高的用戶好評率，當(dāng)然也有不喜歡這款應(yīng)用的用戶，包括那些討厭Facebook的用戶和被眾多手勢操作迷惑的用戶。

不過在我看來，Paper中一些細(xì)節(jié)設(shè)計(jì)和交互設(shè)計(jì)還是給人帶來很大的驚喜，以下是我認(rèn)為值得與其他設(shè)計(jì)師分享的設(shè)計(jì)細(xì)節(jié)。（溫馨提示：動態(tài)gif 圖稍大，等一下就可以流暢看咯）

Facebook（臉譜）推出的移動新聞閱讀應(yīng)用Paper在發(fā)布后的短短一周，其下載量在蘋果應(yīng)用商店迅速攀升，并獲得了包括《連線》在內(nèi)的多家美國科技媒體的好評。Paper是在美國當(dāng)?shù)貢r間2月3日，即社交網(wǎng)絡(luò)巨頭Facebook成立十周年之際，正式發(fā)布的。

Facebook創(chuàng)始人馬克·扎克伯格（Mark Zuckerberg）曾表示，自己夢想著有一天Facebook能了解足夠多的用戶情況和生活習(xí)慣，以便推送用戶樂意看到的精準(zhǔn)信息，扎克伯格將此稱為“全球最好的私人定制報(bào)紙”。
值得注意的是，目前只有美國區(qū)的蘋果商店上架了該應(yīng)用，可以免費(fèi)下載，但不提供iPad版本，Android平臺何時上線未知。

內(nèi)容做成了一張張卡片

早在1月底，F(xiàn)acebook就宣布將在其成立10周年之際推出新產(chǎn)品，市場也早已風(fēng)傳Facebook要推新聞閱讀應(yīng)用，但沒有想到其界面和設(shè)計(jì)是如此令人贊不絕口。
《連線》雜志稱其為目前看來是最好的Facebook。科技博客The Verge則評價稱，是最好的Facebook應(yīng)用。

說到細(xì)節(jié)，就不能不提Dribbble，來看看上面有哪些逆天的icon，還有哪些大牛級別的設(shè)計(jì)師吧。
超詳細(xì)！DRIBBBLE上的業(yè)界頂級設(shè)計(jì)師及作品
《拜師學(xué)藝第二彈！Dribbble上50位值得學(xué)習(xí)的設(shè)計(jì)師》?
《巧奪天工！50枚來自Behance、DRIBBBLE的超精致圖標(biāo)》

漲姿勢時間：

來了解下Facebook Paper 的設(shè)計(jì)主管：Mike Matas。

他今年 24 歲，帥哥。
個人網(wǎng)站：?http://www.mikematas.com/
Twitter：http://twitter.com/#!/mike_matas

1. 視圖頁面和群組

右上角的「hamburger」圖標(biāo)翻轉(zhuǎn)成一個"X",并帶有輕微的彈跳效果，并且頁面中按次序進(jìn)出的列表項(xiàng)目所帶的延遲滑動動畫效果也很不錯。

 

2. 關(guān)閉彈出視圖

當(dāng)沒有更多滾動空間時，Paper中幾乎每個彈出視圖或者菜單都可以通過繼續(xù)上拉或者下拉來關(guān)閉。

 

3. 具有動態(tài)光澤效果的標(biāo)題

Paper中的每個標(biāo)題都有漂亮的發(fā)光效果，這一點(diǎn)讓我想起iOS的‘Slide to Unlock’文本，如果能搭配數(shù)據(jù)刷新就更酷了。

 

4. 關(guān)閉消息（朋友視圖或者通知）

你可以多看一次這個動畫效果，并注意每個細(xì)節(jié)的變化。下拉時，背景界面會有被拖拽下拉的視覺效果，消息氣泡上的箭頭也會被拉伸，下拉至一定程度時，氣泡和三角箭頭會縮回到原來的位置，非常令人吃驚。

 

5. 后臺加載

打開卡片查看頁面，在你完全打開卡片之前Paper就已經(jīng)開始加載了，這一點(diǎn)可以讓用戶體驗(yàn)更為流暢和快捷。

 

6. 關(guān)閉Web頁面

關(guān)閉web頁面時有輕微的彈動效果，并且卡片上還有動態(tài)的光澤效果。

 

 

7. 全景照片

全景照片功能是Paper早期發(fā)布的demo視頻中的亮點(diǎn)之一，當(dāng)然也吸引了不少人的關(guān)注。我非常喜歡照片底部那個小小的滾動條，用以展示你在照片中的當(dāng)前位置。有人已經(jīng)用HTML/CSS/JS重新實(shí)現(xiàn)了這個效果--這里是教程。

 

8. 搜索

Paper中沒有粗制濫造的動畫。當(dāng)展示搜索結(jié)果時會有漸漸淡出的視覺效果，并且淡出是有延遲的。

 

9. 卡片上的字體

Paper每個卡片上的字體都是體現(xiàn)了原始網(wǎng)站上的字體。



10. 快速查看時間線

全屏查看卡片內(nèi)容時，你可以向上拉動卡片顯示隱藏在當(dāng)前頁面下的內(nèi)容。不過有意思的一點(diǎn)是，你不能繼續(xù)上拉返回內(nèi)容列表界面。

 

11. 輕掃關(guān)閉

左右輕掃關(guān)閉新聞，卡片會靈巧地折疊，并略帶彈動效果。

 

12. 聊天頭像

iOS上Facebook系統(tǒng)的聊天頭像并不是新生事物，但Paper中常見的彈動效果還是令人頗為喜歡。

 

13. 刪除草稿

如果你正在寫消息，你可以下拉一次展示刪除按鈕，再次下拉則會刪除草稿，刪除按鈕處的圓形指示條會顯示刪除進(jìn)程。

也就是說，你要進(jìn)行兩次下拉操作才能完成刪除，而不是長按?；蛟S設(shè)計(jì)師在進(jìn)行用戶測試時發(fā)現(xiàn)一次下拉操作會造成意外刪除吧。

 

14. 頁面歷史新聞

我還沒弄清楚這個細(xì)節(jié)的實(shí)用性，但當(dāng)你查看頁面或者資料時，向左/右滑動可以讓你在時間軸中往返或者更新。

 

15. 查看或者關(guān)閉圖片

在大多數(shù)Facebook app中，我們都可以看到這種交互設(shè)計(jì)，但是現(xiàn)在看來仍然很有意思，即通過拋擲操作來打開或者關(guān)閉視圖，很好地與圖片進(jìn)行了交互。

 

16. 開關(guān)切換

這個設(shè)計(jì)細(xì)節(jié)著實(shí)讓我疑惑不解，哪一個是打開？哪一個是關(guān)閉？對于iOS應(yīng)用來說，向右滑動表示關(guān)閉。但出于一些原因，這個計(jì)在Paper中并不是十分明顯。

 

17. 寫消息時添加或者移除照片

我喜歡這個頁面中每個設(shè)計(jì)。當(dāng)添加或者移除照片時，我們可以看到界面上會有一個微妙的彈跳效果，而文本也會相應(yīng)地縮小并上移。

 

18. 分類管理?

點(diǎn)擊并長按屏幕上方的大圖來打開自定義視圖，每個分類以卡片的形式呈現(xiàn)，并且有晃悠悠左右擺動等待被移除，重新排序、添加或者刪除。

 

19. 搜索細(xì)節(jié)

在搜索結(jié)果中左右滑動，可以看到一個漂亮的橡皮筋式的視覺反饋。

 

20. Likes模式擴(kuò)展?

點(diǎn)擊熱門主題上的“more likes”，喜歡這個文章的用戶頭像會以一個非?？岬姆绞较蜃笙路綌U(kuò)展為列表模式。

 

21. 標(biāo)題的淡入淡出

這個設(shè)計(jì)超級順暢平滑。圖片和主題向右移動退出視線的過程中，頁面的右上角的白色標(biāo)題會逐漸變暗直至消失。但在圖片馬上要退出視線范圍時，白色標(biāo)題又會陡然呈現(xiàn)。

 

22. 下拉展示其他卡片和狀態(tài)欄

我喜歡這個下拉當(dāng)前卡片展示背后其他卡片的設(shè)計(jì)，同時也可以展示狀態(tài)欄。

 

23. 點(diǎn)擊“Like”按鈕出現(xiàn)煙火綻放視覺效果

點(diǎn)擊頁面左下角的‘like’按鈕，會有一個藍(lán)色煙火綻放視覺效果，并且?guī)в休p微的彈跳效果。

對于Facebook Paper，你覺得還有哪些更好的設(shè)計(jì)呢？

 

原文地址：Design Details: Paper by Facebook
譯者：Cocoachina

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量63萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：