UE設(shè)計(jì)規(guī)范總結(jié)

1、目錄1UI/UE設(shè)計(jì)什么2設(shè)計(jì)規(guī)范介紹3制定標(biāo)準(zhǔn)的意義4設(shè)計(jì)軟件5設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)6總結(jié)UI/UE設(shè)計(jì)什么UI即User Interface(用戶界面)的簡(jiǎn)稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。UE設(shè)計(jì)一般指游戲設(shè)計(jì)或游戲相關(guān)設(shè)計(jì)，還有網(wǎng)站的ue設(shè)計(jì)，其實(shí)就是UserExperience的縮寫。用戶體驗(yàn)（userexperience）是指用戶訪問一個(gè)網(wǎng)站或者使用一個(gè)產(chǎn)品時(shí)的全部體驗(yàn)。他們的印象和感覺，包括情感、信仰、 愛好、認(rèn)知印象、生 理和心理反應(yīng)，以及 接受的問題

2、疑惑和 BUG的程度。設(shè)計(jì)規(guī)范介紹設(shè)計(jì)規(guī)范是適用于人機(jī)交互界面設(shè)計(jì)師、用戶體驗(yàn)設(shè)計(jì)師，前臺(tái)技術(shù)工程師，發(fā)布人支持人員以及運(yùn)維編輯人員的參考。貫穿以用戶為中心的設(shè)計(jì)指導(dǎo)方向，根據(jù)界面的特點(diǎn)統(tǒng)一的規(guī)范，以達(dá)到提升用戶體驗(yàn)，控制產(chǎn)品設(shè)計(jì)質(zhì)量，提高效率的目的。制定標(biāo)準(zhǔn)的意義操作方便溝通便捷省時(shí)省力統(tǒng)一：設(shè)計(jì)風(fēng)格；色彩；布局。舒適：色彩搭配；結(jié)構(gòu)布局；操作流程。美觀：整體效果的美觀。便捷：能點(diǎn)選就不輸入；能少層級(jí)就不多； 界面元素一目了然。設(shè)計(jì)軟件Photoshop、Illustrator 、PageMaker、 CorelDraw、Freehand等。PhotoshopIllustratorCorel

3、Draw設(shè)計(jì)師常用的軟件：PS：剛開始做設(shè)計(jì)的時(shí)候很糾結(jié)選擇哪款設(shè)計(jì)軟件，其實(shí)一個(gè)作品好與不好不關(guān)乎你用的是什么軟件，只要你熟練任何一個(gè)軟件都能設(shè)計(jì)出好的作品。所以希望看到這里的新手朋友們不要再糾結(jié)用什么軟件設(shè)計(jì)，只要能表達(dá)出想要的東西都是好作品。設(shè)計(jì)分類及標(biāo)準(zhǔn)手機(jī)客戶端設(shè)計(jì)PAD客戶端設(shè)計(jì)軟件UI設(shè)計(jì)Web設(shè)計(jì)u主題鮮明u形式與內(nèi)容統(tǒng)一u強(qiáng)調(diào)整體u減少層次WEB設(shè)計(jì)要求及原則WEB設(shè)計(jì)的特點(diǎn)l交互性：及時(shí)交互，主動(dòng)交互l持續(xù)性：信息的技續(xù)更新l多維性：源于超鏈接，導(dǎo)航清晰l多媒體：綜合運(yùn)用多媒體元素l布局不可控： 操作系統(tǒng)不同、瀏覽器種類與版本不同、屏幕大小與分辨率不同。Web設(shè)計(jì)的標(biāo)準(zhǔn)網(wǎng)頁

4、寬度如果是1280的分辨率，網(wǎng)頁設(shè)置成1258的寬度會(huì)安全一些，正文寬度設(shè)計(jì)為980px，涉及到有背景圖案的專題頁時(shí)，寬度可設(shè)置成1440px，正文寬度設(shè)計(jì)為980px。顏色設(shè)計(jì)時(shí)請(qǐng)使用256Web安全色，在photoshop新建文件中最好選擇RGB/8位，因?yàn)槠渌Ｊ降纳蚝軐挘伾秶軓V，在不同顯示屏失色現(xiàn)象較為嚴(yán)重些?；顒?dòng)專題可根據(jù)需求進(jìn)行調(diào)整。網(wǎng)頁正文一律采用宋體12號(hào)(12px)字體，標(biāo)題采用黑體。建議使用12號(hào)+14號(hào)的混合搭配。英文字體從9px開始就能清晰顯示，選擇空間很大。10px/11px/12px/13px都是常見的字體大小，字體請(qǐng)使用系統(tǒng)自帶字體。例：TahomaAri

5、alVerdana版塊排版在視覺上盡量符合縱向分割，橫向模塊間距統(tǒng)一，縱向可根據(jù)頁面需求適當(dāng)區(qū)分。欄目間距8px-10px產(chǎn)品寬度160px 產(chǎn)品間距30px-40px（PS：間距40px應(yīng)用于二級(jí)類目，間距30px應(yīng)用于三級(jí)類目）字體字號(hào)頁面布局網(wǎng)頁柵格產(chǎn)品柵格WEB設(shè)計(jì)的標(biāo)準(zhǔn)表單邊框默認(rèn)顏色：#A0A0A0 輸入框高度：20px居中字體大小：12px/14px（可選）6pxu簡(jiǎn)潔u易于操作u避免輸入u信息扁平化u增強(qiáng)交互WEB設(shè)計(jì)要求及原則手機(jī)客戶端操作平臺(tái)介紹不同的平臺(tái)手機(jī)的設(shè)計(jì)風(fēng)格、操作方式、硬件配置都存在很大的差異。個(gè)平臺(tái)都有各自的設(shè)計(jì)指南（UI Style），其對(duì)應(yīng)的手機(jī)的硬件也有

6、各自的特點(diǎn)， 如iPhone的home鍵，Android 的back鍵，blackberry的滾輪等等。特別提一下Palm，Palm的web OS真的值得手機(jī)交互設(shè)計(jì)師研究一下（手機(jī) Palm pre）。因此，在設(shè)計(jì)上，不僅要了解平臺(tái)的設(shè)計(jì)指南，同時(shí)需要考慮平臺(tái)的硬件特征，使自己設(shè)計(jì)的應(yīng)用不僅符合平臺(tái)的交互特性，并能兼容平臺(tái)上硬件使用習(xí) 慣，提高應(yīng)用的可用性。當(dāng)前的主流平臺(tái)主要包括iOS、Android、Symbian、Blackberry、Win Phone7、Web OS等。IPHONE界面尺寸PS：我在設(shè)計(jì)時(shí)一般參考iPhone的尺寸進(jìn)行設(shè)計(jì)，其他系統(tǒng)的手機(jī)尺寸也遵循了 iPhone的設(shè)

7、計(jì)原則，技術(shù)只需要在原效果圖對(duì)其進(jìn)行同比例縮放即可。IPHONE圖標(biāo)尺寸PAD客戶端操作平臺(tái)介紹當(dāng)前的主流平臺(tái)主要包括iOS、Android、Win Phone7等。尺寸尺寸 基本分為3個(gè)尺寸，5寸（dell streak），7寸（多），10寸（多）。 屏幕分辨率屏幕分辨率 800480和1024600的居多屏幕比例屏幕比例 16:10,17:10，都不是傳統(tǒng)的4:3的比例，這和iPad比較大的區(qū)別物理按鍵數(shù)量物理按鍵數(shù)量和位置和位置1.1. 類似iPad的單主屏鍵，位于窄側(cè)的正中 2. Android Pad的多按鈕，位于窄側(cè)靠上位置 3. aigo Pad e700按鈕分別放置在窄的兩側(cè)。

8、總的趨勢(shì)：數(shù)量有1個(gè)的，3個(gè)的，4個(gè)的，但絕大多數(shù)都放置在屏幕窄的一側(cè)，很少把物理按鍵分散放置的。 屏幕默認(rèn)方屏幕默認(rèn)方 向向 水平方向的居多，僅三星為代表的7寸屏默認(rèn)豎直方向。PAD屏幕分辨率及尺寸IPAD界面尺寸IPAD界面尺寸手機(jī)/PAD客戶端字體標(biāo)準(zhǔn) 文本字體 標(biāo)題 大小:28像素 字體:微軟雅黑 顏色: #505050 內(nèi)容 大小:22像素 字體:微軟雅黑 顏色: #6e6e6e 時(shí)間 大小:16像素 字體:微軟雅黑 顏色: #828282 菜單 大小:36像素 字體:宋體字 PS：合適的字體設(shè)置可以減少了用戶視覺上的干擾、增強(qiáng)了引導(dǎo)性，讓原本“擁擠”了的各種內(nèi) 容和信息的界面顯得更

9、加地“透氣”。軟件UI通用設(shè)計(jì)原則字體使用原則界面配色原則按鈕設(shè)計(jì)原則文本校驗(yàn)原則兼容性和個(gè)性化原則字體使用原則中文字體l 同級(jí)菜單，字體大小格式統(tǒng)一。l 使用的字體大小要規(guī)范：正文一般采用12px。圖形字體與標(biāo)題字體一般采 用14px。l 推薦使用“微軟雅黑”和“華文細(xì)黑”字體。不宜使用藝術(shù)字體，如華文彩云、 隸書。英文字體l 默認(rèn)字體使用“Tahoma”，大小12px。標(biāo)題字體使用“Trebuchet MS?！眑 表單字段名左對(duì)齊，或者中線對(duì)齊。文字對(duì)齊原則l 主色調(diào)+次主色調(diào)+輔色。l 要統(tǒng)一色調(diào)，顏色的使用要正確：如安全軟件用黃色；高科技軟件使用藍(lán)色； 環(huán)保軟件易用用綠色。l 界面配色

10、要有對(duì)比，在淺色背景上使用深色文字，深色背景上使用淺色文字l 同一頁面，不宜采用3種以上顏色。l 鏈接應(yīng)該有3種顏色：未點(diǎn)擊，點(diǎn)擊中，點(diǎn)擊后。界面配色原則按鈕設(shè)計(jì)原則宜使用圓角圖標(biāo)、漸變效果。圖標(biāo)大小通常為8的倍數(shù)，最小圖標(biāo)12px、16px，頂部24px或32px圖片。圖標(biāo)樹的大小是16px，樹的大小適合寬度為210px。保持與系統(tǒng)整體特點(diǎn)以及風(fēng)格一致。使用讓用戶容易聯(lián)想到的事物，按鈕能清晰表達(dá)意思。內(nèi)頁中按鈕使用平面效果、不使用三維效果圖。按鈕應(yīng)具備簡(jiǎn)潔的圖示效果，應(yīng)能夠讓使用者產(chǎn)生功能關(guān)聯(lián)反應(yīng)，群組內(nèi)按 鈕應(yīng)該風(fēng)格統(tǒng)一，大小相似，標(biāo)題字體保持一致，在整個(gè)系統(tǒng)中的顯示位置要統(tǒng)一。功能差異大

11、的按鈕應(yīng)該有所區(qū)別。按鈕應(yīng)該至少有4種狀態(tài)效果：點(diǎn)擊前鼠標(biāo)未放在上面時(shí)的狀態(tài)；鼠標(biāo)放在 上面但未點(diǎn)擊的狀態(tài)；點(diǎn)擊時(shí)狀態(tài)；不能點(diǎn)擊時(shí)狀態(tài)。按鈕上若沒有文字，必須提供鼠標(biāo)懸停提示信息；按鈕上有文字但是不足以 準(zhǔn)確傳達(dá)按鈕的功能時(shí)，也應(yīng)該提供鼠標(biāo)懸停提示信息。操作功能按鈕向左對(duì)齊，按照使用頻度（重要程度）從左到右排列；設(shè)置功 能按鈕和幫助按鈕向右對(duì)齊。折疊菜單的標(biāo)題欄應(yīng)該做成” 展開/折疊”的響應(yīng)區(qū)域， 方便鼠標(biāo)點(diǎn)擊。有圖標(biāo)和功能說明文字的， 實(shí)現(xiàn)點(diǎn)擊圖片和說明文字， 都可以達(dá)到預(yù)期的頁面。相同功能按鈕的描述一致性文本校驗(yàn)原則必填項(xiàng)給出必填標(biāo)識(shí)，使用校驗(yàn)機(jī)制確保不為空（包括僅有空格的情況）。 若必輸項(xiàng)未填寫完畢或者填寫不符合規(guī)則就提交，應(yīng)給出說明信息并能自動(dòng)獲得焦點(diǎn)。非必填項(xiàng)字段，Null插入數(shù)據(jù)庫不會(huì)出錯(cuò)，讀取顯示為正常留空（不能顯示 為Null）。焦點(diǎn)從當(dāng)前輸入框移開后，立即對(duì)當(dāng)前輸入框進(jìn)行校驗(yàn)，不合格則給出提示， 引導(dǎo)用戶更正。身份證號(hào)、電子郵箱地址等特定字段的格式須符合需求的規(guī)定。所有字段必須有長(zhǎng)度限制，并在激活輸入框時(shí)給出明確提示，直到焦點(diǎn)從當(dāng) 前輸入框移開。若用戶在輸入字符達(dá)到最大允許的長(zhǎng)度后繼續(xù)輸入，則不再響應(yīng)超出字符。（粘貼 超出給出提示）密碼輸入框內(nèi)容