TWI751576B - 具有動態背景之圖形使用者介面的提供方法、系統與紀錄媒體 - Google Patents

Abstract

一種具有動態背景之圖形使用者介面的提供方法，其於一顯示區域顯示一背景圖，以及可於背景圖上移動之至少一影像。當影像移動至預先定義之一視覺焦點區域時，一預定條件被用於判斷是否顯示一動畫圖。當判斷結果為是，顯示動畫圖。影像係沿顯示區域之一中心線移動，且預定條件包括是否為一特定時間。一種實現上述方法的系統與紀錄媒體亦被提出。

Description

具有動態背景之圖形使用者介面的提供方法、系統與紀 錄媒體

本發明是關於一種圖形使用者介面的提供方法、系統與紀錄媒體，特別關於一種具有動態背景之圖形使用者介面的提供方法、系統與紀錄媒體。

如何運用軟硬體技術來改善使用者關於圖形使用者介面的使用體驗，長久以來為一重要的技術課題。針對不同的應用，工程師在電子裝置上設計出各種不同的圖形使用者介面功能，並調整介面的運作邏輯與訊息的呈現方式，以提升使用者體驗。

例如，目前顯示圖片的應用程式多半僅將圖片依照順序排列。使用者在檢視圖片時，應用程式的使用者介面欠缺自動依據使用者所檢視的照片來調整畫面顯示內容的功能。這使得使用者介面顯得單調，使用者的操作體驗無法獲得提升。因此，需要一種技術方案，能夠在圖形化使用者介面中，自動依據使用者檢視的內容來動態調整畫面，以進一步提升使用者體驗。

一種具有動態背景之圖形使用者介面的提供方法，其於一顯示區域顯示一背景圖，以及可於背景圖上移動之至少一影像。當影像移動至預先 定義之一視覺焦點區域時，依據一預定條件判斷是否顯示一動畫圖。當判斷結果為是，顯示動畫圖。影像係沿顯示區域之一中心線移動，且預定條件包括是否為一特定時間。

在一實施例中，於顯示區域顯示之影像的數量為複數個，且影像係沿中心線依其相關聯時間排列。

在一實施例中，影像具有一相關聯時間，且預定條件包括影像的相關聯時間是否符合特定時間。特定時間可為一特定節日。當影像與一被拍攝對象相關，特定時間可為與被拍攝對象相關之一特定日期。預定條件也可包括當下位置是否為一特定位置。

在一實施例中，動畫圖可依據預定條件自一動畫圖庫中選擇。

在一實施例中，當影像移動至視覺焦點區域時，影像之尺寸較未移動至視覺焦點區域時大。視覺焦點區域可涵蓋顯示區域之中心點。視覺焦點區域的中心點可位於中心線，與顯示區域的中心點不重疊，且面積小於顯示區域的面積的一半。

在一實施例中，顯示區域與視覺焦點區域的形狀均為長方形，中心線與長方形之兩長邊平行，且視覺焦點區域的兩側邊與長方形之兩長邊重疊。

在一實施例中，動畫圖可包括於視覺焦點區域中改變形狀的動畫元素，例如由內向外擴散的煙火圖案或花瓣圖案。動畫圖也可包括於視覺焦點區域中移動的動畫元素，例如於視覺焦點區域中圍繞影像移動的圖像。顯示動畫圖的步驟可包括以動畫圖取代背景圖。

依另一實施態樣，一種圖形使用者介面的提供系統包括一顯示 裝置、一處理器與一儲存裝置。顯示裝置具有一顯示區域，儲存裝置，則儲存多數個程式指令。處理器於執行程式指令後，能夠於顯示區域顯示一背景圖，以及可於背景圖上移動之至少一影像。當影像移動至預先定義之一視覺焦點區域時，依據一預定條件判斷是否顯示一動畫圖，且當判斷結果為是，顯示動畫圖。影像移動時，係沿顯示區域之一中心線移動，且預定條件包括是否為一特定時間。

依另一實施態樣，一種非暫態紀錄媒體儲存多數個程式指令，使一系統之一處理器於執行該程式指令後，能夠於顯示區域顯示一背景圖，以及可於背景圖上移動之至少一影像。當影像移動至預先定義之一視覺焦點區域時，依據一預定條件判斷是否顯示一動畫圖，且當判斷結果為是，顯示動畫圖。影像移動時，係沿顯示區域之一中心線移動，且預定條件包括是否為一特定時間。

上述的技術方案能夠在圖形化使用者介面中讓影像為可依特定方式移動，且自動依據使用者移動到視覺焦點區域的影像，配合預設條件來顯示不同的動畫，因此大幅提升了使用者體驗。

1:系統

11:處理器

12:顯示裝置

13:儲存裝置

2:圖形使用者介面

21:顯示區域

22:背景圖

23:中心線

24:動畫圖

241:動畫元素

3a~3c:影像

41:動畫圖庫

VF:視覺焦點區域

[圖1]為一示意圖，顯示依本發明一實施例的具有動態背景之圖形使用者介面的提供系統的架構。

[圖2]為一示意圖，顯示本發明一實施例的圖形使用者介面的顯示畫面。

[圖3a]~[圖3c]為示意圖，顯示本發明一實施例的圖形使用者介面中，動畫圖與動畫元素的顯示狀況。

[圖4a]~[圖4c]為示意圖，顯示本發明另一實施例的圖形使用者介面中，動畫圖與動畫元素的顯示狀況。

[圖5a]~[圖5c]為示意圖，顯示本發明又一實施例的圖形使用者介面中，動畫圖與動畫元素的顯示狀況。

[圖6a]~[圖6c]為示意圖，顯示本發明一實施例的圖形使用者介面中，動畫圖與動畫元素的顯示狀況。

[圖7]為一示意圖，顯示本發明一實施例中動畫圖庫的例子。

請參考圖1，依本發明一實施例的具有動態背景之圖形使用者介面的提供系統1包括一處理器11、一顯示裝置12以及一儲存裝置13。在本實施例中，系統1實施於一行動電子裝置，例如一智慧型手機或一平板電腦。處理器11可為行動電子裝置的主要處理器。顯示裝置12可為一觸控式螢幕，其顯示一圖形使用者介面2，同時將使用者的觸摸轉換成控制訊號。儲存裝置13可為電子裝置非暫態的記憶體，例如快閃記憶體或其他種類的記憶體。儲存裝置13中儲存了處理器11可執行的程式指令。系統1的處理器11於執行程式指令後，可進行各種相對應的步驟。儲存裝置13亦儲存了多個影像3a~3c，其可為使用者之前拍攝的照片檔案。每個影像3a~3c分別對應不同的相關聯時間，且可顯示於顯示裝置12所顯示的圖形使用者介面2中。

請參考圖2，在本實施例中，系統1的處理器11在執行儲存裝置13所儲存的程式指令之後，會於圖形使用者介面2的一顯示區域21中顯示一背景圖22，並將儲存裝置13中儲存的影像3a~3c顯示於背景圖22上。影像3a~3c在背景圖22上可沿顯示區域21的中心線23移動，亦即，使用者可觸摸影像3a~3c之一，並在背景圖22上沿著中心線23滑動，以便沿著中心線23改變影像3a~3c在背景圖22上的位置。

顯示區域21的形狀為長方形，影像3a~3c沿與長方形的長邊平行的中心線23，自動依相關聯時間排列。例如，位於中心線23最上方的影像3a的相關聯時間較早，位於中心線23最下方的影像3c的相關聯時間則較晚。影像3a~3c的相關聯時間，可以是比如系統1為每個影像3a~3c預先分別設定的時間、使用者為影像3a~3c所分別設定的時間、影像3a~3c的拍攝時間、或是以其他方式與影像3a~3c建立了相關聯性的時間。例如，在本實施例中，系統1可以允許使用者上傳與每個日曆日相對應的影像，以建立一影像日記本。當使用者對應某個日曆日上傳影像之後，系統1就自動建立這個日曆日與所上傳的影像的相關聯性，亦即設定這個日曆日為所上傳的影像的相關聯時間。

當影像3a~3c之一沿著顯示區域21的中心線23被移動到一預先定義的視覺焦點區域VF時，系統1會依據一預定條件判斷是否顯示一動畫圖24。例如，請參考圖3a，當使用者將影像3b向上移動至視覺焦點區域VF內時，由於系統1判斷影像3b符合預定條件，因此顯示動畫圖24。如圖3b與圖3c所示，動畫圖24可包括在視覺焦點區域VF中，圍繞影像3b移動的動畫元素241。由於動畫圖24的動畫元素241同樣位於視覺焦點區域VF，因此能夠吸引使用者的注意力，提升使用者的體驗。

在本實施例中，預定條件可為位於視覺焦點區域VF影像的相關聯時間是否為一特定時間。例如，系統1可判斷位於視覺焦點區域VF的影像3b的相關聯時間是否為一特定假日。若是特定假日，則顯示與此特定假日相關的動畫圖。在其他的例子中，預定條件也可以是使用者使用系統1的當天日期是否為一特定日期，比如是否是特定假日、使用者的生日、或是特定流行疾病高峰日期等等。預定條件還可以跟系統1的位置相關，亦即，可以是系統1的當下位置是否為一特定位置，例如遊樂園或是值得紀念的地點等。

當影像與一被拍攝對象相關時，特定時間也可以是與被拍攝對象相關之一特定日期。例如，若拍攝對象是一新生兒，系統1可記錄與該新生 兒相關的基本資訊，比如生日等等，並推算出與新生兒相關的特定時間，例如滿月紀念日、每年的生日、應該施打疫苗的日期等等。

請參考圖7。儲存裝置13中可儲存一動畫圖庫41，以記錄預定條件與動畫圖之間的關聯性。例如，動畫圖庫41可區分「影像日期」、「當天日期」與「當下地點」等不同條件類別，以及不同條件類別可能對應的條件內容，比如「節日A」、「使用者生日」、「地點A」等等。不同的條件類別與不同條件內容，組合成不同的預定條件，且對應不同的動畫圖。

在本實施例中，視覺焦點區域VF是指在顯示區域中擬吸引使用者注意的主要區域，其可由系統1預先定義好，並記錄在儲存裝置13中。例如在圖2中，系統1預先定義視覺焦點區域VF的中心點是位於中心線23上，且不與顯示區域的中心點重疊，而是稍微偏上的位置。亦即，在儲存裝置13中，視覺焦點區域VF被預先定義並記錄為是顯示區域21的中心稍微偏上的區域。視覺焦點區域VF的形狀與顯示區域21的形狀均為長方形，且視覺焦點區域VF的面積小於顯示區域21的面積的一半。顯示區域21的長方形的兩長邊與中心線23平行，視覺焦點區域VF的兩側邊則與顯示區域21的長方形的兩長邊重疊。藉由此設定，使用者在使用系統1時，在顯示區域21中注意的視覺焦點，會是中心稍微偏上的區域。

在本實施例中，位於視覺焦點區域VF中的影像會比未位於視覺焦點區域VF中的影像大。例如，在圖2中，由於影像3a位在視覺焦點區域VF，因此影像3a的顯示尺寸會比不在視覺焦點區域VF的影像3b及3c的顯示尺寸大。在圖3a~圖3c中，由於影像3b位在視覺焦點區域VF，因此影像3b的顯示尺寸會較大，影像3a則因離開了視覺焦點區域VF，而改變為較小的顯示尺寸。

在本實施例中，動畫圖24包括了在視覺焦點區域VF中圍繞著影像移動的動畫元素241。由於在視覺焦點區域VF中顯示，所以動畫元素241的內容會跟影像一起，在視覺焦點區域VF的位置成為使用者注意的對象。

在其他例子中，動畫圖24的動畫元素241也可以是形狀改變、移動方式改變、或其他種類的元素。例如，請參考圖4a到圖4c，動畫圖24的動畫元素241可為多個花瓣圖案，其在視覺焦點區域VF中隨機地由內部向外緣擴散。又例如，請參考圖5a到圖5c，動畫元素241可以是在視覺焦點區域VF中移動經過影像背後的圖像，例如從左到右移動的送子鳥圖像等等。又例如，請參考圖6a到圖6c，動畫元素241可以是煙火圖案，不同的煙火光點隨機地出現後消失。上述三個例子的內容可以合併，例如花瓣可以跟煙火合併，由於預定條件與動畫圖之間具備多種關聯性，運用此種技術可讓使用者在視覺焦點區域看到更多與預定條件有關連性的不同變化，進一步提升使用者在操作圖形使用者介面時的體驗。

在顯示包括動畫元素241的動畫圖24時，可以採用與背景圖22使用不同圖層的技術。亦即，將動畫圖24的圖層蓋在背景圖22的上面。當移動影像導致預定條件未滿足時，移除動畫圖24的圖層以再次顯示背景圖。在另一實施例中，也可考慮以包括動畫圖24的動態圖取代背景圖22。亦即，直接把包括動畫圖24的動態圖當成背景圖22，顯示在顯示區域21。當移動影像導致預定條件未滿足時，再重新以原本的背景圖22取代包括動畫圖24的動態圖。

藉由上述實施例的技術方案，影像在圖形化使用者介面中為可移動，且系統自動依據使用者移動到視覺焦點區域的影像，配合預設條件來在視覺焦點區域中顯示不同的動畫。此技術方案大幅提升了使用者體驗。

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

2:圖形使用者介面

23:中心線

24:動畫圖

241:動畫元素

3a~3c:影像

VF:視覺焦點區域

Claims (51)

1. 一種圖形使用者介面的提供方法，包括：於一顯示區域顯示一背景圖，以及可於該背景圖上移動之至少一影像；當該影像移動至一視覺焦點區域時，依據一預定條件判斷是否顯示一動畫圖；以及當該判斷結果為是，顯示該動畫圖，其中：該影像移動時，係沿該顯示區域之一中心線移動，且該預定條件包括是否符合一特定時間。
2. 如請求項1的圖形使用者介面的提供方法，其中該影像具有一相關聯時間，且該預定條件包括該影像之該相關聯時間是否符合該特定時間。
3. 如請求項2的圖形使用者介面的提供方法，其中於該顯示區域顯示之該影像的數量為複數個，且該些影像係沿該中心線依其相關聯時間排列。
4. 如請求項1的圖形使用者介面的提供方法，其中該特定時間為一特定節日。
5. 如請求項1的圖形使用者介面的提供方法，其中該影像與一被拍攝對象相關，且該特定時間為與該被拍攝對象相關之一特定日期。
6. 如請求項1的圖形使用者介面的提供方法，其中該預定條件更包括當下位置是否為一特定位置。
7. 如請求項1的圖形使用者介面的提供方法，更包括：依據該預定條件自一動畫圖庫中選擇該動畫圖。
8. 請求項1的圖形使用者介面的提供方法，更包括：當該影像移動至該視覺焦點區域時，使該影像之尺寸較未移動至該視覺焦點區域時大。
9. 如請求項1的圖形使用者介面的提供方法，其中該視覺焦點區域涵蓋該顯示區域的中心點。
10. 如請求項1的圖形使用者介面的提供方法，其中該視覺焦點區域的中心點位於該中心線，且與該顯示區域的中心點不重疊。
11. 如請求項1的圖形使用者介面的提供方法，其中該視覺焦點區域的面積小於該顯示區域的面積的一半。
12. 如請求項1的圖形使用者介面的提供方法，其中該顯示區域與該視覺焦點區域的形狀均為長方形，該中心線與該顯示區域之兩長邊平行，且該視覺焦點區域的兩側邊與該顯示區域之兩長邊重疊。
13. 如請求項1的圖形使用者介面的提供方法，其中該動畫圖包括於該視覺焦點區域中改變形狀之一動畫元素。
14. 如請求項13的圖形使用者介面的提供方法，其中該動畫元素包括於該視覺焦點區域中由內向外擴散的一煙火圖案或一花瓣圖案。
15. 如請求項1的圖形使用者介面的提供方法，其中該動畫圖包括於該視覺焦點區域中移動之一動畫元素。
16. 如請求項15的圖形使用者介面的提供方法，其中該動畫元素係於該視覺焦點區域中圍繞該影像移動。
17. 如請求項1的圖形使用者介面的提供方法，其中該顯示該動畫圖的步驟包括：以該動畫圖取代該背景圖。
18. 一種圖形使用者介面的提供系統，包括：一顯示裝置，其具有一顯示區域；一處理器，以及一儲存多數個程式指令，該處理器於執行該程式指令後，能夠進行以下步驟：於一顯示區域顯示一背景圖，以及可於該背景圖上移動之至少一影像；當該影像移動至一視覺焦點區域時，依據一預定條件判斷是否顯示一動畫圖；以及當該判斷結果為是，顯示該動畫圖，其中：該影像移動時，係沿該顯示區域之一中心線移動，且該預定條件包括一特定時間。
19. 如請求項18的圖形使用者介面的提供系統，其中該影像具有一相關聯時間，且該預定條件包括該影像之該相關聯時間是否符合該特定時間。
20. 如請求項19的圖形使用者介面的提供系統，其中於該顯示區域顯示之該影像的數量為複數個，且該些影像係沿該中心線依其相關聯時間排列。
21. 如請求項18的圖形使用者介面的提供系統，其中該特定時間為一特定節日。
22. 如請求項18的圖形使用者介面的提供系統，其中該影像與一被拍攝對象相關，且該特定時間為與該被拍攝對象相關之一特定日期。
23. 如請求項18的圖形使用者介面的提供系統，其中該預定條件更包括當下位置是否為一特定位置。
24. 如請求項18的圖形使用者介面的提供系統，其中該處理器於執行該程式指令後，更能夠進行以下步驟：依據該預定條件自一動畫圖庫中選擇該動畫圖。
25. 如請求項18的圖形使用者介面的提供系統，其中該處理器於執行該程式指令後，更能夠進行以下步驟：當該影像移動至該視覺焦點區域時，使該影像之尺寸較未移動至該視覺焦點區域時大。
26. 如請求項18的圖形使用者介面的提供系統，其中該視覺焦點區域涵蓋該顯示區域的中心點。
27. 如請求項18的圖形使用者介面的提供系統，其中該視覺焦點區域的中心點位於該中心線，且與該顯示區域的中心點不重疊。
28. 如請求項18的圖形使用者介面的提供系統，其中該視覺焦點區域的面積小於該顯示區域的面積的一半。
29. 如請求項18的圖形使用者介面的提供系統，其中該顯示區域與該視覺焦點區域的形狀均為長方形，該中心線與該顯示區域之兩長邊平行，且該視覺焦點區域的兩側邊與該顯示區域之兩長邊重疊。
30. 如請求項18的圖形使用者介面的提供系統，其中該動畫圖包括於該視覺焦點區域中改變形狀之一動畫元素。
31. 如請求項30的圖形使用者介面的提供系統，其中該動畫元素包括於該視覺焦點區域中由內向外擴散的一煙火圖案或一花瓣圖案。
32. 如請求項18的圖形使用者介面的提供系統，其中該動畫圖包括於該視覺焦點區域中移動之一動畫元素。
33. 如請求項32的圖形使用者介面的提供系統，其中該動畫元素係於該視覺焦點區域中圍繞該影像移動。
34. 如請求項18的圖形使用者介面的提供系統，其中該顯示該動畫圖的步驟包括：以該動畫圖取代該背景圖。
35. 一種非暫態紀錄媒體，其儲存多數個程式指令，使一系統之一處理器於執行該程式指令後，能夠進行以下步驟：於一顯示區域顯示一背景圖，以及可於該背景圖上移動之至少一影像；當該影像移動至一視覺焦點區域時，依據一預定條件判斷是否顯示一動畫圖；以及當該判斷結果為是，顯示該動畫圖，其中：該影像移動時，係沿該顯示區域之一中心線移動，且該預定條件包括一特定時間。
36. 如請求項35的非暫態紀錄媒體，其中該影像具有一相關聯時間，且該預定條件包括該影像之該相關聯時間是否符合該特定時間。
37. 如請求項36的非暫態紀錄媒體，其中於該顯示區域顯示之該影像的數量為複數個，且該些影像係沿該中心線依其相關聯時間排列。
38. 如請求項35的非暫態紀錄媒體，其中該特定時間為一特定節日。
39. 如請求項35的非暫態紀錄媒體，其中該影像與一被拍攝對象相關，且該特定時間為與該被拍攝對象相關之一特定日期。
40. 如請求項35的非暫態紀錄媒體，其中該預定條件更包括當下位置是否為一特定位置。
41. 如請求項35的非暫態紀錄媒體，其中該系統之該處理器於執行該程式指令後，更能夠進行以下步驟：依據該預定條件自一動畫圖庫中選擇該動畫圖。
42. 如請求項35的非暫態紀錄媒體，其中該系統之該處理器於執行該程式指令後，更能夠進行以下步驟：當該影像移動至該視覺焦點區域時，使該影像之尺寸較未移動至該視覺焦點區域時大。
43. 如請求項35的非暫態紀錄媒體，其中該視覺焦點區域涵蓋該顯示區域的中心點。
44. 如請求項35的非暫態紀錄媒體，其中該視覺焦點區域的中心點位於該中心線，且與該顯示區域的中心點不重疊。
45. 如請求項35的非暫態紀錄媒體，其中該視覺焦點區域的面積小於該顯示區域的面積的一半。
46. 如請求項35的非暫態紀錄媒體，其中該顯示區域與該視覺焦點區域的形狀均為長方形，該中心線與該該顯示區域之兩長邊平行，且該視覺焦點區域的兩側邊與該顯示區域之兩長邊重疊。
47. 如請求項35的非暫態紀錄媒體，其中該動畫圖包括於該視覺焦點區域中改變形狀之一動畫元素。
48. 如請求項47的非暫態紀錄媒體，其中該動畫元素包括於該視覺焦點區域中由內向外擴散的一煙火圖案或一花瓣圖案。
49. 如請求項35的非暫態紀錄媒體，其中該動畫圖包括於該視覺焦點區域中移動之一動畫元素。
50. 如請求項49的非暫態紀錄媒體，其中該動畫元素係於該視覺焦點區域中圍繞該影像移動。
51. 如請求項35的非暫態紀錄媒體，其中該顯示該動畫圖的步驟包括：以該動畫圖取代該背景圖。

Images