2013-10-18 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.jghy.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源:http://sudasuta.com/cooler-photo.html
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
近來(lái)積累了一些關(guān)于自動(dòng)完成的應(yīng)用方式,今天將其擴(kuò)展延伸并整理了些常見(jiàn)的應(yīng)用方法供大家一起學(xué)習(xí)。
“自動(dòng)完成”的設(shè)計(jì)思路源自于Poka-yoka預(yù)防機(jī)制。是一種自動(dòng)糾偏方法,在生產(chǎn)中用以防止人為失誤發(fā)展成為最終產(chǎn)品缺陷。
網(wǎng)頁(yè)設(shè)計(jì)中自動(dòng)完成在輸入框的應(yīng)用已很廣泛,屬于反應(yīng)性界面的強(qiáng)大模式。能夠嘗試猜測(cè)用戶(hù)輸入的文字,并且動(dòng)態(tài)的搜索出適配的結(jié)果并推薦給用戶(hù),輔助完成輸入。目的是避免用戶(hù)打錯(cuò)字,起到提示作用,智能預(yù)測(cè)用戶(hù)心理期望,從而確保他們的搜索更有效率。
優(yōu)點(diǎn):
“自動(dòng)完成”輸入框能預(yù)防錯(cuò)誤。用戶(hù)經(jīng)常在輸入幾個(gè)字的情況下就能在推薦列表中發(fā)現(xiàn)正確的名稱(chēng),而不會(huì)因?yàn)楣P誤找不到適配的搜索結(jié)果。
防止用戶(hù)為已經(jīng)在存在于數(shù)據(jù)中的名稱(chēng)創(chuàng)建多條數(shù)據(jù)庫(kù)記錄。
這種輸入框列出的搜索結(jié)果不會(huì)分頁(yè)。因?yàn)樗阉鹘Y(jié)果是隨著輸入的文字增加而變化的,所以就在當(dāng)前頁(yè)面中。因此完全沒(méi)有必要點(diǎn)開(kāi)“下一頁(yè)”,查看其余的結(jié)果。
這個(gè)功能的靈活性使用戶(hù)更加信任這個(gè)網(wǎng)站,使事情變得簡(jiǎn)單可依賴(lài)。雖然這個(gè)功能有很多值得夸贊的地方,但它也同樣有一些局限性。
局限性:
當(dāng)用戶(hù)搜索一些小范圍的數(shù)據(jù)時(shí),例如某個(gè)學(xué)科的分支目錄,他會(huì)很有用,但是對(duì)于在google和yahoo 這樣的網(wǎng)站中進(jìn)行廣域搜索的用戶(hù)來(lái)說(shuō),并不一定有用。
首先,那些盯著鍵盤(pán)輸入文字的用戶(hù)通常注意不到推薦列表,雖然已經(jīng)把一切都送到眼前,他們還是看不到。有些人偶爾會(huì)在輸入完想要的內(nèi)容后抬頭才發(fā)現(xiàn)推薦列表,但他們往往都是敲了回車(chē)鍵才抬頭,所以根本沒(méi)看清楚列表里面是什么。
其次,用戶(hù)會(huì)因?yàn)橥扑]而放棄自己先前的主張,但其實(shí)他們自己想輸入的文字很可能比推薦的詞匯更加有效。原因是用戶(hù)認(rèn)為系統(tǒng)推薦的將會(huì)產(chǎn)生更有效的結(jié)果,也有可能他們認(rèn)為這些搜索詞是開(kāi)發(fā)者希望他們使用的詞匯。
“冷啟動(dòng)”是個(gè)問(wèn)題,也即最初可能沒(méi)有任何用戶(hù)行為數(shù)據(jù)。這時(shí)候需要結(jié)合熱點(diǎn)挖掘的方式給用戶(hù)一個(gè)最初的感受,不過(guò)需要很好的把控質(zhì)量,并進(jìn)行灰度放量,AB test。
suggest的一些質(zhì)量評(píng)測(cè)點(diǎn):
1. 垃圾詞過(guò)濾。比如帶無(wú)意義符號(hào)的查詢(xún)串要進(jìn)行處理。
2. 意義重復(fù)的query,比如“天上人間照片”和“天上人間的照片”屬于同意。
3. 在去重復(fù)基礎(chǔ)上考慮多樣性。
4. 匹配模式,前綴匹配、后綴匹配。
5. 中英文(拼音)混合串的質(zhì)量。
6. 錯(cuò)別字智能糾錯(cuò)。
7. 政治、黃詞、零結(jié)果等的過(guò)濾。
8. 新聞?lì)悪z索需要引入時(shí)新性。
9. 如果有類(lèi)似阿拉丁的直達(dá)區(qū),考慮直達(dá)區(qū)策略以及展示樣式。
10. 數(shù)據(jù)方面主要看CTR。但是要注意,用戶(hù)只要輸入query,就會(huì)調(diào)用suggestion,多一個(gè)查詢(xún)?cè)~,suggest就又檢索一次,如果以單純的檢索量做分母是不合適的。應(yīng)該以一次完整的檢索行為作為分母,以點(diǎn)擊提示詞的次數(shù)為分子。
Google suggest是Google搜索引擎最重要的人性化服務(wù)之一,即在搜索欄輸入框內(nèi)使用了此功能,使用戶(hù)在輸入搜索關(guān)鍵詞時(shí)能及時(shí)調(diào)整關(guān)鍵詞推薦列表,以 獲得最需要的搜索結(jié)果。其中通過(guò)各種搜索請(qǐng)求的流行度來(lái)確定這些預(yù)測(cè)推薦請(qǐng)求的排列順序等。目前中國(guó)的版本已經(jīng)沒(méi)有這個(gè)功能了。
A fancy Apple.com-style search suggestion (演示地址)
這是一個(gè)使用HTML/CSS,jQuery,MySQL PHP等技術(shù)實(shí)現(xiàn)的Search Suggestion。
這個(gè)Mootools插件能夠?qū)⑵胀ǖ奈谋据斎肟?,轉(zhuǎn)換成擁有Autocomplete功能風(fēng)格類(lèi)似于Facebook的文本輸入框。支持任意類(lèi)型的數(shù)據(jù)源(XHR、Json)。
Tokenizing Autocomplete Text Entry (演示地址)
一個(gè)jQuery插件能夠讓用戶(hù)從一個(gè)預(yù)設(shè)的列表中,選擇多個(gè)項(xiàng)目。并提供Autocompletion功能來(lái)幫助用戶(hù)搜索項(xiàng)目。支持通過(guò)CSS控制和定制布局。能夠緩存搜索結(jié)果減少服務(wù)器加載次數(shù)。支持用鼠標(biāo)或鍵盤(pán)來(lái)選擇項(xiàng)目。提供平滑的動(dòng)畫(huà)數(shù)據(jù)加載效果。
有道為suggest添加三欄顯示、網(wǎng)頁(yè)預(yù)覽等功能,幫助用戶(hù)更快的找到答案。在優(yōu)酷等視頻網(wǎng)站中也有此功能。
參考文獻(xiàn)
<瞬間之美>
http://paranimage.com/33-javascript-autocomplete-scripts/
http://www.zhihu.com/question/19571974
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jghy.net