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

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

相关推荐

  • 总结:常见的4条用户体验误区

    近年用户体验的概念越来越火热,从事互联网人张口闭口就谈用户体验,用户体验的概念离我们每个人那么的近。但是用户体验是人人都可以做好的吗?答案是否定的,就像人人都是产品经理一样,能做产品经理的依旧是少数,把产品经理做好的更是凤毛麟角。本篇文章总结4条我遇到的用户体验误区。如果一个流程的信息量是12个单位。x*y=12(x=单位页面的信息量  y=路径深度)例如微信发朋友圈即使断网情况下,当用户在点击发送时,朋友圈立刻就显示数据,给用户反馈是动态发送成功,其实是假数据显示,在这个时候后台还在上传。断网场景极少,朋友圈这个设计满足绝大部分用户的操作顺畅,用户体验良好。不为了极少数使用场景而做真数据展示给用户,那样的话给绝大部分用户感觉加载过慢导致不好的体验。

    2017-04-29
  • Axure软件实现登录界面交互小教程

    先上效果图先首先在Axure里面布局好登录页面以及登录成功的页面(也就是红色的那个页面),在布局的过程中请输入账号以及请输入密码两个元件选择使用文本框元件。并编组好整个登录成功页。在布局好界面之后选中请输入账号的元件进行命,请输入密码的文本框也是一样的需要进行命名如图,将登陆成功页面进行编组命名,并且进行隐藏。然后选中账号输入框进行用例设置,选择获取焦点用例进行设置,选择用例动作中的设置文本如图步骤所示进行设置。同样的针对密码输入框进行...

    2018-04-07
  • 两会唤醒全民关注用户体验

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    2018-03-28
  • UI设计入门必会:Axure及Adobe系列软件如何安装

    UI设计最最基础的-软件如何正确安装且永久免费试用1、Axure 8.0正确安装、汉化、破解2、UI设计之通过CreativeCloud安装Adobe软件

    微信热点 2018-05-07
  • 走进交互设计——感受生活中的交互设计

    交互设计交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的…

    2017-08-01
  • 从了解用户的注意力开始,创造更优秀的用户体验

    作者:Norbi Gaal译者:优设网-陈子木链接:https://www.uisdc.com/introduction-to-human-attention这是一篇源自心理学家和 UX设计师的关于人类注意力研究的文章。在产品团队中,用户体验设计师的工作是输出高可用性、易用性的可交互数字产品。当我们在设计这些产品的时候,我们花费了大量的时间来探索不同的研究方法,了解不同用户的行为、习惯和需求。对于绝大多数的用户而言,在行为模式和心理结构...

    2018-04-07
  • 10分钟科普!那些不明觉历的“交互设计方法论”到底是什么?

    @戴小维Saki :为什么要学会方法论 ?身为交互设计 师,行走江湖,怎么能没有一两个贴身护法傍身?!

    2017-05-21
  • Axure原型管理与展示

    因为墨刀是自带生成分享链接以及分享二维码功能,这里主要写关于Axure的原型管理与展示。AxureShareAxureShare是Axure RP官方的免费原型托管网站,可以直接在Axure中共享发布。发布后Axure的源文件也会保存在官网的地址中,在其中还可以设置访问密码。But, 这么好用为什么用的人少呢?因为访问的时候,会慢的你心碎。2. 产品大牛产品大牛是济南公司开发的产品托管网站,解决了Axureshare连接速度慢,访问体验...

    2018-03-24
  • 为什么互联网产品经理转做智能硬件后就不灵了呢?

    互联网产品经理转做智能硬件后还能像过去那样玩得转吗?互联网PM和智能硬件PM有何区别?知乎用户忘象Van以其亲身的经历,从定位、KPI考核、关注点、项目追求和成本意识的五个差别做了详细的解答:我做过手机PM,也做过互联网PM,感觉这个问题就是为我量身定做的。所有的区别都可以用一句话概括——硬件PM是生意人,互联网PM是设计师。————————————产品经理是近年来严重泛滥的一个词,而且由于互联网行业的强盛,导致大家对这个岗位的认知完全...

    2018-03-12
  • 译文|「设计师学习商业」中「Why」与「How」的问题

    Airbnb、Pinterest、Kickstarter、小米等一系列的创业企业有什么共性?他们都有设计师作为创始人,在创始团队中就加如了设计的基因。商业决策者们在努力地把商业策略融入到产品设计的内涵里,而你——一名设计师,又是否了解商业呢?今天我们分享两篇文章,分别讨论了「设计师学习商业」中「Why」与「How」的问题,希望你能有所启发。

    2017-05-25