設(shè)計(jì)模式-自動(dòng)完成

1、設(shè)計(jì)模式 - 自動(dòng)完成Jabob Nielsen提出的 10 個(gè)可用性原則中有一個(gè)原則- 防止出錯(cuò)（ ErrorPrevention ）。官網(wǎng)中有對(duì)這一原則的具體解釋，這里不再復(fù)述。筆者認(rèn)為還有一個(gè)防止出錯(cuò)的方法就是讓用戶選擇而不是輸入。 在這里用戶不需要思考如何輸入，輸入是否正確，這里以常見的“自動(dòng)完成”來談一下這個(gè)設(shè)計(jì)模式在當(dāng)下的應(yīng)用。自動(dòng)完成是一種屬于反應(yīng)性界面的強(qiáng)大模式。 典型的模式是隨著用戶在文本框的輸入，顯示一個(gè)包含匹配項(xiàng)的下拉列表。 理想情況下， 應(yīng)該自動(dòng)選擇最佳的匹配項(xiàng)。此時(shí)，用戶只需要接受匹配項(xiàng)或者從列表選擇其他項(xiàng)。典型應(yīng)用：郵箱，即時(shí)通信軟件圖好，現(xiàn)在我們來思考下這簡(jiǎn)單的交

2、互中， 有哪些需要在交互設(shè)計(jì)中需要注意的地方。筆者從輸入、匹配、選擇這三個(gè)方面進(jìn)行分析。輸入用戶輸入時(shí)，需要等待多少時(shí)間反饋？對(duì)自動(dòng)完成而言， 用戶每輸入一個(gè)字符就需要反饋。 不過，如果用戶輸入速度很快， 在輸入幾個(gè)字符給出反饋建議也是可以的，同時(shí)這里也需要考慮到性能問題。匹配如圖 2 對(duì)于 IBM 的 Note 而言，用戶輸入的字符可以與聯(lián)系人的名字或者電子郵件地址的任意部分匹配， 突出顯示匹配的聯(lián)系人， 同時(shí)也以粗體顯示已輸入的字符。這樣可以清楚地告知用戶選中的聯(lián)系人以及所匹配的字符， 進(jìn)行拼寫檢查，防止出錯(cuò)。同時(shí)支持鍵盤操作，上、下方向鍵可以用來選擇匹配的項(xiàng)。圖 2 Lotus Note

3、 v8.0如圖 3 在一些集成開發(fā)環(huán)境中， 系統(tǒng)會(huì)從規(guī)定的參數(shù)中基于用戶的輸入提供一些匹配的關(guān)鍵字。在開發(fā)中使用這種設(shè)計(jì)模式，幫助程序員大大地提高效率。從認(rèn)知上由系統(tǒng)給出提示減輕了記憶負(fù)擔(dān)， 而操作上程序員只需要選擇不需要輸入對(duì)應(yīng)代碼減少了操作， 降低了出錯(cuò)的可能性。 在集成開發(fā)環(huán)境中， 系統(tǒng)會(huì)根據(jù)用戶輸入的值匹配標(biāo)簽中的任意部分進(jìn)行提示。 特別是標(biāo)簽的自動(dòng)關(guān)閉， 語法提示都是自動(dòng)完成這一設(shè)計(jì)模式的體現(xiàn)，很好地提升了體驗(yàn)效果。圖 3 Lotus Note v8.0 IBM Rational Application Developer圖 4 中這里說明普通的匹配列表如何做優(yōu)化和引導(dǎo)。匹配列表也可

4、以提供一些使用說明和額外的相關(guān)信息。1. 在列表中用灰色字體提供了使用說明；2.在有些匹配項(xiàng)后提供了類型(computer science, blog)等，這樣就更方便地進(jìn)行精準(zhǔn)搜索和信息歸類；3. 提供了網(wǎng)頁搜索功能，在沒有合適的匹配內(nèi)容時(shí)，給予用戶更大的搜索范圍；4. 給予用戶控制，用戶可以隱藏不符合預(yù)期的內(nèi)容。圖 4 IBM w3 portal自動(dòng)完成這個(gè)設(shè)計(jì)模式除了在簡(jiǎn)單的文本輸入框中有應(yīng)用還可以使用在其他環(huán)境中。圖說明了利用自動(dòng)完成去指定對(duì)應(yīng)的屬性。 一旦從列表中選擇了屬性，相對(duì)應(yīng)的值也同時(shí)會(huì)被設(shè)定。 這里將屬性與值配對(duì)在大型軟件開發(fā)的協(xié)同工作中有特別的意義， 保證了輸出質(zhì)量的統(tǒng)一和

5、規(guī)范。 設(shè)計(jì)和開發(fā)只需要去調(diào)用就可以，大大減少了溝通成本。圖 5 IBM Fringe圖 6 自動(dòng)完成與標(biāo)簽組合， 很顯然只會(huì)匹配那些以標(biāo)簽名開頭的項(xiàng)。 在一些企業(yè)內(nèi)部的 SNS應(yīng)用，自動(dòng)搜索這一個(gè)模式可以與很多 Web2.0 的元素組合，提高設(shè)計(jì)體驗(yàn)。圖 6 Lotus Connections選擇在郵箱的自動(dòng)匹配環(huán)境中，按 Tab 就可以把匹配的聯(lián)系人輸入到文本框中。因?yàn)猷]箱中的 TAB鍵支持選定和改變焦點(diǎn)的作用。 在普通的即時(shí)通訊軟件中一般使用按 Enter 進(jìn)行選中并直接打開對(duì)話框。 如果是企業(yè)級(jí)的即時(shí)通訊軟件建議支持 Tab 進(jìn)行多人選擇。什么時(shí)候不用1. 一些涉及到安全的應(yīng)用最好不要

6、使用“自動(dòng)完成” ，例如在輸入用戶名、密碼或者其他敏感信息的時(shí)候；2. 當(dāng)存在大量的匹配的內(nèi)容，但沒有合理的依據(jù)去歸類；3. 系統(tǒng)不能基于用戶的輸入即時(shí)更新匹配的內(nèi)容；4. 自動(dòng)選擇不能用于有固定匹配項(xiàng)的場(chǎng)景，例如最好使用下拉列表而不是自動(dòng)完成讓用戶選擇洲名。無障礙設(shè)計(jì)1. 當(dāng)頁面進(jìn)行刷新的時(shí)候，屏幕閱讀器會(huì)重復(fù)閱讀。所以在更新匹配項(xiàng)的時(shí)候頁面不能進(jìn)行刷新。2. 屏幕閱讀器是按照從上到下的順序閱讀已載入的頁面。因此在頁面載入完成后，出現(xiàn)的匹配項(xiàng)需要通知屏幕閱讀器， 并且在頁面的這一部分要給一個(gè)快速入口。參考文獻(xiàn)1. /papers/heuristic/heuristic_list.html2. Bill Scott , Tber