用戶界面的實現方法和裝置與流程

本發明涉及網頁設計領域，特別是涉及一種用戶界面的實現方法和裝置。

背景技術：

隨著移動終端的普及，越來越多的用戶使用移動終端瀏覽網頁。傳統的移動終端的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-Only Memory，ROM)等。

以上所述實施例僅表達了本發明的幾種實施方式，其描述較為具體和詳細，但并不能因此而理解為對本發明專利范圍的限制。應當指出的是，對于本領域的普通技術人員來說，在不脫離本發明構思的前提下，還可以做出若干變形和改進，這些都屬于本發明的保護范圍。因此，本發明專利的保護范圍應以所附權利要求為準。