欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

「用户体验设计」表单中的勾选框和开关

发布时间:2017:10:06 13:01:10 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1435个文字,预计阅读时间4分钟
导语
创立表单时,交互规划师总是会面对一个挑选,选用哪种UI元从来表明可选项的操作。当然,咱们每个人都有自个的规律。可是,在选用可选项控件时,依然要多加考虑。可选项能够用勾
「用户体验设计」表单中的勾选框和开关

创立表单时,交互规划师总是会面对一个挑选,选用哪种UI元从来表明可选项的操作。当然,咱们每个人都有自个的规律。可是,在选用可选项控件时,依然要多加考虑。

可选项能够用勾选框、开关、单选框和下拉菜单表明。挑选妥当的话,任何一种都十分超卓。本文中,智唯网络表示要重视勾选框和开关。

勾选框

勾选框用在一系列选项中,用户能够挑选恣意数量,包括0个、1个,或许许多个。换言之,每个勾选框在列表中都是彼此独立的,勾上一个框并不会撤销其他选项。


推荐阅读:Airbnb 设计师:我们如何为残障人士做用户体验设计?

「用户体验设计」表单中的勾选框和开关

带有标签的勾选框

开关

开关组件是在仿照物理开关,让用户打开或封闭某个项目。


「用户体验设计」表单中的勾选框和开关

开关供给了两种简略直接的对立选项

开关组件一般用于体现一个动作(例如开始或停止某个操作)。它类似于电灯开关:


「用户体验设计」表单中的勾选框和开关

开关一般用在电灯开关上

勾选框和开关的最好实习

运用规范的视觉体现

勾选框应当是一个小方框,选中时有一个勾,或许一个叉。


「用户体验设计」表单中的勾选框和开关

选中和未选中的勾选框组件。

开关应当看起来有开和关的状况


「用户体验设计」表单中的勾选框和开关

选中和未选中状况的开关组件。

用户在操作各种控件时,应当供给明晰的视觉反应。纤细的动画能让体会更细致——在移动运用中特别如此,


「用户体验设计」表单中的勾选框和开关

iOS7/8的开关按钮。

纵向摆放列表

纵向展示列表,每行一个选项。这关于开关和勾选框都有用。假如一定要横向摆放,一行有多个选项,就要调整好按钮和标签的间隔,哪个选项对应哪个标签明晰明晰。下面的比如中,元素之间的间隔都太近了。


「用户体验设计」表单中的勾选框和开关

很难断定选项4对应的到底是哪个选框

开关的当时状况应该在控件外面

规划开关时,你应该防止状况和操作的歧义。咱们以iOS6的开关规划为例,注意看写着ON的蓝色状况按钮。


「用户体验设计」表单中的勾选框和开关

并不能断定标签(比如中是“ON”)是指当时状况,仍是按下的操作

你能判断按钮当时是开着的吗,或许拖动滑块、点击、点按时会敞开?“ON”在这里是个状况(名词)仍是动作(动词)?并不明白。

不应该让用户感到迷惑,差异出操作和状况十分重要。实际上,高亮显现当时状况,能够让它更加友爱。


「用户体验设计」表单中的勾选框和开关

文字色彩表明晰如今的状况(亮起的是ON)

勾选框运用必定的案牍

运用必定、有用的案牍作为勾选框的标签,用户就很明白假如勾上选框会发作什么。防止“不要给我发邮件”这么的否定案牍,这就意味着用户要勾上选框来阻挠某些事发作。


「用户体验设计」表单中的勾选框和开关

勾选框永久都应该运用必定的指令,不能用否定案牍,例如“请勿……”

勾选框运用Label标签,增大操作区域

一切的勾选框都有标签,但并非都运用label标签。勾选框本质上很小,可是依据费茨规律,它们就很难点击或许点按。要增大操作区域,让用户在点击或点按标签与有关文字时就能选中选项,而不仅仅是那个小方框。


「用户体验设计」表单中的勾选框和开关

让用户通过点击方框或它的标签来选中选项

勾选框只用来改动设置,不能作为操作按钮

作为一个二元挑选,勾选框和开关的首要差异,是勾选框是状况,而开关是操作。假如一个操作适合用物理开关表明,那么开关也许即是最适合的控件。

下面的比如很明显,在开关中,无线网络是开着的。但在勾选框里,用户还需要考虑无线网络是不是敞开,是不是需要勾选这个框来敞开无线网络。


「用户体验设计」表单中的勾选框和开关

用开关来敞开或封闭效劳或硬件构成,例如WIFI

勾选框和开关的提交操作

勾选框的操作能够延后(例如作为表单的一部分),但开关的操作应当当即触发。

杰出的用户体会,是当即改动开关对应的设置项,,而不是点按了“保留”或回来上个界面以后才保留。咱们在现实生活中对开关的期望即是如此(例如咱们知道,按下开关灯马上就亮了)。


「用户体验设计」表单中的勾选框和开关

iOS中的敞开WIFI

当用户有必要履行额外过程才干让改动收效时,运用勾选框。


「用户体验设计」表单中的勾选框和开关

当用户有必要点击“提交”或“下一步”按钮,修正才干收效时,选用勾选框

定论

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:「用户体验设计」获取用户权限的正确方式

下一篇:「用户体验设计」重点考虑的9个核心原则

  • 18886 文章总数
  • 2256442访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信