028-6479 1541专注大中小型企业网站建设及网络运营
新闻资讯news

首页 > 资讯中心 > 行业资讯 >

网页设计规范

发布:未来网络   日期:2021-02-25 19:42   人气:
网页设计规范对于一个网站是非常至关重要的,特别是对于后期的网站运营有着举足轻重的关系,合理规范的网站设计方案会让你的网站更加懂客户的需求提高咨询率和转化率的,自然网站的权重和排名都会非常靠前的具体要求有哪些呢请看以下内容:
 

 一、网页尺寸

 
  制作网页时,我们选择的分辨率是72像素/英寸,使用的画布尺寸是1920px*1080px。
 
  但这并不意味着我们可以在整个画布上画画。
 
  网页主要有两种布局:左右布局和中心布局。布局不一致,使得可设计空间不同。
 
  1.左右布局,灵活性强,UI限制小;
 
  左侧横幅为导航栏,宽度不限,可根据实际情况进行调整;
 
  右边是内容区,是网站内容的显示区。
 
  2.布局居中,中间蓝色部分是网站内容显示的有效显示局部区域;
 
  换句话说,双方都是空白,没有实际用途,只为适应而存在;
 
  目前,主流电脑屏幕尺寸如下:
 
  一般网站内容显示区为996px;国内大部分网站都有1000像素的限制。因为1000像素以上适合在大屏幕上浏览,所以小屏幕会显得拥挤。所以1000像素以内的网站宽度可以保证大部分用户舒适的浏览网页。
 

  二、网页字体

 
  字体设计的一般原则是:易读性和易读性。
 
  网页的文字设计是系统默认字体:宋体、微软黑体、苹果黑体,英文推荐arial无衬线字体
 
  常用的字体大小如下:
 
  12px是应用于网页的最小字体,适用于非显著日期、版权和其他注释性内容。
 
  14px适合非突出的普通文字内容。
 
  16px、18px或20px适合突出标题内容。
 

  三、字体间距

 
  其实不需要太在意相邻两个字的间距。除特殊要求外,可以使用默认的数字间距。
 
  行距,建议用1.5-2倍字号作为参考;
 
  段落间距,建议参考2-2.5倍字号。
 
  即选择14px的字体时,行距为21-28px;段间距:28px—35px。
 
  第四,字体颜色
 
  正文颜色,建议使用公司品牌的VI颜色,可以改善公司网站和公司VI的关系,增加可识别性和记忆性。
 
  为了安全起见,选择易读的深灰色,推荐#333333和# 66666之间的颜色。
 
  对于辅助、说明性文本,您可以选择较浅的颜色,如#999999。
 
  如果你对颜色有很好的掌握,也可以选择一种不同于公司VI颜色的深色作为主要字体颜色或者辅助文字颜色。
 
  例如,如果公司的品牌颜色是蓝色,那么文本字体可以是蓝色和深色。
 
  经过这样的处理,文字会有一种环境色彩,网站整体基调会更加和谐。动词(verb的缩写)第一屏的内容
 
  设计网页时,要特别注意网页的第一屏内容。第一个屏幕模块的设计在构图和内容呈现上非常重要。
 
  除了任务栏、浏览器菜单栏、状态栏的高度,其余都是第一屏的高度。
 
  Window  XP第一屏平均高度580px,Window  7第一屏平均高度710px。
 
  考虑到Window  XP已经逐渐退出市场,我们在实际操作中以710px为基础。
 
  如下图所示,蓝色区域是我们设计时需要重点关注的第一个屏幕范围。
 
  另外,大概是图片大小。
 
  需要全屏显示的图片严格设计为1920px的宽度。
 
  但值得注意的是,图片内容的有效范围不能超过网页内容的有效范围,即控制在1200px以内。
 
  避免遇到小屏幕设备时,内容显示不完整导致信息丢失。
 
  不及物动词响应性布局设计
 
  响应式设计是指不同的设备、屏幕、分辨率、操作模式(鼠标、键盘、触摸),保证信息在不同环境下的一致性能,保证交互的可操作性。
 
  随着页面宽度的变化,信息呈现也发生了变化,这就是所谓的响应性设计。直到最后,手机屏幕上显示的图片信息变成了一列。
 
  响应性页面的设计和实现需要对相同内容进行不同宽度的布局设计。有两种方式:桌面优先(从桌面往下设计);移动优先(从移动端向上设计);
 
  无论是基于哪种设计模式,为了兼容所有器件,在布局响应时必然会对模块布局做一些改动(页面宽度变化时,尺寸范围是临界点的概念。所以在做响应式设计的时候,我们需要知道每个尺寸的宽度范围,然后才能制定出相应的、明确的临界点。设定临界点后,我们知道当屏幕的宽度范围位于哪个点时,如何显示我们的页面信息。)
 
  我们通过JS得到设备的屏幕宽度来改变网页的布局。这个过程可以称为布局响应屏幕。
 
  有几种常见的方法:
 
  1.布局不变,即页面中整体模块布局不变,主要包括:
 
  2.布局变化,即页面中整体模块布局的变化,主要包括:
 
  很多情况下,单一的布局响应无法达到理想的效果,需要多种组合组合。但原则上要尽量保持简洁轻巧,在同一个临界点(布局变化的临界点称为临界点)内保持统一的逻辑。否则,页面的实现过于复杂,也会影响整体体验和页面性能。

相关信息