交互模型的构建方法

交互建模用来对应用当中的交互模式进行定义,它同时还诠释了这些交互模式是以怎样的方式被整合成为具有高度一致性的、容易被用户理解的交互模型的。我们曾经在第二章里对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

相关推荐

  • 浅谈用户体验设计

    这是一本交互入门书(主要偏向Web端,涉及到一部分移动端),如果你感兴趣就看看下面的内容,觉得有用的话,也去看看原书的内容。 这本书看了其实很久了,笔记也是当时记得,不过最近正好看到好朋友@elainezhu 也出…

    2016-06-05
  • 推荐给设计师的UI/UX书籍和资源

    如果你想成为一名优秀的设计师,想要博览这个领域的书籍而又无从下手,或不知从哪里快速寻找正确有效的资源。那么,我这里整理了一份书单,根据各大专业博客的推荐书目或者业内关注度比较高的书籍中精选得出的。主…

    2016-08-25
  • 从Smartisan OS 3.1的产品设计谈:交互设计的核心是什么?

    老罗的Smartisan M1发布了,同时推出了Smartisan OS 3.1,作为友商的产品经理,对于手机和系统不做评价。不过Smartisan OS 3.1的几个功能设计还是给我留下了很深的印象,也借助分析Smartisan OS 3.1的几个产品设计…

    交互设计 2016-10-24
  • 读书会第二期:《用户体验要素》(下)

    接上文···框架层1界面设计界面设计要做的全部事情就是选择正确的界面元素。界面元素的种类繁多,书里列举了复选框、单选框、文本框、下拉菜单、多选菜单、按钮等一系列网站设计中常用的控件,在2001年的时候这些控件就已经出现了,至今仍在大量使用,但是作者写这本书的时候并没有预料到目前的互联网行业有多么繁荣,所以近些年出现的很多新控件都没在书里。目前ios平台和安卓平台都有完善的设计规范可供参考,网上也可以找到海量的控件模板,只要耐心积累,多观...

    2018-04-13
  • 接下来炎热的8月,这3个设计趋势会更加流行

    趋势大多是这样,兴衰随着时间的推移快速的变化。

    2017-06-05
  • 腾讯大神教你写出合格的产品交互文案

    做产品的时间越久,越发现文案的重要性;今天我们来聊聊交互文案。 文案最初是桌子的指代,后来演变成一种职业;现在说起文案一般指以文字表现创意策略。交互中当然会涉及文案,虽说在整个前端展示中并不算突出,但…

    2016-01-13
  • 关于Axure8.0中继器的使用1

    废话少说,请开始你的表演!!!1.拖入一个中继器,将中继器多余的行删除;2.在中继器中添加三列(可以直接双击编辑),分别命名:name、sex、age;3.双击拖入的中继器会跳转类似动态面板的“(中继器)(page2)”新页面;4.在(中继器)(page2)中再添加两个和已有矩形大小一直的矩形,分别命名:name、sex、age;关于中继器的准备工作完毕,因为中继器需要存放动态数据,所以需要在页面增加动态数据的输入入口。5.回到拖入中继...

    2018-03-10
  • 极简主义风格:要讲究四大设计要点

    极简风并不是简单的做减法,这也是极简设计最棘手的地方。想必设计师都明白“少即是多”这个概念,但是要怎么在实际设计中践行这种极简设计的理念呢?今天的文章,就帮你梳理一下基本的法则,帮你在设计之前就理顺思路。“完美的设计是可以实现的,也许你还可以向其中加入更多的东西,但如果想从中移除某些元素,就完全不可能了。”

    2017-05-11
  • iOS与安卓的交互特点

    1、物理硬件(detail返回到list) 电源、屏幕、返回、搜索 2、操作动作:(编辑删除、长按删除) android:长按-双击 ios:基本手势(滑动) 3、导航栏(detail返回到list、个人中心drawer) 跳转按钮、展示数据(…

    交互设计 2018-03-13
  • 交互设计师的60日计划之第三天

    此次分享的 [button type="info" text="交互设计师的60日计划" url="https://www.iamue.com/tag/interaction-designers-of-60-days" open_new_tab="false"] 来自 Killa.G 让我们一起跟着学习和并学会做自己的总结与…

    2015-08-20