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

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