設計指南第四章：目的與社群（上） — 為每個人設計的實戰技巧
了解設計師在社會中的角色超越單純產生設計，以及設計對於整個世界無遠弗屆的影響。
本章目標：更了解我們的設計決策所帶來的影響。
設計不只是工作，更是個激發世界進行改變的方式，而那將會變成一種責任。你想要創造出什麼樣的改變呢？
你可能已經在新聞中聽過，社群媒體能導致成癮，或是定位追蹤應用程式的數據如果落入不法之手，可能對用戶的隱私構成威脅。儘管大多數位產品的創建都是出於良好的意圖，在產品問世後，我們卻無法總是掌控或預測它將如何被使用。
作為設計師，你的職責是在創建產品時將大局牢記在心 — 就像建築師必須考慮建築物的安全性一樣。
作為在企業工作的設計師，你會被要求運用設計技能為公司帶來更多互動數、觀看數與獲利。
用你的聲音為用戶發聲，為保護他們挺身而出，使他們免受上癮、錯誤信息和權利侵害。回絕那些可能散布不實謠言、不當行為或不公不義的公司決策。每天都抱著這樣的心態，你就能定義產品的邊界，並阻止你的設計超能力被用於邪惡上。
如果你決定選擇勇氣而非安逸，並挑戰我們對同理心的理解和實踐，以人為本的設計將不僅是陳詞濫調。（Should you decide to choose courage over comfort and challenge our understanding and practice of empathy, human-centered design can be more than a cliche.） — Vivianne Castillo
另一方面，要確保你的產品可以被所有人使用，通用性（Accessibility）即是指產品是否能被能力各異的使用者所使用。作為設計師，我們經常假定在為與我們極其相似的人們做設計，然而這並不是真的，你會常在數位產品設計中聽到這個座右銘：「你不是你的用戶。」
作為設計師，我們整天都在想像和建構體驗，這些體驗加在一起佔據了人們的大部分生活，它們影響著人與人間，以及與周圍世界的關係。我們做的每個設計決策，都可能將某些人納入或排除在外，讓用戶在我們打造的體驗中感到賓至如歸是我們職責的一部分。
使用者體驗設計 — 以及將使用者納入設計流程的思維 — 是為了縮小打造產品的人與使用者間的隔閡而存在的；包容性設計（Inclusive design）則旨在縮小人與人之間的鴻溝。
在接下來的幾年，隨著你開始投入設計社群，你將會越來越常聽到「通用性」一詞。儘管遵循無障礙規範（accessibility guidelines）是一個很好的起點，在創造真正涵蓋所有受眾的產品時，設計師們也應該是倡導如何更佳落實的人。
諸如「設計倫理」、「包容性」和「通用性」等主題顯然無法總結於這一頁中，但你會在職涯中認識到這些。在你踏出第一步的現在，最重要的是理解為什麼這些概念需要存在，並保持開放心態去了解更多相關的知識。
目錄
閱讀清單（轉譯）
一、通用性設計沒有那麼難觀看清單（轉譯）
一、無障礙數位樣式指南全破解：字型、色彩、圖像
二、建立具備社會包容性的設計系統
閱讀清單
一、通用性設計沒有那麼難
原文連結：Designing for accessibility is not that hard數位通用性 (digital accessibility)，指數位內容和應用程序包含廣泛的人群，像是視覺、聽力、體感、言語障礙等。有個迷思是讓網站通用是困難和昂貴的，且不是必要的。
然而，作為設計師，我們應該有責任確保無論能力、背景，每個人都可以造訪我們創造的內容，為每個人帶來更好的體驗，本篇文章 InVision 的設計師跟我們分享以簡單的七個指南，幫助產品更接近網頁內容通用性指南 (WCAG 2.0)的AA級，讓網頁更具有通用性。
一、增加足夠的顏色對比度
按鈕具有好的顏色對比度更容易閱讀。顏色對比度是常常被忽略的通用性問題，而在世界衛生組織（WHO）預估有 2.17 億人患有中度至重度視力障礙，因此文字與背景之間的足夠對比度很重要。根據 W3C 文字與背景對比度至少 4.5:1。
推薦方法：如果使用 Mac，建議使用 Contrast app 檢查顏色對比度，如果你想要得到更詳細的分數，建議將顏色輸入至 WebAIM 顏色對比度檢查器，計算不同的級別（A, AA, AAA）。
資料來源： WCAG 視覺對比性
二、利用顏色以外的元素讓資訊易於理解
當你想傳達重要的資訊、顯示行動或是提示時，請勿將顏色用作唯一的視覺提示，視覺敏感度較低或是色盲的人會很難理解其內容。可以嘗試使用顏色以外的標示像是文字或圖案，顯示錯誤訊息也請勿依靠色彩文字，需要加上圖標或標題。 Trello 的色盲模式是個很好的例子，透過增加圖案能夠更通用性。
推薦方法：黑白影印畫面來看是否可以理解其中所有的內容，還可以使用像 Color Oracle，可以幫助你了解在沒有顏色的幫助下該資訊的可用性是否足夠。
資料來源：WCAG 沒有色彩的視覺對比度
三、設計可用的聚焦狀態
你是否注意到在按鈕、輸入框或連結周圍會出現藍色的邊框？這些稱作聚焦指示（focus indicators），在預設情況會出現在能夠互動的元件，幫助行動不便、手腕有傷的人們了解哪些地方可以使用鍵盤導覽。你或許覺得這些不是很漂亮，但如果要擺脫這個樣式的話，請確保替換其他樣式進行輔助。
資料來源：W3C 聚焦視覺
四、在輸入區域使用標籤或引導
設計表單時，使用文字框字符（placeholder text）作為標籤（label）是最大的錯誤，通常這個樣式是灰色且對比度低，很難閱讀。使用螢幕閱讀器的人通常使用 Tab 鍵瀏覽表單，最好在輸入框填寫內容時標籤也不會消失。
資料來源：WebAIM 創造通用性表單
五、為圖像或其他非文字內容編寫有意義的替代文字
弱視力的人經常使用螢幕閱讀器收聽網站，這些工具可以將文字轉換成語音，讓人聽到網站上的內容。可以透過兩種方式顯示替代文字。
- 在圖片元素的<alt>屬性裡
- 圖片本身的上下文中
Google 正在開發一種影像自動描述 AI，可以 94% 準確度描述照片。同時，我們應該手動提供文字描述圖片的含義和功能。
資料來源：W3C 使用 Alt 屬性
六、在內容上使用正確的標記
具有大字體的標題可以幫助讀者更好理解內容順序，或是透過標題獲得頁面的概述。不要只將 HTML 標籤用在樣式效果上，螢幕閱讀器透過標題結構來分層瀏覽網頁，可以讓使用者收聽所有標題列表，按照標題跳轉內容。
資料來源：WebAIM 語意架構
七、支援鍵盤導覽
鍵盤通用性是最關鍵的網頁通用性之一，行動不便、仰賴螢幕閱讀器的盲人、沒有精確肌肉控制的人都依賴鍵盤去導覽內容。當你瀏覽頁面時，互動元件的順序最重要，導覽必須要有邏輯和直觀。此外，對於螢幕閱讀器的人來說，收聽冗長的連結會很麻煩，盡量簡潔，提供 ARIA 地標或 HTML5 的架構元素像是<main> 或 <nav>。
推薦方法：只有使用鍵盤來測試網頁，使用 Tab 按鍵在表單上移動，使用 Enter 鍵選擇元件進行測試，如果不用滑鼠就能瀏覽所有頁面那就是很好的！
資料來源：W3C 鍵盤
以上都是很好的開始，如果你想讓產品更加通用的話，可以進一步採取下列行動：
- 使用審核服務確定產品達到 WCAG 2.0 AA 等級，根據審核結果去修正問題。
- 可以指派某個人進行週期性的通用性審核，或許是品質管理的團隊，如果你沒有任何經驗的話也可以聘請外部專家。
- 讓通用性成為研究的一部分，驗證對於通用性的假設是否正確，這些協會和社群的資源或許可以提供幫助。
閱讀資源
- WebAIM：有關網頁通用性的文章、資源和訓練。
- 每個設計師需要知道七件關於通用性的事：來自 Salesforce。
- UCLA 障礙與資訊計畫：這不是最漂亮的網站卻擁有大量的資源。
- UX 迷思：很多對於 UX 設計的誤解，有些與通用性有關。
- 顏色通用性工作流程：Geri Coady 設計了一些精巧的示例來檢測設計中的顏色。
- W3C：這是網頁通用性指南的聖經。
好用的工具
- WebAIM 顏色對比度檢測：出色的對比度顏色檢測。
- 包容性元件：每篇文章都探討一個通用的介面元件，並提出更好的通用版本。
- Color Oracle：適用於 Windows、Mac 和 Linux 免費色盲模擬器。
- Vox 產品輔助功能指南：針對設計師、工程師和專案經理的綜合清單。
- AXE Google Chrome外掛：使用 Chrome 檢查器測試任何網站的通用性違規行為。
- Contrast：一個 macOS 應用程序，可快速偵測 WCAG 色彩對比度。
觀看清單
一、無障礙數位樣式指南全破解：字型、色彩、圖像
為什麼我們該在意？
- 原因一：無障礙設計能幫助的對象是所有人，並非只針對有障礙者。
對一般人來說，把無障礙設計做好的產品也更好用。無障礙設計常與通用設計（Universal design）合在一起。後者強調設計該是全民通用，前者則在設計時，以特定的需求或群族作為優先考量，與包容性設計（Inclusive design）相似。無障礙設計常被視為小眾市場，但在全球 7.5 億人口中就有超過 15％ 的人口具有不同面向的使用障礙，還不包含在特定情境下有暫時性障礙（如帶小孩）的不便者，是不可忽視的族群。 - 原因二：無障礙設計以極小或近乎無的成本帶來巨大營收。
因為無障礙設計也與搜尋引擎優化（SEO）、法規與技術考量和響應式設計相互作用，做好無障礙設計能擴大受眾、增強互動，最終創造更高營收。 - 原因三：由於多數企業都忽視了通用性，將其納入考量的公司將脫穎而出。
- 原因四：身為現代設計師，在實踐正面社會改革上，我們是能發揮關鍵作用的要角。
六大障礙類別與常用輔助工具
無障礙樣式指南（Style Guide）
全球資訊網協會（W3C, World Wide Web Consortium）發佈的《網頁內容通用性指南》（Web Content Accessibility Guidelines, 後簡稱 WCAG）是現今無障礙設計的檢視指標。
*以下建議多針對既有樣式指南的調整，若想從頭打造無障礙樣式指南，可以從線框稿wireframe）開始，確保有清楚的資訊層級並有一致的表達方式。
- 字型
字型是為了傳達內容，因此要清晰明確。WCAG 針對字型上的無障礙設計要求為可感知（Perceivable）及可理解（Understandable。要符合無障礙規範，以下幾點請特別注意：
- 字體最小應為16pt、字重最細至少200，粗細大小要使用相對尺寸。
- 盡量避免文字置中，因為各行起點都不同時會導致巨大的認知互負荷。需要置中時，可以置中網頁容器（Container）而不是文本（如下圖 ）。
- 小心使用全型/大寫，除了對認知障礙者來說難以閱讀，螢幕閱讀器遇到大寫字母時會逐字朗讀。
- 確保內容的標題標籤（如<h1>, <h2>）與其重要次序相符，也可以善用 HTML5 的屬性（如<article>, <section>）來加強層次結構，幫助視覺障礙與認知障礙的使用者了解內容。
- 別只用顏色來標示超連結，常見的無障礙超連結樣式如使用底線，但要注意不要在其他地方也使用底線，以免造成混亂。也要注意超連結的文字內容明確讓使用者知道這是什麼以及將導向哪裡。
- 色彩
色彩有助區別信息與添加個性，但對色盲者而言難以理解。Contrast: MacOS tool 和 Sketch 外掛 Stark 都是能幫助建立符合 WCAG 色彩樣式的好工具。
常見的錯誤如下：
- 對比不足，如在淺色背景上用淺色字體。在白色背景上，最淺的字體顏色可為 #767676。
- 使用造成色彩震顫（color vibration）的色彩組合（如下圖），易造成認知超載，甚至頭暈目眩。
- 影像與圖像
「影像是否提供了既有內容的進一步資訊或額外描述？如果沒有，就不該納入。 」這個新聞界的古老原則也適用於無障礙的圖像使用上。針對那些值得納入的影像，請注意以下使用方式：
- 影像替代文字（Alt text）：如果影像是用於輔助文本，要注意不要重複內文。若是當做功能用（如超連結）則永遠要記得放替代文字。
- 使用可縮放向量圖（SVGs）：能用向量就不要用點陣圖、標籤要明確（如下圖）。SVG 能自由縮放外，還能自定義 CSS 屬性。
- 資料視覺化（Data Visualization）: 除了加替代文字外，講者也建議使用 <longdesc> 這個HTML屬性，讓視覺障礙者能透過獨立頁面的圖像闡述了解內容。
- 動態（Motion）：常見的視差滾動和彈跳可能會造成動態暈眩（Motion sickness），以下兩個使用動態的基本考量，如果兩者皆符合才使用：(1)動態是否為敘事加分？(2)敘事能否獨立存在？
結論
無障礙設計範疇不僅是為了身心障礙者，也包含了社會包容性，從性別欄位中的預設次序、到考量 2G 環境下的使用體驗。雖然要考量的事很多，但重點不在完美，而是每天一點點的小行動。希望大家都能加入無障礙設計聯盟，納入下個專案中。
二、建立具備社會包容性的設計系統
設計系統是以元件為基準的
設計系統的層級就像是從原子、到分子、再到有機物一樣組合而成，從最小單位的基本元件（下拉選單），到樣式（表單樣式），到頁面（註冊表單），到產品，最後到產業。
由此可見，當原子等級的基本元件具有排他性時，這將會擴大影響到產品與產業。
當然，我們可以說這些「排他性」只是不經意的小問題，但動機並不能消除影響（Intent does not erase impact），排他性對於使用者的影響是真實存在的。
設計系統是全面的
我們需要確保所有元件以及使用者都被考慮到 —
元件包含：字體、色彩、間距、聲音、語氣、影像、動畫、影片
使用者包含：種族、性別、性向、能力、社經地位、信仰、哲學、國籍、語言
（美國的）科技產業現狀是 4:1 的男女比以及 83% 的白人領導階層，而確認偏誤會讓我們下意識偏好跟我們共享相同特質的人，導致無意的排他性。
無意的排他性即是當我們將使用者分類時，通常勢必會排除某些人，而這等於是在對他們說「這裡沒有你的位置」。
設計系統是協作的
設計師應該與客服團隊密切合作以獲得回饋，設計師創造假說，而客服團隊代表真實世界的試金石，藉此創造正向回饋循環。
理想的設計迭代為設計 → 主動研究 → 獲得回饋 → 被動研究，我們永遠都會犯錯，重點是要保持彈性，持續學習、記取教訓並改進。
設計系統最強大的地方，同時也是它最大的弱點
作者提議我們應該特意地在使用者族群囊括經常被邊緣化的弱勢族群。你問：難道不會產生排他性？不會的，因為剩下的族群極大宗，這些需求相對容易被注意到並確保得到滿足。
為了建立更具備社會包容性的設計系統，我們必須持續為更廣義的「我們」努力。
這份指南得以中文的姿態出現在設計師社群中，都要歸功於自告奮勇的轉譯團團員：Christy Huang、Irene Chuang、吳健群、Mooon.C、Lily Pai、Chi-Yu Tsai、QMO、Irene Kuo、Chunyi、Andy Kao 感謝你們！（此翻譯已經過原作者同意授權）
