2020-06-12
与平面不同,在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。
网页方面,模块的内容大概就是这些,我觉得对新手来说还是比较全面的了。
上一篇:网站建设设计策划以及解决小技巧
下一篇:息县网站建设失败总结。
2019-11-22
2019-11-23
2019-11-23
2019-11-23
2019-11-23
2019-11-23
2019-11-26
2019-11-26
2019-11-26
2019-11-26
2019-11-26
2019-11-26
2019-11-26
2019-11-26
2019-11-26
2019-12-23