Flash交互设计论证报告

Flash交互设计论证报告96Flash交互设计论证报告96

CZJD-107100-R5

常州机电职业技术学院课程标准论证报告

课程名称课程编码课程总学时课程总学分Flash交互设计50631510966适用专业(方向)编制人审定人制定日期论证报告一、课程介绍Flash交互设计是艺术设计专业数字媒体设计三年制高职专业设置的一门专业必修课，是学生具备了专业根底学问之后开设的课程。该课程是学生把握计算机多媒体技术专业课程的重要教学环节，开设一学期，教学时数为96学时，6学分。Flash交互设计的主要任务是是系统把握互动媒体软件的设计流程，系统构造等理论学问和素材采集方法，要求学生熟识Flash环境，了解时间轴、图层、元件和帧的概念，娴熟把握Flash绘图、填充和文本工具的根本操作，把握声音、视频外部素材的导入与位图的处理方法，娴熟运用元件完成Flash渐变、引导和遮罩等根底动画制作的操作技能，把握ActionScript根底学问与组件特效。并在把握上述学问与技能的根底上能完成互动Flash的整体设计与交互元素制作，并对各种素材进展整合，这门课的目的是使学生熟悉到多媒体的互动性并具备肯定的多媒体艺术表达力量；使学生具备单独完成简洁的互动媒体产品设计的力量。二、课程实施状况1、课程讲授主要任务是系统把握Flash交互设计的设计流程，系统构造等理论学问和素材采集方法；把握相关的多媒体制作软件；使学生熟悉到多媒体的互动性并具备肯定的多媒体艺术表达力量；使学生具备单独完成简洁的Flash交互作品的力量。通过工程教学使学生能够制作界面设计、互动设想、交互多媒体产品展现系统等交互类媒体软件。2、课堂实践结合教师的现场演示与讲解，学生在课堂内依据课堂工程或案例，上机操作强化训练，完成课堂实践任务。课堂实践中培育学生的团结协作力量。3、课后作业为了培育学生整理归纳，综合分析和处理问题的力量，课后的工程任务由学生自己单独完成并考核，教师仅给与概要性指导。培育学生独立思索和解决问题的力量4、考核评价本课程采纳过程考核的方式进展考核。结合课内实践任务完成状况、课后工程完成状况、课堂表现进展考核。详细考核分值安排如下：工程主要内容单元三：Flash高级应用分值45艺术设计（数字媒体设计）凌丽君陈景普201*年4月30日单元四：Flash互动系统的设计与制作单元五：Flash互动效果设计单元六：Flash互动表单与网站组合课堂表现总计出勤、纪律、安全151515101005、参考教材网页制作高手Flash8网页设计，邓文渊总监制，人民邮电出版社姓名职称/职务工作单位专业签名论证小组成员专业带头人（负责人）意见专业负责人（签字）：年月日专业建立委员会主任（签字）：年月日专业建立委员会意见

扩展阅读：交互设计分析报告

瑞丰国际交互设计分析

瑞丰国际交互设计分析...................................................................................................................1

第一章.感官体验分析：..........................................................................................................3

其次章.交互体验分析：..........................................................................................................9

第三章.网站整体框架分析....................................................................................................20

第四章.用户登录后续界面分析..........................................................................................21

1、首先我们来看下瑞丰用户登录后的head区域，这块区域有特别多的问题我总结有下面几点;....................................................................................................................212、用户中心分析...........................................................................................................24

第五章.页面初步框架布局....................................................................................................25

一、首页排版布局构造图：.........................................................................................25二、体育博彩和香港乐透频道布局构造图：.............................................................27三、消遣场频道布局构造图：.....................................................................................28四、小嬉戏频道布局构造图：.....................................................................................29五、欢乐彩频道布局构造图：.....................................................................................30六、手机频道布局构造图：.........................................................................................31七、最新优待、加盟合作、帮忙中心、规章与说明、联系我们等频道布局构造图：.........................................................................................................................................32八、注册，登录参考页面请参考一下这两个页面的风格做：.................................33

第六章.网站重构需留意的用户体验细节，请严格根据我以下的总结进展页面整改。34

一、感官体验：呈现给用户视听上的体验，强调舒适性。网的一些事.................34二、交互体验：呈现给用户操作上的体验，强调易用/可用性。............................35三、扫瞄体验：呈现给用户扫瞄上的体验，强调吸引性。.....................................36四、情感体验：呈现给用户心理上的体验，强调友好性。.....................................37五、信任体验：呈现给用户的信任体验，强调牢靠性。.........................................37

第七章.网站重构所需人员配备。........................................................................................38

1、高级web前端开发工程师（人数视网站重构规模而定，瑞丰目前状况业务状况需2名人员，工期假如较赶则需增加人员）。...........................................................382、JS开发工程师（1名）...........................................................................................383、高级视觉设计师（人数视网站重构规模而定，瑞丰目前状况业务状况需2名人员，工期假如较赶则需增加人员）。...........................................................................384、高级程序开发员（3名）........................................................................................38

第一章.感官体验分析：

1、首先是页面速度：网站页面从翻开到全部内容显示至少在5秒以上，正常状况下,尽量确保页面在5秒内翻开。轮播广告图片显示速度是最缓慢的，导致缘由应当为图片质量、大小把控不当。还有效劳器必需考虑南北互通问题，进展必要的压力测试，网页翻开的速度很大程度打算了用户的第一感官。

2、网站的页面颜色颜色很深，颜色使用较重，虽然是为了要与品牌LOGO形象统一，但是颜色较重的颜色很简单导致用户产生视觉疲惫。瑞丰的LOGO虽然是以蓝色为主，但是整体的网站风格不肯定要以蓝色为主，瑞丰的LOGO可以搭配多种颜色，例如白色，浅灰，淡蓝等颜色。用些较淡的颜色给人一种简洁大方的感觉。

3、经过多个论坛投票测试，得出数据，95%的人第一眼感觉网站不属于博彩类的网站，多数认为是嬉戏网站，消遣类网站。由此数据可得知网站整体页面设计明显存在主题不明确，并没有依据用户群体的审美喜好进展分析，并没有依据品牌形象设计网站。简单对用户的感官产生误导。

4、LOGO采纳FLASH制作，感官效果虽然不错，但是有一个很大的弊端，增加了LOGO的大小，增加了页面加载负担，导致LOGO加速度更加缓慢，等半天LOGO都出不来。

5、首页头部的开户登录的UI设计也与首页风格极其不协调，竭力想让用户开户注册的意图太明显，登录框占用head太多的空间，反而让用户很反感。好的网站并不需要刻意的将注册页面表达出来，只需要不断完善用户体验，网站内容做的更加丰富，不断增加用户信任度，用户自然会特别愿意的想成为你网站的会员。

6、头部登录这块的UI设计和规律思维也极其不合常理，根据用户正常的思维模式是账户旁边紧跟着账户的input，password后面紧跟着password的input，而瑞丰的设计让人摸不着头脑。

下面两种比拟普遍的会员登录页面：淘宝：

人人网：

目前主流网站登录界面大致可以分为以上两种构造，淘宝的左右构造，人人网的上下构造，其实他们的界面都有一个共同点，都是以简介、清楚明白，与页面整体风格相协调。与瑞丰的设计形成巨大的一个反差。

7、head的语言选择与保藏等功能排版放置在导航条的右侧这个位置，这样的排版也极其不合理95%以上的网站一般都将此区域放置到右上角或者左上角，就是为了尽量削减空间，让页面排版更加简介大方。瑞丰将这块内容放置到这块区域首先再次的占用了导航条的空间。其次对导航的布局与整体协调性造成很大的影响，促使导航条的内容繁多。

现在我们来看下时下一些主流网站都是怎么排版这块内容的：凡客：

京东：

8、首页下方文字说明内容占了将近50%左右的首页。依据用户的扫瞄习惯这局部信息其有用户是很少会去阅读和关注，阅读关注率应当不会超过5%，然而瑞丰选择将如此多的内容插入到首页去，其实这是特别不明智的行为，不仅占用大量的空间，导致首页内容过多，而且还对用户视觉造成污染，给用户的视觉感受就是页面内容许多，很杂乱。

其实这局部内容完全可以放置在关于我们、帮忙中心、规章与声明、联系我们、加盟合作等说明性页面里面去。

9、页面消失许多新增窗口，例如到手机投注，最新优待，加盟合作三个频道，都是使用新增窗口的形式翻开，首先就造成这三个大的频道与其他频道翻开方式不统一的状况，其次对用户而已新增了太多窗口，反而降低了用户体验度。第三有局部扫瞄器会误认为是广告窗体，将弹出窗口直接屏蔽掉，造成用户无法看到该页面。

其次章.交互体验分析：

1、大局部页面并没有做到内链回环的功能，内链回环的意思是，用户到了子页面后就找不到直接回首页或者回到上级页面的链接。例如：加盟合作频道。

其实最简洁的解决方法是直接在每个页面的LOGO上加上首页的链接就可以了。或者设置一个返回按钮，虽然这是极其小的一个细节，但是就这么小的细节就可以增加特别多的用户体验值。

2、注册

1、照旧是head的内容过多导致整个右上角内容特别混乱，让用户找不到重点，其实这局部登录后只有一个重点，就是用户中心。我不知道为什么瑞丰要将

这块已经原本在首页重点强调过的内容几次的

内容还照旧在登录后放置在那个位置，实在不知道是有什么用意，这块区域等于荒废掉。由于不会有任何的用户会有兴趣去点击这块内容，这块区域是可以完全去除的。

2、用户中心，资金治理，红利领取这三个分类其实指向的全是同一个页面，并且这个区域是完全可以整合到用户中心一个分类就够了，你不需要那么多分类来扰乱用户，使用户觉得简单了。全部归档到用户中心，然后用户自己懂得到用户中心找到他想要的东西就可以了。

3、整个head我找了半天都没有找到退出按钮在哪个位置，最终最终找到

退出的按钮竟然写的是登录，这

种乌龙真的极其少见。估量用户一般找不到直接就只能关掉扫瞄器了。4、我们看看一些大网站是如何解决用户登录后的head及如何排版用户中心的位置的。

淘宝：

凡客：

好乐买：

2、用户中心分析

1、全部的窗口在IE下翻开都是定死宽度的，不能全屏显示，不知道为何要将这个宽度限制住，有特别多的用户喜爱全屏显示。不单单是用户中心有这个问题，还有许多的嬉戏窗口都是采纳这种方式将宽度限制住。

2、用户中心的head也犯了几个严峻的错误，首先没有回到首页的连接。其次是没有退出的按钮。

第五章.页面初步框架布局

以下框架需使用到技术有：DIV+CSS、JAVASCRIPT、AJAX。

一、首页排版布局构造图：

1、以上为大框架布局图，视觉设计师主要按大框架设计，每个大框架内容还可以包含各种小块内容，无需由于我的的框架图纸限制住设计思路。

2、nav仍旧连续放置各个大的频道。但是每个频道都以直接进入页面的方式，无需采纳新增窗口的模式。

3、foot主要放置关于我们，帮忙中心等说明文档。

二、体育博彩和香港乐透频道布局构造图：

三、消遣场频道布局构造图：

四、小嬉戏频道布局构造图：

五、欢乐彩频道布局构造图：

六、手机频道布局构造图：

七、最新优待、加盟合作、帮忙中心、规章与说明、联系我们等频道布局构造图：

八、注册，登录参考页面请参考一下这两个页面的风格做：

好乐买这种简洁，流程清楚的注册登录页面给用户的感觉特别清爽，舒适。这是目前我感觉做的比拟好的登录注册页面的一种。建议瑞丰采纳这种风格。

第六章.网站重构需留意的用户体验细节，请严格根据我以下的总结进展页面整改。

一、感官体验：呈现给用户视听上的体验，强调舒适性。网的一些事

1.设计风格：符合目标客户的审美习惯，并具有肯定的引导性。

2.网站在设计之前，必需明确目标客户群体，并针对目标客户的审美喜好，进展分析，从

而确定网站的总体设计风格。

3.网站LOGO：确保logo的爱护空间，确保品牌的清楚展现而又不占据过分空间。4.页面速度：正常状况下,尽量确保页面在5秒内翻开。

5.页面布局：重点突出，主次清楚，图文并茂。与企业的营销目标相结合，将目标客户最

感兴趣的，最具有销售力的信息放置在最重要的位置。

6.页面颜色：与品牌整体形象相统一，主色调+帮助色不超过三种颜色。以恰当的颜色明

度和亮度，确保扫瞄者的扫瞄舒适度。

7.动画效果：与主画面相协调，翻开速度快，动画效果节奏适中，不干扰主画面扫瞄。8.页面导航：导航条清楚明白、突出，层级清楚。

9.页面大小：适合多数扫瞄器扫瞄（最好页面大小为980宽）。

10.图片展现：比例协调、不变形，图片清楚。图片排列既不过于密集，也不会过于疏远i11.图标使用：简洁、明白、易懂、精确，与页面整体风格统一。12.广告位：避开干扰视线，广告图片符合整体风格，避开喧宾夺主。

二、交互体验：呈现给用户操作上的体验，强调易用/可用性。

13.会员申请：介绍清楚的会员权责，并提示用户确认已阅读条款。14.会员注册：流程清楚、简洁。待会员注册胜利后，再具体完善资料。

15.表单填写：尽量采纳下拉选择，需填写局部需注明要填写内容，并对必填字段作出限制。

（如手机位数、邮编等等，避开无效信息）

16.表单提交：表单填写后需输入验证码，防止注水。提交胜利后，应显示感谢提示。17.按钮设置：对于交互性的按钮必需清楚突出，以确保用户可以清晰地点击。

18.点击提示：点击扫瞄过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避开

重复阅读。

19.错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，削减重复工

作。

20.在线问答：用户提问后后台要准时反应，后台显示有新提问以确保回复准时。21.意见反应：当用户在使用中发生任何问题，都可随时供应反应意见。

22.在线搜寻：搜寻提交后，显示清楚列表，并对该搜寻结果中的相关字符以不同颜色加以

区分。

23.页面刷新：尽量采纳无刷新（AJAX)技术，以削减页面的刷新率。

24.是新兴的网络开发技术的象征。它将JavaScript和XML技术结合在一起，用户每次调

用新数据时，无需反复向效劳器发出恳求，而是在扫瞄器的缓存区预先猎取下次可能用到的数据，界面的响应速度因此得到了显著提升。

25.新开窗口：尽量削减新开的窗口，以避开开过多的无效窗口，设置弹出窗口的关闭功能。26.资料安全：确保资料的安全保密，对于客户密码和资料进展加密保存。互联网的一些27.显示路径：无论用户扫瞄到哪一个层级，哪一个页面，都可以清晰知道看到该页面的路

径。

三、扫瞄体验：呈现给用户扫瞄上的体验，强调吸引性。

28.栏目的命名：与栏目内容精确相关，简洁清楚，不宜过于浅显。

29.栏目的层级：最多不超过三层，导航清楚，运用JAVAscrip等技术使得层级之间伸缩便

利。

30.内容的分类：同一栏目下，不同分类区隔清楚，不要相互包含或混淆。31.内容的丰富性：每一个栏目应确保足够的信息量，避开栏目无内容状况消失。32.精彩内容的推举：在频道首页或文章左右侧，供应精彩内容推举，吸引扫瞄者扫瞄。33.相关内容的推举：在用户扫瞄文章的左右侧或下部，供应相关内容推举，吸引扫瞄者浏

览。

34.保藏夹的设置：为会员设置保藏夹，对于宠爱的产品或信息，可进展保藏。35.信息的搜寻：在页面的醒目位置，供应信息搜寻框，便于查找到所需内容。

36.文字字体：采纳易于阅读的字体，避开文字过小或过密造成的阅读障碍。可对字体进展

大中小设置，以满意不同的扫瞄习惯。37.页面底色：不能干扰主体页面的阅读。

38.页面的长度：设置肯定的页面长度，避开页面过长而影响阅读。39.分页扫瞄：对于长篇文章进展分页扫瞄。

40.语言版本：为面对不同国家的客户供应不同的扫瞄版本（目前瑞丰只有简体中文版一种

语言可选，只有一种语言就没必要放置语言版本选择框占用空间）。