2021-12-29 13:59:36|已浏览：704次
一、画板尺寸
1、设计基准尺寸
因为网页尺寸与用户屏幕相关，而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。
做网站时建议按主流的分辨率1920*1080px来设计。所以我们通常设计网站时的网站宽度为1920px，每个屏幕的高度约为900px。为什么是900px呢？因为1080还要减去浏览器头部和底部高度，大约就是900px了。
2、安全区域宽度
以1920px宽度作为设计标准，在整个页面中，网页的安全区域则为1200px。换句话说，我们只要保证网页的实际内容展示区域控制在1200px这个范围内，就能保证整个页面在不同尺寸的浏览器访问时能够完整的显示出所有的内容。
二、视觉规范
1、文字规范
PC系统默认中文字：微软雅黑（仅仅作为屏幕输出，不能用在banner，否则会侵权）。
Mac系统默认中文：苹方系列；英文可以使用：Arial、DIN。
正文字体≥12px即可，目前很多网站字体已经14px起步。可根据实际效果进行选择，但尽量使用偶数。
2、图片规范
网站设计中的图片常用宽高多为4:3、16:9、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳，主要是考虑到一些适配的问题。
应该遵循品牌VI规范体系，需要注意不同状态的用色规范（默认、悬停、按下 、成功反馈、警示反馈、错误反馈），颜色不宜过多，控制在3种以内，文字色彩尽量避免纯黑色。
4、按钮规范
可分为线型按钮、面型按钮、文字按钮、图标按钮、文字+图标按钮。按钮的状态一般有默认、按下、悬停、禁用。按钮大小可遵循8点栅格原则。
5、图标规范
图标设计取整数制作，完成后输出SVG格式，上传到阿里巴巴矢量图标库，方便前端调用。注意不同形状图标视觉的大小统一（椭圆、方、圆、长方、三角），可遵循8点栅格原则。
6、表单规范
系统表单设计中，注意输入框样式统一，一般有默认、选中、输入、禁用、校验错误等，另外还有单选、多选、下拉等组件。可遵循8点栅格原则。
7、弹窗规范
分模态弹窗和非模态弹窗，他们最大的区别在于是否强制用户交互，是否打断用户当前操作流程。弹窗大小可根据显示的内容、边距来设计，位置保持全居中。非模态弹窗，需要考虑自动消失的提示时间。可遵循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左右以及以上）、交互形式（抽屉式导航、导航不随屏幕滚动）等方式入手。
本文由培训无忧网长沙牛耳教育课程顾问老师整理发布，希望能够对想参加长沙网页美工设计培训的学生有所帮助。更多课程信息可关注培训无忧网电脑IT培训或添加老师微信：15033336050
注：尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-10880.html 违者必究！部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们，了解更多相关资讯请关注网页制作频道查看更多，了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多：150 3333 6050
