一个小小城市选择控件引发的深度思考

很早以前小Q在《用好的交互设计来管理复杂-“筛选器”》一文,较为全面的剖析了筛选器的各种分类及其利弊。本文会继续筛选器的城市选择控件继续分析。A-Z index(字母索引)适用于对数据量为几十到几千之间的单词、词组或短语等类型的导航,且用户能对这些数据的首字母进行精确回忆。例如:国家、省份或城市的名称、姓名、昵称等。在移动端设计中A-Z index通常以竖轴形式出现在屏幕右侧,点击字母能将内容滚动到该字母的锚点位置。


很早以前小Q在《用好的交互设计来管理复杂-“筛选器”》一文,较为全面的剖析了筛选器的各种分类及其利弊。本文会继续筛选器的城市选择控件继续分析。

一个小小城市选择控件引发的深度思考

大家都知道,吃喝玩乐,永远是人的基本休闲方式。城与人的生活息息相关,针对吃喝玩乐设计的产品形态,往往都有城市、当前定位等基本功能的设置,以便于产品经理采集到用户行为后,做出更好的个性推荐及内容展示。譬如很多城市特色推荐类App,打开首页,“推荐”和“附近”满足用户在多个场景下的应用,无论是周末的你在家苦于无处可去,还是吃完饭后想和朋友去附近逛逛。又譬如旅行类App,购买机票,预定酒店都是必须要做的事情,对于廉价机票的购买和抢单,也是很多热爱旅游的人们常做的事情,所以如何根据自己的业务形态设计好一款简单的城市控件,看起来是值得深思的问题。使用过30几款相关App之后,热爱总结和装逼的小Q,为你带来如下的总结,希望你喜欢。

城市选择控件大致分为三类:平铺式三层联动结构、响应式三级联动结构、A-Z index式字母结构。

平铺式三层联动结构

特点:逐层选择,逐层回退,操作重复

建议:根据当前GPS定位地理位置,优先显示周边(100km以内的)省市区信息(需要建立符合产品特性的城市匹配列表)

举例:京东App,发货地址选择地区时的交互流程,操作及反馈值得推荐,选中一层(省、市、区)则顺其自然的进入下一层选择,给人新增一条记录待添加的感觉,操作一气呵成。相反对比,把省、市、区作为Tab的Title的方式,让用户选择Tab,然后选择内容的方式。此交互体验更佳顺畅,且能解决用户点击层级深之后,短暂迷失方向的难题。

一个小小城市选择控件引发的深度思考

一个小小城市选择控件引发的深度思考

响应式三级联动结构

特点:通过省级自动定位市区级,对城市选择比较便利。地址显示的选项数量少,还只能挨个切换,效率低下。

建议:根据当前GPS定位地理位置,定位相关省级信息及名称,减少滑动操作。

举例:淘宝下单后的填写地址里面也有地区选择功能,微信里面也有收货地址,再者一些App的定位选择等等。

一个小小城市选择控件引发的深度思考

A-Z index式字母结构

A-Z index(字母索引)适用于对数据量为几十到几千之间的单词、词组或短语等类型的导航,且用户能对这些数据的首字母进行精确回忆。例如:国家、省份或城市的名称、姓名、昵称等。在移动端设计中A-Z index通常以竖轴形式出现在屏幕右侧,点击字母能将内容滚动到该字母的锚点位置。

特点:通过自然拼读和精确回忆,或者通过严格的筛选方式,精挑细选周边、同城中最值得去的生活高地,使得用户能快速找到所需内容。

建议:A-Z index严格按照字母顺序排序,但是在某些场景中,这并非是最高效的。可视业务和用户需求在A-Z index基础上增加常用选项导航(例如定位、热门和搜索)。

举例:有特殊记忆点的名称列表,短时间不会频繁更新订阅内容的产品形态,根据用户行为优先曝光常用入口,如通讯录的联系人列表,可通过添加Emoj图片或者英文首字母,调整中文内容的排序。或者天气通中订阅城市列表,根据用户使用率不同,筛选点击率较高的内容做优先展示。

一个小小城市选择控件引发的深度思考

小Q来总结

任何一个城市选择控件的基础,往往只能满足统一规范化的操作。若要满足用户多场景的复杂需求,产品经理在设计城市选择控件的过程中,可以优先通过数据挖掘,为用户提供一条捷径,试图让用户减轻重复操作的心理负担(如:快速选择、热门城市、热门景区等)。或者根据业务及用户场景的不同,做应用场景的优化和调整,譬如:根据定位做城市列表的不同排序等。

#专栏作家#

Mandy权,微信公众号:小Q聊产品,人人都是产品经理专栏作家,善于资讯、母婴、教育类产品设计与分析。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/33894/

(0)
CatherineCatherine
上一篇 2017-06-06 18:39
下一篇 2017-06-08 07:02

相关推荐

  • 用好这些可用性原则,你就能简单做好交互设计!

    做产品经理不懂交互设计,那就是寸步难行。“交互原则多,体验出彩少”,既然要做好产品体验,那么吃透基本的交互设计原则,就是必须且必然的事儿。今天给大家挖了很多可靠的栗子,直接给你提供干货,拿走不谢。

    2017-05-20
  • 【设计作品分享】一个让你丢掉负能量的产品——BICH

    作者:梁雅婵,授权载于我是UE网。

    2015-11-27
  • 怎样做好汽车交互设计?

    文章来源:汽车造型设计编辑整理:IO酱车内交互系统看似只是整车的一小部分,但由于承担了车辆和用户的“交流”任务,因此里面涉及到的内容很多,每一项拿出来都需要巨幅讨论,今天我们就和大家概括谈谈这里面的几点。目前重点汽车交互设计是决定智能汽车发展水平的重要标志,现阶段智能汽车在此方面关注的主要一点是用户体验。设计流程汽车交互设计的一般流程包括:1. 需求沟通;2. 资料调研;3. 专家评估;4. 用户研究;5. 需求及信息架构梳理;6. 概...

    2018-03-15
  • 如何入手书写产品体验报告

    体验产品是PM工作中经常做的事情,企业也常留一些这样的实习作业给面试者,是因为产品体验报告一定程度上直观的反映了面试者的专业水平。求职过程中,如果能提交一份专业的体验报告,将大大提升简历通过率,获得面…

    2015-03-05
  • 设计产品的第一个环节:定义方向策略,有理有据做设计

    本文作者将来聊聊设计产品的第一个环节——定义方向策略,这是后续设计的大前提和指导方针。我们需要从老板、产品/运营、用研及设计团队分别获取有效信息,进行分析整合,以得到正确、完善的方向策略定义。

    2017-05-13
  • 用户体验“大不同”,合作伙伴分享会

    2018年3月15日,“用户体验“大不同”,合作伙伴分享会”在福建省科威技术发展有限公司举行。虽然屋外下了很大的雨,但也没能减小屋里同行朋友们的热情。分享会一开始,惠普华南区业务开发经理李浩泉就以十分轻松幽默的氛围,将与会者带入状态。随后介绍了页宽产品的主要特点,并对惠普A3页宽复合机作了产品推介。惠普新一代A3智能复合机页宽产品的主要特点是:最新技术(集激光/喷墨优势于一身)高速(40ppm~80ppm输出速度)经济(购买/使用/维护...

    2018-03-17
  • 《王者荣耀》的操作交互设计研究

    《王者荣耀》是国内最成功的手机版MOBA类型游戏。MOBA从PC的辉煌延续到了手游,当时很多人唱衰手机上的MOBA,主要还是操作上的问题,手机上无法实现鼠标的快速精确定位。为了优化手机版MOBA,大家进行了各种尝试,有触摸点击型(虚荣),有双摇杆型、单摇杆型,最终单摇杆+技能副摇杆结合的《王者荣耀》一统江湖,现在很少有人说王者手感不好的,它的很多设定都成了现在MOBA游戏的标杆。这里,我们就一步步地分解看看,王者的操作手感是如何设计的。...

    2018-02-26
  • UE网国内首发:Axure APP:Axshare APP下载地址非google play

    很多童鞋反应googleplay下载不下来,我们发布在 UE社区 以后各种新的东东想第一时间知道欢迎安装我们的UE小组APP 请需要的同学尝鲜下载。 http://www.iamue.cn/read.php?tid=16&fid=2 不过阿西这里要提醒下,这…

    2015-05-25
  • 高保真原型的这几个秘密,你知道吗?

    这不是一篇关于“怎么做高保真原型“的文章,也不是一篇关于交互规范的文章,这篇文章对于交互新人或者想作一些改变的互联网从业者有些许帮助。

    2017-05-23
  • 产品经理黑魔法 | 自启动与后台

    最近写黑魔法上瘾了,每天稍微有点空闲,Glen都在思考互联网行业都有哪些黑魔法。有机会大家还可以探讨一下魔咒课、魔药课、占卜课等哈利波特魔法课程。

    2017-06-03