等等

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

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

 

目录

1. 底部 Picker

2. 底部列表

3. 页面跳转

4. 地图+附近位置

5. 列表+平铺

 

底部 Picker

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

  • 优点:系统自带,兼容性好,在实现上技术可以直接调用,开发成本低。
  • 缺点:页面展示的内容太少,上下滑动查找时需要花费的时间较多,且容易误触。

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

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

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

 

底部列表

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

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

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

 

页面跳转

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

  • 优点:页面可展示的内容是最多的,而且用户最容易集中注意力。
  • 缺点:页面需要来回跳转,操作相对复杂,而且它没有把用户已选择的内容显示出来,反馈不直观。

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

 

地图+附近位置

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

  • 优点:上部分的地图定位让数据可视化,用户和附近相关的位置信息更加直观;下部分罗列出了一些附近的位置供用户选择,省去了选择省市区的步骤。
  • 缺点:给出的地址选项很多时候并不能满足需求。

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

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

 

列表 + 平铺

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

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

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

 

总结

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

  • 1. 底部 Picker:系统自带,兼容性好,开发成本低。
  • 2. 底部列表:不容易误触,页面使用率比 Picker 高,可显示的内容更多,用户的注意力比较集中。
  • 3. 页面跳转:它的页面利用率最高,用户最容易集中注意力。
  • 4. 地图+附近位置:数据可视化让用户和附近相关的位置信息更加直观。
  • 5. 列表+平铺:集合了多种筛选功能,功能全面,用户可以根据自己的需求选择适合自己的方式,从而快速定位。

 

参考引文:《App中地址选择功能解析》《地址选择器的五大类型解析》《这个控件叫:A-Z index/字母索引导航》

《这个控件叫:Picker/选择器/拾取器》

《地图定位知多少》

 

原文地址:海盐社(公众号)

作者:青山

转载请注明:韦德1946 » 你应该知道的五种地址选择器

登录收藏
 
你可能喜欢的:
如何衡量交互成本2.0如何衡量交互成本2.0
网易云音乐 | LOOK直播页改版设计网易云音乐 | LOOK直播页改版设计
产品体验设计-交互篇(二)产品体验设计-交互篇(二)
Material Design Environment Light and shadowsMaterial Design Environment Light and shadows
你过来,我有1个设计技巧想对你说你过来,我有1个设计技巧想对你说
为什么你的设计无法让别人记住(一)?为什么你的设计无法让别人记住(一)?
圆角矩形背后的含义|深度解析圆角矩形背后的含义|深度解析
交互基础——页面加载方式交互基础——页面加载方式
一篇文章读懂交互设计7大定律一篇文章读懂交互设计7大定律
音频 | 开屏页设计,看这篇就够了!音频 | 开屏页设计,看这篇就够了!