易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

WebUI网页设计规范

来源:网站建设行业资讯网
添加时间:2021-12-08

一、网页尺寸

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

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

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

1、左右布局

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

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

2、居中布局

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

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

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

二、网页字体

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

网页的中文字设计是系统默认的字体:宋体、微软黑体、苹果系统黑体; 英文则建议使用Times New Roamn、Arial、Comis Sans MS等无衬线字体。

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

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

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

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

三、字体间距

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

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

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

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

四、字体颜色

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

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

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

五、首屏内容

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

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

Window XP的首屏高度平均值是580px;Window 7的首屏高度平均值是710px。

综合考虑到Window XP已经逐渐退出市场,在实际操作时,我们 以710px 作为依据。

另外,是关于图片尺寸的问题。

需要全屏显示的图片,宽度尺寸严格设计为1920px。

但是值得注意的是,图片内容的有效范围不能超过网页内容的有效范围,即控制在1200px以内。

避免遇到小屏幕设备时,内容显示不全,而造成信息的遗漏的情况。

网站建设计最新案例赏析:


江苏天兴环保股份网站制作首页设计效果图
江苏天兴环保股份
西安天星塔钟工程网站制作首页设计效果图
西安天星塔钟工程
广州黑蜂科技有限公司网站制作首页设计效果图
广州黑蜂科技有限公司
上海傲秀展览展示网站制作首页设计效果图
上海傲秀展览展示
山东恒美科技网站制作首页设计效果图
山东恒美科技
东莞鼎力环保科技网站制作首页设计效果图
东莞鼎力环保科技
深圳市航冠实业网站制作首页设计效果图
深圳市航冠实业
深圳尚青文化创意网站制作首页设计效果图
深圳尚青文化创意
广东旭峰环保科技网站制作首页设计效果图
广东旭峰环保科技
阳光雨露信息技术服务网站制作首页设计效果图
阳光雨露信息技术服务
 

网站建设行业资讯推荐阅读:


深圳微信营销的渠道策略,企业如何利用微信做好网络营销网站设计过程中应该如何设计元素网站建设设计怎么做网站建设设计哪家好4个设计思路简化网站建设深圳网站建设浅谈网站运营策略网站被动营销与主动营销域名解析中TTL值说明深圳企业移动网站建设要怎样建设才能适应互联网的新时代要求网站建设对企业发展所起到的作用网站建设中服务器和空间区别网页设计公司容易被忽视的四大问题网站建设必须具备四大先进特性为什么做软件定制项目很难赚钱怎么快速提升网站的权重微信公众号如何做营销推广呢门户网站开发都有哪些分类呢深圳网站设计制作公司哪家强怎么选择房地产行业网站建设方案中山网站建设-如何让百度更喜欢你的网站网站建设:网站内容创作的大忌 网站设计有哪些公司 网站制作改版如何做到十全十美在深圳网站建设中企业域名的选择技巧有哪些深圳企业网站设计怎么进行企业网站建设流程分五步,哪些流程比较重要无形的界面设计是最强大的设计关于网站建设的内容你知道多少网络营销干货分享:网销业务员怎样和素未谋面的客户签单如何正确地向设计师反馈信息软件定制开发平台大科普中软国际解放号了解一下网站建设后如何写网站关键词2016年最受欢迎的自媒体平台大全如何合法在网站或博客上使用图片搭建企业网站建设的三个重要方面 网站设计的未来之路该怎么走ApplePay逆袭:其实我只想静静的做一个卡包网站优化要如何去做效果才好网站建设设计,企业网络推广有哪几种方式入门到专业!网站改版过程中应该注意的问题西安网站制作中绝对路径和相对路径的界定和区别网站建设完成后维护的意义是什么网络商务信息收集新型神推广方法--自动关注“关于我们”页面必须包含的7个元素为什么现在都在建设H5网站,如何才能建设出高端的H5网站神州专车将战略投资e代驾并非合并企业制作网站最关心的问题网页制作时会导致打不开的因素如何建设一个有特色的高端网站设计为您解答,陕西建设网站哪家好四大设计趋势带你玩转2015年网页设计挪动网站制做时间的长度一般受哪些要素危害如何设计有创意的网站网页设计颜色说服网站访客订阅没灵感网站设计师寻找灵感实用方法如何通过网络营销给企业快速打造品牌网站建设css使用上的方便性网站建设制作有利于企业电商发展福田高端网站设计公司哪个好平台微商的发展将取决于三大因素:消费者,场景和关系
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询