网站设计技巧.doc
《网站设计技巧.doc》由会员分享,可在线阅读,更多相关《网站设计技巧.doc(21页珍藏版)》请在三一办公上搜索。
1、网站设计技巧网页设计是技巧性很强的一门技术,其富有诸多窍门,先阐述几条如下: 1.预早筹划 设计主页未必很艰难。但这一工作与编制传统的宣传品一样,都需要我们谨慎处理和筹划。换言之,我们必须首先确定自己需要传达的主要信息,然后细意斟酌、把所有意念合情合理地组织起来;之后是设计一个页面式样,试用于有代表性的用户,接着重复修订,务求尽善尽美。 2.尽量精简 主页的作用好比一本书的封面,是为了吸引用户测览你的网址内容。因此,主页的设汁应以醒目为上、令人一目了然。切勿堆砌太多不必要的细节,或使画面过于复杂。在主页上清楚列出三项要点,例如机构名称、提供的产品或服务、以及主页内容(亦即你的其他页面还载有什么
2、资料)。应切记页面给人的第一观感最为重要。在网上到处浏览的人很多。如果你的主页真没有吸引力,很难今他们深入观赏。 3.尽量简朴 现今大部分用户那是用调制解调器接驳万维网,所以他们一般都要花很多时间等待主页传送到自己的系统。切勿令他们加倍望穿秋水。主页上的图形应力求简朴,避免耽搁用户的时间。图像愈大、颜色愈深,传送页面的时间愈长。这并不是说你要完全略去图像不用,只是提醒你要注注意使用图像所引起的效果。主页上的颜色最好不超过六十四种,页顶图像最好保持在大约10KB(千字节)以下。切勿禁不住诱惑。觉得非要放入大幅的图画不可;应考虑只用三两幅短小精悍的图像。主页整体上要能够迅速传送。如果载入的时间超过
3、十至十五秒,很多用户就会等得不耐烦。如果情况许可,最好先测试一中你的主页在稍差的条件下的传送速率,14.4千波特的调制解调器,或透过 Prodigy等网上服务接驳万维网等。此外,还须注意配合最低档的设备,例如标准的小型显示器,不要假设人人都用高解像度的大荧幕。运用先进测览软件所提供的一些尖端功能是可以的、但应确保你的主页在次一级的浏览软件上(例如某些网上服务所提供的专用浏览软件)仍可畅顺地显现。 4.善用图像用户在网上四处漫游,你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力,所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款,使其别
4、具特色,令人过目不忘。图像的内容应有一定的实际作用,切忌虚饰浮夸。最佳的图像足集美观与传讯于一身。注意图画可以弥补文字之不足,但并不能够完全取代文字。很多用户把浏览软件设定为略去图像,以求节省时间他们只看文字。因此,制作主页时,必须注意将图像所带的重要信息或联接其他页面的指示用文字重复表达多次。用纯文本模式测试已制成的主页,确保其传达到所有信息。 5.主页易于漫游主页的其中一个主要功能是作为漫游工具,指引用户查阅你存储在网址或其他地点的信息。尽量使漫游过程不费吹灰之力。基于清晰明确和速度的考虑,主页上的联接项目应只限于几个高级的类别,例如公司、产品、服务、支援等。 此外,你提供的信息不应埋藏在
5、重重叠叠的页面之下。穿越五个以上的联接项目已足以令人厌烦。因此,你必须在广度和深度之间求取平衡。如果你的网址上有太多信息,你可能要编制较长的页面或使用更多联接项目,甚至可能要建立多个主页、使每个主页载有不同的信息。如果能够让用户在主页上以关键字或词语查找所需的信息,肯定受用户欢迎。假若你有充足的资源,便应找一位专家来评估你设计的主页是否方便易用。设法找一些对主页陌生的用户,来试用你的初步制成品。网页设计 网页设计网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台,离开网站(或者只是利用第三方网站)去谈电子商务是不可能的。企业的网址被称为“网络商标
6、”,也是企业无形资产的组成部分,而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。 目录隐藏网页设计的要点是设计第一而技术其次 1. 在设计规划时我们会考虑:网页设计现状以及实战技巧 网页设计的要点 成为一名网页设计师你要学会 如何快速成长为一名厉害的网页设计师 网页设计师如何找工作? 网页设计与搜索引擎的优化问题 1. 框架结构(Frame Sets) 2. 页面结构(div+css) 3. DIV+CSS结构。 4. 图象区块(Image Maps) 5. 特效链接 6. FLASH 7. 加密网页 8. 网页容量网页设计布局 如何提高网页设计效率: 网站设计工作内容 网页设计
7、的窍门网页设计的要点是设计第一而技术其次 1. 在设计规划时我们会考虑:网页设计现状以及实战技巧网页设计的要点成为一名网页设计师你要学会如何快速成长为一名厉害的网页设计师网页设计师如何找工作?网页设计与搜索引擎的优化问题 1. 框架结构(Frame Sets) 2. 页面结构(div+css) 3. DIV+CSS结构。 4. 图象区块(Image Maps) 5. 特效链接 6. FLASH 7. 加密网页 8. 网页容量网页设计布局 如何提高网页设计效率: 网站设计工作内容 网页设计的窍门网页设计的要点是设计第一而技术其次企业网站设计显得极为重要,下面是一些网站设计中应注意的原则。 一、
8、明确建立网站的目标和用户需求 Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径,因此我们必须明确设计站点的目的和用户需求,从而做出切实可行的设计计划。我们会根据消费者的需求、市场的状况、企业自身的情况等进行综合分析,以“消费者(customer)”为中心,而不是以“美术”为中心进行设计规划。 在设计规划时我们会考虑:建设网站的目的是什么? 为谁提供服务和产品? 企业能提供什么样的产品和服务? 网站的目的消费者和受众的特点是什么? 企业产品和服务适合什么样的表现方式(风格)? 二、网页设计总体方案主题鲜明 在目标明确的基础上,完成网站的构思创意即总体设计方案。对网站的整
9、体风格和特色作出定位,规划网站的组织结构。 Web站点应针对所服务对象(机构或人)的不同而具有不同的形式。有些站点只提供简洁文本信息;有些则采用多媒体表现手法,提供华丽的图像、闪烁的灯光、复杂的页面布置,甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。 为了做到主题鲜明突出,要点明确,我们将按照客户的要求,以简单明确的语言和画面体现站点的主题;调动一切手段充分表现网站点的个性和情趣,办出网站的特点。 Web站点主页应具备的基本成分包括: 页头:准确无误地标识你的站点和企业标志; Email地址:用来接收用户垂询; 联系信息:如普通邮件地址或电话; 版权信息:
10、声明版权所有者等。充分利用已有信息,如客户手册公共关系文档技术手册和数据库等。 三、网站的版式设计 网页设计作为一种视觉语言,特别讲究编排和布局,虽然主页的设计不等同于平面设计,但它们有许多相近之处。 版式设计通过文字图形的空间组合,表达出和谐与美。 多页面站点页面的编排设计要求把页面之间的有机联系反映出来,特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果,我们将反复推敲整体布局的合理性,使浏览者有一个流畅的视觉体验。 四、色彩在网页设计中的作用 色彩是艺术表现的要素之一。在网页设计中,我们的设计师根据和谐、均衡和重点突出的原则,将不同的色彩进行组合搭配来构成美丽的页
11、面。 根据色彩对人们心理的影响,合理地加以运用。如果您的企业有CIS(企业形象识别系统),我们将按照其中的VI进行色彩运用。 五、网页设计形式与内容相统一 为了将丰富的意义和多样的形式组织成统一的页面结构,形式语言必须符合页面的内容,体现内容的丰富含义。 灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段,通过空间、文字、图形之间的相互关系建立整体的均衡状态,产生和谐的美感。如对称原则在页面设计中, 它的均衡有时会使页面显得呆板,但如果加入一些富有动感的文字、图案,或采用夸张的手法来表现内容往往会达到比较好的效果。 点、线、面作为视觉语言中的基本元素,巧妙地互相穿插、互相衬托、互相补充构
12、成最佳的页面效果,充分表达完美的设计意境。 六、三维空间的构成和虚拟现实 网络上的三维空间是一个假想空间,这种空间关系需借助动静变化图像的比例关系等空间因素表现出来。 在页面中,图片、文字位置前后叠压,或页面位置变化所产生的视觉效果都各不相同。通过图片、文字前后叠压所构成的空间层次不太适合网页设计,根据现有浏览器的特点,网页设计适合比较规范、简明的页面,尽管这种叠压排列能产生强节奏的空间层次,视觉效果强烈。 网页上常见的是页面上、下、左、右、中位置所产生的空间关系,以及疏密的位置关系所产生的空间层次,这两种位置关系使产生的空间层次富有弹性,同时也让人产生轻松或紧迫的心理感受。 现在,人们已不满
13、足于HTML语言编制的二维Web页面,三维世界的诱惑开始吸引更多的人,虚拟现实要在Web网上展示其迷人的风采,于是VRML语言出现了。VRML是一种面向对象的语言,它类似Web超级链接所使用的HTML语言,也是一种基于文本的语言,并可以运行在多种平台之上,只不过能够更多地为虚拟现实环境服务。 七、网页设计中多媒体功能的利用 网络资源的优势之一是多媒体功能。要吸引浏览者注意力,网页的内容可以用三维动画、FLASH等来表现。但要由于网络宽带的限制,在使用多媒体的形式表现网页的内容时不得不考虑客户端的传输速度。 八。结构清晰并且便于使用。 如果人们看不懂或很难看懂您的网站,那么,他如何了解你的企业和
14、服务呢?使用一些醒目的标题或文字来突出您的产品与服务。并且即使您拥有最棒的产品,如果客户从您的网站上不清楚您在介绍什么或不清楚如何受益的话,他们是不会喜欢您的网站的,这就是网页设计的失败。 九。导向清晰。 网页设计中导航使用超文本链接或图片链接,使人们能够在您的网站上自由前进或后退,而不会让他们使用浏览器上的前进或后退。我们在所有的图片上使用“ALT”标识符注明图片名称或解释,以便那些不愿意自动加载图片的观众能够了解图片的含义。 十。快速的下载时间。 很多的浏览者不会进入需要等待5分钟下载时间才能进入的网站,在互联网上30秒的等待时间与我们平常10分钟等待时间的感觉相同。因此,我们会建议您在网
15、页设计中尽量避免使用过多的图片及体积过大的图片。我们通常会与客户合作,将主要页面的容量控制在50K以内,平均30K左右,确保普通浏览者页面等待时间不超过10秒。 十一。非图形的内容。 我们在必要时适当使用动态“Gif”图片,为减少动画容量,应用巧妙设计的Java动画可以用很小的容量使图形或文字产生动态的效果。但是,由于在互联网浏览的大多是一些寻找信息的人们,我们仍然建议您要确定您的网站将为他们提供的是有价值的内容,而不是过度的装饰。 十二。方便的反馈及订购程序。 让客户明确您所能提供的产品或服务并让他们非常方便地订购是您获得成功的重要因素。如果客户在您的网站上产生了购买产品或服务的欲望,您是否
16、能够让他们尽快实现吗?是在线还是离线? 十三、网站测试和改进 测试实际上是模拟用户询问网站的过程,用以发现问题并改进网页设计。我们通常与用户共同安排网站测试。 网页设计现状以及实战技巧(一)垃圾还是经典 网页技术更新很快,一个网站的界面设计寿命仅仅2-3年而已。不管是垃圾还是精品,都没有所谓的经典。经典只存在于是哪个首次成功创新性的应用。一个闭门造车者做出的东西,是远远赶不上综合借鉴者的。网页设计不同于其他艺术,在模仿加创新的网页设计领域当中,即便是完全自己设计的,也是沿用了人们已经认同的大部分用户习惯,而且这种沿袭的痕迹时非常的明显!还有那个设计者敢腆着脸说,这都是我自己的原创设计?对于业界
17、来说,经典只是个理念和象征! (二)国内网页设计环境 不可否认,国内网页设计环境目前还停留在初级的认知阶段,也就是说,绝大多数人不知道网络的真正的可用之处,你去做一个业务的时候,不得不去做大量的说服教育工作。以乙方的身份去说服甲方,以专业角度去教育非专业认识,结果是可想而知的。也正是这种全体社会普遍的低认知水平,导致了大量网络垃圾的产生。 举个简单的例子,看看“阿里巴巴”中文和英文两个版本的页面。中文版主色是橙色(与标志色统一),英文版是极不协调的蓝橙(具有很明显的生凑效果)。 为啥中文版是橙色,呵呵,不要以为哪是为了和标志统一,其实那时国内最常用的商业色。橙色代表什么?肉色,淫欲。商业是性质
18、?贪婪、拜金。对于社会主义初级阶段群众的普遍思想来说,橙色就是最突出的体现,它不仅仅是网页首选商业色,它还体现了当今社会经济发展条件下的“浮躁”和“糜烂”,它还说明了“低认知水平”的国人,需要用这个刺激的颜色,去宣教引领他们被动接受。 为啥英文版是蓝橙?因为洋人已处于发达社会,他们首先需要的不是“宣教引领”,而是“功能”。一个弱化的界面更能强化显示功能,使人方便使用。较刺激热烈的颜色,会引起洋人的反感,所以用的浅蓝灰色。那么为什么又会出现极不协调的橙色捏?原因有二,一是要与标志颜色统一,二是中英文要有传承,所以出了这末个一半是火焰一半世海水的结果。 (三)什么是好的网页设计 (1)内容和功能决
19、定表现形式和界面设计 常常拿到的任务是一张小纸条,上面两句话,叫你去做一个网站设计。有的人看看纸条就去设计页面了凭,凭两句话,你就可以为客户做一个页面设计,以我7、8年的设计经验,我都不敢去做,你真是我的偶像阿! 做网页设计,你需要了解客户的东西很多: 1、建站目的 2、栏目规划及每个栏目的表现形式及功能要求 3、主色、客户性别喜好、联系方式、旧版网址、偏好网址 4、根据行业和客户要求,那些要着重表现 5、是否分期建设、考虑后期的兼容性 6、客户是否有强烈的建站欲望 7、你是否能在精神意识上控制住客户 8、面对你未接触的技术知识,你有底吗? 9. 网站类型 等等. 当你把这些内容都了解清除了时
20、候,你的大脑中就已经给这个网站有个全面而形象的定位了,这时才是有的放矢去做界面设计的时候了。 (2)界面弱化 一个好的界面设计它的界面时弱化的,它突出的是功能,着重体现的是网站业提供给使用者是主要什么。这就涉及到浏览顺序、功能分区等等。 要让访客在0.5内就能把握网站的行业性质,1秒内就知道该从哪个地方开始使用这个网站,能点一次的,绝不点第二次。当然上面说的是大多数功能性网站,对于宣战展示性网站,诸如加特效的或Flash网站,可能就不得不花哨一些,但不能太过分。网站不是动画片,在效率越来越高,社会心理越来越浮躁的中国,人们的耐心越来越小,心理承受能力越来越低。效果可以体现意境,点到为止。 (3
21、)模块化和可修改性强 模块化不仅可以提高重用性,也能统一网站风格,还可以降低程序开发的强度。这里就设计一些尺寸、模数、宽容度、命名规范等等知识了,不再冗述。 ,无论是架构还是模块或图片,都要考虑可修改性强。举个简单的例子,logo、按钮等,很多人喜欢制作图片,N个按钮就是N张图片。如果只做3-5类按钮的背景图片,然后用在网页代码里打上文字,那么修改起来就简单了,让程序员自己改字就可以了。然而网页显示的字体是带有锯齿的,一般即能清晰又保证美观的字体字号有几类: 宋体 12px | 宋体 12px 粗体 | 宋体 14px | 宋体 14px 粗体 | 黑体 20px | verdana 9px
22、| Arial Black 12px+ | (4)创意是可耻的,分析能力远比创意来的重要 设计界动辄就大谈什么“创意”,我要说的是,还没有搞清目的意义内容,还没在技术制作上臻于完善的基础上班,用创艺和特效来迷惑客户和访客是可耻的。一个网也设计者的分析能力远比创艺来的重要。 (四)结尾,送上思洋广州的一些经验 (一)网页配色基本概念 (1)白纸黑字是永远的主题,谁都说不出不好来。 (2)网页最常用流行色 兰色蓝天白云,沉静整洁的颜色。 绿色绿白相间,雅致而有生气。 橙色活泼热烈,标准商业色调。 暗红宁重、严肃、高贵,需要配黑和灰来压制刺激的红色, (3)颜色的忌讳 忌脏背景与文字内容对比不强烈,
23、灰暗的背景令人沮丧! 忌纯艳丽的纯色对人的刺激太强烈抗议,缺乏内涵。 忌跳再好看的颜色,也不能脱离整体。脱离群众是自取其辱! 忌花要有一种主色贯穿其中,主色并不时面积最大的颜色,而是最重要,最能揭示和反映主题的颜色,就象领导者一样,虽然在人数上居少数,但起决定作用。 忌粉颜色浅固然显的干净,但如果对比过弱,整得苍白无力了,就象病夫一样无可救药。 蓝色忌纯,绿色忌黄,红色忌艳。 (4)几种固定搭配 蓝白橙蓝为主调。白底,蓝标题栏,橙色按钮或ICON做点缀。 绿白兰绿为主调。白底,绿标题栏,兰色或橙色按钮或ICON做点缀。 橙白红橙为主调。白底,橙标题栏,暗红或桔红色按钮或ICON做点缀。 暗红黑
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 设计 技巧
链接地址:https://www.31ppt.com/p-2400083.html