共用方式為

對以下設計標準的建議

  • 發行項

適用於此 Power Platform Well-Architected 的體驗最佳化檢查清單建議：

XO:02 遵循既定標準、慣例和準則。 使用常見的設計模式。 在整個介面中保持設計元素、術語和互動的一致性。 使用一致的模式和標準在整個介面上指引使用者並建立有凝聚力的使用者體驗。

本指南介紹有關建立設計標準、慣例和最佳做法的建議，以開發可增強使用者體驗和應用程式整體成功的使用者介面。 應仔細考慮與標準的偏差，以避免對使用者體驗和應用程式可用性產生負面影響。

關鍵設計原則

遵循設計標準能找出設計的重要方面，有助於來減少設計過程中的決策工作。 了解標準可以逐項列出並簡化團隊的能力以實現精心設計的使用者介面。 這種方法可以縮短開發週期，提高可用性並提高使用者滿意度，最終提高內部軟體系統的生產力和有效性。

了解設計原則

對人類認知的廣泛研究有助於我們對視覺設計和與數位產品互動的理解。 這些知識構成許多最佳做法和標準的基礎，約佔最終產品的 80%。 設計原則可以橋接剩餘 20%，未由標準涵蓋的的創意差距。 熟悉這些知識可以強化開發團隊在規劃期間對設計注意事項的理解，進而減少對設計資源的依賴，或增進與設計資源的協作。

遵循常見的模式和隱喻

通用模式和隱喻在數位產品中被廣泛認可和期待。 在適當的情況下納入這些模式可以簡化使用者用戶引導和長期使用，降低培訓和支援成本，並可能減少更新或重新設計的需求。 這些做法涵蓋了設計的各個方面，包括配置組合、瀏覽結構、資訊階層和互動設計。

堅持標準的圖示隱喻和語義顏色至關重要。 圖示應使用已建立的視覺效果關聯來快速有效地向使用者傳達功能。 同樣，語義顏色，如紅色代表錯誤或綠色代表成功，能提供與使用者期望和心智模型一致的即時視覺效果反饋。 遵循這些慣例有助於通過培養熟悉感和舒適感來減少認知負荷並提高可用性。

建立設計系統

設計系統是用於組建使用者介面的可重複使用功能性構成要素的集合。 它們是專門為組織設計的，因此每個元素都符合品牌的既定標準。 設計系統的四個關鍵元件是設計標籤、元件、模式庫和指南。

設計標籤是使用者介面的基本視覺效果元素，包括色彩、排版和間距等方面。 它們表示為標準格式中的變數，便於使用設計系統建立和維護應用程式。 無論具體設計如何，設計標籤都可以簡化設計到代碼的轉換。 例如，透過定義一個名為「primary-color」且具有指定值的標記，開發人員可以使用該標記無縫地整合設計，而不是將特定值直接嵌入到程式碼中。 設計標記可以與組織的風格指南保持一致，並集中管理以產生易於使用的標記。

元件代表使用者介面的離散模組化單元。 它充當組裝應用程式介面的視覺效果元素。 精心設計的元件具有兩個關鍵特徵：可重用性和模組化。 它們應該經過策劃，以確保它們在品牌生態系統中的多個應用程式中保持視覺效果一致性，進而減少每次重新建立設計的需要。 單個元件應在多個上下文中無縫服務。

Power Apps 提供一組全面的基本通用元件 (如按鈕和下拉清單) 和複合元件 (如新式表格)。 盡可能使用這些控制項來滿足基本需求，然後考慮在可重複使用者介面模式的間隔存在處組建複合元件。

複合元件應具有足夠的萬用性，可以依原樣使用，也可以在不同的應用程式上下文中略有變化 (透過參數)，而無需進行修改。 自訂元件的部分範例包括：

  • 公司品牌的標頭或頁腳
  • 螢幕大小的資源頁面元件，供使用者提供反饋和獲取 IT 協助
  • 版權聲明或連結等通用內容

模式庫提供了一組預定義的設計模式，供製作者用作構建使用者介面的起點。 這些模式可作為常見設計挑戰的標準化解決方案。 模式庫的主要目標是提供精心製作之模式的集中集合，進而能夠建立一致且有效的使用者介面。 模式庫使開發人員能夠使用特定的模式並遵循既定的使用指南，進而確保使用者介面設計的一致性和效率。

指南為專案團隊提供有關如何有效使用元件和視覺效果樣式的規則和最佳做法。 與注重美學的樣式指南不同，設計系統指南定義了元件的功能性行為和使用者互動期望。 例如，如果設計系統提供了引用色彩的設計標籤集，則指南應闡明使用這些色彩的時機，以及開發人員如何在 Power Apps 中存取相應的色彩。 對於元件，應該有關於正確使用方式、輸入和輸出參數，以及元件預期狀態變化的文件。

集中式設計系統工作還可以在存放庫中託管通用媒體資產，例如公司標誌和其他設計資產，以實現廣泛的快速開發。

微軟的 Fluent UI 是廣泛採用的開放原始碼設計系統範例。 它可以成為許多 Power Apps 設計決策的有效參考，因為所有新式控制項都使用 Fluent (2) 設計系統中的元件。 諸如 Fluent UI 之類的設計系統是創建元件以確保它們滿足使用者需求的大量研究和開發工作的結果。 它們也設計成普遍存在，可以在各種數位產品和平台上輕鬆使用。 每個元件都有特定的準則，以確保應用程式與預期體驗保持一致。 透過檢閱 Fluent 2 指南來利用由研究背書的知識。

共用以避免重複執行不僅可以提高生產效率，還可以確保體驗經過一段時間仍保持一致。 對共用元素的貢獻有助於維持體驗的新鮮感並反映整個組織的專業知識。 目前，一致性是一個挑戰，因為元件、系統、流程和文化往往不共用，不追求連貫性，並使貢獻變得困難。

進行設計檢閱

存取用於指引使用者體驗設計的資源對於確保應用程式符合既定的 UI/UX 標準至關重要。 集中式團隊應旨在熟悉基本設計標準和最佳做法。 雖然設計師通常了解使用者體驗，但專案經理也可以從學習這些技能中受益，進而有效地為團隊做出貢獻。

驗證體驗的最有效的方法是親自瀏覽它。 但是，您也可以用程式設計的方式讀取 Power Apps 應用程式中繼資料。 達成此目的的方法可能包括檢查是否已將正確的主題套用至應用程式，或驗證舊控制項中是否引用了主題標籤值。 例如，如果特定文本元素必須使用某些設計標記，則文本元件的名稱可以對應於特定值，並且元件的屬性應與特定的設計標記映射匹配。

評估特定元件類型並滿足特定條件的元素數，與不符合特定條件的元素數。 例如，細想命名不正確或命名正確但不遵循屬性值準則的文字元件。 為了強制實施回應式配置，某些配置容器可以對應到特定的命名慣例和屬性值 (例如 LayoutWrap)。

滿足輔助功能標準以增加使用者群

結合包容性設計原則可確保產品迎合不同的觀眾，包括各種能力的個人。 包容性設計旨在為各種能力的使用者找出潛在的障礙，以在最終實施之前建立可應對挑戰的產品。 瞭解和討論可能導致交互障礙的功能方面以有效克服它們至關重要。

函式 目標
認知 我們接收、解釋和處理資訊的能力受到許多因素影響。 這些因素包括注意力、意識、專注力、記憶力、判斷力、理解力、問題解決能力和推理能力。 一個人的認知會影響他們的學習方式，無論是學習如何使用新裝置或在課堂上學習新資訊。 認知的許多層面會互相影響。
行動力 我們的各部分結構與肌肉提供我們行動力，且它們依賴控制肌肉的大腦信號。 行動力包括抓握、精細運動技能、協調、控制 (自主與非自主運動)、速度、肌肉張力、耐力、姿勢和暫時性損傷。 行動力會受到情境式、臨時、漸進或永久條件的影響。
視力 我們從環境中查看和理解視覺效果資訊的能力會引導思想和運動。 視力會受身體和神經因素的影響。 視力限制包括失明、低視能 (部分視力)、視力下降、視野喪失、色盲、畏光 (對光敏感)，甚至明亮的陽光都會影響螢幕上文字的可讀性。
聽力 我們從環境中接收和理解聲音的能力也會引導思想和運動。 聽力損失的程度在廣泛的範圍內各不相同，導致日常技術使用的障礙。 臨時或情境式範例包括無法播放聲音的嘈雜環境或安靜區域。
聲音、語音和通訊 我們的溝通能力 (口頭或非口頭) 對於表達我們的需求、建立關係、向他人傳達資訊，以及與我們的環境互動至關重要。
感覺和知覺 感覺是我們偵測觸覺或身體位置等感覺的能力。 知覺是大腦處理和傳達這些感覺的方式。 感覺限制包括前庭疾病、慢性疼痛、皮膚完整性、感覺 (超敏和減敏) 和本體感覺。

存取內容的方法

使用者以各種方式存取數位內容。 除了滑鼠和指標輸入之外，他們還可能使用鍵盤和輔助技術，如螢幕和盲文閱讀器、放大鏡、字幕、語音辨識和高對比度設置，所有這些都會調整體驗以滿足使用者的需求。

輔助工具

常見的輔助工具包括：

  • 鍵盤：有視覺障礙的人可使用螢幕助讀程式軟體與網站和應用程式進行互動，該軟體使用文字轉語音技術，大聲朗讀內容和控制項，並且利用鍵盤作為點擊互動的替代輸入方式，取代標準滑鼠的點選操作。 除了支援基本的鍵盤命令集外，螢幕助讀程式還提供一組複雜的鍵盤命令。 這些命令為使用者提供一組功能強大的附加工具，可以更有效率地與使用者介面進行互動。

  • 螢幕閱讀器：螢幕閱讀器將數位文本轉換為合成語音和盲文輸出。 它們讓使用者能夠聽到內容並使用鍵盤瀏覽。 這項技術讓盲人或低視能的個人能夠以與任何其他使用者同等級的獨立性和隱私來使用資訊技術。 有認知或學習障礙的個人，以及單純比較喜歡音訊內容而不是文字的使用者也會使用螢幕助讀程式。 這些工具超越了網頁使用，有助於瀏覽文件、試算表和作業系統。

  • 觸控：觸控目標主要針對有運動障礙的人群，這些人可能在點擊螢幕時會遇到困難。 更具體來說，觸摸旨在幫助人們限制來自意外 (或未註冊) 觸碰的虛假輸入量。

  • 動態內容：地標角色或 ARIA 標籤為螢幕閱讀器使用者提供了立竿見影的好處。 有八個角色，每個角色代表網頁上通常出現的內容區塊。 若要使用它們，請將相關角色屬性新增到 HTML 中的合適容器中，使螢幕助讀程式使用者能夠快速瀏覽到頁面的該區段。

視覺效果樣式

若要為具有不同眼視功能的使用者建立包容性產品，必須考慮色彩、對比度和文字大小等視覺效果樣式。 這涉及確保文字與其背景 (包括圖像、圖示和按鈕上的文字) 之間的足夠對比度，以提升具有低對比度敏感或色盲之使用者的可讀性。 對比鮮明的內容強化了各種照明條件下的可讀性，使所有使用者受益。

標準表自應與背景保持至少 4.5：1 的對比度。 對於較大的文字、互動式元件和資料視覺效果，與背景色的最低所需對比度為 3：1。 狀態指示器應有效地使用語義顏色、類型和影像來傳達資訊，確保所有使用者都能意識到內容。 請考慮支援高對比度調色板，這會標準化調色板以顯示對比度至少為 7：1 的內容，進而確保可見性和清晰度。 提供深色模式可以顯著提高可讀性並減少眼睛疲勞。

排版

排版在確保具有不同需求之使用者的可讀性方面，非常關鍵。 文字必須夠大且間距足夠，以適應不同的使用者要求。 使用者應該能夠調整方向和縮放等級等設定，應用程式可以相應地無縫調整其內容配置。 設置良好的排版不僅有助於提高可讀性，還有助於頁面方向和導航，使視力低下、認知障礙和色盲的人以及依賴螢幕閱讀器的人受益。

標題應具有大文字或粗體文字，以便快速掃描和理解，尤其是對於視覺導向的使用者而言。 正確套用的標題元素可確保所有使用者的高效率瀏覽。 行距和間隔會顯著影響可讀性：例如，過寬的行距會拉傷眼睛，而過窄的行距會擾亂節奏和理解。 以一行 50 到 70 個字元和字體大小的 120% 到 145% 的行高為目標，以提高可讀性。

在行動裝置上，文字應可調整大小為最大 200%，而不會影響內容或功能。 這種彈性確保使用者可以依據自己的喜好或需求調整文字大小，進而強化整體可及性。 此外，使用者應該能夠在介面上縮放，頁面配置設計為無需水平滾動即可流暢地回流內容，且縮放等級高達 400%。 無論裝置的螢幕大小，都確保內容可存取和可讀取，有助於為所有使用者提供更加使用者友好的體驗。

影像、圖形和動作

圖像和圖形使內容對許多人來說，更令人愉快和更容易理解，特別是對於那些有認知和學習障礙的人。 雖然圖像可以作為視覺障礙者的線索，幫助他們在內容中定位，但在網站上的廣泛使用可能會給用戶帶來主要障礙。

關於媒體內容的無障礙實踐能造福點字和螢幕助讀程式使用者，使用者在關閉圖像的情況下瀏覽可節省頻寬以及搜尋引擎爬蟲的使用。 它們也可以幫助聽力減退或認知障礙的人。

使用替代文字讓他們可以理解視覺效果內容。 Alt 屬性會描述視覺效果內容，例如，下載圖像時顯示的文字。 把替代文字調適為圖像的上下文。 簡明扼要且富含資訊 (使用 150 到 250 個字元)。 請記住將重複文字內容的圖像標記為裝飾性圖像。

互動

互動是協助工具最重視的地方。 如果使用者無法順利瀏覽產品並完成工作，則不算真正存取該產品。 高效率的鍵盤和觸碰互動可幫助螢幕助讀程式、點字閱讀器和使用鍵盤瀏覽的使用者。 一般互動包括：

  • 導航：輔助技術使用者通過 Tab 鍵、搜索以及 (如果是螢幕閱讀器) 使用標題和連結清單來導航網頁。 使用地標、標題和捷徑 (如「跳到主要內容」) 來確保高效率的鍵盤瀏覽。

  • 超連結：讓超連結在上下文中清晰、簡潔和有意義可提高超連結的可用性和可及性。 套用足夠的顏色對比度，並在視覺效果上與其他內容區分開來。

  • 資料表：僅依靠視覺效果提示不足以建立可存取的資料表。 結構性標記讓輔助技術可以識別標頭和資料儲存格。

  • 表單：用於各種 web 互動的輸入欄位，對於使用螢幕助讀程式或鍵盤的個人通常會引起協助工具問題。

  • 焦點：焦點可見性透過在視覺上指出他們接下來要與之互動的元素，來協助依賴鍵盤瀏覽頁面的使用者。 有時需要以程式設計方式移動焦點或將焦點限制在特定區域以最佳化體驗。

  • 狀態更改：指定任何狀態更改和公告的文字。 傳達錯誤狀態並指導使用者完成錯誤恢復 (例如缺少資訊或系統問題) 至關重要。

Power Platform 簡易化

新式控制項在畫布應用程式和模型導向應用程式都可以使用。

畫布應用程式支援新式主題，允許您在應用程式中的所有控制項上實現一致的品牌調色盤。 模型導向應用程式支援主題來修改基本品牌元素，如應用程式標頭色彩、連結和一些表單圖示。

可重複使用的解決方案感知元件以多種形式提供，適用於各種應用程式類型。 自訂畫布程式元件可用於畫布應用程式或自訂頁面，並使用低程式碼組建。 Power Apps Component Framework 可用來執行畫布應用程式、模型導向應用程式，和 Power Pages 的程式碼元件。

畫布應用程式支援對應到特定輔助技術功能的輔助屬性 。 使用工作室內工具來驗證協助工具合規性。

雖然無需設定即可存取模型導向應用程式，但請確定所有新增到應用程式的 Web 資源均可存取。 內嵌的畫布體驗 (包括 自訂頁面) 必須手動設定以符合輔助工具標準。

模型導向應用提供內建的標準鍵盤快速鍵以供瀏覽表單和檢視使用。

畫布應用程式需要程式碼元件來啟用鍵盤快速鍵，這可以使用 Creator Kit 的鍵盤快速鍵進行設定。

體驗最佳化檢查清單

體驗最佳化檢查清單