联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

web网页设计有什么规范要求,了解web网页设计

Time: 2021-10-22

      大家登陆网站,首先看到的就是web网页内容。对于网站设计人员来说,web网页设计是网站设计的重点和关键。web网页设计不是胡乱想象的,需要遵循一定的规范和要求。今天就让faceui为大家介绍web网页设计有什么规范要求,了解web网页设计。

  web网页设计有什么规范要求

  一、网页尺寸

  制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。但是并不代表我们可以在整个画布上作图。网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。

  1、左右布局,灵活性强, UI的限制小;左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整;右侧为内容版块范围,是网站内容的展示区域。

  2、居中布局,中间的蓝色部分为有效的显示局域,用于网站内容的展示;换句话说,两边均为留白,没有实际用途,只是为了适配而存在。

  一般网站内容显示的区域为996px;国内网站大部分还是以1000个像素为界限,因超过1000像素适合在大屏幕上浏览,小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分用户舒适的浏览网页。

web网页设计

  图片来源于网络

  二、网页字体

  字体设计的总原则是:可辨识性和易读性。网页的文字设计是系统默认的字体:宋体、微软黑体、苹果系统黑体,英文则建议使用arial无衬线字体。

  常用的字号大小有以下几种:

  12px是应用于网页的最小字体,适用于非突出性的日期,版权等注释性内容。

  14px 则适用于非突出性的普通正文内容。

  16px、18px或者20px 适用于突出性的标题内容。

  三、字体间距

  相邻两个文字的间距,其实不需要太过介意,除了特殊的需求之外,都可以使用默认数值的间距。

  行间距,推荐以字体大小的1.5—2倍 作为参考;段间距,推荐以字体大小的2—2.5倍 作为参考。即,当选用14px 的字体时,行间距:21—28px;段间距:28px—35px。

  四、字体颜色

  主文字颜色,建议使用公司品牌的VI颜色,可提高公司网站与公司VI之间的关联,增加可辨识性和记忆性。正文字体颜色,建议选用易读性的深灰色,建议选用 #333333到#666666 之间的颜色。辅助性的,注释类的文字,则可以选用#999999之类的比较浅的颜色。

  五、首屏内容

  做网页设计时,你还要特别注意网页的首屏内容,在构图和内容呈现上,首屏模块的设计至关重要。除去任务栏,浏览器菜单栏以及状态栏的高度,剩下的是首屏的高度。Window XP的首屏高度平均值是580px,Window 7的首屏高度平均值是710px。

  需要全屏显示的图片,宽度尺寸严格设计为1920px。但是值得注意的是,图片内容的有效范围不能超过网页内容的有效范围,即控制在1200px以内。

web网页设计

  图片来源于网络

  六、响应式布局设计

  响应式设计指的是不同设备、屏幕、分辨率、操作方式(鼠标、键盘、触摸),保证信息在不同环境下表现一致,保证可交互可操作。由于页面的宽度发生了变化,进而信息展现也改变了就是响应式设计。直到最后在手机屏幕上的显示图片信息变成了一列。

  很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一临界点内(发生布局改变的临界点称之为临界点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。

  关于web网页设计

  网页设计(web design,又称为Web UI design,WUI design,WUI),是根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化),进行网站功能策划,然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种,精美的网页设计,对于提升企业的互联网品牌形象至关重要。

  网页设计一般分为三种大类:功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同,应选择不同的网页策划与设计方案。

  以上就是faceui为大家介绍的关于web网页设计的相关内容。web网页设计,是网站设计的重要内容,也是网站展示的重要窗口,做好web网页设计的意义是很重大的。

合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开