CN106484388A - 用户界面的实现方法和装置 - Google Patents

用户界面的实现方法和装置 Download PDF

Info

Publication number
CN106484388A
CN106484388A CN201510557302.3A CN201510557302A CN106484388A CN 106484388 A CN106484388 A CN 106484388A CN 201510557302 A CN201510557302 A CN 201510557302A CN 106484388 A CN106484388 A CN 106484388A
Authority
CN
China
Prior art keywords
screen
wide
terminal
grid
user interface
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
Application number
CN201510557302.3A
Other languages
English (en)
Other versions
CN106484388B (zh
Inventor
刘翰墨
郑哲
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201510557302.3A priority Critical patent/CN106484388B/zh
Publication of CN106484388A publication Critical patent/CN106484388A/zh
Application granted granted Critical
Publication of CN106484388B publication Critical patent/CN106484388B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本发明涉及一种用户界面的实现方法和装置。所述方法包括以下步骤:获取以栅格长度为基本单元标注的用户界面;获取终端的屏幕宽的逻辑像素个数及屏幕宽的栅格数;根据所述屏幕宽的逻辑像素个数及屏幕宽的栅格数得到单个栅格所对应的逻辑像素个数;将以栅格长度为基本单元标注的用户界面根据单个栅格所对应的逻辑像素个数转换为以逻辑像素为基本单元标注的用户界面。上述用户界面的实现方法和装置,以栅格长度为基本单元标注用户界面,得到单个栅格所对应的逻辑像素个数,将栅格长度标注的用户界面转换为逻辑像素为基本单元标注的用户界面,以适配各种分辨率的设备,不需针对不同分辨率的终端分别设计用户界面,节省设计时间。

Description

用户界面的实现方法和装置
技术领域
本发明涉及网页设计领域,特别是涉及一种用户界面的实现方法和装置。
背景技术
随着移动终端的普及,越来越多的用户使用移动终端浏览网页。传统的移动终端的UI(User Interface,用户界面)是以pixel(物理像素)为长度单位来设计和标注的,包含文字、图片的尺寸、间距和宽高等。由于IOS和Android各种设备的屏幕分辨率各不相同,因此设计者通常要分别设计多种不同屏幕分辨率(分辨率是指屏幕能够显示的像素个数)下的效果图,分别标注,使不同像素密度的设备有相同的视觉效果。
然而,设计者需要针对多个分辨率做几个版本的用户界面,需要花费大量的时间精力且无法全面覆盖。
发明内容
基于此,有必要针对传统的用户界面实现需要针对不同的分辨率分别设计,耗费大量时间的问题,提供一种用户界面的实现方法,能适用不同分辨率,不需针对不同分辨率分别设计,节省设计时间。
此外,还有必要提供一种用户界面的实现装置,能适用不同分辨率,不需针对不同分辨率分别设计,节省设计时间。
一种用户界面的实现方法,包括以下步骤:
获取以栅格长度为基本单元标注的用户界面;
获取终端的屏幕宽的逻辑像素个数及屏幕宽的栅格数;
根据所述屏幕宽的逻辑像素个数及屏幕宽的栅格数得到单个栅格所对应的逻辑像素个数;
将以栅格长度为基本单元标注的用户界面根据单个栅格所对应的逻辑像素个数转换为以逻辑像素为基本单元标注的用户界面。
一种用户界面的实现装置,包括:
界面获取模块,用于获取以栅格长度为基本单元标注的用户界面;
参数获取模块,用于获取终端的屏幕宽的逻辑像素个数及屏幕宽的栅格数;
比值获取模块,用于根据所述屏幕宽的逻辑像素个数及屏幕宽的栅格数得到单个栅格所对应的逻辑像素个数;
转换模块,用于将以栅格长度为基本单元标注的用户界面根据单个栅格所对应的逻辑像素个数转换为以逻辑像素为基本单元标注的用户界面。
上述用户界面的实现方法和装置,以栅格长度为基本单元标注用户界面,通过获取到终端的屏幕宽的逻辑像素个数及屏幕宽的栅格数,得到单个栅格所对应的逻辑像素个数,将栅格长度标注的用户界面转换为逻辑像素为基本单元标注的用户界面,以适配各种分辨率的设备,不需针对不同分辨率的终端分别设计用户界面,节省设计时间;通过栅格长度标注,只需转换为逻辑像素,不需转换为物理像素,避免可转换物理像素可能产生误差的情况,能够更加方便和精准地进行用户界面开发。
附图说明
图1为一个实施例中终端的内部结构示意图;
图2为一个实施例中服务器的内部结构示意图;
图3为一个实施例中用户界面的实现方法的流程图;
图4A为传统的用户界面采用物理像素标注的效果示意图;
图4B为对用户界面采用栅格长度标注的效果示意图;
图5为网页中栅格单元的示意图;
图6为用户界面分割成栅格的示意图;
图7为以iphone6为例的栅格分割示意图;
图8为一个实施例中用户界面的实现装置的结构框图;
图9为另一个实施例中用户界面的实现装置的结构框图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
图1为一个实施例中终端的内部结构示意图。如图1所示,该终端包括通过系统总线连接的处理器、存储介质、内存和网络接口、声音采集装置、显示屏、扬声器和输入装置。其中,终端的存储介质存储有操作系统,还包括一种用户界面的实现装置,该用户界面的实现装置用于实现一种用户界面的实现方法。该处理器用于提供计算和控制能力,支撑整个终端的运行。终端中的内存为存储介质中的用户界面的实现装置的运行提供环境,网络接口用于与服务器进行网络通信,如发送数据请求至服务器,接收服务器返回的数据等。终端的显示屏可以是液晶显示屏或者电子墨水显示屏等,输入装置可以是显示屏上覆盖的触摸层,也可以是终端外壳上设置的按键、轨迹球或触控板,也可以是外接的键盘、触控板或鼠标等。该终端可以是手机、平板电脑或者个人数字助理等。本领域技术人员可以理解,图1中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的终端的限定,具体的终端可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
图2为一个实施例中服务器的内部结构示意图。如图3所示,该服务器包括通过系统总线连接的处理器、存储介质、内存和网络接口。其中,该服务器的存储介质存储有操作系统、数据库和用户界面的实现装置,数据库中存储有用户界面的数据信息及排版信息,该用户界面的实现装置用于实现适用于服务器的一种用户界面的实现方法。该服务器的处理器用于提供计算和控制能力,支撑整个服务器的运行。该服务器的内存为存储介质中的用户界面的实现装置的运行提供环境。该服务器的网络接口用于据以与外部的终端通过网络连接通信,比如接收终端发送的数据请求以及向终端返回数据等。服务器可以用独立的服务器或者是多个服务器组成的服务器集群来实现。本领域技术人员可以理解,图2中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的服务器的限定,具体的服务器可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
图3为一个实施例中用户界面的实现方法的流程图。如图3所示,一种用户界面的实现方法,包括以下步骤:
步骤302,获取以栅格长度为基本单元标注的用户界面。
具体地,栅格即网格,是一种平面设计的方法与风格,运用固定的格子设计版面布局。栅格采用的是正方形网格。栅格长度是指正方形的边长,可采用a表示。
用户界面是系统和用户之间进行交互和信息交换的媒介,它实现信息的内部形式与人类可以接收形式之间的转换。标注是对用户界面进行标示注记,包括用户界面里字体的大小、图片的尺寸、字体和图片等元素之间的间距。
以栅格长度为基本单元标注的用户界面是指采用栅格长度为基本单元对用户界面中的元素进行标注,用户界面中的元素包括字体、图片、字体之间的间距、图片之间的间距、字体和图片之间的间距等。对用户界面中的元素进行标记,例如对图片的尺寸进行标注,为12a。
应用程序的用户界面是应用程序开发者根据需要设计用于与用户进行交互的用户界面,用户界面中的元素设计者通过以栅格长度为基本单元进行标注,方便后续的开发者按照该标注进行开发应用程序的用户界面。
图4A为传统的用户界面采用物理像素标注的效果示意图。如图4A所示,其中,以iphone6为例,屏幕总物理像素为750px×1334px,采用25px标注字体的大小,字体与图片之间的间距10px标注,图片的尺寸采用50px标注。当将以750px×1334px标注的用户界面,显示在屏幕总物理像素为480px×640px上时,因标注的字体、字体间距及图片的尺寸等会超出480px×640px的显示,显示效果差。
图4B为对用户界面采用栅格长度标注的效果示意图。如图4B所示,用户界面中的图片的尺寸为15a,字体大小为4a,第一行字体与左边界之间的距离为3a,第一副图片与左边界之间的距离为5a,第一行字体与上边界之间的距离为5a,第一行字体与第一幅图片之间的间距为4a、图片与图片之间的间距为5a等。用户界面中的元素采用栅格长度为基本单元进行标注,与物理像素无关,对于不同分辨率的终端屏幕,可以通过调节栅格长度大小从而整体调整用户界面中元素所标注的大小,从而使得调整后的用户界面适用不同的设备。
此外,还可将用户界面进行切图处理。切图处理是指将用户界面切成一张张预设大小的图片,根据切图做成可交互的页面。
步骤304,获取终端的屏幕宽的逻辑像素个数及屏幕宽的栅格数。
本实施例中,获取终端的屏幕宽的逻辑像素个数的步骤包括:获取终端的屏幕宽的物理像素个数;根据该物理像素个数得到终端的屏幕宽的逻辑像素个数。
终端可包括手机、平板电脑、个人数字助理等。屏幕宽是指终端显示用户界面时正常阅读的屏幕的宽度,例如终端竖屏显示用户界面,则屏幕宽为终端的屏幕的宽度;终端横屏显示用户界面时,则屏幕宽为终端的屏幕的高度。
逻辑像素在IOS开发中使用的显示点,在各IOS设备上根据放大倍可计算成具体设备的物理像素,如iphone3/3GS:1逻辑像素=1物理像素,iphone4/4s/5/5c/6:1逻辑像素=2物理像素。在Android系统中,逻辑像素为dp(Density-independent pixel,密度无关的像素,Android系统会根据具体的屏幕密度将dp转化为实际的像素密度,在开发中使用dp可以确保在不同像素密度的屏幕上显示统一的视觉长度。
根据屏幕宽的物理像素个数及物理像素与逻辑像素的对应关系得到屏幕宽的逻辑像素的个数。
终端的操作系统为IOS系统时,获取终端的屏幕宽的逻辑像素个数的步骤包括:获取终端的屏幕宽的物理像素个数;根据该物理像素个数及物理像素与逻辑像素的对应关系得到终端的屏幕宽的逻辑像素个数。例如iphone6屏幕的总物理像素个数为750×1334,屏幕总逻辑像素个数为375×667。竖屏显示时,屏幕宽的逻辑像素个数为375。
终端的操作系统为Android系统时,该获取终端的屏幕宽的逻辑像素个数的步骤包括:获取终端的屏幕宽的物理像素个数和屏幕像素密度;根据该屏幕宽的物理像素个数和屏幕像素密度得到终端的屏幕宽的逻辑像素个数。
具体地,屏幕像素密度是指每英寸屏幕长度具备的像素点数量,像素密度越高,代表屏幕的显示效果越精细。屏幕像素密度包括屏幕的物理像素密度和屏幕的逻辑像素密度。例如,终端的屏幕物理像素密度数量为326,逻辑像素密度为163,屏幕宽的物理像素个数为750,可计算得出终端的屏幕宽所包含的dp(逻辑像素)数为750/(326/160)=368dp。
此外,终端的操作系统不限于IOS、Android,还可为Windows Iphone等,在其他操作系统中也可采用屏幕宽的物理像素个数得到屏幕宽的逻辑像素。
本实施例中,获取终端的屏幕宽的栅格数的步骤包括:获取终端的屏幕宽的大小及栅格长度的大小;根据终端的屏幕宽的大小及栅格长度的大小得到终端的屏幕宽的栅格数。
终端的屏幕宽的大小可采用屏幕宽的物理像素个数表示,栅格长度的大小也可采用物理像素个数表示。可根据终端的屏幕宽的大小调整栅格长度的大小。
在网页中栅格的设计原理及应用是:把宽度为“W”的页面分割成n个栅格单元“m”,每个栅格单元与栅格单元之间的间隙设为“i”,把“m+i”定义为“A”,它们之间的关系如下:
W=(m×n)+(n-1)i,m+i=A,可得(A×n)-i=W。
图5为网页中栅格单元的示意图。如图5所示,将网页的宽度“W”分割成n个栅格单元“m”,每个栅格单元与栅格单元之间的间隙设为“i”,将“m+i”定义为A,多个A组成的网页栅格。
图6为用户界面分割成栅格的示意图。如图6所示,把宽度为“W”的用户界面分割成n个栅格单元“a”,W=a×n。栅格单元之间的间距为0。在用户界面展示的高度方向上,因展示时,页面可沿着高度方向向上或向下移动显示,不需计算出高度方向上栅格单元的数量。
图7为以iphone6为例的栅格分割示意图。如图7所示,iphone6屏幕总物理像素个数为750×1334,屏幕总逻辑像素个数为375×667。设定一个栅格长度a的大小为6px(物理像素),则在iphone6上有750/6=125个栅格,1个栅格对应375/125=3个逻辑像素。获取的用户界面中元素采用的是a=6px为基本单元标注的,图片的尺寸和间距都能被6整除。间距都是采用栅格标注,即6px=a,12px=2a、18px=3a,……,以此类推。对用户界面中的元素进行标注时,采用a、2a、3a等对元素进行标注。例如元素为图片,则图片的尺寸可采用12a标注。字体的大小采用6a标注等。
栅格长度的大小可根据需要设定,也可根据屏幕宽的大小进行调整。
步骤306,根据屏幕宽的逻辑像素个数及屏幕宽的栅格数得到单个栅格所对应的逻辑像素个数。
具体地,栅格与IOS逻辑像素的换算公式为:1a对应的逻辑像素=屏幕宽的逻辑像素个数/屏幕宽的栅格数。
以iphone6为例,其屏幕宽包含375个逻辑像素,将屏幕划分为125个栅格,根据换算公式可得出a与逻辑像素的比例为1a=(375/125)逻辑像素=3逻辑像素。
栅格与Android的dp换算公式为:1a对应的逻辑像素=屏幕宽的dp/屏幕宽的栅格数。在Android系统中,屏幕宽的dp数为368dp,将其125等分,根据换算公式可得出a与dp的基准比例为1a=(368/125)dp=3dp。
此外,也可将栅格长度与逻辑像素的比例采用宏定义公式,将用户界面中栅格长度标注导入到宏定义的公式中得到对应的逻辑像素标注,不需考虑实际的物理像素。操作系统会根据不同的屏幕密度转换成显示像素,以适配各种终端。
步骤308,将以栅格长度为基本单元标注的用户界面根据单个栅格所对应的逻辑像素个数转换为以逻辑像素为基本单元标注的用户界面。
具体地,将栅格长度为基本单元标注的用户界面转换为以逻辑像素为基本单元标注的用户界面后,通过使用逻辑像素,系统会自动适配各种屏幕密度的设备。
上述用户界面的实现方法,以栅格长度为基本单元标注用户界面,通过获取到终端的屏幕宽的逻辑像素个数及屏幕宽的栅格数,得到单个栅格所对应的逻辑像素个数,将栅格长度标注的用户界面转换为逻辑像素为基本单元标注的用户界面,以适配各种分辨率的设备,不需针对不同分辨率的终端分别设计用户界面,节省设计时间;通过栅格长度标注,只需转换为逻辑像素,不需转换为物理像素,避免可转换物理像素可能产生误差的情况,能够更加方便和精准地进行用户界面开发。
此外,针对某些终端机型的尺寸非常小,开发者可通过修改逻辑像素和栅格的换算比例,不需用户界面的设计者单独设计标注,节省了设计者和开发者的时间,栅格标注更加清晰,减轻了错误的发生率。
采用栅格标注应用程序的用户界面,能够根据网页的内容制定合理的栅格,有了栅格的坐标指引,布局更加合理美观,有规律的页面分割能提高网页开发的效率。
图8为一个实施例中用户界面的实现装置的结构框图。如图8所示,一种用户界面的实现装置,包括界面获取模块810、参数获取模块820、比值获取模块830、转换模块840。其中:
界面获取模块810用于获取以栅格长度为基本单元标注的用户界面。
具体地,栅格即网格,是一种平面设计的方法与风格,运用固定的格子设计版面布局。栅格采用的是正方形网格。栅格长度是指正方形的边长,可采用a表示。
用户界面是系统和用户之间进行交互和信息交换的媒介,它实现信息的内部形式与人类可以接收形式之间的转换。标注是对用户界面进行标示注记,包括用户界面里字体的大小、图片的尺寸、字体和图片等元素之间的间距。
以栅格长度为基本单元标注的用户界面是指采用栅格长度为基本单元对用户界面中的元素进行标注,用户界面中的元素包括字体、图片、字体之间的间距、图片之间的间距、字体和图片之间的间距等。对用户界面中的元素进行标记,例如对图片的尺寸进行标注,为12a。
参数获取模块820用于获取终端的屏幕宽的逻辑像素个数及屏幕宽的栅格数。
本实施例中,参数获取模块820还用于获取终端的屏幕宽的物理像素个数,以及根据该物理像素个数得到终端的屏幕宽的逻辑像素个数。
屏幕宽是指终端显示用户界面时正常阅读的屏幕的宽度,例如终端竖屏显示用户界面,则屏幕宽为终端的屏幕的宽度;终端横屏显示用户界面时,则屏幕宽为终端的屏幕的高度。
逻辑像素在IOS开发中使用的显示点,在各IOS设备上根据放大倍可计算成具体设备的物理像素,如iphone3/3GS:1逻辑像素=1物理像素,iphone4/4s/5/5c/6:1逻辑像素=2物理像素。在Android系统中,逻辑像素为dp(Density-independent pixel,密度无关的像素,Android系统会根据具体的屏幕密度将dp转化为实际的像素密度,在开发中使用dp可以确保在不同像素密度的屏幕上显示统一的视觉长度。
根据屏幕宽的物理像素个数及物理像素与逻辑像素的对应关系得到屏幕宽的逻辑像素的个数。
终端的操作系统为IOS系统时,参数获取模块820获取终端的屏幕宽的物理像素个数;根据该物理像素个数及物理像素与逻辑像素的对应关系得到终端的屏幕宽的逻辑像素个数。例如iphone6屏幕的总物理像素个数为750×1334,屏幕总逻辑像素个数为375×667。竖屏显示时,屏幕宽的逻辑像素个数为375。
终端的操作系统为Android系统时,参数获取模块820获取终端的屏幕宽的物理像素个数和屏幕像素密度;根据该屏幕宽的物理像素个数和屏幕像素密度得到终端的屏幕宽的逻辑像素个数。
具体地,屏幕像素密度是指每英寸屏幕长度具备的像素点数量,像素密度越高,代表屏幕的显示效果越精细。屏幕像素密度包括屏幕的物理像素密度和屏幕的逻辑像素密度。例如,终端的屏幕物理像素密度数量为326,逻辑像素密度为163,屏幕宽的物理像素个数为750,可计算得出终端的屏幕宽所包含的dp(逻辑像素)数为750/(326/160)=368dp。
此外,终端的操作系统不限于IOS、Android,还可为Windows Iphone等,在其他操作系统中也可采用屏幕宽的物理像素个数得到屏幕宽的逻辑像素。
本实施例中,参数获取模块820获取终端的屏幕宽的大小及栅格长度的大小,以及根据终端的屏幕宽的大小及栅格长度的大小得到终端的屏幕宽的栅格数。
终端的屏幕宽的大小可采用屏幕宽的物理像素个数表示,栅格长度的大小也可采用物理像素个数表示。可根据终端的屏幕宽的大小调整栅格长度的大小。
比值获取模块830用于根据该屏幕宽的逻辑像素个数及屏幕宽的栅格数得到单个栅格所对应的逻辑像素个数。
具体地,栅格与IOS逻辑像素的换算公式为:1a对应的逻辑像素=屏幕宽的逻辑像素个数/屏幕宽的栅格数。
以iphone6为例,其屏幕宽包含375个逻辑像素,将屏幕划分为125个栅格,根据换算公式可得出a与逻辑像素的比例为1a=(375/125)逻辑像素=3逻辑像素。
栅格与Android的dp换算公式为:1a对应的逻辑像素=屏幕宽的dp/屏幕宽的栅格数。在Android系统中,屏幕宽的dp数为368dp,将其125等分,根据换算公式可得出a与dp的基准比例为1a=(368/125)dp=3dp。
此外,也可将栅格长度与逻辑像素的比例采用宏定义公式,将用户界面中栅格长度标注导入到宏定义的公式中得到对应的逻辑像素标注,不需考虑实际的物理像素。操作系统会根据不同的屏幕密度转换成显示像素,以适配各种终端。
转换模块840用于将以栅格长度为基本单元标注的用户界面根据单个栅格所对应的逻辑像素个数转换为以逻辑像素为基本单元标注的用户界面。
具体地,将栅格长度为基本单元标注的用户界面转换为以逻辑像素为基本单元标注的用户界面后,通过使用逻辑像素,系统会自动适配各种屏幕密度的设备。
上述用户界面的实现装置,以栅格长度为基本单元标注用户界面,通过获取到终端的屏幕宽的逻辑像素个数及屏幕宽的栅格数,得到单个栅格所对应的逻辑像素个数,将栅格长度标注的用户界面转换为逻辑像素为基本单元标注的用户界面,以适配各种分辨率的设备,不需针对不同分辨率的终端分别设计用户界面,节省设计时间;通过栅格长度标注,只需转换为逻辑像素,不需转换为物理像素,避免可转换物理像素可能产生误差的情况,能够更加方便和精准地进行用户界面开发。
此外,针对某些终端机型的尺寸非常小,开发者可通过修改逻辑像素和栅格的换算比例,不需用户界面的设计者单独设计标注,节省了设计者和开发者的时间,栅格标注更加清晰,减轻了错误的发生率。
图9为另一个实施例中用户界面的实现装置的结构框图。如图9所示,一种用户界面的实现装置,除了包括界面获取模块810、参数获取模块820、比值获取模块830、转换模块840,还包括调整模块850。其中:
调整模块850用于根据该终端的屏幕宽的大小调整栅格长度的大小。
通过屏幕宽的大小调整栅格长度的大小,可适应不同的分辨率。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于一非易失性计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-OnlyMemory,ROM)等。
以上所述实施例仅表达了本发明的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本发明构思的前提下,还可以做出若干变形和改进,这些都属于本发明的保护范围。因此,本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种用户界面的实现方法,包括以下步骤:
获取以栅格长度为基本单元标注的用户界面;
获取终端的屏幕宽的逻辑像素个数及屏幕宽的栅格数;
根据所述屏幕宽的逻辑像素个数及屏幕宽的栅格数得到单个栅格所对应的逻辑像素个数;
将以栅格长度为基本单元标注的用户界面根据单个栅格所对应的逻辑像素个数转换为以逻辑像素为基本单元标注的用户界面。
2.根据权利要求1所述的方法,其特征在于,所述获取终端的屏幕宽的逻辑像素个数的步骤包括:
获取终端的屏幕宽的物理像素个数;
根据所述物理像素个数得到终端的屏幕宽的逻辑像素个数。
3.根据权利要求2所述的方法,其特征在于,所述终端的操作系统为Android系统时,所述获取终端的屏幕宽的逻辑像素个数的步骤包括:
获取终端的屏幕宽的物理像素个数和屏幕像素密度;
根据所述屏幕宽的物理像素个数和屏幕像素密度得到终端的屏幕宽的逻辑像素个数。
4.根据权利要求1所述的方法,其特征在于,所述获取终端的屏幕宽的栅格数的步骤包括:
获取终端的屏幕宽的大小及栅格长度的大小;
根据所述终端的屏幕宽的大小及栅格长度的大小得到终端的屏幕宽的栅格数。
5.根据权利要求4所述的方法,其特征在于,所述方法还包括:
根据所述终端的屏幕宽的大小调整栅格长度的大小。
6.一种用户界面的实现装置,其特征在于,包括:
界面获取模块,用于获取以栅格长度为基本单元标注的用户界面;
参数获取模块,用于获取终端的屏幕宽的逻辑像素个数及屏幕宽的栅格数;
比值获取模块,用于根据所述屏幕宽的逻辑像素个数及屏幕宽的栅格数得到单个栅格所对应的逻辑像素个数;
转换模块,用于将以栅格长度为基本单元标注的用户界面根据单个栅格所对应的逻辑像素个数转换为以逻辑像素为基本单元标注的用户界面。
7.根据权利要求6所述的装置,其特征在于,所述参数获取模块还用于获取终端的屏幕宽的物理像素个数,以及根据所述物理像素个数得到终端的屏幕宽的逻辑像素个数。
8.根据权利要求7所述的装置,其特征在于,所述终端的操作系统为Android系统时,所述参数获取模块还用于获取终端的屏幕宽的物理像素个数和屏幕像素密度,以及根据所述屏幕宽的物理像素个数和屏幕像素密度得到终端的屏幕宽的逻辑像素个数。
9.根据权利要求6所述的装置,其特征在于,所述参数获取模块还用于获取终端的屏幕宽的大小及栅格长度的大小,以及根据所述终端的屏幕宽的大小及栅格长度的大小得到终端的屏幕宽的栅格数。
10.根据权利要求9所述的装置,其特征在于,所述装置还包括:
调整模块,用于根据所述终端的屏幕宽的大小调整栅格长度的大小。
CN201510557302.3A 2015-09-02 2015-09-02 用户界面的实现方法和装置 Active CN106484388B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510557302.3A CN106484388B (zh) 2015-09-02 2015-09-02 用户界面的实现方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510557302.3A CN106484388B (zh) 2015-09-02 2015-09-02 用户界面的实现方法和装置

Publications (2)

Publication Number Publication Date
CN106484388A true CN106484388A (zh) 2017-03-08
CN106484388B CN106484388B (zh) 2021-06-04

Family

ID=58238635

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510557302.3A Active CN106484388B (zh) 2015-09-02 2015-09-02 用户界面的实现方法和装置

Country Status (1)

Country Link
CN (1) CN106484388B (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109240774A (zh) * 2017-07-04 2019-01-18 武汉安天信息技术有限责任公司 一种web页面的布局方法和布局系统
CN111190681A (zh) * 2019-12-31 2020-05-22 华为技术有限公司 显示界面适配方法、显示界面适配设计方法和电子设备
CN111198668A (zh) * 2019-12-26 2020-05-26 成都中科合迅科技有限公司 一种基于浏览器的多屏系统和多屏交互方法
CN111398648A (zh) * 2020-04-17 2020-07-10 深圳市鼎阳科技股份有限公司 实现用户界面和波形合并的方法及示波器
CN114489909A (zh) * 2022-02-07 2022-05-13 智道网联科技(北京)有限公司 车载应用的屏幕适配方法、装置及电子设备、存储介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101388037A (zh) * 2008-10-27 2009-03-18 阿里巴巴集团控股有限公司 一种页面布局的方法和装置
CN102662563A (zh) * 2012-03-14 2012-09-12 广东威创视讯科技股份有限公司 窗口分辨率自适应处理方法与装置
US20130063492A1 (en) * 2011-09-12 2013-03-14 Microsoft Corporation Scale factors for visual presentations
CN103473044A (zh) * 2013-08-20 2013-12-25 广东明创软件科技有限公司 适配不同分辨率移动终端的应用程序界面绘制方法
US20140189588A1 (en) * 2013-01-02 2014-07-03 Canonical Limited User interface for a computing device
CN104007991A (zh) * 2014-06-06 2014-08-27 百度在线网络技术(北京)有限公司 应用程序界面布局调整方法和装置
CN104035664A (zh) * 2014-06-06 2014-09-10 北京安兔兔科技有限公司 一种应用程序用户界面的显示方法及装置
CN104123362A (zh) * 2014-07-18 2014-10-29 华中师范大学 一种面向多终端设备的网页适应性布局方法

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101388037A (zh) * 2008-10-27 2009-03-18 阿里巴巴集团控股有限公司 一种页面布局的方法和装置
US20130063492A1 (en) * 2011-09-12 2013-03-14 Microsoft Corporation Scale factors for visual presentations
CN102662563A (zh) * 2012-03-14 2012-09-12 广东威创视讯科技股份有限公司 窗口分辨率自适应处理方法与装置
US20140189588A1 (en) * 2013-01-02 2014-07-03 Canonical Limited User interface for a computing device
CN103473044A (zh) * 2013-08-20 2013-12-25 广东明创软件科技有限公司 适配不同分辨率移动终端的应用程序界面绘制方法
CN104007991A (zh) * 2014-06-06 2014-08-27 百度在线网络技术(北京)有限公司 应用程序界面布局调整方法和装置
CN104035664A (zh) * 2014-06-06 2014-09-10 北京安兔兔科技有限公司 一种应用程序用户界面的显示方法及装置
CN104123362A (zh) * 2014-07-18 2014-10-29 华中师范大学 一种面向多终端设备的网页适应性布局方法

Non-Patent Citations (4)

* Cited by examiner, † Cited by third party
Title
GRASS_DCM: "Android上常见度量单位【xdpi、hdpi、mdpi、ldpi】解读", 《HTTPS://WWW.CNBLOGS.COM/CMDUAN/ARCHIVE/2012/03/09/2388345.HTML》 *
JIEZZY: "Android 屏幕兼容性", 《HTTPS://WWW.CNBLOGS.COM/JIEZZY/ARCHIVE/2012/06/19/2554931.HTML》 *
温暖向阳LOVE: "移动端尺寸基础知识", 《HTTPS://WWW.CNBLOGS.COM/AIMYFLY/P/4444363.HTML》 *
田园里的蟋蟀: "手机适配浏览,所引发的一场"头脑风暴"", 《HTTPS://WWW.CNBLOGS.COM/XISHUAI/P/4521557.HTML》 *

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109240774A (zh) * 2017-07-04 2019-01-18 武汉安天信息技术有限责任公司 一种web页面的布局方法和布局系统
CN109240774B (zh) * 2017-07-04 2022-08-09 武汉安天信息技术有限责任公司 一种web页面的布局方法和布局系统
CN111198668A (zh) * 2019-12-26 2020-05-26 成都中科合迅科技有限公司 一种基于浏览器的多屏系统和多屏交互方法
CN111190681A (zh) * 2019-12-31 2020-05-22 华为技术有限公司 显示界面适配方法、显示界面适配设计方法和电子设备
WO2021135730A1 (zh) * 2019-12-31 2021-07-08 华为技术有限公司 显示界面适配方法、显示界面适配设计方法和电子设备
CN111398648A (zh) * 2020-04-17 2020-07-10 深圳市鼎阳科技股份有限公司 实现用户界面和波形合并的方法及示波器
CN111398648B (zh) * 2020-04-17 2022-06-14 深圳市鼎阳科技股份有限公司 实现用户界面和波形合并的方法及示波器
CN114489909A (zh) * 2022-02-07 2022-05-13 智道网联科技(北京)有限公司 车载应用的屏幕适配方法、装置及电子设备、存储介质
CN114489909B (zh) * 2022-02-07 2023-09-08 智道网联科技(北京)有限公司 车载应用的屏幕适配方法、装置及电子设备、存储介质

Also Published As

Publication number Publication date
CN106484388B (zh) 2021-06-04

Similar Documents

Publication Publication Date Title
CN106484388A (zh) 用户界面的实现方法和装置
CN110489116A (zh) 一种页面的渲染方法、装置及计算机存储介质
US20130191732A1 (en) Fixed Format Document Conversion Engine
CN103699259B (zh) 一种光标定位的方法、系统及触摸设备
CN105630459A (zh) 一种将ppt转换为html页面的方法
KR102248823B1 (ko) 데이터 시각화 서비스 시스템, 방법 및 어플리케이션
CN109144656A (zh) 多元素布局的方法、装置、计算机设备和存储介质
CN102890632A (zh) 一种屏幕自适应方法、系统和终端设备
CN108039193A (zh) 一种自动生成体检报告的方法及装置
CN109614601A (zh) 基于web的表格处理方法、装置、设备及可读介质
CN111881662A (zh) 表单生成方法、装置、处理设备及存储介质
CN105354022A (zh) 一种页面布局文件生成方法及装置
CN109543162A (zh) 数据的多图表展示方法、装置、计算机设备和存储介质
CN108038117A (zh) 一种网页布局方法及装置
US20200065361A1 (en) Selectively controlling modification states for user-defined subsets of objects within a digital document
CN109446503A (zh) 文档内容导出方法和装置
CN105653255A (zh) 一种在office框架中设置报告模板以自动生成报告文件的方法
CN115840567A (zh) 一种应用编辑方法及相关设备
CN104182427A (zh) 电子文件制作系统及其电子文件制作方法
CN103513855A (zh) 一种显示页面更新方法及装置
CN104536947A (zh) 版式文档的处理方法及装置
CN105718434A (zh) 一种自然语言公式编辑方法和系统
US9471742B2 (en) Method for displaying timing information of an integrated circuit floorplan in real time
US8473892B1 (en) Computer aided design system and method
Ruffin et al. A normal ray refinement technique for Cartesian-grid based Navier–Stokes solvers

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant