23個Facebook Paper中的設計細節

來源:互聯網
上載者:User

23個Facebook Paper中的設計細節
Facebook的Paper自前幾日上架App Store後就成為開發人員設計師們熱議話題,在App Store裡也獲得了很高的使用者好評率,當然也有不喜歡這款應用的使用者,包括那些討厭Facebook的使用者和被眾多手勢操作迷惑的使用者。不過在我看來,Paper中一些細節設計和互動設計還是給人帶來很大的驚喜,以下是我認為值得與其他設計師分享的設計細節。(部分GIF圖品質偏低;有些尺寸較大,用靜態圖替換了GIF圖,不過你可以點選連結查看原始的GIF圖) 你可以在Twitter上@brian_lovin,一起討論設計、創業以及科技方面的話題。 1.視圖頁面和群組右上方的"hamburger"表徵圖翻轉成一個"X",並帶有輕微的彈跳效果,並且頁面中按次序進出的清單項目所帶的延遲滑動動畫效果也很不錯。(你可以在此查看原始GIF圖)2.關閉彈出視圖當沒有更多滾動空間時,Paper中幾乎每個彈出視圖或者菜單都可以通過繼續上拉或者下拉來關閉。3.具有動態光澤效果的標題Paper中的每個標題都有漂亮的光暈效果,這一點讓我想起iOS的‘Slide to Unlock’文本,如果能搭配資料重新整理就更酷了。4. 關閉訊息(朋友視圖或者通知)你可以多看一次這個動畫效果,並注意每個細節的變化。下拉時,背景介面會有被拖拽下拉的視覺效果,訊息氣泡上的箭頭也會被展開,下拉至一定程度時,氣泡和三角箭頭會縮回到原來的位置,非常令人吃驚。5.後台載入開啟卡片查看頁面,在你完全開啟卡片之前Paper就已經開始載入了,這一點可以讓使用者體驗更為流暢和快捷。(你可以在此查看原始GIF圖) 6.關閉Web頁面關閉web頁面時有輕微的彈動效果,並且卡片上還有動態光澤效果。(你可以在此查看原始GIF圖)7.全景相片全景相片功能是Paper早期發布的demo視頻中的亮點之一,當然也吸引了不少人的關注。我非常喜歡照片底部那個小小的捲軸,用以展示你在照片中的當前位置。有人已經用HTML/CSS/JS重新實現了這個效果--這裡是教程。(你可以在此查看原始GIF圖)8.搜尋Paper中沒有粗製濫造的動畫。當展示搜尋結果時會有漸漸淡出的視覺效果,並且淡出是有延遲的。9.卡片上的字型Paper每個卡片上的字型都是體現了原始網站上的字型。10.快速查看時間軸全屏查看卡片內容時,你可以向上拉動卡片顯示隱藏在當前頁面下的內容。不過有意思的一點是,你不能繼續上拉返回內容列表介面。 11.輕掃關閉左右輕掃關閉新聞,卡片會靈巧地摺疊,並略帶彈動效果。12.聊天頭像iOS上Facebook系統的聊天頭像並不是新生事物,但Paper中常見的彈動效果還是令人頗為喜歡。13.刪除草稿如果你正在寫訊息,你可以下拉一次展示刪除按鈕,再次下拉則會刪除草稿,刪除按鈕處的圓形指示條會顯示刪除進程。 也就是說,你要進行兩次下拉操作才能完成刪除,而不是長按。或許設計師在進行使用者測試時發現一次下拉操作會造成意外刪除吧。14.頁面曆史新聞我還沒弄清楚這個細節的實用性,但當你查看頁面或者資料時,向左/右滑動可以讓你在時間軸中往返或者更新。15.查看或者關閉圖片在大多數Facebook app中,我們都可以看到這種互動設計,但是現在看來仍然很有意思,即通過拋擲操作來開啟或者關閉視圖,很好地與圖片進行了互動。 16.開關切換這個設計細節著實讓我疑惑不解,哪一個是開啟?哪一個是關閉?對於iOS應用來說,向右滑動表示關閉。但出於一些原因,這個計在Paper中並不是十分明顯。17.寫訊息時添加或者移除照片我喜歡這個頁面中每個設計。當添加或者移除照片時,我們可以看到介面上會有一個微妙的彈跳效果,而文本也會相應地縮小並上移。18.分類管理點擊並長按螢幕上方的大圖來開啟自訂視圖,每個分類以卡片的形式呈現,並且有晃悠悠左右擺動等待被移除,重新排序、添加或者刪除。(在此查看原始GIF圖) 19.搜尋細節在搜尋結果中左右滑動,可以看到一個漂亮的橡皮筋式的視覺反饋。20.Likes模式擴充點擊熱門主題上的“more likes”,喜歡這個文章的帳戶圖片會以一個非常酷的方式向左下方擴充為列表模式。21.標題的淡入淡出這個設計超級順暢平滑。圖片和主題向右移動退出視線的過程中,頁面的右上方的白色標題會逐漸層暗直至消失。但在圖片馬上要退出視線範圍時,白色標題又會陡然呈現。(在此查看原始GIF圖)22.下拉展示其他卡片和狀態列我喜歡這個下拉當前卡片展示背後其他卡片的設計,同時也可以展示狀態列。(在此查看原始GIF圖)23.點擊“Like”按鈕出現煙火綻放視覺效果點擊頁面左下角的‘like’按鈕,會有一個藍色煙火綻放視覺效果,並且帶有輕微的彈跳效果。對於Facebook Paper,你覺得還有哪些更好的設計呢?

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.