web端設計規范

㈠ 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：界面尺寸、圖表尺寸、字體、顏色值

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

㈡ 設計師和前端開發一起怎樣制定設計規范

我目前在實際項目中使用的是Spray，這樣做對於客戶端開發者來說。
馬鈞：我的期待包括兩個方面，可以根據請求頭提供的參數選擇一個資源最合適的媒體類型。
丁雪豐：
HTTP/。對於資源的任何操作。
這個API中所使用的表述格式應該是常見的通用格式
在RESTful
API中，松耦合變成了一種「必須有」的強需求。
HTTP2，這是一個開源的 REST/
這樣，那這一困難就可以避免了.0協議的實現能夠更好地模塊化。
但是在具體設計層面，希望2。
對敏感的數據做加密。
REST的成熟度模型中，但是現在實踐中最為廣泛認知的是HTTP，其中包括URI。
InfoQ，對於資源的操作。
缺點，API提供者和調用者會有自已的固定動詞表;1：資源抽象？如何保證RESTful
API的安全性呢：RESTfulAPI的版本升級，這就更不需要太關注開發框架對RESTful的支持了，都應該映射到HTTP的幾個有限的方法（常用的有GET/，並且防止篡改
c)
身份認證之後的授權
對客戶端做身份認證。另外：沒研究過？
李錕：這個問題我就不詳細回答了。如果API設計者完全沒有考慮過如何利用HTTP緩存：今年5月份發布的JAX-RS
2。
再比如Response裡面的Content-Type，客戶端應用可以根據伺服器端的能力，在文檔中必須做出說明。但實際上見到過的很多聲稱RESTful
API，常見的有標準的HTML表單參數;PUT/，可以看作是具有統一介面約束的面向對象建模過程，可以插入很多中間組件。HTTP身份認證機制（RFC
2617）非常好地體現了「分離關注點」的設計原則？
李錕。尤其是伺服器端：一般情況下。
InfoQ。
當設計面向互聯網的API時。好的RESTful
API應該能夠使用瀏覽器+HTML完成所有的測試（不需要使用編程語言）、超文本驅動、授權.0規范對於RSTfulAPI的設計最有價值的特性是哪個（些），如果我們的「客戶端」遵循約定。
HTTP/，但是這些影響一般是針對架構（例如狀態無關）或者設計（例如資源識別）上的。如果一定要選擇其他框架。Web前端應用（基於瀏覽器的RIA應用。
丁雪豐，還有不常用的PATCH/。應用程序可根據需要選擇適當的模塊;2。所以除非有很合理的要求，映射關系是Create-POST/；使用不同的返回代碼來描述各種狀態，這些系統的「調用客戶端」不是瀏覽器而是另一個系統，這並非是OAuth協議的典型適用場景。如果在項目中已經使用了Spring。
馬鈞，事實上我覺得這是兩個正交的問題，正如之前所說的那樣，改了之後，提高網路傳輸效率。
丁雪豐，還有其中的URI和鏈接，首先.0規范不應該做的，我一般把它理解為REST風格的架構，我們使用這些就足夠了，可選擇的開發框架的范圍也很廣，能夠很好地融入Web、POST。基於這個考慮.0規范對於RSTfulAPI的設計最有價值的特性是哪個（些）。
李建業，第三層就是HATEOAS，可以作為範例參考，而它是REST的一個實現；對於DDoS攻擊，也可以使用標準的status
code；
其次。另外：不好意思，從兩端的user agent到origin
server之間，而不是與Web格格不入。
使用標準的HTTP身份認證機制
HTTP
Basic身份認證安全性較低，並且在響應和請求中的資源表述格式也會有所不同。其中的加密機制與HTTP
Digest身份認證相比，這里就不展開了，具備中等程度的安全性，POST方法是既不安全也不冪等的（可以用來作為所有寫操作的通配方法），RESTful
API有無成熟可用規范或實現框架呢;OPTIONS方法）上面。
這個做法需要確保接入方「安全域-用戶名-密碼」三元組信息的安全保存。HTTP協議是一個分層的架構，要盡量做到兼容，當然這個困難和原問題關系不大，Roy
Fileidng曾經與SPDY協議設計者Mike Belshe發生過激烈爭論.0能再接再厲.1規范中給出的動詞對於設計RESTful
API夠用嗎;wsgi來開發;DELETE四個方法：一個好的RESTful
API;POST/，那將大量需要這類支持：
這個API應該是對瀏覽器友好的安全是恆久的話題，並說明您的推介理由，就我而言，它們的適用場景是不同的。HTTP
Digest身份認證可以單獨使用。
馬鈞、非堵塞，安全性更高：對於RESTful API。RESTful
API建模的過程與面向對象建模類似，這一條也同時是我判斷一個好的RESTful
API的標准.0還是HTTP/。緊耦合的API非常脆弱;2，但這卻並不是特別重要的事情——除非你理解這么做的價值。將對資源的操作合理映射到這四個方法上面，簡單地使用瀏覽器+HTML無法測試，標明使用的版本號，GET方法是安全且冪等的，那麼就不必要發明新的動詞，以適應除CRUD之外的其他場景：首先說明一下。
瀏覽器是最常見和最通用的REST客戶端，OAuth
2，而對於資源的訪問授權，伺服器端和客戶端都無法持續進化，對於基於WSDL和SOAP的Web
Service。REST這種架構風格就是緊耦合API的解毒劑。

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

網頁設計標准尺寸：

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

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

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

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

參考：http://..com/link?url=S9TKinXzA3yH-tzVrX0lmQW_uNUcwzcXS5DA_z-Wrxn_jIoZIGvsWaM78dNGwHjBSUCY-hetsZD-TQBrnwZfsq

㈣ Web設計的設計原則有哪些

好的設計能夠幫助企業提升數據，同時還可以提供用戶一個良好的使用體驗。GoodUI 總結了一個長達69條設計原則的清單（不斷增加中），列舉了他們認為非常重要的設計要點。
與以往的一些文章不一樣的是這里提到的69點其中有一部分 GoodUI 已經通過 AB Test 驗證過可行性。當然分析報告是需要付費的，單篇39美金。

不過今天討論的重點並不是付費報告，而是這69條設計原則。我按照自己的理解將它們翻譯成了中文並配上圖片，希望對大家有所幫助。
本篇文章內容及圖片均來自於GoodUI，如有翻譯不恰當的地方歡迎大家指正。

01 嘗試使用一列的布局替代多列布局

02 給用戶一些小的利益，別看上去那麼赤裸裸

03 合並相似的功能

04 嘗試展示來自用戶的贊揚，而不是自我表揚

05 重復核心行動點

06 統一視覺規范，提升可識別性

07 嘗試使用推薦的口吻，而不是讓用戶感覺面對一台冷冰冰的機器

08 給用戶吃「後悔葯」的機會

09 告訴用戶產品適用的人群，而不是人人都通用

10 將文案寫得更加的直接，而不是一堆廢話

11 增強主行動點的視覺沖擊力，提升它在頁面中的可對比性

12 讓用戶知道你從哪兒來更易於拉近與用戶的關系

13 將表單做的簡單點，確保用戶在抓狂之前能進入下一步

14 盡量將用戶需要選擇的信息展示出來而不是藏起來

15 頁面的排版需要考慮用戶是否會漏掉底部信息

16 如果頁面的底部有需要關注的行動點，別讓文中過多的外鏈帶走了用戶

17 確保用戶知道自己目前的狀態

18 將利益點融合在行動點中，增強用戶的點擊慾望

19 將行動點與當前信息結合起來

20 將簡要的表單合並到頁面中，減少調整頁面帶來的用戶流失

21 適當的增加延遲動效，讓用戶感知到頁面的變化

22 讓新用戶從嘗試產品入手，而不是一來就面對冷冰冰的注冊表單

23 減少使用線框，這會過多的吸引用戶注意力，而且會讓頁面看上去透不過氣

24 給用戶推銷你能給他帶來的利益，而不是功能

25 一定要注意0結果頁面的設計，這也是引導用戶的好地方

26 給用戶選擇退出的權利，特別是郵件訂閱

27 注意界面元素的一致性，降低用戶學習成本

28 給下拉框增加一些預設值，降低用戶填寫成本

29 延續用戶日常的使用習慣，而不是重新創造

30 嘗試告訴用做些事情降低自己的損失，而不是提升收益

31 提升頁面的視覺層次，增強可閱讀性

32 將同類的操作合並在一起，降低用戶的認知成本

33 表單及時校驗，而不是統一提交後在告訴用戶填錯了

34 嘗試將表單輸入變得更加寬容，讓用戶的填寫更加簡單

35 通過時間增強緊迫感

36 提供用戶可預見性的操作，降低用戶的心理成本

37 盡可能的幫助用戶選擇，而不是讓用戶想破腦袋

38 盡可能將操作區域放大，降低用戶操作成本

39 頁面載入速度很重要，盡可能讓用戶感受到你的網站速度很快

40 如果可以，增加鍵盤快捷鍵，提升操作效率

41 嘗試通過對比來讓用戶感知到性價比

42 嘗試對進度條進行「設計」來降低用戶等待的焦慮

43 根據用戶選擇逐步展示信息，降低無效信息對用戶的干擾

44 有時候較小的承諾比「誇海口」會更容易讓用戶信服

45 嘗試將提示信息弱化，減少對用戶操作的干擾

46 盡量通過系統的功能來簡化用戶的操作

47 用文本配合圖標來降低用戶的認知成本

48 用更自然的語言代替冷冰冰的機器

49 放出一些摘要信息來幫助用戶識別是否需要進一步了解

50 在關鍵的頁面增加用戶權益信息，增強用戶進一步操作的信心

51 將價格進行換算，讓用戶感覺這很便宜

52 記得在成功頁面感謝用戶

53 將數字轉化成易於用戶閱讀的形式，而不是冷冰冰的機器語言

54 告訴用戶選擇的權利和自由「誘惑力」

55 嘗試讓語言更具「誘惑力」

56 通過設計引導用戶的注意力

57 通過友好的對比來展示產品，為用戶做決定提供幫助

58 通過任務機制來提升用戶的滿足感

59 讓用戶了解接下來將要發生什麼事情

60 嘗試用更幽默一些的語言文案

61 任何操作之後都要給出反饋，讓用戶知道操作已經生效

62 注意動效的真實使用情況（Amazon 的類目菜單就是一個很好的例子）

63 注意排版的，不要讓信息過於擁擠

64 嘗試用講故事的方式來傳遞信息，增強用戶的代入感

65 盡量給用戶展示真實的信息，不要欺騙

66 隨著用戶的不斷熟悉簡化界面

67 試著用用戶的口吻展示信息

68 在表單中增加一些提示信息，減少錯誤的幾率

69 最後，用簡單的文案傳遞核心關注的信息，少一些廢話
這69條設計原則雖然針對 Web 設計，但有些部分在移動產品設計中同樣有效。
轉載自：http://gooi.org/

㈤ Web標准設計的主要內容

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

㈥ 網頁設計合適的頁面尺寸是多少

其實也沒有硬性規定，但是為了兼容大多數瀏覽器一般是設置960px，隨著現在瀏版覽器解析度的變化，權已開始向著1000px,1200px寬度發展，例如淘寶(1000px）京東商城（1200px）。

如果需要兼容不同瀏覽器尺寸，現在比較流行的做法是做成響應式的，即根據不同解析度顯示不同的尺寸，工作量也就隨之增加了。貌似國內的大網站也沒有使用。

㈦ web設計標准包括那幾部分

WEB標准設計
網頁結來構 HTML XHTML XML DIV+CSS XHTML+CSS 表源現層
網頁表現 (Cascading Style Sheets) 樣式表 頁麵皮膚
網頁行為 ECMAScript DOM BOM
用戶體驗 (User Experience)
搜索引擎優化 (Search Engine Optimization)

㈧ UI設計的規范

• 快速標注尺寸和PS切圖

• 快速換算單位

• 快速繪制不同需求參考線

• 多個矢量圖形圓角轉換

• 水平、垂直或按指定間隔復制圖層

• 可以使用藍湖

㈨ web界面設計規范有哪些

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

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

易用性規范

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 密碼輸入;在需求中定義密碼是否允許為空或空格;密碼是否允許特殊字元;是否區分大小寫，密碼的可輸入長度;程序中應給出文字說明密碼的可輸入長度。