Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

151,050 views

Published on

TREND OF UI DESIGN AND INTERACTION IN NATIVE APPS.

Published in: Design
  • Be the first to comment

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

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

×