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