iOS和Android规范解析——滑动器

沐风的设计铺  ·  2018-11-13 18:43:04

iOS和Android规范解析——滑动器

  今天的主角是“滑动器”,这个名字可能有点生涩,它的英文名或许会更熟悉点——“slider”。滑动器这个控件应用的机会不多,主要适用于滑动设置数值的情况。下面来详细介绍。

  Material Design Guidelines

  在MD(Material Design)中,滑动器分成了两种:连续性滑动器和分离式滑动器,从名字也能看出它们的区别了:前者是数值是连续的情况;后者是分离的,也就是滑一下,只能选择特定的数值。

  连续式滑动器

  左:图标在左边的情况;右:图标在左右都有的情况

  如上图所示,连续式滑动器可以有两种布局:图标在左 & 图标在左在右都有。当按住滑动器的按钮的时候,按钮的状态会发生变化以表示“按住”的状态,如上图右边第三个(focus)所示。

  另外,MD中有一种比较特殊的滑动器:滑动器的最右端展示数值,并且数值可以更改,如下图所示:

  滑动按钮的时候,数值跟着改变;点击数值可以进行修改。该种滑动器适用于需要设置具体数字的场景。

  分离式滑动器

  分离式滑动器示例

  分离式滑动器,是在滑动器的滑杆上预设了固定的数值,用户左右滑动的时候,只可以选择这些预设的数值。上图第一行展示的是默认状态,第二行展示的是按住按钮时的状态,此时在滑动器上方展示了具体的数值。需要注意的是,当用户从一个数值变到了另一个数值,页面需要展现出可以察觉的变化(要不就白调了,摊手)。

  iOS Human Interface Guidelines

  iOS规范中定义说:滑动器只有水平的。通常包含一个滑动按钮,用于滑动进度;最左和最右是用于表示最小值和最大值。

  滑动器示例

  苹果建议,可以更改滑动器的外观,来提升界面的美感:进度条的颜色,滑动按钮的外观,左右图标这些都可以进行更改。

  另外,笔者也有一个建议:滑动器在音乐、视频等有播放功能的APP使用比较多,在这类应用中,往往可以加入一些实用功能或情感化元素,丰富用户的体验。比如Youtube,在滑动的时候,会用小框展示滑动当前帧的画面,方便用户预览:

  在Youtube中拖动滑动器的按钮,展示画面预览(这个广告是youtube日本站上的iPhone 7 Plus广告,展现的是一对日本情侣在上海旅游时,用iPhone拍照的情景。不得不说在日本站上看到这个广告,还是有些自豪的,嘻嘻)

  以上介绍了iOS和MD中对于滑动器的介绍。讨论使我们认识更加深刻,欢迎留言讨论。

分享 :
上一篇下一篇
推荐阅读

参与评论

登录 后参与评论

文章评论(0)