網(wǎng)頁(yè)端搜索引擎的簡(jiǎn)單易用一直是網(wǎng)頁(yè)產(chǎn)品設(shè)計(jì)中的優(yōu)秀范例。 它巧妙地利用大片留白，一個(gè)搜索框入口，鏈接排布形式和品牌LOGO的互相搭配，在一個(gè)頁(yè)面里為用戶提供了絕佳的用戶體驗(yàn)。強(qiáng)大的產(chǎn)品特性也使其成為上網(wǎng)沖浪必不可少的工具之一，幫助用戶挖掘到未知的網(wǎng)絡(luò)世界。

隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，移動(dòng)信息量也迅猛膨脹，用戶對(duì)手機(jī)搜索引擎的需求也與日俱增。因此搜索引擎也紛紛開(kāi)始醞釀自己的手機(jī)產(chǎn)品。和PC機(jī)相比，手機(jī)端硬件更加局限，使用場(chǎng)景更加多樣，交互形式更加豐富，因此簡(jiǎn)單的網(wǎng)頁(yè)頁(yè)面移植已經(jīng)不能滿足用戶對(duì)于手機(jī)搜索引擎的需求。所以簡(jiǎn)單頁(yè)面也開(kāi)始了華麗變身，紛紛設(shè)計(jì)了自己的獨(dú)立客戶端。 當(dāng)將簡(jiǎn)單的頁(yè)面轉(zhuǎn)變?yōu)榭蛻舳塑浖r(shí)，應(yīng)該如何設(shè)計(jì)呢？下面將會(huì)為您逐步揭曉這些產(chǎn)品設(shè)計(jì)的攻略。

“組織”產(chǎn)品架構(gòu)，讓品牌特性凸顯出來(lái)

移動(dòng)客戶端的設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)不同。由于屏幕大小的限制和移動(dòng)端性能的影響，產(chǎn)品的結(jié)構(gòu)和網(wǎng)頁(yè)相比會(huì)更復(fù)雜， 層次也會(huì)更多。產(chǎn)品將面臨的挑戰(zhàn)是：用戶已經(jīng)習(xí)慣了網(wǎng)頁(yè)排布的使用方式，他們不愿意花費(fèi)精力去適應(yīng)一款全新交互的產(chǎn)品。那么當(dāng)把搜索引擎從PC端移植到展現(xiàn)形式多變的手機(jī)端時(shí)，如何組織這些結(jié)構(gòu)和層次，讓用戶能夠迅速地摸清產(chǎn)品結(jié)構(gòu)，清晰感知它的品牌特點(diǎn)，就尤為重要。

Google的產(chǎn)品架構(gòu)主要由4個(gè)大部分構(gòu)成，如上圖所示： 搜索區(qū)域， 更多應(yīng)用程序入口， 分類切換以及瀏覽工具欄。與網(wǎng)頁(yè)相比，產(chǎn)品的組織結(jié)構(gòu)更多，客戶端不能再使用網(wǎng)頁(yè)端全局靜態(tài)留白的布局形式。但是設(shè)計(jì)師巧妙地利用了手勢(shì)操作進(jìn)行層與層之間的疊加變化，為搜索區(qū)域搭配出了和網(wǎng)頁(yè)端幾乎相同的布局形式。“Google化”的組織方式，讓用戶在初次使用手機(jī)Google搜索產(chǎn)品時(shí)就能共用網(wǎng)頁(yè)端的心智模型，減少了學(xué)習(xí)成本。

Bing的移動(dòng)搜索客戶端組織方式不僅延續(xù)了它在網(wǎng)頁(yè)上的布局特色，而且也突出了其極具品牌特色的Daily Picture 服務(wù)(每日?qǐng)D片推送)。 通過(guò)每天向客戶端推送一張高清精美圖片， 配合著圖片上的附注信息， 加強(qiáng)了客戶端與用戶的互動(dòng)性，同時(shí)也通過(guò)其提高了用戶對(duì)軟件的期待度與黏性（比如用戶會(huì)有期待：明天的圖片會(huì)是什么呢？ 我一定要記得看看） 。

其次Bing 的一些細(xì)節(jié)上的配色使其非常具有自身移動(dòng)平臺(tái)Windows Phone 7的特色。 如上圖所示的設(shè)置頁(yè)面， Bing將iOS上的Navigation Bar和List的樣式進(jìn)行了重新組織布局， 和右圖WP7的界面對(duì)比，是不是有異曲同工之妙呢？這樣的組織設(shè)計(jì)，抓住了品牌擁護(hù)者的使用習(xí)慣，也從產(chǎn)品設(shè)計(jì)上體現(xiàn)出了自身的特點(diǎn)。

“拆分”信息層次，提升移動(dòng)端展現(xiàn)效率

在PC端使用網(wǎng)頁(yè)搜索引擎時(shí)，搜索建議會(huì)在用戶輸入后才展現(xiàn)，其中服務(wù)器會(huì)根據(jù)一定的算法將用戶經(jīng)常搜索的詞語(yǔ)和服務(wù)器中常被搜索的關(guān)鍵字一起下發(fā)作為搜索建議。 但在移動(dòng)端，因?yàn)檩斎氤杀镜奶岣撸裕?搜索引擎客戶端選擇將信息層次進(jìn)行了拆分。 通過(guò)分解用戶在不同情況下的不同需求， 將展現(xiàn)的內(nèi)容分階段進(jìn)行展現(xiàn)，實(shí)現(xiàn)讓用戶再一次輸入后，有更多選擇機(jī)會(huì)的目的。

Google 在關(guān)鍵字搜索時(shí)主要由兩種狀態(tài)構(gòu)成。 一是觸發(fā)框后進(jìn)入輸入模式， 此處將會(huì)顯示帶有圖標(biāo)的搜索歷史記錄； 二是輸入關(guān)鍵字后，將顯示搜索建議， 單擊建議將對(duì)相關(guān)關(guān)鍵字發(fā)起搜索。 而右邊的“＋”號(hào)也實(shí)現(xiàn)了拆分搜索建議的目標(biāo)，通過(guò)讓合適的關(guān)鍵字上框， 讓用戶可以獲得更多的搜索建議，也能發(fā)起更精確的搜索。

Bing的搜索流程與Google類似，也劃分為兩個(gè)階段， 但對(duì)于細(xì)節(jié)的處理略由不同。 Bing的搜索框被觸發(fā)后會(huì)顯示搜索歷史記錄， 但是在記錄是按類別進(jìn)行劃分， 并在底部提供書(shū)簽和更多歷史記錄的入口。通過(guò)拆分入口的方式，為用戶提供更多的點(diǎn)選機(jī)會(huì)。

當(dāng)輸入關(guān)鍵字后， 含有關(guān)鍵字的搜索歷史記錄會(huì)優(yōu)先排列在前面并按類型進(jìn)行劃分，服務(wù)器下發(fā)的搜索建議，對(duì)已輸入字符和未輸入字符進(jìn)行了高亮區(qū)分。 這樣的拆分方式，讓用戶從視覺(jué)層面上更容易進(jìn)行區(qū)分。

“隱藏”次級(jí)功能，讓產(chǎn)品任務(wù)清晰。

搜索引擎在使用中，除了在搜索文本框里輸入關(guān)鍵字后發(fā)起搜索，通過(guò)切換分類對(duì)搜索進(jìn)行限定，也是搜索引擎里經(jīng)常使用到的功能。但在手機(jī)端，因?yàn)槠聊淮笮〉南拗坪退阉餍枨蟮淖兓?，類型功能和主搜索任?wù)相比，優(yōu)先級(jí)會(huì)有所降低。所以在產(chǎn)品設(shè)計(jì)的時(shí)候會(huì)選擇將次級(jí)功能隱藏起來(lái)， 這樣讓產(chǎn)品的主任務(wù)更加清晰。

一般的客戶端在隱藏時(shí)，都選用下拉列表或者彈出氣泡的方式。 而這次新改版的Google搜索客戶端創(chuàng)新地將搜索框頂部?jī)?nèi)容和搜索分類隱藏了起來(lái)。 通過(guò)向右撥動(dòng)的手勢(shì)操作可以調(diào)出搜索分類， 讓用戶可以非常流暢地在任何場(chǎng)景發(fā)起搜索，并且實(shí)現(xiàn)分類切換的目的。通過(guò)“隱藏” 的方法讓屏幕內(nèi)顯示的內(nèi)容層次更加清晰。加強(qiáng)了用戶和客戶端之間的交互體驗(yàn)。

而B(niǎo)ing的搜索分類在其他頁(yè)面的展現(xiàn)形式則隱藏在了輸入框中。當(dāng)用戶在首頁(yè)里選取了某個(gè)分類進(jìn)行搜索后，那么點(diǎn)擊搜索框里的分類可以對(duì)分類進(jìn)行修改。 這種分類的修改方式可以展現(xiàn)較多層次，比如說(shuō)對(duì)于“餐廳”這個(gè)搜索分類， 用戶還可以更加細(xì)化到是通過(guò)名字，附近或者是價(jià)錢(qián)進(jìn)行搜索。 但是也是因?yàn)閷哟蔚募佣?，用戶不能預(yù)期到下次是否有分類，以及有多少層次的類別。所以對(duì)這種設(shè)計(jì)的方法要非常慎重。

“附加”手機(jī)產(chǎn)品特性，讓客戶端移動(dòng)起來(lái)

和PC機(jī)相比，手機(jī)產(chǎn)品多了語(yǔ)音錄入， 拍照攝像以及地理定位的移動(dòng)產(chǎn)品特征。 而搜索引擎從網(wǎng)頁(yè)端移植到手機(jī)端時(shí)，紛紛附加上了這些移動(dòng)產(chǎn)品的特性，讓客戶端的搜索方式更加移動(dòng)化。

語(yǔ)音搜索的流程一般是利用手機(jī)產(chǎn)品的麥克風(fēng)觸發(fā)錄入語(yǔ)音，通過(guò)聲波對(duì)比系統(tǒng)識(shí)別出想搜索的關(guān)鍵詞，并發(fā)起搜索。語(yǔ)音搜索的引入降低了用戶輸入成本，也讓用戶能在手持客戶端的情況下，邊走邊搜索，而關(guān)鍵詞錄入的方式更加自然，更加移動(dòng)化。

Google的語(yǔ)音搜索在此基礎(chǔ)上考慮了移動(dòng)輸入的環(huán)境特點(diǎn)。 用戶一般在移動(dòng)的情況下發(fā)起語(yǔ)音搜索， 因此可能會(huì)因?yàn)橹車(chē)h(huán)境音的影響造成語(yǔ)音搜索的結(jié)果不準(zhǔn)確。 因此在搜索結(jié)果頁(yè)里，允許用戶更換相近發(fā)音的詞語(yǔ)重新進(jìn)行搜索， 或是對(duì)語(yǔ)音輸入的詞語(yǔ)進(jìn)行編輯后發(fā)起搜索。更加提高了移動(dòng)搜索中，語(yǔ)音搜索的準(zhǔn)確性。

拍照搜索則允許用戶通過(guò)手機(jī)攝像頭拍照后發(fā)起搜索。用戶對(duì)一張圖片拍照后，拍照搜索可以從三個(gè)維度對(duì)圖片進(jìn)行識(shí)別， 一個(gè)維度是圖片上的物體，對(duì)物品發(fā)起相關(guān)搜索，如購(gòu)物搜索或者地點(diǎn)搜索；二是相同或相近的圖片，主要是從顏色和圖片主題進(jìn)行搜索； 三是圖片上的文字信息，選擇這一維度，用戶可以選擇對(duì)文字信息進(jìn)行翻譯或者搜索等垂搜操作。 拍照搜索幫助用戶將搜索圖片化，用戶可以走到哪里拍到哪里，搜到哪里。讓搜索可以無(wú)處不在。

綜上所述。當(dāng)搜索引擎從網(wǎng)頁(yè)端移植到手機(jī)做客戶端軟件時(shí)，對(duì)于產(chǎn)品設(shè)計(jì)的考慮不僅要符合手機(jī)移動(dòng)的特性，而且要在此基礎(chǔ)上提升用戶在移動(dòng)端的搜索體驗(yàn)。因此簡(jiǎn)單的網(wǎng)頁(yè)頁(yè)面紛紛進(jìn)行了華麗的變身來(lái)更加適合移動(dòng)平臺(tái)的發(fā)展特性。

源地址：http://mux.baidu.com/?p=1778