Android Bazaar and Conference 2014 Springに行ってきた

はじめに

もう殆ど、Androidをやっていない身ですが情報追っかけ程度に参加してきました。

因みに、当日は寝坊してやべぇって言ってたのは内緒w

興味が湧いたセッションは2つぐらいだったので、それさえ聴ければいいかなーぐらいの感覚で行ってきました。

というわけで、当日のメモに加筆修正したものを残します。

UI/UXデザイントレンド 2014

デザイントレンド

  • 質感がわかるようなデザインに変わりつつ
  • スキュモーフィズムからフラットデザインへ
    • 装飾を外してシンプルに
    • flatvsrealism.com
  • フラットのほうが意図が伝わりやすい
    • Androidのデザインガイドラインもフラットなものに変わっている
    • Googleも力を入れていることがわかる

Androido UI

2011年のTrend
  • 派手
  • 白いテキスト
  • リアルで立体的なアイコン
  • この当時はiPhoneが流行っていたので、似たようなデザインになるような感じ
2012年のTrend
  • 黒やダークな背景
  • ダークやマットな色
  • 水色や白のテキスト
  • レイアウトがグリッドスタイル
  • ON/OFFボタンなど、ルールが破綻してるところもあった
  • ボーダレスUI(ひと目でボタンなのかわからないようなものを指す)
2013年のTrend
  • 白や明るい背景
  • カードスタイル(Googleの殆どのアプリが対応)
  • 影を入れたりして立体感を出している
    • (GooglePlayでの)評価が上がりやすい
    • platformとの統一感が重要
  • ボーダレスUIは健在・・・
  • シンプルなアイコンやイラスト

2014年(1Q)のTrend

  • Yahoo weatheアプリのような感じになりつつある
    • カードスタイルから変わる
  • 端末のスペックが上がってきたから対応できるようになってきた
    • 写真やグラデーション

Android wear

  • サークルUI
    • アイコンが丸くなっているものが増えてきた
    • フラットで押したりする領域が分からないという問題への回答かも
  • より大きな書体
  • 写真やビジュアルリッチに

webサイトデザインとの違い

  • スケーラブル、モニターによっての情報量が違う
    • スマホ向けは、シンプル・単機能・担当直入な処理デザインに

QAメモ

  • アプリのUIデザインはどうするの？
    • ゲームUIとアプリUIとは全く違うので、機能を入れ過ぎないようにする
  • インタラクションにもデザイナーが関わってやっていくほうがよい
    • ダサいものになりづらい
    • エンジニアも積極的にデザイナーと一緒にやっていく
  • 流行を追っかけるためのデザインサイト
    • Android niceties
  • デザインにも事業戦略が必要
    • 古い端末もサポートするのか？など
      • 2.x系はもう切ってもいいかも
      • １つで全部の対応は難しいので避けたほうがよい

トレンドの変遷(最近のAndroidアプリのトレンドについて)

はじめに

  • セッションはAndroid Pattern Cookbookの解説&補足
  • AndroidPatternCoockbookのデモアプリあるので確認しながらだと理解進むかも
  • 最近の開発は、タブレット対応も必須

ダッシュボードデザイン

  • メインコンテンツが複数ある場合、機能が視認しやすいので優位
  • 1回操作挟むのは、ダメじゃね？

タブ

  • スワイプでタブ間の行き来ができるように
  • 各コンテンツのスワイプはできない・・・

NvigationDrawer

  • ガイドライン化
  • メジャーなものは大体NvigationDrawerを使ってる
  • アイコン左、カウンターは右

アプリの世界観も重要

  • FeedlyやEvernoteが筆頭
    • 出しすぎなところもあるけど・・・

上部にユーザー情報を表示が多い

  • アカウント切り替えが難しいタイプも・・・

オリジナリティを出す

  • 黒はデザインが難しい

アクションバー

  • アクションバーとコンテンツの配色は雰囲気になる
    • 白だと明るい、清潔感が出やすい
    • 白+黒だと引き締まる
  • アクションバーの背景
    • 下に影をつけるものも多い
  • フレームワークのアクションバーを使ったほうがよい
    • アプリの世界観次第で独自路線があるならいいけど。

フォント

  • ライセンス問題になりやすいので、フォントはアプリに内蔵しないほうがいい
  • fontFamilyを使うと改善できる可能性がある
    • font同士を組み合わせて使うほうといい

ヘルプポップアップ

  • 注目させたい場合、アニメーションを使うと注目させやすい

インストラクション

  • 「ここを押す」などの表示を入れやすい

チュートリアル

  • 読む？テキスト量は減らしたほうがいい
  • 画像で伝え、1行ぐらいがいい
  • 無くてもいいかの検討も重要

viewpager

  • スクロールできるタブ
  • タイトルストリップ
  • インジケータ
    • ページの移動でアイコンが変わるもの
  • ページ切り替えでエフェクト

タブレット対応

  • スケールアップは微妙な対応
    • データ量が無ければ、それでもいいかも
    • 画像入れるなりで、余白を減らす
  • macroreflow
    • グリッドの並び替え
      • 数も重要になる
    • スマホはリストで対応してやるといい
  • master/detailパターン
    • gmailアプリとかgoogle playアプリ