設計完美的搜尋體驗 - 基本知識

英文原文已於 2012 年 12 月 14 日星期五發佈

大家好！我的名字是 Kate Dramstad，我是 SharePoint 搜尋團隊的程式技術經理。SharePoint 2013 中的搜尋體驗比以往更具擴充性 - 我們已充分授權設計人員和開發人員來建置他們幾乎可以想像得到的所有內容。但是，在自訂搜尋體驗時務必謹慎。在平衡的頁面與凌亂的頁面之間只有些微差異，而我們想要與您分享一些有關我們如何設計兼具華麗外觀與實用性之搜尋體驗的想法。

整頁對齊方式

搜尋體驗的最重要因素之一是所有頁面元素的對齊方式。在我們的預設設計中，您將會注意到精簡搜尋網頁組件 (沿著頁面左側顯示排序選項) 和 SharePoint 搜尋中心圖示 (左上角的放大鏡影像) 都是靠左對齊。搜尋方塊、瀏覽及結果也是靠左對齊。搜尋方塊頂端會與圖示頂端對齊；瀏覽底部會與圖示底部對齊。 

圖 1. 搜尋結果頁面上的所有元素都會與格線對齊 (這裡以綠色來顯示)

 

這可能看似小細節，但將頁面上的元素貼齊格線實際上能夠協助使用者更輕易地審視頁面。元件是利用更明顯的垂直和水平空格線來彼此分隔。這有助於讓使用者的目光更容易分辨頁面上的不同元件，這點非常重要。從好的方面來看，對於大多數使用者而言，未對齊的頁面充其量只是「感覺不好」，但從壞的方面來看，這樣確實會阻礙使用者有效率地審視結果。當元素未對齊時，就會產生「鋸齒狀邊緣」。當使用者的目光嘗試掃描鋸齒狀邊緣時，就必須來回查看才行。如果目光審視的是直線，那就會更有效率。 

圖 2. 在此影像中，搜尋圖示會移至左邊，如此一來，就不再對齊格線

 

在頁面中新增元件或重新排列現有元件時，如果您想要盡可能保有此體驗的完美性，請務必記得保留此格線。 

圖 3. 我們已在此處修改了內嵌結果，以包含星級評等功能和一些其他中繼資料。請注意，新增的功能仍會對齊格線。

 

整頁外觀與感受

對齊不是唯一重要的項目。您也應該注意頁面上色彩、字型及豐富控制項的數量。搜尋結果頁面的重點幾乎一律應為結果本身，因此，在為結果頁面上的元件設定樣式時，您會想要確定結果能夠吸引使用者的目光。以下為一些秘訣和訣竅。

盡可能使用易於了解的色彩對應

例如，搜尋結果中的一般慣例是，藍色文字為可點選的結果標題，而綠色文字為指定結果的 URL。脫離此慣例會迫使使用者對於他們所看見的內容有所遲疑。 

圖 4. 將標題和 URL 的色彩交換有時會讓使用者感到紊亂。請嘗試以符合易於了解之慣例的方式來使用色彩

 

盡可能使用最少的色彩

色彩通常是用來協助凸顯某些關鍵內容，例如，選取的篩選條件選項、結果標題或 URL。但是，使用許多色彩會讓所有內容嘗試要脫穎而出，每個內容都要競相吸引使用者的注意。結果便是沒有任何內容會脫穎而出，因為它造成了五顏六色的視覺混亂效果。 

圖 5. 使用太多不同的色彩會分散注意力，很難決定要看哪些內容，以及哪些內容很重要。請限制在 UI 中使用的色彩數量。

 

盡可能使用最少的字體和字型大小

使用字型、字型大小及粗體/斜體的原因與色彩類似，那就是有助於凸顯某些重要元素。就和色彩一樣，如果您使用太多樣式和字型，則所有的內容便會顯得凌亂。我們的產品小組通常將它稱為「勒贖通知」，因為它看起來就像是從不同雜誌剪報中拼貼在一起的頁面！

盡可能讓豐富的控制項在視覺上保持簡單

請看一下圖 6 中 [已修改] 標題下方的 [日期] 篩選條件長條圖精簡器。最初在我們的預設頁面上放置此精簡器是有風險的，因為它是具備複雜外觀的控制項，可能會在和以文字為基礎的篩選條件進行比較時凸顯出來。但是，我們讓色彩與頁面的其餘部分保持一致，並讓圖形和線條保持簡潔。這樣的作法，在新增任何自訂控制項時進行一樣的動作是很重要的。

在圓形圖篩選條件，我們也運用相同的想法。但是，請看一下圖 6，看看這個精簡器如何使人分心。 

圖 6. 自訂的圓形圖篩選條件含有太多色彩，與其他控制項的視覺樣式不符。它太過於使人分心。

 

現在看一下圖 7，看看如果我們簡化色彩配置和形狀時，會發生什麼事。 

圖 7. 藉由使用已經在 UI 中使用的色彩並保留其他控制項的視覺樣式，此圓形圖精簡器就足以吸引使用者短暫探索它的用途 ，又不會讓他們分心而把目光從其工作中移開

 

頁面的概念性分割

設計搜尋體驗時，您應該同時考慮美觀與概念性的細節。根據常見搜尋慣例和我們自己的研究，我們根據功能和使用者互動模式來將頁面元件組織在不同的區域中。在新增或重新排列元件時，最好是保持我們的概念性分割，如此一來，使用者就不會搞不清楚應如何執行某些動作。

例如，我們的所有篩選動作都是位於搜尋結果頁面左側。當使用者想要篩選結果集時，總會知道要查看該處。如果您想要在頁面中新增篩選條件，最好是將它新增到其他篩選條件旁邊，如此一來，使用者就不需在整個頁面中尋找它。

圖 8 顯示預設搜尋結果頁面的概念性分割概觀。 

圖 8. 已將搜尋結果頁面分割為五個功能區域。在自訂此頁面時，請嘗試將新元素新增至其對應功能區域。

 

這些只是一些可讓您快速開始建置完美搜尋體驗的廣泛指導方針。期望能夠收到您的意見與問題！

 

這是翻譯後的部落格文章。英文原文請參閱 Designing a beautiful search experience – The basics