產(chǎn)品UE設(shè)計(jì)規(guī)范

產(chǎn)品UE設(shè)計(jì)規(guī)范 1.1.規(guī)范目的 31.2.規(guī)范的效益 31.3.適用的人員范圍 31.4.適用的產(chǎn)品范圍 31.5.設(shè)計(jì)原則 3.5.1用戶為中心 3 理性 4 2.規(guī)范 42.1.用戶視覺規(guī)范 42.1.1分辨率 52.1.2一鍵換膚 5.1.3對齊 52.2.導(dǎo)航規(guī)范 5.2.1菜單 52.3.基礎(chǔ)控件 5.3.1字體 52.3.2顏色 62.3.3按鈕 6 2.3.4輸入框 7.3.5圖標(biāo) 72.4.界面規(guī)范 71布局 8 2.6.幫助 14 3.1.持續(xù)迭代 511.概述1.1.規(guī)范目的給產(chǎn)品內(nèi)部的成員提供統(tǒng)一的規(guī)范和指導(dǎo)，使得設(shè)計(jì)人員能形成良好的思考習(xí)慣和設(shè)計(jì)習(xí)慣，提高整個(gè)產(chǎn)品質(zhì)量，使操作更加人性化、減輕用戶認(rèn)知負(fù)擔(dān)，改善產(chǎn)品用戶體驗(yàn)，提爭力。1.2.規(guī)范的效益規(guī)范的效益=提高效率(內(nèi)容覆蓋率×適用性×使用人數(shù))+保障質(zhì)量+統(tǒng)一體驗(yàn)規(guī)范可以幫助個(gè)人、團(tuán)隊(duì)以及整個(gè)企業(yè)提高效率和產(chǎn)出質(zhì)量，保障用戶體驗(yàn)統(tǒng)一。1.3.適用的人員范圍參與產(chǎn)品的所有人員。1.4.適用的產(chǎn)品范圍1.5.設(shè)計(jì)原則應(yīng)，而不是由開發(fā)者按自己的意愿把操作流程強(qiáng)加給用戶。述，簡化操作步驟。多做"減法"運(yùn)算，將不常用的功能區(qū)塊隱藏，以保持界面的簡潔，使用戶專注于主要業(yè)務(wù)操作流程，有利于提高軟件的易用性及可用性。用戶常用功能要能做到一鍵操作，非常用功能可適當(dāng)隱藏。按鈕次數(shù)以便于后續(xù)開展用戶行為分析。顯示信息的含義應(yīng)該非常明確，用戶不必再參考其它信息源。碼。1.5.5友好性用戶基本不用查閱幫助就能知道該界面的功能并進(jìn)行相關(guān)正確的操作。。盡量確保用戶在不使用鼠標(biāo)(只使用鍵盤)的情況下也可以流暢地完成一些常用的業(yè)務(wù)查詢檢索類頁面，在查詢條件輸入框內(nèi)按回車應(yīng)該自動(dòng)觸發(fā)查詢操作。用戶，并讓用戶確認(rèn)是否繼續(xù)操作，必要時(shí)應(yīng)該把操作造成的后果也告訴用戶。信息提示窗口的"確認(rèn)"及"取消"按鈕需要分別映射鍵盤按鍵"Y"和"N"。功能點(diǎn)擊無效。ab操作按鈕間切換，并注意Tab的操作應(yīng)該遵循從左向右、從上而下的順序。 (如果允許的話)以及在不退出系統(tǒng)的情況下從錯(cuò)誤狀態(tài)中恢復(fù)。系統(tǒng)響應(yīng)時(shí)間應(yīng)該適中，響應(yīng)時(shí)間過長，用戶就會(huì)感到不安和沮喪，而響應(yīng)時(shí)間過快也提示，避免用戶誤認(rèn)為沒響應(yīng)而重復(fù)操作;5秒以上顯示處理窗口，保存等待及提示或顯示進(jìn)度條;一個(gè)長時(shí)間的處理完成時(shí)應(yīng)給予完成警告信息。盡量保證所有頁面響應(yīng)時(shí)間不超過5秒。2.規(guī)范根據(jù)產(chǎn)品階段初步判斷需要主要產(chǎn)出基礎(chǔ)型。2.1.用戶視覺規(guī)范減少需要輸入的字?jǐn)?shù)，避免上下滾動(dòng)條，但是滾動(dòng)優(yōu)于翻頁，如果有太長的表單，還是設(shè)計(jì)成滾動(dòng)頁面更合理些；4、在不同的分辨率下應(yīng)該充分考慮到人機(jī)交互的規(guī)律，方便閱讀者閱讀，同時(shí)我們還要考慮到殘障人士的閱讀需要，比如文字和圖形在需要的時(shí)候可以放大。2.1.1分辨率1024*768，最高分辨率為1920*1080；嚴(yán)禁不同的分辨率界面元素比例失調(diào)，如圖標(biāo)、按鈕.2一鍵換膚頁面風(fēng)格的選取除了需要考慮一般的用戶感受外，還需要將用戶所在環(huán)境的因素考慮進(jìn)、.1.3對齊保持頁面內(nèi)元素對齊方式的一致，如無特殊情況應(yīng)避免同一頁面出現(xiàn)多種數(shù)據(jù)對齊方式。2.2.導(dǎo)航規(guī)范.2.1菜單保持菜單簡潔性及分類的準(zhǔn)確性，避免菜單深度超過3層；主菜單的寬度要接近，字?jǐn)?shù)不應(yīng)超過4個(gè)字；主菜單數(shù)目不應(yīng)太多，最好為單排布置；未完成功能必須隱藏處理，不要置于頁面內(nèi)容中，以免引起誤會(huì)；應(yīng)給出提示信息，如產(chǎn)品logo，鼠標(biāo)移入時(shí)應(yīng)懸浮‘返回首頁’。2.3.基礎(chǔ)控件.3.1字體UI。：不同語種的文字之間應(yīng)該有一個(gè)半角空格，漢字之間的標(biāo)點(diǎn)要全用全角符號，英文和數(shù)字周圍的括號用半角。文字默認(rèn)無下劃線。 2.3.2顏色詳見UI規(guī)范2.3.3按鈕文本錄入框提示信息應(yīng)簡明扼要，鍵入后消失。5、6個(gè)字的用第三種。(UI規(guī)范)保持功能及內(nèi)容描述一致-避免同一功能描述使用多個(gè)詞匯，如編輯和修改，新增和增加、新建，刪除、作廢、注銷和清除混用等。建議在項(xiàng)目開發(fā)階段建立一個(gè)產(chǎn)品詞典，包括產(chǎn)品中常用術(shù)語及描述，設(shè)計(jì)或開發(fā)人員嚴(yán)格按照產(chǎn)品詞典中的術(shù)語詞匯來展示文字信息。一規(guī)定為關(guān)閉。確認(rèn)操作按鈕放置左邊，取消或關(guān)閉按鈕放置于右邊。所有按鈕按照右對齊方式從右向左排序。同一界面相同或相近功能的按鈕用Frame框起來，同一界面同一功能或任務(wù)的元素放在集中位置，減少鼠標(biāo)移動(dòng)的距離。常用按鈕要支持快捷方式。在描述按鈕狀態(tài)時(shí)候按照默認(rèn)狀態(tài)、觸發(fā)(激活態(tài))、操作反饋、異常狀態(tài)-禁用和報(bào)2.3.3.1新增當(dāng)新增一條記錄或多條記錄時(shí)新增的記錄必須排在首頁首行，提交失敗后必須保存用戶已經(jīng)輸入的內(nèi)容，以便再次提交。提交時(shí)需要對主要標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值(空格)判斷。2.3.3.2修改默認(rèn)修改第一條記錄進(jìn)行修改；提交失敗后必須保存用戶已經(jīng)輸入的內(nèi)容，以便再次提交。提交時(shí)需要對主要標(biāo)識(shí)字段進(jìn)行重復(fù)值、空值(空格)判斷。2.3.3.3刪除彈出提示界面提醒不能刪除以及更明細(xì)的提示信息，或者彈出確認(rèn)界面是否要?jiǎng)h除該記錄以及關(guān)聯(lián)記錄(不建議)2.3.3.4查詢合2.3.3.5關(guān)閉當(dāng)頁面關(guān)閉時(shí)需要進(jìn)行頁面項(xiàng)判斷，如有變動(dòng)則給予提示；關(guān)閉后返回到父頁面。2.3.3.6保存保存進(jìn)程需要2-5秒窗口顯示處理信息提示，避免用戶誤認(rèn)為沒響應(yīng)而重復(fù)操作;5秒以上顯示處理窗口，保存等待及提示或顯示進(jìn)度條;一個(gè)長時(shí)間的處理完成時(shí)應(yīng)給予完成警告信息。2.3.3.7重置重置后與初始進(jìn)入此頁面時(shí)保持一致。2.3.4輸入框可輸入控件檢測到非法輸入后應(yīng)給出說明并能保存時(shí)自動(dòng)獲得焦點(diǎn)；復(fù)選框和選項(xiàng)框按選擇幾率的高低而先后排列；確保存后自動(dòng)截?cái)?；提交時(shí)給予提示，如》《》‘’等；界面打開時(shí)默認(rèn)鼠標(biāo)鍵入第一個(gè)可輸入框；必填項(xiàng)旁邊給出醒目標(biāo)識(shí)(*);；入框內(nèi)的文字處于全選狀態(tài)，如絕不要讓用戶提供程序中可自動(dòng)獲取或計(jì)算出來的信息，如BMI、價(jià)格策略等；備注需要顯示剩余能輸入的字?jǐn)?shù)說明，且文字是黑色的，數(shù)字是紅色的。2.3.5圖標(biāo)同一種圖標(biāo)在不同頁面必須保持完全一致，但尺寸可以放大或是縮??；所有圖標(biāo)必須配有文字主題，如需要隱藏文字主題，則需要增加鼠標(biāo)懸浮時(shí)的文字主題效果。菜單展開時(shí)明確當(dāng)前用戶操作的是哪個(gè)菜單，對于用戶當(dāng)前所在的菜單需要通過特定的視覺樣式或狀態(tài)加以區(qū)分。如下圖：特點(diǎn)：功能可見性、操作直接。2.4.界面規(guī)范長寬接近黃金點(diǎn)比例，切忌長寬比例失調(diào)、或?qū)挾瘸^長度。入框等已經(jīng)明確長寬的控件，不支持放大和縮放。系統(tǒng)對話框只支持關(guān)閉，不支持縮放。通常父窗體支持縮放時(shí)，子窗體沒有必要縮放。2.4.1布局2.3.2.1模板可根據(jù)需要設(shè)定固化站點(diǎn)每頁都出現(xiàn)的元素，通過利用模板快速創(chuàng)建WEB頁，可使整個(gè)站點(diǎn)具有統(tǒng)一的風(fēng)格。頁面布局以骨骼型為主，這種板式給人以和諧、理性的美，卡幾種。在頁面布局中，對各個(gè)功能區(qū)域的切分是按照像素和比例方式來進(jìn)行的，以1366*768頂部區(qū)，寬度是按照比例方式設(shè)置的，寬度按照100%設(shè)置，高度采樣所占的固定像素導(dǎo)航區(qū)和頂部區(qū)的配置要求是一樣的，寬度按照100%設(shè)置，高度結(jié)合頂部區(qū)的高度確樹形菜單區(qū)寬度是結(jié)合與內(nèi)容區(qū)之間的黃金比例切分，按照固定像素的方式確定；內(nèi)容區(qū)，高度和寬度方向布局都是按照比例方式來設(shè)置的。寬度定義：采用百分比定義頁面寬度(單位：%):采用%百分比設(shè)定頁面寬度時(shí)，可以不同寬度瀏覽器中顯示時(shí)布局要整齊、內(nèi)容排版比例協(xié)調(diào)。采用固定值定義頁面寬度(單位：px):用固定值設(shè)定頁面寬度時(shí)，隨著瀏覽器寬度的屏注意內(nèi)容在不同分辨率下的顯示情況。三在制作過程中一定要按上述三種分類來規(guī)劃好頁面中內(nèi)容表現(xiàn)形式。2.3.2.1.1正常改變區(qū)2.3.2.1.2有限改變區(qū)如下圖紅色標(biāo)注所示-----不正確的內(nèi)容表現(xiàn)：如下圖紅色標(biāo)注所示-----正確的內(nèi)容表 在瀏覽頁面時(shí)，人的正常視覺角度是15度，超出視覺范圍時(shí)會(huì)讓用戶產(chǎn)生內(nèi)容斷層的錯(cuò)覺，從而影響用戶的正常瀏覽，所以在制作頁面時(shí)要充分考慮用戶的可視范圍。2.3.2.1.3不可改變區(qū)內(nèi)容不會(huì)隨著分辨率的變化而改變，從而保持頁面內(nèi)容的可視性和完整性。如下圖紅色標(biāo)注所示-----正確的內(nèi)容表現(xiàn)：2.3.2.1表單列表表頭水平、垂直居中對齊，表頭應(yīng)采用不同于表格內(nèi)容的背景顏色，并要求對比明顯，表格表頭應(yīng)加粗，或字號稍大個(gè)單元格寬度的設(shè)置示。如果為定長，則居中顯示，如不固定長度，字符型數(shù)據(jù)保持左對齊，數(shù)值型右對齊(方表格中相鄰行需要提供有一定差異的淺色作為背景色。 2.5.交互規(guī)范2.5.1用戶操作規(guī)范用戶可以取消絕大部分操作，如表單取消保存，上傳的照片刪除等。把保存按鈕放在最容易點(diǎn)擊的位置。目前按鈕統(tǒng)一放在整個(gè)界面的右上方，右對齊。如表單數(shù)據(jù)發(fā)生變化而用戶未保存，則加載確認(rèn)框進(jìn)行提醒。2.5.1.1快捷鍵操作鼠標(biāo)與鍵盤一致性:盡量遵循可不用鼠標(biāo)的原則：應(yīng)用中的功能只用鍵盤也應(yīng)當(dāng)可以完成。但是，許多支持鍵盤上的enter操作一般為確定、保存、提交，TAB切換頁簽或控件遵循左上到右限制F5，IE工具欄、退格鍵(僅限于頁面不限輸入框)；界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前,位置也應(yīng)放在窗口上較醒目2.5.1.2容錯(cuò)性產(chǎn)品應(yīng)允許用戶犯錯(cuò)，首先要幫助用戶避免出錯(cuò)，如采用合適的控件，給予輸入幫助或啟示，保存進(jìn)行檢驗(yàn)。用戶操作后，需要加載提示框進(jìn)行提醒，加載錯(cuò)誤原因及解決方法，并能鎖定錯(cuò)誤位置。用戶刪除數(shù)據(jù)需要進(jìn)行確認(rèn)；用戶不可操作的功能按鈕隱藏或置灰。中斷思路，并費(fèi)時(shí)費(fèi)力的重新登陸，而且已進(jìn)行的操作也會(huì)因未存盤而全部丟失，因此需要在頁面設(shè)計(jì)時(shí)應(yīng)對輸入按照規(guī)則進(jìn)行校驗(yàn)，需要支持界面刷新依然為當(dāng)前界面。2.5.1.3彈窗范如下。屏幕對角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引用戶注意力的位置，在放置窗體時(shí)要注意利用這兩個(gè)位置。高和寬的比例應(yīng)大致保持3:4。 1、父窗體或主窗體的中心位置應(yīng)該在對角線焦點(diǎn)附近；2、子窗體位置應(yīng)該在主窗體的左上角或正中；3、多個(gè)子窗體彈出時(shí)應(yīng)該依次像右下方偏移，以顯示窗體出標(biāo)題為宜，以保證不遮蓋上層窗口標(biāo)題為準(zhǔn)，窗口嵌套層次最好不超過3層。4、當(dāng)父窗體與子窗體都存在同樣的查詢條件時(shí)，父窗體已輸入的查詢條件被帶到子窗體中；5、當(dāng)子窗體的操作影響了父窗體的數(shù)據(jù)時(shí)，子窗體的關(guān)閉返回必須刷新父窗體數(shù)據(jù)；6、允許直接關(guān)閉父窗體，關(guān)閉父窗體必須連同子窗體一起關(guān)閉。2.5.1.4操作提示1、預(yù)先信息提示所有交互進(jìn)行前需要提供給用戶預(yù)先應(yīng)該知道的提示信息。2、表單提交類號碼要多少位，如扣除賬號金額等，預(yù)先提示扣除金額數(shù)目，以及當(dāng)前賬戶金額是否足夠等。 4、差異化提示當(dāng)一個(gè)功能的規(guī)則與用戶習(xí)慣的規(guī)則具有一定的差異或者比較復(fù)雜時(shí)，需要給出提示，鏈接。注：提示信息用戶可勾選不在提示功能，當(dāng)用戶勾選時(shí)該提示不在彈出。生的結(jié)果展示部分。即提交結(jié)果后應(yīng)直接展示給用戶他提交的結(jié)果。2.5.1.5提示確認(rèn)框：提示信息字體與頁面字體保持一致。保持語言的一致性，如"確定"對應(yīng)"取消","是"對應(yīng)"否"。彈窗提示信息以不遮蓋與彈框信息相關(guān)頁面用戶可能需要核對的信息為基本原則，彈框在提交數(shù)據(jù)或是載有數(shù)據(jù)的頁面關(guān)閉，或其他需要和用戶確認(rèn)的交互場景，需要軟件能認(rèn)執(zhí)行結(jié)果的對話框，包含的情況有：性，給出‘確定’和‘取消’的選擇按鈕；是否保存更改的信息，給出‘是’和‘否’的選擇按鈕；確認(rèn)離開當(dāng)前頁面，給出‘是’和‘否’的選擇按鈕；是否繼續(xù)刪除操作，給出‘確定’和‘取消’的選擇按鈕。關(guān)的提示：操作確認(rèn)提示如刪除確認(rèn)提示框，這些信息的分類有：警告信息禁止信息操作執(zhí)行成功信息操作執(zhí)行失敗信息錯(cuò)誤信息幫助信息提示信息形式，對話框的頁面結(jié)構(gòu)如下圖： 標(biāo)題區(qū)：簡要給出此次提示信息的性質(zhì)，如警告：非法操作!圖標(biāo)區(qū)：給出和此次提示信息性質(zhì)匹配的圖標(biāo)；號；提示信息如有主語，統(tǒng)一為您；提示信息不宜太長，寬度應(yīng)不超過當(dāng)前窗口寬度的1/2,換行，多條信息提示使用1、2、3進(jìn)行排序。按鈕區(qū)：給出供用戶進(jìn)行選