TREND OF UI DESIGN AND INTERACTION IN NATIVE APPS.

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. ストアで見つける

22. 1. 言葉の定義
■ UI
■ UX
■ インタラクション
２. アプリの探し方
■ おすすめの探し方
3. おすすめアプリ
■ 世界観をUIで体現
■ 示唆するUI
■ 惹き立たせるUI
■ 気の利いたUI
■ ゆび以外を用いるUI
■ マテリアルデザイン

23. Storehouse
浮遊しているような世界観で、遷移がシームレス
直感的な写真の複数枚投稿
実はiPadがメイン
iOS

24. STELLER
めくる行為にフォーカスした作り
物語を作るような感覚で、投稿画面を感じさせない
iOS

25. Paper
長押し時の、カテゴリ追加
フリック時の心地よいラグ、背景画像をリフレクト
webビューがwebビューっぽくない
iOS

26. Pixotale
思わずフリックしたくなる、ローディング
詳細画面への自然な遷移
投稿画面でのテキストブロックの挙動
iOS

27. Ultravisual
詳細画面の背景色が写真のカラー
吸着するアニメーション
投稿時のローディングがモザイク
iOS

28. 1. 言葉の定義
■ UI
■ UX
■ インタラクション
２. アプリの探し方
■ おすすめの探し方
3. おすすめアプリ
■ 世界観をUIで体現
■ 示唆するUI
■ 惹き立たせるUI
■ 気の利いたUI
■ ゆび以外を用いるUI
■ マテリアルデザイン

29. Moldiv
メニューボタンを置かない変わりに、
起動時に画面をバウンスさせて、左メニューを示唆
AndroidiOS

30. Timeline
詳細画面に遷移時のシームレスな感じ
遷移時のローディングで、スクロールを示唆
iOS

31. Yarnee
詳細画面で、上フリック時にバウンスさせ
下方向にコンテンツがある事を示唆
全て見終わるとフィードに戻る
iOS

32. Starbucks
menuでスクロール時に、スクロールの速度に応じて
下のコンテンツを示唆する見切れ
iOS

33. 1. 言葉の定義
■ UI
■ UX
■ インタラクション
２. アプリの探し方
■ おすすめの探し方
3. おすすめアプリ
■ 世界観をUIで体現
■ 示唆するUI
■ 惹き立たせるUI
■ 気の利いたUI
■ ゆび以外を用いるUI
■ マテリアルデザイン

34. FIFA
イメージカラーが全面のメニュー
パララックスを用いたゲームのメニュー画面
OS毎に工夫されたUI
AndroidiOS

35. Reuters TV
全体的な浮遊感
パララックスと読み込みの順番でメディアを演出
iOS

36. FastCompany
下方向を示唆する写真の切り方
スクロール時のパララックスで１つ１つをリッチに
iOS

37. News digest
写真を印象的に見せる切り方
上下左右のパララックス
iOS

38. Recipes
パララックスを用いたフリック遷移
分厚いバー固定
色んな所に×マークがあるが、押せない
iOS

39. 1. 言葉の定義
■ UI
■ UX
■ インタラクション
２. アプリの探し方
■ おすすめの探し方
3. おすすめアプリ
■ 世界観をUIで体現
■ 示唆するUI
■ 惹き立たせるUI
■ 気の利いたUI
■ ゆび以外を用いるUI
■ マテリアルデザイン

40. Medium
フィードやメニューは普通に使い易い
投稿画面のカーソルの位置を計算して、画面がズレる
iOS

41. 8 tracks
シームレスなチュートリアル
(iOS)EXPLOREで絞り込み後、左右のフリックで遷移
した後にback操作をすると、始めに戻ってからFixする
AndroidiOS

42. Taco bell
メニューを２カラムで表示しながら絞り込める
ホームフィードへの自然な遷移
iOS

43. 1. 言葉の定義
■ UI
■ UX
■ インタラクション
２. アプリの探し方
■ おすすめの探し方
3. おすすめアプリ
■ 世界観をUIで体現
■ 示唆するUI
■ 惹き立たせるUI
■ 気の利いたUI
■ ゆび以外を用いるUI
■ マテリアルデザイン

44. FYUSE
写真×3D
傾きを用いて閲覧
精度の高いマッピング
AndroidiOS

45. Hitlist
詳細画面の写真が傾きで見える
詳細画面でランドスケープさせると地図表示になる
検索が直感的
AndroidiOS

46. 1. 言葉の定義
■ UI
■ UX
■ インタラクション
２. アプリの探し方
■ おすすめの探し方
3. おすすめアプリ
■ 世界観をUIで体現
■ 示唆するUI
■ 惹き立たせるUI
■ 気の利いたUI
■ ゆび以外を用いるUI
■ マテリアルデザイン

47. Play News Stand
iOSでもマテリアルデザインに準拠
位置によって違う2種類のナビゲーションメニュー
AndroidiOS

48. Delectable
マテリアルデザインを踏襲
詳細ページや、ユーザーページへの遷移がシームレス
AndroidiOS

49. Why?
material design

50. マテリアルデザインに対応した
Evernote for Android
https://blog.evernote.com/jp/2015/03/12/47325

51. Google の最新のコンセプトや美意識、
異なるデバイスでの統一感などを Evernote に取り入れることで、
Android アプリ開発の最先端を行くアプリを作りたかった。
https://blog.evernote.com/jp/2015/03/12/47325
Evernote の Android プロダクト・マネージャー
テレサ・ピタピリー (Theresa Pittapilly)

52. 最後に

53. 派手に
動く
見た事が
ない
驚きが
ある
なんかリッ
チ
普通
じゃない

54. 派手に
動く
見た事が
ない
驚きが
ある
なんかリッ
チ
普通
じゃない
誤解

55. 優れたUIは
優れたUXの一部であって
自然なインタラクションは
使い心地の為の演出である

56. Amebaのクリエイティブディレクターが徹底考察！
UI/UXがイケてる！
おすすめスマホアプリ
http://www.mdn.co.jp/di/articles/3332/
連載中

57. Thank you
@sugaar 2015/05/15