最佳化配置的建議
適用於此 Power Platform Well-Architected 的體驗最佳化檢查清單建議：
| XO:06 | 在不同的螢幕尺寸和解析度下保持可用且具有視覺吸引力的配置。 使用調適性技術以各種方式動態呈現內容。 |
|---|
本指南介紹了設計螢幕配置的建議，這些配置可輕鬆在各種裝置上瀏覽並流暢地進行調整。 這種方法可確保使用者獲得一致且最佳的觀看體驗，無論他們使用什麼裝置。
定義
| 詞彙 | 定義 |
|---|---|
| 檢視區 | 顯示內容的數位介面的可見部分，例如 Web 瀏覽器或行動應用程式。 檢視區範圍通常根據螢幕尺寸和解析度與裝置類別 (行動裝置、平板電腦和桌面裝置) 相關聯。 |
| 中斷點 | 定義用於確定調適性配置行為的檢視區範圍的特定像素值。 |
關鍵設計原則
回應式配置可在不同的視窗大小上提供靈活高效的使用者體驗。 它們透過縮放內容、重新排列元素以及選擇性地顯示文字和影像進行調整。 無論螢幕尺寸如何，負責任的配置都能滿足使用者的需求。
確定一致的應用程式框架
應用程式框架由一組控制項組成，這些控制項在每個畫面上都會一致地出現。 它包含三個主要子元件：標題、瀏覽和內容區域。 簡單的應用可以靈活地使用標題元件，而更複雜的應用通常使用側面導航來啟用多個頁面。 子元件是可自訂的。 例如，您可以在標題中合併全域搜尋，或在側邊導覽中對項目進行分組，以滿足應用程式的要求。
應用程式框架的三個主要子元件為：
標題是一個核心元件，旨在成為每個內部應用程式的一部分。 它由子元件組成，讓使用者能夠存取系統範圍的功能，幫助他們適應 UI，並提供跨體驗的一致性。 它顯示在應用程式框架的頂部，並應保留在應用程式的所有頁面上。 它可以選擇託管全域命令，例如搜尋、設定、通知、意見反應、設定檔或說明。 應用程式的名稱應始終顯示，理想情況下它也應作為主頁或登陸頁面的可點擊連結。 標頭應具有回應能力，指令應移至 600 像素及以下視窗中的溢位控制項。 搜尋輸入寬度在 1023 像素及以下時也具有反應能力。
瀏覽是一個控制項系統，它們可協同工作以幫助使用者查找資訊和完成工作。 它可以幫助使用者從應用程式的區段跳轉到另一個部分。 從階層上看，它不會附加到任何頁面或區段，而是存在於所有其他內容之上。 它始終存在，並且可以最小化到摺疊狀態 (也稱為軌道狀態)，以便為頁面內容釋放額外的空間。 在較小的視窗大小下，其可以最小化為飛出功能表。 最常見的導航形式包括頂部導航和側面導航。 不要同時使用兩者。
內容區域包含螢幕的焦點。 瀏覽器視窗的大小會影響內容框架和主內容區域中的可用空間。 該框架會根據斷點和每個元件相應的回應行為進行調整。 若要了解詳細資訊，請參閱建立斷點矩陣。
內容區域可以選擇包含多個可用於一致元素放置的子區域，例如頁首、內嵌側窗格或覆蓋內容的面板。
堅持一致的設計語言 (包藍配色方案、排版和版面設定結構) 有助於使用者快速識別各種元素並與之交互，而不會造成混亂。 應用程式框架模式在所有內部業務應用程式中使用得越一致，使用者的回憶或心智模型就越強。 與產業標準或通用平台模式保持一致可進一步增強此效果。
確定應用程式框架後，每個面的版面配置都會位於應用程式框架的內容區域內。
深思熟慮地使用內容區域
使用者渴望無縫體驗，資訊需要易於存取，文字易於閱讀，並要增強美觀而不阻礙可用性。 優先考慮關鍵訊息的初始可見性，確保各欄目的可讀性，並協調設計元素以實現美感。
確保打開螢幕時立即可以看到基本資訊，而無需滾動。 優先顯示重要資訊，例如瀏覽選項、關鍵內容和螢幕頂部附近的可操作項目。 在顯示足夠的項目和為每個項目提供詳細訊息之間取得平衡是一個持續的挑戰。 相反，雖然在初始視圖中提供所有可能的資訊可能很誘人，但過多的資訊可能會讓使用者不堪重負並稀釋關鍵元素的重要性。 考慮使用簡潔的摘要或預覽來了解更詳細的內容，吸引使用者進行更深入的研究。 儀表板經過最佳化，可實現大量資料視覺化。
合併多個資料行、區段或分組，以邏輯方式組織內容並最大化空間。 仔細注意資料行寬，確保文字在不過度緊張的情況下保持清晰易讀。 避免過於窄的資料行迫讓使用者不斷水平滾動，從而擾亂互動流程。 相反，過寬的列會妨礙可讀性，要求使用者跨長距離追蹤行。 力求在舒適閱讀的同時有效利用可用空間之間取得平衡。
適當調整視覺元素的大小和位置，以創造視覺上令人愉悅且平衡的介面。 將標題與相應的視覺效果或標題對齊，保持元素之間的間距一致，並根據使用者需求遵循階層。 修剪不必要的裝飾，並明智地將像素分配給最重要的元素。 優先考慮並強調內容和導航元素，尤其是在導航密集型應用程式或主頁上，並避免有損可用性的多餘裝飾。
基礎方格對於一致地排列元素很有用。 所選方格行為應在應用程式中每個螢幕的內容區域中保持一致，也可以套用至元件級別 (如卡片或側窗格)。 Web 應用程式中最常用的方格配置類型是資料行方格。 建議使用流暢 (或自動縮放) 方格行為來實現回應式螢幕。
使用已建立的配置和分組模式
使用公認的結構和安排來組織使用者介面中的內容和元素。 隨著時間的推移，這些配置和模式已經得到完善並證明是有效的，使它們對使用者來說熟悉和直觀，同時也使調適性模式的實現變得容易。 確定核心場景和元素後，將每個場景和元素對應到可提供最佳互動的已建立配置。 優先考慮對工作完成重要的內容和功能。 確定哪些元素應始終在螢幕上可見和可存取，哪些元素可以透過其他功能表或動作隱藏或存取。
以下清單雖然並不全面，但說明了常用於業務或生產力應用程式的已建立配置。 所有這些都可以放置在主內容區域內。
登陸/首頁畫面
登陸畫面或主畫面可作為應用程式的入口點，為使用者提供應用程式產品或功能的概述。 它通常旨在吸引訪問者的注意力並鼓勵採取特定行動，例如完成首次任務或探索更多內容。 它通常包含主要影像和乾淨的瀏覽選項。
它非常適合歡迎使用者，提供對關鍵功能、瀏覽選項或號召性用語的快速存取，並為應用程式的體驗定下基調。 優先考慮清晰、簡單和直觀的瀏覽，以有效地引導使用者。
儀表板
儀錶板是應用程式中的集中式中心，可向使用者提供相關數據或資訊的全面概覽。 它通常由可自訂的小工作或模組組成，可讓使用者監控特定指標或執行動作。
儀表板適用於具有複雜機料集或多方面功能的應用程式，讓使用者能夠一目了然地追蹤進度、分析趨勢並做出明智的決策。 它們在分析平台、專案管理工具和財務管理應用程式中特別有用。
表單
表單是一種便於使用者輸入資料的結構化版面配置，通常由用於輸入各種類型資訊 (例如文字、數字、日期和選擇) 的欄位組成。 表單對於收集使用者輸入、處理事務和促進應用程式內的互動至關重要。
它們通常用於註冊流程、結帳流程、資料輸入工作，以及任何需要使用者輸入或意見反應的場景。
實體/設定檔檢視
實體或設定檔檢視呈現有關特定實體的詳細資訊，例如使用者設定檔、產品清單或內容項目。 它通常包括描述性文字、多媒體元素以及相關的動作或互動。
它們非常適合展示有關應用程式中專案的詳細資訊。 它們為使用者提供深入的見解，促進決策，並支援與特定實體的互動，例如社交網路應用程式中的使用者設定檔或電子商務平台中的產品清單。
清單頁面
清單或表格以結構化格式顯示專案或實體的集合，通常以線性或網格布局顯示。 它通常包括每個項目的簡短摘要或預覽，以及用於瀏覽或篩選的瀏覽控制項。
清單頁面可以有效地以易於理解的格式呈現大量內容或資料，讓使用者能夠有效地掃描、搜尋和瀏覽。 如果啟用了對特定資料列的動作，則該過程應該很清晰。 清單頁面通常用於內容管理系統、目錄清單、搜尋結果和動態消息。
迷您評論 (分割畫面)
迷你檢閱畫面或分割畫面會將介面分為兩個不同的部分，左側顯示清單，右側顯示項目檢視。 清單通常包含專案集合，而項目檢視提供有關清單中所選項目的詳細資訊。
此配置在使用者需要快速瀏覽項目清單，並同時查看有關每個項目的詳細資訊 (例如在執行大量作業) 時特別有效。 產品目錄、文件管理系統、電子郵件或通訊用戶端以及工作管理工具 (例如 Azure Dev Ops 檢視器) 等場景就適合使用此模式。
精靈
嚮導通常以線性方式引導使用者完成一系列連續的步驟或任務，以完成複雜的過程或實現特定目標。 它通常包括進度指示器、提示和驗證檢查。 精靈有利於簡化複雜的流程、減少認知過載，並能引導使用者完成不熟悉的工作或工作流程。 它們通常用於上線流程、設定流程、多步驟表單和基於工作的互動，例如設定複雜的設定或交易。
自訂和構建標準佈局以滿足特定要求。 此過程可能包括新增或刪除元素、調整元素的大小和位置，以及套用樣式以符合品牌識別或視覺設計指南。 嘗試標準配置的不同設定和變體，以找到最有效的內容安排和整體使用者體驗。
為所有裝置設計配置
配置是定義的規則和有意的內容組織的頂峰。 將內容納入深思熟慮的結構是關鍵，但要使其在跨平台和螢幕尺寸之間具有清晰的階層，則需要縮放邏輯。 個別來說，調適性設計和回應式設計都可以解決這一挑戰。 在某些情況下，結合調適性設計和回應式設計是正確的選擇。
回應式設計僅使用一種版面設定，其中內容是流暢的並且可以適應不斷變化的格式大小。 這種設計技術使用媒體查詢來檢查指定裝置的特性並相應地呈現內容。 回應式設計使您能夠只要建置功能一次，就能使其在所有螢幕尺寸上有效運作。
調適性配置可完全根據其呈現的格式而變化。 調適性設計有多種固定的配置大小，並觸發瀏覽器根據可用空間載入指定的配置。 使用調適性設計建置的網站會使用媒體查詢來偵測斷點，類似於回應式設計。 它們還會根據裝置的功能使用其他標記。 此過程稱為「漸進式增強」。
重新置放
變更頁面元素的位置。
隨著視窗大小的增加，透過最佳化構圖來保持內容的組織性、可讀性和平衡性。 例如，移動檢視區上垂直堆疊的元素可以在更大的檢視區上水平重新定位。 此變更遵循自然的從左到右閱讀順序，在設計中創造平衡，並保持對頁面上關鍵元素的視覺焦點。
Resize
調整頁面元素的大小和邊距。
調整頁面元素大小，透過在視窗頂部顯示更多內容來最佳化豐富的使用者體驗，從而減少垂直滾動的需求。 調整頁邊距以添加空白並平衡配置，使內容能夠呼吸並增強設計的視覺吸引力。 例如，主要元件可能會自動縮放到視窗的整個寬度以顯示更多的背景影像。 影像下方的內容可能會擴展，但使用不同的邊距來增加版面配置的多樣性，並有助於定義視覺階層。
自動重排
最佳化頁面元素的流程。
通過重新排列內容來調整頁面元素以確保它們完全顯示，同時考慮到視窗大小和方向。 例如，較小視窗中的單一資料行內容可以在較大視窗上重排以顯示兩資料行文字。 此技術允許「第一畫面」顯示更多內容。
顯示/隱藏
針對視窗大小及其方向最佳化內容。
顯示或隱藏頁面元素以最佳化視窗大小及其方向的內容。 這種回應式技術可以根據觀看環境調整資訊量。 例如，出現在小螢幕上的類別可能會顯示有限的中繼資料，例如影像、標題和連結，以便顯示其他資訊以幫助使用者集中注意力。 在較大的螢幕上，類別可以顯示其他中繼資料，如角色、日期和簡短描述，同時仍適合檢視區。
重新設計架構
分叉或摺疊頁面元素和內容，以保持對重要資訊和動作的關注。
此方法類似於在設計中遵循「漸進式揭露」的做法，但適用於不同的視窗大小和方向。 例如，展開視窗可在詳細資訊旁邊顯示項目清單。 內容之間的這種視覺連結可讓使用者輕鬆選擇另一個項目。 在較小的螢幕上，焦點仍然是顯示關鍵資訊。
建立斷點矩陣
斷點矩陣用作應用程式設計在不同螢幕大小和方向上的回應或自適應行為的圖形描述。 它通常呈現一個結構化的方格或配置，詳細說明設計在各個斷點處的回應。 每個區段對應一個不同的螢幕寬度，提供對設計結構、配置和功能的深入了解。 斷點矩陣的考慮因素包含螢幕寬度、檢視區方向、設計元素、配置結構、內容呈現、瀏覽、媒體和互動式元件，以說明網站或應用程式的設計如何在不同的螢幕大小和方向上做出回應。 這種方法不僅有助於確定最終的各種螢幕設計，而且在明確追蹤和良好溝通關鍵元件屬性變更時，使實作變得更容易。
Power Platform 簡易化
模型導向應用程式表單配置是使用 Power Apps Studio 設定的。 表單設計師允許製作者將元素新增到方格結構中，這使得表單頁面具有固有的回應能力。 嵌入式自訂元件 (如自訂頁面、嵌入式畫布元件和 Power Apps Component Framework 程式碼元件) 需要將回應式行為納入其實作中。 例如，自訂頁面必須以與純畫布應用程式相同的方式實作回應式行為才能正常運作。
畫布應用程式需要為各個元件進行顯式設定才能實作回應式行為，從而可以更好地控制體驗。 螢幕大小由應用程式定義決定，可以參考該定義來確定位置、行為、可見性和其他相關屬性。