CN116595782B - 一种基于html5技术的包装图稿设计方法 - Google Patents

Abstract

本发明公开了一种基于HTML5技术的包装图稿设计方法，包括展示平台、供应商模块、设计师模块以及品牌方模块；供应商根据品牌方提供的需求进行建模，并通过登录供应商模块，将包装项目保存在展示平台内；设计师登录设计师模块，在预留的区域内进行设计创作；完成创作后，保存在展示平台内；品牌方登录品牌方模块，对完成创作后的模型进行查看，确认效果。通过本发明中提供的方法，能够通过展示平台将供应商、设计师以及品牌方连接起来；通过登录不同的模块来接入展示平台，从而实现产品建模展示、产品设计以及成品展示；从而方便供应商、设计师以及品牌方的沟通，也不需要通过完成样品制作通过实物展示，从而节约了前期沟通的成本。

Description

一种基于HTML5技术的包装图稿设计方法

技术领域

本发明属于图稿设计技术领域，具体为一种基于HTML5技术的包装图稿设计方法。

背景技术

包装供应商为满足品牌方产品要求，需要设计师对包装图稿进行设计。图稿的设计需要通过打样的方式与品牌方确认设计方案。从设计到定稿，需要经过多次打样。其中产生大量的时间成本、材料成本、运输成本与沟通成本。因此有必要对包装图稿设计进行优化，从而节省成本。

现有的方法中，一般通过三维建模的方法，如使用3Dmax或C4D。三维设计师先为产品建模，根据平面设计师的平面设计图，将设计图转换为贴图，再将贴图与模型一起进行渲染，并与品牌方设计方案。

现有技术中存在，渲染图无法从多角度观看视觉效果，且更换图稿设计需要与三维设计师沟通，并需要多次重复进行渲染，流程复杂。

发明内容

本发明的目的在于提供一种基于HTML5技术的包装图稿设计方法，以解决背景技术中提出的现有技术中，存在渲染图无法从多角度观看视觉效果，且更换图稿设计需要与三维设计师沟通，并需要多次重复进行渲染，流程复杂的问题。

为解决上述技术问题，本发明所采用的技术方案是：

一种基于HTML5技术的包装图稿设计方法，包括展示平台、供应商模块、设计师模块以及品牌方模块；其中，供应商模块、设计师模块以及品牌方模块分别使用不同权限的账号登录展示平台；

供应商根据品牌方提供的需求进行建模，完成建模后，将建立好的模型进行区域划分，并通过登录供应商模块，将包装项目保存在展示平台内；设计师登录设计师模块，在预留的区域内进行设计创作；完成创作后，保存在展示平台内；品牌方登录品牌方模块，对完成创作后的模型进行查看，确认效果。

根据上述技术方案，供应商模块的具体流程包括以下步骤：

步骤A1，供应商根据品牌方要求对产品进行建模；

步骤A2，对完成建模的产品进行区域划分，并通过设置图稿对划分的区域进行说明；完成说明后，将图稿和模型制作为包装项目；

步骤A3，将包装项目存入展示平台内保存。

根据上述技术方案，设计师模块的具体流程包括以下步骤：

步骤B1，从展示模块中提取包装项目；

步骤B2，从提取的包装项目中下载带有图稿的模型；

步骤B3，根据图稿说明在模型的预留区域进行设计创作；

步骤B4，将完成创作的模型回传至包装项目，并存入展示平台。

根据上述技术方案，品牌方模块的具体流程包括以下步骤：

步骤C1，登入展示平台中的品牌方模块，并从展示平台中下载包装项目；

步骤C2，从包装项目中下载完成设计的模型；

步骤C3，查看完成设计模型的效果；

步骤C4，通过展示平台反馈意见，并告知设计师。

根据上述技术方案，预留区域包括包含描述区、可设计区、不可设计区以及特殊区域。

与现有技术相比，本发明具有以下有益效果：

通过本发明中提供的方法，能够通过展示平台将供应商、设计师以及品牌方连接起来；通过登录不同的模块来接入展示平台，从而实现产品建模展示、产品设计以及成品展示；从而方便供应商、设计师以及品牌方的沟通，也不需要通过完成样品制作，通过实物展示，从而节约了前期沟通的成本。并且也能够直观三维模型的成品效果，方便品牌方与设计师的沟通以及调整。

附图说明

图1为本发明框架示意图；

图2为本发明流程图；

图3为本发明设计装置整体结构示意图；

图4为本发明夹紧盘200结构示意图。

图中标记：100-底座，200-夹紧盘，300-连接柱，400-放置平台，500-滑槽，600-滑块，700-夹紧块，800-夹持部，900-气囊，110-AR本体，111-安装架，112-驱动电机，113-丝杠。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例一

如图1和图2所示，一种基于HTML5技术的包装图稿设计方法，包括展示平台、供应商模块、设计师模块以及品牌方模块；其中，供应商模块、设计师模块以及品牌方模块分别使用不同权限的账号登录展示平台；

供应商根据品牌方提供的需求进行建模，完成建模后，将建立好的模型进行区域划分，并通过登录供应商模块，将包装项目保存在展示平台内；设计师登录设计师模块，在预留的区域内进行设计创作；完成创作后，保存在展示平台内；品牌方登录品牌方模块，对完成创作后的模型进行查看，确认效果。

通过本发明中提供的方法，能够通过展示平台将供应商、设计师以及品牌方连接起来；通过登录不同的模块来接入展示平台，从而实现产品建模展示、产品设计以及成品展示；从而方便供应商、设计师以及品牌方的沟通，也不需要通过完成样品制作，通过实物展示，从而节约了前期沟通的成本。并且也能够直观三维模型的成品效果，方便品牌方与设计师的沟通以及调整。

实施例二

本实施例为实施例一的进一步细化。供应商模块的具体流程包括以下步骤：

步骤A1，供应商根据品牌方要求对产品进行建模；

步骤A2，对完成建模的产品进行区域划分，并通过设置图稿对划分的区域进行说明；完成说明后，将图稿和模型制作为包装项目；

步骤A3，将包装项目存入展示平台内保存。

首先供应商需要将可以生产的包装进行三维建模（建模软件不限），并保存为通用模型格式文件（比如FBX,OBJ等）。然后在模型上确定出可以作为图稿模板的区域（包含描述区，可设计区，不可设计区，特殊区域等），并在此区域的相应贴图位置上制作图稿模板。在制作的过程中，在图稿的说明区域填写具体的设计说明，让设计师能够根据具体的设计说明进行设计。

其中，设计说明中应包含关于不可设计、可设计区域的尺寸描述，图稿图层的要求，图稿用色的描述，以及其他品牌方的特殊要求等信息（最终需保存为带有不同功能图层的PDF文件）。

最后，供应商登录供应商模块，创建包装项目并上传产品3D模型文件，再在图稿管理中上传模板PDF文件，并保存包装项目完成入库。

实施例三

本实施例为实施例一的进一步细化。设计师模块的具体流程包括以下步骤：

步骤B1，从展示模块中提取包装项目；

步骤B2，从提取的包装项目中下载带有图稿的模型；

步骤B3，根据图稿说明在模型的预留区域进行设计创作；

步骤B4，将完成创作的模型回传至包装项目，并存入展示平台。

首先设计师需要登录账号，从公模库中打开相应的产品包装项目。项目中包含包装模型，待设计的图稿模板，以及其他相关信息。

然后在项目中的图稿管理中找到图稿模板，并下载图稿模板，根据供应商在图稿模板中标注的设计说明和品牌方对于设计的反馈意见进行图稿设计，并按供应商的要求保存文件（格式为PDF文件）。

最后将设计完成的图稿通过图稿管理，回传至包装项目中的指定位置，完成设计工作，并保持项目。

实施例四

本实施例为实施例一的进一步细化。品牌方模块的具体流程包括以下步骤：

步骤C1，登入展示平台中的品牌方模块，并从展示平台中下载包装项目；

步骤C2，从包装项目中下载完成设计的模型；

步骤C3，查看完成设计模型的效果；

步骤C4，通过展示平台反馈意见，并告知设计师。

首先品牌方登录品牌方模块，在系统中打开包装项目。

然后在项目中直接查看设计效果。其中在查看的过程中，可以在项目的界面中，通过鼠标拖动，任意更换包装查看的角度，可通过鼠标滚轮任意缩放查看细节，可在通过不同的查看模式更换环境灯光及阴影效果，模拟不同场景下的产品包装展示效果。

最后，品牌方可向设计师提出修改意见反馈。如不需要修改，可直接确认方案，并要求供应商按照设计进行产品实物打样。

具体的，本发明中的产品包括但不限于塑料包装盒、陶瓷器具以及礼盒。

实施例五

当完成线上的沟通设计后，就需要供应商进行实物打样，以查看实物的最终效果。然而，在打样的过程中，品牌方以及设计师不能对打样过程进行监督以及指导；并且，只能在完成打样，通过图片或者视屏的形式看到打样结果。存在打样的过程中，品牌方以及设计师不能及时看到打样的进度，也不能及时的对打样效果进行调整。而通过视频或者图片不能完整的展示打样的效果。因此，亟需一种包装产品远程设计装置。

如图3所示，包括底座100，底座100上设置有夹紧盘200，在底座100上还设置有连接柱300，连接柱300的一端与夹紧盘200固定连接，连接柱300的另一端与底座100转动连接；在底座100上设置有转动电机，转动电机用于带动连接柱300转动。

如图4所示，在夹紧盘200的中部还设置有放置平台400，放置平台400用于放置产品；在夹紧盘200上还设置有滑槽500，滑槽500的内部设置有滑块600，滑块600上设置有夹紧块700，夹紧块700与滑块600通过螺栓可拆卸连接。

夹紧块700的端部还设置有夹持部800，夹持部800为弧形板，夹持部800与夹紧块700固定连接。

还包括保护组件；保护组件包括气囊900，气囊900设置在夹持部800的外壁上，在夹紧块700的内部设置有气道，气道用于连接气囊900以及外部气源。

在使用时，当需要夹持容易破碎的产品时，例如，陶瓷器件；外部气源通过气道向气囊900的内部注入空气，使得气囊900膨胀。通过膨胀后的气囊900对产品进行夹持，起到保护作用。

当需要夹持的产品为塑料的箱体时，则可以不对气囊900充气，直接通过加持部对其进行加持，使得其能稳定在放置平台400上，完成打样。

还包括AR组件，AR组件包括移动装置和AR本体110，其中，在移动装置上设置有安装台，AR本体110设置在安装台上；移动装置安装在墙体上。

移动装置包括驱动电机112和安装架111；在安装架111的内部设置有丝杠113，安装台设置在丝杠113上，并通过驱动电机112带动丝杠113转动，从而带动安装台和AR本体110上下移动。

在使用过程中，首先将需要打样的产品放置在放置平台400上，再通过夹紧块700对产品进行夹紧；通过调整AR本体110的高度，使得AR本体110能对整个产品进行扫描，再通过电机带动夹紧盘200转动，完成对产品的扫描，并将扫描到的结果上传到展示平台，方便品牌方以及设计师查看。

在固定时间（如10min）或者完成一道工序后，对产品进行依次扫描，使得品牌方以及设计师能够跟踪掌握产品的打样情况，方便品牌方以及设计师对产品的打样进行调整，避免只能在成品后再进行沟通的局面，有效提高了打样成品的成功率，结余了沟通的时间。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (2)

1.一种基于HTML5技术的包装图稿设计方法，其特征在于：包括展示平台、供应商模块、设计师模块以及品牌方模块；其中，供应商模块、设计师模块以及品牌方模块分别使用不同权限的账号登录展示平台；

供应商根据品牌方提供的需求进行建模，完成建模后，将建立好的模型进行区域划分，并通过登录供应商模块，将包装项目保存在展示平台内；设计师登录设计师模块，在预留的区域内进行设计创作；完成创作后，保存在展示平台内；品牌方登录品牌方模块，对完成创作后的模型进行查看，确认效果；

供应商模块的具体流程包括以下步骤：

步骤A1，供应商根据品牌方要求对产品进行建模；

步骤A2，对完成建模的产品进行区域划分，并通过设置图稿对划分的区域进行说明；完成说明后，将图稿和模型制作为包装项目；

步骤A3，将包装项目存入展示平台内保存；

设计师模块的具体流程包括以下步骤：

步骤B1，从展示模块中提取包装项目；

步骤B2，从提取的包装项目中下载带有图稿的模型；

步骤B3，根据图稿说明在模型的预留区域进行设计创作；

步骤B4，将完成创作的模型回传至包装项目，并存入展示平台；

品牌方模块的具体流程包括以下步骤：

步骤C1，登入展示平台中的品牌方模块，并从展示平台中下载包装项目；

步骤C2，从包装项目中下载完成设计的模型；

步骤C3，查看完成设计模型的效果；

步骤C4，通过展示平台反馈意见，并告知设计师；

通过登录不同的模块来接入展示平台，从而实现产品建模展示、产品设计以及成品展示；从而方便供应商、设计师以及品牌方的沟通，也不需要通过完成样品制作，通过实物展示，从而节约了前期沟通的成本。

2.根据权利要求1所述的一种基于HTML5技术的包装图稿设计方法，其特征在于：预留区域包括包含描述区、可设计区、不可设计区以及特殊区域。