数字媒体之数字媒体艺术与信息化设计

数字媒体艺术与信息化设计基本要求：

理解数字出版的意义；理解因特网的发展趋势和网络艺术的不同形式；理解跨界整合与设计；理解信息采集、整理和设计的重要意义。教学重点及难点：

理解因特网的发展趋势和网络艺术的不同形式；理解跨界整合与设计。基本内容：

电子出版、网络媒体和产品设计；科学可视化和信息设计；建筑、数字服装设计和信息设计；数字影视和三维动画。电子书的定义与特点定义：电子书是指将文字、图片、声音、影像等讯息内容数字化的出版物以及植入或下载数字化文字、图片、声音、影像等讯息内容的集存储介质和显示终端于一体的手持阅读器，代表人们所阅读的数字化出版物，从而区别于以纸张为载体的传统出版物，通过数码方式记录在以光、电、磁为介质的设备中，借助于特定的设备来读取、复制、传输。”第一节电子图书特点：方便性，可搜寻内容，改变字体大小及字型，还可随身携带。容量大，随时可网络下载，不受地域限制，传播速度快。无论增加多少本电子书都是一样的重量，比过往纸质书重量上有优势。降低图书成本，价格便宜。节省保存书本所需空间。可保存时间比纸质书长久。设计精美，灵活多样，有多媒体功能。节省纸张，减轻地球负担，零树木砍伐量，真正的环保低碳。

2025/1/22数字媒体艺术概论4不足：阅读体验不一样显示器容易造成视觉疲劳软件类型多、不兼容出版内容还不丰富网上支付手段不够完善2025/1/22数字媒体艺术概论5电子书的常见格式EXE：可直接打开TXT：笔记本文件HTML：网页格式HLP：帮助文件格式，直接打开或F1CHM：帮助文件格式，支持视音频LIT：微软文件，需MicrosoftReader阅读PDF：Adobe公司开发的电子读物文件格式WDL：华康公司的文件格式，Dynadoc打开CEB：北大方正公司电子书格式PDG：超星公司电子书格式，SuperstarReader打开EPUB：可重排电子书格式UMD：诺基亚手机系统支持的电子书格式JAR：与ZIP类似电子书发展大事记第一代电子书——1998年美国NuvoMedia公司出品的“火箭书”（RocketE-book）可以作为第一代电子书诞生的标志。在国内，2000年8月，辽宁出版集团宣布开发“掌上书房”；同年，天津津科公司推出“翰林电子书”。同期，人民出版社创办的人民时空网站提出了研发“电子书包”的构想第二代电子书——2004年，SONY公司推出基于电子墨水（E-ink）技术的电子书阅读器；2008年，亚马逊Kindle上市，2009年，汉王推出电纸书第三代电子书——2010年1月，苹果发布iPad，电子书成为其应用之一；目前，电子书阅读器、平板电脑和智能手机在电子书阅读业务上形成交集，在获得主流终端地位上形成竞争2025/1/22数字媒体艺术概论11未来的发展真正的“电子书”：未来的电子书的外形将与现在的纸质书籍相差无二，加上“双面显示，多屏重叠阅读”的技术，纸质书籍将逐渐退出历史舞台。电子教科书：孩子们不再背负沉重的书包上学，兜里揣上这个小巧的电子教科书即可2025/1/22数字媒体艺术概论12网络艺术的起源

随着WWW的出现，网络艺术也随之出现了1.最早的艺术尝试

1993年建立的‘万维艺术网站’2.最早的网络多媒体世界上第一个协作文本3.独特的艺术体验方式2025/1/22数字媒体艺术概论13第二节网络媒体与交互设计网络艺术的特性技术依赖性传播时空的广泛性传播方式的开放性艺术种类的综合性实时交互性观赏的私密性语言的独特性2025/1/22数字媒体艺术概论14网络原生艺术网页设计超文本小说网络动画网络超媒体网络游戏2025/1/22数字媒体艺术概论15近年来，针对交互媒体中人机交互行为和设计方法的研究逐渐进入到我们的视线里，即“交互设计”。“交互设计”指的是涉及支持人们日常工作与生活的交互式数字产品设计。2025/1/22数字媒体艺术概论16目录先介绍一个人……8年前，Numal高中毕业，朋友告诉他注册一个电子邮箱就可以方便的给人写信，让他也去弄一个。于是他就去上网了。他看到注册页面时，脑袋完全不清楚面前是什么东西。他有了一串疑问：电子邮箱是什么东西？新用户是什么？邮箱名是什么？……他发现自己很笨，什么都不懂，非常的懊恼。两年前，Numal推荐一个不常上网的人去使用自己设计的网站：豆瓣他朋友说发现豆瓣的注册很简洁。他朋友说很清楚自己要做什么事情他朋友说很放心他朋友说没有出错他朋友说很快完成了注册整个过程他朋友很愉快，很有安全感是什么让网站体验几年间变得这么好？是什么让Numal的朋友如此愉悦有安全感？Numal大学上的是设计专业。在大学最后两年，他的方向转向了交互设计。通过学习，他了解了很多交互设计的基本概念。交互设计定义（一）简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。不像传统的设计学科主要关注形式，最近则是关注内容和内涵，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式。艾兰.库珀(alancooper)VB之父交互设计之父微软视窗先锋奖软件梦幻奖得主库伯交互设计公司创始人交互设计定义（二）设计支持人们日常工作与生活的交互式产品。具体地说，交互设计就是关于创建新的用户体验的问题，其目的是增强和扩充人们工作、通信及交互的方式。Winnogard（1997）把交互设计描述为“人类交流和交互空间的设计”HelenSharp从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。DeDreamNumal在学习时，接触到了几个很容易混淆的概念。后来经过辨析，他这样理解了……几个概念交互设计设计行为，偏向于计算机的人机交互人与机器相互信息交换交互一种行为几个概念可用性标准用户体验目标UCD原则方法交互的广义发展历程旧石器时代简单的单一的机器大工业时代复杂的繁琐的出错率高的危险的信息时代效率易用性交互设计行业的发展学科人类工程学心理学认知科学信息学工程学计算机科学软件工程社会学人类学语言学美学……设计图形设计产品设计商业美术电影产业服务业……交互设计人机交互（HCI）交互设计的范畴交互的三个要素可是，Numal发现在人机工程的介绍中，三要素是另外的三个……交互三个要素交互过程是一个输入和输出的过程，人通过人机界面向计算机输入指令，计算机经过处理后把输出结果呈现给用户。人和计算机之间的输入和输出的形式是多种多样的，因此交互的形式也是多样化的。基础的交互方式平衡5E法有效(Effective)效率(Efficient)易学(EasyToLearn)吸引人(Engaging)容错性(ErrorTolrant)Numal了解过了交互设计的相关知识后，想在工作中实践一下，可是怎么下手呢？接下来他开始研究交互设计的方法……UCD设计理想流程简单说明：1.创造一些用户2.找出重要的活动3.找出用户模型--用户期望如何完成这些活动4.草拟出初版的设计5.一直反复把设计修改得更容易,直到虚构用户能轻易使用为止6.找真人来看着他们试用你的软件交互设计所做的事情交互设计的核心要素精确描述我们的用户以及用户希望达到的目标，定义几个典型角色，并用故事的形式表达出来目标用户目标生活目标体验目标最终目标产品目标利润市场目标是行动的驱动力，产品的功能和行为必须通过任务来解决目标产品成功的关键是目标，而不是特性成功的交互设计师应该对目标高度敏感Numal在思考，那么豆瓣的目标是什么呢？目标用户目标生活目标：一种新的消遣方式体验目标：容易使用、方便、舒适最终目标：撰写浏览书评，找到自己兴趣相同的人产品目标市场：聚集文化人群，创建文化交流社区角色简单的说，角色就是为我们的产品虚拟的一个典型用户。我们在设计是，就可以专门为“他”设计。角色是一种强有力的交互设计工具角色的确定给设计带来的好处：该做什么便于沟通提高效率解决边缘设计……角色一般不超过两个人一男一女一般将用户定义为初级用户和中级用户。特殊产品才定义高级用户。角色描述中应该包含：一张相片人物基本特征于产品相关的性格、能力、爱好等介绍会用到的产品、功能介绍Numal感觉角色设计很有兴趣，于是就针对自己负责的产品，制定了一个角色一个定义角色的例子Numal做完角色设计后，整个项目组都很认可。Numal还发现有了角色之后项目组成员间的讨论变得简单和高效了。一段经典对话脚本人和他们的活动组成的故事使用具体的故事来构造模拟用户的可能行为或者讲述设计方案关注人物角色以及其心智模型，目标和活动，有可能包括对环境的考虑基于任务的脚本基于场景的脚本一个场景脚本的例子1.早上，小翠来到办公室，拿起电话给朋友打了个电话，然后打开电脑，打开邮箱，开始一天的工作2.在开始工作之前，她上了一下豆瓣，看看是否有朋友给他留言或者回复了她的评论。3.小翠收到一封邮件，来此办公室主任的，告知同事strong今天请假可能来不了，如果有事情帮忙处理一下。4.如往常一样，把邮件中的一些事情处理一下，需要打印的就打印，需要盖章的就盖章。5.在工作过程中，她总是开着QQ，经常有朋友给他发个链接让她看。当她正在阅读一封刚收到的邮件时，一个好友给她发来了豆瓣的一个网址，她便会放下手头的工作开始浏览网页。......一个场景脚本的例子该脚本提纲试图解决的问题：1.产品使用时的设置是什么？2.是否会被使用。角色最终期望的结果很长时间？3.人物角色是否经常被打断？4.和它一起使用的其他产品是什么？5.人物的技巧使用频繁程度有多高？6.为了满足人物角色的目标，角色需要完成哪些主要活动是什么？交互设计时需关注的可用性指标

ISO9241/11中的定义是：可用性是一个多因素概念，涉及到容易学习、容易使用、系统的有效性、用户满意，以及把这些因素与实际使用环境联系在一起针对特定目标的评价。常用交互设计原则可视性功能可性越好，越方便用户发现和了解使用方法反馈返回与活动相关的信息，以便用户能够继续下一步操作限制在特定时刻显示用户操作，以防误操作映射准确表达控制及其效果之间的关系一致性保证同一系统的同一功能的表现及操作一致启发性充分准确的操作提示交互设计准则设计方案属性：伦理的（能体谅人，有帮助）不伤害改善人的状况有意图的，能帮助用户实现他们的目标和渴望注重实效，帮助委托的组织实现它们的目标优雅的最简单的完整方案拥有内部的一致性合适的容纳和情感Numal做完整个项目后，团队对其专业性和技能都很满意，于是让他传授一下自己的经验。常用的交互设计工具illustratorFireworksWordPhotoshop交互设计师需具备的项目意识基于交互设计的网络媒体——网站的设计及分类1/22/202564一、

新闻、搜索二、

女性、男性、儿童、时尚、生活、体育三、IT、政府、财经、医疗、旅游、短信四、

娱乐、游戏、节庆、通知五、

企业、电子商务 六、

文学、教育、艺术七、

电子邮局、社区、论坛、留言、电子报八、

个人主页九、

门户站点

网站的分类及解析1.新闻类站点

新闻网页设计和报纸排版的感觉很类似。新闻类站点受传统媒体的影响，当页面排版感觉类似报纸时，便会让绝大部分浏览者感到亲切，很容易习惯和接受。新浪、163等的页面几乎没有空隙地排满了信息，如图1所示。一

新闻、搜索图1新浪新闻和pcweek网络报纸2.搜索页面门户类、搜索引擎类站点对搜索的页面有较高的要求，应尽量采用开放式的框架结构，色彩没有太多要求。不过要注意搜索框等CSS设置，以小的环节达到美化页面的效果，同时确立页面风格。值得一提的是简单的Google网站(见图2)，该站点的精彩之处是它的标志。根据不同节庆、事件，Google拥有多套标志更换，如图3所示。图2Google搜索图3Google的Logo1.女性、男性站点

女性站点在网络上占很重要的地位。女性网民几乎达到上网人数的45％左右。女性站点的内容包括了内容较多，从美容、化装、时尚、服装、健美、医疗、饮食、旅游到儿童、文学、教育、生活等等。女性关注的事物不仅仅跟女性有关，和生活也密切相关，这类站点信息面可以铺得很大，网站可以做得很大。二、女性、男性、儿童、时尚、生活、体育

针对女性站点，设计可柔美、高雅、时尚感强，采用曲线的框架结构，插图的选取宜唯美、俏皮，色彩可以以纯度低的色相系为主，或高雅的流行色为主等。摆放一些可爱的页面小饰物，女孩子们会很喜欢。为了尽可能地出“新”出“奇”，风格设计可以走时尚路线。注意流行色的搭配，框架大胆一些。例如，做得就非常好(见图4)。图42.儿童类、卡通类站点

儿童类站点以色彩鲜亮、活泼为主(见图5)，网页可以采用无骨架的设计，这样更自由一些。卡通类站点的颜色则没有限制，根据内容框架也可以理智一些或感性一些。网站均可以选择全Flash来制作，这样更显特色。图5迪斯尼英文网站3.时尚类、生活类站点时尚类站点最主要的是要表现时尚感，而生活类站点要体现生活气息。色彩上，时尚类站点要注意流行色彩，如灰、黑、棕、米色等；生活类站点则要温和一些，选用一些淡雅的颜色，如蓝、紫、米色等。插图的选用：时尚类站点选择时尚类的图片，以及有速度感和张力感的插图；生活类站点要选择一些和生活相关、贴近生活的图片。这两类站点都需要注意细节的地方，运用细节调节页面氛围，渲染页面气息，如图6、图7所示。图6esprit图7vidalsassoon4.体育新闻类、运动产品类站点体育新闻类站点和纯新闻类站点有相同之处。国内外各类体育比赛报道、体育明星新闻以及赛场风云等每日信息量也很大。与纯新闻类站点不同的是，体育类站点更突出时代感、运动精神以及紧迫感。竞技精神一定要在标志、页面中强烈突出。

运动产品类的网站页面设计要有时尚感，因为体育运动也是当今很时尚的活动。页面设计要轻松有张力，色彩应多元化，插图可以随意一些，这些应根据产品的消费倾向去选取。框架设计可根据信息要求确定。页面的张力感可以用运动产品的摄影图片来巧妙地实现。读者也可以借鉴著名品牌、adidas的网站设计(见图8和图9)。图8图9adidas1.IT资讯类站点

数码感、时代感、互动感是IT给人们的感觉。IT咨询类站点在职能上类似于新闻类站点，但是注意气氛不要太拥挤。色彩可以选择清爽的蓝色、绿色，灰色，黄色等，如图10所示。三IT、政府、财经、医疗、旅游、短信图102.政府站点

政府类网站讲究庄重的气氛和地区的特色，应根据具体政府网特色选择适当的颜色，不能一概而论。框架设计上应尽可能地选择三栏式结构，这种开放式的结构显得大气，很适合政府类网，如图11所示。图11滨海政府网的第二、三版首页3.财经站点

财经网站页面气氛应属于较紧张的感觉，选择以暖色为主的配色，会有助于缓解紧张和压力。框架设计应根据信息空间的大小而定，大站则可以选择分栏式结构，小一些的站可以选择区域排版，如图12所示。图12大鹏证券4.医疗站点

绿色、蓝色等素雅的颜色很适合医疗类的网站，而大红大黄给人的感觉过于兴奋，不适宜在医疗类的站点上使用。医疗健康网站的插图应选择较为舒适的图片，不要制造紧张感，如果有动画，节拍要放慢。5.旅游站点

一想到旅游，很容易让人联想到天空、大地、海洋等，绿色、黄色、蓝色都很适合旅游类站点。旅游类站点的插图很容易选择，名胜古迹、风土人情等各种图片拿到页面上都会给人带来憧憬。页面设计要轻松，条理清晰，不要给人嘈杂的感觉。6.短信站点韩国的短信类网站设计都相当出色(见图13)，我们可以借鉴一下，多利用像素风格或是金属感觉，动态图片多一些，色彩随意，S的粉红色就很成功。图13韩国的短信站点1.娱乐类、游戏类站点

娱乐类站点浏览者的视线通常被那些明星的各类新闻所吸引，这类站点最突出的不是时尚感，而是娱乐圈的纷乱的味道，以及音乐的感觉和电影的感觉，还有就是互动感。这类感觉很容易达到，插图选用明星照片、电影海报、CDCover，自然就可以达到想要的感觉。四

娱乐、游戏、节庆、通知

色彩选择艳丽一些的即可。娱乐网站图片较多，图片设计和字体排版设计显得尤为重要，把握不准时可以参考一下港台设计的一些娱乐网站。另外，加一点动态效果，感觉会很好，如图14所示。游戏类站点可以选择金属、像素风格，也可添加游戏主角作为插图。黑色背景能增加神秘感和科幻感，这种页面效果一定很精彩。图14.hk2.庆典页面

中国人注重节日庆典，每当春节、劳动节、国庆节、母亲节、父亲节时，都会要求设计相应的庆典页面。设计这些页面要抓住民族特色，并根据节日的特点来设计，设计的时候要考虑到如何烘托好节日气氛，并选择合适的插图和背景，如图15所示。对于网站周年庆之类纪念日，可根据各自的信息类型来设计庆典页面，或者采用弹出式窗口，或者添加一个欢迎界面等。图1521cn贺年3.通知页面针对紧急通知，经常采用以下三种方式来设计页面：

(1)利用弹出式窗口。由于很多人不太注意，所以效果不是很好。

(2)利用横幅广告条。与小窗口相比，其效果能好一些。可设计成动态效果，也可以采用跳跃性的色彩和吸引人的广告用语。

(3)在页面的某个位置打小广告、发新闻或者利用滚动文字。这些方式可能不够显眼，可根据通知的重要性来选择合适的方式。1.企业类站点

企业类站点(见图16)在网络上占很大比例，但是往往宣传力度不够，大部分网站的访问量都很低。根据各自的特点，有针对性地进行一些宣传是有必要的。五

企业、电子商务图16金山电线电缆股份有限公司

设计企业站点，应该注意以下事项：

(1)根据企业类型选择合适的插图和风格定位。

(2)根据客户要求和访问者需求选择信息。

(3)针对企业的形象，最好运用CI色系，搭配合适风格的页面设计。

(4)若信息量少，可尽量选用字号大的文字。

(5)如果有英文版，应该有针对英文版的设计方案。针对两种语言的不同特点，设计页面也不尽相同。(6)如果大型企业站点中包含很多行业信息，最好采取开放式框架，这可以给人以亲切的感觉，对企业形象也很有帮助。所以要选择清爽的颜色，尽量不要含有个人色彩。2.微型企业站点一部分小型企业只需要有一个宣传性的网站(见图17)，网站中栏目较少，信息量也很少，页面比较空，这时最需要注意的是页面框架和页面背景。页面框架可以采用通栏，尽量做得细致，以刻画企业形象，给浏览者树立良好的感觉。另外，可以根据具体情况选择一些时代感、科技感强的插图。图17信息量小的企业站点3.电子商务类站点

电子商务类站点，尤其是在线买卖商务站点(见图18)，应该多注意一些细节问题。图18gap1.文学、教育类站点

文学、教育类的网站应加强功能性设计。这类站点中主要是文字类信息(见图19)，而且在线阅读量很大，加强易用性，会给浏览者亲切舒适的感觉。网页的色彩要柔和，不要伤眼睛，尽力选择白为底色，配黑色的字体颜色；网页主色调应根据具体情况来定，插图则选择大气自然的图片，页面干净整洁很重要(见图20)。六

文学、教育、艺术图19bookzone图20榕树下2.常规型艺术类站点艺术站点常规与否主要表现在框架设计上。常规的艺术类网站在页面格局上多选择分栏式或区域排版式的框架设计(见图21) 。

这样的站点适合艺术类信息网站。浏览这部分信息的人对美感要求较高，所以这类网站的页面设计应注意细节修饰，给人精致的感觉。图21neuegalerie(newyork)3.非常规型艺术类站点非常规的艺术类网站在页面格局上选择无骨架设计的结构(见图22)。这样的站点风格自由、怪异、新颖,  让信息内容决定页面设计，不过如果图片量多，应注意考虑下载速度等。

图221.电子邮局

国内电子邮局类站点的设计都十分简陋(见图23)。电子邮局页面设计应特别注意图标、按钮等小细节物件的设计，充分利用这些小物件确立页面风格。七

电子邮局、社区、论坛、留言、电子报图232.社区网络社区不等同于论坛，社区中包含的内容较多。社区页面设计和社区的程序设计密不可分，设计受到程序的影响。具体设计时，应根据社区的具体性质来确定页面设计的颜色、框架。图24的卡哆家族是一个页面设计较为新颖的社区，值得学习借鉴。图243.论坛配色

现在网络中到处都是VBB代码的论坛(见图25)。这类论坛的框架风格一样，可以修改的是论坛的表格配色、图片背景、超级链接的颜色等，最重要的是，还可以修改论坛图标，如图26所示。图25VBB论坛值得一提的是，ultrashock讨论区(/)是最酷的VBB(见图28)，论坛页面和Flash框架感觉完全融合在一起，感觉很棒。图26论坛图标图27refresh.newthread图28ultrashock4.留言本风格对于留言本的风格，可以多学习借鉴日本的留言本(见图29)。日本的留言本都很有特点，而且很精致、漂亮。可以在日本雅虎上搜索一下提供免费程序的站点，查找留言本即可。如果有技术支持的站点设计，论坛、留言本、社区均应该与页面设计统一风格。现在使用Flash制作的留言本等互动程序也逐渐多起来，如图30所示。图29bbs图30bimbern留言本5.电子报

电子报可以当作报纸来设计。如Pchome活动专刊(见图31)选择了带有pop海报的风格设计，给人一种海报的感觉。“阿贵专刊”(见图32)则美术设计强一些，更符合网络新媒体的形式味道。图33中的“精彩购物”偏向传统报纸的感觉。应根据电子报内容的不同来设计合适的报纸风格，不要千篇一律。图31PChome活动专刊图32阿贵电子报图33精彩购物6.聊天室国内的聊天室绝大部分还属于HTML的形式，这种聊天室的版式设计大致雷同，主要注意按钮设计、图标绘制等方面即可(见图34)。另外，程序设计师要开放更多的功能，为网民服务。图34普通聊天室的按钮