热线电话:
400-123-4567网页设计范文亿博电竞
亿博电竞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)不论在哪种设备中,导航都是引导用户交互的重要元素,其可访问性和易用性是至关重要的,尤其在小屏幕中如何布局导航成为影响用户体验的重要课题。最简单的方式是任导航栏目流动堆叠下来,虽然直观整齐,但却占用了屏幕的宝贵空间,把主要内容信息挤了下去。第二种方法是把导航转化为下拉列表,节省空间,但不够直观,很多用户还不能把原本用于表单中的组件和导航栏目结合起来,另外,目前大多数设备都不支持下拉列表的样式化。第三种方法则是先隐藏导航,然后通过单击一个形象化的按钮来展开导航栏目,节省了屏幕空间,相对于下拉列表也比较容易理解,但增加了一个单击的操作步骤。
响应式网页设计是为了让浏览者使用不同设备时获得一致的用户体验而开发的,不只是针对移动设备。在互联网产品、技术和标准不断发展的过程中,响应式网页设计也是不断进化的,只有了解其利弊,才能更好地为用户服务。首先,响应式网页设计操作灵活,可以针对某个页面调整,而不必影响网站中的其他页面;其次,响应式网页设计适应性强,相对传统方法更容易调整以适应层出不穷的新设备;再次,响应式网页设计虽然在规划阶段有些耗时费力,但从长远看,却可以节省产品整体的开发维护成本,节约时间;最后,响应式网页设计可以促使产品在不同设备上保持视觉体验的统一性,维护品牌体验的一致性。响应式网页设计并非总是最合适的方法。有的网络服务商需要为大屏幕、固定位置用户和小屏幕、移动用户提供的内容差别非常大,两者的生命周期不同,动态效果和交互体验不同,以及移动定位、传感器和大数据带来的诸多因素,设计师就需要为不同用户的不同使用情境分别设计网站,然后通过媒介查询自动定位到适合的站点。
响应式网页设计从媒介查询、流式布局、自适应图片开始,但其发展远不止于此。响应式网页设计需要以用户的网络环境、使用情境、设备功能为考虑因素,来设计不同的布局、内容及交互。像DHTML或AJAX一样,响应式网页设计还不是一个完美的解决方案,它不断发展进化也可能终将被替代而退出历史舞台,但目前,它仍是网页设计的首要趋势。互联网及智能设备发展迅速,设计师只有扩展新知,开阔视野,不断创新,才能适应日新月异的社会变革。
谈到美,网页这种特殊环境下的美与传统的艺术上的审美有着明显的区别,一般的艺术上只要能够在欣赏者的心里产生共鸣就是美的;而网页的布局上的审美却要受到很多的限制,网页设计面对的是大量用户,由于更新速度的快捷,随时都会反馈回来对网页的批评建议等,可以根据实际情况进行修改,这个过程可以在很短的时间里完成。同时网页能融合文字、图片、声音、动画于一身。这是传统艺术所达不到的。当然最根本的在使用方面就限制了它不能够随意的挥洒自如,任设计师自由的发挥。
网页,最初就是在功能性的基础之上发展起来的。使用者如何从网页中更好得到功能,这就需要站在使用者的角度来看待网页设计。作为设计师引导潮流没有错,但是更要贴近自己的使用对象,想他们所想,急他们所急,适时的将自己的设计风格融入到作品中去,接受他们的检验,只有经得起考验的设计才是好的设计。
在网络世界里,涉及到各方面的内容,使用者通常是打开很多的窗口,在一种纷繁复杂的情况下接受信息。假如他们浏览的网页是设计特别花哨,文字、动画等堆砌的极为杂乱,加剧了心理上的厌烦感,这种网页能算得上美吗?所以从使用环境里的功能的因素来考虑美才是最根本的。
考虑网页的使用对象本身也是网页审美的一个重要方面,网页设计都是为每个具体的网站做宣传,那么不考虑对象就如同闭门造车,这样会造成其根本的功能的损失。例如一个儿童网站,设计得如同新闻专题的网页一样,纯粹是文字。那么使自己的使用对象 ――儿童在浏览该网站的时候毫无兴趣,阻碍了网站的基本的目的,从这个功能层面上来理解,设计的美是同使用对象分不开的。
网页设计的美其实是一个满足使用者需求的过程,使用起来方便快捷,排除使用中的问题,这就是美的,这就是纯粹从功能上的要求出发的。假如我想上一个体育的网站了解当天的足球战报,那么我上网的目的性就是非常的明确,直接看足球的结果。我的上网过程就是先敲入网址,尽快的找到足球的栏目,再找到比分的链接,设计师如果考虑到上这个网站的很多人都想知道足球的比分,那么在主页上放一个流动的临时更新的框,就可以使上网站的使用者直接在主页上看到想要看的东西,这样快速而又方便的结果,其实质上是一个网页设计的成功的地方,这种网页就是美的。反之假如把网页设计得非常的“漂亮”(这里指的是纯粹的从艺术审美上的漂亮,满足一般的形式美的要求的,而不考虑使用环境的情况),但过程复杂,增加了使用者的不便,没有为使用对象考虑,就是失败。
还有一个美的因素也不能不考虑,就是网站本身,通过自己的设计使网站的形象得到提升,使网站的形象在每个使用者的心目中扎根。这是现在网页设计中普遍不受重视的,例如网站的名称或者是网址没有得到强化,尽管使用了之后觉得好,但是第二次使用时却记不起是什么网站,收藏夹里太多也找起来不方便。因此假如网页设计时注意了网站的名称和网址的因素,加强网站自身形象设计,从这个功能上来说是设计成功之处,也是网页设计美的一个观念的异化。
网络特殊环境下,以最高效率的方式将用户所要想得到的信息传送出去,使用方便,越满足使用者的要求,就越显示出其功能美。
一个网站强调的就是一个整体,只有围绕一个统一的目标所做的设计才是成功的。
一个网站单一颜色,让人感觉单调乏味;颜色过多让人感觉轻浮花俏。必须有一种或两种主题色,不至于让客户迷失方向,也不到于单调,乏味。
发挥网络的优势,使每个使用者都参与到其中来,这样的设计才能算成功的设计。
设计界面所包含的因素运用中必须有侧重、有强调的把握。设计因素虽多,但它仍是一个不可分割的整体。它的结果是物化的形,但这个形却是代表了时代、民族等方面的意识,并最终反映出人的“美”的心理活动。
设计界面的运用,核心是设计分析。在一些大公司都有许多的成功案例可为借鉴。如柯尼卡公司设计相机,首先不是绘制“美”的形和考虑技术的进步,而是进行对象人的日常行为分析,作出故事版(STORY)。它先假定对象人的年龄为35岁,名:Xxxx,从而分析他的家庭、喜好与憎恶,分析他的日常行为,进而考察其人在什么场合需要僚机,从而为设计提供概念(CONCEPT)与目标(TARGET),进行设计。经过分析,设计师有了明确的概念与目标,并随信息的交互产生了创造力。
另一方面,设计师自身对社会环境也要进行深入的认识与考察,对设计的作品取向有明晰的认识。日本设计师佐野邦雄先生曾作一图――生活的变迁与设计师的课题,将日本及世界上某些非常有影响性的事件进行了归纳,进而对设计有了深入的认识与感悟。所以,要运用好设计的界面,理性的认识是首要的,其次就是创造性的,而且是有实效性的分析、处理信息。设计不是一成不变的,分析方法也不是一成不变的,设计的界面同样是在人一物的信息交流中变化发展的。
以上谈了几个涉及到网页设计的美的相关的功能的影响,综合以上的概述,下面总结以下网页美的基本标准。
即保证在系统设计基础上的合理与明确。任何的设计都既要有定性也要有定量的分析,是理性与感性思维相结合。努力减少非理性因素,而以定量优化、提高为基础。设计不应人云亦云,一定要在正确、系统的事实和数据的基础上,进行严密地理论分析,能以理服人、以情感人。
即要有四维空间或五维空间的运作观念。一件作品不仅是二维的平面或三绝的立体,也要有时间与空间的变换,情感与思维认识的演变等多维因素。
即设计因素多样化考虑。当前越来越多的专业调查人员与公司出现,为设计带来丰富的资料和依据。但是,如何获取有效信息,如何分析设计信息实际上是一个要有创造性思维与方法的过程体系。
即界面设计强调交互过程。一方面是物的信息传达,另一方面是人的接受与反馈,对任何物的信息都能动地认识与把握。
互联网技术日新月异的发展,已成为人们生活中不可缺少的一部分。互联网的发展使信息传达的范围速度与效率都产生了质的飞跃,随着时代的发展,网站建设越来越接近于一门艺术而不仅仅是一项技术。
网页设计作为一个全新的设计领域,没有照搬的模式,没有从属和延续但任何设计形式又有去规律和标准。但也有些出学的设计者,将艺术的设计语言和设计理念抛到脑后,机械的完成设计,完全成为了技术的奴隶,因此,我想从平面设计基础理论在网页设计的应用来浅谈我对网页设计的理解,希望给广大读者带来一些启发。
第一个要素――点:在日常生活中很多东西都可以看作点,如晶莹剔透的一颗雨滴,大海中的一页孤舟,星空中的一轮明月……从几何学角度来说,点是线的交点,它没有大小和形状;从造型艺术来说,点是最基本的要素,指画面中某一小块区域;从视觉的角度而言点不但有大小还有形状。在具体构成中点并非都是以远的形式出现的,一些较小的个体元素都可以视为点。例如,在网页中的一些按钮就可以当作点来处理。在运用点的时候重点不仅在于外形,更在于点在整个空间中所起的作用,在相同的视觉环境下相对面积越小点的感觉越强。点越多其间隔就越短,免得感觉就越强,这对把握画面的整体效果和统一画面十分重要。
在Racing乐队网站中20个大小相同的圆点铺满了首页这些圆点既是页面中的按钮,又是页面的装饰元素,在不同的色彩映衬下圆点似乎产生了韵律感和运动感,浏览者的视线会不断在这些点之间徘徊决定最终去向。
第二个要素――线:线是由无数个点构成的根据其长度宽度方向等构成线。线是点移动的轨迹线在页面中有强调分割引导的作用。垂直的线给人平稳挺拔的感觉;弧线使人感到流畅轻盈;曲线使人跳动不安。不同粗细的线在空间的性格也是不同的,粗线条给人粗犷,勇敢阳刚的感觉;细线条可以表达锐利敏感速度之感;当粗线和细线进行结合时粗线必定先进入视觉,若线的长短符合透视规律,就能表达出强烈的空间感。因而,线的构成在网页设计中有着广泛的应用,网页设计师常用简洁的线条进行页面构图,以此传递丰富的视觉信息和思想感情。
第三个要素――面:根据几何学定义,面是线移动的轨迹。点和线的密集可形成面;面的分割面与面的合成亦形成新的面。面试构成空间的基本单位一段文字可以视为一个面,一张图像可以看作一个大面,一大片留白可以成为一个面面的概念不是固定的,面试网页构成中常用的元素,它的大小曲直变化都会影响页面的整体布局。
分割面是规划空间的重要手段,在网页设计中,设计者通过面的分割组合虚实交替等多种手法来实现页面的整体效果。在网页设计技术中表格和框架就是用来分割页面的利用面的分割,可是网页页面主体清晰,层次分明。避免杂乱的重要原则就是:少即是多。另外,在网页设计中要敢于留白,善于留空。空白可以定义为页面中没有安排内容的地方,空白空间并不一定是白色的,它可以是环境空间的颜色或图案。
第四个要素――空间:网页设计中的空间并非生活中的立体空间,而是一个假象的空间,是看得见而摸不着的,是在二维平面上建立的空间关系。在设计中,我们可以利用对比强烈的大标题可以作为前景,大面积的正文构成中景,附属的版权信息构成背景。实践证明,这种清晰而和谐的层次关系,极大地提高了页面的整体艺术效果。
网页界面艺术设计离不开色彩的应用,当打开一个网站的时候,给用户留下第一印象的既不是网站丰富的内容,也不是网站合理的布局,而是网站的色彩,尤其是在体现界面的时候,色彩对人的视觉效果非常明显,一个网站设计的成功与否,在某种程度上取决于设计者对网页界面设计颜色的运用和搭配。
在网页设计选择颜色时应注意几点事项:第一不要大面积使用很高的纯单色,否则会使浏览者感到视觉疲劳;第二当网站面对的用户超出本国范围时,最好使用网络安全色;第三为增强网页的可读性,背景与文字内容的亮度差最好在102以上。
在色彩运用过程中,由于生活地理文化位置的差异不同的人对色彩的喜恶有很大的差异。如生活在高原地区的人喜欢用暗色;生活在草原地区的人用红色;生活在闹市区的人喜欢用淡色……在网页设计时想要透过色彩传达某一意象时,必须将色彩形成的背景因素与目标群结合分析。同时色彩的认知是会变动的同样的一群人在不同的时间地点都会对色彩产生不同的解读。因此,不但要关注上述因素,还要考虑到网页配色的共性:色彩的鲜明性;色彩的独立性;色彩的功能性和习惯性;色彩的有限性;色彩的周期性。
网页界面页面设计的一个基本特色便是吸引浏览者,一个美观漂亮的页面不管内容多么空洞,也会有人欣赏,反之一个内容充实但页面简陋却往往不会有人去浏览,从这便可看出网页界面艺术设计是多么的重要。网页界面艺术设计是永远也学不完的一门学问,因为它会跟着你的成长也变化,直到形成你的一种风格,网页界面艺术设计需要大胆创新,需要新的思维,需要不断的努力。
网络对艺术设计行业同时造成了威胁和机遇。真正有魅力的设计师设计者的思想素养对艺术的理解及表现技术的综合体现。任何设计最终都是为人所用的,特别是网页设计的艺术表现,它既是传播信息的载体又是传递美感的使者,设计者只有不断增强交叉设计的能力,使艺术与技术有效地结合才能适应不断变化的时代!
本人精通SEO优化及网站的结构和布局,DIV+CSS,对百度及GOOGLE的排名优化精通对用户体验深厚感情了解!精通的软件L.OFFICE PHOTOSHOP CRODEAW ,FLASH,FIRWORK,ASP,SQL,DREMWEAR,PHP,JAVA等,和客户沟通能力强!客户关系维护得很好! 本人从事网页设计及优化四年主要作品有:等……………………
近年来随着经济的高速发展,科技的日新月异,教育领域同样面临革新。引进新的教育理念和教学模式成为教育工作者的关注重心,此时,欧美成熟的工程教育理念慢慢地进入我们的视野之中,CDIO的教学模式(Conceive构思、Design设计、Implement实施、Operate运行),符合工程人才的培养,提高学生的实践能力、组织能力、创新能力。这一模式更适应当下的教育环境需求。
网页设计这门课程属于交叉学科范畴,兼顾艺术设计、计算机技术及交互设计等多门学科。另外,这门课程作为艺术与技术的结合体,要求学生具备较强实践动手能力与综合运用能力,因而在教学过程中我们依据CDIO的工程教育理念开展教学。
本文重点谈到的是网页设计中的版式设计过程,网页中的版式设计起到信息统一、分割区域和交互导引的作用,是在有限的空间界面内将文字、图形、背景色彩或图案及交互功能集成在方圆之间,根据设计的形式法则,利用艺术美学与科学技术相结合的方式来实现效果展示。下面以教学过程中的“xx艺术系网站”项目为例,以网页设计中的版式设计为内容,展示教学过程中的各个设计阶段。
网页设计不是盲目的行为,不是简单使用软件的行为,它是构思由确立到实现的过程,是一种展示到体会的过程。因此,在设计之初,教师需要引导学生了解当前的课题,明确网站要做什么,网站的外观布局是什么样子,网站需要营造何种氛围。我们常见的网站根据用途分类为企业网站、电子商务网站、电子政务网站、文体娱乐网站、教育科学网站等,每种类型的网站都有自己需要传播的信息,根据所需文字与图片选择适合的排版方式,进而营造恰当的氛围。在“xx艺术系网站”项目中,学生会根据实际项目类型,理解项目设计目标为,该学院所属系部信息服务类网站,界面版式方面要求简洁大方,色彩明快,塑造清新、愉悦的氛围,学生可以根据以上内容展开进一步的设计工作。
项目开展前期根据对项目的简单分析,要求学生对客户或相关人士展开访谈,对行业同类网站的资讯开展收集与调研。这一阶段学生会接触网页设计的需求方,在本项目中可以设定为系内行政人员、教师及系内学生,根据访谈或调研可以得到网站相关设计信息,如对整体风格的需求,导航的设计需求,网站类型为静态网站或动态网站,根据需求结果,要求学生设计多样的版式效果,以供客户参考。
我们将网页中的交互分为视觉上的交互和行为功能上的交互设计。在这里我们更侧重说明交互在视觉上的应用。网页中我们常见的交互形态有按钮、导航条、搜索栏和表单等。这些交互形态都会出现在版式的突出及显著位置,这样更引发人们的视觉关注中心,因而,在进行版式设计时,需要考虑这些交互元素的设置,友好的版式也是一种界面与人的情感交互。在我们的项目中学生应该考虑交互按钮的外观设计,排放位置等因素;导航条的设置应在醒目位置,清晰明确发挥导引作用;搜索栏帮助浏览者快捷搜索,放置在易发现的位置,搜索一般出现在网页右上角;表单设计是学生所忽略的环节,因为可以使用插件添加,导致学生认为无须设计,在此建议信息表单设计时可考虑细节设计,提高友好度与舒适度等交互设计。
版式设计是网页设计中重要的设计引导规划环节,在这个过程中学生可以根据自己的项目主题展开艺术美感的设计。一般进行页面版式设计我们从以下几个方面入手。
网页设计中的版式设计与传统媒介中的版式设计略有不同,前提是他们都遵循版式设计五原则,[1]内容与形式,简洁与简约,设计与艺术,趣味与独特,局部与整体。为了设计富有形式法则和艺术美感的网页作品,版式设计方面通常会采用黄金比例和三分法排列原则。黄金比例法是初学者易于掌控的方法,将视窗可用区域分成两个部分,也可以根据设计比例需求,将数字录入到相关计算网站,得出合适的黄金比例分配方案。三分法构图排版方式,是将排版界面分成三份,根据内容的不同,选择不同的三分法排列位置。
网页设计中由于要考虑显示器视窗显示水平不同,我们的总体版式设计会采用固定格式或非固定格式两种形式。固定格式的版面是固定的界面版式,而非固定格式的版面设计是变化的,这种变化的版式很难把握的,变化的视窗将改变既定的字体形式和图形排列位置,这个课题也是我们今后要深入探讨的方向。
版式设计是界面设计的骨架,字体设计是界面设计的血肉,富媒体技术的全面发展,网站这一综合载体也得到了极大的发展,版式与字体的结合构成了网页的不同风貌。在网页中常见字体分为中英文两类和图形化的艺术字体,字号一般选用12pt。在中文网页常常出现的字体为宋体或黑体,字号为12pt/14pt的文字展示,另外也会有些超大字体以图像的形态出现,并通过视觉效果的调整,创建三维空间的视觉展示效果。图形化的艺术字体,在诸多网站中得到应用。在设计中我们题材保有传统的文化性,中国元素的运用,如书法、图腾、建筑等富有中国色彩的艺术形态都应得到我们的思考与关注,中西文化的比较与融合也是我们要探索的方向。图形与色彩部分在排版中应适合主题,响应设计氛围,为整体版式服务。
网页界面排版中还需考虑一种新兴的展示手段,视频信息展示,页面中利用大量的视频信息排版,减少文字、图片信息的输入,信息传达方式由静态转换为动态,提供有趣而新颖的排版展示方式。
网页设计中对静态界面的布局,我们通常会使用Photoshop和Illustrator图像处理软件开展设计,首先我们会根据思维导图绘制基础模板,然后根据设计需求在模板中添加设计好的文字、图形、视频、声音等设计元素。
在网页设计中我们会考虑将静态样稿转换为简单的静态网页,这种转换我们会使用Dreamweaver软件进行操作,由于网页展示设备的不同我们也会考虑采用一些相关的模型制作软件来处理交互设计部分。
将确定好的静态草稿通过切图生成为静态网站,测试效果及功能,当运行时根据需要和视觉效果进行调整直到理想状态。
网页设计课程将实际项目导入课堂,根据CDIO工程教育模式教学,打造有效、有趣、实用的教学方式,使学生在学习操作中锻炼宏观思考的能力,获得团队合作的能力,养成终身学习的能力。学生对设计流程的掌握就是对知识体系的掌握和运用,达到理论与实践相结合,通过对版面的全面掌控,更好地为静态网页设计打下坚实的基础。
[1] 沈卓娅,王汀.字体与版式设计实训[M].中国出版集团东方出版中心,2011:74.
好的网页设计能够给人们带来意想不到的效果。对网页界面进行设计,也是开展网站建设工作的一种重要途径。良好的网页设计可以在很大的程度上提升网站的美观,能够提升网站对用户在视觉上的冲击力,进而达到提升网站影响力的目的。我们可以这样说,网站上表现出来的实际效果是由网页设计决定的,网页设计的优劣直接影响到网站的发展。平面设计是一种比较具有商业性以及大众性的艺术活动,是建立在二维空间中的,即在平面上进行设计工作,视觉上给人们带去美的享受,进而传递视觉信息。
进行网页设计的时候首先要做的就是要对目标进行良好的把握以及理解。一般情况下,工作人员在没有开始网页的设计之前,就要准确的对网页设计的相关诉求点进行掌握,设计师要不断地对网页设计的主题进行挖掘,不断的对内容进行解读,且在这个过程中要做好相关的交流工作,最终通过意见的征求来确定下网页所适合涉及的方向。当网页的设计方向已经被确定好之后亿博电竞,就要对网页中的相关元素进行选择,就像网页中的文字字体风格、网页的颜色、整体网页的风格等等,在这些元素也已经确定之后,再开展工作,这样就能够保证网页设计的相关工作能够顺利的进行了。设计出来的作品,一定要确保其能够满足客户的相关需求,并且能传达出想要表达的东西。在相关审核工作完成之后,就可以应用软件来开展网页的设计工作,且一定要做好网页上各个版块之间相互衔接的工作,尽情的发挥设计师创作上的灵感,最后的工作就是细微的对网页设计的作品进行调整,得到最好的状态。
工作人员拿到设计任务之后,首先要多角度,多方面的去了解客户的信息,例如客户的企业背景文化、企业形象、产品形象等等,在已经充分掌握到客户信息之后,再进行设计工作时,就会比较有针对性,也有目标性。然后再根据相关客户的设计要求,对客户的信息做更为详细的了解,例如客户的诉求点、想要表达的主题等等,这都是需要设计师仔细了解的。当设计的资料已经整合完毕之后,再对已经获得的信息进行分析与思考,然后把平面设计的风格确定下来,把设计的表现手法也确定下来。这其实也是非常具有挑战性的一个过程,不仅需要主题表现明了,还需要突出内涵,这就需要相关的设计者要认真的进行考虑。当已经确定了设计风格与相关表现手法之后就可以进行具体的设计了,也可以借助绘图软件来进行辅的工作,这就需要根据设计者的习惯来进行确定了。但是在设计的过程中一定要保证设计进行的全面性以及方向的确定性,保证色调的统一性,只有具有足够的在视觉上的冲击力才能够吸引客户的眼球,才能够激发客户的兴趣。
网页设计与平面设计之间是有着非常密切的联系的,但是两者之间也是存在着区别的。网页的设计与平面的设计都属于具有现代化特色的艺术形式,在现在社会中这两种艺术形式都是能够通过电脑技术来辅助或者直接完成的,并且能够产生更好的效果。两者都是在现代社会中产生的优秀的艺术表现形式,并且两者都在商业中占据着重要的地位,是商业中不可缺少的重要组成部分。网页设计与平面设计之间存在的区别也是比较的大的。
表现范围是两者之间非常重要的区别。网页设计就是局限于网络环境中的,通过优秀的网页设计,使得网站整体的效果得到大幅度地提升,然后把网站的主题反映给客户,然后客户就能够通过企业或者是产品在网站上表现出来的东西对其做好了解。进而为企业或者是产品做宣传,提升竞争力度,促进经济效益的提高。但是平面设计表现的范围还要更广,并且其影响力度也是比较的大的。其是基于二维空间的一种艺术性创作,并且也不需要非常严格的表现手法,不受到工具或者是宣传途径的限制,作品成形之后,可以借助杂志还有周刊或者是广告等任何的形式进行宣传,然后达到提升影响力的目标。平面设计的作品比网页设计的作品使用范围更加广阔一点,但是在另一个角度来讲,网页设计比平面设计在媒体介质上具有更大的发展空间。
约束性也就是进行艺术创作时候的约束条件,此种约束性的条件是表现在很多的方面的,就像创作工具,传播的形式以及创作的平面,字体字号以及颜色规格等等。网页设计,一般情况下是仅仅能在电脑设备上进行创作的,并且也只能是在借助电脑设备的前提下才能够展示出真实的创作效果。网页中设计的作品效果会受到网速的影响,受到客观的因素影响比较大。但是平面设计相对来讲就不会受那么多的限制,不但是在创作空间上没有太多的限制,并且创作的产品也可以在任何时候任何的场合中进行展示,没有严格的规定。在进行平面设计的时候不管是涉及的字体、字号还是颜色都是非常的具有随意性的,可以根据设计者的实际需要以及设计师心理的状态进行创作。
网页设计是比较依赖于互联网的,网页设计对于先进的软件具有非常强的依懒性,但是平面设计则不是这样的,它对于软件的依赖比较小,相对来讲更加依赖于印刷的技术。在进行网页设计的时候一般情况下都是借助于绘图工具的,只有强大的软件才能确保网页设计顺利的进行。但是平面设计随着经济以及科学技术的发展,不仅能靠画图工具来进行创作,并且也能借助相关的绘图软件来实现最终的效果,再就是平面设计对于印刷技术的要求是比较高的,此也是两者之间非常明显的区别。
网页设计与平面设计之间有着非常多的相同点,网页设计是经济社会发展到一定阶段的产物,也是科学技术发展到一定阶段的产物,网页设计是一种新的表现形式,并且网页设计是平面设计发展的一个新的方向。在网页设计中表现出来的很多标新的手法都是在平面设计中延伸出来的。很多的表现手法两者之间是相似点,仅仅就是背景不同。
现阶段科学技术不断地发展,人们与网络信息接触的非常多,并且也越来越频繁,传统的平面设计面临着巨大的挑战。在这样的情况下,网页设计的出现正好解决了这个问题。两者之间的关系是非常的微妙的,也有着大量的共同点,我们完全可以理解为网站设计是平面设计在现在社会中的一种比较特殊的表现形式,更是一种有效的延续。
我们应该正确的认识网页设计与平面设计之间的关系,在实际的工作中要注意两者之间的结合,要做到相互的补充,相互的借鉴亿博电竞,然后创作出优秀的作品,用强烈的艺术效果来感染人们,进而为商业艺术的发展做出应有的贡献。(作者单位:浙江万通信息技术有限公司)
[1]邓勇.浅谈网页设计的布局及原理[J].颜色的艺术,2010(03)
网页设计中运用艺术形式法则应包含多个方面,比如,点、线、面的构成,视觉流程设计,分割与编排设计,动态设计等。其中,运用各种构成规律对网页的各形态要素进行点线面的组合,是网页版式设计的基本设计方法之一。1、网页版式设计的点点在网页的版式设计中非常活跃。每个独立的小面积的形象都可以看做是一个点。页面中的点又往往是页面的视觉中心。2、网页版式设计的线线产生于运动,是点移动的轨迹。不同的线可以引发人们的各种心理效应,具有不同的情感倾向。3、网页版式设计的面线能分割页面,而面则可以承载视觉符号,是容纳网页信息内容的造型载体。与点、线相比,面引发的注意力更大,视觉冲击力更强烈,可以体现页面的层次感,形成纵深感,具有浑然一体的视觉效果。4、点、线、面在网页设计中的综合运用点、线、面在网页中的运用往往不是孤立的,而是点、线、面各要素综合的运用。在确定网页主体形象的位置、动态时,点线面是需要优先考虑的因素。合理安排好点、线、面的相互关系,对于设计出具有良好视觉效果的页面,合理表达出网页的最终诉求十分重要。
网页的浏览是通过视觉元素实现信息传播的视觉传达过程,为了达到最优的视觉传达效果,网页的版式设计就必须依据人们在视觉上的心理和生理特点,确定各种视觉构成元素之间的视觉关系和浏览秩序,即安排好网页的视觉流程。所谓的视觉流程,是指页面内容的一种视觉传达过程,它是以人的生理和心理习惯的认知模式来进行的,是将各种构成要素在视觉运动的规定下进行空间定位,即从注意力的捕捉起,通过视觉流向的诱导,直至最后的印象留存,体现出这一程序的规划和诱导性。合理的视觉流程应在与人们认识过程的心理顺序和思维发展的逻辑一致的基础上,根据信息的主次(即传达重点)来确定各元素的顺序,并通过精心安排从而影响、引导浏览者的视线、网页视觉流程的三阶段当我们浏览网页时,视觉流程通常是首先在一瞬间迅速浏览页面,形成第一印象,接着视线就会从最吸引注意力的一点开始依次作有序的流动,最后完成信息的传递。整个过程包括印象感知(第一印象)、运动感知(感知过程)、整体感知(最终印象)三个心理感知阶段,而每一阶段各视觉要素发挥的作用都有所不同。在第一阶段印象感知中,视线并没有集中在页面的某一点上,而是对页面的总体认识,在这一阶段主要是页面的布局和色彩起着形成浏览者第一印象的作用。在第二阶段运动感知过程中,视线从视觉重点开始,按一定顺序浏览页面,当视线遇到较强烈的刺激时,就会停留下来给予足够的关注。2、视觉流程的设计要求网页的视觉流程设计无特定的模式,但无论采用何种视觉引导方式,都应该注意以下基本设计要求:(1)符合人的视觉习惯。这是网页的视觉流程设计的基本要求,做不到这一点,就将大大降低信息的识别度。(2)有效传达信息。视觉流程要保证可靠的信息传达,网页的主题表达就是视觉流程设计的最终目的。(3)突出主要信息。页面的编排要以突出主要信息为目标,组织页面的设计元素,合理引导视觉。一般情况下,长页面的注意中心位于页面的中上部,往往是视觉流程的起点,设计中要传达的主要信息,如主标题、重要内容等都可以放在注意中心上。保持视觉引导的节奏感和流畅感。3、页面间的视觉流程站点内部的信息传达是通过页面之间的链接和切换来实现的,由于网页的多维性和抄链接性,浏览者的浏览顺序也不是单线性的。浏览者依据自己的需要,按照各自不同的流程获取信息。合理的站点地图和导航设计才是保持网站视觉连续性和信息传达有效性的着力点。
作为新兴的设计门类,网页设计正在随着科技文化的发展不断前进,它的前景也是无限广阔。要让网站传达出应该有的信息,又要让人们不断疲劳的审美眼前一亮,版式设计是网页设计必不可少的重要元素。因此,网页艺术设计的版式是在动中求静、在静中求美的一种艺术设计形式。
网页设计并不是对于一个网页的设计,而是对一个网站中不同网页进行设计。这就要求对于不同网页的设计需要按照统一的特色主题进行编辑和设计,形成统一的整体表现。这就是网页设计中的整体表现艺术。一个网站中的网页通常会有很多,网页与网页之间也都有着一定的联系。通常一个网页中的元素需要链接到另外一个网页中去。这是由网页彼此之间的链接性所决定的。网页设计有了明确的主题之后便是如何在主题的统一思想下将不同的网页元素有机地组合一起形成统一的主题风格和统一的美学表现。网页设计中的整体表现艺术首先需要从网页内容上的整体表现做起。
在内容上由于网页传递的是信息,所以网页的主题内容和思想在某种程度上决定了网页的主题风格。前文已经论述,网页的主题是由网页的内容概括、提炼而形成的,反过来网页的内容也一定是在统一的主题下集合、表现的。从网页传递的信息来看,不同的网页传递不同的信息,不同的信息彼此之间有着必然的联系。网页设计者应该从网页的整体表现艺术出发,将不同的网页有机地组织起来,在内容导向上保持统一,而不是彼此零散。这样观众在阅读网页时无论读到哪一页网页都会感受到网页在内容上的整体性和统一性,如同读一部内容趋向统一的小说一样,自然、和谐、顺畅。
超级链接是网页的基本属性和基本元素,通过超级链接浏览者可以轻易地从一个网页跳转到另外一个网页。这无疑使得网页在内容表现上得到了无限的扩张,但同时也为网页的统一性带来了挑战。一个优秀的网页设计者不会在网页上做随意链接,而是会对所有链接的网页进行精心的设计和统一的思考、组织。网页中所链接的网页一定是为主题服务并和主题的内容风格保持一致的。也就是每一个不同的网页所传递的信息取向一定要一致,而不是发散式的。这一点看似简单,在实际的网页设计中却往往是很容易被忽视的。
现在的网页设计往往会由于缺乏统一的主题设计而对网页中所链接的内容不假思索,甚至有时为了提高经济效益而添加一些和网页内容没有关联的广告。网页设计的整体表现艺术需要设计者对网页及其所链接的内容进行统筹的规划和思考。网页设计中对于形式美要求遵从网页的主题表现和内容思想并不是要求因此而限制网页形式的视觉表现,而是为了使网页形式更加具有艺术表现力和内涵。网页设计中对形式的设计应该以此为基本原则尽可能丰富外在的视觉表现。这样的网页设计才具有同一的审美思想和丰富的外在表现,达到内在统一与外在美的统一。
网页设计中的形式是与内容高度统一的。网页有了特色鲜明的主题和趋向一致的内容之后便是如何通过形式将网页主题和内容完美地表现出来。随着信息技术的发展,网页设计中所包含的元素越来越丰富。图形、图像、文字、动画、视频和音效等都是网页设计中的重要形式元素。网页的主题为网页的视觉表现提供了基本的灵魂,网页的内容为网页的视觉表现提供了丰富的架构,网页的形式则是在这两者之上对网页进行更具外在表现的视觉传达。网页设计中的形式和内容一样都是为主题服务,在主题的统一调配下进行的创作。网页设计中的形式由于包含的元素很多,风格也各具特色,因此为了更好地表达统一的主题思想和内容情感往往需要设计者更加精心的设计。
同网页设计中内容的表现艺术一样,网页设计中形式的表现艺术也是以美为基本的前提。但网页设计中的形式美并不是脱离实际内容和主题风格的花哨美,而是在主题统一的思想下仅仅依附于内容的实际美。网页设计中的形式如果脱离了主题和内容则会显得空洞无力,没有生命力,自然也无法引起人们继续阅读的欲望。只有将网页的主题和内容以准确、恰当、丰富的形式完美地表达出来才能体现出网页设计独具特色的艺术魅力和价值。为了达到这一艺术标准,网页设计者需要对网页中的元素进行细致入微地设计,确定每一个元素都对于表达主题和内容能够发挥作用。只有通过统一设计的形式才能够与网页主题和内容高度保持一致,形成视觉表现艺术上主题、内容和形式的统一,形成艺术表现上的合力。
网页设计中造型艺术的巧妙运用在给用户带来极大感官享受的同时,还能较好地提高网站的形象和知名度,因此在具体设计中要根据实际情况,使用最合适的表现手法,不同的主题有不同的表现手法,通常我们可以使用的组合手法如均衡、反复、交叉、重叠、对称、反射等都有各自的特点,例如,使用清晰字体设计配合流畅的文字内容会使得信息更加容易被吸收。并非造型设计艺术水准高才是好的网页设计,符合用户的审美观,用户便于理解,能与用户无障碍沟通的设计才是好的设计,才能达到网页更好传递信息的目的。
如今,网络的发展已进入WEB2.0时代:其特点是以普通用户为主,并且能够实现用户与网站交互建设的开放型网络页面。在WEB2.0站点中,总体的造型设计都具有简约朴素的风格,站点中的图形外框一般都使用新CSS技术所支持的圆角,优点是首先可以减少维护的工作量,因为圆角图片在图片文件的生成和更新中不需要编写网页代码,其次是可以提高网页的性能,加快网页的载入速度,因为圆角图片在显示的时候不会再发出多余的HTTP请求,最后,可以增加视觉可靠性,使用圆角图片不会出现由于网络阻塞、服务器错误等情况下造成的背景图片下载失败,从而造成整体视觉效果差的情况。在Web2.0中使用的具有立体效果并且有斜边的圆角图标能使网页不再古板、僵硬,具有优雅、光洁的气质,将网页上的各种元素有机组织起来,直接通过图片传达网页意图,可以有效地引导用户的视线,简化了语言上的表达。
在图片使用上还要注意以下几点:首先,受到用户计算机显示器以及肉眼的有限感知能力的限制,图片分辨率合适即可,没有必要去盲目地追求高分辨率。其次,受网络传输速率的影响,图片并非越大越好,应该在保证图片的清晰度,不影响视觉美感的前提下尽可能的小。再次,在网页设计中,图片的大小,图片所处的位置以及图片和文字的关系都会影响到网页的整体审美效果和传递信息的效果,因此,要注意图片的使用形式,在选择图片和处理图片的时候,在保证与网页的整体样式、风格统一的前提下,为了引起用户的注意,尽量选用新颖的图片,但是必须要突出重点,避免想要表达的重要信息被花哨的次要信息所掩盖。
网页的色彩属于应用色彩的范畴,即网页的色彩通过用户显示器的屏幕在RGB模式下用光色来显示,比传统视觉色彩的显示程度要丰富。一般的网站均选用明快而生机勃勃的显示方式。蓝色系和绿色系是比较常见的色彩。橙色系、黄色系以及粉红系也是经常使用的色系。相对奔放而明快的主色调给人以一种轻松,愉悦的心情,并且也能很好地把用户的视线拉回到网页所要传达的主要内容上来。
在网页的设计中,有多种不同的方式可以使色彩的表现形式达到预期的目的。运用色彩学中关于深浅变化的“明度变化”原理,可以利用色彩表现形式来区分网页内容的主次关系或等级关系,这主要考虑到主页背景色的深和浅,使用“高调”和“低调”原理(深为高调,浅为低调)来控制文字与底色关系。统一的色彩取向搭配上鲜明的色彩层次能够给用户一种舒适的视觉体验。
除了上述两种情况外,在网页的设计中还应该注重色彩体系的搭配问题,不好的色彩搭配会给用户一种不舒服的感觉,会影响到用户对实际传达内容的接受,所以具体设计中一般会选择调和舒适对比的色彩系为基础,在传达重要的文字内容或者关键性的图形标识时可以在局部运用点睛式的强对比色彩,可以使整个页面更加生动,易于让用户接受。
近几年来,随着科技的进步,互联网的发展使得信息的传播突破了传统的政治、经济、地域及文化的阻隔,而网页借由网络的运行,将所信息用最快、最方便的形式向网页的浏览者传达。因而网页设计作逐渐被人们所认可并认识,但是现在由于设计软件增多并过分依赖于它,致使网页设计重视技术操作,使得网页设计存活于混沌之中。而雅各布尼尔森说:“网络是最终授权于消费者的环境,他(她)点击鼠标就能决定所有事。到达任何地方都如此简单,世界上所有的竞争者都只是一次鼠标点击的差距。”故网页设计的目标是实现内容的整合,兼顾信息量大且易于阅读,能够吸引浏览者停留在某个页面上。而网格设计的本质上来说是一件设计作品的骨骼,不仅仅能够赋予设计以秩序感,帮助形成清楚且连贯的信息关系,还能给设计的表述和创造提供丰富的机会。这也能够逐步使浏览者对网页设计的视觉美感得到认同亿博电竞。
上世纪60年代,借由战争的推动而形成最初的计算机网络。而互联网的前身起源于1969年,美国国防部的指示下由四台计算机组成,名为阿帕网(ARPNET)。而在1974年提出的通讯协议和TCP/IP协议的应用,才使同时互联网成为一个开放系统。并在上世纪九十年代电脑技术的飞速发展,图像、声音、多媒体元素等新的数字媒介进入到互联网之中,进而网页的设计也由于一些新的技术的加入,网页中有越来越多的因素能够被规划并进行设计,这着实让网页设计成为一种全新的艺术设计形式。而网页设计是基于互联网为载体,以数字网络技术为基础,并依照、遵循设计的表现形式及其规律,以此来达到设计的目的与功能,并且网页设计强调艺术与科学要建立一个密切的联系与结合亿博电竞,形成一种新形式的视觉传达活动,使平面设计在现代社会中得到发展与延伸。未来的网页设计不但在依照设计的目的及要求的同时,更以所处的时代背景下获取最好的技术,加以艺术的表达形式为基础,有意识地对其进行艺术的创造性规划活动。不仅能带给网页浏览者美丽的视觉体验,同时更好的发挥了其信息传达的作用。
在网页设计飞速发展的时代,人们在追求着网页的强大信息量且易读的同时,寻求网页设计中的秩序与灵动的设计方法,这就可以满足网页的美感与实用性。通过多年来实践,设计师发现这些都需要有网页版式设计才能够达到,它不但使了网页富有自己独特的艺术风格及特征,还可以以此吸引浏览者的注意力,增强网页内容的秩序传达性,这种秩序不是强加于浏览者的,而是为浏览者创造独特的体验。因此,在网页设计中网页版式设计具有起点的作用,并且网页版式设计是由网格系统组成,没有网格系统的辅助,难以达到页面清晰美观,内容组织合理,无法在网页设计寻求到秩序与灵动。
自然秩序产生的前提是物理法则要能够在没有相互干扰的孤立的系统中起作用,而所有事物都是相互作用的,正是这种混乱与秩序之间的对照唤醒了我们的知觉。而秩序感通过各种工艺证明了人类喜欢节奏、秩序和事物的复杂性,设计师通过对对称与均衡、单纯与齐一、协调与对比、节奏与韵律、多样与统一灵活的运用,体现出一种带有秩序感的灵动。而将元素的秩序化组构,依照人所产生的视觉规律,主要体现在其排列的条理性,比例的合适性、节奏的合理性、以及渐变的严格性上,遵循着化繁为简、化杂乱为条理、化模糊为鲜明的原则的秩序法则,从而协调重复、均衡、对称等性质,将画面的展示增添秩序性、连续性和和谐性。
网页网格系统可以被定义为:通过对比例、秩序、连续感和现代感,将网页里的元素进行重新整合,将网页中版面布局以规范的网格排版来指导信息的分布,实现保持平衡亦或者去打破平衡。从网页设计上说起,网页网格设计的应用,不但能够整合网页的信息,方便阅读,更可以增加网页的美感,还可以有助于阅读,更具有可用性。而且,对于前端开发来说,网页将更加的有秩序和有灵活性。自网格系统应用以来,经过许多代设计师的努力,使其发展的更加精确与完善。现在的网页设计中的网格不但继承了传统印刷网格,并以此为基础,却又不同于以往的传统印刷网格,能以其的多选择性突破传统印刷媒体的限制,更具有自己特殊的特点和要求。不过传统印刷媒介中所需要设计的界面是固定的,而网页设计中有很多因素是超出设计师控制的,浏览者可以按照自己对网页视觉效果的要求来进行调整,至使显示屏所呈现的画面与最初的设计背道而驰,但是显示器屏幕每英寸由72像素构成,实际上是由数字创造的网格,这是一种区别于其他的传统媒体形式,网页设计者虽然对版面视觉效果丧失了一定控制力,但这也正是网页设计的美丽所在,而我们需要做的是让设计去适应变化多端的网格系统。
当新媒体设计与信息构筑的时代来临时,网页媒体以全新且令人激动的方式展示信息,将其诸多特点展现出来,使其能从众多的传统媒体中突显出来。与此同时,网页制作技术也得到了前所未有的革新,涌现出一些列功能愈加强大的网页制作软件,网页制作也由此变得轻松而容易起来,这种偏向性致使滋生出大量偏向重视技术操作而忽视网页设计的视觉创意美感的网页制作者,造成信息无法正确传达出来。在这种现象的促使下,如何平衡在信息高度密集的网页,不仅仅需要设计师具备审美的品质,更需要为信息的展示增添秩序性,而无论在何种网页上,网格可以向浏览者预示出信息所在,这也算是看不见的秩序,也可以在保持展示内容总体一致的前提下,为网页添加灵动性,这也是在设计中所强调的视觉有序系统。
现在有一大部分网站,不知道信息的所在,没有规则可言。如果不能在混乱之中建立秩序,使浏览者对网页设计者的意图一无所知,更使信息易读性和传达性变成一个令人困惑的难题。并且网页存在信息能容过满的问题,就将各种信息诸如文字、图片、动画等不加思考的硬塞到页面上,没有任何规范、条理可言,也更谈不上艺术处理了。此类问题导致浏览者在读取信息时会遇到诸多不便,不助于信息的交流,使网页上的设计做不到互相协作,反而相互消减。再加上页面上五花八门、不分主次的内容,网页背景做的很花哨,过度的装饰的页面,混乱了浏览者的视线,严重干扰从网页中信息的获取,更无法提及其的秩序美感。相比之下,还有一类网页我们打开,发现好像这个网页与那个网页都是一样的。无论是标题、文字及图片的位置相同,更甚到动画的效果都是如此。而这两个网站对于页面的用色秉承着随心所欲原则,其目的只是为了区分开文本和背景,与此同时失去网页的特色,使我们看网页好像每一个都是相同的,缺乏灵动性。虽然不能片面地追求视觉美感冲击力,但也不能不顾浏览者的使用性。
网页设计是视觉传达设计艺术的重要组成部分和重要分支,其未来趋势将逐步走向简单化、立体化和智能化。如何平衡网页的秩序与灵动,使其展现形式会变得简单,条理变得清晰,并做到用有秩序的形式显示最全面的内容,恰到好处地进行调整、解构,让网页设计更加有灵动性。
俗话说:没有规矩,不成方圆。而设计也需要有一定的规矩,也可以说是一定的规则。而这种规则可以给设计带来秩序感和结构感,这种设计终将成为一件有血有肉的作品。而网页设计也是如此,通过形式美的法则,将页面中的各种视觉元素进行有组织有规律的调整,大胆的取舍,使页面获得完整、有序的视觉效果,通过这种具有单纯的秩序性,对各种凌乱的资料运用理性和逻辑思维,产生具有强烈的视觉冲击力,促进浏览者加深印象,创造清晰有序的形式感。如网站设计者常运用反复视觉流程,使网页产生的视觉效果更富有韵律美和秩序美。同时可以发现整个网页设计运用了清晰的网格可以清楚地表现网页的细节和引导浏览者进行浏览。并通过改变图像与文字的大小比例,从不同的视角展现主题,不同的比例和尺寸建立起一种叙事关系,通过用对称式形成了一种平衡、协调的感觉,带给浏览者一种条理清晰的印象。另外网页设计时,通过对页面适当的留白,能够制造处生动的进入方式,并且对页面或界面的各个元素与部分分割、区分和重组,并且留白区域可以用它来实现强调、比例、平衡和韵律。留白不会给人感觉页面“空”,反而会形成一种视觉的空间感。
网页的整体设计,通过以周密的组织和精确的定位来获得页面的秩序感。通过散点视觉流程,将网页中的各个视觉元素进行有节奏的组构,或上、或下、或左、或右的自由移动,给人一种轻松随意带有韵律的视觉享受。并且通过对视线的引导,不但保持着网页的整体流畅、和谐的浏览观感,使浏览者更加轻松的找到所需要的内容。
网页设计以一种稳定、神秘的方式呈现出一下中相对灵活的创意活动。这种在有秩序的页面下追求一定的自由度,使网页设计能通过深思熟虑之后决定或特意的追求的“散”的解构,在理性授意下其内存在着一种带有灵动的秩序。而优秀的网页设计就是应该在多样中求统一,在节奏中求韵律。如网站设计者运用形式美法则,通过有序、具有美感、整体协调的手段,使浏览者能够感受到愉悦感。同时,带有韵律的平衡,可以突出网页所强调的重点。
设计上用四句的格言强调了设计的核心要求:根据受众进行设计、功能决定形式、保持简洁、内容决定一切。也就是说,设计就是要遵循内容决定形式的原则。黑格尔也说过:“内容和完全适合内容的形式达到独立完整的统一,因而形成一种自由整体,这就是艺术的中心。”故网页在设计上,要在保证有秩序的形式显示最全面的内容,使浏览者更加轻松的获取信息。并且在秩序感不断渗入到人们的生活和艺术设计之中,人们的审美不断提高,对于美的要求越来越高,设计者要通过对形式美法则的对称与均衡、单纯与齐一、协调与对比、节奏与韵律、多样与统一的灵活运用,寻求出一种带有秩序感的灵动。将它们运用到网页艺术设计这种科学与艺术高度统一的产物上,创造出艺术化、人性化的网站页面。
[1]加文安布罗斯、保罗哈里斯编著.刘静译.网格设计[M].北京:中国青年出版社,2008.
[2]威廉瑞恩、西奥多科诺瓦著.美国视觉传达完全教程[M].上海:上海人民美术出版社,2008.
[3]惠岩、顾群业编著.网页艺术设计[M].济南:山东教育出版社,2012.
[4]KhoiVinh著.秩序之美—网页中的网格设计[M].北京:人民邮电出版社,2011.
[5]E.H.贡布里希著.秩序感—装饰艺术的心理学研究[M].长沙:湖南科学技术出版社,2006.
[6]胡爽.基于格式塔的网页信息设计的美化研究[J].包装工程,2010.
[7]周峰、彭沛.浅析网格系统在网页设计中的重要性[J].科技信息,2009.
网页艺术设计是伴随着计算机互联网的产生而形成的视听设计新课题,是数码艺术中的一个重要门类,是网页设计者以所处时代所能获取的技术和艺术经验为基础,依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动,它必然会成为设计艺术的重要组成部分,并随着网络技术的发展而发展。表面上看,它不过是关于网页版式编排的技巧与方法,而实际上,它不仅是一种技能,更是艺术与技术的高度统一亿博电竞。
一个成功的网页是依靠设计者的美术观念、对色彩和布局的掌控、对浏览者心理的把握、结合创意设计出来的,再应用合理的技术表现出来。
网页设计的第一步就是要分析和明确建站者通过网站要达到的目的及浏览者要获取的信息,从而确定网页的主题思想及围绕主题进行条理性处理,针对浏览者是儿童、男人、女人、年轻人、中年人、老年人等的习惯、爱好,从而明确网页设计的风格。围绕主题,运用艺术形式美法传达网页内容和表现网页风格,既要内容充实,又要吸引浏览者的注意力,使网页信息传送效率最大化。
网页是由多链接的页面和元素组合而成,在设计时强调整体和谐性,表达一个统一的视觉印象和文化意境。整体和谐性不仅是在各网页页面上有共同的形式特征,如色彩、造型、版式等上的外部完整的美感,也要在文化内涵和意境上体现出一种连惯性和整体性,给人一种内部有机联系。
应用网页技术可以使网页有视觉冲击和动态效果,但也要注意合理应用,技术应用与艺术设计要相辅相成,技术是为内容和形式服务的。1)考虑浏览器的兼容性。2)注意网页容量。不要将图片和动画过多加入,否则网页容量过大,网页过慢,浏览者也就失去看下去的兴趣。3)合理应用动态网页技术。CGI、ASP等动态网页技术上很先进,但相当一部分引擎还是不支持它的。4)适当应用各种网页设计方法和技术。比如,特殊字体的使用可能在有些浏览者的电脑上可能不能显示。
技术与艺术的紧密结合在网页艺术设计中体现得尤为突出,是网页艺术设计最大特点。虽然技术是表现艺术的方法而已,但是如果没有过硬的技术基础,那么,想要表达出艺术内涵恐怕是难于登天,技术和艺术间是相辅相成,相互促进发展。技术越进步,可以表现的网页形态越丰富;同样,为达到网页艺术表达的要求,往往促进一项新技术的诞生。
网页具有实时交互的功能,网页设计者将网页上传到网络后,点击率和受欢迎程度是可知的,网页设计者需不断更新内容和更换不同的界面环境才能让浏览者持续对它的喜爱。浏览者不再是被动的接受者,而是艺术建构的参与者之一[1],从而促进设计者与浏览者进行良性的沟通。网页设计人员也应在不同的时期和阶段、依据不同对象、不同的经营策略等对网页做出相应的变化,网页艺术设计也是动态变化的设计。
非线性的导航是指一种自由的、多方向和不确定的网页组织结构[2],而不是线性单一的,清晰的导航性使得浏览者在网页间的跳转而不会迷失方向,给人以清晰的层次感。网页设计者要做到不同角度的链接、告知浏览者当前的位置、当前页与其它页面间的关系等,每页应有一个返回主页的按钮或链接。
网页设计是一门新型的综合媒体艺术,是多种元素的综合体。多媒体的视听元素有文字、图像、声音、视频、动画等多样[3],网页是视听元素的创造和应用。
网页的显示效果会随着终端的变化而出现不可控性,网页的显示终端包括浏览器和显示器,这种不可控性主要体现在:
3)网页的浏览者可以控制网页页面在浏览器中的显示方式,如字体大小、网页缩放等;
曾有人认为,当每个企业都有了自己的网站,网页设计行业就将从饱和中走向消亡。这是错误的,网络更新发展之快、蕴涵潜力之大、覆盖之广都是前所未有的,网络的未来不可限量。网页设计的在以下三方面有着广阔的发展:
虽然现在每个企业几乎都有自己的网站,但不是每个网站都是技术与艺术的融合,网页设计人员往往懂技术的而不懂艺术,懂艺术的又不懂技术。随着时代的发展,网页的艺术设计,日益被网站建设者所注重。
虚拟现实的沉浸感、交互性、构想性的特征让它成为研究者们的热点。随着网络的发展,网络虚拟环境今天已存在,让多个用户(特别是不在同一地理位置的多个用户)参与到同一个虚拟环境中来,但这项技术还不成熟。网络虚拟环境是多领域技术的集成,这些技术包括允许不同地域间异质网络互联的技术,支持视觉、听觉甚至触觉/力觉反馈技术以及相应的多种交互设备。随着技术的日趋成熟,在线教育、在线就医、远程会诊等都会成为现实。
目前国内网页已经出现了模拟三维的操作界面,在数据压缩技术的改进和流技术的推动下,Internet网上出现实时的音频和视频服务,典型的有在线音乐、在线广播、网上电影、网上直播、三维看房、看地图、网上逛商场和校园等。因此,多种媒体的综合运用是网页艺术设计的特点之一,是网页设计必然的发展方向。随着技术的发展,在网络环境流畅地播放三维实时动画,实现网络漫游等都已实现。
网页艺术设计具有技术与艺术的结合性,伴随着网页技术与媒体艺术的发展而发展,也是平面设计在网络世界的延伸。随着时代的发展和需要,网页的艺术设计,日益被网站建设者所注重。
[2] 彭刚,周绍斌.网页艺术设计[M].北京:高等教育出版社,2006.
扫一扫关注大业微信公众帐号