互联网产品动态语义交互设计及设计结果验证

张子涵

(东北林业大学，黑龙江 哈尔滨 150040)

相比于传统的语义符号，动态语义元素本身具有更加自然的动感效果，可以使用户在操作产品时获得更加良好的交互体验。基于动态语义理论的互联网产品设计，有助于设计出更加符合用户行为习惯、进一步优化用户操作体验的产品，显著降低用户的操作成本，在竞争日益激烈、更新换代频繁的互联网产品市场中，有助于提高产品的竞争力。基于此，探究将动态语义技术应用到互联网产品设计中的可行性方法，并且对设计结果进行可靠性验证，成为现阶段互联网产品开发设计中关注的焦点。

1 基于动态语义的产品交互设计

1.1 测试插件及测试平台的需求设计

在开始动态语义交互设计前，必须要全面了解该产品的用户需求场景。在此基础上，逐项列出每个需求场景中的操作步骤，并根据操作步骤的指示意图匹配可用的动态语义符号。除了简化设计流程外，后期该产品投入使用后也能带给用户良好的使用体验。在用户测试产品中，主要分析了3 种需求，即核心需求、激励需求、其他需求；在用户测试平台中，主要分析了4 种需求，分别是统计分析、用例管理、任务管理和任务发布，具体内容如表1 所示。

表1 测试插件及测试平台的需求分析

以用户测试平台设计为例，这里的用户主要是指产品线质量工程师，他们的需求分析如下：(1)统计分析。收集产品线相关的数据，并且以可视化图形的方式呈现，方便用户对产品功能测试效果进行分析。(2)用例管理。用户通过调用Case 功能，对用例执行增加、删除、修改、查看、录入、导出等一系列操作。用例管理主要是通过按钮操作完成，可执行的动态语义符号包括单击、长按等。(3)任务管理。用户可实时查看任务进程、执行情况，并且可终止正在进行的任务。根据反馈信息查看任务执行效果，判断被测试的功能是否达到了产品设计的预期。(4)任务发布。用户在建立任务后，可手动发布或者设定时间自动发布任务。

1.2 对“参与测试”功能的交互设计

以用户测试插件中的“参与测试”为例，对该功能的交互设计流程及技术要点展开分析。交互设计共分为两个核心步骤，即进入任务执行和执行用例。

1.2.1 进入任务执行

点击插件图标后，进入到功能面板页。页面内容包括“个人主页”、“排行榜”、“任务推荐”、“参与测试”4 个模块。点击“参与测试”后，弹出任务执行方式，有“单步执行”、“整体执行”两种，选择整体执行后进入到执行面板页。交互界面如图1 所示。

图1 进入任务执行/获得任务交互图

1.2.2 执行用例

在用例执行期间，用户可随时点击“PASS”按钮或“FALL”按钮，查看执行实际结果与预期结果。如果两者之间差异明显，说明当前设计方案存在缺陷，需要根据反馈信息重新优化设计。在用例执行期间，如果该用例包含多个执行步骤，可通过左滑切换至上一步骤，或右滑进入到下一步骤。另外，在用例执行期间，如果两个及以上的用例之间存在相互关系，(例如需要执行某一用例才能继续开始下一用例)，这种情况下可以将暂时不需要执行的用例“隐藏”起来。当需要执行时，在通过隐藏执行面板解除隐藏，这样既保证了界面简洁，同时又不影响正常执行用例。当然，如果多个用例之间并不存在关联，则可以选择直接跳过不需要执行的用例。当所有用例执行完毕后，点击“退出测试”即可回到主界面。用例的跳过和退出交互设计界面如图2 所示。

图2 跳过用例与退出执行交互图

2 互联网产品动态语义的交互设计

2.1 人机交互开发设计

以插件形式存在的客户端，可以看作是独立于手机应用的第三方模块。为了使插件和应用内容可以在手机屏幕上同时显示，同时又互不干扰，因此在设计时要保证插件界面小而透明，并且支持用户自定义移动。其中，图标是插件的入口，采用悬浮式设计，用户可任意改变图标的位置。除了图标外，为了优化人机交互体验，还需要在插件内部设计功能面板页、注册登录弹窗、任务推荐弹窗等内容，满足用户的操作需要。由于界面风格比较相似，因此在设计时可以抽象出共同的基类，并使用面向对象的编程方法，将各种界面的共同点封装成统一的类，简化设计流程。程序开发基于Android平台，视图元素(如动画、颜色等)由XML 定义，逻辑代码用Java 编写。模块结构如图3 所示。

图3 模块结构及关联关系

根据操作方式的不同，事件模块包括了点击事件、滑动事件两种类型。其中点击事件由系统定义，又可分为点击、长按；而滑动事件支持用户自定义，通过跟踪滑动方向、滑动长度、滑动线形等进行识别。界面模块主要涵盖了系统界面、自定义界面两种类型。系统提供的界面布局比较单一，只能满足基本的系统操作要求。而自定义界面则方便用户根据使用需求进行界面的灵活布局，包括添加按钮等界面元素，或更改弹窗的形式、尺寸等。业务模块提供了网络连接、数据传输和存储等功能。该模块并不直接对用户开放，用户需要从界面处获取信息、执行操作。然后操作指令到达业务模块后作出响应，实现人机交互。工具模块是整个系统中的底层结构，其作用是为系统中其他模块提供基本服务，如判断用户是否具备操作权限、判断本地网络连接是否正常等。

2.2 视觉设计

视觉设计除了要达到美化页面的效果，在优化用户的产品使用体验等方面也有积极影响。基于视觉设计规范的界面交互设计主要包含三项内容：

2.2.1 插件显示设计。显示字体提供18px、36px 等5 种字号，支持根据场景、任务的不同灵活选择合适大小的字体。在实际操作中用于显示功能按钮的文字，使用较大的36px 字号，保证功能按钮更加醒目，并且有助于防止用户误操作；而详细描述任务的文字，使用较小的18px，节约界面空间。另外还提供了6 种不同颜色的字体，分别适用于标题、正文，或者功能按钮等。视觉设计中的插件字体设计规范如图4 所示。

图4 插件字体设计图示

2.2.2 布局设计。本次设计产品以插件形式存在于被测应用中，因此在布局设计时要遵循以下两点基本要求：第一是插件不能覆盖应用，插件与应用的操作要相互独立；第二是插件要有一定的透明度，当插件悬浮与应用之上时，不能对应用内容造成遮挡、覆盖。插件图标透明度设计为80%，底色为#ffffff，主色为#d1d1d1。可支持在手机屏幕左侧或右侧停靠。打开插件后，功能面板的底色为#2e85b7，设计透明度为90%；功能按钮的底色为#ffffff，设计透明度为30%。面板为手机屏幕剧中展示，与手机屏幕边缘距离均为20px。

2.2.3 控件设计。插件的主要控件有3 种，分别是按钮、符号、弹层。其中，按钮又可分为登录与退出按钮、结果反馈按钮、隐藏操作按钮等。以登录按钮为例，文字采用36px，未选中状态下透明度为80%，选中状态下透明度为50%。符号又可分为进度条、加载条等。以进度条为例，数字采用36px，颜色为2e85b7，弹层主要是隐藏操作弹层。

3 动态语义交互设计结果验证

3.1 构建交互设计方案的层次结构

基于交互设计方案构建层次结构，是进行设计方案一致性检验和模糊评价的必要前提。划分为3 个层次，分别是目标层、准则层和措施层，整个层次结构如图5 所示。

图5 交互设计方案的层次结构

3.2 交互设计方案的评价

本文选择模糊评价方法，对交互设计结果的可靠性进行验证。但是在模糊评价之前，需要开展一致性检验，以确保各元素的重要度具有协调性，防止出现A 比B 重要，B 比C 重要，而C 又比A 重要的矛盾情况。选择上文图5 中的准则层进行一致性验证，验证方法采用1-9 标度法(见表2)。

表2 1-9 标度法

参照1-9 标度表，建立不同层级之间各个因素相较于上一层级的判断矩阵。以图5 中的A 目标层和B 准则层为例，B 对A 的判断矩阵如表3 所示。

表3 B-A 判断矩阵

在设计方案的一致性检验中，如果判断矩阵中出现B1重要程度超过B2，B2 重要程度超过B3，而B3 重要程度又超过B1 的矛盾情况，则说明该设计方案是无效的。结合表3数据可知，该判断矩阵未出现此类矛盾，并且验证结果表明判断矩阵的一致性比率均低于0.1，满足一致性要求，在此基础上开始模糊评价。具体方法为：挑选11 名互联网产品设计领域的专家，分别对动态语义指导下的交互设计方案进行模糊评价。评价对象为上文图5 中的措施层，评价分为“优、良、中、差”4 种。评价结束后，得到评语集{优，良，中，差}。实际评价结果为：

C1：8 人为优，3 人为良；

C2：7 人为优，3 人为良，1 人为中；

C3：4 人为优，4 人为良，3 人为中。

根据专家评分结果构建评价决策矩阵(R)：

然后引入权重系数(A)，与评价决策矩阵进行合成预算得到最终的模糊评价结果(B)：

综合一致性检验结果与模糊评价结果，本次基于动态语义的互联网产品交互设计方案有效并可靠，评价结果无差评，总体优秀。

4 结论

互联网时代，基于智能手机的产品开发周期进一步缩短，互联网产品的竞争更加激烈。虽然产品迭代速度较快，但是并非所有新产品都能够被用户所接受。在产品开发设计中，运用动态语义交互设计可以显著提升产品操作体验，并且降低了用户对新产品操作的学习成本。因此这类互联网产品更容易获得用户的青睐，也更容易取得市场竞争优势。基于动态语义理论开展互联网产品交互设计时，应重点做好用户测试插件、用户测试平台的需求分析，在了解需求的前提下进一步开发产品的功能。对设计方案还要进行模糊评价，判断最终设计结果的有效性、可靠性是否达到预期。如果未能达到理想预期，还需要根据反馈信息、评价结果不断优化设计，直到得到满意的最终设计方案。