スマホサービスにおける、UIデザインのノウハウと実例

Transcript

1. 1. TECHNIQUES and EXAMPLES for UI DESIGN of MOBILE APP UX Design Thinking @sugaar 2015/07/14
2. 2. 佐藤 洋介 （さとうようすけ） Ameba事業本部 クリエイティブ統括室 室長 チーフ・クリエイティブディレクター @sugaar
3. 3. INDEX 1. Design rules Type of Device Type of User Design Tools 2. Design trends Type of UI and Tips 3. Finally Tips of Design
4. 4. 1. Design rules Type of Device
5. 5. iOS UI kit framework
6. 6. iOS iOSアプリケーションの多くは、UIKitフレームワークで定義 された何らかのUI要素を使っています。 https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
7. 7. UIKitに付属するUI要素は、大きく4つに分類できます。 ❶ バー バーには、アプリケーション全体における現在の画面の 位置づけを表すコンテキスト情報と、別の画面に遷移し、 あるいはアクションを起動するためのコントロール部品 があります。 ❷ コンテンツビュー コンテンツビューにはアプリケーションの処理対象であ るコンテンツが収容されており、 スクロールや、項目の挿入、削除、再配置などといった 操作ができます。 ❶ ❶ ❷ https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
8. 8. UIKitに付属するUI要素は、大きく4つに分類できます。 ❸ コントロール部品 コントロール部品には、アクションを起動し、あるいは 情報を表示する役割があります。 ❹ 一時ビュー 一時ビューは必要に応じて短時間だけ現れ、重要な情報 を表示したり、追加の選択肢や機能を提供したりします。 ❸ ❸ ❹ https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
9. 9. Android
10. 10. ■ デザインガイドライン解説動画 http://www.youtube.com/watch?v=x_gxZd9kLv4
11. 11. 4系で２系のダイアログデザインが表示される （cancel/OKのボタン位置で左がOK）のは避ける http://www.youtube.com/watch?v=x_gxZd9kLv4
12. 12. 12 左上の戻るボタン（iOSのデザインパターンの流用）は避ける。 アクションバーの採用で解決するはず。 http://developer.android.com/design/patterns/navigation.html
13. 13. 13 Flat Design
14. 14. 視覚 触覚ではなく
15. 15. 紙のような触感 弧を描くインタラクション https://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing
16. 16. 17 Type of Device 装飾で ごまかせなくなった
17. 17. 18 Type of Device 陳腐化 がすぐバレる市場に
18. 18. 1. Design rules Type of User
19. 19. シニア世代の スマートフォン所有率 約3割 MMD研究所：https://mmdlabo.jp/investigation/detail_1452.html 調査期間：2015年6月12日∼13日 有効回答：60歳以上の男女4,406人
20. 20. 「スマホ依存」の自覚率 8割 MMD研究所：https://mmdlabo.jp/investigation/detail_1433.html 調査期間：2015年5月8日∼5月9日 スマートフォン所有の15歳∼59歳男女562人 20代の4割が「かなり依存している」と回答
21. 21. High Literacy Users
22. 22. 操作の多様性 https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/InteractivityInput/InteractivityInput.html#//apple_ref/doc/uid/TP40006556-CH55-SW2 タップ、ダブルタップ ドラッグ フリック スワイプ ピンチ タッチ&ホールド
23. 23. Mislead !!
24. 24. 25 Type of User できるかもUI の積み重ねが離脱を生む
25. 25. 26 Type of User 「慣れ」と「忘れ」の 反復
26. 26. 1. Design rules Design Tools
27. 27. http://www.dyson.co.jp/community/about-dyson.aspx モック ツールの 多様化
28. 28. INDEX 1. Design rules Type of Device Type of User Design Tools 2. Design trends Type of UI and Tips 3. Finally Tips of Design
29. 29. 世の中に溢れる 様々なアプリ
30. 30. 目的別に見る トレンドUI
31. 31. Type of UI and Tips 1 浮遊感
32. 32. • パララックスとスケールをコントロー ルし、ページを繰りたくなるような 仕掛け • 詳細画面からの遷移もシームレスで、 フィードの上に乗っている表現 • 投稿画面も浮遊感を踏襲し、サービ ス全体が、統一感のある印象に Storehouce
33. 33. • 背景にメインイメージを配置し、  ページの持つ世界観を訴求 • その上にコンテンツを浮遊させるこ とで、ページ全体の印象を統一 • 閲覧を邪魔しない控えめなスケール • 横フリックで背景をパララックスさ せることで、横のつながりを示唆 AWA
34. 34. Type of UI and Tips 2 示唆するUI
35. 35. • ファーストランディング時に、左メ ニューの存在を画面のバウンスを用 いて示唆している • 下部のマガジンが横に流れることで 注目を集める工夫をしている Moldiv
36. 36. • コンテンツの読み込み時に、最上部 に光が流れるようなローディングが 走り、横フリックを示唆 • 詳細画面の横フリックの示唆にもつ ながっている pixotale
37. 37. Type of UI and Tips 3 ドロワー
38. 38. • 王道のリスト型の上バージョン • 文字が大きく、メニューの上下にゆ とりがあるため押下しやすい • 端末が大きくなるにつれ、左上に置 かれたメニューは片手での操作が困 難になってきた Medium
39. 39. • いわゆるリスト型ではなく、独自の レイアウトで遷移の項目を表現 • 縦と横のフリックが必要 • 主要なメニューはナビゲーションに 収めていて、ドロワーとナビゲー ションを用いたハイブリッドな作り Fleck
40. 40. • 下にフリックすると、上からドロワー が出現する • アイコンなど、手がかりがいないた め、高いリテラシーを求められる • しかし、「閲覧」という観点では、 ドロワーの中身はさほど重要な項目 ではない Facebook Paper
41. 41. However !!
42. 42. ドロワーをやめた例１ Facebook
43. 43. ドロワーをやめた例2 Path
44. 44. Type of UI and Tips 4 遷移
45. 45. • 王道の、タップした写真がそのまま 詳細画面にFixする演出 • こうすることで、遷移をシームレス に表現でき、より商品探しに没頭で きるつくりになっている Fancy
46. 46. • 遷移時に、元の画面がスケールダウ ンし、奥に引っ込んだ表現を用いる ことで、ドリルダウンしたことを表 現 • コンテンツ詳細までのタップ数が多 いのが懸念だが、この表現を用いる ことで、心的負荷を軽減 Issuu
47. 47. • フィード画面から、写真詳細時に、 画像以外の情報が画面外へ消えるイ ンタラクションを用いることで遷移 をシームレスに見せている • Back時に元の位置にFixする動きも 統一感がある Ultravisual
48. 48. Type of UI and Tips 5 カメラ
49. 49. • 撮影時に、被写体をぐるっと回りな がら撮ることができるアプリ • 閲覧時に、スマホ画面の傾きに応じ て反応するため、閲覧していて楽し くなる仕掛けがある • 横だけでなく、縦にパノラマのよう に撮ることもできる FYUSE
50. 50. • 自分を中心に、360度のパノラマ写 真を撮影でき、3D空間としてマッピ グしてくれるアプリ • 撮影時のガイドもわかりやすく、次 にどこを取れば良いのかがスムーズ に伝わる Photosynth
51. 51. INDEX 1. Design rules Type of Device Type of User Design Tools 2. Design trends Type of UI and Tips 3. Finally Tips of Design
52. 52. Tips of Design 1 「いかに詰め込むか」ではなく 「本当に必要か」
53. 53. Tips of Design 2 自己満ユーザー目線の 落とし穴
54. 54. Tips of Design 3 トレンドを 鵜呑みにしない
55. 55. Thank you UX Design Thinking @sugaar 2015/07/14
56. 56. https://www.cyberagent.co.jp/recruit/special/techcareer/ サイバーエージェントでは、
 世界基準のサービスを一緒につくる仲間を募集しています。 Recruit