Enviar búsqueda
Cargar
スマホサービスにおける、UIデザインのノウハウと実例
•
217 recomendaciones
•
177,206 vistas
yosuke sato
Seguir
Techniques and examples for UI Design of mobile app.
Leer menos
Leer más
Denunciar
Compartir
Denunciar
Compartir
1 de 62
Descargar ahora
Descargar para leer sin conexión
Recomendados
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
ユーザーの心に刺ささるためには - UX実践編 -
ユーザーの心に刺ささるためには - UX実践編 -
Midori Hirose
Prott's design
Prott's design
Yukihiro Kobayashi
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
Tatsuya_Yokoyama
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
Recomendados
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
ユーザーの心に刺ささるためには - UX実践編 -
ユーザーの心に刺ささるためには - UX実践編 -
Midori Hirose
Prott's design
Prott's design
Yukihiro Kobayashi
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
Tatsuya_Yokoyama
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
Nobuya Sato
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
Kouichi Kuriyama
テックヒルズ
テックヒルズ
tomo tsubota
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
Kenta Ohsugi
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
Tetsuya Takeda
InVision勉強会資料
InVision勉強会資料
TakuyaTakemoto
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
Taiki Kawakami
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
neokigao
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
なぜUXをデザインしているのか
なぜUXをデザインしているのか
Mikihiro Fujii
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
Keisuke Tada
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
UIデザインの基本
UIデザインの基本
Roy Kim
Más contenido relacionado
La actualidad más candente
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
Nobuya Sato
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
Kouichi Kuriyama
テックヒルズ
テックヒルズ
tomo tsubota
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
Kenta Ohsugi
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
Tetsuya Takeda
InVision勉強会資料
InVision勉強会資料
TakuyaTakemoto
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
Taiki Kawakami
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
neokigao
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
なぜUXをデザインしているのか
なぜUXをデザインしているのか
Mikihiro Fujii
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
Keisuke Tada
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
La actualidad más candente
(20)
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
テックヒルズ
テックヒルズ
UIは「習うより慣れろ」
UIは「習うより慣れろ」
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
InVision勉強会資料
InVision勉強会資料
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
なぜUXをデザインしているのか
なぜUXをデザインしているのか
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
UX / UIデザインって何?
UX / UIデザインって何?
UXの考え方とアプローチ
UXの考え方とアプローチ
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
Destacado
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
UIデザインの基本
UIデザインの基本
Roy Kim
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
Katsumi Mizushima
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
Konomi Kawaharada
UXはじめの一歩
UXはじめの一歩
井上 誠
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
Makoto Shimizu
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
c-mitsuba
はじめてのUXとUIの話
はじめてのUXとUIの話
Kazuki Yamashita
UXとブランド
UXとブランド
Takehisa Gokaichi
UIの話は会議室でするな
UIの話は会議室でするな
Shingo Katsushima
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig24/7
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
schoowebcampus
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
Katsuhito Okada
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
Yu Morita
0528 kanntigai ui_ux
0528 kanntigai ui_ux
Saori Matsui
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Yasuhisa Hasegawa
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
Masaya Ando
Destacado
(20)
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
UIデザインの基本
UIデザインの基本
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
UXのためのUIデザイン
UXのためのUIデザイン
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
UXはじめの一歩
UXはじめの一歩
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
はじめてのUXとUIの話
はじめてのUXとUIの話
UXとブランド
UXとブランド
UIの話は会議室でするな
UIの話は会議室でするな
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
0528 kanntigai ui_ux
0528 kanntigai ui_ux
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
Similar a スマホサービスにおける、UIデザインのノウハウと実例
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
インフラジスティックス・ジャパン株式会社
ソフトウェアUI妥当性確認の形式化に向けて
ソフトウェアUI妥当性確認の形式化に向けて
Shuji Kinoshita
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が失敗するのか?
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が失敗するのか?
インフラジスティックス・ジャパン株式会社
DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析
インフラジスティックス・ジャパン株式会社
Potatotips3 hoshi gaki_akira_iwaya
Potatotips3 hoshi gaki_akira_iwaya
Akira Iwaya
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
禍つヴァールハイトを支えるレイアウト業務
禍つヴァールハイトを支えるレイアウト業務
KLab Inc. / Tech
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
インフラジスティックス・ジャパン株式会社
デバイス時代の Web UI コンポーネント活用
デバイス時代の Web UI コンポーネント活用
インフラジスティックス・ジャパン株式会社
20130528 pasonatech
20130528 pasonatech
インフラジスティックス・ジャパン株式会社
変化の時代における開発者のスキル資産形成について
変化の時代における開発者のスキル資産形成について
Ken Azuma
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
Fumiya Sakai
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
Fumiya Sakai
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
Fumiya Sakai
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
Satoru Yamaguchi
インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発
インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発
インフラジスティックス・ジャパン株式会社
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
Fumiya Sakai
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
Fumiya Sakai
AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例
Kenichi Kambara
Similar a スマホサービスにおける、UIデザインのノウハウと実例
(20)
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
ソフトウェアUI妥当性確認の形式化に向けて
ソフトウェアUI妥当性確認の形式化に向けて
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が失敗するのか?
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が失敗するのか?
DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析
Potatotips3 hoshi gaki_akira_iwaya
Potatotips3 hoshi gaki_akira_iwaya
Css nite(2010.09.23)
Css nite(2010.09.23)
禍つヴァールハイトを支えるレイアウト業務
禍つヴァールハイトを支えるレイアウト業務
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
デバイス時代の Web UI コンポーネント活用
デバイス時代の Web UI コンポーネント活用
20130528 pasonatech
20130528 pasonatech
変化の時代における開発者のスキル資産形成について
変化の時代における開発者のスキル資産形成について
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発
インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例
スマホサービスにおける、UIデザインのノウハウと実例
1.
TECHNIQUES and EXAMPLES for UI
DESIGN of MOBILE APP UX Design Thinking @sugaar 2015/07/14
2.
佐藤 洋介 (さとうようすけ) Ameba事業本部 クリエイティブ統括室 室長 チーフ・クリエイティブディレクター @sugaar
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.
1. Design rules Type
of Device
5.
iOS UI kit framework
6.
iOS iOSアプリケーションの多くは、UIKitフレームワークで定義 された何らかのUI要素を使っています。 https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
7.
UIKitに付属するUI要素は、大きく4つに分類できます。 ❶ バー バーには、アプリケーション全体における現在の画面の 位置づけを表すコンテキスト情報と、別の画面に遷移し、 あるいはアクションを起動するためのコントロール部品 があります。 ❷ コンテンツビュー コンテンツビューにはアプリケーションの処理対象であ るコンテンツが収容されており、 スクロールや、項目の挿入、削除、再配置などといった 操作ができます。 ❶ ❶ ❷ https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
8.
UIKitに付属するUI要素は、大きく4つに分類できます。 ❸ コントロール部品 コントロール部品には、アクションを起動し、あるいは 情報を表示する役割があります。 ❹ 一時ビュー 一時ビューは必要に応じて短時間だけ現れ、重要な情報 を表示したり、追加の選択肢や機能を提供したりします。 ❸ ❸ ❹ https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
9.
Android
10.
■ デザインガイドライン解説動画 http://www.youtube.com/watch?v=x_gxZd9kLv4
11.
4系で2系のダイアログデザインが表示される (cancel/OKのボタン位置で左がOK)のは避ける http://www.youtube.com/watch?v=x_gxZd9kLv4
12.
12 左上の戻るボタン(iOSのデザインパターンの流用)は避ける。 アクションバーの採用で解決するはず。 http://developer.android.com/design/patterns/navigation.html
13.
13 Flat Design
14.
15.
視覚 触覚ではなく
16.
紙のような触感 弧を描くインタラクション https://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing
17.
17 Type of Device 装飾で ごまかせなくなった
18.
18 Type of Device 陳腐化 がすぐバレる市場に
19.
1. Design rules Type
of User
20.
シニア世代の スマートフォン所有率 約3割 MMD研究所:https://mmdlabo.jp/investigation/detail_1452.html 調査期間:2015年6月12日∼13日 有効回答:60歳以上の男女4,406人
21.
「スマホ依存」の自覚率 8割 MMD研究所:https://mmdlabo.jp/investigation/detail_1433.html 調査期間:2015年5月8日∼5月9日 スマートフォン所有の15歳∼59歳男女562人 20代の4割が「かなり依存している」と回答
22.
High Literacy Users
23.
操作の多様性 https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/InteractivityInput/InteractivityInput.html#//apple_ref/doc/uid/TP40006556-CH55-SW2 タップ、ダブルタップ ドラッグ フリック スワイプ
ピンチ タッチ&ホールド
24.
Mislead !!
25.
25 Type of User できるかもUI の積み重ねが離脱を生む
26.
26 Type of User 「慣れ」と「忘れ」の 反復
27.
1. Design rules Design
Tools
28.
29.
30.
http://www.dyson.co.jp/community/about-dyson.aspx モック ツールの 多様化
31.
32.
33.
34.
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
35.
世の中に溢れる 様々なアプリ
36.
目的別に見る トレンドUI
37.
Type of UI
and Tips 1 浮遊感
38.
• パララックスとスケールをコントロー ルし、ページを繰りたくなるような 仕掛け • 詳細画面からの遷移もシームレスで、 フィードの上に乗っている表現 •
投稿画面も浮遊感を踏襲し、サービ ス全体が、統一感のある印象に Storehouce
39.
• 背景にメインイメージを配置し、 ページの持つ世界観を訴求 • その上にコンテンツを浮遊させるこ とで、ページ全体の印象を統一 •
閲覧を邪魔しない控えめなスケール • 横フリックで背景をパララックスさ せることで、横のつながりを示唆 AWA
40.
Type of UI
and Tips 2 示唆するUI
41.
• ファーストランディング時に、左メ ニューの存在を画面のバウンスを用 いて示唆している • 下部のマガジンが横に流れることで 注目を集める工夫をしている Moldiv
42.
• コンテンツの読み込み時に、最上部 に光が流れるようなローディングが 走り、横フリックを示唆 • 詳細画面の横フリックの示唆にもつ ながっている pixotale
43.
Type of UI
and Tips 3 ドロワー
44.
• 王道のリスト型の上バージョン • 文字が大きく、メニューの上下にゆ とりがあるため押下しやすい •
端末が大きくなるにつれ、左上に置 かれたメニューは片手での操作が困 難になってきた Medium
45.
• いわゆるリスト型ではなく、独自の レイアウトで遷移の項目を表現 • 縦と横のフリックが必要 •
主要なメニューはナビゲーションに 収めていて、ドロワーとナビゲー ションを用いたハイブリッドな作り Fleck
46.
• 下にフリックすると、上からドロワー が出現する • アイコンなど、手がかりがいないた め、高いリテラシーを求められる •
しかし、「閲覧」という観点では、 ドロワーの中身はさほど重要な項目 ではない Facebook Paper
47.
However !!
48.
ドロワーをやめた例1 Facebook
49.
ドロワーをやめた例2 Path
50.
Type of UI
and Tips 4 遷移
51.
• 王道の、タップした写真がそのまま 詳細画面にFixする演出 • こうすることで、遷移をシームレス に表現でき、より商品探しに没頭で きるつくりになっている Fancy
52.
• 遷移時に、元の画面がスケールダウ ンし、奥に引っ込んだ表現を用いる ことで、ドリルダウンしたことを表 現 • コンテンツ詳細までのタップ数が多 いのが懸念だが、この表現を用いる ことで、心的負荷を軽減 Issuu
53.
• フィード画面から、写真詳細時に、 画像以外の情報が画面外へ消えるイ ンタラクションを用いることで遷移 をシームレスに見せている • Back時に元の位置にFixする動きも 統一感がある Ultravisual
54.
Type of UI
and Tips 5 カメラ
55.
• 撮影時に、被写体をぐるっと回りな がら撮ることができるアプリ • 閲覧時に、スマホ画面の傾きに応じ て反応するため、閲覧していて楽し くなる仕掛けがある •
横だけでなく、縦にパノラマのよう に撮ることもできる FYUSE
56.
• 自分を中心に、360度のパノラマ写 真を撮影でき、3D空間としてマッピ グしてくれるアプリ • 撮影時のガイドもわかりやすく、次 にどこを取れば良いのかがスムーズ に伝わる Photosynth
57.
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
58.
Tips of Design
1 「いかに詰め込むか」ではなく 「本当に必要か」
59.
Tips of Design
2 自己満ユーザー目線の 落とし穴
60.
Tips of Design
3 トレンドを 鵜呑みにしない
61.
Thank you UX Design
Thinking @sugaar 2015/07/14
62.
https://www.cyberagent.co.jp/recruit/special/techcareer/ サイバーエージェントでは、 世界基準のサービスを一緒につくる仲間を募集しています。 Recruit
Descargar ahora