《度娘实在是太难了，看看这些设计总结吧》-1

做设计的这两年，虽然什么板块都会接触，但是主攻的只有一个，其他的都是次要。

有时会遇到一个新的领域，就会不知所措，网络上搜索也各有各的说法，强迫症一犯，完全不知道选哪个，

为了我自己，为了喜爱设计的小伙伴，我自己整理了一套，希望帮助我的同时也会帮助到你～

以下文章都是我平常所遇总结，有其他适合的内容会继续添加，这里仅供参考，非绝对～

A-VI平面设计规范

• 标准名片尺寸为：90mm*55mm，印刷需要2mm的出血误差，所以设计尺寸为94mm*59mm,

  最小文字不低于6pt，颜色模式CMYK，分辨率300，字体尺寸不要超过三种以上。

• 常见的品类的规格尺寸 (这里的尺寸仅供参考，不是绝对的）

 

B1-网页栅格布局

• 网页设计中，需要考虑电脑显示器分辨率尺寸，其次考虑浏览器实用情况下进行设计，需要在

  安全显示范围内进行设计，这样能保证几乎所有分辨率的电脑上都可以显示出内容。

  
  

• 其次，可以利用工具绘制网格，确定版面、水槽、列宽和列数。同时也可以增加横列。

  版面宽度=（列宽+水槽宽）*列数

  列数都是用2、4、6、12、24这样的偶数。

  水槽宽度可以设置为8、10、12、16、20、24这样的数值。

  
  

• 例如：一般1920x1080的网页中，版面宽度常用1180px、1190px、1200px(内容都应该放在1170px的区域范围内，两边各加15px才是1200px)、1400px。

  
  

• 小技巧：

  网页中常用100px栅格，也就是列宽与水槽的常见组合（90+10、80+20、70+30、85+15）px

  网页中图片推荐使用常用比例（21:9、16:10、16:9、7:5、4:3、1:1）

  栅格不是固定死的，可以自定义符合当前项目的栅格系统。

• Sketch：视图——画布——布局设置

  Ps：视图——新建参考线版面

B2-常见的网页布局

*以下布局仅为常见布局，具体做图可以灵活使用

• 左右布局/T型布局等：常用于工具型、后台等有较高效率的布局
  

• 上下布局：常用于官网、电商卖货

B3-设计如何了解前端

• Ant Design的设计组件，实现框架React、Angular

  https://ant.design/docs/spec/layout-cn

  
  

• Element的设计组件，实现框架Vue 2.0、 Angular

  http://element-cn.eleme.io/#/zh-CN/component/checkbox

  
  

• iView的设计组件，实现框架Vue

  https://www.iviewui.com/docs/guide/theme

  
  

• 飞冰的设计组件，实现框架React

  https://alibaba.github.io/ice/

  
  

• Layui的设计组件

  https://www.layui.com/demo/grid.html

  
  

• G2可视化图形组件

  https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

小贴士：中篇是ToB和ToC～