WEB网页设计规范浅述

但没有栅格化设计经验的设计师需要注意,这里说的960是含边距部分,换句话说,在psd文档中,你的内容部分是950px,栅格化版面可以借助一些非常好用的在线工具,比如知名的Grid.Guide,这是12列栅格在内容宽度950下的三种版式规范,你也可以使用24列,灵活度更高。对于一些中规中矩的网站,或者说一般创意型的网站,栅格化设计还是非常推荐的,尤其是一些规模大周期长,后期需要不断迭代的项目,栅格化设计让网页呈现出专业可信赖感,并有助于后期的维护。“Main”是网站的主要区域,如果是博客的话它将包含的日志。
摘要由CSDN通过智能技术生成

一、网页尺寸

制作网页时,我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。

但是并不代表我们可以在整个画布上作图。

网页的布局主要有两种,左右型布局和居中型布局。布局的不一致,使得可设计的空间也不相同。

1、左右布局

灵活性强, UI的限制小,左边通栏为导航栏,宽度没有具体的限制,可根据实际情况调整;

右侧为内容版块范围,是网站内容的展示区域。

2、居中布局

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

3.主流电脑屏幕尺寸有以下几种:

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

二、网页字体

字体设计的总原则是:可辨识性和易读性。

网页的中文字设计是系统默认的字体:宋体、微软黑体、苹果系统黑体

英文则建议使用Times New Roamn、Arial、Comis Sans MS等无衬线字体

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

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

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

16px、18px、20px、26px或者30px 适用于突出性的标题内容。注意都是偶数原则,奇数像素会出毛边!

三、字体间距

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

行间距:推荐以字体大小的1.5—2倍作为参考;

段间距:推荐以字体大小的2—2.5倍作为参考。

例如,当选用14px 的字体时,行间距:21—28px;段间距:28px—35px。

四、字体颜色

六种除了主色调以外都是场景色,需要在不同的场景中使用(例如危险色表示危险的场景)六种是文字排版色,通过文字的不同用色进行文字排版,以表现层次结构。

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

正文字体颜色,保险起见,选用易读性的深灰色,建议选用 #333333到#666666 之间的颜色。

五、首屏内容

网页设计时,你还要特别注意网页的首屏内容,在构图和内容呈现上,首屏模块的设计至关重要。

除去任务栏,浏览器菜单栏以及状态栏的高度,剩下的是首屏的高

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值