web-dev-qa-db-ja.com

完璧なスタイルガイドを書く方法

私は、スタイル付きデータテーブル、入力フォームなどの事前ビルドコンポーネントのセットを使用して一種のテーマを開発しています...これは社内で使用するために開発されており、スタイルガイドを追加したいと思いますドキュメントをテーマに。スタイルガイドを書いたことがないので、スタイルガイドの書き方を教えてください。私はググっていくつかのテンプレートを見つけましたが、プロのガイドも欲しいです。

ありがとうございました。

documentationthemesstyle-guide
2
Imesh Chandrasiri

スタイルガイドには通常、ブランド、製品、アプリケーションで使用されるデザインパターンのリストが含まれています。

デザインパターン：

通常、以下の情報を伴う設計パターン

  • 問題の説明
  • 使用法
  • 解決策
  • 根拠
  • 例
    • スクリーンショット
    • ビジュアルデザインスペック（色、間隔、タイポグラフィなど）
    • UI仕様（該当する場合、サポートするHTML、JS、CSSを追加）

スタイルガイド

優れたスタイルガイドにはリストのデザインパターンが含まれており、さまざまなチャネルにわたって一貫したブランドエクスペリエンスを構築するためにクリエイティブチームや開発チームが必要とするすべての情報を伝達します。

  • ロゴとロゴの使用
  • 図像
  • カラースキーム
  • タイポグラフィ
  • 音声のコピーとトーン
  • グリッド
  • ブレークポイント
  • ページ（または画面）のレイアウトとテンプレート
  • 間隔
  • CTA
  • などなど...

Googleのマテリアルデザイン と Iパターン 、および Foundation Framework とB ootstrap Framework （このページで述べたように）

2
Igorek

これを一から構築する必要はありません。多くのカスタマイズ可能なスタイルガイドジェネレーターがあります。 bootstrapとファンデーションはそのうちの2つです。

ここに、さまざまな会社によって行われたスタイルガイドのいくつかの例があります http://styleguides.io/examples.html

ここも良い出発点です。これを使用して、すでに使用されているcssを分析し、冗長性を削除してみてください http://stylifyme.com/

ブートストラップ http://www.monolinea.com/labs/bootstrap-style-guide-boilerplate/

2
Ameen Akbar

スタイルガイドに（UIプレゼンテーションに加えて）UI動作を含めることは良い習慣です。たとえば、デバイスでの認証UIの動作やドリルダウンの動作について説明します。

アジャイル環境で作業している場合、スタイルガイドの更新は、新しい/更新されたUIコンポーネントを含む特定のユーザーストーリーの一部として含めることができます。

1
Karen Donoghue

スタイルガイドを書くのは簡単な部分です。それを存続させ、必要に応じてそれを強化および変更し、開発者や設計者から尊重されるようにするのは難しい部分です。

Otto.deのインタラクションデザイナーであるWolfBrüningのスライドをご覧になることをお勧めします。

http://de.slideshare.net/WolfBruening/how-to-build-the-perfect-pattern-libraryy

彼は、無駄のないパターンライブラリを構築し、最初から全員を関与させる方法を説明しています。

0
uxfelix

私は通常、何を正しく行うかの例として政府から何も使用しませんが、彼らのWebデザイン標準サイトは、単に優れたスタイルガイドです： https://playbook.cio.gov/designstandards/ =

他の人が述べたように、それは一般的な（原子）スタイルから始まり、ますます複雑な要素（分子、生物、テンプレート、ページなど）スタイルに移動します。これは「アトミックデザイン」と呼ばれるもので、再利用可能なスタイルを整理するための優れた方法です。

これは、オンラインスタイルガイドをすばやくまとめるために使用した素晴らしいサイト/アプリでもあります： https://frontify.com/ （fyi、私はfrontifyでは機能しません。良いツール）

0
dmoz