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