「前回の続き」という感覚？
iOSヒューマンインタフェースガイドラインを読んでいてハッとしたことについて。
アプリがいつ閉じられても良いように
ユーザはいつアプリを閉じるかわからない。そのため、可能な限り必要なデータは適宜保存しておく必要がある。例えば、何かを編集しているのであれば、途中データを保存しておいた方が親切。
また当然だが、中途半端な状態でアプリが閉じられてしまった場合に、その後アプリがクラッシュしてしまったりすることは避けたい。前回のデータや状態が破壊されてしまった場合は、その旨をユーザに伝えるのも良いかもしれない。
アプリ起動時は前回開いていた画面から
アプリを閉じる直前の状態を保持しておくことで、アプリを再開した時に前回開いていた画面から始めることができる。これはiOS HIGにも書かれていること。すべてのアプリが実装しているわけではないが、有名なところだとiOS標準アプリ、Twitter、Dropboxなど。
例えばTwitterは、タブバーの各画面から開始されるようになっている。つまり、ホーム画面の検索アイコンを押して検索画面を開き、検索している途中でアプリを閉じた場合、再開後はホーム画面からとなる。
必ずしも前回開いていた状態を復元することが難しい場合もあるが、なるべく近い状態に持って行く方が親切なんだと思う。もちろんこれはアプリの特性と踏まえた上で吟味する箇所だと思うけれど。
デザインっぽくないデザイン
単純に見た目（グラフィック的な）の話ではないので一見デザインっぽくないように感じるが、上述の話はデザイナーが意識するところかなと思う。このあたりはエンジニアに頼むしかないので、仮にデザイン上大事な要素だとしても、優先度が落ちる場合がありそう。ユーザの期待した動作をするように作るのは大切だが、意識していないと見落としがちな点だなと思った。
ダイアログのキャンセル
製作中のアプリで、数カ所ダイアログを使う場面があって考えたこと。
デフォルトにキャンセル機能がない
時刻を設定するためのダイアログとしてAndroidにはTimePickerDialogが用意されているが、デフォルトではキャンセル機能が無い。というより、キャンセル（と思われる操作）時も時刻を設定する処理（onTimeSetメソッド）が呼ばれる。そもそもキャンセルボタンは無いし、ダイアログの外側をタップした場合はダイアログが閉じてonTimeSetメソッドが呼ばれてしまう。ここはキャンセルされてほしい。
OKは１種類
時刻を設定する場合は、OKボタンとか完了ボタンを用意して、それが押された場合のみ時刻設定されるべきだと思う。つまりその他の操作（戻るボタン、キャンセルボタン、ダイアログ外をタップなど）をした場合はキャンセルになるのが望ましいと思う。
一般的かどうかは調査していないので何とも言えないが、僕はダイアログの外側をタップした場合はただダイアログが閉じてキャンセルされる経験を多くしているので、当然そうなると思っている。もちろん何も起きないということもあるが、OKボタンを押した場合と同じ処理が走るとは思わないし、操作自体が怖くなってしまいかねない。
余談：ダイアログのタイトル
設定画面等で、複数の時刻を設定する場合など、同じような項目が並ぶことがある。その場合にダイアログを表示した場合、どの項目かを判断できるようにしておく必要がある。その時の文脈でわかるかもしれないが、一応思ったのでメモっとく。
ActionBarとToolBar
ActionBarの実装方法を時らべていると、少し前のAndroidアプリであればActionBarを実装するのが定石らしかった。最近はマテリアルデザインに寄せるためにToolBarを使用するケースが主流なんだろうか。初めはActionBarで実装していたが、UIデザインをマテリアルデザインに合わせて作っており、ToolBarの方が実装しやすかったので切り替えた。
ActionBarが一般化したToolBar
Android5.0以降でないと使えないと思っていたが、サポートライブラリが出ていたので従来のバージョンでも実装可能。
画面上部に配置されるActionBarに対し、ToolBarは配置を限定されていないらしい（実装してないので確証はない）。ActionBarは他のViewと異なりxmlでレイアウトを調整できないが、ToolBarではxmlで調整する。まだ細く調べていないが、一般的なActionBarとやりたいことが異なれば、ToolBarを使うと楽だと思う。
ナビゲーションボタン
iOSでもAndroidでも、画面遷移した後に前の画面へ戻るボタンが左上に表示される。Androidの場合はハード、もしくはソフトウェアボタンに戻るボタンがあるが、左上に表示することも可能。ActionBarを実装した場合、アプリアイコンの左側のかなり小さいスペースに戻るアイコンが表示され、アプリアイコンを含めた領域が戻るボタンと化す。
ToolBarを実装すると、ActionBarではアプリアイコンを表示していた位置にナビゲーション用のボタンを配置するようになる。戻るボタンやメニューボタン（いわゆるハンバーガーボタン）など。そのため、以前に比べかなり大きく戻るボタンが表示される（単純にタップ領域が大きくなったわけではない）。
Android で線とか描画
CSSのborderをAndroidでできないかと思って、調べてたら描けた。２つのやり方を試したのでそれを書く。
1dpのView
1dpの線を引くための方法としてイメージしやすいのは、1dpのViewを作成して、backgroundで色を指定する方法。
<View android:layout_width="match_parent" android:layout_height="1dp" android:background="#DDD" />
あとはこれをRelativeLayoutとかで入れたい位置に入れるだけ。この方法なら、例えば下線だけ入れたいって時には楽だと思う。
shapeやstrokeを使う
1本の線だけでなく、枠線を作りたいっていう時とかは以下の方法を使った。
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#CCC"/> <stroke android:width="3dp" android:color="#AAAAAA" android:dashGap="3dp" android:dashWidth="3dp" /> <padding android:left="3px" android:top="3px" android:right="3px" android:bottom="3px" /> <corners android:radius="2px" /> </shape>
画像（ImageView）のまわりに枠線を描こうと思って作ったやつ。上記は破線の四角形が描ける。paddingも効くので良い。
行（アイテム）追加のインタフェース
薬の服用時間をアラートしてくれるアプリを製作中で、デザインも実装も自分でやっており、実装は何とかなるものの、デザインの考え方が慣れていないので難しい。今日はアプリで必要になった機能、行（アイテム）の追加のUIについて。
同じ薬でも服用タイミングが異なる場合がある
僕が薬を服用する場合は、大抵が風邪かインフルなどの季節性の病気。この場合、薬の服用期間は大体3日〜１週間くらいだと思う。朝・昼・晩の３食後に飲む場合が多いのかなという印象。だから基本的に１つの薬を服用するタイミングは1日３回とか寝る前とかかなと思っていた。
よくよく聞いてみると、中には「週２回、日曜の夜と月曜の朝」というタイミングで服用しなければならない薬もあるとのこと。お年寄りの方で、たくさん薬を飲んでいる方もいるけど、もしかしたらいろいろ複雑な飲み方をされているのかもしれない。
１つの薬に複数の服用タイミングが必要
当初は「薬Aは毎日、朝・昼・晩」とか「薬Bは週１回日曜日、寝る前」とかを想定していた。今回考える必要があるケースは「薬Cは週２回、日曜日の夜、月曜日の朝」というもの。曜日（もしくは毎日）と時間（朝・昼・晩）が１セットなので、薬Cの場合は２セット必要になると考えた。そこで、２セット以上設定できるようなUIを考える。
アラート設定画面のレイアウト
上記服用タイミングを設定する画面を用意する。ブログ用にデザインはざっくり作ったので適当です。
「服用設定」より下でタイミングの設定をする。曜日と時間帯を選択するだが、ここを複数個設定できるようにする必要がある。自分の解としては、最低１つは登録してもらう必要があるので、リストの一番上はデフォルトで表示。さらに、３段目のプラスアイコンから始まる行もデフォルトで表示しておき、複数設定が可能なことを示している。ここでプラスアイコンをタップして２個以上設定しようとした場合、リスト２段目のように左端に削除用のアイコンを置いておく。このように追加と削除を行えるようにした。
「保存」ボタンを上に配置
服用タイミングの設定数が少ないことを想定していた当初は、画面下部に保存ボタンを配置する予定でした。しかし複数設定できる以上、画面下部にボタンを配置するのは良くないかなと思い（画面が長くなるのと、戻る・ホームボタンなどを誤タップしてしまうのではないかと思い）、アクションバーに保存ボタンを、その隣にキャンセルボタンを配置しています。
「追加」と「削除」のアイコン
この画面のタイトルにもあるが、「新規作成」というからには、前の画面で何かしら作成を促すアイコンをタップして遷移させている。プラスの記号を使ったシンプルなアイコンを使用する予定だが、それではこの画面内のプラスアイコンと被ってしまう。これは少し変える必要があると思う。
また削除のアイコンは、この画面ではバツ印を使用している。しかし、バツ= 削除というのもしっくり来ない。ゴミ箱アイコンやマイナスアイコンを考えたが、素直に伝わるかは使ってもらってみないと分からない。
単純なアプリでも考えること多い
デザインの経験が少ないせいでもあるのでしょうが、考えるべき点が多いなと感じる。いろいろ気にしてしまうこともあるが、とにかくざっと作って、誰かに使ってもらってフィードバックをもらって修正して、というのを繰り返すのも大事だろう。
公式の Android UI デザインテンプレート
ステータスバーやアクションバーの高さってどれくらいだっけ、と思って公式サイトを眺めていたら、UIのテンプレートが用意されていた。てっきり文書で用意されていると思っていたので、とてもありがたい。
初心者にはとても助かる
ダウンロードできるファイルがAIファイルなので、Illustratorでそのまま開いて使用している。簡単なアプリであれば、このテンプレをそのまま使ってしまったほうが綺麗なレイアウトになるんじゃないかと思う。
ものさしツールでいろいろ計ってみる
Illustratorに慣れていないので効率的かどうか分からないけれど、マージンなどをものさしツールで計りながら構造を見てみた。アクションバーのアイコンの大きさや間隔、リストのアイテムのマージンなどを図っていると、なんとなく見えてくる。
間隔を意識してみる
せっかくなので間隔や大きさを意識してみることにした。画面の左右端のマージンを16pxとした場合、大体これを基準にマージンや大きさを揃えていく。例えばリストアイテムのアイコンと本文のマージンを16px（16px × 1）にしたり、リストのセクションバーの高さを48px（16px × 3）にするなど。デザイン経験も浅いのでこういうことから始めてみる。
デザインパターンサイトも参考にする
テンプレート通りにワイヤーフレームを作成したら、見た目はデザインパターンサイトを参考にしている。余裕があればこれらもものさしツール等でいろいろ計ってみたい。
