正文

一、画板尺寸

3、色彩规范

应该遵循品牌VI规范体系，需要注意不同状态的用色规范（默认、悬停、按下 、成功反馈、警示反馈、错误反馈），颜色不宜过多，控制在3种以内，文字色彩尽量避免纯黑色。

4、按钮规范

可分为线型按钮、面型按钮、文字按钮、图标按钮、文字+图标按钮。按钮的状态一般有默认、按下、悬停、禁用。按钮大小可遵循8点栅格原则。

5、图标规范

图标设计取整数制作，完成后输出SVG格式，上传到阿里巴巴矢量图标库，方便前端调用。注意不同形状图标视觉的大小统一（椭圆、方、圆、长方、三角），可遵循8点栅格原则。

6、表单规范

系统表单设计中，注意输入框样式统一，一般有默认、选中、输入、禁用、校验错误等，另外还有单选、多选、下拉等组件。可遵循8点栅格原则。

7、弹窗规范

分模态弹窗和非模态弹窗，他们最大的区别在于是否强制用户交互，是否打断用户当前操作流程。弹窗大小可根据显示的内容、边距来设计，位置保持全居中。非模态弹窗，需要考虑自动消失的提示时间。可遵循8点栅格原则。

8、控件规范

在系统中很多控件需要设计师来优化设计，保证控件的统一风格，也方便后期迭代。在实际工作中为了节省开发时间，前端也会提供封装好的控件让我们来选择，我们要协助前端规范好控件的样式。可遵循8点栅格原则。

三、自适应与响应式网站

我们看到有些网站使用电脑端或者手机端甚至 iPad 去浏览时体验都非常好。这就需要我们为了用户体验而进行网站的自适应或响应式布局了。响应式与自适应的原理是相似的，都是通过代码检测设备屏幕宽度，根据不同的设备加载不同的 css。

1、自适应网站

自适应网站的设计稿是一致的，但是设计稿需要考虑屏幕变小时的变化方式。比如一个网站的内容有5个区块和4个间距，那么如果宽度缩小成900时需要如何变化，这就是自适应布局。比如站酷网、Dribbble 等网站都采用了自适应布局。

2、响应式网站

响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的 CSS 样式。比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的 CSS 样式。对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。

3、适配的规范

手机方面：适配手机页面时，我们一般以 iPhone 为画布标准。原因是 iPhone 相对显示比较清晰，并且要求较高。而且用户占有量也很高。在适配时我们一般以750*1334px尺寸为主，然后将网站导航改变为手机 APP 常常使用的汉堡包+抽屉式导航的形式。同时网站里的按钮也需要变为手机 APP 中我们看到的左右几乎满屏的按钮，并且每个按钮要大于88px，方便手指的点击。字体方面，我们要把网站的字体全部改为苹方字体，英文则需要使用 SF-UI 代替，并且字号设置为24px以上。也就是将网站改变成一个类 APP 的手机网页，这样才可以保证手机用户体验良好。如果用户使用安卓手机，那么前端代码则会基于设计稿的设计适度加大图片与间距来适应安卓屏幕。

iPad：iPad的尺寸为1024*768、2048*1536px等，无论怎么变基本与电脑屏幕尺寸类似。所以在 iPad 上浏览网页是基本舒适的。因此，很多网站并没有专门为 iPad 做适配，如果我们希望 iPad 用户用的更爽，可以从文字大小（24px以上）、按钮大小（88px左右以及以上）、交互形式（抽屉式导航、导航不随屏幕滚动）等方式入手。

知识总结

1、电脑网站页面，可以按照1920*1080px尺寸设计，每屏安全高度900px，网页的实际内容展示区域控制在1200px这个范围内。字体使用宋体和微软雅黑，字号不小于12px。Banner 尽量满屏，但是图片需要按照4:3或16:9等比例来设计。

2、手机端网站页面，可以按照750*1334px尺寸设计。字体使用苹方，字号24px以上，英文字体使用SF UI。按钮和点击区域需要大于88px，方便手指点击。并且头部需要预留出微信或浏览器的导航区域。