网页设计十篇

网页设计篇1

关键词：网页设计 留白 版面设计

一、关于网页设计的“虚实”和“留白”

“留白”是中国传统绘画艺术千锤百炼的结晶，这种艺术思想源于传统的中国哲学思想，基于阴阳辩证、虚实相生的原理。虚与实作为我国古代美学的一对范畴，在古代哲学思想中有很深渊源。古代的虚实相生正是哲学上的朴素辩证法在艺术领域的应用。网页设计通过网页上的文字、图形、音视频、动画等元素向用户传达信息，把各种网页元素做艺术而合理的处理，让用户在接受信息的同时享受到美感，获得良好的用户体验。虚实与留白是网页设计要遵循形式美的法则之一。网页设计留白的内涵包括三个方面：一是页面的空白部分。“白色是一切色彩中最完美的颜色，我们几乎找不到白色有消极意义的情境。”如logo区的空白、标题区的空白、内容和图片周围的空白、网页背景空白等等。二是大面积的有色范围。如在页面设计中只放置极少的必要元素，背景则用大面积的单纯色彩渲染，利用单纯色彩的力量来突出和烘托网页上的主要元素。

二、Web标准网页设计留白的功能

留白是一种艺术形式，在Web标准网页设计中，留白可以发挥重要作用。利用留白来达到页面平衡，使整个页面布局松紧有度，形成虚实、浓淡、动静、轻重的效果，给人以跌宕起伏之感。与其他艺术形式不同的是，网页设计是以传达页面信息为主要目的的，留白更多的是服务和服从于网页的可用性。无数的可用性研究证实了一个事实：在Web中，用户对网页信息是进行浏览，而不是阅读。简洁明快、富于美感的页面更具有可浏览性，可使用户获得更加良好的浏览体验。

1.可用性体现。突出设计主题。人们在完整地接收平面元素信息时，视线会形成一个习惯性的流动顺序：视点先落入视觉焦点，后随个元素间的强弱变化而作有序流动，最后完成对全部分元素信息的吸收。认知心理学的研究证明，留在空白之中的东西更容易被人注意和想起，留白对浏览起强调和停顿的作用，有助于视觉向主体元素集中凝聚，它所创造出的空间形成一种路径进而左右用户的浏览方向。

2.简洁页面元素。少就是多，简洁就是丰富，单纯就是饱满。在单纯中求丰富，在简练中求明快。网页设计可用性的研究表明，简洁的、浏览性强的网页能使用户获得更加良好的体验。过多的装饰性元素或重复强调往往会导致读者的抛弃性反应，使刻意设置的形象失去震撼效应。

3.节约网络带宽。在网页设计布局中，所有用户界面设计的一般原则是：浏览器所有的设计元件中，如果少了某个设计元件，该设计仍然能够工作，就把它删掉。

4.艺术性体现。网页设计中的艺术性是从属于可用性的，但这并不影响网页艺术性的存在和它带给用户的美感体验。恰恰相反，网页的艺术性是可用性延伸和扩展。当用户被网页上满满的文字、声音、图像等淹没时，适当合理的留白空恰似一个心灵歇息的驿站，让我们的神经得到了有效的缓和，从而使用户轻松浏览。当下网站建设中，功利色彩非常浓厚，网页上堆积的信息可以“多”、“挤”、“满”、“乱”形容，从视觉的角度解决办法之一就是运用网页留白，这种留白可以是空白，也可以是大面积的单纯色彩，或者是规则图形的组合，无一例个地，它使文字之间、图形之间形成页面节奏感、版块层次感、内容主次感，创造“透气”的感觉，以化解大量信息聚集起来造成的压迫感，寻求心理释放，给浏览者带来轻松、愉悦的享受和无限的想象空间，最大限度地激发他们的艺术想象力，从而更好地体会页面信息中所潜藏的深刻含意。这正是网页留白在更高层次上的艺术韵律之美。

三、Web标准网页设计留白处理方法

在版面设计中，处理好大与小、主与次、疏与密、虚与实，都是美的比例基础，可谓是一种既可浏览又可休闲的两全其美的艺术享受。但对留白如果不加控制的任意使用，它不仅不能有效发挥作用，反而会造成版面混乱，影响整个页面设计。Web标准网页设计留白可从两个方面把握。

（一）网站整体设计留白。在网站设计的整体方案中，广泛利用留白的方法构建设计框架，创造统一的视觉传达意境，使整个设计理念能够准确而有效，形成网站独特的风格和广阔的系统扩展空间，使的页面中的各个元素更加具有活力和结构组织的多元性，激发出强大的视觉能量。这种留白的思维方式是把整个系统作为留白的载体，而不是单独的某一页、某一侦，这需要设计师从设计的全方位去考虑网站的架构，做到设计的全面统一，从整体气质上定义网站文化的含义，传达更容易被识别和认同的企业品质。

（二）网站页面设计留白。在网页设计中，也要注重细节的处理，寻求设计在不角度的精致表现，力求把设计延伸到每一个角落，无论从哪一个角度审视，都展现出完美的设计魅力，从而达到局部带动整体的设计目的。

网页设计篇2

2010年，EthanMarcotte提出响应式网页设计(RWD，ResponsiveWebDesign)，其实，这并不是一项新技术，而是已有技术———媒介查询(MediaQueries)、流式布局(FluidGrids)、自适应图片(ScalableImages)的有机组合。随着技术标准的扩展，这三项技术(媒介查询、流式布局、自适应图片)虽然仍是响应式网页设计的核心，但并不是全部。响应式网页设计无论从观念还是技术都正在经历着优胜劣汰的进化过程。响应式网页设计，是指根据用户的使用设备，使用情境以及使用行为来调整网页的版式、内容、功能和交互方式的设计方法。响应式网页设计为适应多样的浏览情况而设计更流畅、更灵活的页面，达到良好设计实践，为用户提供更优化的体验。

二、响应式网页设计的方法

响应式网页设计是以用户为中心的设计，关注特定情境下的用户体验，它既要适应设备的功能和限制又要适应用户的使用环境。响应式网页设计的方法主要包括以下几个方面。(一)移动优先(MobileFirst)在网站策划与制作的初步阶段，响应式技术比常规方法费时耗力。一般来讲，开发人员需要了解用户设备及不同使用情境，优先从移动端开始设计，从创建具有一定可用性的基本体验开始，满足用户简洁、顺畅的情境需求。然后，渐进增强，布局显示内容，提高图片质素，增加必要的服务，提供恰当的交互，创造更丰富的体验。移动优先采用渐进增强(ProgressiveEnhance-ment)原则，而非早期网站设计提倡的优雅降级(GracefulDegradation)原则。移动优先既可以为不支持媒介查询的移动设备提供适合的布局，聚焦当下最重要的事，也可以降低CSS代码复杂性，减少冗余代码。(二)媒介查询(MediaQueries)媒介查询是指根据用户特定情境，查询设备各种属性来布局样式和内容。测试的属性包括:设备屏幕宽高(device-width，device-height);视窗显示区域的宽高(width，height)，例如浏览器窗口的大小;屏幕方向媒体特性决定一个设备是处于横屏还是竖屏，即设备处于垂直或水平的状态(orienta-tion)，宽长比例等特性(aspect－ratio);设备屏幕分辨率(resolution)，每平方英寸像素数(ppi)，一般的屏幕为163ppi，视网膜(Retina)屏为326ppi。这些属性可以通过“与或非”等逻辑运算符形成复杂的表达式，以此判断是否为特定目标设备类型，从而加载特殊样式、调整页面布局、提供适合的功能和交互。(三)流式布局(FluidLayouts)传统的固定宽度(FixedWidth)布局以像素为单位，是网页布局中最常见的方法，它简单粗暴地固定了页面的宽度，使用户在不同设备上浏览相同的页面。屏幕较大时，页面两侧出现大片的空白区域未加利用;屏幕较小时，页面内容位置不变，用户只能不断地通过手指滑动进行浏览和界面交互。流动宽度(FluidWidth)布局的单位是百分比。流动布局根据浏览器窗口宽度自动调整页面布局，不会出现水平滚动条。大屏幕时，页面两侧不会出现固定布局中的大面积空白;小屏幕时，内容也不会挤成一团难以阅读。弹性宽度(ElasticWidth)布局以“em”为单位，随着文本大小的改变，容器的宽度也等比例地改变，将容器调整到合适的宽度。因为行宽过短，眼睛往复跳跃扫视会破坏阅读节奏;而行宽过长，容易造成持续行进阅读失误。为了提高文本的可读性，尽量使每行的中文字符个数介于25～45之间，英文字符个数介于45～70之间。网格布局(GridLayouts)可以使信息展示得有序、和谐，间距均衡、布局工整的页面提高了可读性，添加或更新内容时也更加容易。网格布局多采用8列、10列、12列、16列，由于12可以被2、3、4、6整除，因此它是最常用的网格布局列数。混合布局(HybridLayouts)则结合上述两种及以上的布局方法。相对固定布局，其他布局更具灵活性，但每种方法都各有优势和缺点。目前，响应式网页设计较常用的流式布局方法是利用CSS表格属性(display:table-cell)混合内容列为流动宽度，侧边列为固定宽度的方法。页面布局采用内容优先(ContentFirst)原则，即权衡如:图片、视频、文本、广告等不同内容的重要性来决定网格的编排。(四)文本单位(SizingFont)设计师常用像素(px)来设置文本大小，不同的设备屏幕具有不同的长宽尺寸和像素密度，这就造成了以像素为单位的文本可能在这台设备上显示的效果不错，在另一台设备上看起来太大或太小。并且，由于像素的精确控制，不同的文本大小需要分别逐一设置，调整时也更繁琐。在响应式网页设计中默认文本大小(em)的比例和百分比(%)却具有更好的可访问性和灵活性。“em”可以进行跨浏览器缩放，1em相当于当前默认文本大小，指定了默认文本大小以后，调整默认基准或倍数，其余的文本就会自动按比例进行缩放，从而简化了维护。“%”和“em”类似，文本尺寸也可以按比例缩放，两者在技术上没有太大区别，且都是随父级容器级联的，只是“em”在语意上作为默认文本大小的比例设置更容易理解。另外，还有一种更具灵活性的单位“rem”(rootem)，其设置的大小只与HTML元素有关，避免了在嵌套元素中产生的级联问题。但是，目前“rem”虽然在桌面设备浏览器的支持较好，在移动平台却没有得到广泛的支持。(五)自适应图片和视频(ScalableImages＆Vidoes-)许多网站在小屏幕设备上采取简单的方法来处理图片:方法一，设置图片的CSS的display属性为none，从视觉上隐藏图片;方法二，通过媒介查询简单地控制缩放图片的比例。采用这两种方式的图片依然会被按照原始文件量下载，既没有节省流量也没有节省下载时间，因此都是不可取的。目前最优的方法是在加载页面之后，按照页面布局确定加载哪张图片。根据图片容器在不同设备上的宽度设置断点，通过媒介查询为不同断点提供不同的图片，如果图片等比缩放的艺术效果不够好，则需要视觉设计师为其单独切割画面以保证艺术感染力。对于Retina高分辨率屏幕，需要创建较大面积和文件量的图片，达到细致清晰的显示效果，而不需要在小屏幕低质素的设备上加载这样大的图片。可伸缩矢量图形(SVG，ScalableVectorGraphics)，可以自如缩放而不失真、文件量也不会增大，是未来屏幕显示矢量图形的理想解决方案。视频的处理与图片不同，在小屏幕中可以只提供一个视频链接来提高页面的加载速度;在大屏幕中则按照布局需要成比例缩放，关键是视频的容器要设置与视频的长宽比例一致，这样，视频才能够随着容器的变化而成比例调整。(六)导航方式(NavigationMode)不论在哪种设备中，导航都是引导用户交互的重要元素，其可访问性和易用性是至关重要的，尤其在小屏幕中如何布局导航成为影响用户体验的重要课题。最简单的方式是任导航栏目流动堆叠下来，虽然直观整齐，但却占用了屏幕的宝贵空间，把主要内容信息挤了下去。第二种方法是把导航转化为下拉列表，节省空间，但不够直观，很多用户还不能把原本用于表单中的组件和导航栏目结合起来，另外，目前大多数设备都不支持下拉列表的样式化。第三种方法则是先隐藏导航，然后通过单击一个形象化的按钮来展开导航栏目，节省了屏幕空间，相对于下拉列表也比较容易理解，但增加了一个单击的操作步骤。

三、响应式网页设计的特点

响应式网页设计是为了让浏览者使用不同设备时获得一致的用户体验而开发的，不只是针对移动设备。在互联网产品、技术和标准不断发展的过程中，响应式网页设计也是不断进化的，只有了解其利弊，才能更好地为用户服务。首先，响应式网页设计操作灵活，可以针对某个页面调整，而不必影响网站中的其他页面;其次，响应式网页设计适应性强，相对传统方法更容易调整以适应层出不穷的新设备;再次，响应式网页设计虽然在规划阶段有些耗时费力，但从长远看，却可以节省产品整体的开发维护成本，节约时间;最后，响应式网页设计可以促使产品在不同设备上保持视觉体验的统一性，维护品牌体验的一致性。响应式网页设计并非总是最合适的方法。有的网络服务商需要为大屏幕、固定位置用户和小屏幕、移动用户提供的内容差别非常大，两者的生命周期不同，动态效果和交互体验不同，以及移动定位、传感器和大数据带来的诸多因素，设计师就需要为不同用户的不同使用情境分别设计网站，然后通过媒介查询自动定位到适合的站点。

四、结语

网页设计篇3

在现在的网页设计中DIV标签的使用越来越频繁，DIV标签的作用也越来越重要，以前那种以内容为中心的网站已经成为过去式。论文在分析表格布局技术及CSS技术的基础上，阐述了应用DIV+CSS技术进行网页布局的优势。从高校计算机网页设计课程的教学情况出发，文章中提出了DIV+CSS技术在教学中的应用措施。

关键词：

网页布局；DIV+CSS方案；HTML优化；网页设计

只有当好的网页结构和优秀的网页布局相结合，才能达到最好的浏览效果，使浏览网站的用户感受到最好的用户体验，如何设计出这样的网页就是我们现在研究的重点。

1表格布局技术

早期页面布局的方式主要用框架及表格。在HTML和浏览器还不够完美的时候，我们想让页面内的元素能有一个让人满意的格局是比较困难的事情，由于表格不单可以控制单元格的宽度和高度，而且可以相互嵌套，所以为了让每个网页元素能够放在合适的位置，表格就成为网页设计者的主要工具。表格在页面布局上比较容易控制，通过表格的套入可以轻松地实现各种各样的布局，但是当你需要制作一个繁琐的页面时，HTML文档就会充满了标签。同时，因为浏览器需要把整个表格加载完后才会显示出来，因此加入一个表格过长，那么访客就需要等很长的加载时间才可以看到页面内容。使用表格布局页面会让HTML文档的内部结构变得杂乱不堪，HTML文档字节数变得越来越大，在落后的设备上，页面需要大量修改，正是这些弊端，使得网页开发者开始注意Web的标准。

2CSS样式

CSS就是CascadingStyleSheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。CSS是Web标准中表现标准语言。使用CSS可以简化网站的格式代码，加快网页显示的速度，外部链接样式可以同时定义很多个页面，大大降低了重复劳动的工作量。CSS标准中重新定义了HTML中原来的文字显示格式，并增加了一些新理念，比如类、层等，可以对文字进行定位、重叠等操作，提供了更多丰富多彩的格式；同时CSS可进行集中样式管理。CSS还可以将样式定义独自存储于格式文件中，这样可以将显示的内容和显示样式定义分开，以便于多个HTML文件共享样式定义。除此之外，一个HTML文件也可以使用多个CSS样式文件中的样式定义，相对于之前传统HTML的表现而言，在网站的建立及重构过程中使用CSS技术，可以精准的掌握页面里每一个元素属性，例如：字号样式、背景、排列方式、区域尺寸、项目符号等，方便地实现网页的结构与内容表现完全分离，使站点的加载速度及维护更加方便。使网站的功能扩展性达到前所未有的增强。

3DIV+CSS技术

DIV+CSS是目前应用最多的一种网站布局技术，使用DIV+CSS的网页布局方案，首先需要把HTML结构化，我们可以先不考虑网页的外观。先将内容放在设置好的DIV中，让结构由DIV产生，然后再使用CSS进行格式设计，即“外观”设计。在网站设计前需要对网页进行规划设计。例如，一个页面可能有类似这样的几块：网站名称、主页、子页面导航（主菜单）、子菜单、搜索框、展示区、页脚等。与传统的表格布局相比较，使用DIV+CSS进行网页布局还具有以下优势：更快捷的被搜索引擎的引用，加载速度更快；CSS使用灵活，使页面元素样式多变，利于维护和更新；使用DIV+CSS技术，可以减少视觉的相同性，同一网页在不同浏览器中表现的效果相同或基本不变，保持网页的美感；表现和内容相分离、提高页面加载速度。

4DIV+CSS技术在教学中的应用措施

在网页设计课程学习时，经常是使用Dreamweaver网页开发软件，Dreamweaver是一个视觉化网页开发工具，可以方便、高效的实现DIV+CSS技术对页面进行布局，代码自动生成这一特点，一方面能让学生迅速的设计出网页，另一方面不利于学生真正记住和掌握。所以，在使用Dreamweaver的同时，可以让学生使用Notepad++编辑器或用记事本对代码进行录入。在初学DIV+CSS布局网页时，可以选择一个简单的网站，用表格和DIV+CSS技术两种方法进行布局，让学生真正理解这两种方法的区别和特点。针对不同网站使用不同的布局方法。教会学生当前社会网页前端开发师最需要的技术。基于以上论述，笔者认为在教学中加入DIV+CSS布局需要注意以下几个问题。共享学习资源，利用MOOC。教师要给出学习参考书目录，DIV+CSS布局的有关教材已经相当普遍，另外，教师也可以鼓励学生进行MOOC(慕课)学习，或在淘宝购买一些关于类似的视频教程，不论是在课上还是在课下，都能充分利用网上资源，整合成DIV+CSS布局原理、知识和案例的教学资源。将WEB的标准贯彻到网页设计的学习中，由HTML升级到XHTML。当下大部分网页设计教材讲解的内容还是HTML标记语言，但是在WEB结构标准语言中，我们将会使用XHTML，因此需要在HTML学习的基础上要加入升级版的教学内容，既要讲解HTML的普遍用法和主要标签，也要为学生讲解为什么要升级到XHTML以及升级后的XHTML比HTML好在哪里。适当推荐和引用CSS样式表，强化层叠样式表CSS的基础教学，为学习DIV+CSS的页面布局打下良好的基础。在讲解CSS样式时，可以引用网上使用频繁的外部CSS样式，在使用应用外部CSS文件的时候，页面的布局可以变得非常整洁和清新，让人眼前一亮。在CSS教学过程中，除了需要介绍CSS的常用属性之外，最重要的就是要让学生理解和学会使用外部CSS样式，这是学习DIV+CSS网页布局的提高过程。采用任务驱动式教学方法，以案例为驱动，培养学生学习兴趣，提高学生动手制作能力。在学习了基础的DIV+CSS页面布局知识之后，为学生提供一些DIV+CSS布局的网页案例的基础上，加强学生的动手实践训练，给学生一些真实的企业项目或学校网站项目，例如学院主页或各系主页宣传网站等。

5结语

本文探究的主旨在改变现存的网页设计课程的教学方法与模式，以培育精英级的网页设计人才为目的，扎实提升学生的自主学习能力，实现社会对网页设计精英的技术要求，从而保证该门课程的市场特色和教学质量。为了达到这个目的，我们对教学内容进行改变与扩充，使教学素材更加接近实际需求，竭力使学生更适合当今市场的需要，并为后面课程的学习打下坚实基础。

作者：田红玉 单位：黑龙江信息技术职业学院

参考文献

[1]高川程.浅谈基于DIV+CSS的网页布局技术应用研究[J].计算机光盘软件与应用,2013(1):231-232.

网页设计篇4

现代智能手机和平板电脑的使用率日益普及，桌面版网站浏览的关注度正处于下降趋势，但由于B2C领域的发展，桌面版网站在今后的时间里也将成为网络发展的重要战略方向。在许多电影的官方网站上，由于B2C商业化模式的激励，电影官方网站的设计在内容呈现、浏览互通的方式上下足了功夫，促使网站设计师制作出了许多设计优秀且让人为之惊艳的网页UI设计，起到了有效的营销推广作用，正是如此，我们可以从电影网站的设计中看出些许未来网页UI设计的风向标。本文将从电影网站的设计中浅析未来网页UI设计的部分趋势及改变。

【关键词】

网页UI；设计趋势；电影网站

一、视频运用与无缝画面跳转

在《侏罗纪世界》和《王牌特工》的网站初始背景中，设计者分别运用电影内片段和场景景深变换，使用户在登入网站时能很快地融入到电影主题中，这种新颖的设计方式已得到多数设计师的青睐。随着Flash应用的衰退，大多数PC网站普遍不加入动态变化，而在UI中加入视频的网站却逐渐增多。在HTML中插入视频，需要插入“video”标签，此标签于HTML5中供给使用，HTML5对多媒体网站支撑主要通过包含元素项来兑现，主要包括Video、Canvas、Audio等元素。其中，Canvas元素拥有十分重要的效用，它好似一张画板，通过该元素自带的API联合JavaScript代码，可以在这个画板上绘制各种图案图像以及动画；而“Video”和“Audio”作为视频、音频特征标记，使视频、音频从此不必绑定在Object或Embed标记中,既提高了网页应用的安全性和稳定性，也在一定程度上提高了用户体验，随着近些年主流浏览器支持HTML5，使得利用视频的环境更加容易。Web网站和APP程序在页面跳转上是否有接缝这点上略有不同，随着Flash的没落，HTML的网站成为主流，页面跳转使用页面刷新，变得乏味陈旧。然而，通过Pjax让web网页实现了像APP那样的无缝跳转，如同插入JQuery一样，PC版网站也可以做到页面间的无缝画面跳转。Pjax的使用，大大提升了用户体验，是很多主流网站，如facebook等都支持的一种浏览方式。在电影《饥饿游戏》（TheHungerGames）的官网上，点击左侧栏链接时，页面不做跳转，而只是站内页面刷新，这样的用户体验比起整个页面刷新来说，视觉好上很多，也给用户一种未来科技的代入感。Pjax维护了web原本的构造，在页面跳转时便替换了原定的代码，让页面保持整洁，有利于SEO（搜索引擎优化），Pjax成功取代了Flash和曾经的Ajax。

二、大型化、低密度、长页面及扁平化表现

PC网页常常在有限的空间内加入大量单一button元素的设计，但如今的潮流趋势将UI部件推向了大型化（BigUI）、低密度（LowDensity）和长页面（LongPage），加之Microsoft推出的Window10和Apple的ios9中倡导的扁平化设计，扁平化设计已经在现行的APPUI中逐渐普及。《侏罗纪世界》的网页上，我们看到设计师很明显地将上述元素运用到位，右侧栏的button大型化，模仿window8和window10中的“开始”界面栏。点击网页下方六边形的button可以推出长页面，增加了用户互动元素，整体网页布局采用低密度形式，从使用者角度更容易浏览、理解，减少了网页内容的指向性错误，也让网页可以更好地利用触摸屏幕进行浏览，使部分移动设备得以全方位体验网页。这些年来，许多新型笔记本电脑上安装了触屏,而触摸屏的使用出自手指点击，时常不能进行精准操作，因此用户界面增大，元素和button之间要留出充分的空间，页面中表现元素变得清晰，方便页面滚动浏览。作为大型化、低密度、长页面这三大项要素的合适布局，趋势为一栏布局。一栏布局对于使用者，不会再有不需要的杂项入眼，使重要的内容汇集在一起，页面上的文字更容易被阅读，图片被展示得更大。在今年日本热门电影《百元之恋》的网页上，就采用了典型的一栏设计，在banner部分贴出大幅的电影海报，信息栏则简要地展示电影近期动态和文字新闻，去掉了侧边栏导航条，让网页的层级得到降低，减少了选项菜单，只留下banner下方的选项栏。关于扁平化设计，iPhoneios7以来就在设计界刮起了追崇之风。扁平化设计是不使用任何额外效果的设计，去掉3D化效果，无多重阴影、斜角、立体浮雕等创建出的凸起或凹陷的效果。扁平化网页元素并不是拒绝一切修饰效果。首先，扁平化元素关注颜色，通常使用色彩明亮鲜艳的色彩。与此同时，扁平化也注重文字，很多扁平化处理只会涵盖很少的文字，为了达到让用户易辨识的使用感受，设计中需要注意每一处文字的长度和字体的应用。

三、SVG的使用和液态布局

SVG(可缩放矢量图形)格式可以算上目前最为热捧的图像文件格式，与其他格式相比，SVG不会像JPEG、GIF和PNG依存于尺寸和分辨率，无论环境变化，无论扩大减小，都能够正常输出显示。图片尺寸格式相对更小，技术上可以制作成动画，设计出高分辨率的Web图形网页，图片格式适合在移动端和多种设备下阅览。当今设备的多样化，画面的分辨率出现了彻底的改变。以前，宽度符合960px~980px就可以解决问题，如今对于分辨率多用化，最符合页面宽度的布局当属液态布局。设计元素和图片不是用像素来定义，而是使用百分比，就好比将液体倒入容器中，当容器的形态发生变化时，液态的形态也将跟着发生相应的改变，因此无论什么分辨率的网页，都能够被布局成拥有一定平衡感的页面，这样也解决了适应小型或大型屏幕设备时的缺点了。《模仿游戏》的图片浏览页面就很好地做到了两者结合，看似排列不同的矩形SVG图片方阵，通过跟随浏览器大小的变更，排列从全屏时的四行排列，缩小浏览器视窗后变为两行排列，这样也无需左右调节滑动条进行浏览，而电影剧照的图片清晰度也未发生改变，仍然保持着很好的用户体验。

四、结语

综上所述，本文通过国外电影网站洞悉了一些网页UI设计趋势。值得一提的是，趋势这样简单的概括难以在设计领域长青，前端设计往往要做的就是打破设计的框架，让使用者眼前一亮却恰到好处。了解趋势是重要的，把握这个背景的网页用户的动向也不容忽视，在没有了解用户需求本质的情况下，如果只是为了追求网站的设计，效果未必能够达到预期。优秀的电影网站设计，在大商业环境下不断涌现，跟随这样的设计趋势，不是普通网页UI设计师的必选项，但可以说是一个非常不错的选择。

参考文献：

[1]徐镇辉.基于HTML5的视频网站设计与Web前端EPG系统实现[J].漳州职业技术学院学报,2013（2）.

[2]Sogilogwebsite.“PCサイトのUIデザインにおける12のトレンド”[EB/OL].[2015-02-17]baigie.me/sogitani/2015/02/pc-site-trend-2015/

网页设计篇5

关键词：网页设计;排版与布局;原则;方法

前言

随着我国信息时代的不断发展，人们主要通过网络来获取相关信息，网络的作用也日益凸显，而网页作为网络的重要展现形式，其在设计过程中的排版与布局会直接影响一个网页的浏览量。因此，对网页设计中排版与布局研究有着重要意义。

一、网页设计中的排版与布局的原则

排版与布局是网页设计中的重要组成部分，其主要目的是让信息页面更加美观，使信息内容更加合理且条理清晰，让浏览者得到更好的客户体验。因此，在进行网页排版与布局的过程中，为达到预期效果应遵循一定原则：首先，纵观全局，整体规划。通过对页面的文字和图片进行整体平衡，并融入趣味内容，实现页面的和谐统一；其次，突出网页主题。即利用网页版面的主次关系，将具有较高价值的信息放在版面上部位置，起到重点突出的作用；再次，版面恰当装饰。即在不影响网页功能的前提下，对网页予以简单装饰，做到疏密有度、图文并茂；最后，遵循色彩原则。为了让一个网页在众多网页中脱颖而出，在对网页进行排版设计的过程中，应对页面色彩进行合理组合，形成强烈的视觉冲击力，以引起浏览者的重点关注[1]。

二、网页设计中的排版与布局的内容

网页设计中排版与布局主要是对文字和图像进行版式设计，使两者合理组合，向浏览者准确传递相关信息的同时展现页面美感。其基本内容主要包括网页标题设计、网页文字编排、网页图文结合及页面设计的节奏感。其中网页标题一般被放在网页最上方且位置居中，根据不同需求还可使用图片予以装饰，而剩余页面文字则根据网页的具体需要以点、线、面等方式进行合理编排。不过通篇的文字叙述易使浏览者产生厌烦感，进而放弃阅读，于是页面内容文字还应配图说明，通过图文结合的形式，依据不同网页类别将相关图片与文字进行灵活搭配，使页面内容变得更加生动活泼，从而激发浏览者的阅读兴趣，充分发挥网页传递信息的作用[2]。

三、网页设计中的排版与布局的方法

在进行网页设计之前，首先，要对页面的表达内容予以整体规划，通过简洁明了的布局排版方法对主要信息予以重点突出。其次，合理控制页面主色调，即主色彩控制在五种之内，并确定一种为主色调，其它几种只起到烘托作用即可。最后，注重字体的设置。整体页面的字体在三种以内，且大小适中，同时对标题与正文的字体大小和颜色加以区分。

四、网页设计中的排版与布局的常见类型

目前，网站种类众多，从形式上划分主要包括门户类、形象类、电子商务类、企业类和政府类等，尽管不同种类的网站对网页版面要求也不尽相同，但网页排版与布局的常见类型也就几种。（一）排版的主要类型。排版的基本类型大致被分成十类，其中最为常见的有以下三种：一是满版型。满版型的整个页面被图像占满，采取图像为主、文字为辅的排版设计，使页面具有开阔之感；二是分割型。分割型是把页面进行上下分割或者左右分割，然后将文字和图片分别在两个不同区域，形成直观的视觉感受；三是倾斜型。倾斜型是将文字和图片做倾斜式编排，使页面整体形成视觉冲击效果。（二）布局的主要类型。常见的布局类型有T型、口字型和同字型，其中T型是指页面的顶部为标语和横幅部分，左下方和右下方分别分布着主菜单和详细内容。这种布局模式能使整个页面主次分明、清晰明了，但也缺乏一定灵活性，显得相对枯燥。而口字型的最大优势则是可以充分利用版面，将主题内容放在中间位置，在其上下左右分别放入横条广告、菜单、内容导航、友情链接等内容，整个布局类似一个口字型。这种布局在国外站点较为常见，在国内的使用率相对较低。除此之外，还有一种同字型布局，这种布局一般设有大标题和小标题，其位置均在页面上方，相应内容被布置在左右两侧，而页面下方通常情况下会被留白，即使有内容也多为网站基础信息及网站制造方。

五、结论

综上所述，网页设计中的排版与布局影响着网页的成败，为不断满足人们对网络的需求，网页设计人员应针对不同类型的内容采取相应的排版与布局方式，进而提高网页质量和优化网页视觉效果，为人们带来更好的浏览体验。

参考文献

[1]王树琴.网页设计中元素定位和布局问题的研究[J].中国新通信,2013,(13):65-66.

网页设计篇6

设计活动中包含着主观和客观两方面的因素，它涉及的具体内容很多，本文着重从网页艺术设计的原则和特点谈一些观点。

一、网页艺术设计的原则

1.主题突出

视觉设计表达的是一定的意图和要求，有明确的主题，并按照视觉规律和形式将主题生动地传达给观赏者。视觉设计不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。

2.强调整体性

网页表达的是一定的内容、主题和意念，它以满足人们需求为目标。设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它，并给人一种内部有机联系、外部和谐完整的美感。

3.内容与形式相统一

一个优秀的设计必定是形式对内容的完美表现。一方面，网页设计所追求的形式美必须适合主题的需要，这是网页设计的前提。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。只有通过认真设计和充分的考虑来实现全面的功能并体现美感，才能实现内容与形式的统一。设计者可以对其进行形式上的适当变化，从而丰富整个网页的形式美。

二、网页艺术设计的特点

1.多种媒体的综合性

目前网页中使用的多媒体视听元素主要有文字、图像、声音、视频等，随着网络宽带、光纤的增加、芯片处理速度的提高以及跨平台的多媒体文件格式的推广，必将使设计者综合运用多种媒体元素来设计网页。目前国内网页已经出现了模拟三维的操作界面，在数据压缩技术的改进和流技术的推动下，互联网上出现了实时的音频和视频服务。因此，多种媒体的综合运用是网页艺术设计的特点之一。

2.持续、交互性

网页不同于传统媒体之处在于信息的动态更新和即时交互性。即时的交互性是web成为热点的主要原因，也是网页设计时必须考虑的问题。持续的交互性，使网页艺术设计不像印刷品设计那样，发表之后就意味着设计的结束。网页设计人员必须根据网站各个阶段的经营目标，配合网站不同时期的经营策略以及用户的反馈信息，及时地对网页进行调整和修改，不断创作出新的网页设计作品。

3.多维性

多维性源于超链接，它的出现使网页的组织结构更加丰富，浏览者可以在各种主题之间自由选择，从而打破了以前人们接收信息的线性方式。例如，可将页面的组织结构分为序列结构、层次结构、网状结构、复合结构等。但页面之间的关系过于复杂，不仅给浏览者检索和查找信息增加了难度，也给设计者带来了一定的困难。为了让浏览者在网页上迅速找到所需的信息，设计者应考虑快捷而完善的导航设计。

4.版式设计的不可控制性

所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，是一种具有个人风格和艺术特色的视听传达方式。它在网页的艺术设计中有着重要的地位，在传达信息的同时能产生感官美和精神享受。网页的排版与平面媒体排版有很大差异。后者都有固定的尺寸，而前者的尺寸是由浏览者来控制的，这使设计者不能精确控制网页上每个元素的尺寸和位置。同时，网页的结构也不像印刷品那样为线性组合。由于计算机仍处在发展之中，没有制定出统一的标准，从而导致网页版式设计的不可控制性，网页设计者无法控制页面在用户端的显示效果，但这也是网页设计引人入胜之处。

5.技术与艺术结合的紧密性

设计是主观和客观共同作用的结果，设计者不能超越自身已有经验和所处环境提供的客观条件限制，优秀设计者正是在掌握客观规律的基础上得到了完全的自由。网络技术主要表现为客观因素，艺术创意主要表现为主观因素。网页设计者应该主动地掌握现有的各种网络技术，注重技术和艺术的结合，这样才能充分展现技术之长，实现艺术之想象。

网页设计篇7

进入21世纪，是互联网发展的又一个新时代，人们获得信息的主要方式是通过互联网。在用户浏览网页时，网页设计中色彩的选用是网站的点睛之笔，也是判断一个网页设计成败与否的关键。色彩不但能给浏览者强烈的视觉冲击力和艺术美感，还能更深层次的体现出该网站所要传递给浏览者:一个企业的经营理念和品牌所展示的价值。

关键词:

网页设计;色彩;搭配

在网页设计中，最难的让人无从下手的不是某个软件怎么运用，而是要怎么设计来吸引浏览者的眼球，这就要求我们在设计中加强对色彩的合理使用，使之为网页设计过程中能起到锦上添花的作用。这就要求在做网页设计的时候不仅要有熟练的技术，更要有艺术的美感，色彩可以说是网页设计中穿惯始终的一条纽带，从而也就体现了它的重要性。

1网页设计的基本概念

1．1网页设计的定义在说明网页设计之前，先必须明白网页的概念:网页通俗的讲是网站中的一页，是HTML格式(文件扩展名为．html．asp．php．Jsp等)。网页实际上就是一个文件它会被存放在有网络存在的某台电脑中。网页会由相应的网址(URL)来读取和保存，当我们使用时，会穿过一系列看不见的程序，网页文件就会被你的计算机所接收，然后再由各种浏览器来分析网页的内容，最后呈现在你的眼前［1］。网页设计是一门把网络应用和艺术设计紧密相结合的一门新兴的学科，以网络作为载体，融入人们对审美的追求，继而有鲜活的艺术表现特色。在一个优秀的网页设计中，必须对色彩加以高度的重视。

1．2网页设计的发展阶段第一阶段，以文字为主的阶段。这个阶段的网页是由一个个字符组成，所呈现的也只是单一的文字，在艺术的表现效果上基本上没有什么要求，只注重实用性。第二阶段，图和文字相结合。由于计算机技术的不断提高，静态的网页已经受到了局限性，人们整体审美观和艺术感加强，网站也不能仅仅以实用为主，而是慢慢的把制作网站的技术和艺术相联系来丰富网站的内容。第三阶段，一个字“动”。随着技术的不断更新，内容不断的增加，出现了动态交互式的网页，加之制作软件的不断强大，网页设计人员可以根据需要各自取舍相关的内容，这时候也涌入了一大批从事艺术的设计人员，网页设计技术也就从这个阶段开始成为一个新的起点，不断的注入新鲜的血液来不断壮大［2］。

1．3网页设计的要素网页设计作为一门新兴的学科，主要要素包括:文字(既有它是局限性也有它独到的地位，所以文字是网页初始时的必不可少的要素，由之才慢慢扩展)、图形、图像、色彩(色彩是最能吸引浏览者的注意力的因素之一，色彩甚至可以直接判断一个网页设计的好坏，因为在网页中色彩占的比例较大，往往会填补不足之处)、导航栏(导航栏是网页站点超链接的主要线索，使得站点结构清晰、链接简单、查询便捷等)、多媒体(多媒体在网页设计的运用，可以说是又一个有意义的突破，与声音的结合更加增大了页面的感染力)、页面布局(在网页设计中不是把相关的页面机械的拼凑，而是要把有用的内容合理、有效的编排，分清主次，所以具备了前边说的几个基本要素的基础上，才能考虑页面的整体布局，这样才能更好的为浏览者展示更好的视觉效果)等。

2色彩在网页设计中的应用

美国光学学会的色度学委员会曾经把颜色定义为:颜色是除了空间的和时间的不均匀性以外的光的一种特性，即光的辐射能刺激视网膜而引起观察者通过视觉而获得的景象。在我国国家标准CG5698－85中，颜色的定义为:色是光作用于人眼球起除外形意外的视觉特性。因此，色彩感觉不仅与物体本来的色彩特性有关，还受时间、空间、外表状态以及该物体的周围环境的影响［3］。颜色分为无色系和有色系。无色系是指黑、白、灰;有色系是指除无色系以外的所有色彩。

2．1色彩属性

(1)明度:明度指色彩的明暗程度．是从明到暗的若干排列的灰色，无色系只有明度的特征。(图1)图1

(2)饱和度:是指色彩的鲜明度。根据需要可以调整色彩的鲜明度，突出所要表现的内容。

(3)色相:也叫颜色的光泽，是基本的特征，传递颜色基本基调(图2十二色相图)

2．2网页设计中色彩的搭配

(1)色彩的心理表述色彩与人的视觉感受有着密切的关系，色彩有独特的象征意义，代表了人们丰富多彩的心理变化和复杂的情感。白色具有神圣不能侵犯的性质。给人洁净、纯朴、明快、清净的感觉。在一些高档商品网站设计中白色会被广泛采用。黑色具有庄重、沉稳的特性。给人神秘、深沉、稳重的感受。在高科技和军事网站中多采用黑色。(图4)灰色具有调和的特性。给人平凡、消极、中和、沉寂的感受。所以灰色可以用于任何色调为主的网站中，起到过度的作用。 红色具有温暖、热情、活力、刺激、愤怒的特性。给人热血沸腾、过目不忘、幸福美满、喜庆的感觉。这种色彩多用于政府性网站、婚纱服务类网站。黄色具有成熟、清醒、高端的特性。给人一种娇贵、收获的感觉。多用于食品类、儿童类网站中。蓝色具有经典、冷静、清凉、诚实、悠远、永恒。给人冷静的思考氛围。多用于高科技企业网站和一些具有权威性的网站中［4］。绿色具有平静、柔和、新鲜、青春、活力的特性。给人宁静、安全、健康、平安的感觉。在学校、环保、宣传和健康类网站中被广泛使用。紫色具有深远、高傲、优雅的特性。给人捉摸不透的神秘感。多用于以女性为主题的网站:配饰、内衣、化妆品等。

(2)色彩法则第一个法则:色彩的鲜明性。在设计中色彩鲜明，是很容易就能吸引浏览者的注意力。第二个法则:色彩的感染性。选用独特的色彩搭配，会给浏览者留下深刻的印象。第三个法则:色彩的合理性。紧扣主题、不过分夸张，给浏览者统一、和谐的感觉。第四个法则:色彩的延展性。不同的色彩会使浏览者产生不同的想象空间:看到黑色会想到神秘，深沉;看到红色会想到激情、刺激;看到蓝色会想到蓝天，大海;看到绿色会想到生命，健康等等［5］。在网页设计中，选择适合主题的色彩，会给整个网站增加灵气、有血有肉，更加鲜活。

3结语

色彩是网页设计的精髓。它不但给网页作品披上了一件华丽的外衣，能使平面的东西立体化，同时引导人们对网页有一个深层次的理解。色彩通过人们的视觉反应，在生理上和心理上产生强烈的共鸣，选用不同的颜色，所呈现的反应也各不相同。色彩有强烈的表现力和冲击力，选取好的色彩会及时吸引人们的眼球，给人留下深刻的印象，换句话说就是一种美的享受。色彩对人的视觉有决定性作用，一个好的网页设计，不但要求设计者的技术一流，还要求对色彩的运用也能游刃有余。在网页设计中色彩越来越被人们所重视，色彩的选用、比例、含义等方面，对我们有了新的要求，要求我们认真实践、研究、解决，要求我们无论在什么样的网页设计中，能准确找到它的定位。

参考文献:

［1］武上富．网页制作技巧和设计原则［M］．广州:广东科技出版社，2006．

［2］李宏，张小敏．网页设计与制作［M］．北京:化学工业出版社，2005．

［3］文涛，文峰．色彩设计［M］．北京:中国青年出版社，2008．

［4］黎芳．网页设计与配色实例分析［M］．北京:北京希望电子出版社，2006．

网页设计篇8

关键词：网页设计 审美 美感

一、网页设计的审美需求

1、网页的审美

谈到美，网页这种特殊环境下的美与传统的艺术上的审美有着明显的区别，一般的艺术上只要能够在欣赏者的心里产生共鸣就是美的；而网页的布局上的审美却要受到很多的限制，网页设计面对的是大量用户，由于更新速度的快捷，随时都会反馈回来对网页的批评建议等，可以根据实际情况进行修改，这个过程可以在很短的时间里完成。同时网页能融合文字、图片、声音、动画于一身。这是传统艺术所达不到的。当然最根本的在使用方面就限制了它不能够随意的挥洒自如，任设计师自由的发挥。

2、网页的功能

网页，最初就是在功能性的基础之上发展起来的。使用者如何从网页中更好得到功能，这就需要站在使用者的角度来看待网页设计。作为设计师引导潮流没有错，但是更要贴近自己的使用对象，想他们所想，急他们所急，适时的将自己的设计风格融入到作品中去，接受他们的检验，只有经得起考验的设计才是好的设计。

二、网页设计的几点原则

1、要考虑上网者的环境。

在网络世界里，涉及到各方面的内容，使用者通常是打开很多的窗口，在一种纷繁复杂的情况下接受信息。假如他们浏览的网页是设计特别花哨，文字、动画等堆砌的极为杂乱，加剧了心理上的厌烦感，这种网页能算得上美吗？所以从使用环境里的功能的因素来考虑美才是最根本的。

2、考虑网页的使用对象

考虑网页的使用对象本身也是网页审美的一个重要方面，网页设计都是为每个具体的网站做宣传，那么不考虑对象就如同闭门造车，这样会造成其根本的功能的损失。例如一个儿童网站，设计得如同新闻专题的网页一样，纯粹是文字。那么使自己的使用对象 ――儿童在浏览该网站的时候毫无兴趣，阻碍了网站的基本的目的，从这个功能层面上来理解，设计的美是同使用对象分不开的。

3、考虑网页的使用功能

网页设计的美其实是一个满足使用者需求的过程，使用起来方便快捷，排除使用中的问题，这就是美的，这就是纯粹从功能上的要求出发的。假如我想上一个体育的网站了解当天的足球战报，那么我上网的目的性就是非常的明确，直接看足球的结果。我的上网过程就是先敲入网址，尽快的找到足球的栏目，再找到比分的链接，设计师如果考虑到上这个网站的很多人都想知道足球的比分，那么在主页上放一个流动的临时更新的框，就可以使上网站的使用者直接在主页上看到想要看的东西，这样快速而又方便的结果，其实质上是一个网页设计的成功的地方，这种网页就是美的。反之假如把网页设计得非常的“漂亮”（这里指的是纯粹的从艺术审美上的漂亮，满足一般的形式美的要求的，而不考虑使用环境的情况），但过程复杂，增加了使用者的不便，没有为使用对象考虑，就是失败。

4、网站的自身形象设计

还有一个美的因素也不能不考虑，就是网站本身，通过自己的设计使网站的形象得到提升，使网站的形象在每个使用者的心目中扎根。这是现在网页设计中普遍不受重视的，例如网站的名称或者是网址没有得到强化，尽管使用了之后觉得好，但是第二次使用时却记不起是什么网站，收藏夹里太多也找起来不方便。因此假如网页设计时注意了网站的名称和网址的因素，加强网站自身形象设计，从这个功能上来说是设计成功之处，也是网页设计美的一个观念的异化。

三、网页美的基本标准

1、简洁实用

网络特殊环境下，以最高效率的方式将用户所要想得到的信息传送出去，使用方便，越满足使用者的要求，就越显示出其功能美。

2、整体性好

一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。

3、网站形象突出

一个符合美的标准的网页是能够使网站的形象得到最大限度的提升的。

4、页面用色协调，布局符合形式美的要求

布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

一个网站单一颜色，让人感觉单调乏味；颜色过多让人感觉轻浮花俏。必须有一种或两种主题色，不至于让客户迷失方向，也不到于单调，乏味。

5、交互式强

发挥网络的优势，使每个使用者都参与到其中来，这样的设计才能算成功的设计。

四、设计界面的应用方法

设计界面所包含的因素运用中必须有侧重、有强调的把握。设计因素虽多，但它仍是一个不可分割的整体。它的结果是物化的形，但这个形却是代表了时代、民族等方面的意识，并最终反映出人的“美”的心理活动。

设计界面的运用，核心是设计分析。在一些大公司都有许多的成功案例可为借鉴。如柯尼卡公司设计相机，首先不是绘制“美”的形和考虑技术的进步，而是进行对象人的日常行为分析，作出故事版(STORY)。它先假定对象人的年龄为35岁，名：Xxxx，从而分析他的家庭、喜好与憎恶，分析他的日常行为，进而考察其人在什么场合需要僚机，从而为设计提供概念(CONCEPT)与目标(TARGET)，进行设计。经过分析，设计师有了明确的概念与目标，并随信息的交互产生了创造力。

另一方面，设计师自身对社会环境也要进行深入的认识与考察，对设计的作品取向有明晰的认识。日本设计师佐野邦雄先生曾作一图――生活的变迁与设计师的课题，将日本及世界上某些非常有影响性的事件进行了归纳，进而对设计有了深入的认识与感悟。所以，要运用好设计的界面，理性的认识是首要的，其次就是创造性的，而且是有实效性的分析、处理信息。设计不是一成不变的，分析方法也不是一成不变的，设计的界面同样是在人一物的信息交流中变化发展的。

以上谈了几个涉及到网页设计的美的相关的功能的影响，综合以上的概述，下面总结以下网页美的基本标准。

五、设计界面的运用原则

1、合理性原则

即保证在系统设计基础上的合理与明确。任何的设计都既要有定性也要有定量的分析，是理性与感性思维相结合。努力减少非理性因素，而以定量优化、提高为基础。设计不应人云亦云，一定要在正确、系统的事实和数据的基础上，进行严密地理论分析，能以理服人、以情感人。

2、动态性原则

即要有四维空间或五维空间的运作观念。一件作品不仅是二维的平面或三绝的立体，也要有时间与空间的变换，情感与思维认识的演变等多维因素。

3、多样化原则

即设计因素多样化考虑。当前越来越多的专业调查人员与公司出现，为设计带来丰富的资料和依据。但是，如何获取有效信息，如何分析设计信息实际上是一个要有创造性思维与方法的过程体系。

4、交互性原则

即界面设计强调交互过程。一方面是物的信息传达，另一方面是人的接受与反馈，对任何物的信息都能动地认识与把握。

网页设计篇9

虽然与平面设计相比，网络设计对艺术元素强调的不多，但是网页设计中的艺术设计是计算机网络发展进步的要求。创新是一个民族进步的灵魂，是我们不懈发展的动力。网页设计中的艺术元素要求设计师们进行创造性思维活动。

网页设计中的艺术设计细胞包含三个方面的内容。首先是视听上的艺术细胞。在视听上有如文本、图像、背景音乐、导航工具等视听元素。其中文本是其主导地位的一个元素，因为一个网站最终是要表达一个思想或传递些信息，而文字的好坏直接关系到网页的整体质量。能够直接吸引观众注意力的当属音频、视频和动画元素的设计上，为了突出重点，往往采取把动画设计在弹出广告中，或用在导航条中，视频的出现使得网络的内容更加丰富多彩。

其次是版式上的艺术细胞。简单地说，网页的版式设计就是在有限的空间上如何将大容量的信息进行排列组合，而不同的组合模式所产生的效果也大不相同。每种版式各有千秋，使用不同的网站设计主题，有满版型的、对称型的、分割型的等。网络设计者应当首先进行定性分析，分析如何使整个网页总体美观、整洁和有条理，同时还要进行定量分析，小小的设计空间上进行布局。

再次是色彩上的艺术细胞。一个网站必须要有一两个主题色彩来象征网站的内涵，这是进行市场竞争的重要步骤，我们应当注意到色彩对人视觉效果的冲击。色彩的搭配和运用既是一门技术活，也是一门艺术。往往不同的色彩所折射出来的概念是不一样的。例如，绿白组合可以使人感觉优雅舒适，红色可以凸显喜庆的氛围，蓝白混合能给人清新淡雅的印象。在设计规划中，强调整体性和一致性，杂乱无章的界面只会增加网络用户的厌恶感。

2.网页艺术设计应当注意的问题

值得注意的是，艺术设计包含较多的主观因素，因此对网页设计者有一定的技术要求，要求熟练掌握各种软硬件技术，把技术和艺术交融在一起，发挥技术的支持性作用和艺术的想象空间。注意形式美和实质效果的统一。如果为了追求独特风格设计而缺乏网页内容的真实性，又或者只重视内容的充实而忽视了艺术表现，那么结果都是使网页设计显得空洞苍白。只有将两者有效统一起来，在和谐的外表下使用户的视、听觉领会到主题内容的精髓，才能使网页设计具有价值。

注意网页设计的持续性和交换性问题。网页设计是在网络环境下完成的，不同于传统媒介方式，因此要求网页设计者的观点与时俱进，进行改变。现代信息变化莫测，人们接受信息的方式也发生根本的转变，人们不再是吸纳信息的被动接受者，而是有个人的偏好和倾向，及时反馈用户的信息是网页设计取得进步的经验和宝贵财富，也是企业螺旋式上升的必然结果。

3.小结

网页设计篇10

Flash技术运用范围非常广泛,不论是网站、广告、动画、游戏,甚至程序设计与多媒体化展示方面都有一定程度的运用。本文首先对Flas今后的发展趋势进行分析并具体化叙述了Flash的实际定义与特点,并对Flas当前在网页设计中的应用方式进行分析,针对性阐述了Flas在整站式网页设计过程中交互式导航系统、Web图像动画展示以及鼠标动画的应用。在此针对性研究Flas在网页设计中的相关研究,望研究结果能够对今后的学者一定帮助。

关键词:

Flas；网页设计；应用研究

随着社会迈入信息化时代,网络及计算机技术的发展及普及程度呈现出优质化的发展形势,从而促进网页动画渐渐发展起来,此外网页动画设计在网页设计中占据重要地位,促使人们在关注动画整体发展趋势的过程中将注意力放在网页动画方面。在构建及设计网页时,运用Flash帮助网页实现多媒体化的网页成果展示,同时也渐渐成为网页设计发展过程中不可或缺的重要部分。

1Flash的运用及特点

MacromediaFlash作为一种交互式编辑矢量图及多媒体创作软件,因特网网页设计矢量动画文件格式时常得以较多的运用,此外,针对性分析Flash,可以了解到目前其主要具备以下六大特点:第一,将矢量图形作为主要运行前提,致使其自身文件导出容量不大,在进行图片缩放时对其自身的清晰度影响不大,在网络传输过程中存在一定的便捷性;第二,Flash具备非常优质化且强大的AS代码,在设计动画时运用Flash技术,促使动画的交互性优良,便于读者在阅读过程的理解并实施相关互动;第三,针对实际运用过程分析,Flas在运作时主要采用插件,若用户想要实现视频观看,仅仅需要安装一次视频插件就可以直接观看,避免繁琐性多次安装的现象发生。此外,由于Flash构建的动画自身极小,所以其具备较快的调用速率;第四,在设计Flash过程中,可以根据需要适当增加页面控制按钮帮助页面实现链接的跳动,还可以运用鼠标实现页面动画中的运动及移动。第五,Flash可以实现动画视听效果内容的升华,譬如渐变声、位图等等,用户在制作图片的过程中可以直接构建全Flash制作站点;第六,Flas属于一种“准”流式文件内容,无需全部下载完成就可以实现动画观看。

2Flas在网络设计中的应用

在网页设计中,Flas具备非常多关键性的作用,如流式播放动画、FlashMV及短片动画等,此外其所表现的形式中存在一定的交互性。但需要注意的是,在实施网页设计时,避免繁琐、复杂的动画设计效果的存在,毕竟物极必反,只会降低网页的品质;如图1所示。

2.1网页动画信息交互的实现

为了进一步却宝宝网页动画信息交互整体的流畅性,其中的一个重要关键就是Flas导航的交互性设计。在对该部分内容进行设计时,往往会使用针对性的Flas脚本——AxtionScript。实际设计过程中,通常由编程者的思想与Flash在事件中作用共同形成动力,并依据动画中的相应内容实现AxtionScript的具体化定义。

2.2网页动画相关要素的设计

第一,交互式导航系统。在网页设计中,导航栏对用户主要起到一种引导性作用。所以在设计时需要将其设计为多个导航级别,并构建针对性的标识来将其区分,以色彩为例,可以采用较为鲜艳、清爽式的搭配。第二,Web图像动画形式展示。传统网页中,Web图像主要呈现静态,不过经由计算机技术的不断发展,最近几年在网页设计中渐渐出现了一部分动态化的Web图像。同时在其色彩方面的运用,主要采用RGB模板,并在网页安全色方面运用216色,其主要的色彩格式包括GIF、PNG以及JPE6。第三,鼠标动画。为了实现优质化Flas效果,在制作动画效果时要特别注意鼠标在移动过程中其轨迹图案及色彩搭配。首先,要确保鼠标移动过程中的色彩与网页设计色彩是不同的,有助于用户一眼就可以将鼠标找到。最后就是,鼠标在色彩区别网页之后还要注意其透明性,避免遮蔽信息的现象出现。

3结语

综合全文内容,在网站设计过程中,Flash作为一个极具重要性的视觉性元素,其可以在帮助网站实现多媒体化效果展示的同时,还能够结合数据通信这一措施全面性丰富网站自身具备的素材及资源,最终达到一种动态化的效果。截至今日,由于计算机技术发展速度不断提升,结合Flash自身所具备的多种优质化特征,笔者相信在今后人们的日常生活中,Flas一定可以获得更加广泛的用途,更具普遍性,最终实现网页设计的主体化运用趋势。

作者：侯英杰 单位：陇南师范高等专科学校

参考文献