知乎幾乎是我現(xiàn)在用的最多的 App 了，而當(dāng)在各種不同的場(chǎng)景中對(duì)其觀察、體驗(yàn)后，發(fā)現(xiàn)知乎客戶端 for iOS 中的搜索環(huán)節(jié)依然有一些不適（對(duì)我個(gè)人而言），因此利用幾天時(shí)間思考了能否對(duì)其進(jìn)行一定的交互簡(jiǎn)單改進(jìn)，提升這個(gè)流程的體驗(yàn)。

1.搜索逆向路徑中返回方式不連貫，模態(tài)視圖打斷了原本連續(xù)的手勢(shì)返回操作。

小標(biāo)題看起來可能比較拗口，我特意制作了幾個(gè) GIF 幫助理解問題。

目前主流的一些 iOS App（包括系統(tǒng)自帶 App）中，搜索框都是采用了模態(tài)視圖，即它不是一個(gè)新的獨(dú)立頁面，而是從屬于某個(gè)頁面的視圖，專門用來解決某類獨(dú)立的任務(wù)（搜索）。一般來說，對(duì)于一個(gè)獨(dú)立頁面，設(shè)計(jì)時(shí)會(huì)允許其手勢(shì)滑動(dòng)返回（從中間或邊緣向右滑動(dòng)），但是由于模態(tài)視圖并不是一個(gè)頁面，所以在 iOS 中經(jīng)常被設(shè)計(jì)為禁止手勢(shì)滑動(dòng)返回，并且在右上角設(shè)置一個(gè)「取消」按鈕用以結(jié)束模態(tài)視圖。

首先，先來看一下知乎上搜索的正向路徑。即：主頁—側(cè)邊欄—搜索框—輸入關(guān)鍵字—搜索結(jié)果列表—話題/問題—答案。

下面一張 GIF 則是上述操作的逆操作，從答案返回到主界面。

知乎的頁面手勢(shì)返回采用的是全屏手勢(shì)向右滑動(dòng)，即不需要從左側(cè)邊緣發(fā)起滑動(dòng)操作。因此當(dāng)我從最后一個(gè)答案出發(fā)，經(jīng)過三到四次手勢(shì)滑動(dòng)后回到了搜索結(jié)果頁面，此時(shí)若想要進(jìn)一步回到主頁/側(cè)邊欄，就會(huì)發(fā)現(xiàn)在當(dāng)前的模態(tài)視圖上禁用了手勢(shì)操作，必須點(diǎn)擊右上角的「取消」按鈕結(jié)束搜索視圖。而在目前主流的大屏手機(jī)上，右上角往往不是單手操作的觸摸范圍，而我個(gè)人也是盡可能地在單手操作時(shí)使用手勢(shì)操作進(jìn)行頁面的跳轉(zhuǎn)。

一種可能的改進(jìn)方式，就是將搜索也改為新頁面，而非模態(tài)視圖，并且允許手勢(shì)滑動(dòng)返回到主頁，如下圖所示。

我特意留意了一下手機(jī)中幾個(gè)常用 App 的做法，發(fā)現(xiàn)有美團(tuán)、天貓、去哪兒等應(yīng)用也采用了新視圖的做法，也許這個(gè)設(shè)計(jì)并沒有遵從 iOS 的設(shè)計(jì)規(guī)范，但是我個(gè)人覺得從體驗(yàn)出發(fā)，這樣更加連貫、自然。

2.搜索框的位置擺放。

目前，知乎的搜索框是擺放在側(cè)邊欄的頂部。值得注意的是，「提問」功能則是安放在了主頁的右上角，并且即便點(diǎn)擊了提問，也會(huì)對(duì)輸入的問題先進(jìn)行搜索，可以避免對(duì)已有答案的問題重復(fù)提問。示例如下圖所示：

從交互設(shè)計(jì)上來說，知乎的搜索框擺放是比較少見的，大多數(shù)的 App 會(huì)在頂部使用一個(gè)控件常駐搜索框（電商類、 貼吧等），或者將搜索做成按鈕合并到主導(dǎo)航當(dāng)中（App store、tumblr等）。反過來思考，也許知乎的產(chǎn)品經(jīng)理更希望用戶進(jìn)行瀏覽、發(fā)現(xiàn)、提問，而不是強(qiáng)針對(duì)性地去發(fā)掘一個(gè)問題。

來看看知乎的同類 Quora 是怎么擺放搜索框的，如果把知乎的搜索框挪動(dòng)到標(biāo)題欄取代現(xiàn)有的那個(gè)并沒有太大用處的「首頁」字樣，會(huì)不會(huì)更好？（產(chǎn)品層面而言，未必更好）

3.現(xiàn)有的搜索動(dòng)畫改進(jìn)

既然現(xiàn)有的搜索是希望按照 iOS 規(guī)范來設(shè)計(jì)模態(tài)視圖，那我們不妨將目前不太自然的動(dòng)效修改為更適合 iOS 的樣式吧。將搜索框點(diǎn)擊后自然延展為模態(tài)視圖中的搜索框，然后將「取消」和鍵盤延遲出現(xiàn)，原本的界面則伴隨 scale 變化淡出。而改動(dòng)前的設(shè)計(jì)可以參考本文的第一個(gè) GIF 圖。

其實(shí)這篇文章很簡(jiǎn)單，但是卻整整思考了兩天，中間也咨詢、訪談了很多的普通用戶、產(chǎn)品/設(shè)計(jì)朋友，我的這些改進(jìn)應(yīng)該也是淺薄的，但是這個(gè)過程卻幫助我加深了對(duì)模態(tài)視圖、搜索流程以及搜索框動(dòng)效的理解，學(xué)習(xí)總沒有壞處。對(duì)了，最近使用 Pixate（制作簡(jiǎn)單動(dòng)效）+ QuickPlayer（高清錄制）+PicGIF（轉(zhuǎn)換格式）可以很方便地做出本文中這樣簡(jiǎn)單的演示效果。

希望大家多多指導(dǎo)，我也會(huì)繼續(xù)努力。

作者：鎮(zhèn)雷

來源：簡(jiǎn)書