Uiデザイン
効果的なデザインフレームワークを構築する方法（無料のSketch UIフレームワークを含む）
デザインの世界にしばらくいる場合は、おそらく次の用語を聞いたことがあるでしょう：デザインフレームワーク、UIフレームワーク、UIキット、またはパターンライブラリ。それらはすべて同じものを指します。つまり、製品全体で使用され、製品に役立つ設計標準、テンプレート、UIパターン、およびコンポーネントのシステムです。 デザイン言語 。
これまでに設計フレームワークを作成したことがない場合、フレームワークを開始すると、圧倒されて時間がかかるように感じるかもしれませんが、設計作業がスピードアップし、全体的に効率的になります。
デザインフレームワークが解決する主な問題、それが必要な理由、およびフレームワークを構築するときに作成する必要のあるコンポーネントの概要を説明しましょう。あなたは見つけるでしょう 自由 記事の後半でダウンロード可能なSketchUIフレームワークを使用すると、独自のデザインフレームワークを作成できます。
デザインフレームワークとは何ですか？
すべてのユーザーインターフェイスデザインは空のアートボードから始まり、すべてのデザイナーは、その空白のキャンバスを完全に機能する製品に変換するために使用するプロセスを持っています。このプロセスには、作成されたすべての小さなデザインコンポーネントと、色からボタン、およびその間のすべてに至るまで、デザイナーがまとまりのある全体を構築するために実行する手順が含まれます。
多くの場合、この作業は反復的であり、相互に関連するシステムを作成することにより、統合してより効率的にすることができます。 パターン およびコンポーネント。言い換えると、 設計フレームワーク 。
設計フレームワークは、次のようないくつかの問題を解決します。
- 製品設計の不整合を排除します。
- 設計チームと製品チーム間のコラボレーション、効率、コミュニケーションの向上。
- 設計プロセスの後半で設計を更新することで、イライラが少なくなります。
最初の問題：製品の不整合
一貫性は、優れた設計を優れた設計に変換します。一貫性により、UX、一般的な使いやすさ、およびユーザーがデジタル製品を使用できる効率が向上します。小規模なウェブサイト、アプリ、大規模なSaaS製品のいずれであっても、デザインの不一致により、外観、感触、信頼性、 ユーザーエクスペリエンス 製品の。
不整合は、チームまたは デザイナー 物事を迅速に実行したり、その場で変更を加えたりします。設計者は、クライアントや利害関係者が何か違うものを求めていることに応答して、それらの変更がどのようになるかをすばやく示すことがあります。突然、設計チームは4つの異なる緑の色合いに気づき、どれが主要なボタンの色であるかは誰にもわかりません。
設計フレームワークは、一貫した標準を確立することによってこの問題を解決します。
2番目の問題：コラボレーションとコミュニケーションのギャップ
多くの場合、開発プロセス中に複数のチームメンバーがプロセスのさまざまな時点で設計に取り組んでいる場合、チームを導くための一連の標準がないと混乱する可能性があります。
色は人々にどのように影響しますか
設計フレームワークは、コミュニケーションプロセスを合理化し、明確な基準と方向性を提供することにより、コラボレーションと効率を高めます。どの色またはフォントを使用するのが正しいかを見つけようとして、前後に走り回るのに時間を無駄にすることはもうありません。
3番目の問題：後期の設計変更
120個のアートボードがすでに開発されているデザインファイルで、デザイナーは何回単一の色を変更する必要がありますか？ 200個のコンポーネントの一部であるアイコンを変更する必要があるのは何回ですか？
変更は設計プロセス全体で不可避であり、製品の改善方法ですが、多くの場合、 デザイナー したい。設計フレームワークは、オブジェクト指向コンポーネントのシステム上に構築されているため、これらの後期段階の変更の負担を大幅に軽減します。一度変更すると、デザイン全体に波及します。
デザインフレームワークを作成する方法
デザインフレームワークとは何か、それが解決する問題がわかったところで、フレームワークの作成について説明しましょう（そして、この記事の後半で提供されるSketch UIキットのダウンロードの内容）。
この記事で使用する設計フレームワークは、Sketchで「シンボル」と呼ばれるコンポーネントの特定の階層を使用してレイアウトされた単一のSketchファイルです。これらの記号を使用すると、シングルクリックでファイル全体の変更を簡単に実装できます。 「マスター」コンポーネントの1つの変更である「シンボル」は、他のすべてのインスタンスに即座に反映されます。
デザインフレームワーク階層
うまく機能するデザインフレームワークを作成するには、まず、しっかりとした視覚的な階層を設定します。色やタイポグラフィなど、最も遍在するコンポーネントを最初に設計します。次に、ボタンや入力コンポーネントなど、小さいものに作業を進めます。家を建てるようなものだと考えてください。最初に土台を建て、次にプロジェクトの進行に合わせて他の部分を追加します。
色
色は最も重要な要素です UIデザイン フレームワーク階層-デザイン内のすべてのコンポーネントは色を使用します。色は人々に強い反応と感情を引き出し、製品の全体的な外観、感触、トーンを設定します。
色をグループに分割することをお勧めします。
- 原色 は主要なブランドカラーであり、通常、プロジェクトの一般的な配色を作成したり、ボタンなどの重要なコンポーネントに使用されます。
- 二次色 原色を補完します。多くの場合、原色のさまざまな色合い、彩度、または色合いです。 グレースケール タイポグラフィや背景によく使用されます。 5〜8レベルのグレーで十分です。
- システムフィードバックの色 デザイナーが忘れがちな重要なグループです。これらの色は、アラート、警告、通知などのシステムメッセージを表示します。
アドビのエクスペリエンスデザインとスケッチ
グリッド：デザインスペース
色を選択したら、次のステップはグリッドを設定することです。グリッドは、ページ上の他のすべてのコンポーネントを正しい場所と順序に保ちます。これが全体的なデザインスペースです。
グリッドには次の2つのタイプがあります。 垂直 そして 水平 。
垂直グリッドは最も一般的に使用されるグリッドであり、すべてを水平に配置します。のような多くの人気のあるグリッドシステムがあります ブートストラップ または古い960pxグリッド。
水平グリッドはそれほど一般的ではありません。タイポグラフィには水平グリッドが使用されます。それは段落の垂直リズムを作成し、新聞で一般的に見られます。
修飾子：文体規則
色とグリッドに加えて、デザインフレームワーク階層の上位にあるもう1つのコンポーネントがモディファイアです。これらは自律コンポーネントとして使用することはできません。他のコンポーネントを変更またはスタイル設定するために使用されます。
このグループはプロジェクトにスタイルをもたらし、美学を担当するコンポーネントが含まれています。 形 または 影 ;プロジェクトの後の段階でそれらを個別に変更するのは面倒な場合があります。
修飾子を後続のすべてのビルディングブロックのパラメーターとして扱います。長方形、角丸長方形、円の3つの異なる形状からスケッチシンボルを作成します。これらの図形を使用して、ボタン、入力コンポーネント、フォームフィールドなど、背景要素など、UIのすべてのコンポーネントを作成します。
このテクニックにより、 デザイナー UIコンポーネントの外観よりもUXに重点を置くこと。また、基本形状に戻り、スタイル（コーナー半径など）を変更することも簡単になり、接続されているすべてのものが自動的に更新されます。
タイポグラフィ：コンテンツ
タイポグラフィは、最後の重要なデザインフレームワークコンポーネントです。これは2つのグループに分けることができます。ヘッダーや段落などの静的ページコピー。ボタン、ナビゲーション、入力フィールドなどのインタラクティブなコンポーネントコピー。
すべての見出し（H1、H2、H3など）と段落のスタイルとサイズを設計します。静的なページコピーには、通常、多くのスタイル（色または重量）のバリエーションはありません。静的なページコピースタイルに関連する唯一のバリエーションは、明るい背景か暗い背景かです。したがって、静的ページコピーが両方で機能するように、2セットの色を作成することをお勧めします。
ボタンやシステムフィードバックメッセージなどのインタラクティブコンポーネントに表示されるコピーには、複数のバリエーションがあります。たとえば、システムフィードバックメッセージは、メッセージの種類（警告、エラー、成功など）に基づいて4つの異なる背景色で表示できます。ボタンのラベルも異なる背景に表示できます。
このグループをデザインフレームワークに含めることは、タイポグラフィについてグローバルに考えるときに役立ちます。まず、通常のボタンラベルテキストを作成し、次にそのバリエーションを作成します。これにより、フォントサイズが多すぎないようにすることができます。フレームワークで新しいUIコンポーネントを作成するときは、適合する既存のタイポグラフィスタイルがあるかどうかを常に確認してください。
アイコン
デザインシステムには、情報アイコンとユーザーインターフェイスアイコンの2つのグループのアイコンがあります。最初のグループは通常、 イラストシステム UIインタラクションコンポーネント（ボタンなど）には使用されません。 2番目のグループ（UIアイコン）は、非常に小さなスペースを占有しながら、ボタン、ラベル、またはテーブルなどのより複雑なコンポーネントに意味を追加します。 UIのアイコンは、「編集」、「コピー」、「ダウンロード」、「削除」などの機能トリガーとしても使用できます。
矢印、「追加」（+）、「閉じる」（x）など、UIの操作に使用される単純なアイコンから始めます。さまざまなサイズ（12px、16px、24px 32px）でデザインすることをお勧めします。
コンポーネント
ボタン
ボタンは間違いなくUIデザインの最も重要なコンポーネントの1つであり、長年にわたってボタンは 多くの変更を経ました デザインのトレンドが行き来するにつれて。
ボタンを設計するときは、必ず個々の「状態」を設計してください。原則として、ボタンには複数の状態があり、現在の状態（アイドル、ホバー、押された、無効、アクティブなど）を示す視覚的なフィードバックをユーザーに提供します。
これを行うには2つの方法があります。1つは、状態（通常、アクティブ、ホバー、および押された）ごとにボタンの外観を個別に設計することです。このソリューションは時間がかかる場合がありますが、その後、多くの柔軟性が得られます。 （このメソッドは、以下に含まれている無料のSketch UIフレームワークで使用されていました。）
2番目の方法は、最初の状態に基づいてすべての状態を設計することです。たとえば、作成します 1 各状態の色、彩度、または明るさを変更するシンボルをスケッチします。
Linuxはどの言語を使用しますか
これを行うには、シンボルを、色相、彩度、またはオーバーレイのいずれかのスケッチブレンディングモードでボタンのオーバーレイとして配置します。黒い長方形を使用する 色相ブレンディングモード 通常のボタンの上で彩度を変更します。後でオーバーレイの不透明度を変更すると、ボタンが多かれ少なかれ飽和状態になります。
入力コンポーネント
入力により、ユーザーはアプリケーションと通信してデータをアップロードできます。入力フィールドなどのコンポーネントをボタンと一緒に使用すると、簡単なWebアプリケーションを作成できます。ボタンと同様に、さまざまな状態の入力コンポーネントを作成することをお勧めします。設計フレームワークによって異なりますが、少なくとも、空の状態、塗りつぶされた状態、およびエラー状態を作成することを検討してください。
複雑なコンポーネント
この段階では、機能する製品を作成するために必要なすべてが揃っているため、設計フレームワークは完全であると見なすことができます。ただし、カード、テーブル、日付ピッカー、グラフ、フォームなど、UIフレームワーク用のより複雑なUIコンポーネントの作成にもう少し時間をかける価値がある場合がよくあります。
セクション
この段階で、アプリケーションまたはWebサイトの最も一般的なセクションを作成することにより、設計フレームワークをさらに開発できます。ナビゲーション、ヘッダー、「会社概要」セクション、ギャラリーなどを設計することで、設計者はプロジェクトの後の段階で時間を節約できます。製品のさまざまなセクションのいくつかのバリエーションを作成すると、将来のさまざまなプロジェクトへの調整が容易になります。
デザインフレームワークのベストプラクティス
設計フレームワークを常にテストする
テストは、設計または開発プロセスに含める必要があります。小さなデザインピースを作成し、それらを「ストレステスト」することで、エラーやコンポーネントの欠落を回避します。たとえば、最初に作成したコンポーネントを変更すると、最近追加したコンポーネントも変更されるかどうかを確認します。
node jsexpressエラー処理
シンプルなUIコンポーネントを作成する
できるだけ多くの設計ユースケースを考慮しながらコンポーネントをシンプルに保つことで、将来的にはどのようなスタイルにも対応できるようになります。シンプルな形状のUIコンポーネントを作成し、あらゆるプロジェクトに簡単に調整できる柔軟性を維持することをお勧めします。
単一のスタイルに焦点を当てないでください
デザインフレームワークは普遍的である必要があるため、特定のスタイルに焦点を合わせるのではなく、スタイルの作成に使用できるコンポーネントに焦点を合わせます。
独自のデザインフレームワークを作成する
次のプロジェクトでは、最初に時間をかけて設計フレームワークを慎重に構築します。全体的な設計プロセスが改善され、効率が向上し、製品の設計の一貫性が向上するため、使いやすさが向上します。 120のSketchアートボードでわずか数秒でそれらのアイデアを実現すると、時間を節約し、デザインアイデアをより効果的に伝達し、クライアントと関係者を満足させることができます。
独自のデザインフレームワークを開始する準備はできていますか？
ここからスケッチファイルをダウンロードします 。 使用方法の説明が含まれています。
刺激的なデザインシステムとUIフレームワーク
設計フレームワークについてさらに理解するための最良の方法の1つは、大規模で確立された企業がそれらをどの程度使用しているかを調べることです。これらのタイプの企業をフォローし、そのアプローチについて学びます。
Googleのマテリアルデザイン –現在、世界で最も人気のあるデザインフレームワークの1つです。 Googleが設計プロセス全体を階層化し、コンポーネントの有用な階層を構築する方法を学びます。
IBMの設計言語 – IBMは、すべての詳細の詳細な説明を含む、設計プロセス全体を共有しています。彼らはまたたくさん共有します リソース デザイン言語から、シンプルなアイコンからUIアニメーションライブラリまで。
アトラシアン –もう1つの優れた学習リソース。彼らの 製品スタイルガイド 勉強するのに最適な設計システムです。彼らは彼らを共有します WebGUIパック 、多数のコンポーネントと概念を含むスケッチファイル。
•••
