本申请公开了一种用户界面设计方法、装置、电子设备及计算机可读存储介质。其中，方法包括：在可视化设计界面显示基础用户界面，基础用户界面包括父元素以及属于父元素的各子元素，基础用户界面是各子元素按照父元素对应的布局规则进行布局后得到的；响应于对第一子元素的布局调整指令，生成第一子元素对应的布局调整信息；根据布局调整信息确定第一子元素在调整后的用户界面中显示时的布局信息；根据子元素的基础布局信息以及布局规则，确定各子元素中除第一子元素以外的第二子元素在调整后的用户界面中显示时的布局信息。使用本申请提供的方案，能够满足设计人员单独调整某个子元素的需求，改善了UI交互设计的易用性。改善了UI交互设计的易用性。改善了UI交互设计的易用性。
【技术实现步骤摘要】
用户界面设计方法、装置及电子设备
[0001]本申请涉及计算机
，具体涉及一种用户界面元素调整方法、装置、电子设备及计算机可读存储介质。
技术介绍
[0002]用户界面(UserInterface，简称UI)是软件和用户之间进行交互的媒介。UI设计通常指对软件的人机交互界面的整体设计，其中，通过可视化设计界面进行UI设计是设计人员常用的一种UI设计方式。具体的，设计人员可以通过在可视化设计界面中添加UI中的父元素以及父元素下的各子元素，并设置父元素下的各子元素的分布规则，该分布规则例如可以是等间距分布、左对齐分布、尺寸相同等，各子元素按照该分布规则进行分布，实现UI设计。
[0003]相关技术中，由于各子元素是按照设定的分布规则进行分布的，所以，当用户想要通过可视化设计界面修改某一个子元素时，由于要满足分布规则，其他子元素的位置通常也会发生变化，导致所设计的UI整体上可能会发生较大变化，无法满足设计人员单独调整某一个子元素的需求，使得交互设计的易用性较差，用户进行UI设计的灵活性较差。
技术实现思路
[0004]本申请提供了一种用户界面设计方法、装置、电子设备及计算机可读存储介质，能够满足设计人员单独调整某个子元素的需求，改善了UI交互设计的易用性，提高了设计人员进行UI设计的灵活性。具体方式如下。
[0005]第一方面，本申请实施例提供了一种用户界面设计方法，所述方法包括：
[0006]在可视化设计界面显示基础用户界面，所述基础用户界面包括父元素以及属于所述父元素的各子元素，所述基础用户界面是各所述子元素按照所述父元素对应的布局规则进行布局后得到的，所述基础用户界面对应设置有各所述子元素在所述基础用户界面中的基础布局信息；
[0007]响应于在所述可视化设计界面中触发的对各所述子元素中第一子元素的布局调整指令，生成所述第一子元素对应的布局调整信息，所述布局调整信息用于表示所述布局调整指令所指示的对所述第一子元素的调整内容；
[0008]根据所述布局调整信息确定所述第一子元素在调整后的用户界面中显示时的布局信息；
[0009]根据所述子元素的基础布局信息以及所述布局规则，确定第二子元素在调整后的用户界面中显示时的布局信息，所述第二子元素为各所述子元素中除所述第一子元素以外的子元素。
[0010]第二方面，本申请实施例还提供了一种用户界面设计装置，所述装置包括：
[0011]显示单元，用于在可视化设计界面显示基础用户界面，所述基础用户界面包括父元素以及属于所述父元素的各子元素，所述基础用户界面是各所述子元素按照所述父元素
对应的布局规则进行布局后得到的，所述基础用户界面对应设置有各所述子元素在所述基础用户界面中的基础布局信息；
[0012]生成单元，用于响应于在所述可视化设计界面中触发的对各所述子元素中第一子元素的布局调整指令，生成所述第一子元素对应的布局调整信息，所述布局调整信息用于表示所述布局调整指令所指示的对所述第一子元素的调整内容；
[0013]确定单元，用于根据所述布局调整信息确定所述第一子元素在调整后的用户界面中显示时的布局信息；根据所述子元素的基础布局信息以及所述布局规则，确定第二子元素在调整后的用户界面中显示时的布局信息，所述第二子元素为各所述子元素中除所述第一子元素以外的子元素。
[0014]第三方面，本申请实施例还提供了一种电子设备，包括：
[0015]处理器；以及
[0016]存储器，用于存储数据处理程序，该电子设备通电并通过所述处理器运行该程序后，执行如第一方面任一项所述的方法。
[0017]第四方面，本申请实施例还提供了一种计算机可读存储介质，存储有数据处理程序，该程序被处理器运行，执行如第一方面任一项所述的方法。
[0018]与现有技术相比，本申请具有以下优点：
[0019]本申请实施例提供的用户界面设计方法，在可视化设计界面显示基础用户界面，基础用户界面包括父元素以及属于该父元素的各子元素，基础用户界面是各子元素按照父元素对应的布局规则进行布局后得到的，基础用户界面对应设置有各子元素在基础用户界面中的基础布局信息；由于用户可能对基础用户界面中的某个子元素的布局有自己的设计想法，这种情况下，用户可以在可视化设计界面中触发对第一子元素的布局调整指令，电子设备响应于用户在可视化设计界面中触发的对第一子元素的布局调整指令，生成第一子元素对应的布局调整信息，由于布局调整信息用于表示布局调整指令所指示的对第一子元素的调整内容，所以，根据布局调整信息能够确定出第一子元素在调整后的用户界面中显示时的布局信息，所确定出的第一子元素在调整后的用户界面中显示时的布局信息能够很好地展示用户对第一子元素的个性化设置；另外，电子设备还根据上述子元素的基础布局信息以及父元素对应的布局规则确定第二子元素在调整后的用户界面中所显示的布局状态，由于第二子元素为各子元素中除第一子元素以外的子元素，所以，第二子元素通常是用户没有进行个性化调整设置的元素，用户通常还是希望将这些第二子元素的布局保持不变，以使得既能满足用户的个性化设计需求，又不会较大的影响用户界面的整体布局，本申请由于是根据子元素的基础布局信息以及父元素对应的布局规则确定的第二子元素在调整后的用户界面中显示时的布局信息，所以，第二子元素在调整后的用户界面中显示时的布局信息还能够保持与基础用户界面一致，且符合父元素的布局规则。
[0020]可见，本申请实施例提供的用户界面设计方法，既可以使用户在可视化设计界面中根据自己的个性化设计需求调整单个子元素的布局状态，也不会影响其他不需要调整的子元素的布局，从而对用户界面的整体布局影响较小，使得交互设计的易用性更好，提高了用户进行UI设计的灵活性。
附图说明
[0021]图1是本申请实施例提供的用户界面设计方法的流程图；
[0022]图2是本申请实施例中用户界面的一例示意图；
[0023]图3是通过本申请实施例提供的方法进行用户界面设计的效果图；
[0024]图4是本申请实施例提供的用户界面设计装置的单元框图；
[0025]图5是本申请实施例提供的用于实现用户界面设计的电子设备的逻辑结构示意图。
具体实施方式
[0026]在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。
[0027]通过可视化设计界面进行UI设计是设计人员常用的一种UI设计方式。例如，UIBuilder是unity引擎中加入的一种UI开发工具，它可以在可视化区域创建元素，在属性栏中更改属性值，并且根据UXML规则生成所创建的UI对应的UXML文件，基于该UXML文件显示界面。然而，用UIBuilder的可视化界面进行操作有十分多的限制，比如对于relative类型的元素，即归属于某个父元素的子元素，UIBu本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种用户界面设计方法，其特征在于，所述方法包括：在可视化设计界面显示基础用户界面，所述基础用户界面包括父元素以及属于所述父元素的各子元素，所述基础用户界面是各所述子元素按照所述父元素对应的布局规则进行布局后得到的，所述基础用户界面对应设置有各所述子元素在所述基础用户界面中的基础布局信息；响应于在所述可视化设计界面中触发的对各所述子元素中第一子元素的布局调整指令，生成所述第一子元素对应的布局调整信息，所述布局调整信息用于表示所述布局调整指令所指示的对所述第一子元素的调整内容；根据所述布局调整信息确定所述第一子元素在调整后的用户界面中显示时的布局信息；根据所述子元素的基础布局信息以及所述布局规则，确定第二子元素在调整后的用户界面中显示时的布局信息，所述第二子元素为各所述子元素中除所述第一子元素以外的子元素。2.根据权利要求1所述的方法，其特征在于，所述基础布局信息包括以下至少一种：相对于所述父元素的基础位置信息、基础尺寸信息、基础形状信息、基础填充色、基础文字字体；所述布局调整指令包括以下至少一种：位置移动指令、尺寸调整指令、形状调整指令、填充色调整指令、字体调整指令、删除指令。3.根据权利要求2所述的方法，其特征在于，所述布局调整指令为所述位置移动指令或所述尺寸调整指令时，所述生成所述第一子元素对应的布局调整信息，包括：确定所述布局调整指令所指示的布局信息与所述第一子元素对应的基础布局信息之间的差别信息，并将所述差别信息确定为所述第一子元素对应的布局调整信息；所述根据所述布局调整信息确定所述第一子元素在调整后的用户界面中显示时的布局信息，包括：根据所述布局调整信息与所述第一子元素的基础布局信息，确定所述第一子元素在调整后的用户界面中显示时的布局信息。4.根据权利要求2所述的方法，其特征在于，当所述布局调整指令为所述删除指令时，所述生成所述第一子元素对应的布局调整信息，包括：为所述第一子元素添加不可见的显示属性，并将所述不可见的显示属性确定为所述第一子元素对应的布局调整信息。5.根据权利要求1所述的方法，其特征在于，所述根据所述子元素的基础布局信息以及所述布局规则，确定第二子元素在调整后的用户界面中显示时的布局信息，包括：针对各第二子元素中未对应有布局调整信息的未调整子元素，根据所述未调整子元素对应的基础布局信息确定所述未调整子元素在调整后的用户界面中显示时的初步布局信息，并根据所述初步布局信息以及所述布局规则确定所述未调整子元素在调整后的用户界面中显示时的布局信息；针对各所述第二子元素中对应有布局调整信息的已调整子元素，根据所述已调整子元素对应的布局调整信息确定所述已调整子元素在调整后的用户界面中显示时的布局信息。6.根据权利要求5所述的方法，其特征在于，所述根据所述初步布局信息以及所述布局
规则确定所述未调整子元素在调整后的用户界面中显示时的布局信息，包括：在检测到各所述未调整子元素对应的初步布局...
【专利技术属性】
技术研发人员：李泓葆，刘勇成，胡志鹏，袁思思，程龙，
申请(专利权)人：网易杭州网络有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。