清新“苹果”的风格

数码时尚

realrocking

　　网页设计是平面设计中的一个崭新领域，今天我们就来看一下具有浓郁苹果电脑风格的国内著名设计网站http://www.a1981.com(奇怪，现在著名的Web设计师都喜欢做E文作品)制作上的精彩之处。

　　打开该站，首先映入眼帘的是简约的首页，一个抽象的图标出现于画面的中央(如图1)。

　　仔细观察该图标，我们就可以看出作者的设计意图了：网站本身域名的第一个字母为a，而图标大体形状正如一个小写的字母“a”，而a的圆形内又有竖着的一条线条，像是一个倒下的阿拉伯数字8。这个数字又正好是网站域名中所包含的。看来网站图标的学问还真是不少呢！再看看其视觉效果方面，典型的苹果电脑的那种半透明有机玻璃效果。图标背景不时地浮现出淡淡的不规则“点”的装饰。动画自然是采用当前最流行的Flash技术，通过PhotoShop插件来实现素材的特殊效果。

　　主页面(图2)全部采用Flash制作，作者在一开始加载网页的时候，就让主画面迅速从屏幕右侧飞入浏览者的视线，开门见山地亮出了网站动感的“牌”。色调上还是一如既往采用淡雅的灰色调，整体为左右结构，左侧是一个竖着的不规则形状导航栏。这个不规则物整体外观上趋向于直棱直角，为了避免过于生硬，在上方又设计了一个半圆的突起，里面包含了一个点缀性的“圆”。仔细看，其中还有细微的“点”在晃动，非常精致！可圈可点之处在这个主页中有很多，例如导航栏下方晃动的“机械爪”等。

　　从设计的角度来说，这种细微之处的“动态”是很重要的。在网页设计中很讲究“平衡”，平衡中又包括很多的含义。例如 “动”与“静”的平衡，如果网页中只有“静”，那无疑是一种“死水”的感觉，而有了几点“灵性的动”，则好似水中有了鱼儿，充满生气。

　　“简”与“繁”也是网页设计中“平衡”的一项重要课题。这个网页整体上是偏向于“简”的。但“繁”的补充仍然存在。如网页中下部背景渐变的“点阵”的装饰；左侧导航栏中“线条”背景的衬托；网页最左侧中国传统纹样的“点缀”。

　　该网页不同栏目板块之间的过渡也是可圈可点的。例如我们点击“About”按钮后，原本微微摆动的“机械爪”就好像触动了开关，从旁边的一个暗箱内掏出一个“球”，放置到右侧画面的中央，“球”很快消融于Loading相应的栏目内容中。这种过渡动画手段是Flash所擅长的，建议每一个闪客都要仔细研究揣摩。

　　前面我们提到了网页导航栏中的数个有机玻璃般的圆按钮，甚是好看，起到了锦上添花的作用。那么在Flash中我们如何来制作呢？

　　笔者就做以下实例讲解：

　　Setp1：打开FlashMX，新建一个项目，使用工具栏中的“椭圆”工具，在视图中拖出一个圆。

　　注意：拖动时要按住Shift键来得到标准的正圆。

　　Setp2：鼠标点中刚刚创建的“圆形”的边，删去边缘部分只留下实心部分。选中实心圆，点击工具栏中的“填充色”选项。施加最下面一行的第二个填充模式(图3)，调整填充的效果。

　　Setp3：新建一个图层，使用文本工具敲上一个小写字母“a”。这里我们是采用直接的现成字母来模拟a1981网站中的图标，如果你打算也打造一个独一无二的“a”，建议使用Flash中的钢笔工具的贝兹线功能慢慢绘制。

　　Setp4：新建一个图层，创建一个实心的黑色圆点，并且安排位置(图4)。

　　Setp5：再次新建3个图层，每个图层都创建一个圆形。特别需要注意的是，要将这几个圆形转化为“符号”。然后为它们设置半透明效果：选中已经转化为符号的一个圆，点击鼠标右键中的“属性”，随即Flash软件界面下方出现属性设置面板，将“Alpha”的数值从100%降低为36%。最终效果如图5所示。