TWI384392B - 行動裝置上之網頁呈現方法 - Google Patents

Description

行動裝置上之網頁呈現方法

本發明係關於一種網頁呈現方法，且特別是有關於一種用於行動通訊裝置之網頁呈現方法。

一般行動通訊裝置，例如：手機及PDA，大部分的螢幕解析度係小於QVGA(320x240)，因此當利用手機上網瀏覽網頁時，由於一般網頁的解析度需求為1024x768以上，遠超出手機螢幕解析度。若依上述例子，手機螢幕只顯示了四分之一的網頁內容，使用者需橫向及縱向地移動視窗捲軸以觀看整個網頁內容。或者，若網頁中有一圖像之尺寸為300x200，則該圖像佔據手機螢幕大部分可觀看範圍，因此無法將網頁上的圖像搭配文字一起閱讀，造成可讀性降低。因此，利用手機上網對使用者來說相當不方便，進而影響了使用者使用手機上網的意願。

對於此種問題，有兩大解決方向，第一是改變網頁製作方式，針對行動通訊裝置製作專用的網頁，第二是修改手機軟體(網頁瀏覽器)呈現網頁的方式。雖然手機上網是未來的潮流趨勢，但手機上網人數相對電腦(PC、NB)上網人數還是小得多，因此網頁製作者不一定會另外製作行動通訊裝置專用的網頁。因此，目前手機軟體廠商提出一些解決方案，如下所述。

第一種方法是不顯示網頁的圖像而只顯示文字，如此一來對於圖像較多的網頁，可節省下載網頁時間以及較不需要捲動視窗來觀看整個網頁。但是此種方法並不適合圖像為主的網頁，例如網路相簿，相簿不顯示圖像則失去網頁所欲呈 現的意義。第二種方法是透過軟體廠商架設的遠端系統下載將欲觀看的網頁，重新製作出適合手機螢幕尺寸的網頁，手機再從該遠端系統讀取重製過的網頁，之後再透過手機上的按鍵及軟體內定的功能，對所欲觀看的區域再作放大瀏覽。但此方法需透過軟體商的遠端系統，無法確保使用者的隱私權，並且需搭配該特定軟體才能使用該功能。

因此，如何提供另一種適用於行動通訊裝置的網頁呈現方式，且不需透過遠端系統重製網頁，係本發明欲解決的問題。

本發明之一範疇在於提供一種網頁呈現方法，行動通訊裝置可利用此方法對具有圖像的網頁最佳化地調整排列，以利於使用者瀏覽。

為了達成上述範疇，網頁呈現方法包含下列步驟。首先，行動通訊裝置接收原始網頁，原始網頁包含至少一圖像；接著，分析原始網頁以獲得圖像之尺寸；接著，判斷尺寸是否超出第一尺寸參數；若該判斷結果為否，則根據尺寸排列圖像於第一排版網頁內，並呈現第一排版網頁；若判斷結果為是，則根據第一尺寸參數調整圖像以排列於第二排版網頁內，並呈現第二排版網頁。

再者，當該第一排版網頁內之該圖像或該第二排版網頁內之該被調整的圖像被點選時，則根據第二尺寸參數調整該圖像以排列於第三排版網頁內，並呈現該第三排版網頁。

綜上所述，藉以透過對圖像重新調整顯示的尺寸，讓網頁能容納更多圖像及文字等資訊，讓使用者可免去需時常捲動畫面才能瀏覽整個網頁。並且，可針對欲觀看的圖像透過 點選以另開視窗或彈現式呈現，達到可觀看到原始圖像卻不會影響到網頁最佳化排列的目的。

關於本發明之優點與精神可以藉由以下的發明詳述及所附圖式得到進一步的瞭解。

本發明之網頁呈現方法主要應用於具有較低螢幕解析度的裝置上。然而，要呈現網頁前必須能先接收網頁，亦即該裝置必須具有通訊功能以透過通訊網路接收網頁內容。此外，由於螢幕的單位面積上能顯示的像素有限，以目前技術而言，小尺寸螢幕(一般係4吋以下)只能有640x480以下的解析度，因此低螢幕解析度係代表小尺寸螢幕，而需求小尺寸螢幕的裝置通常是為了體積、重量及耗電量的考量。綜上所述，兼具小尺寸螢幕以及上網功能兩種特性的裝置，實際上係手機及PDA之類的行動通訊裝置，所以本發明之網頁呈現方法主要應用於行動通訊裝置上。

需注意的是，由於圖像尺寸及螢幕解析度皆慣用寬度(像素)x高度(像素)表示之，螢幕尺寸係表示螢幕對角線的長度，圖像解析度係表示單位面積的像素數，因此下列說明係以圖像的”尺寸”與螢幕的”解析度”作為比對尺寸的依據。

請參閱圖一，圖一係繪示根據本發明一具體實施例之行動通訊裝置1之功能方塊圖。如圖一所示，行動通訊裝置1包含螢幕10、處理模組12、及設定模組14。螢幕10及設定模組14分別電性連接至處理模組12。設定模組14存有內建或使用者可設定的第一尺寸參數FDP及第二尺寸參數SDP；處理模組12接收一網頁，並分析及處理該網頁；螢幕用以呈現該網頁或處理過的網頁。此外，請同時參閱圖二所示之流 程圖以及圖三A至圖三C所示之步驟示意圖，以下將詳述本發明於行動通訊裝置1呈現網頁的方法。

首先，於步驟S10中，處理模組12透過通訊模組16經由通訊網路接收原始網頁17(如圖三A所示)，原始網頁17包含第一圖像170及文字段落172(虛線框內所示)。於實際情況下，行動通訊裝置1以手機為例，通訊模組16可透過WiFi或歸類2G、3G甚至2.5G或3.5G的無線通訊方式，例如：GPRS、EDGE、WCDMA、CDMA2000或HSDPA/HSUPA，與基地台連接通訊，繼而可透過網際網路(internet)從網頁伺服器接收欲觀看的網頁(原始網頁17)，接收的網頁(原始網頁17)可先呈現於螢幕10上，或是暫存於行動通訊裝置1的記憶體中，等待後續分析處理。

接著，於步驟S12中，處理模組12分析原始網頁17，以獲得原始網頁17中關於第一圖像170的顯示尺寸或真實尺寸。由於網頁設計所使用的語法皆需遵循W3C所制定的標準語法，因此處理模組12可讀取原始網頁17原始檔中關於第一圖像170的設定值，以獲得第一圖像170所設定之顯示尺寸。舉例而言，若網頁原始檔出現<img src=abc.jpg width="27" height="22">的描述語句，係表示不論名為abc的jpeg圖像的真實尺寸為何，圖像於網頁上的顯示寬度係27個像素，顯示高度係22個像素。此外，若網頁沒有關於第一圖像170的尺寸設定值，則處理模組12可讀取第一圖檔170之附加資訊(metadata)或檔頭資訊，以獲得第一圖像170之真實尺寸，第一圖像170將可依真實尺寸顯示。

接著，於步驟S14中，處理模組12判斷第一圖像170之尺寸是否超出第一尺寸參數FDP，若否，執行步驟S16，若是，執行步驟S18。如圖三A所示，第一尺寸參數FDP的設 定畫面可為選單模式，列出幾種常用的尺寸參數讓使用者利用選項指標指定，例如：螢幕解析度、螢幕寬度及螢幕高度，也可包含兩個數字輸入區讓使用者自訂尺寸。輸入方式可透過按鍵、手寫或聲控輸入，圖三A係繪示透過按鍵輸入自訂尺寸的方式。需注意的是，處理模組12所讀取之第一圖像170之尺寸係參照網頁原始碼中關於圖像尺寸的設定值，若網頁原始碼中並沒有圖像尺寸的設定值，則該尺寸為第一圖像170之真實尺寸。

接著，於步驟S16中，若判斷結果為否，則根據該尺寸排列第一圖像170於第一排版網頁(未顯示)內並呈現第一排版網頁於螢幕10上，亦即，處理模組12將所接收的原始網頁17在不更動第一圖像170的顯示尺寸的情況下，呈現於螢幕10上以形成第一排版網頁(未顯示)。

或者，於步驟S18中，若判斷結果為是，根據第一尺寸參數FDP將第一圖像170調整為圖三B中較小的第二圖像180以排列於第二排版網頁18內，並呈現第二排版網頁18於螢幕10上。第一尺寸參數FDP係與第二排版網頁18欲呈現的版面相關，若圖像於網頁中的重要性高，可將第一尺寸參數FDP設定為較大的值，讓第二排版網頁18中的第二圖像180佔據較大的網頁版面。反之，若圖像於網頁中的重要性低，可將第一尺寸參數FDP設定為較小的值。此外，於排列第二圖像180後，重新填入文字段落182。舉例而言，圖三A中的文字段落172位於第一圖像170下，若圖三B中的文字段落182依然位於第二圖像180下，則造成第二圖像170右側會出現空白，減損了圖像縮小顯示的意義。因此將文字重新從圖像旁開始排列，進而能充分利用小尺寸螢幕的可觀看範圍。

上述內容係描述分析網頁以調整圖像尺寸的流程，本發明之網頁呈現方法另包含點選圖像後的呈現方式。如圖三B所示，使用者可根據需求於設定畫面上選擇適當的第二尺寸參數SDP。請參閱圖二、圖三B及圖三C，於步驟S19中，若第二排版網頁18內之被調整的圖像180被點選時，則圖像180根據第二尺寸參數SDP被調整為第三圖像190以排列於第三排版網頁19內，並呈現第三排版網頁19於螢幕10上。第三圖像190可用另開新分頁、另開新視窗或如圖三C所示之彈跳式畫面顯示之，以利於觀看原先縮小圖像之細節部份。由於第一尺寸參數FDP係與使用者所觀看網頁中的圖像顯示尺寸有關，第二尺寸參數SDP係與使用者於網頁中欲觀看的特定圖像之顯示尺寸有關，因此需分開設定，但第一尺寸參數FDP與第二尺寸參數SDP皆與圖像的呈現方式相關，因此第二尺寸參數SDP可設定為全螢幕、螢幕寬度、螢幕高度或自訂尺寸。

為了能明白地瞭解第一尺寸參數FDP(或第二尺寸參數SDP)與圖像呈現方式的關係，係舉例如下，並請同時參閱圖四A及圖四B。需補充說明的是，下列例子所提到之螢幕20係具有320x240的解析度，即表示螢幕寬度可顯示320個像素，螢幕高度可顯示240個像素。

若第一尺寸參數FDP設定為全螢幕，亦即圖像的寬度超過320個像素或是高度超過240個像素，甚至寬度及高度皆分別超過320個像素及240個像素，則將圖像尺寸縮小到320x240以內。如圖四A所示，圖像P1的尺寸為800x400，超出螢幕解析度(320x240)。若根據高度等比例縮小如圖四B所示，則圖像P2之寬度為800x(240/400)=480(像素)，依然超過螢幕20寬度所能顯示的320個像素，超出部份如虛線所示。若根據寬度等比例縮小如圖四C所示，則圖像P3高度 為400x(320/800)=160(像素)，亦即圖像P3尺寸為320x160，位於螢幕可視範圍內(亦即小於螢幕解析度)。因此，第一尺寸參數FDP設定為全螢幕，則圖四A所示之圖像P1之尺寸係被調整至320x128，進而使用者可於螢幕20內觀看到圖像P3全貌而不需移動視窗捲軸。

再者，可將第一尺寸參數FDP設定為螢幕寬度，亦即不論圖像高度為何，只要圖像的寬度超過320(像素)，則將圖像等比例縮小到寬度等於320(像素)。如圖五A所示，圖像P4尺寸為400x1000，等比例縮小後如圖五B所示之圖像P5，尺寸為320x800，圖像P5超出螢幕20部份如虛線所示。若第一尺寸參數FDP設定為全螢幕，則圖五A之圖像P4會縮小至如圖五C所示之尺寸為96x240的圖像P6，但圖像P6縮小比例較圖五B所示之圖像P5高。因此，若網頁具有較多長條形圖像且使用者著重在圖像瀏覽部份，則可將第一尺寸參數FDP設定為螢幕寬度，用者只需捲動縱向視窗捲軸以觀看圖像P5。同樣地，橫向長條形圖像較多的網頁，第一尺寸參數FDP可設定為螢幕高度，使用者只需捲動橫向視窗捲軸以觀看圖像。

再者，使用者還可自訂尺寸，如圖三A所示，使用者將選項指標移至自訂尺寸，利用鍵盤輸入欲限制的圖像寬度(30像素)及高度(20像素)。讓圖像170(圖三B所示)縮小至尺寸為30x20以內的圖像180(圖三B所示)，讓螢幕10能呈現更多資訊。需補充說明的是，第一尺寸參數FDP不限於讀取原始網頁17前設定，使用者可不進行設定，而是先大致瀏覽原始網頁17後，再根據自己的喜好以及網頁的特性來設定第一尺寸參數FDP，此時行動通訊裝置1才開始進行分析處理，繼而重新產生網頁。

需注意的是，本發明不限於上述之單一圖像處理，實際上，圖一中的處理模組12接收網頁後，根據第一尺寸參數FDP對網頁上多個圖像同時分析處理。舉例而言，圖六A係繪示一網頁W1，網頁W1含有大圖像P7、小圖像P8及文字段落。若第一尺寸參數FDP設定為320x240，根據上述說明可知，圖六A中尺寸為800x400的大圖像P7將會被縮小為圖六B中尺寸為320x160的圖像P9。然而，圖六A中小圖像P8的尺寸(96x240)在第一尺寸參數FDP內，因此不會被調整尺寸。亦即，圖六A之網頁W1經由處理後調整為圖六B所示之網頁W2。從圖六B可知，圖文面積縮小致使網頁尺寸也可變小，小尺寸螢幕因而能輕易地顯示更多資訊，亦讓使用者更容易地瀏覽網頁。

較於先前技術，本發明之網頁呈現方法及行動通訊裝置藉以透過對圖像重新調整顯示的尺寸，讓網頁能容納更多圖像及文字等資訊，讓使用者可免去需時常捲動畫面才能瀏覽整個網頁。並且，可針對欲觀看的圖像透過點選以另開視窗或彈現式呈現，達到可觀看到原始圖像卻不會影響到網頁最佳化排列的目的。

藉由以上較佳具體實施例之詳述，係希望能更加清楚描述本發明之特徵與精神，而並非以上述所揭露的較佳具體實施例來對本發明之範疇加以限制。相反地，其目的是希望能涵蓋各種改變及具相等性的安排於本發明所欲申請之專利範圍的範疇內。因此，本發明所申請之專利範圍的範疇應該根據上述的說明作最寬廣的解釋，以致使其涵蓋所有可能的改變以及具相等性的安排。

1‧‧‧行動通訊裝置

10、20‧‧‧螢幕

12‧‧‧處理模組

14‧‧‧設定模組

16‧‧‧通訊模組

17‧‧‧原始網頁

170‧‧‧第一圖像

172、182‧‧‧文字段落

18‧‧‧第二排版網頁

180‧‧‧第二圖像

19‧‧‧第三排版綱頁

190‧‧‧第三圖像

P1~P6、P9‧‧‧圖像

P7‧‧‧大圖像

P8‧‧‧小圖像

W1、W2‧‧‧網頁

FDP‧‧‧第一尺寸參數

SDP‧‧‧第二尺寸參數

S10~S19‧‧‧步驟

圖一係繪示根據本發明一具體實施例之行動通訊裝置之功能方塊圖。

圖二係繪示根據本發明一具體實施例之網頁呈現方法之流程圖。

圖三A係繪示本發明之行動通訊裝置呈現原始網頁之示意圖。

圖三B係繪示本發明之行動通訊裝置呈現第二排版網頁之示意圖。

圖三C係繪示本發明之行動通訊裝置呈現第三排版網頁之示意圖。

圖四A至圖四C係繪示螢幕與不同縮小比例的圖像之示意圖。

圖五A至圖五C係繪示螢幕與不同縮小比例的另一圖像之示意圖。

圖六A係繪示根據一具體實施例之網頁的示意圖。

圖六B係繪示圖六A中的網頁經由本發明之網頁呈現方法呈現之示意圖。

S10~S19‧‧‧步驟

Claims (17)

1. 一種網頁呈現方法，用於一行動通訊裝置中，該網頁呈現方法包含下列步驟：(a)該行動通訊裝置接收一原始網頁，該原始網頁包含至少一圖像；(b)分析該原始網頁以獲得該圖像之一尺寸；(c)判斷該圖像之該尺寸是否超出一第一尺寸參數；(d)若該判斷結果為否，則根據該尺寸排列該圖像於一第一排版網頁內，並呈現該第一排版網頁；以及(e)若該判斷結果為是，則根據該第一尺寸參數調整該圖像以排列於一第二排版網頁內，並呈現該第二排版網頁。
2. 如申請專利範圍第1項所述之網頁呈現方法，進一步包含下列步驟：於該行動通訊裝置上設定該第一尺寸參數。
3. 如申請專利範圍第1項所述之網頁呈現方法，其中該行動通訊裝置包含一螢幕，於步驟(d)中呈現該第一排版網頁於該螢幕上，或於步驟(e)中呈現該第二排版網頁於該螢幕上。
4. 如申請專利範圍第3項所述之網頁呈現方法，其中該螢幕具有一解析度，該第一尺寸參數係該解析度。
5. 如申請專利範圍第4項所述之網頁呈現方法，其中該第一尺寸參數另包含一第一自訂尺寸，步驟(c)中判斷該圖像之該尺寸是否超出該螢幕之該解析度或該第一自訂尺寸。
6. 如申請專利範圍第1項所述之網頁呈現方法，其中該原始網頁包含至少一文字段落，該網頁呈現方法進一步包含下列步驟： 於步驟(d)中，根據該圖像之排列，排列該文字段落於該第一排版網頁內。
7. 如申請專利範圍第1項所述之網頁呈現方法，其中該原始網頁包含至少一文字段落，該網頁呈現方法進一步包含下列步驟：於步驟(e)中，根據該被調整的圖像之排列，排列該文字段落於該第二排版網頁內。
8. 如申請專利範圍第1項所述之網頁呈現方法，進一步包含下列步驟：(f)當該第一排版網頁內之該圖像或該第二排版網頁內之該被調整的圖像被點選時，根據一第二尺寸參數調整該圖像以排列於一第三排版網頁內，並呈現該第三排版網頁。
9. 如申請專利範圍第8項所述之網頁呈現方法，其中該第三排版網頁係以另開新視窗呈現。
10. 如申請專利範圍第8項所述之網頁呈現方法，其中該行動通訊裝置包含一螢幕，該螢幕具有一解析度，該第二尺寸參數包含該螢幕之該解析度以及一第二自訂尺寸，於步驟(f)依該螢幕之該解析度或該第二自訂尺寸調整該圖像以排列於該第三排版網頁內，並呈現該第三排版網頁於該螢幕上。
11. 一種行動通訊裝置，包含：一處理模組，透過一通訊網路接收一原始網頁，該原始網頁包含至少一圖像，該處理模組分析該原始網頁以獲得之該圖像之一尺寸；一螢幕，電性連接至該處理模組；以及一設定模組，電性連接至該處理模組，存有一第一尺寸 參數；其中，該處理模組判斷該圖像之該尺寸是否超出該第一尺寸參數，若否，則根據該尺寸排列該圖像於該第一排版網頁內並呈現該第一排版網頁於該螢幕上，若是，則根據該第一尺寸參數調整該圖像以排列於該第二排版網頁內，並呈現該第二排版網頁於該螢幕上。
12. 如申請專利範圍第11項所述之行動通訊裝置，其中該第一尺寸參數可透過該設定模組設定。
13. 如申請專利範圍第11項所述之行動通訊裝置，其中該螢幕具有一解析度，該第一尺寸參數包含該解析度及一第一自訂尺寸。
14. 如申請專利範圍第11項所述之行動通訊裝置，其中該原始網頁包含至少一文字段落，該處理模組根據該圖像或該被調整的圖像之排列，排列該文字段落於該第一排版網頁內或該第二排版網頁內。
15. 如申請專利範圍第11項所述之行動通訊裝置，其中該設定模組存有一第二尺寸參數，當該第一排版網頁內之該圖像或該第二排版網頁內之該被調整的圖像被點選時，該處理模組根據該第二尺寸參數調整該圖像以排列於一第三排版網頁內，並呈現該第三排版網頁於該螢幕上。
16. 如申請專利範圍第15項所述之行動通訊裝置，其中該第三排版網頁係以另開新視窗呈現於該螢幕上。
17. 如申請專利範圍第15項所述之行動通訊裝置，其中該螢幕具有一解析度，該第二尺寸參數包含該螢幕之該解析度以及一第二自訂尺寸。