互交式美术设计论文

1、北京印刷学院毕业设计（论文） 摘 要 当交互设计成为软件行业的新兴领域，交互式的产品在无声无色地影响着人们的生活方式。然而基于计算文化的产品却不断增加用户的挫折感，终究其原因在于程序员与用户之间缺乏交流，故要从程序员与用户的需要两方面来解决问题，从而实现真正的交互。今天，视觉主导的时代，视觉体现在交互设计中越来越重要，它最直观的给用户感知情感的感受，交互设计已经从静态化视觉逐渐转为多形态化视觉，更好的与用户交流传达作品要传达的内涵，增加内心情感体验，也成为一种全新的审美艺术形式。这篇论文会主要论述CHANEL这部多媒体作品的产生原因，以及在有针对性的视觉调研后，并且讲述这部作品在视觉与交互上的

2、特点。以图文并茂的手法向大家讲述这部作品中值得推荐的与值得推敲的部分，系统的清晰的讲述整个作品创作的流程和结构，最后全面的总结整个创作流程，分享创作感悟。关键词：交互设计 脚本结构 交互链接 界面设计 视觉元素IABSTRACT When the interaction design has become a new field of software industry, interactive products affect peoples way of life in the uninteresting. However, computational culture based produ

3、cts have continued to increase user frustration, after all, the reason lies in the lack of communication between programmers and users, so to solve the problem from the programmer and user needs two aspects, so as to realize the true interaction.This paper mainly discusses the CHANEL the multimedia

4、works, and about the visual and interaction on the works of the characteristics. About this work worthy of recommendation and worthy of scrutiny to everybody with pictures technique, process and structure of the system and clear about the whole of the works, and finally summed up the entire creation

5、 process, to share insights.Keywords: interaction design script structure interaction link interface design, visual elementsII目 录1 引言12 作品选题立意13 设计调查及准备24 作品设计方案的选择35 设计作品表现45.1作品结构45.2作品的视觉设计55.2.1界面布局设计65.2.2作品的交互设计6结 论7致 谢7附录1：译文及英文原文7III北京印刷学院毕业设计（论文）1 引言 随着多媒体技术的发展,越来越多的人使用多媒体互动电子杂志多媒体互动电子杂志集多种

6、媒体特性于一身,具有一些传统杂志所没有的特点,然而它也有一些局限性,阻碍了它的发展。近年来随着iPad、iPhone等智能终端的普及，它又焕发出了新的生机。近年来随着计算机硬件、软件和网络技术的迅速发展,多媒体交互技术变得越来越成熟,展示设计中对该技术的应用越来越普遍,它们极大地改变了传统展示设计的展出方式,更加强调了人在展示活动中的主体作用,扩大了信息承载量,提高了展出效率。这一点可以从北京城市规划馆、天津城市规划馆的设计中看出。 但是,伴随着多媒体交互技术使用数量的增加也出现一系列的问题:如,使用多媒体交互技术与展出效率不成正比的问题;使用高科技与观众需要不相符的问题,科技与审美关系的问题

7、等。本文将结合对北京城市规划馆使用多媒体交互技术效果的案例对多媒体交互技术在展示设计中如何高效率使用这一问题进行分析。 在前面分析的基础之上,本文还将对多媒体交互技术在未来展示设计中的应用做出展望。以多媒体交互技术在展示设计中的应用越来越普遍为启示,分析多媒体交互技术与展示设计结合后,面临的观念、手段、方法如何适应新时代展示设计的复杂性与矛盾性,进而分析了多媒体交互技术成功应用到展示设计中的基础和原则。在此基础上提出了多媒体交互技术应用到展示设计中的前景和所要解决的问题,为展示设计下一步的发展提出启示。经济社会的发展、科技的进步带来了全面的交互需求,交互设计应运而生,并得到了广泛的应用.本文对

8、交互设计的概念、应用范围,以及电子杂志及其版面的交互性进行分析,从而探讨交互设计在电子杂志中的应用。我的作品内容是品牌电子杂志，以香奈儿品牌为主题，围绕这个主题做的交设计。搜集相关资料，采用交互技术，呈现出时尚的感觉。2 作品选题立意 为什么选择CHANEL这个品牌呢呢？符合专业培养规格，满足教学基本要求，内容属于学生所学专业或相近专业的范围。题目突出现实性，分析解决社会、经济改革和社会现实生活中的热点、难点、焦点问题。题目符合学生专业方向的模拟性质。选题份量和难度要适中。我选择的选题具有当今社会时尚的锐角，大众化电子杂志为选题非常安全。 本作品的主要受众是全年龄，这不仅仅是一本百科全书式的交

9、互程序，作者在页面的构图上、文字、图片的运用上都考虑到很多，希望这部作品能传达的不仅仅是知识，更多的是一种“气氛”，在阅读这个作品的同时体会到一种情绪。这不是一个简单的工作，为此推翻了很多次已经接近完稿的作品，为的是表达的完整性。另外，在交互上我们也尝试了多种方式，借鉴了很多著名的app，但是都经过了自己理解和再创作。交互的主体是人，一切以人为本，任何在使用上违背常识的做法，都会被重新考量。3 设计调查及准备 交互性在多媒体课件中具有重要的作用，评价课件的优劣主要取结于交互性，交互性强的课件能够给人带来视觉、听觉的舒适；能够充分使用人机交互性。有利1于教师的教学，在教学中发挥重大作用，而且学生

10、比较容易掌握。但是，当媒体的表现力比较弱时，通常出现在课件的交互性差或缺乏交互性。因而课件就会失去交互性的意义，优秀的课件能够显示强大的交互功能。因此，用户在课件制作过程中，要充分明确多媒体课件中的交互性，交互性在课件制作中有重要的指导意义。从总体上说，优秀的多媒体课件主要是通过优秀交互设计来实现的。主要表现在以下四点：（1）检索简单且方便。在你需要的内容中直接用鼠标点击，计算机将会呈现出刚才点击过的内容。（2）方便速度的控制。教师使用多媒体课件时，为了能够讲清楚原理，学生能够容易接受，当动作发生瞬间，教师能够自由控制，同时也可以选择动作连贯或者分步。（3）简单进行分步提示。在多媒体课件中，学

11、生可以自由学习，同时可以解答相应的题目。但是，学生对类型的题目仍然不熟悉，学生可以根据计算机提示的步骤去执行。当然，计算机也会根据学生学习情况来选择学习进度，这样能够有效指导学生去学习。（4）实现自动批阅试题。对于需要学习的学习者来说，计算机系统能够随机抽取样题，学生在规定时间解答完成后，并且及时提交，计算机会立刻批改，批改完成后计算机会出现你所测试的结果，学生能够及时收到反馈的信息，学生根据需要不断重复测试，直到满意结果为止。在这一过程中，用户要事先准备好与该课件有关内容的交互设计。4 作品设计方案的选择 我的作品风格定位是时尚品牌交互设计，设计的总方向是以香奈儿品牌为主题，围绕这个主题做的

12、交设计。搜集相关资料，采用交互技术，呈现出时尚大牌的感觉。我的交互设计总方案属于人性化生活化的。在制作过程中，欣赏优秀的交互作品是不可缺少的，优秀的作品总是能吸引人的眼球，使人产生兴趣。通常人们都会抱着好奇心关注周围事物，了解周围事物，为了满足人们的求知欲，怎样创设情境来调动人们的积极性。那么，在制作时通过讲故事导入；意境导入；图片导入；音乐导入；会谈等交互来激发人们对其的兴趣。5 设计作品表现5.1作品结构在多媒体作品CHANEL创建脚本的过程中，我们逐渐发现这个选题的庞大性，它的宗旨是给人带来一种愉快有趣味的交互式体验，并从中学到知识。这并不只是针对年轻人，学习只是的过程是全年龄段的，无论

13、是兄弟姐妹还是长辈亲戚，作者希望这个交互程序是“友善”的，什么是“友善”呢，就是0学习成本，这里所说的0学习成本并不仅仅体现在界面的操作上，也体现在交互的框架逻辑上。22 详情请看作品的逻辑结构图，如图1所示。图1 5.2作品的视觉设计 交互设计，又称互动设计，（ 英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式相关的界面。 最重要的阶段就是素材准备，其中素材准备包括文本、声音、图片、视频等。其中文本文件以D

14、OC、TXT、WFS等格式存储；声音文件以MP3、RA、WAD等格式存储；图片分为静态图片和动态图片，静态图片以BMP、JPG、PNG等格式存储，动态图片格式一般为Gif；视频文件一般以AVI、MPG等格式存储。 一直觉得FLASH设计是一件高难度的工作，对于结构完整内容丰富以及功能完善的FLASH来说，工作复杂程度难以想象。如今，通过对flash简单交互交互的制作，使我对FLASH制作有了新的认识。在FLASH交互设计的制作过程中，我对基本工具和功能有了深刻的了解，许多词，如“关键帧”、“逐帧动画”、“遮罩动画”等进行了一定的实践。最重要的阶段就是素材准备，其中素材准备包括文本、声音、图片、

15、视频等。其中文本文件以DOC、TXT、WFS等格式存储；声音文件以MP3、RA、WAD等格式存储；图片分为静态图片和动态图片，静态图片以BMP、JPG、PNG等格式存储，动态图片格式一般为Gif；视频文件一般以AVI、MPG等格式存储。经过这样一个简单交互设计的制作，我发现小小的实践能启示我一步一步学到应该掌握的基础知识。对实例的制作，我学会了整理简单项目的制作逻辑。在这里编码语言的理解非常重要，此时我看到C语言等的学习体现出了一定优势。遇到错误时，根据所学的语言知识，我能够基本看懂语句的意思，作出一定的修改，尝试运行。制作过程中遇到了一些困难，在老师的帮助下顺利解决了。photoshop的协

16、作使用也非常重要，它有助于提高画面的视觉效果。要将自己的思想演绎成可视的画面，需要进一步掌握各个概念并认识到其存在的强大功能，结合扎实的编程知识来创造条件，有了这些，才能在原有的知识层面上作出思维的延伸。5.2.1界面布局设计 在我的交互设计中为达到我想象中的效果以体现CHANEL品牌的高端、大牌以及时尚感特意选用了特效的手法插入了音乐，用音乐和图形的特效吸引人们的眼球，以达到艺术效果。 包括我采用黑三角的几何形状来当界面主页都是为体现品牌的时尚感。在作品的框架上我编撰的各各模块的名称以体现品牌的潮流时尚。根据Flash的灵活方便的特点，主要设计了时尚先锋、摩登巴黎、奢华香氛、幻影魅惑、魅力换

17、肤等四个模块分别是服装、巴黎T台秀、护肤品、香水、彩妆五大类。如图2所示 图2 因为品牌更新换代的快所以我的交互设计内容都选择一些经典款式。如图3所示。 图35.2.2作品的交互设计 作品主要使用了按钮交互设计。按钮的分组可以让一个界面变得具有自我描述能力.在复杂的布局中，组织良好的各组按钮用以选择，而且因为很明显，这样可以很快告诉用户有哪些功能可以使用。分组按照按钮的功能来分，设计上以颜色，大小来区分，为了页面的整体性，质感我们都保持一致的。用简短而又含义明确的动词或者动词短语作为标签，如果用户不需要的时候不要使用高深的专门用语。以后台页面的按钮为例，一级按钮和二级按钮尺寸大小规格都是一致的

18、，只要就是以颜色来区分。内容上我设计的在一个模块点击进去后可以翻页浏览的按钮交互。点击next键可以看见该模块其他产品的详细介绍。在一个阶级框架上显示更多的内容。按住prev键可以回到上一界面，方便浏览。如图4所示。 图4 在flash交互设计的制作中按钮是FLASH动画里的基本元件之一，是帮助我们让动画按照自己的意愿呈现出来的重要元件之一。它的表现形式多样，可以是元件、影片剪辑、文字等等，通过对它的设置可以实现场景的播放、停止、快进、快退、暂停、跟随. 按钮还可分单控按钮（即只有一个作用或播放或停止）和双控按钮（即可播放可停止）。这种品牌交互设计采用按钮式交互不但可以抓住眼球，更以超前的形式

19、展现企业杰出的形象。无论是新闻发布会，新产品发布，企业宣传促销等。名片型光盘都能够让您精心堆砌的企业形象更上一层。在社会生活中起着非常重要的作用，它广泛应用于政府、学校、企业、旅游、房地产、电子出版、网站建设、节假日礼品、活动庆典、纪念品、产品推广、招商引资、服装节、交易会、商标、展销会、楼盘推广等各个领域。 界面上我采用动画特效的设计理念，在鼠标放在按键上时，按键会自己凸出。如图5所示。 图5 在字体设计上面我采用的是幼圆字体分为黑、白、棕三种颜色容易分辨给人以视觉的突出。本文所设计的基于Flash的内容，通过该设计可以很方便的阅读到品牌的内容，因此在内容方面采用了文字与图片相结合的方式呈献

20、给给读者，这样可以加深读者的印象，同时还伴有舒缓的背景音乐，页面背景采用黄色让人在温馨的环境中阅读杂志，放松身心。如图6所示。 图6幻影魅惑版块主要讲品牌彩妆化妆品，我选用黄色背景用以衬托文字。图片背景用白色。体现品牌大牌感。时尚先锋版块主要讲服装的经典款式。奢华香氛版块是讲经典香水。如香奈儿5号香水，插入香水抠底图和组图展示介绍香水的历史故事。摩登巴黎版块是讲T台秀和秀场名人照片。点击交互按钮可观赏到明星和模特的照片。魅力换肤是介绍香奈儿护肤品，同样是采用黄色背景棕色字体给观赏者直观的效果。进入页面内CHANEL标题上方小黄箭头点击可回到主界面。如图7所示。 图7 利用多媒体交互程序，光盘杂

21、志可以介绍公司、播放录像、安装软件、观看演示、浏览产品手册、解决客户技术方面的问题、展示公司整个网站，在线时还可以连接到公司的电子商务页面等等。数字杂志可以在任何标准光驱上播放。光盘杂志将成为你的潜在客户注意的中心。企业可将电子杂志制作成精美礼品或附赠品，在提供给顾客愉悦的同时，在激烈的市场竞争中得到客户更多的关注，是市场推广的有效手段。航空公司、星级酒店、制作精良的期刊杂志等都可以利用。 11结 论这是我第一次从头到尾制作一部多媒体作品，而且从策划到美术再到程序，都要自己来把关，这很辛苦也很有趣。选题上，应该尽量选择自己所熟知而由能力掌握的，之前有过很多看似不错的创意，但都因为并非熟练的领域

22、而最终搁浅，这需要对自己的能力有把握，显然这对于我和我的同龄人并未易事。在制作CHANEL的过程中练习了前期策划的能力和罗辑思维，不止一次的意识到这两者的重要性，并不是所有的困难都是临时出现，精致的前期策划可以帮助规避掉很多不必要的风险和浪费。在整个制作的过程中，使用到了不到10款软件，每一款都要细心的去了解和体会才能运用自如。熬夜做通宵确实是很锻炼意志的事情，安静的环境可以给创作更多想象的空间，但管控制作的时间也是必修课，将所有的事情进行整体的规划和考量，可以事半功倍。致 谢感谢张雯老师在毕设期间对我的毕业设计作品及论文写作的指导和帮助，并向教导过我的所有老师表示感谢。 感谢所有参考文献与作

23、品的制作者，是他们构建起伟大的作品，才能使我们站在他们的肩膀上看到更远。附录1：译文及英文原文设计通过大规模的工业产品设计质量分布。设计这样的产品意味着，第一，规划结构，操作，和外观，然后制定适合高效的生产，分配，销售程序。显然，外观但在这样一个复杂的过程的一个因素。然而，特别是在消费品，外观设计作为工业设计的主要美德；它是那部分的整个至少受到理性的分析和，就像过去的工艺秘密，商业竞争中最有利的。另一方面，为生产服务，设备的设计，并对体育将展示实用；但在这些产品中，也越来越重要，外观设计。工业设计是由三种设计师提供给制造商：员工的设计师，完全采用单一公司；设计师根据合同，他们可能为几个用户同时

24、，一般避免利益冲突；和自由职业者，谁卖的设计，往往与特许权协议，对收入最高的制造商。第一次工业设计师承认的那样令人钦佩的条件下工作：彼得贝伦斯（18681940）1907雇用的汇报为TS公司在德国被他们的设计师，工业设计师，平面设计师，事实上，把统一的可见字符的一个巨型企业的许多活动。贝伦斯有其他客户和专业责任，除了。在建筑行业的一员，贝伦斯将它的规范和道德，他的工作作为工业设计师，创始于1907，与他人，设计师和商人的重要关联，德意志制造联盟。作为一个直接结果，一些德国和瑞士协会成为颇具规模的专业组织，工业设计师。在美国和英国的工业设计师发起法律认可的专业协会，以行为规范教育标准，等，在伦敦

25、皇家艺术协会指定合格的从业人员为皇家工业设计师；在美国美国工业设计师协会授予会员资格仅限于那些订阅的实践规范和限制。在英国工业设计协会于1944成立，建议在设计，推荐的设计师，并提供用于公共贸易展览展示设计欣赏课。国际工业设计协会理事会成立于1957年代的伦敦，并且在25年内有超过40个国家的成员。工业设计的发展没有统一的风格，即使是在手工最小化产业。有，然而，四个重要的风格趋势。第一种是一种强调客观，贝伦斯建立的第一个。工业设计，以确定是否一个人或一组，表现出一定的中立的表达。客观存在，另一方面，被誉为大规模生产和营销的一个自然方面，在一个民主社会的平均品位；另一方面，它被批评为提交给机器，

26、矛盾的自由，个人表达。风格，到目前为止，坚持。在工业设计的另一个趋势是包装，这样的设计提供了一种产品的保护的情况下，使内部工作的工程师。复杂的机械和电子已经开始普遍使用的组件需要保护壳的安全，清洁，有序的外观。在这个例子中，工业设计师有时被认为是一个合适的包装设计和时尚类表面装饰。第三个趋势是简化，设计理念的先驱雷蒙德Loewy等人在20世纪仍然广泛使用，尽管这个词本身已经过时了。顾名思义，精简的特点是设计来通过流体减少运动阻力的轮廓（空气）。原本与火车，汽车，和其他车辆，子弹形状和圆滑的线条简化了工业设计师和应用对象（例如，烤面包机）本质无关的速度。第四个趋势是人工加速老化，那是，设计变更，

27、故意引诱替换商品的购买新的更频繁地将必要因正常磨损或惯例。开始在时尚领域，人工老化已成为一种习俗本身在工业化国家的东西。它通过舆论成型的广告，通过价格的变化，并通过改进和改变用途以及通过外观变化由设计师。评估必须建立在广泛的社会和经济劣势designdesignofproductsmadebylarge-scaleindustryformassdistribution.Designingsuchproductsmeans,first,planningtheirstructure,operation,andappearanceandthenplanningthesetofitefficientp

28、roduction,distribution,andsellingprocedures.Clearly,appearanceisbutonefactorinsuchacomplexprocess.Nevertheless,inconsumergoodsespecially,appearancedesigniswidelyacceptedastheprincipalvirtueofindustrialdesign;itisthatportionofthewholeleastsubjecttorationalanalysisand,likecraftsecretsofthepast,mostadv

29、antageousincommercialcompetition.Ontheotherhand,designofequipmentforproduction,forservices,andforsportsisexpectedtodemonstrateutility;butintheseproducts,too,appearancedesignisincreasinglyimportant.Industrialdesignissuppliedtomanufacturersbythreekindsofdesigners:staffdesigners,fullyemployedbyonefirm;

30、designersundercontract,whomayserveseveralclientssimultaneously,generallyavoidingconflictsofinterest;andfree-lancers,whoselldesigns,oftenwithroyaltyagreements,tothebest-payingmanufacturer.Thefirstindustrialdesignerrecognizedassuchworkedunderadmirableconditions:PeterBehrens(18681940)in1907washiredbyth

31、eAllgemeineElektrizitts-GesellschaftinGermanytobetheirarchitect,industrialdesigner,andgraphicdesignerinfact,togiveunifiedvisiblecharactertothenumerousactivitiesofagiantenterprise.Behrenshadotherclientsandprofessionaldutiesbesides.Amemberofthearchitecturalprofession,Behrensapplieditsstandardsandethic

32、stohisworkasindustrialdesigner,foundingin1907,withothers,animportantassociationofdesignersandbusinessmen,theDeutscherWerkbund.Asadirectresult,anumberoftheseGermanandSwissassociationsbecamewell-establishedprofessionalorganizationsofindustrialdesigners.IntheUnitedStatesandGreatBritainindustrialdesigne

33、rsinitiatedlegallyrecognizedprofessionalassociations,withcodesofconduct,educationalstandards,etc.InLondontheRoyalSocietyofArtsdesignatesqualifyingpractitionersasRoyalDesignersforIndustry;intheUnitedStatestheIndustrialDesignersSocietyofAmericagrantsmembershipsonlytothosesubscribingtocodesandlimitatio

34、nsofpractice.InBritaintheCouncilofIndustrialDesignwasestablishedin1944toadviseondesign,recommenddesigners,andprovidecoursesindesignappreciationfortradeandexhibitionsforthepublic.TheInternationalCouncilofSocietiesofIndustrialDesignwasfoundedinLondonin1957,andwithin25yearsithadmembersinmorethan40count

35、ries.Industrialdesignhasevolvednounifiedstyle,evenforindustriesinwhichhandworkisminimized.Therehavebeen,however,foursignificantstyletrends.ThefirstoftheseisanemphasisonimpersonalitythatBehrenswasthefirsttoestablish.Designforindustry,whetherdeterminedbyanindividualorbyagroup,showsacertainneutralityof

36、expression.Impersonalityhas,ontheonehand,beenacclaimedasanaturalaspectofmassproductionandmarketing,ofaveragetasteinademocraticcommunity;ontheotherhand,ithasbeencriticizedassubmissiontothemachine,contradictorytofree,individualexpression.Thestylehas,sofar,persisted.Asecondtrendinindustrialdesignispack

37、aging,suchthatthedesignerprovidesaprotectivecaseforaproduct,leavingtheinnerworkingstoengineers.Complicatedmechanicalandelectronicassembliesthathavecomeintocommonuserequireprotectiveshellsforsafety,cleanliness,andorderlyappearance.Inthisinstance,industrialdesignersaresometimesaccusedofsuperficialembe

38、llishmentofasortsuitabletopackagedesignandfashion.Thethirdtrendisstreamlining,adesignprinciplepioneeredbyRaymondLoewyandothersinthe1930sandstillwidelyemployed,althoughthetermitselfhasfallenoutoffashion.Asthenamesuggests,streamliningischaracterizedbycontoursdesignedtominimizeresistancetomotionthroughafluid(asair).Originallyassociatedwithtrains,automobiles,andothervehicles,thebulletshapesandsleeklinesofstreamliningwereseizedbyindustrialdesignersandapplie