Web 设计和 Web 前端都应该仔细阅读此文档，会减少因为设计不合理导致的返工。
Web 设计因为要在浏览器中实现，有时还需要『动』起来，在设计时有一定的限制。
前端同行应该以此文档作为审核设计稿的依据，不应该拿到设计稿直接开发。
点击右上角的 Watch 订阅本文档更新，点击 Star 收藏本书
索引
- 页面尺寸
- 字体
- 内容溢出
- PSD
- 分页
- 状态
- loading 加载中
- Hover 滑过
- error 加载出错
- empty 元素为空（常见于列表）
- 页面其他逻辑的状态（比如某些字段可选时候）
- UI组件化
- typo 内容排版样式
- 富文本编辑
- markdown
- 技术团队审核设计稿
网页尺寸需要考虑浏览者的屏幕分辨率
Github 页面最小宽度是 980px，当窗口大小小于 980px 时候会出现滚动条。
网页最小宽度是根据浏览者的电脑分辨率来定。
例如浏览者的分辨率是 1280x800
则最小宽度不可小于 1240 1280 - 40 = 1240，因为网页可能会出现滚动条或一些工具栏。所以需要减去 40 像素。
下图中浏览器左侧有工具栏，右侧存在滚动条
响应式设计规范可参考 https://github.com/ColdXu/grid-design
手持设备的设计稿基准尺寸为 375px，普通屏显示正常，但在 Retina 屏幕下会出现图片模糊问题。
对于 Retina 屏幕，为了达到高清效果，视觉稿的画布大小会是基准的2倍，最终设计稿尺寸是750px
iphone6 DPI 是 375 所以此处 设计稿基准尺寸是 375px,如果要兼容 iphone4/4s/5 则基准是 320（设计稿尺寸是 640px）
在网页中使用字体需要注意一些地方
内容性质字体大小不得小于 12px ，因为某些浏览器默认文字大小只能是 12px。网页中显示小于 12px 的文字会变形。
这里的特殊字体指的是普通用户电脑中不存在的字体
由于程序输出的文字不建议使用中文特殊字体，因为想要在用户电脑中使用中文特殊字体需要在浏览器中加载字体文件。而中文字体文件体积至少 1MB 以上
推荐一个中文特殊字体生成平台，可以在不使用图片的情况下使用固定的少量文字。WebFont | 浏览器使用示例
若使用英文特殊字体，请将字体文件同 PSD 一并交付给前端。
图标是网页中非常常见的元素，以前Web前端在实现时是通过图片实现。有如下缺点：
- Retina 屏下因为图片分辨率太低会导致图标模糊
- 图标多一种颜色就需要多切一张图（图片太多会增加页面访问时间）
- 图标多一种尺寸需要多切一张图
以上三个问题，用 iconfont 可以完美解决
请点击 示例 查看使用 iconfont 显示图标的效果。
除了 iconfont.cn 还有很多类似的平台
某些文字由程序输出的文字长度是无法确认的，需要设计时考虑文字超出容器大小时候的溢出处理方式。
当文字超过一定字数后会出现
...
一行文字占 20px ，最多只显示2行，超过2行的文字不显示
一行文字占 20px ，最多只显示1行，超过1行的文字不显示
当鼠标划入时出现完整内容信息
这一项不是必须的，但是想成为优秀设计师必须做到这一点
| 结构清晰的命名 | 糟糕的命名 |
|---|---|
|
|
用中文命名也可以
合理的命名会在设计复杂页面时能快速找到相关图层，Web前端同事在 PSD 中找到相关资源也更方便。
欢迎提交 issues或者 New pull request补充此章节