これまで以上に多くの企業が、新しく増え続けるユーザーに今までよりも魅力的なアプリだとアピールするために、アプリを再設計しています。この講演ではあらゆる規模のプロジェクトにスケールできる堅牢なカラーシステムを構築するための戦略について議論します。これらのアプローチはデザイン上の決定を迅速に繰り返すのに役立ち、実行時にカラーパレットのテーマを変更するようなこともできるかもしれません。さらに、iOS 10で導入された新しいカラーフィルターのアクセシビリティ機能を使用して、色覚の問題を抱える人を支援することにも応用できることを示すデモンストレーションも行います。
Swiftで堅牢なカラーシステムを構築する
基本的なカラーシステムのアーキテクチャとして
プロトコルとプロトコルエクステンションを利用してカラーパレットを実行時に決定します。
また読みやすさを工夫します
特定RGBの値を一生懸命探さなくて良くなりプラットフォーム全体のカラーパレットを提供できます。
何より重要なのはこれらのパターンに従うことでイテレーションがシンプルになりデザイナもデベロッパも喜びます。
アプリの再設計はブランド再構築ばかりではありません。
Appleのヒューマンインターフェースガイドラインは頻繁に更新されます。スキューモーフィズムの終了やiOS１０と新しいMusicの太文字、ダークモードの導入など。
OLEDiPhoneの噂が流れていますがアプリの見え方を考慮するのはいいタイミングだと思います。
カラーシステムを作る価値を理解したらアーキテクチャを考えましょう。
InterfaceBuilderを使うかコードでやるか
IBは大分パワフルになりました。ColorPickerにアクセスできます
デザイナもデベロッパも.clrファイルの共有でカラーパレットを共有できるのをご存知でしょうか。これを使ってIBで設定するのが鉄板です。
残念ながらIBで設定されたカラーは参照リファレンスがありません。
cliでパレットを共有しても、色を変えるときは全てのXIBフィアルを書き換える必要があります。
プログラマティックな助けなしに複数テーマデビューをカスタマイズするのは出来ない理由になっています。
プログラマティックに定義すれば解消できます。
一箇所変更すれば反映されます。
さらに特典として、変更の結果が一つのファイルにだけ反映されます。チームメイトも喜ぶでしょう。
UIColoreExtensionを作成してUIKitに定義された色にアクセスるのと同じようにアクセスできるようにします。
ネストしたstructに定義します。ZEPLINなどで共有するなら、その中にカラーエクスポートツールがあるのでプロセスをシンプルに出来るでしょう。
私自身はTransparencyが明示的に求められない限りは？このようにするのが良いと思います。
Swift3でClass Computed Propetyが利用できるようになりました。
色が持っている役割が明確です。
これをすべてのカラーの役割にまでしたいと思います。
テキストスタイルやフィードバックのインディケータ、ボタン状態などが有ります。もちろん別に一対一で色とカラーパレットを対応させる必要はありません。
ボタンベース、テキストベースのロールが基本的に同じHUEを付かています。
ボタンの色を何か鮮やかに変えたい場合がありえます。そういうときも簡単に変えられます。
Foreground, backgroundの差も考慮すべきです。
RGBが捕食になっている必要は無いですが十分なコントラストにしましょう。
今度はいろんなThemesを統合できるようになります。
ユーザーが何らかのアクションを起こすとアプリの外観に変化が起きる。
これはすべてのビューでアップデートが伝わるものでなければなりません。
このメッセージはNotificationを使うべきでしょう。コントローラーレベルで応答することになります。
そこでColorUpdatableプロトコルを定義します。
プロトコルは分かりやすいものになっています。
適正に初期の設定の際に何を見せるかがわかります。アップデートカラーの関数ですけれども、すべてのUI要素の色をアップデートしていきます。
ViewBackgroundやtintなどすべてここで設定することにします。
また別のProtocolが必要です。ColorChangeObserving。
たくさんのことをしているわけではありません。
Notificationの名前を予め定義していきます。
まず幾つかヘルパー関数を作ります。カラーテーマが変わったことを知らせる必要があります。
Table, CollectionViewもextensionを活用します。
Notificationが色を特定していないことはどのような価値あるのでしょうか
テーマは引数として特定していくことが出来ます。
SwiftProtocolを使うことでこれだけで済むわけです。
サンプルプロジェクトをGithubにおいています。
テーマがカスタマイズできることで新しい見方が出来ます。
男性１２人に１人、女性２００人に１人が何らかの色覚の障害を持っています。５％のユーザーはアプリの作者の意図と違う見え方でアプリを見ている。
Appleが提供する物があります
色盲がなければカラーフィルターは役に立たないかもしれません。第二色盲の影響を受けていなければニーズは感じないかもしれません
どのように見えているのかシミュレーションする必要があります。
カラーシステムを提供してInclusive Coloreと言うものを用意することで解決できます。
コントラスト差は1.6、1.2、1.3
こういった状況をシミュレーションすることでプロジェクトのライフタイムを考えるといろいろな結果が出るかもしれません。価値があるかもしれません。
導入前に考えていただきたいことが有ります。
モノクロは誰にでも適用できますが、色調を使うことで情報の相対性が決定できます。
18pt以下のテキストは高いコントラストが必要。フォントのウェイトを調整することと高いコントラ薄とを使うことで実現できる。
緑はGood、赤はBadという文化が広がっているが、識別できないとそのメッセージは伝わらない
堅牢なカラーシステムの基本をお話しました。
プロトコルを使うことでランタイムでカラーテーマをアップデートする方法をお伝えしました。 色覚障害をアプリのテスト時に考慮する考えをお伝えしました ぜひ活かして下さい。
関心があれば昨年のWWDCのInclusiveDesignを見てみて下さい。
Q&A
色覚異常がある方はご自身のスクリーンを変更することが出来ますカスタムテーマはAppleで用意します。
ネイティブ高速コミュニケーションで質問のやり取りが分からなかった… ┐(´ω｀)┌
