交互模型的构建方法

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

相关推荐

  • 大屏时代,如何做好电视端交互设计?

    在过去一年多的时间里,笔者有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。-硬件+远距离操控——基本交互-基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一 、遥控器输入当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥...

    2018-04-01
  • Material Design UI质感设计动画交互设计欣赏

    质感设计(Material Design),是谷歌推出的设计语言,可以在用户界面产生动画,并且动画都是仿照真实的物理世界所产生,而且这套设计语言是跨平台和设备的。简而言之,质感设计是一种简单的方法创建很快的应用程序…

    IxD案例 2015-11-16
  • 这是三种有趣的网页设计趋势,却被低估了

    今天要聊的三种设计趋势其实已经出现一阵子了,但是作为一种相对综合的设计手法,他们并没有引起广泛的关注。只需要使用现有的元素、色彩和排版手法,就可以实现这三种设计效果,但是它们不论是从美学特征上,还是从功能性上,都不输于其他的趋势。有兴趣么?不妨来看看吧。

    2017-05-06
  • 刘克成:历史的回顾——90年代黄帝陵整修经历和关键点 | 黄帝陵国家文化公园规划设计大师工作营

    📌 编辑 | 璇仔编者按:“黄帝陵国家文化公园规划设计大师工作营”由陕西文化产业投资控股(集团)有限公司、陕西省黄帝陵文化园区管理委员会、黄陵县人民政府和CBC建筑中心共同发起。邀请了中国最具有代表性的六位规划大师及其领衔的团队作为核心设计团队,通过共同驻地对黄帝陵国家文化公园的调研、研讨,分别提出对未来黄帝陵国家文化公园的规划设计理念及方案。2018年3月23日,西安建筑科技大学建筑学院教授刘克成将作为探班大师来到工作营现场,以“历史...

    2018-03-22
  • 用通俗的方式告诉你什么是交互设计

    文章底部可领取设计资源(软件、笔刷、视频教程等)↓↓↓通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了...

    2018-04-08
  • 读书:交互设计四策略

    1. 认知什么是简单的体验:用一句话把它写出来,包括我要设计什么,遵循哪几条设计规则,尽量使用最简单的术语。描述我希望用户拥有什么体验(用户使用场景、我的设计怎么满足)。2. 三种类型的用户:专家型用户:愿意探索产品或服务,并给你提建议;随意型用户:有兴趣使用更高级更复杂的产品,掌握重要功能的使用方法;主流用户:使用产品为了完成某项任务,掌握重要功能的使用方法;3. 关注用户的感情需求在设计过程中应该对用户的行为感兴趣,而不仅仅是自己的...

    2018-02-28
  • [交互留学]英国HCI方向交互设计院校推荐

    之前很多设计相关专业的小伙伴问马克君,是否能够申请HCI方向的交互设计专业,马克君给出的答案是肯定可以,但是你在准备时需要比申请IxD方向的交互要更偏重提升自己的计算机方向的能力。对于HCI和IxD两个交互方向…

    2017-08-02
  • 【交互设计留学】作品集是怎么样的?

      美国交互专业作品集侧重点是一个方向很多的专业,如果学生偏重界面、视觉、解决方案方向,那么作品集要注重调研,以及数据分析,数据展示、解决方案等内容。如果学生是侧重多媒体,交互装置方向,那么作品集要…

    交互设计 2016-05-08
  • 短期记忆与用户体验:为脑力的局限而设计

    人类大脑不适于抽象思考和记忆数据,但网站常常要求我们这么做。许多可用性指南都取决于认知局限。

    2017-04-27
  • 译文 | 微交互:设计优秀app的秘密

    好的产品往往做好了两点:功能和细节设计。功能吸引用户使用你的产品,细节设计将你的用户留下。优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往能够让用户在初次使用产品时就能够留下深刻的印象。作为一个交互设计师,在设计微交互方案的时候不仅要考虑视觉上的冲击力,还要想办法赋予其信息传递的功能。

    2017-05-26