tubasa_gekituiのブログ

salesforce社の無料学習サイト「Trailhead」の覚え書きとか日記とか

Trailheadモジュール「Systems Design with the Lightning Design System」覚え書き

本記事は、モジュール「Systems Design with the Lightning Design System」の覚え書き、気づきの整理です。

https://trailhead.salesforce.com/ja/content/learn/modules/systems-design-with-slds
再利用可能なパターンとスケーラブルなシステムを設計する方法を学ぶ、とのこと。タイトルはどう訳すのがいいのかな〜。Lightning Design System があるシステムのデザイン?

Get Started with Systems Design

  • システム設計 = 共通の目標を達成するために相互作用する要素の設計と組み合わせが含まれる。
    • wikipedia では、「コンピュータを利用したシステムやソフトウェアなどを開発・構築する過程で、システムの目的や仕様、動作などを決める工程のこと」、と記載されている。

システム設計とは何? Weblio辞書

  • ユーザーエクスペリエンスを設計するためにシステム設計アプローチを採用する場合、スケーラビリティに重点を置く。
  • システム設計の基礎は、要素間の関係が個々の要素よりも重要であることを認識すること。
  • 素晴らしいユーザーエクスペリエンスを作成するには、2つのアクティビティのバランスを取ることが必要
    • 広く受け入れられているUXのベストプラクティスとアプリケーションの独自のパターンを通じて、人々が学ぶパターン(ミクロとマクロ)の検討
    • ユーザーが単一のページまたは単一の機能で個別のタスクを実行できることの確認

Apply Systems Design Principles

  • システム設計では、要素がどのように使用されているかを観察し、ユーザーのフィードバックに耳を傾けることが不可欠
  • 設計システムのボタンを設計するときの最初の目標は、Salesforceのすべての領域で必要なアクションのタイプを理解すること
    • 特定の画面だけの部品は作成しない。
  • アフォーダンスは、人々が認識し、実行できるアクションに関連付ける要素の一部です。
    • 例として、設定=ギア、電子メール=封筒
  • クイズが意味不明。(翻訳がイケテいない?)

Identify Design Patterns

  • デザインパターン:繰り返し発生する問題に対する反復可能なデザインソリューション。使用できるパターンをローカル(クイズとの関連から同システム内と思われる)から探す。
  • 繰り返し可能なパターンは、2つのレベルがある。
    • マクロインタラクション:ログインや新しいレコードの作成など、より高いレベルのタスクを実行する。
    • マイクロインタラクション:クリック、タップ、またはその他のアクションを実行するページ内のコントロール
  • システム設計は、アプリケーションを使用する人々が目標をすばやく達成できるように、パターンの作成と識別に重点を置いている。

Document Design Guidelines and Specifications

  • 設計仕様では、設計のサイズ、色、タイポグラフィ、および相互作用の値が文書化されている。
  • 相互作用仕様は、ユーザーによる相互作用に基づいてデザインがどのように変化するかを示す。
  • WCAG2.0のSC1.4.1ガイドラインでは、状態が色だけで示されないようにするように指示されている。要素の境界線の色を灰色から赤に変更することが、エラー状態を示す唯一の方法ではないことを意味する。
  • 設計を文書化するための最良の方法の1つは、すべきこととすべきでないことを使用すること。

salesforce の Lightning Design System を引き合いに出しつつ、一般的な画面を作成する際の設計の話だったかと。再利用とかスケーラビリティとかを考慮して、作業の効率化を図るみたいな話でした。