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

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

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

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

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

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

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

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

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

計(jì)數(shù)，組和名稱

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

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

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

錨

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

標(biāo)題

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

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

• 徽章
• 日期/時(shí)間
• 類別

徽章

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

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

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

日期/時(shí)間

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

類別/標(biāo)籤

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

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

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

行動(dòng)

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

結(jié)論

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

凱蒂的反饋

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

我的設(shè)計(jì)過(guò)程通常始於事件卡，甚至在建立範(fàn)圍內(nèi)的版式之前。從視覺(jué)上看，這些卡應(yīng)：

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

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

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

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

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