狠狠撸

狠狠撸Share a Scribd company logo

UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!

?
?
Akiko Ohtsuka
Akiko Ohtsuka

第1回スマホデザイン会議 #sdkaigi AQUA SOCIAL DRIVE - http://aquadrive.jp/ Newers - http://www.newers.net/ Pelo - http://www.pelo.jp/ Cotto - http://cotto.jp/ Pelo's Puzzle - http://www.bascule.co.jp/pelopuzzle/ Bascule Inc. - http://www.bascule.co.jp/ Bascule GO! - http://www.facebook.com/BasculeGo

1 of 42
Download to read offline
UI＆UX 重要なのは、毎日さわって嬉しい UI/UX! Bascule GO! - 大塚晃
UIについて さっそくUIの基礎的なところから １０
１．コンテンツ＞鲍滨 ○コンテンツが見たい ×UIが見たい コンテンツやサービスを伴い全体でデザインする すぐにボタンでモリモリになりコンテンツを食ってし まうので不要なパーツはどんどん削除。 ナビゲーションで画面を半分使ってしまうようなUI は結構にあるが、当然使いにくい
２．罢笔翱重视 オフ→オン オフ→オン ?オンとオフでメリハリを。 ?アプリ内であってもTPOが異なるものは全く別のものとしてデザインしてよい。 ?混ぜるな危険。世界感の異なるものはいっしょに並べず必ず画面を分ける。
４．６万色カラーでのトーンジャンプ ↓きれいなグラデ ↓トーンジャンプ ↓実機で見るときれいなグラデになる ? 微妙なグラデや色味を使う時は見た目が汚くなることがある。 →ドット手打ちでタイリング →Photoshopの誤差拡散法でも代用可 →PCモニタで再現したい場合には、モニタの設定でHighColor(16ビット)を選択
５．フォントサイズを大きく △ × × 歩きながらの状態と ○ 椅子に座った状態では 可読性が全く違う ○ ○ 最小の文字は Gmailなどを参考にすると○ ○ ○
６．屋外想定 コントラストを高く 室内で見る何倍も画面が見づらくなるためコントラストを高くする。 また、複雑なレイアウトや演出は避けてシンプルに。 アクションは片手操作 ?荷物を持っている。つり革につかまっている。 主要な操作が片手でできるか実機に入れて確認する。 実機に入れて持ち歩き 通勤時などにチェックしてみるのがよい
７．迁移 無限ループ ?友達リストから友達のプロフィールへ、友達の友達リストから自分のプロフィールへ???という 感じで無限遷移を作ることができますが、遷移する度にメモリを消費します。スマホのメモリは 少ないのでループしないような整理と構成を。 キャンセル遷移 ?進む方向だけ設計して、戻る方の遷移は考えられていないことが多い。 ダイアログを表示させ、ダイアログから別画面を呼び出したときにキャンセルボタンを押すと、 何が表示されるのか？など。 様々な状況想定のもとに設計する必要あり。
８．iPhone ? Android デザインの互換性 デバイスが変わればUIが変わる、 同じUI設計では対応できない。 両方のUIガイドラインを読み クセを知っておく必要がある。 ただ、サービスやコンテンツを理解 していないと、それぞれのガイドラ インにひっぱられて全く違うアプリ になってしまうこともある。
９．アクション（＝メニュー）の违い backキー iPhone にはbackキーやmenuキーがない分 menuキー アクションで画面が狭くなる Android はアクションをメニューに入れておけるので Android のメニューキーは メイン画面を広く使える（メニューキーで呼び出し） iPhoneのActionボタン（ ） に相当する。 てっとり早くAndroidとの互換性を とったりしたい場合には
１０．安易にやると失敗するUI ２重タブ、２重ダイアログ タブの左右スクロール アコーディオンUI 自分が今何の画面を操作 ボタンが動くと操作しづら 便利なように見えるが、小さ しているのかわからなくな い。 な画面でボタンが動きまわる る。 とかえって操作しにくい。 一画面内で全部できるようにするより、 機能を整理して画面を分けたり削除した方が 結果的に使いやすい
基础的なところ：まとめ ボタンが大きくて みんな喜ぶなら いくらでもやるさ 「使いやすい」というのはあくまで手段。 本当にやりたいことをやろう。
鲍蝉别谤齿辫别谤颈别苍肠别とは やるための鲍齿
鲍蝉别谤齿辫别谤颈别苍肠别とは なんだか自由な复雑系
鲍蝉别谤齿辫别谤颈别苍肠别とは UXに基づいてUIという大きなカラダを作るのに 複雑な概念を用いていても何もできない。 UXの理解や目的の整理はUIの必須条件。 健全なるUIに、健全なる魂やどれかし！！
鲍齿の独自指标 スマホアプリUXのMVC Mind Value Context 望み?気持ち 生活?仕事?遊び 事情?背景
鲍齿の独自指标 Mind Value Context 望み?気持ち 生活?仕事?遊び 事情?背景 発見 TPO 自発性の行動 トリガ UXの複雑な一般指標はこの矢印の要素
鲍齿の独自指标 Mind Value Context がない がない がない 届かない というふうな使い方をします
鲍齿の独自指标 Mind Value Context 望み?気持ち 生活?仕事?遊び 事情?背景 発見 TPO 自発性の行動 トリガ UXのキモはアクセシビリティやユーザビリティより この矢印の質と量が上がるように考えること
鲍齿の独自指标 Mind Value Context 望み?気持ち 生活?仕事?遊び 事情?背景 UX UI 設計の流れ １．サービス要件 ２．アプリ仕様 UXもUIも、どういった人を狙うかの武器、 UXより一歩近づいてヒットするのがUI
MVCを実績紹介を交えて ３つ
AQUA Social Drive AQUA Social Drive
AQUA Social Drive ドライブしながらツイートするアプリ YouTube http://www.youtube.com/watch?v=MmeWeKI8kZs
AQUA Social Drive 1.まずは TPO （Context） ドライブ中は運転に集中している 画面操作はもちろん不可 外を見ているから、画面表示は無意味。 見られないしタッチされないアプリって何？
AQUA Social Drive ２. アプローチ ?メーター類やサイン標識と同じく状態を簡潔に知らせるもの。 ?スクリーンセーバーのような反応 ?オーディオやラジオのように耳で楽しませるもの
AQUA Social Drive ?最小構成 ?１M離れても読める文字の大きさ →実際の環境を体験しておく、PC画面を見ていてもわからない。
AQUA Social Drive ?ノイズにならないようにその空間にあるものと トンマナをあわせる。→信号や交通標識
AQUA Social Drive 【安全のための配慮】 メイン画面に触れようとするとアラート 放置しておくとすぐ解除され元にもどる ガイドラインに沿ったアラートであれば ドライバーは小さな【OK】ボタンを押そうとする。 これは危険な上にドライブが台無しになる。 ガイドラインより優先すべきことはある！
AQUA Social Drive ３. 設計から開発へ向けた準備 設計段階では予期できない問題が起きる。 UI設計で準備できることは？
AQUA Social Drive シーケンス単位でUIパターン出し 全UIをシーケンスに分割し、考えうるパターンの検証を終わらせておく ※UIはシーケンス単位で再利用が可能、 独自ライブラリくらいの感覚でコストはさほどかからない。 ex. Social Drive の UI には pelo のものが多く使われている によって ?最適なUIを選択できる、優れたUIを発見できる。 ?自分の頭もクリアに、クライアントやメンバーへの展開がスムーズ ?開発やサービスからの変則的な要求に対応できる。
AQUA Social Drive シーケンスの大量生産１ シーケンス単位で並べてUIを作成しておくと パターン出しやチェックなどがしやすい。 ログイン?コネクト プロフィール ドライブの開始～終了 終了後のアクション
AQUA Social Drive シーケンスの大量生産２ 大量のUIを簡単に実機確認したり、素早くシェアするために Webツールを制作。 PSDやドキュメントを ドラッグ＆ドロップ
AQUA Social Drive モックアップでの検証 ?開発のリスク：アプリの完成には時間が必要、 実際に使ってみてから気づいてもやり直すことは難しい ?設計のリスク：頭の中で完成していても気づいていない箇所がある。 ?関係各位に対して実際に体験を提供できるので調整が早くなる。 全員の理解が深まりプロジェクトが盛り上がる プロジェクトに関わる人間が多いほど効果的
AQUA Social Drive モックはUIデザインをもとにFlashやAirで制作 ?ひと通りの操作を追えるフルモック、 ?サーバーサイドとの連携整理目的で使用するシーケンスモック ?主要な操作を流れで説明できる最小限のプレゼンモック など種類がある。 何を検証するためのモックアップなのかを定義しておかないと 期待した効果が出ないこともある。
[PR] 自社サービス iPhoneの方 Androidの方 Pelo Cotto 散歩気分の Pelo's PUZZLE 写真をかわいく チェックインアプリ デコしてあそべる おでかけログに 女子アプリ
Newers www.newers.net
Newers Twitter RSSReader 過去のことを誰も覚えていない。 似たようなニュースばかりで飽き 「ニュースの更新?破棄による鮮 る、やがて使わなくなる。「ニュー 度キープ」が得意なメディア スの集積」が得意な管理ツール 自分のまわりの情報が集まる。 Newers UX 自分の身の回りで話題になっているニュースが読める、 インタレスト型ニュースリーダー
Newers Value をどう コントロール 全ての行が させよう。。 Value トップ フィルタリング機能 RSSのミュートとロック機能
Newers 開発者は２人＋有志 WebAppはUXやUIを一番早くモノにできる こうならいいのにというアイディアはみんな持っている。 スマホ用にスケーリングすればわりと簡単にカタチにできる jQueryで作ったモックを公開するイメージ 実際に体験してみなければそれが意図したものかはわからない 言語化が難しいものの実体を作ってみる。 UI用ライブラリも作りたいという軽い気持ち
Newers Androidではタップ挙動が微妙 iPhoneのClick実装 click → fn AndroidのClick実装 var target click → fn.apply(target, arguments) touchstart → bind(“touchmove touchend”) touchmove → unbind(“touchmove touchend”) touchend → target=e.target
Newers 最後に： UXは映像やドラマみたいなもので UIはその１フレームのようなものだと考えます 連続するフレームの上で シーン?ムード?展開を練った上で 外に出てロケハンしたりすると 面白いスマホUIが作れるはず
Thank you.

More Related Content

UI＆UX / 重要なのは、毎日さわって嬉しい UI UX!

  • 3. １．コンテンツ＞鲍滨 ○コンテンツが見たい ×UIが見たい コンテンツやサービスを伴い全体でデザインする すぐにボタンでモリモリになりコンテンツを食ってし まうので不要なパーツはどんどん削除。 ナビゲーションで画面を半分使ってしまうようなUI は結構にあるが、当然使いにくい
  • 4. ２．罢笔翱重视 オフ→オン オフ→オン ?オンとオフでメリハリを。 ?アプリ内であってもTPOが異なるものは全く別のものとしてデザインしてよい。 ?混ぜるな危険。世界感の異なるものはいっしょに並べず必ず画面を分ける。
  • 5. ４．６万色カラーでのトーンジャンプ ↓きれいなグラデ ↓トーンジャンプ ↓実機で見るときれいなグラデになる ? 微妙なグラデや色味を使う時は見た目が汚くなることがある。 →ドット手打ちでタイリング →Photoshopの誤差拡散法でも代用可 →PCモニタで再現したい場合には、モニタの設定でHighColor(16ビット)を選択
  • 6. ５．フォントサイズを大きく △ × × 歩きながらの状態と ○ 椅子に座った状態では 可読性が全く違う ○ ○ 最小の文字は Gmailなどを参考にすると○ ○ ○
  • 7. ６．屋外想定 コントラストを高く 室内で見る何倍も画面が見づらくなるためコントラストを高くする。 また、複雑なレイアウトや演出は避けてシンプルに。 アクションは片手操作 ?荷物を持っている。つり革につかまっている。 主要な操作が片手でできるか実機に入れて確認する。 実機に入れて持ち歩き 通勤時などにチェックしてみるのがよい
  • 8. ７．迁移 無限ループ ?友達リストから友達のプロフィールへ、友達の友達リストから自分のプロフィールへ???という 感じで無限遷移を作ることができますが、遷移する度にメモリを消費します。スマホのメモリは 少ないのでループしないような整理と構成を。 キャンセル遷移 ?進む方向だけ設計して、戻る方の遷移は考えられていないことが多い。 ダイアログを表示させ、ダイアログから別画面を呼び出したときにキャンセルボタンを押すと、 何が表示されるのか？など。 様々な状況想定のもとに設計する必要あり。
  • 9. ８．iPhone ? Android デザインの互換性 デバイスが変わればUIが変わる、 同じUI設計では対応できない。 両方のUIガイドラインを読み クセを知っておく必要がある。 ただ、サービスやコンテンツを理解 していないと、それぞれのガイドラ インにひっぱられて全く違うアプリ になってしまうこともある。
  • 10. ９．アクション（＝メニュー）の违い backキー iPhone にはbackキーやmenuキーがない分 menuキー アクションで画面が狭くなる Android はアクションをメニューに入れておけるので Android のメニューキーは メイン画面を広く使える（メニューキーで呼び出し） iPhoneのActionボタン（ ） に相当する。 てっとり早くAndroidとの互換性を とったりしたい場合には
  • 11. １０．安易にやると失敗するUI ２重タブ、２重ダイアログ タブの左右スクロール アコーディオンUI 自分が今何の画面を操作 ボタンが動くと操作しづら 便利なように見えるが、小さ しているのかわからなくな い。 な画面でボタンが動きまわる る。 とかえって操作しにくい。 一画面内で全部できるようにするより、 機能を整理して画面を分けたり削除した方が 結果的に使いやすい
  • 12. 基础的なところ：まとめ ボタンが大きくて みんな喜ぶなら いくらでもやるさ 「使いやすい」というのはあくまで手段。 本当にやりたいことをやろう。
  • 14. 鲍蝉别谤齿辫别谤颈别苍肠别とは なんだか自由な复雑系
  • 15. 鲍蝉别谤齿辫别谤颈别苍肠别とは UXに基づいてUIという大きなカラダを作るのに 複雑な概念を用いていても何もできない。 UXの理解や目的の整理はUIの必須条件。 健全なるUIに、健全なる魂やどれかし！！
  • 16. 鲍齿の独自指标 スマホアプリUXのMVC Mind Value Context 望み?気持ち 生活?仕事?遊び 事情?背景
  • 17. 鲍齿の独自指标 Mind Value Context 望み?気持ち 生活?仕事?遊び 事情?背景 発見 TPO 自発性の行動 トリガ UXの複雑な一般指標はこの矢印の要素
  • 18. 鲍齿の独自指标 Mind Value Context がない がない がない 届かない というふうな使い方をします
  • 19. 鲍齿の独自指标 Mind Value Context 望み?気持ち 生活?仕事?遊び 事情?背景 発見 TPO 自発性の行動 トリガ UXのキモはアクセシビリティやユーザビリティより この矢印の質と量が上がるように考えること
  • 20. 鲍齿の独自指标 Mind Value Context 望み?気持ち 生活?仕事?遊び 事情?背景 UX UI 設計の流れ １．サービス要件 ２．アプリ仕様 UXもUIも、どういった人を狙うかの武器、 UXより一歩近づいてヒットするのがUI
  • 22. AQUA Social Drive AQUA Social Drive
  • 23. AQUA Social Drive ドライブしながらツイートするアプリ YouTube http://www.youtube.com/watch?v=MmeWeKI8kZs
  • 24. AQUA Social Drive 1.まずは TPO （Context） ドライブ中は運転に集中している 画面操作はもちろん不可 外を見ているから、画面表示は無意味。 見られないしタッチされないアプリって何？
  • 25. AQUA Social Drive ２. アプローチ ?メーター類やサイン標識と同じく状態を簡潔に知らせるもの。 ?スクリーンセーバーのような反応 ?オーディオやラジオのように耳で楽しませるもの
  • 26. AQUA Social Drive ?最小構成 ?１M離れても読める文字の大きさ →実際の環境を体験しておく、PC画面を見ていてもわからない。
  • 27. AQUA Social Drive ?ノイズにならないようにその空間にあるものと トンマナをあわせる。→信号や交通標識
  • 28. AQUA Social Drive 【安全のための配慮】 メイン画面に触れようとするとアラート 放置しておくとすぐ解除され元にもどる ガイドラインに沿ったアラートであれば ドライバーは小さな【OK】ボタンを押そうとする。 これは危険な上にドライブが台無しになる。 ガイドラインより優先すべきことはある！
  • 29. AQUA Social Drive ３. 設計から開発へ向けた準備 設計段階では予期できない問題が起きる。 UI設計で準備できることは？
  • 30. AQUA Social Drive シーケンス単位でUIパターン出し 全UIをシーケンスに分割し、考えうるパターンの検証を終わらせておく ※UIはシーケンス単位で再利用が可能、 独自ライブラリくらいの感覚でコストはさほどかからない。 ex. Social Drive の UI には pelo のものが多く使われている によって ?最適なUIを選択できる、優れたUIを発見できる。 ?自分の頭もクリアに、クライアントやメンバーへの展開がスムーズ ?開発やサービスからの変則的な要求に対応できる。
  • 31. AQUA Social Drive シーケンスの大量生産１ シーケンス単位で並べてUIを作成しておくと パターン出しやチェックなどがしやすい。 ログイン?コネクト プロフィール ドライブの開始～終了 終了後のアクション
  • 32. AQUA Social Drive シーケンスの大量生産２ 大量のUIを簡単に実機確認したり、素早くシェアするために Webツールを制作。 PSDやドキュメントを ドラッグ＆ドロップ
  • 33. AQUA Social Drive モックアップでの検証 ?開発のリスク：アプリの完成には時間が必要、 実際に使ってみてから気づいてもやり直すことは難しい ?設計のリスク：頭の中で完成していても気づいていない箇所がある。 ?関係各位に対して実際に体験を提供できるので調整が早くなる。 全員の理解が深まりプロジェクトが盛り上がる プロジェクトに関わる人間が多いほど効果的
  • 34. AQUA Social Drive モックはUIデザインをもとにFlashやAirで制作 ?ひと通りの操作を追えるフルモック、 ?サーバーサイドとの連携整理目的で使用するシーケンスモック ?主要な操作を流れで説明できる最小限のプレゼンモック など種類がある。 何を検証するためのモックアップなのかを定義しておかないと 期待した効果が出ないこともある。
  • 35. [PR] 自社サービス iPhoneの方 Androidの方 Pelo Cotto 散歩気分の Pelo's PUZZLE 写真をかわいく チェックインアプリ デコしてあそべる おでかけログに 女子アプリ
  • 36. Newers www.newers.net
  • 37. Newers Twitter RSSReader 過去のことを誰も覚えていない。 似たようなニュースばかりで飽き 「ニュースの更新?破棄による鮮 る、やがて使わなくなる。「ニュー 度キープ」が得意なメディア スの集積」が得意な管理ツール 自分のまわりの情報が集まる。 Newers UX 自分の身の回りで話題になっているニュースが読める、 インタレスト型ニュースリーダー
  • 38. Newers Value をどう コントロール 全ての行が させよう。。 Value トップ フィルタリング機能 RSSのミュートとロック機能
  • 39. Newers 開発者は２人＋有志 WebAppはUXやUIを一番早くモノにできる こうならいいのにというアイディアはみんな持っている。 スマホ用にスケーリングすればわりと簡単にカタチにできる jQueryで作ったモックを公開するイメージ 実際に体験してみなければそれが意図したものかはわからない 言語化が難しいものの実体を作ってみる。 UI用ライブラリも作りたいという軽い気持ち
  • 40. Newers Androidではタップ挙動が微妙 iPhoneのClick実装 click → fn AndroidのClick実装 var target click → fn.apply(target, arguments) touchstart → bind(“touchmove touchend”) touchmove → unbind(“touchmove touchend”) touchend → target=e.target
  • 41. Newers 最後に： UXは映像やドラマみたいなもので UIはその１フレームのようなものだと考えます 連続するフレームの上で シーン?ムード?展開を練った上で 外に出てロケハンしたりすると 面白いスマホUIが作れるはず