Uiデザイン

構造の力–システムモデルを設計するためのガイド

設計システムは、組織が多様な製品、サービス、およびビジネス全体で経験的な一貫性を維持するのに役立ちます。一般的に視覚的なガイドラインとコンポーネントライブラリに関連付けられていますが、設計システムはまったく異なります。より多くの企業が設計の継続性の価値を認識するにつれて、新しく形成された設計システムチームは、組織の設計努力の長期的な関連性を確保するためのベストプラクティスを確立しています。

複数の人が同じデザインを追求すると、よくある質問が出てきます。これらの質問に対する回答がすぐに利用できない、または簡単に理解できない場合は、 設計の一貫性は道に迷います 。入る設計システム。

現代のデザインの議論では人気がありますが、デザインシステムのルーツは、新聞や雑誌の出版の世界で何十年も深く根付いています。現在でも、編集ページの体系化された階層は明らかであり、事前構成されたパターンにより、テキストとビジュアルの一貫した配置が可能になっています。

設計システムモデル

アドビのデザインシステム、スペクトラムは、解剖学的ビュー（左）とモックアップ（右）を提供して、カードやヘッダーなどのパターンがどのように構成されているかをユーザーがよりよく理解できるようにします。

c法人vss法人とは

後 2007年、デジタルの流入により、企業は製品やプラットフォーム全体の設計のまとまりについてより意図的になるようになりました。視覚的なガイドラインとコンポーネントライブラリに重点が置かれましたが、そのようなドキュメントはPDFや共有ファイルのページですぐに石灰化されました。 試行錯誤しながら、現代のメーカー設計システム彼らの作品を静的な文書ではなく、生きた製品と見なすようになりました。

Zalandoは、ヨーロッパを代表するオンラインファッションマーケットプレイスです。 Atlassianは、ソフトウェア開発で世界的に評価されていますツール。それぞれに大規模な製品チームと複雑な設計ニーズがあります。 彼らの設計システムモデルから何を学ぶことができますか？

Zalando：設計システムモデルとしてのコラボレーション

Zalandoは、ヨーロッパ最大の靴と高級ストリートウェアのオンライン小売業者です。 1,900以上のブランドを持つその巨大なデジタルストアフロントは、何百人ものデザイナーと開発者のチームによって管理されています。このような幅広い商品コレクションで一貫したショッピング体験を保証するために、同社は高度に構造化された設計システムに依存しています。

このような知名度の高いブランドのデザインシステムを維持するには、厳格なガバナンスとデザインの意思決定者の緊密なサークルが必要になると考える人もいるかもしれません。 代わりに、Zalandoのアプローチは明らかに協調的です。 Zalandoは、設計システムをエントロピーの脅威にさらされている完全なエンティティと見なすのではなく、機能チームが必要に応じて新しいアイデアを提供することを奨励しています。それはどのように機能しますか？

設計システムのベストプラクティス

Zalandoのデザインシステムは、1,900以上のブランドで構成される製品ラインを紹介しながら、視覚的および体験的な一貫性を維持しています。

の主な目的ザランドの設計システムチーム（ZDS）は、機能チームが製品を輝かせるのに必要なコンポーネントを開発するのを支援しています。同時に、ZDSは、設計システムの整合性が損なわれないことを保証します。 このように、ZDSはリエゾンであると同時にセーフティネットでもあります。

Zalandoの機能チームは、会社の設計システムと対立するソリューションを必要としていることに気付いた場合、簡単なGoogleフォームを使用して投稿を送信します。寄付チケットを受け取ると、ZDSは変更のリクエストを確認し、次のように分類します。光、中、または ヘビー 。各カテゴリには、独自の共同レビュー、設計、および反復のシーケンスがあります。

システムアーキテクチャの設計

機能のアイデアを検討した後、Zalandoの設計システムチームは貢献を3つの単純なカテゴリに分類します。

貢献がこのプロセスを経て実現すると、ZDSチームは中央で共有される設計システムポータルを更新し、毎週のデモで変更を紹介し、更新を利害関係者と顧客に伝達します。

Zalandoの貢献モデルのシンプルさにより、会社の多様な意見がシステムの進化について発言権を持つことができます。 哲学的には、Zalandoはシステムを製品と見なしており、製品を視覚的に調整することを目的とした単なるドキュメントリソースではありません。この見通しから、さまざまな設計システムモデルに適用できる実用的なポイントを以下に示します。

ガバナンスは重要ですが、 設計システムを監督するチームは、他のチームの成功に焦点を当てる必要があります 彼らの組織内。
機能提供プロセスをシンプル、透過的、協調的にし、すべてのコミュニケーションを文書化します。
設計者と開発者にシステムの変更に協力してもらい、共有システム言語を育成します。
システムへのすべての更新がアクセシビリティの問題に対処することを保証するチェックリストを作成します。

Atlassian：デザインシステムの考え方を再考

Atlassianは、JiraやTrelloなど、ソフトウェア開発とコラボレーションのためのツールを作成しています。

2017年、Atlassianはブランドを変更し、デザインガイドラインのサイトを立ち上げました。同時に、同社はUIコンポーネントとそれに対応するコード例専用の別のサイトをホストしていました。

パワーピボットを取得する方法

時間とともに、 2つのサイトはあり継ぎ 、社内の設計および開発チーム、サードパーティのアプリ統合ベンダー、およびAtlassianの顧客の間でフラストレーションと混乱を引き起こしています。

設計と開発の間の亀裂の拡大を認識し、アトラシアン設計システムへのアプローチを再考することを選択しました。もはや、設計および開発のドキュメントを、アトラシアン製品のコードおよびグラフィック出力を生成する手段にすぎないものとして扱うことはできません。 設計システムは、それ自体が製品として尊重されなければなりませんでした。

その問題を完全に理解するために、Atlassianは外部監査を受け、顧客満足度調査を発行しました。 予想通り、2つのサイトは不整合で古くなっていると見なされていました。 Atlassianは、その評判と、変更を求める設計者、開発者、および利害関係者の大規模なエコシステムにより、その欠点を認識し、設計システムの再考に着手しました。

2020年8月の初めに、Atlassianの設計システムチーム（ADS）は新しいサイトブランド、ビジュアル、コンテンツ、コンポーネント、およびパターンのガイドラインを統合します。

さらに、ADSチームは次のことを行います。

s-corp vs c-corp

UIコンポーネントの半分を新しいシステムに移行しました（残りは進行中です）
全体を通してドキュメントを書き直し、簡素化しました
システム内の検索の改善
Click-to-Copyコードリンクを追加

Atlassianの成熟した考え方の最も明白な証拠は、ADSのリードデザイナーであるJennie Yipによるものです。「設計システムに関する一般的な誤解は、公開されると、変更できない真実の情報源になるというものです。 設計システムは決して完全ではありません。 Atlassianでは、デザインシステムの見方を、生き生きとした呼吸の実体にシフトし始めています。」

設計システムの原則

Atlassianの新しいデザインシステムには、ブランド、コンテンツ、およびコンポーネントのガイダンスが含まれています。さらに良いことに、検索可能です。

覚えておく価値のある5つの設計システムの原則

今日の最先端は、明日の鈍い刃です。これは、すべての設計分野に浸透している問題です。ツールそしてプラットフォーム設計システムを作成およびホストするための方法は豊富ですが、デジタル設計の急速な発展により、指針の観点から設計システムを考えることがより有益になります。

1.デザインシステムはデジタル製品です。

すべてのデジタル製品と同様に、設計システムには定期的な維持管理が必要です。長い間休止状態にあるシステムは、使用されなくなって崩壊します。

2.設計システムは協調的です。

設計システムは、複数のビジネス機能を代表する利害関係者のニーズに応える必要があります。コラボレーションの手段を提供することで、システムが設計およびエンジニアリングのサイロ内に存在することを防ぎ、製品のアイデアが無視されないようにします。

3.設計システムはシンプルさで繁栄します。

デザインシステムは答えを見つける場所であり、派手なビジュアル、複雑なアニメーション、または機知に富んだコピーに対する称賛を集めるものではありません。情報は適切に整理され、ナビゲートしやすく、検索可能である必要がありますが、テキストの説明はコンテキストと簡潔な指示のバランスをとる必要があります。

4.設計システムには、コミュニケーションとエンゲージメント戦略が必要です。

設計システムを管理するチームは、更新や新機能を関係者に定期的に伝達する方法を検討する必要があります。ニュースレター、Q＆Aセッション、およびその他のアウトリーチ戦略は、以下に情報を提供し、関与する必要があります。 「これらは変更です。これがあなたが気にかけるべき理由です。」

5.設計システムは一元化されています。

コンパイルしてangularjsの関数をリンクする

設計システムは、単一のクラウドベースの場所でアクセスできる必要があります。システムの操作や資産の取得には、特定の設計プログラムの知識は必要ありません。また、設計と開発について別々のガイドラインを公開することは、製品の不協和への確実な道であることを忘れないでください。

効果的な設計システムアーキテクチャのための5つの設計システム原則

設計における構造的柔軟性の力

設計システムは、大きくて印象的なモノリスであり、永遠に変わらないことを意図したものではありません。また、それらは単にデザインコンポーネントやスタイルのリポジトリではありません。彼らは生きている、呼吸する製品、植え付けと剪定を必要とする有機的な努力です。このように、彼らはで構成される専用のチームに値するデザイナー継続的なメンテナンスと更新に取り組んでいる人。結局のところ、設計システムは決して完成しません。

最終的に、最高設計システムわかりやすく、協調的で、柔軟性があります。 彼らは、差し迫った設計の質問に明確に答え、複数の利害関係者からの意見を歓迎し、独断的な公式よりも強力なソリューションを優先します。

ご意見をお聞かせください。以下にあなたの考え、コメント、フィードバックを残してください。

•••

ApeeScapeデザインブログの詳細：

基本を理解する

どのように設計システムを作成しますか？

設計システムは、経験的な一貫性を必要とする大規模な組織やチームに適しています。したがって、設計システムの作成は共同作業です。さまざまな設計システムモデルがあります。関連する利害関係者がシステムに簡単にアクセスして理解できる限り、それぞれが成功する可能性があります。

UXのデザインシステムとは何ですか？

デザインシステムは、デジタル製品の経験的な結束を維持するための鍵です。製品のUXは、一貫性のないデザイン（インタラクション、ビジュアル、またはブランド関連）によって低下します。設計システムのベストプラクティスの中で最も重要なのは、製品チームと開発チームがアクセスできる共有の場所でのホスティングです。

デザインシステムには何がありますか？

ほぼすべての設計システムモデルには、ブランドとスタイルのガイドラインおよびインターフェイスコンポーネントの組み合わせが含まれています。設計システムはデジタル製品の信頼できる唯一の情報源であるため、開発チームの多くの社内コード例があります。設計システムとエンジニアリングドキュメントを分割することはお勧めしません。