网页设计工作中容易出现的问题
当前位置:贝知网>知识分享>设计开发>网页设计工作中容易出现的问题
网页设计工作中容易出现的问题
时间:2023-01-06 设计开发

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

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

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

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

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

问题2:细节不够讲究,显得粗糙。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

网页设计制作思路细节

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

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

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

字体效果

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

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

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

排列

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

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

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

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

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

颜色

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

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

反差效果

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

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

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

一致性

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

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

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

面内做一个内部连接。