web交互设计模型

article/2025/11/5 3:16:15

《信息架构中的常见模型》是整个“web交互设计方法”中的一部分:

本期的内容目的是分享和总结信息架构中一部分基本的交互模型。信息架构需要考虑内容和功能的建构,首先需要考虑怎样组织内容和功能的关系,也就是切 分内容,如何把一些动作和对象跟主题顺畅的结合起来;第二步就是考虑怎样引导用户通过界面达成他们的目标,也就是用”物理结构”把内容用页面/窗口/面板 等元素将信息表达出来,交互模型正是针对第二个步骤来说的,这些模式帮助我们在表达信息的时候能够有一些常用的思路和出发点。

1.  双面板展示(Two-panel Selector)

【形式】 把两个相邻的面板放在界面上,在第一个面板显示一组对象,用户可以从中任意选择,在第二个面板上显示选中对象的内容。

【优点】

这种模式由于两个面板相邻摆放,用户可以很快把他们的注意力换来换去,一会看着列表的整个结构(比如图中显示了哪些是最新的应用),一会查看一个对象的详细信息(这个应用是做什么的,有哪些内容等等)。与单个窗口相比,这种紧密地集成有几个突出的好处:

减少体力开支,两个面板距离很近,用户的眼睛不需要进行长距离的穿梭,可以通过用一次鼠标单击或按键来改变选择的项目,而不是首先要在窗口和屏幕之间选择;

减少了可视化的认知负担,当一个窗口弹出到最上面,或当一个页面的内容完全改变时,用户就得花额外的注意力到现在要看的东西上,如果窗口本身一直不变,用户就可以把注意力集中在一个较小的变化范围内;

它也减少了记忆负担,这里左侧的列表充当了“路标”的角色,因此用户完全明白自己当前是在哪个应用下。

【用法】

整体布局:把可以进行选择的列表放在上面或左边的面板上,显示详细内容的面板放在下面或右边,这样做利用了绝大多数用户的视线流动方向,根据用户从左到右的语言阅读习惯让用户方便找到自己需要得到的信息。

列表的布局:一般有四种布局方式:线性列表,通常是排序的;二维表格,可以排序,也可以让用户通过列或行的标题进行过滤;空间组织方式,如地图、图表以及类似桌面的区域,让用户可以按自己的需要放置对象。

操作:当用户单击列表中的一个对象时,在第二个面板中立即显示它的内容或详细信息。同时最好能支持键盘操作以改变选择的方式,如上下箭头键;

视觉:让已经选中的对象在视觉上突出显示,如给选中的列表对象换一种颜色和亮度。

【例子】

Qzone中的双面板应用,当从左侧列表选择出信息以后,右侧会显示该对象的详细内容,并且采用了主题类别的信息切分形式,如果从常用模式的基本应用模式来看,当用户选中左侧列表对象后,如果在视觉上能够对该对象进行突出显示,可能会更友好一些。

2.  画布加工具条(Canvas Plus Palette)

【形式】

用于图形编辑器上,把一个带图标的工具条放在空白画布旁边,用户单击调色板工具条上的按钮,在画布上创建对象。通常工具条用来创建对象,画布用来摆放对象。

【优点】

这个模式来自于人们的日常生活经验,画布、调色板,就是这样的样式,因此用户在使用时容易理解;同时画布加工具条也利用了可视化识别的好处,最常用 的图标(画笔、手型图标、放大镜等)在各种不同的应用系统中一次又一次的得到重用,而且每次都是同样的用法,减少了用户记忆和学习的成本。

【用法】

工具条本身应该是一个图标按钮或者看起来像按钮的网格,由于中文本身词汇的表达比较强,所以工具条里用图标加文字的形式会更容易理解。

工具条放在画布的左边或者上面,当工具比较多时,可以吧工具条的图标分成几个小组,比如用(card stack)模式的TAB来表示这些分组。

【例子】

QQ秀泡泡日志的编辑框正是一个画布加工具条的用户, 通过Icon加文字的形式组成了工具条,并用分割线将工具进行了分组。

3.  向导(Wizard)

【形式】

在界面上一步步引导用户按预定的顺序完成任务,把任务分成一系列步骤,在每个步骤里让用户集中处理一件事情。如,Qzone个人空间的注册页面:

【优点】

对于较长的任务,在设计用户界面时如何让用户明白操作的步骤,向导的优点正是让用户按照预先规划的路线图来组织这项任务,而不用了解整个任务的结构,用户要做就是按顺序执行每个步骤,相信他们如果遵循指示,就会成功完成。

【用法】

把组成任务的操作分成几个部分或几组操作,各个部分的次序排列可能必须是严格限制的,也可以是能够由用户选择的。

Qzone的的注册过程包括 选择风格样式、填写个人信息、补充资料和完成四步,用户必须依次填写,而不能先填写后面的步骤再回来写前面的;而对于一些在线支付类的流程,从产品挑选、 支付信息、支付地址、送货地址等步骤,它们的顺序并不重要,因为后面的选择并不依赖前面的选择,把相关的选择放在一起只是简化了人们填写表单的工作。

任务拆分后步骤的数量和粒度往往需要很好的权衡,如果只有两步,那会显得很傻,如果有十五步,就会显得乏味枯燥;但是每个步骤也需要保证不能太复杂,不然失去了向导的意义。

【页面表现】

1)多页面表现形式

从页面表现上来看,最简单的实现方式就是将每个步骤放在一个单独的页面上,用前进和后退按钮进行控制,但这种形式也有缺点,每个独立的界面不能显示 上下文,用户不知道前面和后面分别显示的是什么,因此这样的形式最好能够允许用户在进行过程中能够随时向前或者向后移动。因为如果不能让用户可以改变前面 的选项而必须重新开始那就会让人受不了。从这点来说,如果是多页面的向导,它的标准的配置应该是:

或者结合双面板选择模式:

2) 单一页面表现形式:

第一种 带标题的栏目:标题上有固定编号,因为一眼就可以看到所有的步骤,所以这个模式适合用在分支不多的任务上。

第二种 响应式允许或响应式展开:在用户完成前面一个步骤之后才把后面的步骤显示在页面上,如果向导的步骤不多,采用这样的方式会让页面更简洁一些。

总结:

以上三种常用的模式:双面板选择、画布加工具条以及向导是我们经常会在网页设计中见到的模式,平时的使用中我们已经在不知不觉中认识并习惯它们了, 通过这些基本的模式,在设计加以变形和创新就可以创造出更有趣和方便的交互方式。下面的例子是一个综合了以上三种交互模式的例子:

(网址:http://www.mrpicassohead.com/create.html )

显而易见的,这个工具运用了画布加工具条的模式,由两组工具条和一个画布组成。同时,这个网页工具还结合了双面板选择模式,通过TAB把工具条进行了分类,当单击“face”、“noses”、“lips”时,工具条一次变化,并显示这些对象:

并且在操作步骤的提示上,采用了向导模式的响应式展开:当用户第一次选择TAB中的类型是,会提示用户从工具条中选择合适的元素到画布当中,而当用户作出选择之后,则会显示下一个步骤的提示:


http://chatgpt.dhexx.cn/article/lnIuNihv.shtml

相关文章

交互设计文档示例_Web交互的重要性:提示和示例

网站创建涉及许多要素。 网站是与来自世界各地的用户进行交流的最佳媒介。 因此,至关重要的是,其设计方式应吸引用户并吸引其参与。 这是网站可以有效地覆盖其用户的时间。 设计师经常想知道使网站吸引人的秘密成分 。 设计和功能的结合是每个设计师都希…

计算机教改论文发在那家核心期刊,教改论文可以发表在哪些刊物上合适?

原标题:教改论文可以发表在哪些刊物上合适? 教师发表教改论文在考虑发表要求之余,都是希望自己的文章尽快见刊的,如果教师面临的是发表核心刊物的要求,那就做好一定的心理准备了,核心期刊没有容易发表的&am…

刊物论文级别

公开发表的论文分为六个级别是什么 ? (2014-04-18 15:35:20) 转载▼ 第一级-T类 特种刊物论文,指在《SCIENCE》和《NATURE》两本期刊上发表的论文。 第二级-A类:权威核心刊物论文,指被国际通用的SCIE、EI…

计算机专业发论文的等级有哪些,计算机专业发表职称论文多少字

计算机专业发表职称论文多少字?文章的字数关系着作者的发表费用多少,字数越多,作者的费用负担就要越重,所以,广大作者一定充分把握字数的要求,以免写得字数过多或是过短,这样都是不容易发表的,…

计算机论文刊物发表,计算机论文发表流程

一、计算机论文发表流程: 1、根据当地评审需求选定刊物,确定出刊时间及费用。 2、您将论文发给我们, 看看是否符合杂志社要求。 3、将定金40%付到支付宝担保交易,安排给杂志社审稿 4、审稿通过后您将收到杂志社出的用刊通知书。打…

Python散点图拟合

散点图拟合 import matplotlib.pyplot as plt import numpy as npx [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24] y np.array([5760, 3600, 1620, 1260, 1080, 900, 1080, 1800, 3060, 4680, 2880, 5040, 4140, 5580, 5040, 4…

用python绘制二维数据的散点图

用python绘制二维数据的散点图 一 绘制散点图脚本 import matplotlib.pyplot as plt #需要安装该 matplotlib库 import pandas as pd #需要安装pandas库#读入文件 file_path "data.txt"#存放二维数据的txt文件,换成自己的路径下 df pd.read_table(fil…

【matplotlib】散点图详解

目录 引用s 点的大小c 点的颜色 & cmap 配色方案marker 标号 & s 点的大小alpha 标号透明度linewidths 标号边缘的宽度edgecolors 标号边缘的颜色散点图大概长这样: 引用 调用方式:matplotlib.pyplot.scatter(x, y, s=None, c=None, marker=None, cmap=None, norm…

图文并茂的Python散点图教程

看完本教程,就可以应付大多数情况下的柱状图绘制了。 声明: 需要读者了解一点Python列表的知识教程借助于matplotlib库 散点图基础 必要的库 # 需导入要用到的库文件 import numpy as np # 数组相关的库 import matplotlib.pyplot as plt # 绘图库…

Python实现散点图和散点图矩阵的绘制

说明:代码运行环境为 Win10Python3jupyter notebook 散点图和趋势线的简单介绍: 散点图一般用于描述两个数量型变量之间的相关关系,而趋势线是显示相关性近似程度的一条直线。 绘制散点图的主要方法: 方法1:通过pa…

python绘制曲线、散点图

数据可视化matplotlib 1、折线图。 某商品进价49元,售价75元,现在商场新品上架搞促销活动,顾客每多买一件就给优惠1%,但是每人最多可以购买30件。对于商场而言,活动越火爆商品单价越低,但总收入和盈利越多。…

【Python】数据可视化-散点图绘制

Python在数据科学中拥有十分重要的地位,numpy, scipy, pandas, scikit-learn这些高效易用、接口统一的科学计算包使其在数据分析处理过程更加方便快捷,其强大的数据可视化工具也是重要组成部分。在Python中,使用的最多的数据可视化工具是matp…

python中的散点图还可以这么画

大家平时为了直观地显示数据的分布情况,在画散点图的时候,简单地把数据点用圆点标出来,像这样: 这样: 还有这样: 然而今天我想给大家展示的散点图,或许没有那么直观地反映数据的分布情况&#x…

【Python_绘图】折线图与散点图

接续博文 “【Python_绘图】折线图” CSDN 功能 数据:读取表格(可指定Sheet表……也可指定Sheet表中的特定列)绘图样式:多条折线图散点图 → 标记点折线图设置参数:设置轴标题、添加分界线等 代码 import matplotlib…

Matplotlib之散点图绘制

文章目录 1. 散点图简介2. 散点图的应用场景:3. 绘制散点图4. 回归分析 1. 散点图简介 散点图也叫 X-Y 图,它将所有的数据以点的形式展现在直角坐标系上,以显示变量之间的相互影响程度,点的位置由变量的数值决定。 通过观察散点…

Python数据可视化——散点图

PS: 翻了翻草稿箱, 发现居然存了一篇去年2月的文章。。。虽然naive,还是发出来吧。。。 本文记录了python中的数据可视化——散点图scatter, 令x作为数据(50个点,每个30维),我们仅可视化前两维…

Matplotlib 散点图 绘制详解

目录 基础点的大小点的颜色透明度颜色条多组散点 1 散点图 - 基础 代码 import matplotlib.pyplot as plt import numpy as np# 第一组散点 x np.array([1, 2, 3, 4, 5, 6, 7, 8]) y np.array([1, 4, 9, 16, 7, 11, 23, 18]) plt.scatter(x, y) # x 代表x轴 y 代表y轴…

python 绘制三维散点图(已实现)

import numpy as np # 用来处理数据 import matplotlib.pyplot as pltx np.array([1, 2, 4, 5, 6]) y np.array([2, 3, 4, 5, 6]) z np.array([1, 2, 4, 5, 6])ax plt.subplot(projection 3d) # 创建一个三维的绘图工程 ax.set_title(3d_image_show) # 设置本图名称 ax…

用python绘制散点图

在python中画散点图主要是用matplotlib模块中的scatter函数,先来看一下scatter函数的基本信息。 网址为:点击打开链接 可以看到scatter中有很多参数,经常使用的参数主要有以下几个: c: marker: 数据、代码和绘制的图如…

python绘图之散点图

python中matplotlib库入门(2)之绘制散点图 这里写目录标题 python中matplotlib库入门(2)之绘制散点图一.导入库二.设置文字三.设置坐标轴参数四.绘制点五.对点的继续处理1.自定义颜色2.颜色映射 补充1补充2补充3 一.导入库 impor…