九乡新闻网隆回一中2016学生名单:更好的标注UI规格
来源：百度文库 编辑：九乡新闻网 时间：2024/04/27 15:01:23
当前端工程师拿到一个设计稿，如：
通常希望设计师在设计稿上标注必要的UI规格，设计师从视觉的角度，通常会这么标：
这样的标注其实对前端工程师帮助不大，还要再进一步翻译成更合理的（如下图）。所以为什么web设计师要通晓CSS，并不是让设计师写CSS，而是理解UI的显示原理，才能产出更合理的设计。如果设计师能直接这么标注，开发起来就太舒服了。
框框标出的是对象。关于html设计模式的话题，我会在7/17webrebuild的活动上说一说。
———————-补充———————
1. 第三张图出来，html结构也就出来了
2. 注意第三张图的框不是随意画的，是在行高1.5的前提下真实的边缘
3. 本例设计师在理解line-height，盒模型，collapsing margin，浮动的情况下，设计时留白才能合理
4. 设计师的设计思路和工程师的开发思路是一致的
5. 设计师和工程师考虑的都是：结构＋内容＋样式
如果能够保持同一思路，即按同一模式设计和开发，那么整体效率和质量都可以得到很大提升。
这一点整个团队达成一致后，才能开展模块化设计和开发。
———————-再次补充———————
看来引起不少争议，再进一步阐述我的观点：
1. 在设计稿上用css描述规格，就好比敏捷开发中用伪代码先把逻辑写出来一样
2. 设计师先有box的概念，把页面中的对象（元素）用框界定出来，再定义对象之间的留白关系
3. 用伪css描述更精确。标注的关键是那个值，3图和2图的值完全不同，而3图是根据显示原理标的更准确，比如3图中margin-left:62px, 左边小图的宽度有一定灵活变化的余地，不仅仅是图片距右边文字的间距是 14px。
2图会导致多种实现可能，经验丰富的会考虑结构的灵活，经验欠缺的会容易把结构定的很死。在html开发上应该追求的是一致性，质量平均的产出。
对于Millettang回复中说的，要知道前端工程师的价值不仅仅是页面的实现，那样只是设计师的助手而已。对于html/css开发来说，应该可以快速的套用模式，快速的把伪css转成产品级的css，产出质量平均，风格一致，高度可维护的html，然后把更多精力放在javascript开发，包括用css3增强等方面上。
第2张图是最不可取的，完全从平面设计的角度出发。Jsuper不要学这个。
“Design is about how it works, not just how it looks. ”