読者です 読者をやめる 読者になる 読者になる

Swiftで堅牢なカラーシステムを構築する | try! Swift Tokyo 2017 #tryswiftconf Day2-9 聞き起こし

try! Swift Tokyo 2017

twitter.com

これまで以上に多くの企業が、新しく増え続けるユーザーに今までよりも魅力的なアプリだとアピールするために、アプリを再設計しています。この講演ではあらゆる規模のプロジェクトにスケールできる堅牢なカラーシステムを構築するための戦略について議論します。これらのアプローチはデザイン上の決定を迅速に繰り返すのに役立ち、実行時にカラーパレットのテーマを変更するようなこともできるかもしれません。さらに、iOS 10で導入された新しいカラーフィルターのアクセシビリティ機能を使用して、色覚の問題を抱える人を支援することにも応用できることを示すデモンストレーションも行います。

Swiftで堅牢なカラーシステムを構築する

f:id:niwatako:20170303150625j:plain

f:id:niwatako:20170303150626j:plain

f:id:niwatako:20170303150627j:plain

基本的なカラーシステムのアーキテクチャとして

プロトコルプロトコルエクステンションを利用してカラーパレットを実行時に決定します。

また読みやすさを工夫します

特定RGBの値を一生懸命探さなくて良くなりプラットフォーム全体のカラーパレットを提供できます。

何より重要なのはこれらのパターンに従うことでイテレーションがシンプルになりデザイナもデベロッパも喜びます。

アプリの再設計はブランド再構築ばかりではありません。

Appleのヒューマンインターフェースガイドラインは頻繁に更新されます。スキューモーフィズムの終了やiOS10と新しいMusicの太文字、ダークモードの導入など。

f:id:niwatako:20170303150811j:plain

OLEDiPhoneの噂が流れていますがアプリの見え方を考慮するのはいいタイミングだと思います。

f:id:niwatako:20170303150840j:plain

カラーシステムを作る価値を理解したらアーキテクチャを考えましょう。

InterfaceBuilderを使うかコードでやるか

f:id:niwatako:20170303150858j:plain

IBは大分パワフルになりました。ColorPickerにアクセスできます

デザイナもデベロッパも.clrファイルの共有でカラーパレットを共有できるのをご存知でしょうか。これを使ってIBで設定するのが鉄板です。

残念ながらIBで設定されたカラーは参照リファレンスがありません。

f:id:niwatako:20170303150957j:plain

cliでパレットを共有しても、色を変えるときは全てのXIBフィアルを書き換える必要があります。

プログラマティックな助けなしに複数テーマデビューをカスタマイズするのは出来ない理由になっています。

プログラマティックに定義すれば解消できます。

f:id:niwatako:20170303151054j:plain

一箇所変更すれば反映されます。

さらに特典として、変更の結果が一つのファイルにだけ反映されます。チームメイトも喜ぶでしょう。

f:id:niwatako:20170303151133j:plain

UIColoreExtensionを作成してUIKitに定義された色にアクセスるのと同じようにアクセスできるようにします。

ネストしたstructに定義します。ZEPLINなどで共有するなら、その中にカラーエクスポートツールがあるのでプロセスをシンプルに出来るでしょう。

f:id:niwatako:20170303151244j:plain

私自身はTransparencyが明示的に求められない限りは?このようにするのが良いと思います。

f:id:niwatako:20170303151348j:plain

Swift3でClass Computed Propetyが利用できるようになりました。

f:id:niwatako:20170303151510j:plain

色が持っている役割が明確です。

これをすべてのカラーの役割にまでしたいと思います。

テキストスタイルやフィードバックのインディケータ、ボタン状態などが有ります。もちろん別に一対一で色とカラーパレットを対応させる必要はありません。

ボタンベース、テキストベースのロールが基本的に同じHUEを付かています。

f:id:niwatako:20170303151616j:plain

ボタンの色を何か鮮やかに変えたい場合がありえます。そういうときも簡単に変えられます。

Foreground, backgroundの差も考慮すべきです。

f:id:niwatako:20170303151658j:plain

RGBが捕食になっている必要は無いですが十分なコントラストにしましょう。

f:id:niwatako:20170303151732j:plain

今度はいろんなThemesを統合できるようになります。

f:id:niwatako:20170303151747j:plain

ユーザーが何らかのアクションを起こすとアプリの外観に変化が起きる。

これはすべてのビューでアップデートが伝わるものでなければなりません。

このメッセージはNotificationを使うべきでしょう。コントローラーレベルで応答することになります。

f:id:niwatako:20170303151830j:plain

そこでColorUpdatableプロトコルを定義します。

プロトコルは分かりやすいものになっています。

適正に初期の設定の際に何を見せるかがわかります。アップデートカラーの関数ですけれども、すべてのUI要素の色をアップデートしていきます。

ViewBackgroundやtintなどすべてここで設定することにします。

f:id:niwatako:20170303151951j:plain

また別のProtocolが必要です。ColorChangeObserving。

f:id:niwatako:20170303152029j:plain

たくさんのことをしているわけではありません。

Notificationの名前を予め定義していきます。

f:id:niwatako:20170303152153j:plain

まず幾つかヘルパー関数を作ります。カラーテーマが変わったことを知らせる必要があります。

f:id:niwatako:20170303152309j:plain

Table, CollectionViewもextensionを活用します。

f:id:niwatako:20170303152337j:plain

f:id:niwatako:20170303152404j:plain

Notificationが色を特定していないことはどのような価値あるのでしょうか

f:id:niwatako:20170303152441j:plain

テーマは引数として特定していくことが出来ます。

SwiftProtocolを使うことでこれだけで済むわけです。

サンプルプロジェクトをGithubにおいています。

f:id:niwatako:20170303152521j:plain

テーマがカスタマイズできることで新しい見方が出来ます。

f:id:niwatako:20170303152536j:plain

男性12人に1人、女性200人に1人が何らかの色覚の障害を持っています。5%のユーザーはアプリの作者の意図と違う見え方でアプリを見ている。

f:id:niwatako:20170303152617j:plain

Appleが提供する物があります

f:id:niwatako:20170303152633j:plain

色盲がなければカラーフィルターは役に立たないかもしれません。第二色盲の影響を受けていなければニーズは感じないかもしれません

f:id:niwatako:20170303152657j:plain

どのように見えているのかシミュレーションする必要があります。

カラーシステムを提供してInclusive Coloreと言うものを用意することで解決できます。

コントラスト差は1.6、1.2、1.3

f:id:niwatako:20170303152745j:plain

f:id:niwatako:20170303152825j:plain

こういった状況をシミュレーションすることでプロジェクトのライフタイムを考えるといろいろな結果が出るかもしれません。価値があるかもしれません。

導入前に考えていただきたいことが有ります。

f:id:niwatako:20170303152917j:plain

モノクロは誰にでも適用できますが、色調を使うことで情報の相対性が決定できます。

18pt以下のテキストは高いコントラストが必要。フォントのウェイトを調整することと高いコントラ薄とを使うことで実現できる。

緑はGood、赤はBadという文化が広がっているが、識別できないとそのメッセージは伝わらない

堅牢なカラーシステムの基本をお話しました。

プロトコルを使うことでランタイムでカラーテーマをアップデートする方法をお伝えしました。 色覚障害をアプリのテスト時に考慮する考えをお伝えしました ぜひ活かして下さい。

f:id:niwatako:20170303153103j:plain

関心があれば昨年のWWDCのInclusiveDesignを見てみて下さい。

f:id:niwatako:20170303153123j:plain

Q&A

私は実は色覚異常で、色盲の特性はAPIを使えばいいということでしょうか

色覚異常がある方はご自身のスクリーンを変更することが出来ますカスタムテーマはAppleで用意します。

ネイティブ高速コミュニケーションで質問のやり取りが分からなかった… ┐(´ω`)┌