CN114253536A - 界面设计组件的调用方法、终端设备以及可读存储介质 - Google Patents
界面设计组件的调用方法、终端设备以及可读存储介质 Download PDFInfo
- Publication number
- CN114253536A CN114253536A CN202111518171.XA CN202111518171A CN114253536A CN 114253536 A CN114253536 A CN 114253536A CN 202111518171 A CN202111518171 A CN 202111518171A CN 114253536 A CN114253536 A CN 114253536A
- Authority
- CN
- China
- Prior art keywords
- interface
- component
- component library
- user
- design
- 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.)
- Granted
Links
- 238000013461 design Methods 0.000 title claims abstract description 105
- 238000000034 method Methods 0.000 title claims abstract description 65
- 230000004044 response Effects 0.000 claims abstract description 49
- 238000004590 computer program Methods 0.000 claims description 13
- 239000003086 colorant Substances 0.000 claims description 9
- 238000013479 data entry Methods 0.000 claims description 5
- 238000010586 diagram Methods 0.000 description 15
- 238000004891 communication Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 10
- 230000008878 coupling Effects 0.000 description 5
- 238000010168 coupling process Methods 0.000 description 5
- 238000005859 coupling reaction Methods 0.000 description 5
- 230000009286 beneficial effect Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 235000012745 brilliant blue FCF Nutrition 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000003796 beauty Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000003247 decreasing effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本申请提供了界面设计组件的调用方法、终端设备以及可读存储介质,该方法包括:响应于用户的操作,显示第一界面,该第一界面用于提供至少一个组件库的入口,至少一个组件库中的每个组件库包括多个界面模板,该多个界面模板的设计风格相同,每个界面模板用于提供界面设计的一种样式;响应于用户对至少一个组件库中的第一组件库的选择,显示第一组件库中的多个界面模板;响应于用户对多个界面模板中的第一界面模板的选择,调用第一界面模板。通过调用组件库中界面模板进行界面设计,有利于提高界面设计的效率,另外,界面模板的设计风格相同,使得消费者无需适应不同的设计风格,有利于提升体验感。
Description
技术领域
本申请涉及计算机技术领域,尤其涉及界面设计组件的调用方法、终端设备以及可读存储介质。
背景技术
企业信息化建设需求日益增多,产品迭代升级的速度越来越快。在产品快速迭代升级的情况下,企业中每开发一个产品,都需要花费大量的时间完成产品的界面设计,导致效率较低。
因此,希望提供一种方法,能够提高界面设计的效率,从而实现企业产品界面的高效设计。
发明内容
本申请提供了界面设计组件的调用方法、终端设备以及可读存储介质,以期能够提高界面设计的效率,从而实现企业产品界面的高效设计。
第一方面,本申请提供了一种界面设计组件的调用方法,所述方法可以由终端设备来执行,或者,也可以由配置在终端设备中的部件(如芯片、芯片系统等)执行,或者,还可以由能实现全部或部分终端设备功能的逻辑模块或软件实现,本申请对此不作限定。
示例性地,所述方法包括:响应于用户的操作,显示第一界面,所述第一界面用于提供至少一个组件库的入口,所述至少一个组件库中的每个组件库包括多个界面模板,所述多个界面模板的设计风格相同,且每个界面模板用于提供界面设计的一种样式;响应于所述用户对所述至少一个组件库中的第一组件库的选择,显示所述第一组件库中的多个界面模板;响应于所述用户对所述多个界面模板中的第一界面模板的选择,调用所述第一界面模板。
在上述技术方案中,响应于用户对第一界面上至少一个组件库中任意一个组件库的选择,终端设备可以调用该组件库中多个界面模板中的任意一个模板,以便于用户进行界面设计,简化了设计流程,缩短了设计时间,进而提升了设计效率。此外,该多个界面模板的设计风格相同,因此,用户针对不同的产品设计出的界面风格统一,无需消费者不断适应,提升了体验感,从而实现产品界面的高效设计。
结合第一方面,在第一方面某种可能的实现方式中,所述多个界面模板的设计风格相同,包括:所述多个界面模板中的同一类型的组件在所述多个界面模板的位置相同。
结合第一方面,在第一方面某种可能的实现方式中,所述第一组件库还包括基础组件,所述基础组件包括以下一项或多项:色彩组件、图标组件、信息导航组件、数据录入组件、数据展示组件、提示与反馈组件、系统布局组件和通用组件;以及所述响应于所述用户对所述至少一个组件库中的第一组件库的选择,显示所述第一组件库中的多个界面模板,包括:响应于所述用户对所述至少一个组件库中的第一组件库的选择,显示所述第一组件库中的所述多个界面模板和所述基础组件。
结合第一方面,在第一方面某种可能的实现方式中,所述基础组件包括所述色彩组件;以及所述方法还包括:响应于所述用户对所述色彩组件的选择,调用所述第一组件库中的所述色彩组件;基于所述用户所选择的色彩,生成多个色阶,所述多个色阶包括不同状态下对应的色彩。
结合第一方面,在第一方面某种可能的实现方式中,所述第一界面用于提供多个组件库的入口,所述多个组件库中的组件的格式互不相同。
结合第一方面,在第一方面某种可能的实现方式中,所述多个组件库中的基础组件相同,且所述多个组件库中的界面模板相同。
结合第一方面,在第一方面某种可能的实现方式中,所述第一界面还提供设计规范文档的入口和/或设计规范评分标准的入口,所述设计规范文档用于指示设计界面时的要求,所述设计规范评分标准用于指示根据所述设计规范文档对所述界面进行评分的规则。
结合第一方面,在第一方面某种可能的实现方式中,在所述响应于用户的操作,显示第一界面之前,所述方法还包括:显示第二界面,所述第二界面用于提供移动端组件库和电脑端组件库的入口,所述移动端组件库包括用于在移动端进行界面设计的至少一个组件库,所述电脑端组件库包括用于在电脑端进行界面设计的至少一个组件库;以及所述响应于用户的操作,显示第一界面,包括:响应于所述用户对所述移动端组件库的选择,显示第一界面,所述第一界面用于提供所述移动端组件库中的至少一个组件库;或响应于用户对所述电脑端组件库的选择,显示第一界面,所述第一界面用于提供所述电脑端组件库中的至少一个组件库。
第二方面,本申请提供了一种终端设备,其特征在于,包括用于实现第一方面和第一方面任一项可能的实现方式中所述的方法的单元。
第三方面,本申请提供了一种终端设备,其特征在于,包括处理器和存储器,所述处理器和所述存储器耦合,所述存储器用于存储计算机程序,所述处理器用于执行所述计算机程序,以使得所述终端设备实现第一方面和第一方面任一项可能的实现方式中所述的方法。
可选地,第三方面中的装置还包括存储器。
可选地,第三方面中的装置还包括通信接口,处理器与通信接口耦合。
第四方面,本申请提供了一种芯片系统,该芯片系统包括至少一个处理器,用于支持实现上述第一方面和第一方面任一种可能的实现方式中所涉及的功能,例如,接收或处理上述方法中所涉及的数据等。
在一种可能的设计中,所述芯片系统还包括存储器,所述存储器用于保存程序指令和数据,存储器位于处理器之内或处理器之外。
该芯片系统可以由芯片构成,也可以包含芯片和其他分立器件。
第五方面,本申请提供了一种计算机可读存储介质,所述计算机存储介质上存储有计算机程序(也可以称为代码,或指令),当所述计算机程序在被处理器运行时,使得上述第一方面和第一方面任一种可能的实现方式中的方法被执行。
应当理解的是,本申请的第二方面至第五方面与本申请的第一方面的技术方案相对应,各方面及对应的可行实施方式所取得的有益效果相似,不再赘述。
附图说明
图1是适用于本申请实施例提供的方法的应用场景;
图2是本申请实施例提供的一种界面设计组件的调用方法的示意性流程图;
图3是本申请实施例提供的第二界面的示意图;
图4是本申请实施例提供的第一界面的示意图;
图5是本申请实施例提供的第一界面的又一示意图;
图6是本申请实施例提供的第一组件库的多个界面模板的示意图;
图7是本申请实施例提供的第一组件库中的多个界面模板和基础组件的示意图;
图8是本申请实施例提供的多个色阶的示意图;
图9是本申请实施例提供的第一界面模板的示意图;
图10是本申请实施例提供的调用第一界面模板的示意图;
图11是本申请实施例提供的终端设备的示意性框图;
图12是本申请实施例提供的终端设备的又一示意性框图。
具体实施方式
这里将详细地对示例性实施例进行说明,其示例表示在附图中。下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
为更好地理解本申请实施例提供的界面设计组件的调用方法,首先对界面设计的理解作简单说明。
界面设计:也可以称为用户界面(user interface,UI)设计,是指对软件的人机交互、操作逻辑、界面美观的整体设计。界面设计要遵循的规范包括以下一项或多项:一致性原则、准确性原则、可读性原则、布局合理化原则和系统响应时间原则。其中,一致性原则是指界面直观、简洁,操作方便快捷,消费者接触软件后对界面上对应的功能一目了然。准确性原则是指使用一致的标记、标准缩写和颜色,显示信息的含义应该明确。可读性原则是指文字长度、文本对齐方式等符合大部分消费者的阅读习惯。布局合理化原则是指在进行设计时需要充分考虑布局的合理化问题,遵循用户从上而下,自左向右浏览、操作习惯,避免常用业务功能按键排列过于分散,以造成用户鼠标移动距离过长的弊端。系统响应时间原则是指系统响应时间应该适中。
为便于理解本申请实施例提供的方法,下面将结合图1对适用于本申请实施例提供的方法的应用场景进行说明。可理解的,本申请实施例描述的应用场景是为了更加清楚的说明本申请实施例的技术方案,并不构成对于本申请实施例提供的技术方案的限定。
图1是适用于本申请实施例提供的方法的应用场景。如图1所示,企业中每开发一个产品,用户可以通过终端设备110对该产品进行界面设计。其中,用户是指产品经理或UI设计师等,用户可以结合产品的特点、对消费者的调研结果等,通过终端设备110设计出符合该产品的界面,以便于消费者使用。
应理解,终端设备110可以是个人计算机(personal computer,PC),也可以是移动端设备。终端设备110例如包括但不限于:个人计算机、手机(mobile phone)、平板电脑(pad)、带无线收发功能的电脑(如笔记本电脑、掌上电脑等)、移动互联网设备(mobileinternet device,MID)等。
不难想象,如果企业中每开发一个产品,用户都对该产品的界面进行重新构思、设计,那随着产品迭代升级速度的加快,用户需要花费大量的时间完成产品的界面设计,导致效率较低。另外,如果同一企业的不同产品的界面设计风格多样无序,每开发一个新的界面,消费者都需要重新适应,操作时也易出错,导致体验感较差,进而导致无法完成产品界面的高效设计。
为解决上述问题,本申请提供了一种界面设计组件的调用方法,终端设备通过在第一界面上显示至少一个组件库的入口,以供用户选择合适的组件库,其中,每个组件库可提供多个界面模板,以供用户选择,用户可直接选择需要使用的界面模板来便可将其调用出来,操作简单,有利于加快用户的设计速度,进而提升设计效率。另外,每个组件库中多个界面模板的设计风格相同,使得用户针对不同的产品设计出的界面风格统一,无需消费者不断适应,有利于提升体验感。总的来说,有利于实现产品界面的高效设计。
下面以具体的实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。
应理解,下文所示的实施例以终端设备为执行主体来描述了本申请实施例提供的方法。需要说明的是,下文示出的实施例虽然以终端设备为例来描述,但不应对该方法的执行主体构成任何限定。只要能够通过运行记录有本申请实施例提供的方法的代码的程序,便可执行本申请实施例提供的方法。例如,终端设备也可以替换为配置在终端设备中的部件(如,芯片、芯片系统或其他能够调用程序并执行程序的功能模块等)。本申请实施例对此不作限定。
为了更好地理解本申请实施例提供的界面设计组件的调用方法,下文中将结合图2对本申请实施例提供的界面设计组件的调用方法进行详细说明。
图2是本申请实施例提供的一种界面设计组件的调用方法的示意性流程图。图2所示的方法200可以包括步骤210至步骤230,下面对图2中的各个步骤做详细说明。
在步骤210中,终端设备响应于用户的操作,显示第一界面,第一界面用于提供至少一个组件库的入口。
其中,上述至少一个组件库中的每个组件库包括多个界面模板,上述多个界面模板的设计风格相同,每个界面模板用于提供界面设计的一种样式。用户是指对产品进行界面设计的设计者。例如,用户包括但不限于:产品经理、UI设计师或前端开发工程师等。本申请实施例对用户的具体类型不作限定。用户的操作是指用户在终端设备上的操作,操作的类型包括但不限于:点击、勾选、输入、在下拉菜单中选择、拖拽等,本申请实施例对此不作限定。
一种可能的实现方式是,响应于用户的点击操作,终端设备显示第一界面,第一界面中提供至少一个组件库的入口,以便于用户选择至少一个组件库中的任意一个组件库。
可选地,在响应于用户的操作,显示第一界面之前,上述方法还包括:显示第二界面,第二界面用于提供移动端组件库和电脑端组件库的入口,移动端组件库包括用于在移动端进行界面设计的至少一个组件库,电脑端组件库包括用于在电脑端进行界面设计的至少一个组件库;以及响应于用户的操作,显示第一界面,包括:响应于用户对移动端组件库的选择,显示第一界面,第一界面用于提供移动端组件库中的至少一个组件库;或响应于用户对电脑端组件库的选择,显示第一界面,第一界面用于提供电脑端组件库中的至少一个组件库。
第二界面用于提供移动端组件库和电脑端组件库的入口,以便于用户基于自身使用的终端设备的类型,选择合适的组件库类型。
图3是本申请实施例提供的第二界面的示意图。如图3所示,第二界面上包括移动端组件库和电脑端组件库的入口。其中,移动端组件库包括用于在移动端进行界面设计的至少一个组件库,例如,用户在手机上对产品界面进行设计,可以通过点击移动端组件库的入口,进入移动端组件库。电脑端组件库包括用于在电脑端进行界面设计的至少一个组件库。例如,用户在个人计算机上对产品界面进行设计,可以通过点击电脑端组件库的入口,进入电脑端组件库。
需要说明的是,图3所示的第二界面仅为示例,不应对本申请实施例构成任何限定。例如,图3所示的第二界面还可以包括更多或更少的组件,本申请实施例对此不作限定。
响应于用户在第二界面上的操作,终端设备显示第一界面。若用户选择的是电脑端组件库,则终端设备显示的第一界面用于提供电脑端组件库中的至少一个组件库;若用户选择的是移动端组件库,则终端设备显示的第一界面用于提供移动端组件库中的至少一个组件库。
下面以响应于用户选择电脑端组件库的操作,终端设备显示出第一界面,第一界面用于提供电脑端组件库中的至少一个组件库为例,对第一界面进行详细说明。
图4是本申请实施例提供的第一界面的一示例。如图4所示,响应于用户选择“电脑端组件库”的操作,终端设备显示出第一界面。第一界面中可以提供至少一个组件库的入口。图4示出了电脑端组件库1、电脑端组件库2和电脑端组件库3共三个组件库的图标。示例性地,该三个组件库例如包括:电脑端Axure组件库、电脑端Sketch组件库和电脑端AdobeXD组件库。其中,电脑端Axure组件库也可以称为电脑端Axure部件库。图4示出了每一个组件库的图标下方还提供用于下载该组件库的按钮以及该组件库的版本。应理解,图4所示的组件库以及组件库对应的版本号仅为示例,不应对本申请实施例构成任何限定。例如,第一界面还可以包括更多或更少数量的组件库。又例如,第一界面还可以包括其他类型的组件库。
应理解,上文仅为示例,以电脑端组件库为例列举了几种可能的组件库,与之对应地,若用户选择了移动端组件库,该第一界面可以提供例如移动端Axure组件库、移动端Sketch组件库和移动端AdobeXD组件库的入口。本申请包含但不限于此。
可选地,第一界面还提供设计规范文档的入口和/或设计规范评分标准的入口,所述设计规范文档用于指示设计界面时的要求,所述设计规范评分标准用于指示根据所述设计规范文档对所述界面进行评分的规则。
第一界面还可以提供设计规范文档和/或设计规范评分标准的入口,如图5所示,第一界面除了提供至少一个组件库的入口外,还提供设计规范文档的入口和设计规范评分标准的入口。用户选择设计规范文档的入口后,终端设备可以显示对产品进行界面设计时的一些要求。例如,设计界面时左右两端留白的宽度要求、按钮使用要求等。用户选择设计规范评分标准的入口后,终端设备可以显示对设计出的界面进行评分的规则,该规则可以是根据上述设计规范文档中的要求设定的。例如,根据界面中左右两端留白的宽度进行评分,符合要求时,评分为100分。
可选地,第一界面用于提供多个组件库的入口,多个组件库中的组件的格式互不相同。
第一界面提供多个组件库的入口时,多个组件库中的组件的格式不同。例如,Axure组件库对应的格式为“.rplib”、Sketch组件库对应的格式为“.sketch”,Adobe XD组件库对应的格式为“.xd”。上述多个组件库可以供不同类型的用户使用。例如,产品经理可以选择Axure组件库,UI设计师可以选择Sketch组件库或Adobe XD组件库。其中,Sketch组件库可以适用于苹果操作系统,Adobe XD组件库可以适用于windows操作系统和苹果操作系统。
可选地,多个界面模板的设计风格相同,包括:多个界面模板中的同一类型的组件在多个界面模板的位置相同。
应理解,同一类型的组件在多个界面模板中的位置相同,具体是指,同一类型的组件在不同界面模板中的相对位置相同。例如,图标在多个界面模板中的位置均为左下方。又例如,退出按钮在多个界面模板中的位置均为右下方。
如此一来,消费者在使用同一企业的不同产品时,便可以快速找到相应的组件的位置,如退出按钮的位置,无需消费者中心适应新的设计风格,进而有利于提升消费者的体验感。
在步骤220中,终端设备响应于用户对至少一个组件库中的第一组件库的选择,显示第一组件库中的多个界面模板。
其中,选择的操作方式包括但不限于点击、勾选、输入、在下拉菜单中选择、拖拽等。第一组件库是第一界面上至少一个组件库中的任意一个。
示例性地,第一界面中包括至少一个组件库,终端设备响应于用户对至少一个组件库中的第一组件库的点击操作,显示第一组件库中的多个界面模板。
图6是本申请实施例提供的第一组件库的多个界面模板的示意图。如图6所示,第一组件库以电脑端组件库1V1.0为例,终端设备响应于用户对电脑端组件库1V1.0的选择,将电脑端组件库1V1.0中的多个界面模板中的部分界面模板显示在左下方,例如,模板1至模板6。应理解,点击界面模板右边的下拉菜单还可以选择更多的界面模板,左下方仅示出了模板1至模板6。还应理解,右边的空白面板可以用于用户进行界面设计。例如,根据产品特点编辑界面模板等。
可选地,第一组件库还包括基础组件,基础组件包括以下一项或多项:色彩组件、图标组件、信息导航组件、数据录入组件、数据展示组件、提示与反馈组件、系统布局组件和通用组件;以及响应于用户对所述至少一个组件库中的第一组件库的选择,显示第一组件库中的多个界面模板,包括:响应于用户对至少一个组件库中的第一组件库的选择,显示第一组件库中的多个界面模板和基础组件。
至少一个组件库中的每个组件库还可以包括基础组件,以用于用户进行界面设计。第一组件库包括的基础组件可以是上文列举的基础组件中的一项或多项。终端设备响应于用户对第一组件库的选择,显示第一组件库中的多个界面模板和基础组件。
图7是本申请实施例提供的第一组件库中的多个界面模板和基础组件的示意图。如图7所示,第一组件库以电脑端组件库1V1.0为例,终端设备响应于用户对电脑端组件库1V1.0的选择,将电脑端组件库1V1.0中的多个界面模板和基础组件显示在左下方。例如,基础组件包括图标,终端设备的左下方显示出多个图标,分别为图标1、图标2和图标3。多个模板包括模板1至模板6。应理解,点击界面模板右边的下拉菜单还可以选择更多的界面模板,点击图标右边的下拉菜单还可以选择更多的图标。还应理解,图7示出的基础组件仅为示例,不应对本申请实施例构成任何限定。例如,第一组件库中的基础组件还可以包括色彩组件、信息导航组件、数据录入组件、数据展示组件、提示与反馈组件、系统布局组件和通用组件等。
可选地,上述基础组件包括色彩组件;以及上述方法还包括:响应于用户对色彩组件的选择,调用第一组件库中的色彩组件;基于用户所选择的色彩,生成多个色阶,多个色阶包括不同状态下对应的色彩。
基础组件包括色彩组件,色彩组件可以用于用户对产品界面的色彩进行设计。示例性地,对于某一图标来说,不对其进行操作时,显示出一个色彩,而对其进行不同的操作又会显示出不同的色彩,如此一来,这些色彩都是需要用户在进行界面设计时需要考虑的,如点击该图标和鼠标滑过该图标的色彩可能是不同的。
在本申请实施例中,响应于用户对色彩组件的选择,调用第一组件库中的色彩组件,色彩组件中包括多个色彩,响应于用户对其中某一色彩的选择,终端设备基于用户所选择的色彩,生成多个色阶,多个色阶包括不同状态下对应的色彩。例如,终端设备可以基于色相(hues,H)、饱和度(saturation,S)、亮度(brightness,B)(可简称为HSB)色彩模式生成多个色阶,如将HSB色彩模式对应的色彩的值进行递减或递增计算得到多个色阶。具体的HSB色彩模式的相关说明可以参看已知的技术,为了简洁,此处不再赘述。
图8是本申请实施例提供的多个色阶的示意图。如图8所示,以红色、橙色、蓝色、灰色为例。用户选择任意一个色彩,终端设备均可以生成该色彩对应的10个色阶。对于红色来说,10个色阶分别为红色1至10,对于橙色来说,10个色阶分别为橙色1至10,对于蓝色来说,10个色阶分别为蓝色1至10,对于灰色来说,10个色阶分别为灰色1至10。示例性地,若用户选择的色彩为蓝色,响应于用户的操作,终端设备可以将蓝色6设置为主色,将蓝色7设置为点击时的色彩,将蓝色1设置为鼠标滑过的色彩等,为了简洁,此处不再一一列举。
应理解,图8所示的10个色阶仅为示例,基于同一HSB色彩模式,也可以计算得到其他数量的色阶,本申请对此不作限定。
可选地,多个组件库中的基础组件相同,且多个组件库中的界面模板相同。
多个组件库中的基础组件相同,且多个组件库中的界面模板相同,使得不同的用户选择不同的组件库进行界面设计时,所设计出的界面的设计风格是相同的,有利于提升消费者的体验感。
示例性地,多个组件库中包括相同的基础组件,且包括相同的界面模板。无论用户选择哪一个组件库进行界面设计,均可以调用相同的界面模板和基础组件。
在步骤230中,终端设备响应于用户对多个界面模板中的第一界面模板的选择,调用第一界面模板。
其中,第一界面模板是多个界面模板中的任意一个模板。响应于用户对第一界面模板的选择,如将第一界面模板拖拽至右边的空白面板上,终端设备调用第一界面模板,如此一来,右边的空白面板上便可以显示出第一界面模板,以便于用户在第一界面模板中填写产品的相关信息,完成产品的界面设计。
图9是本申请实施例提供的第一界面模板的示意图。如图9所示,第一界面模板以高级详情页的模板为例。该高级详情页的模板中包括项目信息标题1、项目信息标题2、项目信息标题3和项目信息标题4。其中,项目信息标题1例如可以是项目流程,项目流程包括步骤1至步骤5,已经完成的步骤采用粗线示出。项目信息标题2例如可以是项目描述,项目描述分为项目名称和项目文字描述。项目信息标题3例如可以是项目文件,项目文件分为文件类型、附件、创建人和操作。项目信息标题4例如可以是该项目的处理人。
图10是本申请实施例提供的调用第一界面模板的示意图。响应于用户对第一界面模板的选择,如将第一界面模板拖拽至右边空白面板,则终端设备调用并将第一界面模板显示在右边的空白面板上,以供用户根据产品填写第一界面模板中的信息,从而形成该产品对应的界面。
基于上述技术方案,响应于用户对第一界面上至少一个组件库中任意一个组件库的选择,终端设备可以调用该组件库中多个界面模板中的任意一个模板,以便于用户进行界面设计,简化了设计流程,缩短了设计时间,进而提升了设计效率。此外,多个界面模板的设计风格相同,因此,用户针对不同的产品设计出的界面风格统一,无需消费者不断适应,提升了体验感,从而有利于产品界面的高效设计。
下文将结合图11和图12详细说明本申请实施例提供的终端设备。
图11是本申请实施例提供的终端设备1100的示意性框图。如图11所示,该终端设备1100可以包括:显示单元1110和调用单元1120。该终端设备1100中的各单元可用于实现图2所示实施例中所述的方法。
示例性地,终端设备1100中的显示单元1110用于响应于用户的操作,显示第一界面,所述第一界面用于提供至少一个组件库的入口,所述至少一个组件库中的每个组件库包括多个界面模板,所述多个界面模板的设计风格相同,每个界面模板用于提供界面设计的一种样式;响应于所述用户对所述至少一个组件库中的第一组件库的选择,显示所述第一组件库中的多个界面模板;调用单元1120用于响应于所述用户对所述多个界面模板中的第一界面模板的选择,调用所述第一界面模板。
可选地,所述多个界面模板的设计风格相同,包括:所述多个界面模板中的同一类型的组件在所述多个界面模板的位置相同。
可选地,所述第一组件库还包括基础组件,所述基础组件包括以下一项或多项:色彩组件、图标组件、信息导航组件、数据录入组件、数据展示组件、提示与反馈组件、系统布局组件和通用组件;以及显示单元1110具体用于响应于所述用户对所述至少一个组件库中的第一组件库的选择,显示所述第一组件库中的所述多个界面模板和所述基础组件。
可选地,所述基础组件包括所述色彩组件;以及所述调用单元1120还用于响应于所述用户对所述色彩组件的选择,调用所述第一组件库中的色彩组件;基于所述用户所选择的色彩,生成多个色阶,所述多个色阶包括不同状态下对应的色彩。
可选地,所述第一界面用于提供多个组件库的入口,所述多个组件库中的组件的格式互不相同。
可选地,所述多个组件库中的基础组件相同,且所述多个组件库中的界面模板相同。
可选地,所述第一界面还提供设计规范文档的入口和/或设计规范评分标准的入口,所述设计规范文档用于指示设计界面时的要求,所述设计规范评分标准用于指示根据所述设计规范文档对所述界面进行评分的规则。
可选地,所述显示单元1110还用于显示第二界面,所述第二界面用于提供移动端组件库和电脑端组件库的入口,所述移动端组件库包括用于在移动端进行界面设计的至少一个组件库,所述电脑端组件库包括用于在电脑端进行界面设计的至少一个组件库;以及所述显示单元1110具体用于响应于所述用户对所述移动端组件库的选择,显示第一界面,所述第一界面用于提供所述移动端组件库中的至少一个组件库;或响应于用户对所述电脑端组件库的选择,显示第一界面,所述第一界面用于提供所述电脑端组件库中的至少一个组件库。
应理解,本申请实施例中对单元的划分是示意性的,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式。另外,在本申请各个实施例中的各功能单元可以集成在一个处理器中,也可以是单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
图12是本申请实施例提供的终端设备1200的另一示意性框图。该终端设备1200可以为芯片系统,或者,也可以为配置了芯片系统,以用于实现上述方法实施例中界面设计组件的调用方法的装置。在本申请实施例中,芯片系统可以由芯片构成,也可以包含芯片和其他分立元器件。
如图12所示,该终端设备1200可以包括处理器1210和通信接口1220。其中,通信接口1220可用于通过传输介质和其它设备进行通信,从而用于终端设备1200可以和其它设备进行通信。所述通信接口1220例如可以是收发器、接口、总线、电路或者能够实现收发功能的装置。处理器1210可利用通信接口1220输入输出数据,并用于实现图2所示的实施例中所述的方法。
示例性地,若该终端设备1200用于实现图2所示实施例中所述的方法,该处理器1210可用于响应于用户的操作,显示第一界面,所述第一界面用于提供至少一个组件库的入口,所述至少一个组件库中的每个组件库包括多个界面模板,所述多个界面模板的设计风格相同,每个界面模板用于提供界面设计的一种样式;响应于所述用户对所述至少一个组件库中的第一组件库的选择,显示所述第一组件库中的多个界面模板;响应于所述用户对所述多个界面模板中的第一界面模板的选择,调用所述第一界面模板。具体参见方法实施例中的详细描述,此处不作赘述。
可选地,该终端设备1200还包括至少一个存储器1230,用于存储程序指令和/或数据。存储器1230和处理器1210耦合。本申请实施例中的耦合是装置、单元或模块之间的间接耦合或通信连接,可以是电性,机械或其它的形式,用于装置、单元或模块之间的信息交互。处理器1210可能和存储器1230协同操作。处理器1210可能执行存储器1230中存储的程序指令。所述至少一个存储器中的至少一个可以包括于处理器中。
本申请实施例中不限定上述处理器1210、通信接口1220以及存储器1230之间的具体连接介质。本申请实施例在图12中以处理器1210、通信接口1220以及存储器1230之间通过总线1240连接。总线1240在图12中以粗线表示,其它部件之间的连接方式,仅是进行示意性说明,并不引以为限。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示,图12中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
本申请还提供一种计算机程序产品,所述计算机程序产品包括:计算机程序(也可以称为代码,或指令),当所述计算机程序被运行时,使得计算机执行图2所示实施例中所述的方法。
本申请还提供一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序(也可以称为代码,或指令)。当所述计算机程序被运行时,使得计算机执行图2所示实施例中所述的方法。
应理解,本申请实施例中的处理器可以是一种集成电路芯片,具有信号的处理能力。在实现过程中,上述方法实施例的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器、数字信号处理器(digitalsignal processor,DSP)、专用集成电路(application specific integrated circuit,ASIC)、现场可编程门阵列(field programmable gate array,FPGA)或者其他可编程逻辑器件、分立门电路或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成,或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器,闪存、只读存储器,可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器,处理器读取存储器中的信息,结合其硬件完成上述方法的步骤。
还应理解,本申请实施例中的存储器可以是易失性存储器或非易失性存储器,或可包括易失性和非易失性存储器两者。其中,非易失性存储器可以是只读存储器(read-only memory,ROM)、可编程只读存储器(programmable ROM,PROM)、可擦除可编程只读存储器(erasable PROM,EPROM)、电可擦除可编程只读存储器(electrically EPROM,EEPROM)或闪存。易失性存储器可以是随机存取存储器(random access memory,RAM),其用作外部高速缓存。通过示例性但不是限制性说明,许多形式的RAM可用,例如静态随机存取存储器(static RAM,SRAM)、动态随机存取存储器(dynamic RAM,DRAM)、同步动态随机存取存储器(synchronous DRAM,SDRAM)、双倍数据速率同步动态随机存取存储器(double data rateSDRAM,DDR SDRAM)、增强型同步动态随机存取存储器(enhanced SDRAM,ESDRAM)、同步连接动态随机存取存储器(synchlink DRAM,SLDRAM)和直接内存总线随机存取存储器(directrambus RAM,DR RAM)。应注意,本文描述的系统和方法的存储器旨在包括但不限于这些和任意其它适合类型的存储器。
本说明书中使用的术语“单元”、“模块”等,可用于表示计算机相关的实体、硬件、固件、硬件和软件的组合、软件、或执行中的软件。
本领域普通技术人员可以意识到,结合本文中所公开的实施例描述的各种说明性逻辑块(illustrative logical block)和步骤(step),能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本申请的范围。在本申请所提供的几个实施例中,应该理解到,所揭露的装置、设备和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分立部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
在上述实施例中,各功能单元的功能可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时,可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令(程序)。在计算机上加载和执行所述计算机程序指令(程序)时,全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一个计算机可读存储介质传输,例如,所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(digital subscriber line,DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质,(例如,软盘、硬盘、磁带)、光介质(例如,数字通用光盘(digital video disc,DVD))、或者半导体介质(例如固态硬盘(solid state disk,SSD))等。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本申请揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以所述权利要求的保护范围为准。
Claims (11)
1.一种界面设计组件的调用方法,其特征在于,包括:
响应于用户的操作,显示第一界面,所述第一界面用于提供至少一个组件库的入口,所述至少一个组件库中的每个组件库包括多个界面模板,所述多个界面模板的设计风格相同,且每个界面模板用于提供界面设计的一种样式;
响应于所述用户对所述至少一个组件库中的第一组件库的选择,显示所述第一组件库中的多个界面模板;
响应于所述用户对所述多个界面模板中的第一界面模板的选择,调用所述第一界面模板。
2.如权利要求1所述的方法,其特征在于,所述多个界面模板的设计风格相同,包括:
所述多个界面模板中的同一类型的组件在所述多个界面模板的位置相同。
3.如权利要求1所述的方法,其特征在于,所述第一组件库还包括基础组件,所述基础组件包括以下一项或多项:色彩组件、图标组件、信息导航组件、数据录入组件、数据展示组件、提示与反馈组件、系统布局组件和通用组件;以及
所述响应于所述用户对所述至少一个组件库中的第一组件库的选择,显示所述第一组件库中的多个界面模板,包括:
响应于所述用户对所述至少一个组件库中的第一组件库的选择,显示所述第一组件库中的所述多个界面模板和所述基础组件。
4.如权利要求3所述的方法,其特征在于,所述基础组件包括所述色彩组件;以及
所述方法还包括:
响应于所述用户对所述色彩组件的选择,调用所述第一组件库中的所述色彩组件;
基于所述用户所选择的色彩,生成多个色阶,所述多个色阶包括不同状态下对应的色彩。
5.如权利要求3或4所述的方法,其特征在于,所述第一界面用于提供多个组件库的入口,所述多个组件库中的组件的格式互不相同。
6.如权利要求5所述的方法,其特征在于,所述多个组件库中的基础组件相同,且所述多个组件库中的界面模板相同。
7.如权利要求1所述的方法,其特征在于,所述第一界面还提供设计规范文档的入口和/或设计规范评分标准的入口,所述设计规范文档用于指示设计界面时的要求,所述设计规范评分标准用于指示根据所述设计规范文档对所述界面进行评分的规则。
8.如权利要求1所述的方法,其特征在于,在所述响应于用户的操作,显示第一界面之前,所述方法还包括:
显示第二界面,所述第二界面用于提供移动端组件库和电脑端组件库的入口,所述移动端组件库包括用于在移动端进行界面设计的至少一个组件库,所述电脑端组件库包括用于在电脑端进行界面设计的至少一个组件库;以及
所述响应于用户的操作,显示第一界面,包括:
响应于所述用户对所述移动端组件库的选择,显示所述第一界面,所述第一界面用于提供所述移动端组件库中的至少一个组件库;或
响应于用户对所述电脑端组件库的选择,显示所述第一界面,所述第一界面用于提供所述电脑端组件库中的至少一个组件库。
9.一种终端设备,其特征在于,包括用于实现如权利要求1至8中任一项所述的方法的单元。
10.一种终端设备,其特征在于,包括处理器和存储器,所述处理器和所述存储器耦合,所述存储器用于存储计算机程序,所述处理器用于执行所述计算机程序,以使得所述终端设备实现如权利要求1至8中任一项所述的方法。
11.一种计算机可读存储介质,其特征在于,包括计算机程序,当所述计算机程序在计算机上运行时,使得所述计算机执行如权利要求1至8中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111518171.XA CN114253536B (zh) | 2021-12-13 | 界面设计组件的调用方法、终端设备以及可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111518171.XA CN114253536B (zh) | 2021-12-13 | 界面设计组件的调用方法、终端设备以及可读存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN114253536A true CN114253536A (zh) | 2022-03-29 |
CN114253536B CN114253536B (zh) | 2024-11-05 |
Family
ID=
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114816625A (zh) * | 2022-04-08 | 2022-07-29 | 郑州铁路职业技术学院 | 一种自动交互系统界面设计方法和装置 |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2002202779A (ja) * | 1996-05-27 | 2002-07-19 | Yamaha Corp | 自動メロディ生成装置および記録媒体 |
CN102609964A (zh) * | 2012-01-17 | 2012-07-25 | 湖北莲花山计算机视觉和信息科学研究院 | 肖像剪纸的生成方法 |
CN105786464A (zh) * | 2014-12-23 | 2016-07-20 | 远光软件股份有限公司 | 基于模板库的界面设计方法及装置 |
CN106406846A (zh) * | 2015-08-03 | 2017-02-15 | 腾讯科技(深圳)有限公司 | 显示界面的创建方法及装置 |
CN111666526A (zh) * | 2020-06-17 | 2020-09-15 | 广州市百果园信息技术有限公司 | 页面生成方法、装置、设备及存储介质 |
CN113312025A (zh) * | 2020-02-26 | 2021-08-27 | 北京同邦卓益科技有限公司 | 组件库生成方法及装置、存储介质、电子设备 |
CN113535164A (zh) * | 2021-06-11 | 2021-10-22 | 中电金信软件有限公司 | 一种前端界面的生成方法、装置、电子设备及存储介质 |
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2002202779A (ja) * | 1996-05-27 | 2002-07-19 | Yamaha Corp | 自動メロディ生成装置および記録媒体 |
CN102609964A (zh) * | 2012-01-17 | 2012-07-25 | 湖北莲花山计算机视觉和信息科学研究院 | 肖像剪纸的生成方法 |
CN105786464A (zh) * | 2014-12-23 | 2016-07-20 | 远光软件股份有限公司 | 基于模板库的界面设计方法及装置 |
CN106406846A (zh) * | 2015-08-03 | 2017-02-15 | 腾讯科技(深圳)有限公司 | 显示界面的创建方法及装置 |
CN113312025A (zh) * | 2020-02-26 | 2021-08-27 | 北京同邦卓益科技有限公司 | 组件库生成方法及装置、存储介质、电子设备 |
CN111666526A (zh) * | 2020-06-17 | 2020-09-15 | 广州市百果园信息技术有限公司 | 页面生成方法、装置、设备及存储介质 |
CN113535164A (zh) * | 2021-06-11 | 2021-10-22 | 中电金信软件有限公司 | 一种前端界面的生成方法、装置、电子设备及存储介质 |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114816625A (zh) * | 2022-04-08 | 2022-07-29 | 郑州铁路职业技术学院 | 一种自动交互系统界面设计方法和装置 |
CN114816625B (zh) * | 2022-04-08 | 2023-06-16 | 郑州铁路职业技术学院 | 一种自动交互系统界面设计方法和装置 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US9208216B2 (en) | Transforming data into consumable content | |
US11170159B1 (en) | System and method for using a dynamic webpage editor | |
CN112540763A (zh) | 前端页面生成方法、装置、平台设备及存储介质 | |
US20110289407A1 (en) | Font recommendation engine | |
US20120017161A1 (en) | System and method for user interface | |
US8893081B2 (en) | Selectively enabling runtime editing of an application | |
US20190340230A1 (en) | System and method for generating websites from predefined templates | |
CN104704468A (zh) | Web应用程序的跨系统安装 | |
RU2639667C2 (ru) | Контекстное приглашение в пробной версии приложения | |
US20150212670A1 (en) | Highly Customizable New Tab Page | |
US11675967B2 (en) | Automated front-end code generating method and system for a website | |
CN109992580A (zh) | 列表数据的处理方法及装置、存储介质、计算机设备 | |
CN109255104B (zh) | 批文模板配置方法、装置、计算机设备及存储介质 | |
CN116304442A (zh) | 页面代码生成方法、装置、电子设备以及存储介质 | |
CN114048415A (zh) | 表单生成方法及装置、电子设备和计算机可读存储介质 | |
CN106970758A (zh) | 电子文档操作处理方法、装置和电子设备 | |
CN117724714A (zh) | 工作流创建方法、装置、电子设备和计算机可读存储介质 | |
KR101383056B1 (ko) | 스크립트를 이용하여 메뉴를 연동시킨 웹 어플리케이션 제공 방법 및 그를 이용한 스마트 단말 | |
CN113900725A (zh) | 接口配置方法、装置、计算机设备和存储介质 | |
US9645798B1 (en) | Using program code to generate help information, and using help information to generate program code | |
EP3472728A1 (en) | Deconstructing and rendering of web page into native application experience | |
CN110780970A (zh) | 数据筛选方法、装置、设备及计算机可读存储介质 | |
CN114253536B (zh) | 界面设计组件的调用方法、终端设备以及可读存储介质 | |
CN114253536A (zh) | 界面设计组件的调用方法、终端设备以及可读存储介质 | |
CN115629763A (zh) | 目标代码的生成方法、npu指令的显示方法及装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant |