Gravity UIデザインシステム：簡単にインターフェースを構築する方法

皆さんこんにちは、私はアレクセイ・シジコフ、Yandex CloudのUser Experience部門の責任者です。この記事では、嬉しいニュースをお伝えします：私たちのデザインシステムとコンポーネントライブラリGravity UIをオープンソースとしてリリースしました。

Gravity UIコンポーネントライブラリを使用すると、モダンなインターフェースを構築できます。含まれているもの：

• 基本的なReactコンポーネントのセット
• ランディングページ用のコンストラクタライブラリ
• コンポーネントの使用に関する詳細なガイド
• Figmaのライブラリ
• 約600の既製アイコンのセット
• ChartKit — データ可視化パッケージ
• Yagr — uPlotベースの高性能チャートレンダリング
• I18n — インターフェースローカライズパッケージ
• その他25以上の便利なライブラリ

以下では、Gravity UIを作った理由、使い方、アプローチの特徴と利点、今後の開発計画についてお話しします。また、プロジェクトで異なるカラースキームを設定する方法と、標準的な2つではなく4つのテーマがある理由についても説明します。

Gravity UIの特徴

実際の経験に基づく

当社のデザインシステムの特徴の一つは、ユーザーのニーズに基づいて発展していることです。ユーザーの多くは開発者です。さらに、デザイナーは作業している製品と密接に結びついています。各デザイナーには、独自の使用シナリオを持つ複数のサービスがあります。ソリューションがサービスでテストされた後、プロダクトデザイナーはそれを他のサービスに渡し、機能し、開発者に役立つことを確認します。

例えば、サイドナビゲーションコンポーネントは当初、ロゴとメニュー項目のみで開発されました。その後、便利さのために、すべてのサービスと検索を含む項目を追加しました。そして、サイドメニューで直接新しいエンティティを作成する必要があるサービスが登場したとき、プラスアイコン付きの別のボタンが登場しました。その後、メニュー項目が多い複雑なサービス用のセパレーター付きメニューセクション、および「その他の項目」ボタンが登場しました。

柔軟なバリエーション

多くのGravity UIコンポーネントは、異なるシナリオを考慮して設定できます。例えば、paginationコンポーネントには、総ページ数、完全なボタンラベル、特定のページへのジャンプ機能、ページあたりの回答数の変更機能など、いくつかの表示オプションがあります — このバリアントは多数のページ用に設計されています。結果の回答数が少ない場合は、コンパクトモードを使用するか、数字を非表示にして矢印のみを表示することもできます。

幅広い適用範囲

Gravity UIを使用すると、シンプルな管理インターフェースから、チャート付きの複雑なダッシュボードまで作成できます。デザインシステムで構築できるものの例：

• ランディングページ
• 管理画面
• ダッシュボード
• チャート
• CRM
• 分析サービス

例えば、同僚がこのようなダッシュボードを作成しました：

シンプルなランディングページも作成できます。例えば、オープンソースプロジェクトのサイトはGravity UIコンポーネントで作られています。

150人以上のコントリビューター

私たちのエコシステムは常に発展し、改善されています。開発者コミュニティからのフィードバックに加えて、すでにデザインシステムを使用している100以上のサービスから提案を受けています。

例を挙げます。当初、ライトとダークの2つのテーマがありました。しかし、スタンドアップ中やチャートを見るためにテレビにインターフェースを表示するチームからフィードバックを受け始めました。テレビではインターフェースがよく見えないという問題がありました。同様の問題は、古いまたは低品質のモニターを使用しているユーザーにも見られます。

その結果、各テーマに高コントラストモードを開発しました。ダークとライト、およびセマンティックカラーの明るさを増加させます。これはCSSスタイルで設定され、ユーザー設定で管理されます。

ちなみに、あなたも貢献できます。GitHubにPRを送信するか、Figmaにコメントを残してください。

Gravity UIの使い方

ブランドに合わせたインターフェースの設定

次に、Gravity UIでできることについてお話しします。まず、デザインシステムをブランドに合わせて設定する機能について。例えば、YDBがオープンソースになったとき、統一されたデザインシステムを維持しながら、異なるブランドに特有のものにする課題に直面しました。このために、CSS変数の別グループを作成しました。ブランドカラー、フォント、角丸が含まれています。コードではこのように見えます：

.g-root {
    --g-font-family-sans: 'Inter', sans-serif;

    --g-text-header-font-weight: 600;
    --g-text-subheader-font-weight: 600;
    --g-text-display-font-weight: 600;
    --g-text-accent-font-weight: 600;

    --g-color-base-brand: rgb(117, 155, 255);
    --g-color-base-brand-hover: rgb(99, 143, 255);
    --g-color-base-selection: rgba(82, 130, 255, 0.05);
    --g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
    --g-color-line-brand: rgb(117, 155, 255);
    --g-color-text-brand: rgb(117, 155, 255);
    --g-color-text-brand-contrast: rgb(255, 255 ,255);
    --g-color-text-link: rgb(117, 155, 255);
    --g-color-text-link-hover: rgb(82, 130, 255);

    --g-border-radius-xs: 3px;
    --g-border-radius-s: 5px;
    --g-border-radius-m: 6px;
    --g-border-radius-l: 8px;
    --g-border-radius-xl: 10px;
    --g-border-radius-2xl: 16px;
}

このグループでは、フォント、アクセントボタンの色、角丸を置き換えることができます。これにより、ブランドスタイルを維持しながら、異なるブランドに同じデザインシステムを使用できます。このオプションが適さない場合は、独自のカラースキームを作成できます。詳細な手順はドキュメントにあります。

ブランドカラーの変更はメインインターフェースに影響しないことに注意してください。これは、セマンティックカラーが使用される要素にとって特に重要です：例えば、赤はまだエラーを意味し、緑は成功を意味します。

Figmaのコンポーネント

作業を便利にするために、デザインチームはすべてのコンポーネントの状態を準備し、Figmaにアップロードしました。希望すれば、ライブラリのコピーを作成し、サービスで直接インターフェースを組み立てることができます。

最新のアップデートでは、ライブラリに4つのテーマすべてが複製されなくなりました。デフォルトではライトテーマで作業しますが、Layerセクションで任意の要素またはページ全体を別のテーマに切り替えることができます。

ライブラリのすべての要素はOverviewページに表示されています。ここで必要なコンポーネントを見つけ、要素のすべての状態を含むページに移動できます。さらに、各コンポーネントには使用例があります。

約600のアイコン

アイコンはデザインとユーザビリティの必須要素の一つです。コンテンツの整理と構造化、アクセントの設定、情報の認識の改善に役立ちます。一見、アイコンパックを作るのはそれほど難しくありません。しかし、仮想マシン、データベース、さまざまなタイプのチャートなど、複雑なメタファーのアイコンを作成する際に課題に直面しました。

アイコン検索をより便利にするために、特別な命名システムを使用しました。これで、異なる名前を入力して同じアイコンを見つけることができます。例えば、矢印付きのこのアイコンを見つけるには、arrow、enter、move、loginのいずれかの単語を入力できます。

ガイド

上で書いたように、開発者がガイドのコンポーネント説明だけを使用して、簡単に標準的なインターフェースを作成できるようにすることが目標でした。各要素についてデザイナーに相談することなく、このプロセスをシンプルにしたかったのです。現在、ガイドのみを使用して開発者が完全に作成した内部サービスの5つの例があります。

もちろん、開発者の手だけでこのタスクを解決することは不可能です：いずれにせよ、UX/UIスペシャリストの注意を必要とする複雑なシナリオがあります。それでも、デザイナーの負担を大幅に軽減することができました。

ガイドでは、デザインチームがコンポーネントを説明し、正しいアプローチと間違ったアプローチの例を示しながら使用に関する推奨事項を提供しています。このページで確認できます。

Gravity UIを利用する方法

必要なのは、コンソールにコマンドを入力するだけです：

git clone git@github.com:gravity-ui/uikit-example-cra.git my-project && cd my-project
npm i 
npm run start

より詳細な手順はGitHubのリポジトリメインページにあります。

すべてのGravity UIコンポーネントはUIkitで確認でき、ニーズに合った必要なライブラリはLibrariesで接続できます。

まとめると、もう一度強調したいのは：Gravity UIは、ユーザーの実際の経験、開発者のニーズ、デザイナーの専門知識から生まれたデザインシステムです。これにより、実用的で効果的なものになっています。そして今、誰でも無料で使用できます。

ユーザーのニーズとフィードバックを考慮して、プロジェクトをさらに良くするよう努めています。GitHubにアクセスし、PRを残し、Figmaにコメントを書き、使用例を共有してください。