1、1瑞丰国际交互设计分析2瑞丰国际交互设计分析 1第一章.感官体验分析： .3第二章.交互体验分析： .9第三章.网站整体框架分析 .20第四章 .用户登录后续界面分析 .211、首先我们来看下瑞丰用户登录后的 head 区域，这块区域有非常多的问题我总结有下面几点; .212、用户中心分析 24第五章.页面初步框架布局 .25一、首页排版布局结构图： 25二、体育博彩和香港乐透频道布局结构图： 27三、娱乐场频道布局结构图： 28四、小游戏频道布局结构图： 29五、快乐彩频道布局结构图： 30六、手机频道布局结构图： 31七、最新优惠、加盟合作、帮助中心、规则与说明、联系我们等频道布局结构图：
2、32八、注册，登录参考页面请参考一下这两个页面的风格做： 33第六章.网站重构需注意的用户体验细节，请严格按照我以下的总结进行页面整改。 .34一、感官体验：呈现给用户视听上的体验，强调舒适性。网的一些事 34二、交互体验：呈现给用户操作上的体验，强调易用/可用性。 .35三、浏览体验：呈现给用户浏览上的体验，强调吸引性。 36四、情感体验：呈现给用户心理上的体验，强调友好性。 37五、信任体验：呈现给用户的信任体验，强调可靠性。 37第七章.网站重构所需人员配备。 .381、高级 web 前端开发工程师（人数视网站重构规模而定，瑞丰目前情况业务情况需 2 名人员，工期如果较赶则需增加人员）
3、。 382、JS 开发工程师（1 名） 383、高级视觉设计师（人数视网站重构规模而定，瑞丰目前情况业务情况需 2 名人员，工期如果较赶则需增加人员） 。 384、高级程序开发员（3 名） .383第一章.感官体验分析：1、首先是页面速度：网站页面从打开到所有内容显示至少在 5 秒以上，正常情况下,尽量确保页面在 5 秒内打开。轮播广告图片显示速度是最缓慢的，导致原因应该为图片质量、大小把控不当。还有服务器必须考虑南北互通问题，进行必要的压力测试，网页打开的速度很大程度决定了用户的第一感官。2、网站的页面色彩颜色很深，色彩使用较重，虽然是为了要与品牌 LOGO 形象统一，但是色彩较重的色彩很容
4、易导致用户产生视觉疲劳。瑞丰的 LOGO 虽然是以蓝色为主，但是整体的网站风格不一定要以蓝色为主，瑞丰的 LOGO 可以搭配多种颜色，例如白色，浅灰，淡蓝等色彩。用些较淡的色彩给人一种简洁大方的感觉。43、经过多个论坛投票测试，得出数据，95%的人第一眼感觉网站不属于博彩类的网站，多数认为是游戏网站，娱乐类网站。由此数据可得知网站整体页面设计明显存在主题不明确，并没有根据用户群体的审美喜好进行分析，并没有根据品牌形象设计网站。容易对用户的感官产生误导。4、LOGO 采用 FLASH 制作，感官效果虽然不错，但是有一个很大的弊端，增加了 LOGO 的大小，增加了页面加载负担，导致 LOGO 加速
5、度更加缓慢，等半天LOGO 都出不来。55、首页头部的开户登录的 UI 设计也与首页风格极其不协调，极力想让用户开户注册的意图太明显，登录框占用 head 太多的空间，反而让用户很反感。好的网站并不需要刻意的将注册页面体现出来，只需要不断完善用户体验，网站内容做的更加丰富，不断增强用户信任度，用户自然会非常乐意的想成为你网站的会员。6、头部登录这块的 UI 设计和逻辑思维也极其不合常理，按照用户正常的思维模式是账户旁边紧跟着账户的 input，password 后面紧跟着 password 的input，而瑞丰的设计让人摸不着头脑。下面两种比较普遍的会员登录页面：淘宝：6人人网：目前主流网站登
6、录界面大致可以分为以上两种结构，淘宝的左右结构，人人网的上下结构，其实他们的界面都有一个共同点，都是以简介、清晰明了，与页面整体风格相协调。与瑞丰的设计形成巨大的一个反差。7、head 的语言选择与收藏等功能排版放置在导航条的右侧这个位置，这样的排版也极其不合理 95%以上的网站一般都将此区域放置到右上角或者左上角，就是为了尽量减少空间，让页面排版更加简介大方。瑞丰将这块内容放置到这块区域首先再次的占用了导航条的空间。其次对导航的布局与整体协调性造成很大的影响，促使导航条的内容繁多。7现在我们来看下时下一些主流网站都是怎么排版这块内容的：凡客：京东：88、首页下方文字说明内容占了将近 50%左
7、右的首页。根据用户的浏览习惯这部分信息其实用户是很少会去阅读和关注，阅读关注率应该不会超过 5%，然而瑞丰选择将如此多的内容插入到首页去，其实这是非常不明智的行为，不仅占用大量的空间，导致首页内容过多，而且还对用户视觉造成污染，给用户的视觉感受就是页面内容很多，很杂乱。其实这部分内容完全可以放置在关于我们、帮助中心、规则与声明、联系我们、加盟合作等说明性页面里面去。99、页面出现很多新增窗口，例如到手机投注，最新优惠，加盟合作三个频道，都是使用新增窗口的形式打开，首先就造成这三个大的频道与其他频道打开方式不统一的情况，其次对用户而已新增了太多窗口，反而降低了用户体验度。第三有部分浏览器会误认为
8、是广告窗体，将弹出窗口直接屏蔽掉，造成用户无法看到该页面。10第二章.交互体验分析：1、大部分页面并没有做到内链回环的功能，内链回环的意思是，用户到了子页面后就找不到直接回首页或者回到上级页面的链接。例如：加盟合作频道。其实最简单的解决方法是直接在每个页面的 LOGO 上加上首页的链接就可以了。或者设置一个返回按钮，虽然这是极其小的一个细节，但是就这么小的细节就可以增加非常多的用户体验值。112、注册231、依旧是 head 的内容过多导致整个右上角内容非常混乱，让用户找不到重点，其实这部分登录后只有一个重点，就是用户中心。我不知道为什么瑞丰要将这块已经原本在首页重点强调过的内容几次的内容还依
9、旧在登录后放置在那个位置，实在不知道是有什么用意，这块区域等于荒废掉。因为不会有任何的用户会有兴趣去点击这块内容，这块区域是可以完全去除的。2、用户中心，资金管理，红利领取这三个分类其实指向的全是同一个页面，并且这个区域是完全可以整合到用户中心一个分类就够了，你不需要那么多分类来扰乱用户，使用户觉得复杂了。全部归档到用户中心，然后用户自己懂得到用户中心找到他想要的东西就可以了。3、整个 head 我找了半天都没有找到退出按钮在哪个位置，最后终于找到退出的按钮竟然写的是登录，这种乌龙真的极其少见。估计用户一般找不到直接就只能关掉浏览器了。4、我们看看一些大网站是如何解决用户登录后的 head 及
10、如何排版用户中心的位置的。淘宝：24凡客：好乐买：252、用户中心分析1、所有的窗口在 IE 下打开都是定死宽度的，不能全屏显示，不知道为何要将这个宽度限制住，有非常多的用户喜欢全屏显示。不单单是用户中心有这个问题，还有很多的游戏窗口都是采用这种方式将宽度限制住。2、用户中心的 head 也犯了几个严重的错误，首先没有回到首页的连接。其次是没有退出的按钮。26第五章.页面初步框架布局以下框架需使用到技术有：DIV+CSS 、JAVASCRIPT、AJAX。一、首页排版布局结构图：271、以上为大框架布局图，视觉设计师主要按大框架设计，每个大框架内容还可以包含各种小块内容，无需因为我的的框架图纸限制住设计思路。2、nav 仍然继续放置各个大的频道。但是每个频道都以直接进入页面的方式，无需采用新增窗口的模式。3、foot 主要放置关于我们，帮助中心等说明文档。28二、体育博彩和香港乐透频道布局结构图：29三、娱乐场频道布局结构图：30四、小游戏频道布局结构图：
