微软网页三剑客之Graphic Designer探密

 更新时间:2016年9月20日 19:04  点击:1459

  自Adobe合并Macromedia后,就不断传来微软开发图形图像和动画软件的消息。不过信息少的可怜,特别是号称Flash杀手的“Sparkle”,除了一条简短的新闻就没别的了。所谓厚积薄发,没想到微软这次一出手就是三款设计软件,看来是要和Adobe动真格的了。

  这个设计软件套装名为Microsoft Expression,包括三部分:

  开发代号为“Acrylic ”的图形图像处理软件Graphic Designer,相当于Fireworks。
  开发代号为“Sparkle”的交互动画软件Interactive Designer,相当于Flash。
  开发代号为“Quartz”的网页设计软件Web Designer,相当于Dreamweaver。

 

图0

    这次我们要说的是之前被称为“Acrylic ”的图形图像处理软件,全称为Microsoft Expression Graphic Designer。来看看他和同类软件,如Photoshop、Fireworks有哪些“亲缘关系”以及高明之处。因为还没拿到测试版,我们先从微软的宣传片中了解一下,这里只作为一个功能展示。

图1

    实时效果-- 我们可以看到,它把最常用的属性和效果组合在了一起,被叫做Live Effects。类似其它软件的图层效果、滤镜、调整之类的功能,命令也基本雷同。我想这些基本功能,对一个图形图像软件来说,是必不可少的。

<

  网页设计是一们新兴的设计类和网络的交叉学科,近几年随着网络的发展而逐渐收到人们的重视,它本身以网络为载体,把各种信息以最快捷、方便的方式传达给受众。在这种标准的要求下,逐步产生了审美的需求。人们对美的追求是不断深入的,网页设计同样如此。网页不光是把各种东西放上去,能看就行,这是远远不够的!要考虑如何受众能更多的和更有效率的接收网页上的信息,从而使他们对给网站留下很好的印象,那就更能促进自己网站的运作。这就需要从审美的方面入手,结合使用方便的要求,就能制作出清晰、整体性好的页面。使人浏览起来心情愉快,接收信息也会更加容易。同时提升网站的形象。运用一些平面设计中美的基本形式到网页中去就能是网页更加富有美感,例如将平面设计中的节奏与韵律和骨格的形式溶入到网页中,这样会使内容繁多的页面更加有条理,也会是人浏览起来主次分明。当然这种美首先建立在页面的内容充实,而且实用,一个内容空洞无物的网页既使做得再漂亮也不会吸引人,顶多赢得几声赞叹,没有任何的用处。没有实用性的东西是不会具有生命力的。要想将页面做的更漂亮,就要求设计师要用较好的审美方面的素质,同时要有丰富的平面设计的经验。这样才能在设计时驾轻就熟。

  由于网页的从无到有,从满足基本的功能需要到追求美的较为高层次的需要,这是一个循序渐进的过程。这使人不由得想起工业革命前夕,很多现代的产品那时候都没有,没有现成的模样可以参照,产品的设计都是满足基本的功能需要出发,所以做出来的产品非常粗糙,冷冰冰的,毫无生气。由于商业竞争和工业化大生产的结果,使得人们不断的改进产品的功能,更为重要的是改进产品的外观,是产品更符合美的需要和使用方便。从而使今天货架上出现了琳琅满目的漂亮的产品。我想网页同样也是如此,在满足了基本的功能的要求之后,为了突出自己的特色,突出自己的优势,必须从审美上入手。而目前很多国内网站的现状是什么样子的呢?经常上网的网友可能会有所体会。目前的网页存在着诸多的不足,以下简单的分析一下,希望能从中得到一些启示。

  第一个可以用一个字来形容,那就是“塞”。这是很多的网页都具有的特点,它将各种信息诸如文字、图片、动画等不加考虑的塞到页面上,有多少挤多少,不加以规范化,条理化,更谈不上艺术处理了。导致浏览时会遇到很多的不方便,主要就是页面五花八门,不分主次,没有很好的归类,整体一个大的杂烩。让人难以找到自己需要的信息,更谈不上效率了。这种网页没有考虑采用一种美的形式来使页面上的信息以更整体性的方式来体现。所以这种网页的设计含量是相当低的。不仅仅从功能上分析。从审美上看,这种页面太满、太堵,没有给读者一点空间,所以毫无美感可言。

  第二也可用一个字“花”来形容,这类网站也有不少,显然这是很多不懂设计的人来制作的。比较多是他们把页面做的很花哨,但是非常不实用,例如采用很深的带有花哨图案的图片作为背景,严重干扰了浏览,获取信息很困难。同时有些还采用了颜色各异,风格不同的图片、文字、动画。使页面五彩缤纷。没有整体感觉,尽管有些页面内容不多,但是浏览起来仍然特别困难。这种过度的包装甚至不如不加任何装饰的页面。不加装饰最起码不会损害其基本的功能的需求。所以这种网页属于粗制滥造的次品,是对自己的受众不负责任的表现。或许他们的初衷是好的,就是想把自己的页面做的漂亮,结果却是适得其反。是网页设计中的一大忌。

  第三个现在网页设计中的误区就是千篇一律,缺乏自己的特色,当我们打开电脑,上网一看,好像哪个网站都是一样的。从标题的放置,按钮的编排到动画的采用都是如此。用色时随心所欲,只要能区分开文本和背景就达到目的。造成这种原因就是网页设计师本身的原因,他们没有充分的利用自己的知识,分析自己网站的优势,发挥自己的网站的特点,而是采用的走捷径的方式,就是用大众化的方法去做,做起来当然很容易了,但是失去了自己特点的网页就像流水线上下来的产品,好像随便看哪一个都一样,这样就不能起到网页设计的目的。至少不能算设计。这也是对自己的用户不负责任的表现。当然这里不是片面的唯美主义,不能只是看中页面的漂亮而不顾受众的使用的不方便。例如有些网页将按钮溶入到页面的图片中去,倒是比较漂亮了,整体感强了。但是受众有时候却找不到按钮,造成困难。这同样是不可取的。

  还有一类站点的网页是一种纯技术化的网页,在这种网页上,充斥了许多的纯为了炫耀技术的东西,如多个风格迥异的动画(缺乏美感甚至是与主体无关的动画),还有大量的利用Javascript和动态HTML的技术,然而始终没有把握住整体这个中心,造成页面的混乱。这与第一种有些类似,但是这种网页很多是技术上的高手。但是结果给人只有羡慕技术之外毫无收获。这样的网页也是不适合于需要的,是网页设计上的失败,更为严重的是大量的采用这种技术或者动画,造成浏览上由于受带宽的限制而非常的慢。所以不管是从功能上还是从形式上都是不可取的。

  综合以上的分析,可以找出很多目前网页设计上设计的不足,特别是审美上的不足,照顾网页功能上的需要的前提下,需要有针对性的采用一些美的形式。来使网页做得更加有生气,更吸引人。

  那么加入美的因素,也要遵循一定的形式美的法则。这种美的形式有很多种,合理的利用,可以给网页增光添彩。赏心悦目。是受众浏览起来更加有效率,有力的提升网站的形象。下面逐一分析这些美的形式,并考虑如何将它们融入到网页之中,以解决以上遇到的很多网页设计上的审美不足的问题。

  相信大多数人的机器上都装有一种或多种文字、网页编辑软件,如:功能强大的高级软件Dreamweaver MX、Word XP,系统自带比较低级的软件NotePad、WordPad。而且这些软件之间存在着高级软件兼容低级软件对文字的修饰,亦即:低级软件能过滤掉高级软件对文字的修饰。

  比如:我们在Word XP中给一段文字加上颜色、超链接,然后把这段文字“剪切-复制”到NotePad中,然后再将它“剪切-复制”到Word XP中,这时一定可以看到,先前对这段文字的修饰(颜色、超链节)已经丢失了,我们把这种现象定义为低级软件对被高级软件修饰的文字的过滤。

  那么这一过滤功能有什么用途呢?本来想用这一过滤功能滤去高级软件修饰文字的标签代码,但是觉得比较麻烦,所以就删去这种方法。相信过滤功能一定有很多用途,希望大家能对此展开讨论。回到主题,加密网页能用Dreamweaver MX做,那么被加密的网页当然也能用它来编辑了!在IE中我们无法复制那些文字,是因为内嵌的程序代码在运行。那么,问题的焦点就在:程序代码被激活了!呵呵,这就好办了。我们用Dreamweaver MX打开保存在硬盘上的加密页面,让整个页面处于编辑状态,这样程序代码就不会被激活,这时我们大可以“为所欲为”了。 

  注:用Dreamweaver MX让被加密的页面处于编辑状态,然后复制其中的文字,在Windows XP+Dreamweaver MX中已经通过!



  对于做网页的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景,但是,浏览一下大型的商业网站,你会发现他们更多运用的是白色、蓝色、黄色等,使得网页显得典雅,大方和温馨。更重要的是,这样可以大大加快浏览者打开网页的速度。
  
  一般来说,网页的背景色应该柔和一些、素一些、淡一些,再配上深色的文字,使人看起来自然、舒畅。而为了追求醒目的视觉效果,可以为标题使用较深的颜色。下面是我做网页和浏览别人的网页时,对网页背景色和文字色彩搭配积累的经验,这些颜色可以做正文的底色,也可以做标题的底色,再搭配不同的字体,一定会有不错的效果,希望对大家在制作网页时有用。
  
  BgcolorΚ″#F1FAFA″———做正文的背景色好,淡雅
  
  BgcolorΚ″#E8FFE8″———做标题的背景色较好,与上面的颜色搭配很协调
  
  BgcolorΚ″#E8E8FF″———做正文的背景色较好,文字颜色配黑色
  
  BgcolorΚ″#8080C0″———上配黄色白色文字较好
  
  BgcolorΚ″#E8D098″———上配浅蓝色或蓝色文字较好
  
  BgcolorΚ″#EFEFDA″———上配浅蓝色或红色文字较好
  
  BgcolorΚ″#F2F1D7″———配黑色文字素雅,如果是红色则显得醒目
  
  BgcolorΚ″#336699″———配白色文字好看些
  
  BgcolorΚ″#6699CC″———配白色文字好看些,可以做标题
  
  BgcolorΚ″#66CCCC″———配白色文字好看些,可以做标题
  
  BgcolorΚ″#B45B3E″———配白色文字好看些,可以做标题
  
  BgcolorΚ″#479AC7″———配白色文字好看些,可以做标题
  
  BgcolorΚ″#00B271″———配白色文字好看些,可以做标题
  
  BgcolorΚ″#FBFBEA″———配黑色文字比较好看,一般作为正文
  
  BgcolorΚ″#D5F3F4″———配黑色文字比较好看,一般作为正文
  
  BgcolorΚ″#D7FFF0″———配黑色文字比较好看,一般作为正文
  
  BgcolorΚ″#F0DAD2″———配黑色文字比较好看,一般作为正文
  
  BgcolorΚ″#DDF3FF″———配黑色文字比较好看,一般作为正文
  
  浅绿色底配黑色文字,或白色底配蓝色文字都很醒目,但前者突出背景,后者突出文字。红色底配白色文字,比较深的底色配黄色文字显得非常有效果。
  
  此文只是起一个“抛砖引玉”的作用,大家可以发挥想象力,搭配出更有新意、更醒目的颜色,使网页更具有吸引力。


  首先我们打开Ougishi这个软件1),然后可以用鼠标在屏幕上写上自己的名字2)。


图1


图2

SyntaxHighlighter.highlight();

[!--infotagslink--]

相关文章

  • ant design中upload组件上传大文件,显示进度条进度的实例

    这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
  • 解决ant Design中this.props.form.validateFields未执行的问题

    这篇文章主要介绍了解决ant Design中this.props.form.validateFields未执行的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-28
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • 基于Bootstrap实现Material Design风格表单插件 附源码下载

    Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载,感兴趣的朋友参考下...2016-04-19
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程,抓取HTML,获取标题、描述、图片等信息,并去除HTML,希望对大家有所帮助。...2020-06-25
  • 分析网页的几种加密技术

      现在专业性的网站越来越多,许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事,所以大家都想保护自己独创的...2016-09-20
  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
  • 网页页面控制注意事项

    1、检查标题。2、检查版权信息,尤其是电话号码。3、图片、文件定位问题。4、产品页面首页指向产品类别问题。5、文章页面首页指向文章类别问题。6、产品图片大小...2016-09-20
  • 如何在网页中制作虚线表格

      在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题。  方法一:作一个1X2的图。   半黑半白,再利用表格作成线。这种方法虽然麻烦...2016-09-20
  • ASP.NET使用HttpWebRequest读取远程网页源代码

    本文分享了一个使用HttpWebRequest读取远程网页的案例,供大家参考学习。...2021-09-22
  • Illustrator设计细腻的网页纹理背景制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们带来的详细的设计细腻的网页纹理背景的制作教程,各位想知道具体制作步骤的,那么下面就快来跟着小编一起看看教...2016-09-14
  • 忠告:网页设计必须注意的29个问题

    当你在INTERNET这个信息的海洋中尽情遨游时,会发现许许多多内容丰富、创意新颖、设计独特的个人网页,不知道你见到这样漂亮可人的网页是否有点心动。一旦你具备了...2016-09-20
  • python 自动刷新网页的两种方法

    这篇文章主要介绍了python 自动刷新网页的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-20
  • 在网页上显示你Google Talk的在线状态

      一个英国人在自己的网站Jon Burrows上推出了一项服务:显示 Google Talk 的在线状态!   下面是先锋 JasonIT 的显示:   大家可以看见,显示有“GTAlk On-Lin...2016-09-20
  • C#网页跳转方法总结

    这篇文章主要介绍了C#网页跳转方法总结的相关资料,需要的朋友可以参考下...2020-06-25