• 今天是“人民日报”的七十岁生日吗?祝贺她生日快乐!虽然我们的祝福有点微不足道,还是祝福我们的人民日报越办越好! 2019-11-23
  • 中巴经济走廊提供了安全和稳定 2019-11-23
  • 北京市北京睿通伟业综合店【在线咨询】 2019-11-20
  • 统一标尺严把关口 防止留置权滥用 2019-11-07
  • 走近上合志愿者 “小浪花”为峰会增添一抹靓色 2019-11-07
  • 河北衡水:北方强对流扎堆  南方降雨频繁——遭遇冰雹  车窗被砸农作物受损 2019-11-05
  • 政府拆迁和商业拆迁有什么不同?当时错信了奸商,懊悔知道晚了! 2019-10-28
  • 实干树形象 实绩惠民生——“两学一做”特别关注 2019-10-28
  • 足球只不过是个娱乐项目,吃饭赚钱才是安身立命必须要做的,不要跟着那些戏子瞎起哄。 2019-10-20
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-10-20
  • 女教师课上画高树讲高数 学生原来高数真是树! 2019-10-19
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-10-19
  • 【理上网来·辉煌十九大】澳大利亚专家:一个强大自信的中国会给世界带来更多机遇 2019-09-03
  • 流行风向标 助你石博会上淘宝 春城壹网 七彩云南 一网天下 2019-09-03
  • 你千万别欺骗,你能欺骗的,都是相信你的人。 2019-08-23
  • 等等

    欢乐生肖规律:你应该知道的五种地址选择器

    等等 APP设计 3537浏览

    欢乐生肖彩票走势图 www.fmv2.com.cn 之前做过一个项目,需要做首页定位和添加收货地址两个功能??嘉乙晕惶椎刂费≡衿骶湍苈阈枨?,结果发现这是两个不同的场景,比如首页定位到城市就够了,但是收货地址则需要详细到小区、街道甚至门牌号。

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

     

    目录

    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/选择器/拾取器》

    《地图定位知多少》

     

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

    作者:青山

    转载请注明:欢乐生肖彩票走势图 » 你应该知道的五种地址选择器

    登录收藏
     
    你可能喜欢的:
    关于微信消息困扰用户的10点设计反思,体验上怎么优化会更好呢?关于微信消息困扰用户的10点设计反思,体验上怎么优化会更好呢?
    设计驱动商业 | PUPU读书改版设计驱动商业 | PUPU读书改版
    播放控件的本地化和国际化播放控件的本地化和国际化
    设计沉思录|资讯产品设计之道设计沉思录|资讯产品设计之道
    0-1系列:目标推导与策略制定0-1系列:目标推导与策略制定
    滴滴国际化司机端-首页改版总结滴滴国际化司机端-首页改版总结
    如何用游戏化思维构建 如何用游戏化思维构建 “好玩” 平台
    【新系列】十万个为什么设计-为什么你设计的信息用户总是看不见【新系列】十万个为什么设计-为什么你设计的信息用户总是看不见
    深耕“用户界面”(中篇)- 界面设计表现层差异性深耕“用户界面”(中篇)- 界面设计表现层差异性
    滴滴网约车安全设计语言探索滴滴网约车安全设计语言探索
    ?
  • 今天是“人民日报”的七十岁生日吗?祝贺她生日快乐!虽然我们的祝福有点微不足道,还是祝福我们的人民日报越办越好! 2019-11-23
  • 中巴经济走廊提供了安全和稳定 2019-11-23
  • 北京市北京睿通伟业综合店【在线咨询】 2019-11-20
  • 统一标尺严把关口 防止留置权滥用 2019-11-07
  • 走近上合志愿者 “小浪花”为峰会增添一抹靓色 2019-11-07
  • 河北衡水:北方强对流扎堆  南方降雨频繁——遭遇冰雹  车窗被砸农作物受损 2019-11-05
  • 政府拆迁和商业拆迁有什么不同?当时错信了奸商,懊悔知道晚了! 2019-10-28
  • 实干树形象 实绩惠民生——“两学一做”特别关注 2019-10-28
  • 足球只不过是个娱乐项目,吃饭赚钱才是安身立命必须要做的,不要跟着那些戏子瞎起哄。 2019-10-20
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-10-20
  • 女教师课上画高树讲高数 学生原来高数真是树! 2019-10-19
  • 揭秘人民币制作过程 从“白纸”到钞票耗时1个月 2019-10-19
  • 【理上网来·辉煌十九大】澳大利亚专家:一个强大自信的中国会给世界带来更多机遇 2019-09-03
  • 流行风向标 助你石博会上淘宝 春城壹网 七彩云南 一网天下 2019-09-03
  • 你千万别欺骗,你能欺骗的,都是相信你的人。 2019-08-23
  • 香港六合彩官网 69棋牌下载 7星彩中几个号有奖 快乐十分任选走势图 内蒙古11选5历史数据 胜平负14场开奖结果 广西快乐十分玩法技巧 浙江20选5大星走势图 湖北十一选五预测号码推荐 山东时时彩是什么东西 甘肃快三专家推出 江苏7位数18185期 浙江11选5怎么破解版 18090期14场胜负彩推荐 1713游戏中心李逵劈鱼 山西快乐10分开奖网站