网页设计工作中容易出现的问题

网页设计工作中容易出现的问题

渐变和高光过于生硬、阴影的距离和不透明度太高、对齐方 式偏差几个像素、上下左右边距距离太小、元素和背景的反差不够造成元素清晰度不够等几个问题是常见的设计问题。下面介绍网页设计工作中容易出现的问题，希望对您有所帮助。

问题1：设计过程中遇到困难，随意调整设计方向。

画好了草图就要按照设计方向坚决执行，这样才能保证前期的创意阶段的工作不被浪费。很多设计师前期的创意构思都很有想法，但是一旦开始设计，途中遇到寻 找素材或者技术方面的困难，或者突然发现某一个素材很不错，很漂亮，马上抛弃前面的整个创意，开辟一条新路从头开始，但往往做到半中间就再做不下去了，导 致设计总是半途而废，情绪上不断受挫，焦躁不堪。而我们如果看过高手的设计过程，比如文子的光大银行的设计视频，我们就会发现高手从来都不轻易的改变已经 设定好的设计方向，并且总能把我们看来完全用不着的素材变废为宝，从而拥有化腐朽为神奇的本事。千万不要花费大量时间去寻找完美的、拿来不用调整就能用的 设计素材，能找到这样的素材的几率比中彩票还要低，而是要不断提高我们将看上去和整体设计毫不搭边的素材融合进整体设计的能力。

问题2：细节不够讲究，显得粗糙。

一些设计师给我发来个人作品让我给说说建议，我发现其中共同存在的问题就是设计中细节做的不好。渐变和高光过于生硬、阴影的距离和不透明度太高、对齐方 式偏差几个像素、上下左右边距距离太小、元素和背景的反差不够造成元素清晰度不够等几个问题是常见的设计毛病。这些问题虽然也涉及到技术的问题，但是最重 要的我认为还是用心不够、认为做到差不多就行了的态度问题。这里我向大家推荐Dribbble 和PremiumPixels这两个网站，这其中的设计作品无论哪一个细节都是非常完美、无可挑剔的，下面是我随手从这两个网站中拿出来的作品，大家应该能从这里理解网页设计就是细节的艺术这句话的含义。

问题3：技术不过关，创意无法得到实现。

只有通过大量的设计和练习才能尽可能多的掌握具体的技术。但是无论是跟着网上的设计教程学习，还是通过研究别人的PSD文件也好，不能做过一遍就过去了。一般来说我们经常需要需要通过教程掌握的是如何处理手头的素材，将其融合于整体的场景之中的思路的方法，看看高手是如何通 过使用调整图层、自由变换、色彩范围选择等一系列的技术去实现需要的效果，而不仅仅是按照教程做一遍就完了，下次遇到需要自己动手创建场景的时候依然无所 适从。如果你已经有了一定的PS基础，应该多练习些图标和场景的创建，认真研究，你一定能学到很多东西。

问题4：跳过网站功能及信息架构上的研究，直接开始视觉创作。

网站的功能和信息架构是 网站的核心，一个网站不是单纯的让访问者去感受视觉上的美观，美观永远是第二位的，而功能性却是第一位的。一个企业网站是为了展示企业的形象、售卖企业的 产品和服务;一个门户网站是为了更好的提供信息内容，一个个人博客是为了分享个人的观点，树立个人品牌等等，保证了这些功能更好的实现了之后才应该去考虑视觉上是否美观的问题。

更重要的是，网站功能以及它的信息架构对于视觉是有非常重要的影响的，这点我在《网页核心内容对视觉表现的影响》这篇文章中有较为详细的论述，在这里就不再展开了。

问题5：缺乏对网站整体风格的思考和把握，做到哪里算哪里。

这个问题也非常常见，以下是一个设计师发给我的问题及我的答复，应该说非常典型的反映了这个问题。

“想请教你一下，一个学校的网站，客户说要做活泼一点，怎么搞呀?我设计了一个头部，我发给你看一下啊!指点一下 但是下面我就不知道怎么布局了，现在头都想大了。”

答复：这是一个没有系统的考虑整体风格而急于动手的例子。

问题主要由以下几个方面：

一、布局上，Banner割 裂的边缘限制了视线的拓展，显得死板而不够透气。其他元素也是大框套小框的思路。总体的布局思路没有逃脱条条框框的限制，看得出来，整个设计是思路没有打 开却急于动手的表现。要做到活泼的设计，不是用一张现成的关于儿童的图片放上去就行了，要让个的设计元素往这个方向走，比如布局，比如色彩，比如质感，比 如插图和图标的使用，比如字体的选择等等，所以你的问题是完全没有系统的思考这些问题，还没找到答案就急于往前走，结果肯定是刚刚开始就感觉无所适从。

二、再来说说具体的问题，Banner的设计在整个页面中通常起到非常重要的作用，是视觉的焦点，先不说你选的这个图片方向对不对，但这个设计看上去过于小气，原因是图片中的元素视觉比重都差不多，没有重点，没有主次。其次是Logo文字以及宣传语文字的设计，感觉太散、太单薄，需要加强他们的视觉比重和气氛感受。Banner底部的弧形边缘不仅没有起到给整个气氛加分的效果，反而割裂了Banner的设计，看上去很不美观。

如何避免盲目开始，途中无从下手的问题出现?很简单，画草图。虽然我个人有时候也会省略画图的步骤，但每次至少会在 PS 中做一个主页的设计方案，其中包括需要放置的信息内容、排版、色彩方案以及设计方案的说明文字。但我发现相较于纸和笔来说，这样的方式还是限制了创意的拓展。所以还是强烈建议大家在开始设计之前画草图。很难想象，不通过画草图的方式能做出来下面的设计效果。

但是纸和笔的方式也有它的缺陷就是在设计排版方面不能精确的定位元素的空间。所以为了弥补这个缺憾，建议大家使用 960 像素网格系统的草图稿纸。纸和笔的自由保证了创意的拓展，而不用纠缠于实现方面的技术问题。

另外，在平时的学习积累中，多从整体风格上分析优秀的设计作品是如何考虑和实现的，可以尝试从以下几个方面分析网站风格：一、概念元素：背景、修饰图形 等;二、具象元素：文字、照片、插图、图标图形;三、关系元素：方向、位置、空间、重心;四、交互方式：节奏、运动方式;五、色彩方案。

网页设计制作思路细节

每天都有数百上千的网站在推出，这使得我们的站点在线上被访客和搜索引擎注意变得越来越困难。有一些人可能会使用一些不道德的手段来达到搜索引擎的高排 名，然而搜索引擎也不是省油的灯，他们会采取行动来惩罚你的站点。广州网站建设提醒大家：只有遵守游戏规则才能使你的站点走得久远。如果你想你的站点在搜 索引擎中更加的“流行”，并提高用户的体验，那么你就需要将一些网站设计的思路纳入你的建站考量。

细节决定成败。深圳网站设计行业的从业人员应该对此有所体会。很多时候，一个小细节的失误往往会毁了整个设计。这一点也同样适用于网站设计。那么，一个好的整站网页设计应该在细节上注意些什么呢?

网站排列，反差效果和色彩的等小细节的运用关系到设计的成败。在网站发布之前，要对相关细节进行仔细检查，以保证网站整体的简洁感。组织混乱，不够重视细节的网站会显得不专业，甚至会显得突兀。在下一个项目开始之前，整站网页设计师应考虑一下所有的小细节怎样能更好地做出项目。

字体效果

从头开始建站，字体的选择是最为困难的部分之一。为了保持设计的简洁性，不宜选用过多的字体，字体过多甚至会毁掉项目中大部分细节。

通过改变字体属性达到反差效果。在不使用其它字体的情况下，改变字体大小，粗细和颜色即可形成反差效果。通常，大多数网站只使用两种字体，这样排出的版面条理清晰，又方便用户阅读。

在使用字体前，应考虑字体大小和粗细。整个网站的常见条目的字体属性维持不变，标题使用同一种字体，大小和颜色，副标题则保持字体不变，大小，颜色，粗细 进行相应变化，内容文本使用不同于前两者的颜色，粗体字。为了方便查阅，可将网站不同部分的字体属性设置进行记录，这样可以保证页面与页面间的字体规格一 致。

排列

垂直和水平排列是简洁设计的首要关键。随意地排列元素不会营造出网站的简洁感和一致感，而这两个特点通常是非常优秀和专业的网站应该具备的。合适的排列有助于保持网站设计的层次感和一致性。

在处理图片和文本元素时，要注意整个页面是否水平对齐。位于页面顶部的各元素要水平对齐。底部的元素亦然。

页面的垂直排列同样要予以重视。各元素之间应具有相同的宽带，同时元素之间的空格距离亦然要保持一致。网站Jux在图片与网格布局的搭配上就做得很好，各个图片间不仅边距相同，并且不同形状的图片排列起来也堪称完美。

在整站网页设计过程中，对齐条目最快，最简单的方法就是使用网格。至于什么样的网格类型和大小的使用效果最佳，这并没有固定的规则。不过，有些类型的网格结构确实有助于达到理想的排列效果。

网格是由水平和垂直方向的直线交错形成的均匀小方框，类似于你上几何课用的网格纸。网格可用来进行定位和元素大小的调整，另外，柱状网格也是不错的选择。当然，自己创建网格或下载事先制作好的模板也是可行的。

颜色

使用少量的字体对设计有帮助。同样的道理，少量几种颜色也能起到相同的效果。在配色时，要注意每个样本的颜色混合。整个网站的颜色混合要准确，红色不仅仅是红色，甚至元素之间轻微差异都会显得不和谐。

建站时要记下所有颜色的值。对于颜色的差异，可用不同色调起强调作用，比如说，Netlife Research在坚持颜色一致这点上就做得很棒，整个网站使用了三种相同的绿色调。你的配色不必像这样简单，但是当你开始起草新设计时，要记住这个原则。

反差效果

网站上总有一些元素，比如图片，颜色或文字更能吸引用户的目光。有计划地为这些元素建立反差效果，能快速吸引用户注意。如果你想要站点的某个区域引人关注，那么就在该区域制造鲜明的反差效果。

通过颜色达到反差效果是最简单的方法之一。选定背景和文本颜色之后，可使用一些完全不同的元素来增强网站某个位置的吸引力。在这一点上，可参见 Doberman使用的极简主义。黑白两色是网站最基本的配色方案，胜在简洁可靠，不过添加一些黄色块元素更能达到强调的效果。而亮色与严肃的主题所形成 的鲜明对就很抢眼。此外，网站设计者在网站其它关键区域可添加蓝色形成其它的反差效果。

你也可通过其它手段制造对比效果，比如，字体大小和粗细的变化也能产生对比效果，并且有助于提升整体层次感。

一致性

网站设计中，最关键的细节就是保持所有元素一致。比如说，页眉和横幅图片尽量保持一致，导航栏条目要使用相同的词语，共同的元素使用相似的颜色等。另外，还要坚持自己的字体风格。如果有网格，务必要用起来。

网站光源的一致性，一致性是个很大的课题，应该能写一篇论文那么长，细节方面的一致性应该包括界面元素、文字阴影、图标等的光源。假设深色的标题文字用了向下的淡色投影表现内凹效果，那正文就应该避免用深色的文字向上投深色的阴影

图标面积的一致性，这也是一个一直难以避免的问题，而且有很多主观成分，最好的方法是整站网页设计的时候放到实际屏幕上以较远的距离查看，是不是有哪些会特别轻或特别重，然后再去调整尺寸文案，虽然这不是直接的界面设计元素，但是严谨、完整的文案也是给所有设计加分的。常见的问题有中文错别字、英文该大写的没大写、拼写错误等等。

静态网页设计开发的重要内容

静态网页设计开发有着哪些不同优势是需要大家多去了解的，静态网页所展现在大家面前的不仅是有着多种风格并且有着多种特色。静态网页能从多种方面展现出产品的独特意义。

静态网页的缺点在于其办理维护和交互功效方面的限定，静态网页的长处在于信息内容的稳固性，这为搜刮引擎在网上索引网页信息提供了方便。网站设置装备部署 接纳静态网页情势只是有助于搜刮引擎索引信息，但并不料味着只要是静态网页就肯定会被搜刮引擎收录，而动态网页就肯定不会被搜刮引擎收录。

常常有读者问我，在有关搜刮引擎优化方法先容时，总是夸大静态网页对搜刮引擎优化的紧张性，那么静态网页的长处和缺点有哪些?为什么很多网站喜好接纳动态 网页呢?动态网页有哪些长处和缺点?静态网页又是怎样实现的?诸云云类的题目另有很多，由于这些题目属于一样通常的整站网页设计设置装备部署底子知识，也是一些知识性题目。

什么是静态网页?静态网页有哪些特点?

纯粹HTML款式的网页通常被称为“静态网页”，早期的网站一样通常都是由静态网页制作的。也就因此.htm、.html、.shtml等为后后缀的。在 HTML款式的网页上，也可以出现种种动态的结果，如.GIF款式的动画、FLASH、转动字母等，这些“动态结果”只是视觉上的，与下面将要先容的动态 网页是差另外观点。

下面讲授网站将静态网页的特点扼要归纳如下：

(1)静态网页没有数据库的支持，在网站制作和维护方面事情量较大，因此当网站信息量很大时完全依赖静态网页制作方法比力困难;

(2)静态网页每个网页都有一个牢固的URL，且网页URL以.htm、.html、.shtml等常见情势为后缀，而不含有“?”;

(3)静态网页的交互性较差，在功效方面有较大的限定;

(4)网页内容一经公布到网站办事器上，无论是否有效户访问，每个静态网页的内容都是生存在网站办事器上的，也便是说，静态网页是实着实在生存在办事器上的文件，每个网页都是一个独立的文件;

(5)静态网页的内容相对稳固，因此容易被搜刮引擎检索。

可见，静态网页的缺点在于其办理维护和交互功效方面的限定，静态网页的长处在于信息内容的稳固性，这为搜刮引擎在网上索引网页信息提供了方便，由于这些静 态网页总是存在的，只要搜刮引擎凭据某个链接干系发明这个网页，就很容易抓取这个网页的信息。这就比如派出所对某个地域的生齿举行办理一样，对付常住生齿 总是比力容易办理的，只要凭据户口本的信息上门去查对就可以，而对付大量的活动生齿，要想获取这些职员的信息就比力庞大，除非在某个时期让全部的活动生齿 都临时制止不动，等候公安职员来查抄证件并举行登记，大概让每个活动职员都“链接”(挂名)到常住生齿的户籍本上。

整站网页设计开发已经成为了很多商业推广的重要渠道，而对于不同产品的信息也是需要大家多去了解的。其中静态网站开发也有着很多搜索索引特色，了解静态网站的独特意义和优势表现在哪些方面。

网页设计的八大要素

网页设计作为一个全新的设计领域,没有照搬的模式,没有从属和延续但任何设计形式又有去规律和标准。一个好的网页设计，小则可以让人赏心悦目，大则可以被称为现代原始艺术的结晶。如何做好网页设计?那就需要把握好网页设计的八大要素。

1、点

点从视觉的角度而言点不光有大小还有形状。在具体构成中点并非都是以远的方式出现的,一些较小的单个元素都可以视为点。在网页设计中的一些按钮就可以当作 点来处理。在运用点的时分要点不只在于外形,更在于点在悉数空间中所起的作用,在一样的视觉环境下相对面积越小点的感受越强。点越多其距离就越短,避免感 受就越强,这对把握画面的整体作用和共同画面十分重要。

2、线

不一样粗细的线在空间的性情也是不一样的,粗线条给人粗犷,英勇阳刚的感受;细线条能够表达锋利灵敏速度之感;当粗线和细线进行结合时粗线一定先进入视 觉,若线的长短符合透视规律,就能表达出激烈的空间感。因此,线的构成在网页设计中有着广泛的使用,网页设计师常用简练的线条进行页面构图,以此传递丰厚 的视觉信息和思想感情。

3、面

面是构成空间的基本单位，一段文字能够视为一个面,一张图画能够看作一个大面,一大片留白能够成为一个面"面"的概念不是固定的,面是网页设计构成中常用 的元素,它的巨细曲直改变都会影响网页的全体设计。在网页设计中,设计者经过面的切割组合虚实替换等多种方法来完成网页的全体效果。在网页设计技能中表格 和结构即是用来切割网页的使用面的切割,但是网页网页主体明晰,层次分明。

4、空间

网页设计中的空间并非生活中的立体空间,而是一个假象的空间,是看得见而摸不着的,是在二维平面上建立的空间关系。在设计中,我们可以利用对比强烈的大标题可以作为前景,大面积的正文构成中景,附属的版权信息构成背景。

5、色彩

好的精确的颜色可以传达给人准确的信息质量。关于一个好的页面，有针对性的主题颜色适当重要。不只要和所要表达的内容与气氛相适应，还要与页面的精神内涵 相关联。怎么挑选准确的色系，在网站开始着手制造前，就应该做好计划规划。在网页设计选择颜色时，这里需要注意：不要大面积使用很高的纯单色,否则会使浏 览者感到视觉疲劳;当网站面对的用户超出本国范围时,最好使用网络安全色;为增强网页的可读性,背景与文字内容的亮度差最好在102以上。

6、图像

图像是页面中的重要元素。图像的优化能够在确保阅读质量的前提下将其size降至最低，这样能够成倍地提高页面的下载速度。利用Photoshop或Fireworks能够将图像切成小块，别离进行优化。输出的格局能够为gif或Jpg，要视具体情况而定。

7、表格

表格是网页页面中的重要元素，是网页页面排版的主要手段。我们可以设定表格的宽度、高度、边框、背景色、对齐方式等参数。很多时候，我们将表格的边框设为O，以此来定位网页页面中的元素，或者籍此确定网页页面中各元素的相对位置。

8、布局

网页页面布局，是对全部网页页面的全体规划，包含页面尺度断定、全体外型规划、各类元素(页头、文本、页脚、图像、多媒体)的大致摆放等疑问。网页页面的 尺度巨细应根据分辨率巨细来进行设定，准确的宽度尺度是比分辨率宽度值偏小。向下拖动页面是惟一给页面添加更多内容(尺度)的办法，一般来说，除非你能必 定页面的内容能招引访问者诲人不倦地拖动，否则不要让页面拖动超越三屏。页面拖动超越三屏，最好思考在页面内做一个内部连接。