文档介绍：网页页面设计应注意的细节
我们常以“整齐”,“易读”,“亲切”,“易于维护”,“复用性强”,对代码的好评还有一个更为时尚的词“优雅”,是不是听起来觉得很亲切呢?
页面是互联网产品的表现层面,不仅讲求外观,,经验积累是必不可少的,,介绍的即是在网页页面设计开发流程中的多方面的细节内容,希望对这些细节内容的探讨,可以帮助各位页面开发者做得更出色,以更优雅的姿态来书写页面.
从Photoshop开始
从UI设计稿到静态页面一般都称作“切图”.这个词很容易令人联想到Photoshop中的“切片工具”,但现在切片工具用得并不多,大部分在页面中需要用到的视觉元素,都需要拼合到一个或多个单独的图片中.
视觉元素的分离和拼合
快速更新的互联网产品需求使得UI设计师需要优先保证UI设计稿的视觉效果,,拿到手边的UI设计稿,可能存在图层缺少命名,分组混乱等问题.
如何快速找到需要分离的视觉元素所在的图层?这时候应该使用的是Photoshop的“自动选择”.另外要注意的是,某些边缘阴影及高光是由图层样式生成的,在选取这些部分时应选取旁边的实际绘图内容.
Photoshop的“移动工具“,在使用时勾选一个“自动选择”.
拼合是在一个新建立的psd源文件上进行,(快捷键Ctrl + ‘切换网格显示).整齐的拼图不仅方便多人编辑,而且css代码中的背景坐标定位会更加快捷(谁都喜欢有规律的数字).
在Photoshop的编辑→首选项中可以设置合适的网格尺寸.
为方便后续编辑,拼图源文件应适当保留原UI设计稿图层(如保留文本图层,不做图层合并,方便以后的文本更改),,推荐在底部增加2个图层:底色层和网格尺寸描述层.
底色层:Photoshop默认的表示透明区域的网格背景(和前面的尺寸标识的“网格”不同)中,,,对于部分颜色偏白的UI元素,,在输出图片时,底色层设置为不可见再输出.
网格尺寸描述层:空白图层,采用“20×20”这种格式的命名,,多人编辑时,可以方便别人很快的设置出适合编辑此拼图源文件的的网格尺寸.
拼图源文件一定要保存到开发目录中,可以在images目录中,单独建立命名为_psd的目录,然后相关的拼图源文件都保存在这个目录中.
对应的,在静态页中用作图片占位和示意的临时图片(如用户头像),可以保存在命名为_temp的目录中.
gif与png-8图片的杂边
为什么gif和png-8格式的图片存在杂边?这是因为,gif和png-8格式的图片使用的是索引颜色编码,而索引颜色中,只存在全透明索引颜色(用来绘制全透明的像素点,也即空白点),,一般的视觉元素的边缘都存在半透明的像素点以形成视觉