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

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

相关推荐

  • 【UXRen原创】一款金融股单APP的设计之路

    作者: 股单小分队 @ 国信证券的产品设计中心   一、交互设计的那些事 许多朋友问我:你大学学的专业不是工业设计吗?都是做产品造型的呀,现在怎么跑去证券公司做交互了? 相信许多做交互设计的朋友和都会遇到这样…

    交互专题 2017-08-07
  • 视力设计:如何为弱势群体做包容性设计

    世界是多样和公平的,在我们考虑大多数人和强者的利益时,弱势群体一样也需要被设计“庇护”到。本文作者将就此来谈谈如何为弱势群体做包容性设计之视力篇。主流产品或服务的设计能为尽可能多的人群所方便使用,无需特别的适应或特殊的设计。宽度不超过80个字符或符号(如果是中日韩字体,不超过40个);段落里的行间距(行隔)至少是1.5倍行距,段落间距至少比行间距大1.5倍。

    2017-05-15
  • iOS 9人机界面指南(四)UI元素

    文章索引状态栏展示了关于设备及其周围环境的重要信息。默认(深色)内容
     

    2017-05-26
  • 明年的,网页设计趋势!

    是时候展望一下未来了。2014年涌现了许多令人印象深刻的网页设计趋势 ,幽灵按钮越来越多,视差滚动也已经成熟,单页设计也成为了诸多设计手法的重要载体,而逐渐多起来的免Coding网页设计平台也开始造福于设计师了!

    2014-12-27
  • iPhone X 交互设计官方指南

    编译|覃云北京时间 9 月 13 日凌晨,苹果发布了带刘海的 iPhone X,这个屏幕需要 iOS 开发者做新的适配,会后苹果发布了 iPhone X 的适配指南,我们将它翻译出来供大家参考。本文首发于 InfoQ 垂直号移动开发前线,ID:bornmobileiPhone XiPhone X 拥有一个宽大的、高分辨率、圆角的、扩展到边缘的屏幕,提供了以前从未有过的沉浸式、内容丰富的体验。屏幕尺寸在纵向方向上,iPhone X 显示屏...

    2018-01-31
  • 3种空状态出现场景,5种消灭空状态的技能教你玩转空状态

    举个例子:假设有一款图片分享类的应用,然后有个页面是“我的图片”,如果在我从来没有发布过图片的时候,这个页面理所应当就是空的。并且在这个时候,第一种方法显然是不可行的。当然,空荡荡的界面有不好,所以此时可以通过操作指引来引导用户产生内容。

    2017-05-28
  • 未来美甲店一定赢在“用户体验” | 互联互生

    咱们来假想一个情景,你到一个新公司第一天上班,你刚到公司门口,就有一位打扮非常正式的女士专门迎接你。她领着你在公司走了一圈,介绍了各部门的情况,然后把你送到你的办公桌。你发现办公桌上挂着一个横幅,上面写着“新人在这儿!”全公司都能看见。你打开电脑,屏幕是一张代表公司理念的美丽图片。办公桌上有一份给你的礼物,是不锈钢做的一个公司产品的模型。你刚连上电子邮件,就收到 CEO 亲自写给你的信,对你各种鼓励、希望你能度过愉快的一天,也希望你在公...

    2018-04-29
  • 从「不修边幅」到「衣冠齐楚」,Google是这样一步步变漂亮的

    在很多人眼里,Google的产品一直与优雅设计无关。但现在,搜索巨人比其他互联网巨头都懂得如何打造一款设计优雅的软件(互联网)产品,如果你不相信这个判断,不妨放下你对苹果产品的钟爱,做个深呼吸,好,现在我们来对比一下Google与苹果在移动操作系统的设计:Android vs iOS。

    2017-06-05
  • 用户为王时代,美的如何开创用户体验新模式

    4月23日,美的联手京东推出了巅峰24小时AR新玩法,不仅福利多多,还将家电焕新的概念融入到趣味游戏中,打造了良好的用户体验,赢得了众多用户认可。随着大数据、云计算、社交商务、移动技术等新技术的发展,用户对个性化的产品和服务的需求更加强烈,并期望企业去了解他们真实的需求和提供卓越的服务体验。在此变化下,美的坚持以用户为中心的理念,推进实施关注用户实际需求的创新模式,通过用户体验实证推动产品销售和企业发展。产品研发融合需求从以前的设计师主...

    2018-04-23
  • 如何将“用户体验”做到极致?我有绝招!

    如何将“用户体验”做到极致?我有绝招!无崖子现在大多数掌柜的没有重视用户体验或者说不知道如何做用户体验。三只松鼠相信很多掌柜的都很熟悉,坚果类目的老大,三只松鼠是如何成功的呢?三只松鼠的成功不是偶然的而是必然的,三种松鼠将“用户体验”做到了极致,三只松鼠的创始人:章燎原是传统行业出身,在做三只松鼠之前在传统行业就对坚果非常熟悉,章燎原对坚果行业的把控至今无人能敌,三只松鼠的成功一部分是对供应链和仓储的把控,还有就是注重“用户体验”的极致...

    2018-03-16