Web產(chǎn)品視覺方案網(wǎng)站視覺規(guī)范書

/開源通網(wǎng)站W(wǎng)eb產(chǎn)品系統(tǒng)交互設(shè)計視覺標(biāo)準(zhǔn)0.51.0前言 22.0UI色系 23.0UI色系構(gòu)成 23.1色系構(gòu)成與色值 24.0頁面總規(guī)則 35.0頁面框架類型 45.1首頁型視圖 45.2列表頁視圖 45.3表單頁視圖 45.4最終頁視圖 45.5數(shù)據(jù)頁視圖 46.0工作視圖詳解 46.1簡潔視圖詳解 46.2分析視圖詳解 46.3目錄樹區(qū)元素標(biāo)準(zhǔn)詳解 46.4版權(quán)狀態(tài)區(qū)元素標(biāo)準(zhǔn)詳解 57.0其它標(biāo)準(zhǔn)： 57.1按鈕和鏈接各種典型狀態(tài) 57.2屬性頁： 57.3小部件： 58.0結(jié)束語 69.0視覺標(biāo)準(zhǔn)的局限和擴(kuò)展方式 6

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