9月、iOS用の公式VKontakteアプリケーションのダークテーマをリリースし、1週間前にAndroidでもリリースされました。 このリリースの背後には、開発者とデザイナーの素晴らしい共同作業があります。 一緒に、VKをダークサイドに切り替えただけでなく、インターフェイスで色を使用する方法を大幅に変更し、色の選択を簡素化し、間違いの可能性を減らし、不要なスタイルを生成しました。

私の名前はMikhail Likhachevです。私はVKのトップデザイナーです。 小さなチームがどのように300の画面を適応させ、モバイルアプリケーションに存在するすべての色を体系化したかをお伝えします。このため、プラットフォーム間で色を同期し、トークンを使用して単一の設計システムに作業を配置しました。 私たちがこれにどのように対応しているか、そして設計プロセスがより複雑になったかどうかについての印象を共有します。

暗いテーマが必要な理由

コントラストを下げて背景を暗くすると、目を痛めることなく低照度でアプリケーションを使用できます。 Googleは、暗いテーマを使用すると、AMOLED画面を備えたデバイスは充電せずに長持ちすることを確認しています。 そして、多くの人々はただ黒い色を好むか、デザインの新鮮なテーマを望んでいます（もちろん、再設計なしで）。

ダークテーマは、一般的なアプリケーションだけでなく、macOS、tvOSオペレーティングシステム、Androidランチャーにも実装されています。 そして、すべてのiOSおよびAndroidデバイスでの登場は、間違いなくそう遠くないでしょう。

私たちにとって、それは待望の機能の実装でもありました-ユーザーは暗いトピックについてより頻繁に尋ねました。 本当に需要が高いことが判明しました-現在、20％以上の視聴者がiOSとAndroidでダークテーマを定期的に使用しています。

カラーシステム

暗いテーマを作成する前に、アプリケーションのカラーパレットを再編成する必要がありました。 目標は次のとおりでした。コードとデザインの両方で、固定パレットに含まれていない色があってはなりません。 色の小さなセットの場合、暗いテーマに合わせやすくなります。

アプリケーション全体をチェックし、すべての色を収集すると、200を超える一意のHEX値がありました。 iOSでのVK Appの最初のバージョンのリリース以来、6年以上が経過し、アプリケーションはいくつかの再設計を経てきました。 これまでのどこかで、更新されていない画面は保持され、どこかで同じ色の値が非常に重要でない場合がありました。 たとえば、HSBの単一の色は、PhotoshopとSketchで異なるHEX値を持つことができます。

私たちのアプリケーションは非常に大規模です。 これらは、ニュース、音楽、ビデオ、ストーリー、放送、メッセンジャー全体、および他の多くの同様に重要なセクションやサービスなど、いくつかのアプリケーションであると言えます。 300〜400のユニークな画面を数えました。それぞれに多くの状態があります。 ニュースだけでも、数種類のレコード表示と15種類以上の添付資料があります。 このようなアプリケーションでは、色がコントラストレベルで分割される、より複雑なシステムが必要です。そのため、暗いテーマだけでなく、新しいコントロールでも色を選択しやすくなります。

カラーシステムの編成に関しては、マテリアルデザインのアプローチが最も気に入っています。 同様のシステムで、グレー、コールドグレー、ブルーの3つの拡張パレットを準備しました。 同時に、0から1000までの従来の値を使用して、コントラストレベルで色を分割しました。0が最も明るく、1000が最も暗いです。 これらの番号は、パレットの名前（グレー100、ブルー300など）とともに色の識別子になりました。

色を選択するとき、HSBカラーモデルが役立ちます。 その中で、Hueは色調、Saturationは彩度、Brightnessは明るさです。 色相の範囲は0〜360°で、ブランドの色調としてインターフェースで212°の固定値を使用します。 彩度と輝度は0〜100％に設定されます。

グレーパレットを10のメインシェードに分割するため、明るさでは10％のステップを使用します。 次に、青色を小さな曲線に沿って彩度と混合し、同時に明るさの値を調整して必要なコントラストのグラデーションを保持します。

同様に、冷たいグレーとブルーのパレットを選択しました。 コールドグレーは、青と組み合わせるためにより飽和した色合いが必要な場所で使用され、アクセント、異なるボタン、テキスト、およびリンクにいくつかの青の色が必要です。

背景、下地、仕切り、アイコン、さまざまなレベルのテキストなど、さまざまな要素に最も頻繁にグレーを使用します。 すでに選択されていたグレーシェードのほとんどは、同様のコントラストの違いがあり、パレットを更新するときに、新しいロジックに合わせていくつかの色の値をわずかにシフトしました。 また、暗いテーマにそれらを使用するために、暗いスペクトルの色の欠落部分を補足しました。

アプリケーションで使用されるすべての色がパレットに追加されました。これには、通知のさまざまなイベントを表すものや、ストーリーの落書き描画モードの色も含まれます。 すべてがより透明になりました。アプリケーションのすべての色が1か所に集められました。 また、特殊なケースに新しい色を追加する場合は、慎重に検討し、その色が既存の色に適しているかどうかを確認する必要があります。

事前定義されたパレットを準備したら、アプリケーションに適用する必要があり、200を超える使用可能なHEX値を50を超える新しいセットに置き換えました。 そして、これらのすべての色を静的変数の形式で1つのファイルに入れます。パレットの各色には一意の名前が付けられています。

iOSおよびAndroidのインフラストラクチャチームの開発者がこれを取り上げました。 彼らは、色を新しいパレットから最も近い色に置き換えるアルゴリズムを準備しました。これにより、プロセスが大幅に加速されました。 次に、すべての画面をテスターでチェックして、間違った色がどこにも適用されないようにし、最後に暗いテーマを取り上げました。

暗いテーマで色を一致させる

使用されているメインシェードを決定するために、メイン画面のレイアウトでダークテーマの色を試してみました。 背景には、Gray 900を使用します。背景とテキストの間のコントラストを下げるために、色は黒よりも1トーン明るいです。 同じ理由で、テキストは白ではなくグレー100が選択されました。

暗いテーマのすべての主要な色は、光と同じグラデーションで識別されました。 明るさの点でスタイルを次々に配置して、適切な値を選択し、それらを反転して、コントラストレベルを1トーンずつシフトしました。 次に、レイアウト上の色をテストし、すべての要素が読みやすくなっていることを確認しました。

使用される原色の表

暗いテーマでは、使用する色が少なくなりました。青い帽子と青いボタンがモノクロになり、使用されるグレーの色合いの範囲が狭くなり、クールグレーパレットが通常のグレーに変わり、コントラストが維持されました。 アクセント要素は青のままでした-暗いテーマでは、より明るく、彩度の低いシェードが選択されました。

モーダルウィンドウやカードなどの問題領域もありました。 それらの下の調光は白に反転することを望みませんでした、そして、暗いテーマで追加の対策なしで、コンテンツの通常の背景は環境と合併するでしょう。 これを回避するために、モーダルカードの場合、通常よりも明るいトーンの背景を選択し、ストロークを追加して（Androidのみ）、最下層から分離しやすくしました。

このような例は、ダークトピックを実装するときに、より柔軟なシステムが必要であることを示しています。

技術的な実装

モックアップのダークテーマに適切な色を選択したら、この問題をコードに転送し始めました。

モックアップで見たように、明るいテーマから暗いテーマに単純にカラーマッチングを導入することは選択肢ではありません。 白は常に黒で置き換えられるわけではありません。明るいテーマの同じ色の要素は、暗いテーマでは異なる色を持つことができます。 暗いテーマで各要素または共通スタイルのグループを再描画する方法を正確に制御する必要がありました。 要素は、変数名に埋め込まれた意味に従って色を変更する必要があります。

トークンは要素または要素のグループの一意の名前（たとえばbackground_content）であり、その値は固定パレットの色（たとえば白）のみであるという次のアプローチを決定しました。 JSON形式のスキームを作成しました。このスキームでは、すべてのトークンが各トピックの値とともに書き込まれます。

このようなスキームは、要素識別子とそのスタイルを含むCSSファイルに非常に似ていますが、JSON形式です。

background_contentおよびtext_primaryトークンを使用したスキームはどのように見えますか？

私たちが持っているものはすべてGitHubで入手できます。

• すべての色と一意の名前を持つパレット 。
• 明るいトピックと暗いトピックのすべてのトークンとその値を含むスキーム 。

JSONスキームから、すべてのプラットフォームの開発者は、必要な形式でコードを生成します。 Anton Spivakのスライドの CodeFestでのスピーチでは 、iOSのコード例でこれについて読むことができます。 AppConfでのArseniy VasilievのスピーチからのAndroid実装に関するレポートは、 ここで見ることができます 。

内部パレットからのみ色を指定できる、つまりトークンの値に任意のHEXカラーコードを登録できない厳密なシステムを作成することにしたことを思い出してください。 alphaパラメーターをトークン値に追加して、追加の色の透明度を示すことができます。 このパラメーターを使用して、無効な状態とコントロールをタッチするときに状態を追加し、パレットに異なる透明度の同じ色を追加しないようにします。

現時点では、スキームにはすでに150を超えるトークンがあります。 グローバル変数と、各コントロールの完全に描画されたスタイル、およびメッセージからのバブルスタイルなど、より論理的な統合には向かない独自のケースがあります。

一般的に使用されるトークンの例

非常に重要なポイント-トークンを簡単かつ迅速に見つけるには、トークンに明確かつ簡潔な名前を付ける必要があります。 命名の原則は次のように選択されました-大きいものから小さいものへ。 このロジックにより、グローバルスタイルでは、一般的な型が最初に示され、コンポーネントは順番に名前、状態、最後に特定の再描画された要素を持ちます。 可能であれば、トークンは普遍的である必要があります-特定の場合の場所と内容ではなく、タイプと意味の意味を反映します。

回路のさらなる作業

スケッチとZeplin

次のステップ：開発者に、レイアウトで使用されるトークンに関する理解可能な情報を提供する必要があります。 これを行うために、トークンをシンボルとして視覚化しました。名前に加えて、暗いテーマと明るいテーマで使用される色のプレビュー、およびパレットの色の名前があります。

回路の大部分を構成した後、シンボルの形でこのようなトークンを生成しましたが、すでに多くのトークンがありました。 それらを手動で構成しないように、現在のバージョンのJSONスキームをプルアップし、そこからテンプレートのシンボルの形でトークンを生成する小さなプラグインを準備し、そこでカラーライブラリの一般的なスタイルから色を置き換えます。 同じプラグインを使用して、ライブラリの更新を生成します。新しいトークンが追加され、既存のトークンの値が更新されます。 ライブラリのシンボルは、使用されているすべてのレイアウトで更新されます。

これは、トークンがシンボルのように見える方法です

そのようなトークンをレイアウトの隣に追加し、すべてをZeplinに送信します。 名前ですぐに明確にならない場合、またはトークンがどの要素に属しているかを明確にする必要がある場合は、説明を追加し、特定の要素を説明するトークンをセクションに分割します。 Sketch Runnerプラグインを使用してシンボル名をすばやく検索し、レイアウト注釈の形式でダークテーマ記述コンストラクターを取得しました。

使用されるトークンの説明を追加する

Zeplinにさらに送信してトークンをレイアウトに埋め込む方法に関する、よりネイティブでシンプルで視覚的なソリューションは見つかりませんでした。 Zeplinは一意の色に名前を付けることができますが、このスキームでは、1つの色を複数のトークンで一度に使用できます。

何百もの画面ごとに暗いバージョンを描画する代わりに、すべてをトークンの形で記述するだけで、設計者の時間を節約できます。 コンポーネントで使用可能なすべてのトークン値はすでにテストされており、正しいものを置き換えるだけで済みます。 唯一の真実はUIキットです-UIキットでは、コンポーネントの現在の状態だけでなく、使用されているトークンも見つけることができます。

ダークテーマの実装のエラーは、スクリーンショットをチェックする際のテスト段階ですでに発見されています。 テスター自身が明らかに間違った色に気づき、デザイナーに助けを求めることができます。欠陥を修正するには、正しいトークンの名前だけが必要です。

スキーマの更新

スキームを更新したり、既存のトークンの値を置き換えたり、新しいトークンを作成する必要がある場合は、JSONファイルを編集するだけです。 これを行うために、トークンを追加するときにすべてのトピックの値を追加することを忘れずに、スキームの現在のバージョンをプルアップし、テキストエディターで変更を行います。 計画では、より簡単な方法でスキームを編集できるアプリケーションを作成する予定ですが、今のところこれで十分です。

更新されたスキームを準備したら、プルリクエストをGitHub（ファイルの変更リクエスト）に送信します。これは、開発者によって確認および承認されます。 変更をマージした後、開発者はUIライブラリの更新を強化する必要があります。そうすると、次の開発アセンブリで15分以内に新しい色が表示されます。

スキーム内のトークンの名前を変更または削除するには、バージョンをGitHubに上げることでメジャーアップデートを作成します。 つまり、そのようなバージョンは自動的に適用できず、UIライブラリのバージョンを更新する前に、開発者はすべての変更をサポートする必要があります：トークン名を更新し、削除されたトークンがどこかで使用された場合、どのトークンが必要かを示す変更のリストのコメントに従う必要があります代わりに使用してください。

スキームをリファクタリングするときにこのような更新をリリースできます。トークンに名前を付ける最善の方法がわかっている場合、またはロジックを保持しながら複数のトークンを1つに結合することが判明した場合。

クロスプラットフォームとVKUI

iOSおよびAndroidアプリケーションの色はほぼ同じであるため、iOSで作業するときに作成される配色はAndroidに適しています。 プラットフォームに違いがある場合は、常にプラットフォームサフィックスを使用してトークンを作成できます。

ネイティブアプリケーションに加えて、 VKUIがあります。 これは、明らかにアプリケーションと見分けがつかないインターフェースを作成できるReactコンポーネントのセットです。 VKUIを使用して、VK内でテスト製品を作成します。また、アプリケーションを更新せずにサーバーから制御したい画面も作成します。 さらに、このライブラリは、サードパーティのVK Appsサービスを作成するために使用されます 。

VKUIは、ネイティブアプリケーションと同じ設計および同じコンポーネントセットに従って構築されているため、このスキームのアプリケーションとダークテーマのサポートは、新しいレイアウトを必要としませんでした。 私たちにとって、これは私たちがサポートするもう1つのプラットフォームであり、iOSとAndroidの切り替えが含まれているだけです。

VKUI Styleguideの Reactコンポーネントの形式でVK設計システムの実装を確認できます。 そして、最も興味深いのは、このページで、テーマとプラットフォームを切り替える機能とともに、使用しているコンポーネントをライブで確認できることです。

近い将来、VKUIのドキュメントを更新し、設計チームの作業に関する詳細情報を収集します-多くの興味深いことがあります️

メッセンジャーの別のトピック

これまでのところカザフスタンでのみテストされているVK Meは、電話番号で登録できる別のメッセンジャーです。 その中で、機能だけを促進し、コミュニケーションのみを残しただけでなく、設計を簡素化しました。

明るいトピックの帽子は、コミュニケーションに焦点を合わせるために白に変わり、青はより明るく飽和しました。

メッセンジャーは、メインアプリケーションのメッセージモジュールに基づいています。つまり、同じコンポーネントと同じスキームを使用してすべての色を記述します。 たとえば、ヘッダーを再描画して検索するには、対応するトークンの値（header_background、header_tint、header_text、search_bar_background、search_bar_field_background search_bar_field_tintなど）を置き換える必要がありました。

かなり簡単な方法で、アプリケーション全体を短時間で再描画し、新しいデザインテーマを作成することができました。

グラフィックを使用する

アプリケーションで使用されるアイコンのセット全体は白にカットされており、回路のトークンを使用して簡単に再描画できます。

2色のアイコンで問題が発生しました。バッジの形でアバターの上に重ねられ、白いストロークが必要なアイコンは2色にカットされました。 これを塗り直すのは簡単ではありません。 これらのアイコンを前面と背景の2つのレイヤーに分割します。これはマスクとして使用され、必要な形状を切り取ります。

Androidには9パッチのグラフィックもあり、たとえば、影付きのカードを描くために使用されます。 それらの影は黒で、カードの塗りつぶしは白です。 ここでグラフィックを2つのレイヤーに分割しないために、開発者は乗算カラーブレンディングモードを使用しました-この方法では、黒い影は再描画されず、色は画像の白い部分にのみ適用されます。

まとめ

暗いテーマを実装する際、私たちはプロセスを真剣に汲み上げ、設計と開発の関係を新しいレベルに引き上げました。

すべての作業とアプリケーションの色を組み合わせた単一のスキームは、デザイナーにとって強力で手頃な価格のツールになり、将来のデザイン更新を簡素化します。 スタイルの作成と色の追加における責任と意味のレベルが増加しました。

色のコントラストを反映した明確な名前が表示されると、HEX値を使用するよりもそれらを使用して移動する方がはるかに簡単になりました。 同じことがトークンにも当てはまります-トークンに埋め込まれた意味のために記憶され、いくつかのプラットフォームおよびアプリケーションで使用されるスタイルのロジックに従うことはプロセスの不可欠な部分になります。

このプロセスは、設計者だけでなく、開発者とテスターに​​とっても時間がかかりました。 しかし、それは価値がありました-ダークトピックは肯定的なユーザーレビューを集め、VK全体に広がり、さらにはそれを超えた「ダークトピック」コメントもミームになりました。