CN108269311A - 基于ui查看视觉设计效果图的方法、存储介质 - Google Patents

Abstract

本发明提供一种基于UI查看视觉设计效果图的方法、存储介质，方法包括：VR终端获取视觉设计效果图；依据预设的环境参数模板调整所述视觉设计效果图的显示状态，所述环境参数模板包括设置所述效果图与终端镜头的夹角在160°范围内(水平)‑87°范围内(垂直)、所述效果图与镜头的距离为0.25‑6米，以及视觉界面设计分辨率为500‑1000px/米；在完成所述调整的预览状态下，依据接收到的操作指令对所述效果图进行设置并显示。本发明能够实现便捷地预览视觉设计效果图，而无需借助特定的应用以及进行复杂繁琐的参数设置修改。

Description

基于UI查看视觉设计效果图的方法、存储介质

技术领域

本发明涉及VR终端领域，具体说的是一种基于UI查看视觉设计效果图的方法、存储介质。

背景技术

目前，在视觉设计师完成一视觉设计效果图，想查看其视觉设计效果时，现有技术提供有以下两种方式：

第一种：需要通过Unity软件进行视觉设计效果图导入并修改Textture type参数(纹理类型)为sprite(2d and UI)；然后将修改后的设计图拉入场景并设置缩放比例、调整镜头方向、设置设计图与镜头距离等一系列参数的操作后，开启Unity预览以及外接式头戴设备后，通过VR外接式头戴设备进行视觉设计效果图视觉效果查看。

第二种：和第一种方法一样需要借助Unity软件，通过一系列操作后，导出手机安装包，手机完成安装包的安装后，借助VR眼镜查看效果图。

上述现有的两种方法都存在下述共同的不足：1、流程复杂；2、无法进行视觉设计效果图与镜头距离参数的设置；3、在Unity中导入图片，并修改Textture type(纹理类型)参数为sprite(2d and UI)后，其它参数如pixels per Unit(像素)默认值为100，导致图片放在场景区，无法原比例查看；4、视觉设计效果图缩放比例错误，需要不断尝试获得有清晰可视效果的缩放比例；5、预览过程中，有缩放、移位、调整所述效果图与镜头距离、旋转等操作，需要退出当前预览环境，通过Unity进行视觉效果调整后，再重新预览；6、无舒适视野范围参考。

发明内容

本发明所要解决的技术问题是：本发明提供一种基于UI查看视觉设计效果图的方法、存储介质，能够实现便捷地预览视觉设计效果图，而无需借助特定的应用以及进行复杂繁琐的参数设置修改。

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

一种基于UI查看视觉设计效果图的方法，包括：

VR终端获取视觉设计效果图；

依据预设的环境参数模板调整所述视觉设计效果图的显示状态，所述环境参数模板包括设置所述效果图与终端镜头的夹角在水平160°范围内、垂直87°范围内、所述效果图与镜头的距离为0.25-6米、效果图缩放比例为2.5-6倍，以及视觉界面设计分辨率为500-1000px/米；

在完成所述调整的预览状态下，依据接收到的操作指令对所述效果图进行设置并显示。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器读取时，能够执行以下步骤：

VR终端获取视觉设计效果图；

依据预设的环境参数模板调整所述视觉设计效果图的显示状态，所述环境参数模板包括设置所述效果图与终端镜头的夹角在水平160°范围内、垂直87°范围内、所述效果图与镜头的距离为0.25-6米、效果图缩放比例为2.5-6倍，以及视觉界面设计分辨率为500-1000px/米；

在完成所述调整的预览状态下，依据接收到的操作指令对所述效果图进行设置并显示。

本发明的有益效果在于：本发明区别于现有的视觉设计效果图查看方式需要通过手动不断调整众多参数才能获取相对满意的效果的低效率，且无法在预览状态下对效果图进行调整的不足。通过在获取到效果图后，直接依据环境参数模板统一调整效果图的初始显示状态，快速获取最佳的查看效果；同时，还能在预览状态下，直接依据所接收到的用户的操作指令对效果图进行操作，调整设计图至用户满意的显示效果，同时获取最优视觉效果的距离、缩放、分辨率、旋转的效果图设置参数。本发明能够实现用户无需通过Unity软件对视觉设计效果图及镜头进行复杂设置、了解Unity软件还原视觉图像的原理，能够直接以最佳的查阅状态查看视觉效果图，并在预览状态下进行编辑并实时显示，从而显著提高设计图的查看编辑效率。

附图说明

图1为本发明一种基于UI查看视觉设计效果图的方法的流程示意图；

图2为本发明实施例一的VR终端的功能组成示意图。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：在获取到效果图后，直接依据环境参数模板统一调整效果图的显示状态，快速获取最佳的查看效果；还能在预览状态下，直接依据所接收到的用户的操作指令对效果图进行操作，调整设计图至用户满意的显示效果。

请参照图1以及图2，本发明提供一种基于UI查看视觉设计效果图的方法，包括：

VR终端获取视觉设计效果图；

依据预设的环境参数模板调整所述视觉设计效果图的显示状态，所述环境参数模板包括设置所述效果图与终端镜头的夹角在水平160°范围内、垂直87°范围内、所述效果图与镜头的距离为0.25-6米、效果图缩放比例为2.5-6倍，以及视觉界面设计分辨率为500-1000px/米；

在完成所述调整的预览状态下，依据接收到的操作指令对所述效果图进行设置并显示。

从上述描述可知，本发明的有益效果在于：将Unity软件繁琐设置流程进行标准化，直接获取相应的环境参数进行设置，减少繁琐设置与测试修改过程，实现快速预览视觉设计效果图；同时，在预览过程中，可对视觉设计效果图进行缩放、旋转、平移、调整所述效果图与镜头距离等操作，实现对效果图本身的修改无需退出当前预览状态进行，而后再重新预览，可直接在预览状态下进行，以提高设计图的编辑效率。

进一步的，还包括：

预览状态下，依据所述夹角、所述距离以及视距，对应所述效果图生成设计辅助参考线。

由上述描述可知，能够通过设计辅助参考线直观的了解效果图当前的显示状态是否在舒适范围内，以便用户据此便捷的进行调整。

进一步的，还包括：

预览状态下，依据所述效果图当前的显示状态，在终端镜头前显示包括所述效果图的设计尺寸、当前缩放比例、旋转角度以及与镜头距离的信息参数。

由上述描述可知，能够直观地从显示界面上获取视觉效果图的显示信息，为用户提供参数调整依据，同时又有利于后续界面还原工作的开展。

进一步的，所述环境参数模板中，所述效果图与镜头的距离为3米、效果图缩放比例为3倍、所述视觉界面设计分辨率为1000px/米；所述操作指令包括缩放、旋转、平移、调整所述效果图与镜头距离。

由上述描述可知，通过事先对人体工程学以及设备显像原理进行研究，获取能够获取最佳呈现状态的环境参数模板，使Unity软件参数的繁琐设置流程进行标准化，实现快速获取效果图最佳的查看状态；同时，能够在预览状态下对效果图进行实时编辑，依据编辑同步显示呈现效果，提高效果图的编辑效率。

进一步的，所述VR终端获取视觉设计效果图，具体为：

上传视觉设计效果图至服务器；

建立所述服务器与VR终端的无线连接；

从所述服务器上下载所述视觉设计效果图至VR终端。

由上述描述可知，能够直接从服务器上远程获取效果图，提高查看效率。

进一步的，所述VR终端获取视觉设计效果图，具体为：

在同一局域网内，

VR移动终端作为服务器，

PC端在浏览器上打开VR移动终端显示的网址，

把需要显示的效果图通过Wifi直接传输至VR移动终端。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器读取时，能够执行以下步骤：

VR终端获取视觉设计效果图；

依据预设的环境参数模板调整所述视觉设计效果图的显示状态，所述环境参数模板包括设置所述效果图与终端镜头的夹角在水平160°范围内、垂直87°范围内、所述效果图与镜头的距离为0.25-6米、效果图缩放比例为2.5-6倍，以及视觉界面设计分辨率为500-1000px/米；

在完成所述调整的预览状态下，依据接收到的操作指令对所述效果图进行设置并显示。

从上述描述可知，本发明的有益效果在于：直接通过VR终端的处理器读取并执行存储介质上的计算机程序，便可实现便捷的查看视觉设计效果图，并在预览状态下实时编辑、实时同步。

进一步的，所述程序在被处理器读取时，还能执行以下步骤：

预览状态下，依据所述夹角、所述距离以及视距，对应所述效果图生成设计辅助参考线。

进一步的，所述程序在被处理器读取时，还能执行以下步骤：

预览状态下，依据所述效果图当前的显示状态，在终端镜头前显示包括所述效果图的设计尺寸、当前缩放比例、旋转角度以及与镜头距离的信息参数。

进一步的，所述环境参数模板中，所述效果图与镜头的距离为3米、效果图缩放比例为3倍，、所述视觉界面设计分辨率为1000px/米。

进一步的，所述程序在被处理器读取时，还能执行以下步骤：

建立VR终端与服务器的无线连接；

从所述服务器上下载预先上传至服务器的视觉设计效果图至VR终端。

进一步的，所述程序在被处理器读取时，还能执行以下步骤：

VR移动终端作为服务器，视觉设计效果图通过Wifi直接传输至VR移动终端。

实施例一

请参照图1和图2，本实施例提供一种基于UI查看视觉设计效果图的方法，基于VR终端(VR一体机、VR眼镜、VR外接式头戴设备等)，实现便捷的查看视觉设计效果图，并获取最佳的查看效果；进一步的，还能在预览状态下对效果图进行编辑，且实时同步展示编辑效果。从而显著提高视觉设计效果图的查看和编辑效率，大大优化用户体验。

具体的，本实施例的方法包括：

一、VR终端获取视觉设计效果图；

具体包括：设计师将设计好的视觉设计效果图存储至服务器；通过建立VR终端与服务器的无线通信连接，使VR终端能远程从服务器快速的获取视觉设计效果图。

二、VR终端获取到所述视觉设计效果图后，依据预设的环境参数模板调整所述视觉设计效果图的显示状态。所述环境参数模板中至少包含效果图与终端镜头的夹角、效果图与镜头的距离、效果图缩放倍数，以及视觉界面设计分辨率；

其中，所述环境参数模板中包含依据对人体工程学以及VR设备显像原理的深入了解后经过反复试验得出的环境参数。环境参数对应的是效果图置于VR终端的摄像头环境下的参数。直接依据环境参数模块中的参数进行设置，能够使VR终端的佩戴者快速地直接从显示界面上获取原始效果图(从服务器获取的)最佳、最舒服的呈现效果。

具体的，环境参数的获取方式：

通过人体工程学，研究人眼视度(主视野区域为水平100°及垂直55°，舒适角为水平60°及垂直40°)和脖子转动角度(水平舒适角度60°及垂直舒适角度32°)，得出主视视野范围为人眼和脖子的总和(水平160°及垂直87°)。因此，显示界面上的效果图与终端镜头的夹角在160°范围内(水平)-87°范围内(垂直)之间，以获取最舒适的查看角度。

通过人体工程学，研究效果图与镜头的距离与三维效果的关系，并通过实际测试，得出该距离在0.25-6m时，人眼较为舒适，同时三维效果较强。优选的，结合美国人类学家爱德华·霍尔博士划分的四种距离，我们设定视觉效果图与镜头最优距离为3米。

通过了解VR设备显像原理，及目前多数的头戴式显示器(HMD)的单眼分辨率(1480*1440)及视场角(100°)。在VR中，由于画面是360度呈现的，这时用PPD来衡量画面的细腻程度，则会更方便。PPD，指每一度所包含的像素，Pixel Per Degree(像素每度)，即PPD＝单眼分辨率/视场角(fov)＝1480/100＝14.8。考虑VR行业的发展，设备分辨率会越来越大，因此，本实施例将PPD定为12-30，优选为20。

一米远的空间尺寸为1米的界面，通过三角函数得出视觉夹角约为等于50°，可以计算出最佳的空间界面尺寸与视觉界面设计分辨率尺寸(图在引擎下的单位比例，表示图片的清晰度)的转换关系为1m等于1000像素(视觉界面设计分辨率＝PPD*视场角＝20*50＝1000)，因此，视觉界面设计分辨率将依据PPD在500-1000范围内选取，最佳为1000px/米。

一米远的空间尺寸为1米的界面，通过上述描述可以得出视觉界面设计分辨率尺寸为1000px/米。通过视觉定律，我们知道近大远小的关系。那将1米的界面放到3米远，想达到一米远一样的视觉效果，需要对界面进行3倍放大。

因此，将Unity软件繁琐设置流程进行标准化及自动化。自动化即自动导入图片，自动修改Textture type(纹理类型)参数设置为sprite(2d and UI)，将视觉效果图转为可在unity场景中使用的资源；标准化即依据环境参数模板进行设置，优选设置效果图与终端镜头的夹角在160°范围内(水平)-87°范围内(垂直)之间，效果图与镜头的距离为3米，效果图缩放比例为3倍，pixels per Unit(视觉界面设计分辨率)默认值修改为1000，以此减少繁琐设置与反复测试修改距离与尺寸的过程，达到快速预览视觉设计效果图。

请参阅图2，在完成所述调整的预览状态下，能同时支持以下：

(1)在预览状态下，依据所述夹角、所述距离以及视距，对应所述效果图生成设计辅助参考线。

设计师可以通过同时显示在界面前的对应效果图的设计辅助参考线，在效果图的调整过程中，作为确认视觉设计效果图是否在舒适范围内的依据。如效果图与VR摄像机镜头之间的夹角在160°范围内(水平)-87°范围内(垂直)之间是相较舒适的，在对效果图进行修改的过程中，可以依据界面上的参考线来判断本次修改的结果是否导致效果图超出这个夹角，以便及时修正。

(2)预览状态下，依据接收到的操作指令对所述效果图进行设置并实时显示。所述操作指令包括缩放、旋转、平移、调整所述效果图与镜头距离。

本实施例能依据调整显示效果图后，依据设计师触发的操作指令对效果图进行调整，包括对视觉设计效果图进行缩放、旋转、平移、调整所述效果图与镜头距离等操作，并实时显示调整结果，而无需退出当前预览状态。所述操作指令通过设计师操作VR设备上的按键触发，或者通过与VR设备连接的其他设备操控触发。

(3)预览状态下，依据所述效果图当前的显示状态，在终端镜头前显示包括所述效果图的设计尺寸、当前缩放比例、旋转角度以及与镜头距离的信息参数。

通过实时获取视觉设计效果图显示信息，便于设计师了解当前参数状态，并有利于后续交与工程师实现界面还原。

实施例二

本实施例提供一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器读取时，能够执行实施例一中包含的所有步骤。在此相同内容不在复述，详情查阅实施例一的内容。

本实施例能够实现基于现有的VR终端，只需获取上述计算机程序，便可在获取视觉设计效果图后，即便捷地查看视觉设计效果图，并在预览状态下编辑并实时同步显示。

综上所述，本发明提供的一种基于UI查看视觉设计效果图的方法、存储介质，不仅能够直接基于现有的VR终端，在不对其进行任何硬件改进的前提下，通过软件改进便可实现便捷地查看视觉设计效果图，并在预览状态下编辑并实时同步显示；且预设的环境参数是基于人体工程学研究及设备显像原理研究获取，能够实现兼具设计图展示良好效果以及舒适的查阅状态；更重要的是，对于设计师而言，不需要通过Unity软件对视觉设计效果图及镜头的复杂设置、了解Unity软件还原视觉图像的原理，就可以直接查看视觉效果图，能够大大优化用户体验，并显著提高效果图的预览和修改效率。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种基于UI查看视觉设计效果图的方法，其特征在于，包括：

VR终端获取视觉设计效果图；

依据预设的环境参数模板调整所述视觉设计效果图的显示状态，所述环境参数模板包括设置所述效果图与终端镜头的夹角在水平160°范围内、垂直87°范围内、所述效果图与镜头的距离为0.25-6米、效果图缩放比例为2.5-6倍，以及视觉界面设计分辨率为500-1000px/米；

在完成所述调整的预览状态下，依据接收到的操作指令对所述效果图进行设置并显示。

2.如权利要求1所述的基于UI查看视觉设计效果图的方法，其特征在于，还包括：

预览状态下，依据所述夹角、所述距离以及视距，对应所述效果图生成设计辅助参考线。

3.如权利要求1所述的基于UI查看视觉设计效果图的方法，其特征在于，还包括：

预览状态下，依据所述效果图当前的显示状态，在终端镜头前显示包括所述效果图的设计尺寸、当前缩放比例、旋转角度以及与镜头距离的信息参数。

4.如权利要求1所述的基于UI查看视觉设计效果图的方法，其特征在于，所述环境参数模板中，所述效果图与镜头的距离为3米、效果图缩放比例为3倍、所述视觉界面设计分辨率为1000px/米；所述操作指令包括缩放、旋转、平移、调整所述效果图与镜头距离。

5.如权利要求1所述的基于UI查看视觉设计效果图的方法，其特征在于，所述VR终端获取视觉设计效果图，具体为：

上传视觉设计效果图至服务器；

建立所述服务器与VR终端的无线连接；

从所述服务器上下载所述视觉设计效果图至VR终端。

6.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序在被处理器读取时，能够执行以下步骤：

VR终端获取视觉设计效果图；

依据预设的环境参数模板调整所述视觉设计效果图的显示状态，所述环境参数模板包括设置所述效果图与终端镜头的夹角在水平160°范围内，垂直87°范围内、所述效果图与镜头的距离为0.25-6米，效果图缩放比例为2.5-6倍，以及视觉界面设计分辨率为500-1000px/米；

在完成所述调整的预览状态下，依据接收到的操作指令对所述效果图进行设置并显示。

7.如权利要求6所述的计算机可读存储介质，其特征在于，所述程序在被处理器读取时，还能执行以下步骤：

预览状态下，依据所述夹角、所述距离以及视距，对应所述效果图生成设计辅助参考线。

8.如权利要求6所述的计算机可读存储介质，其特征在于，所述程序在被处理器读取时，还能执行以下步骤：

预览状态下，依据所述效果图当前的显示状态，在终端镜头前显示包括所述效果图的设计尺寸、当前缩放比例、旋转角度以及与镜头距离的信息参数。

9.如权利要求6所述的计算机可读存储介质，其特征在于，所述环境参数模板中，所述效果图与镜头的距离为3米、效果图缩放比例为3倍、所述视觉界面设计分辨率为1000px/米。

10.如权利要求6所述的计算机可读存储介质，其特征在于，所述程序在被处理器读取时，还能执行以下步骤：

建议VR终端与服务器的无线连接；

从所述服务器上下载预先上传至服务器的视觉设计效果图至VR终端。