最新公告
  • 欢迎您光临xd素材中文网xdsucai.cn,服务于广大UI设计师。立即加入我们
  • 标准网页设计尺寸_网页设计规范

    现在都已经2021年了。做网页设计应该用那个尺寸,如果你第一次设计网页不清楚网页设计规范尺寸,请看完下面的讲解。

    根据百度流量研究院的最新数据显示,2019年10月份我国网民访问PC网页的主流设备分辨率仍然为1920*1080,占总百分百为42.94%。很显然,绝大部分的屏幕分辨率都已经超过了1366*768,在适配网页时则不需要对1366宽度以下的尺寸做特殊处理。可见,1920px在目前是PC端网页设计的标准。

    需要注意的是,此图中的分辨率数值仅作为上限的参考,在设计网页时,不能够将页面的实际显示内容的区域(也成为安全区)等同于此上限看度。考虑到在Windows等部分浏览器上,滚动条本身也需要占据一定的宽度,因此,过分的贴边或是接近于整屏幕宽度的设计是不被推荐的。

    以1920px宽度作为设计标准,在整个页面中,网页的安全区域则为1200px。换句话说,我们只要保证网页的实际内容展示区域控制在1200px这个范围内,就能保证整个页面在不同尺寸的浏览器访问时能够完整的显示出所有的内容。

    为了布局方便,我们通常会将内容区域用栅格进行划分,这里我们一般会将内容区域划分为12格或者24格。同时在栅格间增加通用固定的间距,可以很好的处理大部分情况下的垂直排列问题。

    使用12格或24格的好处:能够倍2、3、4整除;方便处理内容区域中2:1;1:2:1这一类常见的间距分布。

    栅格的计算方式:

    我们把宽度为“W”的页面分割成n个网格单元“a”,每个单元与单元之间的间距设置为“i”,此时我们把“a+i”定义为“A”,他们之间的关系如下:

    W=(a*n)+(n-1)*i

    由于a+i=A

    可得(A*n)-i=W

    我们定义了W为1180px,A为50px,i为20px,所以n=24

    当我们设置设计栅格时,可以将总宽度设成1180(1200px安全区域减去两边栅格的留白),页面分为24栏,每一栏的宽度为30px,间距为20px

    使用栅格系统,可以有效提高网页的规范性。在栅格系统下,页面中的元素尺寸都是有同一基准线和规律的,而基于栅格系统进行设计,可以让整个网站和各个页面的布局保持一致,增强页面统一性,提升用户体验。

     

    网页UI设计规范

    1.网页规范:

    网页宽度为1920 高度不限,有效可视区:950px~1200px宽度,具体尺寸根据项目,客户要求以及用户群决定。

    首屏高约为700-750PX 主体内容区域1200

    文档建立:文件宽度为1920PX 高度不限,RGB颜色模式, 分辨率72

    2.字体规范:

    中文常用字体:宋体-字体样式(无)、微软雅黑-字体样式(Windows LCD)、苹方(MAC)

    英文常用字体:Times NewRoman、Arial、sans

    (1)中文字常用字号:

    导航文字大小:14px、16px、18px、20px;

    正文内容:12px、14px;

    标题:22px、24px、26px、28px、30px;

    辅助信息:12px、14px;

    (2)英文字常用字号:

    标题和内容文字10-16px;中英文结合最小12px;全英文网站最小10px(比如底部信息);

    (3)段落字体格式:

     3.网页页面等级

    (1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个

    注意:网站的首页只能有一个

    (2)二级页面:从首页点击进入之后的页面叫做二级页面

    (3)三级页面:从二级页面点击进入的页面

    4.网页常见板块划分

    (1)头部区域—–top或header

    Logo、主导航、搜索、注册、登录、版本等信息…

    (2)主视觉区—-banner

    展示公司品牌形象、新品宣传、主题活动等轮播大图

    (3)主要内容区—main

    新闻动态、产品与服务、公司介绍等

    (4)底部信息区—footer

    网站地图、联系我们、版权信息、ICP备案号等信息

    5.网页的颜色

    (1)来自于LOGO的颜色

    (2)来自于环境的颜色

    (4)来自于产品的颜色

    (5)公式:随意选择四个颜色,调整四个颜色的明度和直线色相

    (6)选择一个符合你产品的任意颜色图片,然后在这个图片中提出出来四中颜色,来作为网页的主色调 (服装,饰品、化妆品类居多)

    6.网页设计需注意的问题:

    (1)高清大图,图片不能有水印

    (2)有图片的位置最好配有文字说明不要大篇幅的图片摆放

    (3)文字排版,标点符号不能在一行的第一个,不要一个文字为独立的一行

    (4)如果色块中有文字,文字必须在色块的中心,不能上或者下留有太多空白空间

    (5)如果箭头朝下必须有下拉菜单,如果下拉菜单是合起的状态,箭头朝右

    (6)banner不能是现成的图片,需要进行合成和设计,也需要有文字的极差关系和对比

    (7)产品分类中必须有不同的产品体现

    (8)在每一个板块中都必须体现明显的连接

    (9)在网页设计中不要有重复图片,每个图片必须有一个部分是完整的

    (10)图片素材不要直接用设计好的图片

    (11)在板块中不要有纯图片的设计,一定有文字解释,有链接

    (12)一个版块内的图片要选择同一种类型

    (13)图片距离文字不要过近

    常见的网页布局形式

    布局的原则

    网页布局的原则包括:协调、一致、流动、均衡、强调等,另外在进行网页布局设计的时候,需要考虑到网站页面的醒目性、创造性、造型性、可读性、和明快性等因素;

    (1)协调:将网站中的每一个构成要素有效的结合或者联系起来,给浏览着一个既美观又实用的网页界面。

    (2)一致:网站整个页面的构成部分要保持统一的风格,使其在视觉上整齐、一致。

    (3)流动:网页布局的设计能够让浏览者凭着自己的感觉走,并且页面的功能能够根据浏览着的兴趣连接到其感兴趣的内容上。

    (4)均衡:网页的布局设计要有序的进行排列,UI设计中网页的设计规范总结并且保持页面的稳定性,适当地加强页面的使用性。

    (5)强调:把页面中想要突出展示的内容在不影响整体设计的情况下,用色彩搭配或者留白的方式将其最大限度地展示出来。

    不同类型的网站、不同类型的页面往往有不同布局,常见的布局模式为:一栏式、两栏式、三栏式;

    1.一栏式

    布局页面结果简单、视觉流程清晰,便于用户快速定位,但是由于排版方式的限制,只适用于信息量小,相对比较独立的网站。通常会通过大幅精美图片或者交互的动画效果来实现强烈的视觉冲击效果,从而给用户留下深刻的印象,提升品牌效果,吸引用户进一步浏览。由于首页信息展示量有限,一般需要在首页中添加导航或者重要入口的链接等。

     2.两栏式

    两栏式是最常见的布局方式之一,相对于一栏式可以容纳更多的内容,但是两栏式不具备一栏式布局的视觉冲击,一般可以将其细分为左窄右宽、左宽右窄、左右均等,通过不同的布局比例和位置会影响到用户浏览的视线流和页面的整体重点。

    (1)左窄右宽

    左窄右宽的布局,通常左边是导航,右侧是网页的内容。用户的浏览习惯通常是从左到右、从上至下,因此这类布局的页面更符合操作流程,能够引导用户通过导航查找内容,使操作更加具有可控性、适用于内容丰富、导航分离清晰的网站。

    xd素材中文网,提供优质的UI设计资源免费素材,有xd源文件,sketch源文件,设计规范,实用的商业ui设计教程。
    XD素材中文网 » 标准网页设计尺寸_网页设计规范

    常见问题FAQ

    关于我们
    我们是一家服务广大ui设计师的素材平台,提供包括UI、平面设计、ppt模版,网页素材、png素材、设计插件、设计软件等一些列优质资源免费分享给到设计师,有效提升工作效率。
    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    百度网盘为什么下载慢?
    国内只有在百度网盘放资相对靠谱,基本不会出问题,但百度网盘限制了非SVIP用户的下载速度和稳定性,不过使用百度云盘软件下载(不要用网页直接下载)会相对稳定,而且能断点续传;
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

    发表评论

    • 62049会员总数(位)
    • 28003资源总数(个)
    • 141本周发布(个)
    • 0 今日发布(个)
    • 538稳定运行(天)

    提供最优质的资源集合

    加入会员 免费领会员