web-dev-qa-db-ja.com

デザイナーのためのコンポーネント間のドキュメントスペース

大きな設計システムによって文書化されたコンポーネント間の空間関係はどのようになっていますか？それらは、コンポーネントがどのように見え、単独で動作するかを説明しているだけで、相互に関連しているわけではありません。

たとえば、H1の後に段落がある場合、それらの間の距離を40pxにしたいとします。別のページにH1とそれに続く画像があり、その場合、距離を30pxにしたいと思います。

要素のさまざまな組み合わせについて、さまざまな距離を定義します。私はこれらの組み合わせを文書化して、デザイナーと開発者が毎回これを理解する必要がなく、ページ間に一貫性があるようにします。

開発者の場合、これはCSSで文書化できます。デザイナーは通常それを見ません。これらのルールを設計チームにどのように伝えて、設計内のコンポーネント間の適切な間隔を使用できるようにする必要がありますか？

コンポーネント間の空間ルールをデザイナーに伝達/文書化する最良の方法は何ですか？

layoutdesigncomponentpattern-librarysystem
7
Martyn

これは、設計ドキュメントとパターンライブラリに関する多くの記事と会話のギャップを浮き彫りにする素晴らしい質問です。概して、それらはビジュアルデザイナー中心であり、atomおよび分離された分子コンポーネントに焦点を当てています。実用的なアプリケーションで役立つように、設計ドキュメントは、いつどこで何を行うかを説明する必要があります。異なる例の。

このH1の例は、この点を説明するのに最適です。 （この質問は規約の伝達方法に関するものであり、さまざまな条件付き動作を技術的に実現する方法に関するものではないことを想定しているため、私は意図的に疑似スタイルを記述しており、CSSセレクターや属性は無効です。）

H1 Headers

Notes: Use sparingly. Adjust white space according to adjacent design elements. 

Font: Helvetica
Font Weight: Bold
Size: 28px
Line height: 32px
Bottom Margin: 
   IF (followed by paragraph text) THEN 
      15px and show a visual example
   ELSE IF (followed by an image) THEN
      30px and show a visual example 
   END
Letter spacing: 1px expanded
(Etc)

それは私の$ .02です。設計ドキュメントはすでにボトルに入ったメッセージですが、実用的で明確な例がないと、何をすべきかについて最善の推測を強いられます。

**編集して、見つけた例を追加します**

この記事 は、展開システムですばらしい働きをします意図的なスペースの使用設計システム内で。著者は、パターンベースの設計要素（この場合はコンテンツを含むカード）を分解して、採用されているさまざまな条件付きルールを示します。

Image annotated to describe element spacing and identify rules in use

記事から：

ほとんどの共同編集者はスペースを見ることができません。これは、スペースが恣意的に適用される主な理由です。

enter image description here

要約すると、パターンの規律ある再利用をサポートすることを意図した設計ドキュメントは、それを念頭に置いて作成する必要があります。ユーザーフレンドリーなシステムは、何をすべきか、そして実用的でよく注釈が付けられた例をいつ使用するかを示しています。

6
Luke Smith

システムの最小要素にパディングとマージンを定義しないでください。要素の最も重要なプロパティは、その要素タイプに固有の属性です。たとえば、見出し（h1。h2など）または任意のテキスト要素の場合、伝達する重要な属性はテキストのサイズと色です。

複数の要素が互いに相互作用するより複雑な状況では、間隔を定義する必要があります。それらを「コンポーネント」と呼びましょう。

特定のアプリまたはウェブサイトでは、動作が異なる複数のコンポーネントがあり、それらのコンポーネントは非常によく似ており、わずかな違いがあるだけなので、これらのコンポーネントの各仕様を文書化する必要があります。

あなたのケースでは、テキスト（text_content_bloc）を持つコンテンツコンポーネントと画像（image_content_bloc）を持つコンテンツコンポーネントがある場合、これらのブロックを個別に文書化する必要があります（h1のパディングのような視覚的な違いがある場合）

設計システムは生物であり、システムを完成させて次のシステムに移行することは決してありません。メンテナンス、反復、および時々の洗浄が必要です。

コンポーネントのいくつかの良い例：

https://material-ui.com/demos/cards/

https://semantic-ui.com/views/card.html

PS：私の経験では、最良のシステムは例外の少ないシステムです。h1に100種類のパディングがある場合は、システムを単純化して、より一貫性のあるものにする必要があります

2
Deniz Erdal

隣接する兄弟コンビネータを使用できます

/* Paragraphs that come immediately after any image */
img + p {
  font-style: bold;
}

あなたのケースでは、段落や画像にマージンを追加できます。

h1 + p {
    margin-top: 40px;
}

h1 + img {
    margin-top: 30px;
}
1
Nash

設計者が視覚的なアプリケーションとデザインパターンの例を見ると役立つでしょう。間隔の導出方法（x要素のパーセンテージなど）、および使用の理由とコンテキストを説明できます。

1
Ling

CSSには階層があり、正しく適用すると、言語には長い間組み込まれているように要求されているものが含まれています。

以下の組み合わせ：

CSSセレクター： https://www.w3schools.com/CSSref/css_selectors.asp

そして

CSS階層の理解： https://en.wikibooks.org/wiki/Cascading_Style_Sheets/Applying_CSS_to_HTML_and_XHTML

プロジェクト全体でスタイルを「カスケード」できます。フォームにIDフィールドを追加し、セレクターを特定のセクションにロックするか、最上位のセレクターがサイト全体に影響を与えるのと同じくらい簡単です。

さらに深く言うと、一貫性を強化するために使用されるテンプレート、コンテナ/マスターページ、およびディレクティブ/ユーザーコントロールがあります（これも技術的な観点から）。

0
RandomUs1r

これは、作成された設計言語/システムの意図と、ドキュメントの制限事項に戻ってきたと思います。

質問で強調した間隔に関するような詳細を文書化しようとする際の最大のハードルは、すべての異なる潜在的なシナリオに適用される一貫したルールを考え出すことです。おそらく、個々のコンポーネントのすべての間隔ルールを一緒にすると、すべてのケースでうまくいくわけではありませんが、あまりに多くのルールを作成する場合は、一般的なガイドラインを提供し、それらを適用するためにデザイナーに任せる方がおそらく簡単です。一貫していなくても実用的です。

いくつかの設計システムが実際にどのようにインタラクティブであるかに驚くでしょう。たとえば、 Carbon Design System はCodePenと統合されているので、実際にスタイリングを試したり、自分のニーズに合わせてカスタマイズしたりできます。

他のデザインシステムでは、 Clarity Design System のようなアプリケーションレイアウトの一般的なガイドラインを指定しているため、ページの主要なコンポーネントのレイアウトを確認できます。

これらのタイプの詳細が指定されていない主な理由は次のとおりです。

  • それらは、レイアウトのデザインを、配置と配置の問題が問題になる程度に制限する可能性があります（グリッドシステムは通常、異なるデバイスのページのサイズに応答するようにピクセル固有ではないため）。
  • 所有しているコンポーネントの数や、使用されている、または使用されている可能性のある組み合わせによっては、それらを維持するのが難しい場合があります。そのほとんどの設計システムには、通常、かなり大きな数があります。
  • コンポーネントが使用されなくなったり、レガシーコンポーネントと置き換えられたり、組み合わせられなくなったりすると、設計システム全体で物事を機能させることが難しい場合があります

しかし、幸いなことに、ページテンプレートとコンポーネントの一般的なガイドラインから始める開発者と協力することで、デザイナーがこれらの問題を解決し、スムーズに行うことができるので、開発者にとって調整が多すぎません。

労力と利益の点で、既存の設計システムは、ドキュメントで指定されている詳細レベルに関して、適切なアプローチとバランスがあると思います。

0
Michael Lai

CSSは脇に置いて、視覚的なデザインについて話しましょう。私はウェブサイトに適切な数のページタイプがあると思います：ランディング、製品説明、ダッシュボードなど。

a。 ページテンプレートに距離情報を含めます。 H1と画像/テキストの間の特定の距離を示すテンプレートページをいくつか作成します。たとえば、ランディングページでは、H1と画像の間に4倍、テキストに対して2倍の間隔を空けることができます。

b。 要素テンプレートに距離情報を含めます。すべての画像サイズに対して、画像の上マージンを指定します。おそらく、レイアウト固有の画像サイズがいくつかあるはずです。 hero-image、product-main、product-secondaryなど。この場合、画像とその上にある透明な長方形で構成されるグループを作成するので、事前定義されたものからモックアップを簡単に構築できます。ブロック。

0
Anton T