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

1、無限訊奇信息技術(shù)有限公司12580綜合信息門戶第三方合作業(yè)務(wù)產(chǎn)品UI/UE設(shè)計規(guī)范Umessage Human Interface Guideline1 12580合作業(yè)務(wù)產(chǎn)品UI/UE設(shè)計規(guī)范概述北京無限訊奇信息技術(shù)有限公司（以下簡稱“無限訊奇”）是中國移動12580綜合信息服務(wù)門戶的獨家合作伙伴，公司承建中國移動的全國12580綜合信息服務(wù)門戶及運營支撐平臺，并負責(zé)信息和服務(wù)運營。12580采用的信息處理平臺（DCP即Data Collection Platform）由訊奇提供，該平臺承擔(dān)著為不同渠道采集的信息進行篩選，導(dǎo)入，維護的工作，并要保證信息的準確性和豐富性以及信息覆蓋范圍的廣域性

2、。合作伙伴是12580平臺信息及合作業(yè)務(wù)產(chǎn)品的主要提供者。全國范圍的信息采集量需求的增加，信息分類需求的細化，無限訊奇對現(xiàn)有系統(tǒng)平臺及查詢信息的準確性，廣域性，及時性提出了更高的要求。加強對合作伙伴的管理勢在必行。借助電子信息平臺，可以規(guī)范，準確，高效的對合作伙伴及其提供信息進行管理。1.1 制定目的本規(guī)范是用來指導(dǎo)無限訊奇的合作伙伴的合作業(yè)務(wù)產(chǎn)品開發(fā)人員和視覺設(shè)計人員在開發(fā)或升級改版公司的相關(guān)產(chǎn)品的，本規(guī)范用以保證12580綜合信息門戶的產(chǎn)品的視覺和交互行為的一致性和兼容性。遵循這個規(guī)范可以獲得很多好處，因為：l 新設(shè)計的產(chǎn)品的使用界面和操作習(xí)慣和原有的產(chǎn)品保持一致能夠縮短用戶使用新系統(tǒng)的學(xué)

3、習(xí)時間和學(xué)習(xí)成本；l 良好的用戶交互設(shè)計系統(tǒng)能夠幫助用戶更快的達到目的；l 保持12580綜合信息門戶的所有產(chǎn)品的一致性和良好的連貫性，便于版本升級；l 簡化您的產(chǎn)品設(shè)計文檔和操作說明的撰寫，因為很多界面和標準的交互行為的描述不再需要過多的解釋；l 便于12580綜合信息門戶整體提升用戶體驗；l 保證所有12580綜合信息門戶合作業(yè)務(wù)產(chǎn)品的易用，友好，美觀和強大；1.2 使用范圍12580綜合信息門戶合作業(yè)務(wù)的提供方即無限訊奇的合作伙伴的所有的產(chǎn)品開發(fā)人員，包括：產(chǎn)品經(jīng)理、UE工程師、文檔工程師、UI工程師和其它相關(guān)技術(shù)開發(fā)人員。1.3 文檔結(jié)構(gòu)UMESSAGE HUMAN INTERFACE

4、 GUIDELINE1112580合作業(yè)務(wù)產(chǎn)品UI/UE設(shè)計規(guī)范概述21.1制定目的21.2使用范圍21.3文檔結(jié)構(gòu)32用戶界面設(shè)計準則42.1界面的易用性42.2界面的規(guī)范性42.3界面的合理性42.4界面的獨特性42.5界面的美觀性43用戶界面交互準則43.1界面進入容易43.2界面使用簡便54用戶界面執(zhí)行細則54.1合作業(yè)務(wù)區(qū)54.2通用格式（Common Formats）64.3色調(diào)（Colour）74.4文字（Font）84.5按鈕（Button）84.6圖形（Figure）94.7表格（Table）94.8框架（Frame）94.9鼠標（mouse）104.10日期選擇（Date

5、Picker）104.11顯示和隱藏（Hide and Show）104.12提示信息（Inline Messaging and Tips）112 用戶界面設(shè)計準則2.1 界面的易用性產(chǎn)品界面菜單導(dǎo)航/按鈕/名稱應(yīng)該使用容易理解的語言，用詞準確，要與同一界面上的其他菜單導(dǎo)航/按鈕易于區(qū)分，淺顯易懂最好。理想的情況是用戶不用查閱幫助就能知道該界面的功能并進行相關(guān)的正確操作。始終提示用戶所在位置并為其提供返回主頁或開始狀態(tài)的路徑，避免用戶出現(xiàn)任何迷惑和思考。2.2 界面的規(guī)范性產(chǎn)品界面設(shè)計遵循規(guī)范化的程度越高，則易用性相應(yīng)的就越好的原則。保持操作方式的一致性和功能實現(xiàn)方式的一致性原則，使用統(tǒng)一樣式

6、控件、快捷鍵、菜單樣式、配色等減少用戶記憶負擔(dān)和思考時間。2.3 界面的合理性屏幕對角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引用戶注意力的位置，在放置窗體時要注意利用這兩個位置。合理的運用提示框，提示用戶操作的方式及錯誤原因。2.4 界面的獨特性如果一味的遵循業(yè)界的界面標準，則會喪失自己的個性.在框架符合以上規(guī)范的情況下，設(shè)計具有自己獨特風(fēng)格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用。2.5 界面的美觀性界面應(yīng)該大小適合美學(xué)觀點，感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。3 用戶界面交互準則3.1 界面進入容易第三方業(yè)務(wù)不可出現(xiàn)在使用前需要進行系統(tǒng)登錄

7、的身份驗證以便節(jié)省12580坐席人員操作時間。在使用前需要進行系統(tǒng)登錄的業(yè)務(wù)：此類第三方業(yè)務(wù)在使用前需要坐席進行系統(tǒng)登錄，給坐席操作時間帶來不必要的浪費，甚至因為服務(wù)時間的延長造成用戶體驗下降。所以第三方業(yè)務(wù)不可以出現(xiàn)在使用前需要進行系統(tǒng)登錄的使用限制。3.2 界面使用簡便第三方業(yè)務(wù)如需進行交互操作時需要提供簡便易懂的查詢條件以便節(jié)省12580坐席人員操作時間。以天氣預(yù)報業(yè)務(wù)為例：盡量使用符合用戶需求的查詢條件，查詢條件不宜過多。在需要下拉選擇時最好可以同時支持下拉以及輸入方式以便節(jié)省坐席操作時間。3.3 界面內(nèi)容清晰第三方業(yè)務(wù)需明確體現(xiàn)業(yè)務(wù)種類以及用戶查詢需求，對于綜合式互聯(lián)網(wǎng)型的業(yè)務(wù)需要按

8、用戶查詢需求進行業(yè)務(wù)細分。明確體現(xiàn)用戶需求的業(yè)務(wù)以天氣預(yù)報業(yè)務(wù)為例：當(dāng)坐席進入“天氣預(yù)報”查詢業(yè)務(wù)時可以非常清楚的體現(xiàn)出這個業(yè)務(wù)所以為用戶提供的服務(wù)內(nèi)容。無法明確體現(xiàn)用戶需求的業(yè)務(wù)：此類業(yè)務(wù)當(dāng)坐席進入后無法精確定位用戶查詢需求所屬區(qū)域，勢必造成坐席在定位用戶查詢信息時浪費過多的時間，此種不必要的時間浪費會造成坐席單位時間服務(wù)數(shù)量的降低，甚至因為服務(wù)時間的延長造成用戶體驗下降。此類業(yè)務(wù)需要按用戶查詢需求進行業(yè)務(wù)細分。3.4 內(nèi)容簡練易懂第三方業(yè)務(wù)內(nèi)容需做到簡練易懂以便12580坐席人員進行內(nèi)容播報以及縮減短信下發(fā)字數(shù)。以天氣預(yù)報業(yè)務(wù)為例：在傳統(tǒng)可視媒體中天氣預(yù)報可以提供的信息非常之繁雜，如：穿衣

9、指數(shù)、洗車指數(shù)、開窗指數(shù)等等。但鑒于語音媒體與傳統(tǒng)可視媒體之間的區(qū)別，12580中的天氣預(yù)報為了簡化內(nèi)容方便坐席播報，只提供相對簡單但相對重要的信息內(nèi)容，既滿足了用戶需求又簡化了坐席播報，同時縮短了通話時長。4 用戶界面執(zhí)行細則4.1 合作業(yè)務(wù)區(qū)本區(qū)域功能是提供合作業(yè)務(wù)產(chǎn)品的用戶界面以供用戶進行相關(guān)服務(wù)。尺寸：寬度Í高度 = 770 Í 586 （單位：像素）界面執(zhí)行要求：l 合作業(yè)務(wù)產(chǎn)品的設(shè)計界面必須保證寬度控制在770像素以內(nèi)，橫向不允許出現(xiàn)滾動條；l 合作業(yè)務(wù)產(chǎn)品的設(shè)計界面高度原則上要求控制在586像素以內(nèi)，盡量避免出現(xiàn)滾動條，對于某些確實需要超過586像素的頁面高度

10、的產(chǎn)品，經(jīng)無限訊奇產(chǎn)品部產(chǎn)品經(jīng)理和UE設(shè)計師確認同意可以設(shè)置豎向滾動條；具體樣式參考：頁面長度超過586，可以在頁面的右方出現(xiàn)下拉滾動條；頁面不可以超過770寬度；4.2 通用格式（Common Formats）l 名稱格式：名稱可以是中文、英文、數(shù)字、字符的組合，同一名稱在不同頁面及前后臺要相同。l 地址格式：地址采用級聯(lián)形式顯示，F(xiàn)or example, street, city, state and postal code may be included in a single view-only field, or table cell.例如省份、城市，區(qū)域、街道、郵政編碼，地址數(shù)據(jù)可

11、在列表清單里選擇，也可以對各級聯(lián)數(shù)據(jù)單獨輸入。l 電話號碼格式：座機及小靈通格式為：區(qū)號-電話號碼；手機號碼默認為11位，否則視為無效號碼。l 日期格式：使用統(tǒng)一格式y(tǒng)yyy-mm-dd，更新的日期和時間應(yīng)該限制使用者輸入的數(shù)據(jù)以保證數(shù)據(jù)正確有效，日期范圍為指定期限中的一個開始日期和結(jié)束日期，View-only date range fields are always placed side-by-side and separated by a dash.在用破折號分隔。l 時間格式：統(tǒng)一采用24小時時間格式，由小時、分鐘、秒組成，時分秒之間用冒號隔開，秒為可選項。l 數(shù)字格式：負數(shù)格式為“-

12、數(shù)字”，分數(shù)格式為“分子/分母”，小數(shù)應(yīng)使用小數(shù)點隔開，數(shù)值范圍之間應(yīng)使用破折號，數(shù)字帶單位域時應(yīng)放在其后，例3%、3。4.3 色調(diào)（Colour）12580產(chǎn)品系列識別色標準圍繞電信藍色為主： Menu按鈕色系RGB: R-115G-179 B-210(電腦PC色)#73B3D2Button按鈕色系RGB: R-154 G-211 B-54(電腦PC色)#9AD336Hotspot熱點色系RGB: R-255 G-102 B-0(電腦PC色)#FF6600Bgcolor背景色系RGB: R-255 G-255 B-235(電腦PC色)#FFFFEBBgcolor背景色系RGB: R-250

13、G-250 B-253(電腦PC色)# FAFAFD標準藍必須按照網(wǎng)站整體VI設(shè)計，主要標準色用色范圍必須>50%。4.4 文字（Font）l 使用統(tǒng)一字體，中文采用標準字體 “宋體”，英文采用標準Time New Roman，不考慮特殊字體，保證每個用戶使用起來顯示都很正常。樣例： 中文 宋體 English Times New Roman l 界面的正文文字顏色均為黑色（#000000），其中重點標注的文字顏色為# FF6600。樣例：界面文字顏色為#000000 重點標注文字顏色為# FF6600l 菜單導(dǎo)航區(qū)二級菜單文字顏色為#FF6600，三級菜單文字顏色為黑色（#000000

14、）。樣例：二級菜單文字顏色#FF6600 三級菜單文字顏色#000000l 鏈接文字均需加下劃線，默認顏色值為#0000CC，鼠標滑過時的顏色值為#FF6600，鼠標按下后的顏色值為#000000。樣例： 鏈接文字默認狀態(tài) 鼠標滑過時狀態(tài) 鼠標按下后的狀態(tài)4.5 按鈕（Button）l 同一界面的按鈕風(fēng)格要相似，顏色要統(tǒng)一，尺寸要和整體頁面協(xié)調(diào)；l 按鈕文字要簡潔明了，文字數(shù)目盡量控制在4個以下； l 彈出頁面應(yīng)使用系統(tǒng)默認的按鈕圖標；l 按鈕字體通常使用宋體10磅（12像素），按鈕設(shè)計視圖如下： 4.6 圖形（Figure）l 頁面圖片格式為“.jpg和.gif”，尺寸根據(jù)不同頁面的功能來定

15、義；l 彩信圖片的格式為“.jpg和.gif”，最大尺寸為128×128，每條彩信的圖片大小不能超過40K。4.7 表格（Table）l 列表均采用表格或框架呈現(xiàn)，不允許出現(xiàn)橫向滾動的表格；l 表格內(nèi)的文字要整體對齊，達到美觀協(xié)調(diào)；l 表頭標題欄的底色為#79BDDD；外框線、內(nèi)線顏色值為#C0C0C0；表格行背景色由#FFFFFF和#FAFAFD間隔；熱點聚焦背景色為# FFFFEB，邊框顏色值為#FF6600；4.8 框架（Frame）l 界面設(shè)計不允許出現(xiàn)橫向滾動條，界面寬度必須控制在770像素以內(nèi)；l 當(dāng)界面長度超過586像素后，應(yīng)提供下拉滾動條；l 框架設(shè)計應(yīng)該簡潔明快，盡

16、量少用無謂的裝飾；l 應(yīng)該考慮節(jié)省屏幕空間，各種分辨率的大小，縮放時的狀態(tài)和原則，并且為將來設(shè)計的按鈕，菜單，標簽，滾動條及狀態(tài)欄預(yù)留位置；l 設(shè)計中將主菜單放在左邊或上邊，滾動條放在右邊，狀態(tài)欄放在下邊，以符合視覺流程和用戶使用心理；l 用戶移動滾動條的時候不應(yīng)對用戶輸入有任何影響；l 樣例：4.9 鼠標（mouse）l 鼠標光標樣式要統(tǒng)一，盡量使用系統(tǒng)標準。l 當(dāng)鼠標指針為不可點擊狀態(tài)時顯示為“箭頭”樣式；當(dāng)指針指在文本文字上時顯示為“”樣式，當(dāng)鼠標指針指在鏈接文字和圖片等可點擊的鏈接上時均顯示為“手型”樣式，當(dāng)系統(tǒng)忙時顯示為“沙漏”樣式。 4.10 日期選擇（Date Picker）l 日期顯示格式一致，如 ：yyyy-mm-dd；l 使用日期控件，盡量不采用手工錄入；l 如需限制日期選擇范圍，則超出范圍的日期應(yīng)為灰色不可選狀態(tài)；l 日期控件的設(shè)計應(yīng)簡潔明了，易用為主。4.11 顯示和隱藏（Hide and Show）l 在界面中允許部分內(nèi)容在隱藏和顯