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