第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

设计总结:滑块控件(2)

时间:2017-11-06 11:39来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
使用双滑块,如果用户将末端拇指移动到左手拇指上,或者反过来,会发生什么情况?如果用户点击或点击两个拇指之间的区域会发生什么?UI是否应该调整

  使用双滑块,如果用户将末端拇指移动到左手拇指上,或者反过来,会发生什么情况?如果用户点击或点击两个拇指之间的区域会发生什么?UI是否应该调整下限或上限?还是应该完全禁用这个动作?

  滑块上是否有任何值不应被接受?

  我们是否应该接受选择太多或太少的范围?

  用户是否能够恢复以前的滑块操作状态?

  我们是否应该添加动画或转换到交互?

  我们有相互依存的滑块,滑块的输入取决于之前的输入吗?用户是否应该能够“锁定”一些值?

  5. 滑块设计问题探讨

  5.1 滑块所需要的区域空间

  滑块组件,虽然只是一个过滤选项,不需要太多的空间,但是为了有效且易于操作,滑块还是需要大量的水平空间。滑块按钮必须足够大,轨道必须足够宽以便于点击。

  如果滑块的宽度只有200~300px,用户进行选择探索的时候将非常困难。例如谷歌字体大小滑块,获取正确的值非常的困难。

  

  对滑块组件空间要求有很大影响的一个重要变量是滑块上的关键刻度线。如果所需要的关键刻度越多,那么所需要的空间就越大。由于滑块也必须具有响应性,因此这些刻度线之间必须足够大以至于不需要太高的精度。

  

  那么,多大足够大,关键刻度线之间水平间距至少65px。滑块按钮必须32x32px。那么对于相应布局呢?刻度线之间的间距会随着尺寸变化而缩放。所以,还需要在滑块上设置最大宽度,同样设定最小的间距。一旦确定间距约束,就可以设置周围的组件。

  5.2 显示刻度标记和当前值

  假设大量的刻度线显示在离轨道非常近的未知,用户一旦用户,滑动按钮就会出现遮挡的情况。这个时候可以采用垂直的分隔线来指示滑块的值与位置之间的联系。

  

  5.3 滑块范围比例的设定

  滑块的定位是一回事,但选择一个尺度来准确的反应所选择的范围是另外一回事。就好比服装店有数百件商品,价格从50美元到15000美元不等,你怎么设计你对滑块范围比例?在轨道中间设置多少值?

  默认情况下,我们假设一个合适的滑块范围比例应该是线性的,将整个范围分解成一组等距的线段。不过像上面的例子,轨道中间设置7500美元,但是这将是非常无效的,因为50%的轨道被用来控制1%的产品。换句话说大部分将代表过滤中没有变化,小部分代表过滤中的巨大变化。实际产品中出现的情况很多。当发生这种情况时,用户将会面临很大的压力。

  

  好的解决案例:使用预先定义的预设,用户可以跳转

  

  例子2:带有直方图的线性价格滑块可提供更多信息

  

  这种方法不仅可以帮助用户导航滑块上的范围,也可以减少死胡同(令人沮丧的无结果页)。

  5.4 消除零结果过滤

  避免零结果页面的策略:

  例子1:根据内容分布来定义刻度值。将整个范围分成几个部分,每个部分都有相同数目的结果。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕