交互模型的构建方法

交互建模用来对应用当中的交互模式进行定义,它同时还诠释了这些交互模式是以怎样的方式被整合成为具有高度一致性的、容易被用户理解的交互模型的。我们曾经在第二章里对iOS交互环境的概念模型和空间模型进行了解析。其中,交互空间及其三个组成层面的概念共同构成了iOS中的基础交互模型 (见图 6-1)。这个例子充分地体现出了交互建模的设计思想所具有的强大力量。

交互模型的构建方法

图6-1  iOS空间模型及它的三个层面

在构建交互模型的工作中,要尽量保持一种抽象化的思维方式。我们需要在不触及具体功能和内容的前提下,对产品有可能涉及到的交互行为进行思考,了解它们是怎样被用于控制界面交互对象的。在这方面,iOS为我们提供了大量的候选方案。诸如缩放、拖移、滑动、轻扫、滚动等基本手势都可以被赋予很多有意思的功能;无论是各自为战,还是协同配合,这些操作行为通常可以帮助我们创建出具有差异化的交互方式。

你可以对各种模式进行自由的尝试,并思考它们能够以怎样的方式帮助你解决在设计方案当中遇到的问题。除此之外,能否使设计方案具有足够的弹性及扩展性,并且能够被用户很好地理解,这同样是需要我们思考和解决的问题。

我们来做一组小练习。首先,想象出一个简单的用户界面,譬如一个列表视图。列表是一种最常见的用户界面对象,它具有很广泛的用途。传统意义上的列表通常由多个文本对象在纵向上排列而成。

交互模型的构建方法

图6-2  一个典型的列表

从抽象的层面来说,列表到底是什么呢?列表的基本概念,就是一个由若干可选择对象所组成的队列。进一步思考,你还会发现,其实列表项并非一定要以纵向的方式进行排列,而且每一行也未必只能包含一个列表项。所以我们可以问问自己,对于在实际设计方案当中需要解决的具体问题来说,是否有更好的列表形式可以胜任?关于这个问题的答案通常不是显而易见的,我们需要思考并尝试一些不同的方案,看看它们能否带来有一些意思的变化。如果典型的单列纵向列表无法满足我们的需求,那么横向的方案又如何呢?(见图 6-3)

交互模型的构建方法

图6-3  横向列表

看上去很有趣,不过也许你已经注意到了,在这种模式里,屏幕可视区域当中的列表项数量是非常有限的,特别是在竖屏状态下。如果不考虑任何上下文环境,那么这也算不上是很大的问题;但在实际使用当中,如果没办法一次看到很多列表项,那么要对整个列表进行快速浏览的话,用户必须频繁的执行滚屏操作。很显然,这种方式在效率方面存在很大问题。在横屏状态下,情况会相对好些,但仍然不是很理想。

让我们继续扩展思路,看看是否还有其他更加合理的差异化解决方案。如果说单列形式的列表无法令人满意,那么如果我们将其中的每一行扩展为一个队列,使整个列表变成网格形式,情况又会如何呢?(见图 6-4)

交互模型的构建方法

图6-4  网格状的列表模式

事情开始变得有趣了。在这种模式下,我们可以同时看到更多的列表项,相比于传统的单列纵向列表,这确实是一个不错的改进。但它所带来的弊端也是很明显的,那就是每个列表项的实际尺寸都变小了,这给其中的文本对象造成了很大的局限。不过我们还是可以通过控制文本对象的字号来从一定程度上解决这个问题。

在这组小练习当中,我们仅仅对一个简单的列表进行了差异化的思考与扩展性的尝试,就几乎已经彻底改变了这个对象的基本概念及呈现方式。而实际上,对于这个列表来说,我们能做的还远不止这些。接下来,让我们换一个角度,对涉及到列表对象的交互行为进行探索。在iOS当中,我们可以通过上下滚屏来浏览一个典型的单列纵向列表,那么这种方式同样适用于网格状的列表吗?(见图 6-5)

交互模型的构建方法

图6-5  纵向滚屏的浏览方式应用在两种列表方案中

完全没问题。不过必须记得,滚屏浏览的方式虽然适合于我们当前的这个特定的案例,但它未必在所有的情况下都适用。要在某种新的界面对象模型当中使用现有的交互方式,你必须做好充分的评估工作。

回到这个例子当中。接下来让我们对这个网格形式的列表进行一些抽象化的分析。标准的iOS单列纵向列表对象通常是支持滚动操作的,而且滚动的方向仅限于y轴上,因为列表项都是纵向排列在同一列当中的。那么对于拥有两个维度的网格状列表来说,滚动的方式能否得到相应的扩展呢?

交互模型的构建方法

图6-6  多维滚动与行内滚动

如图所示,我们可以通过多种方式将滚动行为运用到网格状的列表当中(见图 6-6)。通过这一系列的实例,我们可以看出,基于已有的对象模型及交互方式来构建新的概念其实并不是非常困难的事情。列表的例子只是一个起点,你还可以对很多模型和元素进行差异化的改造。这种设计思路可以帮助我们在产品当中打造各种丰富的交互方式。

我们已经大致了解了应该怎样从现有的基本概念出发,来定义全新的交互对象。不过在实际项目当中,我们有可能会在这方面遇到一些潜在的问题,这些问题甚至会导致设计开发工作进入死胡同。在你的设计方案当中,一些高度定制化的交互模型也许很难被准确地实现出来,而另一方面,你也有可能发现它们无法很好地被用在产品的其他地方。面对这些情况,你必须掌握一些最基本的解决方法,才能让自己摆脱困境。

 

来自《iOS Wow Factor》全书译文精选

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/1635/

(0)
Smiler李想Smiler李想
上一篇 2014-12-01 12:02
下一篇 2014-12-01 12:23

相关推荐

  • 社区O2O与传统社区平台的对比

    社区O2O是一个需要长时间探索的行业,主要是因为社区是一个复杂的地方,看似商机很大但真正建立一个粘度很高的平台并不那么容易,但平台无论从何点切入,其社区的复杂性决定了在平台搭建时不得不去思考以下四点,分别是场景、内容、载体和融合,本次和大家探讨的是生活场景的打造和载体的介入。

    2017-05-21
  • 交互设计如何备考?二战学姐带你领略考研那些事

    姜嘉琪本科南京大学,信息管理与信息系统专业清华大学美术学院公布拟录取名单一周之后,心里那种不真实感终于平复下来。这是我第二年参加考试,至此也算是最好的结果了。为什么考研我本科的专业其实也算是个“交叉学科”,范围广必然深度不足,所以我一度非常迷茫,不知道未来究竟想做什么。后来上了一门《人机交互》的选修课,第一次了解到设计上的微妙差别给使用者带来的不同体验,经过反复思考,我觉得产品交互设计这个领域可以算是我个人兴趣、能力、期望最佳的结合点,...

    2018-04-20
  • Axure工具简介

    工具简介主要介绍axure的基本元件使用,熟悉该软件的各个功能区。1.添加元件到画布在打开axure软件之后,添加元件到画布,在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置后松开鼠标,如下图所示:2. 添加元件名称在检视面板的元件名称文本框输入元件的自定义名称,这样方便后面制作原型的过程中,设置元件属性等时便于查找元件,如下图所示:3.设置元件位置/尺寸元件的尺寸与位置可以通过鼠标拖拽,也可以在快捷功能或元件样式中...

    2018-03-18
  • 浅谈WEB页面三种程度的提示弹窗

    在设计WEB页面时,经常会使用到弹窗提示,根据提示的深度层次,大致可分为三种,接下来介绍一下三种程度的弹窗样式与进阶样式。

    2017-05-29
  • 关于假设和极致

    作者:杨蓉(资深用研专家,现任极客网运营总监)   假设的意义 今天看到一本质性研究的书,在讨论定量定性的研究方法的时候,会说定性通常被质疑的是“不够客观”,所以作者开始一大篇幅,在讨论“客观性”是什么,就…

    交互专题 2017-08-07
  • 全新的交互体验 | 三星Bixby中文版首发体验视频

    在三星盖乐世 S8 | S8+发布之时,三星还发布了全新语音助手“Bixby”,但中文适配需要时间所以让国内的星粉久等了!为了可以让国内小伙伴快速上手,饼饼特地做了 Bixby中文版体验视频,快速了解 Bixby来这里看就对了!三星Bixby不同于一般的语音助手,在满足一般功能操作的同时还可以进行更深度操作,比如发微博、微信发红包、打开相机自动拍照以及导航等;有关更多Bixby的深度功能,我们期待与大家共同挖掘!点击下方“阅读原文”,了...

    2018-01-30
  • 交互实战|Design sprint methods 在To B产品中的应用

    在湾区很火的设计冲刺,真的能有效快速解决项目中棘手问题吗?我们在实际工作中开始了首次尝试与应用。让我们一起来体验一下Design sprint methods的设计过程吧~

    2017-04-30
  • 《王者荣耀》的操作交互设计研究

    《王者荣耀》是国内最成功的手机版MOBA类型游戏。MOBA从PC的辉煌延续到了手游,当时很多人唱衰手机上的MOBA,主要还是操作上的问题,手机上无法实现鼠标的快速精确定位。为了优化手机版MOBA,大家进行了各种尝试,有触摸点击型(虚荣),有双摇杆型、单摇杆型,最终单摇杆+技能副摇杆结合的《王者荣耀》一统江湖,现在很少有人说王者手感不好的,它的很多设定都成了现在MOBA游戏的标杆。这里,我们就一步步地分解看看,王者的操作手感是如何设计的。...

    2018-02-26
  • 在新用户引导流程中,如何用好空状态界面?

    今天的文章,我们将会提供一些使用空状态来优化新用户引导的策略和技巧。

    2017-05-01
  • 做你老婆,用户体验真差

    洞见(DJ00123987)——不一样的新闻,不一样的故事,数百万人订阅的微信大号。点击标题下蓝字“洞见”免费关注,我们将为您提供有价值、有意思的延伸阅读。作者:青蓝来源:青蓝(ID: qinglansz)没错,这是一篇真诚的吐槽贴。鉴于各位直男的脑回路和女人差异较大,常常不能正确理解老婆大人的本意,今天我特意以你们最爱的电子产品——手机为例,给你们分析一下老婆们的用户体验。01. 外观差评,后盖鼓起,前屏磨花,说好的金属漆还掉了色。小...

    2018-03-25