网页版面设计设计误区

1、网页的版式设计应注意哪几个方面？与平面设计相比有哪些共同点和不同点

两者共同点：
1、都需要良好的视觉表现；
2、设计师需要有良好的审美能力；
3、基本都是用同一类软件；
其实网页设计应该属于多媒体设计的范畴，多媒体设计是从属于平面设计规律而又有很多不同的一个领域，网页除了注重设计外，更多的是考虑浏览的使用体验，打工速度，程序逻辑，SEO优化各方面的知识，知识面和侧重点跟平面设计有很大的不一样。一个好的平面设计师不一定就能做好网页设计，网页注重交互性、操作性跟浏览性。如果细分出来主要差别有一下几点：
1、设计核心的差别
平面设计的核心是品牌。它要以品牌为出发点去设计，要在视觉上100％体现品牌的魅力。
网页设计的核心是用户。要以用户的操作习惯为出发点去设计，换句话说也就是要设计得人性化，让用户浏览和操作要方便。
2、字体使用有限制
平面设计的字体一般不受限制，为了表现效果，相关的字体中以任意使用。
网页设计的字体则受到很多的限制，一般中文字体只能用宋体、微软雅黑。
3、颜色运用的区别
平面设计可以使用成千上万种颜色，换句话说可以使用所有颜色，但是网页设计不行！网页设计中规定相关安全色。
4、处理与制作方面的差别问题
传统平面设计的作品大多是以印刷的平面形式表现。
网页设计作品则是透过显示器表现，并且在传输的过程中受到网路频宽的限制。网页设计不仅仅是在做设计，更多的是要考虑网页的打开速度、兼容性等问题。所以有时候不得不为了照顾这些特殊的要求而牺牲美观。
5、图片格式和像素的差别
平面设计需要的图片格式一般为 PSD CDR AI EPS 等比较大的源文件格式 或导出的JPG 一般像素（分辨率）大于300的高清晰图片。
网站设计 一般为GIF 或PNG 或JPG 一般像素（分辨率）小于72的）。
6、目的差异
传统平面的设计作品是以向人们传达某种资讯或诉求为目的。
网站制作的设计必须是配合网站的内容设计，而不是单纯地只为表现艺术而设计。除了拥有平面设计作品的功能以外，还有重要的引导和连接功能，也就是网页具有很强的可操作性和互动性。

2、网站版面设计要注意哪些问题？

需要注意以下四点：

1.加强视觉效果
2.加强文案的可视度和可读性
3.统一感的视觉
4.新鲜和个性是布局的最高境界。

设计首页的第一步是设计版面布局。
就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。
虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。

版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。

布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。
你可能注意到：“最适合”是一个不确定的形容词，什么才是最适合的呢？抱歉的是阿捷不能也不可能给您一个完整的正确的答案。就好比有人希望知道成功的秘诀是什么，成功者只能建议您用什么方法，什么途径才能最容易获得成功，而不可能有一步成功的"秘诀"告诉您。

我们在设计思考系列文章第四篇讲过站点整体的创意，版面布局也是一个创意的问题，但要比站点整体的创意容易，有规律的多。让我们先来了解一下版面布局的步骤：

一.草案
新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的"景象"画上去(我们建议您用一张白纸和一支铅笔，当然用作图软件photoshop等也可以)。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。

二.粗略布局
在草案的基础上，将你确定需要放置的功能模块安排到页面上。(注：功能模块我们在"首页设计-引子"中提过，主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意，这里我们必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。

三.定案
将粗略布局精细化，具体化。（靠你的智慧和经验，旁敲侧击多方联想，才能作出具有创意的布局。）

在布局过程中，我们可以遵循的原则有：

1、正常平衡---亦称"匀称"。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。
2、异常平衡---即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。
3、对比---所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。
4、凝视---所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。
5、空白---空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。
6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。

以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。比如，
○网页的白色背景太虚，则可以加些色快；
○版面零散，可以用线条和符号串联；
○左面文字过多，右面则可以插一张图片保持平衡；
○表格太规矩，可以改用导角试试。
经过不断的尝试和推敲，你的网页一定会亮丽起来的哦:)

看看我们经常用到的版面布局形式：
1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。

2."口"型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。

3."三"型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。

4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。

5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。

以上总结了目前网络上常见的布局，其实还有许许多多别具一格的布局，关键在于你的创意和设计了。

3、网页设计中要注意什么？

网页设计要注意以下几个方面：
1、网站设计内容问题
内容是所有网站的灵魂，也是客户关心的东西，打开因特网看看企业网站，我们很容易发现，大多数中小企业网站栏目划分趋于一致：公司简介、产品介绍、联系方式等，在版式设计上也基本上是上下分栏、左右分栏等方式，在内容上要从客户考虑，要了解客户想从你页面上了解些什么，总之要贴近客户。
2、网站设计技术问题
首先应该说明的是，我们并非鼓动企业在自己的网站中加大技术含量。实际上，最重要的是所使用技术在多大程度上实现了预期的功能，或者说所要的功能需要什么样的技术实现比较经济划算。而我们在与企业接触中，常常碰到这种情况：网站中使用了先进的技术，当然进行了大笔的投资，但实际上所实现的功能通过其他方式，很低的投入就可以实现！但是企业并不了解这些。
3、网站设计交互问题
您的网站是否实现了与客户的交互，在多大程度上实现了这一功能，值得您仔细考虑，在我们接触的客户中，甚至有的客户抱怨：他的信箱至今还没有收到mail！经过我们的检查，是因为留言簿中有关信息提交的设置有问题！使得与客户之间的交流出现很大的问题，这也是很多企业应该注意的问题。另外在设计上应注意什么
1，对每一个超级链接点击之后采用新开窗口还是直接跳转，必须认真对待。如果用户点击一个link之后是要放弃当前页面开始新的体验，则应用直接跳转。如果用户点击link是要了解更多的信息，但是当前页面的信心仍然有用，则应新开窗口。
2，在每一个用户可能需要帮助的地方提供帮助信息或帮助按钮。完善的帮助系统是一个产品，网站成功很重要的因素。
3，承诺问题，不要轻易对你的用户承诺什么，但是一旦承诺了，就要尽最大努力去兑现。在首页规划和网站设计中最为突出的问题是：1）首页规划和栏目设置不合理。主要表现在栏目设置有重叠、交叉、或者栏目名称意义不明确，容易造成混淆，使得用户难以发现需要的信息。2）重要信息不完整问题。企业介绍、联系方式、产品分类和详细介绍、产品促销等是企业网站最基本的信息，但为数不少的企业对这些重要信息不完整，尤其是产品介绍过于简单，有些甚至没有公布任何联系方式；上述几个问题只是企业网站设计问题中的部分问题，还有考虑浏览目标群体，从营销方式设计都应该是现在企业网站所在考虑的问题。每一个细微的不足和问题，都有可能失去用户，或者根本无法获得被用户发现的机会，结果最明显的表现就是访问量很小，或者由于得不到有价值的信息和服务，访问者的转化率很低，无法取得最终的收益。

4、企业网页设计时，网站页面设计需要注意那些问题？

首先

网站页面设计当中，产品信息的主次很重要，这会直接影响用户浏览网页的便捷性。

所谓的主次设计就是要把最重要的内容或产品放到最显眼的地方，次要的功能和产品就放到一般的位置上。

这样做是因为，人们通常访问一个陌生网页的时候，基本是扫描性浏览，只为捕捉他们认为有用的信息，所以主次分明了，才能让浏览者第一时间内抓到自己想要的东西，也就是你的网站主要想要表达的内容。

其次

网页的功能性也是很关键的，一般网站的主要功能就是传递信息了，所以网站的建设要将这点最大化，不要过分追求网页的酷炫效果，而去用一堆动态图像啦，或者过长啦之类的，这样一来会使网页出现卡顿的线下，和过分冗长的现象，容易让人失去浏览的耐性。

也就是说图文比例要恰当，表达要有重点，要把最需要表达给浏览者的内容强调放大。比如通过鲜明的颜色，或者好看的艺术字等方法进行强调。

最后

网站页面设计师要了解并意识到浏览器的兼容性，浏览器对于运作环境来说是很挑剔和难以预料的。

如果设计的网站只能运行在的几种网页浏览器，那是不够的，设计者需要尽可能在多种浏览器下测试，达到一个最好的效果。

以上就是设计小能手redtrans_cs小姐姐的分享了，希望有帮助~

5、网页设计有哪些细节需要注意

　　1、切勿随意添加栏目：作为美工，这一行为是要避免的，如果随意给界面添加表单、链接、“更多”等需要后台开发才能支持的功能，这样随意添加，就无形的更改了网站最初的需求，增加了项目的工作量，会影响网站的整体功能，同时也增加了后期测试的工作量，另一种可能就是不符合用户的需求，导致后期还需要重新修改。
2、切勿随意篡改设计：没有按照栏目的逻辑来设计页面，也没能为网站的内容进行良好的呈现。这种行为只是单纯的为了自己能在网页设计时方便，从而随意的消减了很多网站的内容。
3、随意切图，不考虑页面动态扩展：这个一般是美工技术含量不够导致的。切出的图片只能用在一个界面尺寸里，换个页面，就需要重新切图，没有任何扩展性，要结合响应式网页设计的原理，进行合理切图。
4、图片好看，但是没有实在的意义：给一个美工一个新闻主题，让他给做一个Banner，但是做出来之后，和新闻主题没有任何的关系，仅仅是好看。还有一些美工，更加对工作不负责任，只是把一个图片做了一下PS，这样对网站的整体效果都是有害的。
5、整站界面风格：在后期维护网站的阶段，美工们在制作图片时，没有考虑当前网站的风格，随意变换图片基本色调，在网页色彩搭配设计时，不合理配合网站整体风格，会影响网站后期的优化工作。

6、网页设计应该注意哪些事项

方便快捷就好啦！后期管理一定要简单，例如：pageadmin和discha都不错、简单、方便直接，下载就能轻松做网站。

7、如何避免网页设计中常见的8大错误

字体使用过多:使用两到三种字体，让您的网站易于阅读并与您的品牌相得益彰; 我们建议使用无衬线字体。

过度使用关键词:关键词选得自然并且人文一些。如果您的文字内容很受读者青睐, 搜索引擎自然也会乐于推荐。

过多的引导方式：坚持一个明确的, 让您的用户可以以最少的点击量来完成的请求。

网站的背景音乐：邀请您的访问者点击“播放”功能来听一首歌, 把“暂停”键放在显而易见的位置上。

使用业余图像：使用真实的图像会看起来更专业!多花些时间（或者银子）在您的产品，商店和您的团队成员身上！

网站篇幅过宽：在您的网站使用垂直滚动条，切勿使用水平滑块！

满屏的留言互动板块：创建一个可帮助您体现网站主要目标的广告牌。

信息全部堆砌在主页上：简化主页。包含两到三张美丽的图像，清晰的行动口号，精心编写的文本，准确地描述您做的什么。为您网站的详情页保留有关您的业务和服务信息。

望采纳谢谢~~~~

8、平面设计与网页设计之间的差异性

平面设计和网页都是设计，但区别又是那么大，那不就与大自然中的猫和老虎一样嘛，它们都属于猫科动物，但又不是同一种生物，有着很大的差别。现在就让我们来分析一下同样作为视觉传达设计，她们之间的差异性。

1、视觉元素

在色彩方面平面设计与网页设计使用的色彩模式完全不同，平面设计因为后期的实现依赖于印刷，所以采用CMYK的色彩模式，而网页根据其显像方式使用RGB的色彩模式。平面设计时的色彩运用注重视觉的冲击力及视觉流的引导(在这点上与网页设计中的BANNER设计相类似)，而网页设计(产品类)更注重的是信息结构关系的梳理，如果将色彩运用的过多过强，很容易引起视觉的疲劳感。

我们平时在设计过程中，平面设计的字体选用更为自由一些，不用担心后期实现的问题，所有的文字最后都会输出为图形进行印刷，而网页设计就需要考虑的更为全面，并且在字体的选用范围上也很小，为了让输出的成品大小不对服务器造成压力，基于html的特性，所有字体都是根据用户操作系统内默认字体而定的，当然近年随着技术的沿革与发展，这个差距也逐步在缩小，目前通过html5的API可以实现个性化字体的使用而不需要将个性化的字体最终输出为图形，在不增加后端压力的同时，大大提升了用户体验，非常赞。

从图形使用上，平面设计比网页设计丰富，表现方式也多样化，特别是对于产品类的网页设计，模块化的设计思路更为明显，在视觉表现上也是如此，平面对于图形的表现是不需要考虑到后期的实现的，在一点上是有目共睹的。在来说一下咱们设计时使用的尺寸单位问题，平面设计在使用尺寸标注时都用的是物理尺寸的概念，比如英寸，厘米，毫米等，而网页使用的像素。

2、呈现方式

3、信息载体

4、浏览方式

平面设计的属于渐进式的浏览方式，无法对整个浏览的'过程进行多样化串联，网页设计拥有滚动条下拉、按钮链接跳转等多样化的浏览信息方式，在拥有同样一种信息架构的条件下，信息之间的串联性更为丰富，用户选择信息的自由度更大，但平面设计也自然有其优势所在，比如平时我在设计照片书这类产品的时候，就很明显的发现，这一类的产品在电脑显示器上进行翻阅，不如印刷成为一个真实的书本来翻阅感受要更好一些，并且更具有收藏及纪念意义。

5、信息传播

平面设计属于比较传统的信息媒介设计，一般会通过张贴、销售、邮寄派送等形式进行传播，这样传播的方式范围小且成本较高，相对而言在这方面网页设计的信息传播能力却非常的强，但依赖于第三方媒介的支持，平面设计却拥有更为广泛的受众人群，不同的年龄层对于纸张或书本的信息接受能力总是强于网络媒体的，毕竟网络信息获取的将会存在一个学习成本，在今后网络信息的不断普及以及终端媒介用户体验的不断提升，在受众人群方面在我看来差距会越来越小。

9、网页设计的设计误区

<