WEBUI設(shè)計(jì)要求規(guī)范

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

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

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

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