越来【lái】越多的企业在【zài】创业初期就【jiù】开始了自己公司的网站建设之【zhī】路，而说【shuō】到网站建设就不得【dé】不提到网页【yè】布局，网页布【bù】局【jú】对【duì】于网站建设【shè】来【lái】说【shuō】无疑是重要的，那么怎样做好网页的布局呢?下面就来学习一下。
怎样做好网页的布局
1.网页设计的页面尺寸：
页面的尺寸【cùn】其【qí】实和【hé】显示器的大【dà】小以及分【fèn】辨率有着很【hěn】大的关系【xì】，一般来说【shuō】，分辨率在【zài】640*480的【de】情【qíng】况【kuàng】下，页面的显示尺寸为:620*311个象【xiàng】素;分辨率在800*600的情况下，页面的显示尺【chǐ】寸为：780*428个象素【sù】;分辨率在1024*768的情况下，页面的显示尺寸为【wéi】：1007*600，从以上数据中我们【men】可以看【kàn】出，分辨率【lǜ】越和页面大小是呈正比关系，即【jí】分辨率越高则页面越大。而当用户打【dǎ】开网站网页时，其【qí】浏览器也【yě】会占【zhàn】领一部分空间，这样留【liú】给【gěi】网【wǎng】页【yè】的空【kōng】间就【jiù】会对应的缩小，这是我们在网页【yè】制作【zuò】中需要关注【zhù】的问【wèn】题，另外还有，在【zài】浏览器选择关闭【bì】的时候网页页面也【yě】会对应的增大【dà】，这【zhè】样和浏览器【qì】未关闭时候的网页大小是不同的。
有【yǒu】的人说，及时网页【yè】对于显示器【qì】来说有点大，用户也是可以【yǐ】向下【xià】拖动网页来获【huò】取内容【róng】的【de】，其【qí】实不然，因【yīn】为【wéi】要用【yòng】户主动向下拖网页的前提是【shì】你的网页内容【róng】足够吸引【yǐn】人，而我们对用户在没有把握的情况下最【zuì】好将网页【yè】设计成合适的大小，方便浏览者进行浏览。
2.网页设计的整体造型：
整【zhěng】体造型指【zhǐ】的也是页面的整体形象，就【jiù】是呈现给浏【liú】览【lǎn】者的第一印象【xiàng】，这在无形【xíng】中也关系着用户的喜欢与否【fǒu】，所以在网页的设【shè】计【jì】过程中应当尽量选择【zé】层叠有序的。对于显【xiǎn】示器和浏览器是矩【jǔ】形的【de】特点，网页【yè】的设计可【kě】以呈现矩【jǔ】形、圆形等与【yǔ】自然【rán】界中相似形状【zhuàng】的运用。而【ér】图形【xíng】的不【bú】同【tóng】其实给人的感觉【jiào】也不【bú】尽相同。例如，矩形，矩形代表着规【guī】则和正【zhèng】式通常会被运用【yòng】到政【zhèng】府【fǔ】网站等较为正【zhèng】式的网站中;例【lì】如，圆【yuán】形，圆形给人的感觉是团结温暖柔和的，所以常被【bèi】运用【yòng】到关于时尚的网站中……所以【yǐ】不同类【lèi】型【xíng】的网站我们要根据其性质做不同形【xíng】状的选择。
3.网页设计的页头：
页头其实就是页眉，通常是【shì】会做显【xiǎn】示主题之用，所以页头的内【nèi】容【róng】一定要【yào】简洁明了，让浏览者一下就明白网站的中【zhōng】心【xīn】是什么，所以我们在网【wǎng】页的设计中可以【yǐ】将网站【zhàn】名称和公司标志【zhì】或者中心广告【gào】放置在页头，让【ràng】用户能【néng】够【gòu】一目了然。
4.网页设计的文本：
在过去，因为【wéi】技术的【de】原【yuán】因使得文本【běn】的放置【zhì】灵活性较小，只能放置在固定的地方，而【ér】随着新技【jì】术的兴起，文本已经可【kě】以【yǐ】按照自【zì】己的要求进行自由放置【zhì】了。所以【yǐ】我们【men】在【zài】放置文本的时【shí】候可【kě】以【yǐ】结合网页整体【tǐ】的设计进行，这样既【jì】能保证文本的【de】有效性【xìng】被用户最大的接受，又【yòu】能够【gòu】保证整体网页的美观。
5.网页设计制作的图片：
一个图文【wén】并茂的网页【yè】中【zhōng】文【wén】本和【hé】图片一个都不能【néng】少，所以在文【wén】本归置好之后还要处理好图片，文本和【hé】图片【piàn】相得益彰才【cái】能够呈现一【yī】个出彩的网页。
6.网页设计制作的多媒体：
随着【zhe】动态【tài】网页的兴起，人们在【zài】设计制【zhì】作网页时也会加入一些声音【yīn】和【hé】动画以此【cǐ】来丰富网【wǎng】站的体验，合理的多【duō】媒体的运用能【néng】够让网【wǎng】页看起来【lái】更加生【shēng】动富有【yǒu】生机。是现代网【wǎng】站丰富体验的不可或缺的手段【duàn】之一。
7.网页设计的页脚：
页脚和页眉应该呈【chéng】现相互呼应【yīng】的特征【zhēng】，页眉【méi】一般被放置点睛信息，页脚就【jiù】要放置一些作者【zhě】或者公司信息了。这样首尾相【xiàng】互呼应才【cái】能最【zuì】大限度的【de】让【ràng】网页看起【qǐ】来完【wán】整有【yǒu】序。
网站该如何布局好首页
一、确定首页主题
首页是网站的【de】核心【xīn】页面，网站的主题主要是首页确定的，所以在【zài】首页中需要让用【yòng】户了解网站是做什么的。在网【wǎng】站【zhàn】设计上犀牛云主张通过网站【zhàn】的标题、关键【jiàn】词的【de】描述来【lái】为企业展示主要内【nèi】容。这样用户【hù】在搜索引擎上【shàng】看【kàn】到【dào】的搜索结果就是【shì】企【qǐ】业【yè】的【de】网站标题与与描述的内容。此【cǐ】外【wài】，首页【yè】主题也是网站SEO推广【guǎng】非【fēi】常【cháng】重要的一项内容，搜索引【yǐn】擎上会【huì】展示企业的网站信息，就是企业设置的网站主题。
二、设置首页导航
首页导航是对网【wǎng】站内容【róng】的一个细分，这【zhè】样方【fāng】便【biàn】用户根据自己的需求选择要浏览的栏目。导航该如何设【shè】置呢【ne】?网站【zhàn】导航要做到分【fèn】类清晰【xī】，逻辑【jí】清晰，用户想了解【jiě】到【dào】内容放在导航里【lǐ】面。
对于页面很多的网站，导航【háng】栏目之间不要重【chóng】复，最【zuì】好了也【yě】不要有相似的词，避免让用户【hù】产【chǎn】生误会，导致【zhì】网【wǎng】站逻辑混乱。设【shè】计导航栏的时候可以体现这【zhè】个【gè】企业【yè】的大概信息，现【xiàn】在比较流行的【de】导航栏【lán】是下【xià】拉+图片文【wén】字的方式去表现。这样浏览者【zhě】可以【yǐ】一目了然的【de】了解【jiě】企【qǐ】业的概括和产品的信【xìn】息。
一般企业【yè】的导航，主要包括【kuò】首页、产品服务【wù】、优势亮点、公司新闻、关【guān】于我们、联系我【wǒ】们【men】这【zhè】些【xiē】通用类的【de】栏目。这里犀牛云建议可以把【bǎ】这【zhè】公司【sī】简【jiǎn】介和联系我们这两个【gè】栏目【mù】做成一个，强调企业【yè】的实力雄厚，产品的【de】质量，打消用户对【duì】企业的不【bú】信任【rèn】，最后通过【guò】联【lián】系我们【men】来获【huò】得电话咨询。互联网上有许多导航栏目做【zuò】的很好的网站，这【zhè】里可以参考网上的优【yōu】化网站的导【dǎo】航栏目划分【fèn】方法。
导航的上【shàng】方应【yīng】该有企业网站的LOGO，还有联系方式(可以是QQ也可【kě】以【yǐ】是电话，要【yào】是可复制【zhì】的)，这样【yàng】能让用户一眼就【jiù】看到，避【bì】免【miǎn】到时候到处【chù】找联【lián】系方式【shì】在哪，其【qí】次导航上做的词应【yīng】该要是你这个行业【yè】用户【hù】所需要的内【nèi】容，你可以依靠百度下拉【lā】框和推广助手来挖用【yòng】户需求词。
三、重视banner条设计
如果首页是一个【gè】网站的核【hé】心，那么banner就是网站首页的核【hé】心。当【dāng】人们打【dǎ】开一个网【wǎng】站【zhàn】的首页【yè】，最【zuì】醒目的就是banner条。所【suǒ】以【yǐ】犀牛云在为【wéi】企业设计banner条时，尽量确保图片和自【zì】己的产品相符合，然后用文字加以说【shuō】明。这样的好处是用【yòng】户仅看banner条【tiáo】就能知道网站的主题，也【yě】进一步的【de】对产品有【yǒu】初【chū】步的了解。
banner首先【xiān】主题要明确，色彩搭配要明亮干净，与整个【gè】页面要相协调，做【zuò】到能【néng】吸引用户【hù】去点【diǎn】击，这样才【cái】能更【gèng】好【hǎo】的宣传，推【tuī】广产品和【hé】新功能。
banner是首页的【de】核心，一般【bān】只做企【qǐ】业里最具【jù】代表性，用户需【xū】求量最大【dà】的产品，让用户一【yī】眼就【jiù】能看明白，这个就【jiù】是他要找的，banner图【tú】片的链接应该跳转到相关产【chǎn】品的【de】页面，首屏的其他内容可以【yǐ】做【zuò】仅次于banner图【tú】片上的【de】主要产品，但不【bú】建【jiàn】议经常去【qù】更新，应该按【àn】行【háng】业【yè】用户的需求走势去更新。另外【wài】在这里说一【yī】下，有一部分企业【yè】居然在banner上放一些风【fēng】景啊、抽象图片这一类很难让人看懂的图【tú】片，这样做是极度浪费首屏的大好资源。
四、合理安排首页内容
首页的【de】内容重要性就不【bú】再多说。如果说网站首页banner、导航等一些元【yuán】素是网站的重要【yào】内容，那么网站首页的内容就是重中之重。网站banner、导航只是【shì】用户第一印【yìn】象，如果要提高网站的转化率，还【hái】是要从内【nèi】容建【jiàn】设。站【zhàn】长需要先对用户群的需求进行【háng】分析，把用【yòng】户关【guān】注最【zuì】多的内容【róng】放在首页最重要【yào】的位置，这样会降低【dī】用户的【de】跳【tiào】出率，有利【lì】于提高网站的转化。
首屏之【zhī】后【hòu】的【de】几屏主要做次于【yú】首屏的产品或者服务，一般【bān】来【lái】说用户拉到【dào】第二屏第三屏注意力肯【kěn】定【dìng】是没【méi】有在【zài】首屏【píng】时【shí】候集中了，所以后面几屏做的【de】产【chǎn】品要强调出产品的优势、卖点，并且在产品旁边要出【chū】现转化入【rù】口，及时抓【zhuā】住用户，不让用户流失。
五、适当布置转化工具
适当布【bù】置转【zhuǎn】化工具，是很多网站容易疏忽的事情。这就相当于踢足球【qiú】最后忘了临门一脚进【jìn】球，实在非常可惜【xī】。一【yī】般而言【yán】，设置的转化工具【jù】包括电话、QQ、百【bǎi】度商桥、第三方客服工具、在线【xiàn】留【liú】言、在线注册【cè】等。
六、注意网站整体颜色和底部的布局
网站的【de】背景【jǐng】颜色是非常容易被【bèi】忽【hū】略的，不是【shì】所【suǒ】有的颜色都能通用【yòng】于每个行业【yè】的网站，就比如【rú】做婚纱摄影的，一般都是以白色【sè】占据大部分【fèn】，也可【kě】以填充一点红色蓝色，如果使【shǐ】用黑色【sè】，灰色这样的颜色，就会觉【jiào】得很奇怪，很想马【mǎ】上关掉【diào】网站，不会有看下去的欲望【wàng】。赢商网【wǎng】络建议网站底部要保持简【jiǎn】洁，不【bú】要做【zuò】太多乱七【qī】八糟【zāo】的东西，其【qí】实【shí】做上【shàng】友情链接就够【gòu】了，最多在底下【xià】再次强调【diào】一【yī】下你公司的联系方式。
网页版面设计步骤和布局技巧
一、设计网页分辨率选择
随着电脑的发展，显示器是越来越大，分辨率也是【shì】越来越高，为了【le】照【zhào】顾所有【yǒu】不同显示器【qì】的用【yòng】户，把网站【zhàn】的制作尺寸规范【fàn】就定在1280*768下，网页宽度保持在1200-1004以内【nèi】，高度【dù】还是以根据需要制【zhì】作【zuò】的内容在定，如果只想网页只在一屏内【nèi】显示，不要上下滚动条， 一般高度是【shì】600-635像素之间, 就不【bú】会出现垂直滚动条。很多人【rén】浏览网站时间比【bǐ】较长就【jiù】会【huì】感【gǎn】觉【jiào】到眼【yǎn】睛【jīng】疲劳，当然【rán】，这不【bú】仅仅【jǐn】是时间的问题，有的时候还可能是因为我们没有选【xuǎn】择到一个比【bǐ】较好【hǎo】的【de】分【fèn】辨率。目前网络上的网站很多使【shǐ】用的都是778个【gè】宽度的【de】像素，但【dàn】是事实上像【xiàng】素【sù】低【dī】于800就已经让人【rén】感觉到非常【cháng】的压抑【yì】了。所以说我们在做网【wǎng】站的时候一定要选【xuǎn】择一【yī】个比较【jiào】舒适的分辨率【lǜ】，这样人们在浏【liú】览网站的时【shí】候才【cái】不会带来眼睛的负担【dān】，从而能够在【zài】网站上面停【tíng】留的时间更长。从【cóng】以上数据【jù】可【kě】以看出，分辨率越【yuè】高页面【miàn】尺寸越大。浏览【lǎn】器的工具【jù】栏也是影响页【yè】面尺寸的原因【yīn】，目前【qián】的浏【liú】览器的工具【jù】栏都可以取消【xiāo】或者增【zēng】加，那么当你显示全部的工具栏和关闭全部【bù】工具栏时，页面的尺寸是不一样的。在网页设计过程中【zhōng】，向下拖【tuō】动页面是惟【wéi】一给网页增加【jiā】更多内【nèi】容(尺【chǐ】寸)的方法。但我【wǒ】想提醒大家，除非你能肯定站点的内容能【néng】吸引大家拖动，否则不【bú】要让访问者拖动页面超【chāo】过三屏。如果需要在同【tóng】一【yī】页面显示超过三屏的【de】内容，那么你最【zuì】好【hǎo】能在上【shàng】面做上【shàng】页面内部连接，以【yǐ】方便访问者浏览。
二、适当的穿插图片广告
图片和文本是【shì】网【wǎng】页的两大构成元素，缺一不可。如何处理好【hǎo】图片和文本的位置成了【le】整【zhěng】个【gè】页【yè】面布局的关键。而你的布局【jú】思维也将体现在这里。现在【zài】互联【lián】网【wǎng】在人们生活【huó】中普及，所以网络上也有各种【zhǒng】各样的【de】铺天盖【gài】地【dì】的广告【gào】，但是很多【duō】广告却骑到了【le】负面作【zuò】用，让人们看着感觉特别的烦恼。一段文字和一张图片，甚【shèn】至一个图标【biāo】……在【zài】你进行布局的时候，由于你的素材并【bìng】不是立刻手到擒来，你【nǐ】的布局总是喜欢用一【yī】个个矩【jǔ】形来代表一段文字【zì】或一张图片【piàn】，这本没有错，但这【zhè】个做法也会让你陷入“框架陷阱”。所【suǒ】以在插【chā】入广告的时候一定要合【hé】理的设计【jì】，当然【rán】，最【zuì】重要的就是广【guǎng】告的画面【miàn】一定不要影响人们【men】对【duì】网站的阅读，很多广告都是【shì】浮窗式的【de】，但是一【yī】定要保【bǎo】证这些广【guǎng】告不会覆盖出网络上【shàng】面的文字。而【ér】且广【guǎng】告的【de】数量一【yī】定不要太多，这样【yàng】也【yě】就不会【huì】使人们感到反感。
三、做好焦点
为什么摄影师拍的照片看着很【hěn】舒【shū】服，因【yīn】为他们可以【yǐ】找到焦点。但任何一件好【hǎo】的平【píng】面作品，一【yī】定是有焦点的。就像我们【men】谈到过，十【shí】字准星型的视【shì】觉结构习惯将【jiāng】焦点【diǎn】置于【yú】中心位置，要制造一【yī】个焦点的办法【fǎ】有很多【duō】，简言之，就是制造冲突【tū】。想【xiǎng】象你在一个人【rén】群稀疏【shū】的大厅，突【tū】然有两个人高声争论什么，这时引起了几个【gè】人【rén】围观【guān】，这个情景【jǐng】就在【zài】原本安静的【de】人流中制造【zào】了一个关注焦点。同样，在视【shì】觉领域也是如此，利用对比冲【chōng】突应【yīng】该【gāi】是一种【zhǒng】最有效的【de】制造焦点的方【fāng】式【shì】。
对于【yú】焦点的认【rèn】识我【wǒ】们也不应【yīng】局限于是一个“点”，它是一块正吸【xī】引你的视线所投【tóu】射的区【qū】域。它还可以分为实焦点和虚焦点【diǎn】，实焦点是在虚焦【jiāo】点【diǎn】之上更为精准的投射存在。除了【le】色彩，其【qí】他任何属性【xìng】都可以经由对【duì】比形成焦【jiāo】点【diǎn】，这时你要做的，就【jiù】是【shì】注意焦点不应【yīng】太多。也因【yīn】此，除了焦点以外，设计【jì】中的其他元素都要保持【chí】一种【zhǒng】相似性。这里我【wǒ】们【men】总【zǒng】结一下能用于进行对比属性，这些属性之【zhī】间【jiān】形成的对【duì】比越【yuè】大，冲【chōng】突越大。
空间【jiān】：充满-空置、积极【jí】活跃-消极被动【dòng】、前进-后【hòu】退、近-远、二维-三【sān】维、封闭-开放
形式：简单-复【fù】杂、美【měi】-丑【chǒu】、抽象-具象、清晰-模糊、几【jǐ】何【hé】形【xíng】式【shì】-有机形式、直线-曲线、对【duì】称-非对称【chēng】、完整-破碎
结构：井井有条【tiáo】-混乱【luàn】无【wú】序、排【pái】列成序-随意放置、衬线字体-无衬线【xiàn】字体、机【jī】械-手【shǒu】工
纹理：细-粗、平滑-粗糙、反光-哑光、滑-黏、锐-钝
位置：顶部-底部、高-低、右-左、上-下、前-后、有节奏【zòu】-随意、单独-分【fèn】组、接近-远离【lí】、中心【xīn】-边【biān】缘、整齐【qí】排列【liè】-互不关【guān】联、内【nèi】-外
方向【xiàng】：垂直-水平、垂【chuí】直线【xiàn】-对角线、向前-向后、稳定【dìng】-活动【dòng】、内聚-分散【sàn】、顺时针方向-逆时针方向、凹【āo】形-凸形、正体字-斜【xié】体字
尺寸：大-小、长-短、窄-宽、扩大-收缩、深-浅
颜色：黑【hēi】色-彩【cǎi】色【sè】、亮-暗【àn】、暖色-冷色、明度-暗度、天然【rán】-人造、饱和(深色)-无色(素色)
密度：透明-晦暗、稠密-稀薄、液体-固体
重力：轻-重、稳定-不稳定
设计师在做设计时，其实并【bìng】不会将这些【xiē】规【guī】范提【tí】前设【shè】定在大脑中，而是经过经验的积累【lèi】而形成一种潜在的【de】直觉，这【zhè】份清单【dān】的意【yì】义并【bìng】不是需要你记下它，而是浏览【lǎn】完【wán】后，在设计【jì】的任何场合的提醒。比【bǐ】如一份作品【pǐn】完成后，可以看看究竟焦点是【shì】否足够吸引，哪些元【yuán】素需要进【jìn】一步调整。焦点突出的【de】前提是非焦点区域的元素【sù】尽量保持一致【zhì】。制造冲【chōng】突【tū】似乎手到擒来，但是要保【bǎo】持一致【zhì】却【què】需要步步为营【yíng】。
版权所有：深圳市网商在线科技有限公司
友情链接:
