WEBUI設計要求規(guī)范

實用文檔內(nèi)蒙古萬德系統(tǒng)集成WEBUI設計〔流程/界面〕標準目錄TOC\o"1-5"\h\zUI設計根本概念與流程 -3-目的 -3-\o"CurrentDocument"范圍 -3-\o"CurrentDocument"概述 -3-\o"CurrentDocument"UI界面用戶體驗設計原那么與標準 -4-\o"CurrentDocument":應該遵循的根本原那么 -4-\o"CurrentDocument"2:頁面外觀標準 -4-②寬帶頁面 -5-③自適應 -5-④其他頁面 -5-根本結(jié)構(gòu) -6-頁面版式： -6-版塊根本元素： 所謂根本元素就是將其中任意幾塊元素拼接起來形成所需網(wǎng)頁版塊. -6-版塊組合形式 -7-\o"CurrentDocument"3:色彩標準 -8-\o"CurrentDocument"4:字體標準 -10-①文字格式 -10-②標題類 -12-文案大全實用文檔TOC\o"1-5"\h\z④功能類 -15 -⑤注釋類 -16 -正文類 -16 -5:圖片標準 -16 -主要圖片 -16 -圖片規(guī)格 -17 -6:表單標準： -17 -按紐 -17 -輸入框 -17 -文本框 -18 -復選框 -18 -菜單 -18 -文案大全實用文檔一：UI設計根本概念與流程目的標準公司UI設計流程,使UI設計師參與到產(chǎn)品設計整個環(huán)節(jié)中來,對產(chǎn)品的易用性進行全流程負責,使 UI設計的流程標準化,保證UI設計流程的可操作性.范圍本文檔用于界面設計,本文檔的讀者對象是工程治理人員、售前效勞人員、 UI界面設計人員、界面評審人員和配置測試人員.概述UI設計包括交互設計,用戶研究,與界面設計三個局部.基于這三局部的UI設計流程是從一個產(chǎn)品立項開始,UI設計師就應根據(jù)流程標準,參與需求階段、分析設計階段、調(diào)研驗證階段、方案改良階段、用戶驗證反應階段等環(huán)節(jié),履行相應的崗位責任. UI設計師應全面負責產(chǎn)品以用戶體驗為中央的UI設計,并根據(jù)客戶〔市場〕要求不斷提升產(chǎn)品可用性.本標準明確規(guī)定了UI設計在各個環(huán)節(jié)的責任和要求,以保證每個環(huán)節(jié)的工作質(zhì)量.文案大全實用文檔二：UI界面用戶體驗設計原那么與標準1:應該遵循的根本原那么無論是控件使用,提示信息措辭,還是顏色、窗口布局風格,遵循統(tǒng)一的標準,做到真正的一致2:頁面外觀標準①普通頁面 ②寬帶頁面③自適應頁面 ④其他頁面T50px9Q0px普通頁面 寬帶頁面文案大全實用文檔100%500px自適應頁面 其他頁面①普通頁面根本屬性：寬度 750px；背景白色#FFFFFF；位置居中；邊距上5px;下20px;左0px適用范圍：系統(tǒng)首頁 正文頁面等及其他非寬帶產(chǎn)品線右0px②寬帶頁面根本屬性：寬度900px；背景白色#FFFFFF；位置居中；適用范圍：寬帶頻道首頁和各級頁面不包括正文頁,及其他寬帶產(chǎn)品線邊距上5px;下20px;左0px右0px③自適應根本屬性：寬度100%；背景白色#FFFFFF；位置居中適用范圍：論壇聊天等頁面④其他頁面根本屬性：寬度500px；背景白色#FFFFFF；位置居中適用范圍：提示報錯頁面邊距上5px;下20px;左0px邊距上5px;下20px;左0px右0px右0px文案大全實用文檔根本結(jié)構(gòu)：其中每個模塊之間的間距為10px,一般情況下標準頭的高度為標準頭普通頁面內(nèi)容區(qū)標準尾頁面版式：版塊根本元素：所謂根本元素就是將其中任意幾塊元素拼接起來形成所需網(wǎng)頁版塊.I~A_II BircniD II~Il1G254II340II140II 602 II298II 488 II 454文案大全

實用文檔H1 H2H3H47503750372246133版塊組合形式：版塊元素之間距為8PX同名版塊元素間的距離為6PX〔但J如EEC中EE距離為6EC距離為8PXH2等分版式為6PxABCAFDCEECABC版塊 AF 版塊 DC版塊EEC 版塊CGCF ACD CEE文案大全實用文檔CFC版塊FA版塊CD 版式 CEE＞式H1 通欄版式H2等分版式H3等分版式H4等分版式3:色彩標準白色正面：雪花,純靜,清白,和平,輕盈,純潔、天真、潔凈、真理、反面：嚴寒,受傷,弱點,放棄,冷淡、貧乏,死寂白色在中華文化中也代表著死亡的顏色.黑色正面：夜晚,煤碳,水平,穩(wěn)定,拘謹,可靠,水平,精致反面：害怕,無效,死亡,秘密,陰險,邪惡,病態(tài)灰色正面：智能,成熟,財富,尊嚴,奉獻,抑制否認：混亂,衰變,具體,陰影,沮喪,厭煩文案大全實用文檔紅色正面：勝利激情愛力精力性別熱情、浪漫否認：血戰(zhàn)爭火危險怒撒旦火焰、暴力、侵略紅色在很多文化中代表的是停止的訊號,用于警告或禁止一些動作黃色正面：明亮、光芒、黃金收獲改革否認：懦弱叛逆嫉妒冒險疾病愚蠢紫色正面：懦弱,叛逆,妒忌,危機,否認：疾病,愚蠢創(chuàng)造、謎、忠誠、神秘、稀有創(chuàng)造、謎、忠誠、神秘、稀有綠色正面：植物,自然,春天,肥沃,希望,平安自然、穩(wěn)定、成長、反面：衰變,無經(jīng)驗,羨慕,貪欲,逃避現(xiàn)實,壞的運氣在北美文化中,綠色代表的是「行」,與環(huán)保意識有關,也經(jīng)常被連結(jié)到有關財政方面的事物藍色正面：天空,海洋,精神性,定度,和平,個體忠誠、平安、保守、寧靜、冷漠、悲傷否認：嚴寒,沮喪,憂郁,淫穢,神秘,保守主義文案大全實實用文檔4:字體標準①文字格式②連接樣式①文字格式12號字格式:字號12px字體宋體&Arialj行距21px粗體&ffl體14號字格式:字號14pxJ字體宋體&Arialj行距24px粗體&ffl體10號字格式:字號10px：字體Arial行距無 j細體20號字格式:字號20px黑體&Arial1行距無 j細體Arial,中文為宋體說明：10號字格式,12號字格式,14號字Arial,中文為宋體②連接樣式動態(tài)鏈接樣式： 鼠標初始：顏色#000099■1狀態(tài)下劃線文案大全

實用文檔鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線鼠標點擊：顏色#CC0000■1狀態(tài)下劃線鼠標結(jié)束：顏色#660066■1狀態(tài)下劃線靜態(tài)連接樣式： 鼠標初始：顏色#自定義口【狀態(tài)無鼠標經(jīng)過：顏色#自定義口j狀態(tài)下劃線鼠標點擊：顏色#自定義口j狀態(tài)下劃線鼠標結(jié)束：顏色#自定義口i狀態(tài)無重要鏈接樣式： 鼠標初始：顏色#CC0000■1狀態(tài)下劃線鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線鼠標點擊：顏色#CC0000■1狀態(tài)下劃線鼠標結(jié)束：顏色#CC0000■1狀態(tài)下劃線應用組合：①導航類②標題類③信息類④段落類⑤功能類 ⑥注釋類⑥表單類細體細體；顏色#333333■；行距21px細體；顏色#自定義口；行距21px①導航類a統(tǒng)一導航：12號文字格式=字號12px；字體宋體&Arial靜態(tài)連接樣式=鼠標初始：顏色#333333■1狀態(tài)無鼠標經(jīng)過：顏色#333333■1狀態(tài)下劃線鼠標點擊：顏色#333333■1狀態(tài)下劃線鼠標結(jié)束：顏色#333333■；狀態(tài)無文字其它說明=關鍵詞句之間用豎杠符號 |間隔b本頁導航：12號文字格式=字號12px：字體宋體&Arial靜態(tài)連接樣式=鼠標初始：顏色#自定義口【狀態(tài)無文案大全實用文檔鼠標經(jīng)過：顏色#自定義口j狀態(tài)下劃線鼠標點擊：顏色#自定義口j狀態(tài)下劃線鼠標結(jié)束： 顏色#自定義口i狀態(tài)無文字其它說明=關鍵詞句之間用豎杠符號|間隔c標題導航：12號文字格式=字號12px：字體宋體&Arialj細體j顏色#自定義口j行距21px靜態(tài)連接樣式=鼠標初始：顏色#000099■I狀態(tài)無鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線鼠標點擊：顏色#CC0000■1狀態(tài)下劃線鼠標結(jié)束：顏色#000099■；狀態(tài)無文字其它說明=關鍵詞句之間用橫杠符號-間隔d導航指向：12號文字格式=字號12px；字體宋體&Arial；細體；顏色#自定義口；行距21px靜態(tài)連接樣式=鼠標初始：顏色#自定義口【狀態(tài)無鼠標經(jīng)過：顏色#自定義口j狀態(tài)下劃線鼠標點擊：顏色#自定義口j狀態(tài)下劃線鼠標結(jié)束： 顏色#自定義口i狀態(tài)無文字其它說明=關鍵詞句之間用大于號符號 >間隔②標題類a版塊標題：20號文字格式=字號20pxj字體黑體j細體j顏色#自定義口：行距無靜態(tài)連接樣式=鼠標初始：顏色#自定義口【狀態(tài)無鼠標經(jīng)過：顏色#自定義口j狀態(tài)下劃線鼠標點擊：顏色#自定義口j狀態(tài)下劃線文案大全實用文檔鼠標結(jié)束： 顏色#自定義口j狀態(tài)無文字其它說明=標題文字位置前可選擇性修飾符號和圖片,默認為無b一類標題：14號文字格式=字號14px：字體宋體&Arial j粗體j顏色#自定義口靜態(tài)連接樣式=鼠標初始：顏色#000099■1狀態(tài)無鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線鼠標點擊：顏色#CC0000■1狀態(tài)下劃線鼠標結(jié)束：顏色#000099■；狀態(tài)無文字其它說明=標題文字位置前可選擇性修飾符號和圖片,默認為三角形符號行距無c二類標題：14號文字格式=字號14pxj字體宋體&Arial靜態(tài)連接樣式=鼠標初始：顏色#000099■1狀態(tài)無鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線鼠標點擊：顏色#CC0000■1狀態(tài)下劃線鼠標結(jié)束：顏色#000099■；狀態(tài)無文字其它說明=無細體j顏色#自定義口行距24pxd三類標題：12號文字格式=字號12px：字體宋體&Arial靜態(tài)連接樣式=鼠標初始：顏色#000099■1狀態(tài)無鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線鼠標點擊：顏色#CC0000■1狀態(tài)下劃線鼠標結(jié)束：顏色#000099■；狀態(tài)無文字其它說明=無粗體；顏色#自定義口行距21pxe四類標題：12號文字格式=字號12px：字體宋體&Arial靜態(tài)連接樣式=鼠標初始：顏色#000099■1狀態(tài)無鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線文案大全細體j顏色#自定義口行距21px實用文檔鼠標點擊：顏色#CC0000■鼠標結(jié)束：顏色#000099■文字其它說明=無狀態(tài)下劃線狀態(tài)無f頭條標題： 20號文字格式=字號20px；字體黑體&Arial靜態(tài)連接樣式=鼠標初始：顏色#CC0000■1狀態(tài)無鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線鼠標點擊：顏色#CC0000■1狀態(tài)下劃線鼠標結(jié)束：顏色#CC0000■；狀態(tài)無文字其它說明=無細體j顏色#自定義口j行距無g正文標題： 20號文字格式=字號20px；字體黑體&Arial文字其它說明=無細體；顏色#333333■；行距無h段落標題：14號文字格式=字號14px：字體宋體&Arial文字其它說明=無細體；顏色#333333■ ；行距24px③信息類a14工程列表：14號文字格式=字號14px：字體宋體&Arialj細體j顏色#自定義口j行距24px動態(tài)連接樣式=鼠標初始：顏色#000099■1狀態(tài)無鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線鼠標點擊：顏色#CC0000■1狀態(tài)下劃線鼠標結(jié)束：顏色#660066■；狀態(tài)無文字工程符號=點狀?&數(shù)字01&無符號文字其它說明=正常默認為點狀符號,排行性質(zhì)為數(shù)字符號,詞語或者小空間區(qū)域可采用無符號文案大全實用文檔b12工程列表：12號文字格式=字號12px；字體宋體&Arial；細體；顏色#自定義口；行距21px動態(tài)連接樣式=鼠標初始：顏色#000099■1狀態(tài)無鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線鼠標點擊：顏色#CC0000■1狀態(tài)下劃線鼠標結(jié)束：顏色#660066■；狀態(tài)無文字工程符號=點狀?&數(shù)字01&無符號文字其它說明=正常默認為點狀符號,排行性質(zhì)為數(shù)字符號,詞語或者小空間區(qū)域可采用無符號細體&fi體；顏色#自定義口；行距無c圖片列表： 12號文字格式=字細體&fi體；顏色#自定義口；行距無動態(tài)連接樣式=鼠標初始：顏色#000099■1狀態(tài)無鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線鼠標點擊：顏色#CC0000■1狀態(tài)下劃線鼠標結(jié)束：顏色#660066■；狀態(tài)無文字其它說明=正常圖片列表默認為細體,焦點圖處采用粗體④功能類行距無a普通功能文字：12號文字格式=字號12px：字體宋體&Arial；細體；顏色#0000行距無靜態(tài)連接樣式=鼠標初始：顏色#000099■1狀態(tài)無鼠標經(jīng)過：顏色#CC0000■1狀態(tài)下劃線鼠標點擊：顏色#CC0000■1狀態(tài)下劃線鼠標結(jié)束：顏色#000099■；狀態(tài)無文字其它說明=以下為各種功能文字應用形態(tài)更多：更多>> 更多應用于深背景連接連接色彩采用反白,連接顏色可自定義文案大全

實用文檔全文：［全文］實用文檔全文：［全文］詳細：［詳細］評論：［評論］翻頁功能：［上一頁］⑤注釋類a時間：12號文字格式=字號12px ：字體 宋體&Arial ； 細體；b投票：12號文字格式=字號14px ：字體 宋體&Arial ： 細體：c點擊：12號文字格式=字號14px ；字體 宋體&Arial ； 細體；無 ⑥表單類d表單文字：12號文字格式=字號12px：字體宋體&Arial；細體顏色#333333■顏色#333333■顏色#333333■；顏色#333333行距無行距無行距行距無⑥正文類正文文字：14號文字格式=字號14px字體宋體&Arial細體；顏色#333333■；行距