為什麼手機客戶端的搜索入口或者搜索框大部分都在頂部,在大屏手機中明顯是難點擊到的?

在平台化的趨勢中,檢索功能的權重不可忽視,比如電商客戶端有目的的搜索幾乎每次找產品都會用到,但是搜索還是會在頂部導航條,有沒有好的解決方案呢?


說反對和不好設計的的我只想大家參考一下WP的各種應用。

cotana

UC瀏覽器

必應詞典

IE瀏覽器

我就想問下所有說用戶習慣不好改變的,以上哪一個界面讓你覺得特別突兀了?

什麼叫意願明確就不點擊?設計本不是追求人性化么?

不正是因為經常點擊才將最常用操作放在最近的位置么?

作為一個網頁,把搜索框放在最上方可以理解,畢竟瀏覽器是從上往下編譯呈現的。但作為一個手機APP,放在下方作為一個獨立控制項很困難么?做不到WP這樣從設計時就考慮到全局大屏操作的情景的情況的話,做成UC瀏覽器那樣的折中不可以么?WP里的UC下方搜索框是可以自動判斷你瀏覽內容隱藏的。想喚出來也是極其方便簡單。

習慣有那麼大的阻礙力么?

設計起來真那麼困難么?

每次切換到QQ瀏覽器還是要伸長手指去按上面真的很累。

我手頭上沒有安卓手機,也沒有蘋果手機。所以就不截圖了。

即便是安卓下,必應也是把搜索框放在下面的

安卓和IOS給你在系統層面上限制不放在下方了沒?有技術壁壘么?

隨便揣測一下——純粹是懶,思想轉不過來,設計者自己都習慣了,沒想設計罷了。

(UC FOR WP和其他的不是一個小組)

wp能做到,號稱更自由的android為什麼就不能比「反人類」的WP更人性化呢?

===================================

集中回答幾個疑問:

1.WP不是所有應用都是這樣將搜索框放在下面的。但符合metro設計的應用大多(除了部分故意增加操作成本考慮的設計)將需要手指進行操作的功能放在屏幕底部。需要手操作的部分不應遠離手能觸摸的範圍。而且IE和UC的搜索框在實際閱讀使用的時候是可以消失隱藏的,不影響觀感。

2.我沒有說WP千好萬好,我只是回答題主的疑問。wp已經有了現成的很受歡迎的搜索框放在下部的成功設計例子而已。為什麼成了我吹捧WP的回答?就算我吹捧一下,wper受到的鄙視還少了去了?

3.關於閱讀順序的,你們看我IE的截圖,相關性是從下到上的。當然你非要說從上到下才符合閱讀習慣那當我說錯了。

4.關於大屏必須用雙手的,Lumia1520用戶和Lumia1320用戶站出來吧……告訴他們單手六寸屏是不是真的很難操作?

5.吸取點別的系統的好的經驗是要了命了還是怎麼的了?安卓版UC就做到了一個折中的選擇,可以下拉到中部或下部方便控制(有其他答主補充圖了),而且能夠適應不同大小的屏幕,我覺得這很好啊,根據實際情況有所改變很難么?

說是用戶習慣不好改變我可以接受(其實也不是不能改,IOS6-7就很打臉的例子),說是為了統一各大平台的使用體驗(比如京東)我也能接受,說是搜索操作不是第一需求所以適當增加操作成本的我也能接受,但硬說在當前大屏橫行的世界裡,搜索框無論何種情況都一律放在上部依舊是王道的,我想不通。


玩笑話:

可能因為設計這些應用的人都是小手吧(笑)。其實小手黨從來不會考慮這些問題,因為小手黨很早的時候開始就是雙手操作了,而左手握住手機時,右手點擊手機任何部位都不會有不和諧。

從全鍵盤的普及來看,我認為雙手操作的用戶比很多人想像的更多,畢竟全鍵盤的輸入法布局天生更適合雙手持機(左右手同時持機,用左右手大拇指同時操作全鍵盤輸入法能夠獲得更高效率)。對於需要文字輸入的場合來說我認為雙手操作是必須的,單手操作只能解決一些非常簡單的應用情形,而搜索並不屬於這種情況。

在 Nexus 4 / Nexus 7 剛發布的時候,Google 定義了搜索的調出方法,是從屏幕下方往上滑動,所以對 google 來說上方的搜索欄僅僅是用來看,不是用來點擊的。——不過耐人尋味的是:Google 的官方宣傳視頻中的三個人,全是「左手持機,右手操作屏幕」的,沒有人單手操作屏幕,我不清楚單手操作是真正的需求還是偽需求,但確實感覺重度手機用戶與平板用戶大多都已經是雙手操作。

--

正經話:

其實是因為 iOS 開了這個先河,然後其他人都無腦按照 iOS 風格設計了,即便這個設計在屏幕變大之後不一定適合,很多人也依然跟風 iOS。當然,跟風 iOS 是最安全的設計,這本身也不能算錯,只能算是缺乏創新而已。如果哪天 iOS 把搜索欄改到底部,相信也是會有大量跟風的 。


這一點,必應做得就很好


我匿名回答純粹只是覺得我讀書少……

_(:з」∠)_

———我是來說一些偏題的東西的,紀念我逝去的青春———

——————————首先是廢話——————————————

特地趕來聲援一下WP啊!

WP真是被黑得不行啊。作為一個用過蘋果、安卓、WP的用戶,即使在WP的百般摧殘之下,還是毅然決定買第三個WP,看來絕對是真愛……但這也不妨礙我覺得其他系統也不錯,蘿蔔青菜各有所愛,各個系統也各有所長,不合理的地方未來也會慢慢改,不要爭個你死我活、面紅耳赤啊……

———來說一個退出時代的好用的手機搜索體驗:WebOS———

我真的是很奇葩啊,怎麼會用過這麼奇葩的系統,可能就是覺得Palm長得可愛吧。

當時用的是Veer,這貨長這樣(好小好小,圓圓的,真的好Q,_(:зゝ∠)_)

(以下圖片直接百度的,會有問題嗎,讀書少,不懂啊)

它有個功能,叫做"just type",啥意思呢,就是你只要滑開滑蓋 -- 輸入你想要搜索的東西 -- 就進入全局搜索功能啦~

來看一看圖,大概體驗是這樣的:

這種才是好用的搜索體驗好嘛!!!

大家不要再吵了!哭!

可惜,我的WebOS已經成為逝去的青春了,滑蓋手機幾乎被觸屏手機取代啦~

—————-—如果偏要在觸屏手機上有好用的搜索體驗的話——-——

比如WP最右下角的搜索按鍵就非常好用啊,除了全局搜索,腦洞開一下,可以融入APP使用這搜索按鍵嗎(我真的讀書少……)

要麼就是在做個什麼比較直覺的手勢,快速開啟搜索功能之類的……

別說現在的超大屏幕手機了,當年用3.5寸屏幕蘋果的時候,就覺得左上角的返回按鍵啦,最上面的搜索框就很難用了好嗎????(手小,沒辦法)

我不大懂哦,可能現在其他系統沒有把搜索欄放在最底下是不是有專利之類的原因?

但是很多東西都抄來抄去的,貌似也很沒節操嘛,不懂啊……


親人,你確定你是現代人嗎,現在但凡像樣的搜索框,輸入完內容後鍵盤的回車就可以直接執行搜索啊,配合「點擊搜索入口則輸入焦點自動集中在文本框中」,除非搜索結果miss了否則這根本不是個問題。

搜索真正的痛點永遠是演算法,單說ue的話把刪掉輸入內容的叉號和搜索鍵放在一起才是傻逼設定好嗎,像我這種手快俠老是栽跟頭。


這是歷史遺留問題,首先在最早的PC端web搜索的入口都是以居中,或者居上且居左顯示,在單手可控的小屏移動web時代,延續當時現有的風格是最自然的選擇,當移動平台發展到單手不能完全覆蓋的大屏時代時,大多(也幾乎可以說是所有)廠家在面對延續習慣和試用新的操作界面的選擇時,選擇了較保守的前者。


回答一下iOS下為什麼這樣設計,而不像WP那樣。

可以看到twitter客戶端下方有一個TabBar,這是iOS中一個標準的控制項,通過Press觸發。而WP中是在上方,通常通過Swipe觸發(也可以點按,但我認為沒幾個人會這樣),跟iOS中的UIPageControl類似。這樣的設計就導致了整個UI布局的不同,屏幕的中間用來顯示主要內容這個是沒人會覺得有問題,這塊空間占的越大體驗越好,所以iOS中,UISearchBar通常會放在屏幕的上方,而WP在下方。(當然更常見的設計是在很多的UIView上留一個Search的Button,觸發後滑出一個專門用來搜索的SubView,並且在這個SubView滑出來的時候上方的SearchBar就已經獲得焦點,自動彈出鍵盤,用戶不需要再次伸手指去點,所以就無所謂在上在下了,當然,在上方體驗會更好,因為下方的鍵盤已經佔了很多一塊區域,用戶的眼睛更集中在屏幕的中間的主要內容區域,所以SearchBar設計在上方。這裡還得說一下為什麼很多的Search Button也是在上方,理由是非搜索為主的應用,TabBar中能顯示在屏幕上的Tab個數是有限的,iOS 7最多能顯示5個(再多會自動放在…裡面),所以顯然如果有其他更重要的內容,Search Button就只能在別的地方。


毫無疑問,這是小屏手機遺留下來的陋習。在統一就是美的剋制下,搜索框因為和app圖標的衝突所以放在一個特別的位置(安卓的頂端以及iPhone的下拉呼出),別忘了早期小屏時代的時候,很多安卓手機是有搜索專用鍵的。如nexus one

但是,在大屏普及下,對於大屏的優化就越來越多。三星UI雖然丑,但是對於大屏的處理一直站在安卓的前列,其中搜索框的位置可窺一二:

是不是看起來依然很好看?沒有任何違和感?

魅族的flyme把需要搜索的地方集成在了smartbar中:

相比而言,miui好像在大屏手機上經驗缺一點:

同樣是音樂,搜索圖標在難以夠到的右上角。

(非黑非粉)


不考慮這種設計的好壞,以及UI的協調性等原因,我覺得這種設計成為現在的主流是因為 歷史原因:iOS從一開始就把搜索欄放在上面。而由於iOS在移動操作系統中的強勢性,導致很多Android設計仿造iOS的樣式,所以也同樣出現在上面。並且由於在屏幕尺寸變化後,iOS沒有對系統邏輯進行相應調整,導致屏幕變大後搜索欄放在上面很難夠到。

在iOS早期,所有設備都是3.5 inch的,單手操作很容易。最常用的返回按鈕都是放在左上角的,想觸到搜索欄也同樣容易。手頭正好有一個iOS 3.0的設備,截幾張圖,看看那時候的界面:

印象中搜索的功能是從3.0開始出現的,那時候的搜索功能大多是配合著列表視圖 ( TableView ) 出現的。平時是隱藏在最上面的,下拉才會出現,也是一個很巧妙的設計。根據輸入內容,下面的列表會變換內容來展示搜索結果。一切都很自然。

但是,當iPhone出4 inch之後,所有的界面設計都沒有發生任何改變,只是把中間的內容拉長了而已。系統邏輯一點都沒有變,搜索欄一直保留在上面,同返回按鈕一樣不好夠到。第三方開發者也沒有對屏幕的變化有太多的改變,順應官方的方法直接不做處理。所以,最終演變到現在的情況。

PS,吐槽一下,本以為在iOS設備出大屏幕的時候,iOS的界面邏輯一定會重新設計。開發中的NavigationController 和 NavigationBar 就是進行界面跳轉最常用的方式,並且,只能固定在上面,簡單情況下不能定製。期待變長變寬之後(也就是出iPhone6的時候),會重新設計邏輯,大幅更新SDK中的控制項,這樣才會好用。可現實是,就像之前變長,基本邏輯什麼都沒變!返回按鈕就是在左上角,導航欄默認就出現在最上面,而且非常不好定製(當然,我可以不用他們的)。


//第一次補充答案

瀏覽器一般點擊一下搜索框,輸入內容完成之後,摁輸入法裡面的回車就可以實現搜索了。

當然僅僅是這樣的話,並不方便,因為有第一下點擊地址欄的成本。發現比較好的解決方式是下面之前回答的。

//初始答案

安卓上的uc感覺做的就不錯,有圖有真相。

下滑一下就可以啦,切換效果不錯。

希望更多安卓應用可以借鑒這個思路

(難道真的只是為了展示天氣嘛(⊙﹏⊙))


鍵盤一般是從底部升起來的,搜索框如果放在底部,會造成搜索框在點擊前後的跳躍感,無法形成連貫的操作體驗。

另外,web一直以來培養的習慣也不是說改就改的。

再說,對於搜索這麼意願明確的動作,控制項放在頂部你就不點了?


根本原因是:搜索是一個低頻操作

搜索在更多的時候是靜態的,只是放在那裡,使用頻率很低。而每次搜索都意味著有大量的信息來瀏覽。

但是人在瀏覽東西的時候是從上到下瀏覽,瀏覽到最底部時,需要向上滑動展示新的內容,這個時候焦點在屏幕的底部。所以把搜索等一些不常用功能放在頂部,如果搜索放在底部,則會對瀏覽內容造成很大的影響。

以偶爾的一次搜索成本,換取瀏覽體驗的便捷,是很划算的。

做產品是需要折中的,不能單就一個功能來討論。 @江忘南是吧?

update 1: 回 @江忘南

你的問題問得都很不錯,下面我一一來解答。

首先要說百度搜索框放中間是很合理的,但是這跟我說的又有不同的地方:當你打開百度首頁的時候,他沒有任何信息可展示給你(他當然也不能想當然把新聞弄上去)。百度就是做搜索的,所以首先給用戶的就是他的搜索功能。你可以看當搜索之後有了瀏覽的信息,搜索框是不是放到上面去了?

其次,你說的蘋果搜索的界面,單就這個頁面來說,我不認為這是一個可以稱為「好」的設計。只是這樣設計的前提是,用戶不習慣在底部進行搜索(原因已在原文中說明)。設計和習慣是相互作用的:因為習慣,有了設計;又因為習慣了設計,所以加強了習慣。

再次,你說的UC,他的搜索框也是在頂部的,只是他為用戶做了另外一個折中:通過增加一步操作,把搜索框移動到操作範圍。這種操作是在必要時才使用的,因為他的成本要大於雙手操作。

最後,對於你說的WP的設計,我個人是一點都不看好的。我覺得WP的設計,不過是想差異化ios和Android而已,並沒有比前者更符合用戶習慣,我想這也是為什麼WP市場佔有率低的原因。

另外再多說一點,左右滑動或切換頁面,一方面造成信息的不連貫,另一方面,眼睛會很累(你可以試試,眼睛上下轉動和左右轉動哪個更累)。有些東西不是守舊,是人的生理問題,人是很懶的,改變用戶的習慣成本太大了,尤其是千年以來的習慣。

update 2: @江忘南我有@你啊

1.說WP不是說系統,而是說它的信息展示方式

2.現在大屏手機的握持方式都是雙手操作,如果你非要單手操作,那就不單單是搜索一個控制項的問題了。你可以試試iPhone+和mate7,無論你怎麼優化都是要雙手操作的。

3.我認為舉一些小眾的例子是不能說明什麼的,誰都可以做嘗試,嘗試成功了才能說明問題。

4.對於切換頁面:你說的iReader、網易雲閱讀等,第一,看小說的時候是沒有搜索的,對吧?第二,左右滑動切換是為了營造閱讀書本一樣的沉浸式體驗,翻一頁書的眼睛疲勞程度相對於這種體驗明顯是微不足道的。

(另外,我說搜索框放底部影響瀏覽內容,不知道你拿這些閱讀頁面沒有搜索框的閱讀類應用想說明什麼呢?)

5.你拿「好看」和「合適」來比較,我覺得這兩者不在一個維度。另外,我也沒有說不可以做優化,我只是說「放在底部對瀏覽內容有很大影響」

6.我沒有說習慣不能更改啊,我只是說「成本很大」。習慣不是不能改,你把文字從右往左編輯也沒問題,但是用戶卻不會從右往左看。

7.你可以看看,所有搜索框放在頂部的頁面,基本都是頁面需要展示很多信息並且需要下滑閱讀。所以我說搜索框放在底部影響瀏覽內容。

8.對,我只說了這一個原因,但我絲毫不覺得這一個原因「薄弱」。

9.你說的關於「橫向滑屏看新聞」、「習慣可以更改」、「搜索放那裡很體貼」等等,我完全沒有表達過相關意見啊。。所以我覺得你回答之前有沒有必要仔細閱讀一下呢?


針對搜索框在底部的情況,如果要改善設計,搜索按鈕/跳轉按鈕還需要設計在遠離手心的一端。因為整個屏幕最舒適的操作區域,就是以手心為圓心,以大拇指長度為半徑畫圓在屏幕上留下的圓弧。離圓弧越遠,單手操作難度越大。所以屏幕距離手心最近和最遠的兩個角操作難度最大。所以當你把搜索框置於底部,相關按鈕的位置還得斟酌一番。

另外,現在手機的屏幕越來越大,單手操作的難度也越來越大,6 plus的屏幕下拉功能也沒能解決屏幕過大的問題。當你想單手操作整個屏幕時,需要面對的挑戰只會越來越多,你會恨不得所有功能都不需要操作,或者只簡單動動手指頭就行了。

說回搜索框,到底是習慣問題(當然習慣也是設計出來的)。想想左右上角的返回鍵,也是被人吐槽良久。習慣不是不可抗拒的,但是會很有難度,很具挑戰。

搜索框不放下面,除了位置會經常變動(鍵盤彈出),還有一個原因,就是不好看!反正我覺得不好看,主觀的,習慣性的。如果你要說他實用,那我想問,推薦列表裡第一個選項跑到屏幕上方,你打算怎麼選中?

所以,你會產生這個問題,可能是因為你沒使用過搜索框在其他位置的場景。他們帶來的問題並不比它在頂部產生的問題少,或者更多。也許在頂部就已經是個不錯的設計了呢。

解決問題的辦法當然有,你可以用語音搜索嘛?什麼?你還沒習慣?


我也一直有這個感覺,幾乎所有的app都把最常用的可點擊項放在左上或者左下,就連安卓的原生設計菜單也是從左邊滑出來,這明顯不如放在右側用起來方便,這種設計思想已經不適應現在主流的5寸手機了。


多圖預警,反對高票WP黨,不談市場佔有率,不談是不是都在學iOS

就事論事,就談搜索框

一圖勝千言,大家來看看模擬眼動圖:

1.搜索框在上

從輸入開始焦點一直在上方,輸入過後,搜索結果從上往下排列,焦點下移以檢索最匹配的項目,興趣隨著下移逐漸降低。如果檢索的好,焦點基本只需要停留在上方。自己腦補一下搜商品的時候,是不是輸入完了看下最靠近的結果符合就點擊去了。

2.搜索框在下

從輸入開始,焦點在下方,輸入過後,搜索結果從上往下排列。那按照正常人來說,經驗告訴自己內容肯定是從上往下閱讀的,於是焦點會上移置頂,再開始焦點下移以檢索最匹配的項目,興趣隨著下移逐漸降低。檢索的再好,也必須經歷焦點從下往上的過程。

綜上:

1.這不是什麼用戶習慣的問題,就是一個普通的用戶閱讀習慣問題。

2.用戶自然的從上往下閱讀符合易用性,還是迂迴曲折好?這樣的閱讀習慣從人剛認字開始就培養起來了,真的那麼容易改嗎?難道讓搜索結果從下往上排列?

3.搜索的目的是什麼?到底是獲取內容的易用性重要,還是點哪裡開始搜索重要?

4.小屏手機擱哪單手都點得到;都用大屏手機了,何必還要逞強單手去夠,老老實實雙手不好么?

最後到了愉快的打臉時間了,請看WP上眾電商APP搜索頁截圖:


最近正在寫個搜索框,有想過這個問題。

1. 因為搜索一般在list的開頭,list一般是從上到下。

2. 搜索要輸入啊,輸入會有鍵盤彈出啊。。難道把搜索框推上去?


我想說如果要做近義詞提示或者歷史搜索,做在底部的話是要往上彈嗎。。。

這也沒什麼,樓上有人也說了,鍵盤這東西是從下往上彈的,那勢必搜索欄和鍵盤就要貼一起,那麼要是有提示或者歷史搜索,碰到IPHONE4這種短屏幕的,我估計就要頂上天了。。。

那麼如果用戶想要放棄這次搜索,就會發覺 啊呀我操,屏幕怎麼滿了。怎麼回去?那為了考慮這種用戶就要多加一個取消。。

但其實還有一個問題 微信啊 百度地圖啊 APP store啊 你沒發覺他們的搜索其實都讓你到一個新的頁面了么。。。要是這樣你放哪裡其實都行。。。不是嗎?


其實國內電商的app中搜索基本都是在導航欄的,有些在底部會有一個搜索入口,檢索功能在電商中的重要性我就不強調了,每次都不好點,還有就是在看Android5.0規範裡面是把搜索入口放在頂部的,不能說這不行,但是這絕對不是最好的解決方法。


因為蘋果的搜索框就是放在頂上的,雖然不知道為什麼,但我們也一定要放在頂上。


因為屏幕底部是比較容易觸碰到的,一旦碰到,搜索框就會獲得焦點,影響屏幕內容的閱讀體驗。

相比於正常閱讀屏幕中的內容,搜索不是一個常用的功能(僅僅是相對於閱讀而言)。

另外現在的大部分安卓手機的虛擬按鍵就在屏幕下方,如果搜索框放在下方也會使得二者距離太近,增加了誤觸虛擬按鍵的可能性。


推薦閱讀:

TAG:移動應用 | 手機 | 交互設計 | 手機客戶端 | 用戶體驗設計 |