网页设计与重构那些事儿.ppt

除了第一个逻辑点首字母小写外，其余逻辑点首字母都大写，见示例。 * 网页里常用的模块名称： * 直接看图和对应的中英文名称： 整个页面（wrap/wrapper） * 头部（header） * 主导航（mainNav）,如果整个页面只有一个导航就用“导航（nav）” * 页脚，或者叫版权（footer） * 面包屑（breadCrumb）,平常叫惯了面包屑，其实它的来历是有一个故事的，具体故事就不讲了，自己百度下吧。 * 搜索（search） * 登录（login） … 等等。 * 了解了图层命名，也许你的PSD图层已经几百个了，该对图层管理管理了。 * 1）什么是模块化 2）模块化调用、复用 3）效率和输出 * 模块化的定义，每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。在系统的结构中，模块是可组合、分解和更换的但愿。 貌似文字有点复杂，模块化是程序设计里面的词语，我们这里就可以简化下：按照视觉功能块组建一个PSD图层分组，类似前面说的头部（header）、登录（login）、搜索（search）等。 * 模块化组建后，可以在各个页面作为公共组件来使用，就不必要把相同的图层再设计组合一遍了，直接把这个分组拖进来就是了。 模块化在门户官网的项目设计中尤为重要，特别显效率，后面还有讲到。 * 虽然我们对图层命名了，自然会耽误一些设计时间，可能有人觉得效率变低了嘛？！ 我自己觉得一方面这是一个设计师的职业习惯问题，另一方面这并不耽误你提升效率，当遇到大型门户网站设计时，你会发现这是多么的好用。 * 个人经验，当你开始关注你的PSD图层结构的时候，其实对图层面板上每个图层到底是什么内容并不关心，所以我比较喜欢这么做： 在图层选项那里把图层预览改为“无”，这样图层面板就清爽了，有的都是结构，一目了然。 * 回归正题：举几个梨子。大家对比看左右两边的内容及图层变化：基本规则是模块化命名、从上到下、从左到右。 * 之前做的案例都是如此。 * 前面说了智能对象在大型网站设计上会极大的提升效率，如果不信可以继续看： * 简单的说就是智能对象反复放大缩小时候不会失真出现锯齿和模糊变形，当然前提是放大的尺寸不要超过转换成智能对象之前的尺寸大小。 * 大型官网设计中很多模块是需要反复使用的，通常的做饭是有几个就改几个，不停的复制，拖放，不停的复制样式、粘贴样式。累不累啊你。。。 可以这样支招：在同一个页面如果有很多元素是一样的，可以把这个元素转换成智能对象，以后如果有改动在图层上双击这个智能对象进去编辑下保存就可以了，该页面的该类型的元素就都改过来了。如果相同的元素不是在一个页面，可以使用“替换内容”指令，见下图： * 公共模块使用智能对象，批量修改，批量替换，高效快捷。在智能对象所在图层右键，在弹出菜单中选择“替换内容”，将预先保存在你项目目录中的PSB文件替换到PSD中来；这里需要注意，你所存放的psb文件需要放在你的项目目录下，因为默认情况下双击智能对象时，打开的只是暂存盘里的psb文件，并不是你所在项目下的psb文件。 * 另外在做物料展示的时候智能对象的使用也可以很方便，不会破坏原有大图，在印刷品的设计也可以很方便。 * 比喻这个例子：需要把WSD的LOGO按照手提袋的透视关系调整尺寸角度，通常情况我们就是直接那一张图贴上去然后调啊调的，好不容易调整好了。结果换袋子了，是另一个方向的透视，苦逼的我们又得按照新袋子的透视来调整LOGO，累不累啊你。。。 * 其实上面那个LOGO已经是智能对象了，如上图，我们再双击下图层进去看看： * 这个就是原始LOGO文件了，完好无损，可人儿的。 * 还有一个地方用智能对象也很提升效率，做客户端的时候经常会需要输出N多的icon尺寸，这是一个快捷的办法，原理跟刚才一样。当然这样的缩放icon在精细度上没有纯手工的来得好。只供一个思路哈。 * 小结一下：智能对象在多页面的、多重复公共模块、VI物料包装展示的时候会显著提升效率。 * 另一个话题：与重构有关的，有时候设计师也不断的抱怨页面仔做出的页面没有设计稿上的好看，不是间距大了就是间距小了，不是字体小了就是字体大了，不是图片压缩的太厉害就是压根图片切少了，或者动画也不是我们想要的效果。。。。，越到这些我不能全怪他们，我们也有责任，毕竟他们不是设计，但是我个人的观点是重构需要一些PS技巧或设计理论，在设计师没有时间走查页面的时候也能输出比较高质量的页面。 * 市面上大大小小的浏览器几十种，常见的大致也有十来种，由于每个浏览器自身渲染页面的差异，并不是同一个页面在所有浏览器上看到的都一样，我大致用90%的还原度来衡量吧，也可能有些设计师要求重构100%还原，那我表示那位重构相当苦逼，保证页面跟设计稿90