變數設定

在實驗中所有手指滑動手勢動作都是以Android API 中的 sendevent 方法模 擬，手指滑動速度以像素距離除以毫秒去計算，在[14]中提到，不同類型的網頁 使用者手指滑動習慣也不同會有快速度的滑動和慢速度的滑動差別，所以本章節 實驗手指滑動速度設計了三個手指滑動速度，分別為快(12.5 像素/毫秒)、中(10

像素/毫秒)、慢(6 像素/毫秒)速的手指滑動速度，以 60 秒的時間持續每秒輪流向

Reddit、Amazon 和 Nownews，在從 Google Trend 中選擇各網站 2017 年流量最高 或熱門搜索關鍵字來實驗對應如下表格2。

表格2 實驗網頁

手動搜索標籤方法因為是主觀判定，由實驗者負責判定每個網站的標籤屬於 何種類型的標籤，並新增到資料庫，自動搜索標籤方法為演算法自動判斷，我們

網站 實驗網頁

Google 搜尋關鍵字：Hurricane Irma

Wikipedia 美國Trump 總統英文個人介紹頁面

紀錄 Power Monitor 回傳的功耗數值，當 S8 手機上執行應用程式並選擇是否開

轉換時間，網頁載入時間是當使用者點進網頁時到顯示網頁的應用程式執行時間，

包含了開啟方法時間和未開啟方法時間，另外是顏色轉換時間，這數值是變色時 間和還原時間的平均，變色時間是手指滑動結束後從網頁開始滑動時開始變色到 完成變色的Javascript 程式執行時間，還原時間是網頁滑動結束網頁顏色開始還 原到結束還原的Javascript 程式執行時間。

動速度是否為影響到螢幕省電比例，或者有別的因素，像是圖片比例。

4.2.1 省電比例

如下圖17 所示，圖中 X 軸為各網站網頁，左 Y 軸為省電比例包含螢幕省電 比例和手機手電比例，右Y 軸為圖片比例，我們得知螢幕省電比例在 42%~95%

間，其手機省電比例在9%~35%間，我們初步了解其省電比例浮動的原因為圖片 比例，從圖中觀察得知，當圖片比例越低其省電比例越高，但是Reddit 是例外，

其原因會在接下來章節探討。

圖17 省電比例圖

4.2.2 滑動速度與螢幕功耗關係

如下圖18 所示，圖中 X 軸為各網站網頁，Y 軸為螢幕省電比例，藍色長條 圖為6 像素/毫秒的手指滑動速度滑動時的螢幕省電比例，紅色長條圖為 10 像素 /毫秒的手指滑動速度滑動時的螢幕省電比例，藍色長條圖為 12.5 像素/毫秒的手 指滑動速度滑動時的螢幕省電比例，手指滑動速度的增減在Google、Wiki、

Amazon 和 Facebook 網站下螢幕省電比例有明顯的改變，但是在 Youtube、Reddit 和Nownews 網站下手指滑動速度的增減沒有影響到螢幕省電比例，所以我們分 類出了兩種情況，不同滑動速度下螢幕省電比例相似和不同滑動速度下螢幕省電

比例不同。

圖18 省電比例圖

在前段分類出兩種情況，在兩種情況下我們分別在各網站中來分析其原因，

在不同滑動速度下螢幕省電比例不同情況下我們選擇先以Google 來分析，如圖 19 中，我們發現在三種手指滑動速度下的圖片比例改變了，如圖 21 中左邊為 Google 網頁畫面，因為在 4.1.4 小節有提到，若手指滑動速度越快，所經過的網 頁畫面就越多，所以當網頁畫面越多，中間包含的標籤物件就變多了，我們計算 了每個手指滑動速度下的圖片面積變化，計算出圖片比例也跟著變化，發現在 Google 該網頁下手指滑動速度越快圖片比例也提高，而圖片比例提高則螢幕省 電比例也降低，經過其他網頁觀察Wiki、Amazon 和 Facebook 也有同樣情況。

圖19 Google 滑動速度與螢幕關係圖

另一種情況為不同滑動速度下螢幕省電比例相似，我們觀察有同樣情況的網 頁，我們以Youtube 來分析，如圖 20 所示，圖中可以發現三種手指滑動速度下 的圖片比例一樣，原因如上段所提到，如圖21 所示，圖中右邊為 Youtube 網頁 畫面，雖然經過網頁畫面提高了，但是其實圖片比例並沒有改變，Reddit 和 Nownews 亦同。

圖21 各手指滑動速度下的經過網頁畫面(左 Google、右 Youtube)

根據前兩段的觀察，我們得出一個結論，滑動速度的快慢並不影響螢幕省電 比例，在不同滑動速度下螢幕省電比例改變的原因在於經過網頁畫面改變而改變 圖片比例，從而得出一個結論就是當圖片比例越低則省電比例越高。

4.2.3 圖片比例與螢幕功耗關係

從4.2.2 節結論可知圖片比例越低則省電比例越高，但是在 4.2.1 節中發現

比例都沒有改變，可以方便分析兩者的差異處。

圖22 Youtube 和 Reddit 網頁畫面

如圖23 中，可以發現 Youtube 和 Reddit 螢幕省電比例差距不大，且 Youtube 螢幕省電比例大於Reddit，但是圖片比例卻差異很多，且 Youtube 圖片比例大於 Reddit，與 4.2.2 節的推論圖片比例越低螢幕省電比例越高不符，其原因在於文 字上的差異，如圖22 中，Reddit 右半邊有較多的受注目文字，所以如果把受注 目文字加入圖片比例一起計算的話，如圖24 中，Reddit 的圖片含受注目文字比 例大於Youtube，所以在多網站的省電比較上，圖片比例必須加入受注目文字才 比較準確。

圖23 Youtube 和 Reddit 圖片比例和螢幕省電比例關係圖

圖24 Youtube 和 Reddit 圖片比例含受注目文字和螢幕省電比例關係圖

第三節 時間效能

4.3.1 網頁載入時間

本節要比較開啟方法和未開啟方法的網頁載入時間，如圖25 中，X 軸為各 網站，Y 軸為網頁載入時間，未開啟方法網頁載入時間平均為 2341 毫秒，開啟 方法網頁載入時間平均為5804 毫秒，網頁載入時間平均提高約 2.5 倍，這點在 現階段沒有辦法避免，原因在於開啟方法時，應用程式會用JSoup 先載入網頁一 次，在加上應用程式在呈現給使用者觀看的時間，同個網頁需要載入兩次。

圖25 網頁載入時間圖

如上段提到開啟方法後因為JSoup 多載入一次的關係時間提高了 2.5 倍，如 果把後端處理的部分利用Thread 程序進行處理，如圖 26，開啟方法 2 為新的載 入方法，載入平均時間降為2062ms，與未開啟方法載入時間相近，開啟方法 2 讓使用者先看到未開啟方法的網頁後在載入處理好的網頁內容，但這樣的方法有 個缺點，就是為讓網頁重新載入一次，這樣會失去載入前使用者所進行的每個動 作。

圖26 載入方法 2 網頁載入時間圖

4.3.2 顏色轉換時間

顏色轉換時間分成變色時間和還原時間，如圖27 所示，X 軸為各網站，左 Y 軸為顏色轉換時間，右 Y 軸為影響標籤數，可以發現當影響標籤數越多，則 花費時間越長，我們計算顏色轉換平均時間為64 毫秒，根據[11]文中，轉換時 間越長，會降低使用者體驗，[11]中的轉換時間有 90%是 25 毫秒，我們認為我 們的顏色轉換時間與前述差異不大。

圖27 顏色轉換時間圖

第四節 搜索標籤方法效能差異

我們有兩種搜索標籤方法，會影響到標籤內容的差異，本節將探討這樣的差 異是否會影響到省電和時間效能。

4.4.1 螢幕省電差異

根據3.1 節所述手動搜索標籤和自動搜索標籤最大的差別在於文字的判斷，

如圖28 所示，X 軸為各網站，Y 軸為螢幕功耗，藍色長條圖為手動搜索標籤方 法，紅色為自動搜索標籤方法，可以發現不同網站的螢幕功耗各有優劣，其原因 在於受注目文字和不受注目文字的判斷方法不同，如圖29 所示，在左圖手動搜 索標籤方法中，中間每個連結下的文字敘述區塊被定義不受注目文字，所以是黑 色，而在左圖自動搜索標籤方法，同樣的區塊被定義為受注目文字區塊，變成了

省電色，其主要原因是那個區被在手動搜索標籤方法中被主觀認為是不受注目文 字，而在自動搜索標籤方法會準確判斷是否少於155 字。

圖28 手動搜索標籤與自動搜索標籤螢幕功耗差異

4.4.2 顏色轉換時間差異

如前段所述手動搜索標籤和自動搜索標籤對於標籤的認定會有所差異，所以 數量上一定會有所差異，如圖30 所示，X 軸為各網站，左 Y 軸為顏色轉換時間，

右Y 軸為影響標籤數，可以發現與 4.3.2 節一樣，手動搜索標籤和自動搜索標籤 的顏色轉換時間與影響標籤數成長成正比，我們算出自動搜索標籤的平均顏色轉 換時間為 291 毫秒，比手動搜索標籤平均顏色轉換時間 64 毫秒多約 4.5 倍，這 樣會影響到使用者體驗。

圖30 手動搜索標籤與自動搜索標籤顏色轉換時間差異

4.4.3 搜索標籤方法差異總結

根據4.4.1 節所述，螢幕功耗各有優劣，我們認為兩種方法從功耗的差異上 無法比較兩種方法的好壞，但是根據4.4.2 節，顏色轉換時間平均增加約 4.5 倍，

如圖30 所示，每個網站的影響標籤數都明顯增加，我們分析其增加的標籤數是

哪類型的標籤，如圖31 所示，每個網站自動搜索標籤增加很大比例的背景和文 字省電色類型，但是自動搜索標籤最大的優點是能節省程式人員的時間，如果使 用者想要直接享受到省電的功能的話，自動搜索標籤可以直接滿足。

圖31 標籤增加量結構圖

第五節 漸進變色效能比較

在4.1.1 中有提到我們設計了另一個變色方法，在本節中要比較其與原方法 的省電和顏色轉換時間差異。

我們選用Google 做為實驗網站來比較省電差異，如圖 32 所示，X 軸為兩種 方案，Y 軸中藍色為螢幕省電比例，紅色軸為手機省電比例，實驗結果顯示，螢 幕省電比例漸進變色方案比原方案少了約4%的省電，手機省電比例漸進變色方

圖32 原方案與漸進變色方案省電比例

顏色轉換時間同樣選用Google 做為實驗網站來比較差異，如圖 33 所示，X 軸為兩種方案，Y 軸中藍色為滑動變色時間，紅色為滑動還原時間，漸進變色方 法的滑動變色時間時由兩次顏色變色時間加總，滑動還原時間也是，實驗結果顯 示，顏色轉換時間提高了約2 倍，主要原因在於不管是變色和還原時，都要增加

顏色轉換時間同樣選用Google 做為實驗網站來比較差異，如圖 33 所示，X 軸為兩種方案，Y 軸中藍色為滑動變色時間，紅色為滑動還原時間，漸進變色方 法的滑動變色時間時由兩次顏色變色時間加總，滑動還原時間也是，實驗結果顯 示，顏色轉換時間提高了約2 倍，主要原因在於不管是變色和還原時，都要增加