交互细节思考： Calender VS 下拉框

2017-03-22 09:39:00

微小的差别给用户的感受可能完全不同。

近些天，各大互联网公司的春招和暑期实习的网申陆续启动。

网申的基本信息填写，看起来似乎没有什么惹人注目的交互，但只要稍微用心，就能体会到各大公司在页面交互细节处理上的不同，即使是最简单的时间信息的输入，也能体现出公司的专业度，微小的差别给求职者的感受可能完全不同。

下面就腾讯、网易、京东、美团四家的时间信息输入的交互方式来谈一谈自己对交互细节的见解。

京东、美团使用的时间录入控件是Calender；腾讯、网易使用的时间录入控件是下拉框。接下来的分析由Calender和下拉框的对比展开，而仅仅是选择什么控件其实并不能决定一个交互，好的交互不论再微小，也会综合考虑使用情境、用户心理和巧妙的反馈细节等。

1.Calender比下拉框更高级？

比较而言，Calender是比下拉列表框更新奇的控件，我想，采用Calender代替下拉框的基本考虑应该是：

Calender只用直观选中一个点，一步到位；而下拉表要进行年/月/日三次选择。
Calender在“日”选择时更有优势（30左右的选项，下拉框承载量确实过长。）

先来看第一点，Calender中所谓的选中一个点，在选中这个点之前，还是得对年、月、日三个要素进行定位，实际的思考和选择步骤数量是一样的。

而且，实际的操作过程中，个人认为日历表更麻烦，选择年、月时，下意识地操作是点击左右的箭头，而像下图中京东的Calender，默认日期是今天（年是2017），所以出生日期一般要点十几次。

当然，京东的Calender选择年份信息不止是点击左右箭头这一种选择方法，可以直接输入或者内置下拉框：

理性地去考虑，确实，可以使用比“点十几次”更高效的方法。然而，我们考虑的是用户的实际使用场景和心理特征。

在使用计算机时，用户倾向性是：如果已经启动了一个操作，更多关注的是如何用这种方法把事情完成，而不会转而思考另一种思路，更换输入方式会消耗心理成本，增加挫败感，少了那种“自然而然”的体验。如果目前的方法可以解决问题，是很难放弃已有的思路的，在心情不太放松的时候尤其如此。（开始网申时候，很多同学（不是所有人）其实也会在心理评估自己，多少会有些小小的不安。）

所以的确会有人点十几次来选择年份。

至于第二点，Calender相比下拉框在选择“日”时的优势，我们在第二部分讨论。这里继续来探讨一下京东的Calender控件的设计，这个控件的设计初衷是为不同的需求提供不同的时间输入方法，在默认值为2017年的基础上，至少有以下三种方式：

左右箭头选择——选择离今年不远的年份（比如毕业时间）
点击输入框，鼠标在内嵌下拉框中选择——离今年较远的年份
点击输入框，键盘输入选择——离今年很远的年份

这时间从近到远，一一对应，都有“方便”的输入方法，多方便。但这只是设计者的初衷。作为一个只有一般经验的用户，实际遇到的问题有：

直接下意识的直接点左右箭头很多次，不想尝试别的办法。
年份可点击是通过悬停手型进行提示的，也就是说，如果不把鼠标移到年份数字上，从外观上是看不出可点击的特征（如图）的，是不知道那是个可输入框的：有潜在的学习成本。
即使弄清楚了有不同的方法，还会本能地想一下用哪个（不过这个因人而异，有的人就是喜欢用键盘，看着能输入就直接输入想都不想。），可能存在轻微的选择困难。

但如果说，但这个Calender还算常规，下图美团家的这个简直了：

中间两个向下的箭头是内嵌的下拉框，但这种左右箭头、上下箭头的混合实在让人有一种凌乱的感觉，而且在选择过程中也缺乏一致性：①选年份上下选。②选月份可以左右也可以上下选。为什么？？因为懒得做年份的左右箭头了还是位置不够了，让人有一种半成品的感觉。

2.同样的下拉框，不同的交互体验

相比于日历表，纯粹的下拉框的优势是唯一性，即只有“点击——选择”一种输入方法，在使用方式上没有困惑。

那么这种方法是否高效？我们从年/月/日三项的输入体验分别来看：

日：30个选项，使用calender确实更直观好选，但下拉框配上鼠标滚轮的体验其实也不差。
月：12个选项，用下拉框承载刚刚好。
年：很多选项，下拉框是无法承载无限的年份，但也没必要做。（腾讯的“毕业时间”下拉选项只有2017/2018/2019三个选择，结合了具体场景解决问题，实现起来也更简单）

对传统下拉框进行巧妙的优化，可以实现简洁、高效的使用。腾讯可以根据填写的身份证信息，自动反馈出默认的性别和出生日期：

我们看到的只是各个网申页面身份证号、性别、出生日期的内容在填写时的顺序位置不同，而交互设计师所考虑的是顺序背后的数据的获取和过程的优化。

有的人会提到下拉框相比Calender外观较差这个问题，这并不能一概而论，外观是看整体效果的，设计下拉框时稍微用点心思（边缘圆滑点，内部四周合适留白等），并且搭配好整个页面的设计，即使是使用下拉框，仍然可以获得较为良好的视觉效果，在我实际体验中，腾讯和网易都使用了下拉框，但腾讯的设计看上去比网易舒服多了，同样的是使用下拉框，

网易呈现的感觉是“因为偷懒不想更新做日历表，所以用以前一直在用的下拉框。”（下图）

而腾讯呈现的感觉是“因为考虑过下拉框和日历表的不同，认为下拉框更易用，并根据具体场景精心设计了下拉框的外观和功能。”

3.用什么控件不是重点，用心才是

上面所谈到的所有内容，似乎是想证明“别看Calender新，其实下拉框更好用。”其实不是。

之所以探讨这两种控件的区别，以及带有一点对下拉框的倾向性，是因为本人最近网申的是上面四家公司，在这四家的界面中，对个人而言，腾讯的下拉框的使用体验最好。

根据身份证号自动反馈出生日期的功能，并不限于下拉框，也可以用于Calender，同样的，不论是使用哪种控件，如果提供更符合使用情境的默认值和选项等（类似毕业年份只提供2017/2018/2019三个选项，或者京东Calender出生日期的默认年份在95年左右），使用体验也会提升。

所以用什么控件不是重点，用心才是。

当然，任何脱离特定的用户、具体使用场景、资源协调、统计数据等因素的综合考虑所进行的分析，都是耍流氓。

以上对“时间输入框”的分析，对①网申用户群体（20左右年轻人，可能就是认为下拉框low，偏爱Calender）、②具体使用场景（只是站在私人的角度来谈可用性，没有去调研）、③资源协调情况（工程师们天天忙着很多事，校招这界面稍微旧点差点，你喜欢公司你还是会投，不投说明你忠诚度并不高，所以按照工作的性价比，代码就不改了。）的考虑并不周到，有个人的局限性。

文 @小C

关键字：交互, 设计

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！