當前位置:首頁 » 網頁前端 » web設計規范
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web設計規范

發布時間: 2022-01-20 17:15:49

Ⅰ 網站設計或網頁設計有行業或國家標准或規范

只有這種網頁才有標准!別的沒有!
標准編號:YD/T 1761-2008
標准名稱:信息無障礙 身體機能差異人群 網站設計無障礙技術要求
標准狀態:現行
英文標題:Information Accessibility for People With Physical Disabilities Technical REquirements for Web Accessibility
實施日期:2008-7-1
內容簡介:本標准規定了無障礙上網的網頁設計技術要求,其中包括網頁內容的可感知要求、介面組件的可操作要求、內容和控制的可理解要求、內容對現有和未來可能出現的技術的支持能力要求等。本標准適用於無障礙上網的網頁設計,也適用於公眾網站的擁有者,網站管理人員,網頁開發者設計、開發和管理無障礙網站。
出處: http://www.csres.com/detail/189654.html

Ⅱ 網站界面設計規范有哪些

易用性規范

2.001 常用按鈕要支持快捷方式。

2.002 完成同一功能或任務的元素放在集中位置,減少滑鼠移動的距離。

2.003 界面要支持鍵盤自動瀏覽按鈕功能,即按Tab鍵的自動切換功能。

2.004 界面上首先應輸入的和重要信息的控制項在Tab順序中應當靠前,位置也應放在窗口上較醒目的位置。

2.005 分頁界面要支持在頁面間的快捷切換,常用組合快捷鍵Ctrl+Tab

2.006 默認按鈕要支持Enter和選操作,即按Enter後自動執行默認按鈕對應操作。

2.007 可寫控制項檢測到非法輸入後應給出說明並能自動獲得焦點。

2.008 Tab鍵的順序與控制項排列順序要一致,目前流行總體從上到下,同時行間從左到右的方式。

2.009 復選框和選項框,按選擇幾率的高底而先後排列。

2.010 復選框和選項框要有默認選項,並支持Tab選擇。

2.011 界面空間較小時使用下拉框而不用選項框。

2.012 選項數較少時使用選項框,相反使用下拉列表框。

2.013 根據用戶不同採用相應的詞語語氣語調,如專用軟體,可以出現很多專業詞彙;用戶為兒童:這可以語氣親切和藹;老年用戶則應該成熟穩重。

2.014 滑鼠為不可點擊狀態時顯示箭頭,可點擊狀態顯示手型;系統忙時顯示沙漏形狀
規范性規范

2.015 菜單前的圖標能直觀的代表要完成的操作。

2.016 工具欄要求可以根據用戶的要求自己選擇定製。

2.017 系統常用的工具欄設置默認放置位置。

2.018 工具箱要具有可增減性,由用戶自己根據需求定製。

2.019 狀態條要能顯示用戶切實需要的信息,常用的有、目前的操作、系統狀態、用戶位置、用戶信息、提示信息、錯誤信息等,如果某一操作需要的時間較長,還應該顯示進度條和進程提示。

2.020 滾動條的長度要根據顯示信息的長度或寬度能及時變換,以利於用戶了解顯示信息的位置和百分比。

2.021 狀態條的高度以放置五號字為宜,滾動條的寬度比狀態條的略窄。

2.022 菜單和工具條要有清楚的界限;菜單要求凸出顯示,這樣在移走工具條時仍有立體感。

2.023 工具條一般比菜單要寬,但不要寬的太多,否則看起來很不協調。

幫助規范

2.024 幫助文檔中的性能介紹與說明要與系統性能配套一致。

2.025 打包新系統時,對作了修改的地方在幫助文檔中要做相應的修改。

2.026 在界面上調用幫助時應該能夠及時定位到與該操作相對的幫助位置。也就是說幫助要有即時針對性。

2.027 用戶可以用關鍵詞在幫助索引中搜索所要的幫助,當然也應該提供幫助主題詞。

2.028 如果沒有提供書面的幫助文檔的話,最好有列印幫助的功能。

2.029 在幫助中應該提供我們的技術支持方式,一旦用戶難以自己解決可以方便的尋求新的幫助方式。

合理性規范

2.030 與正在進行的操作無關的按鈕應該加以屏蔽(Windows中用灰色顯示,沒法使用該按鈕)。

2.031 對可能造成數據無法恢復的操作必須提供確認信息,給用戶放棄選擇的機會。

2.032 非法的輸入或操作應有足夠的提示說明。

2.033 對運行過程中出現問題而引起錯誤的地方要有提示,讓用戶明白錯誤出處,避免形成無限期的等待。

2.034 提示、警告、或錯誤說明應該清楚、明了、恰當。

2.035 提交失敗後必須保存用戶已經輸入的內容,以便修改後再次提交。

美觀與協調規范

2.036 長寬接近黃金點比例,切忌長寬比例失調、或寬度超過長度。

2.037 布局要合理,不宜過於密集,也不能過於空曠,合理的利用空間。

2.038 按鈕大小基本相近,忌用太長的名稱,免得佔用過多的界面位置。

2.039 按鈕的大小要與界面的大小和空間要協調。

2.040 避免空曠的界面上放置很大的按鈕。

2.041 放置完控制項後界面不應有很大的空缺位置。

2.042 字體的大小要與界面的大小比例協調。

2.043 前景與背景色搭配合理協調,反差不宜太大,最好少用深色,如大紅、大綠等。如:安全軟體,根據工業標准,可以選取黃色,綠色體現環保,藍色表現時尚、紫色表現浪漫等等,淡色可以使人舒適,暗色做背景使人不覺得累等。

2.044 如果使用其他顏色,主色要柔和,具有親和力與磁力,堅決杜絕刺目的顏色。

2.045 界面風格要保持一致,字的大小、顏色、字體要相同,除非是需要藝術處理或有特殊要求的地方。

2.046 如果能給用戶提供自定義界面風格則更好,由用戶自己選擇顏色、字體等。

2.047 色盲、色弱用戶,即使使用了特殊顏色表示重點或者特別的東西,也應該使用特殊指示符。

2.048 顏色方案也需要測試,常常由於顯示器、顯卡的問題,色彩表現每台機器都不一樣,應該經過嚴格測試,不同機器進行顏色測試。

2.049 使用統一的語言描述,例如一個關閉功能按鈕,可以描述為退出、返回、關閉,則應該統一規定。

菜單設計規范

2.050 菜單通常採用"常用--主要--次要--工具--幫助"的位置排列,符合流行的Windows風格。

2.051 常用的有"文件"、"編輯","查看"等,幾乎每個系統都有這些選項,當然要根據不同的系統有所取捨。

2.052 下拉菜單要根據菜單選項的含義進行分組,並按照一定的規則進行排列,用橫線隔開。

2.053 一組菜單的使用有先後要求或有向導作用時,應該按先後次序排列。

2.054 沒有順序要求的菜單項按使用頻率和重要性排列,常用的放在開頭,不常用的靠後放置;重要的放在開頭,次要的放在後邊。

2.055 如果菜單選項較多,應該採用加長菜單的長度而減少深度的原則排列。

2.056 菜單深度一般要求最多控制在三層以內。

2.057 對與進行的操作無關的菜單要用屏蔽的方式加以處理,如果採用動態載入方式——即只有需要的菜單才顯示——最好。

2.058 菜單前的圖標不宜太大,與字高保持一直最好。

2.059 主菜單的寬度要接近,字數不應多於四個,每個菜單的字數能相同最好。

2.060 主菜單數目不應太多,最好為單排布置。

獨特性規范

2.061 安裝界面上應有單位介紹或產品介紹,並有自己的圖標。

2.062 主界面,最好是大多數界面上要有公司圖標。

2.063 登錄界面上要有本產品的標志,同時包含公司圖標。

2.064 幫助菜單的"關於"中應有版權和產品信息。

2.065 公司的系列產品要保持一直的界面風格,如背景色、字體、菜單排列方式、圖標、安裝過程、按鈕用語等應該大體一致。

安全性規范

2.066 應當注意盡可能避免用戶無意錄入無效的數據。

2.067 採用相關控制項限制用戶輸入值的種類。

2.068 當用戶作出選擇的可能性只有兩個時,可以採用單選框。

2.069 當選擇的可能再多一些時,可以採用復選框,每一種選擇都是有效的,用戶不可能輸入任何一種無效的選擇。

2.070 當選項特別多時,可以採用列表框,下拉式列表框。

2.071 在一個應用系統中,開發者應當避免用戶作出未經授權或沒有意義的操作。

2.072 對可能引起致命錯誤或系統出錯的輸入字元或動作要加限制或屏蔽。

2.073 對可能發生嚴重後果的操作要有補救措施。通過補救措施用戶可以回到原來的正確狀態。

2.074 對一些特殊符號的輸入、與系統使用的符號相沖突的字元等進行判斷並阻止用戶輸入該字元。

2.075 對錯誤操作最好支持可逆性處理,如取消系列操作。

2.076 在輸入有效性字元之前應該阻止用戶進行只有輸入之後才可進行的操作。

2.077 對可能造成等待時間較長的操作應該提供取消功能。

2.078 特殊字元常有;;'"><,`'、"["{、\|}]+=)-(_*&&^%$ #@!~,.。?/還有空格。

2. 079 與系統採用的保留字元沖突的要加以限制。

2.080 讀入用戶所輸入的信息時,根據需要選擇是否去掉前後空格。

2.081 有些讀入資料庫的欄位不支持中間有空格,但用戶切實需要輸入中間空格,這時要在程序中加以處理。

輸入項規范

2.082 必輸項中不可為空,不可輸入空格

2.083 必輸項給出必輸項標識(*)。

2.084 非必輸項欄位,Null插入資料庫時不會出錯,在資料庫中設置默認值

2.085 日期顯示格式一致;或提供固定格式的選擇。

2.086 輸入區域輸入特殊字元,插入資料庫時不出錯或提示不允許輸入特殊字元。

2.087 英文輸入不區分大小寫,不可輸入漢字、數字及特殊字元

2.088 數值欄位只能輸入+ ,— ,0~9及功能鍵(BackSpace 游標) 。數值不能為負數。

2.089 單行文本框/多行文本框;長度合適,可以容納相應文字,但不能超過資料庫該欄位長度,最好將可以輸入的最大字元數標在旁邊。建議單行文本框中當輸入的字元超過一定長度時再輸入無效;對於多行文本框給出最大字元數標識

2.090 附件;可正常添加符合格式的附件; 附件可正常打開和保存,附件名較長時可正常操作;直接輸入錯誤的附件地址,保存時應給出提示信息;附件打開和保存到本地時,文件名要顯示原文件的文件名。

2.091 密碼輸入;在需求中定義密碼是否允許為空或空格;密碼是否允許特殊字元;是否區分大小寫,密碼的可輸入長度;程序中應給出文字說明密碼的可輸入長度。

Ⅲ web app 的設計規范和標准有哪些

WEB標准設計 :

網頁結構 HTML XHTML XML DIV+CSS XHTML+CSS 表現層

網頁表現 (Cascading Style Sheets) 樣式表 頁麵皮膚

網頁行為 ECMAScript DOM BOM

用戶體驗 (User Experience)

搜索引擎優化 (Search Engine Optimization)


App的標准

IOS:界面尺寸、圖標尺寸、字體、顏色值

內部設計:1、所有能點擊的圖片不得小於44px(Retina需要88px)
2、單獨存在的部件必須是雙數尺寸
3、兩倍圖以@2x作為命名後綴
4、充分考慮每個控制按鈕在4中狀態下的樣式,如圖

Aos:界面尺寸、圖表尺寸、字體、顏色值

希望可以幫助你,望採納,謝謝啦~~~~~~

Ⅳ Web 頁面採用多大的寬度最合適

網頁設計在初始要界定出網頁的尺寸大小.就像繪畫給出一塊畫版來.這樣才能方便設計.

網頁的尺寸受限於兩個因素:一個是顯示器屏幕.顯示器現在種類很多,以17寸為主流, 正在朝19寸及寬屏的方向發展.但目前也有為數不少的15寸顯示器.另一個是瀏覽器軟體,就是我們常用的IE,遨遊,Friefox等.

高度:

高度是可以向下延展的,所以一般對高度不限制. 對於一屏來說,一般沒有一個固定值,因為每個人的瀏覽器的工具欄不同,我見過有的瀏覽器工具欄被插件佔了半個屏幕,所以高度沒有確切值。

寬度:

1、在IE6.0下,寬度為顯示器解析度減21,比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。

2、在Firefox下,寬度的分率辨減19。比如1024的寬度-19就變成1005

3、在Opear下,寬度的分率辨減23。比如1024的寬度-23就變成1001

註:Firefox或Opear在內容少於瀏覽器高度時不顯示右側滾動條。

所以如果是1024的解析度,你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點.也方便做一些浮動層的設計.

如果是800的解析度一般都設成770。但也有設成760的.

這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求,不過一般我們都回設定的再稍微小一點,應為有些瀏覽器加了插件或者其他的東西寬度會有變化所以 800的解析度一般設定760左右,1024的設定990左右.

網頁設計標准尺寸:

1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。

2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。

3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右

4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象.

頁面標准按800*600解析度製作,實際尺寸為778*434px

頁面長度原則上不超過3屏,寬度不超過1屏

每個標准頁面為A4幅面大小,即8.5X11英寸

全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px

另外120*90,120*60也是小圖標的標准尺寸

每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K

標准網頁廣告尺寸規格

一、120*120,這種廣告規格適用於產品或新聞照片展示。

二、120*60,這種廣告規格主要用於做LOGO使用。

三、120*90,主要應用於產品演示或大型LOGO。

四、125*125,這種規格適於表現照片效果的圖像廣告。

五、234*60,這種規格適用於框架或左右形式主頁的廣告鏈接。

六、392*72,主要用於有較多圖片展示的廣告條,用於頁眉或頁腳。

七、468*60,應用最為廣泛的廣告條尺寸,用於頁眉或頁腳。

八、88*31,主要用於網頁鏈接,或網站小型LOGO。

廣告形式 像素大小 最大尺寸 備注

BUTTON 120*60(必須用gif) 7K

215*50(必須用gif) 7K

通欄 760*100 25K 靜態圖片或減少運動效果

430*50 15K

超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果

巨幅廣告 336*280 35K

585*120

豎邊廣告 130*300 25K

全屏廣告 800*600 40K 必須為靜態圖片,FLASH格式

圖文混排 各頻道不同 15K

彈出窗口 400*300(盡量用gif) 40K

BANNER 468*60(盡量用gif) 18K

懸停按鈕 80*80(必須用gif) 7K

流媒體 300*200(可做不規則形狀但尺寸不能超過300*200) 30K 播放時間 小於5秒60幀(1秒/12幀)

網頁中的廣告尺寸

1.首頁右上,尺寸120*60

2.首頁頂部通欄,尺寸468*60

3.首頁頂部通欄,尺寸760*60

4.首頁中部通欄,尺寸580*60

5.內頁頂部通欄,尺寸468*60

6.內頁頂部通欄,尺寸760*60

7.內頁左上,尺寸150*60或300*300

8.下載地址頁面,尺寸560*60或468*60

9.內頁底部通欄,尺寸760*60

10.左漂浮,尺寸80*80或100*100

11.右漂浮,尺寸80*80或100*10

Ⅳ 什麼是web標准,為什麼要使用web標准

WEB標准不是某一個標准,而是一系列標準的集合。目前所通常所說的WEB標准一般指網站建設採用基於XHTML語言的網站設計語言,WEB標准中典型的應用模式是「css+div」(什麼是css+div)。實際上,WEB標准並不是某一個標准,而是一系列標準的集合。

網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行為(Behavior)。對應的網站標准也分三方面:結構化標准語言,主要包括XHTML和XML;表現標准語言主要包括CSS;行為標准主要包括對象模型(如W3C DOM)、ECMAScript等。這些標准大部分由W3C組織(什麼是W3C組織)起草和發布,也有一些是其他標准組織制訂的標准,比如ECMA(European Computer Manufacturers Association)的ECMAScript標准。

web標準的本意是實現內容(結構)和表現分離,就是將樣式剝離出來放在單獨的css文件中。這樣做的好處是可以分別處理內容和表現,也方便搜索和內容的再利用。

一些Web開發人員和Web設計師對使用Web標准持抵觸態度。普遍的看法是它太難了,不管它是怎麼運作,我使用的那些軟體總會創建出一些不規范的代碼。.

學習新的技術並放棄您所熟知的技術,這很容易引起情緒上的反感,並產生抵觸的情緒。然而,如果您很理智的觀察一下現在的形勢,將會發現,通過學習和使用Web標准會得到許多好處。舉幾個例子:

  • 更簡易的開發與維護:使用更具有語義和結構化的HTML,將讓您更加容易、快速的理解他人編寫的代碼。

  • 與未來瀏覽器的兼容:當您使用已定義的標准和規范的代碼,那麼您這個向後兼容的文本就消除了不能被未來的瀏覽器識別的後患。

  • 更快的網頁下載、讀取速度:更少的HTML代碼帶來的將是更小的文件和更快的下載速度。如今的瀏覽器當處於標准模式下將比它在以前的兼容模式下擁有更快的網頁讀取速度。

  • 更好的可訪問性:語義化的HTML(結構和表現相分離)將讓使用瀏覽器以及不同的瀏覽設備的讀者都能很容易的看到內容。

  • 更高的搜索引擎排名:內容和表現的分離使內容成為了一個文本的主體。與語義化的標記結合會提高您在搜索引擎中的排名。

  • 更好的適應性:一個用語義化標記的文檔可以很好的適應於列印和其他的顯示設備(像掌上電腦和智能電話),這一切僅僅是通過鏈接不同的CSS文件就可以完成。你同樣可以僅僅通過編輯單獨的一個文件就完成跨站點般的表現上的轉換。

  • Web標准可以為網站的創建者節省時間與金錢,還可以為網站的瀏覽者提供一個更好的經歷。此外,Web標準是未來的。如果你還沒有使用We b標准,那麼現在應該開始動手了,否則你會落伍的。

Ⅵ Web標准設計的主要內容

《Web標准設計》針對Web開發人員講解Web標准。開始部分解釋了Web標準的一些概念跟誤會,之後詳細介紹了構成Web標準的各個組成部分,著重介紹了XHTML和CSS的應用,同時還討論了JavaScript、XML、XSLT的應用,此外還介紹了中文的特殊表現、命名的應用以及Web標准中最常給人忽視的無障礙網頁倡議(WAI)。
基於上述的討論,《Web標准設計》以實例的形式介紹了這些內容的組合應用,以及一些常見和不常見的技術。
雖然《Web標准設計》講述的內容是Web標准,但由於頁數有限,《Web標准設計》無法讓你精通Web標准所有的知識點,我選擇的重點是XHTML+CSS,其他的方面只能說讓你達到了解、掌握基礎的地步。

Ⅶ 公司後台管理web界面設計尺寸是多少

這個一般用百分比來設計,頭部固定高度,左側固定寬度,右側用100%-左側寬度,以達到最佳瀏覽效果
一般後台管理都會有表格編排問題,會涉及到很多參數,用百分比可以根據表格屬性自動伸縮,而且不影響美觀性
望採納

Ⅷ web端設計和web前端開發 的區別 (詳情)

是否會寫代碼

Ⅸ web界面設計規范有哪些

一、網頁尺寸
製作網頁時,我們選用的解析度是72像素/英寸,使用的畫布尺寸1920px*1080px。
但是並不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種,左右型布局和居中型布局。布局的不一致,使得可設計的空間也不相同。
二、網頁字體
字體設計的總原則是:可辨識性和易讀性。
網頁的文字設計是系統默認的字體:宋體、微軟黑體、蘋果系統黑體,英文則建議使用arial無襯線字體
常用的字型大小大小有以下幾種:
12px是應用於網頁的最小字體,適用於非突出性的日期,版權等注釋性內容。
14px 則適用於非突出性的普通正文內容。
16px、18px或者20px 適用於突出性的標題內容。

Ⅹ Web 服務封裝規范

本系統中的網格服務管理中心和數據綁定介面全部採用 Web 服務技術進行開發,下面介紹 Web 服務封裝有關的規范。

Web Service 是基於網路的、分布式的模塊化組件,它執行特定的任務,遵守具體的技術規范,這些規范使得 Web Service 能與其他兼容的組件進行互操作。它可以使用標準的互聯網協議,像超文本傳輸協議 HTTP 和 XML,將功能體現在互聯網和企業內部網上。Web Service 最大的優勢就是提供了跨平台的用不同語言編寫的各種程序之間交互的一系列標准。Web Service 可以採用多種編程語言進行編寫,如 C#,Java 等。

Web Service 是通過一系列協議規范來保證分布式應用程序之間的動態連接。目前這些協議規范有:

(1)XML 與 XSD 規范。XML(可擴展標記語言)是 Web Service 平台中表示數據的基本格式。具有易於建立和易於分析的特點,除此之外,XML 主要的優點在於它與平台和廠商無關。XML 是由萬維網協會(W3C)創建,W3C 制定的 XML Schema XSD 定義了一套標準的數據類型,並給出了一種語言來擴展這套數據類型。Web Service 平台用 XSD作為數據類型系統。當使用某種語言如 C#來構造一個 Web Service 時,為了符合 WebService 標准,所有使用的數據類型都必須被轉換為 XSD 類型。如想讓它在使用不同平台和不同軟體的不同組織間傳遞,還需要用 SOAP 協議將其包裝起來。

(2)SOAP 協議規范。SOAP 是 XML 文檔形式的調用 Web 服務方法的規范,它可以支持不同的底層介面,像 HTTP(S)或者 SMTP。之所以使用 XML 是因為它獨立的編程語言,良好的可擴展性以及強大的工業支持。之所以使用 HTTP 是因為幾乎所有的網路系統都可以用這種協議來通信,由於它是一種簡單協議,所以可以與任何系統結合,還有一個原因就是它可以利用 80 埠來穿越防火牆。SOAP 的強大是因為它簡單。SOAP 是一種輕量級的,非常容易理解的技術,並且很容易實現。它有工業支持,可以從各主要的電子商務平台供應商那裡獲得。從技術角度來看,SOAP 詳細指明了如何響應不同的請求以及如何對參數編碼。一個 SOAP 封裝了可選的頭信息和正文,並且通常使用 HTTP POST 方法傳送到一個 HTTP 伺服器,當然其他方法也是可以的,例如 SMTP。SOAP 同時支持消息傳送和遠程過程調用。

(3)WSDL。WSDL 是定義如何利用 XML 語法描述 Web Services 的規范。它通過在服務提供者和服務請求者之間交換的消息來描述 Web Services,可被看做是 Web Services 和外界溝通的橋梁。WSDL 文檔描述了用戶調用 Web Services 所需的一些關鍵信息: WebServices 的名稱、Web Services 的獲取地址、可供調用的方法、每個方法的輸入輸出參數類型。因為是基於 XML 的,所以 WSDL 既是機器可閱讀的,又是人可閱讀的。

(4)UDDI。UDDI 是一套基於 Web 的、分布式的、Web Service 信息注冊中心的實現標准,UDDI 的設計目的是為電子商務和服務發現機制提供標準的信息格式和服務調用。同時也包含一組使企業能將自身提供的 Web Service 注冊,以使別的企業能夠發現的訪問協議的實現標准。因此,企業可以使用 UDDI 找到潛在的合作夥伴。