交互设计分析报告.doc

瑞丰国际交互设计分析

瑞丰国际交互设计分析 1

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

第二章.交互体验分析： 9

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

第四章 .用户登录后续界面分析 21
1、一方面我们来看下瑞丰用户登录后的head区域，这块区域有非常多的问题我总结有下面几点; 21
2、用户中心分析 24

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

第六章.网站重构需注意的用户体验细节，请严格按照我以下的总结进行页面整改。 34
一、感官体验：呈现给用户视听上的体验，强调舒适性。网的一些事 34
二、交互体验：呈现给用户操作上的体验，强调易用/可用性。 35
三、浏览体验：呈现给用户浏览上的体验，强调吸引性。 36
四、情感体验：呈现给用户心理上的体验，强调和谐性。 37
五、信任体验：呈现给用户的信任体验，强调可靠性。 37

第七章.网站重构所需人员配备。 38
1、高级web前端开发工程师（人数视网站重构规模而定，瑞丰目前情况业务情况需2名人员，工期假如较赶则需增长人员）。 38
2、JS开发工程师（1名） 38
3、高级视觉设计师（人数视网站重构规模而定，瑞丰目前情况业务情况需2名人员，工期假如较赶则需增长人员）。 38
4、高级程序开发员（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）凡客注册页面：

（2）淘宝注册页面：

（3）亚马逊注册页面：

（6）凡客的登录的最大特点是注册方式的多样选择性，这点做的非常好，给注册用户带来了更加便捷的体验。
（7）淘宝的登录体验最大的特点是一步一步的引导用户注册，清楚明白的流程图指示，让用户知道交互预期。
（8）卓越亚马逊的注册页面也是非常具有自己的特色，同事也仅仅的抓住用户用户体验的每一个设计，第一步流程非常简朴，只需填写一个邮箱即可，而第二步完毕password的填写即注册成功。
（9）我们再来看看瑞丰的开户页面：

（10）瑞丰的注册页面跟上面三个注册页面进行对比，差距一下就体现出来了。
一方面注册流程复杂，填写内容繁多，并且涉及一些个人隐私的资料例如证件等信息为必填项目，用户在没有对你网站建立信任度的时候，又怎么会将个人隐私公布给你呢。
我们看到上面三家大公司注册页面其实他们页面有两个最大的共同点：
第一点是注册流程简洁，流程清楚。
第二点是用户更具体的信息都是等待用户注册成功后，再自行选择完善。瑞丰的开户流程就有些逼迫性，必须填写完具体的个人信息才干开户。这种陈旧的注册流程从很早以前就已经被淘汰了。
瑞丰注册页面存在的第二个问题是表单填写错误，并没有提醒用户错误是什么因素，一般情况在需要填写这么多资料的情况下还碰到错误，会让用户失去耐心。把最想让用户注册的页面变成促使用户离开的最后一道屏障。

下面是亚马逊注册页面犯错时出现的提醒：

清楚明了的告诉你哪个环节出了错误，需要怎么修改。这种用户体验感就做的非常到位，指引客户，帮助客户解决注册碰到的问题。

3、 整个网站站点并没有将公司电话展示出来，这样子大大的减少了用户的信任体验度。潜意识里给人感觉就是个非常不正规的网站，严重减少了网站诚信度。

4、 征询了一下在线客服，客服的回答非常让人失望。当问到不会开户，打算放弃，并没有挽留客户进行引导，工作态度不够热情，态度冷淡。

5、 香港乐透这个频道浏览器的兼容性非常糟糕，整个页面向右偏离，页面的整体的页面风格也跟其他频道有天差地别，脱离了整站的风格。

6、 显示途径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的途径，瑞丰这点做的极其不好。
我们来看个例子，例如芒果网的显示途径就做的非常好：

7、 点击快乐彩频道的时候。nav的当前指标指的却是显示首页，这个漏洞导致用户对页面进行到哪个环节产生了混乱，细节做的还不够好。

8、 瑞丰的博彩内容，博彩游戏规则，其实非常复杂，博彩种类也非常多，说实话分析了网站这么久我都没明白里面任何一个游戏该怎么玩与操作的。
9、 一方面声明一下我对博彩并没有什么研究，但是就像我这样一个门外汉，我虽然由里到外的分析了这个网站这么久我还是没有弄懂怎么操作里面的游戏，说明了什么，要么是我这个人太笨，要么就是网站自身存在因素。
这个网站的游戏复杂规则都有一定难度，每个游戏又都没有任何的说明与引导。

通过上面几个游戏截图就知道，游戏内容复杂，玩法多样性，但是连一点游戏玩法的提醒介绍都没有，即使想玩也无从下手，这将很大限度导致客户流失，除非某个用户刚好熟悉了解这个游戏或者对博彩类游戏都比较熟悉，否则一般用户看到这样的界面，肯定会选择离开。因素很简朴，我在还没跟你建立信任关系的，还不懂游戏规则，还不知道你这网站是做什么的，我怎么也许会去选择开户注册。

第三章.网站整体框架分析
1、瑞丰的网站整体框架采用的iframe的布局方式，现在所有主流的网站都几乎已经放弃使用iframe方式来作为页面主框架，iframe的缺陷重要有即时内容为空，加载速度需要很长时间，一个页面存在两个或以上的页面时增长了HTTP的请求次数。所谓 iframe 也是框架的一种形式，它是相称于在主浏览器窗口内嵌一个子窗口。这种框架的浏览器兼容性非常差，并且增长了服务器的承担。
2、建议瑞丰的整体页面框架需要进行一次彻底的重构：
(1)需采用DIV+CSS，进行页面布局，DIV+CSS是时下最流行的页面布局，使用盒子模型，将表现和形式想分离，可以使页面维护更加方便，最大的优点是可以提高页面加载速度。
(2)页面刷新，采用无刷新（AJAX)技术，以减少页面的刷新率。Ajax是新兴的网络开发技术的象征。它将JavaScript和XML技术结合在一起，用户每次调用新数据时，无需反复向服务器发出请求，而是在浏览器的缓存区预先获取下次也许用到的数据，界面的响应速度因此得到了显著提高。

第四章 .用户登录后续界面分析
1、一方面我们来看下瑞丰用户登录后的head区域，这块区域有非常多的问题我总结有下面几点;

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. 图片展示：比例协调、不变形，图片清楚。图片排列既但是于密集，也不会过于疏远i
11. 图标使用：简洁、明了、易懂、准确，与页面整体风格统一。
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. 语言版本：为面向不同国家的客户提供不同的浏览版本（目前瑞丰只有简体中文版一种语言可选，只有一种语言就没必要放置语言版本选择框占用空间）。

四、情感体验：呈现给用户心理上的体验，强调和谐性。
41. 客户分类：将不同的浏览者进行划分（如消费者、经销商、内部员工），为客户提供不同的服务。
42. 和谐提醒：对于每一个操作进行和谐提醒，以增长浏览者的亲和度。
43. 会员交流：提供便利的会员交流功能（如论坛），增进会员感情。
44. 售后反馈：定期进行售后的反馈跟踪，提高客户满意度。
45. 会员优惠：定期举办会员优惠活动，让会员感觉到实实在在的利益。
46. 会员推荐：根据会员资料及购买习惯，为其推荐适合的产品或服务。
47. 邮件/短信问候：针对不同客户，为客户定期提供邮件/短信问候，增进与客户间感情。
48. 网站地图：为用户提供清楚的网站指引。
五、信任体验：呈现给用户的信任体验，强调可靠性。
49. 公司介绍：真实可靠的信息发布，涉及公司规模、发展状况、公司资质等。
50. 服务保障：将公司的服务保障清楚列出，增强客户信任。
51. 页面标题：准确地描述公司名称及相关内容。
52. 联系方式：准确有效的地址、电话等联系方式，便于查找。
53. 服务热线：将公司的服务热线列在醒目的地方，便于客户查找。
54. 有效的投诉途径：为客户提供投诉或建议邮箱或在线反馈。
55. 安全及隐私条款：对于交互式网站，注明安全及隐私条款可以减少客户顾虑，避免纠纷。
56. 法律声明：对于网站法律条款的声明可以避免公司陷入不必要的纠纷中。
57. 网站备案：让浏览者确认网站的合法性。
58. 相关链接：对于集团公司及相关公司的链接，应当具有相关性。
59. 帮助中心：对于流程较复杂的服务，必须具有帮助中心进行服务介绍。

第七章.网站重构所需人员配备。
1、高级web前端开发工程师（人数视网站重构规模而定，瑞丰目前情况业务情况需2名人员，工期假如较赶则需增长人员）。
2、JS开发工程师（1名）
3、高级视觉设计师（人数视网站重构规模而定，瑞丰目前情况业务情况需2名人员，工期假如较赶则需增长人员）。
4、高级程序开发员（3名）