• 向尚网站设计公司网页设计规范指南

  高端网站设计 | 2021/10/25 19:25

  当前位置： 首页 > 新闻动态
• 

一、画板尺寸

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等比例。具体图片大小没有固定要求，但整数和偶数为佳，主要是考虑到一些适配的问题。

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

4、按钮规范：可分为线型按钮、面型按钮、文字按钮、图标按钮、文字+图标按钮。按钮的状态一般有默认、按下、悬停、禁用。

5、图标规范：图标设计取整数制作，方便前端调用。注意不同形状图标视觉的大小统一(椭圆、方、圆、长方、三角)。

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的手机网页，这样才可以保证手机用户体验良好。如果用户使用安卓手机，那么前端代码则会基于设计稿的设计适度加大图片与间距来适应安卓屏幕。

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

电脑网站页面，可以按照1920*1080px尺寸设计，每屏安全高度900px，网页的实际内容展示区域控制在1200px这个范围内。字体使用宋体和微软雅黑，字号不小于12px。Banner尽量满屏，但是图片需要按照4:3或16:9等比例来设计。手机端网站页面，可以按照750*1334px尺寸设计。字体使用苹方，字号24px以上，英文字体使用SFUI。按钮和点击区域需要大于88px，方便手指点击。并且头部需要预留出微信或浏览器的导航区域。


向尚网站设计公司创立于中国深圳，是一家全球性的品牌设计服务公司。以大胆的创意和先进的理念，为企业打造国际化高端品牌。我们提供的品牌服务包括品牌策划、LOGO设计、品牌VI设计与升级、IP设计、包装设计、画册设计、网站设计、商业空间设计及导视系统设计等。我们从洞察力到创意再到设计，用高效智能、灵敏度和精确度为企业创作有灵性的品牌。

来源：深圳向尚品牌设计顾问