马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > 交互设计 > 基于滑动维度的交互设计变化

基于滑动维度的交互设计变化

时间:2014-07-02   文章来源:马海祥博客   访问次数:

在iOS交互模型的最底层,有一个“空间”的概念,而空间最基本的属性就是三个维度。滑动依存于屏幕的这个二维环境,也可以从维度这个角度去思考。最常见的滑动例如ios里删除短信息的操作,这里的滑动是最基础的,可以理解成一维的、被赋予了唯一功能的操作。如果你认为滑动就是这么简单,那你可能是忽略了滑动可以为设计带来的千变万化了。

当滑动被赋予功能,并与界面(信息或控件)结合时,具有很强的可塑性,并可有效提升操作的易用性、高效性、有效性。

基于滑动维度的交互设计变化-马海祥博客

根据滑动的维度,可以分成一维滑动和二维滑动;同时结合滑动控制界面的方式,也可以分为连续和离散。下面,马海祥就通过一些实例来为大家具体解说一下。

一、一维滑动

对于一维滑动,我们又可以分为一维离散型滑动和一维连续型滑动来讲:

1、一维离散型滑动

比如:Mailbox在邮件列表对邮件进行操作时,就使用了一维离散型的滑动,如下图所示:

基于滑动维度的交互设计变化-马海祥博客

(1)、向右滑动邮件列表中的一个邮件条目,根据滑动距离的长短先后出现已读,删除操作,release后执行。

(2)、向左滑动邮件列表中的一个邮件条目,根据滑动距离的长短先后出现归为待办事项、分类归档操作,release后执行。

2、一维连续型滑动

比如:百度浏览器页面缩放的功能,采用了一维连续型滑动,如下图所示:

基于滑动维度的交互设计变化-马海祥博客

(1)、默认在界面底部的工具栏显示最常用操作。

(2)、在工具栏滑动时,工具栏变为页面缩放的控件。

(3)、通过滑动距离长短控制页面缩放大小(越右越大),同时上方页面以页面左上为缩放中心,实时反馈页面缩放效果。

(4)、release结束缩放操作,得到缩放后的页面。

二、二维滑动

当滑动被赋予的功能增加,或需要更复杂控制时,一维不能解决时,马海祥建议你可以升维成二维滑动。     

比如:ios默认视频播放器的视频进退控制,就是采用了二维滑动,如下图所示:

基于滑动维度的交互设计变化-马海祥博客

操作:按下滑块后沿竖直方向滑动,根据滑动距离切换速度,再横向滑动进退,release后视频进度生效。

效果:下图绿线为手实际滑动距离,紫线为视频进退幅度。不同速度下水平滑动同样距离,视频进退的幅度不同,高速进退幅度最大,慢速最小。

如果把视频播放器的滑动操作抽象,可形成其通过二维滑动变速控制视频进度的二维空间模型,如下图所示:竖直方向的滑动,通过离散的方式选择进退速度,水平方向的滑动,通过连续的方式控制视频进退的幅度。

基于滑动维度的交互设计变化-马海祥博客

类似的还有猛犸浏览器的页面变速滚动功能,如以下截图所示:

基于滑动维度的交互设计变化-马海祥博客

操作:在页面中纵向滑动时,页面以默认滑动速度滚动;如果先从屏幕右边缘横向滑动,便可选择不同滚动速度(越左速度越快),再纵向滑动以滚动页面。

效果:手向下滑动同样距离,速度快的页面滚动幅度大(下图绿线表示手实际滑动距离,紫线表示页面滚动幅度)

由此,马海祥也就可以判定滚动功能的二维空间模型如下:

基于滑动维度的交互设计变化-马海祥博客

以上两个二维滑动的例子都是通过在一个维度改变速度去影响另一个维度对幅度的控制。

Snapseed的二维滑动操作更加简单易用,在界面任意位置竖直滑动固定距离切换功能,水平滑动控制具体功能的参数大小,不过也要注意一下防呆的设计(具体可查看马海祥博客的《基于交互体验的防呆设计应用与策略》相关介绍)。

基于滑动维度的交互设计变化-马海祥博客

如果把snapseed的滑动操作抽象,可形成其通过二维滑动实现功能切换和参数调节的二维空间模型:

基于滑动维度的交互设计变化-马海祥博客

由此,马海祥再引申一下,当两个维度都可以自由滑动时,滑动可变为拖动。这时为拖动赋予功能,去判断这个功能的标准,除了上文提到的滑动距离,还可以是手或被拖动物体到达或离开的区域。例如Launcher中,按下apps后进入二级界面,手滑动到对应区域release激活操作,如下图所示:

基于滑动维度的交互设计变化-马海祥博客

三、滑动设计的优势

滑动手势可以说诠释了“模糊的精确”的设计思想,有效提升了操作的可用性:

1、易于学习并形成习惯用法。

2、在移动环境下使用,适合单手操作,高效易控。

3、通过直接操作的对象或需要时出现,代替工具栏、菜单等常用控件,节省界面空间,为信息让路。

4、易成为产品的杀手级功能和传播点。

四、滑动的切入点思考

当滑动被赋予功能,并与界面(信息或控件)结合时,可以有较强的可塑性,可从以下方面为切入点,结合产品功能进行思考:

1、赋予简单功能的滑动可以是一维的;需要增加功能类别或者强度时,可以升维,形成二维滑动或者拖动。

2、为滑动赋予功能时,去判断这个功能类别或强度的标准可以是滑动的直线距离。

3、为拖动赋予功能时,标准可以是手或被拖动物体到达或离开的区域。

4、借用人机交互学当中的对控制器的定义,滑动可以通过连续或者离散的两种方式去控制界面。

五、设计滑动时的注意事项

不过,在设计滑动时我们还要考虑以下几点事项:

1、滑动不是目的而是手段,先功能后交互。

2、按照交互设计从大到小的指导思想,为维度赋予功能前,先梳理功能架构和优先级,把最常用功能置前或者设置为默认生效(对于交互设计的初学者可以看下马海祥博客的《交互设计师必须知道的五大交互设计流程》相关介绍)。如:maibox中最易触发的向右滑动的第一级,被赋予了最常用的已读功能。

3、在分析具体的动态交互效果时,可以参照Design interactions中对鼠标拖动操作的分析表格(如下图),创建滑动的表格帮助理清思路(X轴可为滑动的状态细分,y轴可为滑动过程中涉及的界面元素和控件)。

基于滑动维度的交互设计变化-马海祥博客

4、有些复杂滑动操作有一定学习成本,可作为快捷方式,同时还需要具备通过常规点击也可实现的操作方式。

马海祥博客点评:

内容滑块是导航的一种型式,可用于显示各种信息,如各种图片,热门新闻,社会信息和产品特点,有些具有自动幻灯片的功能,并有按钮滚动左右或上下的内容,其中最具特色的过渡效果是幻灯片。

所以,我们也可以试着将滑块这一设计理念运用到我们的网站和博客上,以便快速吸引游客的视觉,形成视觉的中心。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/jhsj/659.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 交互设计   滑动维度   设计变化  

上一篇:基于交互体验的防呆设计应用与策略
下一篇:交互式视频设计的分类和实现工具

您可能还会对以下这些文章感兴趣!

  • 初次做交互设计的大致步骤有哪些?

    交互式设计师需要参与方案的实现,以确保方案实现是严格忠于原来的设计的,同时,也要准备进行必要的方案修改,以确保修改不伤害原有设计的完整概念,那么,对于初次做交互设计的朋友来说,交互设计过程中的步骤有哪些呢?交互设计的初衷就是解决用户的问题,不论设计什……【查看全文

    阅读:316关键词: 交互设计   日期:2017-01-25
  • 如何利用动效设计吸引访客的注意力

    动效设计是最夺人眼球的设计方式之一,正确的使用会在与用户的对话中起到很好的引导,不过也正因为它的强势,所以一定要梳理好设计目标,不要让其变为干扰,毕竟用户的注意力和时间都变得越来越少,我们要做的是更合理的利用动效来传达我们的信息,但动效也不是越绚丽越……【查看全文

    阅读:727关键词: 动效设计   日期:2016-05-28
  • 交互设计师该如何做好交互设计

    前不久和一些朋友们聊天,觉得开发、PD和UED是一个很有趣的怪圈,通常而言:开发看不起PD,因为PD除了有想法,写点文档,看起来啥都不会,而通常开发们自己就很有想法;PD看不起UED,因为他们通常会觉得UED太事儿了,事儿太多,考虑得太细,他们根本就不明白这个东西对公司到……【查看全文

    阅读:1046关键词: 设计师   交互设计   日期:2016-02-21
  • 交互式视频设计的分类和实现工具

    交互式视频是指通过各种技术手段将交互体验融入到线性的视频的新型视频。它风靡起源于2005年,随着当时宽带接入速度的提升和多媒体播放技术的成熟,交互式视频越来越多,最初主要是由广告商赞助的广告视频,借用各种新奇的交互方式来吸引人们点击观看,增加产品的曝光度……【查看全文

    阅读:2138关键词: 交互式视频   交互设计   视频设计   实现工具   日期:2014-07-13
  • 基于滑动维度的交互设计变化

    最常见的滑动如ios里删除短信息的操作,这里的滑动是最基础的,可以理解成一维的、被赋予唯一功能的操作。如果你认为滑动就是这么简单,那可能忽略了滑动可以为设计带来的千变万化。当滑动被赋予功能,并与界面(信息或控件)结合时,具有很强的可塑性,并可有效提升操……【查看全文

    阅读:580关键词: 滑动维度   交互设计   设计变化   日期:2014-07-02
  • 交互设计的七大定律

    交互设计是一种目标导向设计,所有的工作内容都是在围绕着用户行为去设计的,交互设计师通过设计用户的行为,让用户更方便更有效率的去完成产品业务目标,获得愉快的用户体验,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,……【查看全文

    阅读:1271关键词: 交互设计   日期:2015-08-10
  • 基于用户体验的移动端交互动效设计

    在网页设计领域,有不少设计师对前端技术已经有了一定的了解。但是在移动设计领域,学习界面和交互效果如何用代码实现还没有受到设计师们的广泛重视。但我们认为这是很重要的一步,如果你了解了技术实现层面的知识,很多设计阻碍就会消除,创意更容易得到发挥也更容易在……【查看全文

    阅读:3373关键词: 用户体验   移动端   交互动效设计   交互设计   动效设计   日期:2014-05-16
  • 交互设计案例:产品结构化繁为简的设计理念

    化繁为简,从不是件简单事,如何既保证功能体验完整,又体现WP平台自身极简、轻量的特点,成了贯穿我们设计始终的思考。“真正的简洁不是删繁就简,而是在纷繁中建立秩序”,打造全功能版的云音乐WP端,无论是设计还是开发都经历了从混乱到有序的过程。……【查看全文

    阅读:4656关键词: 交互设计   交互设计案例   产品结构   化繁为简   设计理念   日期:2014-09-06
  • 如何将需求还原成情景变成可用性设计?

    可用性是交互式IT产品或系统的重要质量指标,主要用来表示产品对用户来说有效、易学、高效、好记、少错和令人满意的程度,即用户能否用产品完成他的任务,效率如何?主观感受怎样?实际上是从用户角度所看到的产品质量,是产品竞争力的核心。为了优化产品,提升用户体验……【查看全文

    阅读:789关键词: 可用性设计   情景设计   日期:2014-11-29
  • 交互设计的三大隐形机制:加载、刷新和缓存

    刷新、加载、缓存机制的设计,我不清楚是否应该归纳进交互设计师的职业范畴,但是作为一名用户体验设计师,这些点或多或少地影响着用户的使用体验,我们都应该给予足够多的重视。这些机制,独立来看都有现有模式可参考,但是交互设计师不应该把他们割裂地设计,不同机制……【查看全文

    阅读:4892关键词: 交互设计   加载机制   刷新机制   缓存机制   日期:2014-04-22
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

如何利用极客精神优化网站的网络组件和代码 一个完整的企业网站首页应该具备什么因素?