めんどくさがりなデザイナーの タッチデバイスUI攻略 WebSig24/7　あくやん

2014.10.20

こんにちは、あくやんです。 v Webやアプリのデザイン、ディレクションをちょこまかとしています。#

v 半分会社勤めで、半分フリーでお仕事中です。

所属しているWebSig24/7という#コミュニティは一言でいうとWeb#好きな人がひたすら小難しいこと#語り合ってる集まりです。#

@akuyan!https://www.facebook.com/akuyan.info

世の中の

めんどくさがり同士へ

ささげます—

先に結論いいますね。 というわけで…

タッチデバイスUI３ポイント 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を作ったことが ある

作りたいアプリと同一カテゴリのアプリが５つ以上はいっている

E

F

既存アプリの リニューアル である

G

H

段階別タッチデバイスUI検討フローチャート

Yes

No

A まずは生活で端末にもっと触ってみよう！話はそれから。

B ガイドラインを読み倒してみよう。Webとは別物です。

C UIテンプレートがたくさんあるので、落としてみてみよう。

D モックを作りまくって、実機で確認を繰り返そう。

E 類似アプリを使い倒そう！可能であればどちらのOSでも。

F 類似アプリで共通して採用しているパーツを見つけてみよう。

G ペルソナを明確にしてユーザーテストを繰り返そう。

H あなたがサービスのガイドラインです。数値を元に反映を。

段階別タッチデバイスUI検討