深度|5種類型地址選擇器解析

0 評論 13542 瀏覽 51 收藏 8 分鐘

每一種地址選擇器都有各自所適用的場景,根據(jù)不同的場景做設(shè)計才是我們需要思考的。

之前一直在做物流項目,由于用戶的特殊性(40歲左右用戶,大部分學(xué)歷初中),在用地址選擇器的時候我們討論了非常多,并做了一系列的用戶調(diào)研,那么針對這個地址選擇器的樣式以及使用場景還有優(yōu)劣我下面做一些分析,希望有特別好的建議一起討論:

1.底部picker式

微信

weixin

有貨

youhuo

enjoy

enjoy

新浪

xinlangweibo

第一種底部滑出的picker式,這個形式的選擇器,用到的應(yīng)該是占很大一部分,我們能看到它通常是用在個人信息的編輯場景中選擇地址的時候,優(yōu)點(diǎn)是占用頁面空間小,能實(shí)時預(yù)覽其他信息,地址聯(lián)動性較強(qiáng)。缺點(diǎn)是一屏展示的信息過少,找地址時如果想要找的地址太靠下,那需要花的時間成本就較大。

所用到的手勢操作是:滑(很久)-點(diǎn)-滑-點(diǎn)。

2.列表選擇式

途牛

tuniu

口碑

koubei

空格

kongge

列表選擇,這個選擇器一般用在首頁定位和選擇起始地目的地的時候選擇地址用的較多,定位的時候一般定位到城市即可,不需要選擇省,再到市,最后到區(qū),并且用戶需要重新切換城市的時候直接可以通過lbs定位來切換,并不需要頻繁的去操作切換。優(yōu)點(diǎn)是可以根據(jù)右側(cè)字母來找城市,也很快捷。缺點(diǎn)是使用場景較少,無法做聯(lián)動選擇多級省市區(qū)。

所用到的手勢操作是:點(diǎn)/滑-滑-點(diǎn)。

3.下滑聯(lián)動式

鏈家

lianjia

Q房網(wǎng)

Qfangwang

下滑聯(lián)動,這種形式的選擇器一般會用在首頁做實(shí)時地址聯(lián)動的時候,不會遮擋后面的主要內(nèi)容信息,在選擇完地址之后能立即看到地址的篩選結(jié)果。優(yōu)點(diǎn)是能快速選擇多級地址,并且層級分明,擴(kuò)展性較強(qiáng)可以做成地址多選。缺點(diǎn)和一有點(diǎn)類似,并且也不夠直觀。

所用到的手勢操作是:滑-點(diǎn)-滑-點(diǎn)-點(diǎn)。

4.列表跳轉(zhuǎn)式

mono

mono

蝸牛

woniu

列表跳轉(zhuǎn)式。這種類似是2和3的合并式,但是這樣的地址選擇器有點(diǎn)不倫不類,既不能高效又不是很直觀,選擇二級或三級之后有時會忘了上一級的內(nèi)容又要切換到上一級,所以mono這個有點(diǎn)逼格的app用這樣的選擇器我就不是很理解,它也是用于信息編輯時候的地址選擇,首先省是列表選擇,這樣的選擇的效率沒有平鋪的效率高,人眼習(xí)慣掃視橫向內(nèi)容,所以橫向的內(nèi)容獲取往往要比縱向的多,既然后面都是要到選擇城市,那可以跟2列表選擇那樣全部城市列出來按字母來搜索。他所要用到的手勢操作有:滑-點(diǎn)-點(diǎn)。

5.平鋪式

貨車幫

huochebang

平鋪式。采用平鋪式的地址選擇器能一眼就看清楚所有地址,但是需要掃描一遍內(nèi)容才能找到,這樣的方式適用于頻繁性進(jìn)行模糊地址搜索,經(jīng)常使用便形成記憶,再此搜索的時候就能形成記憶點(diǎn)擊,效率很高。優(yōu)點(diǎn)就是直觀,適用于頻繁性搜索,并且擴(kuò)展性強(qiáng),如地址多選。例如貨運(yùn)等app。缺點(diǎn)就是剛開始使用時候地址搜索沒有1,3那么有效率。

所用到的手勢操作是:點(diǎn)-點(diǎn)-點(diǎn)

其實(shí)以上說到的5個地址選擇方式是針對不同的場景使用的,并沒有特別沖突的地方,除了4之外。1對應(yīng)的場景是信息編輯時候所用到的下滑展示。2對應(yīng)的場景是首頁定位,再進(jìn)行地址切換時候的地址選擇。3.使用的場景是首頁多tab下多級選擇,這種選擇器不僅是地址選擇,外賣應(yīng)用,生鮮專送等多app的多層級選擇也經(jīng)常使用到。5.使用場景和3類似,但是跟3不同的是,下滑聯(lián)動式可以直觀看到1,2,3級內(nèi)容,而平鋪式這點(diǎn)就做不到了。

下面要列舉一個錯誤示例:

今天在寫這篇文章的時候偶然發(fā)現(xiàn)的案例:

fanmiananli

其實(shí)有點(diǎn)冤枉它。這個產(chǎn)品的微信推廣h5頁面的地址選擇器和iOS原生app的地址選擇器還不一樣,但是這個地址選擇器還是免不了想要吐槽一下:點(diǎn)擊選擇省份底部彈出picker,再點(diǎn)擊選擇城市再滑動選擇,實(shí)在是讓用戶花了好多時間。

總結(jié):

每一種地址選擇器都有各自所適用的場景,根據(jù)不同的場景做設(shè)計才是我們需要思考的。一個小小的地址選擇器也能看出我們對產(chǎn)品及用戶的理解,怎樣提高產(chǎn)品的可用性,我們要對各種細(xì)節(jié)去詳細(xì)處理,如何提高用戶完成操作的效率,以及有效性。如果覺得兩種方案都可以也可以去針對性的做ab測試,看看哪種方案效率更高,操作更流暢。

 

作者:@Razer_YjJjJ

原文地址:http://www.xueui.cn/design-theory/five-types-of-address-selector.html

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!