iOSアプリで最初にPathがでてきたときは衝撃的にUIがカッコいいなと思いましたが、それから数年たって、自分の周りでPathをまだ使ってる人は残念ながらかなり減ったような。。プライベートなソーシャルネットワークという位置づけが中途半端だったんでしょうか。カップル向けのようにかなり特化したものが生き残っているところからすると。

最近、iOSでスタンドアロンのメッセージアプリをだして、相変わらずUIは素敵なようです。

1. Log in modal（ビデオ）

メール/パスワードを入力してログインするモーダル画面が、揺れながらフェードイン & フェードアウトすることで、アプリが生きているような印象を与えてくれます。

2. Onboarding（ビデオ）

新規ユーザのランディングページで、３枚のチュートリ用のモーダル画面がでてきて、続けてメッセージの送信ボタンのところに “Create a moment and share it with frends here.” 表示。無駄のないフロー。

3. Making Path famous（ビデオ）

円形の+ボタンを押すと、それを囲むように円形の各メニューが表示される効果は、最初にPathが有名になったUIですね。各メニューがでてきたときにバウンスして、くるくる回りながら引っ込みます。

4. Walkthroughs（ビデオ）

新規ユーザが新しいタブを選択したときも、チュートリ用のモーダル画面が表示されます。その画面が下に向かってフェードアウトするときも、揺れる効果をつけてます。

5. Profile fading（ビデオ）

プロファイル画面を上にスクロールして ”Me” というヘッダーに切替る時、プロファイル画面の各要素が順次フェードアウトしていきます。

6. Post interactions（ビデオ）

スタンプの一覧が表示される際も、微妙に揺れる効果が入ってます。

7. Changing profile pictures（ビデオ）

プロファイルヘッダーのどこをタップしても、写真を替えるメニューが表示されます。設定画面を探さなくてよい仕組みになってます。

8. Buying stickers（ビデオ）

モーダル画面のフェードイン、フェードアウトする際の揺れる効果は、ここでも統一感をもって採用されています。

9. Map view（ビデオ）

• バックボタンがありきたりのロゴでなく、Pathの”P”を使って表現してます。
• 地図を動かしたときに、右上のコンパスが緩やかに動き、地図上の文字も優雅にフェードイン、フェードアウトします。

10. Starting a search（ビデオ）

ウォール画面から検索ボックスをタップすると、画面が切替り、検索ボックスの下にフィルタリングタグが揺れながらフェードインしてくるので、自然にフィルタリングタグを選択したくなる効果があります。

11. Loading indicator（ビデオ）

サーチを “Nearby” (周辺検索) に切り替えた際、メインの画面では、月並みなスピナーやプログレスバーではなく、オリジナルな読み込み中の表現を採用しています。

12. Favoriting a friend（ビデオ）

氏名の右側にあるスターを押して、’close circle’ (近しい友達) に追加する際、スターの記号が微妙にバウンスします。

13. The sharing flow（ビデオ）

シェアする際に、まずメニューボタンから、「 ” 」引用ボタンを選択し、そのボタンスケールアップして、すぐにフェードアウトします。編集画面に来ると、”Share on” のメニューから、’close circle’ と ‘private’ を選択してますが、その時のメニューが画面に出入りするときの効果も注目ください。

14. The clock（ビデオ）

初期から実装されているUIですが、とにかくすごい。スクロールをはじめると、画面の右上に時計が表れ、その位置から上にはいつの時点のコンテンツがあるかわかるように、スクロールにあわせて時計がスムーズに変化していきます。

15. End of the feed（ビデオ）

ニュースフィードの最後のコンテンツの下（白地の部分）の真ん中に薄い色で飾りのイラストが表示されます。（動きではないので、ビデオの中で変化するわけではありません。ビデオを再生したときに、ずっと白地の部分に表示されているイラストのことです。

16. Pull to refresh（ビデオ）

画面を下に引っ張ってページをリフレッシュするときの細かい演出。

17. Path’s website（ビデオ）

スマホサービスだからといって、webサイトもまったく手抜きなしのUIです。

#path #UI #デザイン #ios