Post on 27-Jun-2015
description
transcript
めんどくさがりなデザイナーの タッチデバイスUI攻略 WebSig24/7 あくやん
2014.10.20
こんにちは、あくやんです。 v Webやアプリのデザイン、ディレクションをちょこまかとしています。#
v 半分会社勤めで、半分フリーでお仕事中です。
所属しているWebSig24/7という#コミュニティは一言でいうとWeb#好きな人がひたすら小難しいこと#語り合ってる集まりです。#
@akuyan!https://www.facebook.com/akuyan.info
世の中の
めんどくさがり同士へ
ささげます—
先に結論いいますね。 というわけで…
タッチデバイスUI3ポイント 1. 画面内のスクリーン領域とコントロール部分を意識する#
2. グリッドとマージンを統一させる#
3. UIガイドラインは一通り読んだら忘れる#
多画面なんてこわくない!
スクリーン領域とコントロール部分を意識 ①
スクリーン?コントロール? ◆スクリーン領域#情報を表示する場所。#ユーザーの無意識に訴えかけるパーツを配置。##◆コントロール部分#情報を操作する場所。#ユーザーに意識的に使ってもらいたいパーツを配置。#
スクリーン領域
コントロール部分
>>
「画面サイズ大きくなっちゃって#片手操作できなくなっちゃった><。」
なぜ区分けするのか?
iPhone6 Plusが大きくて上の方に手が届かないとウワサされていますが、そもそも手の小さい方はiPhone5になった時点で届かなくなってますYO!!
>>
>>
問題なのは画面サイズではなく#それぞれの意識付けの整理が#できていないってこと。
意識的に使う 無意識に うったえかける
2つの意識付け
>>
コメントを書く
決定ボタン
タブバー
戻るボタン 送信ボタン
切り替え 検索
「これ!」って意識させる明示的なもの
パーツごとの仕分け
動作の流れで何気なく 使わせたいもの
◆スクリーン領域
◆コントロール部分
>>
◆無意識に使うもの ◆意識的に使うもの
さっき見たページに 戻りたい
さっき見たページが 表示される
「戻る」ボタンを押す
目的は前のページを表示すること。
写真を投稿したい
「投稿」ボタンを押す
目的は写真を投稿 すること。
パーツごとの意識付けをして画面サイズに左右されない。
“片手で操作できる”ということに捕われすぎない。#なぜならユーザーによって片手の意義が変わるから。##対象ユーザー層によって使い方が異なることを#念頭にふまえて…#
グリッドとマージンを統一させる ②
グリッド事情 Androidに「マテリアル・デザイン」というデザインの概念が導入された
多画面に対応していく 基本的な考え方
色々と細かいことはおいといて…#このグリッド数だけ覚えておこう。
8px 4px iOS Android
※多画面対応じゃない場合は3pxでもOK
マージンの絶対領域キーライン v “キーライン”とは段落のことです。#
v 印刷物を作ったことがある人にはなじみ 深い考えかもしれません。#
v グリッドに通じる部分でもありますが、画面の縦のラインを意識して配置しましょう。
スペース間を統一することで世界観も統一させる。
コンテンツを切り替えても、#画面サイズが変わっても、##スペース間さえ統一されていれば##それなりになんでもかっこいく見える!#
UIガイドラインは一通り読んだら忘れる ③
神より授けられしガイドライン v iOS Human Interface Guidelines
https://developer.apple.com/jp/devcenter/ios/library/documentation/userexperience/conceptual/mobilehig/basicspart/basicspart.html#
v Material Design https://www.google.com/design/spec/material-design/introduction.html#
地上の人間の叫び
ボタン44pxって#大きいよね?#
「戻る」という名前の ボタンないと 使い方に迷う
フラットにしすぎると ユーザーさんが押せるって 気づいてくれません!
英語だとかっこいいけど ソレ日本語にすると もろもろカコワルイの…
ガイドラインはUIにおける考え方の基本であり#最低限のアクセシビリティ。##意識はしつつも、自分たちが作るものが#「誰にいつどんなときに使われるのか」で考えていく。#
ガイドラインを考えのベースに ユーザーの動向を最優先。
とはいってもどうしたら いいか考えるのがめんどいなぁ ってあなたへ。
こんなん作りました ▼
仕事以外で端末をよく 触っている
ガイドライン を読んだ
Web制作が メインだった
A
B
デバイスの テンプレート を触ってみた
C
D
これまでに 端末向けUIを作ったことが ある
作りたいアプリと同一カテゴリのアプリが5つ以上はいっている
E
F
既存アプリの リニューアル である
G
H
段階別タッチデバイスUI検討フローチャート
Yes
No
A まずは生活で端末にもっと触ってみよう!話はそれから。
B ガイドラインを読み倒してみよう。Webとは別物です。
C UIテンプレートがたくさんあるので、落としてみてみよう。
D モックを作りまくって、実機で確認を繰り返そう。
E 類似アプリを使い倒そう!可能であればどちらのOSでも。
F 類似アプリで共通して採用しているパーツを見つけてみよう。
G ペルソナを明確にしてユーザーテストを繰り返そう。
H あなたがサービスのガイドラインです。数値を元に反映を。
段階別タッチデバイスUI検討