【转】一个前端对设计师的诉求

首先声明，这是一篇和谐帖。。。目的在于提高设计与制作的合作效率，帮助设计师了解制作的想法，提高团队战斗力。如其中有用词不当的，请设计师承让，其他制作也可将自己的心得回复出来。另外，也请制作的同学们反省自己的不足。

对于不确定性因素考虑周全问题：
例1：评论模块，显示评论的文字，显示多了怎么办，显示评论的条数，显示评论者的昵称长度问题等等。假设现在有现在有300×200的一个模块，你应该怎么设计评论内容呢？

例2：一个互动的操作是否需要登录，登录框要在页面显示还是在弹出层中，还是跳转？显示的样式是什么？登录成功后显示什么。这些都应该考虑一下。。。

例3：链接:hover的效果，按钮鼠标滑过的效果，这些是否需要，不设计出来将默认为不需要，建议，至少链接要有hover。。。如果您已经设计了hover状态的样式，请确保别人看了可以知道那个是正常样式，那个是hover样式【例如：在hover样式上面放个小手】
例3反例：曾经见过一个TAB模块有三个页签，搞了红、绿、灰三个颜色并且没有任何注释，苍天哪，我要不问需求方哪里还知道这是一个TAB页签啊，红绿灰三个颜色鬼知道是干什么用的

重用性的考虑：
模块装饰的通用性和统一性，例如一个模块的标题背景或者边框可以延伸使用到多个模块中【重用性越高，效率越高】

相同模块的大小统一、间距统一，极力推荐：相信科学，切莫完全依赖肉眼。。。请实用工具【重用性的分支】

相同可循环模块或者边框的颜色尽可能的统一

大型渐变背景请保持颜色的一致性【例如：做了纵向的线性渐变，可最终的效果左边开始和右边结束的颜色有差异，亲！这样的背景无法被循环，咱们还达不到韩国的网速，请尽可能使用可循环背景】

在使用“变亮、叠加、差值”等图层效果的时候请考虑一下是否会影响到页面其他地方的效果，上述背景左右不同很多都是因为这样的原因造成的，还有使用半透明蒙版、大面积羽化等等都需要注意是否影响其他地方

您在平铺背景的时候请保留一份单元图出来，前端的小朋友们也需要用

字体的使用问题：
WEB字体请尽量不要使用字间距设置，美术字随意

美术字的使用：您确定、一定以及肯定要启用美术字体么？模块标题或者普通地方使用了美术字体，如果将来调整文字需要找到你，让你调整，完了再重新将这个图片切好，然后发工单提交上线请求，上线完成后在进行CDN更新操作，之后用户才能看到新的图片，如果这样的维护成本在您或您公司的接受范围内那就请进开心大胆的用吧

标题做美化时请考虑到是否需要使用美术字体，做装饰时考虑下这个标题的文字是否会有长短的变化

文字颜色的选择尽可能选取WEB安全色[http://baike.baidu.com/view/3433514.htm]，在PS的拾色器中有WEB安全色的选项。

关于结构排版：
页面首屏排版考虑下主流显示器首屏有多高，我们应该做多高可以做到最快速加载和最好的用户体验，那个模块需要最先展示出来，是否需要给制作的同学标注【极端坏的情况：整个页面很长很长，并且只分了左中右三列，其中的小模块参差不齐，左侧要最先，左侧有N个需要JS初始化的模块，还要达到模块即加载即使用，这样JS会造成阻塞，最左侧加载就慢到极点，半天都看不到中间和右侧的内容】

模块宽度制定时可以先计算一下，尽可能的取整数
图片大小在设定时尽可能采取160*120、320*240、480*360[中华网标准]这三种规格，如果达不到设计需要也可以采取其他整数尺寸，亲！是整数哦。。。

模块之间的宽高或固定好的宽高，劳烦在做的时候认真点，不要玩出1-2像素的差别，这会令前端哭笑不得，尽可能的调整你们设计的习惯，使用工具弥补肉眼的差距。。。

图片毛刺问题：
ICON图标尽可能使用清晰一点的素材，千万不要拿一个大的，咔咔两下缩小后直接用，拜托您看看图标的毛边是不是你能接受的，如果你的设计不在乎这些细节，就当我没说。

遇到可能透明的GIF图片，请尽可能的将图片精确到像素，不要让边缘色块产生半透明，前端不是神，GIF搞不定半透明，PNG也逃避不了IE6的魔咒。

特殊的页面元素：
遇到select选择框，美化就标注需要美化，不美化就截取一个普通的样子放那儿，别整出来后需求方使用的浏览器不同，看到的效果不同跟你较劲儿。。。

影响页面性能的设计技巧：
遇到需要用JS初始化的模块请尽可能的向屏幕右侧或者页面下方排版，这样有助于提高页面展示速度的体验，必要的时候也需要作出loading状态

暂时先整这么多，其他的想到了陆续在更新。。。

【转】一个前端对设计师的诉求

相关博文

相关文章

关于前端开发-武方博