CSS 与 设计

设计师需要懂技术吗?

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

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

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

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

浏览器的3要素

  • JS:操作界面元素的语言,比如绑定按钮的点击事件等。
  • HTML:界面元素。
  • CSS:界面元素的样式,比如颜色、尺寸等。

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

CSS的常用属性

  • 字体颜色
  • 字体修饰:下划线、删除线、粗体、斜体
  • 背景色
  • 尺寸
  • 定位
  • 内边距
  • 外边距
  • 阴影
  • 边框
  • 动画:元素、耗时、延时、过程

设计注意点

  1. 滚动条

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

  2. 阴影

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

  3. 切图

    尽量使用2x(指文件大小)图

  4. 动画

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

  5. 元素垂直居中

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

一致性

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