本發(fā)明涉及信息處理技術(shù)，尤其涉及一種設(shè)計稿適配方法、裝置及系統(tǒng)。

背景技術(shù)：

隨著終端設(shè)備和互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，移動客戶端產(chǎn)品的視覺設(shè)計越來越多地受到重視。對移動客戶端產(chǎn)品進(jìn)行開發(fā)過程中，有專門的設(shè)計人員對用戶界面(userinterface，ui)進(jìn)行設(shè)計。但由于不同的終端設(shè)備具有不同的屏幕尺寸和分辨率，因而，還需要針對ui設(shè)計稿，依據(jù)不同終端設(shè)備的屏幕參數(shù)進(jìn)行適配，以在各種終端設(shè)備上都能夠獲得較好的呈現(xiàn)效果。

現(xiàn)有技術(shù)中，往往需要設(shè)計人員采用手動調(diào)節(jié)方式，進(jìn)行設(shè)計稿適配，也就是將設(shè)計稿中所有元素，通過手動方式進(jìn)行縮小或放大，從而生成多種尺寸的設(shè)計稿。顯然，采用這種方式設(shè)計稿的適配效率較為低下。

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

本發(fā)明提供一種設(shè)計稿適配方法、裝置及系統(tǒng)，用于解決現(xiàn)有技術(shù)中需要手動調(diào)節(jié)方式進(jìn)行設(shè)計稿適配所導(dǎo)致的適配效率較低的技術(shù)問題。

為達(dá)到上述目的，本發(fā)明的實施例采用如下技術(shù)方案：

第一方面，本發(fā)明實施例提供了一種設(shè)計稿適配系統(tǒng)，包括：設(shè)計軟件和插件，所述插件通過應(yīng)用程序接口與所述設(shè)計軟件連接；

所述設(shè)計軟件，用于生成源設(shè)計稿；

所述插件，用于對目標(biāo)設(shè)計稿的尺寸和所述源設(shè)計稿的尺寸之間的比例關(guān)系進(jìn)行計算得到比例因子；獲取用于描述所述源設(shè)計稿中各個圖層元素調(diào)整需求的適配屬性；根據(jù)所述各個圖層元素的適配屬性，對所述源設(shè)計稿中的對應(yīng)圖層元素，依據(jù)所述比例因子進(jìn)行縮放得到所述目標(biāo)設(shè)計稿。

第二方面，本發(fā)明實施例提供了一種設(shè)計稿適配方法，包括：

對目標(biāo)設(shè)計稿的尺寸，以及源設(shè)計稿的尺寸之間的比例關(guān)系進(jìn)行計算得到比例因子；

獲取用于描述所述源設(shè)計稿中各個圖層元素調(diào)整需求的適配屬性；

根據(jù)所述各個圖層元素的適配屬性，對所述源設(shè)計稿中的對應(yīng)圖層元素，依據(jù)所述比例因子進(jìn)行縮放得到目標(biāo)設(shè)計稿。

第三方面，本發(fā)明實施例提供了一種設(shè)計稿適配裝置，包括：

計算模塊，用于對目標(biāo)設(shè)計稿的尺寸，以及源設(shè)計稿的尺寸之間的比例關(guān)系進(jìn)行計算得到比例因子；

獲取模塊，用于獲取用于描述所述源設(shè)計稿中各個圖層元素調(diào)整需求的適配屬性；

調(diào)整模塊，用于根據(jù)所述各個圖層元素的適配屬性，對所述源設(shè)計稿中的對應(yīng)圖層元素，依據(jù)所述比例因子進(jìn)行縮放得到目標(biāo)設(shè)計稿。

本發(fā)明實施例所提供的設(shè)計稿適配方法、裝置及系統(tǒng)，通過對目標(biāo)設(shè)計稿的尺寸，以及源設(shè)計稿的尺寸之間的比例關(guān)系進(jìn)行計算得到比例因子之后，獲取用于描述所述源設(shè)計稿中各個圖層元素調(diào)整需求的適配屬性，進(jìn)而根據(jù)所述各個圖層元素的適配屬性，對所述源設(shè)計稿中的對應(yīng)圖層元素，依據(jù)所述比例因子進(jìn)行縮放得到目標(biāo)設(shè)計稿。由于用戶僅需要確定目標(biāo)設(shè)計稿的尺寸，以及各個圖層元素的適配屬性，便可以實現(xiàn)設(shè)計稿的適配過程，無需手動進(jìn)行縮放，節(jié)省了人力，提高了設(shè)計稿的適配效率。

附圖說明

本發(fā)明上述的和/或附加的方面和優(yōu)點(diǎn)從下面結(jié)合附圖對實施例的描述中將變得明顯和容易理解，其中：

圖1為本發(fā)明實施例提供的一種設(shè)計稿適配系統(tǒng)的結(jié)構(gòu)示意圖；

圖2為本發(fā)明實施例所提供的設(shè)計稿適配方法的流程示意圖；

圖3為輸入界面的示意圖之一；

圖4為輸入界面的示意圖之二；

圖5為適配屬性的示意圖；

圖6為輸入界面的示意圖之三；

圖7為設(shè)計稿的適配示意圖；

圖8為本發(fā)明實施例提供的一種設(shè)計稿適配裝置的結(jié)構(gòu)示意圖。

具體實施方式

下面結(jié)合附圖對本發(fā)明實施例提供的設(shè)計稿適配方法、裝置及系統(tǒng)進(jìn)行詳細(xì)描述。

圖1為本發(fā)明實施例提供的一種設(shè)計稿適配系統(tǒng)的結(jié)構(gòu)示意圖，如圖1所示，設(shè)計稿適配系統(tǒng)包括：設(shè)計軟件和插件。

其中，設(shè)計軟件和插件，插件通過應(yīng)用程序接口(api)與設(shè)計軟件連接。

具體地，設(shè)計軟件，用于生成移動客戶端產(chǎn)品的源設(shè)計稿。例如，這里的設(shè)計軟件可以為sketch軟件。

插件，用于對目標(biāo)設(shè)計稿的尺寸和所述源設(shè)計稿的尺寸之間的比例關(guān)系進(jìn)行計算得到比例因子；獲取用于描述所述源設(shè)計稿中各個圖層元素調(diào)整需求的適配屬性；根據(jù)所述各個圖層元素的適配屬性，對所述源設(shè)計稿中的對應(yīng)圖層元素，依據(jù)所述比例因子進(jìn)行縮放得到所述目標(biāo)設(shè)計稿。

設(shè)計人員可以通過設(shè)計軟件設(shè)計源設(shè)計稿，在完成源設(shè)計稿的設(shè)計之后，可以通過該插件，與多種類型的終端設(shè)備進(jìn)行適配，得到分別與對應(yīng)終端設(shè)備匹配的多個目標(biāo)設(shè)計稿。從而可以將所獲得的多個目標(biāo)設(shè)計稿應(yīng)用于所適配的終端設(shè)備，保證在各個終端設(shè)備上，ui設(shè)計都能夠獲得較好的呈現(xiàn)效果。

本實施例中的插件，支持用戶通過在輸入界面上輸入的方式，自定義各個圖層元素的適配規(guī)則，從而能夠在依據(jù)比例因子進(jìn)行縮放過程中，增加圖層元素的縮放靈活性，使得縮放得到的目標(biāo)設(shè)計稿在終端設(shè)備上具有較好的呈現(xiàn)效果。具體來說，插件通過對目標(biāo)設(shè)計稿的尺寸，以及源設(shè)計稿的尺寸之間的比例關(guān)系進(jìn)行計算得到比例因子之后，獲取用于描述所述源設(shè)計稿中各個圖層元素調(diào)整需求的適配屬性，進(jìn)而根據(jù)所述各個圖層元素的適配屬性，對所述源設(shè)計稿中的對應(yīng)圖層元素，依據(jù)所述比例因子進(jìn)行縮放得到目標(biāo)設(shè)計稿。由于用戶僅需要確定目標(biāo)設(shè)計稿的尺寸，以及各個圖層元素的適配屬性，便可以實現(xiàn)設(shè)計稿的適配過程，無需手動進(jìn)行縮放，節(jié)省了人力，提高了設(shè)計稿的適配效率。

為了清楚說明插件所執(zhí)行的設(shè)計稿適配過程，本實施例還提供了一種設(shè)計稿適配方法，圖2為本發(fā)明實施例所提供的設(shè)計稿適配方法的流程示意圖，如圖2所示，插件所執(zhí)行的設(shè)計稿適配方法包括：

步驟201，對目標(biāo)設(shè)計稿的尺寸，以及源設(shè)計稿的尺寸之間的比例關(guān)系進(jìn)行計算得到比例因子。

具體地，用戶已通過設(shè)計軟件在源畫板上獲得了源設(shè)計稿，為了在與終端設(shè)備匹配的目標(biāo)畫板上呈現(xiàn)目標(biāo)設(shè)計稿，可以通過api接口調(diào)用本實施例中的插件。插件在運(yùn)行過程中，通過圖3所示的輸入界面獲取用戶所選定的目標(biāo)設(shè)計稿所需適配的終端設(shè)備，插件可以通過計算該終端設(shè)備的邏輯尺寸與該終端設(shè)備的屏幕縮放因子的乘積，得到目標(biāo)設(shè)計稿的物理像素尺寸，也可以直接查詢得到該終端設(shè)備的物理像素尺寸。進(jìn)而，插件通過計算目標(biāo)設(shè)計稿的物理像素尺寸與源設(shè)計稿的物理像素尺寸之間的比值，得到比例因子。

其中，源設(shè)計稿的物理像素尺寸等于源設(shè)計稿的邏輯尺寸與源設(shè)計稿所適配的源屏幕的屏幕縮放因子的乘積。

為了便于用戶對目標(biāo)設(shè)計稿的尺寸進(jìn)行輸入，可以預(yù)先設(shè)定一些常用終端設(shè)備的選項以便用戶進(jìn)行選擇，若選項中不存在所需的尺寸，用戶可以手動進(jìn)行輸入。例如：圖3中預(yù)先設(shè)定了一些常用終端設(shè)備的型號，供用戶進(jìn)行選擇。插件在通過如圖3所示的輸入界面，獲取到用戶所選定的目標(biāo)設(shè)計稿所需適配的終端設(shè)備之后，插件在設(shè)計軟件上生成匹配該終端設(shè)備的目標(biāo)畫板，通常目標(biāo)畫板的尺寸與終端設(shè)備的屏幕尺寸相同，以便在該目標(biāo)畫板上呈現(xiàn)與該終端設(shè)備適配的目標(biāo)設(shè)計稿中各個圖層元素。

需要說明的是，一般情況下，這里所提及的尺寸為寬度或者高度。在圖3所示的輸入界面中所標(biāo)識的尺寸具體為邏輯尺寸，還是物理像素尺寸，可以與用戶進(jìn)行約定，一般來說，圖3中所標(biāo)識的尺寸為物理像素尺寸。

為了便于讀者理解，下面將對物理像素尺寸和邏輯尺寸進(jìn)行簡要介紹。

在衡量屏幕尺寸時，可以采用兩種不同的尺寸類型，一種是指開發(fā)時使用的邏輯尺寸，另一種是設(shè)計時習(xí)慣使用的物理像素尺寸，也稱為像素尺寸。邏輯尺寸的單位為邏輯分辨率(point)，物理像素尺寸的單位為像素分辨率(pixel)，邏輯尺寸和設(shè)備尺寸之間符合一定的比例關(guān)系，這個比例關(guān)系稱為屏幕縮放因子，也就是圖3中“@”后的取值，一般情況下，屏幕縮放因子的取值為1、2或3。

步驟202，獲取用于描述源設(shè)計稿中各個圖層元素調(diào)整需求的適配屬性。

其中，用戶可以在設(shè)計軟件的畫板上添加繪制各種圖層元素，或者說，畫板是由各種圖層元素構(gòu)成的，根據(jù)圖層元素的內(nèi)容不同，可以劃分為不同類別，例如：內(nèi)容為文字的，可以作為文本(text)圖層；內(nèi)容為圖片的可以作為圖片(bitmap)圖層，另外，還可以有內(nèi)容為控件的控件圖層等等。

具體地，如圖4所示的輸入界面用于輸入各圖層元素的適配屬性，由于適配屬性用于進(jìn)行縮放處理，從而也稱為縮放屬性。其中，適配屬性用于指示尺寸屬性和/或頁邊距屬性所對應(yīng)的縮放狀態(tài)。用戶可以手工定義圖層元素的6種屬性所對應(yīng)的縮放狀態(tài)，這里的屬性可以包括尺寸屬性和/或頁邊距屬性。具體來說，如圖5所示，尺寸屬性至少包括高和寬，頁邊距屬性至少包括上邊距、下邊距、左邊距和右邊距，而縮放狀態(tài)可以包括固定、縮放以及保持寬高比例縮放。通過用戶所定義的適配屬性，可以確定在適配設(shè)計稿時，源設(shè)計稿的高寬和上下左右邊距是否固定、縮放、保持寬高比例縮放。

進(jìn)一步，適配屬性還用于指示圖層元素的對齊方式，在圖4所示的輸入界面中，用戶也可以選擇一些圖層元素的類型，比如文本圖層元素、控件圖層元素等，指定這些圖層元素所需執(zhí)行的對齊方式，例如：左、右、上和/或下對齊，插件會自動定義6種屬性的狀態(tài)值。比如，若用戶的圖4所示的輸入界面中勾選“alignmentleft”，則左邊距尺寸不變，高寬上下右邊距尺寸縮放。

進(jìn)一步，在用戶在圖4所示的輸入界面中輸入適配屬性之前，還可以在圖6所示的輸入界面中輸入適用于目標(biāo)畫板中的通用規(guī)則，通用規(guī)則可以包括：

字體是否隨源設(shè)計稿各圖層元素進(jìn)行縮放；和/或，各圖層元素垂直方向的間距是否變化；和/或，用于呈現(xiàn)目標(biāo)設(shè)計稿的目標(biāo)畫板，與所述目標(biāo)設(shè)計稿所適配的終端設(shè)備屏幕的仿真程度。

作為一種可能的實現(xiàn)方式，在用戶自定義適配屬性之后，可以針對每一個圖層元素，根據(jù)對應(yīng)的適配屬性，生成具有一定含義的后綴，以便在目標(biāo)畫板中生成目標(biāo)設(shè)計稿的過程中，依據(jù)各個圖層元素的后綴，采用后綴指示的適配屬性進(jìn)行縮放處理。

步驟203，根據(jù)所述各個圖層元素的適配屬性，對所述源設(shè)計稿中的對應(yīng)圖層元素，依據(jù)所述比例因子進(jìn)行縮放得到目標(biāo)設(shè)計稿。

具體地，針對源設(shè)計稿中各圖層元素，在滿足所述通用規(guī)則的條件下，所述插件按照所述圖層元素的適配屬性，以所述比例因子進(jìn)行縮放得到所述目標(biāo)設(shè)計稿。

在一種可能的實現(xiàn)方式中，在滿足通用規(guī)則的條件下，插件對源設(shè)計稿中的每一圖層元素，依據(jù)所述比例因子進(jìn)行縮放；插件按照所述圖層元素的適配屬性，對縮放后的圖層元素進(jìn)行調(diào)整；插件根據(jù)調(diào)整后的圖層元素，生成目標(biāo)設(shè)計稿。

進(jìn)一步，在插件對源設(shè)計稿中的每一圖層元素，依據(jù)所述比例因子進(jìn)行縮放之前，還可以對源設(shè)計稿中的各個圖層元素進(jìn)行預(yù)處理，以解決不同版本設(shè)計軟件之間的兼容問題對縮放所造成的影響。

為了清楚說明適配效果，圖7為設(shè)計稿的適配示意圖，如圖7所示，針對源畫板上的源設(shè)計稿中的各個圖層元素，分別依據(jù)對應(yīng)的適配屬性，以比例因子x進(jìn)行縮放，得到了目標(biāo)畫板中的目標(biāo)設(shè)計稿。如圖7所示，從源畫板至目標(biāo)畫板中，源設(shè)計稿中的一些圖層元素發(fā)生了縮放，而另一些則未進(jìn)行縮放，同時，針對圖層元素執(zhí)行了上對齊或者固定上邊距的方式，使得目標(biāo)畫板中的目標(biāo)設(shè)計稿比例協(xié)調(diào)，呈現(xiàn)了較為美觀的效果。

在插件實際運(yùn)行過程中，圖3、圖4和圖6所示的輸入界面的顯示順序可以進(jìn)行適當(dāng)調(diào)整，本實施例中對于輸入界面的顯示順序不做限定。

可見，本實施例所提供的設(shè)計稿適配方法，通過對目標(biāo)設(shè)計稿的尺寸，以及源設(shè)計稿的尺寸之間的比例關(guān)系進(jìn)行計算得到比例因子之后，獲取用于描述所述源設(shè)計稿中各個圖層元素調(diào)整需求的適配屬性，進(jìn)而根據(jù)所述各個圖層元素的適配屬性，對所述源設(shè)計稿中的對應(yīng)圖層元素，依據(jù)所述比例因子進(jìn)行縮放得到目標(biāo)設(shè)計稿。由于用戶僅需要確定目標(biāo)設(shè)計稿的尺寸，以及各個圖層元素的適配屬性，便可以實現(xiàn)設(shè)計稿的適配過程，無需手動進(jìn)行縮放，節(jié)省了人力，提高了設(shè)計稿的適配效率。

本發(fā)明實施例還提供了一種設(shè)計稿適配裝置，用于執(zhí)行前述設(shè)計稿適配方法，圖8為本發(fā)明實施例提供的一種設(shè)計稿適配裝置的結(jié)構(gòu)示意圖，如圖8所示，裝置包括：計算模塊81、獲取模塊82和調(diào)整模塊83。

計算模塊81，用于對目標(biāo)設(shè)計稿的尺寸，以及源設(shè)計稿的尺寸之間的比例關(guān)系進(jìn)行計算得到比例因子。

獲取模塊82，用于獲取用于描述所述源設(shè)計稿中各個圖層元素調(diào)整需求的適配屬性。

調(diào)整模塊83，用于根據(jù)所述各個圖層元素的適配屬性，對所述源設(shè)計稿中的對應(yīng)圖層元素，依據(jù)所述比例因子進(jìn)行縮放得到目標(biāo)設(shè)計稿。

作為一種可能的實現(xiàn)方式，計算模塊81，具體用于通過輸入界面獲取用戶所選定的所述目標(biāo)設(shè)計稿所需適配的終端設(shè)備；計算所述終端設(shè)備的邏輯尺寸與所述終端設(shè)備的屏幕縮放因子的乘積，得到所述目標(biāo)設(shè)計稿的物理像素尺寸；計算所述目標(biāo)設(shè)計稿的物理像素尺寸與所述源設(shè)計稿的物理像素尺寸之間的比值，得到所述比例因子。

獲取模塊82，具體用于獲取用戶所輸入的各圖層元素的適配屬性；所述適配屬性用于指示尺寸屬性和/或頁邊距屬性所對應(yīng)的縮放狀態(tài)。適配屬性還用于指示所述圖層元素的對齊方式。

調(diào)整模塊83，具體用于對所述源設(shè)計稿中的每一圖層元素，依據(jù)所述比例因子進(jìn)行縮放；按照所述圖層元素的適配屬性，對縮放后的所述圖層元素進(jìn)行調(diào)整；根據(jù)調(diào)整后的圖層元素，生成所述目標(biāo)設(shè)計稿。

進(jìn)一步，在調(diào)整模塊83對所述源設(shè)計稿中的對應(yīng)圖層元素，依據(jù)所述比例因子進(jìn)行縮放得到目標(biāo)設(shè)計稿之前，獲取模塊82還用于獲取用戶所選擇的通用規(guī)則。

其中，所述通用規(guī)則包括：

字體是否隨源設(shè)計稿各圖層元素進(jìn)行縮放；

和/或，各圖層元素垂直方向的間距是否變化；

和/或，用于呈現(xiàn)目標(biāo)設(shè)計稿的目標(biāo)畫板，與所述目標(biāo)設(shè)計稿所適配的終端設(shè)備屏幕的仿真程度。

基于此，調(diào)整模塊83針對所述源設(shè)計稿中各圖層元素，在滿足所述通用規(guī)則的條件下，按照所述圖層元素的適配屬性，以所述比例因子進(jìn)行縮放得到所述目標(biāo)設(shè)計稿。

本實施例所提供的設(shè)計稿適配裝置，通過對目標(biāo)設(shè)計稿的尺寸，以及源設(shè)計稿的尺寸之間的比例關(guān)系進(jìn)行計算得到比例因子之后，獲取用于描述所述源設(shè)計稿中各個圖層元素調(diào)整需求的適配屬性，進(jìn)而根據(jù)所述各個圖層元素的適配屬性，對所述源設(shè)計稿中的對應(yīng)圖層元素，依據(jù)所述比例因子進(jìn)行縮放得到目標(biāo)設(shè)計稿。由于用戶僅需要確定目標(biāo)設(shè)計稿的尺寸，以及各個圖層元素的適配屬性，便可以實現(xiàn)設(shè)計稿的適配過程，無需手動進(jìn)行縮放，節(jié)省了人力，提高了設(shè)計稿的適配效率。

本領(lǐng)域普通技術(shù)人員可以理解：實現(xiàn)上述各方法實施例的全部或部分步驟可以通過程序指令相關(guān)的硬件來完成。前述的程序可以存儲于一計算機(jī)可讀取存儲介質(zhì)中。該程序在執(zhí)行時，執(zhí)行包括上述各方法實施例的步驟；而前述的存儲介質(zhì)包括：rom、ram、磁碟或者光盤等各種可以存儲程序代碼的介質(zhì)。

最后應(yīng)說明的是：以上各實施例僅用以說明本發(fā)明的技術(shù)方案，而非對其限制；盡管參照前述各實施例對本發(fā)明進(jìn)行了詳細(xì)的說明，本領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解：其依然可以對前述各實施例所記載的技術(shù)方案進(jìn)行修改，或者對其中部分或者全部技術(shù)特征進(jìn)行等同替換；而這些修改或者替換，并不使相應(yīng)技術(shù)方案的本質(zhì)脫離本發(fā)明各實施例技術(shù)方案的范圍。