 |
|
 |
您现在的位置： 精品下载 >> 数据库 >> 数据库原理 >> 数据库正文 |  用户登录  新用户注册 |
|
||||
| 软件也要时尚漂亮 软件包装周边制作一览 | ||||
| 作者：佚名 数据库来源：不详 点击数： 更新时间：2008-6-27 | ||||
金秋时节，大商场里四处都是疯狂减价的夏装和贴着“今秋时尚”的秋季新款，令人目不暇接。俗话说的好，“人凭衣服马凭鞍”，我们的软件也是如此。说到软件的美观和漂亮，真的是有说不完的话题，例子真有许多。从当初的“黯淡无光不见天日”的DOS时代到现在绚烂多彩的WindowsXP桌面时代，软件和我们一样随着操作系统和硬件器材的更新换代而更换“服饰”。想起当初被称为美轮美奂的软件游戏“仙剑奇侠传”，现在看起来都快像土包子了；就算近期的一些三维游戏也渐渐的失去了观众群。随着技术飞速地发展，软件开始讲究起了时尚。 一说起软件的漂亮和时尚，很多朋友就会联想起软件皮肤（SKIN）。五光十色的WinAMP和QQ真可谓软件时代的服装大师，其“服饰”之多真是令人乍舌，就像走在繁华大街上的时尚靓妹，没有一天穿得一样。而就算我们古朴端庄的操作系统老大哥Windows98现在也紧跟时代步伐摇身一变，成了引领软件“服装业”的大哥大——Windows XP 了，好多人从Window 2000 升级到XP的唯一原因就是——XP比2000漂亮！等到新一代的Windows——Vista推出，我敢打赌，肯定有一批人为了安装这个“有史以来”界面“最酷”的操作系统而升级自己的计算机。 人的美丽可以分为内在美和外在美两种：内在美是气质的体现，而外在美则是着装和打扮。二者相辅相成，互为影响。软件也是一样，没有好的代码和强大的功能当然是不行的，但是就如我们人一样，如果忽视着装和打扮也是不行的。就好像参加一个高级的舞会却穿了一身新款耐克运动服，真的令人觉得不可思议。或许对于人来讲这点着装规则还都是知道的，可是在软件制作上我们经常会犯这种有趣的错误却不觉得自己到底做错了什么。 我是一名软件工程师，也算是一名美工。可能我的特殊的身份让我在这个方面体会的更多。在我们很多程序员的眼里，软件的“穿衣打扮”根本就是微不足道的事情，更有甚者干脆就什么都不穿就登场了。有人说要“凭一身的好功夫闯天下”，这话没错，但是我们注意到，合适的打扮总会给你的社交和工作带来很多方便。比如，一身帅气的西服，会让你在谈判桌上更容易和别人亲和；篮球场上，一双酷炫的耐克鞋，会引来无数只眼睛盯着你，虽然你还没有打球，可能很多人都会觉得你打得不错。而一身量身打扮的软件，也会让人有更好的心情愿意接触和使用。 我想告诉你的是，其实美工并不是你想象那么的难，也并不是非要有多好的美术底蕴；你总不能在没有尝试的情况下就说自己不懂美术吧，呵呵。说句心里话吧，我觉得并不是我们真的不行，在大多数的情况下，往往在我们准备尝试之前我们就已经放弃了。好了，如果你有兴趣，如果你正在发愁你的软件为什么不那么受欢迎，如果你想知道一个好软件还需要什么，就跟我进行一次愉快的软件“时尚”之旅吧。 最简单却又最有效的打扮方法：软件美之简洁美——窗口布局 其实就像很多男孩子喜欢不化妆的女孩子一样，清纯简单也是一种美；但是有些人恰恰相反，我们总是喜欢在自己的脸上画蛇添足的涂来抹去。软件也一样，明明我们可以通过简单的方式让用户更喜欢这个窗口，却非要用分辨率300像素，宽度800像素，高度600像素的 巨幅BMP图片来去渲染。 或许你觉得对美术一窍不通，那么我也不难为你，我想第一个提供给你的是软件外观设计里最简单的又非常容易被人忽视的一种美术技巧——窗口布局。 窗口布局其实非常容易掌握，但是我们总是觉得这不算什么。我在CodeProject网站上曾经结识了一个国外的软件制作者，他的细心点拨使我在这个方面有了更多的认识，也了解到一个按钮或者菜单项的移动会给我们的软件带来多大的影响。过去的DOS时代，用户和程序的交互是在一个黑白的屏幕上你一言我一语的方式进行的，不需要什么布局，也根本没什么布局可言。现在，随着Windows系列操作系统的普及，用户和程序的交互基本上体现在窗口上了。用户为了完成操作，都要不停的先打开窗口填入信息，再关闭窗口完成操作。这个过程是非常值得我们合理安排的。我们知道，没有哪个用户希望要输入那么多的信息，才能完成一个操作，那样太麻烦了，因为我们都很懒。^_^ 如果开始意识到你在这个方面一点清晰的理解都没有，那么请你好好阅读这几套窗口布局简单方法，或许你会逐渐找到你要找的东西。 方法1：让用户觉得这个界面似层相识在进行讲解之前，首先，我们先看两个有名的软件：IE和FoxMail。 我想读者一定早就发现了，这几个软件由是完全不同的公司制作的，但是他们设计的菜单，却如出一辙。顺序都是“文件”、“编辑”、“查看”、“工具”、“窗口”，而最后一个更是跑不了，必然是“帮助”。也许我们早就习惯了。但是请你想一想，这是为什么？为什么这些个八杆子打不着的公司却都使用了这么一致的方式编辑菜单？ 其实，我们都是很懒的，用户往往都习惯使用Windows的菜单和工具栏方式了，也就是大家有了这种依赖性，在接触新的软件的时候，不自觉的就会和“我的电脑”窗口对比。如果你的软件的菜单布局正好和Windows的“我的电脑”的菜单布局一致，那么用户自然就省去了重新学习了解菜单布局的过程，而且很容易就能上手，用户自然非常满意。我经常会接到一些朋友的电话，他们经常发愁如何把如此多的软件功能井井有条地安排到菜单和工具栏上，有的朋友不想费这个脑筋，直接把各项功能地胡乱连接到菜单项和工具栏按钮上就完事了。 其实我们是有一个非常好的菜单和工具栏模板来遵循的，那当然就是 “我的电脑”的窗口布局。 这里有个菜单设计的方法，是那个老外给我讲的，我把他给大家分享：首先要把你的软件功能细分，在一张纸上罗列出这些功能；接着再在另外一张纸上写上“文件、编辑、查看、工具、窗口、帮助、其他”七个菜单的名字；然后把第一张纸上写的功能分类到这七个菜单中，同时把没有子菜单的菜单去掉。 假如经过第一次筛选之后没有“编辑”菜单，那么我们将在“文件，查看，工具，窗口，帮助，其他”再进行细分。这一次细分我们主要要分类“其他”菜单了，这是我们软件自己特色的菜单，分好之后再按照“文件，查看，特色菜单1..特色菜单n，工具，窗口，帮助”的顺序重新写好，这个时候我们就得到了和Windows我的电脑菜单布局相一致的菜单排列了。 也许你觉得这样的筛选并没有用了多少时间，可实际上你却给你的软件带来了一种亲和感，用户更会体会出这样分类的好处，最终会因为容易上手而愿意使用你的软件。 其实，这个方法没什么新鲜，我知道也许我不说你也会用。但是我想让你知道，当你制作完一个软件之后要去和那些地球人使用率最高的软件的窗口去对比对比。 这个步骤会是非常有意义的，却不用花很多时间。你的软件布局制作的越类似于它们，你的软件就越具备用户亲和力，这是最简单又最有效的。所以，工具栏也好，状态栏也好，你都要不厌其烦的去和它们对比，只要你在这一步做出了认真的努力，好的回报绝对在等着你。 方法2：减少一个窗口里出现大量的控件有时候，一个窗口里出现大量的控件真的在所难免，这很可能跟我们的设计有关。但是，有时设计再怎么优化也逃不了这个样子。这个时候我们可以用两种方法来解决问题，但总的前提是：界面控件确实很多，而让用户却觉得好像没有几个控件，或者让用户很容易的看到自己要找的控件。Windows开发上给我们提供了两个表面上看什么意义都没有，实际上却非常有视图价值的控件——多页窗控件和框架控件。 我知道有很多程序员朋友都不大喜欢用这两个控件，原因很简单：没有什么实际意义。确实，在编程方面我们根本都不用给这两个控件写什么代码（当然VC＋＋里多页窗编程得写些代码）。其实，我们忽视了很重要的问题。编程本身并不是针对数据变化而言的，程序也不是光数据可以完成的。正如MVC（模型－视图－控制器）结构提倡的，一个好的程序，不但要有好的代码，还要有好的视图去和用户交互。这是至关重要的。而且应该和代码编程同坐一把交椅。很可惜，它们在很多程序员的程序里得到的是非常不同的待遇。 什么时候应该用多页窗？有个最好的例子，那就是Windows系统里的文件属性页（如图4），你经常使用的。 我问你一个问题：你觉得这个属性页的控件多嘛？呵呵，反正我从来没有觉得这个窗口的控件多过。要是我告诉你这个小小的窗口有多达50多个控件的话，你是不是会吓一跳？！这么多的控件，我们却并没有因为觉得控件多而产生反感，其主要原因就是属性页在视觉上的改变使得用户觉得好像这个窗口控件并不是很多。而在操作的时候，由于很合理地分块，用户也能很快联想到文件属性的某一个方面会在哪个属性页上。如果你有兴趣的话，可以试试把属性页的全部控件放到一个窗口上，那会是一个什么样的壮丽景象！ 但是，我们要知道多页窗是有缺点的，当让用户录入信息的时候我们不宜使用。因为每换一次多页窗，用户都得额外的点击一次多页窗，这无形让用户的输入显得麻烦了。而且用户也不会把所有多页窗都浏览一遍的，所以在输入上我们应该使用“框架”控件。因为，控件多了，难免用户会找不到，框架可以在同一个窗口里实现分类，这样，用户就会根据框架的名字分类找控件，这样就使用户找的速度快了很多。我们打个比方：假如用户要输入50个文本框信息，现在他想在某一个文本框上修改，如果没有框架，那么他要最多找50 次，最少1 次，平均是25 次。而如果有了5个分类框架，那么他肯定第一步是从这五个框架里找到符合的，最少1次，最多5次。下一步是在10（50÷5＝10 ）个控件里找到那个控件，最少1次，最多10次。这样，用户搜索的次数就在2-15次之间里，平均仅有8 次啊！ 请看图5，我曾经调查了我的用户，他们对这个窗口的输入是最满意的。所以我到现在一直记着，要注意合理的分割控件过多的输入型窗口。 综上所述，在有大量的控件的输入型窗体上，我们应该适当的使用框架控件；而有大量的控件的输出型窗体上，我们使用多页窗控件，真是再合适不过了！ 方法3：多使用Wizard（向导）！ 你使用VC＋＋编程嘛？如果你使用的话，你是不是觉得那个AppWizard使用起来非常地爽？你有没有想过，AppWizard的六个步骤的问题明明可以一口气让你选择好，却为什么要把它设计成六页？ Wizard可以说是属性页的变种，在VB编程里有专门的控件可以实现， 而在VC++里我们是使用CPropertyPage和CPropertySheet来实现。我发现，我们很多的国内共享软件作者十分不喜欢使用这个叫做Wizard的东西。确实，和把所有控件放在一个窗口里让用户输入比起来，编Wizard确实是麻烦死了。但奇怪的事情发生在VC++和大多数安装程序上，这些软件里Wizard简直四处都是。 我想我们在使用一个控件之前应该先弄清楚这个控件之所以存在的意义。Wizard其实和上面讲的两个控件一样，也没有什么代码意义可言。但是它却一直存在着！Wizard通过有步骤地一步一步收集用户输入信息可以使他觉得所要进行的可怕操作简单了许多，这是非常有意义的。我们编程序的目的不正是如此吗？那我们干吗不使用呢？难道一个窗口里放了数十个按钮和下拉菜单你愿意一口气输入嘛？我不会，我经常会觉得太复杂而放弃使用。所以我们应该多多的使用Wizard。 我曾经和朋友给一些公司制作过报表系统，我的朋友是一个非常有经验的家伙，你看他编的报表输出就是一个向导，怎么看都让人觉得舒服，简单。 我想，你的软件经常会有些功能要通过复杂的用户交互来实现。请你记住，遇到这种情况不要还硬着头皮在窗口里没头没脑地添控件，你应该用一张纸好好设计这个功能的向导过程！（尤其是报表软件，凭我的经验来讲，大部分都应该使用向导，除非你不在乎用户烦你的软件。但实际上很多公司和个人的开发仍然喜欢把一大堆控件放在一起让用户挑） 其他要说的东西： 我们在编配窗体布局的时候，还要知道窗体上的敏感区域。我们应该把直接和用户有关的功能放在那里，用户只要打开窗口第一眼看到的地方大都在红色区域，然后再依次去看菊黄色、粉黄色、浅粉色、蓝色、绿色。我们抓住这个原则至关重要。 窗口布局有非常多的东西值得我们再去讨论和注意，上面三个方法，也是一个引子，通过我的解释，希望你至少能够体会到窗体布局的重要性，并了解了一些简单的方法。 提个建议：每一次在你下载了别人的软件的时候，你都可以好好的欣赏欣赏，看看它的窗口怎么布置的。 为什么有的软件其貌不扬，却让你爱不释手？而为什么有的软件明明实现了功能，却很少有人使用？总之，随着你的注意，你的布局本领就会不断的提高，而当你渐渐的把这种本领使在了你的软件上，那么我相信你的软件一定会渐渐得到用户认可的，窗口布局就是这样的简 单却那么的有价值。 软件的时尚外衣：软件美之外观美——皮肤制作 就我所知，设计软件皮肤好像从来不是程序员擅长干的工作。不过我也调查过，很多程序员朋友对皮肤的制作还是满有兴趣的。在这个部分，我专门用我制作的一个软件皮肤为例，从头到尾的给你讲解一遍。其中包括皮肤的画法，皮肤的定制和皮肤的嵌入。如果你有兴 趣，那么就跟着我来做一个皮肤试试吧！ 工预善其事，必先利其器。我们先谈谈制作皮肤需要的工具吧。首先我使用的编程语言是VC＋＋，所以皮肤的嵌入软件，自然也选定是专门制作给VC＋＋的了。我使用的这个软件叫做SkinMagic，有很多朋友通过各种途径得到过这个软件。不过这个软件是个共享软件，而且每一个注册码对应一个软件皮肤，收费高达89美元（我曾经买过几个，吐血！），但是确实非常好使。其实就我所知，很多共享软件的作者都使用这个软件（而且也曾经跟我一样吐过血～）。用它作为皮肤的嵌入软件的原因当然是非常地容易制作啦。不过值得庆幸的是这个SkinMagic1.0以前的Beta版本是免费的，这样我们也是可以用的，你可以到http://www.mono cers.com/jon/SkinMagicSDK_beta.rar去下载。 有了这个工具之后我们还要面有Photoshop7（以下简称PS）来进行皮肤主体的勾画。 我还要说的是颜色搭配。在这个例子中，因为我很喜欢橙色，所以自然选择橙色作为主体颜色，那么什么颜色能和橙色放在一起比较漂亮？这是问题的关键，我很幸运，著名的NIKE公司的LOGO为我很好的解释了这个原理。 不难看出灰色，黑色，还有白色都是和橙色很好的搭配在一起，所以我们就选择这几个颜色作为皮肤的制作颜色！ 好了，开始实战！ 第一步，轮廓与着色 首先，打开你的PS，新建一个文件，宽度为495，高度为406，分辨率为72。然后点击图层菜单，新建图层背景。接着在工具栏里点击油漆桶工具，选择颜色为R=255,B=0,G=255。用油漆桶工具填充背景。我们这样做的目的是填充一个固定的背景色，你看过电影的特技拍摄吧，后面放了一幅大蓝布，然后演员在那里摆POSE，最后再用电脑合成。一个道理，我们也是这样，只不过我们放的是一块大粉布，哈哈。 下面，我们要绘制一个窗体。在工具栏里点住矩形工具，会看到出现一个下拉菜单，选择圆角矩形工具。在大粉布上画上这个圆角矩形。取名就叫默认的形状1。 再次使用圆角矩形工具，在刚才的矩形前画一个小一点的矩形，这次我们要拖动鼠标的同时按住减号，然后你会发现我们得到一个窗口外框子。 接着，我们点击图层窗口，右键选择“形状1”，点选“混和选项”，分别在“斜面和浮雕”，“颜色叠加”，和“描边”上打勾。其中“斜面和浮雕”的参数“大小”为21，“软化”为10。“颜色叠加”的颜色为：R=241, G=112,B=18；“描边”的颜色和刚才的一样，“大小”为1，于是，得到了我们要的窗口外框！ 接下来我们选择工具栏的矩形工具（这次不是圆角矩形了！）画一个长方形，这个长方形要比外框小，比内框大。并将新建的这个图层拖到咱们刚才的圆角矩形的下面，取名也就叫“形状2”。 还用上面提到的方法，打开“形状2”的“混和选项”，在“内阴影”和“颜色叠加”上打勾。其中“内阴影”的参数“距离”为16，“大小”为5，而“颜色叠加” 的颜色为R=102,G=102,B=102，你瞧我们的窗口做好了！ 好了，把它保存为Orange.psd，然后再转化成BMP格式，我们的窗口皮肤素材就已经做好了！嘿嘿。 第二步，制作SkinMagic格式皮肤！ 首先，按我刚才说的，到刚才那个网址链接去下载一个SkinMagic，然后解压到你的电脑里。我们使用的是一个叫做“SkinMagicBuilder”的工具软件。它在解压后的SkinMagic的SkinMagicBuilder目录下，是个可执行文件。 打开这个工具软件后，我们在Object 菜单里选择“Load Image”把刚才存的那个BMP文件装载进来。 下一步，我们要把这个窗口做活，所谓“做活”就是使这个皮肤能用于任何窗口。这个过程可能有点麻烦。还是点击Object 菜单，选择“Window”的“Frame Window”。在SkinMagic的右侧属性框，把Name改为“Dialog”。然后我们注意到右边的Act iveFrame下有九个属性，翻译成中文他们是“左上方，中上方，右上方，左边，中间，右边，左下方，中下方，右下方”。我们先点击“TopLeft”，在Image Files里选择我们的Orange.bmp。然后你看到，我们画的窗口已经在这个窗口里了。最后你在中间大窗口的左上方看到有一个可以拉动的红点，把它拉开，覆盖在我们的窗口图片的左上方。 接下来我们按照和刚才同样的方法，把其他八个部分都做好，具体的各个方面参数你可见下表所示。 填好之后，在Tools菜单里选择“Test”可以测试你制作的皮肤的效果。一个非常非常简单的窗口皮肤已经制作好了。我们把这个文件起名为orange.smf保存起来。 第三步，在VC＋＋中使用皮肤 首先我想声明，并不是非要有SkinMagic VC才能添加皮肤，本身VC就有皮肤的调用函数的，比如每一个控件都有一个相关消息映射叫做“DrawItem”，在这里可以对指定的控件装上皮肤。只不过这是非常麻烦的过程，我不推荐。但是如果没有更好的办法，那样也是可以的。比如当你只想给某个按钮加上个皮肤的时候，倒是可以考虑。其他情况下，我们最好采用第三方工具。 好了，言归正传。我们继续皮肤制作的最后一步，我们先在VC里按照MFC AppWizard建立一个基于Dialog的应用程序，取名为Sample。完全按照向导的默认值就可以了。 接着我们把刚才保存好的Orange.smf以资源的方式添加到项目中去，资源类型写：“SKIN”，资源名称为：“IDR_SKIN”，注意写的时候一定要加上双引号哦！ 然后我们再到那个SkinMagic包里拷贝些东西，他们分别是： 把这三个文件拷贝到你的Sample应用程序的路径下，然后再在VC的Project目录下选择“Add To Project” 菜单的“Files...”。把这三个文件添加到工程中。 下一步，我们打开Stdafx.h文件，在里面添加上一句： #include "SkinMagicLib.h" 接着，在CSampleApp 类里添加一个函数，取名为“InitSkin”。在函数里写入： void CSampleApp::InitSkin() { //加载皮肤 VERIFY(1==InitSkinMagicLib(AfxGetInstanceHandle(), "Sample", NULL,NULL ) ); VERIFY (1==LoadSkinFromResource ( AfxGetInstanceHandle() , "IDR_SKIN" ,"SKIN") ); VERIFY( 1 == SetDialogSkin( "Dialog" ) ); } 最后在CSampleApp类的InitInstance函数里添加上： InitSkin(); 按Ctrl+F5,你瞧，皮肤上上去了！哈哈， 厉害了你！并不是很难吧。 上面我们做的只不过是最简单最简单的上肤了。其实，仔细想想：按钮，菜单，文本框，标签，菜单，Combo等等一大堆的控件都需要上肤的。不过SkinMagic倒是都提供了，我们的做法也和上窗口皮肤大同小异，这里我就不再多说废话了。凭我的经验来讲，一般制作一个完整的皮肤，从PS描绘（有时还需要CorelDraw画）到最后皮肤放到窗口上大约需要3天吧，主要的问题就是要选好搭配的颜色。如果你说你一点美术灵感都没有，那我请你和我一样，找一个非常不错的广告图研究研究；如果你还说一点灵感也没有找到，那只能说明你实在懒得可以。^_^ 我知道，我们都懒得麻烦，所以我把我在这个例子中做的软件和皮肤都上传到了网上，你可以到：http:// www.monocers.com/jon/TestSkin.rar去下载这个例子的全部代码和图片。 结束语 也许你觉得，很多东西我并没有说的那么让你满意，但是我想如果你看完这篇文章就开始觉得要去好好的整理一下你的软件了，那么这就是一个好的开端。其实一个好的软件设计者也应同时是一个不算太差的美工；原因很简单，就算你不打算制作皮肤，你至少也得能够告诉人家你需要的风格同时又能看出来人家做的是不是很美观。我曾经给一个朋友做过皮肤，他总觉得我作的不好（这个我倒没什么），后来他干脆自己做了一个，结果过了两天，他又来找我了，因为他自己也不知道到底什么叫做好看，什么叫做不好看。 就像我们在不同的场合要注意不同的着装一样，我们的软件也需要穿“漂亮的衣服"，出门前也要“打扮”。我希望你能养成每一次下载了别人的软件都去欣赏欣赏它的外观的习惯。不管是外观也好，窗口布局也好，帮助文档也好，都去简单地欣赏一下，时间长了，你就会发现你渐渐地入门了，随着这种能力的提高，你就慢慢的掌握了如何给你的软件打扮了。我是在我的一个朋友的建议下写这篇文章的，因为他的软件在我们俩的包装后得到了成倍的下载数量，所以我也想把我这些仅有的经验跟你分享，希望你因为我的文章能够有所帮助，如果真的能给你带来些什么，我将非常荣幸。 Photoshop入门教程 Photoshop实例教程 Photoshop cs教程 滤镜 鼠绘 Photoshop照片处理 Photoshop视频教程 Photoshop作品展示 特效 抠图 （出处：网侠） |
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）