网页设计问题汇总.docx
《网页设计问题汇总.docx》由会员分享,可在线阅读,更多相关《网页设计问题汇总.docx(33页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、网页设计问题汇总网页设计准备:创建图像版式图像版式是静态图像,它不会移动,可受用户控制,是灵活的Web页面。它们将与最终创建的页面的在外观上十分相近。然而,在创建版式的过程中还要执行很多操作步骤,以使其更接近最终的页面,并且在对版式进行切片时更容易将它转换成最终页面。设置画布尺寸当为固定宽度的设计创建版式时,很容易确定所需画布的尺寸。只要决定最终的固定页面的宽度,并且为画布设置同样的尽寸即可(或者可能将它设置得更大一些,如果对超出的空白区域也进行了设计,即使用户使用超出固定宽度的尺寸,同样也可以显示设计图案)。当创建灵活设计时,以像素为单位的页面宽度将因用户而异,那你会为画布选择什么宽度呢?我
2、想你有3种选择:a.选择你认为的最小的设计宽度。b.选择你认为的最大的设计宽度。c.选择你认为的大多数用户都会采用的中等尺寸。每种选择都有它的优缺点。1匹配最小的宽度在创建版式之前,应该决定设计的最小宽度(或你想让用户看到的最重要部分的最小宽度)。于是,你可以将这个最小宽度或与之按近的宽度作为画布的宽度。这可以让你确保所有一切都非常适合这个小尺寸。同时还可以让你避免犯因疏忽而让图像过大以至于不匹配最小宽度的错误。然而,设计成最小宽度也会有问题,这主要是因为最终的设计效果在得到延展后,一切看起来是那么的松散、稀疏。你不妨想象一下这个设计被拉宽后的效果,这样一来,你便可以根据一个更宽的宽度范围来更
3、改设计了。2.匹配最大的宽度除了最小的宽度外,你也许还要在设计里包含最大的宽度要么是你想要展现的壮丽的场景,要么是那些超出你意料之外的浏览者所期望的。如果你在设计中使用最大的宽度来设定画布的尺寸,就可以避免设计在较大的显示尺寸下显得过于松散、稀疏的问题,并确保文字的长度不会变得太长而难以阅读。在切分设计版面前,你说不定还可以省却修改版面的功夫了见后续内容,通常,创建小于最终页面的版面意味着在切分版面时必须延展版面,因此切片需要与所需页面相同大小。然而,以一个大的宽度设计可能会不经意地增添了设计的难度它比设计小尺寸的空间要难一些。你也许会过度地放大图像或者在设计中填入过多的“素材”(功能框、图像
4、、工具条),这样一来,当页面以较小的宽度显示时,页面看起来会非常拥挤并且很难阅读。3.选择一个折衷的办法除了使用最小和最大的宽度,你还可以选择位于这两种宽度尺寸之间的值用做画布尺寸。看看哪种尺寸可能为大多数浏览者所使用,并将该尺寸用做设计尺寸。你可以将设计优化为大多数人想看的那种。使用折衷的画布尺寸可以帮助你避开那两种缺点。但是如果你不仔细的话,它也可以让你的设计更受两种缺点的影响。例如,你应该让设计的宽度跨越600像素到1200像素,并且创建一个宽度为900像素的设计。非常有可能,你会创建一个四不像的设计:图像对于600像素的最小宽度来说不合适太大,页面元素和文本对于1200像素的最大宽度来
5、说太稀疏,很不容易阅读。尽管就很多方面而言,这个设计都非常了不起,但是它始终有一个缺陷:在两个极端的宽度尺寸(而非一个)都存在问题。然而,当你采用位于它们中间的尺寸浏览时,这些问题的严重性又将得到不同程度的缓解。对于大多数设计而言,中间宽度可能足最好的-一在整个设计过程中,要谨慎小心并且持续不断地考虑以其他可能的宽度显示的情形。始终要牢记的一点是,最终创建的Web页面不是一个静态的页面,它将是一个灵活的页面。网页设计中的图形(图像)文件格式1、GIF格式GIF,全称图形交换格式,GraphicalInterchangeFormat的缩写,是由CompuServe公司开发的图形图像格式,主要用于
6、互联网上的图形图像交流。GIF图形图像格式是一种无损压缩的图形图像格式,对于颜色画面简单的图形图像,有非常高的压缩率。使用该格式减少图形图像文件尺寸时,不会丢失原始图形图像的任何信息。而且,这种压缩算法比较简单,解压缩的速度很快,很适合在网页上显示。因此,GIF格式在网页中得到了广泛的应用。GIF的优点还有:支持透明(Transparency)和交错(lnterlaced)模式,支持GIF89aJ画格式等。透明模式,是一种图形图像的透明部分能够透出背景色的模式,这种模式可以去掉图形图像比较生硬的矩形边框,使图形图像更好地融合到网页页面中。交错模式,是指将图形图像装载到浏览器窗口的显示方式。一个
7、普通的图形图像是从上到下逐行显示的,在显示完毕之前,浏览者无法了解图形图像的全貌。而设置了交错模式的GIF图形图像则是隔行显示的,使浏览者不必等待图形图像全部传输完,就可以看到图形图像的大致轮廓。对于简单的Web动画来说,GIF89a动画是最容易掌握的技术。GIF89a动画包含一系列的帧,每一帧就是一幅图形图像。此外,还包含一些播放动画的参数,如延迟时间、循环顺序等。浏览器从动画文件中读取各帧图形图像,然后根据播放参数在浏览器窗口循环显示,形成动画效果。GIF89a动画的使用大大增加了页面的趣味性。GIF格式的缺点是,最多只能使用256种颜色,这使它不能用于存储高质量的图形图像文件。2、JPE
8、G格式JPEG,是联合图形图像专家小组JointPhotographicExpertGroup的缩写。JPEG格式的图形图像采用了一种失真的压缩算法,这种压缩丢失了部分图形图像信息,同时也获得了较高的压缩比。因此,压缩比例越大,图形图像质量越差。这种算法的优点是,由于它考虑了人的视觉特性,因此只要图形图像的压缩比例适合,一般不会使人感到压缩前后的差异。JPEG支持24bit真彩适用于具有丰富细节的高质量图形图像。与GIF格式相比,它也有类似于交错显示的渐进式显示,但不支持透明颜色。另外,JPEG的压缩算法比较复杂,因此,图形图像解压缩显示的时间也相应较长。3、PIN格式PNG,英文全称Port
9、ableNetworkGraphics,是可携式网络图形图像的缩写。这个格式的图形图像已经得到IE和NETSCAPE两大浏览器的支持,目前在许多欧美网站已经开始采用PNG图形图像。这种格式的图形图像兼有GIF和JPEG的色彩模式。PNG不仅能储存256色以下的“IndexColor”图形图像,还能储存24位真彩图形图像,甚至能最高可储存至48位超强色彩的图形图像。如果图形图像是以文字、形状及线条为主,PNG会用类似GIF的压缩方法来获得较好的压缩率,而且不破坏原始图形图像的任何细节。而对于照片类图形图像的压缩,PNG则采用类似JPEG的压缩算法,不同的是图形图像压缩后能保持与压缩前图形图像质量
10、一样,没有一点失真。另外,PNG也采取了类似于GIF格式的交错显示模式,使图形图像得以渐里在屏幕上。PNG的优势还体现在对透明图形图像的处理上。JPEG格式无法实现图形图像透明;而采用GIF格武透明图形图像则略显刻板,因为GIF透明图形图像只有1与0的透明信息,只有透明或不透明两种选择,缺少层次。PNG则提供了“Q”频段0至255的透明信息,可以使图形图像的透明区域出现深度不同的层次。而且,PNG图形图像可以让图形图像完美的覆盖在任何背景上,改善了GIF透明图形图像描边不佳的问题。对GIF图形图像而言,系统不同画面显示的效果也不一样,PNG则避免了这一缺点。在Macintosh上制作IYJPN
11、G图形图像,放在Windows上显示时图形图像不会失真;反之亦然。文字资料(如作者、出处)、储存蒙板(MASK)、伽玛值、色彩校正码等信息,均可掺杂在PNG图形图像中一起传输。制约PNG图形图像不能更广泛应用的主要因素是,它无法制作出动画效果。PNG图形图像格式开发人员已经意识到这一点,基于PNG图形图像开发出了新的图形图像格式,即PNG的动画实现格式-MNG。4、MNG格式MNG,英文全称Multiple-ImageNetworkGraphics,是多重影像网络图形图像的缩写,是对PNG图形图像格式的完善。PaintShopPro等绘图软件的最新版本已开始支持MNG,相信不久的将来MNG同样
12、也能获得浏览器的支持。如图3-71和图3-72所示。与GIF89a动画相比,MNG有以下优点:MNG采用以对象为基础的动画。动画采用对象的移动、复制、粘贴来实现,从而减少了动画文件的天于。MNG对于复杂的动画采用了嵌套循环方式。MNG使用了比GIF更优化的压缩方式:MNG能够集合以PNG和JPEG为基础的图形图像。lvfNG支持透明的JPEG格式。色彩在各个领域中的表现力不同的领域有不同的色彩表现,根据其行业特色也各有特征。1综合门户型网站这类网站没有特定的受众群体,访问量是众多网站中最高的。网页在色彩设计上要求直观、简洁,以便用户咋最短的时间内连接到需要的栏目。如新浪网站的首页,用黄色为主色
13、调明亮大方,图片和文字的用色有条理,保证了视线的流畅性。2娱乐休闲类网站进人这类网站的浏览者是为了放松心情、寻求娱乐的,这类网站注重美观,一般会用具有强烈刺激性的色彩来体现个性。3商业经济类网站这类网站是商家宣传自己的门户,它的浏览者是从事商业活动的雇主、员工和上网购物、搜寻商业信息的客户。网页在色彩设计上要求统一协调、有秩序感。对页面上的标识、主色调选取应采用企业标准色,一方面利于树立企业形象、传达服务理念,另一方面给人深刻印象、易于识别。4人文艺术类网站该类网站旨在向大众传播文化、艺术,透着浓郁的文化气息,故在色彩设计上主色调多选用淡雅、朴素的色彩,显出典雅的文化氛围。5.政府机构类网站此
14、类网站代表了各地政府机关的网上形象,在色彩设计上主色调可选用明度和饱和度较高的蓝、绿色,力求显示政府机构在人民心目中严谨大气、庄重肃穆的形象。6体育休闲类网站体育休闲类网站的对象是众多的体育爱好者,这些人中又以青年人居多,故该类网站的主色调多偏重于活泼、前卫的色调。7新闻媒体类网站新闻媒体类网站是指传统媒体(包括报纸、电视等)的网上节点。新闻媒体建立网站的目的不一,有的是为了寻求传统媒体向网络的转移,有的则是传统媒体的电子版,因此网站的风格也不尽相同。总体而言,该类网站在主色调表现上力求大方稳重,在严肃中又不失轻松活泼之意。8行业类网站该类网站是指内容涉及专门行业的专业网站,在色彩设计方面应考
15、虑行业特征。可采用行业的象征性色彩为主色调,例如医疗类网站可选用白色为主色调,给浏览者亲切、可信赖的感觉。9个人网站用色非常的个性化,充分体现了网站拥有者的个性和个人审美情趣。网页美术设计概述互联网之所以吸引人,在于它是全世界资源共享的平台,同时它的页面呈现效果是动态的,甚至是有声音的,可以互动参与的,还有令人惊奇的无法预知的下一秒将呈现出的页面效果,这是网页设计和平面设计最大的区别。因此,在设计网页时,设计者应该更多地从视觉关怀的角度进行网页设计,使之更具人性化诉求。网页美术设计,是指网页设计者根据网页所要表达的主题,将大量信息通过归纳、整理、美化设计,使页面视觉漂亮、网页信息有条理,从而提
16、高网页的阅读效率和信息搜索率。网页设计者不仅要掌握基本的网页制作技术,还需要掌握网站的风格、配色等网页美术设计原理,依照项目设计的目的和需求,自觉地对网页的构成元素进行艺术构思,是一种创造性思维活动,以创造出艺术化、人性化的网站页面为目的。网页的美术设计在整个网站设计过程中是很重要的一个环节,美术设计有特色的网站更能得到浏览者的青睐。经测定,网站浏览者在网站首页上停留的时间长短,通常以第一感觉(视觉)来评判,进而决定是否点选、进入网站观看内容,这一时间一般维持在2秒钟左右。此时,在极短的时间内,网站是否能给人留下好的印象,就在于它呈现出的整体视觉感受、内容、设计风格是否吸引浏览者从而迸入网站浏
17、览。而掌握网页视觉美感的基础,则是将图形、文字和色彩作为网页视觉设计的基本元素进行编排,并根据不同网站形式风格的特征进行差异性设计。通过图形、文字、色彩等基本元素的创造性编排,产生了不同的网站视觉风格。B2B网站建设 如何设计B2B行业网站标题栏B2B网站即Business to Business,商家(泛指企业)对商家的电子商务。有时写作B to B,但为了简便干脆用其谐音B2B(2即to)。如今,B2B网站行业飞速发展,用户对其需求不仅仅在其功能上,对于网站设计的要求也越来越高。本文就如何设计B2B行业网站标题栏进行分析:B2B行业网站与一般的商业门户网站在标题栏设计上大部分是相同的,但是
18、由于B2B行业网站更多的访问者和使用者是在办公室学习和工作的,需要更严肃的氛围,他们需要的更多是商机信息、行业资讯、行业技术知识等内容,而不是娱乐和休闲。同时和企业网站标题栏设计具有很大的区别,页面不需要通过标题栏的颜色和外形来突出产品的特色及品牌文化,所以B2B行业网站要弱化标题栏的图片和颜色,不要对访问者获得内容造成影响,一般标准如下。一.标题栏上的字要比网页上的大部分的内容字号更大,加粗,要更突出:,看到过一些网站,以及一些设计师给我的页面标题栏上的字就和内容上的字一样大,都为12PX加粗,也许是他们无心,也许是他们觉得已经加粗了,但是从这里看出,一些人还是没有上升到理论的层面,凭感觉。
19、一般为字号为:14PX,加粗。二.标题栏字体和设计必须非常清晰,拒绝花哨。根据网页的主题,内容的种类,不同页面的标题栏会设计成不同的效果,但是无论我们怎么设计,都必须要使标题栏上的字看起来很清楚、明白,使访问者一目了然,不能为了更好看,更有艺术效果,而使字看起来不清楚、不突出。更重要的是,由于B2B行业网站的页面要更严肃,标题栏的字,图片和颜色,都要看起来更严肃一些,不能太花哨,太漂亮,简洁大方更好。三.标题栏上不能大面积使用刺眼的颜色,不能干扰用户寻找内容。B2B行业网站的首页、一级栏目、二级栏目、内容页等页面,访问者需要从页面里寻找大量自己感兴趣的内容,与专题页面、企业网站等不同,尤其是品
20、牌企业网站的内容不多,需要通过颜色、字体、外形等来渲染产品的品牌特色,可以大面积使用颜色作为标题栏的背景色,采用很大的字号,不会喧宾夺主,会给访问者建立一个氛围。四.标题栏应与所包含的内容形成一个整体,在视觉上形成区别。每一个标题栏下面所属的内容都代表一个细分的内容,标题栏起到的作用就是希望访问者能尽快找到自己感兴趣的内容,要达到这个目的,就要用标题栏和边框将内容包围起来,形成一个整体,让访问者从视觉上更能区分自己正在看的是什么种类的信息。五.标题栏和背景尽量拒绝圆形。B2B行业网站需要更严肃一些的风格,所以标题栏切忌圆角太圆,也不能用太鲜艳的花纹作为背景,甚至使用椭圆形的。在我多年的工作经验
21、中,看到过一些设计师提供的B2B行业网站页面标题栏圆角太圆,这种设计给人很不严肃的氛围,有一点圆角就可以了。在设计一些比较有特点的企业网站或品牌网站时,以及大家看到的QQ空间、51空间等个人主页可以使用一些个性化的标题栏,但是在B2B行业网站不能使用。这个就是网站定位与设计的联系所在。以上几点,虽然看似简单,但是往往会在设计过程中被设计师忽略,作为网站从业人员,必要要懂这些细节,在网站设计过程中及时发现并解决这些问题。提高用户体验的网站设计原则用户体验一直是衡量一个网站质量的重要标准之一,用户体验就是目标受众在网站上浏览时带来的感觉。目前发现很多的网站不仅没有把用户体验处理好,有些甚至对用户体
22、验的感念十分模糊,不知道从何下手,尤其是对于电子商务类网站,最终结果就是降低网站的转化率。本文就介绍一下从哪些方面提高用户体验的网站设计原则:一.网站信息提高用户体验,首先就要重视起网站信息维护与更新,例如公司新闻,行业新闻,用户感想等等。网站内容数据层一般情况下由产品经理发起经过多次的模拟构建最后由程序员进行搭建,由产品经理和程序员共同完成,以用户需求为基础,并将需求进行分类归纳和分析,但是不可能百分之百的满足用户,也要符合网站的一些设计原则。从目前的行业内来看,B2B的信息量较B2C网站信息量显得有些迟钝。二.网站呈现通常网站所呈现出来的内容由美工和程序员搭建,所以站长需要具备基本美工和程
23、序员知识。这当中包括用户访问速度、信息用户接受程度、网站颜色等内容。一个好的网站一定是由一个经验丰富或有特殊思维的前端美工实现。现在被互联网“名人”炒翻的用户体验,笔者认为似乎有那么些道理,但都只限于用户感受,用户的感受是需要植入和长期培养的,一个好的网站只要不是看不下去,其信息的丰富程度也一定会吸引住大批用户。三.网站内容任何一个网站都是由大量的文字内容、图片内容和其它类型的内容组合而成。网站编辑是网站内容控制的一个重要职位,随着互联网时代的来临,人们渐渐倾向于读图的方式浏览网站内容,所以使用图片控制用户和引导用户成为了眼下各大门户网站竞争的主要方向。子新闻信息质量等同的情况下,只有导读性的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 问题 汇总
限制150内