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

设计总结:滑块控件

发布时间:2017:11:06 23:45:22 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有998个文字,预计阅读时间3分钟
导语
在滑块设计中需要注意“做什么”和“不应该做什么”呢?本文将来探讨下,enjoy~

  在滑块设计中需要注意“做什么”和“不应该做什么”呢?本文将来探讨下,enjoy~

  

设计总结:滑块控件

 

  价格范围滑块,360度视图滑块,时间线滑块……

  在所有这些例子中,滑块都很有用,因为减少了用户的输入,更可以推动用户探索更多选项,从而帮助他们做出明智的决定。

  

设计总结:滑块控件

 

  那么,在滑块设计中需要注意“做什么”和“不应该做什么”呢?一起来分析探讨一下:

  文章大纲:

  什么时候我们需要滑块?

  滑块组件有哪些类型?

  哪一些情况并不应该采用滑块?

  滑块设计需要考虑的问题清单

  滑块设计问题具体探讨

  总结

  1. 什么时候我们需要滑块?

  并不是每个页面都可以从滑块中受益。但是,如果我们想要设定几种选项或帮助用户快速限制多个选项时,或者用户对于输入结果相对模糊或不准确时,滑块就可以被考虑使用了。

  例如:用户选择抵押的首付范围或者机场出发的时间范围,在这种情况下用户选择到最后一分的数额或者选择到最后一秒的出发时间并不是真正需要的。

  

设计总结:滑块控件

 

  例如:在探索度假目的地时,用户可能希望通过他们喜欢体验的活动来筛选他们的选项。在这种情况下,可以使用滑块来使其能够为各种活动分配权重,以便最终选择的选项根据其兴趣精确定制。或者在处理地图时,滑块可以帮助用户限制或扩展搜索的地理范围。

  

设计总结:滑块控件

 

  例如:购物中的例子:当你选择快递速度的时候,可以选择快递方式来查看快递费用。当然可以通过下拉菜单,但是显然单选按钮更直观,选择项直接暴露给用户。这个时候滑块自然就是可以适用的,只要增加对应的价格提示。另外每个选择上方的价格提示更有针对性,右滑价格更高,左滑价格降低,显得更清楚。

  

设计总结:滑块控件

 

  

设计总结:滑块控件

 

  一般来说,每当你想在你的界面上添加一个“模糊”过滤器或者指示选项之间的关系时,滑块是一个值得考虑的选择。然而,一个相应缓慢,显得笨重的滑块比一个可预测的通用按钮更令人沮丧。要有效,滑块必须非常容易操作,并且必须快速而持续地响应变化。

  2. 滑块组件有哪些类型

  2.1 单连续滑块

  如果滑块的主要目标是从一系列值中选择一个值,那么我们可以使用一个连续的滑块。

  

设计总结:滑块控件

 

  2.2 单一,离散滑块

  如果连续滑块允许客户连续更改滑块上的值,则离散滑块仅允许选择预定义的值组。

  

设计总结:滑块控件

 

  2.3 双点滑块(两个连续的滑块)

  过滤或者划分某个区间

  

设计总结:滑块控件

 

  3. 哪一些情况并不应该采用滑块

  滑块组件之间的元素都应该存在互动的关联关系。每当滑块从左向右进行操作时,最终值应该和前面的值存在关联。就好像音量控制器。往右是增长,往左数值减小。

  反例1:滑块并没有包含进度、线性的关系

  

设计总结:滑块控件

 

  反例2:对于有限的选项,滑块不是最佳的

  

设计总结:滑块控件

 

  反例3:数值变化未突出显示

  

设计总结:滑块控件

 

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

看了这篇文章的人还看了

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

上一篇:如何使用Sketch绘制肌理插画?

下一篇:Axure8.0|快速入门新手教程:电子相册

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

      统一报价,无隐形消费

    • 金牌服务

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

    • 售后无忧

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

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

    截屏,微信识别二维码

    微信号:13825575516

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

    优化二维码打开微信