本發(fā)明涉及網(wǎng)頁設(shè)計(jì)領(lǐng)域，特別是涉及一種用戶界面的實(shí)現(xiàn)方法和裝置。

背景技術(shù)：

隨著移動(dòng)終端的普及，越來越多的用戶使用移動(dòng)終端瀏覽網(wǎng)頁。傳統(tǒng)的移動(dòng)終端的UI(User Interface，用戶界面)是以pixel(物理像素)為長度單位來設(shè)計(jì)和標(biāo)注的，包含文字、圖片的尺寸、間距和寬高等。由于IOS和Android各種設(shè)備的屏幕分辨率各不相同，因此設(shè)計(jì)者通常要分別設(shè)計(jì)多種不同屏幕分辨率(分辨率是指屏幕能夠顯示的像素個(gè)數(shù))下的效果圖，分別標(biāo)注，使不同像素密度的設(shè)備有相同的視覺效果。

然而，設(shè)計(jì)者需要針對(duì)多個(gè)分辨率做幾個(gè)版本的用戶界面，需要花費(fèi)大量的時(shí)間精力且無法全面覆蓋。

技術(shù)實(shí)現(xiàn)要素：

基于此，有必要針對(duì)傳統(tǒng)的用戶界面實(shí)現(xiàn)需要針對(duì)不同的分辨率分別設(shè)計(jì)，耗費(fèi)大量時(shí)間的問題，提供一種用戶界面的實(shí)現(xiàn)方法，能適用不同分辨率，不需針對(duì)不同分辨率分別設(shè)計(jì)，節(jié)省設(shè)計(jì)時(shí)間。

此外，還有必要提供一種用戶界面的實(shí)現(xiàn)裝置，能適用不同分辨率，不需針對(duì)不同分辨率分別設(shè)計(jì)，節(jié)省設(shè)計(jì)時(shí)間。

一種用戶界面的實(shí)現(xiàn)方法，包括以下步驟：

獲取以柵格長度為基本單元標(biāo)注的用戶界面；

獲取終端的屏幕寬的邏輯像素個(gè)數(shù)及屏幕寬的柵格數(shù)；

根據(jù)所述屏幕寬的邏輯像素個(gè)數(shù)及屏幕寬的柵格數(shù)得到單個(gè)柵格所對(duì)應(yīng)的邏輯像素個(gè)數(shù)；

將以柵格長度為基本單元標(biāo)注的用戶界面根據(jù)單個(gè)柵格所對(duì)應(yīng)的邏輯像素個(gè)數(shù)轉(zhuǎn)換為以邏輯像素為基本單元標(biāo)注的用戶界面。

一種用戶界面的實(shí)現(xiàn)裝置，包括：

界面獲取模塊，用于獲取以柵格長度為基本單元標(biāo)注的用戶界面；

參數(shù)獲取模塊，用于獲取終端的屏幕寬的邏輯像素個(gè)數(shù)及屏幕寬的柵格數(shù)；

比值獲取模塊，用于根據(jù)所述屏幕寬的邏輯像素個(gè)數(shù)及屏幕寬的柵格數(shù)得到單個(gè)柵格所對(duì)應(yīng)的邏輯像素個(gè)數(shù)；

轉(zhuǎn)換模塊，用于將以柵格長度為基本單元標(biāo)注的用戶界面根據(jù)單個(gè)柵格所對(duì)應(yīng)的邏輯像素個(gè)數(shù)轉(zhuǎn)換為以邏輯像素為基本單元標(biāo)注的用戶界面。

上述用戶界面的實(shí)現(xiàn)方法和裝置，以柵格長度為基本單元標(biāo)注用戶界面，通過獲取到終端的屏幕寬的邏輯像素個(gè)數(shù)及屏幕寬的柵格數(shù)，得到單個(gè)柵格所對(duì)應(yīng)的邏輯像素個(gè)數(shù)，將柵格長度標(biāo)注的用戶界面轉(zhuǎn)換為邏輯像素為基本單元標(biāo)注的用戶界面，以適配各種分辨率的設(shè)備，不需針對(duì)不同分辨率的終端分別設(shè)計(jì)用戶界面，節(jié)省設(shè)計(jì)時(shí)間；通過柵格長度標(biāo)注，只需轉(zhuǎn)換為邏輯像素，不需轉(zhuǎn)換為物理像素，避免可轉(zhuǎn)換物理像素可能產(chǎn)生誤差的情況，能夠更加方便和精準(zhǔn)地進(jìn)行用戶界面開發(fā)。

附圖說明

圖1為一個(gè)實(shí)施例中終端的內(nèi)部結(jié)構(gòu)示意圖；

圖2為一個(gè)實(shí)施例中服務(wù)器的內(nèi)部結(jié)構(gòu)示意圖；

圖3為一個(gè)實(shí)施例中用戶界面的實(shí)現(xiàn)方法的流程圖；

圖4A為傳統(tǒng)的用戶界面采用物理像素標(biāo)注的效果示意圖；

圖4B為對(duì)用戶界面采用柵格長度標(biāo)注的效果示意圖；

圖5為網(wǎng)頁中柵格單元的示意圖；

圖6為用戶界面分割成柵格的示意圖；

圖7為以iphone6為例的柵格分割示意圖；

圖8為一個(gè)實(shí)施例中用戶界面的實(shí)現(xiàn)裝置的結(jié)構(gòu)框圖；

圖9為另一個(gè)實(shí)施例中用戶界面的實(shí)現(xiàn)裝置的結(jié)構(gòu)框圖。

具體實(shí)施方式

為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。

圖1為一個(gè)實(shí)施例中終端的內(nèi)部結(jié)構(gòu)示意圖。如圖1所示，該終端包括通過系統(tǒng)總線連接的處理器、存儲(chǔ)介質(zhì)、內(nèi)存和網(wǎng)絡(luò)接口、聲音采集裝置、顯示屏、揚(yáng)聲器和輸入裝置。其中，終端的存儲(chǔ)介質(zhì)存儲(chǔ)有操作系統(tǒng)，還包括一種用戶界面的實(shí)現(xiàn)裝置，該用戶界面的實(shí)現(xiàn)裝置用于實(shí)現(xiàn)一種用戶界面的實(shí)現(xiàn)方法。該處理器用于提供計(jì)算和控制能力，支撐整個(gè)終端的運(yùn)行。終端中的內(nèi)存為存儲(chǔ)介質(zhì)中的用戶界面的實(shí)現(xiàn)裝置的運(yùn)行提供環(huán)境，網(wǎng)絡(luò)接口用于與服務(wù)器進(jìn)行網(wǎng)絡(luò)通信，如發(fā)送數(shù)據(jù)請(qǐng)求至服務(wù)器，接收服務(wù)器返回的數(shù)據(jù)等。終端的顯示屏可以是液晶顯示屏或者電子墨水顯示屏等，輸入裝置可以是顯示屏上覆蓋的觸摸層，也可以是終端外殼上設(shè)置的按鍵、軌跡球或觸控板，也可以是外接的鍵盤、觸控板或鼠標(biāo)等。該終端可以是手機(jī)、平板電腦或者個(gè)人數(shù)字助理等。本領(lǐng)域技術(shù)人員可以理解，圖1中示出的結(jié)構(gòu)，僅僅是與本申請(qǐng)方案相關(guān)的部分結(jié)構(gòu)的框圖，并不構(gòu)成對(duì)本申請(qǐng)方案所應(yīng)用于其上的終端的限定，具體的終端可以包括比圖中所示更多或更少的部件，或者組合某些部件，或者具有不同的部件布置。

圖2為一個(gè)實(shí)施例中服務(wù)器的內(nèi)部結(jié)構(gòu)示意圖。如圖3所示，該服務(wù)器包括通過系統(tǒng)總線連接的處理器、存儲(chǔ)介質(zhì)、內(nèi)存和網(wǎng)絡(luò)接口。其中，該服務(wù)器的存儲(chǔ)介質(zhì)存儲(chǔ)有操作系統(tǒng)、數(shù)據(jù)庫和用戶界面的實(shí)現(xiàn)裝置，數(shù)據(jù)庫中存儲(chǔ)有用戶界面的數(shù)據(jù)信息及排版信息，該用戶界面的實(shí)現(xiàn)裝置用于實(shí)現(xiàn)適用于服務(wù)器的一種用戶界面的實(shí)現(xiàn)方法。該服務(wù)器的處理器用于提供計(jì)算和控制能力，支撐整個(gè)服務(wù)器的運(yùn)行。該服務(wù)器的內(nèi)存為存儲(chǔ)介質(zhì)中的用戶界面的實(shí)現(xiàn)裝置的運(yùn)行提供環(huán)境。該服務(wù)器的網(wǎng)絡(luò)接口用于據(jù)以與外部的終端通過網(wǎng)絡(luò)連接通信，比如接收終端發(fā)送的數(shù)據(jù)請(qǐng)求以及向終端返回?cái)?shù)據(jù)等。服務(wù)器可以用獨(dú)立的服務(wù)器或者是多個(gè)服務(wù)器組成的服務(wù)器集群來實(shí)現(xiàn)。本領(lǐng)域技術(shù)人員可以理解，圖2中示出的結(jié)構(gòu)，僅僅是與本申請(qǐng)方案相關(guān)的部分結(jié)構(gòu)的框圖，并不構(gòu)成對(duì)本申請(qǐng)方案所應(yīng)用于其上的服務(wù)器的限定，具體的服務(wù)器可以包括比圖中所示更 多或更少的部件，或者組合某些部件，或者具有不同的部件布置。

圖3為一個(gè)實(shí)施例中用戶界面的實(shí)現(xiàn)方法的流程圖。如圖3所示，一種用戶界面的實(shí)現(xiàn)方法，包括以下步驟：

步驟302，獲取以柵格長度為基本單元標(biāo)注的用戶界面。

具體地，柵格即網(wǎng)格，是一種平面設(shè)計(jì)的方法與風(fēng)格，運(yùn)用固定的格子設(shè)計(jì)版面布局。柵格采用的是正方形網(wǎng)格。柵格長度是指正方形的邊長，可采用a表示。

用戶界面是系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介，它實(shí)現(xiàn)信息的內(nèi)部形式與人類可以接收形式之間的轉(zhuǎn)換。標(biāo)注是對(duì)用戶界面進(jìn)行標(biāo)示注記，包括用戶界面里字體的大小、圖片的尺寸、字體和圖片等元素之間的間距。

以柵格長度為基本單元標(biāo)注的用戶界面是指采用柵格長度為基本單元對(duì)用戶界面中的元素進(jìn)行標(biāo)注，用戶界面中的元素包括字體、圖片、字體之間的間距、圖片之間的間距、字體和圖片之間的間距等。對(duì)用戶界面中的元素進(jìn)行標(biāo)記，例如對(duì)圖片的尺寸進(jìn)行標(biāo)注，為12a。

應(yīng)用程序的用戶界面是應(yīng)用程序開發(fā)者根據(jù)需要設(shè)計(jì)用于與用戶進(jìn)行交互的用戶界面，用戶界面中的元素設(shè)計(jì)者通過以柵格長度為基本單元進(jìn)行標(biāo)注，方便后續(xù)的開發(fā)者按照該標(biāo)注進(jìn)行開發(fā)應(yīng)用程序的用戶界面。

圖4A為傳統(tǒng)的用戶界面采用物理像素標(biāo)注的效果示意圖。如圖4A所示，其中，以iphone6為例，屏幕總物理像素為750px×1334px，采用25px標(biāo)注字體的大小，字體與圖片之間的間距10px標(biāo)注，圖片的尺寸采用50px標(biāo)注。當(dāng)將以750px×1334px標(biāo)注的用戶界面，顯示在屏幕總物理像素為480px×640px上時(shí)，因標(biāo)注的字體、字體間距及圖片的尺寸等會(huì)超出480px×640px的顯示，顯示效果差。

圖4B為對(duì)用戶界面采用柵格長度標(biāo)注的效果示意圖。如圖4B所示，用戶界面中的圖片的尺寸為15a，字體大小為4a，第一行字體與左邊界之間的距離為3a，第一副圖片與左邊界之間的距離為5a，第一行字體與上邊界之間的距離為5a，第一行字體與第一幅圖片之間的間距為4a、圖片與圖片之間的間距為5a等。 用戶界面中的元素采用柵格長度為基本單元進(jìn)行標(biāo)注，與物理像素?zé)o關(guān)，對(duì)于不同分辨率的終端屏幕，可以通過調(diào)節(jié)柵格長度大小從而整體調(diào)整用戶界面中元素所標(biāo)注的大小，從而使得調(diào)整后的用戶界面適用不同的設(shè)備。

此外，還可將用戶界面進(jìn)行切圖處理。切圖處理是指將用戶界面切成一張張預(yù)設(shè)大小的圖片，根據(jù)切圖做成可交互的頁面。

步驟304，獲取終端的屏幕寬的邏輯像素個(gè)數(shù)及屏幕寬的柵格數(shù)。

本實(shí)施例中，獲取終端的屏幕寬的邏輯像素個(gè)數(shù)的步驟包括：獲取終端的屏幕寬的物理像素個(gè)數(shù)；根據(jù)該物理像素個(gè)數(shù)得到終端的屏幕寬的邏輯像素個(gè)數(shù)。

終端可包括手機(jī)、平板電腦、個(gè)人數(shù)字助理等。屏幕寬是指終端顯示用戶界面時(shí)正常閱讀的屏幕的寬度，例如終端豎屏顯示用戶界面，則屏幕寬為終端的屏幕的寬度；終端橫屏顯示用戶界面時(shí)，則屏幕寬為終端的屏幕的高度。

邏輯像素在IOS開發(fā)中使用的顯示點(diǎn)，在各IOS設(shè)備上根據(jù)放大倍可計(jì)算成具體設(shè)備的物理像素，如iphone3/3GS:1邏輯像素＝1物理像素，iphone4/4s/5/5c/6：1邏輯像素＝2物理像素。在Android系統(tǒng)中，邏輯像素為dp(Density-independent pixel，密度無關(guān)的像素，Android系統(tǒng)會(huì)根據(jù)具體的屏幕密度將dp轉(zhuǎn)化為實(shí)際的像素密度，在開發(fā)中使用dp可以確保在不同像素密度的屏幕上顯示統(tǒng)一的視覺長度。

根據(jù)屏幕寬的物理像素個(gè)數(shù)及物理像素與邏輯像素的對(duì)應(yīng)關(guān)系得到屏幕寬的邏輯像素的個(gè)數(shù)。

終端的操作系統(tǒng)為IOS系統(tǒng)時(shí)，獲取終端的屏幕寬的邏輯像素個(gè)數(shù)的步驟包括：獲取終端的屏幕寬的物理像素個(gè)數(shù)；根據(jù)該物理像素個(gè)數(shù)及物理像素與邏輯像素的對(duì)應(yīng)關(guān)系得到終端的屏幕寬的邏輯像素個(gè)數(shù)。例如iphone6屏幕的總物理像素個(gè)數(shù)為750×1334，屏幕總邏輯像素個(gè)數(shù)為375×667。豎屏顯示時(shí)，屏幕寬的邏輯像素個(gè)數(shù)為375。

終端的操作系統(tǒng)為Android系統(tǒng)時(shí)，該獲取終端的屏幕寬的邏輯像素個(gè)數(shù)的步驟包括：獲取終端的屏幕寬的物理像素個(gè)數(shù)和屏幕像素密度；根據(jù)該屏幕寬的物理像素個(gè)數(shù)和屏幕像素密度得到終端的屏幕寬的邏輯像素個(gè)數(shù)。

具體地，屏幕像素密度是指每英寸屏幕長度具備的像素點(diǎn)數(shù)量，像素密度越高，代表屏幕的顯示效果越精細(xì)。屏幕像素密度包括屏幕的物理像素密度和屏幕的邏輯像素密度。例如，終端的屏幕物理像素密度數(shù)量為326，邏輯像素密度為163，屏幕寬的物理像素個(gè)數(shù)為750，可計(jì)算得出終端的屏幕寬所包含的dp(邏輯像素)數(shù)為750/(326/160)＝368dp。

此外，終端的操作系統(tǒng)不限于IOS、Android，還可為Windows Iphone等，在其他操作系統(tǒng)中也可采用屏幕寬的物理像素個(gè)數(shù)得到屏幕寬的邏輯像素。

本實(shí)施例中，獲取終端的屏幕寬的柵格數(shù)的步驟包括：獲取終端的屏幕寬的大小及柵格長度的大??；根據(jù)終端的屏幕寬的大小及柵格長度的大小得到終端的屏幕寬的柵格數(shù)。

終端的屏幕寬的大小可采用屏幕寬的物理像素個(gè)數(shù)表示，柵格長度的大小也可采用物理像素個(gè)數(shù)表示?？筛鶕?jù)終端的屏幕寬的大小調(diào)整柵格長度的大小。

在網(wǎng)頁中柵格的設(shè)計(jì)原理及應(yīng)用是：把寬度為“W”的頁面分割成n個(gè)柵格單元“m”，每個(gè)柵格單元與柵格單元之間的間隙設(shè)為“i”，把“m+i”定義為“A”，它們之間的關(guān)系如下：

W＝(m×n)+(n-1)i，m+i＝A，可得(A×n)-i＝W。

圖5為網(wǎng)頁中柵格單元的示意圖。如圖5所示，將網(wǎng)頁的寬度“W”分割成n個(gè)柵格單元“m”，每個(gè)柵格單元與柵格單元之間的間隙設(shè)為“i”，將“m+i”定義為A，多個(gè)A組成的網(wǎng)頁柵格。

圖6為用戶界面分割成柵格的示意圖。如圖6所示，把寬度為“W”的用戶界面分割成n個(gè)柵格單元“a”，W＝a×n。柵格單元之間的間距為0。在用戶界面展示的高度方向上，因展示時(shí)，頁面可沿著高度方向向上或向下移動(dòng)顯示，不需計(jì)算出高度方向上柵格單元的數(shù)量。

圖7為以iphone6為例的柵格分割示意圖。如圖7所示，iphone6屏幕總物理像素個(gè)數(shù)為750×1334，屏幕總邏輯像素個(gè)數(shù)為375×667。設(shè)定一個(gè)柵格長度a的大小為6px(物理像素)，則在iphone6上有750/6＝125個(gè)柵格，1個(gè)柵格對(duì)應(yīng)375/125＝3個(gè)邏輯像素。獲取的用戶界面中元素采用的是a＝6px為基本單元標(biāo)注的，圖片的尺寸和間距都能被6整除。間距都是采用柵格標(biāo)注，即6px＝a， 12px＝2a、18px＝3a，……，以此類推。對(duì)用戶界面中的元素進(jìn)行標(biāo)注時(shí)，采用a、2a、3a等對(duì)元素進(jìn)行標(biāo)注。例如元素為圖片，則圖片的尺寸可采用12a標(biāo)注。字體的大小采用6a標(biāo)注等。

柵格長度的大小可根據(jù)需要設(shè)定，也可根據(jù)屏幕寬的大小進(jìn)行調(diào)整。

步驟306，根據(jù)屏幕寬的邏輯像素個(gè)數(shù)及屏幕寬的柵格數(shù)得到單個(gè)柵格所對(duì)應(yīng)的邏輯像素個(gè)數(shù)。

具體地，柵格與IOS邏輯像素的換算公式為：1a對(duì)應(yīng)的邏輯像素＝屏幕寬的邏輯像素個(gè)數(shù)/屏幕寬的柵格數(shù)。

以iphone6為例，其屏幕寬包含375個(gè)邏輯像素，將屏幕劃分為125個(gè)柵格，根據(jù)換算公式可得出a與邏輯像素的比例為1a＝(375/125)邏輯像素＝3邏輯像素。

柵格與Android的dp換算公式為：1a對(duì)應(yīng)的邏輯像素＝屏幕寬的dp/屏幕寬的柵格數(shù)。在Android系統(tǒng)中，屏幕寬的dp數(shù)為368dp，將其125等分，根據(jù)換算公式可得出a與dp的基準(zhǔn)比例為1a＝(368/125)dp＝3dp。

此外，也可將柵格長度與邏輯像素的比例采用宏定義公式，將用戶界面中柵格長度標(biāo)注導(dǎo)入到宏定義的公式中得到對(duì)應(yīng)的邏輯像素標(biāo)注，不需考慮實(shí)際的物理像素。操作系統(tǒng)會(huì)根據(jù)不同的屏幕密度轉(zhuǎn)換成顯示像素，以適配各種終端。

步驟308，將以柵格長度為基本單元標(biāo)注的用戶界面根據(jù)單個(gè)柵格所對(duì)應(yīng)的邏輯像素個(gè)數(shù)轉(zhuǎn)換為以邏輯像素為基本單元標(biāo)注的用戶界面。

具體地，將柵格長度為基本單元標(biāo)注的用戶界面轉(zhuǎn)換為以邏輯像素為基本單元標(biāo)注的用戶界面后，通過使用邏輯像素，系統(tǒng)會(huì)自動(dòng)適配各種屏幕密度的設(shè)備。

上述用戶界面的實(shí)現(xiàn)方法，以柵格長度為基本單元標(biāo)注用戶界面，通過獲取到終端的屏幕寬的邏輯像素個(gè)數(shù)及屏幕寬的柵格數(shù)，得到單個(gè)柵格所對(duì)應(yīng)的邏輯像素個(gè)數(shù)，將柵格長度標(biāo)注的用戶界面轉(zhuǎn)換為邏輯像素為基本單元標(biāo)注的用戶界面，以適配各種分辨率的設(shè)備，不需針對(duì)不同分辨率的終端分別設(shè)計(jì)用戶界面，節(jié)省設(shè)計(jì)時(shí)間；通過柵格長度標(biāo)注，只需轉(zhuǎn)換為邏輯像素，不需轉(zhuǎn)換 為物理像素，避免可轉(zhuǎn)換物理像素可能產(chǎn)生誤差的情況，能夠更加方便和精準(zhǔn)地進(jìn)行用戶界面開發(fā)。

此外，針對(duì)某些終端機(jī)型的尺寸非常小，開發(fā)者可通過修改邏輯像素和柵格的換算比例，不需用戶界面的設(shè)計(jì)者單獨(dú)設(shè)計(jì)標(biāo)注，節(jié)省了設(shè)計(jì)者和開發(fā)者的時(shí)間，柵格標(biāo)注更加清晰，減輕了錯(cuò)誤的發(fā)生率。

采用柵格標(biāo)注應(yīng)用程序的用戶界面，能夠根據(jù)網(wǎng)頁的內(nèi)容制定合理的柵格，有了柵格的坐標(biāo)指引，布局更加合理美觀，有規(guī)律的頁面分割能提高網(wǎng)頁開發(fā)的效率。

圖8為一個(gè)實(shí)施例中用戶界面的實(shí)現(xiàn)裝置的結(jié)構(gòu)框圖。如圖8所示，一種用戶界面的實(shí)現(xiàn)裝置，包括界面獲取模塊810、參數(shù)獲取模塊820、比值獲取模塊830、轉(zhuǎn)換模塊840。其中：

界面獲取模塊810用于獲取以柵格長度為基本單元標(biāo)注的用戶界面。

具體地，柵格即網(wǎng)格，是一種平面設(shè)計(jì)的方法與風(fēng)格，運(yùn)用固定的格子設(shè)計(jì)版面布局。柵格采用的是正方形網(wǎng)格。柵格長度是指正方形的邊長，可采用a表示。

用戶界面是系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介，它實(shí)現(xiàn)信息的內(nèi)部形式與人類可以接收形式之間的轉(zhuǎn)換。標(biāo)注是對(duì)用戶界面進(jìn)行標(biāo)示注記，包括用戶界面里字體的大小、圖片的尺寸、字體和圖片等元素之間的間距。

以柵格長度為基本單元標(biāo)注的用戶界面是指采用柵格長度為基本單元對(duì)用戶界面中的元素進(jìn)行標(biāo)注，用戶界面中的元素包括字體、圖片、字體之間的間距、圖片之間的間距、字體和圖片之間的間距等。對(duì)用戶界面中的元素進(jìn)行標(biāo)記，例如對(duì)圖片的尺寸進(jìn)行標(biāo)注，為12a。

參數(shù)獲取模塊820用于獲取終端的屏幕寬的邏輯像素個(gè)數(shù)及屏幕寬的柵格數(shù)。

本實(shí)施例中，參數(shù)獲取模塊820還用于獲取終端的屏幕寬的物理像素個(gè)數(shù)，以及根據(jù)該物理像素個(gè)數(shù)得到終端的屏幕寬的邏輯像素個(gè)數(shù)。

屏幕寬是指終端顯示用戶界面時(shí)正常閱讀的屏幕的寬度，例如終端豎屏顯 示用戶界面，則屏幕寬為終端的屏幕的寬度；終端橫屏顯示用戶界面時(shí)，則屏幕寬為終端的屏幕的高度。

邏輯像素在IOS開發(fā)中使用的顯示點(diǎn)，在各IOS設(shè)備上根據(jù)放大倍可計(jì)算成具體設(shè)備的物理像素，如iphone3/3GS:1邏輯像素＝1物理像素，iphone4/4s/5/5c/6：1邏輯像素＝2物理像素。在Android系統(tǒng)中，邏輯像素為dp(Density-independent pixel，密度無關(guān)的像素，Android系統(tǒng)會(huì)根據(jù)具體的屏幕密度將dp轉(zhuǎn)化為實(shí)際的像素密度，在開發(fā)中使用dp可以確保在不同像素密度的屏幕上顯示統(tǒng)一的視覺長度。

根據(jù)屏幕寬的物理像素個(gè)數(shù)及物理像素與邏輯像素的對(duì)應(yīng)關(guān)系得到屏幕寬的邏輯像素的個(gè)數(shù)。

終端的操作系統(tǒng)為IOS系統(tǒng)時(shí)，參數(shù)獲取模塊820獲取終端的屏幕寬的物理像素個(gè)數(shù)；根據(jù)該物理像素個(gè)數(shù)及物理像素與邏輯像素的對(duì)應(yīng)關(guān)系得到終端的屏幕寬的邏輯像素個(gè)數(shù)。例如iphone6屏幕的總物理像素個(gè)數(shù)為750×1334，屏幕總邏輯像素個(gè)數(shù)為375×667。豎屏顯示時(shí)，屏幕寬的邏輯像素個(gè)數(shù)為375。

終端的操作系統(tǒng)為Android系統(tǒng)時(shí)，參數(shù)獲取模塊820獲取終端的屏幕寬的物理像素個(gè)數(shù)和屏幕像素密度；根據(jù)該屏幕寬的物理像素個(gè)數(shù)和屏幕像素密度得到終端的屏幕寬的邏輯像素個(gè)數(shù)。

具體地，屏幕像素密度是指每英寸屏幕長度具備的像素點(diǎn)數(shù)量，像素密度越高，代表屏幕的顯示效果越精細(xì)。屏幕像素密度包括屏幕的物理像素密度和屏幕的邏輯像素密度。例如，終端的屏幕物理像素密度數(shù)量為326，邏輯像素密度為163，屏幕寬的物理像素個(gè)數(shù)為750，可計(jì)算得出終端的屏幕寬所包含的dp(邏輯像素)數(shù)為750/(326/160)＝368dp。

此外，終端的操作系統(tǒng)不限于IOS、Android，還可為Windows Iphone等，在其他操作系統(tǒng)中也可采用屏幕寬的物理像素個(gè)數(shù)得到屏幕寬的邏輯像素。

本實(shí)施例中，參數(shù)獲取模塊820獲取終端的屏幕寬的大小及柵格長度的大小，以及根據(jù)終端的屏幕寬的大小及柵格長度的大小得到終端的屏幕寬的柵格數(shù)。

終端的屏幕寬的大小可采用屏幕寬的物理像素個(gè)數(shù)表示，柵格長度的大小 也可采用物理像素個(gè)數(shù)表示。可根據(jù)終端的屏幕寬的大小調(diào)整柵格長度的大小。

比值獲取模塊830用于根據(jù)該屏幕寬的邏輯像素個(gè)數(shù)及屏幕寬的柵格數(shù)得到單個(gè)柵格所對(duì)應(yīng)的邏輯像素個(gè)數(shù)。

具體地，柵格與IOS邏輯像素的換算公式為：1a對(duì)應(yīng)的邏輯像素＝屏幕寬的邏輯像素個(gè)數(shù)/屏幕寬的柵格數(shù)。

以iphone6為例，其屏幕寬包含375個(gè)邏輯像素，將屏幕劃分為125個(gè)柵格，根據(jù)換算公式可得出a與邏輯像素的比例為1a＝(375/125)邏輯像素＝3邏輯像素。

柵格與Android的dp換算公式為：1a對(duì)應(yīng)的邏輯像素＝屏幕寬的dp/屏幕寬的柵格數(shù)。在Android系統(tǒng)中，屏幕寬的dp數(shù)為368dp，將其125等分，根據(jù)換算公式可得出a與dp的基準(zhǔn)比例為1a＝(368/125)dp＝3dp。

此外，也可將柵格長度與邏輯像素的比例采用宏定義公式，將用戶界面中柵格長度標(biāo)注導(dǎo)入到宏定義的公式中得到對(duì)應(yīng)的邏輯像素標(biāo)注，不需考慮實(shí)際的物理像素。操作系統(tǒng)會(huì)根據(jù)不同的屏幕密度轉(zhuǎn)換成顯示像素，以適配各種終端。

轉(zhuǎn)換模塊840用于將以柵格長度為基本單元標(biāo)注的用戶界面根據(jù)單個(gè)柵格所對(duì)應(yīng)的邏輯像素個(gè)數(shù)轉(zhuǎn)換為以邏輯像素為基本單元標(biāo)注的用戶界面。

具體地，將柵格長度為基本單元標(biāo)注的用戶界面轉(zhuǎn)換為以邏輯像素為基本單元標(biāo)注的用戶界面后，通過使用邏輯像素，系統(tǒng)會(huì)自動(dòng)適配各種屏幕密度的設(shè)備。

上述用戶界面的實(shí)現(xiàn)裝置，以柵格長度為基本單元標(biāo)注用戶界面，通過獲取到終端的屏幕寬的邏輯像素個(gè)數(shù)及屏幕寬的柵格數(shù)，得到單個(gè)柵格所對(duì)應(yīng)的邏輯像素個(gè)數(shù)，將柵格長度標(biāo)注的用戶界面轉(zhuǎn)換為邏輯像素為基本單元標(biāo)注的用戶界面，以適配各種分辨率的設(shè)備，不需針對(duì)不同分辨率的終端分別設(shè)計(jì)用戶界面，節(jié)省設(shè)計(jì)時(shí)間；通過柵格長度標(biāo)注，只需轉(zhuǎn)換為邏輯像素，不需轉(zhuǎn)換為物理像素，避免可轉(zhuǎn)換物理像素可能產(chǎn)生誤差的情況，能夠更加方便和精準(zhǔn)地進(jìn)行用戶界面開發(fā)。

此外，針對(duì)某些終端機(jī)型的尺寸非常小，開發(fā)者可通過修改邏輯像素和柵 格的換算比例，不需用戶界面的設(shè)計(jì)者單獨(dú)設(shè)計(jì)標(biāo)注，節(jié)省了設(shè)計(jì)者和開發(fā)者的時(shí)間，柵格標(biāo)注更加清晰，減輕了錯(cuò)誤的發(fā)生率。

圖9為另一個(gè)實(shí)施例中用戶界面的實(shí)現(xiàn)裝置的結(jié)構(gòu)框圖。如圖9所示，一種用戶界面的實(shí)現(xiàn)裝置，除了包括界面獲取模塊810、參數(shù)獲取模塊820、比值獲取模塊830、轉(zhuǎn)換模塊840，還包括調(diào)整模塊850。其中：

調(diào)整模塊850用于根據(jù)該終端的屏幕寬的大小調(diào)整柵格長度的大小。

通過屏幕寬的大小調(diào)整柵格長度的大小，可適應(yīng)不同的分辨率。

本領(lǐng)域普通技術(shù)人員可以理解實(shí)現(xiàn)上述實(shí)施例方法中的全部或部分流程，是可以通過計(jì)算機(jī)程序來指令相關(guān)的硬件來完成，所述的程序可存儲(chǔ)于一非易失性計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中，該程序在執(zhí)行時(shí)，可包括如上述各方法的實(shí)施例的流程。其中，所述的存儲(chǔ)介質(zhì)可為磁碟、光盤、只讀存儲(chǔ)記憶體(Read-Only Memory，ROM)等。

以上所述實(shí)施例僅表達(dá)了本發(fā)明的幾種實(shí)施方式，其描述較為具體和詳細(xì)，但并不能因此而理解為對(duì)本發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對(duì)于本領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進(jìn)，這些都屬于本發(fā)明的保護(hù)范圍。因此，本發(fā)明專利的保護(hù)范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。