童话说说技术创业美文职业
快好知
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

交互细节思考:CalenderVS下拉框

10月22日 发如雪投稿
  微小的差别给用户的感受可能完全不同。
  近些天,各大互联网公司的春招和暑期实习的网申陆续启动。
  网申的基本信息填写,看起来似乎没有什么惹人注目的交互,但只要稍微用心,就能体会到各大公司在页面交互细节处理上的不同,即使是最简单的时间信息的输入,也能体现出公司的专业度,微小的差别给求职者的感受可能完全不同。
  下面就腾讯、网易、京东、美团四家的时间信息输入的交互方式来谈一谈自己对交互细节的见解。
  京东、美团使用的时间录入控件是C腾讯、网易使用的时间录入控件是下拉框。接下来的分析由Calender和下拉框的对比展开,而仅仅是选择什么控件其实并不能决定一个交互,好的交互不论再微小,也会综合考虑使用情境、用户心理和巧妙的反馈细节等。
  1。Calender比下拉框更高级?
  比较而言,Calender是比下拉列表框更新奇的控件,我想,采用Calender代替下拉框的基本考虑应该是:
  Calender只用直观选中一个点,一步到位;而下拉表要进行年月日三次选择。
  Calender在“日”选择时更有优势(30左右的选项,下拉框承载量确实过长。)
  先来看第一点,Calender中所谓的选中一个点,在选中这个点之前,还是得对年、月、日三个要素进行定位,实际的思考和选择步骤数量是一样的。
  而且,实际的操作过程中,个人认为日历表更麻烦,选择年、月时,下意识地操作是点击左右的箭头,而像下图中京东的Calender,默认日期是今天(年是2017),所以出生日期一般要点十几次。
  当然,京东的Calender选择年份信息不止是点击左右箭头这一种选择方法,可以直接输入或者内置下拉框:
  理性地去考虑,确实,可以使用比“点十几次”更高效的方法。然而,我们考虑的是用户的实际使用场景和心理特征。
  在使用计算机时,用户倾向性是:如果已经启动了一个操作,更多关注的是如何用这种方法把事情完成,而不会转而思考另一种思路,更换输入方式会消耗心理成本,增加挫败感,少了那种“自然而然”的体验。如果目前的方法可以解决问题,是很难放弃已有的思路的,在心情不太放松的时候尤其如此。(开始网申时候,很多同学(不是所有人)其实也会在心理评估自己,多少会有些小小的不安。)
  所以的确会有人点十几次来选择年份。
  至于第二点,Calender相比下拉框在选择“日”时的优势,我们在第二部分讨论。这里继续来探讨一下京东的Calender控件的设计,这个控件的设计初衷是为不同的需求提供不同的时间输入方法,在默认值为2017年的基础上,至少有以下三种方式:
  左右箭头选择选择离今年不远的年份(比如毕业时间)
  点击输入框,鼠标在内嵌下拉框中选择离今年较远的年份
  点击输入框,键盘输入选择离今年很远的年份
  这时间从近到远,一一对应,都有“方便”的输入方法,多方便。但这只是设计者的初衷。作为一个只有一般经验的用户,实际遇到的问题有:
  直接下意识的直接点左右箭头很多次,不想尝试别的办法。
  年份可点击是通过悬停手型进行提示的,也就是说,如果不把鼠标移到年份数字上,从外观上是看不出可点击的特征(如图)的,是不知道那是个可输入框的:有潜在的学习成本。
  即使弄清楚了有不同的方法,还会本能地想一下用哪个(不过这个因人而异,有的人就是喜欢用键盘,看着能输入就直接输入想都不想。),可能存在轻微的选择困难。
  但如果说,但这个Calender还算常规,下图美团家的这个简直了:
  中间两个向下的箭头是内嵌的下拉框,但这种左右箭头、上下箭头的混合实在让人有一种凌乱的感觉,而且在选择过程中也缺乏一致性:选年份上下选。选月份可以左右也可以上下选。为什么??因为懒得做年份的左右箭头了还是位置不够了,让人有一种半成品的感觉。
  2。同样的下拉框,不同的交互体验
  相比于日历表,纯粹的下拉框的优势是唯一性,即只有“点击选择”一种输入方法,在使用方式上没有困惑。
  那么这种方法是否高效?我们从年月日三项的输入体验分别来看:
  日:30个选项,使用calender确实更直观好选,但下拉框配上鼠标滚轮的体验其实也不差。
  月:12个选项,用下拉框承载刚刚好。
  年:很多选项,下拉框是无法承载无限的年份,但也没必要做。(腾讯的“毕业时间”下拉选项只有201720182019三个选择,结合了具体场景解决问题,实现起来也更简单)
  对传统下拉框进行巧妙的优化,可以实现简洁、高效的使用。腾讯可以根据填写的身份证信息,自动反馈出默认的性别和出生日期:
  我们看到的只是各个网申页面身份证号、性别、出生日期的内容在填写时的顺序位置不同,而交互设计师所考虑的是顺序背后的数据的获取和过程的优化。
  有的人会提到下拉框相比Calender外观较差这个问题,这并不能一概而论,外观是看整体效果的,设计下拉框时稍微用点心思(边缘圆滑点,内部四周合适留白等),并且搭配好整个页面的设计,即使是使用下拉框,仍然可以获得较为良好的视觉效果,在我实际体验中,腾讯和网易都使用了下拉框,但腾讯的设计看上去比网易舒服多了,同样的是使用下拉框,
  网易呈现的感觉是“因为偷懒不想更新做日历表,所以用以前一直在用的下拉框。”(下图)
  而腾讯呈现的感觉是“因为考虑过下拉框和日历表的不同,认为下拉框更易用,并根据具体场景精心设计了下拉框的外观和功能。”
  3。用什么控件不是重点,用心才是
  上面所谈到的所有内容,似乎是想证明“别看Calender新,其实下拉框更好用。”其实不是。
  之所以探讨这两种控件的区别,以及带有一点对下拉框的倾向性,是因为本人最近网申的是上面四家公司,在这四家的界面中,对个人而言,腾讯的下拉框的使用体验最好。
  根据身份证号自动反馈出生日期的功能,并不限于下拉框,也可以用于Calender,同样的,不论是使用哪种控件,如果提供更符合使用情境的默认值和选项等(类似毕业年份只提供201720182019三个选项,或者京东Calender出生日期的默认年份在95年左右),使用体验也会提升。
  所以用什么控件不是重点,用心才是。
  当然,任何脱离特定的用户、具体使用场景、资源协调、统计数据等因素的综合考虑所进行的分析,都是耍流氓。
  以上对“时间输入框”的分析,对网申用户群体(20左右年轻人,可能就是认为下拉框low,偏爱Calender)、具体使用场景(只是站在私人的角度来谈可用性,没有去调研)、资源协调情况(工程师们天天忙着很多事,校招这界面稍微旧点差点,你喜欢公司你还是会投,不投说明你忠诚度并不高,所以按照工作的性价比,代码就不改了。)的考虑并不周到,有个人的局限性。
投诉 评论 转载

一只设计师的工作小结:在想好之前,先克制你的表达欲我一直觉得做设计,其实是在克制,潜移默化是最好的。在你没有想好如何表达,最稳妥的做法是克制你的表达欲。网易红彩1。0版本视觉通常来说,界面设计工作是在原型图之后开发……UI最佳实践:深度解析模态窗口模态已成为今天的可怕的弹出窗口的版本。用户发现模态窗口很骚扰人,人们本能地自动关闭这些窗口。模态窗口、叠加窗口、对话框、无论你叫它们什么,是时候重温这个UI模式了。当它们……7个维度,让你在网页设计中讲好故事网站能承载多种多样的内容,但无论是哪种内容,通常都会遵循一定的信息架构。在这其中,故事是很特别的一种类型。讲故事,往往能以更叙事、更情感化的方式,将内容传递给用户。一个好的故事……聊一聊不同应用场景下的验证码最近在做关于验证码的项目的时候,从交互的角度梳理了产品各个平台验证码的应用场景。在一个产品中,会有多个设计师分工协作,不同的设计师做设计迭代。由于验证码在整体设计中太容易被忽略……做设计不得不讲究的一个点:平衡做设计,最难的不是搞清楚解决问题的最佳答案是什么。而是,站在全局去平衡问题与问题之间的关系,做当下资源条件下相对正确的设计决策。体验商业技术的平衡在……交互细节思考:CalenderVS下拉框微小的差别给用户的感受可能完全不同。近些天,各大互联网公司的春招和暑期实习的网申陆续启动。网申的基本信息填写,看起来似乎没有什么惹人注目的交互,但只要稍微用心,就能……做设计,为什么总是心里没底?相信有很多小伙伴和我一样,经历过“做设计,心里没底”的情况,说的直接点就是“找到好参考就能做好,找不到好参就做不好,即使做出了好作品,也觉得带有一定的偶然性!”为什么会这样呢?……悬浮动效常见的几种玩法动效是如今UI设计中的重要组成部分,也是目前最热门的设计趋势之一。在之前的《在现代网页设计中,动效常见的几种用法》这篇文章中,我们探讨了动效对于交互和用户的重要意义,动效在不同……一名交互设计师的日常思考方式如果有一天,当你发现自己“较真又矫情,苛求又世故,倔强还言辞凿凿”,别否定自己,也许你已经开始有点交互设计师的意思了。一直有好多朋友问我许多关于交互设计师的工作状态的事情……APP设计:那些打动人心的设计点(二)上周写了一篇文章《APP设计:那些打动人心的设计点》,总结了八个APP的小设计点,这些小设计点不是针对APP的核心业务和功能的设计,但会给用户带来一点小便利和小惊喜,就像电影最……在设计过程中,设计师如何输出一个更落地的动效呢?优秀的动效设计更能让用户从中感到惊喜,让用户感受到产品的温度和调性。国际惯例,在开始之前,还是先来聊一聊我们设计中心在人机交互中对于动效的一些经验和想法。动效,一直……为了色盲用户的友好体验,你应该注意五点世界范围内,每12个男性中有1名男性、每200名女性中有1名女性受色盲或者色觉缺失(CVD)的影响。这意味着每100个web或app用户中,至少有8个人的实际体验和你的预期有很……
产品分析:看她理财如何构建起从内容到交易的产品闭环运货版滴滴,聊聊货车帮的产品逻辑盒马产品分析报告:凭什么它可以成为生鲜电商网红?虽千万里,吾往矣:行者骑行产品体验报告APP点评:网易云音乐APP分析荔枝微课竞品分析“即刻”揣摩报告1。0,尝试解答即刻现状和未来小程序分析报告:小打卡,带你从此和懒癌saybye用增长模型,复盘喜马拉雅FM的产品增长一年之后,再看抖音丨抖音完整分析报告从千播大战到上市,我对映客的产品逻辑进行了简单梳理脉脉职场社交的独角兽
防晒喷雾的使用顺序防晒喷雾怎么用才正确那一刻,真美热议聚热点网 围台军演非常妙,离回归又近了一步白萝卜放冰箱变黑变青还能吃吗莫纳什大学知名校友有哪些幽幽的造句用幽幽的造句大全从知识变本事职场减压新尝试调整生物节律西方艺术史古代两河流域美术美到爆的夏日风穿搭世界公认的16种高效记忆法,助你记忆力突飞。。。农场世界养小龙虾赚钱,是真是假,会不会是下一个火牛。

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界