4000-888-103

资讯动态你应该知道的五种地址选择器资讯详情

你应该知道的五种地址选择器

2019-11-11 14:11:02

 

目录

1. 底部 Picker

2. 底部列表

3. 页面跳转

4. 地图+附近位置

5. 列表+平铺

 

底部 Picker

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

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

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

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

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

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

 

底部列表

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

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

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

 

页面跳转

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

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

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

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

 

地图+附近位置

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

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

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

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

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

 

列表 + 平铺

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

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

  • 缺点:只能选择单一的城市,不能选择详细的地址。

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

 

总结

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

  • 1. 底部 Picker:系统自带,兼容性好,开发成本低。

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

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

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

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

 

 

关键词:h5网页制作什么 免费h5网站模板 h5编辑工具


上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png