├── README.md
└── media
├── error.png
├── font-chinese.png
├── font.png
├── iconfont.png
├── loading.gif
├── logout.png
├── mark.png
├── mark2.png
├── maxthon.png
├── psd-layer-name-bad.jpg
├── psd-layer-name-good.jpg
├── status-loading.png
├── status-loadover.png
├── text-overflow-hidden-2.png
├── text-overflow-hidden.png
├── text-overflow-tip.png
├── text-overflow.png
├── width-980-scroll.png
└── width-980.png
/README.md:
--------------------------------------------------------------------------------
1 | # Web前端写给Web设计师的注意事项
2 |
3 | > Web 设计和 Web 前端都应该仔细阅读此文档，会减少因为设计不合理导致的返工。
4 |
5 | Web 设计因为要在浏览器中实现，有时还需要『动』起来，在设计时有一定的限制。
6 |
7 | **前端同行应该以此文档作为审核设计稿的依据，不应该拿到设计稿直接开发。**
8 |
9 | 有任何问题请 [参与讨论](https://github.com/nimojs/web-desgin-notes/issues/new) [讨论列表](https://github.com/nimojs/web-desgin-notes/issues)
10 |
11 | > 点击右上角的 **[Watch](https://github.com/nimojs/web-desgin-notes/subscription)** 订阅本文档更新，点击 Star 收藏本书
12 |
13 | ---
14 |
15 |
16 |
17 | **索引**
18 |
19 | [资源](#hash_collect)
20 |
21 | 1. [页面尺寸](#hash_size)
22 | 1. [最小宽度](#hash_size_min-width)
23 | 2. [手机页面尺寸](#hash_phonesize)
24 | 3. [响应式设计](#hash_responsive)
25 | 4. [移动设备 Retina](#hash_retina)
26 | 2. [字体](#hash_font)
27 | 1. [大小](#hash_font-size)
28 | 2. [特殊字体](#hash_font-special)
29 | 3. [字体图标](#hash_font-icon)
30 | 3. [内容溢出](#hash_text-overflow)
31 | 1. [...](#hash_text-overflow-ddd)
32 | 2. [裁剪](#hash_text-overflow-clip)
33 | 3. [提示](#hash_text-overflow-tip)
34 | 4. [换行](#hash_text_newline)
35 | 4. [PSD](#hash_psd)
36 | 1. [图层命名](#hash_psd-layer-name)
37 | 2. [Retina](#hash_psd-retina)
38 | 3. [标注](#hash_psd-marker)
39 | 4. [字体](#hash_psd-font)
40 | 5. 栅格化
41 | 6. [状态](#hash_status)
42 | 1. [Loading](#hash_status-loading)
43 | 2. [hover](#hash_status-hover)
44 | 3. [error](#hash_status-error)
45 | 4. [分页](#hash_status-paging)
46 | 5. [用户超时登出](#hash_status-logout)
47 | 7. [UI组件化](#hash_ui)
48 | 1. [图表](#hash_ui-charts)
49 | 8. [typo 内容排版样式](#hash_typo)
50 | 1. [富文本编辑](#hash_typo-rich-text-editor)
51 | 2. [markdown](#hash_typo-markdown))
52 | 9. [技术团队审核设计稿](#hash_everyone_checkout)
53 |
54 | ---
55 |
56 | Top
57 |
58 |
59 | ## 页面尺寸
60 |
61 | 网页尺寸需要考虑浏览者的屏幕分辨率
62 |
63 | Top
64 |
65 | ### 最小宽度
66 | 
67 |
68 | Github 页面最小宽度是 980px，当窗口大小小于 980px 时候会出现滚动条。
69 |
70 | 
71 |
72 | 网页最小宽度是根据浏览者的电脑分辨率来定。
73 |
74 | 例如浏览者的分辨率是 1280x800
75 | 则宽度不可大于 *1240* `1280 - 40 = 1240`，因为网页可能会出现滚动条或一些工具栏。所以需要减去 40 像素。
76 |
77 | > 下图中浏览器左侧有工具栏，右侧存在滚动条
78 |
79 | 
80 |
81 | Top
82 |
83 | ### 手机页面尺寸
84 |
85 | 设计只需要按照 640 或 750 设计即可，前端会利用[rem](https://github.com/jieyou/rem_layout) 让设计稿占满屏幕
86 |
87 | Top
88 |
89 | ### 响应式设计
90 |
91 | 响应式设计规范可参考 [https://github.com/ColdXu/grid-design](https://github.com/ColdXu/grid-design)
92 |
93 | Top
94 |
95 | ### 移动设备 Retina
96 |
97 | 手持设备的设计稿基准尺寸为 375px，普通屏显示正常，但在 Retina 屏幕下会出现图片模糊问题。
98 |
99 | 对于 Retina 屏幕，为了达到高清效果，视觉稿的画布大小会是基准的2倍，最终设计稿尺寸是750px
100 |
101 | > iphone6 DPI 是 375 所以此处 设计稿基准尺寸是 375px,如果要兼容 iphone4/4s/5 则基准是 320（设计稿尺寸是 640px）
102 |
103 | Top
104 |
105 | ## 字体
106 |
107 | 在网页中使用字体需要注意一些地方
108 |
109 | Top
110 |
111 | ### 大小
112 | 内容性质字体大小不得小于 12px ，因为某些浏览器默认文字大小只能是 12px。网页中显示小于 12px 的文字会变形。
113 |
114 | Top
115 |
116 | ### 特殊字体
117 |
118 | > 这里的特殊字体指的是普通用户电脑中不存在的字体 
119 |
120 | 由于程序输出的文字不建议使用中文特殊字体，因为想要在用户电脑中使用中文特殊字体需要在浏览器中加载字体文件。而中文字体文件体积至少 1MB 以上
121 |
122 | 推荐一个中文特殊字体生成平台，可以在不使用图片的情况下使用固定的少量文字。[WebFont](http://iconfont.cn/webfont/#!/webfont/index) | [浏览器使用示例](http://nimojs.github.io/web-design-notes/webfont.html)
123 |
124 | 若使用英文特殊字体，请将字体文件同 PSD 一并交付给前端。
125 |
126 | Top
127 |
128 | ### 字体图标
129 | 
130 | 图标是网页中非常常见的元素，以前Web前端在实现时是通过图片实现。有如下缺点：
131 |
132 | 1. Retina 屏下因为图片分辨率太低会导致图标模糊
133 | 2. 图标多一种颜色就需要多切一张图（图片太多会增加页面访问时间）
134 | 3. 图标多一种尺寸需要多切一张图
135 |
136 | **以上三个问题，用 iconfont 可以完美解决**
137 |
138 | 请点击 [示例](http://nimojs.github.io/web-design-notes/iconfont.html) 查看使用 iconfont 显示图标的效果。
139 |
140 | [ICONFONT平台功能介绍](http://iconfont.cn/help/platform.html)
141 |
142 | > 除了 iconfont.cn 还有很多类似的平台
143 |
144 | Top
145 |
146 | ## 内容溢出
147 |
148 | 某些文字由程序输出的文字长度是无法确认的，需要设计时考虑文字超出容器大小时候的溢出处理方式。
149 |
150 | Top
151 |
152 | ### ...
153 |
154 | > 当文字超过一定字数后会出现 `...`
155 | 
156 |
157 | Top
158 |
159 | ### 裁剪
160 |
161 | > 一行文字占 20px ，最多只显示2行，超过2行的文字不显示
162 | 
163 |
164 | > 一行文字占 20px ，最多只显示1行，超过1行的文字不显示
165 | 
166 |
167 | Top
168 |
169 | ### 提示
170 |
171 | > 当鼠标划入时出现完整内容信息
172 | 
173 |
174 | Top
175 |
176 |
177 | ## PSD
178 |
179 | Top
180 | ### 图层命名
181 | > 这一项不是必须的，但是想**成为优秀设计师**必须做到这一点
182 |
183 |
184 |
185 |
186 | |
187 | 结构清晰的命名
188 | |
189 |
190 | 糟糕的命名
191 | |
192 |
193 |
194 |
195 |
196 |
197 | 
198 | |
199 |
200 | 
201 | |
202 |
203 |
204 |
205 |
206 | > 用中文命名也可以
207 |
208 | 合理的命名会在设计复杂页面时能快速找到相关图层，Web前端同事在 PSD 中找到相关资源也更方便。
209 |
210 | Top
211 | ### Retina
212 | 欢迎提交 [issues](https://github.com/nimojs/web-design-notes/issues/new)或者 [New pull request](https://github.com/nimojs/web-design-notes/pulls)补充此章节
213 |
214 | Top
215 | ### 标注
216 |
217 | [](https://www.zhihu.com/question/27743708)
218 |
219 | 非常棒的设计稿会将具体尺寸都标注出来，包括元素的一些状态。[标注工具 Dorado](http://cdc.tencent.com/?p=3268)
220 | 并不是前端没有这个时间标注尺寸和颜色，而是当设计师对自己的设计稿进行标注后会有一个『检查』的过程。
221 |
222 | 例如：
223 | 
224 | 此处的标注是前端拿到设计稿后标注的。这里就会有个选择，箭头距边框距离是左41右43还是左右都42。
225 |
226 | 我估计设计的实际想法是左右都是42，因为要对称。但由于设计的时候出现几像素的偏差，导致前端测量时尺寸不对。
227 |
228 | 以上只是为了说明情况举的一个例子，实际开发过程中可能会遇到比这个例子更麻烦的问题。
229 |
230 | **如果设计同事对设计稿进行了标注工作，可以『检查』自己的设计稿**
231 |
232 | **资源**
233 | 1. [微型设计专用工具Dorado](http://cdc.tencent.com/?p=3268)
234 |
235 | Top
236 | ### 字体
237 |
238 | > 不是必须的
239 |
240 | 若设计稿使用了特殊字体，建议提供设计稿时提供相应的字体文件。
241 | 
242 |
243 | ## 栅格化
244 |
245 |
246 |
247 | ## 状态
248 |
249 | > 状态这一部分应该是给新手产品经理看的，但没有产品经理时设计应该注意状态的设计。
250 |
251 | 网页并不是一张禁止的图片，它的内容会变化，这种变化对应不同的状态。设计时需要考虑到这些状态，成熟的团队产品原型中会说明对应的状态，没有原型的情况下，设计需要考虑好状态。
252 |
253 |
254 |
255 | ### loading
256 | 有些内容并不是页面打开就加在完成的，而是有一个 loading 的过程。
257 |
258 |
259 |
260 |
261 | |
262 | 鼠标划入开始加载
263 | |
264 |
265 | 加载完成
266 | |
267 |
268 |
269 |
270 |
271 |
272 | 
273 | |
274 |
275 | 
276 | |
277 |
278 |
279 |
280 |
281 | 需要 loading 是因为如果页面打开就提供所有的数据，页面的打开速度会很慢。而且这些数据不是必要数据，当用户鼠标划入的时候才需要显示，这样就可以当鼠标划入时浏览器向服务器请求数据后显示，请求的过程需要出现 loading 提示用户。
282 |
283 |
284 |
285 | ### hover
286 |
287 | Web 页面很多地方都是需要与用户交互的，最常见的就是按钮。设计时需要考虑到按钮的几个状态：
288 |
289 | 1. 默认（必须）
290 | 2. 鼠标划入（非必须）
291 | 3. 激活状态（非必须）
292 | 4. 禁用状态（非必须）
293 |
294 | 绝大部分按钮都需要设计鼠标划入状态。并在当前PSD或者设计说明PSD中展现出一个元素所有的状态
295 |
296 |
297 |
298 | ### error
299 |
300 | 错误状态是web页面中是很常见的，一般是由产品经理在提供原型时候考虑到哪些部分会出现错误状态。没有原型的情况下，设计同事应该与开发同事沟通，以确定哪些地方存在错误状态。并在设计稿中体现出错误状态。
301 | 
302 |
303 | 如果遗漏了错误状态的设计，并且前端审核设计稿时候也遗漏了错误状态的审核，那么会在后端同事拿到前端交付的代码时候让设计和前端返工添加错误状态，有可能就会因为返工而导致项目延期
304 |
305 | **数据为空也是一种状态，也需要在设计时就考虑到**
306 |
307 |
308 |
309 |
310 | ### 分页
311 |
312 | 设计页面时需要考虑内容是否存在多页情况，若存在多页则需设计出分页样式。常见于列表。
313 | 
314 |
315 |
316 |
317 |
318 | ### 用户超时登出
319 |
320 | > 只有在页面停留时间长且单页操作交互频繁的业务场景下才需要考虑这一点，例如在线协同办公系统 [teambition](https://www.teambition.com/)
321 |
322 | 用户打开A页面和B页面，在A中用户点击`退出登录`，用户状态变为`未登录`。或后端 [session](http://baike.baidu.com/link?url=r6TK_IE6WOaxtxG1FvtUp1Uvm7GT26sBmXdCaRDCzBdXWDX29aF2CqYN2gXN7rNtTvT55ck4nUfda2m7stN98q) 过期导致当前设备变为`未登录`状态时，用户继续操作需要登录的页面功能时会应该出现提示：
323 | 
324 | 或者提示当前用户未登录，请重新登录。
325 |
326 |
327 |
328 | ## UI组件化
329 |
330 | 设计一套符合当前项目的UI风格并在界面中复用，能提高界面的统一性和提高开发效率。国内做的好并开源的一些产品
331 |
332 | 1. [蚂蚁金服 Ant](http://ant.design/) **强烈推荐**
333 | 2. [百度产品线 GMU](http://gmu.baidu.com/)
334 | 3. [百姓网 CMUI](http://cmui.net/)
335 | 4. 此处省略
336 |
337 | ---
338 |
339 | > Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。
340 | >
341 | 以 [Ant Design](http://ant.design/spec/font) 为例，这是一套蚂蚁金服团队基于自己产品所形成的一套 UI，已完成了设计阶段和前端实现阶段。蚂蚁金服基于这套 UI可以快速搭建页面并能保障界面统一。
342 |
343 |
344 |
345 | ### 图表
346 |
347 | 若项目中需要使用图表，建议与前端沟通后再设计，图表实现非常复杂，建议使用一些成熟的开源库。[echarts](http://echarts.baidu.com/)
348 |
349 |
350 |
351 | ## 内容排版
352 |
353 | 如果项目设计到管理后台添加内容发布，则需要考虑内容排版。**这一点经常被所有开发人员遗漏，导致最终管理后台发布的内容样式简陋，反复调整返工**。
354 |
355 | 内容排版的设计建议应该有**前端给出技术建议**，引导设计同事和决定管理后台使用何种编辑器
356 |
357 | 一般管理后台的富文本编辑器分为两种，分别是
358 |
359 | 1. 富文本编辑器
360 | 2. markdown
361 |
362 |
363 |
364 | #### 富文本编辑器
365 |
366 | [富文本编辑器示例](http://ueditor.baidu.com/website/onlinedemo.html)
367 |
368 | > 前端可基于 [UEditor](http://ueditor.baidu.com/website/index.html) 实现富文本编辑器
369 |
370 | 不建议使用富文本编辑器，因为他的样式完全是有编辑器嵌入样式决定的。若采取此方案设计不需要考虑太多。但会有很多无法预知的问题。
371 |
372 |
373 |
374 | #### markdown
375 |
376 | > Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。
377 |
378 | [markdown](http://baike.baidu.com/link?url=_XU2Jnvo9dqFrpHBF3TLauihJ4ot9pP4HWWXPMCLJq7k42zv7VzepFHVnYY_Zq4mi7a7gemRJNet3--ZjV8gC_)
379 |
380 | 我并不建议直接让编辑人员使用 markdown 语法，而是按照 markdown 的限制，让编辑器只提供 HTML 所有的标签样式。
381 |
382 | ---
383 |
384 | [typo.css](http://typo.sofi.sh/)
385 |
386 | > 排版是一个麻烦的问题 # 附录一，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的 Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。typo.css 要做的就是解决中文排版的问题。
387 |
388 | markdown 编辑器实现可关注 [simditor打包版](https://github.com/nimojs/simditor-pack) 项目
389 |
390 |
391 |
392 | ## 技术团队审核设计稿
393 |
394 | 外包项目和自由产品的设计稿审核方大都是客户和产品经理。很多团队技术人员不进行设计稿审核工作，这是非常错误的做法。
395 |
396 | 技术团队审核设计稿可在开发初期发现问题，立即纠正。否则拿到设计稿闷头开始做会导致开发到最后一步发现设计稿有问题需要找到设计同事修改、前端同事重新开发。
397 |
398 | 这是写给所有 Web 技术团队的每一个人的，也写给新手产品经理。
399 |
400 | 1. 设计自审
401 | 2. 产品经理审核
402 | 3. 前端审核
403 | 4. 后端审核
404 |
405 | ---
406 |
407 | 这里的每一节都是此文档维护者在团队中采坑一步步发现总结的经验，每次拿到设计稿按照此文档过一遍会减少很多无意义的返工。
408 |
--------------------------------------------------------------------------------
/media/error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/error.png
--------------------------------------------------------------------------------
/media/font-chinese.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/font-chinese.png
--------------------------------------------------------------------------------
/media/font.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/font.png
--------------------------------------------------------------------------------
/media/iconfont.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/iconfont.png
--------------------------------------------------------------------------------
/media/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/loading.gif
--------------------------------------------------------------------------------
/media/logout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/logout.png
--------------------------------------------------------------------------------
/media/mark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/mark.png
--------------------------------------------------------------------------------
/media/mark2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/mark2.png
--------------------------------------------------------------------------------
/media/maxthon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/maxthon.png
--------------------------------------------------------------------------------
/media/psd-layer-name-bad.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/psd-layer-name-bad.jpg
--------------------------------------------------------------------------------
/media/psd-layer-name-good.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/psd-layer-name-good.jpg
--------------------------------------------------------------------------------
/media/status-loading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/status-loading.png
--------------------------------------------------------------------------------
/media/status-loadover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/status-loadover.png
--------------------------------------------------------------------------------
/media/text-overflow-hidden-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/text-overflow-hidden-2.png
--------------------------------------------------------------------------------
/media/text-overflow-hidden.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/text-overflow-hidden.png
--------------------------------------------------------------------------------
/media/text-overflow-tip.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/text-overflow-tip.png
--------------------------------------------------------------------------------
/media/text-overflow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/text-overflow.png
--------------------------------------------------------------------------------
/media/width-980-scroll.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/width-980-scroll.png
--------------------------------------------------------------------------------
/media/width-980.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nimoc/web-design-notes/33109a7ba51ec0efba9d4f27bc97e283be29ea00/media/width-980.png
--------------------------------------------------------------------------------