网页设计师

网页设计师（精选12篇）

网页设计师 篇1

网页设计是一门新兴的边缘性的行业, 在网络产生以后应运而生。在网络如此发达的今天, 网页也是五花八门, 千奇百怪。当点击到网站时, 首先映入眼帘的是该网页的界面设计, 如内容的介绍、按钮的摆放、文字的组合、色彩的应用、使用的引导等等。这一切都是网页设计的范畴, 都是网页设计师的工作。

但是今天的网页设计师的风格没有真正的得以体现, 使网页的设计在一个低层次的水平上重复。这样的直接后果是网页作为新的媒体, 本应该是方便人们的使用为目标的, 却有很多的地方不能够使人满意, 有些是功能上的, 例如在按钮或者是导航的设置上, 有些形成了常规的按钮安排方式是令人不方便的。同样在一些用色的规范或者是其它元素的应用限制了设计师作用的发挥, 造成了这样的僵化模式。所以在这个新的时代, 急切的呼唤具有自己的风格的设计师来作出一些更好更方便的网页来。

网页设计师首先必须善于思考, 对设计主张自己的想法和理解, 这是最重要的。别担心你的想法有多“烂”, 没有人能一下子做好的, 但你完全可以做好你的习惯和态度。学会大胆地摸索和尝试自己的想法, 懂得借鉴, 追求属于自己的创意。但是如果在设计时不动脑筋地套网页模板, 套素材, 甚至是盲目模仿和抄袭, 那简直是在摧残你的创造力, 滋养你的惰性, 这样永远无法进步, 而且以后想进步也非常困难。

而我们经常看到一些网页里构图错综复杂, 用色花里胡哨, 让人目不暇接, 真有一种”乱花渐欲迷人眼”的感觉, 但是我们得到了美的享受了吗?当然没有, 首先自己就讨厌, 怎么还谈得上感兴趣?这是一种典型的失败, 一味的追求显眼、追求吸引人, 这种做法取得的效果适得其反。当然并不是页面做得好看, 具有美感网页就一定让人感兴趣, 这也建立在一定好的内容的基础上, 假如什么内容都没有, 也是不能吸引人的。只是网页的界面设计应该还是要以布局的美为标准, 有规律可循, 这也是网页设计师的责任。

网页设计师的素质应该全部是技术方面的吗?所谓素质即精通Photoshop、Corel DRAW、Frontpage、Dreamweaver、Firework、Flash, 会Css、Html、Asp、SQL, 难道这就是一个网页设计师的全部吗?这是一种只追求技术忽视美感的做法势必导致一批粗制滥造的网页。就象现代工业生产制造的工艺品雷同缺乏艺术美感, 让人反而特别渴望手工艺时代。我们也同样可以从网页制作上看到这样的阴影, 这样得不到好的效果。技术不需要吗?当然需要, 而且相当重要, 这要以页面的美 (至少要规范) 为基础。好的网页设计师应该是合理的利用技术, 在不影响美或者是尽量不影响的条件下, 找到一个结合点做出美观而又实用的网页。才能算一个好的网页设计师。

作为一名网页设计师, 一定的文化素质是不可少的, 如文学修养, 好的文案, 不仅仅让人对你所做的网页回味无穷, 也可是自己的网页平添几分艺术特色。当然文化素质不仅仅包括文学修养, 还有音乐和绘画等方面的修养。只有具备一定的这些方面的修养, 才能够使自己网页达到一定的水准, 才能够使人欣赏到好的网页制作。身为一名网页设计师, 还要具备审美的能力, 而网页设计就相当于平面设计, 网页设计师可以将平面设计中的审美观点套用到这上面来 (其区别是动态网页的制作是平面设计不能达到的, 它是一种审美方式的延伸) , 所以平面设计上的审美的观点在网页设计上非常实用。如对比、均衡、重复、比例、近似、渐变以及节奏美、韵律美等等, 以及色彩的搭配, 这些都能在网页上显示出来, 反映设计师高超的审美能力。网页设计师要掌握相关的专业理论知识, 多看专业理论知识以查漏补缺。同时更需要学习各种各样的知识。拥有丰富的知识, 你大脑里的"素材"就越多, 它们都将可能参与到你的设计里, 你的设计才会生动饱满, 富有思想内涵, 所以知名的设计大师们往往都是全才, 他们不仅精通设计, 更精通其他很多领域。

一个网页设计师没有自己的东西, 永远就只能是在一个低水平的层次上徘徊, 或者只是拾人牙慧。永远都没有自己的东西融入到网页设计中, 成就不了好的成绩。设计不是一朝一夕就能成功的, 只有做久了才能拥有出色的设计水平和宝贵的设计经验。既然选择了设计师这个职业, 就要有耐心, 努力做得出色。虽然会遇到很多辛酸苦累, 困难挫折, 但不要退缩与放弃, 没有这些, 你的设计能力如何成长, 你的经验如何获得?所以你需要做的是忘掉它们, 朝前看, 自信地坚持走下去, 你的脚步总有一天会踏上平坦的道路, 到那时, 成功就在你面前向你招手微笑。只有在不断的探索和实践中总结经验, 提高自己的同时树立起自己的独特的设计理念, 才能够开辟出网页设计的新天地。同时也要不断的在形成自己的风格的同时, 尝试一些不同的风格, 寻求突破, ”不破不立”, 只有不断的尝试, 因为只有不断的丰富自己的同时, 才有机会赢得这种尝试的成功。经常有意识的这样去实践, 就有可能达到自己的设计的新境界。

网页设计师 篇2

下面让我们来对阿里巴巴的网页设计布局进行分析：

阿里巴巴中国站(china.alibaba.com)被google收录的中文网页数量8月份数据为530，不仅从被收录的网页数量上来说，要远远高于同类网站的平均水平，更重要的是，阿里巴巴的网页质量比较高，潜在用户更容易通过搜索引擎检索发现发布在阿里巴巴网站的商业信息，从而为用户带来更多的商业机会，阿里巴巴也因此获得更大的网站访问量和更多的用户。

1． 从整体结构看：

设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。 点击打开阿里巴巴的网站，访问者可以很快的查找到自己所要寻找的信息和内容，理由是它 的每个页面都有独立的标题，并且网页标题中含有有效的关键词，每个网页还有专门设计的META标签，而且图形和文本层叠有序，框架结构明显。从整体上看网站上的图片不是很多，因为它知道搜索引擎读不出来图片的信息和内容的。

2．从页面的相互关系看：

阿里巴巴的各组成部分在内容上的内在联系和表现形式上的相互呼应很明确，并注意到了整个页面设计风格的一致性，并且在搜索引擎搜索信息的情况下，阿里巴巴将它的主要业务放在了整个框架的最左边也就是搜索引擎最关注的地方，

它抓住了搜索引擎的在搜索信息的特点。实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽。

3. 页面分割的角度看：

分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。阿里巴巴在这方面就做的很出色。它在信息量很多时，将关键词列出来，将画面进行了有效的分割，使关注者更清楚的知道关键词的背后就是他所要的信息。所以网页设计中有效的分割可以被视为对于页面内容的一种分类归纳。

4． 从页面对比的角度看：

对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。 阿里巴巴在网页设计中无论是颜色、文本信息、文字的大小、格式、等等都无可非议。因为它给人的感觉很协调很舒服。

5．从页面和谐的角度看：

和谐是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。打开阿里巴巴的网页一开始给人有点单一的感觉，因为它的色彩不时很鲜明，但是从整体角度在看会发现它的颜色和线条的搭配让人的视觉效果和它的网页达到一种想沟通的效果，尤其是它框架两边的空白部分从美学角度可以说明两点：一是显示阿里巴巴企业的卓越；二是显示网页品味的优越感。所以从整体上体现出了网页的格调。

网页版式设计研究 篇3

关键词：网页版式；设计；版式

网页排版是近年兴起的一个普通排版的分支概念。虽然，图片也可以传递信息，但网站上的内容大部分是由文字组成。这就是网络排版如此受重视的原因。排版的重要性丝毫不亚于视觉层次，合适颜色的选取，网站功能以及其它特性。我们从来没低估过网络排版的重要性，也深知它在良好的用户体验中所发挥的重要作用。任何追求漂亮版面的人都知道，印刷排版跟网络排版完全是两码事。尽管有些规则可能相同，但网页设计所处环境完全不同，两者都有自己一套必须遵守的规则和准则。两者的原理不同，不能同时存在，跨越这个界线可能会导致排版混乱。

一、网页设计概念

网页设计是在Internet的发展和数字技术的发展中出现的新艺术形式。它是以Internet为载体，以网络技术和数字技术为基础，依照设计目的、遵循艺术设计规律，实现设计目的与功能，强调艺术与科学密切结合的一种艺术创造化视觉传达活动。它是网络视觉艺术的主要表现形式，也是设计艺术的重要组成部分，它具有媒体相关性、数字技术性和设计艺术性三大基本内涵。

网页版式设计网页版式设计是指在有限的屏幕空间内，按照设计师的想法、意图将网页的形态要数按照一定的艺术规律进行组织和布局，使其形成整体视觉印象，最终达到有效传达信息的视觉设计。它以有效传达信息为目标，利用视觉艺术规律，将网页的文字、图像、动画、音频、视频等元素组织起来，产生感官上的美感和精神上的享受，充分体现了设计师的艺术风格。

二、网页版式设计的作用

网页版式设计是设计师理性思维与感性表达的产物。它决定了网页的艺术风格和个性特征，并以视觉配置为手段影响着网页页面之间导航的方向性，以吸引浏览者注意力，增强网页内容的表达效果。网页版式设计在整个网页的设计中占有很重要的作用。

三、网页版式设计与传统印刷版式设计的差异

网页版式设计与传统印刷版式设计的差异网页的版式设计同报纸杂志等平面媒体的版式设计有很多共同之处，但网页的排版与书籍杂志的排版又有很大差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。具体表现如下：印刷品设计者可以指定使用的纸张和油墨，而网页设计者却不能要求浏览者使用什么样的电脑或浏览器。（2）网络正处于不断发展之中，不象印刷那样基本具备了成熟的印刷标准。（3）网页设计过程中有关Web的每一件事都可能随时发生变化。（4）网页版式设计的不可控制性，即网页设计者无法控制页面在用户端的最终显示效果。

四、网页版式设计的具体要求

网页的设计首先涉及的是页面的版面编排问题。网页作为一种特殊的版面，既有文字，又有图片，还包括一些流动的窗口和流动的附加广告等，内容繁多、复杂。设计时必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体，展现给广大的观众。使其成为与浏览者的沟通手段，让设计所蕴含的主题进入浏览者的心灵，而不仅仅是起装饰作用。

网页版式设计的布局合理化布局不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。

要通过网页页面结构的分割和造型空间的确立，合理安排组成网页各元素的合理位置。使页面内容和形式有机统一，要具有整体美感。要考虑页面的美观和可读性，还要考虑网络浏览的特性。

网页版式设计的视觉流程规律化网络的浏览是通过视觉元素实现传播的视觉传达过程，为了达到好的效果，版式设计必须依据人们在视觉上的心理和生理特点，确定各种视觉构成元素之间的视觉关系和浏览秩序。合理的视觉流程应是在人们认识过程的心理顺序和思维发展的逻辑一致的基础上，根据信息的主次来确定各元素的顺序，并通过精心安排引导浏览者。（1）要符合人的视觉习惯（2）要保证有效的传达信息（3）突出主要信息（4）保持视觉引导的节奏感和流畅感。

网页版式设计要动态化动态化是网页设计的显著特征。网页版式设计的动态设计成为增强网页可读性，参与性与趣味性的有力手段。网页不同于传统媒体之处，就在于信息的动态更新和即时交互性。即时的交互性是网络成为热点的主要原因，也是网页设计时必须考虑的问题。网页设计人员必须根据网站各个阶段的经营目标，配合网站不同时期的经营策略，以及用户的反馈信息，经常地对网页版式进行调整和修改。

网页版式设计中的点、线、面对网页的各形态要素进行点、线、面对组合，是网页版式设计的基本方法之一。点线面之间相互作用可以组合成各种各样的视觉形象，形成千变万化的视觉空间。有意识的从抽象角度运用点线面构成来组织网页的版式，是形成网页强烈的视觉形式感和设计感的有效方法。

网页版式设计中的色彩处理色彩可以使页面更加生动。网页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是，网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据网页内容的需要，分别采用不同的主色调。总之，网页的版式设计形成了网页的整体视觉印象，体现网页的 风格，在整个网页的设计中具有很重要的作用，应该引起网页设计者的重视

【参考文献】

[1]彭刚，周绍斌.网页艺术设计[M].北京：高等教育出版社，2006

[2]王汀.版面构成[M].广东：广东人民出版社，2004

网页设计师 篇4

1 下拉式菜单的制作

现以DW CS6中Spry菜单栏组件为例说明水平式下拉式菜单的制作过程。

1.1 插入 Spry 菜单栏组件

利用DW的插入菜单或插入面板将Spry菜单栏组件插入到某个Div元素或某表格单元格中,从而固定菜单位置。当Div元素元素宽度为500px时,在DW的网页设计视图中得到如图1所示菜单,默认情况下有4个菜单项。用鼠标选中Spry菜单栏组件,可在窗口下方属性面板修改菜单项,如“项目1”等的名称,通过“+”、“-”按钮增加、删除菜单项,并设置各菜单项对应的链接URL和目标窗口或框架。

1.2 调制菜单项的宽度

如图1所示,默认情况下各菜单项不一定在同一行,这是因为各菜单项宽度和超过Div元素宽度,因此,要调整菜单项宽度。

进入DW的网页代码视图,可找到DW生成的与菜单有关的一段Html代码:

(1)设置整个菜单栏组件的宽度

DW为Spry菜单栏组件生成了一系列CSS规则, 观察上述 代码 , 可发现该 组件所占 宽度可用MenuBarHorizontal选择器对应的CSS规则控制,双击CSS面板中的该选择器,可在CSS规则定义对话框中调整有关属性,如图2所示,可调整“方框”宽度属性为auto或为外部Div元素元素的宽度500px。

(2)设置菜单项的宽度

用鼠标点击菜单项“项目2”的边框线选中该菜单项,然后可在窗口下面的属性面板设置其宽度,单位可为百分比(%)或像素(px),如图3所示,此处设为25%。调整后4个菜单项正好横排占满Div元素。另外,对照DW为Spry菜单栏组件自动生成的CSS规则,可发现菜单项由ul.MenuBarHorizontal li选择器对应的CSS规则控制,同样可用CSS规则定义对话框调整宽度。

子菜单项“项目1.1”等的宽度也可用窗口下面的属性面板设置。另外,也可采用ul.MenuBarHorizontal ul和ul.MenuBarHorizontal ul li同时设置。

1.3 设置菜单项文字的属性

超链接建立在菜单项文字之上,因此,菜单项文字的属性 (字体、背景颜色、对齐方式等) 可用ul. MenuBarHorizontal a选择器对应的CSS规则控制,进行相应设置即可。

经过上述设置后,菜单一般能满足要求。

2 树形目录的制作

树形目录非常适合展示具有层次关系的数据和超链接。Visual Studio 2010[6]、ExtJS等软件含有树形目录组件,但DW CS5、6没有树形目录组件。可以从网络上搜到一些制作树形目录的代码。下文介绍利用bassistance.de网站[7]提供代码压宿包(jquery.treeview. zip)制作含静态树网页的过程。

(1)下载压宿包并解压到自制网站的某个目录下。

(2)在解压生成的演示文件夹demo中含有多个html文件,它们中含有各种形式的树形目录,选择一个最合适的html文件作为模板再修改便可,现假定选中large.html进行编辑。

(3)在网页设计(或代码)视图中将树以外不需要的内容、网页元素删除,得如图4所示原始树目录。

(4)现假设要制作一本书的目录,希望该树目录在浏览器中展开后效果如图5所示。

将图4中原树目录中的条款改成各章、节、款的名称即可,如将“Home”改成“第一章网页设计基础”。不需要的条款可用退格(BackSpace)删除。若要在某条款下增加一条款,则将光标移至该条款后按回车(Enter) 即可。若要调整某条款的逻辑层次,则可选中该条款, 再用属性面板的凸出或缩进按钮调节;但反复调整时,有可能使树形目录在浏览器中不能正常显示,此时可以将所有条款调整为同一层次,即垂直对齐,然后再从上到下重新调整各条款层次;也可进入网页代码视图修改,图4所示树目录正确代码如下:

由此可见,整个树用项目列表元素 <ul>…</ul> 表示,条款x用列表项元素表示,即 <li> 条款x </li>,当条款x后含有子条款时,则子条款构成的树又用项目列表元素表示,且嵌套于列表项元素中,即 <li> 条款x <ul> 子树 </ul> </li>。若标签不符合这种排列组合规律可以手工修改。

(5)利用treeview li选择器对应的CSS规则调整各条款的字体大小等属性。

(6)设置超链接属性。

对超链接有无下划线、颜色等进行控制,可在网页文件代码视图的头元素中添加如下CSS规则表:

在DW设计视图中编辑出如图6所示格式的目录,此目录在浏览器中效果即如前文图5所示。

(7)含树形目录的网页一般与框架网页配合使用, 故此后要设置相应的框架网页。

(8)修改条款上原有的默认超链接或在条款上添加超链接,即设置URL、目标窗口或框架等。

3 结束语

下拉式菜单和树形目录常被用作导航界面组件, 利用它们组织超链接可使网页简洁明了。但是一般的网页制作教材对它们介绍不详细或没有介绍。鉴于这两种导航方式的实用性,在教学中可以超越一般的教材而作出较详细的制作过程介绍,这能被不具备JavaScript、ExtJS、jQuery编程知识的人员所接受。

在介绍网页设计与制作课程时,要鼓励学生充分利用网络上的学习资料和代码资源,决不能拘泥于教材的学习。

摘要：下拉式菜单和树形目录常是两种常用的网页导航界面元素,但一般的网页制作教材介绍不详细或没有介绍。为了满足教学需要,文章介绍了利用DreamWeaver CS 6中的Spry菜单栏组件制作下拉式菜单的过程和利用jquery.treeview插件制作树形目录的过程,该方法不要编写程序,学生易于接受。

网页设计师总结 篇5

总结就是对一个时期的学习、工作或其完成情况进行一次全面系统的回顾和分析的书面材料，它可以帮助我们总结以往思想，发扬成绩，让我们抽出时间写写总结吧。我们该怎么去写总结呢？以下是小编为大家收集的网页设计师总结，欢迎大家借鉴与参考，希望对大家有所帮助。

网页设计师总结1

设计工作是痛苦与快乐的炼狱，每当面临新的设计任务时，因为觉得自己的水平不够，感觉充满了压力，开始搜集各种资料，接下来寻找设计灵感，沉思、焦灼，每当经过艰苦的磨砺，自己的劳动成果得到肯定时，便是工作中最大的快乐!充满了快意。

一、工作总结：

从开始连效果图都做不好到现在能自己套程序，虽然自己也付出了努力，但是更离不开同事们的帮助。在这三个月里，我学习了制作网页的基础知识。从配色到布局，从制作效果图再到切片，再到用dw制作网页，最后套程序。每一个环节我都没有松懈，不管是在公司还是回到家里，我都会充分利用时间来学习，补充自己贫瘠的知识。虽然现在的水平还远远不够，但是扪心自问，我在远洋的每一天都是充实的，没有虚度，我相信在新的一年里，通过自己的努力和同事们的帮助，我会学到更多的东西，不管是在技术水平上还是其他方面，都更上一层楼。

二、工作中的不足：

虽然通过三个月的努力，技术水平有所提高，但是还是存在很多不足的地方，因为基础打的不够好，很多地方学习起来有些吃力，不停的问同事，也给别人带来了不少麻烦，因为知识的不足，使得开始的学习有些混乱，感觉不知道从哪里开始学起，无从下手，浪费了不少时间。

三、新一年的目标：

过去的一年的整体上是紧张的、忙碌的、充实的。因为我刚刚来到远洋，所以对我来说这也是充满希望的一年。展望新的工作，希望能够再接再砺，同时也加强自身的能力，工作中与同事多沟通，多关心了解其他部门的工作性质，进一步提高自己专业知识技能，积极吸收新的观念与设计理念，要继续在自己的工作岗位上踏踏实实做事，老老实实做人，争取做出更大的成绩来。

我们经过痛苦煎熬，终于做出来的时候倍感轻松。

网页设计师总结2

网页设计年终工作总结转眼间，来到远洋科技已经三个月了，虽然时间不算长，但是这三个月让我在远洋学到了很多东西，结识了很多朋友，这是我最大的收获。也让我更加热爱这份工作。设计工作是痛苦与快乐的炼狱，每当面临新的设计任务时，因为觉得自己的水平不够，感觉充满了压力，开始搜集各种资料(包括文字、图片)，接下来寻找设计灵感，沉思、焦灼，经过痛苦煎熬，终于做出来的时候倍感轻松。每当经过艰苦的磨砺，自己的劳动成果得到肯定时，便是工作中最大的快乐!充满了快意。一、工作总结：从开始连效果图都做不好到现在能自己套程序，虽然自己也付出了努力，但是更离不开同事们的帮助。在这三个月里，我学习了制作网页的基础知识。从配色到布局，从制作效果图再到切片，再到用dw制作网页，最后套程序。每一个环节我都没有松懈，不管是在公司还是回到家里，我都会充分利用时间来学习，补充自己贫瘠的知识。虽然现在的水平还远远不够，但是扪心自问，我在远洋的每一天都是充实的，没有虚度，我相信在新的一年里，通过自己的努力和同事们的帮助，我会学到更多的东西，不管是在技术水平上还是其他方面，都更上一层楼。二、工作中的不足：虽然通过三个月的努力，技术水平有所提高，但是还是存在很多不足的地方，因为基础打的不够好，很多地方学习起来有些吃力，不停的问同事，也给别人带来了不少麻烦，因为知识的不足，使得开始的学习有些混乱，感觉不知道从哪里开始学起，无从下手，浪费了不少时间。三、新一年的目标：过去的一年的整体上是紧张的、忙碌的、充实的。因为我刚刚来到远洋，所以对我来说这也是充满希望的一年。展望新的工作，希望能够再接再砺，同时也加强自身的能力，工作中与同事多沟通，多关心了解其他部门的工作性质，进一步提高自己专业知识技能，积极吸收新的观念与设计理念，要继续在自己的工作岗位上踏踏实实做事，老老实实做人，争取做出更大的成绩来。我相信，远洋科技的前景是美好的，我期待我们远洋网络科技有限公司明年有更好的发展。我会更加努力!

网页设计师总结3

1.配色疑问

一个页面的色彩最佳不要超过3种，一面视觉效果紊乱，用色柔软，对比度强的色彩不能应用于通常网站，时尚网站运用还能够。

2.字体疑问

很主要的一个疑问，用标准字标准色，这是一个标准，行距通常控制在20px摆布，不要太小，也不要太大，自个巨细留意，中文12px，英文11px或许10px。不要用黑色字，能够用灰度或许其它柔软色彩，一致全部页面字体的色彩以及巨细，标准全体。

3.规划标准

规划是十分主要的，思考客户阅读习气以及他们想展示的内容，并且优化。一个页面，如果规划不合理的话不光影响阅读，而且十分丑陋。

4.制造习气

有必要十分了解各种网站的功用，要做得十分全部，比如说一个商城的网站应该有哪些内容有必要十分明白，不要等客户提出以后才弥补上去，会显得自个十分不专业。

时间一晃而过，转眼间试用期已接近尾声。在这段试用期中可以说是有喜也有忧。喜的是和同事们工作相处中，自己慢慢转变为一个社会人，自身实践经验和工作能力得到提高。忧的是自己还有许多方面有待于提高。

记得初到公司时，我对公司的了解仅仅局限于公司网站的简单介绍，除此之外，便一无所知了。但是，在领导和同事们的支持和帮助下，我不仅加深了对公司的了解，而且很快就掌握和熟悉本岗位工作的要求及技巧，严格做到按时按量完成产品终端页等页面的制作，保证页面的与效果图的一致性和页面在各个浏览器中的兼容性。同时，减少页面中冗余的代码，保证页面的加载速度。此外，注意用户体验问题，站在用户的角度浏览网页，发现问题、解决问题，以提高网站的浏览量。

自从担任网页制作以来，虽然在工作中取得了较好的成绩，但也还存在一些不足之处。例如：工作中没有充分领会领导的意图，有时会忽视公司的工作流程等等，这些都是由于工作态度和细节决定的。这些不足都需要在今后的工作中加以改进。

在今后的工作中，我将努力提高技术水平，克服不足，朝着以下两个方向努力：

1、在以后的工作中不断学习技术知识，通过多看、多学、多问、多练来不断的提高自己的各项业务技能。

2、提高自己解决实际问题的能力，并在工作过程中慢慢克服急躁情绪，积极、热情、细致地的对待每一项工作。

短短三个月的时间，我学到了很多专业的知识，能够得心应手开展工作;在一个和谐的环境下，开心的工作;可以说都是受益于各位领导的栽培和各位同事的赐教。

总的来说，由于本人工作经验不多，能力还有欠缺。虽然能胜任本职工作，但是社会在不断的进步，技术在不断的更新，我还需要更多的磨砺。为此，今后在工作中，我需要进一步增强开拓创新精神，刻苦钻研新的技术。在上级的正确领导下，努力拼搏，扎实工作，以更好的质量、更高的效率、更扎实的作风做好本职工作，为我们这个光荣的集体、辉煌的事业做出应有的贡献。

网页设计师总结4

在设计上

过去在对网页设计的理念比较空泛的，做设计的多而出现平乏，很多时候基本上没有好好的静下来想想设计，只是整天在电脑旁的不停的copy，设计那时对我而言就是不停的复制过程。在20xx年里，在业务不多的情况下，沉下心认真去想设计的真正的`含义与表现。通过几个案例，让我认识到，在纸上的图片再怎么新颖与美丽，不能做出来也是徒劳。设计，施工一个也不能少。特别是网页设计软件应用技巧上需要加强学习。

在业务上

20xx年我基本上都在汉口工作，汉口店没有武昌超市的绝对的优势，汉口店在外等于失去了超市的僻护，在客源上比较少，只能和外面的装饰公司一比高下，我们所能做的就是不能放过任何一个来咨讯的客户，让他们在第一次与我们交流中就留下深刻的映象。同样的一个订单，同样的一个合同，我们汉口店的同事付出更多，因为每一个客源对于我们都来之不宜。也许是这样的心态让我们对每个客户都服务周到，但是也滋长了部分不良的刁民，我认识到服务的到位，并不是对客户任何要求的惟命是从。

在心态上

在20xx年主要体现在与客户交流时更加的自信了，面对某些客户的刁专问题的回答更加的游刃有余了。在工作心态的调整，在每天的工作中总是会遇到各种各样的问题，这就要考验我的解决事情的能力，与过去相比，考虑问题更加成熟了，不像过去遇事则乱了。面对不同的客户，如何调整自己去理解他们的想法，让他们来认同自己的设计理念。希望能在短时间里自己能培养稳健的办事作风，是我20xx所追求的。

网页设计师总结5

我已经在公司工作将近1个月了。刚来的时候还担心无法把工作做好，不知道如何与同事共处。但经过这一个月以来，公司宽松融洽的工作氛围。

在我工作经历中，让我感到幸运的就是公司给我这一次就业机会。与以往的工作经历不同的是，这里给人一种完全放松的工作氛围，没有因为测试出的bug和不能按时提交的软件模块功能而心怀忐忑，接触的人际关系也不再是有限的技术人员，在这里我学到很多以前不曾接处的东西，处理人际关系的能力，会不会说让人喜欢的话，处事的心态等。在此对一个月的工作和生活做一下总结，从中发现自己的缺点和不足，在以后的工作中加以改进，以提高自己的工作水平。

在这一个月的工作和生活中，尽心尽力，履行自己的工作职责，认真及时做好领导布置的每一项任务。当然我在工作中还存在一定的问题和不足，比如：面对同事找不到交谈的话题，工作经验方面有待提高；对旅游行业相关知识情况了解的还不够详细和充实，掌握的技术手段还不够多。对于这些不足，我会在以后的日子里虚心向周围的同事学习，努力丰富自己，充实自己，寻找自身差距，拓展知识面，不断培养和提高充实自己，让工作能力进一步提高。也希望请领导和同事对我多提要求，多提建议，使我更快更好的完善自己，更好的适应工作需要。

刚刚入职不到一个月，对于旅游这一行业，如何运作，操作，知之甚少。但在这一个月里，我渐渐对旅游行业发生了浓厚兴趣。同事们在处事上八面玲珑，圆滑，谈笑风生值我学习。公司基本没有物资储备，也没有生产过程，却能创造出利润，赢得财富，对于我非常感兴趣，公司到底是如何经营的？

在此我定下了明年的工作目标。了解公司的操作过程，运营方式，虽然我是公司的it技术人员，对于学习这些知识表面上看似无任何关联，我只要按公司给的需求开发出相应的系统即可。但我认为，最好的项目是最适合顾客体验的，要想做出受顾客欢迎的网站，要站在顾客角度上考虑。因此要融入到旅游行业，身处其境，才能做得更好。我跟华哥聊过公司的网络发展，华哥的目标是明年使至尊网成为华南最大的旅游网，使至尊网成为一个品牌。这是我们网络部的目标，也是我的目标。配合好华哥的工作，使网站能按时上线。与网络部的同事一起努力，把网络推广做到最好。

网页设计中的版式设计 篇6

关键词：网页设计；版式设计 CDIO教育模式；项目教学

近年来随着经济的高速发展，科技的日新月异，教育领域同样面临革新。引进新的教育理念和教学模式成为教育工作者的关注重心，此时，欧美成熟的工程教育理念慢慢地进入我们的视野之中，CDIO的教学模式（Conceive构思、Design设计、Implement实施、Operate运行），符合工程人才的培养，提高学生的实践能力、组织能力、创新能力。这一模式更适应当下的教育环境需求。

网页设计这门课程属于交叉学科范畴，兼顾艺术设计、计算机技术及交互设计等多门学科。另外，这门课程作为艺术与技术的结合体，要求学生具备较强实践动手能力与综合运用能力，因而在教学过程中我们依据CDIO的工程教育理念开展教学。

本文重点谈到的是网页设计中的版式设计过程，网页中的版式设计起到信息统一、分割区域和交互导引的作用，是在有限的空间界面内将文字、图形、背景色彩或图案及交互功能集成在方圆之间，根据设计的形式法则，利用艺术美学与科学技术相结合的方式来实现效果展示。下面以教学过程中的“xx艺术系网站”项目为例，以网页设计中的版式设计为内容，展示教学过程中的各个设计阶段。

1 构思阶段

（1）确立目标。

网页设计不是盲目的行为，不是简单使用软件的行为，它是构思由确立到实现的过程，是一种展示到体会的过程。因此，在设计之初，教师需要引导学生了解当前的课题，明确网站要做什么，网站的外观布局是什么样子，网站需要营造何种氛围。我们常见的网站根据用途分类为企业网站、电子商务网站、电子政务网站、文体娱乐网站、教育科学网站等，每种类型的网站都有自己需要传播的信息，根据所需文字与图片选择适合的排版方式，进而营造恰当的氛围。在“xx艺术系网站”项目中，学生会根据实际项目类型，理解项目设计目标为，该学院所属系部信息服务类网站，界面版式方面要求简洁大方，色彩明快，塑造清新、愉悦的氛围，学生可以根据以上内容展开进一步的设计工作。

（2）信息整理。

项目开展前期根据对项目的简单分析，要求学生对客户或相关人士展开访谈，对行业同类网站的资讯开展收集与调研。这一阶段学生会接触网页设计的需求方，在本项目中可以设定为系内行政人员、教师及系内学生，根据访谈或调研可以得到网站相关设计信息，如对整体风格的需求，导航的设计需求，网站类型为静态网站或动态网站，根据需求结果，要求学生设计多样的版式效果，以供客户参考。

（3）交互设计。

我们将网页中的交互分为视觉上的交互和行为功能上的交互设计。在这里我们更侧重说明交互在视觉上的应用。网页中我们常见的交互形态有按钮、导航条、搜索栏和表单等。这些交互形态都会出现在版式的突出及显著位置，这样更引发人们的视觉关注中心，因而，在进行版式设计时，需要考虑这些交互元素的设置，友好的版式也是一种界面与人的情感交互。在我们的项目中学生应该考虑交互按钮的外观设计，排放位置等因素；导航条的设置应在醒目位置，清晰明确发挥导引作用；搜索栏帮助浏览者快捷搜索，放置在易发现的位置，搜索一般出现在网页右上角；表单设计是学生所忽略的环节，因为可以使用插件添加，导致学生认为无须设计，在此建议信息表单设计时可考虑细节设计，提高友好度与舒适度等交互设计。

2 设计阶段

版式设计是网页设计中重要的设计引导规划环节，在这个过程中学生可以根据自己的项目主题展开艺术美感的设计。一般进行页面版式设计我们从以下几个方面入手。

（1）版式结构设计。

网页设计中的版式设计与传统媒介中的版式设计略有不同，前提是他们都遵循版式设计五原则，[1]内容与形式，简洁与简约，设计与艺术，趣味与独特，局部与整体。为了设计富有形式法则和艺术美感的网页作品，版式设计方面通常会采用黄金比例和三分法排列原则。黄金比例法是初学者易于掌控的方法，将视窗可用区域分成两个部分，也可以根据设计比例需求，将数字录入到相关计算网站，得出合适的黄金比例分配方案。三分法构图排版方式，是将排版界面分成三份，根据内容的不同，选择不同的三分法排列位置。

网页设计中由于要考虑显示器视窗显示水平不同，我们的总体版式设计会采用固定格式或非固定格式两种形式。固定格式的版面是固定的界面版式，而非固定格式的版面设计是变化的，这种变化的版式很难把握的，变化的视窗将改变既定的字体形式和图形排列位置，这个课题也是我们今后要深入探讨的方向。

（2）字体、图像、色彩设计。

版式设计是界面设计的骨架，字体设计是界面设计的血肉，富媒体技术的全面发展，网站这一综合载体也得到了极大的发展，版式与字体的结合构成了网页的不同风貌。在网页中常见字体分为中英文两类和图形化的艺术字体，字号一般选用12pt。在中文网页常常出现的字体为宋体或黑体，字号为12pt/14pt的文字展示，另外也会有些超大字体以图像的形态出现，并通过视觉效果的调整，创建三维空间的视觉展示效果。图形化的艺术字体，在诸多网站中得到应用。在设计中我们题材保有传统的文化性，中国元素的运用，如书法、图腾、建筑等富有中国色彩的艺术形态都应得到我们的思考与关注，中西文化的比较与融合也是我们要探索的方向。图形与色彩部分在排版中应适合主题，响应设计氛围，为整体版式服务。

（3）视频展示设计。

网页界面排版中还需考虑一种新兴的展示手段，视频信息展示，页面中利用大量的视频信息排版，减少文字、图片信息的输入，信息传达方式由静态转换为动态，提供有趣而新颖的排版展示方式。

3 技术实施

（1）界面版式视觉设计。

网页设计中对静态界面的布局，我们通常会使用Photoshop和Illustrator圖像处理软件开展设计，首先我们会根据思维导图绘制基础模板，然后根据设计需求在模板中添加设计好的文字、图形、视频、声音等设计元素。

（2）交互功能视觉设计。

在网页设计中我们会考虑将静态样稿转换为简单的静态网页，这种转换我们会使用Dreamweaver软件进行操作，由于网页展示设备的不同我们也会考虑采用一些相关的模型制作软件来处理交互设计部分。

4 运行阶段

将确定好的静态草稿通过切图生成为静态网站，测试效果及功能，当运行时根据需要和视觉效果进行调整直到理想状态。

5 小结

网页设计课程将实际项目导入课堂，根据CDIO工程教育模式教学，打造有效、有趣、实用的教学方式，使学生在学习操作中锻炼宏观思考的能力，获得团队合作的能力，养成终身学习的能力。学生对设计流程的掌握就是对知识体系的掌握和运用，达到理论与实践相结合，通过对版面的全面掌控，更好地为静态网页设计打下坚实的基础。

参考文献：

[1] 沈卓娅，王汀.字体与版式设计实训[M].中国出版集团东方出版中心，2011：74.

谈网页页面设计技巧 篇7

一、布局设计

网页中的布局是整个网页制作中最开始的步骤,也是最为关键的一步。网页中的布局决定网页的整体效果,合理的布局可以完美、清晰地组织网页中的文字、图形,给人以紧凑、整洁、美观的感觉。

在本例中,我们首先使用Photoshop设置网页页面的效果图,接着再切图并使用DIV+CSS语言将其做成HTML形式。接下来我们详细说明使用DIV+CSS语言的布局方法。

1、网页页面的每个区域,如页头区、主体区、法律和版权声明等,我们都插入相应的DIV元素,然后,用CSS控制DIV使网页居中显示。在本例中,我们将分为bn,main,cr三个DIV。

2、对于页面中所有的DIV元素,利用CSS控制DIV的位置,我们可以将页面中的DIV视为一个个块状元素。在此应用了“盒模型”的工作原理,“盒模型”是CSS的基础,“盒模型”理论认为:页面上的每个元素都被看做—个矩形,这个矩形由内容、填充(padding)、边框(border)、和边距(margin)构成。对于每部分的间距,以及文字、图片空隙的调整,我们用“盒模型”的工作原理来调整。在网页默认的情况下,元素由上到下依次叠放,当这样的叠放顺序不能满足布局的需要时,就要使用“float(浮动)”属性来改变元素的叠放顺序。元素应用了“float(浮动)”属性,它周围的元素就会靠近、包围元素,这样的影响在有的布局中是多余的,这时,可以用“clear(清除)”属性来阻止这种浮动对后面元素的影响。再复杂的布局也是重复利用这样的技术,大到网页每—部分的叠放,小到文字、图片的排版。

3、在DIV中添加各种网页元素,把文字、图片、动画安排到合适的位置,再把每部分合理地叠放到网页中,这样就完成了网页的布局。

二、主要设计部分

在VS.NET开发环境中,新建index.htm,并创建css文件,命名为main.css,将样式表写在一个独立的文件中。

在index.htm中写入用来声明将会把Internet Explorer 6及以后版本切换到标准兼容模式。

在

中加入

,这表示index.htm可以链接到main.css文件中,可以调用其中的内容。

在index.htm的

中插入如下代码:

对main.css文件的主要设计代码如下:

三、在main的DIV中的各个DIV中插入相应的内容

在导航的DIV中插入相应的内容

图文混搭之后的效果图如下所示:

在这里,我们只给出“最新公告”和“实训实验室”这两块内容。我们还可以在左边的DIV中加入“管理制度”“实训基地”“技能鉴定”三个DIV,在右边的DIV中加入“资料下载”“实训与实习”“高新技术考试”三个DIV。

四、上传测试

本文中的网页已通过测试运行并发布到WEB服务器上测试。上传后运行正常;并在不同分辨率下都能够正常显示。

五、结束语

本文运用了DIV+CSS技术设计的网页使用方便,兼容性好。但是DIV+CSS布局的网页由于需要兼容各种浏览器,也有其不足的地方,主要表现在开发技术高,开发时间长,开发成本高。

参考文献

[1](美)Kynn Bartle.CSS入门经典[M].北京:人民邮电出版社,2007.

[2](加)Zoe Mickley Gillenwate.灵活Web设计[专著][M].北京:机械工业出版社,2009.

[3]郑宁宁.浅析DIV+CSS网页设计技术[J].山东省农业管理干部学院学报,2008.

网页艺术设计初探 篇8

关键词：网页艺术,网页元素,版式

随着Internet的不断发展, 网络已经成为现代社会必不可少的重要组成部分, 而网页作为信息发布的载体, 人们关注的不仅仅是它的内容, 网页的美观、生动、活泼、个性等艺术性方面逐渐成为了关注的焦点。人们对网页的视觉追求的永无止境, 也正是推动网页设计向前发展的主要因素。

从发展趋势来看, 网页设计会更加注重创意、个性和内容的高度统一。

一、网页艺术设计的原则

网页的艺术设计, 是技术与艺术的结合, 内容与形式的统一。网页作为传播信息的一种载体, 由于表现形式、运行方式和社会功能的不同, 网页设计有其自身的特殊规律, 它要求设计者必须掌握以下三个主要原则:

1、主题鲜明

视觉设计表达的是一定的意图和要求, 有明确的主题, 并按照视觉心理规律和形式将主题主动地传达给观赏者。根据认知心理学的理论, 较小而分立的信息要比较长而不分立的信息更为有效和容易浏览。这个规律蕴含在人们寻找信息和使用信息的实践活动中, 它要求视觉设计者的设计活动必须自觉地掌握和遵从。

2、形式与内容统一

一方面, 网页设计所追求的形式美, 必须适合主题的需要, 只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容, 或者只求内容而缺乏艺术的表现, 网页设计都会变得空洞而无力。另一方面, 要确保网页上的每一个元素都有存在的必要性, 不要为了炫耀而使用冗余的技术。只有通过认真设计和充分的考虑来实现全面的功能并体现美感才能实现形式与内容的统一。

3、强调整体

在设计网页时, 强调页面各组成部分的共性因素或者使诸部分共同含有某种形式特征, 是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。例如:在版式上, 将页面中各视觉要素作通盘考虑, 以周密的组织和精确的定位来获得页面的秩序感, 即使运用“散”的结构, 也是经过深思熟虑之后的决定;一个站点通常只使用两到三种标准色, 并注意色彩搭配的和谐;对于分屏的长页面, 不可设计完第一屏再考虑下一屏。同样, 整个网页内部的页面, 都应统一规划, 统一风格, 让浏览者体会到设计者完整的设计思想。

二、网页艺术设计的基础元素

组成网页信息的基础元素比较多, 总结包括主要如下:文本、背景、按钮、图标、图像、表格、颜色、LOGO、音乐、影像等。目前如何将这些元素应用到网页供人们使用已经成为了简单操作, 但是各种元素如何合理的搭配, 才能使网页最具感染力和表现力, 就成为了网页设计的重点和人们关注网页的首选, 对网页的艺术设计提出了更高的要求。

1、颜色的设置

色调对网页具有绝对性影响。灰色调配色产生素雅的印象;鲜艳的色调配色产生健康活泼的印象;鲜艳的红色给人以活力;柔和的色调让人平静;明色调则使人心情愉悦。无论色相如何改变, 这种基本印象是不会改变的。选择了与页面内容不相和谐的色调, 会传递错误的信息, 造成混乱。

2、图片的设置

最合适的主题图片具有强烈的信息性, 能在一瞬间让人了解访问的网页是否与印象相同的就是图片。而其中又以能直接表现标题或网页信息的插图和照片最有说服力, 它能够使访问者直接确认信息。例如龙、凤、鹤、龟等吉祥图片表现了喜庆的气氛, 让人联想起新年、丰收、长寿的形象;现代的花环、桃心等是众人皆知的符号, 便于传达欢迎的态度。在打开网页一瞬间, 图像几乎与标题文字同时映入眼帘, 观众对网页的印象也就被确定下来。

3、文字的设置

中文为了保证“方正”的造型, 通常仅使用双数字号, 比如最常用的12px和14px (少数字体的13px效果还行) , 因为这两种字号看起来最自然、协调。再往上16px, 18px, 20px也还行, 但13px, 17px类似的单数字号, 可以看到效果明显的锯齿和失重感。文字大小的对比也会左右印象。标题文字的大小与正文之比叫做跳动率。以正文作为1倍, 标题的大小用它的倍数来表示。第一面的大标题用大约7~8倍, 号外新闻级别的则超过了10倍。体育新闻的标题经常使用10倍以上来构成。像这个例子一样, 跳跃率的高低既表现了报道的重要等级, 也是表现了热门的程度。跳动率越大, 画面越活跃;反之, 越稳重。

将标题的文字变大, 粗细效果会加倍。例如, 大而粗的文字最有精神。另一方面, 将文字变小, 粗细效果会减弱。虽然细而小的文字有优美的感觉, 但如果使用细而大的文字, 效果会更加明显。总之, 文字越大, 越能强化粗细的印象。

三、网页艺术设计的版式设计

所谓网页的版式设计, 是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合, 将理性思维个性化的表现出来, 是一种具有个人风格和艺术特色的视听传达方式。

网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角形、自由型十种。

1、骨骼型

网页版式的骨骼型是一种规范的、理性的分割方法, 类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。这种版式给人以和谐、理性的美。

2、满版型

页面以图像充满整版。主要以图像为诉求点, 也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。

3、分割型

把整个页面分成上下或左右两部分, 分别安排图片和文案。两个部分形成对比:有图片的部分感性而具活力, 文案部分则理性而平静。倘若通过文字或图片将分割线虚化处理, 就会产生自然和谐的效果。

4、中轴型

沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。

5、曲线型

图片、文字在页面上作曲线的分割或编排构成, 产生韵律与节奏。

6、倾斜型

页面主题形象或多幅图片、文字作倾斜编排, 形成不稳定感或强烈的动感, 引人注目。

7、对称型

对称的页面给人稳定、严谨、庄重、理性的感受。对称分为绝对对称和相对对称。一般采用相对对称的手法, 以避免呆板。

8、焦点型

焦点型的网页版式通过对视线的诱导, 使页面具有强烈的视觉效果。焦点型分三种情况:

(1) 中心:以对比强烈的图片或文字置于页面的视觉中心。

(2) 向心:视觉元素引导浏览者视线向页面中心聚拢, 就形成了一个向心的版式。向心版式是集中的、稳定的, 是一种传统的手法。

(3) 离心:视觉元素引导浏览者视线向外辐射, 则形成一个离心的网页版式。离心版式是外向的、活泼的, 更具现代感, 运用时应注意避免凌乱。

9、三角形

网页各视觉元素呈三角形排列。正三角形 (金字塔形) 最具稳定性, 倒三角形则产生动感。侧三角形构成一种均衡版式, 既安定又有动感。

1 0、自由型

自由型的页面具有活泼、轻快的风格。

目前网页的布局设计越来越简单, “简单就是美”在一定程度上凸显, 人们的眼睛不用在页面上转来转去拼命寻找想要的东西, 同时在浏览过程中它也提供更加平和、稳定的浏览体验。内容在网页中心定位, 尽可能在“一屏”以内显示更多的信息似乎是一直以来的至理名言。更多的留白和行高也越来越多人应用。

四、优秀网页具备的条件

给人留下好印象, 让人赏心悦目的优秀网页一般具备6个条件。缺少任何一个都会使访问者对网页的印象一落千丈, 使得初次访问者不愿再次光临。

1、标题明确

对于初次访问网站的读者来说, 首要目的就是确认标题。那些晦涩难懂的标题会使难得光临的访问者感到不知所措。虽然我们以美观和与众不同为设计日标, 但如果吸引不了访问者, 这个网页的设计和建设也是没有意义的。过于个性化的表现, 会使网站内容的公开性受到质疑。

2、内容与主题统一

让访问者第一眼就明了表达的内容的网页才是最优秀的。如果访问者对信息的种类、是趣味性的网页还是商业性的, 以及行业类型等问题能够一目了然的话, 他才能安心地继续访问, 对网页的好感也会逐步增强。所以我们运用排版样式、图像、文字的造型以及配色类型等元素来准确传递信息。

3、导航清晰、准确

对于网页来说, 最重要的就是信息内容。信息的品质与数量决定了人们对这个网页的评价高低。但首先要做到的是, 怎样将读者顺利地引向信息内容。明确划分信息群, 不让读者产生迷惑, 使之迅速找到所需要的信息, 是目录设计最重要的任务。目录的整理决定了网页的可读性。

4、风格统一, 整体性好

目前很多页面做得很花哨, 但是非常不实用, 例如采用很深的带有花哨图案的图片作为背景, 严重干扰了浏览, 获取信息很困难。同时有些还采用了颜色各异, 风格不同的图片、文字、动画, 使页面五彩缤纷。没有整体感觉, 尽管有些页面内容不多, 但是浏览起来仍然特别困难。

5、创新性的视觉特色

网页设计中的误区就是千篇一律, 缺乏自己的特色, 当我们打开电脑, 上网一看, 好像哪个网站都是一样的。从标题的放置, 按钮的编排到动画的采用都是如此。应该根据网站的定位, 善于做创新性的视觉设计, 让你的设计在同类网站中脱颖而出, 让用户更喜欢。

6、色彩协调

色彩给人心的心里感觉很直接, 所以色彩使用要合理且大胆, 突显网站主题与品调。

时代在进步, 技术在更新, 人们的审美观念也在不断变化, 作为艺术与技术高度统一的网页设计将会对设计人员提出更高的要求与挑战, 网页艺术设计也将更加具有魅力与多彩。

参考文献

[1]刘肖冰.浅谈网页艺术设计.安阳师范学院学报.2005年05期

[2]傅晶.网站设计的艺术性与可用性[A].2004年工业设计国际会议论文集[C].2004年

浅谈网页平面设计 篇9

关键词：网页设计,平面设计,网络

(一) 前言

多媒体网络这一新兴媒介发展异常迅速, 日趋成熟、规范。网站建设也由以往的仅靠技术应用向艺术领域发展, 而网页的平面设计作为一门新兴的设计和网络的交叉科学, 近几年随着网络的发展而被越来越多的网站建设者们所注重。

平面设计是设计领域中一个非常重要的组成部分, 它运用二维空间的视觉构成要素, 以现代印刷技术生产的印刷成品为表现方式, 以达到视觉传达的准确目的。平面设计将不同的基本图形, 按照一定的规则在平面上组合成图案, 以轮廓线划分界限、描绘形象, 其表现的立体空间感, 并非真实的三度空间, 而仅仅是视觉引导作用形成的幻觉空间。而网络的出现, 使得传统的平面设计插上了科学的翅膀, 焕发出新的生机和活力。

(二) 网页设计和平面设计的关系

视觉传达的功能角度来看, 网页设计可以看做是平面设计在信息时代的拓展和延续, 两者都是为了实现信息传达和审美的的目的。网页是通过屏幕界面作为信息传播的媒介, 而传统平面设计其外在表现形式为印刷品。忽略这些表现形式, 人们看到的是传统的图文信息、版面、色彩等基本视觉构成要素。

另一方面, 网页设计也是平面设计的一个重要发展方向。网页设计是传统平面设计的视觉传达效果运用和网路技术的结合, 所以可以说网页设计综合了平面设计艺术和网路技术。网页设计打破了传统的二维静态空间的限制, 其动态性和交互性是传统的平面设计所无法达到的, 也是传统平面设计在网络时代的一个突破方向。

(三) 构成创意

在网页设计之前, 设计者必须对网页元素的造型设计、组合方式以及表现手法在脑海中尽心构思, 形成一个初步的的想法和思路, 并将其运用到设计和创作中当中去。这个思路在设计和创作过程中也将不断的完善和再发掘, 这个思路, 就是我们所说的创意。创意是我们网页的灵魂, 而对于许多非艺术类的网页设计者来说, 这也是最有难度和挑战的一项工作。

首先我们要对我们的网页作品有一个正确的风格定位, 这是我们传统平面设计也重点考虑的方面, 但我们在对网页进行风格定位的时候, 也要考虑到网页设计与平面设计的一个不同之处, 那就是我们网页的开放性和传播性。只要我们把网页放上网路, 那么世界上任何一个地点的人们都可以在任意地点和时间来浏览它。所以在设计定位时, 在注重本民族本、地区文化特征的同时, 也要注重内涵, 使其具有世界开放气息。

其次是画面的内涵, 也就是其内容和表现形式, 网页画面内容的选择和表现形式的创意必须以正确的向浏览者传达某个信息为原则, 网页毕竟不同于美术创作, 不是用来表现创作者的高超技巧和深厚思想, 其本质还是向浏览者传递某个信息, 而过分强调表现形式而模糊了本身想要传达的信息是本末倒置, 得不偿失的。

再次是基本构图, 构图是平面设计的核心, 在美学中有着一套完整、成熟的理论体系, 而在网页设计中, 我们只将其简化为页面布局的概念。构图需要设计者需要一定的艺术底蕴, 对于要求不高的一些网页设计, 设计者也最好能够掌握一些与几何学密切相关的图形法则, 用来指导自己构图创意, 比如:黄金分割法则、几何图形法则等。

(四) 文字设计

文字是网页设计中一种重要的传播载体, 是传递信息最直接, 最常用的方式。在通常的网页中文字都占据了了相当部分的篇幅, 因此文字设计的好坏将直接影响到网页的整体视觉效果、信息传达的有效性。许多初学者往往会忽视对文字设计的精雕细琢。

字体的选择要着重考虑文字的风格, 现在可供选择的文字风格也越来越多, 有的端庄秀丽、格调高雅, 有的坚固挺拔、深沉厚重, 可以根据需要选用, 衬托文字内容想要表达的情感。字体数量众多, 但一个网页选用的种类最好不要超过3种, 否则会给人一种不和谐, 随意堆砌的感觉。

在设计过程中也可以考虑文字图形化, 在整个网页中起到点缀的作用, 克服文字的呆板单调, 达到一定的视觉效果。

(五) 色彩

在网页设计中, 色彩的基调和协调往往能最先展示网页的主题思想和个性化特征, 吸引浏览者的眼球。色彩作为一种设计语言, 在网页设计中所表达的含义深刻而广泛, 可以说是整个网页设计的灵魂。

熟练的应用色彩来丰富自己的网页设计是成为一个优秀网页设计师的基础。而这同样需要设计者有一定的美术功底, 掌握色彩所表达的情感。色彩所引发的不同感觉和情感倾向, 为网页设计带来了广阔的思路源泉, 赋予冰冷的界面以情感。除了色相的变化会引导人的情感变化外, 色彩的明度和纯度变化也能影响人的情感变化。

而色彩的搭配也是色彩设计中一项重要的工作。在搭配中注意“大调和、小对比”的色彩搭配原则, 创作出令人耳目一新的色彩空间。

色彩设计前, 设计师要对网页的整体定位、色彩的情感和功能有明确、深刻的认识, 充分利用人们在平面设计中对色彩运用的经验。只有这样, 才可以使得设计的网页具有更加深刻的艺术文化内涵。

(六) 结束语

因特网作为人类海量信息资源的集散地, 其组织形式也随着技术的发展也发生了翻天覆地的变化, 从早期的文字的只有文字服务, 发展到后来的彩色图像和声音, 再到现在越来越多的动画, 网页的表现形式日新月异。

网页是一种有目的视觉、审美创造活动, 是网络科技和艺术有机统一的创造性活动。网页设计为平面设计打开了一个崭新的天地, 而平面设计也为网页设计注入了强大的活力和动力。只有充分掌握技术和艺术两方面的知识, 才能在网页平面设计中充分翱翔。

参考文献

[1]王受之.世界平面设计史[M].北京:中国青年出版社, 2002.

网页设计的色彩运用 篇10

关键词：网页设计,色彩,色彩的作用,色彩运用,色彩搭配

0引言

网页设计是一门新兴的设计类和网络交叉学科, 近几年随着网络的发展而逐渐受到人们的重视。网页以网络为载体, 把各种信息以最便捷的方式传达给受众。在这种标准的需求下, 逐步产生了审美的需求。网页的色彩是树立网页形象的关键之一, 色彩运用的好坏直接影响人们对这个网页的认同度, 网页色彩搭配既是一项技术性工作, 同时也是一项艺术性很强的工作。因此, 设计者在设计网页时除了考虑网页本身的特点外, 还要遵循一定的艺术规律。

1色彩运用

1.1色彩分类

在色彩缤纷的世界里, 人们通过视觉感知到的色彩是非常丰富的。色彩按照种类可以分为原色、间色和复色。就色彩的系别而言, 则可分为非彩色系和彩色系两大类:①彩色系:指包括在可见光谱中的全部色彩, 以红、橙、黄、绿、蓝、紫等为基本色;②非彩色系:指由黑色、白色及黑白两色相融而成的各种深浅不同的灰色系列。

1.2色彩种类

(1) 原色。

原色就是不能用其他颜色混合而成的颜色。我们可以用原色混合成其它各种各样的颜色。基本上原色分为红、黄、蓝3种。这3种颜色当中不能掺杂其它的任何一种颜色。

(2) 间色。

间色就是由两种颜色混合而成的颜色。我们用三原色就可以调出3个间色来。例如, 红色加黄色可以调出橙色, 黄色加蓝色可以调出绿色, 蓝色加红色可以调出紫色。橙色、绿色、紫色称为间色。

这种交错关系构成了色光、颜料与色彩视觉的复杂联系, 也构成了色彩原理与规律的丰富内容。

(3) 复色。

原色就是由一种间色和另外一种原色混合而成的颜色。例如:黄色加橙色为黄橙, 红色加橙色为红橙, 蓝色加紫色为蓝紫, 红色加紫色为红紫, 蓝色加绿色为蓝绿等等。黄橙、红橙、蓝紫、红紫、蓝绿称为复色。

以上的原色、间色和复色就构成了千变万化的色彩世界。我们在运用色彩时可以根据这些特性, 搭配出不同效果的色彩方案。

2网页设计的色彩运用

根据专业的研究机构研究表明, 彩色的记忆效果是黑白的3.5倍, 也就是说, 在一般情况下, 彩色页面较完全黑白页面更加吸引人。通常的做法是:主要内容文字用非彩色 (黑色) , 边框、背景、图片用彩色。这样页面整体不单调, 主要内容也不会让人眼花缭乱。黑白是最基本和最简单的搭配, 白字黑底、黑底白字都非常清晰明了。灰色是万能色, 可以和任何彩色搭配, 也可以帮助两种对立的色彩和谐过渡。

(1) 红色。

红色的纯度高, 引人注目, 有人称之为“火与血”的颜色, 能增高血压, 加速血液循环。用红色为主色的网页不多, 在大量信息的页面里使用大量面积的红色不易于阅读, 但若搭配好的话, 也可以起到振奋人心的作用。过纯的红色容易使人疲劳, 引起人的心理反感, 因此, 一般只有在以节庆为主题的网页中会大面积使用纯红色, 而在其它主题的网页中, 要使用大面积的红色就需要加入白色或暗色调。

(2) 橙色。

橙色在网页中经常被使用, 通常给人一种温馨明快的感觉, 如果将黄色或黄绿色与橙色搭配会使网页呈现出非常好的效果。在各种网站中, 橙色的使用几率比较多, 橙色既能体现一种青春的活力同时也不失稳重。

(3) 黄色。

黄色作为一种主色调, 在网页配色中经常会作为背景色来使用。黄色本身给人一种清爽、明朗的感觉, 所以能够得到大部分人的认可。在一些门户网页中经常会运用到黄色, 黄色会带给人一种积极向上的感觉, 使人身心愉悦。高彩度的黄色与黑色的结合可以达到清晰整洁的效果, 这种配色实例在网页设计十分多见。

(4) 绿色。

绿色通常被认为是象征和平的颜色, 同时也会带给人安静祥和的感觉。在一些与健康相关的网站中经常会用到绿色。用浅绿色作为网页背景色, 可以给人营造一种平静的氛围, 也可以给人一种清凉的感觉。

(5) 蓝色。

蓝色在网页元素中出现的几率是最高的。很多政府门户、学校门户网页都使用蓝色作为背景色。使用蓝色既能达到庄重的效果, 也能给人整洁、轻快的感觉。蓝色与白色、青绿色搭配会使人感到开阔、清凉。很多企业做网页时都选择了蓝色, IBM公司网页就是其中之一。

(6) 紫色。

紫色通常让人有一种神秘的感觉, 在一些个性网页中经常会出现紫色。在一些女性网站中, 经常会使用紫色做为主色调。蓝紫色通常与蓝色一起搭配使用。

(7) 白色。

白色除因明度高而感觉冷外基本为中性色, 明视度与注目度都相当高。白色能满足视觉的生理要求, 因此与其它色彩混合均能取得很好的效果。网页和其它视觉作品不同, 它要求具有较高的阅读可视性, 所以白色使用相当多。

(8) 黑色。

黑色是没有纯度的颜色, 黑色在心理上是一个很特殊的色彩, 它本身无刺激性, 但是与其它色彩配合能增加刺激性。黑色是消极色, 所以单独使用的情况用途不多, 但是与其它色彩配色均能取得较好的效果。

3色彩运用的主要问题

(1) 做网站建设时要选准标准色, 标准色的选择要符合自身特点。

在了解色彩的基础上选择适合自己的标准色。同时, 为了让主页更加丰富多彩、引人注目, 可以在标准色的基础上, 配以不同的辅色。在标准色的基础上搭配不同的辅色, 使得网页看起来丰富而统一。

(2) 在主页选色以前, 要做很多的辅助工作。

例如, 在选色前要充分考虑网站受众的社会背景、心理需求。不同社会背景的人, 对于色彩的感知也是不同的。因此, 网站的设计者要充分考虑网站受众的心理因素和年龄特点, 选择出符合受众心理的标准色。网站的用色要考虑到多方面的需求, 尽可能地吸引访问者的目光, 总结他们满意或者是不满意的原因, 综合考虑。

(3) 在设计网站的时候, 我们应该关注流行色的发展趋势。

每年都会有一些流行色出现, 这是符合大众心理的一些基本色调。在设计网站的时候可以巧妙地加以应用, 这样网页会富有朝气、令人赏心悦目。与此同时, 还要关注网友对网站的评价, 及时进行改进, 这样才会吸引更多的受众, 提高网站点击率。

(4) 在制作网页时, 要凸显自身特色。

不能一味地去迎合大众。我们应该做到在保持自身特色的同时符合大众的心理。目前, 随着网民人数的不断增加, 网民的素质也越来越高, 大多数的网民喜欢选择有特色、风格独特的网站进行浏览。网页设计师在设计网页时, 可以选择体现自己风格的色彩大胆应用。

(5) 网站设计师在设计网站时, 应该更加注重整体效果。

在设计网站页面时, 要更多地考虑平面设计的因素, 把握整体。色彩的明暗、轻重、冷暖, 以及调和色和对比色的应用等都要考虑在内。

参考文献

[1]方宁, 林波, 王英华.Photoshop CS2网页设计和配色实战攻略[M].北京:清华大学出版社, 2007.

[2]王娜.Dreamweaver网页制作与色彩搭配全攻略[M].北京:清华大学出版社, 2006.

[3]于慧, 王崧.新锐网页配色设计与案例分析[M].北京:中国青年出版社, 1991.

网页图标视觉引导设计研究 篇11

网页国标作为网站设计中一个不可或缺的组成部分，起着对网页信息的强调和提示性作用，引导人们的行为操作和信息获取的重要功能。本文从网页国标的基本功能出发，结合认知心理学，阐述了要构建有效的网页图标视觉引导主要有四种设计方法：隐喻引导、分类引导、方向性引导、动态元素引导。此外，本文还就不同表现形式的网页图标的特点和视觉引导优势做了阐述。

关键词：

网页图标 视觉引导 设计方法 表现形式

中国分类号：J045

文献标识码：A

文章编号：1003-0069（2015）04-0148-03

网页是一种采用图像性的方式来呈现的互联网用户操作界面，其中图标的设计对于建立网页的界面逻辑结构和视觉表现力起着非常重要的作用。正如Patrick McNeil所说“图标是非常小的可视控件，它们的唯一用途就是以最简单的方式传递大量的信息。”。浏览者从图标获取信息比从文字要快，语言不再是障碍，人们可以更自由地解读。把信息解构重组后再用图形图像表达出来的方式，越来越受到浏览者的欢迎

一 网页图标的基本功能

在网页的浏览过程中，浏览者很容易不知所措，不知道自己处在一个什么样的位置，或者已经浏览过哪些内容，又或如何进行下一步的操作。这时除了网站的主导航外，网页中各种图标的存在是最直观、最便捷的引导和传达信息给浏览者的方法之一。国标相对于语言和文字，存在比较明显的差异性和优势。浏览者在浏览网页时发现网页上的图标，他们会根据其形状和色彩进行相关的信息联想，于是图标便以图形、文字、色彩、语言多种形式存储起来。网页图标借助人们对视觉形象的识别、联想等思维能力来传达具有特定内涵的信息，并引导人们正确便捷地操作网页。网页图标的这种优势使不同年龄段以及不同文化水平的浏览者都易接受，也更便于浏览者记忆。所以网页图标的基本功能应是以图形化的方式构建视觉引导，起着对网页信息的强调和提示性作用，引导人们的行为操作和信息获取。

此外，网页图标图形化的设计不仅能以结构化的形式更好地让浏览者理解信息，而且还会给浏览者带来更加有趣的浏览体验。这种情感化的体验是更深度的内容加工和功能设定，能为网站的品牌认知起着积极有效的作用。

二 网页图标视觉引导设计方法

目前网页的展示平台已不仅仅局限于PC端，还可以在移动端，尤其是智能手机上进行操作，其视觉呈现和人机交互也变得更为复杂。但无论是PC端，还是移动端的网页浏览，实验均表明，用户不会花很多精力来浏览网页，而只是会扫描—下界面，来寻找能吸引其注意力的内容。要在这么短的时间内引导浏览者获取信息，网页图标必须建立有效的视觉引导设计方法。

弗洛伊德的精神分析法说，真正影响用户的显性人格并非是理性，而是在各个生理时期形成的潜意识因子。由此可见，网页图标如果可以与人们现实生活经历中的潜意识因子相呼应，那么当浏览者看到网页界面时，就可以在很短时间内被吸引，接受引导，捕获信息。在这个过程中最为重要的，就是如何使设计的网页图标与其所传达的信息在浏览者的认知中匹配度更高。

（一）隐喻引导

“图标的视觉符号需要与它指代的功能相关，这样可以令使用者产生联想，从而激发使用者的形象思维，提高图标的使用效率。”。但是设计师在为网页界面设计图标时会遇到很多人机操作的抽象概念，比如上传、下载、分享、收藏、评论、提交等，这些概念很难从现实生活中找到直接对应的物体形式，这就需要设计师运用隐喻。“从词源上看，‘隐喻’在希腊文中的意思是‘意义的转换’，即赋予一个词它本来不具有的含义；或者用一个词来暗示它本来表达不了的意义。”。隐喻是语言学修辞的一种手法，是在某类事物暗示下的一种对另一类事物的联想、认知和体验的心理行为、语言行为和文化行为。“隐喻设计是界面设计中的重要组成部分，它解决了通过图形界面传达抽象信息的难题，使界面设计化繁为简，把复杂的问题变得简单了。”。设计师借用人们所熟知的，生活化的，对于事物的知识（视觉、功能等）进行提炼，概括简化为网页图标的形状，让浏览者在网页场景中能够通过条件反射简单快速地对所获网页图标产生联想，对信息进行自然匹配，从而在网页场景中自然地做出反应。网页国标的隐喻引导选择的设计要素多是从功能出发，寻找与之可以在功能与操作信息上有关联性的事物进行隐喻设计，让各种设计要素以浏览者能理解并能帮助想象的方式沟通，让人们找到一种似曾相识的感觉。隐喻引导可以帮助浏览者更快地理解图标的含义，提高操作效率，避免误操作。此外网页图标的隐喻引导，应具有跨文化的认同。如一个向下箭头的网页图标就是基于人们对方向性的普遍认同，引导浏览者在网页情境操作中对下载功能的联想和认知。信息匹配度高的隐喻引导设计不仅可以提高网页图标的识别度，还可以由于其易学性和易操作性能给浏览者带来使用过程的愉悦感。

（二）分类引导

视觉流程是网页界面设计的重要内容，“网页界面的条理性、时效性、在很大程度上取决于其合理的视觉流程。视觉流程是视线随着页面各构成元素在空间沿着一定的轨迹运动的过程。当浏览者注视页面的时候，很自然地会按照各个诉求内容一步一步地阅读，这条无形的视觉空间流动线就称为视觉流程。”。在网页视觉流程的建立中，网页图标是重要的组成元素，它以图形化的视觉元素吸引用户选择和点击，从而起着对网页信息的强调和提示性作用。网页图标可充分利用其形状、色彩、大小及视觉元素的相似性或统一性进行分类引导，牵引浏览者的视觉和操作路径。如图1，当网页需要在有限的屏幕空间中引导浏览者点击查看更多信息时，通过用一个“+”所做的网页图标在形状、色彩上的统一性可快速地引起浏览者的关注，并通过联想在情景中获取相应的信息认知，引发选择和点击行为。

（三）方向性引导

在网页的浏览过程中很多时候会存在操作复杂和步骤较多的交互任务，浏览者如果没有清晰的视觉引导，会造成诸多操作失误。这种未知和不可控的情况总会令人不安，甚至导致心理挫败。相反，清晰的方向性可以提升浏览者操作的效率。因此为了增强浏览者的可控感，网页界面需要预先提供一些提示，让浏览者建立预期。网页图标可以通过带有方向性或数字类的图形进行视觉引导，建立明确的方向性，在陌生的网页浏览环境下为浏览者指引路线，如图2。同时还能告诉浏览者，要完成交互任务一共需要多少步骤，你所在的步骤是哪个，还有多少步骤可以完成。通过网页图标的方向性引导，可以让浏览者对网页的交互任务操作有个预期，并得到及时的交互反馈。

nlc202309041400

（四）动态元素引导

美国认知心理学家唐纳德·诺曼在其所著《情感化设计》这本书中就提出“产品具有好的功能是重要的；产品让人易学会用也是重要的；但更重要的是，这个产品要能让人感到愉悦。”。情感的愉悦在设计中有着重要的意义，所以“界面图标设计不只是只有功能的描述，还可以反映出设计者和用户之间的情感共鸣。”[6。在符合功能调性的情况下，适当地使用一些特征化娱乐化的动态视觉引导往往能给浏览者留下深刻的印象。动态元素的网页图标所带来的视觉关注和引导效果也会变得更加强烈。网页图标的动态设计多为形变，即对图标进行大小、形状、透明度、明暗、颜色的改变。在确定了动态设计的大体形态后，节奏速度以及执行的时间就是需要细抠的部分。网页图标的动态元素可采用具象形态进行一定程度的抽象、隐喻，用简单直观的形式提升浏览者的情感体验。但动态元素引导只是辅助表达的一种方式，更重要的还是引导浏览者聚焦网页信息，所以最好是能与某一交互操作的提示相结合。如图3，在为网店设计的电子领券图标上加入了一只在招手的卡通爪子，动态元素的引导生动而信息明确，点到为止又抓人眼球。

三 基于视觉引导的网页图标表现形式

网页图标具有美观性而又不失实用性的功能，但每一个网站因为其行业和信息类别的不同，网页图标的表现形式各不相同。而不同表现形式的网页图标在视觉引导设计上的优势也各有不同。

（一）拟物化网页图标

虽然隐喻性引导对于网页图标设计来说是一种非常有效的信息传递方式和情感表达方式，不过有时根据网页整体的设计风格定位，拟物化的网页图标也是很好的选择。拟物是一种在设计中融入真实环境的模拟设计，是最直接的借鉴现实世界的表现形式，能让用户第一眼就认出这个是代表什么东西，用途是什么。拟物化网页图标通过将现实生活中的对象引入到网页设计中，让用户能够根据已有的生活经验来操作网页，有效地实现图标与信息的自然匹配。拟物化网页图标主要从对象的形状、材质、颜色、环境光照等方面入手，在视觉设计方面表现得精巧而考究。拟物化网页图标不仅有较强的视觉震撼力及亲和力，还能减低浏览者的学习成本，有效引导浏览者正确操作。如图4中，逼真地放大镜让浏览者一眼就能判断在网页的这个位置可以进行信息检索。拟物化网页图标基本忠实于客观物象的自然形态，但是拟物化并不意味着要100%还原物理世界的真实质感，而是需要通过强调提炼、概括和简化，突出与夸张本体的本质特征。如果过于追求细节处理，就会给浏览者造成视觉和认知上的负累。基于拟物化网页图标所要展现的细节较多，设计元素较为复杂，它更适合在PC端显示的网页中使用。

（二）扁平化网页国标

扁平化网页图标指的是借助于抽象的点、线、面、体来构成象征性或者模拟性的图形，这样的抽象图形可以直观地表现图标所要象征的意义和所要表达的特殊含义。扁平化网页图标在很大程度上是出于强化对网页信息的传递，弱化网页界面中无效元素的干扰，让浏览者的目光快速聚焦到所需信息上。如图5，右侧的几个单线条抽象图标的设计，可以在最小的屏幕空间中引导浏览者关注相关信息，如购物车、个人资产、关注品牌、收藏产品等。此外，在简化图标造型之后，扁平化网页图标的颜色也成了一大表现要素。通过色彩的相似、对比引导浏览者识别网页信息，并带给浏览者活泼、愉悦、生动的感觉。扁平化网页图标最大的优势就是给网页的内容展示提供了更大的空间，同时由于其占用的屏幕空间少，也为浏览者的交互使用提供了更为简单的操作步骤，浏览者可以在所在的任何页面通过相关图标进行一些网站的快捷操作。扁平化网页图标可以在一定程度上减弱尺寸变化对像素精度的影响，它能够快速地适应各种设备的屏幕，非常适合在跨平台的响应式网页设计中使用。

（三）文字类网页国标

文字类网页图标是采用有特殊含义的文字或者字母和图形组合成一个整体来引导浏览者关注信息。文字具有强烈的视觉记忆性。文字类网页图标通常采用简洁的图文表现形式，配以色彩的差异化使用以达到视觉引导的功能。如图6，天猫网站中的文字类网页图标，采用在电子商务网站中具有特定意义的汉字将其做成类似中国印章的图形表现，令浏览者一目了然，记忆深刻，在全站中任何位置再见到这样的图标，即使没有旁边的文字说明，也会对其功能非常明确。

（四）数字类网页图标

数字类网页图标可分为阿拉伯数字和汉字数字网页图标。相对于汉字和拉丁字母，数字所表达的功能更加纯粹和单一，多运用在计数和排序时给浏览者视觉流程的引导。但在一些情况下，数字类网页图标会根据网站中的一些特定功能来呈现特定的信息。如图7，天猫网站中的数字类网页图标，简单的数字在网站中成为一种约定性记号，配以醒目的色彩使其中的信息更加清晰、醒目。四结语

网页图标具有文字所不能代替的优势，它用图形化的表现形式将复杂的网页功能描述成易懂的信息内容，这种方式越来越受到浏览者的欢迎。网页图标的设计绝不仅仅是对艺术美感的体现，更重要的是承担起视觉引导的作用。在网页国标设计中合理地利用视觉引导将会减轻浏览者的认知难度，让浏览者在轻松愉悦的状态下完成网页浏览和交互的过程。

网页设计发展趋势浅析 篇12

1 Cinemagraph图(静止图片中神奇的细小运动技术)

Cinemagraph图的魅力在于“more than a photo, but not quite a video”简单来说,就是将静止照片与动态的视频结合起来,介于图片与视频的一个创新,把图片中需要突出的部分动起来, 更加生动。相比于一张静止的图片,我们想传达出更多的信息,突出其中的要素,但是视频往往太多拖沓,不容易凸显其中的特点,所以Cinemagraph就很好解决了这个问题。

2响应式网页设计

我们需要清除的了解到,当今社会智能手机已经占据了广阔的市场,成为浏览网页最多的设备,所以我们必须更加的注意网页的整体设计,以便于它可以适用于各式各样型号的手机,平板电脑,笔记本电脑。

我们可以参照谷歌的设计语言方式Material Design。这种设计可以为手机、平板电脑、笔记本电脑,台式机等提供更为类似、更加宽广的感觉和外观。运用这一种方法,用户可以轻松找到你的网站,并且使用任何的设备,这样大大拓宽了我们的市场。

3设计大方简洁

如今,越来越多网页功能繁多复杂,一些用户往往都不能很好使用这些功能,花哨的设计反而起到了反作用,成堆的图片和动画使人产生审美疲劳。越来越多的网站设计者更加重视设计的简洁,功能的明确,在当今这个错综复杂的社会,简单大方的设计创意往往能够受到人们的青睐。

4更多手势,更少的按钮

如果减少了按钮的数量,用户就会自觉的使用手势来进行网页的浏览。网站手势的设计会成为未来设计师们设计的主要趋势。往往一点的动作指标就能很轻松的引导客户如何进行下一步的操作。类似的例子比如手机的锁屏,人们可以通过滑动屏幕来开启手机,那么我们是不是也可以在网站上面运用更多的手势来吸引用户,使用户觉得浏览网页更加的有趣呢。

5网站更宽,字体更大

现在的手机电脑的屏幕越来越大,分辨率越来越高,网站的设计制作也应该随着趋势逐渐向宽屏的方面发展,适应当今的趋势。过去12到14像素的字体是网页设计的规范的尺寸标准。但是现在越来越多的网站设计者运用16到18像素的字体。顺应着宽屏大屏,18像素的字体在用户浏览时往往呈现出更好的效果。

6网页长度

人们在长页面与短页面上始终没有一个统一的看法。长页面在用户浏览网页时,由于页面的长度能够使用户更长时间的停留在网站上。但是从上往下一直拉使用户产生厌烦感,使用户找到关键信息更加的困难。短页面虽然能很轻松地找到内容,但是网页看上去就显得过于单薄和简单,今后的趋势会在长页面的基础上,增加很多配套的导航指示栏,这样在吸引客户的同时,用能解决用户不能准确找到信息的缺点。

7在网页中加入APP元素

随着科技的发展,app软件越来越多地被运用在生活中,那么网页的设计就应该顺应时代,借鉴APP中的内容,使网页变得更加稳定,效率更加高,更多的客制化,提升用户的体验感受。随着网络空间信息逐渐增多趋向于饱和,网页的设计人员也在其浏览的个性方面下文章,运用了很多APP中的小技巧, 使用户在浏览信息时,能更加精准地找到他们所需要的信息。

作为一个设计者,运用APP元素,借鉴APP设计的概念,排除网页中一些非必要的信息,使用户更快地找到你的网页,并能很好地进行交互。

8尽可能只用自制图片

现在的网页制作着往往都是运用图库来修饰自己的设计的网页,这是一种极为简单和无聊的方式。我们可以看到,很多网页上面的图片都会出现重复的情况。那么我们要使自己的网页有亮点,就需要我们选择或者制作真正高素质的图片, 来吸引用户的眼球。尽管有许许多多的图片供我们选择,但是越来越多的设计者开始选择自己拍摄图片,并且对这些图片进行处理,甚至有些设计者会使用手绘,彩绘,油画、水墨等多方面对图片设计。

总之顺应时代的趋势,我们应该更多的有自己新颖,独创的东西,而不是照搬图库,对图片进行简单粗糙的加工。

9人性化设计

这个如果说是一种趋势,那不如定义成一种理念。设计者往往过分关注细节的重要而忽视网站制作的整体性。人们都重视喜欢好的设计,随着用户对硬件设备理解的深入,对网站的要求也越来越高。网页的设计对设计师们提出了更高的要求。在注重技术与细节的同时,设计的体验感也会对用户产生重要的影响。如果能够很好地使人们日常的交互方法进行改变,用户的思想状态就能被我们所影响,使他们更加的赞同我们设计出来的网页,就能够吸引更多的用户。

如果不能从这一点上进行突破,那么不管我们设计得如何简洁,如果美丽也毫无意义意义,这往往是现在的设计师所忽略的一个问题。

参考文献

[1]胡江汇.宋兴.下一代Web标准之CSS3核心技术研究[J].黑龙江科技信息,2012(14).

[2]李德龙,王静.网页艺术设计的原则[J].民营科技,2009(6).