第三方服務(wù)UIUE設(shè)計(jì)規(guī)范

無限訊奇信息技術(shù)有限公司－12580綜合信息門戶第三方合作業(yè)務(wù)產(chǎn)品UI/UE設(shè)計(jì)規(guī)范UmessageHumanInterfaceGuideline12580合作業(yè)務(wù)產(chǎn)品UI/UE設(shè)計(jì)規(guī)范概述北京無限訊奇信息技術(shù)有限公司（以下簡稱“無限訊奇”）是中國移動12580綜合信息服務(wù)門戶的獨(dú)家合作伙伴，公司承建中國移動的全國12580綜合信息服務(wù)門戶及運(yùn)營支撐平臺，并負(fù)責(zé)信息和服務(wù)運(yùn)營。12580采用的信息處理平臺（DCP即DataCollectionPlatform）由訊奇提供，該平臺承擔(dān)著為不同渠道采集的信息進(jìn)行篩選，導(dǎo)入，維護(hù)的工作，并要保證信息的準(zhǔn)確性和豐富性以及信息覆蓋范圍的廣域性。合作伙伴是12580平臺信息及合作業(yè)務(wù)產(chǎn)品的主要提供者。全國范圍的信息采集量需求的增加，信息分類需求的細(xì)化，無限訊奇對現(xiàn)有系統(tǒng)平臺及查詢信息的準(zhǔn)確性，廣域性，及時性提出了更高的要求。加強(qiáng)對合作伙伴的管理勢在必行。借助電子信息平臺，可以規(guī)范，準(zhǔn)確，高效的對合作伙伴及其提供信息進(jìn)行管理。制定目的本規(guī)范是用來指導(dǎo)無限訊奇的合作伙伴的合作業(yè)務(wù)產(chǎn)品開發(fā)人員和視覺設(shè)計(jì)人員在開發(fā)或升級改版公司的相關(guān)產(chǎn)品的，本規(guī)范用以保證12580綜合信息門戶的產(chǎn)品的視覺和交互行為的一致性和兼容性。遵循這個規(guī)范可以獲得很多好處，因?yàn)椋盒略O(shè)計(jì)的產(chǎn)品的使用界面和操作習(xí)慣和原有的產(chǎn)品保持一致能夠縮短用戶使用新系統(tǒng)的學(xué)習(xí)時間和學(xué)習(xí)成本；良好的用戶交互設(shè)計(jì)系統(tǒng)能夠幫助用戶更快的達(dá)到目的；保持12580綜合信息門戶的所有產(chǎn)品的一致性和良好的連貫性，便于版本升級；簡化您的產(chǎn)品設(shè)計(jì)文檔和操作說明的撰寫，因?yàn)楹芏嘟缑婧蜆?biāo)準(zhǔn)的交互行為的描述不再需要過多的解釋；便于12580綜合信息門戶整體提升用戶體驗(yàn)；保證所有12580綜合信息門戶合作業(yè)務(wù)產(chǎn)品的易用，友好，美觀和強(qiáng)大；使用范圍12580綜合信息門戶合作業(yè)務(wù)的提供方即無限訊奇的合作伙伴的所有的產(chǎn)品開發(fā)人員，包括：產(chǎn)品經(jīng)理、UE工程師、文檔工程師、UI工程師和其它相關(guān)技術(shù)開發(fā)人員。文檔結(jié)構(gòu)UmessageHumanInterfaceGuideline 11 12580合作業(yè)務(wù)產(chǎn)品UI/UE設(shè)計(jì)規(guī)范概述 21.1 制定目的 21.2 使用范圍 21.3 文檔結(jié)構(gòu) 32 用戶界面設(shè)計(jì)準(zhǔn)則 42.1 界面的易用性 42.2 界面的規(guī)范性 42.3 界面的合理性 42.4 界面的獨(dú)特性 42.5 界面的美觀性 43 用戶界面交互準(zhǔn)則 43.1 界面進(jìn)入容易 43.2 界面使用簡便 54 用戶界面執(zhí)行細(xì)則 54.1 合作業(yè)務(wù)區(qū) 54.2 通用格式（CommonFormats） 64.3 色調(diào)（Colour） 74.4 文字（Font） 84.5 按鈕（Button） 84.6 圖形（Figure） 94.7 表格（Table） 94.8 框架（Frame） 94.9 鼠標(biāo)（mouse） 104.10 日期選擇（DatePicker） 104.11 顯示和隱藏（HideandShow） 104.12 提示信息（InlineMessagingandTips） 11用戶界面設(shè)計(jì)準(zhǔn)則界面的易用性產(chǎn)品界面菜單導(dǎo)航/按鈕/名稱應(yīng)該使用容易理解的語言，用詞準(zhǔn)確，要與同一界面上的其他菜單導(dǎo)航/按鈕易于區(qū)分，淺顯易懂最好。理想的情況是用戶不用查閱幫助就能知道該界面的功能并進(jìn)行相關(guān)的正確操作。始終提示用戶所在位置并為其提供返回主頁或開始狀態(tài)的路徑，避免用戶出現(xiàn)任何迷惑和思考。界面的規(guī)范性產(chǎn)品界面設(shè)計(jì)遵循規(guī)范化的程度越高，則易用性相應(yīng)的就越好的原則。保持操作方式的一致性和功能實(shí)現(xiàn)方式的一致性原則，使用統(tǒng)一樣式控件、快捷鍵、菜單樣式、配色等減少用戶記憶負(fù)擔(dān)和思考時間。界面的合理性屏幕對角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引用戶注意力的位置，在放置窗體時要注意利用這兩個位置。合理的運(yùn)用提示框，提示用戶操作的方式及錯誤原因。界面的獨(dú)特性如果一味的遵循業(yè)界的界面標(biāo)準(zhǔn)，則會喪失自己的個性.在框架符合以上規(guī)范的情況下，設(shè)計(jì)具有自己獨(dú)特風(fēng)格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用。界面的美觀性界面應(yīng)該大小適合美學(xué)觀點(diǎn)，感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。用戶界面交互準(zhǔn)則界面進(jìn)入容易第三方業(yè)務(wù)不可出現(xiàn)在使用前需要進(jìn)行系統(tǒng)登錄的身份驗(yàn)證以便節(jié)省12580坐席人員操作時間。在使用前需要進(jìn)行系統(tǒng)登錄的業(yè)務(wù)： 此類第三方業(yè)務(wù)在使用前需要坐席進(jìn)行系統(tǒng)登錄，給坐席操作時間帶來不必要的浪費(fèi)，甚至因?yàn)榉?wù)時間的延長造成用戶體驗(yàn)下降。所以第三方業(yè)務(wù)不可以出現(xiàn)在使用前需要進(jìn)行系統(tǒng)登錄的使用限制。界面使用簡便 第三方業(yè)務(wù)如需進(jìn)行交互操作時需要提供簡便易懂的查詢條件以便節(jié)省12580坐席人員操作時間。以天氣預(yù)報業(yè)務(wù)為例：盡量使用符合用戶需求的查詢條件，查詢條件不宜過多。在需要下拉選擇時最好可以同時支持下拉以及輸入方式以便節(jié)省坐席操作時間。界面內(nèi)容清晰第三方業(yè)務(wù)需明確體現(xiàn)業(yè)務(wù)種類以及用戶查詢需求，對于綜合式互聯(lián)網(wǎng)型的業(yè)務(wù)需要按用戶查詢需求進(jìn)行業(yè)務(wù)細(xì)分。明確體現(xiàn)用戶需求的業(yè)務(wù)以天氣預(yù)報業(yè)務(wù)為例：當(dāng)坐席進(jìn)入“天氣預(yù)報”查詢業(yè)務(wù)時可以非常清楚的體現(xiàn)出這個業(yè)務(wù)所以為用戶提供的服務(wù)內(nèi)容。無法明確體現(xiàn)用戶需求的業(yè)務(wù)：此類業(yè)務(wù)當(dāng)坐席進(jìn)入后無法精確定位用戶查詢需求所屬區(qū)域，勢必造成坐席在定位用戶查詢信息時浪費(fèi)過多的時間，此種不必要的時間浪費(fèi)會造成坐席單位時間服務(wù)數(shù)量的降低，甚至因?yàn)榉?wù)時間的延長造成用戶體驗(yàn)下降。此類業(yè)務(wù)需要按用戶查詢需求進(jìn)行業(yè)務(wù)細(xì)分。內(nèi)容簡練易懂第三方業(yè)務(wù)內(nèi)容需做到簡練易懂以便12580坐席人員進(jìn)行內(nèi)容播報以及縮減短信下發(fā)字?jǐn)?shù)。以天氣預(yù)報業(yè)務(wù)為例：在傳統(tǒng)可視媒體中天氣預(yù)報可以提供的信息非常之繁雜，如：穿衣指數(shù)、洗車指數(shù)、開窗指數(shù)等等。但鑒于語音媒體與傳統(tǒng)可視媒體之間的區(qū)別，12580中的天氣預(yù)報為了簡化內(nèi)容方便坐席播報，只提供相對簡單但相對重要的信息內(nèi)容，既滿足了用戶需求又簡化了坐席播報，同時縮短了通話時長。用戶界面執(zhí)行細(xì)則合作業(yè)務(wù)區(qū)本區(qū)域功能是提供合作業(yè)務(wù)產(chǎn)品的用戶界面以供用戶進(jìn)行相關(guān)服務(wù)。尺寸：寬度高度=770586（單位：像素）界面執(zhí)行要求：合作業(yè)務(wù)產(chǎn)品的設(shè)計(jì)界面必須保證寬度控制在770像素以內(nèi)，橫向不允許出現(xiàn)滾動條；合作業(yè)務(wù)產(chǎn)品的設(shè)計(jì)界面高度原則上要求控制在586像素以內(nèi)，盡量避免出現(xiàn)滾動條，對于某些確實(shí)需要超過586像素的頁面高度的產(chǎn)品，經(jīng)無限訊奇產(chǎn)品部產(chǎn)品經(jīng)理和UE設(shè)計(jì)師確認(rèn)同意可以設(shè)置豎向滾動條；具體樣式參考：頁面長度超過586頁面長度超過586，可以在頁面的右方出現(xiàn)下拉滾動條；頁面不可以超過770寬度；通用格式（CommonFormats）名稱格式：名稱可以是中文、英文、數(shù)字、字符的組合，同一名稱在不同頁面及前后臺要相同。地址格式：地址采用級聯(lián)形式顯示，例如省份、城市，區(qū)域、街道、郵政編碼，地址數(shù)據(jù)可在列表清單里選擇，也可以對各級聯(lián)數(shù)據(jù)單獨(dú)輸入。電話號碼格式：座機(jī)及小靈通格式為：區(qū)號-電話號碼；手機(jī)號碼默認(rèn)為11位，否則視為無效號碼。日期格式：使用統(tǒng)一格式y(tǒng)yyy-mm-dd，更新的日期和時間應(yīng)該限制使用者輸入的數(shù)據(jù)以保證數(shù)據(jù)正確有效，日期范圍為指定期限中的一個開始日期和結(jié)束日期，用破折號分隔。時間格式：統(tǒng)一采用24小時時間格式，由小時、分鐘、秒組成，時分秒之間用冒號隔開，秒為可選項(xiàng)。數(shù)字格式：負(fù)數(shù)格式為“-數(shù)字”，分?jǐn)?shù)格式為“分子/分母”，小數(shù)應(yīng)使用小數(shù)點(diǎn)隔開，數(shù)值范圍之間應(yīng)使用破折號，數(shù)字帶單位域時應(yīng)放在其后，例3%、3℃色調(diào)（Colour）12580產(chǎn)品系列識別色標(biāo)準(zhǔn)圍繞電信藍(lán)色為主：Menu按鈕色系RGB:R-115G-179B-210(電腦PC色)#73B3D2Button按鈕色系RGB:R-154G-211B-54(電腦PC色)#9AD336Hotspot熱點(diǎn)色系RGB:R-255G-102B-0(電腦PC色)#FF6600Bgcolor背景色系RGB:R-255G-255B-235(電腦PC色)#FFFFEBBgcolor背景色系RGB:R-250G-250B-253#FAFAFD標(biāo)準(zhǔn)藍(lán)必須按照網(wǎng)站整體VI設(shè)計(jì)，主要標(biāo)準(zhǔn)色用色范圍必須>50%。文字（Font）使用統(tǒng)一字體，中文采用標(biāo)準(zhǔn)字體“宋體”，英文采用標(biāo)準(zhǔn)TimeNewRoman，不考慮特殊字體，保證每個用戶使用起來顯示都很正常。樣例：中文宋體EnglishTimesNewRoman界面的正文文字顏色均為黑色（#000000），其中重點(diǎn)標(biāo)注的文字顏色為#FF6600。樣例：界面文字顏色為#000000重點(diǎn)標(biāo)注文字顏色為#FF6600菜單導(dǎo)航區(qū)二級菜單文字顏色為#FF6600，三級菜單文字顏色為黑色（#000000）。樣例：二級菜單文字顏色#FF6600三級菜單文字顏色#000000鏈接文字均需加下劃線，默認(rèn)顏色值為#0000CC，鼠標(biāo)滑過時的顏色值為#FF6600，鼠標(biāo)按下后的顏色值為#000000。樣例：鏈接文字默認(rèn)狀態(tài)鼠標(biāo)滑過時狀態(tài)鼠標(biāo)按下后的狀態(tài)按鈕（Button）同一界面的按鈕風(fēng)格要相似，顏色要統(tǒng)一，尺寸要和整體頁面協(xié)調(diào)；按鈕文字要簡潔明了，文字?jǐn)?shù)目盡量控制在4個以下；彈出頁面應(yīng)使用系統(tǒng)默認(rèn)的按鈕圖標(biāo)；按鈕字體通常使用宋體10磅（12像素），按鈕設(shè)計(jì)視圖如下：圖形（Figure）頁面圖片格式為“.jpg和.gif”，尺寸根據(jù)不同頁面的功能來定義；彩信圖片的格式為“.jpg和.gif”，最大尺寸為128×128，每條彩信的圖片大小不能超過40K。表格（Table）列表均采用表格或框架呈現(xiàn)，不允許出現(xiàn)橫向滾動的表格；表格內(nèi)的文字要整體對齊，達(dá)到美觀協(xié)調(diào)；表頭標(biāo)題欄的底色為#79BDDD；外框線、內(nèi)線顏色值為#C0C0C0；表格行背景色由#FFFFFF和#FAFAFD間隔；熱點(diǎn)聚焦背景色為#FFFFEB，邊框顏色值為#FF6600框架（Frame）界面設(shè)計(jì)不允許出現(xiàn)橫向滾動條，界面寬度必須控制在770像素以內(nèi)；當(dāng)界面長度超過586像素后，應(yīng)提供下拉滾動條；框架設(shè)計(jì)應(yīng)該簡潔