手機用戶端搜尋引擎:提升使用者在移動端的搜尋體驗

來源:互聯網
上載者:User

文章描述:簡單頁面的華麗變身-Search App Product Design.

網頁端搜尋引擎的簡單易用一直是網頁產品設計中的優秀範例。 它巧妙地利用大片留白,一個搜尋方塊入口,連結排布形式和品牌LOGO的互相搭配,在一個頁面裡為使用者提供了絕佳的使用者體驗。強大的產品特性也使其成為上網衝浪必不可少的工具之一,協助使用者挖掘到未知的網路世界。



隨著移動互連網的快速發展,移動資訊量也迅猛膨脹,使用者對手機搜尋引擎的需求也與日俱增。因此搜尋引擎也紛紛開始醞釀自己的手機產品。和PC機相比,手機端硬體更加局限,使用情境更加多樣,互動形式更加豐富,因此簡單的網頁頁面移植已經不能滿足使用者對於手機搜尋引擎的需求。所以簡單頁面也開始了華麗變身,紛紛設計了自己的獨立用戶端。 當將簡單的頁面轉變為用戶端軟體時,應該如何設計呢?下面將會為您逐步揭曉這些產品設計的攻略。

“組織”產品架構,讓品牌特性凸顯出來

移動用戶端的設計和網頁設計不同。由於螢幕大小的限制和移動端效能的影響,產品的結構和網頁相比會更複雜, 層次也會更多。產品將面臨的挑戰是:使用者已經習慣了網頁排布的使用方式,他們不願意花費精力去適應一款全新互動的產品。那麼當把搜尋引擎從PC端移植到展現形式多變的手機端時,如何組織這些結構和層次,讓使用者能夠迅速地摸清產品結構,清晰感知它的品牌特點,就尤為重要。

Google的產品架構主要由4個大部分構成,如上圖所示: 搜尋地區, 更多應用程式入口, 分類切換以及瀏覽工具列。與網頁相比,產品的組織圖更多,用戶端不能再使用網頁端全域靜態留白的布局形式。但是設計師巧妙地利用了手勢操作進行層與層之間的疊加變化,為搜尋地區搭配出了和網頁端幾乎相同的布局形式。“Google化”的組織方式,讓使用者在初次使用手機Google搜尋產品時就能共用網頁端的心智模型,減少了學習成本。

Bing的移動搜尋用戶端組織方式不僅延續了它在網頁上的布局特色,而且也突出了其極具品牌特色的Daily Picture 服務(每日圖片推送)。 通過每天向用戶端推送一張高清精美圖片, 配合著圖片上的附註資訊, 加強了用戶端與使用者的互動性,同時也通過其提高了使用者對軟體的期待度與黏性(比如使用者會有期待:明天的圖片會是什麼呢? 我一定要記得看看) 。

其次Bing 的一些細節上的配色使其非常具有自身移動平台Windows Phone 7的特色。 如上圖所示的設定頁面, Bing將iOS上的Navigation Bar和List的樣式進行了重新組織布局, 和右圖WP7的介面對比,是不是有異曲同工之妙呢?這樣的組織設計,抓住了品牌擁護者的使用習慣,也從產品設計上體現出了自身的特點。

“拆分”資訊層次,提升移動端展現效率

在PC端使用網頁搜尋引擎時,搜尋建議會在使用者輸入後才展現,其中伺服器會根據一定的演算法將使用者經常搜尋的詞語和伺服器中常被搜尋的關鍵字一起下發作為搜尋建議。 但在移動端,因為輸入成本的提高,所以, 搜尋引擎用戶端選擇將資訊層次進行了拆分。 通過分解使用者在不同情況下的不同需求, 將展現的內容分階段進行展現,實現讓使用者再一次輸入後,有更多選擇機會的目的。

Google 在關鍵字搜尋時主要由兩種狀態構成。 一是觸發框後進入輸入模式, 此處將會顯示帶有表徵圖的搜尋歷程記錄; 二是輸入關鍵字後,將顯示搜尋建議, 單擊建議將對相關關鍵字發起搜尋。 而右邊的“+”號也實現了拆分搜尋建議的目標,通過讓合適的關鍵字上框, 讓使用者可以獲得更多的搜尋建議,也能發起更精確的搜尋。

Bing的搜尋流程與Google類似,也劃分為兩個階段, 但對於細節的處理略由不同。 Bing的搜尋方塊被觸發後會顯示搜尋歷程記錄, 但是在記錄是按類別進行劃分, 並在底部提供書籤和更多記錄的入口。通過拆分入口的方式,為使用者提供更多的點選機會。


當輸入關鍵字後, 含有關鍵字的搜尋歷程記錄會優先排列在前面並按類型進行劃分,伺服器下發的搜尋建議,對已輸入字元和未輸入字元進行了高亮區分。 這樣的拆分方式,讓使用者從視覺層面上更容易進行區分。


“隱藏”次級功能,讓產品任務清晰。

搜尋引擎在使用中,除了在搜尋文字框裡輸入關鍵字後發起搜尋,通過切換分類對搜尋進行限定,也是搜尋引擎裡經常使用到的功能。但在手機端,因為螢幕大小的限制和搜尋需求的變化,類型功能和主搜尋任務相比,優先順序會有所降低。所以在產品設計的時候會選擇將次級功能隱藏起來, 這樣讓產品的主任務更加清晰。


一般的用戶端在隱藏時,都選用下拉式清單或者彈出氣泡的方式。 而這次新改版的Google搜尋用戶端創新地將搜尋方塊頂部內容和搜尋分類隱藏了起來。 通過向右撥動的手勢操作可以調出搜尋分類, 讓使用者可以非常流暢地在任何情境發起搜尋,並且實現分類切換的目的。通過“隱藏” 的方法讓螢幕內顯示的內容層次更加清晰。加強了使用者和用戶端之間的互動體驗。


而Bing的搜尋分類在其他頁面的展現形式則隱藏在了輸入框中。當使用者在首頁裡選取了某個分類進行搜尋後,那麼點擊搜尋方塊裡的分類可以對分類進行修改。 這種分類的修改方式可以展現較多層次,比如說對於“餐廳”這個搜尋分類, 使用者還可以更加細化到是通過名字,附近或者是價錢進行搜尋。 但是也是因為層次的加多,使用者不能預期到下次是否有分類,以及有多少層次的類別。所以對這種設計的方法要非常謹慎。


“附加”手機產品特性,讓用戶端移動起來

和PC機相比,手機產品多了語音錄入, 拍照攝像以及地理定位的移動產品特徵。 而搜尋引擎從網頁端移植到手機端時,紛紛附加上了這些移動產品的特性,讓用戶端的搜尋方式更加移動化。


語音搜尋的流程一般是利用手機產品的麥克風觸發錄入語音,通過聲波對比系統識別出想搜尋的關鍵詞,並發起搜尋。語音搜尋的引入降低了使用者輸入成本,也讓使用者能在手持用戶端的情況下,邊走邊搜尋,而關鍵詞錄入的方式更加自然,更加移動化。

Google的語音搜尋在此基礎上考慮了移動輸入的環境特點。 使用者一般在移動的情況下發起語音搜尋, 因此可能會因為周圍環境音的影響造成語音搜尋的結果不準確。 因此在搜尋結果頁裡,允許使用者更換相近發音的詞語重新進行搜尋, 或是對語音輸入的詞語進行編輯後發起搜尋。更加提高了移動搜尋中,語音搜尋的準確性。

拍照搜尋則允許使用者通過手機網路攝影機拍照後發起搜尋。使用者對一張圖片拍照後,拍照搜尋可以從三個維度對圖片進行識別, 一個維度是圖片上的物體,對物品發起相關搜尋,如購物搜尋或者地點搜尋;二是相同或相近的圖片,主要是從顏色和圖片主題進行搜尋; 三是圖片上的文字資訊,選擇這一維度,使用者可以選擇對文字資訊進行翻譯或者搜尋等垂搜操作。 拍照搜尋協助使用者將搜尋圖片化,使用者可以走到哪裡拍到哪裡,搜到哪裡。讓搜尋可以無處不在。



綜上所述。當搜尋引擎從網頁端移植到手機做用戶端軟體時,對於產品設計的考慮不僅要符合手機移動的特性,而且要在此基礎上提升使用者在移動端的搜尋體驗。因此簡單的網頁頁面紛紛進行了華麗的變身來更加適合移動平台的發展特性。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。