Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

めんどくさがりなデザイナーの タッチデバイスUI攻略 #spui2014

4,788 views

Published on

2014年10月20日に開催された「スマホUI勉強会 -iPhone6で変わるUI、変わらないUI-」にて発表した資料になります。

Published in: Design
  • Be the first to comment

めんどくさがりなデザイナーの タッチデバイスUI攻略 #spui2014

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

×