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

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

1.底部picker式

微信

有貨

enjoy

新浪

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

所用到的手勢(shì)操作是：滑（很久）－點(diǎn)－滑－點(diǎn)。

2.列表選擇式

途牛

口碑

空格

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

所用到的手勢(shì)操作是：點(diǎn)／滑－滑－點(diǎn)。

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

鏈家

Q房網(wǎng)

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

所用到的手勢(shì)操作是：滑－點(diǎn)－滑－點(diǎn)－點(diǎn)。

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

mono

蝸牛

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

5.平鋪式

貨車(chē)幫

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

所用到的手勢(shì)操作是：點(diǎn)－點(diǎn)－點(diǎn)

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

下面要列舉一個(gè)錯(cuò)誤示例：

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

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

總結(jié)：

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

作者：@Razer_YjJjJ

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