一个预选信息的设计方案思考

用户头像
广州/设计爱好者/7年前/103浏览
一个预选信息的设计方案思考

参与的项目里有一个功能,需要先进行路口的选择,然后再根据选择的路口信息返回预警列表。在此记录一下这个功能的设计迭代思路。

我也不知道这种是不是叫预选信息,但是这是第一步要选择的内容姑且就先这么说吧。

这里讲的预选信息功能的存在是因为业务的需要,需要先选择一些路口信息,然后后台仅返回这几个路口下的符合条件的数据。


1.0版本时的解决方案:

1.进入选择页即弹出键盘进入搜索状态;2.根据搜索关键词显示匹配的路口,此时下一步按钮处于禁用状态;3.选中路口,下一步按钮激活;4.点击下一步,提交选项,进入下一页。

设计的时候大致上没有什么问题,但是实际应用后发现:1.由于没有做限制,选择路口可以选择很多个,即是如果一个城市路口有几千个,这里也能选几千个;2.这样做会导致数据传输很慢,容易出问题(预警重复提醒等);3.选择页面展示当前已选择的路口,选择的路口过多时会将路口列表向下挤,同时,开发们在这里做了个已选路口在列表内置顶的功能,这样连续点击的时候已选中的路口又会被取消。

令人窒息...沟通之后决定:1.限制最大可选五个路口;2.保留历史选择路口项目,方便结束当次预警后,下一次进入时可以作为常用的路口快速选择;2.考虑是否固定高度显示已选中的项,能比较直观地看也方便随时取消更改;3.考虑候选列表中取消当前选中项置顶;4.优化的操作不影响现在的操作流程。


第一次优化后的方案:

首先修改了第一版设计中点击进入该功能页面就默认弹出键盘,改成默认无操作(用户可能直接就选择历史选过的路口,弹出键盘会遮挡选项),点击搜索框才弹出键盘。

选择路口这步的优化思考了几种方案进行比对。

undefined

最后选择了比较好的方案一进行优化使用。

undefined

  1. 1.当有历史记录的时候,默认显示4-6条记录,点击查看更多记录,收起键盘并展开。列表更改,使用图标标示路口类型;

  2. 2.标题与按钮始终停留在顶端,方便操作;

  3. 3.无历史记录或清空了历史记录后,使用相应的文字引导操作。

  4. 4.这里不默认显示全部路口列表,一是条目过多加载很慢,二是其实每个人员负责的很少变动,更重要的是能快速选中自己负责的路口,其他的按需要搜索选择即可。

undefined6.输入关键字进行路口名称匹配显示,这里跳过了候选词直接显示匹配的搜索结果,就不另外标示出关键词;

7.点击选中才展开车道,默认隐藏,列表每一条都显示全车道看起来会非常乱;

8.点击即选中,不选择车道即默认为全选;

9.再次点击取消选中;

10.点击底部已选择栏向上展开列表,可单独删除某个选项或清空,可修改车道;




这是目前能想到的比较好的解决方案了。不过实际这部分设计并不是我负责,这里重新做一次设计加了点自己的思考,记录一下过程。

(测试机和客户的手机装的输入法是搜狗的,为了接近实际使用效果后来的设计稿都把安卓原生的键盘换成了搜狗的键盘素材)

1
举报
|
1
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】旅行icon
新能源APP应用UIKit
【新年UI图标】汽车icon
UI界面 组件
3D渐变流体抽象矢量UI背景图
【新年UI图标】钱包icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】30个图标
【新年UI图标】会员icon
Security Camera UI kit
3D卡通UI界面图标可爱插画免扣素
UI 登录界面设计模板包
UI通用设计素材1
新拟态风格 UI设计组件库
我的钱包-UI界面设计-app
【新年UI图标】秒杀icon
户外旅行飞机情侣假日出行
高级感金属拟物 UI设计组件库
智能家居中心 简约 UI设计组件库
APP/小程序商业项目UI模板|99个高保真UI+79个原型
盲盒APP UI设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
科技医疗透明柜UI界面设计
你可能喜欢
大家都在看
登录注册