SwiftUIでデザインシステムを構築する方法
1 つの製品をサポートする設計システムを構築するのは簡単ではありません。スケーラビリティのために堅牢で柔軟でなければなりません。困難ではありますが、多くの優れたリソースが、チームが視覚的にもプログラム的にも優れたシステムを構築するのに役立つ有用な原則とアプローチを共有しています。この記事は、SwiftUI
で優れたシステムを構築することに焦点を当てることで、彼らの肩に寄り添い、手付かずの地に貢献しようとします。 .
なぜこの記事を書くのか
ニューヨークの ITP での最初の夏に、幸運にも Line Break Studio で iOS 開発者のインターンとして働く機会がありました。私が割り当てられたタスクの 1 つは、デザイン システムを 2 つのステップで構築することです。最初は Sketch で視覚的に、次に SwiftUI
でプログラム的に構築します。 .新しいフレームワークを試し、それを使ってデザイン システムを構築した経験は素晴らしいものでしたが、途中でバグもありました。そのため、私たちの経験をコミュニティと共有し、開発プロセスが容易になることを願っています.
SwiftUI とは
Apple は、WWDC 2019 でこの画期的な新しいフレームワークをリリースしました。これは、ここ数年で最高のものの 1 つです。 SwiftUI
でのプロジェクト開発経験はWeb開発者の立場から 従来のフロントエンド スタックとフレームワークのどちらに近いか。
インターフェイスのプログラミングと状態の管理が以前より大幅に簡単になったため、これは間違いなく素晴らしい動きです。この改善の最も良い部分は、UIKit と SwiftUI をスムーズに統合できることです。 SwiftUI の基本を学ぶには、Apple が提供する公式チュートリアルが非常に役立ちます。
デモ プロジェクト
デモンストレーションの目的で、Line Break Studio で構築したデザイン システムの簡易バージョンを作成しました。 ボタンのセットです 2 つの下位レベルのパーツの上に構築されたさまざまな形式のコンポーネント:タイポグラフィ と colorPalette .
プロジェクトは GitHub で公開されており、私は Xcode 11 Beta 5
を使用しています 開発のために。デザイン システム管理ハブとしての Airtable ベース (ワークフロー管理の詳細を参照) も参照用に公開されています。
建築設計システムの原則
Design System in Code は、デザイナーと開発者の間のミドルウェアです。システムの開発者は、設計システムから視覚的な形で入力を受け取り、さらに開発するために同一の API を生成します。このシステムをコードで完成させるには、次の 2 つの原則を認識する必要があります。
1.トークンと通信する
基本的に、デザイン システムをプログラムに組み込む目的は、コード管理や開発効率を向上させることではなく、ビューを確実にすることです。 設計ファイルと一致しています。その目標を達成するには、チーム内の開発者、デザイナー、マネージャー間のコミュニケーションの質を維持するために、トークンを使用して特定の色、フォント、サイズ、または視覚要素を示すことが重要です。
2.階層のレベル
EightShapes の記事では、「オプションがなければ決定を下すことはできない」ため、「最初にオプションを表示し、次に決定を表示する」必要があると指摘しています。
この種の順序付けアーキテクチャは、異なるレベル間の結合の程度を緩和するため、可能なリビジョンに対してより柔軟で動的なものを提供します。レベルの構成方法は、下から上へ、マテリアル → ベース → トークンの順です。しかし、いずれにせよ、チームが快適に過ごせる可能性があります。
コードに飛び込む
次のセクションは、私たちの経験に基づいて指摘したいハイライトのリストです。完全なコードについては、GitHub リポジトリにアクセスしてください。改善のためのフィードバックや批評を歓迎します。
1.階層レベルの設計
最上位レベルでトークンを構築するために下位レベルで材料を積み重ねる方法は 2 つあります:
enum
を使用 型安全性とコード リテラシー
関数内のグループ化ラッパーまたはパラメーターとしてコード内で enum を使用する利点は、すでに十分に認識されています。ここで言及する価値のあるポイントの 1 つは、階層レベルの実装です。
フォント サイズ (CGFloat
) を含む生の値を常に保存します。 ) とフォント名 (String
)、これをいじりたくないので、最低レベルで。しかし、生の値は列挙型のリテラルでなければならないため、単に case
を割り当てることはできません 他の列挙型からの値になります。
この問題を回避するために、関数 getValue
を実装します。 switch
で生の値を返します
struct
を使用 より簡単な構造のために
enum は優れていますが、場合によっては独自の機能が必要ない場合もあります。たとえば、Xcode
動的な色を処理する重い仕事を処理し、API エンドポイントでパラメーター オプションは必要ありません。シンプルな 2 レベルの構造体でカラー パレットを設定できます。
2. API
の明確でわかりやすいネーミング エンドポイント
命名規則は、議論と議論の対象となるもう 1 つの広範なトピックです。基本的な Swift の規則に加えて、私たちが遵守する唯一の 2 つのルールは、1) 頭字語を使用しないこと、2) シンプルにすることです。たとえば、タイポグラフィとカラー システムを使用するには、新しいエンドポイントを作成する代わりに、Font および Color 構造体から拡張を作成します。このアプローチにより、開発者がなじみのない API 名を覚える手間が軽減されます。
3. 2 つのモードでカラーセットを動的に管理
そのため、ダーク モードは業界の標準となり、iOS チームと Android チームの両方がこの機能を実装しています。これはユーザーにとっては良い傾向ですが、カラー セット、特にグレー スケール セットの管理と命名など、デザイナーや開発者にいくつかの課題をもたらす可能性があります。
白などの用語を使用して、グレー スケール カラーについて動的に考え、伝達する 、ライト 、黒 または暗い 動作しません。動的な色 #000000
を参照した場合 (16 進数の黒) 黒 または暗い light color scheme
で 、#FFFFFF
に変わるはずのこの特定の色についてどのように話しますか (HEX の白)、dark color scheme
? デフォルトダーク または lightDark ?
従来のアプローチでは、グレー スケールのダイナミック カラー セットに名前を付けるのは非常に紛らわしいものです。この混乱を避けるために、theme
を使用します。 と contrast
light
で 1 セットの色を管理する と dark
反対のカラー モードでは、グレー スケール カラーを常に反転する必要はないことに注意してください。このような状況では、明るい色は明るいままで、暗いままです。代わりに、単に明るいまたは暗いという名前を付けます。
この命名方法に頭を悩ませると、Xcode
でこのカラー パレットのアーキテクチャを管理するのは簡単です。 .カラーセットを作成するには、新しい Asset Catalog
を作成するだけです ファイル → 新しい Color Set
を追加 → Appearances
を変更 Any, Light, Dark
まで
4. environment
設定
SwiftUI フレームワークの素晴らしい機能の 1 つは、ターゲット ビューで環境値を制御する機能を提供する環境修飾子です。デザイン システムの構築に関しては、この機能により、ルート レベルでアプリのフォントを変更する便利な方法が提供されます。 environmentValue
を使用するもう 1 つの利点 開発中に明るい配色と暗い配色を変更してテストすることです。
5. buttonStyle
とボタンのラベル
UIKit の昔に比べて、SwiftUI で再利用可能なボタンを構築するのは非常に簡単です。ボタン ビューは action
の 2 つの部分で構成されます。 クロージャー (ボタンが押されたときに発生するイベント) および label
(ボタンの本体)。その後、修飾子 buttonStyle
を使用してビューをチェーンできます .再利用可能なボタンの作成に関する詳細については、包括的で役立つ Alejandro のチュートリアルを読むことをお勧めします。
カスタマイズしたボタン コンポーネントでは、最初のステップは TokenButtonLabel
を含む 2 つの構造体を作成することです。 と TokenButtonStyle
.これら 2 つの構造体は、デザイン ファイルにあるボタンのタイプに従ってプログラムされます。たとえば、ラベルにはアイコンとテキストの 2 種類しかありません。各タイプには、対応する init
があります 新しいインスタンス用に異なるパラメーターで設計された関数。
一方、ボタンのスタイルには大きく分けて、丸アイコン、アイコン、カプセル、テキストの 4 種類があります。 ButtonStyle
をフォローするには プロトコル、makeBody
func を実装する必要があります。この関数は configuration
をもたらします ネイティブの isPressed
を提供するプロパティ ボタンが押されたかどうかを監視する値。
最後に、TokenButtonLabel
の上に積み重ねます と TokenButtonStyle
、ボタン コンポーネント API のエンドポイントは TokenButton
になります。 - ビジュアル デザイン システムのボタン タイプに準拠して、ボタンのコンテンツとスタイルをまとめたグループ化。
6. AnyView
ラッパーとして
makeBody
を扱っているので ButtonStyle
によってもたらされる機能 プロトコル、View
を使用するための便利なヒントを見つけました .ビューを変数に格納するには、型注釈を AnyView
として示すことができます 、SwiftUI のビューの一般的なコンテナーとして機能します。
私たちの場合、不透明度修飾子を configuration.label
に追加したいので 各 switch
で繰り返し行うのではなく、すべてのタイプのボタンに この場合、修飾子を最後にまとめてチェーンする方が理にかなっています。 AnyView
の利点を利用して、このパターンを実現できます。 このように:
7. mutating
でビュー修飾子を構築する 関数
ボタンのスタイルを動的に更新するために、独自の修飾子を作成できます。最初にカスタマイズされた変更可能な状態プロパティをビューでインスタンス化し、次に mutating
を作成します Self
を返す関数 ターゲット状態プロパティを更新した後に入力してください。
8.トリッキーなボーダー スタイル
SwiftUI の欠点の 1 つは、円形の境界線を持つ円の形状をスタイリングするのがまったく簡単ではないことです。私はしばらく苦労しましたが、最終的に StackOverflow で解決策を見つけました。 clipShape
そして overlay
機能させるには修飾子が必要です。
結論
SwiftUI は、Apple が行った信じられないほどの改善です。欠陥はまだ存在しますが、iOS で堅牢で柔軟なデザイン システムを構築し、さらに複雑な UI を構築することは、これまで以上に効率的です。この記事が UI を構築しようとしているすべての iOS チームに役立つことを願っています。フィードバックはいつでも歓迎します!
? vinceshao.com で私の作品の詳細を読む / Twitter または LinkedIn でフォローしてください
-
AutoLayout を使用して iOS 用の Spotify クローンをプログラムで構築する方法
この投稿では、Spotify のホーム画面レイアウトを Swift でプログラムによって再作成しようとします。なぜプログラム的に?さまざまな方法で物事を構築する方法を知ることは常に良いことだと思います。プログラムで物事を行うためのコードを書くのが好きです。これらのスキルは、チームで作業している場合やバージョン管理を使用している場合に特に役立ちます。 これがSpotifyのモバイルアプリの実際のホーム画面。この種のレイアウトを実現するには、 UICollectionView を使用します 、そして TabBarController を使用するかもしれません タブ ナビゲーターを作成する
-
Face ID で別の顔を設定する方法
iPhone XでFace IDシステムが登場したとき、人々は興奮し、ティム・クックはそれを「スマートフォンの未来」と呼んだ。新しいシステムにより、ユーザーは自分の顔でデバイスのロックを解除できるようになりました。ただし、Face ID を使用して電話のロックを解除するために設定できる顔は 1 つだけであるという欠点がありました。 確かに、それはより多くのセキュリティを提供するので良いことです.誰もあなたの携帯電話のロックを解除することはできませんが、緊急の場合、この機能は非常に便利です。しかし、iOS 12 ではこの問題は処理されています。 Face ID の 2 人称を設定するには、次