Your SlideShare is downloading. ×
0
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

497

Published on

TREND OF UI DESIGN AND INTERACTION IN NATIVE APPS.

TREND OF UI DESIGN AND INTERACTION IN NATIVE APPS.

Published in: Design
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
497
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
21
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TREND OF UI DESIGN AND INTERACTION IN NATIVE APPS@sugaar 2015/05/15
  • 2. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション 2. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI  ■ 惹き立たせるUI  ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
  • 3. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション 2. アプリの探し方  ■ おすすめの探し方 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  ■ インタラクション 2. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI  ■ 惹き立たせるUI  ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
  • 18. WEBで見つける
  • 19. http://pttrns.com/?did=1 http://capptivate.co
  • 20. ストアで見つける
  • 21. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション 2. アプリの探し方  ■ おすすめの探し方 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  ■ インタラクション 2. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現 ■ 示唆するUI  ■ 惹き立たせるUI  ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
  • 28. Moldiv メニューボタンを置かない変わりに、 起動時に画面をバウンスさせて、左メニューを示唆 AndroidiOS
  • 29. Timeline 詳細画面に遷移時のシームレスな感じ 遷移時のローディングで、スクロールを示唆 iOS
  • 30. Yarnee 詳細画面で、上フリック時にバウンスさせ 下方向にコンテンツがある事を示唆 全て見終わるとフィードに戻る iOS
  • 31. Starbucks menuでスクロール時に、スクロールの速度に応じて 下のコンテンツを示唆する見切れ iOS
  • 32. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション 2. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI ■ 惹き立たせるUI  ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
  • 33. FIFA イメージカラーが全面のメニュー パララックスを用いたゲームのメニュー画面 OS毎に工夫されたUI AndroidiOS
  • 34. Reuters TV 全体的な浮遊感 パララックスと読み込みの順番でメディアを演出 iOS
  • 35. FastCompany 下方向を示唆する写真の切り方 スクロール時のパララックスで1つ1つをリッチに iOS
  • 36. News digest 写真を印象的に見せる切り方 上下左右のパララックス iOS
  • 37. Recipes パララックスを用いたフリック遷移 分厚いバー固定 色んな所に×マークがあるが、押せない iOS
  • 38. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション 2. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI  ■ 惹き立たせるUI ■ 気の利いたUI  ■ ゆび以外を用いるUI  ■ マテリアルデザイン
  • 39. Medium フィードやメニューは普通に使い易い 投稿画面のカーソルの位置を計算して、画面がズレる iOS
  • 40. 8 tracks シームレスなチュートリアル (iOS)EXPLOREで絞り込み後、左右のフリックで遷移 した後にback操作をすると、始めに戻ってからFixする AndroidiOS
  • 41. Taco bell メニューを2カラムで表示しながら絞り込める ホームフィードへの自然な遷移 iOS
  • 42. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション 2. アプリの探し方  ■ おすすめの探し方 3. おすすめアプリ  ■ 世界観をUIで体現  ■ 示唆するUI  ■ 惹き立たせるUI  ■ 気の利いたUI ■ ゆび以外を用いるUI  ■ マテリアルデザイン
  • 43. FYUSE 写真×3D 傾きを用いて閲覧 精度の高いマッピング AndroidiOS
  • 44. Hitlist 詳細画面の写真が傾きで見える 詳細画面でランドスケープさせると地図表示になる 検索が直感的 AndroidiOS
  • 45. 1. 言葉の定義  ■ UI  ■ UX  ■ インタラクション 2. アプリの探し方  ■ おすすめの探し方 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

×