作為UX設(shè)計(jì)師，我們需要向利益相關(guān)者提供內(nèi)容情境并傳達(dá)設(shè)計(jì)決策來闡明我們要表達(dá)的概念牧嫉。添加注釋允許UX設(shè)計(jì)人員向客戶端和開發(fā)人員傳達(dá)為什么將界面元素放置在特定位置以及該元素的交互模型是什么等信息娜遵。這為設(shè)計(jì)解決方案建立了明確的信息層次結(jié)構(gòu)，并創(chuàng)建了用戶流程麦向，幫助利益相關(guān)者了解完整的交互線路圖子檀。

一個帶有注釋的線框圖展示出不同屏幕間的用戶流程。作者/版權(quán)所有者：Dixie Pacheco

為什么注釋很重要炫七？

創(chuàng)建帶注釋的線框圖非常耗時(shí)爬立，但是可以很好的傳達(dá)用戶體驗(yàn)的整體情況，這有助于利益相關(guān)者了解設(shè)計(jì)決策的好處及其理由万哪。線框圖既是項(xiàng)目文檔侠驯，又是視覺溝通指南。將注釋作為工作流程的一部分可以消除誤解或混亂奕巍。同時(shí)吟策，了解受眾還可以幫助你確定應(yīng)將哪種類型的信息納入注釋中，以及應(yīng)使用哪種寫作風(fēng)格的止。在向他人展示注釋之前檩坚，最好先征得項(xiàng)目團(tuán)隊(duì)對注釋需求的反饋。

線框圖通常有五類受眾：客戶（內(nèi)部或外部）诅福、開發(fā)人員匾委、視覺設(shè)計(jì)師、文案氓润、最重要的是未來的你自己赂乐。
-- Twitter高級產(chǎn)品設(shè)計(jì)師 Dan Saffer

客戶希望看到業(yè)務(wù)收益以及（數(shù)字）體驗(yàn)會給他們的用戶帶來什么好處，因此使用注釋來解釋用戶體驗(yàn)如何與客戶的品牌和業(yè)務(wù)保持一致非常重要咖气。同時(shí)挨措，開發(fā)人員和視覺設(shè)計(jì)師希望了解應(yīng)用程序的工作方式，因此你需要向他們演示消息傳遞以及界面（UI）元素的位置和樣式崩溪，而文案想知道需要編寫的內(nèi)容以及使用什么樣的語調(diào)來適應(yīng)目標(biāo)受眾浅役。請確保在此過程中為自己創(chuàng)建筆記，因?yàn)槟憧赡苄枰匦略L問該項(xiàng)目伶唯，并想知道當(dāng)初為什么要做出某個設(shè)計(jì)決定或特定注釋觉既。

使用Adobe XD制作的線框圖套件。作者/版權(quán)所有者：Ahmed Hammad

使用注釋顯示內(nèi)容情境

注釋提供了某些事物將如何工作的情境乳幸。設(shè)計(jì)線框圖時(shí)奋救，使用注釋不僅可以說明設(shè)計(jì)本身，還可以說明其在動態(tài)環(huán)境中的工作方式反惕。首先從用戶流程開始尝艘，顯示用戶如何與設(shè)計(jì)交互的總體邏輯和過程。比如姿染，用戶從哪里開始背亥、用戶如何選擇以及用戶將看到什么秒际？

用戶將如何與設(shè)計(jì)交互的總體邏輯和過程圖例

交互模型可幫助你提供導(dǎo)航情境，并列出應(yīng)用程序內(nèi)所需的各種交互狡汉。鏈接將用戶帶入到體驗(yàn)中娄徊，用戶可以看到哪種類型的輸入以及用戶的選擇是什么？

移動端在線商店的線框圖盾戴，包含頁面每個部分的注釋寄锐。作者/版權(quán)所有者：Olivia Gardiner

給線框圖添加注釋的最佳做法

盡早開始做筆記

一個簡單的文本文檔或電子表格可以幫助你在將注釋應(yīng)用到線框圖之前組織好注釋內(nèi)容。使用簡單的詞匯和活潑的寫作風(fēng)格使筆記和評論保持簡短而直接尖啡。避免使用隱喻或修辭手法橄仆，并將所有內(nèi)容保持在內(nèi)容情境中。提供對功能實(shí)現(xiàn)有用的信息衅斩，例如字符限制盆顾、分頁規(guī)則和復(fù)選框狀態(tài)。

保持整潔

使用網(wǎng)格系統(tǒng)保證注釋和線框圖的整潔畏梆，以實(shí)現(xiàn)統(tǒng)一的布局您宪。通過網(wǎng)格系統(tǒng)，可以保持頁面元素與編號的順序和層次結(jié)構(gòu)對齊奠涌，從而更加有效地通過注釋傳達(dá)設(shè)計(jì)決策宪巨，并將注意力集中在功能和內(nèi)容布局上。

根據(jù)客戶的內(nèi)容制定設(shè)計(jì)決策

不要使用“l(fā)orem ipsum”這樣的占位符文本溜畅，請使用真實(shí)內(nèi)容進(jìn)行設(shè)計(jì)揖铜。這將避免任何不必要的混亂，也無需對頁面上將要使用的特定內(nèi)容進(jìn)行大量注釋达皿，因?yàn)樗娂此谩?/p>

不要跳過對特定部分或頁面的注釋

為每一頁添加全新的注釋。要避免參考之前的項(xiàng)目或聲明某項(xiàng)功能和其他網(wǎng)站或應(yīng)用雷同贿肩。在注釋中引用過去的項(xiàng)目可能會產(chǎn)生與手頭項(xiàng)目不同的偏差或期望峦椰。

利用圖例

創(chuàng)建符號以區(qū)分注釋中的內(nèi)容、功能和動態(tài)元素汰规。內(nèi)容和動態(tài)元素的簡單圖例將為讀者提供清晰的信息汤功，并有助于為每個線框圖提供情境說明。保持一致的條理性溜哮，比如使用兩位數(shù)編號符號1.x滔金，2.x等，如有必要茂嗓，你可以根據(jù)需要添加其他符號餐茵，而不必對現(xiàn)有注釋重新編號。注釋計(jì)數(shù)是特定于頁面的述吸，因此請勿繼續(xù)上一頁的編號忿族，而需要在新的頁面重新計(jì)數(shù)。向讀者提供特定的頁面專用ID以便輕松追蹤頁面之間的注釋。

一個移動界面的線框圖道批，帶有編號注釋和描述圖例错英。作者/版權(quán)所有者：Chaymae Lougmani

從解釋常規(guī)頁面元素轉(zhuǎn)移到特定頁面元素，并在引用線框圖元素和注釋時(shí)使用相同的命名約定隆豹。 確保為每個注釋提供可視空間椭岩；不要讓數(shù)字、箭頭和注釋來干擾頁面璃赡。如上圖所示判哥，在右側(cè)進(jìn)行注釋和其他筆記。

考慮狀態(tài)

請記住要注意交互性鉴吹、微交互姨伟、移動手勢和模式窗口，為每個交互提供用戶操作和界面響應(yīng)標(biāo)注豆励。比如夺荒，說明用戶點(diǎn)擊的位置或用戶將鼠標(biāo)懸停在元素上時(shí)會發(fā)生的情況。

一個帶注釋的移動app線框圖良蒸。作者/版權(quán)所有者：Volodymyr Melnyk

注釋的使用時(shí)機(jī)及場景

在注釋線框圖時(shí)技扼，請簡明扼要并清楚地表達(dá)想法。闡述如何使用某些內(nèi)容嫩痰，為什么將其作為設(shè)計(jì)的一部分以及會將用戶帶到何處剿吻。你可以使用注釋來做以下這些事情：

• 顯示號召性用語（CTA）。在每個頁面或區(qū)塊上高亮顯示CTA的標(biāo)簽串纺、文本和位置丽旅。登錄或者注冊的操作說明要有明確定義。
• 澄清元素和區(qū)塊纺棺。頁面元素和區(qū)塊應(yīng)明確定義和標(biāo)注榄笙。如果元素或區(qū)塊是小部件或區(qū)塊的顯示是有條件的（例如，用戶是否登錄）祷蝌，請?zhí)峁┰敿?xì)說明茅撞。
• 解釋鏈接和按鈕。闡述清楚每個線框圖上所有鏈接和按鈕的位置巨朦，以及單擊后會執(zhí)行什么操作米丘。顯示導(dǎo)航元素會將用戶帶到的位置。
• 描述動態(tài)元素的功能糊啡。在演示線框圖概念時(shí)拄查，請?zhí)峁┮造o態(tài)形式顯示的動態(tài)頁面元素的相關(guān)信息和設(shè)計(jì)說明。這將包括下拉菜單以及處于活動動態(tài)和非活動狀態(tài)的按鈕棚蓄。例如：“單擊時(shí)靶累，將打開一個模式疊加窗口”腺毫，或者“在懸停時(shí)，將打開一個工具提示”挣柬。
• 顯示頁面元素的活動和非活動狀態(tài)潮酒。顯示在滿足給定條件后按鈕狀態(tài)將如何變化，例如邪蛔，用戶是否已確認(rèn)閱讀條款或已經(jīng)與頁面上的驗(yàn)證碼完成互動急黎？
• 顯示隱藏或模式窗口的頁面內(nèi)容。設(shè)計(jì)并說明頁面上未立即顯示的內(nèi)容侧到。線框圖的隱藏內(nèi)容或模式窗口元素可以在補(bǔ)充頁面或頁面空白處顯示勃教。
• 支持性消息和提示。鼓勵用戶成功完成某些任務(wù)和成就匠抗。通過分步式公開或工具提示故源，讓用戶知道在某些部分應(yīng)該做什么。
• 提供錯誤消息提示和錯誤狀態(tài)汞贸。錯誤消息提示以及錯誤狀態(tài)都需要空間和規(guī)劃绳军，因此請?zhí)崆翱紤]所需的消息類型以及將其作為頁面元素放置在何處。錯誤消息應(yīng)該告訴用戶需要修復(fù)或糾正錯誤的方法矢腻。
• 指示頁面和元素的過渡方式门驾。顯示或描述頁面元素如何在活動狀態(tài)和非活動狀態(tài)之間進(jìn)行動畫或切換。描述動畫及其在頁面上的使用方式多柑。
• 為項(xiàng)目團(tuán)隊(duì)提供標(biāo)注奶是。編寫動作或功能特性，以使設(shè)計(jì)人員和開發(fā)人員知道何時(shí)顯示加載消息竣灌、如何對搜索結(jié)果中的內(nèi)容進(jìn)行分頁或滾動瀏覽聂沙、何時(shí)何地使用輔助功能標(biāo)簽等等。

帶有描述可訪問性需求注釋的線框圖初嘹。作者/版權(quán)所有者：Karen Hawkins

你應(yīng)該對需要處理的內(nèi)容或功能的各個方面每次都使用不同的注釋及汉。當(dāng)用戶打開以前注釋過的其他頁面或動態(tài)內(nèi)容時(shí)，請?zhí)砑禹撁嬉谩?/p>

簡潔明了

避免寫作含糊不清削樊，這可能會導(dǎo)致誤解并破壞使用線框圖注釋的目的。你的注釋應(yīng)清晰準(zhǔn)確兔毒，以避免需要額外澄清其含義漫贞。注釋不能替代與利益相關(guān)者的交談或與項(xiàng)目團(tuán)隊(duì)進(jìn)行正式交流。

線框圖注釋用于向利益相關(guān)者提供設(shè)計(jì)情境并傳達(dá)項(xiàng)目概念和想法育叁。通常迅脐，讀者不會詳細(xì)閱讀線框圖注釋。所以豪嗽，你需要準(zhǔn)備好對你的注釋發(fā)表意見并回答來自客戶和項(xiàng)目團(tuán)隊(duì)的問題谴蔑。使用演練和臨時(shí)用戶測試的反饋來測試和驗(yàn)證線框圖豌骏。制作線框圖不是孤立進(jìn)行的，將設(shè)計(jì)決策放在潛在用戶面前將為交互提供情境隐锭，并有助于交付項(xiàng)目成果窃躲。

英文原文：https://xd.adobe.com/ideas/process/wireframing/benefits-of-annotating-wireframes/
原文作者：Andrew Smyk
編譯作者：微博/公眾號@設(shè)計(jì)吐司

以上譯文僅代表原作者觀點(diǎn)。如需轉(zhuǎn)載請遵循CC版權(quán)協(xié)議正確標(biāo)明出處钦睡。