/開源通網站Web產品系統交互設計視覺標準0.51.0前言 22.0UI色系 23.0UI色系構成 23.1色系構成與色值 24.0頁面總規則 35.0頁面框架類型 45.1首頁型視圖 45.2列表頁視圖 45.3表單頁視圖 45.4最終頁視圖 45.5數據頁視圖 46.0工作視圖詳解 46.1簡潔視圖詳解 46.2分析視圖詳解 46.3目錄樹區元素標準詳解 46.4版權狀態區元素標準詳解 57.0其它標準： 57.1按鈕和鏈接各種典型狀態 57.2屬性頁： 57.3小部件： 58.0結束語 69.0視覺標準的局限和擴展方式 6

1.0前言·本文檔對開源通網站系統頁面視覺設計進行標準·本文檔旨在通過統一標準，簡歷頁面框架和元素設計、布局與交互的通用規則，在保證頁面美觀、易用、一致的前提下，提高頁面批量生產和統一布局效率·本標準以系統開發及后期維護人員為閱讀對象2.0UI色系·本系統UI主色系依據Web設計專業要求由白色與暗紅色構成?！ど实纳驑嫵珊啙崱⒋蠓?、國際化3.0UI色系構成主色輔色需設計圖標色彩與色彩編號3.1色系構成與色值傳統的VI手冊，色值通常是以平面印刷為優先定義的（比方CMYK色或專色），網頁上的某些色彩，也可以考慮采用純度更高的近似色。LOGOLoginregis導航輔助導航TabLinksTextChartButtonTableDialogSliderLconsHighlight/ErrorDatePickerFLinksC&P3.2講解框架與元素的概念這張布局圖，包含和傳遞了很多信息：整體效果、功能劃分、色彩與造型、布局參數??登錄典型頁面：4.0頁面總規則·頁面最正確適應1024x768及其上分辨率·區塊與區塊之間的間隔為10像素·元素與元素的最小間隔為10像素·有明確的區域或元素寬度，高度最好為10的倍數，至少為5的倍數（如導航高度為30，按鈕高度為20，樹的當前菜單背景色高度為20）5.0頁面框架類型5.1首頁型視圖5.2列表頁視圖5.3表單頁視圖5.4最終頁視圖5.5數據頁視圖6.0工作視圖詳解A頁面導航區目錄區主題信息區狀態版權區6.1簡潔視圖詳解6.2分析視圖詳解由區域到元素，由整體到細節。接下來開始對各個功能區內部的元素進行標準。對各個功能區的元素布局進行拆分詳解涉及：顏色，字體類型與大小6.3目錄樹區元素標準詳解涉及：顏色，字體類型與大小及選中狀態6.4版權狀態區元素標準詳解顏色，字體類型與大小7.0其它標準：7.1按鈕和鏈接各種典型狀態 按鈕：背景色與字體色字體大小與框體間隔7.2屬性頁：字體顏色與大小前景色與背景色7.3小部件：日歷、進度條、ICON、對話框等其他元素標準涉及：顏色，ICO圖標不同狀態，對話框的符號及框體布局等8.0結束語·本視覺標準為頁面視覺設計的一般性規則，因前臺技術限制與瀏覽器兼容性差異、平面效果與最終代碼實現效果可能存在微小差異?！こ霰疽巹t標準的特殊頁面建議單獨繪制特征頁9