モバイルデザインシステムをゼロから構築する方法を学びます。デザインシステムとは何か、チームにどう役立つのか、開発のスピードアップにどのように役立つか、そして成功するためにはじめにフォーカスすべき３〜５つのことを学びます。
ちょっと声がかれていますが昨夜カラオケで楽しみすぎました。
ようこそモバイルデザインシステムの話へ。
実は財務のマネジメントアプリを作っています
今日そこで得た知見を共有したいと思います。
デザインシステムって？
新しい分野だと思います。同アプリケーションを構築するのかという代替的な思考方法を提供する
大規模でのデザイン管理が可能になる
レゴブロックを組み合わせて全く違うものを作れる
ソフトウェアもおなじ
全く違うViewを作れる
組み合わせてアプリになる
素晴らしいブログがあります。
atomic WebDesign
個々のピースを組み合わせて大きなものを作ることが出来る。誰にメリットが有るの？
デザイナー向け？
エンジニアやエンドユーザーもメリットが有る。
デザイナーにとって
時間を削減できる。一貫したアプリケーションを作れる。同じパラダイムを取ることで。
エンジニアにとって、かなり時間を構築するところで短縮できる。エンドユーザーに対して、もっと短時間で機能を提供できる。コードの再利用も進められる。アクセシビリティコンポーネントを組み込みめる
自分たちがさらに追加的なところで入れ忘れている機能がないか心配する必要がない
ユーザーには皆さんのブランドを見つけやすく成るし常に同じふるまいでいろいろなものが見つけやすく成る
誰どういうとき
にべんりなのか
AirBnBを例に。
コレクションビューの中で複数のカードを再利用している
Cellを反復して使っている再利用できるViewの候補者
どこから始めるのか。個人、チーム、企業によって違い、どうやって始めるかは異なる。
会社のブランドをまずベースに考えるべき。
どうできるか、リソースがたくさんある。
デザインインフラチームがないときにおすすめ
こちらのガイドはモバイルデザインシステムの実装、哲学の後にどう進めるかに向いています。
細かい部分から全体を作る
フォントとカラーが原子
コードベースの中で確立されていると思います。
コードベースの中にどう作り込むか
enumですべてのケースを表す。
enumを作れるし、アセットに定義することもできる。
コントロールについて。
カスタムスタイル、StandardSwitchはこう
アプリの配色に合わせて少し暗くしている
Lyftは形状もカラーも変えている
CustomUIComponent
再利用可能なViewを作るだけでなく、APIデザインも関わる。
どんなエンジニアでも使うことができるだけでなく、皆様のデザインシステムに馴染みのない人にも読みやすくする
スタイルをいろいろみてどれを適用するかわかりやすくしなくてはいけない
このように保存スタイルを決めます。
削除もコンセプトは同じ
小さな部分を揃えたところで組み合わせてより大きな再利用可能なViewを作る
彼らのリストとフォトを表示するために使う
多くのコンポーネントはImageを表示することを求められる
金融系なので入力が必要。
いろいろな状態のテキストフィールドが必要。相当AirBnBと異なる。目的が違えば。
それぞれの企業に特化したものでなければならない。
洒落たものでなくて良い、個別のViewを組み合わせいつもどおり使えばいい。
個々で指摘したいのは、我々の業界で、別の会社は、更に進んで取り組んでいます。
OSS Epoxy、AirBNBがやっている、Android用。複雑な画面を構築するのに利用しています
ヘッダーに3つのことを定義する。識別子、タイトル、説明。 写真を追加するのは簡単。識別子とURLをつけている。最終的にすべての雛形をフレームワークの後ろに隠蔽し、開発スピードを加速できる。
プレゼンテーションとビジネスロジックを切り分けている
どうやってみんなとすり合わせる？
エンジニアと、デザイナー。
エンジニアは人数企業の大きさに応じて会議を設定し説明することも考えられる。しかし新しい人間がチームに入ったら？また細かい点を覚えられないほど複雑なら？
最も優秀なドキュメントはどういうときに使うか、細かく記述する
2つ目
デザインとのすり合わせ
一番やらなくてはいけないのはデザインシステムに対するアップデートを上手くコミュニケーションを設けなくてはいけない。
多くの会合を持つか、変更に参加してもらう
プロセスは1年半で実行し、いろいろな教訓を得ています。
一人のエンジニアと仕事したことはあるが、再利用可能なViewやツールを彼らが手がけたすべてに実現していました。
使用していないコードを削除しました。このひとのコードが沢山我々の方で削除した。
何かをコンポーネント化したとしても、必ずしもそうしなければならないわけではない
デザインシステムを構築する上で、再利用可能なコンポーネントだけでなく、デザイナーとエンジニアで意義ある作業関係を作らなくてはいけない。期限や技術的な問題がじゃまになることもあるが、いつノーと言うか。
デザインシステムのコンテキスト、前の教訓と同じように、デザイナーが想像したからと行って必ずしも構築しなくてはいけないわけではない、期限がある場合には妥協できないか考えるべきです。素晴らしい関係をデザインチームと取れたのもこうした関係を取れたからです。多くの人は構築することがどれだけ大変か分かっていないこともある
多くの人にどうするのが最適か考えることです。
