Facebook: Paperの美しいUI

http://blog.brianlovin.com/design-details-paper-by-facebook

1 comment | 3 points | by WazanovaNews 4年弱前 edited


Jshiike 4年弱前 edited | ▲upvoteする | link

Paperのデザインについての情報がではじめています。

最初にFacebookのProdcut DesignerのDrew Hamlinが、FastCompanyのインタビューにおいて、インタラクティブなプロトタイプができるQuartz Composer / Origamiが、いかにPaperの開発に役立ったかを語っています。Origamiはマスターするのにかなりラーニングカーブがかかるようですが、ドキュメント / ビデオ / サンプルコンポジションなど、チュートリの充実を約束してくれてます。

また、bufferのProduct ManagerのBrian Lovinが、Paperのデザインで注目すべきポイントをまとめてます。実際に画面を見ないとわからないと思うので、彼のブログを直接チェックしてみてください。取り上げている内容は下記のとおりです。自分も気付いてなかったことが結構あって、微に入り細に入りよく作り込んだアプリですね。

1. View Pages and Groups

三本線のメニューボタンをクリックして、ページが遷移すると、メニューだったボタンが X ボタンに替わります。また、そのときに遷移するページの各メニューが微妙にずれながら順次スライドインしてきます。

2. Closing a Popup

Paperでは、それ以上スクロールアップ or ダウンできないくなると画面がクローズしますが、このサンプルでは"Public"のメニューが下端までスクロールすると、そのメニューが少しずつサイズをスケールダウンしてフェードアウトする効果がわかります。

3. Glossy Headings

このサンプルの"Ideas"の文字のように、タイトル文字の明るさが変化し、輝いているような効果をだしてます。

4. Closing Messages

何度か見ないとわからないかもしれませんが、メッセージボタンをプルダウンすると白い矢印がでてきて、伸ばしきると最後にはそれが弾ける感じで、画面全体がバウンスして揺れ戻る効果がでてます、

5. Background Loading

カードをめくる(Webの記事のページを閲覧)アクションをすると、めくり終わる前にページの読込みを完了させることで、スムーズに遷移できてる感覚を与えてます。

6. Closing a Web Page

これもよく見ないとわかりませんが、カードを閉じ終わる瞬間にカードの最上部に光が一瞬走ってくる効果があります。

7. Panorama Photos

画面の下部にある白いスクロールバーが、閲覧している大きな写真全体のどこ部分を見ているのかを表示してくれてます。

8. Searching

検索をはじめると、その前に画面に表示されていたリストが消えますが、上から順にすこしずつ遅れてフェードアウトしています。

9. Typography Matching

表示するウェブサイトのコンテンツにあわせて、テキストのフォントが変化します。

10. Peek

コンテンツを表示したカードをプルアップすると、他のカードが並んだタイムラインが下側に黒いフィルターがかかったかたちで表示されます。

11. Swipe to Close

コンテンツを表示したカードを閉じるのに、左右のスワイプが使えますが、スワイプするとページが折り畳まれて画面に戻ってきます。

12. Chat Heads

丸形のユーザやページのアバター(Chat Head)は以前から採用されてますが、それが移動するときに微妙に弾んでいる効果が確認できます。

13. Delete a Draft

ドラフトを書いた後に削除するには、二回プルダウンすると、ゴミ箱の周りに円が描かれる効果がでて、deleteされます。

14. Page History

ページをスワイプすると、下に表示されたタイムラインも変化していきます。

15. Viewing/Dismissing Photos

写真を表示させる効果はFaicebookアプリと同じ。

16. Toggles

これは、どちらがオンで、どちらがオフなのか、ちょっとわかりづらい。。

17. Add/Remove Photos in Composer

写真の一覧から選択して表示させるときに、テキストのサイズ/位置が変わり、微妙にバウンスする効果が見れます。

18. Manage Categories

写真を長押ししたら、"Customize Your Paper" という編集画面が表示されますが、追加/削除できることが直感的にわかるように、メニューカードが微妙に揺れて表示されます。

19. Search Details

検索結果詳細を左右に動かすと全体がゴムでできたように揺れます。

20. Expanding Likes

"More Likes" の数字をタップすると、他のLikeしたユーザのリストがすだれのようにでてきます。

21. Category Title Fade Out

ページ上側のカテゴリーページが右に移動するときに、タイトルの文字 "Ideas" が右上のアイコンと重なる瞬間にフェードアウトします。

22. Status Bar Reveal

ページ上部を見ると、今見ているページの裏側にあるステータスバーとカテゴリーページが微妙にずれて閉じられます。その最後で、ページ最下部が微妙にバウンスします。

23. The Like Fireworks

Likeボタンを押すと、青色の花火のような効果がでます。


100 YEARS OF DESIGN


#facebook #ios #paper #デザイン #ui #ux

Back