face+ 关于 服务 案例
首页 案例 服务 关于 face+

全屏网页设计规范有哪些,常见的网页设计风格

Time: 2021-11-11

       网页设计一直都是设计行业中比较热门的关注点,也是网站设计中的关键内容之一。目前网页设计的风格有很多,大家对全屏网页设计了解多少。今天就让faceui为大家介绍全屏网页设计规范有哪些,常见的网页设计风格。

  全屏网页设计规范有哪些

  1、网页尺寸

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

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

  居中布局:中间的蓝色部分为有效的显示局域,用于网站内容的展示;换句话说,两边均为留白,没有实际用途,只是为了适配而存在;一般网站内容显示的区域为996px;国内网站大部分还是以1000个像素为界限,因超过1000像素适合在大屏幕上浏览,小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分用户舒适的浏览网页。

  2、网页字体

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

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

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

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

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

全屏网页设计

  图片来源于网络

  3、字体间距

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

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

  4、字体颜色

  主文字颜色,建议使用 公司品牌的VI颜色,可提高公司网站与公司VI之间的关联,增加可辨识性和记忆性。

  正文字体颜色,保险起见,选用易读性的深灰色,建议选用 #333333到#666666 之间的颜色。辅助性的,注释类的文字,则可以选用#999999之类的比较浅的颜色。

  5、首屏内容

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

  另外,是关于图片尺寸的问题。需要全屏显示的图片,宽度尺寸严格设计为1920px。

  6、响应式布局设计

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

全屏网页设计

  图片来源于网络

  常见的网页设计风格

  1、响应式网页设计

  响应式网页设计是目前大家所关注的一种设计,在网站设计风格中也是很有口碑的。可以集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局,能够适应不同的终端,够满足现在不同设备的显示模式。响应式网页设计是未来很长一段时间的设计趋势,而目前不同的电子设备种类也正好顺应了这种趋势。

  2、全屏网页设计

  如今全屏网页设计是近几年的潮流,一般背景是采用漂亮地图、简短新颖的文字来进行合理、整齐地页面布局和排版,很注重细节方面的设计,整体纯净、留白、简单明了且让人感觉干净舒服,但全屏网页设计所承载的内容较少,适合摄影或是一些个人网站等。

  3、扁平化网页设计

  扁平化网页设计是一种新的设计思维,去掉多余的透视、纹理、渐变以及能做出3D效果的元素,也就是去除网页冗余、厚重和繁杂的装饰效果,让网页变得简单,凸显网页核心“信息”,同时在设计元素上,则强调了抽象、极简和符号化。同时扁平化的设计,在移动系统上不仅界面美观、简洁,而且还能达到降低功耗、延长待机时间和提高运算速度的效果。

  4、视差滚动网页设计

  视差滚动是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。而视差滚动网页设计是网页设计的热点趋势,在整个网站设计风格中占有很大优势,越来越多的网站应用了这项技术,给人们带来独特的视觉享受,且通过鼠标来控制网页,让网站有一种控制感,这是一种响应式的交互体验,也是视差滚动网页设计的趣味性所在。

  以上就是faceui为大家介绍的关于全屏网页设计的相关内容。作为一种常见的网页设计风格,全屏网页设计也是当下很流行的一种网页设计,要设计这类网页,了解全屏网页设计规范很有必要。

合作咨询

上海(总部)

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

办公地址地图

北京

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

办公地址地图

深圳

深圳市福田区金田路4018号安联大厦2601
0755-33955611
service@faceui.com

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

Copyright © 2009-2015 FaceUI design. All rights reserved


沪ICP备13044459号-5

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