01需求背景最近一周开始负责公司在线客服的设计，目前还处在了解业务阶段。认识到了B端交互设计的业务流程是多么的复杂，大的业务需求自己也正在学习，接下来分享一个我最新做的一个日期选择器加时间选择器的优化需求。02当前存在的问题1.选择时间范围确在两个容器显示，用户选择时间范围的时候对范围的感知不是很直观2.选择完开始时间之后点击确定自动跳到结束时间，调整的交互没有给用户明确的状态，导致用户迷惑。3.切换时间范围时交互体验差03时间选择器分析时间存在两种不同的表达方式，所以可以分为时间段选择和时间点选择时间段选择：选择某一个时间范围，一般包含开始时间和结束时间，比如年4月10日到年4月16日，常用在数据的筛选，例如查看上一周的销售业绩，本季度的工单完成情况。时间点选择：选择某一个点，一般是设定好一个时间点之后去触发某个时间，比如年4月7日下午3:00和朋友去恰饭。我们在拿到需求之后，需要去明确时间类型，因为不同的时间类型使用的控件不同，用户的使用场景也不同，设计的思路也就截然不同。在明确完成时间类型后要开始考虑时间的选择颗粒度，不同的业务场景选择的时间颗粒度也不相同，一般的时间粒度为年，季，月，周，天，小时，分钟，秒。比如仪表板主要展示的是销售每天，每周，每月，每季度的核心数据。一些运维监测工具对时间颗粒度要求极为苛刻，使用秒级的单位也十分常见。时间颗粒度也是大家容易忽略的问题。时间选择器也存在动态与静态之分，动态时间指的是每天日期的更新，进行对应的变化，举个例子吧，在一个仪表板的设计中，我选择动态时间是过去的半个月，那么以后我进入这个仪表板之后，不管未来的哪一天都是过去半个月的数据，这就是动态面板最常见的使用场景，一般出现在筛选功能，管理后台的配置中，主要是方便用户一次配置，长期使用的效果。静态时间也就是我们理解的常规意义的时间，选择之后就不会变化。时间选择器也存在动态与静态之分，动态时间指的是每天日期的更新，进行对应的变化，举个例子吧，在一个仪表板的设计中，我选择动态时间是过去的半个月，那么以后我进入这个仪表板之后，不管未来的哪一天都是过去半个月的数据，这就是动态面板最常见的使用场景，一般出现在筛选功能，管理后台的配置中，主要是方便用户一次配置，长期使用的效果。静态时间也就是我们理解的常规意义的时间，选择之后就不会变化。例如神策数据的动态时间和静态时间：在web端的设计中，用户的操作成本从大到小分别是输入，滑动点击，拖拽。因此，日期选择器同时允许用户通过点击选择时间和通过输入日期。我们要选择自己的生日时，明显直接输入比点击效率要高，但是由于日期有不同的格式，“/03/16”、“-03-16”、“.03.16”、“0316”、“年03月16日”，因此在设计的时候要结合用户的使用场景多方面思考，选择主要不适用于选择范围比较大的场景，比如选择生日时，假如从到跨越，还要依次选择月份，日期范围明显让用户直接输入效率更高。我们可以在输入时候加一个tips提示，让用户根据规则填写，避免格式不统一。在日期选择中，快捷选择也是特别重要的一部分，比如在常规中会加入今天，此刻，本月，30天前等，因为快捷选择能够在一定程度上满足用户的日常所需。比如我们看网易七鱼的快捷选择放在容器左侧，通过快捷选项基本都会对用户的使用情况进行覆盖，基本很少会单独点击选择时间。04方案比较将开始日期和结束日期分开，通过两个样式相同的日期控件，当用户选择完开始时间之后，结束时间会自动展开，提供给用户选择。用户通过两次选择，选择明确的起始时间节点，来决定他的时间范围，这个交互强调的是开始时间和结束时间，多用于用户已经明确自己时间段的场景，而不是一个模糊的时间范围，假如飞猪的预订酒店页面，我们自己已经明确了自己的入住时间和离店时间，这样可以采用分体式的交互。用户认知也更为简单，通过简单的描述开始时间与结束时间用户可以直接选择，不需要融入太多的思考，学习成本比较低用户通过一次选择，来选择一个模糊的时间范围段。交互更加强调的是时间段，比如我们在筛选的过程中，需要选择某一时间段，并且需要多次切换时间段，这样在一个容器点击就可以实现时间范围的选择，但用户在认知时候相对复杂，需要用户对整个操作流程也更深的理解，在交互上更为高效。一般多用于数据筛选的场景，在筛选的场景会选择更多的一段时间。x05总结这个时间选择器的优化，让自己对设计有了深刻地理解，之前只要产品经理给到需求就开始设计，这次学习到了要从用户的角度出发，对需求的背景进行分析，对目标角色进行研究，提炼自己的设计目标，给用户解决了什么问题，从业务逻辑的角度出发来时UI和UE的设计。

转载请注明:http://www.aideyishus.com/lkzp/6663.html