工程师如何做设计?

2017年2月15日

工程师要做成专业级的设计,技巧只有一句话:

你自己千万别设计

哈哈,而是要学会一种视觉语言,例如,我自己这几年一直鼓吹的 谷歌的材料 设计。这一集来说说,我自己设计一个网站都用到那些相关的技巧,工具和参考资源。

第一步,选色盘

考虑客户的品牌特质,是要严肃些,还是鲜艳些,或者有的客户直接就给出了他们的品牌色。可以用品牌色作为“主色”( primary color ),配合一个跟主色形成明显反差的”强调色“( accent color ),这样就可以形成一个色盘( color palette )了。

我比较常用 https://www.materialpalette.com/ 来帮助我定色盘。先点一个颜色作为主色,然后在点一个强调色,这样一个色盘就生成了 https://www.materialpalette.com/cyan/pink

色盘一旦生成,整个网站就要尊重这个色盘。所有的组件样式之中也要体现出这个色盘。一般就是大背景色用主色,按钮用强调色。

第二步,设计组件

其实就是靠 google 找了,搜

Materail Design xxx

就可以搜到参考图片。当然常用的一些找 Materail 设计的地方有:

实话就是,我自己从来不设计,就是找人家现成的去改。改的时候,很多细节注意要尽可能的遵照 materail.io 上给的参考。

第三步,固化项目设计

受到 github 公司的,http://primercss.io/ 这个项目的启发,针对一个(或者一类项目),我都会做一个“项目专用材料库”。例如 https://happypeter.github.io/material/

把所有开发者都可以共用的一些 CSS ,都总结到这里,包括:

  • 项目兼容性做到哪一步
  • 公用的项目重置,clearfix 这些都怎么写
  • 总结所有可以复用的组件到这个材料库
  • 每个组件中融入色盘思考,包括把厂商前缀等兼容性问题也都直接融入到代码中,摆脱对预处理工具的依赖,做到直接拷贝到代码中就能用

保守思考

以前项目中我会用 http://material-ui.com/ 或者 https://material.io/components/ ,发现这些都是对新手不太友好的,都需要开发者对一些 npm/webpack/react 的工具链有所了解。所以有些情况下还是宁拙毋巧,效率更高。