T-CIDADS 00021-2024 人工智能機(jī)器學(xué)習(xí)平臺(tái)界面設(shè)計(jì)指南

ICS35.020CCSY70CIDADSGuidelinesofartificialintelligencemachinelearningplatforminterfacedesignI前言 II 2規(guī)范性引用文件 3術(shù)語(yǔ)和定義 4設(shè)計(jì)原則 4.1一致性 24.2人性化 24.3實(shí)用性 25通用設(shè)計(jì)指南 5.1布局 25.2導(dǎo)航 25.3柵格 25.4色彩 25.5字體 2 36建模可視化界面設(shè)計(jì)指南 6.1概述 36.2模型構(gòu)建流程 36.3界面類型 36.4數(shù)據(jù)管理界面 46.5建?？梢暬缑?96.6結(jié)果可視化界面 參考文獻(xiàn) II本文件按照GB/T1.1—2020《標(biāo)準(zhǔn)化工作導(dǎo)則第1部分：標(biāo)準(zhǔn)化文件的結(jié)構(gòu)和起草規(guī)則》的規(guī)定起草。請(qǐng)注意本文件的某些內(nèi)容可能涉及專利，本文件的發(fā)布機(jī)構(gòu)不承擔(dān)識(shí)別專利的責(zé)任。本文件由中國(guó)工業(yè)設(shè)計(jì)協(xié)會(huì)設(shè)計(jì)標(biāo)準(zhǔn)分會(huì)提出并歸口。本文件起草單位：艾普工華科技（武漢）有限公司、西安迅騰科技有限責(zé)任公司、中電云計(jì)算技術(shù)有限公司、中移（蘇州）軟件技術(shù)有限公司。本文件主要起草人：徐昀、馮佳寧、郜婕、趙暉、杜俊志、王蔚、于東、路露、陳罡、浦玉。本文件為首次發(fā)布。1人工智能機(jī)器學(xué)習(xí)平臺(tái)界面設(shè)計(jì)指南本文件規(guī)定了人工智能機(jī)器學(xué)習(xí)平臺(tái)界面設(shè)計(jì)的設(shè)計(jì)原則、通用設(shè)計(jì)指南及建?？梢暬缑嬖O(shè)計(jì)指南。本文件適用于電腦端的人工智能機(jī)器學(xué)習(xí)平臺(tái)界面設(shè)計(jì)。2規(guī)范性引用文件本文件沒(méi)有規(guī)范性引用文件。3術(shù)語(yǔ)和定義下列術(shù)語(yǔ)和定義適用于本文件。3.1機(jī)器學(xué)習(xí)Machinelearning功能單元通過(guò)獲取新知識(shí)或技能，或通過(guò)整理已有的知識(shí)或技能來(lái)改進(jìn)其性能的過(guò)程。3.2機(jī)器學(xué)習(xí)平臺(tái)MachinelearningPlatform提供數(shù)據(jù)準(zhǔn)備、模型訓(xùn)練、模型評(píng)估等功能的軟件平臺(tái)。3.3監(jiān)督學(xué)習(xí)SupervisedLearning獲得的知識(shí)的正確性通過(guò)來(lái)自外部知識(shí)源的反饋加以測(cè)試的學(xué)習(xí)策略。3.4數(shù)據(jù)集Dataset用于訓(xùn)練和測(cè)試機(jī)器學(xué)習(xí)模型的數(shù)據(jù)的集合。3.5特征Feature數(shù)據(jù)集中的屬性或變量，用于描述每個(gè)樣本。3.6對(duì)數(shù)據(jù)進(jìn)行預(yù)測(cè)或決策的數(shù)學(xué)表示，它接受輸入數(shù)據(jù)并產(chǎn)生輸出或預(yù)測(cè)。3.7算子Operator預(yù)定義的數(shù)據(jù)運(yùn)算或函數(shù)，是構(gòu)建機(jī)器學(xué)習(xí)模型的基本構(gòu)建模塊。23.8模型訓(xùn)練ModelTraining使用數(shù)據(jù)集來(lái)調(diào)整機(jī)器學(xué)習(xí)模型的參數(shù)，使其能夠捕捉輸入數(shù)據(jù)和標(biāo)簽之間的關(guān)系。訓(xùn)練的目標(biāo)是最小化模型的預(yù)測(cè)誤差。4設(shè)計(jì)原則保持視覺(jué)一致性、行為一致性和感知一致性，從而降低用戶學(xué)習(xí)和使用的認(rèn)知負(fù)荷，以極低的學(xué)習(xí)與理解成本培養(yǎng)用戶認(rèn)知，在系統(tǒng)的產(chǎn)品體系中快速使用產(chǎn)品。4.2人性化用戶所接觸到的現(xiàn)有概念符合其認(rèn)知，用戶可以時(shí)刻明確當(dāng)前界面的任務(wù)。在產(chǎn)品設(shè)計(jì)中，汲取人對(duì)自然以及行為習(xí)慣的認(rèn)知，讓用戶在操作過(guò)程中具有主動(dòng)權(quán)，操作過(guò)程保持愉悅、自由、幸福的體驗(yàn)，讓人機(jī)交互行為更自然。4.3實(shí)用性使用該產(chǎn)品或者產(chǎn)品功能時(shí)可以使用戶完成產(chǎn)品使用目標(biāo)。以實(shí)際情景場(chǎng)景為立足點(diǎn)，滿足用戶核心需求，簡(jiǎn)化和優(yōu)化工作流程，上手即用。幫助用戶更簡(jiǎn)單，更智能，更快捷的完成工作目標(biāo)，提升工作效率。5通用設(shè)計(jì)指南5.1.1宜采用響應(yīng)式設(shè)計(jì)，確保界面在不同設(shè)備上均表現(xiàn)良好。5.1.2大型數(shù)據(jù)處理和復(fù)雜計(jì)算宜在后臺(tái)進(jìn)行，不影響界面響應(yīng)。5.1.3布局應(yīng)考慮未來(lái)功能擴(kuò)展的可能性，支持插件或擴(kuò)展模塊的集成。5.1.4對(duì)應(yīng)人工智能機(jī)器學(xué)習(xí)平臺(tái)的數(shù)據(jù)管理、建模可視化、結(jié)果可視化這三種界面類型，可分為三類界面布局，分別為：數(shù)據(jù)管理界面布局、建?？梢暬缑娌季?、結(jié)果可視化界面布局。5.2導(dǎo)航宜具有清晰的導(dǎo)航結(jié)構(gòu)，方便用戶快速定位功能。5.3柵格用于布局的容器組件，宜方便快速搭建頁(yè)面的基本結(jié)構(gòu)。5.4色彩5.4.1基于產(chǎn)品色彩進(jìn)一步定義符合產(chǎn)品調(diào)性以及功能訴求的顏色?？煞譃橹魃?、功能色、輔助色。5.4.2主色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺(jué)元素之一?？紤]組件庫(kù)的通用性，設(shè)置主色為組件變量，可以針對(duì)不同業(yè)務(wù)使用不同的基礎(chǔ)色板中的色彩。主色通常占據(jù)整個(gè)色彩方案的60%~70%，用戶產(chǎn)品的主要交互元素、如按鈕、導(dǎo)航欄、圖標(biāo)和關(guān)鍵信息的強(qiáng)調(diào)。5.4.3功能色用于展示界面中的錯(cuò)誤、成功、警告等各類狀態(tài)。5.4.4輔助色主要被大量的應(yīng)用在界面的文字部分，此外還用于背景、邊框、分割線等場(chǎng)景。輔助色的比例通常在10%~30%之間，輔助色可以是主色的對(duì)比色，以確保突出和易于識(shí)別。5.5字體5.5.1宜優(yōu)先使用系統(tǒng)默認(rèn)的界面字體，在不同的平臺(tái)和瀏覽器下，字體宜始終保持良好的易讀性和可讀性。5.5.2觀看電腦屏幕宜保持眼睛與屏幕的距離大于50cm，電腦屏幕比視線低于0°~30°的位置，以3保證視力的舒適度和減少眼睛疲勞。5.5.3主字體宜使用14px字體大小以保證在多數(shù)常用顯示器上的用于閱讀效率最佳。5.5.4字體宜支持多種語(yǔ)言和字符集，特別是對(duì)于國(guó)際化的應(yīng)用程序及公式函數(shù)的支持。5.5.5字體宜有合適的許可，尤其是對(duì)于商業(yè)網(wǎng)站，避免侵犯版權(quán)。宜選擇提供多種字重（如細(xì)體、常規(guī)、粗體）的字體族，不應(yīng)使用過(guò)多的字體，通常一個(gè)網(wǎng)站使用2種~3種字體。5.6圖標(biāo)圖標(biāo)為界面匯總的重要視覺(jué)識(shí)別，幫助用戶更好的理解及區(qū)分功能與模塊，在設(shè)計(jì)平臺(tái)的用戶界面時(shí)，圖標(biāo)的呈現(xiàn)宜遵守一系列的標(biāo)準(zhǔn)以確保一致性和可用性。圖標(biāo)設(shè)計(jì)宜符合以下準(zhǔn)則：a)風(fēng)格一致性：平臺(tái)界面內(nèi)所有圖標(biāo)宜遵循統(tǒng)一的設(shè)計(jì)語(yǔ)言和風(fēng)格。b)清晰可讀：圖標(biāo)在各種設(shè)備屏幕上宜能保持清晰易讀。c)尺寸規(guī)范：圖標(biāo)尺寸宜分為幾個(gè)等級(jí)，每個(gè)等級(jí)的尺寸宜與字體大小規(guī)范中的相應(yīng)尺寸相匹配。d)行業(yè)適應(yīng)性：圖標(biāo)的設(shè)計(jì)宜直觀易懂，以便行業(yè)用戶能夠迅速識(shí)別。6建模可視化界面設(shè)計(jì)指南提供一個(gè)直觀、交互式的環(huán)境，使用戶能夠輕松地創(chuàng)建、理解和操作模型。6.2模型構(gòu)建流程根據(jù)機(jī)器學(xué)習(xí)原理，構(gòu)建模型的流程為：數(shù)據(jù)采集—模型搭建—模型訓(xùn)練—模型評(píng)估。流程見圖1。圖1機(jī)器學(xué)習(xí)原理對(duì)應(yīng)模型構(gòu)建流程示意圖6.3界面類型可視化界面分為以下類型：a)數(shù)據(jù)管理：對(duì)應(yīng)數(shù)據(jù)準(zhǔn)備流程。在模型可視化界面設(shè)計(jì)中，數(shù)據(jù)管理是指對(duì)于建模和分析的數(shù)據(jù)進(jìn)行組織、處理、維護(hù)和優(yōu)化的過(guò)程。在模型的數(shù)據(jù)準(zhǔn)備階段，用于進(jìn)行模型的數(shù)據(jù)引入。b)建?？梢暬簩?duì)應(yīng)模型搭建、模型訓(xùn)練流程。通過(guò)圖形化的方式展示復(fù)雜的數(shù)據(jù)和模型，幫助用戶更好地理解數(shù)據(jù)結(jié)構(gòu)和模型邏輯。提供拖放、參數(shù)配置等直觀的交互方式，簡(jiǎn)化模型的構(gòu)建和調(diào)整過(guò)程。c)結(jié)果可視化：對(duì)應(yīng)模型評(píng)估流程。它涉及到將分析結(jié)果以直觀、易理解的方式展示給用戶，幫助用戶做出更準(zhǔn)確的業(yè)務(wù)決策。6.4數(shù)據(jù)管理界面6.4.1布局根據(jù)數(shù)據(jù)量大小以及數(shù)據(jù)的復(fù)雜性，可選擇分步引入或單頁(yè)引入。數(shù)據(jù)分步引入?yún)⒖家妶D2，單頁(yè)引入?yún)⒖家妶D3。圖2數(shù)據(jù)分步引入示意圖5圖3數(shù)據(jù)單頁(yè)引入示意圖6.4.2功能模塊6.4.2.1數(shù)據(jù)上傳/引入模塊為了更好的將不同來(lái)源的數(shù)據(jù)集成到一個(gè)統(tǒng)一的模型中，以支持全面的分析。數(shù)據(jù)上傳/引入，宜支持本地?cái)?shù)據(jù)上傳、服務(wù)器/數(shù)據(jù)庫(kù)等數(shù)據(jù)的引入。數(shù)據(jù)的上傳/引入宜符合流程，第一步上傳文件或連接服務(wù)器/數(shù)據(jù)庫(kù)，第二步選擇文件及預(yù)覽數(shù)據(jù)的條件配置。本地上傳功能模塊參考見圖4，數(shù)據(jù)庫(kù)引入功能模塊參考見圖5，服務(wù)器引入功能模塊參考見圖6。圖4本地上傳功能模塊參考示意圖圖5數(shù)據(jù)庫(kù)引入功能模塊參考示意圖圖6服務(wù)器引入功能模塊參考示意圖76.4.2.2數(shù)據(jù)瀏覽模塊支持?jǐn)?shù)據(jù)預(yù)覽和基本統(tǒng)計(jì)信息的快速查看，宜提供富媒體內(nèi)容列表，支持圖片、音頻、視頻內(nèi)容的的瀏覽查看。參考見圖7。圖7數(shù)據(jù)瀏覽模塊參考示意圖6.4.2.3數(shù)據(jù)處理模塊在建模之前宜對(duì)數(shù)據(jù)預(yù)處理和清洗，包括處理數(shù)據(jù)中的錯(cuò)誤、重復(fù)或不完整的信息、檢查數(shù)據(jù)的一致性和準(zhǔn)確性以確保數(shù)據(jù)質(zhì)量，宜合理的組織和呈現(xiàn)信息，避免信息過(guò)載。參考見圖8。圖8數(shù)據(jù)處理模塊參考示意圖96.5建?？梢暬缑?.5.1布局將復(fù)雜的數(shù)據(jù)和模型以直觀、易于理解的方式呈現(xiàn)給用戶，宜采用模塊化布局，將界面劃分為多個(gè)功能模塊，每個(gè)模塊負(fù)責(zé)特定的功能。參考見圖9。典型的布局宜包括：a)頂部導(dǎo)航區(qū)：提供清晰的導(dǎo)航結(jié)構(gòu)，方便用戶快速定位。b)工具欄：匯集常用的對(duì)模型的操作，如訓(xùn)練過(guò)程中的暫停、啟動(dòng)、保存、恢復(fù)等。c)左側(cè)邊欄：用戶文件管理、數(shù)據(jù)集列表、算法列表等。d)畫布區(qū)：模型搭建的主要區(qū)域，采用可視化的交互方式，展示模型的邏輯結(jié)構(gòu)和訓(xùn)練的過(guò)程。e)右側(cè)邊欄：信息展示區(qū)，展示調(diào)參、配置、提示等當(dāng)前操作的詳細(xì)信息。圖9建?？梢暬缑娴牡湫筒季质疽鈭D6.5.2功能模塊6.5.2.1數(shù)據(jù)/算法選擇模塊在頁(yè)面的左側(cè)邊欄區(qū)域，給模型構(gòu)建提供多元的訓(xùn)練數(shù)據(jù)和豐富的算法庫(kù)，參考見圖10。圖10左側(cè)邊欄區(qū)域示意圖6.5.2.2模型搭建模塊6.5.3模型的搭建過(guò)程，從左側(cè)邊欄選中的文件/算法/數(shù)據(jù)源，通過(guò)拖拉拽的方式放置于畫布區(qū)，用有向線定義多個(gè)算法、數(shù)據(jù)之間的關(guān)系，形成一種叫有向無(wú)環(huán)圖（DAG）的模型數(shù)據(jù)結(jié)構(gòu)。DAG模型結(jié)6.5.4DAG模型的基本構(gòu)成元素：a)節(jié)點(diǎn)：代表一個(gè)任務(wù)、事件或數(shù)據(jù)。在機(jī)器學(xué)習(xí)建模場(chǎng)景中，DAG節(jié)點(diǎn)的類型一般包括，算子節(jié)點(diǎn)、其他元素節(jié)點(diǎn)。b)邊：表示節(jié)點(diǎn)之間的關(guān)系。圖11DAG模型結(jié)構(gòu)示意圖6.5.4.1.1算子操作狀態(tài)算子在整個(gè)建模搭建場(chǎng)景中，有多種操作狀態(tài)，如默認(rèn)狀態(tài)、hover狀態(tài)、選中時(shí)有無(wú)結(jié)果輸出的狀態(tài)等。參考見圖12。圖12算子操作狀態(tài)示意圖6.5.4.1.2算子運(yùn)行狀態(tài)在模型搭建及運(yùn)行過(guò)程中，算子有多種運(yùn)行狀態(tài)。參考見圖13。圖13算子運(yùn)行狀態(tài)示意圖6.5.4.1.3其他元素節(jié)點(diǎn)包含數(shù)據(jù)表、樣本、模型等，參考見圖14。圖14其他元素節(jié)點(diǎn)示意圖6.5.4.1.4邊邊包含連接點(diǎn)以及連接線，邊的交互參考見圖15。圖15邊的交互參考示意圖6.5.4.2配置參數(shù)及調(diào)優(yōu)模塊6.5.4.2.1右側(cè)邊欄右側(cè)邊欄主要承載信息的展示和配置，在畫布中選擇某一節(jié)點(diǎn)，右側(cè)邊欄將展示對(duì)應(yīng)的節(jié)點(diǎn)信息或配置項(xiàng)。參考見圖16。圖16右側(cè)邊欄區(qū)域示意圖6.5.4.2.2底部浮層6.5.5當(dāng)模型在運(yùn)行狀態(tài)下，在畫布中選中某一算子節(jié)點(diǎn)，右鍵菜單查看算子的運(yùn)行狀態(tài)將觸發(fā)底部6.5.6底部浮層多用于模型的訓(xùn)練或運(yùn)行過(guò)程中復(fù)雜信息的展示，比如算子的運(yùn)行詳情、系統(tǒng)資源情況、任務(wù)排隊(duì)情況、任務(wù)的統(tǒng)計(jì)信息、實(shí)時(shí)日志等。參考見圖18。圖17底部浮層在界面中的區(qū)域展示示意圖圖18底部浮層區(qū)域示意圖6.6結(jié)果可視化界面6.6.1布局將全局視角中最關(guān)鍵的指標(biāo)，以平鋪的方式展現(xiàn)在整個(gè)界面中，通常是“總-分”的機(jī)構(gòu)，多維度的展示數(shù)據(jù)的全貌，建議采用卡片式設(shè)計(jì)，根據(jù)不同的指標(biāo)內(nèi)容，靈活布局。參考見圖19。圖19模型報(bào)告示意圖6.6.2可視化展示模塊6.6.2.1折線圖用于展示數(shù)據(jù)隨著時(shí)間或有序類別的趨勢(shì)變化，能夠反映事物的發(fā)展趨勢(shì)。適合展示模型的訓(xùn)練詳情、準(zhǔn)確率曲線、數(shù)據(jù)評(píng)估結(jié)果指標(biāo)等場(chǎng)景。參考見圖20。圖20折線圖6.6.2.2面積圖類似于折線圖，但區(qū)域被填充顏色，用于展示量隨著時(shí)間變化的趨勢(shì)。適合展示受試者工作特征曲線（ROC）等指標(biāo)。參考見圖21。圖21面積圖示意圖6.6.2.3餅狀圖展示各部分占整體的比例關(guān)系。適合展示數(shù)據(jù)組成結(jié)構(gòu)。參考見圖22。圖22餅狀圖示意圖6.6.2.4柱狀圖比較不同類別的數(shù)據(jù)量。適合展示特征重要性系數(shù)、模型各指標(biāo)的對(duì)比等。參考見圖23。圖23柱狀圖示意圖6.6.2.5樹形圖展示層次數(shù)據(jù)的結(jié)構(gòu)，適合展示具有層級(jí)關(guān)系的數(shù)據(jù)。適合展示模型結(jié)構(gòu)。參考見圖24。圖24樹形圖示意圖6.6.2.6箱線圖展示數(shù)據(jù)的分布情況，包括中位數(shù)、四分衛(wèi)數(shù)據(jù)等，適合比較數(shù)據(jù)的幾種趨勢(shì)和離散程度。適合展示多組數(shù)據(jù)特征分布比較。參考見圖25。圖25箱線圖示意圖6.6.2.7堆疊柱狀圖展示各部分歲時(shí)間變化的累積效果或不同類別的組合數(shù)據(jù)。適合展示群體穩(wěn)定性指標(biāo)（PSI）分箱詳情和類別分布等。參考見圖26。圖26堆疊柱狀圖示意圖6.6