UI設(shè)計標(biāo)準(zhǔn)規(guī)范個人總結(jié)
??設(shè)計規(guī)范介紹
??設(shè)計規(guī)范是適用于人機(jī)交互界面設(shè)計師，用戶體驗設(shè)計師，前端技術(shù)工程師，發(fā)布人，支持人員以及運維編輯人員參考，貫穿以用戶為中心的設(shè)計指導(dǎo)方向，根據(jù)界面的特點統(tǒng)一的規(guī)范，以達(dá)到提升用戶體驗，控制產(chǎn)品設(shè)計質(zhì)量，提高效率的目的。
??制定標(biāo)準(zhǔn)的意義
??統(tǒng)一設(shè)計風(fēng)格；色彩；布局。
??舒適的色彩搭配；結(jié)構(gòu)布局；操作流程。
??整體效果的美觀。
??便捷：能點選就不輸入；能少層級就不多；界面元素一目了然。
??web設(shè)計的標(biāo)準(zhǔn)
??寬度：如果是1280的分辨率，網(wǎng)頁設(shè)置成1258的會安全一些，正文寬度調(diào)整為980px，涉及到有背景圖案的專題頁時，寬度可設(shè)置成1440px，正文寬度調(diào)整為980px。
??顏色：設(shè)計時請使用256web安全色，在photoshop新建文件中最好選擇RGB/8位，因為其他模式的色域很寬，顏色范圍很廣，在不同顯示屏失色現(xiàn)象較為嚴(yán)重些?；顒訉ｎ}可根據(jù)需求進(jìn)行調(diào)整。
??字體：網(wǎng)頁正文一律采用宋體12號（12px）字體，標(biāo)題采用黑體，建議使用12號+14號的混合搭配，英文字體從9px開始就能清晰顯示，選擇空間很大，10px/11px/12px/13px都是常見的字體大小，字體請使用系統(tǒng)自帶字體。例：Tahoma\Aruak\Verdaba(注：建議使用)
??布局：版塊排版在視覺上盡量符合縱向分割，橫向模塊間距統(tǒng)一，縱向可根據(jù)頁面需求適當(dāng)區(qū)分。
??柵格：欄目間距8px-10px；產(chǎn)品寬度160px產(chǎn)品間距30px-40px（PS：間距40px應(yīng)用于二級類目，間距30px應(yīng)用于三級類目）
??iPhone界面尺寸
??推薦尺寸：手機(jī)端750*1334px（注：如是iPhoneX高度增加40px）
??PAD端1024*768px、2048*1536px
??PC端一般網(wǎng)站為996px
??在PS設(shè)計時一般參考iPhone的尺寸進(jìn)行設(shè)計，其他系統(tǒng)的手機(jī)尺寸也遵循了iPhone的設(shè)計原則，技術(shù)只需要在原效果對其進(jìn)行同比例縮放即可。
??手機(jī)/PAD字體標(biāo)準(zhǔn)
??標(biāo)題大?。?span style="">28像素；字體：微軟雅黑
??內(nèi)容大?。?span style="">22像素；字體：微軟雅黑
??時間大?。?span style="">16像素;字體：微軟雅黑
??菜單大小：36像素;字體：宋體
??字體色號：盡量使用同樣數(shù)字色值來區(qū)分深淺如（#000，#333，#999等）
??線條色號：盡量使用同樣英文字母如（#aaa，#ccc，#ddd等）
??圖標(biāo)
??在設(shè)計圖標(biāo)時公共重復(fù)使有頻率比較高的icon盡量使用PS中形狀制作
??軟件UI設(shè)計標(biāo)準(zhǔn)（pc端）
??字體：【中文字體】同級菜單，字體大小格式統(tǒng)一，正文一般采用12px，圖形字體與標(biāo)題字體一般采用14px。推薦使用“微軟雅黑”和”華文細(xì)黑“字體。不宜使用藝術(shù)字體，如華文彩云、隸書?！居⑽淖煮w】默認(rèn)字體使用“Tahoma”，大小12px。標(biāo)題字體使用“TrebuchetMS"
??文字對齊：表單字段名左對齊，或者中線對齊。
??界面配色：
??配色要求：主色調(diào)+次主色調(diào)+輔色；
??要統(tǒng)一色調(diào)，顏色的使用要正確：如安全軟件用黃色，高科技軟件使用藍(lán)色，環(huán)保軟件宜用綠色
??界面配色要有對比，在淺色背景上使用深色文字，深色背景上使用淺色文字；
??同一頁面，不宜采用3種以上顏色。
??鏈接應(yīng)該有3種顏色：未點擊，點擊中，點擊后。
??按鈕設(shè)計：
??宜使用圓色圖標(biāo)、漸變效果；
??圖標(biāo)大小通常為8的倍數(shù)，最小圖標(biāo)12px，16px，頂部24px或32px；
??圖標(biāo)樹的大小是16px，材的大小適合寬度為210px
??保持與系統(tǒng)整體特點以及風(fēng)格一致；
??使用讓用戶容易聯(lián)想到的事物，按鈕能清晰表達(dá)意思；
??內(nèi)頁中按鈕使用平面效果，不使用三維效果圖；
??按鈕應(yīng)具備簡潔的圖示效果，應(yīng)能夠讓使用者產(chǎn)生功能關(guān)聯(lián)反應(yīng)，群組內(nèi)按鈕應(yīng)該風(fēng)格統(tǒng)一，大小相似，標(biāo)題字體保持一致，在整個系統(tǒng)中的顯示位置要統(tǒng)一。功能差異大的按鈕應(yīng)該有所區(qū)別；
??按鈕應(yīng)該至少有4種狀態(tài)效果：點擊前鼠標(biāo)未放在上面時的狀態(tài)；鼠標(biāo)放在上面但未點擊的狀態(tài)；點擊時狀態(tài)；不能點擊狀態(tài)；
??按鈕上若沒有文字，必須提供鼠標(biāo)懸停提示信息；按鈕上有文字但是不足以準(zhǔn)確傳達(dá)按鈕的功能時，也應(yīng)該提供鼠標(biāo)懸停提示信息；
??操作功能按鈕向左對齊，按照使用頻度（重要程度）從左到右排列；設(shè)置功能按據(jù)和幫助按鈕向右對齊；
??折疊菜單的標(biāo)題欄應(yīng)該做成”展開/折疊“的響應(yīng)區(qū)域，方便鼠標(biāo)點擊；
??有圖標(biāo)和功能說明文字的，實點擊和說明文字，都可以達(dá)到預(yù)期的頁面；
??相同功能按鈕的描述一致性。
??文字校驗：
??必填項給出必填標(biāo)識，使用校驗機(jī)制確保不為空（包括僅有空格的情況）。若必輸項未填寫結(jié)或者填寫不符合規(guī)則就提交，應(yīng)給出說明信息并能自動獲得焦點；
??非必填項字段，Null插入數(shù)據(jù)庫不會出錯，讀取顯示為正常留空（不能顯示為Null）
??焦點從當(dāng)前輸入框移開后，立即對當(dāng)前輸入框進(jìn)行校驗，不合格則給出提示，引導(dǎo)用戶更正，身份證號、電子郵箱地址等特定字段的格式須符合需求的規(guī)定；
??所有字段必須有長度限制，并在激活輸入框時給出明確提示，直到焦點從當(dāng)前輸入框移開，若用戶在輸入字符達(dá)到最大允許的長度后繼續(xù)輸入，則不再響應(yīng)超出字符。（粘貼超出給出提示）
??密碼輸入框內(nèi)容顯示為”*“或者“.”；
??用戶名輸入框應(yīng)注明是否允許輸入漢字等；
??日期顯示格式為：yyyy-mm-dd。盡量使用時間控件，并屏蔽手動輸入，如果允許手機(jī)輸入，則不允許字符串、漢字、特殊字符等。不允許截止日期小于開始日期；
??沒有類型限制的輸入?yún)^(qū)域，應(yīng)可錄入漢字、字母、數(shù)字、特殊字符；
??數(shù)值字段只能輸入0~9，視情況決定是否可以輸入”*“以及”."
聯(lián)系客服
