RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:9:30-18:00
你可能遇到了下面的问题
关闭右侧工具栏
给新手的网页设计指南
  • 作者:佚名
  • 发表时间:2020-03-17 14:28
  • 来源:互联网

首先在介绍网页每个页面之前,我们要明白一个概念,就是网页设计中经常出现的“模块”。不知道是不是因为“模块”这个概念比较基础,写的人也很少,在我刚刚接触网页的时候,并不是很容易查到关于模块的介绍,做图的时候也遇到了一些困难。

与平面不同,在UI和网页设计中,模块是经常出现,并且贯穿设计稿始终的。每个网页都是由模块组成的,并且常用模块都会有固定的称呼。我这里先列举网页中经常出现的几个模块,搞懂了模块,才好进行下面的讲解。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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