一、画板尺寸。

    1、参考设计尺寸。

    由于页面大小是和用户屏幕有关的，而用户屏幕的类型是难以统计的。因此我们的设计稿只能主要考虑主流用户的分辨率，而其它分辨率则是通过适当的方式解决。

    在制作网页时，建议采用1920*1080像素的主流分辨率。因此当我们设计网站时，网站的宽度是1920px，每个屏幕都有900px高。为何要900px？由于1080减去浏览器的头部和底部的高度，大约是900px。

    2、保护范围的宽度。

    使用1920px宽度作为设计标准，整个页面的安全范围是1200px。换言之，我们只要保证网页的实际内容展示面积控制在1200px这一范围，就可以保证在不同大小的浏览器访问时，整个页面可以完全地显示出来。

    二、视觉规范。

    1、文字规范。

    个人电脑系统默认的中文单词：微软雅黑(只是作为屏幕输出，不能用于banner，否则会侵权)。

    Mac系统的默认中文：Mac系列；英文可以使用Arial,DIN。

    主体字号大于12px就可以了，现在很多网站的字体都是14px开始的。选择的结果可以根据实际的效果，但尽量使用偶数。

    2、图像规格。

    在网站设计中，图片的宽度通常多是4:3、16:9、1:1等。图像尺寸没有固定的要求，但是对于整型和偶数要求较高，主要是考虑一些匹配问题。

    3、颜色规范。

    应遵守品牌VI规范体系，需要注意不同状态的颜色(默认、悬停、按下、成功反馈、警告反馈、错误反馈)，颜色不能过多，控制在3种以内，文字色彩要避免纯黑色。

    4、按钮规格。

    可以分成线形按钮，平面按钮，文本按钮，图标按钮，文字+图标按钮。一般情况下，按钮状态有默认、按下、悬停、禁用。按八点的按钮大小可以使用栅格原则。

    5、图示说明。

    图示取整数制作，完成后输出SVG格式，上载至阿里巴巴矢量图图库，方便前端调用。请注意不同形状图标视觉上的统一大小(椭圆、方、圆、长方、三角)，可以遵循八点网格原则。

    6、形式规格。

    在系统窗体设计时，注意输入框统一的样式，一般有默认、选择、输入、禁用、校验错误等，此外还有单选、多选、下拉等组件。可以遵守八点格子原则。

    7、弹窗规范。

    分模态弹窗和非模态弹窗，它们最大的区别是是否强制用户交互，是否中断了用户当前的操作流程。弹窗尺寸可以根据内容、边距设计，位置保持全居中。非模态弹窗，需要考虑自动消失的提示时间。可以遵守八点格子原则。

    8、控制的规格。

    多个控制程序需要设计者对其进行优化设计，保证控件的统一风格，便于后期迭代。实践中为节省开发时间，前端还会提供封装好的控件让我们来选择，我们要帮助前端规范好控件的样式。可以遵守八点格子原则。

    三、适应性和应答式网站。

    一些网站在使用电脑、手机、甚至是iPad浏览的时候，体验都非常棒。为了用户体验，这就需要对网站进行自适应或响应布局。应答式和适应性原理是相似的，都是通过代码来检测设备的屏幕宽度，根据设备的不同装入不同的css。

    1、适应性网站。

    适应性网站的设计稿是一致的，但设计稿需要考虑到屏幕变化的时间。例如，网站内容有5个空格和4个空格，那么当宽度缩小到900时需要改变，这就是自适应布局。例如站酷网，Dribbble等都采用了自适应布局。

    2、回复式网站。

    应答网站需要设计不同版本的设计稿，然后根据不同的设备提供不同的CSS样式。例如，决定你的设备宽度是750px，然后网站知道你用手机访问它，然后输入一份手机才有的样式；如果是电脑的宽度，输入电脑的CSS样式。对设计者而言，适应性要求考虑网站在不同设备宽度情况下的删除和排版；响应式要求至少设计三套设计稿，如电脑、平板、手机等。

    3、适配性规范。

    移动方面：适合手机页面的配置，我们一般以iPhone作为画布标准。因为iPhone的相对显示更清晰，而且要求更高。而用户的拥有量也很高。适配性上我们通常会选择750*1334px的尺寸，然后把网站导航改成手机APP常用的汉堡包+抽屉导航形式。与此同时网站上的按钮也需要变成我们在手机APP上看到的几乎全屏按钮，而且每个按钮都要大于88px，便于点击手指。就字体而言，我们要把网站的字体全部改成苹方字体，英文则需要用SF-UI代替，而且字号设置在24px以上。即把网站改成了类APP手机网页，这样才能保证手机用户体验良好。假如用户使用安卓手机，那么前端代码就会根据设计稿的设计适度增加图片与Android屏幕的间距。

    iPad:ipad尺寸为1024*768,2048*1536px，等等，不管这些变化基本上都和电脑屏幕差不多。因此用ipad浏览网页很舒服。所以，许多网站并没有专门针对iPad做适配，如果我们想让iPad用户使用得更爽，那么可以从文字尺寸(超过24px)、按钮尺寸(88px左右及以上)、互动形式(抽屉导航、导航不随屏幕滚动)开始。

    认识的总结

    1、电脑页面，可以按1920*1080px大小设计，每个屏幕安全高度900px，网页实际内容显示面积控制在1200px以内。采用宋体和微软雅黑字体，字体不小于12px。Banner会尽可能的满屏，但是图片的设计必须是如4:3或者16:9。

    2、手机端的网页，可以按照750*1334像素大小来设计。采用苹果字体，字体大于24px，英文字体采用SFUI。按键与点击区域需要大于88像素，方便手指点击。而且需要为头部预留微信或浏览器的导航区域。