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

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

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

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

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

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

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

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

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

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

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

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

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

アンカー

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

タイトル

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

メタデータのために：

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

バッジ

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

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

バッジは組織固有であり、社內(nèi)イベントとは明確に外部の組織がホストしているイベントとは明確に區(qū)別しています。

日付/時刻

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

カテゴリ/タグ

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

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

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

アクション

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

結論

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

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

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

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

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

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

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

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

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