律睿慜，張云雷，王濛濛，陳麗芳

(江南大學(xué) 數(shù)字媒體學(xué)院，江蘇 無錫 214122)

0 引 言

顏色選擇是圖像處理中最常見的交互任務(wù)之一。對于24位的三原色(RGB)模型，可用的顏色大約為1 600萬種，將這些顏色集中于很小的調(diào)色板中并且讓用戶選擇期望的顏色是一件困難的事情。選色器的交互設(shè)計中，主要考慮的問題是同時把握好易學(xué)性和易用性。在傳統(tǒng)的以鼠標(biāo)+鍵盤+大屏幕的個人電腦(PC)框架下，已經(jīng)形成典型選色器模型，如RGB三滑塊模型和HSV調(diào)色板模型。由于這些選色模型已經(jīng)成為大眾熟悉的工具，在觸屏?xí)r代，為了讓用戶易于上手，絕大多數(shù)應(yīng)用中都直接沿用這種經(jīng)典的選色交互模式。但是，由于觸點操作的精確度天生不如鼠標(biāo)，導(dǎo)致選色效率和精度都不如在PC端[1]，同時觸摸屏多點觸控的優(yōu)勢也完全沒有發(fā)揮出來。如何可以既保有這類經(jīng)典選色器的易學(xué)性，又能充分運用多點觸控功能以提高易用性是設(shè)計的重點。針對上述問題，對基于PC端的選色交互方式進(jìn)行了重新設(shè)計，提出了4種新的基于HSV顏色模型的選色交互方案。其中2種是單點觸控方案，其余2種是多點觸控方案。通過與傳統(tǒng)的交互方案進(jìn)行定量的對照實驗來驗證新的交互方式在選色效率上是否得到提升。

1 相關(guān)研究

我國在選色器模型以及手勢交互領(lǐng)域的研究還處于起步和學(xué)習(xí)階段。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展以及人們對于數(shù)字內(nèi)容創(chuàng)作上的需求越來越高，不少學(xué)者開始重視這方面的研究，尤其是在顏色模型領(lǐng)域的理論性研究較多。近年來有一些手勢交互技術(shù)的探索和進(jìn)展，但是如何將手勢交互應(yīng)用于拾色器模型中目前尚無文獻(xiàn)可尋。

國外相對與國內(nèi)在手勢交互拾色領(lǐng)域的研究表現(xiàn)出了更多的積極性。Koenderink J等人[2]系統(tǒng)分析了現(xiàn)在常用的拾色器模型的優(yōu)劣,通過對比試驗得出各模型在各項指標(biāo)上的得分，為設(shè)計更好的拾色器模型奠定了一個非常好的基礎(chǔ)。Maudet N等人[3]提出了一個名為Color Portraits 的新型拾色器模型，提出過去25年中主流的拾色器模型未曾有過重大的改變更新，因此創(chuàng)造了一個更新穎的選色器模型以提高選色效率。Son K H等人設(shè)計了名為 Color Sommelier[4]的選色工具，該選色模型的最大特點就是有一個獨特的顏色推薦系統(tǒng)，能根據(jù)用戶已使用顏色來推薦更加匹配的色彩，從而使畫面更加的和諧。Wu Y X等人提出了一種三維的選色模型。ColorFingers[5]是Ebbinason A J G等人提出的基于觸摸屏的多點操控顏色選擇器，可以提供快速的顏色選擇，模型強(qiáng)調(diào)多點觸摸，快速反饋和位置獨立；但是該模型的缺點是對于普通用戶而言顏色選擇操作過于復(fù)雜，缺少反饋以及在用戶互動方面還有很大的提升空間。BICEP[6]是Gonzalez B等人提出的基于觸摸屏幕的拾色器模型，用戶可以通過雙手觸摸屏幕控制色調(diào)、飽和度和亮度，從而更加快速的選取所需顏色。

2 交互方案設(shè)計

2.1 交互方案設(shè)計

前人的研究證明了RGB，YIQ和LAB等顏色模型都是面向設(shè)備[7～11]，HSV或HSL顏色模型是面向用戶。本文主要研究基于觸摸屏幕的手勢交互選色方案對選色效率的影響，因此需要用戶減少學(xué)習(xí)成本，增加模型的易用性，僅對交互方案做出創(chuàng)新。本文選擇以經(jīng)典的HSV顏色模型為基礎(chǔ)進(jìn)行選色器的設(shè)計。對該模型加上顏色反饋的模塊，具體交互如圖1。

圖1 選色器交互方案設(shè)計

在圖1(a)中左側(cè)為方形調(diào)色板區(qū)域，通過這個區(qū)域用戶可以選擇飽和度和明度值，圖中右側(cè)為矩形色相條，色相條滑塊可以控制色調(diào)值。在色相條滑塊上加了一個圓形觸摸區(qū)域以增加觸摸時的操控范圍，選色器上部為一個顏色反饋區(qū)域。首先需要一個原始的方案做對比實驗，即基于桌面選色器的選色機(jī)制直接移植到本選色器中，把這個交互方案稱做Demo1。該交互方案中用戶可以用一個手指選擇色調(diào)然后再通過移動調(diào)色板中的白色小球選擇飽和度和明度值。這是傳統(tǒng)的交互方案，該種方案的選色操作至少為兩個步驟，其缺點是選色不連貫，需要選擇不同的兩個區(qū)域，在選色時間上最長，如圖1(b)所示。

從圖1可以看出該種方案需要進(jìn)行兩步操作進(jìn)行選色，Demo1方案選色是不連續(xù)的，如果讓這個過程連續(xù)起來則會大大縮短選色時間，然而觸摸屏正好給了這種連續(xù)性操作的空間。把這種連續(xù)性操作稱作Demo2。從圖1(c)中可以看出當(dāng)用戶移動色相條滑塊后選擇所需色調(diào)然后手指不用抬起直接滑入左側(cè)調(diào)色板中進(jìn)行飽和度和明度的選擇。這種交互方式的好處是選色具有連貫性從而提升選色速度。用戶將用一步連續(xù)的操作就可以選擇所需要的顏色。

在Demo1和Demo2這兩種方式中都是通過色相條滑塊來調(diào)節(jié)色調(diào)值，但是用戶如果不小心點中色相條的任何位置那么色相滑塊就會隨之移動到手指點按的位置，色調(diào)馬上就會改變?nèi)缓缶托枰脩糁匦抡{(diào)整色調(diào)[2]。

Demo3交互方式區(qū)別于前兩種，首先Demo1和Demo2都是通過改變色相條上滑塊的位置來選擇色調(diào)，而Demo3種的方案是將滑塊固定住，通過直接移動色相條來于滑塊間移動產(chǎn)生的相對位置來選擇色調(diào)。該種交互方式的優(yōu)勢是用戶可以觸碰色相條的任何位置而不改變色調(diào)，通過上下移動色相條來選擇色調(diào)，這就很好解決了Demo1和Demo2中的誤觸問題，同時它又兼具Demo2的優(yōu)勢，即Demo3也是可以通過一步操作來進(jìn)行選色。用戶移動色相條選擇色相后可以直接滑入左側(cè)調(diào)色板區(qū)域進(jìn)行連貫的選色。

以上三種交互方式都是單手觸控操作，本質(zhì)上還是基于桌面選色器的變種只是有細(xì)微的變化。選色器上其實是有3個維度的參量值，通過改變?nèi)齻€參量的值來選擇所需要的顏色。觸摸屏和PC的最大區(qū)別就是觸摸屏提供了簡單的多點觸控機(jī)制，這個優(yōu)勢如果應(yīng)用到選色器中選色效率將會得到很大提升。于是設(shè)計了通過兩個手指同時控制2個區(qū)域以達(dá)到選色的目的。

2.2 選色器邏輯狀態(tài)

該選色器共由2個部分和2個組件構(gòu)成，通過組件之間的相對移動以達(dá)到選色的目的。不同的交互方案中組件的相對移動方式不一樣，下面選擇用邏輯狀態(tài)圖來表示其規(guī)則，如圖2。

圖2 選色器交互方案邏輯狀態(tài)

本文將選色器的各個區(qū)域分別標(biāo)記。調(diào)色板標(biāo)記為a，調(diào)色板中的小球計為b，色相條計為c，色相條滑塊計為d。把可以移動計為1，不可移動計為0，ab如果為1,則表示ab區(qū)域可以同時移動，如果ab為0,則表示不可同時移動。從而可以得到各種交互方式的狀態(tài)表，如表1所示。

表1 選色器模型邏輯狀態(tài)表

2.3 學(xué)習(xí)成本

為避免用戶對選色器使用不熟練而產(chǎn)生的實驗結(jié)果偏差較大的情況。對20位志愿者進(jìn)行了問卷調(diào)查，其中有14人是曾經(jīng)使用過HSV顏色模型的，排在第二位是RGB模型，人數(shù)為10人。志愿者中超過7成的人了解和使用過HSV顏色模型，以該模型作為實驗測試模型的基礎(chǔ)能夠?qū)⒂脩舻膶W(xué)習(xí)成本降到最低。

3 實驗設(shè)計與結(jié)果討論

3.1 目標(biāo)色選則

如何選擇目標(biāo)色對測試結(jié)果有著很大程度的影響，實驗所需的顏色從MacBeth ColorChecker[12]圖表中獲取，這是一個用于測試顏色在現(xiàn)的標(biāo)準(zhǔn)參考圖表。其中12個代表了自然和辦公環(huán)境中常見的顏色，其中6種是加色和減色原色，還有6種是從黑色到白色的漸變色。由于它們對應(yīng)各自物體的色彩并且以同樣的方式反射所有可見光譜中的光，所以這些顏色可以在任何光源下與其代表的自然物體的顏色相匹配，同時可以用于任何色彩再現(xiàn)流程。本文所需要的色彩再現(xiàn)的顏色都將從該顏色表中提取。

3.2 偏差度計算規(guī)則

實驗所得HSV數(shù)據(jù)將直接轉(zhuǎn)化為RGB顏色數(shù)據(jù)，然后再由RGB數(shù)據(jù)轉(zhuǎn)換為LAB數(shù)據(jù)進(jìn)行偏差度的計算。偏差度是計算目標(biāo)色LAB顏色空間與用戶所選色LAB值的顏色距離(CDUS)。CDU偏差度是CIELAB空間中顏色之間的歐幾里得距離，這個距離與人類感知色彩一致。偏差度計算公式如下

3.3 實驗設(shè)計

實驗選擇20名大學(xué)生作為志愿者，其中有12名女性和8位男性，他們中大部分來自計算機(jī)相關(guān)專業(yè)，年齡在19～26歲之間，在測試之前首先排除色盲色弱等對顏色選擇有障礙的人員，確保所有志愿者均達(dá)到正常辨別色彩的能力。

對于實驗時間的定量控制是基于Koenderink J等人在他們的研究論文Color Picking:The Initial 20 s中選取。

實驗在一臺宏基觸控屏平板電腦上進(jìn)行。志愿者被要求先熟悉和使用選色器的各個交互模型并進(jìn)行簡單訓(xùn)練。訓(xùn)練時間10 min左右，然后開始正式的測試。

測試者從其中任一demo開始測試，首先設(shè)置一個測試時間，通常從60 s開始(在實際測試中通常測試者選色時間都在60 s以內(nèi))然后時間遞減為48,30,18 s。測試者需要在規(guī)定時間內(nèi)完成選色任務(wù)，每輪次選色測試6個隨機(jī)顏色，每個交互方式的每個測試時間都需要測試3次或以上，志愿者一共需要測試至少60輪次的選色任務(wù)，每人至少完成了300次顏色匹配，這個數(shù)量是足夠大的，通常一個志愿者需要測試1 h以上才能完成所有選色任務(wù)。測試的所有原始數(shù)據(jù)都記錄在程序數(shù)據(jù)庫中。實驗過程如圖3所示。

圖3 實驗過程

3.4 實驗結(jié)果

表2,表3為20位測試者的不同測試時間的偏差度均值與偏差度標(biāo)準(zhǔn)差。

表2 偏差度均值

表3 偏差度標(biāo)準(zhǔn)差

圖4 不同時間限制下偏差度均值及標(biāo)準(zhǔn)誤差

從得到的實驗數(shù)據(jù)分析可以得出以下結(jié)論：1)隨著時間的減少選色準(zhǔn)確度越來越低。2)60 s限時測試中5種交互方式的偏差度差別不大，但是隨著限制時間的縮短偏差度差距變得越來越明顯，尤其是在18 s限時選色中各種交互方式的偏差度差距最大。3)從表中可以得出結(jié)論Demo1選色方式在所有時間限制下準(zhǔn)確度都最低，Demo5選色交互方式在所有時間限制下準(zhǔn)確度都最高。4)多點觸控方案的選色準(zhǔn)確率整體高于單點觸控交互方案。5)較傳統(tǒng)的Demo1交互模型其他幾種新的交互方式在選色準(zhǔn)確度上都得到了提升。6)設(shè)Demo1的偏差度均值為X，其他Demo的偏差度均值為Y，相較Demo1的準(zhǔn)確度提升百分比為P，則可得P=(Y-X)/Y。所得結(jié)果如表4。

表4 相較Demo1的準(zhǔn)確度提高百分比 %

Demo5提升范圍最大，均值在26 %，Demo4其次，均值在14 %，Demo2提升8 %，Demo3提升5 %。

4 結(jié) 論

本文設(shè)計了基于觸摸屏的4種新型的選色交互方式，并且與傳統(tǒng)的交互方式作對照實驗。實驗結(jié)果證明新型的交互方式能更好地適應(yīng)觸摸屏選色，在不同的時間限制下選色準(zhǔn)確率提高6 %～26 %不等。通過實驗很好地證明了本文的交互方式能更好地適應(yīng)觸摸屏設(shè)備。這為以后基于觸摸屏的選色器設(shè)計提供借鑒和參考依據(jù)。

本文填補(bǔ)了基于觸摸屏選色器的不同交互選色方案效率問題的實驗驗證問題。同時證明了觸摸屏上選色器的不同交互方式在選色效率上有較大差別。證明了在這個使用場景下新的交互方式比傳統(tǒng)的基于PC端選色器的交互方案效率得到了顯著的提升，尤其加入多點觸控功能后準(zhǔn)確度得到了較大提升。

本實驗證明新的交互方案能夠顯著提升用戶的交互體驗和選色準(zhǔn)確率，證明其存在的實用性和必要性。為用戶提供了更多的交互可能性，也為新型的基于觸屏選色器的設(shè)計和應(yīng)用提供理論參考依據(jù)。