一种数字化美妆场景下的界面自适应方法及界面显示方法技术

本申请公开了一种数字化美妆场景下的界面自适应方法及界面显示方法，该方法包括：划分界面层级，确定各个组件位于所述界面的第一层，确定人脸图像位于所述界面的第二层；确定所述组件在所述第一层内第一网格坐标，和所述人脸图像在所述第二层的第二网格坐标；确定所述第一网格坐标和所述第二网格坐标中重合的部分占所述第一网格坐标的第一比例，判断所述第一比例超出第一预设阈值，则对所述组件执行相应操作。相应操作。相应操作。

【技术实现步骤摘要】
一种数字化美妆场景下的界面自适应方法及界面显示方法


[0001]本申请涉及界面自适应领域，尤其涉及一种数字化美妆场景下的界面自适应方法及界面显示方法。

技术介绍

[0002]随着计算机广泛进入人们的工作生活领域，人机交互界面也由此产生，但随着人们的需求不再局限于传统的图形界面，越来越便捷、更符合用户使用习惯的自适应界面由此产生。
[0003]目前，很多项目都需要做响应式或者自适应的形式来适应我们不同屏幕尺寸的手机，电脑等设备，但一般的自适应界面都是基于界面外边缘的响应。
[0004]在用户进行拍照或摄像时，一般的自适应界面只能够根据窗口的变化去调整界面中的组件位置，这很容易将用户的拍摄目标遮挡住，使用户不能清晰的观察摄像目标，给用户带来不好的体验。

技术实现思路

[0005]本申请提供了一种数字化美妆场景下的界面自适应方法及界面显示方法，解决了产品界面显示以及在拍照难以根据人像进行组件自适应调整的问题。
[0006]一种数字化美妆场景下的界面自适应方法，包括：
[0007]划分界面层级，确定各个组件位于所述界面的第一层，确定人脸图像位于所述界面的第二层；
[0008]确定所述组件在所述第一层内第一网格坐标，和所述人脸图像在所述第二层的第二网格坐标；
[0009]确定所述第一网格坐标和所述第二网格坐标中重合的部分占所述第一网格坐标的第一比例，判断所述第一比例超出第一预设阈值，则对所述组件执行相应操作。
[0010]在本申请的一种实施例中，确定所述组件在所述第一层内第一网格坐标，和所述人脸图像在所述第二层的第二网格坐标之后，所述方法还包括：根据所述第一网格坐标与所述第二网格坐标确定所述组件和所述人脸图像之间的最近距离；判断所述最近距离小于第二预设阈值，则对所述组件执行相应操作。
[0011]在本申请的一种实施例中，所述对所述组件执行相应操作，具体包括：减少所述组件在界面中所占的比例；确定所述组件当前占界面的第二比例，判断所述第二比例小于第三预设阈值，则将所述组件隐藏；或更改所述组件的透明度参数。
[0012]在本申请的一种实施例中，所述第一层为界面顶层，所述第二层为界面底层；所述方法还包括：在所述界面顶层与所述界面底层建立相同的网格坐标系；确定所述界面顶层中显示的组件区域，以及所述组件区域在所述网格坐标系中的坐标。
[0013]在本申请的一种实施例中，所述方法还包括：根据所述人脸图像的第二网格坐标变化确定所述人脸图像的移动方向；根据所述移动方向调整所述组件的位置和大小。
[0014]在本申请的一种实施例中，所述方法还包括：确定界面宽度和界面高度；当所述界面宽度和所述界面高度变化时，确定所述界面中显示的栅格数量，当所述栅格数量未在预设范围内时，调整所述组件位置；或根据所述组件与所述界面预设的固定比例，将所述组件进行同比例变化。
[0015]在本申请的一种实施例中，所述方法还包括：获取界面的第二层颜色数据，根据所述第二层颜色数据匹配组件显示数据；根据所述组件显示数据调整组件显示。
[0016]在本申请的一种实施例中，获取所述界面的第一层的颜色数据，根据所述第一层的颜色数据确定第二层的颜色数据。
[0017]一种数字化美妆场景下的界面自适应系统，包括：
[0018]分层单元，用于划分界面层级，确定各个组件位于所述界面的第一层，确定人脸图像位于所述界面的第二层；
[0019]坐标确认单元，用于确定所述组件在所述第一层内第一网格坐标，和所述人脸图像在所述第二层的第二网格坐标；
[0020]组件移动单元，用于确定所述第一网格坐标和所述第二网格坐标中重合的部分占所述第一网格坐标的第一比例，判断所述第一比例超出第一预设阈值，则对所述组件执行相应操作。
[0021]一种数字化美妆场景下的界面自适应设备，包括：
[0022]至少一个处理器；以及，
[0023]与所述至少一个处理器通过总线通信连接的存储器；其中，
[0024]所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器执行：
[0025]划分界面层级，确定各个组件位于所述界面的第一层，确定人脸图像位于所述界面的第二层；
[0026]确定所述组件在所述第一层内第一网格坐标，和所述人脸图像在所述第二层的第二网格坐标；
[0027]确定所述第一网格坐标和所述第二网格坐标中重合的部分占所述第一网格坐标的第一比例，判断所述第一比例超出第一预设阈值，则对所述组件执行相应操作。
[0028]一种非易失性存储介质，存储有计算机可执行指令，所述计算机可执行指令由处理器执行，以实现下述步骤：
[0029]划分界面层级，确定各个组件位于所述界面的第一层，确定人脸图像位于所述界面的第二层；
[0030]确定所述组件在所述第一层内第一网格坐标，和所述人脸图像在所述第二层的第二网格坐标；
[0031]确定所述第一网格坐标和所述第二网格坐标中重合的部分占所述第一网格坐标的第一比例，判断所述第一比例超出第一预设阈值，则对所述组件执行相应操作。
[0032]一种数字美妆场景下的界面显示方法，包括：
[0033]在第一界面的第一区域显示第一组件，当用户点击所述第一组件时，所述第一组件展开显示产品信息；所述第一组件以左侧边栏或右侧边栏形式显示；
[0034]当用户点击所述第一组件中显示的任一产品时，对所述产品进行下划线显示。
[0035]在本申请的一种实施例中，所述方法还包括：在第一界面的第二区域显示第二组件；当用户点击所述第二组件时，所述第二组件展开显示产品类型；接收用户滑动操作，响应于所述滑动操作，在整个界面显示产品类型的切换。
[0036]在本申请的一种实施例中，所述方法还包括：当用户录入产品时，在第二界面的第三区域显示产品品牌信息，在第四区域显示产品图片；在第五区域显示产品详细参数。
[0037]在本申请的一种实施例中，所述第一区域位于所述第一界面的左侧或所述第一界面的右侧，所述第一组件为主导航组件，所述主导航组件中显示产品大类。
[0038]在本申请的一种实施例中，所述第二区域位于所述第一界面的顶部，所述第二组件为次级导航组件，所述次级导航组件显示产品类型。
[0039]在本申请的一种实施例中，所述第三区域位于界面左上角，所述第四区域位于界面左侧；所述第五区域位于界面右侧；在所述第二界面的第六区域显示回购控件。
[0040]本申请提供了一种数字化美妆场景下的界面自适应方法及界面显示方法，至少包括以下有益效果：通过根据人像的位置和移动编排组件的位置和移动，保证用户能时刻识别到自己面部的基本信息，将响应式的基准从界面的外边缘带入到界面内部的信息中，界面网格中栏(Columns)和槽(Gutters)的适应性调整也要根据人像的位置、大小变动而发生。根据屏幕中人脸图像的变化做出适应性调整，以本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种数字化美妆场景下的界面自适应方法，其特征在于，包括：划分界面层级，确定各个组件位于所述界面的第一层，确定人脸图像位于所述界面的第二层；确定所述组件在所述第一层内第一网格坐标，和所述人脸图像在所述第二层的第二网格坐标；确定所述第一网格坐标和所述第二网格坐标中重合的部分占所述第一网格坐标的第一比例，判断所述第一比例超出第一预设阈值，则对所述组件执行相应操作。2.根据权利要求1所述的方法，其特征在于，确定所述组件在所述第一层内第一网格坐标，和所述人脸图像在所述第二层的第二网格坐标之后，所述方法还包括：根据所述第一网格坐标与所述第二网格坐标确定所述组件和所述人脸图像之间的最近距离；判断所述最近距离小于第二预设阈值，则对所述组件执行相应操作。3.根据权利要求1或2所述的方法，其特征在于，所述对所述组件执行相应操作，具体包括：减少所述组件在界面中所占的比例；确定所述组件当前占界面的第二比例，判断所述第二比例小于第三预设阈值，则将所述组件隐藏；或，更改所述组件的透明度参数。4.根据权利要求1所述的方法，其特征在于，所述第一层为界面顶层，所述第二层为界面底层；所述方法还包括：在所述界面顶层与所述界面底层建立相同的网格坐标系；确定所述界面顶层中显示的组件区域，以及所述组件区域在所述网格坐标系中的坐标。5.根据权利要求1所述的方法，其特征在于，所述方法还包括：根据所述人脸图像的第二网格坐标变化确定所述人脸图像的移动方向；根据所述移动方向调整所述组件的位置和大小。6.根据权利要求1所述的方法，其特征在于，所述方法还包括：确定界面宽度和界面高度；当所述界面宽度和所述界面高度变化时，确定所述界面中显示的栅格数量，当所述栅格数量未在预设范围内时，调整所述组件位置；或根据所述组件与所述界面预设的固定比例，将所述组件进行同比例变化。7.根据权利要求1所述的方法，其特征在于，所述方法还包括：获取界面的第二层颜色数据，根据所述第二层颜色数据匹配组件显示数据；根据所述组件显示数据调整组件显示。8.根据权利要求1所述的方法，其特征在于，所述方法还包括：获取所述界面的第一层的颜色数据，根据所述第一层的颜色数据确定第二层的颜色数据。9.一种数字化美妆场景下的界面自适应系统，其特征在于，包括：
分层单元，用于划分界面层级，确定各个组件位于所述界面的第一层，确定人脸图像位于所述界面的第二层；坐标确认单元，用于确定所述组件在所述第一层内第一网格坐标，和所述人脸图像在所述第二层的第二网格坐标；组件移动单元，用于确定所述第一网格坐标和所述第二网格坐标中重合的部分占所述第一网格坐标的第一比例，判断所...

【专利技术属性】
技术研发人员：席雪宁，徐迎庆，
申请(专利权)人：清华大学，
类型：发明
国别省市：