デザインの世界にしばらくいる場合は、おそらく次の用語を聞いたことがあるでしょう：デザインフレームワーク、ユーザーインターフェイスフレームワーク、ユーザーインターフェイスキット、またはパターンライブラリ。それらはすべて同じものを指します。つまり、製品全体で使用され、その目的を果たす設計標準、テンプレート、ユーザーインターフェイスパターン、およびコンポーネントのシステムです。 デザイン言語 。これまでに設計フレームワークを構築したことがない場合、開始するのは大変で時間がかかるように思われるかもしれませんが、設計作業がスピードアップし、全体的に効率的になります。

デザインフレームワークが解決する主な問題、それが必要な理由、およびフレームワークを構築するときに作成する必要のあるコンポーネントについて説明しましょう。ダウンロード可能なSketchUIフレームワークがあります 自由 記事の後半で、独自の設計フレームワークを作成できます。

Sketchのデザインフレームワーク

デザインフレームワークとは何ですか？

すべてのUIデザインは空のアートボードから始まり、すべてのデザイナーは、その空白のキャンバスを完全に機能する製品に変換するために使用するプロセスを持っています。このプロセスには、作成されたすべての小さなデザインコンポーネントと、色からボタン、およびその間のすべてに至るまで、デザイナーがまとまりのある全体を構築するために実行する手順が含まれます。

サーチファンドとは

この作業は繰り返し行われることが多く、相互に関連するパターンとコンポーネントのシステムを作成することで、統合して効率を高めることができます。言い換えると、 設計フレームワーク 。

設計フレームワークは、次のようないくつかの問題を解決します。

• 製品設計の不整合を排除します。
• 設計チームと製品チーム間のコラボレーション、効率、およびコミュニケーションを向上させます。
• 設計プロセスの後半で設計の更新を行い、イライラを減らします。

最初の問題：製品の不整合

一貫性は、優れた設計を優れた設計に変換します。一貫性により、UX、全体的な使いやすさ、およびユーザーがデジタル製品を使用できる効率が向上します。小さなウェブサイト、アプリ、大きなSaaS製品のいずれであっても、デザインの不一致は外観、感触、信頼性、および ユーザー体験 製品の。

不整合は、チームまたはチームが デザイナー 物事を速すぎたり、その場で変更を加えたりします。設計者は、顧客や利害関係者が何か違うものを求めていることに応答して、それらの変更がどのようになるかをすばやく示すことがあります。突然、デザインチームは、4つの異なる緑の色合いに出くわし、主要なボタンの色が何であるかを誰も確信していません。

設計フレームワークは、一貫した標準を確立することによってこの問題を解決します。

2番目の問題：コラボレーションとコミュニケーションのギャップ

多くの場合、開発プロセス中に複数のチームメンバーがプロセスのさまざまな時点で設計に取り組んでいる場合、チームを導くための一連の標準がないと混乱する可能性があります。

設計フレームワークは、コミュニケーションプロセスを合理化し、明確な基準と方向性を提供することにより、コラボレーションと効率を向上させます。どの色またはフォントを使用するのが適切かを判断しようとして、時間を無駄にする必要はありません。

よく見られる問題：同じボタンの3つの異なるスタイル

3番目の問題：最終段階の設計の変更

デザイナーは、120個の既に開発されたデスクトップテンプレートを使用して、デザインファイルで1回限りの色の変更を何回行う必要がありますか？ 200個のコンポーネントの一部であるアイコンを変更する必要があるのは何回ですか？

変更は設計プロセス全体で不可避であり、製品の改善方法ですが、多くの場合、希望よりも遅れて発生します。 デザイナー 。デザインフレームワークは、オブジェクト指向コンポーネントのシステム上に構築されているため、最終段階の変更の負担が大幅に軽減されます。一度変更すると、デザイン全体でカールします。

デザインフレームワークの作成方法

デザインフレームワークとは何か、そしてそれが解決する問題がわかったので、それを作成する方法（および記事の後半で提供されるSketch UIキットのダウンロードに含まれるもの）について説明しましょう。

この記事で使用する設計フレームワークは、Sketchでは「シンボル」と呼ばれるコンポーネントの特定の階層を使用して表示される単一のスケッチファイルです。これらの記号を使用すると、ワンクリックでファイル全体に変更を簡単に実装できます。 「マスター」コンポーネント（「シンボル」）の変更は、他のすべてのインスタンスに即座に反映されます。

設計フレームワーク階層

十分に機能するデザインフレームワークを作成するには、強力な視覚的階層を設定することから始めます。まず、色やタイポグラフィなど、最も普及しているコンポーネントを設計します。次に、ボタンや入力コンポーネントなど、小さいものに向かって作業を進めます。家を建てるようなものだと考えてください。最初に土台を建て、次にプロジェクトの進行に合わせて他の部分を追加します。

色やスペースはありません。形、影、タイポグラフィは、目に見えないパラメータのセットにすぎません。

色

色はフレームワーク階層で最も重要な要素です UIデザイン -デザインの各コンポーネントは色を使用しています。色は人々に強い反応と感情を引き出し、製品の全体的な外観、感触、トーンを設定します。

色をグループに分けることをお勧めします。

pythonクラスに属性を追加

1. 原色 は主要なブランドカラーであり、通常、プロジェクトの全体的な配色を作成したり、ボタンなどの重要なコンポーネントに使用されます。

2. 二次色 それらはメインパレットを補完します—多くの場合、原色の異なる色合い、彩度、または色合いです。 グレースケール タイポグラフィや背景によく使われます。 5〜8レベルのグレーで十分です。

3. システムコメントの色 彼らはデザイナーがしばしば忘れる重要なグループです。これらの色は、アラート、警告、通知などのシステムメッセージを表示します。

各色はスケッチファイル内の個別のシンボルです。これにより、色が変更されると、その色を使用するすべての要素も変更されます。

グリッド：デザインスペース

色を選択したら、次のステップはグリッドを設定することです。グリッドは、ページ上の他のすべてのコンポーネントを正しい場所と順序に保ちます。これが一般的なデザインスペースです。

グリッドには次の2つのタイプがあります。 垂直 Y 水平 。

垂直グリッドは最も一般的に使用され、すべてを水平方向に整列させます。のような多くの人気のあるグリッドシステムがあります ブートストラップ または古い960pxグリッド。水平グリッドはそれほど一般的ではありません。タイポグラフィには水平グリッドが使用されます。段落の垂直リズムを作成し、新聞で一般的に見られます。

修飾子：文体規則

色とグリッドに加えて、デザインフレームワークの階層の上位にあるもう1つのコンポーネントがあります。それはモディファイアです。スタンドアロンコンポーネントとして使用することはできません。他のコンポーネントを変更またはスタイル設定するために使用されます。

このグループはプロジェクトにスタイルをもたらし、美学を担当するコンポーネントが含まれています。 形 または 色合い ;プロジェクトの後の段階でそれらを個別に変更するのは面倒な場合があります。

修飾子を後続のすべてのビルディングブロックのパラメーターとして扱います。長方形、角丸長方形、円の3つの異なる方法でスケッチシンボルを作成します。これらの図形を使用して、ボタン、入力コンポーネント、フォームフィールドなど、UIの各コンポーネントを作成します。および背景要素。

このテクニックにより、 デザイナーへ UIコンポーネントの外観よりもUXに重点を置きます。また、基本形状に戻ったり、スタイル（コーナー半径など）を変更したりするのも簡単で、接続されているものはすべて自動的に更新されます。

スケッチシンボルとしてシェイプを作成することは、後続のコンポーネントを構築するために使用できるため、良い習慣です。基になる形状への変更は、すぐにそれらのコンポーネントに反映されます。

タイポグラフィ：コンテンツ

タイポグラフィは、デザインフレームワークの最後の主要コンポーネントです。これは2つのグループに分けることができます。見出しや段落などの静的なページコピー。ボタン、ナビゲーション、入力フィールドなどのコンポーネントのインタラクティブなコピー。

すべての見出し（H1、H2、H3など）と段落のスタイルとサイズを設計します。ページの静的コピーには、通常、多くのスタイルのバリエーション（色や重さ）はありません。静的なページコピースタイルと比較した場合の唯一のバリエーションは、背景が明るいか暗いかです。したがって、静的ページコピーが両方で機能するように、2つのカラーセットを作成することをお勧めします。

明るい背景と暗い背景のスタイリッシュな本文

ボタンやシステムフィードバックメッセージなどのインタラクティブコンポーネントに表示されるコピーには、複数のバリエーションがあります。たとえば、システムフィードバックメッセージは、メッセージのタイプ（警告、エラー、成功など）に応じて、4つの異なる背景色で表示できます。ボタンラベルの背景も異なる場合があります。

このグループをデザインフレームワークに含めることは、タイポグラフィについてグローバルに考えるときに役立ちます。まず、通常のボタンラベルテキストを作成し、次にそのバリエーションを作成します。これにより、フォントサイズが多すぎないようにすることができます。フレームワークで新しいUIコンポーネントを作成するときは、適合する既存のフォントスタイルがあるかどうかを常に確認してください。

第11章の提出とは

スケッチシンボルとしての色は、タイポグラフィでは使用できません。ただし、変更はスケッチスタイルを介して適用できます。ライブラリで色が変更された場合は、作成済みのカラーライブラリを使用し、これらのテキストスタイルを更新することをお勧めします。

アイコン

レイアウトシステムには、情報アイコンとユーザーインターフェイスアイコンの2つのアイコングループがあります。最初のグループは通常、 イラストセット また、UIインタラクションコンポーネント（ボタンなど）には使用されません。 2番目のグループ（ユーザーインターフェイスアイコン）は、ボタン、ラベル、テーブルなどのより複雑なコンポーネントに意味を追加しますが、占有するスペースはごくわずかです。 UIのアイコンは、「編集」、「コピー」、「ダウンロード」、「削除」などの機能のトリガーとしても使用できます。矢印、「追加」（+）、「閉じる」（x）など、ユーザーインターフェイスの操作に使用される単純なアイコンから始めます。さまざまなサイズ（12px、16px、24px 32px）でデザインすることをお勧めします。

デザインフレームワークで他のユーザーインターフェイス要素を作成するのに役立つスケッチシンボルとして作成された、基本的でシンプルなユーザーインターフェイスアイコンのセット。

コンポーネント

ボタン

ボタンは間違いなくユーザーインターフェイスデザインで最も重要なコンポーネントの1つであり、長年にわたって、 多くの変更を経てきました デザインのトレンドが行き来するにつれて。

ボタンをデザインするときは、必ず個々の「状態」をデザインしてください。原則として、ボタンには複数の状態があり、現在の状態（非アクティブ、スクロール、押された、無効、アクティブなど）を示す視覚的なフィードバックをユーザーに提供します。これを行うには2つの方法があります。1つは、状態（通常、アクティブ、スクロール、および押された）ごとにボタンの外観を個別に設計することです。このソリューションは時間がかかる可能性がありますが、多くの柔軟性を提供します。 （このメソッドは、以下に含まれている無料のSketch UIフレームワークで使用されていました。）

2番目の方法は、最初の状態に基づいてすべての状態を設計することです。たとえば、作成します A 各状態の色、彩度、または明るさを変更するシンボルをスケッチします。これを行うには、シンボルを、スケッチのブレンドモード（色相、彩度、またはオーバーレイ）のいずれかを使用したボタンオーバーレイとして配置します。黒い長方形を使用する 色相ブレンディングモード 通常のボタンで彩度を変更します。後でオーバーレイの不透明度を変更すると、ボタンが多かれ少なかれ飽和状態になります。

各ボタンは、以前に作成されたシンボルで構成されています。コーナー半径が下にあるシンボルに設定されている場合、すべてのボタンに影響します。

入力コンポーネント

入力により、ユーザーはアプリケーションと通信してデータをアップロードできます。入力フィールドなどのコンポーネントをボタンと一緒に使用すると、簡単なWebアプリケーションを作成できます。ボタンと同様に、さまざまな状態の入力コンポーネントを作成するのが最適です。設計フレームワークによって異なりますが、少なくとも、空の状態、塗りつぶされた状態、およびエラー状態を作成することを検討してください。

複雑なコンポーネント

この段階では、機能的な製品を作成するために必要なものがすべて揃っているため、設計フレームワークは完全であると見なすことができます。ただし、カード、テーブル、日付区切り文字、グラフ、フォームなど、ユーザーインターフェイスフレームワーク用のより複雑なユーザーインターフェイスコンポーネントの作成には、多くの時間を費やす価値があります。

セクション

この段階で、アプリケーションまたはWebサイトの最も一般的なセクションを作成することにより、設計フレームワークをさらに開発できます。ナビゲーション、見出し、「会社概要」セクション、ギャラリーなどを設計することで、設計者はプロジェクトの後の段階で時間を節約できます。製品のさまざまなセクションの複数のバリエーションを作成すると、さまざまなプロジェクトを簡単に調整できるようになります。

資本予算は

設計フレームワークのグッドプラクティス

設計フレームワークを常にテストする

テストは、設計または開発プロセスに含める必要があります。小さなデザインやストレステストを作成するときは、間違いやコンポーネントの欠落を避けてください。たとえば、最初に作成されたコンポーネントを変更すると、最近追加されたコンポーネントも変更されるかどうかがチェックされます。

シンプルなユーザーインターフェイスコンポーネントを作成する

できるだけ多くの設計ユースケースを考えながら、コンポーネントをシンプルに保ちます。これにより、将来、あらゆるスタイルをカバーできるようになります。シンプルな形状のユーザーインターフェイスコンポーネントを作成し、プロジェクトに簡単に収まるように柔軟性を維持することをお勧めします。

1つのスタイルだけに焦点を当てないでください

デザインフレームワークは普遍的である必要があるため、特定のスタイルに焦点を合わせるのではなく、スタイルの作成に使用できるコンポーネントに焦点を合わせます。

独自のデザインフレームワークを作成する

次のプロジェクトでは、最初に時間をかけて設計フレームワークを慎重に構築します。全体的な設計プロセスが改善され、効率が向上し、製品設計の一貫性が向上し、使いやすさが向上することがわかります。 120のSketchアートボードでわずか数秒でこれらのアイデアが実現すると、時間を節約し、デザインアイデアをより効果的に伝達し、顧客と利害関係者を満足させることができます。

独自の設計フレームワークを開始する準備はできましたか？

ここからスケッチファイルをダウンロードします 。 使用方法の説明が含まれています。

刺激的なデザインシステムとユーザーインターフェイスフレームワーク

設計フレームワークについてさらに理解するための最良の方法の1つは、大規模な確立された企業がそれらをどのように使用しているかを調べることです。これらのタイプの会社に従い、彼らのアプローチを知ってください。 Googleのマテリアルデザイン -現在、世界で最も人気のあるデザインフレームワークの1つです。 Googleが設計プロセス全体を階層化し、コンポーネントの有用な階層を構築する方法を学びます。

IBMの設計言語 --IBMは、すべての詳細の詳細な説明を含む、設計プロセス全体を共有しています。

彼らはまた多くを共有します リソース デザイン言語から、シンプルなアイコンからUIアニメーションライブラリまで。

アトラシアン –もう1つの優れた学習リソース。彼の 製品スタイルガイド 勉強するのに最適な設計システムです。彼らは彼らを共有します WebGUIパック 、多数のコンポーネントと概念を含むスケッチファイル。