ネイティブアプリにおける、UI/インタラクションのトレンド

Transcript

• 1. TREND OF UI DESIGN AND INTERACTION IN NATIVE APPS@sugaar 2015/05/15
• 2. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション ２. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI  ■ 惹き立たせるUI  ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
• 3. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション ２. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI  ■ 惹き立たせるUI  ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
• 4. UI
• 5. 機械、特にコンピューターとその機械の利用者（通常は人間） 間での情報をやりとりするためのインタフェースである。 ユーザーインタフェース (user interface) http://ja.wikipedia.org/wiki/ユーザインタフェース UI
• 6. UX
• 7. http://ja.wikipedia.org/wiki/ユーザーエクスペリエンスデザイン 製品、システム、サービスを使用した、および／または、 使用を予期したことに起因する人の知覚（認知）や反応 ユーザーエクスペリエンス（User experience） UX
• 8. ユーザーがある製品やシステムを使ったときに得られる 経験や満足など全体を指す用語 http://ja.wikipedia.org/wiki/ユーザインタフェース
• 9. = 使い心地？UX
• 10. UI / UX
• 11. UI / UX
• 12. http://54solutions.com/services/graphic-ux-design/ UX Business Model UI TypoVisual Design Info Market Brand Technology Develop Intera- ction Anima- tion Plan
• 13. インタラクションの 誤解
• 14. 派手に 動く 見た事が ない 驚きが ある なんかリッ チ 普通 じゃない
• 15. 派手に 動く 見た事が ない 驚きが ある なんかリッ チ 普通 じゃない 誤解
• 16. 優れたUIは 優れたUXの一部であって 自然なインタラクションは 使い心地の為の演出である
• 17. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション ２. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI  ■ 惹き立たせるUI  ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
• 18. WEBで見つける
• 19. http://pttrns.com/?did=1 http://capptivate.co
• 20. ストアで見つける
• 21. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション ２. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ ■ 世界観をUIで体現  ■ 示唆するUI  ■ 惹き立たせるUI  ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
• 22. Storehouse 浮遊しているような世界観で、遷移がシームレス 直感的な写真の複数枚投稿 実はiPadがメイン iOS
• 23. STELLER めくる行為にフォーカスした作り 物語を作るような感覚で、投稿画面を感じさせない iOS
• 24. Paper 長押し時の、カテゴリ追加 フリック時の心地よいラグ、背景画像をリフレクト webビューがwebビューっぽくない iOS
• 25. Pixotale 思わずフリックしたくなる、ローディング 詳細画面への自然な遷移 投稿画面でのテキストブロックの挙動 iOS
• 26. Ultravisual 詳細画面の背景色が写真のカラー 吸着するアニメーション 投稿時のローディングがモザイク iOS
• 27. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション ２. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現 ■ 示唆するUI  ■ 惹き立たせるUI  ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
• 28. Moldiv メニューボタンを置かない変わりに、 起動時に画面をバウンスさせて、左メニューを示唆 AndroidiOS
• 29. Timeline 詳細画面に遷移時のシームレスな感じ 遷移時のローディングで、スクロールを示唆 iOS
• 30. Yarnee 詳細画面で、上フリック時にバウンスさせ 下方向にコンテンツがある事を示唆 全て見終わるとフィードに戻る iOS
• 31. Starbucks menuでスクロール時に、スクロールの速度に応じて 下のコンテンツを示唆する見切れ iOS
• 32. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション ２. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI ■ 惹き立たせるUI  ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
• 33. FIFA イメージカラーが全面のメニュー パララックスを用いたゲームのメニュー画面 OS毎に工夫されたUI AndroidiOS
• 34. Reuters TV 全体的な浮遊感 パララックスと読み込みの順番でメディアを演出 iOS
• 35. FastCompany 下方向を示唆する写真の切り方 スクロール時のパララックスで１つ１つをリッチに iOS
• 36. News digest 写真を印象的に見せる切り方 上下左右のパララックス iOS
• 37. Recipes パララックスを用いたフリック遷移 分厚いバー固定 色んな所に×マークがあるが、押せない iOS
• 38. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション ２. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI  ■ 惹き立たせるUI ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
• 39. Medium フィードやメニューは普通に使い易い 投稿画面のカーソルの位置を計算して、画面がズレる iOS
• 40. 8 tracks シームレスなチュートリアル (iOS)EXPLOREで絞り込み後、左右のフリックで遷移 した後にback操作をすると、始めに戻ってからFixする AndroidiOS
• 41. Taco bell メニューを２カラムで表示しながら絞り込める ホームフィードへの自然な遷移 iOS
• 42. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション ２. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI  ■ 惹き立たせるUI  ■ 気の利いたUI ■ ゆび以外を用いるUI  ■ マテリアルデザイン
• 43. FYUSE 写真×3D 傾きを用いて閲覧 精度の高いマッピング AndroidiOS
• 44. Hitlist 詳細画面の写真が傾きで見える 詳細画面でランドスケープさせると地図表示になる 検索が直感的 AndroidiOS
• 45. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション ２. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI  ■ 惹き立たせるUI  ■ 気の利いたUI  ■ ゆび以外を用いるUI ■ マテリアルデザイン
• 46. Play News Stand iOSでもマテリアルデザインに準拠 位置によって違う2種類のナビゲーションメニュー AndroidiOS
• 47. Delectable マテリアルデザインを踏襲 詳細ページや、ユーザーページへの遷移がシームレス AndroidiOS
• 48. Why? material design
• 49. マテリアルデザインに対応した Evernote for Android https://blog.evernote.com/jp/2015/03/12/47325
• 50. Google の最新のコンセプトや美意識、 異なるデバイスでの統一感などを Evernote に取り入れることで、 Android アプリ開発の最先端を行くアプリを作りたかった。 https://blog.evernote.com/jp/2015/03/12/47325 Evernote の Android プロダクト・マネージャー テレサ・ピタピリー (Theresa Pittapilly)
• 51. 最後に
• 52. 派手に 動く 見た事が ない 驚きが ある なんかリッ チ 普通 じゃない
• 53. 派手に 動く 見た事が ない 驚きが ある なんかリッ チ 普通 じゃない 誤解
• 54. 優れたUIは 優れたUXの一部であって 自然なインタラクションは 使い心地の為の演出である
• 55. Amebaのクリエイティブディレクターが徹底考察！ UI/UXがイケてる！ おすすめスマホアプリ http://www.mdn.co.jp/di/articles/3332/ 連載中
• 56. Thank you @sugaar 2015/05/15