頁面顯示方法、電子裝置、程序產品的製作方法

2023-09-10 00:12:00

專利名稱：頁面顯示方法、電子裝置、程序產品的製作方法
技術領域：
本發明涉及頁面縮放技術，尤其涉及在移動裝置上縮放顯示文字的程序方法。
背景技術：
手持式裝置已普遍具備瀏覽網頁的功能。一般而言，網頁文件的內容包羅萬象，其 排版方式以及頁面大小的變化往往超過單一屏幕所能顯示。因此網頁瀏覽界面例如微軟的 Internet Explorer , Opera公司的Opera 瀏覽器，蘋果(Apple)公司的safari 瀏覽器等，
均提供縮放或卷頁等人機界面以方便使用者閱讀網頁文件。在蘋果公司的產品iPhone 上 已存在一種多點觸控(Multi Touch)的技術，可同時檢測屏幕上多個碰觸點，並根據這些碰 觸點的特定的移動行為來控制瀏覽器的特效，包含放大、縮小、上下左右捲動、畫面旋轉等。 然而在畫面放大的過程中，顯示在畫面上的字體雖然變大了，但是所能顯示的字數卻變少 了。原本關注的特定文字可能隨著放大而被擠出屏幕的可見範圍之外。除此之外，一般文 字是左往右橫向排列，而使用者的閱讀習慣是由逐行往下閱讀。單行文字被放大後超出橫 向畫面的部分必須以橫向捲軸來移動尋找。為了閱讀單一整行已放大的文字，必須不斷地 往右捲動畫面，而同一時間上下相鄰行的文字因為前後文接不上而無法同時未被讀取。如 此一來，對使用者而言，單一畫面顯示的文字在同一時間內只有一行是有意義的，缺代整體 的效率性與方便性。有鑑於此，一種可改善閱讀效果的人機界面是有待開發的。

發明內容
本發明提出一種頁面顯示方法，可應用在具有一屏幕的電子裝置上，用以顯示一 文字區塊。首先接收一縮放指令，接著根據該縮放指令決定該內容區塊中的一焦點內容，並 對該內容區塊中的內容進行縮放。最後排列該內容區塊中經縮放後的內容，使該內容區塊 的寬度不超出該屏幕的一顯示區域的寬度，並從內容經縮放後的該內容區塊中，根據該焦 點內容的位置決定該內容區塊被顯示在該顯示區域上的部分。本發明另一實施例是上述方法所應用的電子裝置，包含一屏幕以及一人機界面。 屏幕顯示一文字區塊。人機界面接收一縮放指令。該縮放指令決定該內容區塊中的一焦點 內容，並對該內容區塊中的內容進行縮放。該人機界面排列該內容區塊中經縮放後的內容， 使該內容區塊的寬度不超出該屏幕的一顯示區域的寬度，並根據該焦點內容經縮放與排列 後的位置，決定該內容區塊被在該顯示區域的部分。本發明另一實施例是一種程序產品，應用於包含上述屏幕的裝置，以顯示一文字 區塊。其中該程序產品可以是上述人機界面中的軟體部分，被執行時接收一縮放指令以決 定該內容區塊中的一焦點內容，並對該內容區塊中的內容進行縮放。該程序產品排列該內 容區塊中經縮放後的內容，使該內容區塊的寬度不超出該屏幕的一顯示區域的寬度，並根 據該焦點內容經縮放與排列後的位置，決定該內容區塊被在該顯示區域的部分。


圖1為一電子裝置100包含一觸控屏幕120的實施例； 圖2為一網頁文件200被顯示在一顯示區域110上的實施例； 圖3a為一內容區塊320被縮放的實施例； 圖3b 圖3d為縮放內容區塊320成為內容區塊330的實施例 圖4a為本發明實施例的頁面顯示方法的流程圖；以及 圖4b為本發明實施例的選擇顯示區域110的流程圖。主要元件符號說明
102a，102b接觸點 106內容 112橫向中軸 200網頁文件 210圖片
100電子裝置 104a, 104b箭頭方向 110顯示區域 120觸控屏幕 202,204 文字
220，320，330，340，350 內容區塊
302a，302b 接觸點306，306，文字
304a，304b箭頭方向312筆勢軌跡314圓心
具體實施例方式圖1為一電子裝置100包含一屏幕120的實施例。該電子裝置100可以是手機，個 人數字助理，可攜式多媒體播放機，甚或是任何可用來瀏覽各式網頁和文件的計算機產品。 該屏幕120是主要的顯示設備，對應一顯示區域110。在圖1中，該顯示區域110的長寬可 能小於等於該屏幕120的長寬，在本發明實施例中大部分情況可視為相同。該屏幕120可 搭配鍵盤、滑鼠(未圖示)提供使用者互動功能。在本實施例中，該屏幕120可以是一多點 觸控式的顯示器。使用者可同時在該屏幕120上接觸多個點，並以特定的移動方式來直接 觸發特定的功能。舉例來說，接觸點102a和接觸點102b代表該屏幕120上被使用者同時 碰觸的兩個點，其中該接觸點102a往箭頭方向104a拖曳，而接觸點102b往箭頭方向104b 拖曳。藉此該電子裝置100可將此行為解釋為一種「放大」(Zoom In)的指令。其他各種功 能例如縮小(Zoom Out)，上下左右卷頁(Scrolling)，翻轉畫面，選取文字等，都屬於多點觸 控可應用的範圍。在本例中文字106是顯示於接觸點102a和接觸點102b中間的焦點內容 (如文字或圖示)，該焦點內容(即文字106)的坐標可被利用來處理進一步可能的狀況，實 例於後詳述。圖2為一網頁文件200被顯示在一顯示區域110上的實施例。一傳統的網頁文件 200可能是很多個不同內容區塊的排列組合，以本例來說，網頁文件200中的內容區塊主要 包含了圖片區塊210和文字區塊220兩種。圖2的網頁文件200顯示了一個圖片區塊210 和一個文字區塊220，以及與圖1的顯示區域110的相對映射關係。在本發明實施例中，該 顯示區域110就是指圖1中屏幕120所提供的可視範圍。由於網頁文件200的長寬均大於 顯示區域110，所以只有一部分可映射至該顯示區域110的範圍中而被顯示在屏幕120上， 而其他部分則是沒有顯示出來的。因此使用者必須通過上下左右捲動搭配縮小放大功能才 能完整的閱讀該網頁文件200中每一個角落。該文字區塊220的內容主要是文字，也可能
5是符號圖示(icon)。符號圖示一般而言是指大小與文字相近的小圖案，可隨著文字一起被 排版，用來突顯網頁效果。每個文字具有既定的大小，由左向右橫向排列，由上到下形成多 個橫行。舉例來說，該文字區塊220橫向可顯示Wx個字，縱向可顯示Wy行。其中文字202 表示位於顯示區域110中的一文字，而文字204表示不在顯示區域110範圍中的一文字。以 下的說明均以文字區塊為例，但本發明並不僅能被用於顯示文字區塊。圖3a為一文字區塊320被顯示在顯示區域110上的實施例。為了提供方便的瀏 覽機制，本發明實施例顯示文字區塊320時，對比於顯示圖2所示的文字區塊220，會將文字 區塊320的寬度限定在不大於顯示區域110寬度的範圍。文字區塊320中的文字會通過自 動換行的機制重新排列，因此不會有任何文字超出顯示區域110的寬度，避免了大量橫向 捲動的缺點。因為文字具有逐行閱讀的特性，本實施例尤其適合處理文字頁面。然而必要 時本發明也可應用於圖形頁面，技術上並無限定。舉例來說，圖3a中的文字區塊320寬度 與顯示區域110的寬度一致，其中裝滿了某一字級大小的文字，因此每一橫行可容納Wx個 字，而文字區塊320的高度視字數和字級大小而定，舉例來說有H像素。該顯示區域110有 如一個在文字區塊320上縱向平移的視窗，所到之處的內容即被映射在實體的屏幕120上。 為了說明顯示區域110的相對位置，圖3a的顯示區域110以一橫向中軸112代表中心位置， 將該顯示區域110等分為上下兩半。由圖3a可知，該橫向中軸112的位置坐落於該文字區 塊320的縱坐標Y之處。當該屏幕120被碰觸時，可能感應到接觸點302a和接觸點302b兩個接觸點。通常 使用者直覺地會去碰觸眼裡所關注的焦點文字。這種操作習慣可以加以利用。舉例來說， 以使用者的角度來說，該使用者關注的焦點文字306會位於該接觸點302a和接觸點302b 的中間，因此，電子裝置100可先定義出位於接觸點302a和接觸點302b的中間的一焦點坐 標，再通過該焦點坐標即可判斷出使用者所關注的焦點文字306為何。其中焦點坐標及焦 點文字306之間的對應關係可經過顯示區域110和文字區塊320之間一些既有的映射技術 來推知。舉例來說，一般已知的系統核心中會使用編碼樹(render tree)來安排文字306 在顯示區域110中的位置關係。在本實施例中的文字306，是位於縱坐標y的地方。推斷出 關注焦點文字306的位置，有助於進一步決定顯示區域110需顯示文字區塊320的部分。在本實施例中，如果該接觸點302a往箭頭方向304a移動，而接觸點302b往箭頭 方向304b移動，即代表放大文字區塊320的內容的一放大指令。相對的，如果接觸點302a 和接觸點302b兩者往彼此方向靠近，則代表縮小文字區塊320的內容的一縮小指令。不論 是放大內容或是縮小內容，縮放率均可由接觸點302a和接觸點302b的移動距離來決定。然 而更進一步地說，其他決定縮放率的機制也適用於本發明實施例，例如筆勢軌跡312。電子 裝置100可判斷該筆勢軌跡312的形狀以執行各種事先定義好的功能。舉例來說，如果該 筆勢軌跡312大致上近似一圓圈，則該電子裝置100判斷其軌跡方向為順時針或逆時針，藉 此決定縮小或放大功能。而圓心314的位置，可進一步被檢測出來做為選取焦點坐標的依 據。該電子裝置100可能包含按鈕(未圖示)，或是在顯示區域110中實作一條縮放杆 (未圖示)。然而若不是使用多點觸控機制來進行縮放，關注焦點的文字306可能需要通過 其他的機制來決定，例如使用者手動選取，或是自動取得顯示區域110的中心坐標C作為焦 點坐標，再經由中心坐標C取得焦點文字306。
6
圖3b 圖3d圖為文字區塊320的內容經縮放後成為文字區塊330的實施例。在 本發明實施例中，已將文字區塊320的寬度限制為不大於顯示區域110。當文字區塊320的 內容被放大而成為圖3b中的文字區塊330時，文字區塊330寬度依然保持在不大於顯示區 域110的電平，但文字區塊330中字體的大小則以隨著縮放率而被放大，因此每一橫行能容 納的字數減為Wx』。此時文字區塊330中的文字必需被重新排版，例如每一行中超過第Wx』 字的文字就自動換行而顯示在下一行。由此可知該文字區塊330雖然寬度維持不變，但是 整體高度H』卻會隨著縮放率而被拉長。也就是說，圖3b所示的高度H』會較圖3a所示的 高度H為長。另一方面來說，如果是文字區塊320被縮小，處理的方式亦是類似，在寬度保 持不變的前提下，每行字數增加，而文字區塊總長度隨著行數變少而減短。圖3a中原本出現的文字306，在文字區塊330中經過了放大以及重新排版後變成 了放大後的文字306』，出現在文字區塊330的縱坐標Y』的位置。由於文字區塊330的長度 超過顯示區域110的長度，該顯示區域110隻能顯示該文字區塊330的其中一部分。因此 圖3b說明了如何決定文字區塊330顯示於顯示區域110中的部分。如前述，該文字306』被 認定為使用者關注的重點，因此在文字區塊320被放大為文字區塊330後，仍然希望該文字 306』出現在顯示區域110中。因此在圖3b中，顯示區域110基本上可根據該文字306』的 縱坐標Y』而決定其位置，使該顯示區域110能顯示該文字306』。更具體地說，本發明實施 例將橫向中軸112的縱坐標y』指派為與文字306』的縱坐標Y』相等，使得顯示區域110顯 示在屏幕120上的時候，該文字306』是位於該橫向中軸112上。但在另一實施例中，該文 字306』未必一定要安排在橫向中軸112上。為了更方便閱讀後續文字，也可以將文字306』 安排在顯示區域110的中間偏上，或是顯示區域110的第一行。橫向中軸112的縱坐標y』 的安排方式完全可依據文字306』的縱坐標Y』來決定。在一些特別的例子中，文字306』的位置可能無法完全適用於圖3b中對齊橫向中 軸112的做法，因此需要另外考慮。舉例來說，在圖3c中，文字區塊340為內容已被放大 (或縮小)後的文字區塊，而顯示區域110的高度為h。假設本例中的文字306』經過自動 換行的重新排版後出現在縱坐標y』之處，其中y』的值小於h/2。也因為y』小於h/2，即使 顯示區域110已經移到文字區塊340的最頂點，仍然無法將文字306』安排在縱坐標為h/2 的橫向中軸112上。此時則不需勉強，只需將顯示區域110對齊該文字區塊340的頂端即 可。圖3d是另一個特例。文字區塊350為內容已被放大(或縮小)後的文字區塊，其 高度為H』。假設本例中的文字306』出現在非常接近文字區塊350底部之處，文字306』的 縱坐標是y』，即文字306』出現在橫向中軸112和文字區塊350的底部之間，H-y』 < h/2。 換句話說，即使顯示區域110已經移到文字區塊350的最底部，仍然無法將文字306』安排 在縱坐標為(H-h/2)的橫向中軸112上。此時只需將顯示區域110對齊該文字區塊350的 底部即可。圖4a為本發明實施例的頁面顯示方法的流程圖。上述實施例可以整理為下列步 驟。首先在步驟401中啟動圖1的電子裝置100。在步驟403中，通過觸控屏幕120接收一 個縮放指令。在步驟405中根據接收的縮放指令決定一焦點坐標，並決定該焦點坐標所對 應的一焦點內容106 (如文字或圖示)。舉例而言，如果該觸控屏幕120是多點觸控屏幕， 該縮放指令為接觸點102a和接觸點102b之間的距離變化，則該焦點坐標可以是位於接觸
7點102a和接觸點102b中間的坐標。該縮放指令也可以是觸控屏幕120上所形成的筆勢 (gesture)軌跡312，而該筆勢軌跡312經過辨認可能近似於一圓形而具有一圓心坐標314。 故該圓心坐標314即可用來作為該焦點坐標。關於筆勢軌跡辨認，現今已存在有許多技術， 在此不詳細討論，但是本發明實施例不同處在於，可進一步利用辨認而得的圓心坐標來當 做焦點坐標。取得焦點坐標後，可進一步取得其所對應的焦點內容106以做為進一步調整 顯示區域110的位置的參考。舉例而言，通過系統核心的編碼樹或其他映射機制，可查得焦 點坐標所對應的焦點內容106。在步驟407中，根據步驟403所接收的縮放指令，調整內容 區塊320中內容的大小並將這些內容重新排版，以產生一內容區塊330，此排版動作使內容 區塊330的寬度不大於顯示區域110的寬度。其中原本內容區塊320中的焦點內容106，經 縮放及排版後成為內容區塊330中縮放後的焦點內容306』。在步驟409中，找出該焦點內 容306』在該文字區塊330中的縱坐標y』。在步驟411中，根據該焦點內容306』的縱坐標 y』，決定顯示區域110的位置，而最重要目的之一是將焦點內容306』涵蓋在顯示區域110 的顯示範圍內。圖4b為本發明實施例的選擇顯示區域110的流程圖。步驟411的實際做法可以 歸納為下列步驟。在步驟423中，判斷焦點內容306』的縱坐標y』是否小於h/2。其中h是 顯示區域110的高度。如果是的話，表示焦點內容306』位置非常接近內容區塊330頂端。 於是進行步驟425，直接將橫向中軸112放在縱坐標h/2處，使顯示區域110對齊內容區塊 330的頂端，如此可使內容306』保持在顯示區域110的範圍內。另一方面，步驟427檢查 H』_y』是否小於h/2，其中H』是內容區塊330的高度。如果是，表示焦點內容306』位置非常 接近內容區塊330的底端，於是進行步驟429，直接將顯示區域110的橫向中軸112放在縱 坐標H』-h/2處，使顯示區域110直接對齊內容區塊330的底部，如此可確保焦點內容306』 出現在顯示區域110的範圍內。另一方面，如果步驟423和427均不符合，則進行步驟431。 在步驟431中，將橫向中軸112的縱坐標指派為焦點內容306』的縱坐標y』，藉此焦點內容 306』即會出現在顯示區域110範圍的中間行。本發明的應用裝置可以是任何具有人機界面的網頁文件顯示裝置，例如手機，個 人數字助理，計算機，或文字處理器。圖4a和圖4b的方法步驟適用於放大頁面，也適用於 縮小頁面。這些方法可以實作於裝置裡的作業系統或應用軟體中，搭配硬體上的輸出輸入 界面例如多點觸控屏幕，觸控屏幕，按鈕，滾輪或鍵盤等整合成一人機界面。本發明也可以 是一種程序產品，安裝於任何現有硬體中而產生功效。雖然本發明以優選實施例說明如上，但可理解的是本發明的範圍未必如此限定。 相對的，任何基於相同精神或對本領域技術人員為顯而易見的改良均在本發明涵蓋範圍 內。因此專利要求範圍必須以最廣義的方式解讀。
權利要求
一種頁面顯示方法，用以在一屏幕上顯示一內容區塊，包含接收一縮放指令；根據該縮放指令決定該內容區塊中的一焦點內容，並對該內容區塊中的內容進行縮放；排列該內容區塊中經縮放後的內容，使該內容區塊的寬度不超出該屏幕的一顯示區域的寬度；以及從內容經縮放後的該內容區塊中，根據該焦點內容的位置，決定該內容區塊被顯示在該顯示區域上的部分。
2.如權利要求1所述的頁面顯示方法，其中該內容區塊被顯示在該顯示區域的部分， 根據該焦點內容的縱軸坐標而決定。
3.如權利要求2所述的頁面顯示方法，其中決定該內容區塊被顯示在該顯示區域上的 部分的步驟，包含將該焦點內容顯示在該顯示區域的中線上。
4.如權利要求3所述的頁面顯示方法，其中決定該內容區塊被顯示在該顯示區域上的 部分的步驟，包含當該焦點內容的縱坐標小於該顯示區域的縱向長度的一半時，該顯示區 域顯示該內容區塊的頂端部分。
5.如權利要求3所述的頁面顯示方法，其中決定該顯示區域顯示該內容區塊的部分包 含當該焦點內容的縱坐標與該內容區塊底部的距離小於該顯示區域的縱向長度的一半時， 該顯示區域顯示該內容區塊的底端部分。
6.如權利要求1所述的頁面顯示方法，其中該屏幕為一多點觸控屏幕；以及該縮放指令經由該多點觸控屏幕所接收的一多點觸控筆勢；其中該多點觸控筆勢包含 該多點觸控屏幕上至少二個接觸點間距離的變化。
7.如權利要求6所述的頁面顯示方法，其中該縮放指令的一縮放率正比於該至少兩個 接觸點之間距離的改變量。
8.如權利要求6所述的頁面顯示方法，其中根據該縮放指令決定該內容區塊中的一焦 點內容包含在該至少二個接觸點之中間決定一焦點坐標；根據該內容區塊縮放前的內容與該焦點坐標的一映射關係將該焦點坐標所對應的內 容判定為該焦點內容。
9.如權利要求1所述的頁面顯示方法，其中該屏幕為一觸控屏幕；該縮放指令是在該觸控屏幕上所形成的一觸控筆勢軌跡；以及接收該縮放指令的步驟包含，將該觸控筆勢軌跡辨識為一圓形軌跡，並辨識該圓形軌 跡的圓心坐標；其中根據該縮放指令決定該內容區塊中的一焦點內容包含根據該圓心坐標決定一焦點坐標；以及根據內容經縮放前的該內容區塊與該焦點坐標的一映射關係決定該焦點坐標所對應 的內容為該焦點內容。
10.如權利要求1所述的頁面顯示方法，其中該內容區塊中的內容包含文字及圖示至少其中之一。
11.一種電子裝置，包含一屏幕，用以顯示一內容區塊的一部分；以及一人機界面，用以接收一縮放指令，該縮放指令決定該內容區塊中的一焦點內容，並對 該內容區塊中的內容進行縮放；其中該人機界面排列該內容區塊中經縮放後的內容，使該 內容區塊的寬度不超出該屏幕的一顯示區域的寬度，並根據該焦點內容經縮放與排列後的 位置，決定該內容區塊被該顯示區域的部分。
12.如權利要求11所述的電子裝置，其中該內容區塊被顯示在該顯示區域的部分，根 據該焦點內容的縱軸坐標而決定。
13.如權利要求11所述的電子裝置，其中該人機界面在顯示該內容區塊時，將該焦點 內容顯示在該顯示區域的中線上。
14.如權利要求13所述的電子裝置，其中該人機界面判斷如果該焦點內容的縱坐標小 於該顯示區域的縱向長度的一半時，則使該顯示區域顯示該內容區塊的頂端部分。
15.如權利要求14所述的電子裝置，其中該人機界面判斷如果該焦點內容的縱坐標與 該內容區塊底部的距離小於該顯示區域的縱向長度的一半時，則使該顯示區域顯示該內容 區塊的底端部分。
16.如權利要求15所述的電子裝置，其中該屏幕為一多點觸控屏幕；該縮放指令是經由該多點觸控屏幕所接收的一多點觸控筆勢；以及該多點觸控筆勢包含該多點觸控屏幕上至少二個接觸點間距離的變化。
17.如權利要求16所述的電子裝置，其中該縮放指令的一縮放率正比於該至少兩個接 觸點之間距離的改變量。
18.如權利要求17所述的電子裝置，其中該屏幕接收該縮放指令時，該人機界面於該至少二個接觸點之中間決定一焦點坐標；以及該人機界面根據該內容區塊縮放前的內容與該焦點坐標的一映射關係，將該焦點坐標 所對應的內容判定為該焦點內容。
19.如權利要求14所述的電子裝置，其中該屏幕為一觸控屏幕；該縮放指令是在該觸控屏幕上所形成的一觸控筆勢軌跡；以及該屏幕接收該縮放指令時，該人機界面將該觸控筆勢軌跡辨識為一圓形軌跡，並辨識 該圓形軌跡的圓心坐標；該人機界面根據該圓心坐標決定一焦點坐標；以及該人機界面根據該內容區塊縮放前的內容與該焦點坐標的一映射關係，將該焦點坐標 所對應的內容判定為該焦點內容。
20.如權利要求14所述的電子裝置，其中該內容區塊中的內容包含文字及符號圖示至 少其中之一。
全文摘要
頁面顯示方法、電子裝置、程序產品。該頁面顯示方法可應用在具有一屏幕的電子裝置上，用以顯示一文字區塊。首先接收一縮放指令，接著根據該縮放指令決定該內容區塊中的一焦點內容，並對該內容區塊中的內容進行縮放。最後排列該內容區塊中經縮放後的內容，使該內容區塊的寬度不超出該屏幕的一顯示區域的寬度，並從內容經縮放後的該內容區塊中，根據該焦點內容的位置決定該內容區塊被顯示在該顯示區域上的部分。
文檔編號G06F3/048GK101923422SQ20091014067
公開日2010年12月22日 申請日期2009年6月12日 優先權日2009年6月12日
發明者劉培欣, 吳昆達, 曾德沛 申請人:宏達國際電子股份有限公司