2012年以来、 パラダイムデザインシステムを構築しています。 しかし、ここ数年のように、多くの新しい例や出版物が含まれるこのトピックに対する関心の激しい爆発はまだ起こっていません。 昨年、Brad FrostのAtomic Designブックがついにリリースされ、誰もがデザインシステムについて語っています。 確かに、ほとんどの記事はモジュール設計の理論を際限なくかみ砕いており、Nathan Curtis以外の実装の実践についてはほとんど誰も書いていません。 さらに、モジュール設計のアイデアを普及させるブラッドのメリットは非常に貴重ですが、アプローチ自体と「原子性」/「分子性」のメタファーは彼の前に存在していました(Nathan Curtisは、90年代半ばでもDellは同じ用語でコンポーネントシステムを作ったと書いていますJeremy Keithは2011年頃に原子設計の現代的な使用法を紹介しました)。
イラスト:© Erin Malone
主な情報源を理解することは私にとって面白かったので、昨年、私はパターン、コンポーネント、およびモジュール性のトピックに関するすべてを読むために座っていました(この記事は昨年の注意事項を発展させます)。 理想的な本はありませんが、それらのいくつかは非常に正しい視点を示しています。
1. Christopher Alexander-テンプレート言語。 都市。 建物。 建設 (1977)
インターフェース設計者の実際の作業に対するその有用性はそれほど大きくありませんが、それが書かれている視点はめちゃくちゃ面白いです。 これらは「スケール」の3つのレベル(モジュール性自体を考慮)であり、最も重要なことは、各テンプレートの背後にある社会的、経済的、心理的、政治的正当化の深さです。 後者は、最新のパターンライブラリでは完全に失われます。 この本には1090ページがあり、数年間、私はそれに取り組む機会を待っていましたが、私は決して失いませんでした。
2. Nathan Curtis-モジュラーWebデザイン (2009)
モジュール設計システムのすべての基本的なアイデアがそこに記載されており、製品作業のすべての段階でインターフェースに対する単一のアプローチの役割を非常にしっかりと理解しています。 しかし、それはいまいましい、それはワイヤフレームを作成するプロセスを中心に構築されています! したがって、アイデアの具体的なアプリケーションから強く抽象化する必要があります。
3. アンナデベンハム-フロントエンドスタイルガイドのポケットガイド (2013)
これは非常に小さなレビューブックであり、その主な価値は、多かれ少なかれ構造化された方法でウェブのこれらのアイデアを説明した最初のものでした。 確かに、 第2版はテキストや例をわずかに更新しただけで、新しい価値を与えることはありません。この形式では今では役に立ちません。
4. ブラッドフロスト-アトミックデザイン (2017)
モジュラー設計の現在の最高の概要。 すべてのレベルで設計システムを導入することの利点は非常によく説明されており、このトピックに関する例と一般的に正しい考えがあります。 それはあまりにも理論的ですが、実際の作業プロセスの落とし穴に関する肉そのものが欠けています。 さらに、最も重要なトピック-一連のCSSスタイルだけでなく、製品ライン全体で更新される適切なコンポーネントシステムの構築方法-について簡単に触れました。
5. InVision-デザインシステムハンドブック (2017)
Design Betterイニシアチブの一部としてのオンライントレーニングマニュアル。 最も関連性があり、実用的です-プロセス管理、技術的ソリューション、基本的なこと、アルゴリズム設計の将来についてもあります。 それらへの開示の深さは常に十分ではありませんが、残りは火事です。
新鮮なものから、 Alla Kholmatova「Design Systems」 (2017)と、 UXPin「Creating a Design System:The 100-Point Process Checklist」 (2017)などの電子書籍があります。 2000年代半ばに、インターフェイスパターンに関する書籍のスタックが、ジェニファーティドウェル、ビルスコット、テレサニール、エリンマローンなどによって出版されました。 それらのいずれかを読むことは有用ですが、一般にそれらはあまり関連性がありません-現代の設計システムの概念はずっと先に行きました(ところで、Nathan Curtisはパターンとコンポーネントの違いについての彼の理解を説明しました)。 プログラミングパターンに関するErich Gammaの古典的な本「Design Patterns」 (1994)は、構造化のアプローチにとって興味深いものですが、残りは研究の観点からのみ読むべきです。
設計システムの先史時代全体を読んでいる間に、いくつかの記事が出て、そのトピックに関するすべての書籍と記事の概要が歴史的な観点から出てきました。 一般に、私は最初にこのセットで推測しましたが、多くの記事と古典的な例を追加しました。 タイトル画像-伝説のパターンライブラリYahoo!に従事していたErin Maloneの最も完全な年表 Micah Godboltの「設計システムのフロントエンドアーキテクチャ」 (2016)に到達するまで。
本や記事はたくさんあります( もう1つリスト )彼から)。 まあ、 styleguides.ioウェブサイトへの私のリンクに飽きていないなら、最後にそこにあるものすべてを仕上げてください。 Product Design Digestグループには、トピックに関する最新のリンクと記事を含むブランチがあります -また、最新のものを追跡するための素晴らしいオプションです。
「設計システム」という用語は、突然人気になった他の多くの事柄と同様に、今では大きく切り下げられています。 すべてがこの言葉と呼ばれます-スケッチの標準要素のライブラリとカットされたスクリーンショットのあるページから、組み込みのデザインで再配布可能なコンポーネントに基づいて実際に動作する成熟したプラットフォームまで。 真理の主な情報源は製品自体であり、意図したとおりに機能することを確認する必要があるため、最初に後者を構築しました。 「 ガイドライン→レイアウト→レイアウト→実装 」チェーンの各段階で詳細が失われ、バグが生成されるため、製品を体系的に改善する唯一の方法は、「 ガイドライン=レイアウト=レイアウト→実装 」に減らすことです。 ここでは、明らかに、技術的な枠組みを省くことができません。
Brad Frostは、多くの人がSketchまたは別の設計ツールのテンプレートの設計システムとして理解していることにうんざりしています 。 これは、この言葉がブランドを視覚的に識別するシステムとして理解され、美しい印刷された本が行き渡った前世紀の半ばの考え方です(最近活発に転載されています)。 しかし、それは店舗の棚(または店舗のチェーン自体)にある物理的な製品とオブジェクトに関するものであり、ユーザーが起動する前にレイアウトが何も保証せず、何度も変更するデジタル製品に取り組んでいます。 したがって、この環境の主要な素材であるコードを操作する必要があります。