欢迎光临贵州建个站[云集铭网络]我们是一家专注中小型企业网站建设、营销型网站建设、响应式网站建设公司!

咨询热线:19885000078
微信号
新闻中心News
企业网站建设|贵州网站建设|网络营销推广|贵阳网站建设优化公司|贵州建个站

给新手的网页设计指南遵义企业建站

作者:遵义企业建站 | 点击: | 来源:贵阳网站建设
3103
2020
首先在介绍网页每个页面之前,我们要明白一个概念,就是网页设计中经常呈现的“模块”。不晓得是不是由于“模块”这个概念比拟根底,写的人也很少,在我刚刚接触网页的时分,...

      首先在介绍网页每个页面之前,我们要明白一个概念,就是网页设计中经常呈现的“模块”。不晓得是不是由于“模块”这个概念比拟根底,写的人也很少,在我刚刚接触网页的时分,并不是很容易查到关于模块的引见,做图的时分也遇到了一些艰难。

      与平面不同,在UI和网页设计中,模块是经常呈现,并且贯串设计稿一直的。每个网页都是由模块组成的,并且常用模块都会有固定的称谓。遵义企业建站这里先罗列网页中经常呈现的几个模块,搞懂了模块,才好停止下面的解说。

 

比拟常见的是这几个模块,简直每个网页中都会呈现:

Header

页面中header部分一般位于网页中最上端,内容主要包括网站名称或Logo的网站的导航部分。一般来说,header的高度是60-90px,当然这个数值并不绝对,也有100px的header,看实际需要。不过100px的话,就已经很高了。

这里是我这套网站里面登录前的状态,我这里的header非常简单,放在banner里面呈现,也没有做其它特殊效果。(关于banner的概念,下文中会有提到)

遵义企业建站

再放一些其它网站的header进来做以参考:

站酷的header,站酷的高度设置是54px。

 

2.摩拜的header,高度设置是80px。

 

 

导航栏

导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮。很多网站的导航栏会显示是=在header里面,上文中的站酷、摩拜的导航栏就是这类,是一种很普遍的导航方式,这里就不再单独列举。

其它也有不同的导航方式,我这套网站里面,使用的就是下拉的导航方式:

 

 

Banner

一般来说,网站首页打开是会有一张横着的大图的,它会占用网页很大的面积。这张大图就叫Banner。Banner的其用面积之大,对网页的整体风格和用户的第一感受,都会造成很大影响。

因为这个图片给客户传达的信息量最大,给客户的吸引力也最大,所以在网页设计中Banner的地位尤其重要。甚至,一套网页在视觉上好不好,Banner可以起到举足轻重的作用。如果Banner设计的足够漂亮,就能给网站带来很多的亮点;反之如果这个Banner做的很普通,就会导致整个网站显得很普通。

而作为网页中占比最大的图片,Banner需要给客户传达有用的信息,否则这个Banner便是一个没有内涵的图片而已,浪费了网站空间。大多数Banner的尺寸都在450-750px之间,也是具体看实际需要。

这边放上我这个党建网站的Banner,高度是550px。

下面也放几张其它网站的Banner案例,给各位做以参考:

1.天天看看的Banner,他们的高度设置是573px。视频网站的话,一般都是放片子上来做Banner。一来方便影片推广,二来又增加了自己网站的视频播放量。

包括其他视频网站,如优酷、腾讯视频等等,Banner都是采用片子的形式:

优酷的Banner是572px;

腾讯视频的Banner是539px。

2.淘宝店铺的Banner,高度设置128px。

这一类Banner又比较特殊。相比其它类型的网站,淘宝的Banner是很小的了,高度仅有128px。考虑到淘宝上面的店铺极多,卖家又大多是个体商家,不一定会在店面设计上花许多心思。在这样的情况下,尽量减少Banner的占比,也确实保持网站整体风格统一的方法之一。

内容区

到这里我们应该能理解“模块”的概念了。通常Banner下面就是网站内容的的模块,按照每个网站的不用,这里的模块也不相同。具体就按照每个网站所提供的需求进行设计就好。有没有说清楚的地方可以留言,或者私信。

 

Footer

我们浏览网站时,翻到网站页面底部时,底部区域展示的信息就是Footer。通常Footer区会显示版权信息和备案号等资料,用户可以从中获得网站的基本信息。

1.造作

造作的Footer就放入了很多元素进来,从社交媒体链接(微信、新浪)、联系方式(电话、店铺地址)到页面信息(版权、著作权等信息)和网站地图(快速跳转到指定页面的跳转链接)都有展示,这也就占用了页面比较大的篇幅。

2.玉名牧场

玉名牧场的Footer也展示了比较多的信息,加入了电话、导航的元素。在Footer区展示导航的方式,在网站设计中并不多见。

主视觉区:

遵义企业建站最后在引入一个概念,就是网页设计中的主视觉区。

做效果图的时候,为了让不同的显示器及浏览器在浏览页面的时候不出现问题,不出现大小偏差等情况,我们在设计的时候通常会在页面两边进行留白处理。将需要展现的内容,集中让在页面中部,形成一个视觉范围。

 

视觉区的大小并没有硬性规定,但是为了兼容大多数浏览器一般是设置960px。随着现在浏览器分辨率的变化,已开始向着1000px,1200px宽度发展。

如果需要兼容不同浏览器尺寸,现在比较流行的做法是做成响应式的,即根据不同分辨率显示不同的尺寸,工作量也就随之增加了。

以UI中国举例,中间没有遮罩的白色部分这个就是视觉区域,UI中国的范围的1180px。

网页方面,模块的内容大概就是这些,我觉得对新手来说还是比较全面的了。

我要咨询做网站
服务案例
建站流程
  • 网站需
    求分析
  • 网站策
    划方案
  • 页面风
    格设计
  • 程序设
    计研发
  • 资料录
    入优化
  • 确认交
    付使用
  • 后续跟
    踪服务
  • 19885000078
    198-8500-0078
贵州网站建设,贵阳小程序开发,遵义微商城建设,毕节网站快照排名优化,百度,360,搜狗推广点击不扣费全网营销推广服务联系我们
免责说明:本网站部分内容及图片采用于互联网平台,如权利人发现存在侵权问题,请及时与本站联系给予删除处理。
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

咨询送礼现在提交,将获得建个站网络策划专家免费为您制作
下单送礼感恩周年,新老用户下单即送创业型空间+域名等大礼
24小时免费咨询热线19885000078
合作意向表
您需要的服务
您最关注的地方
预算
  • 看不清?点击更换

直接咨询