在做网页设计之前应该先搞明白什么是网页设计，这是个基础概念，是有别于普通打印包装设计与广告传媒设计的。 由于客观的限制条件1.显示器 2.浏览器 3.现代技术的存在所以你必须去迎合这个时代网页设计所具有的特殊情况。 而此篇文章，不是教你如何去做网页设计，而是从合作的角度对分析你在前端开发中的角色。 在充分理解需求之后，完成设计稿。在完成设计稿后，并不是设计师的任务终结（如何去与需求人员交涉自己去搞定，这里咱不谈）！下一步，你需要做的就是把你的设计移交到网页重构师（搭建HTML与CSS的）帮你去实现。 而在这之前，你还有几样工作去做： 详细标注你的设计稿 这是一件可以说“繁琐”的过程，因为你也许对这些已经了如指掌，但是并非所有人由其是你下一步合作的人都明白。所以耐心的标注你的细节是非常重要的。由其是字体、字号与颜色值等。 进行简单的描述 网页设计与广告媒体的设计的不同之处，就是在于其精细度。又因为在不同浏览器下字体解析会有差别，所以这个精细是有一个范围值的。 简单的计算 这里大家可能注意到了，图片框为什么是99px呢？ 99 = 90+3+4+2 width = image width + padding-left + padding-right + border 为什么不是一个双数呢？   我们来看，在整体宽度为960的情况下，想要产品得到最好的展示，而又不能太挤（同时要考虑文字） 这样算下来就是：960 = 52*7 + 99*6 +2 要注意这里的图片与图片之间的间距是双数，主要是为方便padding的拆分。 所以在满足整体宽度的同时也需要对其进行一番计算这样前端开发人员在制作时才能更省时间，更快速。同时也是最大的限度保证你的设计稿与制作出来的产品Pixel Perfect！ 在设计的时候需要最大限度的保证可行性，因为一但返工，这就不是一个人的事，所以在把自己应该做好的事情做完，在合作中减少摩擦。 技巧：善于应用切片或者辅助线等（包括置入比例标记与标尺）计算工具可以事半功倍！ 上图已经是分割的非常精细，包括column width与padding都已经划分完，平时设计时如果非特殊情况，最后这一步设计师应该是可以选择性的制作，重构师也不能太懒了吧，总得做点东西吧，哈哈。 这里推荐一款度量软件，可以快速的度量间距，虽然功能还是很有限，但是相信作者会不断的完善，点击查看。   虽然上面会耗费很多时间，但是你会发现效果也是很明显。就像写开发文档一样，得到好处不是你一个人的，而是大家的！ 相信你会找到合适你自己情况的合作方法。

前端开发由于其夸度比较大，涉及到由需求，设计到制作三个不同但是关联非常大的领域。所以一定的规范是肯定需要的。在这里我总结一下我这几年来的开发经验，希望与大家分享并共同提高。 这里所提到的只是涉及到与其他领域（设计与制作）密切相关的问题，绝对不是一篇教程教你怎么去做需求分析，请大家注意。 不知道想要什么 有时经常接到的命令就是：先做吧，做完看看能放啥放点啥。（不能描绘自己的思想） 这样的命令到设计师简直就是一头雾水，正所谓巧妇难为无米之炊，这样模棱两可的说法一点信息含量都没有是无从下手的。更不要说是做设计。 按XXX的样子做出来就行（崇洋媚外形） 这应用也是最常用的说法，对自己的需求不理解，不知道我们现在到底需要什么。设计师按XXX的样子做出来后，发现填入自己的数据根本不着调！为什么呢？就好像不知道自己的脚多大号，然后指着旁边帅哥的脚对着售货员说：就要他那对鞋。结果拿来自己不但大小不合适，连款式也不合适。这样的作品出来设计师做出来不爽，提需求的人不爽，拿出去别人更不爽。 我觉得用红色会很强眼（幻想形） 经常接到任务是没有文档或者是文档不全的，然后做出来后发现不是当初想要的，抓住设计师一顿狂改。 “这个再加一张图片，要大一点的，突出气势；然后加一张图片，突出场面宏大；再加些人… …”这样流水账一样的描述相信当场已经崩溃的N多次。 这是需求人员与设计师沟通的一个瓶颈，这个瓶颈主要体现在需求人员对文字把握能力太弱，不善于总结，更不能对整体进行概括。造成给设计师没有一个完整的思路与创意模式。更无法对这样的流水帐进行创作。 设计师需要什么 设计师往往需要的是更清晰的思路，他需要知道这是干什么的、用在哪里的（促销或说明页）、需要有哪些注意的（图片的版权与其相应表达的意思，这个意思不怕你多，但是一定要精炼主次分明）还有一点很重要，对文案的理解（文字排版需要）与字数的范围（宽与高） 让其他人理解你的思想是非常重要的，由其对于团队合作来说！ 自己的事要自己解决 不要忘记分析二字，刚才上面提出的情景都是只提出需求，而根本找不到分析在哪里。暂且不说什么数据分析、用户行为分析、用户统计调查与行业分析调查等。 一个最基础的就是建模，参加过数学建模的同学应该了解，对于一个问题首先需要找到切入点，然后不断的去探索实验，最后用一个简单的（或复杂的）模型来说明甚至是证明你们的结论。 那需求人员用什么“建模”呢？ 首先应该读一下《餐巾纸的背后》将使你的执行更有效率 然后去熟练的应用一下工具吧： Balsamiq Mockups – 非常不错的草图工具，这就是你的纸和笔！ Axure – 如果你追求精度，这就是你的利器！ 纸、笔 – 这是最简单也是最有效的工具，你肯定有！ 最后参考一下我的流程：前端组需要什么 原型设计流程也许能找到适合你的方法。 以上的方法有一个要注意的，就是不要把画出来的草图当作设计稿来做，这仅仅是草图即使你使用Axure做出来的高精度也是一个草图而以，这仅仅是让你和你的伙伴思路更清晰的工具，不是设计指导！ 最后还有一点需要注意，千万不要盲目的去追随交互设计的概念，交互设计是没有错的，但是要符合你的情况下才使用，盲目的跟随往往令你陷入困境甚至是失败。基础才是重要的：交互设计？文字编辑？

一直也在关注交互设计，现在国内很多人都大谈特谈，好像一个网站如果你没有交互设计师，你就不是一个好网站，你就不是一个成功的网站，甚至你就不是一个网站！ 同理如果你没有交互理论你就不是一个好的设计师，如果你没看过XXX交互设计的书籍你就不是一个好的设计师，如果你没听过XXX写的交互理论你就不是一个好的设计师，如果你没画过XXX图你就不是好的设计师！ 在N多年前，人们是怎么过来的？在没有交互设计之前都是原始社会吗？没有交互设计之前就没有好产品吗？令人崩溃的想法。 做为一名设计师很多事情只有经历过才知道，也只有经历过才懂得。不是因为一个按钮设计的成功你的产品就是成功的，也不是因为你的流程顺畅你的产品就是成功的，当被浮华的表面想象所迷惑时是不可能出现好的产品的。 Dieter Rams是最有代表性的工业设计师，有把设计当成道德追求的偏激取向，其10大设计准则也成为一个好的设计的标准。 Rams是一个信仰“少就是好”的人。在极简的外表下却蕴含着一个最基础的东西“实用”！而这些正是我们现在交互设计里面所缺少的精髓！ 大量的人员投入的同时却忽略了对文字编辑的加强，很多词用的跟本词不达意，这样再好的设计能做到指引用户吗？再优化的流程设计能吸引用户吗？ 一个时期被炒的过热的概念，但是在最顶端的人却没有时间了解基础，直接从巨人的肩膀上起来，还是养分不足。 百变不离其宗！一棵大树没有根基，而枝繁叶茂这棵树迟早都会死的，因为养分供给不足。

选择器的优化 如何提高Sizzle选择器的性能? 不同的选择器引擎解析是不同的 测试地址：http://alexsexton.com/selectors/ 我们看到Sizzle的方法与querySelectorAll的方法是一至的 关于querySelectorAll请到MDC查看 下面是我们平常写jQuery时需要注意的： 左轻右重 bad div.grid2col .column better .grid2col td.column 尽量让左边只放一个选择器tag或者Class 如果需要tag.class这种选择器，最好放在右边 ID优先 bad $(‘#item div.column’) better $(‘#item’).find(‘div.column’) 能简则简 bad div.grid2col .content .column better .grid2col .column DOM操作优化 尽量减少DOM操作 bad $.each(array, function(){    var li = ‘<li>’ + item + ‘</li>’;    $(‘#ballers’).append(li); }); better var frag = document.createDocumentFragment(); $.each(array, function(){    [...]

现在用客户端越来越少，大都是直接使用浏览器写发收邮件，但是客户端有个非常方便的功能就是C+V粘贴图片，这样写邮件的速度可以大大加快。 但是很可惜，我用Gmail不支持此功能，非常痛苦。而转用QQMail却支持良好，而且速度很快，这不得不说QQMail做的更符合我的需求，现在用QQMail的次数也越来越多。 Gmail 不能直接C+V，所有浏览器都试过了。 但是Gmail有很多第三方的存储软件比如说：http://picturepaste.com/ 这是一个桌面软件，原理就是上传到网上的空间，然后再连接回Gmail内，感觉还是麻烦许多。 QQMail Chrome 在Chrome下是不支持粘贴图片的，但是有个提示，挺不错。   Firefox Firefox是我最常用的浏览器，当粘贴图片时会有与IE一样的提示框，然后按步安装完成后，就可以粘贴图片了。 IE 一进入IE后立刻提示安装插件   当然如果不按的话当C+V时会出现提示框 使用方法 使用方法非常简单，应该说这个习惯就是为了QQ的用户而制定的，只要截图，然后在写信区域内粘贴图片，就会显示上传图片中 完成，然后按自己的需要排版   总结 QQMail这一功能应该说就是为了迎合QQ用户的使用习惯，但是这一功能的确是非常方便，可以极大的提高写邮件的速度。当然首先你要习惯截图。 以前真的很少用QQMail，但是现在发现QQMail的某些细节之处做的的确不错，由其是与QQ的结合程度，让写邮件就写发QQ消息一样简单方便。这也许就是QQMail的巨大优势吧。同时是不是也映射出QQ在潜移默化的改变用户使用互联网的习惯呢？

原文链接：http://piglili.blogbus.com/logs/77069181.html Facebook的产品设计经理 Adam Mosseri最近做了一个非常棒的演讲： Data informed, not data driven（数据启示，而非驱动） 演讲以Facebook如何利用数据指导产品设计为主线，还涉及到Facebook的产品设计团队架构、不少的设计案例，以及Facebook是如何做产品设计决策等。 本文将其内容以译介形式总结如下（意译非翻译）。 1. 小而精的产品设计团队 “ It’s important to understand that, at Facebook, we believe in particularly small teams. ” （有一点需要被清楚认识的是，在Facebook，我们特别认可小团队） Facebook的产品设计团队通常只有6、7人，因为他们认为这个人数最高效率，且团队拥有的产品决策权很高，架构扁平( flat decision-making structure )，有的决策可以直接到CEO那里待通过。 一个产品设计团队的结构通常是这样的： 一名设计师，负责交互、视觉，产品战略(product strategy)，甚至一点前端 一名用户研究员。两年前，Facebook只有为数较少的研究员，而且只负责大项目，如今，随着对于定性研究的重视逐步增加，基本上每个团队都配一名。 一至四个工程师。 一个项目经理(PM)，项目经理通常相当于团队中的迷你CEO，需要对产品负责。不仅要保证项目的按时完成、资源协调，还要保证产品质量。 产品 设计团队之上，会有一个经理负责统筹管理。演讲者本人就担任这一职位，他负责着九个产品设计团队。另外，有专门的20人数据团队，一半是工程师，一半是数据分析专家。 2. Facebook如何利用数据 “ Data helps us understand how users use the product, which [...]

现在来说，选卡已经是非常常见，但是对于这种常见的控件，最出明的选卡莫过于Amazon，当时选卡导航风靡一时。 在选卡的做法上却有小小差别。 有延时还是没有延时？ QQ弹窗 这个相信是大家最常见的，上面大量的应用了选卡，而且最近变成了又双层的。 当鼠标移上时会立即转换，没有延迟。但是这种做法经常使我们要小心翼翼。 但是事实上鼠标通用是乱飞的，在屏幕上没有一定的规律，而且速度很快，这样会造成经常不能准确点到自己想要的新闻，通常都会碰到选卡，而它则会瞬间切换。 个人还是喜欢以前能点击的时代。 MSN弹窗 MSN做法有少少差别，鼠标在选卡内停留不到1秒时切换（有少少延迟），这样做法可以提高精准度，使用用户“所见即所得”但是又不会造成太大的干扰。 延迟多久才好? MSN 新的MSN.com改版后，也是大量应用了选卡 同样选用延迟触发，延迟时间大约为1秒。 这种这大量选卡，1秒的时间还是非常合理，因为你不知道鼠标什么时候就飞到哪个选卡上。 Yahoo 我觉得Yahoo做选卡一直比较好，这个新闻栏的选卡同样有一定的延迟，鼠标快速掠过是不会快速切换，但是Yahoo在延迟时间上掌握的更精准（小于800ms），好像他知道你什么时候要切换！ 这选卡上是需要点击才触发的 上面选卡的点击触发，同时也是因为其侧栏拥有高触发频率（即时触发），这样避免了鼠标快速移动而造成不必要的触发事件，使整个页面跳动太大。 小结 选卡的应用，可以另页面展示更多的信息，扩大信息量。并且增加信息堆放的合理性。 然而大量的信息同样纯在着相互干扰，弄不好会使用户比较茫然。大量快速切换也会造成一定的心理负担。 一个网站不是独立的一个控件组成的，所以每个控件之间有着必然的联系，只有符合整体信息编排，使用户感友好就是好的选卡，延迟与否只是达到目的的一个效果。

在IE6与7上最经常遇到的就是z-index无效。 一般来讲，ie对父级的要求比较高，如果父级有position属性，但是没有给z-index属性，那默认都是0，所以不论子集里面有多高的z-index属性，都是没用的。 所以一般情况下，需要给包含z-index属性的父级一个z-index:1的属性，这样可以解决很多莫名其妙的问题。 这样虽然简单的层级问题可以解决，但是如上图，同级之间的层级问题又出现，相同层级的同辈元素z-index属性下面的比上面的高。 这种问题一般都出现在制作下拉菜单时比较常见。 解决方法与上面一样，需要给当前较高的z-index属性。 题外话：这种下拉菜单虽然比较好用，但是兼容性其实比较差，而且嵌套的层次比较多。 对于复杂的DOM模型在不同的浏览器下差异还是挺大的。所以尽量简化用新的结构可能更适合。

魔兽争霸是一款非常出色的游戏，自己已经玩了四五年，但是依然热衷。 魔兽争霸不仅仅视觉效果与其性能优越，其中还一些经典的交互设计，首先从选择（主要针对建筑）来说起。 人物优先级最高，不论是农民伯伯还是英雄（有关人物以后再谈）。 角度不同，选择不同（针对建筑） 左上到右下，优先选择左上建筑（选中祭坛） 左下到右上选择，优先左下（选中兵营）。 同理，优先选中起始象限里的建筑。 然而在同一象限里做两次选择，则会优先选中象限中其他建筑，中轴线左右偏移。 右上到左下第一次选择，选择地洞 右上到左下第二次选择，选择了大厅。 多选 起始点为第四象限，所以优先会选择地洞。然后向第二象限移动时四方选择框会选中第一象限内的另一个地洞，结束选择时会选择两个地洞。 同理，如下会选择两个BE（兽栏） 跟上面的选择规律一样，同一方向选择两次的话，第二次会选中祭坛。 这里有一点，正在建造的建筑与已经完成的建筑，虽然是同一个，但是在未完成时，是不会选中两个。 对单个建筑选择 当鼠标移到某个建筑范围内时，触发当前建筑的查看状态，这里暴雪的范围是某个建筑的边缘，不是发光的圈，而是建筑的边有颜色的实体！ 不触发 触发，注意鼠标位置。 选择框选择建筑，触发 扩大选框，建筑没有触发！ 选择其他建筑。 但是当选择框偏向左时，建筑又被触发。 这样的一个小细节，会让操作者更轻松，当然高手一般都是点击或者是快捷键。 但是这样的细节在会让在游戏中的你有更多的选择，百忙之中也有错手之时。 虽然这些细节平时我们可能并不在意，但是这对于初学者或者资深玩家来说，都是非常好的体验。 电脑会听从你的指令行事，它好像知道你要选择什么！

一般情况下经常发生设计师的稿件由于计算的不够精准，在实现时发生偏差较大。 由于网页设计与网站开发经常需要与人合作，不论是设计师还是策划还是开发人员他们之间的合作往往非常密切。 我们从设计稿开始入手。 没有绝对的自由 完美的精度1px 网页设计与杂志设计不同在于，网页有更多尺寸上的限制，这点跟报纸排版比较相通。 不能凭感觉就堆放与目测，需要精准到1像素的级别。 而设计师也需要对页面的布局相当的了解，商业网站分割区别一般很多，所以需要尺寸灵活把握，这样才能做出更精准的设计。 千万不要想着让其他人（制作人员）来想这些计算的方法，每个人都多做些事，合作起来才会更愉快。 Grid 而对于大网站来说，网站页面的数量也是非常庞大的，而制作的人相对较多，这样，要保证每位设计师出来的效果都是可以轻松被制作出来，需要一套标准，一套格（Grid）还是需要的。 字体 商业网站，由其是大型商城等网站的设计，由于对流量与加载速度的考虑，会少会图片所以其可用字体其实是非常少的，所以设计师的难度也就无形中的增加了，但是可以根据访问流量与用户所用浏览器系统等，用少量特殊字体，增强视觉效果，但是必须要有备选的方案，保证其他人也能正常的浏览。 更多信息 重要的信息指引是快速制作与开发的根基，所以网页设计也一样，设计师应该把一些基础的标准值都标记出来，比如说边框的颜色、边框的种类、应用的场景等进行标注，这样不仅为开发人员提供了良好的可读性，同时也可以大大提高开发效率。 先有数据，再有设计 现在一般认为先要出设计稿，然后再往里填充数据，其实是这真是大错特错。我们被模板时代给坑害了，更把模板的感念给误解与曲解，认为一切都可以模板化。 而事实是先要进行数据分析，然后再对数据进行可视化，往往连最基本的数据都没有就纸上谈兵，这只会走更多的冤枉路与耗费大家的精力与增加合作之间的摩擦。 只有仔细的对数据进行分析，才会发现，原来还有这么多“特殊”的存在。所以预测数据的精准度，将决定着设计稿（PSD）写实际搞（HTML）的偏差值。 虽然不能做到万无一失，但是知己知彼，百战不殆。 同样可以减少摩擦与挫败感，增强合作的愉悦。 没有简单的事情 当需求人员把东西拿过来，永远不要“小看”这些数据，这里需求人员也要注意。 永远不要说“这个很简单，这样，这样，然后这样就行了”… … 这样的后果就是不断的返工与无休止的争论，即使再小的Banner也有他特殊的地方。 先写这么多，想到再写~~