講圖形設計的故事

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

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

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

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

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

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

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

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

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

計數，組和名稱

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

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

---

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

錨

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

標題

演出標題將是標題（<h3></h3> ），反映其視覺突出。快速掃描標題的用戶很容易找到此關鍵信息。圖像將在標題之前；由於無法通過API提供圖像描述，因此alt屬性將留為空。

現在為元數據：

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

徽章

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

<p> HAC亮點</p>

徽章是組織特定的，顯然將內部事件與外部組織主持的事件區分開來。

日期/時間

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

類別/標籤

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

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

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

行動

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

結論

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

凱蒂的反饋

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

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

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

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

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

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

以上是講圖形設計的故事的詳細內容。更多資訊請關注PHP中文網其他相關文章！