UI设计理论 - GUI原理3-皮肤Skin

本文链接：https://blog.csdn.net/ThomasLiu83/article/details/400697

本来讲皮肤是要放在最后的阶段，前面还有矢量字体、通道、滤镜等等。不过，大多数的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，因为中间横向颜色连续，可以使用平铺方式。