之前做过一个项目，需要做首页定位和添加收货地址两个功能。开始我以为一套地址选择器就能满足需求，结果发现这是两个不同的场景，比如首页定位到城市就够了，但是收货地址则需要详细到小区、街道甚至门牌号。

那么，不同的场景中适合使用什么样的地址选择器呢？这篇文章就和大家分享五种常见的地址选择器样式。

目录

1. 底部 Picker

2. 底部列表

3. 页面跳转

4. 地图+附近位置

5. 列表+平铺

底部 Picker

由页面底部弹出 Picker，按照省-市-区县的顺序依次选择地址。它适用于需要选择多个选项集合，每个集合中的选项数量不是特别多，并且用户对所有的选项都特别熟悉的场景。

优点：系统自带，兼容性好，在实现上技术可以直接调用，开发成本低。

缺点：页面展示的内容太少，上下滑动查找时需要花费的时间较多，且容易误触。

以有赞为例，它的产品目标是让用户在自己平台的商家那里购买商品，用户分布在全国各地，

添加收货地址需要依次选择省-市-区县，所以使用了这种方式。

需要注意的是：这种地址选择器是滚轮联动式的，所以使用的时候容易误触。而且如果添加自己熟悉的收货地址还好说，但是如果给朋友买东西的话，地址比较陌生，就要花费比较多的时间精力去查找。

底部列表

这种方式的使用场景和 Picker 类似。其不同的地方是 Picker 使用的是滚轮联动的形式，所有的选项可以同时进行选择，而底部列表具有一定的限制条件，用户必须选择完一项才可以选择下一项。

优点：这种方式不容易误触，而且用户的的注意力比较集中。页面可显示的内容更多，可以减少用户的查找时间。

以京东为例，它和有赞一样，用户也分布在全国各地，添加收货地址需要依次选择省-市-区县，所以使用了这种方式。

页面跳转

采用独立页面的设计方式，然后再进行省市区之间的跳转。它适用于层级较少，但每个层级选项数量比较多的场景。

优点：页面可展示的内容是最多的，而且用户最容易集中注意力。

缺点：页面需要来回跳转，操作相对复杂，而且它没有把用户已选择的内容显示出来，反馈不直观。

旧版本的微信中就使用了这种样式，它的添加地址功能为了让用户使用小程序时方便调取。这种方式页面面积大，显示的地址信息非常多，翻几页就都能找到，不用像 Picker 那样需要滑很长时间，但是一旦选错了就需要返回上一个页面重新选择，比较麻烦。

地图+附近位置

页面上部分是地图，下部分是附近的地址。这种方式适用于需要地图定位并显示附近相关位置信息的场景。

优点：上部分的地图定位让数据可视化，用户和附近相关的位置信息更加直观；下部分罗列出了一些附近的位置供用户选择，省去了选择省市区的步骤。

缺点：给出的地址选项很多时候并不能满足需求。

上图中，饿了么和盒马的产品目标分别是让用户在自己平台购买外卖和生鲜。它们都属于线下短距离送货，使用这种方式，用户可以直观地看到自己的位置，以及附近熟悉的场景，而且可以省去选择省、市、区的步骤。

需要注意的是：很多时候系统提供的地址一般都是附近的小区名字、大楼名字或者学校商店之类的，送货的人员并不清楚具体的楼层和楼号，所以还需要填写更加详细的地址信息。

列表 + 平铺

页面上部分以平铺的方式呈现，下部分以列表的方式呈现。这种方法适用于选项多达几十到几千，其中有些选项特别常用，且用户量较大的场景。

优点：集合了多种筛选功能，既有搜索导航，又有 A-Z 字母导航，还有常用选项导航。用户使用时可以根据自己的需求选择适合自己的方式，从而达到快速定位的目的，相较于前几种方法，它的功能更加全面。

缺点：只能选择单一的城市，不能选择详细的地址。

上图中的三个页面里都列出了全国的所有城市，选项特别的多，而且用户选择当前城市或者热门城市的几率比较大，所以使用了这种方式。

总结

今天主要分享的一件事是不同的地址选择器分别适合哪些场景，我总结了五点是：

1. 底部 Picker：系统自带，兼容性好，开发成本低。

2. 底部列表：不容易误触，页面使用率比 Picker 高，可显示的内容更多，用户的注意力比较集中。

3. 页面跳转：它的页面利用率最高，用户最容易集中注意力。

4. 地图+附近位置：数据可视化让用户和附近相关的位置信息更加直观。

5. 列表+平铺：集合了多种筛选功能，功能全面，用户可以根据自己的需求选择适合自己的方式，从而快速定位。