TWI466009B - 使用者介面的資訊顯示方法 - Google Patents

Description

使用者介面的資訊顯示方法

本發明是有關於一種使用者介面(User Interface，UI)的資訊顯示方法，且特別是有關於一種具有動態圖示磚(live tile)的使用者介面的資訊顯示方法。

為了使人機互動之操作更具直覺性以及更具人性化，圖形介面因此隨之發展。由於科技的進步，各式各樣消費型電子產品不斷地更新與改良，例如可利用觸碰進行操控的智慧型手機等，因此操作介面也必須隨之改善，以使人更容易理解資訊並且減少介面使用的操作錯誤。

微軟即將推出的新版視窗作業系統(即Windows 8)可支援兩種圖形介面，一種是延續視窗作業系統的傳統桌面模式(Desktop Mode)；另一種是以現代化地鐵系統的標誌及風格所設計出的地鐵模式使用者介面(以下簡稱為Metro UI)。

圖1繪示為一種微軟視窗作業系統的Metro UI的顯示畫面示意圖。如圖1所示的Metro UI的顯示畫面100中，具有多個並排且具不同尺寸的矩形方塊，在此稱之為圖示磚(tile)。每一圖示磚皆可由使用者任意選取、拖拉並且擺放在使用者自訂的位置上。其中，圖示磚依其功能又可分為捷徑圖示磚以及動態圖示磚(live tile)。捷徑圖示磚為習知之應用程式縮圖(Application Shortcut)，經由使用者點選之後便可進入或開啟此縮圖所代表的應用程式，方便使用者操作。動態圖示磚除了具備捷徑圖示磚所具有的功能之外，還可動態更新圖示磚內所顯示的圖/文訊息，可以讓使用者去關注自己所關心的內容。然而，不論為動態圖示磚或捷徑圖示磚，如圖1所示的各個圖示磚皆為單獨運行，彼此之間並無任何關聯性。

有鑑於此，本發明提供一種使用者介面的資訊顯示方法，藉以增加動態圖示磚之間的資訊關聯性(correlation)。

本發明提出一種使用者介面的資訊顯示方法，包括下列步驟。首先，提供具有多數個動態圖示磚的使用者介面，並定義各個動態圖示磚的功能屬性及其附屬欄位。接著，偵測使用者將此些動態圖示磚中的第一動態圖示磚自第一位置拖曳移動至第二位置的選取操作。之後，判斷移動至第二位置的第一動態圖示磚與相鄰區域的第二動態圖示磚是否具有相關聯的附屬欄位。若第一動態圖示磚與第二動態圖示磚具有相關聯的附屬欄位，則在第一動態圖示磚中對應顯示與第二動態圖示磚相關聯的聯動資訊。

在本發明之一實施例中，所述之在第一動態圖示磚中對應顯示與第二動態圖示磚相關聯的聯動資訊包括下列步驟。更改第一動態圖示磚中的附屬欄位之內容使其相同於第二動態圖示磚之附屬欄位之內容。並且利用第一動態圖示磚的功能屬性與更改後的附屬欄位之內容產生聯動資訊，並在第一動態圖示磚中顯示此聯動資訊。

在本發明之一實施例中，所述之判斷移動至第二位置的第一動態圖示磚與相鄰區域的第二動態圖示磚是否具有相關聯的附屬欄位的步驟包括搜尋以第二位置為中心的十字形區域並且與第一動態圖示磚相鄰的多數個第二動態圖示磚。判斷第一動態圖示磚與相鄰的第二動態圖示磚是否具有相關聯的附屬欄位。

在本發明之一實施例中，所述之若第一動態圖示磚與相鄰的第二動態圖示磚具有相關聯的附屬欄位，則更包括在第一動態圖示磚中輪流顯示與相鄰的第二動態圖示磚相關聯的多數個聯動資訊。

在本發明之一實施例中，所述之使用者介面的資訊顯示方法更包括在第一動態圖示磚中動態更新與相鄰的第二動態圖示磚相關聯的各個聯動資訊並依據預設時間間隔輪流顯示各個聯動資訊。

在本發明之一實施例中，所述之使用者介面的資訊顯示方法更包括判斷在預設時間內是否偵測到使用者將第一動態圖示磚自第二位置拖曳移動至第三位置的選取操作。若是，則刪除在第一動態圖示磚中所顯示的聯動資訊。

在本發明之一實施例中，所述之在刪除第一動態圖示磚中所顯示的聯動資訊之後，更包括恢復顯示第一動態圖示磚的預設資訊內容。

在本發明之一實施例中，所述之定義各個動態圖示磚的功能屬性及其附屬欄位的步驟包括分別判斷各個動態圖示磚是否會隨時間變化而改變所顯示的資訊內容。若是，則依據所顯示的資訊內容定義各個動態圖示磚的功能屬性及其附屬欄位。

在本發明之一實施例中，所述之功能屬性包括天氣、時間、新聞、股市、匯率、音樂或相片屬性。

在本發明之一實施例中，所述之附屬欄位包括用以輔助表達位置資訊的地名、國家、城市或經緯度資訊。

基於上述，本發明所提供之使用者介面的資訊顯示方法，藉由分辨動態圖示磚的功能屬性以及附屬欄位，使得相鄰的動態圖示磚之間可自動產生具資訊關聯性的聯動資訊。

為讓本發明之上述特徵和優點能更明顯易懂，下文特舉實施例，並配合所附圖式作詳細說明如下。

如圖1所示的Metro UI的顯示畫面100中，具有多個並排的捷徑圖示磚以及動態圖示磚。捷徑圖示磚(例如圖1之圖示磚110)方便使用者進行選取而可直接進入欲操作的應用程式，然而，捷徑圖示磚所顯示的為對應之應用程式的縮圖，並不會更新圖示磚之內容。圖示磚120則為動態圖示磚，其對應一種天氣預報之應用程式，經使用者設定後，在圖示磚120內所顯示的圖/文訊息可定時更新；圖示磚130亦為動態圖示磚，其對應一種股市投資狀態之應用程式，可隨時更新最新的漲跌資訊。

然而，現有使用者介面的各個圖示磚之間皆為單獨運行，不論為動態圖示磚或捷徑圖示磚，彼此並無任何關聯性。然而，若是能經由使用者簡單的操作，讓不同的動態圖示磚之間自動產生相關聯的資訊互動關係，並且顯示具資訊關聯性的聯動資訊(linkage information)，將使管理更加人性化、使用者介面的操作更加流暢以及連貫。本發明便是基於上述觀點進而發展出的一種使用者介面的資訊顯示方法。為了使本發明之內容更為明瞭，以下列舉實施例作為本發明確實能夠據以實施的範例。

圖2是依照本發明一實施例所繪示之使用者介面的資訊顯示方法的流程圖。圖3是依照本發明一實施例所繪示之使用者介面的資訊顯示方法的應用情境示意圖。請同時參照圖2與圖3。

首先於步驟S210中，提供具有多數個動態圖示磚的使用者介面，並定義各個動態圖示磚的功能屬性及其附屬欄位。為了方便說明本發明之技術，圖3(a)至圖3(f)所示僅為使用者介面中包含部份圖示磚之顯示畫面。如圖3(a)所示，顯示畫面300包括動態圖示磚t1、t3以及捷徑圖示磚0。功能屬性主要依據動態圖示磚所對應之應用程式所能提供之資訊而定。在一實施例中，所述之功能屬性可包括天氣、時間、新聞、股市、匯率、音樂或相片等屬性；所述之附屬欄位可包括地名、國家、城市或經緯度資訊等可用以輔助表達位置之資訊。

如圖3(a)所示，動態圖示磚t1所顯示之主要資訊為「22:50」，附屬欄位為「紐約市」，換句話說，動態圖示磚t1代表「紐約市的時間為22:50」。動態圖示磚t1之主要功能在於提供時間資訊，因此其功能屬性可定義為時間，附屬欄位則為城市。同理，動態圖示磚t3所顯示之主要資訊為「28℃，晴」，附屬欄位為「台北市」，動態圖示磚t3代表「台北市的天氣為28℃，晴」。因此，動態圖示磚t3之主要功能在於提供天氣資訊，附屬欄位則為城市。

須說明的是，本實施例具有動態圖示磚的使用者介面可顯示於各種電子產品例如是電腦、筆記型電腦、平板電腦、智慧型手機、導航裝置、電視等等電子產品的顯示介面。其中，使用者例如可透過滑鼠、鍵盤、螢幕等輸出/入裝置來與上述電子產品進行互動，若電子產品提供觸控功能(例如具備觸控螢幕)，則使用者亦可透過手或觸控筆等操控觸控螢幕來進行互動操作。

接著在步驟S220中，偵測使用者將動態圖示磚中的第一動態圖示磚自第一位置拖曳移動至第二位置的選取操作。如圖3(b)所示，在本實施例中，第一動態圖示磚即為動態圖示磚t1，當使用者將動態圖示磚t1自第一位置L1拖曳移動至捷徑圖示磚t2與動態圖示磚t3之間，則使用者介面會自動調整圖示磚之間的位置，調整後如圖3(c)所示。

在步驟S230中，判斷移動至第二位置的第一動態圖示磚與位於相鄰區域的第二動態圖示磚是否具有相關聯的附屬欄位。若判斷第一動態圖示磚與第二動態圖示磚之間具有相關聯的附屬欄位，則接續步驟S240；反之，若兩者之間並未具有相關聯的附屬欄位，則接續步驟S250。如圖3(c)所示，與動態圖示磚t1位於相鄰區域的第二動態圖示磚即為動態圖示磚t3。其中，動態圖示磚t1與動態圖示磚t3的附屬欄位皆為可用以輔助表達位置資訊的城市，因此判斷兩者之間具有關聯性，接續步驟S240。

在步驟S240中，在第一動態圖示磚中對應顯示與第二動態圖示磚相關聯的聯動資訊。詳細地說，須先更改第一動態圖示磚中的附屬欄位之內容使其相同於第二動態圖示磚之附屬欄位之內容。再利用第一動態圖示磚的功能屬性與更改後的附屬欄位之內容產生聯動資訊，並在第一動態圖示磚中顯示此聯動資訊。如圖3(d)所示，動態圖示磚t1將其附屬欄位之內容由「紐約市」更改為「台北市」，而動態圖示磚t1之功能屬性為時間，因此結合功能屬性與「台北市」則可產生「台北市的時間為11:50」的聯動資訊，並將此聯動資訊顯示於動態圖示磚t1當中，據此，動態圖示磚t1、t3皆顯示具有相同附屬欄位的最近資訊。

另一方面，在步驟S250中，若第一動態圖示磚與第二動態圖示磚之間並未具有相關聯的附屬欄位，代表無法產生相關聯的聯動資訊，則不做任何變動，各個動態圖示磚顯示各自的資訊。

圖4是依照本發明另一實施例所繪示之使用者介面的資訊顯示方法的流程圖。本實施例同樣搭配圖3之應用情境示意圖作為輔助說明，請同時參照圖3與圖4。

首先，提供具有多數個動態圖示磚的使用者介面，並定義各個動態圖示磚的功能屬性及其附屬欄位(步驟S410)。偵測使用者將動態圖示磚中的第一動態圖示磚自第一位置拖曳移動至第二位置的選取操作(步驟S420)。判斷移動至第二位置的第一動態圖示磚與位於相鄰區域的第二動態圖示磚是否具有相關聯的附屬欄位(步驟S430)。在第一動態圖示磚中對應顯示與第二動態圖示磚相關聯的聯動資訊(步驟S440)。若第一動態圖示磚與第二動態圖示磚之間並未具有相關聯的附屬欄位，各個動態圖示磚顯示各自的資訊(步驟S450)。由於本實施例之步驟S410~S450相同或類似於圖2所示之步驟S210~S250，故其細部流程在此不予贅述。

接下來在步驟S460中，判斷在預設時間內是否偵測到使用者將第一動態圖示磚自第二位置拖曳移動至第三位置的選取操作。其中，預設時間可由使用者自訂，例如是30秒、1分、3分等等，在此不限制。如圖3(e)所示，若使用者在預定時間內將動態圖示磚t1自第二位置L2拖曳移動至其他地方，則可接續步驟S470。

於步驟S470，刪除在第一動態圖示磚中所顯示的聯動資訊，並且恢復顯示第一動態圖示磚的預設資訊內容。如圖3(f)所示，由於動態圖示磚t1拖曳移動至捷徑圖示磚0之左方，因此使用者介面自動調整圖示磚之間的位置，並且在動態圖示磚t1中原本的聯動資訊「台北市的時間為11:50」已被刪除，附屬欄位之內容恢復原本預設的「紐約市」，因此圖3(f)之動態圖示磚t1顯示資訊為「紐約市的時間為22:52」。需說明的是，圖3(a)與圖3(f)之動態圖示磚t1所示之時間相差了2分鐘，係因為動態圖示磚本身會定時更新圖示磚內所顯示的圖/文訊息，藉以讓使用者獲得最新的資訊內容。

基於上述，在原本Metro UI的設計中，時間屬性動態圖示磚和天氣屬性動態圖示磚各自顯示各自的資訊，並不會互相影響亦無相關聯性。然而，本發明藉由使用者簡單的選取操作，使得具有共同附屬欄位的動態圖示磚之間可以產生互動並且增加了動態圖示磚之間的資訊關聯性。

再舉一實施例作為範例說明。圖5是依照本發明又一實施例所繪示之使用者介面的資訊顯示方法的流程圖。請參照圖5。

首先，提供具有多數個動態圖示磚的使用者介面，並定義各個動態圖示磚的功能屬性及其附屬欄位(步驟S510)。偵測使用者將動態圖示磚中的第一動態圖示磚自第一位置拖曳移動至第二位置的選取操作(步驟S520)。

接下來在步驟S530中，搜尋以第二位置為中心的十字形區域並且與第一動態圖示磚相鄰的多數個第二動態圖示磚。圖6是依照本發明又一實施例所繪示之具有多數個動態圖示磚的使用者介面的簡略示意圖。請同時參照圖5與圖6。在本實施例中，第一動態圖示磚即為動態圖示磚t4，動態圖示磚t4係由一外部位置移動至目前位置，因此，在以目前位置為中心的十字形區域A的範圍內並且與動態圖示磚t4相鄰的第二動態圖示磚即為動態圖示磚t5、t6。

在步驟S540中，判斷第一動態圖示磚與相鄰的第二動態圖示磚之間是否具有相關聯的附屬欄位。若是，則接續步驟S550，在第一動態圖示磚中輪流顯示與相鄰的第二動態圖示磚之間相關聯的多數個聯動資訊。若否，則接續步驟S560，各個動態圖示磚顯示各自的動態資訊。

以圖6為例，假設動態圖示磚t4之功能屬性為提供時間資訊，附屬欄位之內容為「台北」；動態圖示磚t5之功能屬性為提供新聞資訊，附屬欄位之內容為「東京」；動態圖示磚t6之功能屬性為提供天氣資訊，附屬欄位之內容為「紐約」。因此，動態圖示磚t4與動態圖示磚t5、t6之間皆具有可用以表達位置資訊的附屬欄位。因此，動態圖示磚t4便會自動產生「東京的時間」以及「紐約的時間」兩個不同的聯動資訊。在一實施例中，動態圖示磚t4例如可採用翻轉(peek animation)的方式輪流顯示各個聯動資訊，或可由使用者自行設定一預設時間間隔，例如每隔5秒動態圖示磚t4會自動進行翻轉以輪流顯示各個聯動資訊。

綜上所述，本發明之動態圖示磚所屬的功能屬性以及附屬欄位之類別並不限於上述，凡是藉由使用者的選取操作使得相鄰的動態圖示磚之間可自動產生具資訊關聯性的聯動資訊，即為本發明之精神所在。本發明增加了使用者介面之資訊顯示的功能，使得管理更加人性化、更增加了使用者進行圖形介面操作的流暢性以及連貫性。

雖然本發明已以實施例揭露如上，然其並非用以限定本發明，任何所屬技術領域中具有通常知識者，在不脫離本發明之精神和範圍內，當可作些許之更動與潤飾，故本發明之保護範圍當視後附之申請專利範圍所界定者為準。

100、300、302、304、306、308、310、600．．．顯示畫面

110、120、130、t1~t6．．．圖示磚

A．．．十字形區域

L1．．．第一位置

L2．．．第二位置

S210~S250．．．一實施例之使用者介面的資訊顯示方法之各步驟

S410~S470．．．另一實施例之使用者介面的資訊顯示方法之各步驟

S510~S560．．．又一實施例之使用者介面的資訊顯示方法之各步驟

圖1繪示為一種微軟視窗作業系統的Metro UI的顯示畫面示意圖。

圖2是依照本發明一實施例所繪示之使用者介面的資訊顯示方法的流程圖。

圖3(a)至圖3(f)是依照本發明一實施例所繪示之使用者介面的資訊顯示方法的應用情境示意圖。

圖4是依照本發明另一實施例所繪示之使用者介面的資訊顯示方法的流程圖。

圖5是依照本發明又一實施例所繪示之使用者介面的資訊顯示方法的流程圖。

圖6是依照本發明又一實施例所繪示之具有多數個動態圖示磚的使用者介面的簡略示意圖。

S210~S250．．．使用者介面的資訊顯示方法之各步驟

Claims (10)

1. 一種使用者介面的資訊顯示方法，包括下列步驟：提供具有多數個動態圖示磚的一使用者介面，並定義各該動態圖示磚的一功能屬性及一附屬欄位；偵測一使用者將該些動態圖示磚中的一第一動態圖示磚自一第一位置拖曳移動至一第二位置的選取操作；判斷移動至該第二位置的該第一動態圖示磚與相鄰區域的至少一第二動態圖示磚是否具有相關聯的該附屬欄位；以及若該第一動態圖示磚與該至少一第二動態圖示磚具有相關聯的該附屬欄位，在該第一動態圖示磚中對應顯示與該至少一第二動態圖示磚相關聯的一聯動資訊。
2. 如申請專利範圍第1項所述之使用者介面的資訊顯示方法，其中在該第一動態圖示磚中對應顯示與該至少一第二動態圖示磚相關聯的該聯動資訊的步驟包括：將該第一動態圖示磚中的該附屬欄位之內容更改成與該至少一第二動態圖示磚之該附屬欄位之內容相同；以及利用該第一動態圖示磚的該功能屬性與更改後的該附屬欄位之內容產生該聯動資訊，並在該第一動態圖示磚中顯示該聯動資訊。
3. 如申請專利範圍第1項所述之使用者介面的資訊顯示方法，其中判斷移動至該第二位置的該第一動態圖示磚與相鄰區域的該至少一第二動態圖示磚是否具有相關聯的該附屬欄位的步驟包括：搜尋以該第二位置為中心的十字形區域並且與該第一動態圖示磚相鄰的多數個第二動態圖示磚；以及判斷該第一動態圖示磚與相鄰的該些第二動態圖示磚是否具有相關聯的該附屬欄位。
4. 如申請專利範圍第3項所述之使用者介面的資訊顯示方法，其中若該第一動態圖示磚與相鄰的該些第二動態圖示磚具有相關聯的該附屬欄位，更包括：在該第一動態圖示磚中輪流顯示與相鄰的該些第二動態圖示磚相關聯的多數個聯動資訊。
5. 如申請專利範圍第4項所述之使用者介面的資訊顯示方法，更包括：在該第一動態圖示磚中動態更新與相鄰的該些第二動態圖示磚相關聯的各該聯動資訊並依據一預設時間間隔輪流顯示各該聯動資訊。
6. 如申請專利範圍第1項所述之使用者介面的資訊顯示方法，更包括：判斷在一預設時間內是否偵測到該使用者將該第一動態圖示磚自該第二位置拖曳移動至一第三位置的選取操作；以及若是，刪除在該第一動態圖示磚中所顯示的該聯動資訊。
7. 如申請專利範圍第6項所述之使用者介面的資訊顯示方法，其中在刪除該第一動態圖示磚中所顯示的該聯動資訊之後，更包括：恢復顯示該第一動態圖示磚的預設資訊內容。
8. 如申請專利範圍第1項所述之使用者介面的資訊顯示方法，其中定義各該動態圖示磚的該功能屬性及該附屬欄位的步驟包括：分別判斷各該動態圖示磚是否會隨時間變化而改變所顯示的一資訊內容；以及若是，依據所顯示的該資訊內容定義各該動態圖示磚的該功能屬性及該附屬欄位。
9. 如申請專利範圍第1項所述之使用者介面的資訊顯示方法，其中：該功能屬性包括天氣、時間、新聞、股市、匯率、音樂或相片屬性。
10. 如申請專利範圍第1項所述之使用者介面的資訊顯示方法，其中：該附屬欄位包括用以輔助表達位置資訊的地名、國家、城市或經緯度資訊。