1前言 引言 2.規范性引用文件 3.術語和定義 5.1數據可視化場景 6.設計基本元素 7.設計規范 7.1.基礎組件 7.2高級組件 8.UI頁面場景框架 8.4詳情頁 8.5表單填寫 8.6文檔閱讀 8.7異常狀態 2本文件按照GB/T1.1－2020《標準化工作導則第1部分：標準化文件的結構和起草規則》的規定起草。請注意本文件的某些內容可能涉及專利。本文件的發布機構不承擔識別專利的責任。本文件為首次發布。3隨著全球云計算及大數據的發展，SaaS類行業及越來越廣泛，產品越來越細分，包括企業業務、企業輔助、開發與運維等類型。近年來，隨著數字化轉型的深化，許多傳統行業，如零售、政府、金融、醫療、工廠等都陸續上云。云計算Saas產品界面設計規范是一套面向SaaS領域的企業級設計系統。在企業級軟件服務逐漸走向云端化的趨勢下，為行業生態的SaaS系統上云提供標準化的設計規范和指導、典型行業場景。因此，為了解決上述云計算SaaS類生態廠商面臨的問題，急需制定云計算行業SaaS通用場景模版及產品界面設計規范標準，來指導各云計算廠商的設計工作，填補SaaS類產品界面相關標準的空白，并且有利于推動中國SaaS行業上云更快更好的發展。4本標準規定了云計算領域SaaS產品的行業分類、場景分類、界面設計的基本元素和規范。典型行業SaaS劃分：政府、零售、金融、數據智能等；SaaS產品分類：企業服務、企業輔助、開發與運維；SaaS產品設計場景劃分：數據可視化場景、Dashboard圖表看板、信息類場景、流程類場景、低代碼編輯器場景等；SaaS產品界面設計基本元素：字體、顏色、柵格、布局、圖標、插畫、動態等。設計規范包括基礎組件、UI框架、數據可視化，此次一共收錄了包括按鈕、表單、表格等45個基礎組件，包括表格表單、流程詳情等界面范式。2.規范性引用文件下列文件對于本文件的應用是必不可少的。凡是注日期的引用文件，僅注日期的版本適用于本文件。凡是不注日期的引用文件，其最新版本（包括所有的修改單）適用于本文件。GB/T18976-2003《以人為中心的交互系統設計過程》GB/T18978.151-2014《人-系統交互工效學第151部分：互聯網用戶界面指南》GB/T18978.143-2018《人-系統交互工效學第143部分：表單》3.術語和定義1.Sass(Softwareasaservice)云技術提供商開發和維護云技術應用軟件，提供自動軟件更新，并通過互聯網以即用即付費的方式提供給客戶的一組計算機程序、規程以及可能的相關文檔和數據。2.用戶(user)與系統交互的個人。3.使用體驗(userexperience)用戶與系統交互過程中形成的全部心理感受。通常分為外表層、框架層、結構層、范圍層和戰略5層4.字體(font)也稱字型，一種字形集合，配以一種索引方案以及對該集合各種特性（例如高度、粗細和斜度）的一種描述。[GB/T5271.13—2008，定義13.03.18]5.字號(font-size)指字體的大小或高度，以像素(px)為單位。6.字重(font-weight)指字體的粗細程度。7.布局柵格(layoutgrid)一種使用固定格子設計布局的平面設計方法與風格。8.象形圖（pictogram）也稱為pictogramme，通過其與物理對象的圖畫相似來表達其意義的表意文字。9.導航(navigation)在網絡頁面之間或網絡頁面的內部，或者在頁面中的某個部分內部的移動，用戶借此操作來找到某個特定的功能或某個信息。[GB/T18978.151—2014，定義3.22]10.面包屑(Breadcrumb)面包屑是一種輔助導航模式，可幫助用戶理解當前頁面在系統結構中的位置并能向父級頁面或者上一步驟返回。11.按鈕(button)頁面內主要的行動點，單擊按鈕可進行操作。12.步驟條(step)用于告知用戶當前操作流程的進程。613.翻頁器(pagination)用于告知用戶當前場景所處的頁面位置，以及共有多少頁面，并提供跳轉至上一頁、下一頁的功14.數據可視化借助于圖形化手段來展現數據，以便對數據進行更直觀和深入的觀察與分析。可直觀展示統計信息屬性（時間性、數量性等對知識挖掘和信息直觀生動感受起關鍵作用的圖形結構，是一種很好的將對象屬性數據直觀、形象地可視化手段。經常以所用的圖像命名，例如柱狀圖、折線圖、餅狀圖、圓環圖等。用于承載較復雜的表單，或者更多信息內容的一類組件。17.卡片(card)常用于展示一組相關信息的一類組件。18.折疊面板(collapse)用于收起和展開需要顯示的信息內容的一類組件。19.表單(form)組件的結構化顯示，用戶可以進行閱讀、填寫、選擇輸入或修改。注：改寫GB/T18978.143—2018,定義3.9。20.表格(table)通過行和列來組織和展示信息的一類組件。21.選項卡(tab)用于切換展示不同類型的內容的一類組件。74.SaaS產品分類未來的SaaS，將不再像以前那樣以一個個獨立系統的形式交付，而是基于云計算能力，形成一個開發-業務-運維-運營打通的完整生態。們將這種類繁多的SaaS產品分成三大類。4.1行業SaaS行業SaaS指面向某個垂直行業的業務系統，根據企業的行業，領域，運行業務不同，會有很大差異化，主要包含零售，金融，數字政務，設計，算法，物流，等等。這類系統功能特異性強，帶有強烈的行業屬性，一般在定制交付場景中，每個都有自己獨特的業務邏輯。是企業自身業務運作的核心系統。設計規范的存在可以保證交付過程中快速搭建出有品質的體驗流程。4.2企業SaaS企業SaaS指企業在運營過程中需要的一些通用的輔助系統，例如客戶管理（CRM）人員管理（HR）審批，協同，產品管理，等等。企業服務往往是在各行業間通用的，只需稍作定制即可交付，甚至可以對外提供定制能力，讓用戶基于基礎能力自行組裝。此時設計規范就可以保證產品本身的一致性和體驗流暢。4.2開發與運維工具開發與運維系統幫助企業降低開發門檻，保證運維穩定。基于技術中臺的能力，為企業客戶提供簡單易上手的開發工具和運維平臺。這部分往往面向企業中的IT,運維，或中小型產品的獨立開發者，整合云計算的資源與平臺，幫助企業快速開發，搭建產品。5.SaaS產品設計場景分類5.1數據可視化場景數據可視化通過圖表、圖形和儀表板等形式展示數據，幫助用戶快速理解復雜數據，發現數據間的關聯性和趨勢，從而作出更明智的決策。使用戶能夠識別數據中的關鍵信息和潛在問題。5.1.1圖表看板(DashBoard)看板通過挑選出核心戰略指標，強調關鍵KPI，并提供數據摘要和關鍵要點。5.1.2信息類場景SaaS產品中的信息類場景主要指的是產品中用于展示、管理和交互信息的功能區域。這些場景的目的是為用戶提供清晰、準確和及時的數據和信息，幫助用戶理解業務狀態、監控關鍵指標、做出決策等。常見形式為表格，表單。8在用戶執行任務時，通過步驟指示器，進度條等方式提供流程引導，幫助用戶更好地理解任務的步驟，減少操作錯誤，并提高任務完成的效率。5.1.4低代碼編輯器場景低代碼編輯器是一種軟件開發工具，它允許用戶通過最少的編程或無需編寫大量代碼即可快速構建應用程序。這種編輯器依賴于圖形化界面、拖拽組件、預置模板和配置選項，使得業務人員和非專業開發者也能參與到應用創建的過程中。96.設計基本元素字體板式可以幫助創建清晰的層次結構、組織信息，高效清晰地呈現設計和內容，并引導用戶使用產品。不同設備下的默認字體font-family:-apple-system,BlinkMacSystemFont,"SegoeUI","PingFangSC","HiraginoSansGB","MicrosoftYaHei”,Roboto,”HelveticaNeue",Helvetica,Arial,sans-serif-serif。Web端管控臺類中英文字體。圖2設計規范使用的中英字體字重有Light、Regular、Medium3種字體重量，多用后2者。圖3字重規范此示例將中文字體PingFangSC，英文字體Roboto用于所有標題，正文，備注和說明文字中，從而產生連貫的排版體驗。通過字體粗細（Light，Regular，Medium大小，字母間距和大小寫的差異傳達層次結構。圖4中文大小比例圖5英文大小比例6.2Color顏色規則中的色彩體系為企業服務行業和其他行各業各數字產品和界面帶來了統一且可識別的色彩。同時為暗黑和淺色主題的背景下如何使用組件庫的提供明確定義的規則。從藍色向紫色和綠色延展，作為整體規范的5個主色。整體傳達穩重、可靠、專業。允許根據情況少量和有目的地使用其他顏色。圖6主體色規范的色系基于HSB（Hue色相；Saturation飽和度；Bright明度）+AccessilibityScale調整。1.每一個顏色都分為從淺色到深色的10個色板，從100-10，核心色設定在60；H值保持不變，往暗色2.核心色值計算方式按照統一的AccessibilityScale計算，確保可讀性與易識別性：個別顏色acs可有最大不超過0.5的誤差（如綠色系、紅橙色系）3.（備注：主品牌色選擇，acs值可酌情考慮范圍在：4.5-6，黃色與橙色因為明度太高，不在此范圍色彩色值計算方式按照統一的AccessibilityScale計算：1.從Black到主題色100-60，適用于白色文字，從主題色50-10-White，適AA級：要求普通文本對比度為4.5，標題及大文字對比度為3。AAA級：要求普通文本對比度為7.5，標題及大文字對比度為4.5。BreathingColor應用在卡片中，大背景，宣傳氛圍等場景中。其包含靈活/流動/交流/動態/動力/流動性強等特點，帶點科技/智慧感，鼓勵正念（mindfulness）和交流。BreathingColorTool：/#/resources/design-resources圖8呼吸色效果預覽6.3Icon圖標Icon設計是界面設計中，雖小卻不可缺少的部分。通常我們理解圖標設計的含義，是將某個概念轉換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。1.簡潔、清晰、適應性強；2.圖標在16x16px和32x32px的情況下時，元素的寬高粗細盡可能為整數；3.圖標細節原則為外圓內尖，確保圖標視覺不過分尖銳，并與頁面規范的圓角元素保持視覺統一。圖標設計得簡單、現代、友好。每個圖標都簡化為最小形式，表達了基本特征。提供outlined描邊與filled填充2種類型的icon。6.4Pictogram象形圖Pictogram象形圖用于表示對象、想法或敘述的視覺符號，具備高識別性和傳播性，適用于偏展示型的卡片、頁面模塊中。適合更直觀、創意地體現產品特點、優勢，表達不同卡片、模塊的行動狀態。2.圖標細節原則為外圓內尖，確保圖標視覺不過分尖銳，并與頁面規范的圓角元素保持視覺統一。圖11象形圖規范示例插圖是設計系統中關于品牌風格傳達的關鍵的要素之一。它能反映與傳達不同內容的視覺與情緒狀態，有助于以簡單的方式傳達復雜的想法，指導用戶理解困難的概念，產品或服務。頁面插圖等；圖12日常物品象形圖圖13狀態象形圖圖14人物象形圖6.6Layoutgrid布局柵格柵格是一個能夠指導產品中一切視覺元素的基礎框架，是產品設計中的視覺基石。使用柵格系統，賦予視覺元素以規律的秩序感，從而完成更高效的視覺元素搭建，指導更合理的設計頁面布局，挖掘更豐富的視覺創意。柵格基礎數字原則為2的X平方（X大于等于2即最小數字單位為4。基礎序列為2的平方數（22、23、2?、2?、2?…)。圖15基礎序列示意圖擴充序列基于基礎序列，在8-48之間，每一級通過額外增加4來進行有序擴充，以更好應對更多細分場景。圖16補充序列示意圖1.最小平面幾何單位為一個邊長為8px的正方單元。(注意：4px太小，在界面設計中，不好快速計算)2.基礎單元的不同組合方式形成頁面中不同元素之間的排布邏輯-行、列、卡片、表格、填充區域、白邊區域等。圖17基礎單元計算示意在頁面中根據需要可以使用布局24列（標準網頁版）、16列（桌面端）、8列（Pad端）、4列（手機端），保持列間距為16px。圖1824列基礎布局6.7Elevation&Shadow層級與陰影層級與陰影能反映物體之間的相對距離以及內容的層級關系，指導更清晰的設計和更完美的視覺體驗。圖19不同卡片間圓角及層級6.8Motion動態動態是物體在時間上的變化。動態可以發生在物體的多種維度上，例如空間維度、色彩維度等，并最終在時間維度上發生變化。（備注：動態特指設計元素的狀態，在時間維度上的變化，連接“元素、用戶、品牌”，是加入動態的前提條件。如果不是出于連接“元素、用戶、品牌”的目的，則動態可能非必須，應考慮靜態的可連接元素動態可以讓正在發生狀態變化的設計元素連貫起來，使用戶能夠對產生狀態變化的設計元素得到連貫的認知。人類的常識里，一個物體不會憑空消失然后在另外一個地方突然出現，否則就會使人感到困惑。通過動態能夠讓設計元素的狀態變化更加自然。圖20連接元素連接用戶實時渲染的動態，可以使用戶的真實時空和場景里的虛擬時空連接起來。用戶能夠參與并影響設計元素，從而連接成為一個時空，增加虛擬場景的真實體感，否則設計元素和用戶的時空就是平行的，設計元素所發生的狀態變化與用戶無關，用戶只能觀察而不能參與，從而導致虛假感和疏離感。圖21連接用戶連接品牌整體基調是活力，活力體現在：1.時機：動態在用戶真正進入之前就開始發生，而不必等到更明確的指令產生。2.效果：色彩的動態呼吸、設計元素的實時渲染或追蹤。3.差異：品牌所處行業也會在整體基調上體現相應的差異性，使品牌的行業屬性更清晰，帶給用戶更高質量的體驗，如：安全類場景傳達安全穩定可靠、政府類傳達嚴謹、零售類場景傳達活躍。原則一：自然動態需要有緩動，避免生硬不自然。緩動是規律變化的數值變量，可賦予元素的各項數值型屬性，例如坐標、尺寸、透明度、色值、加速度等。減速緩動多用于元素入場，例如將緩動數值賦予元素的坐標，可使元素的坐標變化減速降低直至停止。圖23減速緩動示意加速緩動用于元素退出，例如將緩動數值賦予尺寸，可使元素的尺寸加速縮小直至歸零。圖24加速緩動示意加減速緩動例如將緩動數值賦予位明度和置。圖25加減速緩動示意原則二：優雅在保持專注和令人愉悅之間尋求平衡。時長太久的動態會消耗用戶的專注力，太短的動態使連接元素的作用大打折扣。一個元素的整套動態從開始到完全結束需控制在0.4s~1s，原子級單個動態的時長控制在0.2s~0.4s。圖26控制動效時長路徑應避免長距離直線運動路徑，可采取帶弧度的圓滑曲線作為動態的運動路徑。應避免大量元素同時運動，形成大量雜亂的運動路徑，可將類似動態的元素歸類，通過不多于兩類的動態方式完成。圖27簡化路徑過渡淡入淡出讓動態優雅。圖28過度效果原則三：優雅高效緩動、時長、路徑、過渡、運行效率、平衡性，要符合簡單實用高效的原則。7.設計規范7.1.基礎組件按鈕是可以點擊觸發相應動作的組件，按鈕的文字內容應清晰地表達觸發的操作意圖。類型1.主按鈕（重點突出有關頁面上的主要號召性用語。每個屏幕上的主按鈕應該只出現一次（不包括應用程序標題或在對話框中）。2.二級按鈕（中等強調對于每個頁面上的輔助操作；當有多個號召性用語時，二級按鈕可單獨使用或與主按鈕、文本按鈕搭配使用。3.三級按鈕（中等強調不太突出的動作；當有多個號召性用語時，三級按鈕可單獨使用或與主按鈕+二級按鈕同時使用。也可以2個三級按鈕并列加一個主要按鈕使用。4.文本按鈕（低強調對于最不明顯的動作，通常與二級按鈕結合使用。圖29不同層級的按鈕樣式何時使用用于頁面中的行動點，即用戶觸發動作的起點。交互原則1.每個頁面建議有且僅有一個主要按鈕，其他輔助按鈕可使用多個。2.避免將按鈕用于導航功能，如果需要將用戶引導到下一頁面，建議使用文字鏈接。3.按鈕文字內容清晰表達觸發的操作，建議使用“動詞+名詞”的形式，如“購買虛擬機”“開通服務”“新建實例”等。通用按鈕的文字內容可使用簡單詞匯，如“確定”“取消”“刪除”“關閉”等。特殊場景的按鈕文字和通用按鈕文字表意相近時，需要避免歧義，如提示對話框“是否確認取消該訂單？”按鈕若為“是”（操作按鈕表示確認取消）和“取消”（通用按鈕表示關閉對話框則引起歧義；建議使用更精確的話術，如“取消訂單”和“取消”。組合一個應用一次可以在布局中顯示多個按鈕，因此高強調按鈕可以與執行次要功能的中強調按鈕和低強調按鈕配合使用。使用多個按鈕時，請確保一個按鈕的可用狀態與另一按鈕的禁用狀態不同。圖30按鈕組合示意圖31不同狀態下的交互動效圖32主要按鈕的尺寸變化7.1.2Modal彈窗模態對話框，常用于承載操作內容或者信息內容，需要用戶手動關閉或執行對應的交互操作后才能關閉。類型2.全局彈窗：當彈窗尺寸大于800px時，按鈕尺寸332px，靠右對齊3.狀態彈窗：當彈窗尺寸小于480時，使用文字按鈕，靠右對齊圖33不同彈窗大小規范圖34彈窗邊距尺寸標注何時使用1.需要用戶處理事務，又不希望跳轉頁面以致打斷工作流程時，可以使用Modal在當前頁面正中打開一個浮層，承載相應的操作；2.另外當需要一個簡潔的確認框詢問用戶時，可以使用最小尺寸彈窗XS=360。使用建議彈窗通常以模態組件出現，會中斷用戶操作流，用于在不離開主路徑的情況下，提供用戶快速執行簡單的操作、確認用戶信息或反饋提示的輔助窗口。7.1.3Loading加載加載動效用于表示頁面某一區域正在請求數據或加載效果，需要用戶等待一段時間。圖35圓形加載圖36條形加載何時使用1.用于頁面和區塊的加載中狀態。2.針對頁面的某個局部處于等待異步數據或正在渲染過程時，合適的加載動效會有效緩解用戶的焦慮。交互原則加載動效分為多種類型和尺寸，可以根據自己的使用場景選擇需要的尺寸和效果。鏈接可以幫助用戶點擊文字后跳轉到對應內容。樣式指導圖37樣式及尺寸指導何時使用1.鏈接組件用于在文案或者表格內容中嵌入超鏈接。2.承擔相對弱化的按鈕作用，例如文檔，聯系我們等。交互原則1.默認鏈接的文字為藍色，hover時有下劃線出現，示意該文字可點擊鏈接。2.鏈接相比按鈕更為弱化，建議使用在頁面非主要內容的跳轉上。7.1.5Card卡片卡片是一種常用的信息容器，用以承載一組相關聯的對象信息。樣式指導根據卡片內部信息的不同，卡片可以有多種組合樣式。包括純文字樣式，有行動點的樣式，以及有圖形和視頻等富媒體信息的樣式。圖38不同內部信息的卡片展示示例圖39卡片尺寸規范何時使用當一組信息需要聚合展示展示時，可以使用卡片組件，將相關信息整合在卡片中，形成獨立的信息模塊。交互原則1.卡片尺寸根據頁面內的信息量來確定，可以是一個小模塊的信息展示，也可以用于樓層的分隔。2.卡片與卡片之間的間隔，建議遵循頁面柵格進行布局。3.卡片內如有行動點，建議將主要行動點放在下方，以單獨樓層展示。次要的輔助行動點，可以放在右上角，以鏈接或圖標形式出現。4.對于內部信息較長的卡片，可以根據情況在卡片內部設置滾動條。此時行動點應固定底部展示。滾動條的情況適用于Web端設計，移動端不建議使用。7.1.6Menu導航菜單Menu導航菜單承載網站信息結構，為用戶提供功能導航的組件。Menu承載了一個網站功能與信息的結構層級。用戶依賴導航在不同功能與頁面間進行跳轉。規范提供兩種不同類型的頁面導航結構。樣式指導類型一：頂部導航為一級側邊導航為二級圖40頂部導航為一級側邊導航為二級類型二：側邊導航為一級圖41側邊導航為一級7.1.7Breadcrumb面包屑面包屑是一種輔助導航模式，可幫助用戶理解當前頁面在系統結構中的位置并能向父級頁面或者上一步驟返回。何時使用1.用于超過兩層信息架構的產品中。2.用于需要告知用戶當前頁面在信息架構中位置時。3.用于需要向父層級導航的場景。4.避免用于單一導航結構的產品中，面包屑是輔助導航，不能承載主要導航組件的功能。交互原則1.使用位置面包屑還是路徑面包屑取決于業務場景，但建議在同一產品和系統中，面包屑類型保持一致。2.面包屑出現在頁面的左上角，居標題欄之下，頁面標題之上。3.如果面包屑過長，則保留第一個和倒數兩個面包屑，中間面包屑用下拉菜單形式隱藏。面包屑不要出現換行的情況。4.面包屑最后一層為當前頁面，且不可點擊。樣式參考樣式指導一：位置面包屑位置面包屑根據信息架構父子結構展示面包屑結構，可清晰展示當前頁面在系統中的位置。/當前頁標題圖42位置面包屑樣式指導二：路徑面包屑路徑面包屑根據頁面下鉆路徑展示面包屑結構，可清晰展示頁面來源。路徑面包屑通常是動態生成圖43路徑面包屑樣式指導三：其他形態圖44其他形態面包屑分頁器用于將頁面內容和數據進行分頁和協助用戶快速導航到目標頁面的組件。分頁器一方面有呈現功能，呈現信息體量方便用戶查看，另一方面有導航功能，幫助用戶快速定位到要找的信息。何時使用用于頁面信息模塊數較多的場景，為了方便瀏覽和加載而進行分頁，具體信息模塊數超過多少分頁根據場景制定。交互原則1.默認一頁展示數量根據場景制定，是否記憶用戶修改也要根據場景制定。2.分頁器的信息應包括：當前位置、頁面總數、每頁展示信息數、上一頁、下一頁、輸入頁面等。樣式指導樣式指導一：基本分頁分頁數較少時使用基礎樣式，提供全量頁面展示和上一頁下一頁按鈕。圖45基本分頁樣式指導二：更多分頁分頁數較多時使用多頁面樣式，提供當前位置、頁面總數、每頁展示信息數、上一頁、下一頁、輸入頁面。圖46更多分頁樣式指導三：跳轉分頁快速跳轉到某一頁。圖47跳轉分頁樣式指導四：Mini分頁迷你翻頁，用于小空間。7.1.9Step步驟進度條用于協助用戶完成分多步驟的任務，可以展示總步驟數和當前所處步驟，引導用戶完成全任務流程。進度條通過將一個大型任務分解成多個子任務，從而提升用戶完成度。何時使用用于完成流程性、操作量比較多的、可以拆分成子流程的任務。交互原則1.進度條應符合用戶流程心智，展示順序為從左到右和從上到下。2.建議允許用戶返回上一步進行修改。3.進度條信息應盡量簡潔清晰。4.清晰區分已完成、正在進行、未完成的任務，且視覺應有漸進性。5.注意數據提交和保存邏輯，防止跳轉步驟或者誤操作導致的已輸入數據丟失。樣式指導樣式指導一：Flow流程條引導用戶的分步驟操作，實時顯示用戶當前所在的操作界面和下一步預演。圖49流程條樣式參考樣式指導二：Timeline時間線垂直展示的時間流信息。09:06圖50垂直時間線樣式7.2高級組件主閱讀型：表格以閱讀條目內容為主，含少量可編輯項圖51單元格編輯型圖52組件喚起編輯型圖53框外編輯型主編輯型：表格以編輯項為主，含少量純閱讀項。組件編輯型圖54組件編輯型圖55同級條目編輯型圖56多級下鉆編輯型配置型：卡片內存在核心數據信息，點擊跳轉對信息進行編輯或配置操作圖57單數據卡片圖58多數據卡片圖59裝飾型卡片功能型：卡片為某個功能/模塊入口，點擊跳轉進入具體模塊/配置項圖60基礎展示型圖61簡易左右型圖62基礎居中型圖63操作選擇型列表型：卡片為某個功能/模塊入口，卡片間的關系為「同一分類下列表項的并列關系」，點擊跳轉進入該列表項圖64簡易上下型圖65標簽上下型圖66基礎左右型圖67素材左右型內容型：卡片為某項目/文件入口，卡片可點擊進入詳情，但也可對卡片本身進行操作編輯圖68文本展示型圖69素材展示型圖70內容預覽型定義低代碼編輯器主要應用于簡單Web頁面開發場景，滿足快速構建和定制網頁。框架保護一系列組件、模板和可視化工具，通過最小的編碼或無需編碼的方式，實現快速布局和功能實現。1.可視化編輯器畫布：拖拽式界面，讓用戶可以直觀地設計頁面布局。實時預覽功能，展示用戶設計的網頁在不同設備上的效果。提供常用UI組件（如按鈕、表單、導航欄等并支持自定義樣式。3.詳細配置欄：對單個組件的基本元素進行編輯修改。圖71編輯器組件構成信息層級系統層（標題欄、菜單欄生產層（工具欄、代碼編輯區、模塊選擇、結構導航狀態層（狀態欄）。三個信息層按照上下結構布局。圖72編輯器信息層級功能模塊布局生產層的左中右布局是符合電腦端用戶操作心智的，左側選擇導航欄目或者添加功能模塊，右側是對該欄目或模塊的參數調整，編輯區是最終呈現的效果。基礎布局樣式：圖73基礎布局樣式：吸附面板布局樣式-面板吸附編輯區邊緣：圖74吸附面板布局樣式懸浮面板布局樣式-面板可懸浮于編輯區根據用戶需要拖拽：適用于同時調用面板較多、面板之間數據需要聯動的場景。圖75懸浮面板布局樣式自定義關閉面板布局樣式-面板可根據用戶需要控制顯隱：圖76自定義關閉面板布局樣式8.UI頁面場景框架8.1歡迎頁歡迎頁是打開應用后尚未進入操作編輯頁面的入口頁面，初次進入需要引導幫助用戶快速學習，也用于承載產品操作的前置條件信息，包括登錄授權信息如開通、授權、認證等。產品文檔和布道信息等模塊對留存用戶有很大作用，空白占位模塊可提升用戶愉悅性，將流量路由到其他模塊。類型頁面模式一：運營+引導模式增加功能與產品曝光，使用占位圖來提升用戶愉悅度。頁面模式二：單一入口模式簡潔入口，聚焦操作，適用于強操作和管理類產品，引導用戶快速開始唯一行動。頁面模式三：引導模式用戶強操作流產品，協助用戶完成接入。圖77運營+引導模式圖78單一入口模式圖79引導模式設計目標用戶層面：引導新用戶和未登錄用戶了解和使用產品，給登錄用戶展示信息聚合，幫助用戶快捷找到要處理的文件或任務，幫助用戶學習應用和了解最新動態。產品層面：所有進入應用的用戶均需要通過歡迎頁，天然的流量入口可以作為運營坑位。設計原則1.易尋找：信息以易于瀏覽的方式布局，提供合適的搜尋組件幫助用戶快速定位目標和查找信息。2.用戶數據驅動：根據用戶行為數據展示信息，如“最近使用”模塊按照用戶上次打開時間由近至遠排序，方便登錄用戶快速定位目標。3.差異化設計：不同角色用戶登錄時看到的界面可做差異化。未登錄用戶進入是看到開通引導，已登錄用戶要帶入行為數據導致的功能或布局區分。如默認焦點、最近使用等。4.內容比例：運營功能建議在歡迎頁占據篇幅控制在30%以內。工作臺作為產品首頁是一個為用戶提供產品概覽情況的查看平臺，也是進入各個功能模塊的入口匯總。工作臺頁面模塊根據信息優先級排布，根據用戶閱讀視線自上而下，自左而右的順序安排信息的重要性，以及閱讀邏輯關系。整體根據24柵格寬度布局。頁面模式一：基礎樣式概覽工作臺用于產品landing的首個頁面，需要展現出產品的全局信息，核心模塊與入口。頁面頭部為歡迎語，日期等通用信息。下方按照樓層方式安排。頁面模式二：功能模塊工作臺完整產品中某一部分功能同樣可能需要工作臺設計，這一工作臺往往是針對一個對象的完整操作和描述。例如用戶的數據信息，系統運維等。局部的工作臺隸屬于產品的某一功能，因此建議遵循全局的面包屑設計，保留左側菜單。（重要模塊可以使用規范中標志性的色彩進行強化。）頁面模式三：樓層標題設計圖80不同頁面模式布局圖81工作臺設計規范示意設計目標給用戶提供關鍵指標信息呈現和功能模塊入口，工作臺應呈現用戶當前關注的關鍵信息，同時允許用戶在工作臺直接操作一些高頻任務。設計原則1.信息概括：展示用戶需要關注的重點信息，避免過量信息的羅列。2.用戶定制：提供模塊定制化能力，讓用戶決定自己想看的關鍵信息。3.模塊化：各功能模塊入口區分模塊展示，用戶可進行一些高頻操作。列表頁是中后臺設計中最常用的頁面，以表格為容器承載格式化的數據，列表可以是頁面中唯一的內容，也可以是局部或者卡片中的內容。類型標準表格頁集成整體框架，包括面包屑和底紋。表格部分試用白色底板。表格部分包括表頭，操作區，篩選區，列表四個部分。圖82列表頁面模式頁面模式一：基礎單表基礎單表，包含標題，操作，文本搜索，表格內容。頁面模式二：復雜篩選表部分復雜篩選表，增加標簽等篩選項樓層。高級搜索可折疊。頁面模式三：多表切換表格的主體部分有多個維度的內容，使用Tab頁簽切換。頁面模式四：局部表格頁面局部內容為表格，可能與其他模塊產生交互。頁面模式五：卡片表格表格形式用卡片展示，用于商品圖片或照片等強呈現場景。圖83基礎單表圖84復雜篩選表圖85頁面模式三：多表切換圖86頁面模式四：局部表格圖87頁面模式五：卡片表格設計目標給用戶提供清晰詳細的數據信息，讓用戶可以便捷地對列表數據進行增刪改查。設計原則1.清晰性：信息層級清晰、詳情頁入口清晰、詳情頁內容和導航欄關系清晰、查看和編輯狀態的切換和保存清晰。2.分區原則：詳情頁涉及只讀和編輯兩種狀態，只讀進入編輯的入口和引導清晰，編輯的保存和退出編輯狀態的反饋到位。3.可擴展性：詳情頁承載信息量較大，信息層次按照優先到次要的順序進行排布全量信息。詳情頁是結構層級相對較深、用戶進行操作較多、停留時間較長的頁面，對信息層級清晰度和操作便捷性要求較高。類型頁面結構：標題模塊+基本信息+詳情信息（備注：標題模塊在頁面背景上，基本信息和詳情信息分模塊以卡片承載，模塊分區使用卡片表示。）樓層設置：詳情頁的常見樓層設置。頁面模式一：基本模式頁面模式二：復雜模式全局tab切換+卡片內tab切換—+左右結構信息模塊展示+卡片嵌套。頁面模式三：信息互動操作詳情頁信息中整合了多維信息，卡片內部或卡片間存在互相控制，交互的行為。以下面場景為例，多維篩選和配置面板根據其生效范圍確定在卡片模塊內部或單獨成立卡片。多維篩選僅對當前卡片生效。設計指導圖88基本模式圖89頁面模式二：復雜模式圖90頁面模式三：信息互動操作設計目標給用戶提供清晰的信息層級展現和詳情頁入口，提供便捷的查看和編輯狀態的切換以及及時保存。設計原則1.清晰性：信息層級清晰、詳情頁入口清晰、詳情頁內容和導航欄關系清晰、查看和編輯狀態的切換和保存清晰。2.雙狀態設計：詳情頁涉及只讀和編輯兩種狀態，只讀進入編輯的入口和引導清晰，編輯的保存和退出編輯狀態的反饋到位。3.層次感：詳情頁承載信息量較大，信息層次按照優先到次要的順序進行排布全量信息。8.5表單填寫表單填寫是獲取對象信息的重要交互方式，用戶可能會頻繁的增加或修改信息。多樣化的錄入方式可幫助用戶高效的完成任務，最大限度的降低填寫負擔。表單可在頁面、彈框、抽屜容器中呈現，具體使用哪種容器，取決于表單復雜程度和使用流程。圖91表單填寫頁面