パラダイム-Mail.Ru Group Design System、パート1：ビジュアル言語

記事の著者：Yuri Vetrov、Artyom Gladkov、Evgeny Dolgov、Andrei Sundiev



数年にわたり、ポータル設計チームMail.Ru Groupは製品の更新と標準化を行ってきました。 メディアプロジェクト、モバイルWeb、および部分生産性サービス（他の製品は徐々に接続されています）を実行するデザインシステム、ピクトグラムとイラストのスタイルが形成され、プロモーションレターとプロモーションサイトが標準化されています。 もちろん、すべてのサービスですべてがうまくいくわけではありませんが、どこかで最初の再設計がすべての問題を解決するわけではありませんでしたが、過去数年間の大きなブレークスルーは見逃せません。 更新プロセスを高速化し、作業を公開するために、 パラダイム設計システムの一部を公開しています 。

背景

「シェル」に対して多くのアプローチを行いました。仕様を作成し、単一のソース（UIキット）を組み立て、要素のライブラリを作成しました。 しかし、2012年に、彼らはこれが行き止まりであることに気付きました-設計はレイアウトから実装までの過程でしばしば「ほつれ」ます。そのため、無効なチェーン「ガイドライン→レイアウト→レイアウト→実装」を再考する必要があります。







デザインとテクノロジーを「結婚」させる場合、つまり 設計を技術的実装のレベルに移すと、「ガイドライン=レイアウト=レイアウト→実装」であることがわかり、製品の実装、改善、サポートのためのhemoの束を取り除くことになります。 このように、正しい意味で設計システムの作業を開始しました。設計が「縫い付けられる」レイアウト上の均一なコンポーネントです。

コンテキスト

メールおよびポータル部門には、生産性（ビジネス向けのメール、クラウド、カレンダー、Mail.Ru）、メディアプロジェクト（自動車、星占い、子供、歓迎、健康、女性、映画、メディエーター、不動産、ニュース、天気）約20の製品があります、スポーツ、テレビ、ハイテク、SEOSan）、Beepcar、Answers、モバイル製品（myMail、Artisto）、Mail.Ruのメインページと一般規則、My.comブランドスタイルのサポート。







要件とコンテキストは、ライン全体にわたって優れています。 たとえば、メディアプロジェクトでは、メインコンテンツをジューシーな方法で表示することが重要であり、ニュース消費のモデルは非常に単純です。 同時に、生産性サービスは高い情報密度とインターフェイスとの相互作用の強度を備えているため、視覚的な表現のためのスペースが少なくなります。すべてがメインコンテンツと対話するためのツールになります。 また、My.comやBeepcarとは一線を画す人たちもいますが、これらはMail.Ruブランドとはまったく関係がありませんが、共通の基盤を活用することで利益を得るでしょう。







他の部門では、タスクはそれほど多様ではありません-会社はソーシャルネットワーク、ゲーム、eコマース、イントラネット、および他の多くのサービスを作成しています。 それらは独立しており、現在の段階では部門のタスク用の設計システムを作成していますが、これらの開発が有用であり、すべての人に適用できることが重要です。



設計システムをスケーラブルにする方法 私たちの道はかなり曲がりくねっていました。



2012年には、モバイルWebの処理を開始しました-12のサービスを最初から更新して起動する必要がありました。 まず第一に、UIキットとガイドラインは機能するように設定されていますが、すでに2番目のプロジェクトの作業の途中で、私たちはそのようなペースで遠くまで行かないことに気付きました。











開発者と一緒に、彼らはデザインが埋め込まれる再配布可能なコンポーネントのアイデアを思いつきました。 設計システムの最初のフレームワークと基盤が誕生し、わずか2.5か月で12のモバイルサイトを再描画するタスクを完了しました。このような速度記録はまだありません。









同じ年に、 メディアプロジェクトのWebバージョンの再設計が始まりました 。 統一への最初のアプローチはうまくスケールしませんでしたが、2012年の終わりに「バーガー」アプローチ（一連の「ベルト」、「ライン」、「カット」または「コンテナー」。最新のプロモーションサイトで積極的に使用されました）を試しました。 このインターフェイスイデオロギーとモバイルサイト用に作成されたフレームワークを組み合わせて、2014年に、変更されたデザインシステムに基づく最初の製品を発売しました。 現在、すでに12個あり、新しいバージョンが市場に投入される速度ははるかに速くなっています。1年前ではなく、開発の開始から発売までの約6か月です。









2014年、単一の視覚言語をテーマにした製品の1つに対して、さまざまな製品だけでなく、Web、モバイルWeb、モバイル、タブレットアプリケーションを組み合わせた大規模なハッカソンを開催しました。 その前でさえ、私たちはほぼ同じ方向に動いていましたが、それは明確な原則というよりも、より一般的な感覚でした。 しかし、ここでパラメトリック設計システムのアイデアが最終的に形成され、いくつかの「抽象化の層」（一般的なパラメーター→共通コンポーネント→特定の画面）により、非常に柔軟で強力になりました。 このプロセスの開始から数か月後、彼らはマテリアルデザインを発表しました。そこでは、実際に多くのアイデアの実装を確認しました。正しい方向に進んでいました。







2015年に全体的な設計システムの現在のビジョンを説明し、それから徐々にそれを実装しています。

現状

私たちが理解している設計システムとは何ですか？

• ビジュアル言語 -製品インターフェースの作成方法を定義します。 通常の言語と同様に、アルファベット（変数）、単語（インターフェイス要素）、文（コンポーネント）、テキスト全体（画面および製品）があります。 アルファベットは変更されず、語彙は時間の経過とともに徐々に変化しますが、それらからの文章とテキストは常に異なりますdesign.mail.ru/paradigmに表示されます 。
• 技術レベルの統合コンポーネントが唯一の真実の源です。 設計はそれらに「縫い付けられ」、サービスは単一のリポジトリからそれらを受け取り、更新します。 実際にそれらを使用するMail.Ruブランドの製品：メディアプロジェクト、モバイルWeb、生産性サービスの一部。 現在、それらは社内でのみ利用可能です。
• デザイナーツールのテンプレートは、高レベルのスケッチだけでアイデアをすばやく表示する方法です。 理想的な状況では、レイアウトは強制しませんが、単一のコンポーネントから組み立てられます。 今年の初めにそれらについて書きました 。

拡張性の実現に役立つ設計システムの主要な原則：

• モジュール性 -多数の製品を比較的簡単に管理できます。 インターフェースは、抽象化レイヤーの原則に基づいて構築されています：「変数→基本的なインターフェース要素→特定のタスクを実装するためのコンポーネント→製品画面」。
• パラメトリック性 -インターフェース要素の構築元となる特定のパラメーターを変更すると、さまざまなタイプの製品でスケーラビリティを実現できます。 このために、変数とミックスインを使用します。
• 最小の松葉杖 -既存の変数からインターフェース要素を収集し、既存の要素からコンポーネントを収集します。 私たちが下す決定はすべてシステムに適合し、そのルールに従って実行され、潜在的に当社製品のいずれかで使用する準備ができている必要があります。
• 4dp-いわゆる「スーパーピクセル」。 システムの基礎であり、次元のシステム全体がそれに基づいています。 排他的に4の倍数で考える。 側から見ると、透明度の値でさえ4で割るという考えは異端のように思えますが、これにより、変数の論争や矛盾の数が大幅に減少します。 フォント部分では、Windowsでのフォントのレンダリング（サイズ13、15、および17）に関連して偏差が生じる可能性がありますが、これは今後克服することを望んでいます。
• モバイル（小画面）およびタッチ画面（指操作、マウスなし）に対応。 いずれのソリューションもアプリオリなタッチフレンドリーでなければなりません。これは要素のサイズ、ホバーアクションなどに適用されます。 デバイス間の境界はぼやけており、使い慣れたデスクトップコンピューターにはタッチスクリーンがあります。 すべてのインターフェイスは、適応型であるか、モバイルバージョンを備えている必要があります。

これらの原則について、具体的な例を挙げて説明します。

パラメトリック性

一連のパラメーターを使用して、任意の要素をすばやく取得できます。 たとえば、簡単なボタンを組み立ててみましょう。

タイポグラフィ

適切な状況で使用する変数にすべてのフォントサイズとスタイルを保存します。 いくつかの大きなグループがあります：これらは見出し、組版、署名です。 ボタンには、生産性サービスの基本的なテキストスタイルを含む@fontBody mixinを使用します。 これは、フォントサイズ、スタイル、行間隔のセットです。 必要に応じて、色と段落間の距離が示されます。

4dpグリッドとパディング

設計システムの各要素は、4dp（密度に依存しないピクセル）のモジュール上に構築されています。 つまり、すべてのサイズのインターフェイス要素とそれらの間のインデントは、残りの部分なしで4つに分割する必要があります。 これは追加の「スケルトン」であり、画面のレイアウトのメイングリッドとともに、要素の動作に調和をもたらし、さらに作業にいくつかの制限を課します。 そして、それは間違いを犯す機会が少なくなることを意味します。 Googleマテリアルデザインでも同様のモジュラー8ピクセルグリッドが使用されているため、モバイルインターフェースを使用する場合にも便利です。



ボタンをインデントするには、いくつかの変数の組み合わせを使用します：$ sizeControlHeight（要素の高さ）と$ paddingControlButton（ボタン内の内部インデント）。

原色と境界線

デザインを統一するために働いた誰もが、最小限のグレー色のセットを作ることは非現実的に難しいことを知っています。 そして、ボーダーのような装飾的なソリューションが必要な場合、書き込みはなくなります-変​​数のセットは常に成長します。 固定された小さな色のセットを作成すると同時に、さまざまな製品タスクを解決する方法は？



変数が役立つだけでなく、透明度プロパティを操作するだけでなく、少し複雑な関数（mixin）もあります。



最初の問題は、インターフェイス要素のストロークと境界線です。 通常の変数を使用する場合、さまざまなアクセントカラーのストロークと状態を取得するには、さらに多くのパラメーターを登録する必要があります。 個々の要素の基本的な透明性も助けになります。 たとえば、プロジェクトのセパレータは透明度によって正確に設定されます。この方法では、同じパラメータが使用されているにもかかわらず、どの背景に対しても同じように見えます。



ボタンには、透明度0.12と線の太さ1pxを使用するストロークスタイルを設定します。 ストロークの色は、新しい色を入力することなくメインの背景と混ざります。 変数は$ colorBorderです。 また、$ sizeBorderRadius変数を使用して、ボタンの半径をボタンに追加します。







要素の状態に関する2番目の問題：通常の状態、ホバリング、プレスは、このアプローチでオブジェクトを塗りつぶすための追加の色を提案します。 メディアプロジェクトのさまざまなアクセントカラーを考えると、変数の数は無限に増える可能性があります。 通常の状態の色のみを修正することを決定し、残りはブロックの主な色を取り、特定の割合で黒または白と混合する関数（mixin）によって形成されます-新しい色が取得されます。



ボタンの背景には、変数$ colorBgSecondaryによるメイングレーの塗りつぶしを設定します。







次に、mixinを使用します。これにより、ホバーボタンが4％暗くなります。

@mixin stateHover ($colorBgSecondary) { background: mix($colorBgSecondary, $colorAccent, 4%); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

押されたボタンのスタイルを取得するために、mixinも適用します。これにより、メインの背景が標準の背景から8％暗くなります。 また、ボタンを別の平面に移動する必要があります（z-index：-1）。このために、下部の影を削除して内部に追加します。

 @mixin stateActive ($colorBgSecondary) { background: mix($colorBgSecondary, $colorAccent, 8%); box-shadow: $zIndex-1; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このアプローチは、ボタン、個別のアイコン、複雑なリストアイテム、珍しいレイアウトのカードなど、あらゆるブロックに使用します。 そこで、すべての要素のダイナミクスに関する大きな疑問を解決し、多くの色を塗りませんでした。

影を使用したZ軸の位置

z軸には、要素の4つの位置があります。

• 基本レベルの下の要素（押されたボタンなど）が押されます。
• 基本レベルの要素（メインコンテンツ：テキスト、写真、イラスト）-メインプレーンにあります。
• 要素は、基本レベル（ボタン、カード）より上にあります-レイアウトの一部またはメインコンテンツへの追加情報。
• 別のレベルの要素（ポップアップ、ツールチップ、メニュー）-メインを離れることなく追加のコンテキストを表示する方法。

このボタンでは、$ zIndex1パラメーターを適用します。

結果は何ですか

通常：

 height: $sizeControlHeight; // 32px padding: 0 $paddingControlButton; // 0 16px background-color: $colorBgSecondary; // #f0f0f0 border-radius: $sizeBorderRadius; // 2px border: $sizeBorderWidth solid $colorBorder; // 1px solid rgba(0,0,0,.12) box-shadow: $zIndex1; // 0 2px 0 0 rgba(0,0,0,.04) color: $colorBody; // #333333 font-size: $fontBody; // 15px line-height: $fontBodyLine; // 20px
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ホバー：

 @include stateHover ($colorBgSecondary);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アクティブ：

 @include stateActive ($colorBgSecondary);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

無効：

 opacity: .48;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

拡張性

松葉杖を生産しないために、設計システムを損なうことなく要件を満たす必要があるさまざまなサービスがあります。 上記のパラメトリック性の原則がなければ、このタスクは不可能だったでしょう。 彼らと一緒に、彼女はかなり簡単な運動に変わります。



たとえば、Mail.Ru Mailで使用される単純なボタンを使用します。







背景パラメーターを変更することにより、Mail.Ruのアクセントカラーを持つメインボタンを簡単に取得できます。







変更されているパラメーター：

 background-color: $colorAccent; // #168de2 color: $colorBody; // #ffffff
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メディアプロジェクトでは、それぞれ異なるタイポグラフィとわずかに大きいブロックサイズにアクセントカラーを使用します。 メディアプロジェクト用のボタンを取得するには、他の変数を置き換えるだけで目的の結果を取得します。







変更されているパラメーター：

 height: $sizeControlHeight; // 40px padding: 0 $paddingControlButton; // 0 20px background-color: $colorAccent; // #5856d6 color: $colorBody; // #333333 border-radius: $sizeBorderRadius; // 4px font-size: $fontBody; // 17px line-height: $fontBodyLine; // 24px
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

My.comプロジェクトで他の変数を置き換えた後の同じボタンは次のようになります。







変更されているパラメーター：

 height: $sizeControlHeight; // 40px padding: 0 $paddingControlButton; // 0 20px background-color: $colorAccent; // #00abf2 color: $colorBody; // #333333 border-radius: $sizeBorderRadius; // 4px font-size: $fontBody; // 17px line-height: $fontBodyLine; // 24px text-transform: $fontBodyCase // uppercase
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サイトのモバイルバージョンの場合、ボタンはさらに大きくなり、指で簡単にアクセスできます。







変更されているパラメーター：

 height: $sizeControlHeight; // 48px padding: 0 $paddingControlButton; // 0 20px background-color: $colorAccent; // #168de2 color: $colorBody; // #333333 border-radius: $sizeBorderRadius; // 2px font-size: $fontBody; // 15px line-height: $fontBodyLine; // 20px text-transform: $fontBodyCase // uppercase
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、パラメーターを制御して、松葉杖を避け、拡大する製品ラインに迅速に適応し、新しいシステムソリューションを生成します。 また、単純なインターフェイス要素（ボタン、フォームフィールドなど）の要素から、より複雑なコンポーネント（たとえば、写真ビューアー）が組み立てられ、これもスケーラビリティの恩恵を受けます。

パラダイム

2012年に設計システムの実装を開始し、2015年に全体的なビジョンを形成しました。 インターフェイスの作成に必要なすべてのルールが明確に記述されている、真実の単一のソースを前提としています。 原則、推奨事項、特定のガイドライン-これらはすべて1か所に保存し、100％関連する必要があります。



真実の主な情報源は、実際の製品で使用されるコンポーネントを示すライブガイドラインです。 彼は、インターフェースを構築するための一般的な規則を宣言し、それらを実際の例で示しています。 本物のライブガイドラインがありますが、これまでのところ、それらを公開状態にすることはできませんでした。 同時に、スクリーンショットでガイドラインを説明することは行き詰まりです（すぐに時代遅れになり、最も単純な相互作用さえありません）。また、SketchまたはPhotoshopのUIキットデザインシステムは自己欺beだと考えてください。



同時に、実際のライブガイドラインを思い浮かべるのを待たずに、視覚言語で行われた決定を修正する必要がありました。 その結果、妥協案を決定しました。設計システムのベースとなるインターフェイス要素の静的バージョンを作成しました。







その過程で、原則を実際にテストし、開発者の観点からシステムを見る機会がありました。 以前に州が描かれた「絵」を作成した場合、それらは「生きている」要素であり、より深い研究が必要でした。



この経験により、パラメトリック性の原理を実際に使用することができ、その結果、ミックスインとユーティリティ変数が出現しましたが、グラフィカルエディターで「絵のような」インターフェース要素を描き続けました。



結果の要素セットは、コンポーネントライブラリの開発者を更新するプロセスで参照するモデルになりました。 この更新が進むにつれて、静的要素とコンポーネントを実際のコンポーネント（戦闘植字で使用されるライブラリから取得）に置き換え、ガイドラインが完全に有効になります。



理想のビジョンに向かっていく必要がありますが、実装の各段階で、設計システムからますます多くの利益を得ています。

• レイアウトと製品のアセンブリ速度の向上 -画面を描くだけでなく、製品自体にもっと注意を払うことができます。 フレームワークには、あらゆる場合に必要なブロックとコンポーネントがますます登場し、新しいインターフェイスをすばやく組み立てることができます。 これはユーザーにとって便利です-同様の製品のグループは、同じように明確で使い慣れています。 また、ブランドにとっても良いことです-サービスの全ラインは全体的に見えます。
• 製品の品質の向上 -多数のプロジェクトを同じように管理する方が簡単です。 何百もの個別のプロジェクトの代わりに、いくつかのガイドラインに従います。
• 成功した製品ソリューションの累積的な効果 -たとえば、サービスの1つで表示深度を上げることにより、これらの改善を他のサービスに簡単に適用できます。
• 他のチームとのやり取りが簡単です -アウトソーシング業者はより良いプロジェクトを行い、他の製品は車輪を再発明しません。

そして最も重要なこと-数年ごとの大規模な再設計から、インターフェースの関連性の継続的な維持への移行。 再起動には多くのエネルギーが必要であり、長い間開発に費やされた何千もの小さな開発が失われます。

未来

現在の開発の公開は、設計システムの開発における楽しいマイルストーンです。 しかし、今後多くの作業があります。

• 残りの製品を設計システムに転送します。
• 擬似ライブガイドラインを、製品で使用されるコンポーネントを表示する実際のライブガイドラインに置き換えます。 彼らは、しかし、これまでのところ出版のために湿っています。
• インターフェース要素とコンポーネントのベースを同期します-それらのいくつかは、視覚言語、技術フレームワーク、またはデザインテンプレートのみにあります。
• 相互作用、アクセシビリティ、アニメーション、音声、トーンの一般原則でライブガイドラインを補完します。
• 設計者は、実際の要素とコンポーネントに基づいてプロトタイプを作成し、設計システムを更新し、関連するパーツからレイアウトを組み立てます。

それまでの間、現在の開発状況をご覧ください。 それらを改善する方法についてのアイデアがあれば、私たちはあなたのアドバイスを喜んで受け取ります。

PS

設計システムに取り組んだチーム：

• Alexander Kirovは、モバイル向けの最初のUIキットです。
• Anton Yeprev-コンポーネントシステムの最初のプロトタイプの実装、コンポーネントシステムフェストのフレームワーク。
• Evgeny Belyaevは、Androidのガイドラインの基礎となるモバイルWebです。
• Dmitry Osadchuk-システムの基礎となったメディアプロジェクトの包括的な再設計のためのガイドライン。
• Alexey Sergeev-ガイドラインの基本、製品ラインの同期。
• Pavel Skripkin-スケーラブルなシステムのイデオロギーと基盤、AndroidとiOSのガイドラインの基本、ポータルナビゲーション。
• Gevorg Glechyan-ハンバーガーデザインの基礎。デザインシステムを拡張可能にします。
• Artyom Gladkov-生産性サービスの基礎と開発。設計システムを拡張可能にします。
• Evgeny Dolgov-ハンバーガーデザイン、視覚スタイル（イラスト、アイコン、プロモーションサイト、プロモーションレター）の基礎。デザインシステムを拡張可能にします。
• アンドレイ・サンディエフ-イデオロギーと、システムの拡張性、レイアウト、およびParadigm Webサイトの開発、生産性サービスの開発。
• Yuri Vetrov-スケーラブルなシステムのイデオロギーと基盤、製品ラインガイドラインの基本、およびそれらの同期。
• Konstantin Lebedev-コンポーネントシステムのsystem宴のフレームワーク。
• Konstantin Zubanovは、モバイルWebの第一世代です。
• マリア・ボブロワ-生産性サービスの開発。
• Glory Yashkov-iOSのガイドラインの基礎。
• Svetlana Solovyova-新世代のモバイルWeb。
• Evgeny Ferulev-メディアプロジェクトの開発。
• アレクセイカンダウロフ-生産性サービスの基礎、メディアプロジェクトの開発。
• メディアプロジェクトとモバイルWebの開発：アレクサンダーベクブラトフ、ドミトリーベリャエフ、ヴィタリーヴァシン、パベルヴドフツェフ、コンスタンチンヴォロシェイキン、エフゲニーイワノフ、アンドレイクシモフ、スタニスラフミカルスキー、セルゲイノジキン、アントンポレシュチュク、ボリスレブロフ、パベルライビン、マキシムトゥルビンズ。
• 生産性サービスの開発：イリヤ・バーラク、アーティオム・メジン、スタニスラフ・ツゴヴィコフ、アーサー・ウダロフ、エゴール・ウトロビン。
• Alexey Sudilovsky-問題の技術面での相談とサポート。