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

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

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

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

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

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

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

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

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

計數(shù)，組和名稱

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

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

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

錨

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

標題

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

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

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

徽章

徽章突出顯示特定於場地的信息。儘管其用戶利益並不明顯，但其視覺強調(diào)需要包含。為了避免在非視覺瀏覽期間錯過它，我將立即將其放在標題之後，無論是首先還是最後一次，以保持一致的可訪問性。而不是<abbr></abbr>，我將使用純文本，因為品牌顏色是場地所有權(quán)的明確指標。

<p> HAC亮點</p>

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

日期/時間

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

類別/標籤

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

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

CSS中處理了主要類別的顏色編碼，因為它是一種非語言提示，不需要口頭描述。首先將主要類別放置，但沒有明確標記，因為預先存在的類別過濾器提供了更有效的選擇方法。

行動

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

結(jié)論

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

凱蒂的反饋

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

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

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

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

用戶掃描以獲取不同的信息。一些通常瀏覽；其他人則搜索特定的事件或類別。卡需要適應這種多樣化的行為。儘管存在慣例，但卡設計隨著項目而異。

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

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