CN111625226B - 一种基于原型的人机交互设计实现方法及*** - Google Patents

Abstract

本发明公开了一种基于原型的人机交互设计实现方法及***，涉及软件开发领域。该方法包括：在核心功能界面中绘制出全部视觉元素，通过预设的组合规则对全部视觉元素进行组合，根据组合结果和选择的原型模型生成原型；对原型的界面进行解析，识别原型包含的页面集合；根据预设的控件映射规则，将页面集合中的页面转换为Qss样式表文件和UI资源文件。本发明能够便于随时进行需求验证和设计验证，更准确的对开发***进行成本预估，使研发控制点前移，降低开发风险，并且使用软件转换工具依据原型***自动生成模型库，不断地创建、积累完善相应领域的模型库，能够方便后续新研型号的继承使用。

Description

一种基于原型的人机交互设计实现方法及***

技术领域

本发明涉及软件开发领域，尤其涉及一种基于原型的人机交互设计实现方法及***。

背景技术

目前，在航空航天领域，随着飞控、导航、通讯以及显式等***所需要承载的任务日益强大，数据之间的交互复杂且呈现多维性，其所包含的子***的功能以及各个子***之间的交互关系越来越复杂，从而对***及其所包含软硬件的要求也越来越高。而优良的人机交互界面设计能使人机***准确识别和应对需要在几秒内处理的强时效性事件，对于航空航天领域的***而言至关重要。

然而，传统的开发方法主要是基于文档，通常是上级总体部门下达任务书，编码人员开始搭建框架实现，经过与总体***部门的不断讨论，变换更迭需求，最终由美工设计人员对界面进行显示优化。整个设计过程直接进入编码阶段，经常出现需求定义不清晰，容易引起二义性，并且大量手写代码容易引入人为错误，以及需求设计错误往往在进行***联调时才能发现，特别是基于这种方法构建出的显控软件由于更改的复杂性，导致整个软件在使用过程中人机交互友好性不足，包括软件视觉效果差以及交互的逻辑复杂，功能分配不合理等，导致软件更改起来工程量巨大，延长了项目周期。

发明内容

本发明所要解决的技术问题是针对现有技术的不足，提供一种基于原型的人机交互设计实现方法及***。

本发明解决上述技术问题的技术方案如下：

一种基于原型的人机交互设计实现方法，包括：

根据开发需求选择软件的核心功能界面，从预设的模型库中选择原型模型；

在所述核心功能界面中绘制出全部视觉元素，通过预设的组合规则对全部所述视觉元素进行组合，根据组合结果和选择的原型模型生成原型；

对所述原型的界面进行解析，识别所述原型包含的页面集合；

根据预设的控件映射规则，将所述页面集合中的页面转换为Qss样式表文件和UI资源文件。

本发明解决上述技术问题的另一种技术方案如下：

一种基于原型的人机交互设计实现***，包括：原型工具和转换软件，其中：

所述原型工具用于根据开发需求选择软件的核心功能界面，从预设的模型库中选择原型模型；并用于在所述核心功能界面中绘制出全部视觉元素，通过预设的组合规则对全部所述视觉元素进行组合，根据组合结果和选择的原型模型生成原型；

所述转换软件用于对所述原型的界面进行解析，识别所述原型包含的页面集合；并用于根据预设的控件映射规则，将所述页面集合中的页面转换为Qss样式表文件和UI资源文件。

本发明的有益效果是：本发明通过预先开发相对于最终软件功能和设计简易的原型，能够在代码实现之前保证产品在符合用户基本要求基础上进行迭代和细化，通过使用转换软件对原型进行解析和转换，对于软件功能和交互界面的设计可以针对原型进行，因此便于随时进行需求验证和设计验证，更准确的对开发***进行成本预估，使研发控制点前移，降低开发风险，更改简便，并且在制作原型***的过程中，依据与开发人员之间协商的控件命名规则，元件之间的层级包含关系以及其它一些原型开发人员与编程人员之间针对具体项目的交互逻辑进行的约束条件不断地创建，积累完善相应领域的模型库，能够方便后续新研型号的继承使用，当模型积累到一定数量后，能够实现快速构建原型***，提升软件开发效率。

本发明附加的方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明实践了解到。

附图说明

图1为本发明人机交互设计实现方法的实施例提供的流程示意图；

图2为本发明人机交互设计实现方法的实施例提供的总体流程示意图；

图3为本发明人机交互设计实现***的实施例提供的结构框架图。

具体实施方式

以下结合附图对本发明的原理和特征进行描述，所举实施例只用于解释本发明，并非用于限定本发明的范围。

本发明基于原型工具和转换软件实现，本发明提出的原型法可以解决软件开发困境，行之有效且操作性强。其主要思想是在“工对需”或者“需对需”等项目需求分析阶段，在代码实现之前就先行开发出一个与需求尽可能匹配的低保真简约版原型，然后通过多方的需求分析沟通，团队的相关成员从不同的职能角度提出设计意见，保证产品在符合用户基本要求基础上进行迭代和细化，尽可能全面地表达出用户的真实需求，进而开发出一套高保真原型***，交付软件实现人员进行开发。

其中，交互设计阶段又称为行为设计阶段，是原型设计中最重要的一环，注重交互流程、交互方式、数据图形化等方面的设计，强调基于人的行为特征、认知特征，在综合考虑所要达到的某个预定目的或者完成某个任务时，用户与产品之间发生的一系列相互作用与回馈过程的基础上，对***或产品的设计，而最终用户是否顺利地达到目的或者完成任务，以及过程中的使用者体验，是判断交互行为设计优劣的重要标准。而视觉设计注重色彩与质感等要素的设计。

使用原型工具设计完原型后，通过转换软件将原型软件中的相关代码转化为最终实现软件的Qss、UI等代码文件和模型库文件，实现原型设计输出在软件开发中的直接应用，提升软件开发效率。

通过采用AxureRP等原型制作工具，进行界面显示和交互设计，生成Web端原型软件和相关代码；最终使用Qt样式表和编码实现原型软件功能。而目前Qss的生成主要依靠人工设计，通过与原型软件比对，进行界面切图、Qss样式设计等，过程繁琐，设计出的原型软件仅作为参考界面，相关Web端代码未能得到利用，目前设计和实现仍处于分离状态。

下面结合具体实施方式进行说明。

如图1所示，为本发明人机交互设计实现方法的实施例提供的流程示意图，该人机交互设计实现方法基于原型实现，包括：

S1，根据开发需求选择软件的核心功能界面，从预设的模型库中选择原型模型。

需要说明的是，还可以选择几个最重要、最具代表性的界面，以期利用快速、简明的方式建立一个最小化可用产品的原型，表达出产品想要的效果，然后通过迭代来完善细节。在后续的功能迭代过程中，可以持续添加非核心的功能界面原型。

例如，对于支付软件而言，其核心功能界面可以为支付界面，最重要、最具代表性的界面可以为登录界面和支付界面；对于打车软件而言，其核心功能界面、最重要、最具代表性的界面可以为叫车界面。

应理解，模型库是指一些经常用到并且变动很小的元件的组合，将***中特定的视觉效果以及交互逻辑封装在每一个模型中，主要解决的是在不同的工程中对模型的复用问题，

模型库的制作过程可以使用原型设计工具，同时可以结合PhotoShop或illustrator等专业视觉设计工具辅助完成，并且可以通过不断地进行迭代完善，继承和优化，形成一个专业领域的工具元件组合。这个组合中不仅有元件的视觉配置，还有这些元件的交互属性，设计人员可以在单个元件中任意地修改属性，通过原型设计工具支持的第三方元件库导入功能，可以快速地复用其他型号已有的模型，按照用户的需求快速的构建出一套新的原型***。同时原型设计工具兼容SVN等团队协作工具，可以进行协同开发。

例如，雷达显控软件的模型库为例，对于按钮类元件，可以包括：普通控制按钮、下拉菜单按钮、信息显示按钮等，对于工作状态元件，可以包括：维护、训练、作战、重演等，对于箭头类元件，可以包括：左箭头、右箭头等，对于显控台硬件环境元件，可以包括：主机、操作台面、显示器、电源、触摸球等。这些元件可以通过图形或者动态图形进行可视化显示，便于开发人员操作。

应理解，在原型的制作过程中，需要按照C++变量命名规则以及原型设计人员和编码开发人员共同约定好的规则进行控件功能以及视觉因素的制作，之后将制作好的原型***工程拖入转换软件中，可以直接将整个原型***自动生成若干个子***，以及继续细分成若干个带有交互逻辑和视觉效果的模型，直接添加进现有的模型库中，实现模型库的不断积累，以快速构建原型。

S2，在核心功能界面中绘制出全部视觉元素，通过预设的组合规则对全部视觉元素进行组合，根据组合结果和选择的原型模型生成原型。

预设的组合规则可以为人因工程学原则以及人机交互最优方案。

应理解，视觉元素包括默认显示的元素：文本、按钮、表单、图形、菜单等；默认不显示的元素：警告、出错信息、状态提示、操作反馈等，都要一一进行设计。从功能及内容的角度，将元素条目进行分组，并按照优先级从高到低的顺序排列。

应理解，为了得到合适的原型，此阶段可以多进行各种形式组合的尝试，避免一次绘制完整所有元素。制作一组由简单方框组成的线框图，用于在用户界面上显示不同元素的位置，以展示界面布局和软件功能。通常只需使用线条、方框和灰阶色彩填充，可以通过不同灰阶标明不同层次。其目的是为了评估界面UI元素间的平衡性、合理界面的优先级，并完善界面的相互关系。

此时完成原型的构建，得到的原型为低保真原型，即包含核心功能的原型，后续还可以加入视觉风格以及其他涉及用户体验的相关要素，模拟***的绝大部分操作，构建高保真原型，与实际软件更加接近。

S3，对原型的界面进行解析，识别原型包含的页面集合。

S4，根据预设的控件映射规则，将页面集合中的页面转换为Qss样式表文件和UI资源文件。

应理解，在完成原型***模型解析和校验后，根据控件映射规则，以原型的页面为单位，对应地转换为Qt的一个UI界面资源，包括Qss样式表文件和UI资源文件，能够根据用户需要支持utf-8、utf-16、GB2312等多种文件格式。其中，Qss样式表文件用于界面样式显示，包含所需贴图等资源文件。UI文件包含了Qt中用到的控件，使用绝对位置排布，布局可由开发人员通过Qt Designer实现。

如表1所示，以原型制作工具Axure RP和Qt中控件的映射规则为例，给出了一种示例性的控件映射规则。

表1

本实施例通过预先开发相对于最终软件功能和设计简易的原型，能够在代码实现之前保证产品在符合用户基本要求基础上进行迭代和细化，通过使用转换软件对原型进行解析和转换，对于软件功能和交互界面的设计可以针对原型进行，因此便于随时进行需求验证和设计验证，更准确的对开发***进行成本预估，使研发控制点前移，降低开发风险，更改简便，并且在制作原型***的过程中，依据与开发人员之间协商的控件命名规则，元件之间的层级包含关系以及其它一些原型开发人员与编程人员之间针对具体项目的交互逻辑进行的约束条件不断地创建，积累完善相应领域的模型库，能够方便后续新研型号的继承使用，当模型积累到一定数量后，能够实现快速构建原型***，提升软件开发效率。

可选地，在一些可能的实施方式中，还包括：

根据预设的转换工具对原型中由外部事件触发的动态效果进行识别和解析，并将解析后的动态效果映射到Qss样式表文件中。

需要说明的是，可以将由外部事件触发产生的动态效果，经过转换工具的识别解析后，将不同事件下的动态效果的样式集合映射到Qss样式表文件中，以支持研发人员通过编程开发，快速实现不同样式的切换。主要包括事件：窗口大小改变、窗口向上、下滚动、鼠标单击、鼠标双击、鼠标右键单击、鼠标移动、键盘按下、键盘松开和视图变更。

可选地，在一些可能的实施方式中，根据组合结果和选择的原型模型生成原型之后，还包括：

在原型中添加视觉设计要素以及与用户体验相关的设计要素，模拟软件的操作，生成高保真的原型。

通过对原型添加视觉设计要素以及与用户体验相关的设计要素，能够对原型不断完善，使研发控制点前移，降低开发风险。

可选地，在一些可能的实施方式中，原型模型包括预设的至少两种元件的视觉效果，以及每种元件之间的交互逻辑。

应理解，在制作原型***的过程中，可以将按照一定约束规则制定好的元件进行封装，封装好的元件具有封装前每个小元件的视觉效果以及交互逻辑，在此创造性的将这个封装好的元件叫做模型，将这些封装好的元件的集合叫做模型库，可以直接作为第三方库像原型制作工具的元件库一样，进行载入，方便下次开发继承和使用。

例如，约束条件可以包括：

第一，官方控件通过div的class属性识别，若无其它特殊要求，不建议对其修改；

第二，定制化控件在data-label属性中有明确控件类型标识字符，如“单选按钮”，“复选按钮”，“按钮”。若需要自定义，需确保所有自定义控件data-label的属性值一致。此外，避免出现data-label＝“幅像校正”，class中包含box属性，但通过人眼看到是按钮的情形。

示例：

若自定义控件A，data-label＝“控制按钮”，其由两个div a1，a2组合而成。那么在所有用到控件A的位置，确保a1，a2的先后顺序关系、类型的一致。

可选地，在一些可能的实施方式中，对原型的界面进行解析，识别原型包含的页面集合，具体包括：

从存储原型的界面的文件夹中依次读取包含界面UI的文件，根据预设的解析规则获取原型的页面集合，以及每个页面的控件集合，以及每个控件对应的不同交互事件的样式集合。

具体地，可以通过遍历原型工具生成的原型界面文件夹，依次读取原型工具与界面相关的文件，包括html、css、js等类型的文件，按照原型设计人员与编码开发人员约定好的规则获取当前显示的页面集合，每个页面下的控件集合，以及每个控件对应不同交互事件下的样式集合。

还可以对生成的语义语法进行检查，若发现错误语法，或无法识别的语法，弹出窗口提示用户。

如表2所示，给出了一种示例性的解析规则。

表2

可选地，在一些可能的实施方式中，还可以通过插件，将原型工具无缝集成到开发环境Qt Creator中，使得开发人员可以直接在Qt Creator的菜单项中打开原型工具，并能够自动获得原型工具的一些基本属性，如当前工程的名称、路径等，尽量提高用户的使用效率。为开发人员提供良好的人机交互界面，实现包括原型设计工具版本的选择、QT版本的选择、原型设计界面相关文件选择、生成文件路径选择、转化过程和结果异常提示等交互接口，辅助用户快速便捷的完成UI的转换。

通过将原型工具集成到Qt Creater编程开发环境中，能够提高开发效率。

可选地，还可以提供用户管理功能，如添加、删除、修改用户属性，并在软件启动后通过输入正确的用户和密码信息获得软件使用权限。

可选地，还可以提供日志记录功能，自动记录用户的登录、转换等操作。提供日志列表的显示，支持按照用户、时间、操作等关键字查询日志。

可以理解，在一些实施例中，可以包含如上述各实施方式中的部分或全部。

如图3所示，为本发明人机交互设计实现***的实施例提供的结构框架图，该人机交互设计实现***基于原型实现，包括：原型工具1和转换软件2，其中：

原型工具1用于根据开发需求选择软件的核心功能界面，从预设的模型库中选择原型模型；并用于在核心功能界面中绘制出全部视觉元素，通过预设的组合规则对全部视觉元素进行组合，根据组合结果和选择的原型模型生成原型；

转换软件2用于对原型的界面进行解析，识别原型包含的页面集合；并用于根据预设的控件映射规则，将页面集合中的页面转换为Qss样式表文件和UI资源文件。

本实施例通过预先开发相对于最终软件功能和设计简易的原型，能够在代码实现之前保证产品在符合用户基本要求基础上进行迭代和细化，通过使用转换软件对原型进行解析和转换，对于软件功能和交互界面的设计可以针对原型进行，因此便于随时进行需求验证和设计验证，更准确的对开发***进行成本预估，使研发控制点前移，降低开发风险，更改简便，并且在制作原型***的过程中，依据与开发人员之间协商的控件命名规则，元件之间的层级包含关系以及其它一些原型开发人员与编程人员之间针对具体项目的交互逻辑进行的约束条件不断地创建，积累完善相应领域的模型库，能够方便后续新研型号的继承使用，当模型积累到一定数量后，能够实现快速构建原型***，提升软件开发效率。

可选地，在一些可能的实施方式中，转换软件2还用根据预设的转换工具对原型中由外部事件触发的动态效果进行识别和解析，并将解析后的动态效果映射到Qss样式表文件中。

可选地，在一些可能的实施方式中，原型工具1还用于在原型中添加视觉设计要素以及与用户体验相关的设计要素，模拟软件的操作，生成高保真的原型。

可选地，在一些可能的实施方式中，原型模型包括预设的至少两种元件的视觉效果，以及每种元件之间的交互逻辑。

可选地，在一些可能的实施方式中，转换软件2具体用于从存储原型的界面的文件夹中依次读取包含界面UI的文件，根据预设的解析规则获取原型的页面集合，以及每个页面的控件集合，以及每个控件对应的不同交互事件的样式集合。

可以理解，在一些实施例中，可以包含如上述各实施方式中的部分或全部。

需要说明的是，上述各实施方式是与在先方法实施例对应的产品实施例，对于产品实施方式的说明可以参考上述各方法实施方式中的对应说明，在此不再赘述。

读者应理解，在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的方法实施例仅仅是示意性的，例如，步骤的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个步骤可以结合或者可以集成到另一个步骤，或一些特征可以忽略，或不执行。

以上，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (8)

1.一种基于原型的人机交互设计实现方法，其特征在于，包括：

根据开发需求选择软件的核心功能界面，从预设的模型库中选择原型模型；

在所述核心功能界面中绘制出全部视觉元素，通过预设的组合规则对全部所述视觉元素进行组合，根据组合结果和选择的原型模型生成原型；

对所述原型的界面进行解析，识别所述原型包含的页面集合；

根据预设的控件映射规则，将所述页面集合中的页面转换为Qss样式表文件和UI资源文件；

所述原型模型包括预设的至少两种元件的视觉效果，以及每种元件之间的交互逻辑。

2.根据权利要求1所述的基于原型的人机交互设计实现方法，其特征在于，还包括：

根据预设的转换工具对所述原型中由外部事件触发的动态效果进行识别和解析，并将解析后的所述动态效果映射到所述Qss样式表文件中。

3.根据权利要求1所述的基于原型的人机交互设计实现方法，其特征在于，根据组合结果和选择的原型模型生成原型之后，还包括：

在所述原型中添加视觉设计要素以及与用户体验相关的设计要素，模拟软件的操作，生成高保真的原型。

4.根据权利要求1至3中任一项所述的基于原型的人机交互设计实现方法，其特征在于，对所述原型的界面进行解析，识别所述原型包含的页面集合，具体包括：

从存储所述原型的界面的文件夹中依次读取包含界面UI的文件，根据预设的解析规则获取所述原型的页面集合，以及每个页面的控件集合，以及每个控件对应的不同交互事件的样式集合。

5.一种基于原型的人机交互设计实现***，其特征在于，包括：原型工具和转换软件，其中：

所述原型工具用于根据开发需求选择软件的核心功能界面，从预设的模型库中选择原型模型；并用于在所述核心功能界面中绘制出全部视觉元素，通过预设的组合规则对全部所述视觉元素进行组合，根据组合结果和选择的原型模型生成原型；

所述转换软件用于对所述原型的界面进行解析，识别所述原型包含的页面集合；并用于根据预设的控件映射规则，将所述页面集合中的页面转换为Qss样式表文件和UI资源文件；

所述原型模型包括预设的至少两种元件的视觉效果，以及每种元件之间的交互逻辑。

6.根据权利要求5所述的基于原型的人机交互设计实现***，其特征在于，所述转换软件还用根据预设的转换工具对所述原型中由外部事件触发的动态效果进行识别和解析，并将解析后的所述动态效果映射到所述Qss样式表文件中。

7.根据权利要求5所述的基于原型的人机交互设计实现***，其特征在于，所述原型工具还用于在所述原型中添加视觉设计要素以及与用户体验相关的设计要素，模拟软件的操作，生成高保真的原型。

8.根据权利要求5至7中任一项所述的基于原型的人机交互设计实现***，其特征在于，所述转换软件具体用于从存储所述原型的界面的文件夹中依次读取包含界面UI的文件，根据预设的解析规则获取所述原型的页面集合，以及每个页面的控件集合，以及每个控件对应的不同交互事件的样式集合。

Images