UI&UX重要なのは、毎日さわって嬉しい UI/UX!     Bascule GO! - 大塚晃
UIについて  さっそくUIの基礎的なところから 10
1.コンテンツ>UI        ○コンテンツが見たい        ×UIが見たい        コンテンツやサービスを伴い全体でデザインする        すぐにボタンでモリモリになりコンテンツを食ってし        まうので不要なパー...
2.TPO重視           オフ→オン       オフ→オン ・オンとオフでメリハリを。 ・アプリ内であってもTPOが異なるものは全く別のものとしてデザインしてよい。 ・混ぜるな危険。世界感の異なるものはいっしょに並べず必ず画面を分ける。
4.6万色カラーでのトーンジャンプ  ↓きれいなグラデ   ↓トーンジャンプ   ↓実機で見るときれいなグラデになる ・ 微妙なグラデや色味を使う時は見た目が汚くなることがある。 →ドット手打ちでタイリング →Photoshopの誤差拡散法でも...
5.フォントサイズを大きく            △            ×            ×                歩きながらの状態と            ○                椅子に座った状態では      ...
6.屋外想定   コントラストを高く   室内で見る何倍も画面が見づらくなるためコントラストを高くする。   また、複雑なレイアウトや演出は避けてシンプルに。   アクションは片手操作   ・荷物を持っている。つり革につかまっている。   主要...
7.遷移   無限ループ   ・友達リストから友達のプロフィールへ、友達の友達リストから自分のプロフィールへ・・・という   感じで無限遷移を作ることができますが、遷移する度にメモリを消費します。スマホのメモリは   少ないのでループしないよう...
8.iPhone ⇔ Android デザインの互換性   デバイスが変わればUIが変わる、   同じUI設計では対応できない。                      両方のUIガイドラインを読み                      ...
9.アクション(=メニュー)の違い                                    backキー  iPhone にはbackキーやmenuキーがない分                  menuキー  アクションで画面が...
10.安易にやると失敗するUI 2重タブ、2重ダイアログ   タブの左右スクロール     アコーディオンUI 自分が今何の画面を操作    ボタンが動くと操作しづら   便利なように見えるが、小さ しているのかわからなくな   い。     ...
基礎的なところ:まとめ         ボタンが大きくて         みんな喜ぶなら         いくらでもやるさ    「使いやすい」というのはあくまで手段。    本当にやりたいことをやろう。
UserXperienceとは                  やるためのUX
UserXperienceとは             なんだか自由な複雑系
UserXperienceとは   UXに基づいてUIという大きなカラダを作るのに   複雑な概念を用いていても何もできない。   UXの理解や目的の整理はUIの必須条件。   健全なるUIに、健全なる魂やどれかし!!
UXの独自指標    スマホアプリUXのMVC   Mind     Value      Context   望み・気持ち   生活・仕事・遊び    事情・背景
UXの独自指標   Mind          Value            Context   望み・気持ち        生活・仕事・遊び          事情・背景            発見              TPO   ...
UXの独自指標   Mind      Value   Context    がない       がない         がない 届かない          というふうな使い方をします
UXの独自指標   Mind          Value            Context   望み・気持ち        生活・仕事・遊び          事情・背景            発見              TPO   ...
UXの独自指標   Mind          Value           Context   望み・気持ち        生活・仕事・遊び         事情・背景            UX              UI設計の流れ ...
MVCを実績紹介を交えて 3つ
AQUA Social Drive                AQUA Social Drive
AQUA Social Drive      ドライブしながらツイートするアプリ                          YouTube             http://www.youtube.com/watch?v=MmeWe...
AQUA Social Drive            1.まずは    TPO   (Context)             ドライブ中は運転に集中している             画面操作はもちろん不可             外を見て...
AQUA Social Drive    2. アプローチ    ・メーター類やサイン標識と同じく状態を簡潔に知らせるもの。    ・スクリーンセーバーのような反応    ・オーディオやラジオのように耳で楽しませるもの
AQUA Social Drive  ・最小構成  ・1M離れても読める文字の大きさ  →実際の環境を体験しておく、PC画面を見ていてもわからない。
AQUA Social Drive    ・ノイズにならないようにその空間にあるものと     トンマナをあわせる。→信号や交通標識
AQUA Social Drive                    【安全のための配慮】                    メイン画面に触れようとするとアラート                    放置しておくとすぐ解除され元にもど...
AQUA Social Drive        3. 設計から開発へ向けた準備         設計段階では予期できない問題が起きる。         UI設計で準備できることは?
AQUA Social Drive       シーケンス単位でUIパターン出し       全UIをシーケンスに分割し、考えうるパターンの検証を終わらせておく       ※UIはシーケンス単位で再利用が可能、       独自ライブラリくら...
AQUA Social Drive           シーケンスの大量生産1           シーケンス単位で並べてUIを作成しておくと           パターン出しやチェックなどがしやすい。             ログイン・コネク...
AQUA Social Drive    シーケンスの大量生産2    大量のUIを簡単に実機確認したり、素早くシェアするために    Webツールを制作。                        PSDやドキュメントを         ...
AQUA Social Drive     モックアップでの検証     ・開発のリスク:アプリの完成には時間が必要、      実際に使ってみてから気づいてもやり直すことは難しい     ・設計のリスク:頭の中で完成していても気づいていない箇...
AQUA Social Drive    モックはUIデザインをもとにFlashやAirで制作    ・ひと通りの操作を追えるフルモック、    ・サーバーサイドとの連携整理目的で使用するシーケンスモック    ・主要な操作を流れで説明できる最...
[PR] 自社サービス   iPhoneの方                      Androidの方        Pelo                            Cotto     散歩気分の              ...
Newers         www.newers.net
Newers     Twitter           RSSReader     過去のことを誰も覚えていない。   似たようなニュースばかりで飽き     「ニュースの更新・破棄による鮮   る、やがて使わなくなる。「ニュー     度キ...
Newers                           Value をどう                           コントロール           全ての行が           させよう。。            Va...
Newers     開発者は2人+有志     WebAppはUXやUIを一番早くモノにできる     こうならいいのにというアイディアはみんな持っている。     スマホ用にスケーリングすればわりと簡単にカタチにできる     jQuery...
Newers     Androidではタップ挙動が微妙     iPhoneのClick実装         click     → fn     AndroidのClick実装         var target         clic...
Newers     最後に:     UXは映像やドラマみたいなもので     UIはその1フレームのようなものだと考えます     連続するフレームの上で     シーン・ムード・展開を練った上で     外に出てロケハンしたりすると   ...
Thank you.
Upcoming SlideShare
Loading in...5
×

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

221,224

Published on

第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 Comment
403 Likes
Statistics
Notes
No Downloads
Views
Total Views
221,224
On Slideshare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
749
Comments
1
Likes
403
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×