很多信息類服務(wù)站點(diǎn)都是通過分類的方式來組織相關(guān)內(nèi)容信息的，例如交通工具方面的卡車、貨車、SUV等;而Greensheet這樣的網(wǎng)站則是直接將售賣信息一股腦的堆在一個(gè)又一個(gè)的頁(yè)面中，如果我(英文原文作者)想找點(diǎn)兒什么，真的必須挨個(gè)看下去。謝了，我還不如直接在手機(jī)上用Craigslist應(yīng)用呢。
在使用Craigslist的過程中，我就琢磨著，作為普通用戶，我們確實(shí)可以很明顯的受益于那些在信息的搜索、排序和篩選方面做的很到位的UI設(shè)計(jì)模式。在本文中，我們將一起了解一下，有哪些設(shè)計(jì)模式可以幫助我們按照用戶所期望的方式將數(shù)據(jù)信息更加有效的組織和呈現(xiàn)出來。
搜索
首先為各位推薦兩本這方面的好書，"Search Patterns: Design for Discovery"和"Designing Search: UX Strategies for eCommerce Success" (前者國(guó)內(nèi)有引進(jìn)，即《搜索模式》一書)。然后我們接茬來看移動(dòng)應(yīng)用當(dāng)中與搜索相關(guān)的設(shè)計(jì)模式。
顯性搜索
自動(dòng)完成
動(dòng)態(tài)搜索
指定搜索范圍
已保存的/最近的搜索條目
搜索表單
搜索結(jié)果
顯性搜索
作為最普通和最常見的搜索模式，顯性搜索依靠顯性的動(dòng)作行為及表現(xiàn)方式來執(zhí)行搜索任務(wù)、展示搜索結(jié)果。在這種模式中，搜索按鈕會(huì)出現(xiàn)在輸入框的右側(cè)，或直接嵌入虛擬鍵盤中 (這種情況下可以將"取消"按鈕放在搜索欄中)。搜索結(jié)果通常會(huì)直接呈現(xiàn)在搜索欄下面的區(qū)域當(dāng)中。在設(shè)計(jì)方案里，可以考慮將線性搜索與自動(dòng)完成模式搭配使用。
在這種模式中，提供顯性的搜索按鈕，同時(shí)還可以為用戶提供用來取消當(dāng)前搜索行為的操作方式。當(dāng)搜索正在執(zhí)行時(shí)，提供明確的狀態(tài)反饋。
自動(dòng)完成
可以說，這是隨著Web 2.0那波兒大潮所涌現(xiàn)出的一種最經(jīng)典最實(shí)用的搜索模式。用戶在輸入關(guān)鍵詞的同時(shí)，系統(tǒng)會(huì)即時(shí)提供一些根據(jù)當(dāng)前已輸入文字所猜測(cè)出來的搜索結(jié)果，如果用戶發(fā)現(xiàn)其中的某個(gè)條目正是自己想要的，那么直接點(diǎn)擊就可以完成搜索。當(dāng)然，在沒有恰當(dāng)?shù)暮蜻x條目或是用戶覺得不手動(dòng)輸入完整關(guān)鍵詞就活不下去的情況下，這仍然是一個(gè)能夠正常完成搜索功能的普通模式。
理想情況下，系統(tǒng)應(yīng)該隨著用戶的輸入而立刻提供搜索結(jié)果，但在實(shí)際當(dāng)中，用來反饋系統(tǒng)工作狀態(tài)的視覺提示也是必要的。上圖右側(cè)，Netflix直接將狀態(tài)提示做在了關(guān)鍵詞輸入框內(nèi)部靠右端的位置;另一種常見的做法是將其放置在搜索結(jié)果所要出現(xiàn)在的位置。
TripAdvisor提供了一種更為出色的自動(dòng)完成模式，他們直接將即時(shí)呈現(xiàn)的搜索結(jié)果按照熱門的旅行目的地、賓館酒店等類型進(jìn)行了歸類。LinkedIn的做法也有幾分類似，他們會(huì)優(yōu)先顯示那些與當(dāng)前用戶有直接聯(lián)絡(luò)關(guān)系的搜索結(jié)果。
通過視覺提示向用戶反饋系統(tǒng)當(dāng)前的工作狀態(tài);可以考慮在搜索結(jié)果中對(duì)當(dāng)前已輸入的字符進(jìn)行著重顯示。