前回のつづき

iOS 7からはボタンもデフォルトでは文字だけになりました。それも踏まえて文字や背景の色の使い方について考え直す必要があると思います。ガイドラインを元に書きまとめたいと思います。

文字に色をつける

まず基本は文字は黒にして、背景は白、もしくは文字が読みやすい色に留めるべきでしょう。ガイドラインにある通り背景にグラデーションの使用は避けて単色が良いです。その上で重要な箇所および押すことで反応がある箇所は、少し目立つ色(ハイライトカラー)にした方が良いでしょう。

Tint Color

上記のようにNavigationBar/Toolbarのボタンの文字およびアイコンの色は、デフォルトで青色です。よって「押して反応がある箇所をハイライトカラーにする」といったことを意識しなくても、自動的にそうなっています。

アプリ全体のNavgationBar/Toolbarのボタン色を変更したい場合もあると思います。以下は緑にしています。

coloring02

アプローチの1つは、UINavigationControllerのsubclassを以下のように実装し、それをUINavigationControllerを使うようにすることです。

※ 以前はUINavigationControllerのsubclassを作ることは非推奨でしたが、iOS 6からは認められています。

@implementation MYNavigationController

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIColor *color = [UIColor colorWithRed:51/255.0 green:204/255.0 blue:51/255.0 alpha:1.0];
    self.navigationBar.tintColor = color;
    self.toolbar.tintColor = color;
}

@end

※ [[UINavigationBar appearance] setTintColor:XXX]では戻るボタンの色が変わりません。

ボタンによってハイライトカラーがバラバラだとユーザーが混乱するので統一しておくべきでしょう。ただし削除ボタンは赤色にするのは良いと思います。

赤色ボタン

この場合は、UIBarButtonItem#tintColorを指定します。上記のNavigationCotrollerのsubclassで指定した色を上書きする形になります。

UIBarButtonItem *button = 
  [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemTrash
                                                target:self 
                                                action:@selector(didTapDeleteButton:)];
button.tintColor = [UIColor redColor];

この例ではごみ箱アイコンが赤になっていますが、文字ボタンの場合はその文字が赤くなります。

ボタンの文字色、および背景色

iOS 7からボタンの背景や枠が取り払われました。多くの場合は文字だけのボタンとなります。アイコンを使ったボタンにも背景や枠がありません。枠なしボタンには賛否あると思いますが、まず自分の意見を書きたいと思います。

ウェブサイトではリンク文字を押すと別のページが開きます。枠なしボタンと言っていいでしょう。またウェブサイトで背景や枠のあるボタンはどういうふうに使われているかというと、画面遷移よりフォームの送信など「決定」を意味するときに使われることが多いはずです。このことからアプリの画面遷移などで枠なしボタンが使われることは不自然ではないと自分は思います。逆に決定を意味するものは背景色がある方がわかりやすいように思います。

ガイドラインのEmbrace borderless buttonsの項を読むと以下のように考えると良さそうです。

  • BarButton(NavigationBar/Toolbarのボタン)は、枠なしボタンとする。デフォルトがそうであるし、カスタムで枠や背景をつけるべきでない
  • 上記のBarを除くコンテンツ部分も、枠なしボタンを基本とする
  • 何らかの差別化をしたい場合、単色の背景色、もしくは枠をつけたボタンを使っても良い
  • 押せるわけではないがハイライトしたい文字は、押せるもののハイライトカラーと異なる色を使う
  • TableViewCellのタイトルも、そのセルをタップした時にアクションがあるなら、枠なしボタンと同じハイライトカラーを使う

枠あり、背景色ありのボタン例

基本は枠なしボタンを使うのが無難ですが、コンテンツ部分は背景や枠があったほうがわかりやすい場合もあると思います。Twitter公式アプリのフォローボタンが良い例だと思います。

twitter01-a

フォローした後はボタンに背景色がつきます。

twitter02a

Twitterでフォローというのは重要な意味があります。よって少し目立たせる意味でも、このように枠をつけているのでしょう。またフォローしているかどうかをわかりやすく示すために、背景色をつけるようにしています。フォローしている時、背景色をつけるという布石として、フォローしていない時は枠だけ表示しているとも考えられます。

ちなみにガイドラインにも明記されていますが、枠は細い線が推奨されています。太いと必要以上に目立つので避けるべきでしょう。特に理由がない限り枠は1pxで良いでしょう。

TableViewCellのタイトル

ユーザー名と住所をTableViewCellで表示する場合を例にします。

このように表示すると、これが単に情報として表示されているだけなのか、押すことで編集画面に遷移するのかわかりづらいと思います。

cell01

インディケータをつけることで押すと画面遷移があることを示すこともできますが、少し目立たなさすぎる気もします。またPushによる画面遷移ではなく、Modalによる画面遷移の場合、この矢印的なインディケータはおかしい気がします。

cell02

押すとアクションがある場合は、タイトルをBarButtonと同じハイライトカラーにしておくとわかりやすいでしょう。その上でPushによる画面遷移ならインディケータをつけると良いのではないでしょうか。

cell03

つづく