设计师需要懂技术吗？

1，设计师需要懂技术吗？

答案是肯定的！在实际产出之前，设计师所做的一切都是「美美的幻想」，还有可能不怎么美，直到最后产出才是真实。

所谓的「懂」技术，不是「会」技术或「熟」技术。只是沾点水的程度。

举个例子： 不懂房子每个楼层的结构，不懂各种材料的尺寸、规格和特性、不熟悉地理环境的限制，又怎么去绘制房屋的设计图呢？

web开发不同于原生app的开发，要遵循浏览器的规则，也就是所谓的环境限制，既不能够不明限制而天马行空的想象，也不能因为限制而思维拘泥、无法创新。

2，浏览器的3要素

• JS：操作界面元素的语言，比如绑定按钮的点击事件等。

• HTML：界面元素。

• CSS：界面元素的样式，比如颜色、尺寸等。

这里我们具体谈谈与视觉设计关系最大的CSS。

CSS的常用属性

• 字体颜色

• 字体修饰：下划线、删除线、粗体、斜体

• 背景色

• 尺寸

• 定位

• 内边距

• 外边距

• 阴影

• 边框

• 动画：元素、耗时、延时、过程

设计注意点

1. 滚动条

   滚动条出现的位置与图层息息相关，只有正确的图层关系才能让滚动条出现在正确的位置。所以当图层中的内容多少未知时，就要考虑滚动条所在的图层位置。滚动条所在图层的内部元素的宽会因为滚动条的出现而受到影响。

2. 阴影

   阴影常常会使元素凸出，阴影多的界面会整体看起来会显得凹凸不平，同时阴影和动画都是浏览器渲染性能的杀手，尤其是移动端。所以要规范使用场景。

3. 切图

   尽量使用2x的小（指文件大小）图

4. 动画

   动画元素层里的元素不应该再有动画，会有渲染问题。

5. 元素垂直居中

   文字以外的元素尽量不要设计垂直居中的布局，而应该采用指定上边距的设计，因为在外部元素调整尺寸的时候，会影响垂直居中元素的大小和位置。

一致性

Sketch里每一个设计好的小组件，在css中其实就对应一个写好的样式文件。比如：设计好的每个按钮组件文字都是居中的，如果使用到了一个居中文字+图标的按钮，那么sketch里的按钮组件也许就不能被复用，同样代码里的css也无法被复用，就要单独写。其实大多数场景下，视觉设计稿与css文件都是一致的。sketch里需要单独处理的组件，在开发时，也会出现单独处理的情况。