最佳化使用者感知和美觀的建議
適用於此 Power Platform Well-Architected 的體驗最佳化檢查清單建議：
| XO:07 | 將經典設計原則應用於視覺元素，例如配色方案、排版和佈局。 努力實現集中、平衡和直覺的視覺層次結構，引導使用者專注於重要元素和操作。 |
|---|
本指南描述了影響使用者感知的通用視覺設計模式的建議，這可以顯著影響應用程式的滿意度和採用率。 視覺元素是用於建立體驗的基礎建構元素。 應用與人類自然感知和處理資訊方式一致的視覺原則，提供結構化方法來幫助選擇和安排視覺元素，以建立有效且有吸引力的應用程式。
關鍵設計原則
對人類視覺設計感知的廣泛研究表明，使用者不會孤立地看待視覺元素。 相反，他們會結合其他元素及其出現的背景來感知它們。 這些關係會影響使用者的感知，吸引人們對特定領域的注意力，引發情感，幫助理解，增強美感，並強化品牌形象。 仔細選擇和安排視覺元素可以創造引人入勝、令人難忘且有效的使用者體驗，從而與目標受眾產生共鳴。
美觀-可用性效果
美學-可用性效應是指將有吸引力的產品視為更有用的傾向。 使用者在大約 50 毫秒內形成對應用程式的初步意見。 第一印象受到多種因素的影響，包括結構、顏色、間距、對稱性、文字數量和字體。 正面的第一印象可以提高整體使用者滿意度。 研究表明，當使用者發現介面具有視覺吸引力時，他們會更容忍一些小的可用性問題。 此外，設計品質可以做為可信度的指標。
平衡和重量
視覺平衡代表視覺感知中的平衡與和諧感。 它能透過減少認知壓力，幫助使用者更有效地處理和組織視覺訊息。 平衡的構圖通常被認為更令人愉悅且更容易理解，讓使用者能夠有效地集中注意力並更輕鬆地駕馭視覺刺激。 視覺平衡的認知方面強調了其在促進清晰溝通和增強整體使用者體驗方面的重要性。
當所有元素都處於光學平衡時，組合物就達到平衡。 通常，數學配置需要調整。 影響視覺重量的一些元素是大小、顏色、密度、空白。
尺寸：較大的元素往往比較小的元素具有更多的視覺重量。 為了實現平衡，可以透過將較大的元素與較小的元素分組或調整它們在配置中的位置來平衡它們。
顏色：明亮或強烈的顏色可以吸引更多的注意力，並且比柔和或中性的顏色更重。 平衡顏色涉及將它們均勻分佈在整個介面或使用互補色來創造視覺和諧。
密度：元素的密度是指它們在給定空間內的緊密程度。 平衡密度涉及確保元素均勻分佈在介面中，以避免過度擁擠或稀疏區域。
空白：也稱為負空間，空白是指元素之間的空白區域。 空間有助於創造視覺呼吸空間，並可以透過突出和強調某些元素來平衡構圖。
平衡的構圖是元素之間視覺力量的總和。
平衡版面配置是最困難的任務之一，因為它不容易測量。
Color
色調、色調、色調和色調可以傳達意義、喚起情感並創造美感。 顏色在引導使用者注意力、建立層次結構、傳達訊息和增強可用性方面起著至關重要的作用。 有幾個原因解釋了為什麼 UI 中深思熟慮的顏色設計可以按照您想要的方式影響使用者：
注意力和感知。 某些顏色比其他顏色更引人注目，使設計師能夠將觀眾的注意力引導到特定元素上。 顏色對比可以增強可讀性並區分不同的組成部分，有利於資訊的快速處理。
情緒反應。 顏色具有喚起情緒和情緒的心理關聯。 紅色和橙色等暖色係可以營造活力和興奮感，而藍色和綠色等冷色可以喚起平靜和安寧。 您可以引發所需的回應，以影響使用者獲得預期的體驗。
品牌識別。 在品牌材料中一致使用顏色有助於建立強大的視覺識別並培養品牌認知。 使用者經常將特定的顏色與特定的品牌聯繫起來，並將他們的體驗與品牌忠誠度和信任聯繫起來。
視覺層次。 顏色可用於建立視覺層次結構和組織資訊。 根據元素的重要性或類別為元素分配不同的顏色，以創建清晰的層次結構並促進更輕鬆的導航和理解。
接近
放置得更近的物品看起來相關性更強。 排列元素時，請確保密切相關的元素和不密切相關的元素之間的間距存在明顯差異。
這個格式塔原理表明，視覺元素之間的空間距離會影響它們在心理上的感知和組織方式，並強調其在促進有效處理和理解視覺刺激方面的重要性。
將功能相似或屬於同一層次類別的相關元素分組在一起。 例如，在下拉式選單中執行類似操作或選項的按鈕應緊密分組在一起以指示它們的關聯性。 在導覽列中，間隔緊密的選單項目表示一組相關的選項，而選單類別之間較大的間隙在視覺上區分它們。 相關的表單項目應分組在一起 (例如，「地址」部分中的位址欄位)。
透過調整段落、句子和單字之間的間距來增強文字較多的介面的可讀性。 較近的段落間距表示邏輯連結或思想的延續，而較大的間距表示內容的過渡或中斷。 該技術促進了對文字訊息的有效理解。
確保相關元素和不相關元素之間的間距有明顯的區別，以防止混淆。 間距斜坡可以幫助根據單元尺寸一致地確定所需的適當間距。
左邊的圓與三角形的關係比與另一個圓的關係更密切。
段落之間的間距小於部分之間的間距。
連續性
排列在直線或曲線上的元素被認為比不在直線或曲線上的元素更相關。
沿著直線或曲線排列介面元素，例如導航選單或流程中的步驟，以暗示順序或進展。 這種配置有助於使用者感知元素之間的關係並理解資訊或操作的邏輯流。
沿著一條線放置相關元素，例如核取方塊或單選選項，或清單中的項目 (項目符號點)，以在視覺上將它們分組在一起。 這種安排向使用者表明這些元素具有共同的目的或屬於同一類別，從而更容易導航和理解。 如果外觀相似的項目進一步向內縮進，則該項目的位置與視覺階層中較低的位置相關。
使用直線或曲線引導使用者的注意力並在介面中建立視覺路徑。 例如，箭頭可以將使用者的眼睛沿著特定路徑從內容的一個部分引導到另一部分，指示連接或進展。 這種技術可以幫助使用者更直觀地瀏覽介面並鼓勵探索。
沿著突出的線條排列關鍵的介面元素，例如號召性用語按鈕或重要訊息，以吸引使用者的注意力並建立焦點。 例如，Fluent MessageBar 模式通常在內容區域中顯示為突出的平衡訊息，訊息位於左側，導致右側的號召性用語按鈕。 這種配置策略突顯了這些元素並強調了它們的重要性，增加了互動的可能性。
對於我們的感知來說，曲線/線條比顏色更強烈。
精靈使用連續性向使用者顯示步驟是相互關聯的，而不用過多的資訊壓倒他們。
結案
人腦傾向於看到完整的形式，識別單個物體的單一 (熟悉的) 模式，即使某些資訊缺失。
確保設計元素 (例如形狀、顏色和大小) 的視覺一致性，以幫助使用者學習他們應該期望的模式，即使它們呈現在不同的上下文中。
使用簡單且熟悉的圖示或符號，讓使用者根據先前的經驗填寫缺少的資訊。 例如，放大鏡圖示通常與搜尋功能相關聯，即使沒有附帶文字。
逐漸向使用者呈現資訊 (也稱為漸進式揭露)。 允許使用者在與介面交互時填寫缺失的細節，避免用太多資訊壓倒他們並鼓勵探索。
創造一個有凝聚力的視覺模式，鼓勵使用者將物件視為整個實體。 例如，將相關元素分組在一起可以幫助使用者理解它們的關係和目的。 使用格式塔原則在視覺上一致地排列元素以指示分段。 有效利用空間在介面元素周圍營造封閉感。
使用動畫和過渡來引導使用者注意力並傳達介面狀態的變化。 不同狀態或螢幕之間的平滑過渡可以幫助使用者理解元素之間的關係並填補缺失的資訊。 Power Apps 中提供的多個現代控制項本身會顯示動畫。
首先辨識出一個正方形，然後辨識出四個不完整的圓圈。
從卡片到模態的動畫有助於縮小兩者之間的差距並將它們相互關聯。
焦點
焦點是立即吸引觀眾注意力的設計元素。 理想情況下，設計應具有一系列焦點 (通常在一到三個之間)，目標是引導使用者以有意的方式瀏覽內容。
設計具有清晰訊息層次結構的介面，其中強調最重要的內容或操作做為焦點。 使用尺寸、顏色、對比度和位置等視覺線索使這些元素脫穎而出。從最重要的焦點開始，逐步呈現資訊。 此技術可協助使用者快速識別最相關的內容或操作，並引導他們以邏輯順序瀏覽介面。
將主要號召性用語按鈕放置在介面的顯眼位置，使它們成為最強的焦點。 這些按鈕在視覺上應與其他元素區分開來，並在策略上定位以引導使用者進行所需的操作，例如購買或註冊。 流暢的設計語言建議對這些元素使用品牌主題顏色。
有效地利用對比度來建立焦點。 由於顏色、亮度、大小或排版的差異而脫穎而出的元素自然會吸引使用者的注意。 較亮的表面與較暗的文字或品牌元素形成對比，形成更突出的焦點。
使用空白透過與周圍元素建立視覺分離來突出焦點。 此技術有助於防止分心，並允許使用者專注於最重要的內容或動作。 周圍間距較大的 UI 元素比間距較小的元素更能吸引注意力，並且往往被認為重要性更高。
在整個介面中保持焦點使用的一致性，以提供有凝聚力的使用者體驗。 透過設定焦點模式，您可以引導使用者對他們需要了解的層次結構的期望，以導航介面並幫助他們在各個螢幕或頁面上找到重要資訊或動作。
請記住，保持平衡非常重要，不要讓太多相互競爭的焦點淹沒使用者。
使用者的眼睛會先被藍色方塊吸引。
諸如號召性用語之類的元素可以成為焦點，以確保使用者注意到它們。
相似性
看起來相似的物件通常被視為一個群組或模式，導致使用者期望它們具有相同的功能。
確保功能相似的介面元素具有一致的視覺風格。 例如，執行類似或同等權重操作的按鈕應具有相同的顏色、形狀和大小，向使用者表明它們共享的功能。 相反，確保功能上顯著不同的元素能夠清晰地區分。 這兩種技術都透過建立清晰的視覺線索來防止混亂和沮喪。
在整個介面中使用一致的圖標和符號來表示相似的操作或功能。 使用者傾向於根據他們過去的經驗將熟悉的圖標與特定功能聯繫起來。 為了滿足這些期望，請使用普遍認可的圖標隱喻。 透過使用同一組圖示 (例如 Fluent UI 圖示庫) 確保圖示樣式的一致性。
使用顏色編碼來表示元素或類別之間的相似性。 例如，使用相同的顏色突出顯示清單中的相關項目，或將圖表上的相似資料點分組，可以增強視覺連貫性並幫助使用者辨別模式。
保持用於類似目的的元素的版式和文字樣式的一致性。 一致的字體樣式、大小和格式有助於形成有凝聚力的視覺語言，促進使用者識別相關內容或操作。
為跨介面的類似操作提供一致的互動式意見反應。 無論是將滑鼠懸停在按鈕上還是點擊連結，使用者都應該期望統一的響應來加強視覺相似性和功能等效性之間的關聯。 雖然平台本質上提供了大多數互動行為 (例如懸停和按下狀態顏色值)，但在從頭開始建立元件元素或手動實現意見反應狀態時，請記住這項設計原則。
確保視覺相似性得到其他提示的補充，例如文字標籤或音訊意見反應，以滿足具有不同需求和偏好的使用者。 透過多種感官方式有效地傳達功能可以增強可用性和包容性。
元素按形狀和顏色而不是排列 (資料列和資料行) 分組。
如果儀錶板上的一張卡片作為側面板打開，則使用者希望所有卡片都以這種方式打開。
圖表與背景
人們本能地認為元素要麼是「圖表」(在前方突顯的內容)，要麼是「背景」(退到背景中的內容)。 因此，背景會影響感知，確保充分的描繪以將重要元素與背景區分開來至關重要。 空白 (負空間) 可以增強對內容的理解。
利用顏色、大小或視覺風格的對比來建立清晰的圖形與背景的關係。 重要元素應在背景中突出，易於區分，有效引導使用者注意力。 顏色較淺的表面以及與背景形成對比的視覺元素更加突出。 這種方法減少了視覺混亂並幫助使用者識別關鍵資訊。 在前景和背景元素之間提供足夠的對比度，以提高有視覺障礙的使用者的可讀性，並提高他們存取和理解內容的能力。
保持介面元素的位置和樣式的一致性可以加強圖形與背景的關係，並幫助使用者理解介面結構。 設計模式和視覺提示的一致使用確保使用者可以在不同螢幕和上下文中快速辨別前景和背景元素。 設計中的不一致會擾亂使用者的心理模型並阻礙他們有效導航介面的能力。
低對比和最小的負空間有助於將白色矩形視為背景的一部分。
側面圖像需要退到背景中，以便使用者可以專注於重要內容。
群組
如果元素共享一個具有明確邊界的區域，則它們往往被視為群體。
將視覺容器中的相關元素 (例如盒子、卡片或邊框) 分組，有助於使用者將它們視為有凝聚力的單元。 這種方法以視覺化方式組織內容和功能，使識別和處理資訊變得更加容易。 清晰的分組有助於避免混亂的介面並減少混亂或低效率。 當鄰近性不可行時，分組也很有效。例如，跨螢幕的多個控制項的訊息欄由於其邊框和背景顏色而被視為相關單元。
保持分組元素一致的視覺風格可以加強它們的聯繫並提高可用性。 對這些元素使用相似的顏色、字體或圖示強調它們屬於相同的類別或功能。 視覺呈現的不一致會削弱感知分組，並導致使用者忽略元素之間的關係或誤解其意義或目的。
在一個元素或一組元素周圍新增邊框會建立與周圍元素的分離。
內容分段有助於使用者了解主題正在切換。
訊號與雜訊
線條、對比度和間距等視覺提示用於向使用者表明某件事很重要。 然而，太多的訊號或突出顯示不重要訊息的訊號很快就會變成噪音。
採用焦點原則 (如粗體文字、對比色或圖示) 向使用者發出重要訊息或操作訊號。 例如，對重要按鈕或標題使用明亮的顏色，使它們脫穎而出。
選擇性地突出顯示內容，以避免過多的資訊淹沒使用者。 僅顯示對於使用者的任務或目標真正重要的訊號元素。 太多的訊號可能會造成混亂，並讓使用者難以確定優先順序。 確定對使用者最重要的信息並適當地強調它。 通常，建議每頁僅包含一個號召性用語按鈕。 在表單中，反白顯示必填欄位以引導使用者的注意力。 這可以防止使用者迷失在不必要的細節中，並幫助他們專注於重要的事情。
確保信號在整個介面中跟隨一致的視覺語言，作為幫助使用者直觀地識別模式和理解不同信號含義的準則。
根據特定環境和使用者需求客製化訊號。 例如，如果使用者正在掃描呈現某些任務的介面，請清楚地發出關鍵狀態和可操作項目的訊號以吸引他們的注意力。 上下文訊號可幫助使用者快速找到相關訊息，而不會被不相關的細節分散注意力。
訊號有助於引導使用者瀏覽內容並傳達重要內容。
視覺噪音會帶來混亂，並產生與訊號相反的效果。
Power Platform 簡易化
在畫布應用程式中，使用配置容器對相關元素進行分組。 理想情況下，您應該將所有頁面元素組織在容器中，配置容器還可以透過調整間隙屬性來有效地分隔子容器。
在模型導向的應用程式表單中，部分可用於對相關欄位或元素進行分組。
使用可重複使用的自訂元件實現常見視覺元素的一致性。
在畫布應用程式中，現代控制在其設計中具有整合訊號功能。 具體來說，按鈕和徽章控制項在其樣式屬性中提供了各種選項，使它們成為有效的訊號。 堅持每個元件的最佳做法，並選擇性地應用訊號以確保最佳通訊。