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

2017 年 10 月 13 日 产品100干货速递 Mandy权

大家都知道，吃喝玩乐，永远是人的基本休闲方式。城与人的生活息息相关，针对吃喝玩乐设计的产品形态，往往都有城市、当前定位等基本功能的设置，以便于产品经理采集到用户行为后，做出更好的个性推荐及内容展示。

很早以前小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聊产品

本文由作者授权产品壹佰发布，如需转载，请联系作者。

投稿邮箱：yli01@kaikeba.com 欢迎您的来稿

「今日互动」

主题：你在哪

一个简单的城市控件，简单的定位LBS，也需要复杂严谨的思考，绝不仅仅是一个定位成功就能解决问题的。当下，如何更快速更便捷的产品交互方式正在逐渐改变着世界，统一规范的操作也能有不同的效用。小伙伴们你们在使用APP选择位置的时候有没有哪些独特的想法呢？

欢迎在文章下方留言，大家踊跃发言，说说你们对文章的看法吧~

产品壹佰（www.chanpin100.com），是慧科集团旗下企业开课吧诚意打造的，互联网产品人学习成长社群；致力于为互联网产品爱好者，提供优质学习资讯、线上公开课、线下沙龙、学习社群与教学服务。

开课吧 （ www.kaikeba.com ），是慧科集团倾力打造的互联网人学习成长社群，2016年8月，开课吧实力融聚无限互联、莱茵教育、产品壹佰、美好学院等知名职业教育品牌，专注打造互联网产品经理、UXD全能设计、技术开发等前沿专业课程及学习社群。致力于通过创新科技，提供智慧学习服务，高效链接人与知识，帮助互联网人实现可持续职业成长。