web-dev-qa-db-ja.com

パターンライブラリソフトウェア

私は最近、パターンライブラリの作成について A List Apartの記事 を調べています。彼らはいくつかのパターンライブラリの例を示しています：

現在、グローバルな製品ファミリーにサービスを提供するUXチームで働いています。これは、私たちの時間に投資する必要があるもののようです。

上記の記事では、独自のパターンライブラリの構築に役立つ オープンソースリポジトリ についても触れています。これは素晴らしいですが、欲張りなのでもっと欲しいです！ :)

次の質問への答えは「ある程度の開発時間を手に入れて、独自のものを作る」かもしれませんが、私自身のパターンライブラリを構築し、次のことを行うのに役立つリポジトリ/製品があります：

  • パターンにタグを付けて、さまざまなコンテキストでパターンを表示できるようにしますか？つまり、特定の製品で使用されているパターン、小さな画面で使用されているパターン、フォームパターンなどです。これにより、ライブラリの強力なIAを構築できます。
  • テクノロジーにとらわれないようにする-UXチームとして、どのテクノロジーを使用するべきか（サーバー側かクライアント側かに関係なく）開発者に指示したくない。これにより、ライブラリに追加できる内容が制限される可能性がありますが、まず、セマンティックでアクセス可能なマークアップに基づいた例を示すことから始めます。
  • 異なるスタイルシートをオーバーレイできるようにします。私たちは独自のブランドを求めている多くのクライアントと協力しており、スタイルシートの切り替え機能は強力であり、強力な販売ツールです。

私はこのリストに追加する他のアイテムを考えることができると確信していますが、私はこれについて考え始めたばかりです:)

前もって感謝します

design-patternstoolslibrarypattern-library
7
Sniffer

これは、ウェブで最高の1人、ブラッドフロストによる本当に素晴らしい記事です。 http://bradfrostweb.com/blog/post/atomic-web-design/

それは彼が "Atomic Web Design"と呼んでいるもので、サイトは小さなコンポーネントに分解され、一貫した大砲を維持しながらさまざまなものを構築するために使用できます。 CSSの良い方向のようなものは、常識のように見えますが、実際には、すべてのレイアウトで機能する堅牢なブロックのセットを実行して確立することは困難です（特に、非常に多くの場合！）。このプロセスを支援するために、彼とDave Olsonは、これらのパターンライブラリの作成に役立つツールを作成しました。なんてこった！

そして、これがパターンラボと呼ばれる彼が作った素晴らしいツールです： http://demo.patternlab.io/?p=all

ここにpatternlabの詳細情報： http://patternlab.io/

私が好きな別のツールは次のとおりです： http://bjankord.github.io/Style-Guide-Boilerplate/ これは少し技術的ですが非常に強力です！

乾杯！

3
michaelghinrichs

Brad Frostの Atomicデモ は、自然からヒントを得ているという理由で私のお気に入りの例です。ただし、それらのデモは架空の例であり、実際的な例だけが本当に私に共鳴します。同じことが SPTOパターンライブラリ にも当てはまります。

上記のすべての例は素晴らしいものですが、主にスニペットライブラリとして読んだと思います。ほとんどの会社にはそれほど多くはないことを私は理解していますが、問題は、馬を水に導くことはできても、彼らに飲ませることができないことです。 lorem ipsumを使用してすべてのデザインウィジェットのリストを提供するだけでは十分ではなく、誰もスクリプトから離れることを望みません。

パターンを適切に再利用するには、パターンが解決することを意図した一般的な問題の理解/ /、および抽象化のレベルを要求します。供給側と需要側の両方で。パターンライブラリを作成する人は理論的根拠を提供して教える必要があり、パターンを使用する人はソリューションではなく設計の問題を検索する必要があります。

Googleの マテリアルデザイン は、「人に釣りを教える」かゆみをかき始めます（不器用な混合比喩については申し訳ありません。）

大工とは道具よりも関係があると思います。

0
Luke Smith

あなたはすでにala libであなたが望むことをすることができます、しかしあなたがより多くのlibsから選択したいならば、ここにいくつかがあります：
トップコート
http://topcoat.io/topcoat/
ブートストラップ
http://getbootstrap.com/
oocss
http://oocss.org/
smacss
http://smacss.com/

0
albert