2010年8月9日月曜日

Android UI Design Tips

Android UI Design Tips
という資料があったので、日本語でまとめてみました。





■ UIを意識すべきなのはどうして?
  良いUI 
   → ユーザーが洗練された質に気が付く
     → 評価が良くなる
      → アプリのランキングが良くなる
        → さらにたくさんのインストール&購入につながる

■ Agenda

  1. やるべきことと、やっちゃいけないこと

  2. デザイン哲学と考慮すること

  3. 絶対に使うべき UI framework の機能・特徴

  4. 新しい UI デザインパターン

  5. アイコンとガイドライン



■ やるべきことと、やっちゃいけないこと

 * やっちゃいけないこと

  ・単に他のプラットフォームのUIを移植しない!
    ・ユーザーがプラットフォームとアプリが合っていると感じるべき
    ・アプリのブランドとプラットフォームとのバランス

  ・modal progress と確認用ダイアログを使い過ぎない!

  ・柔軟性を持つ!(absolute-positioned layout はダメ)

  ・px単位を使わない!(dp(dip)やspを使う)

  ・小さい文字はダメ!


 * やるべきこと

  ・すべてのリソースに対して、high density screen 用バージョンを用意する

  ・ボタンやリストアイテムなど、明らかにタップするものは大きくする

  ・Android のアイコンガイドラインにしたがう

  ・適切なマージン/パディングを使う

  ・D-pad とトラックボールをサポートする

  ・activity stack を適切に運用する

  ・orientation changes(画面回転)を適切に処理する

  ・theme/style, dimension, color resources を使用して
   冗長性を減らす

  ・visual and interaction designer(s) と一緒に仕事する!!!



■ デザイン哲学と考慮すること

 * Android デザイン哲学

 ・ Clear vs. "simple"
   明確 vs シンプル

 ・ Conetnt vs chrome
   内容 vs 外観のカスタマイズ

 ・ Consistent yet engaging
   一貫性があり魅力的
    - エレガントなバリエーション

 ・ Enhanced by the cloud
   クラウドで機能強化
    - ユーザー環境をデスクトップとモバイルで維持する


 * good interface design の原理

  1. ユーザーにフォーカスする

  2. 正しいものを可視化する

  3. 適切なフィードバックを示す

  4. 予測可能にする

  5. fault-tolerant にする


 * ユーザーにフォーカスする

  ・自分のアプリのユーザーを知る
    - 年齢・スキルレベル・文化・身体障害、などなど
    - あなたのアプリで彼らが何をしたいのか?
    - 彼らはどんな種類のデバイスを使うのか?
    - どこで/いつ/どのように 彼らがそのデバイスをつかうのか?
 
  ・'user-first' mentality (ユーザーを第1に考えて)でデザインする

  ・実際のユーザーに早く/しばしばテストしてもらう


 * 正しいもの可視化する

  ・もっとも一般的な(頻繁に使われる)操作が、すぐ見えてすぐ操作できるべき
    = 左上が一番目がいきやすい

  ・付属的な機能は MENU ボタンに割り当てることができる


 * 適切なフィードバックを示す

  ・ すべてのインタラクティブなUI要素は、少なくとも4個の状態
   (default, desabled focused, pressed など)を
   を使って持つようにする

  ・ 1つのアクションの効果は、明確に見える(=わかる)ようにする

  ・ 控えめだけど十分なプログレスインジケータを表示する


 * 予測可能にする

  ・ ユーザーが期待することをする
    - activity stack の適切な運用
    - ユーザーが見ることを期待する情報とアクションを示す
    (テストと観測が必要)

  ・ 適切なアフォーダンスを使う
    - もしそれがクリック可能なら、クリック可能だとわかるようにする!!

  ** もし複雑な操作が必要ならば、デザインを考えなおすべき! **


 * fault-tolerant にする

  ・意味があるものだけ、操作可能にする
    - UI要素を適切に Enable/Disable する

  ・不可逆的なアクションの数を制限する

  ・確認ダイアログは '使わない'('undo') ようにする
    - 実際は、できるだけ少ない modal dialog を使う
     だって目障りだもん

  "If an error is possible, someone will make it. "
   - Donald Norman, author, The Design of Everyday Things




 * デザインで考慮すること

  ・物理的なスクリーンサイズ
  ・解像度
  ・縦画面 & 横画面
  ・主要なUIインタラクションメソッド
    - タッチスクリーン
    - Dパッド/トラックボール
  ・ソフト/ハードキーボード

  ・デバイスによって、方法が異なる可能性があるということに対する
   意識はすごく重要

  ・デバイスのUIバリエーションについてCDDを読んで学ぶ
    - http://source.android/com/compatibility

  ・スクリーンサイズと解像度に対応する
    - http://developer.android.com/resources/dashboard/screens.html



■ 絶対に使うべき UI framework の機能・特徴

 ・<RelativeLayout>

 ・1つの .apk にすべてのリソースを含む
   - drawable
   - drawable-hdpi
   - drawable-mdpi
   - layout
   - layout-port
   - layout-land
   - layout-large-land
   - layout-large-port

  ・システムが runtime時にどのリソースを使うか選択する

 ・9-patch drawables (foo.9.png)
  ・CSS3 border-image に似てる
  ・border pixels が拡張可能な領域を示す
  ・ -mdpi と -hdpi バージョンを用意する!!

 ・Selector (state list) drawables
  ・状態(state) (desabled, pressed, focused, default...)
   によってボタンの色や画像をかえる

 ・Layer drawables (XML + PNGs)
   foo_border.9.png + foo_mask.9.png
       + Drawable.setColorFilter(0xA4C639, ...);
     → Rendered output (resizable w/9-patch)


■ 新しい UI デザインパターン

もともとは、Google I/O 2010 の Android UI design patterns で話された内容
http://code.google.com/events/io/2010/sessions/android-ui-design-patterns.html

 ・Dashboard

 ・Action Bar

 ・Quick Actions

 Google I/O 2010 では、これに加えて

 ・Search Bar

 ・Companion Widget

 が紹介されている

 詳しくはこちら http://dl.google.com/googleio/2010/android-android-ui-design-patterns.pdf


 * Dashboard



  "このアプリで何ができるのか?"
  "新しくなったことはなにか?"

  を表示

  - Recommendations
   ・ 3 - 6 個の重要なアプリセクションにフォーカス
   ・ what's new にハイライトする
   ・ Be flavorful (魅力的に!)ー ここが第一印象


 * Action Bar



  "よく使うアクションをすばやく行う"
   ・検索、リロードなど

  - Recommendations
   ・アプリのキーやアプリ全体のアクションを画面上にみせる
   ・場所の感覚を伝えるのに役立つ
   ・アプリ内で一貫して使う
   ・'home'メカニズムを提供する - logo や 専用ボタン
   ・状況に依存したアクションは使わない!!


 * Quick Actions



  "このオブジェクトで何ができるのか?"


■ アイコンとガイドライン

 http://developer.android.com/quide/practices/ui_guidelines/icon_design.html

 新しいアイコンスタイル
  ・Tactile(触感)

  ・Rendered

  ・Forward Facing(正面向き)

  ・Top-lit(トップから照明)

  ・Synecdoche(提喩法、代喩:一部で全体を、
   または全体で一部を比喩で表現する方法)

  ・Diverse shapes, materials(さまざまな形状、質感)

0 件のコメント:

コメントを投稿