グラフィックデザインのストーリーを語る

スケッチUIコンポーネントから説得力のある物語を作成しましょう。カラー、タイポグラフィ、寸法などの要素を分析し、視覚、聴覚、触覚の多様な視聴者のためのストーリーに変換します。目標？魅力的で、簡単に理解され、思い出に残る経験。明確さと一貫性が最も重要です。

私の同僚であるケイティは、UIコンポーネントを選択しました。注釈を付けます（主なツールはSCS、小枝、クラフトですが、テンプレート言語は重要ではありません）。彼女はフィードバックを提供します。理想的には、ハンドオフ中に情報がどのように失われるかを説明するためにいくつかのエラーがあるため、ほとんどの詳細を正しく取得します。

ホワイトラベルまたはフレームワークのフロントエンド開発では、優先順位は柔軟性と適応性です。コンテンツとスタイルは、コードの最終的な目的地と目的が不明であるため、主に不可知論的（製品境界内）に保たれます。しかし、私の最近のWebデザイン代理店への移行はこの焦点を反転させました。ここでは、クライアントの特定のニーズとターゲットオーディエンスと深く統合された、オーダーメイドの高度にカスタマイズされたデザインに重点が置かれています。

ケイティのようなグラフィックデザイナーと密接に協力して、ワイヤーフレームや初期の物語ではなく、細心の注意を払って作られたピクセル完璧なUIと協力して、学習曲線です。しかし、私は貴重なスキルをテーブルにもたらします：ドキュメントデザイン。

ドキュメントデザイン - 基本的には、そのコアにアクセシビリティを備えたセマンティックウェブ - グラフィックデザインをコミュニケーションシステムとして扱うInvolves。色、タイポグラフィ、レイアウトの根本的な目的を、アクセスしやすく、線形で航行可能なDOMに翻訳します。 HTML、プレーンでシンプルです。しかし、驚くべきことに、この基本原則はしばしば見落とされます。

Katieは、アートボードとクリアデザインの仕様で満たされたスケッチファイルを提供しました。私の分析では、同様のカードパラダイムを使用して6つまたは7つのコンポーネントが明らかになりました。

• カードには、サイトページに関するメタデータが表示されます。
• 画像/メディアとメタデータ（メディアオブジェクト）が含まれています。
• 同様のオブジェクトのグループ内に表示されます。
• このグループは一貫してタイプされています（検索結果、ニュース記事、クラスの混合はありません）。
• 各オブジェクトには単一のページリンクがあり、他のアクションはありません。
• 各オブジェクトには、行動の呼び出し（例：「本」）が含まれています。
• オプションの要素：時間、カテゴリ、バッジ。
• 必要な要素：メディア、タイトル、リンク。

カードは主要なナビゲーション要素です。ユーザーは、トップレベルのページ（「何がオン」、「クラス」）に基づいてカードセットから選択し、ガイド付きパスウェイを通過します。インタラクティブではなく、ガイドであり、ユーザーを目的地に導くインデックスカードです。この場合、ショーチケットを購入します。

この類推を考えてみましょう：電話の上のショーフライヤーを説明してください。無関係な詳細から始めて、テキストの逐語を暗唱することはありません。また、色やフォントについても説明しません。あなたは本質的な情報を伝えます：「それは火曜日午後7時30分、路面電車の近くのオックスフォードストリートのオデオンです。」これがドキュメントデザインの本質です。

カウント、グループ、および名前

リスト項目内の各カードを構成しましょう。見出しで紹介するカウント可能なグループが必要です（<h3></h3> ）。これにより、スクリーンリーダーユーザーは以下を行うことができます。

1. 見出しの概要のリストを特定します。
2. 事前にアイテムカウントを参照してください。
3. 次のリスト項目/カードに移動します。
4. グループをスキップして次のページに進みます（ページネーションは次のラベルのランドマークです）。

---

===================================================================================================================================== ============================================================================================================================================== ===================================================================================================================================== ============================================================================================================================================== ===================================================================================================================================== ============================================================================================================================================== ============================================================================================================================================== ==============================================================================================================================================

アンカー

各カードはアンカー要素に包まれます（<a></a> ）。これにより、リンクが優先され、ユーザーが関連するカードを識別するとすぐにクリックできます。大きなクリック可能な領域は有益ですが、ユーザビリティトラップになるべきではありません。カードの寛大な溝は、偶発的なクリックを最小限に抑えるのに十分な間隔を提供します。

タイトル

ショータイトルは見出しになります（<h3></h3> ）、その視覚的卓越性を反映しています。見出しをすばやくスキャンするユーザーは、この重要な情報を簡単に見つけます。画像は見出しの前にあります。画像の説明はAPIを介して使用できないため、 alt属性は空のままになります。

メタデータのために：

• バッジ
• 日付/時刻
• カテゴリ

バッジ

バッジは、会場固有の情報を強調しています。ユーザーの利点はすぐには明らかではありませんが、視覚的な強調は包含を必要とします。非視覚的なブラウジング中に見逃されることを避けるために、一貫したアクセシビリティのために最初または最後のいずれかのタイトルの直後に配置します。の代わりに<abbr></abbr>、ブランドの色は会場の所有権の明確な指標として機能するため、プレーンテキストを使用します。

<p> HACハイライト</p>

バッジは組織固有であり、社内イベントとは明確に外部の組織がホストしているイベントとは明確に区別しています。

日付/時刻

日付は非常に重要であり、に配置されます<h4></h4>特定の日付または時間のクイックスキャンを促進する要素。<time></time>要素は、支援技術による適切な日付/時刻解釈を保証します。

カテゴリ/タグ

カテゴリはバッジと日付に従い、視覚的に偏っていないことを反映しています。より一般的な情報の前に特定の情報を配置することにより、繰り返しを避けます。明確にするために、カテゴリリストの前にシンプルなタグがあります。ハードコーディングされた間隔は、テキスト圧縮でもガーリングを防ぎます。

<p>カテゴリ：{カテゴリのカテゴリの％。all（）％} {{category}} {％loop.last％} / {％endif％} {％endfor％} {％endif％} {％endif％}</p>

一次カテゴリのカラーコーディングは、言語の説明を必要としない非言語的キューであるため、CSSで処理されます。既存のカテゴリフィルターはより効率的な選択方法を提供するため、一次カテゴリが最初に配置されますが、明示的にラベル付けされていません。

アクション

行動への呼びかけ（「本」、「もっと学ぶ」）はスパンとしてスタイルされ、最後にカードの端を知らせるために配置されます。これにより、アクションに従うデータがないことが保証されます。

結論

このマークアップは、データのカウント、グループ化、および命名データを優先し、線形と非線形の両方の相互作用を可能にします。このページは、順次または部分的に読み取ると理解でき、効率的なナビゲーションを促進します。

ケイティのフィードバック

ケイティ・パリー、デザイナー：素晴らしい記事！<time></time>要素の取り扱いは特に賢いです。ただし、支援技術ユーザーは、事前に決定された順序で情報を受け取ります。フィルタリングなしで、特定のイベント（例、ダンスイベント）を見つけるには、タイトル、バッジ、日付、カテゴリをナビゲートする必要があります。これはコーディングエラーではなく、現在のWebパラダイムの制限です。将来の改善のために考慮すべきこと。

私の設計プロセスは、サイト全体のタイポグラフィを確立する前でさえ、多くの場合、イベントカードから始まります。視覚的には、これらのカードは次のとおりです。

• 直感的な使用のリストに似ています。
• ユーザーの関心評価に十分な情報を提供します（画像、タイトル、日付、リンク）。
• 明確な行動呼びかけ（リンク）を含めます。
• 簡単にスキャン可能になります。

視覚スキャン性は、情報タイプの一貫した配置と明確な視覚階層によって実現されます。タイポグラフィと間隔が重要です。タイトルは非常に顕著です。日付は一貫してスタイルが描かれていますが、タイトルとは異なります。カテゴリには異なるスタイルがあります。コードサンプルの間隔では、最適なスキャン可能性のために調整が必要です。

ユーザーはさまざまな情報をスキャンします。一般的に閲覧するものもあります。他の人は特定のイベントまたはカテゴリを検索します。カードは、この多様な動作に対応する必要があります。慣習は存在しますが、カードの設計はプロジェクトによって異なります。

おなじみのインターフェイスとクライアント固有の独創性の間でバランスをとる必要があります。カスタム書体とカラーパレットが寄付しますが、ユーザーの発見が重要です。私は、デザインに影響を与える洞察を明らかにするために、クライアントとその聴衆（レビューサイト、ソーシャルメディア）を研究しています。この発見段階での開発者の関与の増加は有益です。現在、機能を定義するために、広範なスケッチノートと時にはスプレッドシートを使用しています。データポピュレータが理想的です！

以上がグラフィックデザインのストーリーを語るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。