Facebook的Paper自前幾日上架App Store后就成為開(kāi)發(fā)者設(shè)計(jì)師們熱議話題，在App Store里也獲得了很高的用戶(hù)好評(píng)率，當(dāng)然也有不喜歡這款應(yīng)用的用戶(hù)，包括那些討厭Facebook的用戶(hù)和被眾多手勢(shì)操作迷惑的用戶(hù)。不過(guò)在我看來(lái)，Paper中一些細(xì)節(jié)設(shè)計(jì)和交互設(shè)計(jì)還是給人帶來(lái)很大的驚喜，以下是我認(rèn)為值得與其他設(shè)計(jì)師分享的設(shè)計(jì)細(xì)節(jié)。（部分GIF圖質(zhì)量偏低；有些尺寸較大，用靜態(tài)圖替換了GIF圖，不過(guò)你可以點(diǎn)擊鏈接查看原始的GIF圖）

你可以在Twitter上@brian_lovin，一起討論設(shè)計(jì)、創(chuàng)業(yè)以及科技方面的話題。

1.視圖頁(yè)面和群組

右上角的”hamburger”圖標(biāo)翻轉(zhuǎn)成一個(gè)”X”,并帶有輕微的彈跳效果，并且頁(yè)面中按次序進(jìn)出的列表項(xiàng)目所帶的延遲滑動(dòng)動(dòng)畫(huà)效果也很不錯(cuò)。（你可以在此查看原始GIF圖）
2.關(guān)閉彈出視圖

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

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

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

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

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

5.后臺(tái)加載

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

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

關(guān)閉web頁(yè)面時(shí)有輕微的彈動(dòng)效果，并且卡片上還有動(dòng)態(tài)的光澤效果。（你可以在此查看原始GIF圖）

7.全景照片

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

8.搜索

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

9.卡片上的字體

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


10.快速查看時(shí)間線

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

11.輕掃關(guān)閉

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

12.聊天頭像

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

13.刪除草稿

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

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

14.頁(yè)面歷史新聞

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

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

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

16.開(kāi)關(guān)切換

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

17.寫(xiě)消息時(shí)添加或者移除照片

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

18.分類(lèi)管理?

點(diǎn)擊并長(zhǎng)按屏幕上方的大圖來(lái)打開(kāi)自定義視圖，每個(gè)分類(lèi)以卡片的形式呈現(xiàn)，并且有晃悠悠左右擺動(dòng)等待被移除，重新排序、添加或者刪除。（在此查看原始GIF圖）

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

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

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

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

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

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

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

我喜歡這個(gè)下拉當(dāng)前卡片展示背后其他卡片的設(shè)計(jì)，同時(shí)也可以展示狀態(tài)欄。（在此查看原始GIF圖）

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

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

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

原文：Design Details: Paper by Facebook

來(lái)源：http://www.cocoachina.com/macdev/uiue/2014/0210/7791.html