TW201915780A - 網頁版面自動偵測方法、網頁瀏覽的優化處理方法及其處理系統 - Google Patents

Abstract

本發明是一種優化網頁的頁面資訊判讀方法，其步驟包括：使一瀏覽器瀏覽一網頁版面排列正常的一待偵測網站，在一解析度條件下，自一定螢幕範圍內取得一網頁版面資訊量作為一待比對網頁，該解析度條件係為經由該電腦裝置內自動控制、或由人工調整控制以使該瀏覽器於一定螢幕範圍內所顯示的圖素數量能保持一致；在該解析度條件下，使瀏覽器於同一螢幕範圍內取得該待比對網頁之網頁版面留白區域的一留白空間量；計算比對該留白空間量與該網頁版面資訊量之間的比例，以取得一整體留白空間比例與一圖文間距留白空間比例作為一判讀結果；根據該判讀結果是否滿足一預設條件作為判斷該待比對網頁是否異常。藉此，偵測用戶當前瀏覽網頁中的內含資訊量與留白間範圍之間的比例是否適宜不同年齡層的用戶進行閱覽。

Description

網頁版面自動偵測方法、網頁瀏覽的優化處理方法及其處理系統

本發明係一種網際網路技術領域，特別的是一種透過自動網頁版面呈現資訊量的偵測判讀結果，以將網頁調整更適於使用者瀏覽的網頁優化處理方法以及優化處理系統。

隨網路資訊技術的發展以及普及，不同年齡層可使用各種不同的通訊電子設備進行資訊的取得，數位內容頁面用以傳遞資訊，頁面承載的資訊量是關鍵，資訊量大則頁面趨於複雜。由資方的角度來看說，任一個頁面空間，皆需付出資金、人力與時間成本才能實現，因此，盡可能地填塞頁面空間是常見的現象。而在使用者的角度來說，觀看任何一個介面內容，面對眼前新資訊的不熟悉，更需要多花時間理解，面對過多的資訊，更需額外花費心力加以過濾。因此，雙方的立場是有所不同，但錯誤的設計，會讓使用者難以接收網站內容，甚至導致使用者的流失，這對於資方來說，將造成莫大的損害。

本發明之目的在於提出一種網頁版面自動偵測方法、網頁瀏覽的優化處理方法及其處理系統，偵測用戶當前瀏覽網頁中的內含資訊量與留白間範圍之間的比例是否適宜不同年齡層的用戶進行閱覽，進而獲取其偵測結果進行網頁版面的瀏覽優化調整，將網頁自動調整適合不同使用族群閱覽的網頁資訊量，據以提高網頁頁面使用度。

為達到本發明之其一目的，本發明提出一種網頁版面自動偵測方法，其步驟包括：

使一瀏覽器瀏覽一網頁版面排列正常的一待偵測網站，在一解析度條件下，自一定螢幕範圍內取得一網頁版面資訊量作為一待比對網頁，該解析度條件係為經由該電腦裝置內自動控制、或由人工調整控制以使該瀏覽器於一定螢幕範圍內所顯示的圖素數量能保持一致；

在該解析度條件下，使瀏覽器於同一螢幕範圍內取得該待比對網頁之網頁版面留白區域(negative space)的一留白空間量，該網頁版面留白區域不包含網頁版面中所呈現資訊之行距、圖片、文字、圖表、邊緣、字體大小、段落間距、色彩區塊之間的任一者或其以上；

計算比對該留白空間量與該網頁版面資訊量之間的比例，以取得一整體留白空間比例與一圖文間距留白空間比例作為一判讀結果；

根據該判讀結果是否滿足一預設條件作為判斷該待比對網頁是否異常，該預設條件包含以下任一者：該版面留白空間比例小於35%，該判讀結果視為異常；該版面留白空間比例大於65%，該判讀結果視為異常；該圖文間距留白空間比例小於5%，該判讀結果視為異常；

該圖文間距留白空間比例大於40%，該判讀結果視為異常；該版面留白空間比例小於65%且該圖文間距留白空間比例大於5%，該判讀結果視為正常；該版面留白空間比例大於35%且該圖文間距留白空間比例小於40%，該判讀結果視為正常。

該圖文間距留白空間比例介於5%~40%，該判讀結果視為正常；該版面留白空間比例介於35%~65%，該判讀結果視為正常。

為達到本發明之其一目的，本發明再提出一種網頁瀏覽的優化處理系統，其包括：一通信單元，用於接收一用戶端發送的用於請求瀏覽網頁的第一資訊請求後，該用戶端發送用於取得當前網頁之該判讀結果與查詢螢幕解析度的一第二資訊請求，並且接收該判讀結果與該用戶端所返回的當前螢幕解析度；一判斷單元，用於根據該用戶端所瀏覽網頁返回的該判讀結果與該螢幕解析度，以及預設的螢幕解析度與字體字型大小之間的對應關係進行判斷，以選擇對應該螢幕解析度設置的字體字型大小；以及一生成單元，用於根據該判讀結果是否滿足該預設條件，以及該螢幕解析度與當前網頁的字體字型大小生成相應比例的一網頁版面，並由該通信單元將該網頁版面發往該用戶端；其中該通信單元將該網頁版面發往用戶端後，該通信單元可以定期向該用戶端發送該螢幕解析度的查詢請求，以判斷該用戶端採用的螢幕解析度是否發生改變，並在確定發生變化時，對用戶當前瀏覽的網頁版面進行相應調整。

為充分瞭解本創作之目的、特徵及功效，茲藉由下述具體之實施例，並配合所附之圖式，對本創作做一詳細說明，說明如後：

於本發明中，係使用「一」或「一個」來描述本文所述的單元。此舉只是為了方便說明。因此，除非很明顯地另指他意，否則此種描述應理解為包括一個、至少一個，且單數也同時包括複數。再者，用語「包含」、「包括」、「具有」、「含有」或其他任何類似用語意欲涵蓋非排他性的包括物。除非有相反的明確說明，用語「或」是指涵括性的「或」，而不是指排他性的「或」。

全球網站數量上看10億，網路資訊飛快成長，臺灣網路資訊中心資料顯示，2015年18-30歲族群網路使用率已達100%，其他族群網路使用比例，也逐年倍增，網際網路應用儼然成為全民運動。過去以年輕人為目標族群的網站，也逐漸意識到其他族群在網路上的崛起，例如Yahoo預計發展銀髮首頁、專屬於銀髮族群適用的網站、或是開發兒童適用的網頁設計等。數位資訊不再集中某年齡層使用，轉變成必須針對其他族群，進行網頁設計的調整。網頁使用族群除依照年齡區分外，尚可依性別、電腦技能高低、教育程度、職業、身體機能障礙等因素區分。因為網頁瀏覽經驗會受自身習慣與能力的影響，所以在進行網頁資訊設計時，要考量使用者本身的能力與經驗，才能有良好的閱覽效果。

網站用以傳遞資訊，頁面承載的資訊量是關鍵，資訊量大則頁面趨於複雜。由資方的角度來看說，任一個網站頁面空間，每頁皆需付出資金、人力與時間成本才能實現，因此，盡可能地填塞網頁空間是常見的現象。而在使用者的角度來說，觀看任何一個網頁內容，面對眼前新資訊的不熟悉，更需要多花時間理解，面對過多的資訊，更需額外花費心力加以過濾。因此，雙方的立場是有所不同，但錯誤的設計，會讓使用者難以接收網站內容，甚至導致使用者的流失，這對於資方來說，將造成莫大的損害。目前已經有許多研究針對網頁瀏覽進行評量，例如探討易讀性發現，文字數量與留白空間，會對閱讀產生影響；又留白區域與美感有關聯，具有美感的網頁，提高九成以上的網站可信度；本發明係以針對網頁中的各種留白空間比例為主要的技術變因，以期為各族群設計網頁時，不再受限於多樣設計元素之間的平衡與調整，逆向以留白比例做為大方向，也是一種可能的選擇，同時呼應Ludwig Mies van der Rohe的「少即是多」。

過去已有相當多的研究，進行網頁設計的主觀偏好評量，例如易視性（visibility）、易達性（accessibility）(Kumar & Owston, 2016)、美感偏好（aesthetic preference）、滿意度（satisfaction）、愉悅度（pleasurability）、吸引力（attractive）、複雜度（information complexity）、操作績效（performance）與工作記憶（work memory），甚至是視覺疲勞等(Chen & Chiang, 2011; Coursaris & van Osch, 2016; Baddeley, 1986; Moshagen & Thielsch, 2010; Nielsen, 1999; Pearrow, 2000; Schleicher, Galley, Briest, & Galley, 2008; Serhat, Seyma, & Kursat, 2016; Shneiderman, 1992; Smith & Chaparro, 2015; van Schaik & Ling, 2009; Yu & Kong, 2016; 王藍亭、李傳房，2003)。而這些研究的變項遊走於字體格式(Sharmin, Spakov, & Raiha, 2012)、欄位(Ganayim & Ibrahim, 2013)、比例(Chen & Chiang, 2011)、色彩(Bonnardel, Piolat, & Le Bigot, 2011; Michalski & Grobelny, 2008)、對稱(Bi, Fan, & Liu, 2011; Tuch et al., 2010)、圖示(Grobelny, Karwowski, & Drury, 2005; Mertens et al., 2012; Yu & Kong, 2016)、螢幕尺寸(Yu & Kong, 2016)、表單長度（王郁青、岳修平，2014）等設計元素之間。由上述的研究結果可發現，網頁閱讀與複雜度及資訊量有密切相關，而網頁的資訊量，又與網頁的使用性、美感與價值感有關。量測網頁的留白範圍，將可觀察網頁的複雜度與資訊量，故留白空間對網頁瀏覽是重要的影響因素。

請參考圖1所示，其繪製本發明之網頁版面自動偵測方法的流程圖；其可透過一電腦裝置來執行，步驟包括：

S10：使一瀏覽器瀏覽一網頁版面排列正常的一待偵測網站，在一解析度條件下，自一定螢幕範圍內取得一網頁版面資訊量作為一待比對網頁，該解析度條件係為經由該電腦裝置內自動控制、或由人工調整控制以使該瀏覽器於一定螢幕範圍內所顯示的圖素數量能保持一致；

S11：在該解析度條件下，使瀏覽器於同一螢幕範圍內取得該待比對網頁之網頁版面留白區域(negative space)的一留白空間量，該網頁版面留白區域不包含網頁版面中所呈現資訊之行距、圖片、文字、圖表、邊緣、字體大小、段落間距、色彩區塊之間的任一者或其以上；

S12：計算比對該留白空間量與該網頁版面資訊量之間的比例，以取得一整體留白空間比例與一圖文間距留白空間比例作為一判讀結果；

S13：依據該判讀結果是否滿足一預設條件作為判斷該待比對網頁是否異常，該預設條件包含以下任一者：

該版面留白空間比例小於35 %，該判讀結果視為異常；

該版面留白空間比例大於65%，該判讀結果視為異常；

該圖文間距留白空間比例小於5%，該判讀結果視為異常；

該圖文間距留白空間比例大於40%，該判讀結果視為異常；

該版面留白空間比例小於65%且該圖文間距留白空間比例大於5%，該判讀結果視為正常；

該版面留白空間比例大於35%且該圖文間距留白空間比例小於40%，該判讀結果視為正常；

該圖文間距留白空間比例介於5%~40%，該判讀結果視為正常。

該版面留白空間比例介於35%~65%，該判讀結果視為正常。

承上所述，利用上述電腦裝置經由該待偵測網站資料庫所內建之待偵測網站之網址，透過網際網路而連結至該待偵測網站，然後開啟該電腦裝置之瀏覽器，開始瀏覽該待偵測網站之網頁版面最原始且正常的網頁圖形。再者，為了減少瀏覽器造成的干擾，係直接進行網站影像大小正規化，因此將瀏覽器設定為一全螢幕模式，並於一特定之解析度(1024＊768)條件下，即可確保於一定螢幕範圍內執行所有的網頁圖形取得工作。上述所稱之解析度條件係指可以經由電腦裝置內之程式自動控制，亦可以經由人工調整控制。使其於一定的解析度下達到全螢幕模式，或者是將其解析度調整到瀏覽器之螢幕具有固定的大小範圍皆可，主要是以能控制瀏覽器於一定螢幕範圍內所顯示出來的圖素數量都能保持一樣(長、寬均具有一樣的圖素)。

根據本發明一實施例，上述之自動偵測方法係可透過將網頁圖形輸入進行內嵌於該瀏覽器之用以自動偵測網頁版面的JavaScript程式原始碼進行測試，該程式原始碼包含以下： import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; public class WhiteRatio { public static void main(String[] args) throws IOException { File f = new File("C:/sample1.jpg"); BufferedImage im = ImageIO.read(f); int wr = 0; int w = im.getWidth(); int h = im.getHeight(); for(int i=0;i＜w;i++){ for(int j=0;j＜h;j++){ if(im.getRGB(i, j) == -1){ wr++; } } } System.out.println(wr*1.0/im.getWidth()/im.getHeight()); } }

總結頁面中留白的範圍為一數值，換算為頁面中非留白範圍之比例，即為頁面資訊量，對照各使用族群之資訊量偏好，即可針對本發明下述之網頁優化瀏覽方法對應的網頁設計規範。

為了提高網站系統的服務品質，提升網頁版面的顯示效果，本發明實施例中，除了本發明所述之網頁版面自動偵測方法來取得網頁版面的留白區域比例，更透過網站伺服器接收用戶端發送的用於請求瀏覽網頁的一第一資訊請求後，向所述用戶端發送用於取得當前網頁之該判讀結果以及查詢螢幕解析度的一第二資訊請求，並根據該判讀結果以及用戶端返回的螢幕解析度，以及預設的螢幕解析度與字體字型大小之間的對應關係，選擇對應所述螢幕解析度設置的字體字型大小，再根據該判讀結果是否滿足該預設條件，以及所述螢幕解析度和獲得的字體字型大小生成相應比例的網頁版面，並將該網頁版面發往所述用戶端。

結合上述網頁版面自動偵測方法，本發明提供一種應用上述網頁版面自動偵測方法對網頁瀏覽的優化處理方法，該網頁瀏覽的優化處理方法如下所述：

用戶端向網站伺服器發送用於請求瀏覽網頁的請求消息時，該網站伺服器取得該用戶端所瀏覽網頁返回的該判讀結果，以及主動查詢本地螢幕解析度，並將所述螢幕解析度發送給網站伺服器，該網站伺服器根據該判讀結果是否滿足該預設條件，以及預設的螢幕解析度與字體字型大小之間的對應關係選擇對應所述螢幕解析度設置的字體字型大小，再根據所述螢幕解析度和獲得的字體字型大小生成相應比例的網頁版面，並將該網頁版面發往所述用戶端。

下面結合附圖對本發明所述之網頁瀏覽的優化處理方法及其處理系統的實施方式進行詳細說明。

參閱圖2所示，本發明提供一種網頁瀏覽優化處理系統，該網站服務的系統內包括多個用戶端10和至少一網站伺服器11，其中用戶端10，用於向網站伺服器11請求瀏覽網頁版面；網站伺服器11，用於接收用戶端10發送的用以請求瀏覽網頁的第一資訊請求後，向用戶端10發送用以取得當前網頁之上述該判讀結果查詢螢幕解析度的第二資訊請求，並根據用戶端10返回的螢幕解析度，以及預設的螢幕解析度與字體字型大小之間的對應關係，選擇對應所述螢幕解析度設置的字體字型大小，再根據所述螢幕解析度和獲得的字體字型大小生成相應比例的網頁版面，並將該網頁版面發往用戶端10。

本發明實施例中，網站伺服器11包括儲存單元110、通信單元111、判斷單元112和生成單元113，其中儲存單元110，用於保存預設的上述計算比對該留白空間量與該網頁版面資訊量之間的比例之該判讀結果，以及螢幕解析度和字體字型大小之間的對應關係；通信單元111，用於在接收用戶端10發送的用以請求瀏覽網頁的第一資訊請求後，向用戶端10發送該判讀結果、用以查詢螢幕解析度的第二資訊請求，以及接收用戶端10返回的螢幕解析度；判斷單元112，用於根據用戶端10所瀏覽網頁的該判讀結果是否滿足預設條件與返回的螢幕解析度，以及預設的螢幕解析度與字體字型大小之間的對應關係，選擇對應所述螢幕解析度設置的字體字型大小；生成單元113，用於根據該判讀結果是否正常 (例如：上述該版面留白空間比例小於65%且該圖文間距留白空間比例大於5%...)，以及螢幕解析度和獲得的字體字型大小，生成相應比例的一網頁版面，並通過通信單元111將該網頁版面發往用戶端10。

此外，該生成單元113通過該通信單元112將網頁版面發往用戶端10後，若通過該通信單元112接收到用戶端10發送的用於指示重新設置字體字型大小的一第三資訊請求，則根據用戶端10當前採用的螢幕解析度和用戶重新設置的字體字型大小生成相應比例的網頁版面。

基於上述優化處理系統架構，本發明實施例中，在網站伺服器11上要預先定義好初始的螢幕解析度和字體字型大小之間的對應關係。可以採用層疊式表(Cascading Stylesheet，CSS)技術進行設置，CSS是一種樣式表(stylesheet)技術，在進行網頁製作時採用CSS技術，可以有效地對頁面的佈局、字體、顏色、背景和其他效果實現更加精確的控制。本實施例中，採用CSS技術進行螢幕解析度和字體字型大小的初始設置時，將字體高(em)為單位引入字型大小的定義，em是相對單位，即相對於當前物件內文本的字體尺寸，若當前物件內文本的字體尺寸未被人為設置，則相對於瀏覽器的預設字體尺寸，類似百分比。如，現有技術下，大部分瀏覽器採用的字體定義標準都符合：1em=16px，以此類推，可以得到，14px=0.875em，12px=0.75em，10px=0.625em。為了簡化換算，較佳地，採用body選擇器進行頁面元素屬性設置，body類型選擇器的作用是將預設規則利用繼承機制應用給所有頁面元素，其效果是給頁面內元素加上字體樣式、顏色、大小、邊框外觀、內邊距等屬性。本發明實施例中，在CSS的body選擇器中預設Font-size=62.5%，使得瀏覽器的字體大小更改為：16px*62.5%=10px，此時，1em的取值轉換為：10px，即表明只需要將原來的以px為單位的字體字型大小的取值除以10，並轉換為em作為單位就可以了。具體實施如下：

(font-family指字體、font-size指字體大小規格：、TD指表格中定義文字大小規格、light-height表示行距)

font-family：微軟雅黑，Lucida Grande，tahoma，宋體；

font-size：62.5%

Td：1.2-1.8em(或者120%-180%)

Light-height：1.6-2 em(或者160%-200%)

採用em為單位對字體字型大小進行定義具有如下特點：em的值並不是固定的，em會繼承父級元素的字體大小，可應用於基於IE的瀏覽器中對字體大小進行縮放/擴展；em為相對大小的單位，用戶可以根據自身需要基於em對字體大小進行相應修改(以圖元為單位設置字體大小時，用戶是不能對字體大小進行修改的)，這就更為靈活地適合了各種各樣的用戶需求，提高了網站系統的服務品質。

進行初始定義後，網站伺服器11在接收到用戶端10發送的瀏覽網頁的請求時，先判斷用戶端10使用的螢幕解析度，再根據預設的螢幕解析度和字體字型大小之間的映射關係，生成相應比例的網頁版面並發送至用戶端10。

參閱圖3所示，為本發明提供一種網頁瀏覽優化處理方法，網站伺服器11根據用戶端10的當前所瀏覽的網頁之網頁版面留白區域(negative space)的一留白空間量，以及螢幕解析度向其呈現相應網站頁面的詳細流程如下：

步驟S200：用戶端10登錄網站伺服器11並通過授權認證。實際應用中，用戶端10通過網站伺服器11的授權認證後，便可以使用網站伺服器11提供的各種網站業務了，例如，瀏覽網頁，下載檔等等。

步驟S210：用戶端10根據用戶指示向網站伺服器11發送網頁瀏覽請求消息。本實施例中，上述網頁瀏覽請求消息中攜帶有用戶指示瀏覽的網頁的統一資源定位(URL)地址。

步驟S220：網站伺服器11接收到用戶端10發送的網頁瀏覽請求消息後，向用戶端10發送該留白空間量與該網頁版面資訊量之間的比例及/或螢幕解析度查詢請求消息，通過該消息指示用戶端10返回當前網頁的網頁版面留白區域的該比例以及所採用的螢幕解析度。

步驟S230：用戶端10接收到該比例及/或螢幕解析度查詢請求消息後，將該查詢回應消息中發送至網站伺服器11。

步驟S240：網站伺服器11透過本發明所述之自動偵測方法，以根據接收的該比例是否滿足該預設條件與當前的螢幕解析度，以及該預設條件與字體字型大小之間的對應關係，及/或螢幕解析度與字體字型大小之間的對應關係，獲得對應當前螢幕解析度所設置的字體字型大小，以及根據螢幕解析度和字體字型大小生成相應比例的網頁版面；

承上所述，於步驟S240中，網站伺服器11在生成網頁版面的過程中，需要根據接收的URL位址獲取對應的該網頁資訊量(如行距、圖片、文字、圖表、邊緣、字體大小、段落間距、色彩區塊之間的任一者或其以上)、或網頁元素(如文字、鏈結、圖片等等)，並將其添加到已確定比例的網頁版面中，例如根據字體字型大小確定獲取的文字在顯示時使用的圖元大小，並按照此圖元大小將獲取的文字在網頁版面中進行排版。再者，將獲取的圖片按照字體字型大小進行大小調整或者剪裁，以適應文字的排版，等等。

在實際應用中，由於漢字是點陣字體，因此在瀏覽器中呈現時，低於12圖元便開始出現丟失筆劃等現象，而在12圖元到18圖元之間呈現時，閱讀效果相對最好，但若採用的字體是非整數倍圖元級，也無法達到最佳的瀏覽效果，因而，較佳地，本發明實施例採用以下方式預設螢幕解析度與字體字型大小的對應關係：在800*600或1024*768螢幕解析度下，定義預設字體字型大小為“1.2em”，即12圖元相等大小；在1280*1024螢幕解析度下定義預設字體字型大小為“1.4em”，即14圖元相等大小；而在1920*1600或以上螢幕解析度下定義預設字體字型大小為“1.6em”，即16圖元相等大小。此種設置方式僅為舉例。

步驟S250：網站伺服器11將重新生成的網頁版面發送至用戶端10並且向用戶呈現獲得的網頁版面。

基於上述實施例，用戶通過用戶端10瀏覽網頁版面的過程中，也可以根據實際需要自行設置字體字型大小。例如，用戶端10當前採用1280*1024螢幕解析度進行網頁瀏覽，而用戶通過用戶端10向網站伺服器11請求將字體字型大小設置為2em，假設網路側預先設置的對應於1280*1024螢幕解析度的字體字型大小為1.4em，小於2em，則網站伺服器11放棄網路側預先設置的字體字型大小，根據用戶指示的2em和1280*1024圖元螢幕解析度生成相應比例的網頁版面。

又例如，用戶端10當前採用1280*1024螢幕解析度進行網頁瀏覽，而用戶通過用戶端10向網站伺服器11請求將字體字型大小設置為1em，同樣假設網路側預先設置的對應於1280*1024螢幕解析度的字體字型大小為1.4em，大於1em，則網站伺服器11可以直接根據1em和1280*1024螢幕解析度生成相應比例的網頁版面；也可以向用戶提示其當前選擇的字體字型大小不是對應其螢幕解析度的較佳參數設置，若用戶仍選擇使用字體字型大小1em，則再根據1em和生成相應比例的網頁版面；若用戶重新設置字體字型大小為1.5em，則網站伺服器11根據1.5em和1280*1024螢幕解析度生成相應比例的網頁版面。

另一方面，在上述實施例中，網站伺服器11向用戶端10提供符合用戶使用要求的網頁版面後，可以定期向用戶端10發送該網頁版面留白區域的該留白空間量以及螢幕解析度查詢請求消息，以判斷用戶端10瀏覽當前網頁版面之該判讀結果是否滿足該預設條件，以及採用的螢幕解析度是否發生變化，並在確定該判讀結果不滿足該預設條件或者採用的螢幕解析發生變化時，對用戶當前瀏覽的網頁版面進行相應調整。再者，當用戶自行調整用戶端10的螢幕解析度後，由用戶端10主動向網站伺服器11回傳改變後的螢幕解析度，請求網站伺服器11按照新設置的螢幕解析度對用戶當前瀏覽的網頁版面進行相應調整。

此外，該網站伺服器11將網頁版面發往該用戶端後，若接收到自該用戶端10發送用於指示重新設置字體字型大小的一第三資訊請求，則根據該用戶端10當前採用的螢幕解析度和用戶重新設置的字體字型大小生成相應比例的網頁版面。

本發明實施例中，網站伺服器11在針對用戶所瀏覽網頁的網頁版面之該判讀結果不滿足該預設條件，以及用戶重新設置用戶端10的螢幕解析度後，對用戶當前瀏覽的網頁版面進行調整的方式，包含但不限於以下所列舉的方式：

1.針對網頁版面之該判讀結果不滿足該預設條件，根據該字體字型大小以及相關的網頁資訊量之間的對應關係，重新生成調整符合該預設條件之相應比例的網頁版面，再將該網頁版面發送至用戶端10。

2.按照用戶重新設置的螢幕解析度，以及預設的螢幕解析度和字體字型大小之間的對應關係，獲取上述重新設置的螢幕解析度對應的字體字型大小，並根據該字體字型大小及相關的網頁元素重新生成相應比例的網頁版面，再將該網頁版面發送至用戶端10。

3.按照用戶重新設置的螢幕解析度和上一次使用的螢幕解析度的比值，指示用戶端10對用戶當前瀏覽的網頁版面進行同比例縮放或者擴展。

綜上所述，本發明所述之網頁版面自動偵測方法、網頁瀏覽的優化處理方法及其處理系統的各實施例中記載的技術手段，網站伺服器11可以根據各用戶端10當前所瀏覽的網頁版面所呈現網頁版面留白區域(negative space)的留白空間量，並計算出該留白空間量與該網頁版面資訊量之間的比例，取得網頁版面所呈現整體留白空間比例以及圖文間距留白空間比例來作為一判讀結果，並且判斷該結果與儲存單元中所存有的預設條件進行比對是否滿足其條件，藉此調整網頁版面中的字體大小並重新生成調整後的網頁版面，並發送至該用戶端10，透過偵測用戶當前瀏覽網頁中的內含資訊量與留白間範圍之間的比例是否適宜不同年齡層的用戶進行閱覽，進而獲取其偵測結果進行網頁版面的瀏覽優化調整，將網頁自動調整適合不同使用族群閱覽的網頁資訊量，據以提高網頁頁面使用度。

另外，採用的螢幕解析度生成字體大小比例適合用戶瀏覽的網頁版面，從而有效地提升了網頁版面的顯示效果，提高了網站系統的服務品質，也大大增強了用戶體驗。另一方面，網站伺服器11還可以根據用戶端10螢幕解析度的改變對生成的網頁版面的比例進行適應性調整，以及根據用戶自定義的字體字型大小和用戶端10當前採用的螢幕解析度，生成基於用戶自定義比例的網頁版面，這便提高了網站服務的靈活性，可以更好地適應用戶的各類需求，從而進一步提高了網站系統的服務品質，增強了用戶體驗。

本發明是參照根據本發明實施例的方法、設備(系統)、和電腦程式產品的流程圖和/或方框圖來描述的。應理解可由電腦程式指令實現流程圖和/或方框圖中的每一流程和/或方框、以及流程圖和/或方框圖中的流程和/或方框的結合。可提供這些電腦程式指令到通用電腦、專用電腦、嵌入式處理機或其他可編程資料處理設備的處理器以產生一個機器，使得通過電腦或其他可編程資料處理設備的處理器執行的指令產生用於實現在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的裝置。

這些電腦程式指令也可存儲在能引導電腦或其他可編程資料處理設備以特定方式工作的電腦可讀記憶體中，使得存儲在該電腦可讀記憶體中的指令產生包括指令裝置的製造品，該指令裝置實現在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能。

這些電腦程式指令也可裝載到電腦或其他可編程資料處理設備上，使得在電腦或其他可編程設備上執行一系列操作步驟以產生電腦實現的處理，從而在電腦或其他可編程設備上執行的指令提供用於實現在流程圖一個流程或多個流程和/或方框圖一個方框或多個方框中指定的功能的步驟。

綜上所陳，本創作無論就目的、手段及功效，均顯示其迥異於習知技術之特徵。惟應注意的是，上述諸多實施例僅係為了便於說明而舉例而已，本創作所主張之權利範圍自應以申請專利範圍所述為準，而非僅限於上述實施例。

S10~S13‧‧‧網頁版面自動偵測方法步驟

S200~S250‧‧‧網頁瀏覽的優化處理步驟

10‧‧‧用戶端

11‧‧‧網站伺服器

110‧‧‧儲存單元

111‧‧‧通信單元

112‧‧‧判斷單元

113‧‧‧生成單元

圖1係本發明之網頁版面自動偵測方法的流程圖。 圖2係本發明之網頁瀏覽的優化處理系統的方塊圖。 圖3係本發明之網頁瀏覽的優化處理方法的流程圖。

Claims (10)

1. 一種網頁版面自動偵測方法，其係透過一電腦裝置執行，包括以下步驟： 使一瀏覽器瀏覽一網頁版面排列正常的一待偵測網站，在一解析度條件下，自一定螢幕範圍內取得一網頁版面資訊量作為一待比對網頁，該解析度條件係為經由該電腦裝置內自動控制、或由人工調整控制以使該瀏覽器於一定螢幕範圍內所顯示的圖素數量能保持一致； 在該解析度條件下，使瀏覽器於同一螢幕範圍內取得該待比對網頁之網頁版面留白區域(negative space)的一留白空間量，該網頁版面留白區域不包含網頁版面中所呈現資訊之行距、圖片、文字、圖表、邊緣、字體大小、段落間距、色彩區塊之間的任一者或其以上； 計算比對該留白空間量與該網頁版面資訊量之間的比例，以取得一整體留白空間比例與一圖文間距留白空間比例作為一判讀結果； 根據該判讀結果是否滿足一預設條件作為判斷該待比對網頁是否異常，該預設條件包含以下任一者： 該版面留白空間比例小於35%，該判讀結果視為異常； 該版面留白空間比例大於65%，該判讀結果視為異常； 該圖文間距留白空間比例小於5%，該判讀結果視為異常； 該圖文間距留白空間比例大於40%，該判讀結果視為異常； 該版面留白空間比例小於65%且該圖文間距留白空間比例大於5%，該判讀結果視為正常； 該版面留白空間比例大於35%且該圖文間距留白空間比例小於40%，該判讀結果視為正常。
2. 如請求項1所述之網頁版面自動偵測方法，其中內嵌該瀏覽器之用以自動偵測網頁版面的JavaScript程式原始碼包含： import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; public class WhiteRatio { public static void main(String[] args) throws IOException { File f = new File("C:/sample1.jpg"); BufferedImage im = ImageIO.read(f); int wr = 0; int w = im.getWidth(); int h = im.getHeight(); for(int i=0;i＜w;i++){ for(int j=0;j＜h;j++){ if(im.getRGB(i, j) == -1){ wr++; } } } System.out.println(wr*1.0/im.getWidth()/im.getHeight()); } }
3. 一種應用如申請專利範圍第1項所述之網頁版面自動偵測方法的網頁瀏覽優化處理方法，包括以下步驟： 自網站伺服器接收一用戶端發送的用於請求瀏覽網頁的一第一資訊請求後，向該用戶端發送用於取得當前網頁之該判讀結果與查詢螢幕解析度的一第二資訊請求； 該網站伺服器取得該用戶端所瀏覽網頁返回的該判讀結果，以及螢幕解析度與當前瀏覽網頁中所呈現的字體字型大小之間的對應關係，選擇對應該螢幕解析度設置的字體字型大小；以及 該網站伺服器根據該判讀結果是否滿足該預設條件，以及該螢幕解析度與當前網頁的字體字型大小生成相應比例的一網頁版面，並將該網頁版面發送至該用戶端； 其中於該網站伺服器將該網頁版面發往用戶端後，該網站伺服器可以定期向該用戶端發送該網頁版面留白區域的該留白空間量以及該螢幕解析度查詢請求消息，以判斷該用戶端瀏覽當前網頁版面之該判讀結果是否滿足該預設條件、或者該用戶端採用的螢幕解析度是否發生改變，並在不滿足該預設條件或者螢幕解析度確定發生改變時，對用戶當前瀏覽的網頁版面進行相應調整。
4. 如申請專利範圍第3項之網頁瀏覽優化處理方法，其中於該網站伺服器將網頁版面發往該用戶端後，若接收到自該用戶端發送用於指示重新設置字體字型大小的一第三資訊請求，則根據該用戶端當前採用的螢幕解析度和用戶重新設置的字體字型大小生成相應比例的網頁版面。
5. 如申請專利範圍第4項之網頁瀏覽優化處理方法，其中該網站伺服器根據用戶端當前採用的螢幕解析度和用戶重新設置的字體字型大小生成相應比例的網頁版面，包括：該網站伺服器直接根據用戶端當前採用的螢幕解析度和用戶重新設置的字體字型大小生成相應比例的網頁版面；或者該網站伺服器將該重新設置的字體字型大小，與對應該用戶端當前採用的遮罩解析度預設的字體字型大小進行比較，並在確定該重新設置的字體字型大於該預設的字體字型大小時，根據用戶端當前採用的螢幕解析度和該重新設置的字體字型大小生成相應比例的網頁版面。
6. 如申請專利範圍第3至5項任一項所述之網頁瀏覽優化處理方法，其中該網站伺服器判斷該用戶端瀏覽當前網頁版面之該判讀結果為不滿足該預設條件時，則根據該字體字型大小以及相關的網頁資訊量之間的對應關係，重新生成調整符合該預設條件之相應比例的網頁版面，再將該網頁版面發送至該用戶端。
7. 如申請專利範圍第3至5項任一項所述之網頁瀏覽優化處理方法，其中該網站伺服器判斷確定該用戶端重新設置了螢幕解析度，則按照用戶端重新設置的螢幕解析度，以及預設的螢幕解析度和字體字型大小之間的對應關係，獲取上述重新設置的螢幕解析度對應的字體字型大小，並根據該重新設置的螢幕解析度和對應的字體字型大小生成相應比例的網頁版面。
8. 如申請專利範圍第3項所述之網頁瀏覽優化處理方法，其中在該網站伺服器接收用戶端發送的用於請求瀏覽網頁的第一資訊請求之前，還包括：預設螢幕解析度與字體字型大小之間的對應關係，其中，該字體字型大小的單位為em。
9. 一種應用如申請專利範圍第1項所述之網頁版面自動偵測方法的網頁瀏覽優化處理系統，其包括： 一通信單元，用於接收一用戶端發送的用於請求瀏覽網頁的一第一資訊請求後，該用戶端發送用於取得當前網頁之該判讀結果與查詢螢幕解析度的一第二資訊請求，並且接收該判讀結果與該用戶端所返回的當前螢幕解析度； 一判斷單元，用於根據該用戶端所瀏覽網頁該判讀結果是否滿足該預設條件與返回的該螢幕解析度，以及預設的螢幕解析度與字體字型大小之間的對應關係進行判斷，以選擇對應該螢幕解析度設置的字體字型大小；以及 一生成單元，用於根據該判讀結果是否正常，以及該螢幕解析度與當前網頁的字體字型大小生成相應比例的一網頁版面，並由該通信單元將該網頁版面發往該用戶端； 其中該通信單元將該網頁版面發往用戶端後，該通信單元可以定期向該用戶端發送該螢幕解析度的查詢請求，以判斷該用戶端採用的螢幕解析度是否發生改變，並在確定發生變化時，對用戶當前瀏覽的網頁版面進行相應調整。
10. 如申請專利範圍第9項所述之網頁瀏覽優化處理系統，其中於該生成單元通過該通信單元將網頁版面發往用戶端後，若通過該通信單元接收到用戶端發送的用於指示重新設置字體字型大小的第三資訊請求，則根據用戶端當前採用的螢幕解析度和用戶重新設置的字體字型大小生成相應比例的網頁版面。