アプリのUIを改善するための7ステップ～Bump Recorder の UI を設計してみたよ編～

あんざいゆき

自己紹介

• あんざいゆき - 株式会社ウフィカ（uPhyca）

• Blog : Y.A.Mの雑記帳（http://y-anz-m.blogspot.com）

• 本 : Android Layout Cookbook

• Twitter : @yanzm

• Android 女子部 副部長

• GTUG Girls マネージャー

Bump Recorder

• シンプル

• →目的の機能までのステップ数が少ない

• = Start ボタンを押すだけで測定を開始できる

いいところ

いいところは残しつつ機能を追加

いいところ

脱ダサいアプリのために...

ステップ1. 同じような機能のアプリを探す

このあたりを見ました。

• Instant Heart Rate

• https://market.android.com/details?id=si.modula.android.instantheartrate

• RunKeeper

• https://market.android.com/details?id=com.fitnesskeeper.runkeeper.pro

• Endomondo Sports Tracker

• https://market.android.com/details?id=com.endomondo.android

• Sports Tracker

• https://market.android.com/details?id=com.stt.android

• SportsTracker (by STL)

• https://market.android.com/details?id=com.sportstracklive.android.ui.activity.lite

• My Tracks

• https://market.android.com/details?id=com.google.android.maps.mytracks

グラフ部分の参考My Tracks Sports Tracker (by STL) Sports Tracker

ステップ2. 紙に描く

レイアウトは紙派

• NoTitleBar

• View で Action Bar

• 目的に応じて画面分割

• 測定画面

• データ一覧画面

• グラフを大きく

とりあえずレイアウトだけ作る

• 不必要な View 階層を省く

• View 階層が深くなるとパフォーマンスが落ちる

• px 単位を使わない → dip や

layout_weight を活用する

気をつけること

ステップ3. 余白

余白は超重要

• 余白がないと窮屈な感じ

• 余白があるレイアウトは清潔感を出せる

ステップ4. 色を決める

まずは1色だけ

• 複数の色を使ってかっこいいデザインを作るのは難易度が高い

• →アクセントカラーを決める

• グループやチームのカラーから

• アイコンのカラーから

すでにあるアイコンからブルーを利用→ #00ccff

1色から関連する色を作成

•明るさだけ変えた色

•彩度だけ変えた色 → 元の色と相性がいい

#00ccff #7fe5ff彩度半分

#006088明るさ半分

#007a98明るさ6割

背景や文字などのベースカラーを決める

•背景が黒 & 文字が白

•背景が白 & 文字が灰色→定番で失敗がない

アクセントカラー1#006088

アクセントカラー2#007a98

（背景白に文字黒はコントラストが強すぎる。灰色の方がスタイリッシュな感じを出せる）

背景#000000

文字#ffffff

明るさを少しだけ変えた2色でグラデーション

• <shape> を使って、Action Bar の背景を作る

#006088明るさ半分

#007a98明るさ6割

res/drawable/title_bg.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" >    <gradient        android:angle="90"        android:endColor="#007a98"        android:startColor="#006088" /></shape>

グラフ部分の色を変える

• 背景を黒、枠を描画

• 線色を彩度、明るさをそろえたものに変更

赤 : #e67e75

  HSV : 5, 49, 90

青 : #75b4e6

  HSV : 207, 49, 90

緑 : #afe675

  HSV : 89, 49, 90

黄色 : #f0d67a

  HSV : 47, 49, 94

ステップ5. ボタンをカスタマイズする

Action Bar とそろえてリズムを出す

• <shape> と <selector> を使う<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true">        <shape>            <gradient android:angle="90" android:endColor="#99002e" android:startColor="#800026" />            <corners android:radius="5dip" />        </shape>    </item>    <item>        <shape>            <gradient android:angle="90" android:endColor="#007a99" android:startColor="#006088" />            <corners android:radius="5dip" />        </shape>    </item></selector>

ステップ6. ユーザービリティをよくする

例えば...

• GPS の ON/OFF 画面への導線をいれてみた。

← ここをタップして、設定アプリを起動

Intent intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);

intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);

intent.addCategory(Intent.CATEGORY_DEFAULT);

startActivity(intent);

ステップ7. データへのアクセスを一元化する

データ一覧画面

• ファイルの削除とアップロードが別の UI になっていたので、まとめてみた。

• ListView の1行にアップロード用と削除用のボタンを追加

最終結果

その他気になったところ

• パッケージ名は全部小文字で

• コメントは Javadoc 形式で

• コード規約は Android の AOSP のものを使うといいよ

• 例えば...

• クラスのメンバには prefix で m をつける

• クラスの static なメンバには prefix で s をつける

• static final hogehoge なメンバは大文字にする

• ....

複数人で開発するために...

ありがとうございました。