【正文】 南京有線中間件平臺(tái)系統(tǒng)技術(shù)規(guī)范數(shù)字電視交互設(shè)計(jì)規(guī)范分冊(cè)(暫定)編號(hào)版本密級(jí)內(nèi)部公開發(fā)布日期2011214江蘇省廣播電視信息網(wǎng)絡(luò)股份有限公司南京分公司中間件工作小組目錄一、 引言 6 文檔目的 6 適用范圍 6 參考資料 6二、 設(shè)計(jì)原則 7 用戶體驗(yàn)設(shè)計(jì)原則 7 反饋和交互 7 一致性 7 容錯(cuò)性 7 整體美學(xué) 7 最容易犯的錯(cuò)誤 8 窗口 8 布局 8 文本 8 控件 9 如何設(shè)計(jì)優(yōu)秀的用戶體驗(yàn) 11 抓住基本功能 11 把某方面做出色 11 不必強(qiáng)求每個(gè)人都滿意 11 做出艱難的決定 11 給人的體驗(yàn)就像是在進(jìn)行友好的對(duì)話 11 默認(rèn)執(zhí)行正確的操作 12 讓它得以工作 12 小心提問 12 使其用起來很棒 12 使其看起來很棒 12 使其響應(yīng)及時(shí) 12 使其保持簡(jiǎn)單 13 避免糟糕的體驗(yàn) 13 為常見問題設(shè)計(jì) 13 不要使人厭煩 13 減少精力、知識(shí)和思考 13 測(cè)試你的用戶界面 14 簡(jiǎn)約而又強(qiáng)大 14 強(qiáng)大 14 簡(jiǎn)約 14三、 界面 16 高清 16 標(biāo)清 17四、 控件 18 列表視圖 18 它用在這里合適嗎？ 18 標(biāo)準(zhǔn)列表視圖展示 19 推薦尺寸與間距 21 文檔編寫 22 列表鏈接 22 使鏈接明確、相關(guān)且能夠被預(yù)知 23 使用模式 23 設(shè)計(jì)規(guī)范 25 文檔編寫 27 按鈕 28 它用在這里合適嗎？ 28 使用模式 29 設(shè)計(jì)規(guī)范 30 推薦尺寸與間距 31 文檔編寫 32 復(fù)選框 32 它用在這里合適嗎？ 32 使用模式 34 設(shè)計(jì)規(guī)范 35 推薦尺寸與間距 36 復(fù)選框標(biāo)簽 37 文檔編寫 38 單選框 38 它用在這里合適嗎？ 39 設(shè)計(jì)規(guī)范 40 推薦尺寸與間距 42 文檔編寫 42 進(jìn)度條 43 它用在這里合適嗎？ 43 設(shè)計(jì)理念 44 使用模式 44 設(shè)計(jì)規(guī)范 46 推薦尺寸與間距 50 標(biāo)簽 50 文本框 51 它用在這里合適嗎？ 52 設(shè)計(jì)理念 52 使用模式 52 設(shè)計(jì)規(guī)范 54 輸入驗(yàn)證及錯(cuò)誤處理 58 提示 58 推薦尺寸與間距 59 文檔編寫 59 對(duì)話框 60 它用在這里合適嗎？ 60 設(shè)計(jì)理念 61 對(duì)話框的特性 61 使用模式 62 設(shè)計(jì)規(guī)范 64 推薦尺寸與間距 66 文本 67 文檔編寫 72 信息提示 72 它用在這里合適嗎？ 73 設(shè)計(jì)理念 73 設(shè)計(jì)規(guī)范 74 文檔編寫 74五、 菜單 75 設(shè)計(jì)理念 75 使用模式 75 主頁菜單 75 分級(jí)頁面菜單 76 設(shè)計(jì)規(guī)范 77 菜單項(xiàng)的組織與順序 77 菜單的分類命名 77 視覺呈現(xiàn) 77六、 文本 79 用戶界面文本 79 使用模式 79 設(shè)計(jì)理念 80 UI文本的設(shè)計(jì)模型 81 去除重復(fù) 81 避免過度溝通 81 使用倒金字塔結(jié)構(gòu) 82 設(shè)計(jì)規(guī)范 83 風(fēng)格與語氣 83 設(shè)計(jì)理念 84 設(shè)計(jì)規(guī)范 84版本與修訂版號(hào)發(fā)布日期編制人審核批準(zhǔn)修訂摘要2011114中間件工作小組一、 引言 文檔目的根據(jù)交互設(shè)計(jì)學(xué)以及數(shù)字電視機(jī)頂盒界面特點(diǎn)，制定一套用于數(shù)字電視界面的交互設(shè)計(jì)標(biāo)準(zhǔn)，希望UCD部門以這套標(biāo)準(zhǔn)為依據(jù)進(jìn)行各項(xiàng)目的交互設(shè)計(jì)，以保證公司各系列產(chǎn)品在交互方式上的一致性。 適用范圍公司數(shù)字電視的界面設(shè)計(jì)。 參考資料[1]《Windows 用戶體驗(yàn)交互設(shè)計(jì)規(guī)范》。[2]《Apple 人機(jī)接口設(shè)計(jì)指南》。[3]《iPhone 人機(jī)界面設(shè)計(jì)規(guī)范》。[4]《WindowsPhone7UI設(shè)計(jì)及人機(jī)交互指南》，pdf版。[5]《About Face 3交互設(shè)計(jì)精髓》二、 設(shè)計(jì)原則 用戶體驗(yàn)設(shè)計(jì)原則 反饋和交互反饋和交互意味著通過合適的反饋以及和程序之間的交互從而讓用戶時(shí)刻知道現(xiàn)在發(fā)生了什么，而不僅僅是當(dāng)事情出錯(cuò)時(shí)顯示一個(gè)警告。 一致性標(biāo)簽和功能是否使用了一致的術(shù)語？圖標(biāo)是否總是代表一個(gè)意思？所有的模塊中概念都是以同樣的方式呈現(xiàn)的嗎？類似的控件和用戶接口元素是否顯示在窗口和對(duì)話框類似的位置？ 容錯(cuò)性提供充分的容錯(cuò)性以鼓勵(lì)用戶操作電視時(shí)─致，用戶應(yīng)該覺得可以嘗試各種功能而無需擔(dān)心破壞系統(tǒng)或者損壞數(shù)據(jù)。提供如返回，后退等操作，從而讓用戶放心地使用各種業(yè)務(wù)。 整體美學(xué)整體美學(xué)意味著信息經(jīng)過良好的組織并且和視圖設(shè)計(jì)一致。在長時(shí)間使用的情況下，您的產(chǎn)品應(yīng)該仍然令人愉快。 不要在窗口和對(duì)話框中塞滿圖標(biāo)或者按鈕。不要隨心所欲的使用符號(hào)來表達(dá)一些概念，因?yàn)樗麄兛赡軐?duì)用戶構(gòu)成困擾或者分散用戶的注意力。窗口的布局和用戶接口元素的設(shè)計(jì)應(yīng)該反映用戶的心智模型。例如： 使用高質(zhì)量的圖標(biāo)。 使用抗鋸齒的字體。 一個(gè)窗口中字體的大小和類型應(yīng)該一致。 在一個(gè)窗口內(nèi)的控件大小應(yīng)該一致─例如，不要將小號(hào)控件和標(biāo)準(zhǔn)控件混用。 界面元素的行為應(yīng)該和用戶期望的一致，不要試圖更改標(biāo)準(zhǔn)控件的行為。例如： 復(fù)選框應(yīng)該只用來多項(xiàng)選擇，而不是單一選擇。 按鈕只應(yīng)被用來表示一些立即執(zhí)行的東西，如“打開”。 避免使用按鈕來顯示彈出菜單或者將按鈕用作標(biāo)簽。 避免將圓角按鈕用作標(biāo)簽頁。 盡可能的讓用戶在任何時(shí)候都能做他們想做的事情。避免使用模式對(duì)話框來將用戶鎖定在某個(gè)操作中，以至于在當(dāng)前操作完成前用戶不能做別的事情。 最容易犯的錯(cuò)誤 窗口確保在 640x526和1280 x720模式下分別測(cè)試標(biāo)清和高清的頁面。檢查布局問題、控件和窗口裁剪、以及圖標(biāo)和位圖拉伸情況。如果窗口是子窗口，初次顯示時(shí)應(yīng)將其“居中”顯示在父窗口的上方。不要顯示在下方。以后顯示的時(shí)候，如果更為方便，應(yīng)考慮將其顯示在最后一次出現(xiàn)的位置（相對(duì)于父窗口）。 如果窗口是上下文相關(guān)的，應(yīng)當(dāng)總是將其顯示在靠近觸發(fā)它的對(duì)象旁邊。不過，應(yīng)當(dāng)把它放在靠旁邊的位置（最好是向右下方一些），以免擋住對(duì)象。 布局將窗口中控件和面板的尺寸調(diào)整為適合典型內(nèi)容的大小?？丶叽纭？丶叽鐟?yīng)當(dāng)適合于其典型內(nèi)容，將控件變得更寬、更高、必要時(shí)使用多行編輯。調(diào)整控件的尺寸，以避免或減少在那些有大量空間的窗口中進(jìn)行滾動(dòng)?？臻g的窗口中存在任何被截?cái)嗟臉?biāo)簽或文本。列寬。確保列表視圖具有合適的默認(rèn)、最小及最大列寬。為列表視圖使用不會(huì)引起文本截?cái)嗟哪J(rèn)列寬，尤其當(dāng)列表視圖中還有足夠空間時(shí)。布局平衡。窗口布局應(yīng)當(dāng)讓人感到大致平衡。如果覺得布局左側(cè)偏重，應(yīng)當(dāng)考慮增加控件的寬度，并將一些控件移到右側(cè)。 文本盡可能使用普通的、口語化的用語。關(guān)注于用戶的目標(biāo)，而非技術(shù)。有禮貌、給予支持與鼓勵(lì)。用戶絕不應(yīng)感到被牽就、被責(zé)備或被脅迫。刪去重復(fù)多余的文字。在窗口標(biāo)題、主標(biāo)題說明、補(bǔ)充說明、內(nèi)容區(qū)域、命令鏈接及提交按鈕中尋找重復(fù)多余的文字。通常，完全保留說明文本和交互性控件中的文字，刪去其他地方的重復(fù)內(nèi)容。 不要為不是鏈接的文本使用藍(lán)色，因?yàn)橛脩魰?huì)把它當(dāng)成鏈接。在你想使用彩色文本的地方使用粗體或某種灰色。 謹(jǐn)慎使用粗體來吸引用戶注意那些必須閱讀的文本。使用主標(biāo)題說明來簡(jiǎn)要地解釋一個(gè)頁面或?qū)υ捒蛴脕碜鍪裁础：玫闹鳂?biāo)題說明傳達(dá)的是用戶的目標(biāo)，而不只是關(guān)注于操作用戶界面。 以祈使句式的指導(dǎo)或明確的疑問句的形式表述主標(biāo)題說明。 不要在控件標(biāo)簽或主標(biāo)題說明末尾添加句點(diǎn)。 在句子之間使用一個(gè)空格。而不是兩個(gè)。 控件常規(guī) 為每個(gè)控件或控件組添加標(biāo)簽。例外： 文本框和下拉列表可以通過提示文本來標(biāo)注。 對(duì)于所有控件，應(yīng)當(dāng)將最可靠的（避免丟失數(shù)據(jù)或無法訪問系統(tǒng)）、最安全的值作為單選框。如果可靠性與安全性不是需要考慮的因素，那么就選擇最有可能的或最方便的值。 最好使用帶約束的控件。盡可能使用像列表和滑塊這樣的帶約束的控件來減少文本輸入的需要，而不是像文本框這樣的無約束控件。 重新考慮禁用控件。禁用的控件可能很難使用，因?yàn)橛脩粜枰茢嗥浔唤玫脑?。命令按鈕盡可能使用明確的標(biāo)簽，而非常規(guī)標(biāo)簽。理想情況下，用戶應(yīng)當(dāng)不需要為了理解標(biāo)簽而閱讀其他任何內(nèi)容。用戶更愿意閱讀命令按鈕標(biāo)簽，而不是靜態(tài)文本。 例外：如果“取消”有歧義的話，不要修改“取消”按鈕的名稱。用戶不應(yīng)該需要閱讀所有按鈕來確定到底哪個(gè)按鈕可以取消該操作。但是，如果不清楚要取消的是哪個(gè)操作，例如有多個(gè)即將進(jìn)行操作時(shí)，可以重命名“取消”。 當(dāng)提問時(shí)，使用與問題相對(duì)應(yīng)的標(biāo)簽文字。例如，為那些是/否的問題提供“是”和“否”的選擇。 如果取消后退回之前的狀態(tài)（沒有任何副作用），則將按鈕命名為“取消”；否則，應(yīng)當(dāng)命名為“關(guān)閉”（如果操作已經(jīng)完成）或“停止”（如果操作還在進(jìn)行中）來表示會(huì)完整保留當(dāng)前更改過的狀態(tài)。 命令鏈接 應(yīng)當(dāng)總是同時(shí)呈現(xiàn)兩個(gè)或更多的命令鏈接。從邏輯上來說，沒必要問只有一種答案的問題。 提供明確的“取消”按鈕。不要將命令鏈接作此用途。很可能用戶意識(shí)到他并不想進(jìn)行這項(xiàng)任務(wù)。使用命令鏈接來取消會(huì)使用戶必須仔細(xì)閱讀所有的命令鏈接并確定哪個(gè)表示取消。使用明確的“取消”按鈕可以讓用戶非?？焖俚厝∠蝿?wù)。 如果提供明確的“取消”按鈕使得只剩下單獨(dú)的一個(gè)命令鏈接的話，可以同時(shí)提供用于取消的命令鏈接和“取消”按鈕。這么做可以明確表達(dá)用戶可以進(jìn)行選擇。以它與第一個(gè)選擇有什么不同的角度來描述這個(gè)命令鏈接，而不僅僅是“取消”或類似的變體。 鏈接 不要為鏈接分配訪問鍵。不要為鏈接文本添加“單擊”或“單擊此處”的字樣。這是不需要的，因?yàn)殒溄影凳玖藛螕魟?dòng)作。 漸進(jìn)展開將“更多/更少”漸進(jìn)展開按鈕用于隱藏高級(jí)的或很少使用的選項(xiàng)、命令及用戶通常不需要的細(xì)節(jié)內(nèi)容。不要隱藏常用的內(nèi)容，因?yàn)橛脩艨赡苷也坏剿鼈儭４_保這種隱藏是有價(jià)值的。 如果界面上一直顯示了一些選項(xiàng)、命令或細(xì)節(jié)，則使用下列標(biāo)簽組合： 更多/更少選項(xiàng)。用于選項(xiàng)或是選項(xiàng)、命令與細(xì)節(jié)內(nèi)容的混合。 更多/更少命令。僅用于命令。 更多/更少細(xì)節(jié)。僅用于信息。 更多/更少 對(duì)象名稱。用于其他對(duì)象類型，如文件夾。 否則： 顯示/隱藏選項(xiàng)。用于選項(xiàng)或是選項(xiàng)、命令與細(xì)節(jié)內(nèi)容的混合。 顯示/隱藏命令。僅用于命令。 顯示/隱藏細(xì)節(jié)。僅用于信息。 顯示/隱藏 對(duì)象名稱。用于其他對(duì)象類型，如文件夾。 進(jìn)度條 應(yīng)當(dāng)將確定模式的進(jìn)度條用于那些有確定時(shí)間界限的操作，即使其中大部分時(shí)間都無法進(jìn)行精確預(yù)測(cè)時(shí)也同樣如此。不確定模式的進(jìn)度條雖然表示正在進(jìn)行中，但無法提供任何其他信息。不要僅僅因?yàn)椴粔蚓_，就選用不確定模式的進(jìn)度條。 如果能夠準(zhǔn)確計(jì)算的話，應(yīng)當(dāng)提供估計(jì)剩余時(shí)間。準(zhǔn)確的估計(jì)剩余時(shí)間是有用的，而那些差得離譜或者劇烈變化的估計(jì)值是沒用的。你可能需要在給出準(zhǔn)確估計(jì)值之前先進(jìn)行一些操作。這樣的話，不要在初始階段顯示可能不準(zhǔn)確的估計(jì)值。 不要重新啟動(dòng)進(jìn)度。如果它重新啟動(dòng)（可能因?yàn)椴僮髦械囊粋€(gè)步驟完成），進(jìn)度條就喪失了它的意義，因?yàn)橛脩魺o法了解整個(gè)操作什么時(shí)候會(huì)完成。相反，該操作中的各個(gè)步驟應(yīng)當(dāng)分別只占整個(gè)進(jìn)程的一部分，整個(gè)進(jìn)度條只完成一次。 提供有用的進(jìn)度細(xì)節(jié)。僅當(dāng)用戶能夠依此做些什么的時(shí)候，才有必要提供額外的進(jìn)度信息。確保文本的顯示足夠長以使用戶能夠閱讀。 提示當(dāng)屏幕空間緊張，使用標(biāo)簽或說明文字不合適時(shí)，可以使用提示文本。提示文字主要用于以緊湊的方式標(biāo)識(shí)文本框的目的。它絕不應(yīng)該是用戶在使用文本框時(shí)需要看到的關(guān)鍵信息。 提示文本不得與真實(shí)文本相混淆。需要做的有： 以灰色斜體方式顯示提示文本，而以黑色正體方式顯示實(shí)際輸入的文本。 提示文本應(yīng)當(dāng)不可編輯，且當(dāng)用戶跳轉(zhuǎn)到該文本框內(nèi)時(shí)應(yīng)立即消失。 例外：如果文本框具有默認(rèn)的輸入焦點(diǎn)，則顯示提示文本，并當(dāng)用戶開始輸入時(shí)消失。 不要使用句末標(biāo)點(diǎn)或省略號(hào)。 如何設(shè)計(jì)優(yōu)秀的用戶體驗(yàn) 抓住基本功能核心使用情境遠(yuǎn)遠(yuǎn)重要于那些邊邊角角的情境——人們也許會(huì)做也許不會(huì)做的事情。牢牢抓住基本的東西！ 把某方面做出色想想“真實(shí)”用戶（而不是市場(chǎng)部或公關(guān)部的人）會(huì)如何描述你的程序。找出你的目標(biāo)用戶，保證他們會(huì)說“我非常喜歡這個(gè)程序！它的 A、B、C 真是太棒了！”如果用戶不會(huì)這么說你的程序，說明什么？如今，“剛剛好”已經(jīng)不再夠好了——要讓用戶愛上你的產(chǎn)品。 不必強(qiáng)求每個(gè)人都滿意讓你的目標(biāo)用戶滿意會(huì)使你的產(chǎn)品更加成功，而不是試圖去滿足每一個(gè)人。 做出艱難的決定這些功能、命令或選項(xiàng)確實(shí)有必要嗎？如果有，就將其做好。如果沒有，就干脆去掉！不要為了躲避這種艱難的選擇就把每樣?xùn)|西都做成可選的或可以配置的。 給人的體驗(yàn)就像是在進(jìn)行友好的對(duì)話把你的 UI 想成是你與你的目標(biāo)用戶之間的對(duì)話。假設(shè)你就在用戶的身邊，然后他問你說“我現(xiàn)在應(yīng)該怎么做？”想想你會(huì)如何解釋：哪些步驟、怎樣的順序、你會(huì)怎么說以及如何來解釋等等。也想想那些你“不會(huì)”說的東西。這就是你的 UI 應(yīng)該的樣子——好像朋友之間的對(duì)話一樣——而不是什么用戶難以理解的高深莫測(cè)的東西。 默認(rèn)執(zhí)行正確的操作當(dāng)然，你可以列出一排選項(xiàng)讓用戶來選擇，但是何必這樣？應(yīng)當(dāng)選擇可靠、安全、方便的默認(rèn)項(xiàng)。而且，要將正確的體驗(yàn)作為你目標(biāo)用戶的默認(rèn)體驗(yàn)。不要假設(shè)用戶會(huì)把不好的初始體驗(yàn)配置成自己希望的方式，他們不會(huì)這么做。 讓它得以工作人們是想使用你的產(chǎn)品，而不是進(jìn)行一堆設(shè)置或?qū)W習(xí)一堆東西。做好初始配置，讓最常使用及最重要的任務(wù)一目了然，并使你的程序能夠立即開始工作。 小心提問避免使用模式對(duì)話框來問那些并不是非問不可的問題——應(yīng)該使用無模式對(duì)話框。如果你必須在 UI 中提問，那么表達(dá)方式應(yīng)當(dāng)基于用戶的目標(biāo)和任務(wù)，而不是技術(shù)。提供用戶能夠理解的（再次強(qiáng)調(diào)，基于用戶的目