定義使用者介面需求

已完成

UI 需求與報表的取用方式和報表的外觀和行為有關。 要考慮的層面包括板型規格、輸入法、樣式和主題,以及協助工具。

板型規格

在報表設計的內容中,板型規格會描述用來開啟報表的硬體大小,以及頁面方向 (直向或橫向)。

影像為顯示於大型螢幕上的報表範例,與重構為在行動電話中顯示的報表相比較。

一般而言,現今的電腦會附帶大型螢幕,有時則有多個螢幕。 大型螢幕的大小很適合用於在網頁瀏覽器中檢視報表,特別是以橫向檢視時,能包含數個視覺效果或複雜視覺效果。

當報表取用者離開其座位時,通常會使用尺寸較小的行動裝置。 手機和平板電腦預設會以直向顯示內容。 相較於針對較大尺寸規格設計的報表,較小尺寸的報表需有不同的設計方法。 因此,當您設計較小尺寸的報表時,請盡量減少使用復雜的視覺效果。 此外,應使用較大的視覺效果,以協助簡化檢視和互動。

行動裝置包含擴增或混合實境技術,可讓前端掛接的裝置顯示疊加在周圍實境上的報表。

此影像為倉儲工作者正戴著擴增實境裝置檢視手邊庫存報表的範例。

有時,適用於大型板型規格的報表設計也可以進行重構,以建立行動檢視。 行動檢視可能包含完整大小報表的視覺效果子集。

輸入法

定義 UI 需求時,也請考慮裝置或應用程式支援的輸入法。

電腦利用鍵盤和指標裝置 (滑鼠) 進行操作,而行動裝置依賴常見的手勢,例如點選、按兩下、拖曳、捏合、展開或按下。 使用行動裝置的報表取用者也可以使用螢幕鍵盤、語音控制或條碼和 QR 代碼讀取器。 擴增或混合實境裝置依賴手部手勢或身體動作。

了解報表取用者可能與報表互動的方式,會影響您的報表設計。 請考慮在頁面上一起顯示的視覺效果數目、視覺效果的複雜度、視覺效果之間的間距,以及使用互動式設計項目,例如工具提示、交叉分析篩選器、按鈕或篩選。

當報表內嵌在應用程式中時,可以從應用程式以程式設計方式接收輸入。 例如,當應用程式使用者開啟頁面以檢視特定客戶的歷程記錄時,篩選會自動傳遞至內嵌報表來篩選及顯示該客戶的銷售歷程記錄。

樣式和主題

UI 需求也應考慮樣式和主題。 盡量以一致且獨特的外觀、主題來設計報表。

報表主題應表達您的組織商標,或旨在為您的組織商標補充。 主題至少應包含下列元素:

  • 商標或標誌符號。

  • 符合或補充組織商標的色彩調色盤。 色彩也應該有足夠的差異,如此一來,當套用至視覺效果時,會在並排顯示時提供適當的對比。

  • 文字設定,包括字型選取範圍、大小和色彩。

若要有效且有效率地管理樣式和主題變更,請使用儲存在中央存放庫中的影像和主題來設計報表。 此方法可改善變更管理:套用至存放庫的變更可以自動串聯至報表。

協助工具

UI 需求也是協助工具的一項重要因素。 報表需要傳遞訊息給最廣泛的受眾。 因此,您應考慮如何讓無視能、低視能或其他肢體障礙的報表取用者能完整體驗報表。

雖然您目前可能沒注意到有協助工具問題的報表使用者,但最好能從頭開始設計協助工具。 協助工具需求會影響報表設計,例如板型規格、輸入方法、樣式和主題等方面。

若要支援低視能、無視能的人員,請考慮使用:

  • 清楚和大型字型,

  • 間距良好且有大型的視覺效果,

  • 充分對比的色彩,

  • 以及鍵盤和螢幕助讀程式可理解的直覺式報表瀏覽方式。

報表取用者可能會因為某些肢體障礙限制而無法以您希望的方式與報表完全互動。 可能的話,請確保您能為取用者提供替代方案,以達成互動式設計成果。 例如,將替代文字新增至螢幕助讀程式支援的視覺效果,以及設定鍵盤瀏覽的定位順序。