CN103116684B - 一种生成产品外观原型的方法及系统 - Google Patents
一种生成产品外观原型的方法及系统 Download PDFInfo
- Publication number
- CN103116684B CN103116684B CN201310086527.6A CN201310086527A CN103116684B CN 103116684 B CN103116684 B CN 103116684B CN 201310086527 A CN201310086527 A CN 201310086527A CN 103116684 B CN103116684 B CN 103116684B
- Authority
- CN
- China
- Prior art keywords
- control
- graphic
- prototype
- graphical
- product appearance
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Landscapes
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种生成产品外观原型的方法和系统，采集图形设计区中的图形输入，并生成图形文件；将图形文件中的图像分为一个或多个控件，并将一个或多个控件与预定义的图形控件进行匹配；将与一个或多个控件匹配成功的图形控件进行组合，形成产品外观原型。本发明的生成产品外观原型的方法和系统，能够将用户输入的产品外形图形转化为产品外观原型，用户通过可产生电子墨迹的鼠标笔或真正的墨水笔，即可以方便地实现产品外观原型设计，使非专业人士能够方便地参与产品设计，提高了生产效率并降低了成本。
Description
技术领域
本发明涉及图像处理技术领域，尤其涉及一种生成产品外观原型的方法及系统。
背景技术
目前，在进行软件产品或其他工业产品外观原型设计时，通常需要客户，产品经理，产品设计人员三方对产品的外观进行讨论来确定产品外观原型。但是，客户，产品经理，产品设计人员对产品的外观往往有不同见解，由于客户或产品经理可能不是了解原型设计软件的人员，因此，不能快捷地画出自己所设想的产品原型。例如，客户，产品经理，产品设计人员需要对一个网页的原型设计进行讨论，由于客户对于产品设计人员在计算机上画出的布局色调不满意，但又不能清楚地表达自己到底想要的网页原型是什么样的。因此，需要一种能够比较便捷地生成产品外观原型的方法和系统。
发明内容
有鉴于此，本发明要解决的一个技术问题是提供一种生成产品外观原型的方法，将用户输入的产品外形图形转化为产品外观原型。
一种生成产品外观原型的方法，包括：采集图形设计区中的图形输入，并生成图形文件；将所述图形文件中的图像分为一个或多个控件，并将所述一个或多个控件与预定义的图形控件进行匹配；将与所述一个或多个控件匹配成功的图形控件进行组合，形成产品外观原型。
根据本发明的方法的一个实施例，进一步的，将产品外观原型的设计界面投影到白板上，在所述白板上显示图形设计区和用于显示产品外观原型的产品显示区；使用鼠标笔在所述图形设计区画出产品的外观，实时读入所述图形设计区中的图形信息，生成图形文件；其中，所述图形信息包括：布局、样式、颜色。
根据本发明的方法的一个实施例，进一步的，通过摄像头读入在所述图形设计区画出的产品外观，生成图形文件。
根据本发明的方法的一个实施例，进一步的，对所述图形文件中的所述图像进行边缘检测，将所述图像分为一个或多个控件，对每个控件进行图形识别，与图形控件特征库中图形控件的图形特征值进行比对，将每个控件都与预定义的图形控件进行匹配；其中，录入图形控件样式，并采集图形控件的图形特征值，形成图形控件特征库。
根据本发明的方法的一个实施例，进一步的，所述图形文件的格式包括：BMP、GIF、ICO。
本发明要解决的一个技术问题是提供一种生成产品外观原型的系统，将用户输入的产品外形图形转化为产品外观原型。
一种生成产品外观原型的系统，包括：图像采集装置，用于采集图形设计区中的图形输入，并生成图形文件；模式识别装置，用于将所述图形文件中的图像分为一个或多个控件，并将所述一个或多个控件与预定义的图形控件进行匹配；原型生成装置，用于将与所述一个或多个控件匹配成功的图形控件进行组合，形成产品外观原型。
根据本发明的系统的一个实施例，进一步的，所述图像采集装置包括：白板、鼠标笔、投影仪和图形文件生成单元；所述投影仪将产品外观原型的设计界面投影到所述白板上；在所述白板上显示图形设计区和用于显示产品外观原型的产品显示区；使用所述鼠标笔在所述图形设计区画出产品的外观，所述图形文件生成单元实时读入在所述图形设计区的图形信息，生成图形文件；其中，所述图形信息包括：布局、样式、颜色。
根据本发明的系统的一个实施例，进一步的，所述图像采集装置包括：摄像头；通过所述摄像头读入在所述图形设计区的图形，并将所述图形设计区的图形发送到所述图形文件生成单元，所述图形文件生成单元生成图形文件。
根据本发明的系统的一个实施例，进一步的，还包括图形控件特征库；所述模式识别装置对所述图形文件中的所述图像进行边缘检测，将所述图像分为一个或多个控件，对每个控件进行图形识别，与图形控件特征库中图形控件的图形特征值进行比对，将每个控件都与预定义的图形控件进行匹配；其中，录入图形控件样式，并采集图形控件的图形特征值，形成所述图形控件特征库。
本发明的生成产品外观原型的方法和系统，能够将用户输入的产品外形图形转化为产品外观原型，用户通过可产生电子墨迹的鼠标笔或真正的墨水笔，即可以方便的实现产品外观原型设计，使非专业人士能够方便地参与产品设计，提高了生产效率并降低了成本。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为根据本发明的生成产品外观原型的方法的一个实施例的流程图；
图2为根据本发明的生成产品外观原型的系统的一个实施例的示意图；
图3为根据本发明的生成产品外观原型的系统的另一个实施例的示意图；
图4为使用本发明的生成产品外观原型的系统的一个实施例的场景示意图。
具体实施方式
下面参照附图对本发明进行更全面的描述，其中说明本发明的示例性实施例。下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
图1为根据本发明的生成产品外观原型的方法的一个实施例的流程图。如图1所示：
步骤101，采集图形设计区中的图形输入，并生成图形文件。
步骤102，将图形文件中的图像分为一个或多个控件，并将一个或多个控件与预定义的图形控件进行匹配。
步骤103，将与一个或多个控件匹配成功的图形控件进行组合，形成产品外观原型。
根据本发明的一个实施例，通过投影仪，将产品外观原型的设计界面投影到白板上，在白板上显示图形设计区和用于显示产品外观原型的产品显示区。
根据本发明的一个实施例，用户可以使用鼠标笔在图形设计区画出产品的外观，并实时读入图形设计区中的图形信息，生成图形文件。其中，图形信息包括：布局、样式、颜色等等。
鼠标笔能把普通笔记本变成“触摸式屏幕”，有笔触感觉，也可在空气中比划，当无线鼠标用。用户可以使用鼠标笔在计算机屏幕上画出产品的外观，实时读入计算机屏幕上的图形信息，生成图形文件。
或者，通过摄像头读入在图形设计区画出的产品外观，生成图形文件。
根据本发明的一个实施例，对图形文件中的图像进行边缘检测，将图像分为一个或多个控件，对每个控件进行图形识别，与图形控件特征库中图形控件的图形特征值进行比对，将每个控件都与预定义的图形控件进行匹配，获取匹配成功的图形控件。
边缘检测是图像处理和计算机视觉中的基本问题，边缘检测的目的是标识数字图像中亮度变化明显的点。图像属性中的显著变化通常反映了属性的重要事件和变化，包括：(i)深度上的不连续、(ii)表面方向不连续、(iii)物质属性变化和(iv)场景照明变化。
边缘检测是图像处理和计算机视觉中，尤其是特征提取中的一个研究领域。图像边缘检测大幅度地减少了数据量，并且剔除了可以认为不相关的信息，保留了图像重要的结构属性。
现有技术中有许多方法用于边缘检测，它们的绝大部分可以划分为两类：基于查找一类和基于零穿越的一类。基于查找的方法通过寻找图像一阶导数中的最大和最小值来检测边界，通常是将边界定位在梯度最大的方向。基于零穿越的方法通过寻找图像二阶导数零穿越来寻找边界，通常是Laplacian过零点或者非线性差分表示的过零点。
根据本发明的一个实施例，可以采用现有技术中的任何一种边缘检测方法，将图像分为一个或多个控件。
根据本发明的一个实施例，可以通过录入图形控件样式，并采集图形控件的图形特征值，形成图形控件特征库。
图形控件是组成产品外观原型的可拆分部分，可以包括界面控件，例如视窗、文本框、按钮、下拉式菜单等界面元素，图表控件、报表控件、各种图形等等。
根据本发明的一个实施例，可以通过OpenCV进行图形文件中的图像进行边缘检测、将图像分为一个或多个控件、对每个控件进行图形识别、与图形控件特征库中图形控件的图形特征值进行比对、将每个控件都与预定义的图形控件进行匹配等等图像处理工作。
OpenCV是一个用于图像处理、分析、机器视觉方面的开源函数库。OpenCV的全称是：OpenSourceComputerVisionLibrary。OpenCV于1999年由Intel建立，现在由WillowGarage提供支持。
OpenCV是一个基于BSD许可证授权(开源)发行的跨平台计算机视觉库，可以运行在Linux、Windows和MacOS操作系统上。它轻量级而且高效——由一系列C函数和少量C++类构成，同时提供了Python、Ruby、MATLAB等语言的接口，实现了图像处理和计算机视觉方面的很多通用算法。
根据本发明的一个实施例，图形文件的格式包括：BMP、GIF、ico等等现有技术中的图形文件格式。
本发明的方法将产品外观原型的设计界面投影到白板上，用户在图形设计区用鼠标笔画出样式，并随时读入在图形设计区画出的布局，样式，颜色等信息，经模式识别，转换为真正的图形控件，将图形控件进行组合，进而形成真正的产品设计原型，显示在白板上的产品显示区。
或者用普通的墨水笔在图形设计区画出样式，通过摄像头读入所画的图形，经模式识别，转换为真正的图形控件，将图形控件进行组合，进而形成真正的产品设计原型，显示在白板上的产品显示区。
根据本发明的一个实施例，客户，产品经理，产品设计人员需要对一个网页的原型设计进行讨论，客户使用鼠标笔在白板上的图形设计区画出网页的外观，包括一个下拉框和文本框，生成图形文件，对图形文件中的图像进行边缘检测，将图像分为下拉框和文本框，将下拉框和文本框与图形控件特征库中图形控件的图形特征值进行比对，并将下拉框和文本框与预定义的图形控件进行匹配，获取匹配成功的图形控件特征库中的下拉框和文本框，进行组合，形成产品外观原型。
图2为根据本发明的生成产品外观原型的系统的一个实施例的示意图。生成产品外观原型的系统包括：图像采集装置21、模式识别装置22、原型生成装置23和图形控件特征库24。
图像采集装置21采集图形设计区中的图形输入，并生成图形文件。
模式识别装置22将图形文件中的图像分为一个或多个控件，并将一个或多个控件与预定义的图形控件进行匹配。
原型生成装置23将与一个或多个控件匹配成功的图形控件进行组合，形成产品外观原型。
根据本发明的一个实施例，可以录入图形控件样式，并采集图形控件的图形特征值，形成图形控件特征库。
根据本发明的一个实施例，图像采集装置21、模式识别装置22、原型生成装置23和图形控件特征库24可以利用OpenCV，进行边缘检测、图形识别、图形特征值比对等等。
图3为根据本发明的生成产品外观原型的系统的另一个实施例的示意图。生成产品外观原型的系统包括：模式识别装置32、原型生成装置33和图形控件特征库34。
图像采集装置包括：白板311、鼠标笔313、投影仪312和图形文件生成单元314。
投影仪312将产品外观原型的设计界面投影到白板上。在白板311上显示图形设计区和用于显示产品外观原型的产品显示区。
使用鼠标笔313在图形设计区画出产品的外观，图形文件生成单元314实时读入在图形设计区的图形信息，生成图形文件。图形信息包括：布局、样式、颜色。
根据本发明的一个实施例，也可以通过摄像头315读入在图形设计区的图形，并将图形设计区的图形发送到图形文件生成单元314，图形文件生成单元314生成图形文件。
根据本发明的一个实施例，模式识别装置32对图形文件中的图像进行边缘检测，将图像分为一个或多个控件，对每个控件进行图形识别，与图形控件特征库中图形控件的图形特征值进行比对，将每个控件都与预定义的图形控件进行匹配。
本发明的系统的图像采集装置包括：投影仪，摄像头，白板等，可产生电子墨迹的鼠标笔，负责采集用户的图形输入。如果用户用鼠标笔输入，则直接将鼠标所画图形形成bmp文件并记录。如果用户用墨水笔输入，则由计算机摄像头负责采集用户图形并形成bmp文件。
模式识别装置负责对采集到的bmp图像，进行边缘检测，区分出各个控件，对每个控件进行图形识别，与图形控件特征库中定义的图形特征值进行比对。
图4为使用本发明的生成产品外观原型的系统的一个实施例的场景示意图。如图4所示，客户在使用本发明的生成产品外观原型的系统进行产品的外观设计时，将原型设计软件界面投影到白板上，软件界面分为涂鸦区(或叫设计区)、产品区。客户在涂鸦区用鼠标笔画出样式，软件随时读入涂鸦区画出的布局，样式，颜色等信息，经模式识别，转换为真正的控件，进而形成真正的产品设计原型，显示在产品区。或者，客户用普通的墨水笔即可，通过摄像头读入客户所画的图形，经模式识别，显示在产品区，使得客户可以方便进行产品外观原型设计，便于非专业人士参与设计。
本发明的生成产品外观原型的方法和系统，能够使用户通过可产生电子墨迹的鼠标笔或真正的墨水笔，即可以方便的实现产品外观原型设计，使非专业人士能够方便地参与产品设计，提高了生产效率并降低了成本。
可能以许多方式来实现本发明的方法和系统。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本发明的方法和系统。用于方法的步骤的上述顺序仅是为了进行说明，本发明的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本发明实施为记录在记录介质中的程序，这些程序包括用于实现根据本发明的方法的机器可读指令。因而，本发明还覆盖存储用于执行根据本发明的方法的程序的记录介质。
本发明的描述是为了示例和描述起见而给出的，而并不是无遗漏的或者将本发明限于所公开的形式。很多修改和变化对于本领域的普通技术人员而言是显然的。选择和描述实施例是为了更好说明本发明的原理和实际应用，并且使本领域的普通技术人员能够理解本发明从而设计适于特定用途的带有各种修改的各种实施例。
Claims (5)
1.一种生成产品外观原型的方法，其特征在于，包括：
采集图形设计区中的图形输入，并生成图形文件；其中，将产品外观原型的设计界面投影到白板上，在所述白板上显示图形设计区和用于显示产品外观原型的产品显示区；使用鼠标笔在所述图形设计区画出产品的外观，实时读入所述图形设计区中的图形信息，生成图形文件；所述图形信息包括：布局、样式、颜色；
将所述图形文件中的图像分为一个或多个控件，并将所述一个或多个控件与预定义的图形控件进行匹配；其中,对所述图形文件中的所述图像进行边缘检测，将所述图像分为一个或多个控件，对每个控件进行图形识别，与图形控件特征库中图形控件的图形特征值进行比对，将每个控件都与预定义的图形控件进行匹配；其中,通过录入图形控件样式，并采集图形控件的图形特征值，形成图形控件特征库；
将与所述一个或多个控件匹配成功的图形控件进行组合，形成产品外观原型。
2.如权利要求1所述的方法，其特征在于：
通过摄像头读入在所述图形设计区画出的产品外观，生成图形文件。
3.如权利要求1所述的方法，其特征在于：
所述图形文件的格式包括：BMP、GIF、ico。
4.一种生成产品外观原型的系统，其特征在于，包括：
图像采集装置，用于采集图形设计区中的图形输入，并生成图形文件；其中，所述图像采集装置包括：白板、鼠标笔、投影仪和图形文件生成单元；所述投影仪将产品外观原型的设计界面投影到所述白板上；在所述白板上显示图形设计区和用于显示产品外观原型的产品显示区；使用所述鼠标笔在所述图形设计区画出产品的外观，所述图形文件生成单元实时读入在所述图形设计区的图形信息，生成图形文件；所述图形信息包括：布局、样式、颜色；
模式识别装置，用于将所述图形文件中的图像分为一个或多个控件，并将所述一个或多个控件与预定义的图形控件进行匹配；其中,还包括图形控件特征库；所述模式识别装置对所述图形文件中的所述图像进行边缘检测，将所述图像分为一个或多个控件，对每个控件进行图形识别，与图形控件特征库中图形控件的图形特征值进行比对，将每个控件都与预定义的图形控件进行匹配；其中,通过录入图形控件样式，并采集图形控件的图形特征值，形成所述图形控件特征库；
原型生成装置，用于将与所述一个或多个控件匹配成功的图形控件进行组合，形成产品外观原型。
5.如权利要求4所述的系统，其特征在于：
所述图像采集装置包括：摄像头；
通过所述摄像头读入在所述图形设计区的图形，并将所述图形设计区的图形发送到所述图形文件生成单元，所述图形文件生成单元生成图形文件。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310086527.6A CN103116684B (zh) | 2013-03-19 | 2013-03-19 | 一种生成产品外观原型的方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310086527.6A CN103116684B (zh) | 2013-03-19 | 2013-03-19 | 一种生成产品外观原型的方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103116684A CN103116684A (zh) | 2013-05-22 |
| CN103116684B true CN103116684B (zh) | 2016-06-29 |
Family
ID=48415057
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201310086527.6A Active CN103116684B (zh) | 2013-03-19 | 2013-03-19 | 一种生成产品外观原型的方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103116684B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107680437B (zh) * | 2017-10-18 | 2019-12-31 | 商丘师范学院 | 一种用于版式设计教学的演示系统 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1687869A (zh) * | 2005-05-17 | 2005-10-26 | 殷绪成 | 激光笔的数字墨水生成方法与生成系统 |
| CN1867894A (zh) * | 2003-10-15 | 2006-11-22 | 皇家飞利浦电子股份有限公司 | 通过草拟自动生成用户界面描述 |
| CN102929387A (zh) * | 2012-09-25 | 2013-02-13 | 长安大学 | 一种基于普通纸笔的人机交互方法及人机交互系统 |
-
2013
- 2013-03-19 CN CN201310086527.6A patent/CN103116684B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1867894A (zh) * | 2003-10-15 | 2006-11-22 | 皇家飞利浦电子股份有限公司 | 通过草拟自动生成用户界面描述 |
| CN1687869A (zh) * | 2005-05-17 | 2005-10-26 | 殷绪成 | 激光笔的数字墨水生成方法与生成系统 |
| CN102929387A (zh) * | 2012-09-25 | 2013-02-13 | 长安大学 | 一种基于普通纸笔的人机交互方法及人机交互系统 |
Non-Patent Citations (1)
| Title |
|---|
| Sketching interfaces: toward more human interface design;Landay J A等;《Computer》;20010331;第34卷(第3期);第56-64页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103116684A (zh) | 2013-05-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10325389B2 (en) | Editing digital notes representing physical notes | |
| US10360473B2 (en) | User interface creation from screenshots | |
| JP4340076B2 (ja) | ビットマップ化イメージを構造化テキスト／図形エディタで利用すべく変換するシステム | |
| JP4339602B2 (ja) | デジタルインクイメージを構造化テキスト／図形エディタで利用すべく変換するシステム | |
| WO2020192463A1 (zh) | 一种展示方法及装置 | |
| EP3058514B1 (en) | Adding/deleting digital notes from a group | |
| Rahman et al. | A framework for fast automatic image cropping based on deep saliency map detection and gaussian filter | |
| KR101773574B1 (ko) | 데이터 테이블의 차트 시각화 방법 | |
| WO2014025073A2 (en) | Handwriting drawing apparatus and method | |
| KR102075433B1 (ko) | 필기 입력 장치 및 그 제어 방법 | |
| US8787670B2 (en) | Software for text and image edit recognition for editing of images that contain text | |
| Cuevas et al. | Tool for semiautomatic labeling of moving objects in video sequences: TSLAB | |
| Chen et al. | UI layers merger: merging UI layers via visual learning and boundary prior | |
| Berio et al. | Strokestyles: Stroke-based segmentation and stylization of fonts | |
| US9846707B2 (en) | Method for color and size based pre-filtering for visual object searching of documents | |
| CN103116684B (zh) | 一种生成产品外观原型的方法及系统 | |
| US10430458B2 (en) | Automated data extraction from a chart from user screen selections | |
| TWI691854B (zh) | 用於建立及操作軟體便箋之方法及運算裝置 | |
| US20180181262A1 (en) | Grid-based rendering of nodes and relationships between nodes | |
| Murugappan et al. | FEAsy: A Sketch-Based Tool for Finite Element Analysis | |
| WO2018099126A1 (zh) | 输入信息显示方法和系统 | |
| WO2024113271A1 (zh) | 智能手写显示设备、智能手写显示方法、电子设备 | |
| JP2016031721A (ja) | 検索装置、方法及びプログラム | |
| Khalili et al. | Wysiwym–integrated visualization, exploration and authoring of un-structured and semantic content | |
| WO2023044913A1 (zh) | 图形绘制方法及装置、计算机可读存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant |