Ⅰ Web UI設計規范及界面實現注意事項
適用於WEB產品線的人機交互界面的設計，貫穿於以用戶為中心的設計指導方向。根據WEB產品的特點制定出的一套規范，以達到提升用戶體驗，控制產品設計質量，提高設計效率的目的。
適合界面設計師、用戶體驗設計師、前台設計工程師、發布支持人員、運營編輯人員等
1．【統一識別】規范能使頁面相同屬性單元統一識別，防止混亂，甚至出現嚴重錯誤，避免用戶在瀏覽時理解困難。
2．【節約資源】除了門戶網站、活動推廣等個性頁面外，相對於後台系統、物聯網系統、數據統計系統、等界面設計，使用規范標准能極大的減少設計時間。
3.【重復利用】相同單元屬性，頁面新建時可以執行此標准重復使用，減少無關信息，就是減少對主題信息傳達干擾，利用閱讀與信息傳遞。
未通過客戶或上級領導確認產出的界面，請勿上傳至藍湖協作系統
設計師在原型步驟及應該想好對應的圖層結構，交互特效，並和前端開發人員做好交流，是否可以實現，功能的評估一定要細致
1．已上傳至藍湖協作平台的高保真界面，應根據平台中的標注尺寸進行精確還原，Web界面還原度不得低於95%；移動端還原度為100%（精確到一像素）。
2．開發人員完成視覺部分內容以後，必須由UI設計師及前端技術負責人進行校對工作。
3．如遇到界面效果復雜或組件樣式特殊等難以實現的問題，應及時與對應的UI設計師或前端技術負責人溝通處理，不能隨意更換。
4．前端開發人員無權更改設計圖中的樣式及功能，遇到問題應及時與設計人員協商。
5．如遇產品經理或項目負責人未通過設計師確認，直接要求修改界面視覺效果部分，前端開發人員可拒絕修改。必須由UI設計師對高保真圖紙更改後再進行相應的修改。
Ⅱ UI設計規范：如何構建Web端
1、Web端設計規范的價值
2、Web端設計規范包含哪些
3、Web端設計規范之設計理念篇
4、Web端設計規范之設計原則篇
5、Web端設計規范之組件控制項篇
6、Web端設計規范之界面交互篇
7、Web端設計規范之團隊輸出物篇
Ⅲ Web頁面設計原則
摘自電子商務系統分析與設計
Web頁面設計遵循三條原則：簡潔性、一致性和對比度。簡稱3C原則。
1）簡潔性
設計並不再現具體的物像和特徵，它要表達的是一定的意圖和要求，在適當的環境里為人們所理解和接收。
醒目的圖形，要求簡潔。
限制字體和所用顏色的數量。
頁面上所有的元素都應當有明確的含義和用途。
2）一致性
頁面的排版，各個頁面使用相同的頁邊距。文本、圖形之間保持相同的間距。
主要圖形、標題或符號旁邊留下相同的空白。
各個頁面使用相同的圖標。
色彩和風格的一致性，所有圖片都應該具有相同的風格。
文字的顏色要同圖形的顏色保持一致並注意色彩搭配的和諧。
一個站點通常只使用一兩種標准色。
3）對比度
使用對比度是強調突出某些內容的最有效的辦法之一。
使內容容易辨認和接受。
例如：內容提要使用藍色，正文採用黑色。
也可以使用大標題。
圖像對比，題頭的圖像明確地向瀏覽者傳達本頁的主題。
Ⅳ 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端及移動端原型設計規范
第一次繪制原型圖的時候覺得主要功能表達清晰即可，尺寸大小、元件間距全憑感覺，因此一開始也挨了不少罵。後來慢慢摸索出規律，大概總結如下：
埠類型：
目前長需設計的埠分為：web段（即網頁）、移動端（APP、小程序等移動設備）、IPAD（IPAD是一種移動設備，但也有自己特定的尺寸），智能設備（例如智能電視、智能手錶等等）
由於我更多接觸的是網頁端已經小程序埠，後面會以這兩個為主。
網頁端：
目前市面上顯示器屏幕尺寸為19-21寸，屏幕解析度大概在1280px*800px—1440px*900px之間，前端工程師在寫頁面的時候，寬度一般設為1180px—1220px（當然，這個寬度也不是絕對固定的）。
因此在做產品設計的時候，設計web端產品，寬度會設為1400px作為容器，位於容器上方再畫一個1200px的矩形，內容區域的容器。（PS：內容區域的矩形需與底部容器左右間隔10px，作為留白）
可能有人會問，為什麼要底部容器上面劃出一塊內容區域？
首先，我們要知道， 容器決定產品的邊界 ：
我的理解是：
按照市面上顯示器的解析度，前端頁面可展示的內容區域，平均寬度在1200px，預留出來的空白部分，是為顯示器較大的人群考慮的：屏幕越大，可展示的區域也越大，超過產品本身內容可展示區域的話，會自動留白。
另一方面，為保證開發團隊的成員可查看完整的原型圖，我們需考慮下他們電腦屏幕的解析度可能為1280*800px。
稍稍總結下，就是跟隨大多數人的屏幕尺寸大小，以及方便開發團隊查看。
給大家看我電腦上查看大的原型圖大小，是不是很清晰的看到內容呢？當然，這也是我個人的看法，如果有別的看法的，可以互相交流交流 （我算是個野路子的產品） 。
至於高度的問題，這個是沒有要求的，一般都是根據需要展示的內容來決定的，也就是高度自適應。
講完容器的寬度，接下來講講字體。正常情況下，字體大小都是14px，最小字體12px（字體太小可能就不方便查看）。
字體上，我所在的企業並沒有太多要求，只要求能看懂主要功能就行，所以上面的字體是來自一位B站的up總結的。
移動端：
說明之前，給大家感受下剛入門時候，畫的線框圖，話不多說，先上圖。
（OS：簡直慘不忍睹，當然這並不是給開發的圖紙，而是草稿。由於各種問題，我需要兼顧產品跟UI設計，所以都是輸入高保真原型圖的）
雖然最終效果跟第一版草稿的差距特別大，但這樣讓我知道原型尺寸的重要性。但凡在自己隨手畫的容器上覺得覺得間距大小差不多了，可以了。有這樣的想法，那你離被開發揍一頓就不遠了。
以自己一開始的慘痛經歷說了這么多，接下來聊一聊移動端的設計規范。
常見的移動端多是手機，基本上整個手機都是屏幕既是容器也是內容可視區。常用字體14px，最小字體一般是12px（你懂的，手機屏幕小，字體太小用戶也很難看清的）
上圖是我個人畫線框圖的習慣，並不是標准，只是提供個參考給大家。各個區域的底色，也只是為了便於自己區分，實際上底色並沒有什麼特別多的要求。至於字體，一般都是使用14px的字體。
產品在原型設計上還是有很多規范的，只不過我就職的企業並沒有太多要求，但基本也算通用了，具體情況還是看看自己企業內部有沒有什麼特別的要求。
上述的設計規范僅限於個人習慣，也是非常基礎的部分。如果有別的見解也可以一起分享。像容器內，各類原件的一些規范，後續也會慢慢整理出來。
Ⅵ web網頁設計尺寸標准(最小寬度/尺寸)
綜上所述，電腦屏幕解析度1024px，低於1024px則不再考慮，所以以上網站設計網站的最小寬度/尺寸小於1000px;
Ⅶ web界面設計規范有哪些
一、網頁尺寸
製作網頁時，我們選用的解析度是72像素/英寸，使用的畫布尺寸1920px*1080px。
但是並不代表我們可以在整個畫布上作圖。
網頁的布局主要有兩種，左右型布局和居中型布局。布局的不一致，使得可設計的空間也不相同。
二、網頁字體
字體設計的總原則是：可辨識性和易讀性。
網頁的文字設計是系統默認的字體：宋體、微軟黑體、蘋果系統黑體，英文則建議使用arial無襯線字體
常用的字型大小大小有以下幾種：
12px是應用於網頁的最小字體，適用於非突出性的日期，版權等注釋性內容。
14px 則適用於非突出性的普通正文內容。
16px、18px或者20px 適用於突出性的標題內容。
Ⅷ Web 頁面採用多大的寬度最合適
Web 頁面採用多大的寬度最合適
網頁設計標准尺寸：
1. 800×600下，網頁寬度保持在778以內，就不會出現水平滾動條，高度則視版面和內容決定。
2. 1024×768下，網頁寬度保持在1002以內，如果滿框顯示的話，高度是612눯之間，就不會出現水平滾動條和垂直滾動條。
3. 在ps裡面做網頁可以在800×600狀態下顯示全屏，頁面的下方又不會出現滑動條，尺寸為740×560左右。
網頁設計在初始要界定出網頁的尺寸大小.就像繪畫給出一塊畫版來.這樣才能方便設計.
網頁的尺寸受限於兩個因素:一個是顯示器螢幕.顯示器現在種類很多,以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
1.65主頻的cpu用多大的 顯示卡 最合適 還有 多大的記憶體 最合適
您好。 建議您 用128MB的顯示卡 和1G記憶體 本身您的CPU主頻就不是很高 如果用好點的顯示卡 和高點的記憶體 就浪費了
櫥櫃拉籃寬度選擇多大最合適？
櫥櫃拉籃一般是根據您家櫥櫃吃尺寸來定做的，深度42cm的常用櫥櫃拉籃尺寸：600櫃體為52.3*14cm，700櫃體為62.3*14cm，750櫃體為66.6*14cm，800櫃體為72.3*14cm等，深度45.5cm的常用櫥櫃拉籃尺寸(：600櫃體為56.5*20cm，700櫃體為66.5*20cm，750櫃體為71.5*20cm，800櫃體為76.5*20cm等
淘寶手機詳情頁面寬度到底多少最合適咧？
手機螢幕尺寸有大有小，寬度480 – 620畫素會比較合適。格式為JPGGIFPNG。當需要在圖片上新增文字時，中文字型大於等於30號字，英文和阿拉伯數字大於等於20號字。
4.2米寬的客廳用多大的電視最合適
電視距離適宜在3米左右，根據沙發到電視的距離來決定。
1.7米使用26英寸
2米使用32英寸
2.4米使用37英寸
2.5米使用40英寸
2.7米使用42英寸
3米使用46英寸
3.3米使用52英寸
用多大的魚缸養銀龍最合適
按尺寸來說 最小尺寸是一米 寬40 銀龍體長不得超過40 如果銀龍體長超過50 就建議一米二寬50以上的缸子養了 一米五 一米八 兩米都能養 越大越好唄
金毛用多大的狗窩最合適
如果你養的是金毛犬，那就更該如此了，要讓它知道，白天當然不用說，夜晚這就是它睡覺的地方，不許它想在哪兒睡就在哪兒睡。
對於金毛犬來說，給它指定了一個住處，讓它在想躺的時候也能隨便在那兒伸伸腰，也算比較自在。
狗屋沒必要十分講究，只要寬敞就好。其實用個紙箱子或者木箱子在上面鋪塊毛巾也行。若買商店裡賣的狗屋，則有條件在客人來訪前，事先將金毛犬關起來，的確很方便。
狗屋應放置在安靜、偏暗點兒的地方，最好選在冬暖夏涼、通風避曬之處，可能的話冬季和夏季應選在不同的地方。
也可以用鐵籠子代替狗屋
要是你們家足夠敞的話，也可以在屋裡准備一個鐵籠子，裡面同時可以放上便器和金毛犬睡覺的窩。有一種能摺疊的鐵籠子，可以很方便地拆運安裝，天氣好時還可以把金毛犬連籠子挪到院子里曬曬太陽。
中星九號用多大的鍋最合適
目前用小鍋接收中星9號的人佔百分之九十九以上，因為它上面有免費的46套央視及省級衛視節目。其它衛星如亞太5號、新天11符和韓星5號上面節目少，也沒有多大的收看價值。最小的小鍋直徑35厘米左右。 中星9號位於西南方向.應該影響不大。
86用多大輪胎最合適
1.抓地力增加。2。增加車身高度，3增加行車穩定性。4.油耗增加。5。對輪轂，內襯，轉向角度，有影響!
Ⅸ 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/