讓我們從草圖UI組件中制作出引人注目的敘述。我們將剖析其元素（顏色，版式，尺寸），并將其轉(zhuǎn)化為一個不同的觀眾的故事：視覺，聽覺，觸覺。目標(biāo)？引人入勝的，容易理解和令人難忘的經(jīng)歷。清晰度和連貫性至關(guān)重要。

我的同事凱蒂（Katie）選擇了一個UI組件。我會注釋它（我們的主要工具是SCSS，樹枝和手工藝品，但模板語言并不重要），她將提供反饋。理想情況下，我將正確獲取大多數(shù)細(xì)節(jié)，并出現(xiàn)一些錯誤，以說明如何在交接過程中丟失信息。

在白標(biāo)或框架前端開發(fā)中，優(yōu)先級是靈活性和適應(yīng)性。內(nèi)容和樣式在很大程度上保持不可知論（在產(chǎn)品邊界內(nèi)），因?yàn)榇a的最終目的地和目的是未知的。但是，我最近向網(wǎng)頁設(shè)計機(jī)構(gòu)的過渡已經(jīng)將重點(diǎn)轉(zhuǎn)移了出來。在這里，重點(diǎn)是定制，高度量身定制的設(shè)計，與客戶的特定需求及其目標(biāo)受眾深入融合。

與精心制作的Pixel-Perfect UI而不是線框或初始敘述的精心制作的圖形設(shè)計師緊密合作是一條學(xué)習(xí)曲線。但是，我將有價值的技能帶入餐桌：文檔設(shè)計。

文檔設(shè)計 - 基本上是具有核心訪問性的語義網(wǎng)絡(luò)，即將圖形設(shè)計視為通信系統(tǒng)。我們將顏色，版式和布局的基本目的轉(zhuǎn)化為可訪問，線性和可導(dǎo)航的DOM。它是HTML，簡單而簡單。然而，令人驚訝的是，這個基本原則常常被忽略。

凱蒂（Katie）提供了一個充滿藝術(shù)板和清晰設(shè)計規(guī)格的草圖文件。我的分析顯示，使用類似卡范式的六個或七個組件：

• 一張卡片在網(wǎng)站頁面上呈現(xiàn)元數(shù)據(jù)。
• 它包含圖像/媒體和元數(shù)據(jù)（媒體對象）。
• 它顯示在一組類似對象中。
• 該組始終鍵入（沒有搜索結(jié)果，新聞文章和課程的混合）。
• 每個對象都有一個頁面鏈接，沒有其他操作。
• 每個對象都包含一個呼吁行動（例如，“書”）。
• 可選元素：時間，類別，徽章。
• 所需元素：媒體，標(biāo)題，鏈接。

該卡是主要導(dǎo)航元素。用戶遍歷指導(dǎo)路徑，根據(jù)頂級頁面從卡集中選擇（“ what on oon”，“ class”）。它不是交互式的，而是指南，索引卡將目的地的用戶帶到了目的地，在這種情況下，購買了一張表演票。

考慮一下這個類比：通過電話描述一個節(jié)目傳單。從無關(guān)緊要的細(xì)節(jié)開始，您不會逐字朗誦文本。您也不只是描述顏色和字體。您將傳達(dá)基本信息：“這是最偉大的表演者，星期二晚上7:30，在電車附近的牛津街上的奧迪恩?！边@是文檔設(shè)計的本質(zhì)。

計數(shù)，組和名稱

讓我們在列表項(xiàng)目中構(gòu)建每張卡。我們需要一個可數(shù)的小組，我們將以標(biāo)題介紹（<h3></h3> ）。這使屏幕讀取器用戶可以：

1. 標(biāo)識標(biāo)題概述中的列表。
2. 請參閱預(yù)先計數(shù)項(xiàng)目。
3. 導(dǎo)航到下一個列表項(xiàng)目/卡。
4. 跳過小組并繼續(xù)下一頁（分頁是以下標(biāo)記地標(biāo)）。

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

錨

每張卡都將包裹在錨元件中（<a></a> ）。這優(yōu)先考慮鏈接，允許用戶在識別相關(guān)卡后立即單擊。雖然可單擊的大區(qū)域是有益的，但它不應(yīng)成為可用性陷阱。該卡的大量排水溝提供了足夠的間距，以最大程度地減少意外點(diǎn)擊。

標(biāo)題

演出標(biāo)題將是標(biāo)題（<h3></h3> ），反映其視覺突出?？焖賿呙铇?biāo)題的用戶很容易找到此關(guān)鍵信息。圖像將在標(biāo)題之前；由于無法通過API提供圖像描述，因此alt屬性將留為空。

現(xiàn)在為元數(shù)據(jù)：

• 徽章
• 日期/時間
• 類別

徽章

徽章突出顯示特定于場地的信息。盡管其用戶利益并不明顯，但其視覺強(qiáng)調(diào)需要包含。為了避免在非視覺瀏覽期間錯過它，我將立即將其放在標(biāo)題之后，無論是首先還是最后一次，以保持一致的可訪問性。而不是<abbr></abbr>，我將使用純文本，因?yàn)槠放祁伾菆龅厮袡?quán)的明確指標(biāo)。

<p> HAC亮點(diǎn)</p>

徽章是組織特定的，顯然將內(nèi)部事件與外部組織主持的事件區(qū)分開來。

日期/時間

日期至關(guān)重要，將放置在<h4></h4>元素，促進(jìn)對特定日期或時間的快速掃描。這<time></time>元素確保通過輔助技術(shù)進(jìn)行適當(dāng)?shù)娜掌?時間解釋。

類別/標(biāo)簽

類別遵循徽章和日期，反映了它們的視覺去優(yōu)先級。我們通過將特定信息放在更多一般信息之前避免重復(fù)。一個簡單的標(biāo)簽先于類別列表以易于清晰。硬編碼的間距也可以防止文本壓縮。

<p>類別：{for類別中的類別。</p>

CSS中處理了主要類別的顏色編碼，因?yàn)樗且环N非語言提示，不需要口頭描述。首先將主要類別放置，但沒有明確標(biāo)記，因?yàn)轭A(yù)先存在的類別過濾器提供了更有效的選擇方法。

行動

呼吁采取行動（“書籍”，“了解更多”）被視為跨度，最后放置以發(fā)出信號的末端。這樣可以確保沒有數(shù)據(jù)遵循該動作。

結(jié)論

此標(biāo)記優(yōu)先考慮計數(shù)，分組和命名數(shù)據(jù)，從而實(shí)現(xiàn)線性和非線性相互作用。當(dāng)依次或零件閱讀時，該頁面是可以理解的，從而促進(jìn)有效的導(dǎo)航。

凱蒂的反饋

凱蒂·帕里（Katie Parry），設(shè)計師：出色的文章！這<time></time>元素處理特別聰明。但是，輔助技術(shù)用戶以預(yù)定的順序接收信息。在不進(jìn)行過濾時，查找特定事件（例如，舞蹈事件）需要在標(biāo)題，徽章，日期和類別中導(dǎo)航，這可能很麻煩。這不是編碼錯誤，而是當(dāng)前Web范式的限制。要考慮未來改進(jìn)的事情。

我的設(shè)計過程通常始于事件卡，甚至在建立范圍內(nèi)的版式之前。從視覺上看，這些卡應(yīng)：

• 類似于直觀使用的列表。
• 提供足夠的信息以供用戶興趣評估（圖像，標(biāo)題，日期，鏈接）。
• 包括一個明確的行動呼吁（鏈接）。
• 容易掃描。

視覺掃描性是通過一致的信息類型和清晰的視覺層次結(jié)構(gòu)來實(shí)現(xiàn)的。字體和間距是關(guān)鍵。標(biāo)題高度突出；日期始終如一，但與標(biāo)題不同。類別具有不同的樣式。代碼樣本中的間距需要調(diào)整以進(jìn)行最佳掃描性。

用戶掃描以獲取不同的信息。一些通常瀏覽；其他人則搜索特定的事件或類別?？ㄐ枰m應(yīng)這種多樣化的行為。盡管存在慣例，但卡設(shè)計隨著項(xiàng)目而異。

必須在熟悉的界面和特定于客戶的獨(dú)創(chuàng)性之間達(dá)到平衡。自定義字體和調(diào)色板有助于，但用戶發(fā)現(xiàn)至關(guān)重要。我研究客戶及其受眾（評論網(wǎng)站，社交媒體），以發(fā)現(xiàn)影響設(shè)計的見解。開發(fā)人員參與在此發(fā)現(xiàn)階段將是有益的。目前，我使用廣泛的草圖筆記，有時還使用電子表格來定義功能。數(shù)據(jù)民群體將是理想的！

以上是講圖形設(shè)計的故事的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！