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