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

1、 目錄目錄 1UI/UEUI/UE設(shè)計(jì)什么設(shè)計(jì)什么 2設(shè)計(jì)規(guī)范介紹設(shè)計(jì)規(guī)范介紹 3制定標(biāo)準(zhǔn)的意義制定標(biāo)準(zhǔn)的意義 4設(shè)計(jì)軟件設(shè)計(jì)軟件 5 設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)設(shè)計(jì)規(guī)范標(biāo)準(zhǔn) 6總結(jié)總結(jié) UE設(shè)計(jì)規(guī)范總結(jié) UI/UEUI/UE設(shè)計(jì)設(shè)計(jì)什么什么 UIUI即即User Interface(User Interface(用戶界面用戶界面) )的的 簡(jiǎn)稱簡(jiǎn)稱。UI設(shè)計(jì)是指對(duì)軟件的人機(jī) 交互、操作邏輯、界面美觀的整 體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟 件變得有個(gè)性有品味，還要讓軟 件的操作變得舒適、簡(jiǎn)單、自由， 充分體現(xiàn)軟件的定位和特點(diǎn)。 UEUE設(shè)計(jì)一般指游戲設(shè)計(jì)或游戲設(shè)計(jì)一般指游戲設(shè)計(jì)或游戲 相關(guān)設(shè)計(jì)，還有網(wǎng)站的相關(guān)

2、設(shè)計(jì)，還有網(wǎng)站的ueue設(shè)計(jì)，設(shè)計(jì)， 其實(shí)就是其實(shí)就是UserExperienceUserExperience的縮寫(xiě)。的縮寫(xiě)。 用戶體驗(yàn)（userexperience）是指 用戶訪問(wèn)一個(gè)網(wǎng)站或者使用一個(gè) 產(chǎn)品時(shí)的全部體驗(yàn)。他們的印象 和感覺(jué)，包括情感、信仰、 愛(ài)好、認(rèn)知印象、生 理和心理反應(yīng)，以及 接受的問(wèn)題疑惑和 BUG的程度。 UE設(shè)計(jì)規(guī)范總結(jié) 設(shè)計(jì)規(guī)范設(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ì)量，提高效率的目的

3、。 UE設(shè)計(jì)規(guī)范總結(jié) 制定標(biāo)準(zhǔn)的制定標(biāo)準(zhǔn)的意義意義 操作 方便 溝通 便捷 省時(shí) 省力 統(tǒng)一：設(shè)計(jì)風(fēng)格；色彩；布局。 舒適：色彩搭配；結(jié)構(gòu)布局；操作流程。 美觀：整體效果的美觀。 便捷：能點(diǎn)選就不輸入； 能少層級(jí)就不多； 界面元素一目了然。 UE設(shè)計(jì)規(guī)范總結(jié) 設(shè)計(jì)軟件設(shè)計(jì)軟件 Photoshop、Illustrator、PageMaker、 CorelDraw、Freehand等。 PhotoshopIllustrator CorelDraw 設(shè)計(jì)師常用的軟件：設(shè)計(jì)師常用的軟件： PS：剛開(kāi)始做設(shè)計(jì)的時(shí)候很糾結(jié)選擇哪款設(shè)計(jì)軟件，其實(shí)一個(gè)作品好與不好不關(guān)乎你 用的是什么軟件，只要你熟練任何一個(gè)軟

4、件都能設(shè)計(jì)出好的作品。所以希望看到這里 的新手朋友們不要再糾結(jié)用什么軟件設(shè)計(jì)，只要能表達(dá)出想要的東西都是好作品。 UE設(shè)計(jì)規(guī)范總結(jié) 設(shè)計(jì)分類及標(biāo)準(zhǔn)設(shè)計(jì)分類及標(biāo)準(zhǔn) 手機(jī)客戶端設(shè)計(jì)手機(jī)客戶端設(shè)計(jì) PADPAD客戶端設(shè)計(jì)客戶端設(shè)計(jì)軟件軟件UIUI設(shè)計(jì)設(shè)計(jì) WebWeb設(shè)計(jì)設(shè)計(jì) UE設(shè)計(jì)規(guī)范總結(jié) u主題鮮明 u形式與內(nèi)容統(tǒng)一 u強(qiáng)調(diào)整體 u減少層次 WEBWEB設(shè)計(jì)要求及原則設(shè)計(jì)要求及原則 UE設(shè)計(jì)規(guī)范總結(jié) WEBWEB設(shè)計(jì)的特點(diǎn)設(shè)計(jì)的特點(diǎn) l交互性：及時(shí)交互，主動(dòng)交互 l持續(xù)性：信息的技續(xù)更新 l多維性：源于超鏈接，導(dǎo)航清晰 l多媒體：綜合運(yùn)用多媒體元素 l布局不可控： 操作系統(tǒng) 不同、瀏覽器種類與

5、版本不同、 屏幕大小與分辨率不同。 UE設(shè)計(jì)規(guī)范總結(jié) WebWeb設(shè)計(jì)設(shè)計(jì)的標(biāo)準(zhǔn)的標(biāo)準(zhǔn) 網(wǎng)頁(yè)寬度網(wǎng)頁(yè)寬度 如果是1280的分辨率，網(wǎng)頁(yè)設(shè)置成1258 的寬度會(huì)安全一些，正文寬度設(shè)計(jì)為 980px，涉及到有背景圖案的專題頁(yè)時(shí)， 寬度可設(shè)置成1440px，正文寬度設(shè)計(jì)為 980px。 顏色顏色 設(shè)計(jì)時(shí)請(qǐng)使用256Web安全色，在 photoshop新建文件中最好選擇RGB/8位， 因?yàn)槠渌Ｊ降纳蚝軐?，顏色范圍?廣，在不同顯示屏失色現(xiàn)象較為嚴(yán)重些。 活動(dòng)專題可根據(jù)需求進(jìn)行調(diào)整。 UE設(shè)計(jì)規(guī)范總結(jié) 網(wǎng)頁(yè)正文一律采用宋體12號(hào)(12px)字體，標(biāo)題采用黑體。建議使用12號(hào)+14號(hào)的混 合搭配。 英

6、文字體從9px開(kāi)始就能清晰顯示，選擇空間很大。10px/11px/12px/13px都是常 見(jiàn)的字體大小，字體請(qǐng)使用系統(tǒng)自帶字體。例：TahomaArialVerdana 版塊排版在視覺(jué)上盡量符合縱向分割，橫向模塊間距統(tǒng)一，縱向可根據(jù)頁(yè) 面需求適當(dāng)區(qū)分。 欄目間距8px-10px 產(chǎn)品寬度160px 產(chǎn)品間距30px-40px（PS：間距40px應(yīng)用于二級(jí)類目，間距 30px應(yīng)用于三級(jí)類目） 字體字號(hào) 頁(yè)面布局 網(wǎng)頁(yè)柵格 產(chǎn)品柵格 WEBWEB設(shè)計(jì)設(shè)計(jì)的標(biāo)準(zhǔn)的標(biāo)準(zhǔn) UE設(shè)計(jì)規(guī)范總結(jié) 表單表單 邊框默認(rèn)顏色：#A0A0A0 輸入框高度：20px居中 字體大?。?2px/14px（可選） 6px

7、UE設(shè)計(jì)規(guī)范總結(jié) u簡(jiǎn)潔 u易于操作 u避免輸入 u信息扁平化 u增強(qiáng)交互 WEBWEB設(shè)計(jì)要求及原則設(shè)計(jì)要求及原則 UE設(shè)計(jì)規(guī)范總結(jié) 手機(jī)客戶端操作平臺(tái)介紹手機(jī)客戶端操作平臺(tái)介紹 不同的平臺(tái)手機(jī)的設(shè)計(jì)風(fēng)格、操作方式、硬件配置都存在很大的差異。 個(gè)平臺(tái)都有各自的設(shè)計(jì)指南（UI Style），其對(duì)應(yīng)的手機(jī)的硬件也有各自 的特點(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)的硬件特征，使自

8、己設(shè)計(jì)的應(yīng)用不僅符合平臺(tái)的交互特性， 并能兼容平臺(tái)上硬件使用習(xí) 慣，提高應(yīng)用的可用性。當(dāng)前的主流平臺(tái)主 要包括iOS、Android、Symbian、Blackberry、Win Phone7、Web OS等。 UE設(shè)計(jì)規(guī)范總結(jié) IPHONEIPHONE界面尺寸界面尺寸 PS：我在設(shè)計(jì)時(shí)一般參考iPhone的尺寸進(jìn)行設(shè)計(jì)，其他系統(tǒng)的手機(jī)尺寸也遵循了 iPhone的設(shè)計(jì)原則，技術(shù)只需要在原效果圖對(duì)其進(jìn)行同比例縮放即可。 UE設(shè)計(jì)規(guī)范總結(jié) IPHONEIPHONE圖標(biāo)尺寸圖標(biāo)尺寸 UE設(shè)計(jì)規(guī)范總結(jié) PADPAD客戶端操作平臺(tái)介紹客戶端操作平臺(tái)介紹 當(dāng)前的主流平臺(tái)主要包括iOS、Android、Wi

9、n Phone7等。 UE設(shè)計(jì)規(guī)范總結(jié) 尺寸尺寸 基本分為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è)。 總的趨勢(shì)：數(shù)量有1個(gè)的，3個(gè)的，4個(gè)的，但絕大多數(shù)都 放置在屏幕窄的一側(cè)，很少把物理按鍵分散放置的。 屏幕默認(rèn)

10、方屏幕默認(rèn)方 向向 水平方向的居多，僅三星為代表的7寸屏默認(rèn)豎直方向。 PADPAD屏幕分辨率及尺寸屏幕分辨率及尺寸 UE設(shè)計(jì)規(guī)范總結(jié) IPADIPAD界面尺寸界面尺寸 UE設(shè)計(jì)規(guī)范總結(jié) I IPADPAD界面尺寸界面尺寸 UE設(shè)計(jì)規(guī)范總結(jié) 手機(jī)手機(jī)/PAD/PAD客戶端字體標(biāo)準(zhǔn)客戶端字體標(biāo)準(zhǔn) 文本字體 標(biāo)題 大小:28像素 字體:微軟雅黑 顏色: #505050 內(nèi)容 大小:22像素 字體:微軟雅黑 顏色: #6e6e6e 時(shí)間 大小:16像素 字體:微軟雅黑 顏色: #828282 菜單 大小:36像素 字體:宋體字 PS：合適的字體設(shè)置可以減少了用戶視覺(jué)上的干擾、增強(qiáng)了引導(dǎo)性，讓原本“擁

11、擠”了的各種內(nèi) 容和信息的界面顯得更加地“透氣”。 UE設(shè)計(jì)規(guī)范總結(jié) 軟件軟件UIUI通用設(shè)計(jì)原則通用設(shè)計(jì)原則 字 體 使 用 原 則 界 面 配 色 原 則 按 鈕 設(shè) 計(jì) 原 則 文 本 校 驗(yàn) 原 則 兼 容 性 和 個(gè) 性 化 原 則 UE設(shè)計(jì)規(guī)范總結(jié) 字體使用原則字體使用原則 中文字體中文字體 l 同級(jí)菜單，字體大小格式統(tǒng)一。 l 使用的字體大小要規(guī)范：正文一般采用12px。圖形字體與標(biāo)題字體一般 采 用14px。 l 推薦使用“微軟雅黑”和“華文細(xì)黑”字體。不宜使用藝術(shù)字體，如華 文彩云、 隸書(shū)。 英文字體英文字體 l 默認(rèn)字體使用“Tahoma”，大小12px。標(biāo)題字體使用“Tr

12、ebuchet MS。” UE設(shè)計(jì)規(guī)范總結(jié) l 表單字段名左對(duì)齊，或者中線對(duì)齊。 文字對(duì)齊原則文字對(duì)齊原則 l 主色調(diào)+次主色調(diào)+輔色。 l 要統(tǒng)一色調(diào)，顏色的使用要正確：如安全軟件用黃色；高科技軟件使用 藍(lán)色； 環(huán)保軟件易用用綠色。 l 界面配色要有對(duì)比，在淺色背景上使用深色文字，深色背景上使用淺色 文字 l 同一頁(yè)面，不宜采用3種以上顏色。 l 鏈接應(yīng)該有3種顏色：未點(diǎn)擊，點(diǎn)擊中，點(diǎn)擊后。 界面配色原則界面配色原則 UE設(shè)計(jì)規(guī)范總結(jié) 按鈕設(shè)計(jì)原則按鈕設(shè)計(jì)原則 宜使用圓角圖標(biāo)、漸變效果。 圖標(biāo)大小通常為8的倍數(shù)，最小圖標(biāo)12px、16px，頂部24px或32px圖片。 圖標(biāo)樹(shù)的大小是16px

13、，樹(shù)的大小適合寬度為210px。 保持與系統(tǒng)整體特點(diǎn)以及風(fēng)格一致。 使用讓用戶容易聯(lián)想到的事物，按鈕能清晰表達(dá)意思。 內(nèi)頁(yè)中按鈕使用平面效果、不使用三維效果圖。 按鈕應(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)一。功能差異大的按鈕應(yīng)該有所區(qū)別。 UE設(shè)計(jì)規(guī)范總結(jié) 按鈕應(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)。 按鈕上若沒(méi)有文字，必須提供鼠標(biāo)懸停提示信息；按鈕上有文字但是不 足以 準(zhǔn)確傳達(dá)按鈕的功能時(shí)，也應(yīng)該提供鼠標(biāo)懸停提示信息。

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