Tinkoff設計システムの作成。 最初のステップ

Tinkoff Design Systemの記事シリーズでは、Atomic Design方法論を使用して設計システムを構築する方法を示します。





設計システムの必要性



設計システムはかなり広い概念であり、印刷から建築までさまざまな分野で使用されています。 ユーザーインターフェイスには、次のものが含まれます。





製品が1つしかない小規模企業では、設計システムがなくても実行できます。 1つの小さなアプリケーション、1つのデザイナー、すべてを見ることができる小さなスケッチファイル。

しかし、10を超える製品、数百のスケッチファイルがあり、設計チームが10人を超える場合はどうでしょうか。 インターフェイスを構築するためのルールを導入し、それらをデザイナーと開発者のチームに配布する必要があります。 そうしないと、新しい機能を思いつく時間がありません。2人のデザイナーが1つの要素に異なるインデントを描画し、常に同じ分母にデザインをもたらすのに時間がかかります...



設計システムの欠如は、次のことにつながります。





システムは機能する場合に適しています。


体系的なアプローチ、組織、および自動化は、ルーチンを忘れて重要なことに集中するための最初のステップです。 階層と論理構造により、設計、開発、テストが簡素化および高速化され、エラーが最小限に抑えられます。



アトミックデザイン



設計システムを作成するために、Brad Frostが2013年に提案したAtomic Design方法論(http://bradfrost.com/blog/post/atomic-web-design/)を選択しました。 方法論のアイデアは化学から生まれました。原子は分子に、分子は生物に、生物は与えられたルール(テンプレート、レイアウト)に従ってページに組み立てられます。



アトミック設計方法論の利点:





小規模なプロジェクトやゼロから構築されたプロジェクトの場合、この方法論はすぐに使用できます。 すでに多数の製品があり、それぞれにチームがあります。 各製品には、生物およびパターンのレベルで独自のインターフェース機能があります。 したがって、ゼロから構築するのではなく、既存の順序を復元する必要があります。



私たちは困難な課題に直面しました。原子や分子がどのような要素で構成されているかを理解することです。 パーツに分割できない要素に到達するまで、大きな要素を小さな要素に分割します。



あなたが粉砕できるまで粉砕します。


原子と分子を見つけました。 私たちは次の質問に直面しました:すべての生物をどのようにして普遍化し、どのような製品でもそれらを使用できるようにするか?



これは私たちにとって難しい作業です。すべての製品またはプロジェクトには、共通の要素と独自の要素の両方があります。 この問題を解決するために、原子設計の標準的な方法論を拡張し、別のレベルである製品を追加しました。



これらの要素は類似しており、同じ機能を実行しますが、外観が異なります。 これらの違いは、製品チームの条件または要件が原因です。 たとえば、1つの同じ要素は、関連する製品要因と機能に応じて、製品から製品への異なる変換を生成できます。 製品ごとに異なるレイアウトを使用できます。



どの方法論も基礎にすぎません。


原子設計方法論に追加の製品レベルを導入し、すべての製品が同じ原子と分子で構成される柔軟な構造を得ました。 さらに、すべての製品には共通の生物(基本生物)があります。 そして、ユニークなものがあります-単一の製品に関連するもの(ユニークな生物)。 そのため、各製品について、共通のユニークな生物からどのページが収集されるかに応じて、独自のテンプレートが作成されています。



同期する 設計と開発



設計システムの作成における重要な側面は、設計者と開発者のチーム間の完全な同期です。 設計チームが開発したすべての構造、要素、テンプレートの原則は、開発チームに適用する必要があります。 したがって、設計システムは、開発者が関与して、技術的な制限とコード記述の機能を考慮して構築する必要があります。



デザイナーと開発者は1つのチームです。


以下で完全同期を実現する必要があります。





多くの場合、インターフェイス要素を作成するとき、設計者はレイアウトについて考えません。 ピクセルを近づけたり遠ざけたりしますが、正確に。 それはそのように機能しません。 開発者は、各ページに新しい要素を表示するのではなく、コンポーネントを使用して作業し、どこでも同じインデントを使用します。 さもなければ、彼らは「破壊」しなければならず、「破壊」は混乱につながります。 これを回避するには、システム要素の設計の非常に早い段階で開発者を関与させます。



ドキュメント



システムごとにドキュメントが作成されます。 これがどのように行われるかは問題ではありません。最も重要なことは、記録して同意する必要があります。 Googleドキュメントで写真を使用したり、開発者とライブレイアウトGUIを作成したりできます。 ドキュメントの作成には長いプロセスがありますが、その結果、デザイナー、開発者、マネージャーが毎日役立つ膨大な知識ライブラリができあがります。



インターフェイスの設計システムのドキュメントでは、以下を規制する必要があります。





必要と思われるものをドキュメントに追加できます。



結果はどうなりますか?



同じエコシステム内にあり、異なるチームが担当する多数の製品を持つ大企業には、設計システムが必要です。

設計システムの実装は、長く、複雑で、痛みを伴うプロセスです。 その結果、以下を受け取ります:





次の記事では、UIキットの作成、バージョン管理、および設計システムの正常な動作に必要なルールについて説明します。



All Articles