编写书籍

　　教育部NIT-Pro项目网络安全教材

　　教育部NIT-Pro项目网络安全实验手册

　　NIT-Pro考试案例试题及客观题库

　　网络管理技术实践指南

　　Windows2003网络操作系统应用

　　参加的大型项目

　　美国百麦公司北京分公司的整个网络规划及实施；

　　北京广播电视大学一站式平台整合

　　北京广播电视大学VOD视频点播系统

　　北京市政府市民终身学习网

　　鞍山移动公司网络规划；

　　华彬大厦的网络规划及实施；

　　国家电力部邮件系统规划部署；

　　北京统计局报表打印系统设计研发；

　　劳动部全国民办职业机构评定系统设计研发；

　　劳动部全国知识竞赛评分系统设计研发；

　　考研在线网络安全方案设计及规划部署；

　　取得认证

　　微软认证系统工程师（MCSE）

　　微软认证数据库管理员（MCDBA）

　　微软认证讲师（MCT）

　　微软认证技术支持工程师（ESS）

　　网络安全分析师（CIWSA）

　　CompTIA 国际认证信息安全工程师（Security＋）

　　教育部NIT-Pro项目教师资格

今天将photoshop的画笔，正好讲了一下画笔面板的经典效果之一云雾效果的制作方法，顺便也作一个简单的东西15分钟作完。

更多文章详见：www.jobedu.com.cn

网页美术设计师就业班

培训授课时间：2个月（周一到周五全天上课） 毕业学校负责推荐就业

＋课程背景

网络以其自身信息传递的高效快捷、多样化、互动性等优势，深受人们的欢 迎。如今，作为Internet主要应用的WWW技术的发展更是日新月异。随着科技不断 地发展，企业也在不断的增加网络宣传，网络媒体上的宣传越来越多，于是，众多的商家和厂商也纷纷将眼光投向因特网，网站如雨后春笋般遍布了全球的各个角 落，企业、政府部门、个人纷纷在互联网上开创自己的天地，展示自我风采。加上政府不断推动网络科技产业，更是网络在中国崛起的一个很好的后盾，网络提供给 我们的是一个可以获取发布信息的双向互动的空间，这就给网页美术设计人员一个很好的机遇。最近，北京出台了一系列鼓励文化创意产业的政策，使“创意”成为 增强城市竞争力的重要因素。不过，我们在欣喜于利好政策的同时，也应看到，在创意产业的发展过程中，创新人才匮乏已成为最大的瓶颈。有关调查显示，目前仅 IT公司对创意人才的需求缺口已达到74％。在提高教育水平的同时，人才的聚集与培养成了企业对员工的基本要求。基于企业对IT人才的需求和人员素质要求 来设置本课程，注重于实战与实践项目，以此适应企业对人才的需求。

优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别，但他们可以找到自己喜欢的网页设计作品。通过对照一下几个优秀作品，我总结了一下作为卓越设计的几个细节差别。

一、合理使用渐变
渐变不要滥用，更不要把渐变弄的跟彩虹似的，否则你的网页作品看起来比较外行。总而言之，合理的使用渐变对于优秀网站设计是有帮助的。

渐变、散景结合使用
Newism网站色彩丰富，但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果，可以去Abduzeedo’s tutorial网站上面学习一下。

渐变、投影、纹理结合使用。
OnWired网站应用了这些设计技巧，显而易见，他的设计作品效果是很棒的！自始自终OnWired网站设计在应用渐变、投影、质感这方面是恰到好处 的。我也特别喜欢设计师设计的这些。

二、留白
留白一词往往容易被误解从字面解释 的空白。网页设计较 为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它 的。
“留 白”对于网页设计是很重要的，留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题，他们在做设计的时候将整个页面放的满满 的，没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题，如果内容放不下的话，他们可以借助浏览器的滚条来扩大页面的空间。

优秀的留白与巧妙的分割线
Snook网站布局方面设 计的是比较合理、舒服的。同时注意一下，网站里面的虚线将各个板块区分开了，这样我们在浏览网站的时候就一目了然了。

抽象图形
沙发采用抽象、美观、简约的方法。通过使用无背景或杂乱的图像，给浏览者的空间是流畅、舒服的。

三、网格布局
网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象，从好的设计到生活中的交通网。
960和蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局，它简单、重点 突出。你可以用任意对齐方式来安排你网站的元素，对齐在设计一个复杂的页面时，能使你的网站看起来比较精致、井然有序，并且你在网页布局里面添加任何模块内容时候都不用考虑其他的模块内容。

综合使用网格布局
Poccuo网站综合使用了网格布局，它采用3列和5列相结合的布局方式。给人以视觉吸引力和视觉空间。

博客采用列布局
我比较喜欢Web Design Ledger首页最上面的展现方式，他把最新的公告内容放大同时放到页面最顶部，其他的以3列的方式排列。

大量使用相等的列布局
Ecoki漂亮的网页布局显而易见采用的是4列、2行布局，同时幻灯片、缩略图、最新的审 查也是采用相同的方式。

四、改善字体应用
字体应用困扰着大多数的设计师。如果要想提高你的设计水平，字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色，同时还可以增加设计作品的 氛围。

用对比字体引起关注
SimpleBits网站在应用各种对比字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。

不要认为字体就像标志
这个网站看齐来就非常的漂亮、舒服，但你可以说出你的想法和感受来描述这个感觉。尤其在间距、字体选择等字体应用这方面做的挺完美的，我就被他的logo字体应用迷住了。

五、明确而有效的导航
良好的导航对于网页设计来说很重要，如果浏览者不能快速、便捷的找到它，他们就很有可能去别的网站了。这是我们所不愿意看到的，同时我知道 MyInkBlog进行了一些改进，并将在以后重新设计中进行彻底的改进。

博客导航下面显示分类导航
在大多数情况下，博客导航放在页面的同时将分类作为第二导航放在页面的边栏。Tutorial9做了一件了不起的事情，他把浏览者关心的photoshop资源以生动的方式展现出来了，并且在鼠标经过二级导航的时候有一个高亮效果。

切换不同的图标效果
图标切换效果在web2.0网页设计里面无论是否需要被大量、胡乱的应用，并且成为 一种趋势。并不是所有的都是不好的，web2.0里用的不好的原因是过度使用、业余使用造成的。在大多数情况下，适当的应用图标切换按钮是相当有效的。Carsonified网站在导航上就运用了单色、简洁的图标切换效果， 并且于他的网站整体感觉想吻合。

六、使用漂亮实用的页脚
一开始我们就将页脚作为次要的内容，在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来越重要了，千万别错过好的页脚完成你设计。

展示大量的信息和证书
这个页脚主要展示了网站介绍和版权等必要的信息。Brian Hoff网站更是添加了一些个性、有趣的内容在里面。通过3列布局方式展示了作者的工作和建议性的内容。

添加搜索功能
Elliot Jay Stock’s网站在底部添加了一个特大的搜索框…

来源: 菠菜博

        其实对于产品UI设计流程特别是对于大型的互联网公司的要求特别高，经过不断的挑“刺”后才得以面世，得到的设计稿件完全与最初版本不同，商业类的产品会让产品和商业气息相兼容，与UI设计师的最初思想完全不同，而UI设计师会将自己的风格带到产品中来，会给产品灌输一种“性格”，该产品特有的 “性格 ”。
一般公司只将把UI设计流程分为四个简单的阶段：分析、设计、配合、验证。

1、分析阶段
需求分析、用户场景模拟、竟品分析（聆听用户心声）。

        需求分析：对于一个产品来说，必然有对用户需求的分析内容，更多的是从MRD与PRD获得，或者从产品需求评审会议上得到需求分析的内容，当然可以直接与产品经理交流获得相关产品需求。如果说设计原则是所有设计的出发点的话，那么用户需求就是本次设计的出发点。
        用户场景模拟：好的设计建立在对用户深刻了解之上。因此用户使用场景分析就很重要，了解产品的现有交互以及用户使用产品习惯等，但是设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。
       竞品分析（聆听用户心声）：竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性，看到别 人的设计会有触类旁通的好处。当市场上存在竞品时，去听听用户的评论，哪怕是骂声都好，别沉迷于自己的设计中，让真正的用户说话。

输入物：MRD、PRD、市场需求文档、市场调查报告、竞品分析文档（或其一或全部）

输出物：设计初稿（或许只是几个简单的界面）

2、设计阶段
设计方法采用面向场景、面向事件驱动和面向对象的设计方法。面向场景是针对该产品使用场所等模拟，模拟用户在多种情况下产品使用的模拟。面向事件驱动则是 对产品响应与触发事件的设计，一个提示框，一个提交按钮……这类都是对事件驱动的设计。面向对象，产品面向的用户不同对于产品的设计要求不同，不同年龄层 的用户对于产品的要求不同，产品的用户定位将对UI设计师影响因素。

输入物：交互文档（高保真原型）

输出物：设计终稿（所有的设计稿）

3、配合
UI设计师交出产品设计图时，更多的配合开发人员、测试人员进行截图配合。配合开发人员对于PSD格式的图片切图操作，对于不同的开发人员的要求，切图方式也有不同，UI设计师需配合相关的开发人员进行最适合的切图配合。

输入物：设计终稿

输出物：设计修改稿（设计稿切片）

4、验证
产品出来后，UI设计师需对产品的效果进行验证，与当初设计产品时的想法是否一致，是否可用，用户是否接受，以及与需求是否一致。都需要UI设计师验证，UI设计师是将产品需求用图片展现给用户最直接的经手人，对于产品的理解会更加深刻。

输入物：产品

输出物：产品（面向用户最终版本）

        产品UI设计中夹杂着许多设计原则要求，统一公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。UI设计师应该分析公司产品的特点，制定符合产品生命周期的UI设计流程。每个产品的生命周期中，UI设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。

       建议：UI设计师有自己的风格，同样有自己的个性，建议在时间充裕时，UI设计师做二套设计稿，一套适合企业的，一套适合自己的，当老板对企业那套设计不满意时，将适合自己的一套展示给用户，或许会有不同的效果！

                                                                                                     来源：http://www.537520.com/

       关于网页UI,UE之类的论点文章网上太多了,更多大师将这些分析到极致,无论是开发领域还是设计领域,这些真正的大师所发表的文章都从不卖弄自己,更多的分析而无私的供献自己的独道见解,他们所写博文与其它政治、娱乐、商业等领域所发表的博文完全不同类型，我不是大师，但我很崇拜大师。

　 一个页面最醒目最吸引用户的应该是Banner了，尤其是Web2.0平台Banner显得更突出，Banner主要体心意旨，形象鲜明的展示所要表达 的内容。因为它醒目，所以放一个很糟蹋的Banner上去效果也当然“醒目”了。因此网页Banner设计在这里起到了至关重要的作用，特别是首页的 Banner,直接决定了用户的停留，下面让我们通过大量优秀的案例进入Banner，走进大师们的灵感世界。

1.大面积的Banner

http://www.tearoundapp.com/
这个Banner非常直接的采用了一个很大的iPhone图片，用户几乎不用思考的就知道网站的大概内容，而且加上与产品类似风格的功能按钮直接展示了部分功能，大的Banner最直接最醒目，处理也最需要谨慎，否则事关功倍。

其它类似Banner

2.文字与图片1/2比例

http://www.scrapblog.com/
这种Banner不是很大，虽然文字与图片占居空间相等，但加上大的Button让文字内容相对比较醒目，这种Banner的处理重点在于背景与和图片和文字的协调，比例要均匀。

其它类似Banner

3.人物与文字

http://www.showandtellsale.com/
采用人物加文字内容,让主题思想显得更鲜明活动,人物可以更直接更友好的告诉用户这里有什么?

其它类似Banner

4.创意矢量图形

http://ideafoundry.info/
纯鼠绘而且的矢量CG图形，独特创意和视觉冲击，精致的矢量风格与网站整体完美结合，体现出网站整体实力。

其它类似Banner

5.软件产品界面

http://bydreamtime.com/
大凡软件产品服务网站都将自己的产品界面直接融合在Banner中,加上文字与个性Button,可以让用户直接深入的了解产品基本功能和构造,甚至会激起用户想立即试用的欲望。

其它类似Banner

6.线条与光线

http://www.scarbantia-art.hu/
渐变的背景在融入线条元素，让Banner更加动感夺目，单色或多色的光线让线条和背景更加炫彩，使Banner充满迷幻进一步刺激用户的探索欲望。

其它类似Banner

7.纯文字内容的Banner

不需要华丽的背景,更不需要图片的点缀,只需要一段文字加上单调的背景色….

http://enviramedia.com/

其它类似Banner

      由于时间有限更多经典案例没来得及整理和未被发现,不同类型的网站搭配不同类型的Banner，Banner的主要功能到底是诱导用户，还是展示形象，还是刺激神经，这些观点都有它的支持者，所有Banner的核心共同点是让用户在短时间内将鼠标滑上去点击。做到这一点，设计人员还需要好好的琢磨。