專利名稱：一種新型用戶界面的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及TMT、ICT、IOT以及用戶界面呈現(xiàn)應(yīng)用技術(shù)領(lǐng)域，適用于系統(tǒng)集成中間件應(yīng)用、具有用戶界面的智能終端、外設(shè)設(shè)備、智能家電等，具體是ー種用戶界面的呈現(xiàn)。
背景技術(shù)：
UI是User’s Interface,用戶界面，也稱人機(jī)界面,是指用戶和某些系統(tǒng)進(jìn)行交互方法的集合，這些系統(tǒng)不單單指電腦程序，還包括某種特定的機(jī)器，設(shè)備，復(fù)雜的工具等。隨著社會(huì)對(duì)電子產(chǎn)品要求越來(lái)越高，Ui界面的設(shè)計(jì)顯得尤為重要，一個(gè)好的n界面可以決定用戶對(duì)該產(chǎn)品的定位，也可以讓用戶得到良好的用戶體驗(yàn)，使用方便，操作簡(jiǎn)単。

發(fā)明內(nèi)容
本發(fā)明的目的在于提供ー種新型用戶界面，具有可用性強(qiáng)、適用性好的優(yōu)勢(shì)。本發(fā)明為了實(shí)現(xiàn)上述目的，采用的技術(shù)解決方案是:ー種界面，具有初始界面,其特征在于,包括:主顯示區(qū)塊，用以顯示第一承載組塊；輔顯示區(qū)塊，用以顯示第二承載組塊；所述輔顯示區(qū)塊位于所述主顯示區(qū)塊的外圍，第一承載組塊與第二承載組塊相關(guān)聯(lián)。優(yōu)選地，所述第一承載組塊排列呈矩形陣列；若存在位于主顯示區(qū)塊上方或下方的輔顯示區(qū)塊，第二承載組塊分成三組展現(xiàn)；若存在位于主顯示區(qū)塊左側(cè)或右側(cè)的輔顯示區(qū)塊，第二承載組塊分成三組展現(xiàn)。優(yōu)選地，所述主顯示區(qū)塊和輔顯示區(qū)塊之間呈現(xiàn)有輔助組塊。優(yōu)選地，所述初始界面具有2D、或3D、或2D和3D組合的呈現(xiàn)樣式。優(yōu)選地，所述第一承載組塊和第二承載組塊均關(guān)聯(lián)有過(guò)程界面，所述過(guò)程界面與初始界面呈現(xiàn)形式相同。優(yōu)選地，所述初始界面和過(guò)程界面具有背景，其背景可以為靜態(tài)或動(dòng)態(tài)，也可以為ー項(xiàng)應(yīng)用，如電影和音樂(lè)中的動(dòng)態(tài)圖片。優(yōu)選地，所述初始界面和/或過(guò)程界面中具有懸浮顯示區(qū)塊，用以顯示彈出組塊。優(yōu)選地，懸浮或彈出顯示區(qū)塊顯示的時(shí)候，位置與大小不定，但其大小要小于整個(gè)屏幕的大小。優(yōu)選地，所述主顯示區(qū)塊默認(rèn)有九個(gè)組塊，排列呈呈宮格形態(tài)或不規(guī)則形態(tài)，不規(guī)則形態(tài)的組塊要有1-9的數(shù)字標(biāo)識(shí)。九個(gè)默認(rèn)組塊可自由組合，但其數(shù)量不能超過(guò)九個(gè)。優(yōu)選地，所述主顯示區(qū)塊超過(guò)九個(gè)第一承載組塊，第一承載組塊分頁(yè)顯示。優(yōu)選地，位于主顯示區(qū)塊左側(cè)或右側(cè)的輔顯示區(qū)塊，寬度不超過(guò)整個(gè)界面寬的三分之一。有九個(gè)默認(rèn)組塊，要顯示的組塊個(gè)數(shù)超過(guò)九個(gè)，則添加功能組塊，用于將超出九個(gè)的組塊進(jìn)行翻頁(yè)或其他操作。顯示的九個(gè)默認(rèn)組塊可自由組合，但其數(shù)量不能超過(guò)九個(gè)。優(yōu)選地，位于主顯示區(qū)塊上方或下方的輔顯示區(qū)塊，高度不超過(guò)整個(gè)界面高的三分之一。高度不超過(guò)整個(gè)界面高的三分之一。顯示一到九個(gè)組塊，超過(guò)九個(gè)組塊，則顯示功能組塊，用于將超出九個(gè)的組塊進(jìn)行翻頁(yè)或其他操作。通過(guò)對(duì)組塊(泛格)和區(qū)塊進(jìn)行個(gè)性化布局的技術(shù)(不僅限于樣式)稱為泛格技木。通過(guò)運(yùn)用數(shù)學(xué)模型和算法，由不同的単位格組成的組塊(泛格)和區(qū)塊進(jìn)行個(gè)性化布局所構(gòu)成的承載內(nèi)容和應(yīng)用的多呈現(xiàn)界面稱為泛格界面。本發(fā)明的有益效果:此種界面組塊的布局方式，易學(xué)性高、可用性強(qiáng)、適應(yīng)性好、可移植到不同系統(tǒng)和操作平臺(tái)的界面呈現(xiàn)。在兼容傳統(tǒng)用戶顯示、操作模式的基礎(chǔ)上，開(kāi)拓創(chuàng)新，可以實(shí)現(xiàn)統(tǒng)ー標(biāo)準(zhǔn)的包括多屏互動(dòng)、語(yǔ)音操控、手勢(shì)操控等用戶體驗(yàn)，并為腦控等智能化操控提供支持。本發(fā)明提供的用戶界面可以跨系統(tǒng)、跨終端、跨平臺(tái)在不同領(lǐng)域進(jìn)行應(yīng)用，以用戶為中心的界面呈現(xiàn)方法，不受軟件平臺(tái)的約束，具有較強(qiáng)的產(chǎn)品易用性，規(guī)范化的布局和結(jié)構(gòu)，使用戶體驗(yàn)具有一致性。該方式可以構(gòu)造不同的系統(tǒng)及應(yīng)用，由不同的數(shù)學(xué)和邏輯模型所支持，并支持智能交互，用于呈現(xiàn)多形態(tài)終端的界面。


圖1是界面呈現(xiàn)流程圖。圖2是主顯示區(qū)塊與輔顯示區(qū)塊布局示例I。圖3是主顯示區(qū)塊與輔顯示區(qū)塊布局示例2。圖4是主顯示區(qū)塊與輔顯示區(qū)塊布局示例3。圖5是主顯示區(qū)塊與輔顯示區(qū)塊布局示例4。圖6是主顯示區(qū)塊與輔顯示區(qū)塊布局示例5。圖7是主顯示區(qū)塊與輔顯示區(qū)塊布局示例6。圖8是主顯示區(qū)塊與輔顯示區(qū)塊布局示例7。圖9是主顯示區(qū)塊與輔顯示區(qū)塊布局示例8。圖10是A區(qū)、C區(qū)內(nèi)組塊的布局示例I。圖11是A區(qū)、C區(qū)內(nèi)組塊的布局示例2。圖12是A區(qū)、C區(qū)內(nèi)組塊的布局示例3。圖13是B區(qū)、D區(qū)內(nèi)組塊的布局示例I。圖14是E區(qū)內(nèi)組塊的布局示例I。圖15是E區(qū)內(nèi)組塊的布局示例2。圖16是E區(qū)內(nèi)組塊的布局示例3。圖17是E區(qū)內(nèi)組塊的布局示例4。圖18是E區(qū)內(nèi)組塊的布局示例5。圖19是E區(qū)內(nèi)組塊的布局示例6。圖20是E區(qū)內(nèi)組塊的布局示例7。圖21是E區(qū)內(nèi)組塊的布局示例8。圖22是E區(qū)內(nèi)組塊的布局示例9。
圖23是E區(qū)內(nèi)組塊的布局示例10。圖24是主顯示區(qū)塊與輔顯示區(qū)塊布局示例9。圖25是主顯示區(qū)塊與輔顯示區(qū)塊布局示例10。圖26是主顯示區(qū)塊與輔顯示區(qū)塊布局示例11。圖27是主顯示區(qū)塊與輔顯示區(qū)塊布局示例12。圖28是主顯示區(qū)塊與輔顯示區(qū)塊布局示例13。
具體實(shí)施例方式下面結(jié)合附圖對(duì)本發(fā)明進(jìn)行詳細(xì)說(shuō)明:結(jié)合圖1，ー種界面，具有初始界面和過(guò)程界面，界面啟動(dòng)時(shí)首先是初始界面初始化，組塊界面布局，觸發(fā)組塊判斷是否存在組塊對(duì)應(yīng)的過(guò)程界面，若存在顯示過(guò)程界面即呈現(xiàn)過(guò)程界面的組塊界面布局，若不存在過(guò)程界面返回結(jié)束。格，是界面布置基元素的計(jì)算和計(jì)量單位，具有虛擬性、占位性，是界面顯示的基本単位，其大小比例可以設(shè)定。組塊:是組件的ー種，是承載元素內(nèi)容的空間域，不承載元素內(nèi)容的稱為空缺組塊，占位但不可見(jiàn)，其具有確定性、互異性、占位性等屬性，該組塊與狀態(tài)無(wú)關(guān)，具有被操作性，其大小由占位的格來(lái)決定，是按照一定規(guī)范構(gòu)成區(qū)的主體対象。其中，占位只占ー個(gè)格，位于輔顯示區(qū)塊位置，承載功能性元素內(nèi)容的特殊組塊稱為功能性組塊。附于被描述的區(qū)，用于輔助區(qū)的各種提示信息、狀態(tài)以及描述屬性，并不可被操作的特殊組塊稱為輔助區(qū)塊。顯示區(qū)塊:盛放各類對(duì)象的容器和集合，區(qū)分主顯示區(qū)塊與輔顯示區(qū)塊，輔顯示區(qū)塊分布于主顯示區(qū)塊的周邊或懸浮、疊加于主顯示區(qū)塊的表面，與狀態(tài)無(wú)關(guān)，主顯示區(qū)塊可単獨(dú)存在，主顯示區(qū)塊和輔顯示區(qū)塊也可以自由組合。主顯示區(qū)塊，用以顯示第一承載組塊，所述第一承載組塊呈正方形、長(zhǎng)方形、或形狀不定。輔顯示區(qū)塊，用以顯示第二承載組塊，所述第二承載組塊按橫向依次排列或縱向依次排列。所述輔顯示區(qū)塊位于所述主顯示區(qū)塊的外圍，第一承載組塊與第二承載組塊相關(guān)聯(lián)。界面的呈現(xiàn)形式:加載界面后，不分顯示區(qū)塊；若分顯示區(qū)塊為主顯示區(qū)塊和輔顯示區(qū)塊可以呈現(xiàn)不同的組合形態(tài)。若不增加輔顯示區(qū)塊，主顯示區(qū)塊自適應(yīng)占據(jù)屏幕大小，直接顯示主顯示區(qū)塊內(nèi)組塊所承載的內(nèi)容。若増加輔顯示區(qū)塊，主顯示區(qū)塊與輔顯示區(qū)塊根據(jù)比例自由組合，并將區(qū)內(nèi)組塊承載的內(nèi)容呈現(xiàn)。同時(shí)加載界面背景并將背景呈現(xiàn)，界面背景可以是靜態(tài)的，也可以是動(dòng)態(tài)的，也可以是ー項(xiàng)應(yīng)用，如電影或音樂(lè)播放下的動(dòng)態(tài)圖片。主顯示區(qū)塊布局主顯示區(qū)塊位于界面的中心,用E區(qū)來(lái)表示(E代表Eembeded，此指主顯示區(qū)塊)。主顯示區(qū)塊是第一承載組塊組成的，主顯示區(qū)塊內(nèi)的第一承載組塊展現(xiàn)形態(tài)可以為泛宮格形態(tài)和泛態(tài)格形態(tài)。輔顯示區(qū)塊布局
若増加輔顯示區(qū)塊，輔顯示區(qū)塊的寬不能超過(guò)整個(gè)界面寬的三分之一，高也不能超過(guò)整個(gè)界面高的三分之一，添加的輔顯示區(qū)塊分別用ABCDF區(qū)表示，輔顯示區(qū)塊是由不同第二承載組塊自由組合構(gòu)成的，A區(qū)和C區(qū)的位置應(yīng)分別位于界面的左側(cè)和右側(cè)；B區(qū)和D區(qū)的位置應(yīng)分別在界面的上方和下方；F區(qū)依附或懸浮或疊加在主顯示區(qū)塊表面的懸浮顯示區(qū)塊。主顯示區(qū)塊與輔顯示區(qū)塊可以自由組合，組合方式如圖2至圖5所示。如圖6所示，AEC區(qū)的長(zhǎng)度比是2:6:2 ；BED區(qū)的寬度比是1:8:1。如圖7所示，AE區(qū)的長(zhǎng)度比是2:8 ；BED區(qū)的寬度比是1:8:1。如圖8所示，若界面以3D形式呈現(xiàn)，每個(gè)組塊占ー個(gè)格，組塊的大小根據(jù)需要設(shè)定。如圖9所示，若界面以2D+3D形式呈現(xiàn)，布局中的區(qū)根據(jù)需要進(jìn)行ニ維和三維的自
由組合。A區(qū)、C區(qū)內(nèi)組塊的布局A區(qū)、C區(qū)內(nèi)組塊的組合形態(tài)呈現(xiàn)方式如圖10至圖12所示，組塊可以根據(jù)需要隨意放置，區(qū)內(nèi)組塊分成三組按縱向由界面上方至下方依次排列。B區(qū)、D區(qū)內(nèi)組塊的布局B區(qū)、D區(qū)內(nèi)組塊的組合形態(tài)呈現(xiàn)方式如圖13所示，組塊的大小為該組塊所處的區(qū)域大小的九分之一。區(qū)內(nèi)組塊分成三組按橫向由界面左側(cè)至右側(cè)依次排列。E區(qū)內(nèi)組塊的布局若以2D布局，區(qū)內(nèi)組塊的呈現(xiàn)方式如圖14至圖23所示，輔助組塊可以根據(jù)需要隨意放置，并且其大小能夠自由變換。宮格形態(tài)有如下幾種展現(xiàn)形式:滿格布局，包含九個(gè)組塊完整的呈現(xiàn)，如圖14所示。組格布局，為九個(gè)格布局的變形，主要表現(xiàn)為ー組塊占用多個(gè)位置的呈現(xiàn)形式，有多種展現(xiàn)形態(tài)，如圖15至圖18所示。特殊布局和空缺布局分為存在ー個(gè)空缺組塊、存在兩個(gè)空缺組塊、存在三個(gè)空缺組塊、存在四個(gè)空缺組塊、存在兩個(gè)空缺組塊(單獨(dú)空缺)、存在兩個(gè)空缺組塊(組合空缺)等情況。如圖19和圖20所示。組格布局和空缺布局同時(shí)存在的布局組格和空缺組塊的組合有多種形態(tài)，包括:組格占兩個(gè)格位置與ー個(gè)空格的組合、組格占三個(gè)格位置與ー個(gè)空缺組塊的組合、組格占四個(gè)格位置與ー個(gè)空缺組塊的組合等。如圖21和圖22所示。若為3D布局，區(qū)內(nèi)基格的組合形態(tài)為泛態(tài)格，組成基格的格的大小根據(jù)需要來(lái)設(shè)定，并且該基格所在的區(qū)存在的基格數(shù)量最多不能超過(guò)九個(gè)。若以個(gè)性化形式或3D形式呈現(xiàn)，如圖23所示。界面的布局可以根據(jù)需要，將E區(qū)組塊展現(xiàn)形式進(jìn)行特殊的改變，其改變方法如下:輔顯示區(qū)塊根據(jù)界面設(shè)計(jì)定義，其規(guī)則在于當(dāng)A、C區(qū)都顯示吋，E區(qū)的基格的設(shè)計(jì)布局只能以宮格的形態(tài)展現(xiàn)，如圖24所示，當(dāng)A、C區(qū)有一個(gè)區(qū)隱藏的時(shí)候，顯示的A或C區(qū)的設(shè)計(jì)布局以縱格的呈現(xiàn)方式存在，E區(qū)基格的設(shè)計(jì)布局則可以占據(jù)隱藏區(qū)的位置，呈特殊占位方式呈現(xiàn)，也可以不變。如圖25和圖26所示，當(dāng)A、C區(qū)都隱藏的時(shí)候，E區(qū)的設(shè)計(jì)布局可以占據(jù)A、C區(qū)域，E區(qū)組塊的設(shè)計(jì)布局則可以占據(jù)隱藏區(qū)的位置，呈特殊占位方式呈現(xiàn)，也可以保持不變。如圖27所示，點(diǎn)擊ー個(gè)按鈕后，需要出現(xiàn)ー個(gè)懸浮顯示區(qū)塊，用以顯示彈出組塊。呈現(xiàn)布局方式如圖28所示，界面各區(qū)內(nèi)普通組塊的數(shù)量不超過(guò)九個(gè)(包含九個(gè))。如果該區(qū)的組塊超過(guò)五個(gè)(包括五個(gè))，則第五個(gè)格所在的基格將會(huì)呈現(xiàn)ー個(gè)區(qū)分于其它組塊的表現(xiàn)形式，如加邊框、凸顯等用于讓人直觀，快速的識(shí)別第五個(gè)元素的展現(xiàn)位置?？v向排列的組塊有九個(gè)格，每三個(gè)之間都有ー個(gè)分界點(diǎn)，如此可以將九個(gè)組塊良好的分成三組，便于人眼識(shí)別，減少人為思考成本。當(dāng)然，上述說(shuō)明并非是對(duì)本發(fā)明的限制，本發(fā)明也并不僅限于上述舉例，本技術(shù)領(lǐng)域的技術(shù)人員在本發(fā)明的實(shí)質(zhì)范圍內(nèi)所做出的變化、改型、添加或替換，也應(yīng)屬于本發(fā)明的保護(hù)范圍。
權(quán)利要求
1.一種界面，具有初始界面，其特征在于，包括: 主顯示區(qū)塊，用以顯示第一承載組塊； 輔顯示區(qū)塊，用以顯示第二承載組塊； 所述輔顯示區(qū)塊位于所述主顯示區(qū)塊的外圍，第一承載組塊與第二承載組塊相關(guān)聯(lián)。
2.根據(jù)權(quán)利要求1所述的界面，其特征在于，所述第一承載組塊排列呈矩形陣列；若存在位于主顯示區(qū)塊上方或下方的輔顯示區(qū)塊，第二承載組塊分成三組展現(xiàn)；若存在位于主顯示區(qū)塊左側(cè)或右側(cè)的輔顯示區(qū)塊，第二承載組塊分成三組展現(xiàn)。
3.根據(jù)權(quán)利要求1所述的界面，其特征在于，所述主顯示區(qū)塊和輔顯示區(qū)塊之間呈現(xiàn)有輔助組塊。
4.根據(jù)權(quán)利要求1所述的界面，其特征在于，所述初始界面具有2D、或3D、或2D和3D組合的呈現(xiàn)樣式。
5.根據(jù)權(quán)利要求1至4任一項(xiàng)所述的界面，其特征在于，所述第一承載組塊和第二承載組塊均關(guān)聯(lián)有過(guò)程界面，所述過(guò)程界面與初始界面呈現(xiàn)形式相同。
6.根據(jù)權(quán)利要求5所述的界面，其特征在于，所述初始界面和/或過(guò)程界面中具有懸浮顯示區(qū)塊，用以顯示彈出組塊。
7.根據(jù)權(quán)利要求5所述的界面，其特征在于，所述主顯示區(qū)塊有九個(gè)第一承載組塊，排列呈宮格形。
8.根據(jù)權(quán)利要求5所述的界面，其特征在于，所述主顯示區(qū)塊超過(guò)九個(gè)第一承載組塊，第一承載組塊分頁(yè)顯示。
9.根據(jù)權(quán)利要求5所述的界面，其特征在于，位于主顯示區(qū)塊左側(cè)或右側(cè)的輔顯示區(qū)塊，寬度不超過(guò)整個(gè)界面寬的三分之一，所述輔顯示區(qū)塊具有超過(guò)九個(gè)第二承載組塊時(shí)，需將第十個(gè)及以上的第二承載組塊分頁(yè)顯示。
10.根據(jù)權(quán)利要求5所述的界面，其特征在于，位于主顯示區(qū)塊上方或下方的輔顯示區(qū)塊，高度不超過(guò)整個(gè)界面高的三分之一，所述輔顯示區(qū)塊具有超過(guò)九個(gè)第二承載組塊時(shí)，需將第十個(gè)及以上的第二承載組塊分頁(yè)顯示。
全文摘要
本發(fā)明公開(kāi)一種界面，具有初始界面和過(guò)程界面，界面啟動(dòng)時(shí)首先是初始界面初始化，組塊界面布局，觸發(fā)組塊判斷是否存在組塊對(duì)應(yīng)的過(guò)程界面，若存在顯示過(guò)程界面即呈現(xiàn)過(guò)程界面的組塊界面布局，若不存在過(guò)程界面返回結(jié)束。格是界面布置基元素的計(jì)算和計(jì)量單位，具有虛擬性、占位性，是界面顯示的基本單位，其大小比例可以設(shè)定。此種界面組塊的布局方式，可用于2D、3D以及2D+3D相結(jié)合的形態(tài)下，易學(xué)性高、可用性強(qiáng)、適應(yīng)性好、可移植到不同系統(tǒng)和操作平臺(tái)的界面呈現(xiàn)。在兼容傳統(tǒng)用戶顯示、操作模式的基礎(chǔ)上，開(kāi)拓創(chuàng)新，可以實(shí)現(xiàn)統(tǒng)一標(biāo)準(zhǔn)的包括多屏互動(dòng)、語(yǔ)音操控、手勢(shì)操控等用戶體驗(yàn)，并為腦控等智能化操控提供支持。
文檔編號(hào)G06F9/44GK103092627SQ20131004809
公開(kāi)日2013年5月8日 申請(qǐng)日期2013年2月6日 優(yōu)先權(quán)日2013年2月6日
發(fā)明者郗登振, 王淑榮, 王偉, 紀(jì)燕杰 申請(qǐng)人:青島旲天下智能科技有限公司