网页设计布局技巧

网页设计布局技巧

以下就是网页设计布局技巧等等的介绍,希望为您带来帮助。

网页设计布局技巧

第一、页面的大小在设计的时候要合理。因为页面的大小与显示器的分辨率有关的。因为页面的局限性就是因为不能突破显示器的范围。页面的尺寸越大,分辨率就越高。而且浏览器的工具栏也会影响页面的大小。因为浏览器的工具栏是可以关闭以及增加的,所以显示工具栏的时候,以及关闭工具栏的时候,显示的页面大小也是不一样的。但是在页面设计的时候,可以向下拖动来增加内容。但是在设计的时候要注意,一定要将重点内容优先展示在网站上,这样才可以吸引用户往下拉,浏览更多的内容,而且页面的长度最好控制在三屏内。

第二、页面的整体造型的设计,简单来说就是页面的形象。页面在图形以及文字之间的接合应该是有次序的。虽然显示器以及浏览器都是矩形的,但是页面设计可以运用更多的图形,例如圆形、菱形以及三角形等等。不同的图形,代表的意义也不一样,给用户的感觉也不一样。矩形看起来就比较正式规则,很多政府网站都是使用矩形设计的。圆形看起来就比较柔和、温暖、团结等等,时尚的网站一般都会采用圆形来设计页面。而三角形代表的是力量,权威以及侵略等等。不同形状的图形代表的意义是不一样的,现在很多网站在图形运用的时候都是结合多种图形对页面进行设计。

第三、页眉的设计,这个主要是确定网站的主题的。其内容包括网站的标题,这样用户访问网站的时候,就可以知道这个网站的内容。页眉的设计也是页面设计的关键,因为影响到页面下面的设计以及整个页面的设计风格。

第四、文本在页面设计中通常都是以块或者行出现的,而它出现的位置决定着页面的布局。在以前的网站建设中,因为页面设计技术的局限,文本设计的位置缺乏灵活性,但是随着技术的进步,文本的设计可以根据自己的需要设置到更多的位置上。

第五、图片的设计也是构成页面的元素之一。处理好图片和文字的位置是页面设计布局的一个关键,而设计师的布局思维也是通过这一个方面体现出来的。

第六、页脚的设计要与页眉相呼应,页眉的内容是网站的标题,而页脚放置的内容就是企业的信息。

网页布局技巧

最开始,网页呈现在你面前的时侯,它就好像一张白纸,需要你任意挥洒你的设计才思。在开始的时侯,你需要明白,虽然你能控制一切你所能控制的东西,但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯,那么你就可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案,但如果你是初学者,那么最好明白网页布局的基本概念。

1.页面尺寸:页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页面范围就变得越来越小。一般,分辨率在1024×768的情况下,页面的显示尺寸为1007×600;分辨率在800×600的情况下,页面的显示尺寸为780×428个象素;分辨率在640×480的情况下,页面的显示尺寸则为620×311个象素。从以上数据可以看出,分辨率越高页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因,目前的浏览器的工具栏都可以取消或者增加,那么当你显示全部的工具栏和关闭全部工具栏时,页面的尺寸是不一样的。

在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家,除非你能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么你最好能在上面做上页面内部连接,以方便访问者浏览。

2.整体造型:什么是造型,造型就是创造出来的物体形象。页面的整体形象,应该是一个整体,图形与文本的接合应该层叠有序,有机统一。虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它形状以及它们的组合:矩形,圆形,三角形,菱形等。

对于不同的形状,它们所代表的意义是不同的。比如矩形代表着正式,规则,你注意到很多ICP和政府网页都是以矩形为整体造型;圆形代表着柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量,权威,牢固,侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形则代表着平衡,协调,公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义,但目前的网页制作多数是结合多个形状加以设计,其中又以某种形状为主。

3.页头:页头又可称之为页眉,页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将涉及到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片或公司标志以及旗帜广告等。

4.文本:文本在页面中多数以“行”或者“块”(段落)出现,它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限,文本放置位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置到页面的任何位置。

5.页脚:页脚和页头相呼应。页头是放置站点主题的地方,而页脚则是放置制作者或者公司信息的地方。你能看到,许多此类信息都是放置在页脚的。

6.图片:图片和文本是网页的两大构成元素,却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。

7.多媒体:除了文本和图片,还有声音,动画,视频等等其它媒体。虽然它们不是经常能被利用到,但随着动态网页的兴起,它们在网页布局上也变得更重要起来。

网站设计对于各页面排版布局专业技巧

第一部分:首页排版布局

网站的首页是整个网站中权重最高的一个页面,起到统领全站的作用,用户来到网站后着先看到的就是网站的首页,所以,网站设计师在设计该面的的排版和布局时应该从全局把握。

网站的首页排版布局专业技巧:必须具有代表性和吸引力,突出网站的个性特征,以网站建设的主题为核心,向用户展示企业的优势,突显企业的特色。内容和版块划分应主次分明,同时符合用户的浏览习惯,根据自上而下,从左到右顺便按排页面的内容。

第二部分:内页排版布局

网站的内页包括:列表页、内容页和着陆单页

网页设计布局技巧

1、列表页

风站的列表页指的是网站内容的简索页,分为图片列表和文章列表页两种。其中图片列表页展示的是企业发布在网站上的产品和相关成功案例,文章列表页展示的是企业的所有新闻和行业动态等文章的标题。

列表页要设计成将最新最重要的内容排在列表的最前面,可以根据网站栏目的关关键词进行分类。更表页的显示规则:图片列表的显示应以缩略图的形式配以说明文字,文章列表的赤示应以文章了标题配以关链词显示,较长的标题或设计为不宛全显示。

2、内容页

网站的内容页就是网站内容的详细展示页,内容页的内容对于seo优化起到非常重要作用,它支撑着网站的权重和流量。网站的内容页每更新一次,都会为网站带来新的用户,被用户和搜索引擎喜欢的内将会给网站带来某一特关键定词的排名。

网站的内容页需要对文章的标题和关键启突出显示,以引起读者的注意。内容页的页面不要太常,过长的页面需要做好分页。内容页的在配图片时需要对图片进行alt标签设置,位置应居中显示。

3、着陆单页

网站的着陆单页是针对某个关键字(或短语)做过搜索引擎优化的页面。着陆单页的设计主要针对的是网站的竞价排名广告,该页面引导潜在用户点击着陆页广告,为用户显示与着陆页标题相关的扩展内容。

着陆单页在排版布局时不仅需要对推广的产品进行专业,创新和可信任的描述,还需要为春配上相应的图片,并为图片添加alt属性,alt属性要以着陆单页所优化推广的关键词为主。另外,页面使用的图片不可以过大,否则将会影响网页的打开速度,对用户体验不好。

web网站设计布局技巧

1、注意划分布局,网站结构越简单,用户浏览时就越方便。

网站各个部分都需要发挥各自的作用。对于用户而言,每个部分都有各自存在的理由,并能得到相应的最终结果。布局需要帮助强调其内容着重显示该部分最重要的信息。实际上,一个页面并不需要太多调用按钮,因此每个内容都应推动到最终“我可以在此实现什么目的”。思考一下,你可以为一个简单的目标构想到的最简单的布局,并开始添加所需组件。最后你会惊喜的发现简洁也并非易事。

2、选择主题颜色,使用有限的色阶和色调以免产生视觉疲劳。

选完要使用的一系列字型后,你应开始研究 UI、背景和文本该用什么颜色。关于颜色,我建议在处理常规用户界面是用色及色调需简洁。根据元素功能在设计UI 时保持一致性非常重要。除UI外,插图或图形细节部分只要没有干扰组件功能的话,在用色方面也没什么限制。

3、注意细节,正在进行的游戏项目:细节视图。

这条也算是老生常谈了,但并非始终在成品中得到应用。根据项目的概念,“关注点”也会有所不同。

4、提高设计作品清晰度,避免出现像素模糊的现象,尝试正确设置笔触效果和背景之间的对比度或背景颜色。

除美学考量之外,有些共同的问题需要予以避免,从而创造出一个干净正确的作品。尝试提高设计清晰度时应注意以下几点:梯度条带、模糊的边缘、字体渲染选项(部分字体取决于字体大小,最好在特定的渲染模式下查看)以及与背景融合的笔触效果。

以上列出了一些基本注意事项,但实际上需要注意的问题还有很多。务必以整体视角检查设计,看看是不是都非常完美,然后再单独分析每个组件还有什么问题。

5、整理 PSD。

如果你通过 Photoshop 进行设计,那么这点至关重要(结合网格使用)。无论项目有多大,有多少设计师参与其中,你都需要保证文件干净。这样就能保证不同部分都能轻松导出,从而提高设计流程的速度,并能处理与其他设计师共享的文件。

6、开发过程中跟进设计。

如果您在广告公司中工作,你必须明白,虽然你刚刚完成的一个项目已经投入开发,你不得不参加另一个新项目的设计,这是家常便饭。大家普遍认为 PSD 和样式表提交后就万事大吉了,这是不对的,其实一切还刚刚开始。

如果你真的关心自己的设计和交互理念是否完全贯彻,可以实时与开发者友人沟通,并尽量提供帮助,以便达到至臻至美的效果。重新思考组件上已建的交互模式,并看看是否可以进行改进,这点至关重要。

12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章