第三方服務(wù)設(shè)計(jì)標(biāo)準(zhǔn)規(guī)范

無(wú)限訊奇信息技術(shù)有限公司－12580綜合信息門戶第三方合伙業(yè)務(wù)產(chǎn)品UI/UE設(shè)計(jì)規(guī)范UmessageHumanInterfaceGuideline12580合伙業(yè)務(wù)產(chǎn)品UI/UE設(shè)計(jì)規(guī)范概述北京無(wú)限訊奇信息技術(shù)有限公司（如下簡(jiǎn)稱“無(wú)限訊奇”）是中華人民共和國(guó)移動(dòng)12580綜合信息服務(wù)門戶獨(dú)家合伙伙伴，公司承建中華人民共和國(guó)移動(dòng)全國(guó)12580綜合信息服務(wù)門戶及運(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ù)工作，并要保證信息精確性和豐富性以及信息覆蓋范疇廣域性。合伙伙伴是12580平臺(tái)信息及合伙業(yè)務(wù)產(chǎn)品重要提供者。全國(guó)范疇信息采集量需求增長(zhǎng)，信息分類需求細(xì)化，無(wú)限訊奇對(duì)既有系統(tǒng)平臺(tái)及查詢信息精確性，廣域性，及時(shí)性提出了更高規(guī)定。加強(qiáng)對(duì)合伙伙伴管理勢(shì)在必行。借助電子信息平臺(tái)，可以規(guī)范，精確，高效對(duì)合伙伙伴及其提供信息進(jìn)行管理。制定目本規(guī)范是用來(lái)指引無(wú)限訊奇合伙伙伴合伙業(yè)務(wù)產(chǎn)品開發(fā)人員和視覺設(shè)計(jì)人員在開發(fā)或升級(jí)改版公司有關(guān)產(chǎn)品，本規(guī)范用以保證12580綜合信息門戶產(chǎn)品視覺和交互行為一致性和兼容性。遵循這個(gè)規(guī)范可以獲得諸多好處，由于：新設(shè)計(jì)產(chǎn)品使用界面和操作習(xí)慣和原有產(chǎn)品保持一致可以縮短顧客使用新系統(tǒng)學(xué)習(xí)時(shí)間和學(xué)習(xí)成本；良好顧客交互設(shè)計(jì)系統(tǒng)可以協(xié)助顧客更快達(dá)到目；保持12580綜合信息門戶所有產(chǎn)品一致性和良好連貫性，便于版本升級(jí)；簡(jiǎn)化您產(chǎn)品設(shè)計(jì)文檔和操作闡明撰寫，由于諸多界面和原則交互行為描述不再需要過多解釋；便于12580綜合信息門戶整體提高顧客體驗(yàn)；保證所有12580綜合信息門戶合伙業(yè)務(wù)產(chǎn)品易用，和諧，美觀和強(qiáng)大；使用范疇12580綜合信息門戶合伙業(yè)務(wù)提供方即無(wú)限訊奇合伙伙伴所有產(chǎn)品開發(fā)人員，涉及：產(chǎn)品經(jīng)理、UE工程師、文檔工程師、UI工程師和其他有關(guān)技術(shù)開發(fā)人員。文檔構(gòu)造UmessageHumanInterfaceGuideline 11 12580合伙業(yè)務(wù)產(chǎn)品UI/UE設(shè)計(jì)規(guī)范概述 21.1 制定目 21.2 使用范疇 21.3 文檔構(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 界面使用簡(jiǎn)便 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 日期選?。―atePicker） 104.11 顯示和隱藏（HideandShow） 104.12 提示信息（InlineMessagingandTips） 11顧客界面設(shè)計(jì)準(zhǔn)則界面易用性產(chǎn)品界面菜單導(dǎo)航/按鈕/名稱應(yīng)當(dāng)使用容易理解語(yǔ)言，用詞精確，要與同一界面上其她菜單導(dǎo)航/按鈕易于區(qū)別，淺顯易懂最佳。抱負(fù)狀況是顧客不用查閱協(xié)助就能懂得該界面功能并進(jìn)行有關(guān)對(duì)的操作。始終提示顧客所在位置并為其提供返回主頁(yè)或開始狀態(tài)途徑，避免顧客浮現(xiàn)任何困惑和思考。界面規(guī)范性產(chǎn)品界面設(shè)計(jì)遵循規(guī)范化限度越高，則易用性相應(yīng)就越好原則。保持操作方式一致性和功能實(shí)現(xiàn)方式一致性原則，使用統(tǒng)同樣式控件、快捷鍵、菜單樣式、配色等減少顧客記憶承擔(dān)和思考時(shí)間。界面合理性屏幕對(duì)角線相交位置是顧客直視地方，正上方四分之一處為易吸引顧客注意力位置，在放置窗體時(shí)要注意運(yùn)用這兩個(gè)位置。合理運(yùn)用提示框，提示顧客操作方式及錯(cuò)誤因素。界面獨(dú)特性如果一味遵循業(yè)界界面原則，則會(huì)喪失自己個(gè)性.在框架符合以上規(guī)范狀況下，設(shè)計(jì)具備自己獨(dú)特風(fēng)格界面尤為重要。特別在商業(yè)軟件流通中有著較好遷移默化廣告效用。界面美觀性界面應(yīng)當(dāng)大小適合美學(xué)觀點(diǎn)，感覺協(xié)調(diào)舒服，能在有效范疇內(nèi)吸引顧客注意力。顧客界面交互準(zhǔn)則界面進(jìn)入容易第三方業(yè)務(wù)不可出當(dāng)前使用前需要進(jìn)行系統(tǒng)登錄身份驗(yàn)證以便節(jié)約12580坐席人員操作時(shí)間。在使用前需要進(jìn)行系統(tǒng)登錄業(yè)務(wù)： 此類第三方業(yè)務(wù)在使用前需要坐席進(jìn)行系統(tǒng)登錄，給坐席操作時(shí)間帶來(lái)不必要揮霍，甚至由于服務(wù)時(shí)間延長(zhǎng)導(dǎo)致顧客體驗(yàn)下降。因此第三方業(yè)務(wù)不可以出當(dāng)前使用前需要進(jìn)行系統(tǒng)登錄使用限制。界面使用簡(jiǎn)便 第三方業(yè)務(wù)如需進(jìn)行交互操作時(shí)需要提供簡(jiǎn)便易懂查詢條件以便節(jié)約12580坐席人員操作時(shí)間。以天氣預(yù)報(bào)業(yè)務(wù)為例：盡量使用符合顧客需求查詢條件，查詢條件不適當(dāng)過多。在需要下拉選取時(shí)最佳可以同步支持下拉以及輸入方式以便節(jié)約坐席操作時(shí)間。界面內(nèi)容清晰第三方業(yè)務(wù)需明確體現(xiàn)業(yè)務(wù)種類以及顧客查詢需求，對(duì)于綜合式互聯(lián)網(wǎng)型業(yè)務(wù)需要按顧客查詢需求進(jìn)行業(yè)務(wù)細(xì)分。明確體現(xiàn)顧客需求業(yè)務(wù)以天氣預(yù)報(bào)業(yè)務(wù)為例：當(dāng)坐席進(jìn)入“天氣預(yù)報(bào)”查詢業(yè)務(wù)時(shí)可以非常清晰體現(xiàn)出這個(gè)業(yè)務(wù)所覺得顧客提供服務(wù)內(nèi)容。無(wú)法明確體現(xiàn)顧客需求業(yè)務(wù)：此類業(yè)務(wù)當(dāng)坐席進(jìn)入后無(wú)法精準(zhǔn)定位顧客查詢需求所屬區(qū)域，勢(shì)必導(dǎo)致坐席在定位顧客查詢信息時(shí)揮霍過多時(shí)間，此種不必要時(shí)間揮霍會(huì)導(dǎo)致坐席單位時(shí)間服務(wù)數(shù)量減少，甚至由于服務(wù)時(shí)間延長(zhǎng)導(dǎo)致顧客體驗(yàn)下降。此類業(yè)務(wù)需要按顧客查詢需求進(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ù)為例：在老式可視媒體中天氣預(yù)報(bào)可以提供信息非常之繁雜，如：穿衣指數(shù)、洗車指數(shù)、開窗指數(shù)等等。但鑒于語(yǔ)音媒體與老式可視媒體之間區(qū)別，12580中天氣預(yù)報(bào)為了簡(jiǎn)化內(nèi)容以便坐席播報(bào)，只提供相對(duì)簡(jiǎn)樸但相對(duì)重要信息內(nèi)容，既滿足了顧客需求又簡(jiǎn)化了坐席播報(bào)，同步縮短了通話時(shí)長(zhǎng)。顧客界面執(zhí)行細(xì)則合伙業(yè)務(wù)區(qū)本區(qū)域功能是提供合伙業(yè)務(wù)產(chǎn)品顧客界面以供顧客進(jìn)行有關(guān)服務(wù)。尺寸：寬度高度=770586（單位：像素）界面執(zhí)行規(guī)定：合伙業(yè)務(wù)產(chǎn)品設(shè)計(jì)界面必要保證寬度控制在770像素以內(nèi)，橫向不容許浮現(xiàn)滾動(dòng)條；合伙業(yè)務(wù)產(chǎn)品設(shè)計(jì)界面高度原則上規(guī)定控制在586像素以內(nèi)，盡量避免浮現(xiàn)滾動(dòng)條，對(duì)于某些的確需要超過586像素頁(yè)面高度產(chǎn)品，經(jīng)無(wú)限訊奇產(chǎn)品部產(chǎn)品經(jīng)理和UE設(shè)計(jì)師確認(rèn)批準(zhǔn)可以設(shè)立豎向滾動(dòng)條；詳細(xì)樣式參照：頁(yè)面長(zhǎng)度超過586頁(yè)面長(zhǎng)度超過586，可以在頁(yè)面右方浮現(xiàn)下拉滾動(dòng)條；頁(yè)面不可以超過770寬度；通用格式（CommonFormats）名稱格式：名稱可以是中文、英文、數(shù)字、字符組合，同一名稱在不同頁(yè)面及先后臺(tái)要相似。地址格式：地址采用級(jí)聯(lián)形式顯示，例如省份、都市，區(qū)域、街道、郵政編碼，地址數(shù)據(jù)可在列表清單里選取，也可以對(duì)各級(jí)聯(lián)數(shù)據(jù)單獨(dú)輸入。電話號(hào)碼格式：座機(jī)及小靈通格式為：區(qū)號(hào)-電話號(hào)碼；手機(jī)號(hào)碼默以為11位，否則視為無(wú)效號(hào)碼。日期格式：使用統(tǒng)一格式y(tǒng)yyy-mm-dd，更新日期和時(shí)間應(yīng)當(dāng)限制使用者輸入數(shù)據(jù)以保證數(shù)據(jù)對(duì)的有效，日期范疇為指定期限中一種開始日期和結(jié)束日期，用破折號(hào)分隔。時(shí)間格式：統(tǒng)一采用24小時(shí)時(shí)間格式，由小時(shí)、分鐘、秒構(gòu)成，時(shí)分秒之間用冒號(hào)隔開，秒為可選項(xiàng)。數(shù)字格式：負(fù)數(shù)格式為“-數(shù)字”，分?jǐn)?shù)格式為“分子/分母”，小數(shù)應(yīng)使用小數(shù)點(diǎn)隔開，數(shù)值范疇之間應(yīng)使用破折號(hào)，數(shù)字帶單位域時(shí)應(yīng)放在其后，例3%、3℃色調(diào)（Colour）12580產(chǎn)品系列辨認(rèn)色原則環(huá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原則藍(lán)必要按照網(wǎng)站整體VI設(shè)計(jì)，重要原則色用色范疇必要>50%。文字（Font）使用統(tǒng)一字體，中文采用原則字體“宋體”，英文采用原則TimeNewRoman，不考慮特殊字體，保證每個(gè)顧客使用起來(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鏈接文字均需加下劃線，默認(rèn)顏色值為#0000CC，鼠標(biāo)滑過時(shí)顏色值為#FF6600，鼠標(biāo)按下后顏色值為#000000。樣例：鏈接文字默認(rèn)狀態(tài)鼠標(biāo)滑過時(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”，尺寸依照不同頁(yè)面功能來(lái)定義；彩信圖片格式為“.jpg和.gif”，最大尺寸為128×128，每條彩信圖片大小不能超過40K。表格（Table）列表均采用表格或框架呈現(xiàn)，不容許浮現(xiàn)橫向滾動(dòng)表格；表格內(nèi)文字要整體對(duì)齊，達(dá)到美觀協(xié)調(diào)；表頭標(biāo)題欄底色為#79BDDD；外框線、內(nèi)線顏色值為#C0C0C0；表格行背景色由#FFFFFF和#FAFAFD間隔；熱點(diǎn)聚焦背景色為#FFFFEB，邊框顏色值為#FF6600框架（Frame）界面設(shè)計(jì)不容許浮現(xiàn)橫向滾動(dòng)條，界面寬度必要控制在770像素以內(nèi)；當(dāng)界面長(zhǎng)度超過586像素后，應(yīng)提供下拉滾動(dòng)條；框架設(shè)計(jì)應(yīng)當(dāng)簡(jiǎn)潔明快，盡量少用無(wú)謂裝飾；應(yīng)當(dāng)考慮節(jié)約屏幕空間，各種辨別率大小，縮放時(shí)狀態(tài)和原則，并且為將來(lái)設(shè)計(jì)按鈕，菜單，標(biāo)簽，滾動(dòng)條及狀態(tài)欄預(yù)留位置；設(shè)計(jì)中將主菜單放在左邊或上邊，滾動(dòng)條放在右邊，狀態(tài)欄放在下邊，以符合視覺流程和顧客使專心理；顧客移動(dòng)滾動(dòng)條時(shí)候不應(yīng)對(duì)顧客輸入有任何影響；樣例：鼠標(biāo)（mouse）鼠標(biāo)光標(biāo)樣式要統(tǒng)一，盡量使用系統(tǒng)原則。當(dāng)鼠標(biāo)指針為不可點(diǎn)擊狀態(tài)時(shí)顯示為“箭頭”樣式；當(dāng)指針指在文本文字上時(shí)顯示為“Ｉ”樣式，當(dāng)鼠標(biāo)指針指在鏈接文字和圖片等可點(diǎn)擊鏈接上時(shí)均顯示為“手型”樣式，當(dāng)系統(tǒng)忙時(shí)顯示為“沙漏”樣式。日期選?。―atePicker）日期顯示格式一致，如：yyyy-mm-dd；使用日期控件，盡量不采用手工錄入；如需限制日期選取范疇，則超過范疇日期應(yīng)為灰色不可選狀態(tài)；日期控件設(shè)計(jì)應(yīng)簡(jiǎn)潔明了，易用為主。顯示和隱藏（HideandShow）在界面中