云南龙网

  1. 首页 > 云知道 > >

网页设计与重构那些事儿( 二 )

云知道建站


个人经验 ， 当你开始关注你的PSD图层结构的时候 ， 其实对图层面板上每个图层到底是什么内容并不关心 ， 所以我比较喜欢这么做：
在图层选项那里把图层预览改为“无” ， 这样图层面板就清爽了 ， 有的都是结构 ， 一目了然 。
回归正题：举几个例子 。大家对比看左右两边的内容及图层变化：基本规则是模块化命名、从上到下、从左到右 。
前面说了智能对象在大型网站设计上会极大的提升效率 ， 如果不信可以继续看：
简单的说就是智能对象反复放大缩小时候不会失真出现锯齿和模糊变形 ， 当然前提是放大的尺寸不要超过转换成智能对象之前的尺寸大小 。
大型官网设计中很多模块是需要反复使用的 ， 通常的做饭是有几个就改几个 ， 不停的复制 ， 拖放 ， 不停的复制样式、粘贴样式 。累不累啊你 。。。
可以这样支招：在同一个页面如果有很多元素是一样的 ， 可以把这个元素转换成智能对象 ， 以后如果有改动在图层上双击这个智能对象进去编辑下保存就可以了 ， 该页面的该类型的元素就都改过来了 。如果相同的元素不是在一个页面 ， 可以使用“替换内容”指令 ， 见下图：
公共模块使用智能对象 ， 批量修改 ， 批量替换 ， 高效快捷 。在智能对象所在图层右键 ， 在弹出菜单中选择“替换内容” ， 将预先保存在你项目目录中的PSB文件替换到PSD中来;这里需要注意 ， 你所存放的psb文件需要放在你的项目目录下 ， 因为默认情况下双击智能对象时 ， 打开的只是暂存盘里的psb文件 ， 并不是你所在项目下的psb文件 。
另外在做物料展示的时候智能对象的使用也可以很方便 ， 不会破坏原有大图 ， 在印刷品的设计也可以很方便 。
比喻这个例子：需要把WSD的LOGO按照手提袋的透视关系调整尺寸角度 ， 通常情况我们就是直接那一张图贴上去然后调啊调的 ， 好不容易调整好了 。结果换袋子了 ， 是另一个方向的透视 ， 苦逼的我们又得按照新袋子的透视来调整LOGO ， 累不累啊你 。。。
还有一个地方用智能对象也很提升效率 ， 做客户端的时候经常会需要输出N多的icon尺寸 ， 这是一个快捷的办法 ， 原理跟刚才一样 。当然这样的缩放icon在精细度上没有纯手工的来得好 。只供一个思路哈 。
小结一下：智能对象在多页面的、多重复公共模块、VI物料包装展示的时候会显著提升效率 。
另一个话题：与重构有关的 ， 有时候设计师也不断的抱怨页面仔做出的页面没有设计稿上的好看 ， 不是间距大了就是间距小了 ， 不是字体小了就是字体大了 ， 不是图片压缩的太厉害就是压根图片切少了 ， 或者动画也不是我们想要的效果 。。。。 ， 越到这些我不能全怪他们 ， 我们也有责任 ， 毕竟他们不是设计 ， 但是我个人的观点是重构需要一些PS技巧或设计理论 ， 在设计师没有时间走查页面的时候也能输出比较高质量的页面 。
市面上大大小小的浏览器几十种 ， 常见的大致也有十来种 ， 由于每个浏览器自身渲染页面的差异 ， 并不是同一个页面在所有浏览器上看到的都一样 ， 我大致用90%的还原度来衡量吧 ， 也可能有些设计师要求重构100%还原 ， 那我表示那位重构相当苦逼 ， 保证页面跟设计稿90%一致 ， 有不少工作需要设计师和重构共同参与的 ， 比喻设计师在时间允许的情况下做好标注 ， 哪个地方多少像素 ， 用什么颜色值 ， 高度是多少等标注在页面上 。

推荐阅读


上一篇：网站建设之建站流程及布局和内容

下一篇：提升关键词的有效方法