UI設計理論 – GUI原理3-皮膚Skin

本來講皮膚是要放在最後的階段，前面還有向量字型、通道、濾鏡等等。不過，大多數的UI設計師關心的是表徵圖和皮膚，所以就將這一節放到了前面。我對皮膚進行了深入的研究，包括windowblinds和stylexp的實現原理，以及大多數豪華軟體。

skin中最為重要的技術——九宮格

   
我不知道具體的術語是怎樣的，反正我一直都叫他“九宮格”，也就是一個3＊3的格子。一整幅圖，使用2橫2豎將其風格為9塊。有的軟體將分割的寬度定為
（left，top，right，bottom），我認為叫做（toLeft，toTop，toRight，toBottom）更為準確些。分割的原則，
要試圖片而定，保證圓角都在四周，而中間的地區是連續或漸層的顏色。

StyleBuilder中Button按鈕九宮格的分割

  各種軟體一般都是用的left和right，但我覺得這裡還是定為toLeft、toRight比較恰當些，因為right是從左至右的距離，而toRight是該點到右邊的距離。WindowBlinds與此同。

SizingMargins
    由九宮格引出的第一個，也是最重要的屬性——SizingMargins，類型結構，欄位toLeft、toTop、toRight、toBottom，取值必須>=0。該值必須由平面設計師確定，不是由程式員確定的。

 SizingMargins的取值問題
    SizingMargins其4個欄位類型為unsigned short，取值可以不相同，這要看圖片的具體樣式。

兩種變型

    如果將左右，或者上下的取值定位0，就產生了兩種變型，最常見的就是蘋果的button按鈕。由於是倒圓角的關係，不能將圓角裁減，所以將左邊的地區合并，也就是地區1、4、7合并到地區4，toTop、toBottom取值0。

一種特例

    通常checkbox和radiobutton都是一小幅圖，並不需要進行裁減展開，所以這裡的SizingMargins取值都為0，集中到地區5。

 

3種基本的填充模式
    skin的第二個屬性——SizingType，枚舉類型，基本的取值有TrueSize、Tile、Stretch，當然，還有些擴充，這裡只討論這3種。

TrueSize最為簡單，不考慮SizingMargins，直接將圖片貼到制定的地區即可，比如前面的checkbox和radiobutton。

要說Tile和Stretch，不得不說一下皮膚的貼圖過程，我們以捲軸為例。

 

捲軸的貼圖過程

    這裡講的是程式如何根據SizingMargins和SizingType來繪製捲軸。

首先來看一下捲軸的SizingMargins，因為微軟的捲軸畫得比較規整，到每邊的距離都是5。

捲軸原貼圖和目的地區域。

 

先貼4個頂角，也就是地區1、3、7、9。

然後貼4條邊，這裡需要SizingType屬性，如果是Tile則平鋪方式貼，如果是Stretch則展開方式。

最後貼中心地區，即地區5，也要按照SizingType方式，如果中心地區的顏色一致，則建議使用Tile，否則遇到漸層色要使用Stretch。

  
Tile和Stretch，要看填充方向是否有漸層色，遇到漸層色或者複雜圖案，就要使用後者。從程式的實現角度來講，Tile的填充速度要遠遠高於
Stretch，而且不要指望程式員會提供消除鋸齒的Stretch方式，因為速度至少會較齒條展開方式降低10倍。Tile和Stretch的效果見
Windows的壁紙填充模式，這裡不多講了。

如何確定原貼圖的尺寸？

  這是一個技巧和經驗的問題，需要設計師不斷的摸索和總結。

 
一般來說，為了最後的包足夠的小，建議使用更小的貼圖，減少貼圖檔案的尺寸。然而，並不是越小越好。比如在Stretch模式下，展開地區都是漸層色，而
齒條展開模式在漸層色展開上效果很差。所以，要提供足夠多的顏色，也就是足夠大的貼圖，來滿足漸層色展開的需求。但如果是Tile模式，則貼圖的
SizingMargins取值最好控制在10左右，大了圖也大，小了程式往複Tile的次數也多，需要裁減的次數也多了。

  比如前面看到的Windows的StartMenu，中間有很多的漸層色，SizingType取值Stretch，而且圖要足夠的大，以滿足展開採樣的要求。

5種貼圖狀態

這裡要涉及到2個參數，ImageCount和ImageLayout。

首
先，讓我們來認識一下皮膚的5種狀態，Normal、RollOver、Pressed、Disabled、Default。這些狀態就好像一個
button的狀態一樣，button在不同的狀態下（比如按下），需要顯示不同的樣式。Normal和Default的區別再於該控制項是否獲得了焦點，
RollOver是滑鼠停留在控制項上，Pressed是滑鼠或鍵盤按下沒有抬起時的狀態，Disabled是該控制項不可用時的狀態。注意，這些狀態的順序
不能顛倒，程式中沒有順序參數。還有一種情況，比如捲軸，是一種不可獲得焦點的控制項，則不需要最後的Default狀態。

ImageCount就是描述皮膚有幾種狀態圖的，如果某種狀態需要使用，但貼圖沒有提供，則預設使用Normal狀態。一般，ImageCount取值1、4、5，如果懶得貼很多的圖就用1，4表示該控制項不可獲得焦點，5是正常情況。

還
有一種特殊的情況，比如radiobutton，有未選中和選中兩種狀態，Windows會預設有兩組，因此ImageCount一般為10。而
checkbox，有未選中、選中和半選3種狀態，因此ImageCount一般為15，也可以為12和3，這要看設計師是否願意畫更多的圖。

ImageLayout是告訴程式，這幾張圖的擺放方向，枚舉，取值Horz、Vert，也就是水平和垂直方向擺放。

不管是多少種狀態，每個圖的大小要相同，且都要受到相同的SizingMargins控制，所以要盡量使用相同的樣式，只是換掉了顏色而已。

 

如何取定貼圖檔案的類型

  打包檔案不會轉換貼圖檔案類型，所以這需要設計師來確定。一般來說，不要使用BMP和JPEG，前者尺寸太大，後者是有損壓縮效果不好。

 
因此，剩下來的就是Gif和Png格式了。選擇這兩種類型，要看系統是否支援256級透明度的貼圖方式。一般Windows只支援齒條裁減方式，不能使用
半透明的貼圖，所以首選Gif。但Gif有個缺點，就是最多隻能有256色，所以遇到顏色多的還是要使用Png格式。Png支援Alpha通道，每個點都
是4個位元組的ARGB模式，使用ZIP方式壓縮，屬於無損壓縮類型。如果圖不是很複雜，Png的壓縮尺寸要小於Jpeg的尺寸。

  像StyleBuilder，在使用貼圖時要指定那種顏色為透明色，並將其記錄為TransparentColor。即使是Png格式，也要看系統是否需要指定透明色。

 

控制項的多重貼圖

 
這裡以捲軸控制項為例，Windows的捲軸需要十來個貼圖，才能完成其外觀的重繪工作。首先是上下兩個按鈕，同時還有箭頭，注意箭頭是單獨的貼圖，使
用TrueSize模式。中間的捲動區域先是貼LowerTrack，然後UpperTrack，接著才是ThumbButton，上面還有個
Gripper。Arrow和Gripper都使用TrueSize方式，其位置要受到ContentMargins制約。

另一個Margins

  ContentMargins是描述該貼圖內的文字和其他貼圖的對其模式，預設值和SizingMargins相同，欄位也和其相同。ContentMargins會對文字和貼圖進行裁剪，超出的地區會被裁掉，其內的資料將使用置中對齊。

 
比如Button上的文字，會受到ContentMargins的影響，如果設定Button控制項為靠左對齊，則最左邊的起始位置就是
ContentMargins的toLeff值。如果我們需要將本來置中的文字靠右邊點，就可以調整toLeft和toRight屬性，讓後者比前者小
點。

  Windows的StartMenu按鈕，在顯示“開始”的時候，需要居靠左對齊，就可以將toLeft調整的小一些。

  剩下的就是TextColor和FillColor了，這兩個都比較好理解，設計師可以根據貼圖的顏色來進行調整。一般來說，FillColor都很少使用，除非是貼圖檔案出現錯誤。

我的Skin目錄

    忘了一個參數，MiniSize，結構類型，欄位Width、Height，定義的是該貼圖的最小尺寸。Windows在建立和改變控制項大小時，會考慮貼圖提供的MiniSize，因為太小了就不能還原設計師的想法了。

 

如何從設計到實現

   下面以網上的一個skin為例，這是一個比較特殊外觀的視窗，是windowblinds網站下載的。我們來看一下如何將一個設計轉化為切實可行的skin，以及如何最佳化和確定參數。

提取視窗外觀

  我們只做視窗的skin，先要去掉視窗上的控制項，去掉標題列文字，還要去掉關閉按鈕（關閉本身就是一個skin）。刪掉背景，將檔案存為透明gif格式。

提取caption

windows將視窗皮膚定義的很複雜，而且不支援視窗的底紋皮膚。一個視窗，由4個skin組成，Caption、LeftFrame、RightFrame、BottomFrame，而中間的客戶區，只能夠制定顏色FillColor。

我們只做Caption的skin（偷了點懶），因此將Caption提取下來。注意邊框上有一點陰影，也要將陰影帶下來。

 

利用九宮格進行拆分

  呵呵，沒選好demo，這個竟然是寫死了高度的，因此不能夠調節Caption的Height屬性。Caption的toTop和toBottom為0，toLeft和toRight根據圖片的中間連續地區的長度來確定，注意開始和結束的位置保留一個完整的珠子長度。

 

壓縮貼圖尺寸，確定填充方式

  這麼長的貼圖，致使檔案變得很大。通過減少中間段連續的內容，可以減少貼圖尺寸。注意到，中間的部分是一顆珠子為一段，因此只提取一顆珠子的寬度，就好像提取DNA一樣，只要一個片段即可。

因為是連續片段，所以填充方式SizingType取值Tile，即為平鋪方式。MiniSize為（71，36），另外windows可以指定Caption的Height為36。

拆解WMP10

一
直都很喜歡Windows Media
Player，自從9.0之後，就放棄了其他播放器軟體。機器裡沒有了winamp，倒是省掉了很多的下載，算算好久都沒有下載Winamp的skin和
visual了。還有就是Apple的iTunes，巨占記憶體，也不知道這些程式員都是幹嘛的，花我們使用者的記憶體一點都不心疼。

微軟最近將WMP升級到了10.0，簡潔漂亮，而且本人不喜歡切換到面板模式，太多了花眼。今天就來將喜愛的WMP大卸八塊，看看這個東東程式和皮膚是如何?的。

老規矩，先把沒用的給擦掉

將各種按鈕去掉，還有調節音量的，這些都是另外的skin

各主要組件

將當前選項提取出來

這
是一個很好提取的skin，2橫2豎將其風格為9塊。中間的橫向部分顏色連續，可以壓縮為一小塊。上下方向的漸層，為了保證足夠的齒條展開採樣率，需要保
留原來的高度。展開方式SizingType為HorzTile&VertStretch，就是橫向的平鋪方式加上縱向的展開方式。

提取線上服務和播放狀態

 
這兩個skin都是一樣的，顏色略微有點不同，我們這裡只做一個。左邊要考慮到倒三角，右邊稍微有一點橫向的漸層，放大才看得到，中間的顏色連續。但是，
由於左邊三角的關係，上下將不再分割，toTop和toBottom都為0。遺憾得很，這個三角我相信微軟是無論如何也不能改變其高度的了。展開方式
SizingType為Tile，因為中間橫向顏色連續，可以使用平鋪方式。

下面來拆解進度條

捲軸分好幾部分組成，下面的LowerTrack和UpperTrack，中間用於拖動的ThumbButton，兩邊的UpButton和DownButton。

LowerTrack，底槽，有圓角，左右切，上下為0，平鋪方式填充。

UpperTrack，已播放進度，因為ThumbButton和UpButton、DownButton會對其遮擋，所以邊界的形狀無所謂圓行，這裡就用矩形，上下左右都為0，平鋪方式。

ThumbButton，表示當前播放的位置，這裡帕薔ormal和RollOver兩種狀態，填充方式TrueSize，ImageCount為2，ImageLayout為Vert。

UpButton＆DownButton，倒帶快進，有可用和不可用兩種狀態，其實還有RollOver的狀態沒畫，屬性與上同。

Gripper是用於拖動改變視窗尺寸的，比較簡單，這裡略過。

 

把這些都去掉的WMP是啥樣子呢

好了，最後一刀子

只剩下最後的殼了。發現沒有，非常的簡單，可以當作平鋪方式填充。