前端与视觉设计需要交流的几点问题(转载招招中枪中

在实际工作中，可能会由于设计师的经验不足，以及对前端技术的不了解，而产出一些对前端来说，无法实现，或者实现成本很高的视觉设计图。在这里罗列一下我所了解的各种视觉“不靠谱”的问题。
问题1：网页背景不能平铺，循环
问题描述：设计师设计了一个固定宽度的网页，比如960px，那么当显示器的显示区域大于960的时候，960之外的部分就需要有背景铺上去。如果设计的时候，内容部分的边界结束的太突然，比如下图，硬生生的裁掉，就会造成内容和背景无法很好的融合在一起，视觉上太过突兀，生硬。

可能造成的结果：视觉体验差，很有可能返工。

解决建议：在设计网页的时候，充分考虑到宽屏显示器下的显示效果，让内容部分和背景部分可以融为一体，背景可以是纯色，渐变色，也可以是一块可以循环平铺的图片。
图例：

图片.png

问题2：按照平面设计的思路设计网页
问题描述：网页设计不同于平面设计，平面设计更多体现在视觉上，网页设计还需要考虑用户体验和交互，在设计上需要体现出哪些是内容，哪些仅仅是修饰。如果按照平面设计的思路去设计，设计出的页面制作成为HTML的时候，需要切成大张大张的图片，这样就直接造成了网页体积过大，加载时间变长，图片的大小，在前端的优化过程中是重中之重。比如图例中的这张设计图，实现方式就只能是切成一张或者两张图片。
可能造成的结果：制作，优化难度增加。
解决建议：有些的确需要设计感很强的页面不容易避免这个问题，只能说尽量避免，视觉设计的逻辑尽量符合前端开发的逻辑。
图例：

图片.png

问题3：使用非系统字体
问题描述：系统字体，就是你的操作系统里自带的字体。非系统字体顾名思义，就是你另外下载安装的字体。这一类字体在网页上，用户是看不到的。如果想让用户看到效果，就必须额外的挂一个字体文件让用户去下载，增加了资源加载的时间。
可能造成的结果：中文字体文件体积较大，下载慢，用户体验差。
解决建议：设计师尽量不采用非系统字体，允许浏览器根据不同的操作系统选用不同字体。前端尽可能使用大多数操作系统都存在的字体（比如Arial）作为通用字体放在后面，将一些个别操作系统拥有的优雅字体（比如Helvetica ）放在前面。
（顺带安利一下组内同学作品 ： fontspider）
图例：

图片.png

问题4：组件不可复用
问题描述：在网页设计中，会有一些组件素重复出现在不同的页面，或者同一页面不同的位置，比如一些按钮，弹窗，图标等等。拿图例里面的搜索框举例子，我首页写完一个搜索框，到子页面遇到另一个搜索框，他俩的样式结构完全不一样，那么我又要重新写一个，等遇到第三个搜索框，我又要重写一个，不能复用，很大程度的增加了开发时间和成本。
可能造成的结果：每处组件，模块，都要单独去写，前端增加无意义的工作量。
解决建议：建议整个项目的按钮，弹窗，弹框，图标，列表，导航，分页，表单等组件和模块统一风格，让用户体验更好，同时也便于前端进行开发，
图例：

图片.png

问题5：容器大小不能自适应内容
问题描述：设计师设计一个按钮或者一个文字区域的时候，可能会考虑不到如果按钮里的文字变多了怎么办，文本区域里的文本变多了怎么办，设计出的元素不能扩展，延伸，大小是固定死的。当遇到内容超出容器的时候，就会很麻烦。
可能造成的结果：实际开发过程中实现困难或者无法实现，
解决建议：除了可以确认内容不会超出的元素外，不做图例中这种设计，保证元素可以根据内容的多少伸缩，而不影响视觉效果。
图例：

图片.png

问题6：视觉设计图不给标注
问题描述：设计师做完设计图之后，最好可以在psd里顺手或者利用插件写上标注（例如Size Marks 是用在Photoshop的一个自动标注尺寸脚本），不然前端需要自行去量宽度距离，取色，很大程度的增加了工作量。而且得出的结果未必和视觉所想实现的一样
可能造成的结果：增加前端工作量，有返工的风险。
解决建议：视觉设计图上标示出宽高，间距，颜色值，透明度，圆角弧度等等所有细节。方便前端理解视觉想要实现的效果。比如图例中那样。
图例：

图片.png

问题7：psd图层结构不清晰
问题描述：设计师在工作的时候没有整理图层的习惯，给出的PSD图层混乱。
可能造成的结果：增加开发成本，不必要的浪费开发时间。
解决建议：图层清晰分类，分文件夹。前端还原页面的时候要频繁的去隐藏不同的图层来观察效果或切割图片，所以一个好的图层结构会为开发节省很多的时间.
图例：（这是两种图层结构的对比）

图片.png

图片.png

问题8：交互不完整，视觉设计遗漏
问题描述：设计师没有充分考虑到所有的交互效果。
可能造成的结果：开发完成之后追加交互，不必要的延长开发周期，有几率造成不能按时上线。
解决建议：交互设计要考虑到每个按钮，链接的各种状态，每个组件的各种表现，考虑到页面没有数据的时候如何表现，数据过多的时候又如何表现等等。
无图例
以上问题都是平时在与视觉设计的合作中可能会遇到的，除此之外，还有一些细节，比如要杜绝口头修改某处的现象，必须给出过审的效果图。还有像webfont必须给出svg格式的icon，方便我们去转换字体格式.
尽量说服设计师和产品接受优雅降级，接受低版本的浏览器不支持圆角，不支持渐变等等css3属性。移动端方面也尽量不要设计过多的复杂交互，比如完全照抄原生效果，移动端的拖动排列等，实现起来成本过高，用户体验也差。这些通常在提需求的时候去说服产品和设计师，所以在有条件的情况下，前端成员一定要参与需求和设计稿的确认。