交互设计分析报告

　瑞丰国际交互设计分析 瑞丰国际交互设计分析误错ﻩ 错误! 未定义书签。

　第一章、感官体验分析: ........................................................................... 错误! 未定义书签。

　第二章、交互体验分析:误错ﻩ 错误! 未定义书签。

　第三章、网站整体框架分析 ................................................................................................. 17 第四章 、用户登录后续界面分析误错ﻩ 错误! 未定义书签。

　１、首先我们来瞧下瑞丰用户登录后得 head 区域，这块区域有非常多得问题我总结有下面几点; ................................................................................... 错误! 未定义书签。

　２、用户中心分析误错ﻩ 错误! 未定义书签。

　第五章、页面初步框架布局 02ﻩ一、首页排版布局结构图: ............................................................... 错误! 未定义书签。

　二、体育博彩与香港乐透频道布局结构图: ................................... 错误! 未定义书签。

　三、娱乐场频道布局结构图: 32ﻩ四、小游戏频道布局结构图: ........................................................... 错误! 未定义书签。

　五、快乐彩频道布局结构图: ........................................................... 错误! 未定义书签。

　六、手机频道布局结构图:误错ﻩ 错误! 未定义书签。

　七、最新优惠、加盟合作、帮助中心、规则与说明、联系我们等频道布局结构图: 72ﻩ八、注册,登录参考页面请参考一下这两个页面得风格做:误错ﻩ 错误! 未定义书签。

　第六章、网站重构需注意得用户体验细节,请严格按照我以下得总结进行页面整改. 错误! 未定义书签。

　一、感官体验：呈现给用户视听上得体验,强调舒适性。网得一些事 错误! 未定义书签。

　二、交互体验:呈现给用户操作上得体验,强调易用/可用性。

　.................................. 29 三、浏览体验：呈现给用户浏览上得体验,强调吸引性。误错ﻩ 错误! 未定义书签。

　四、情感体验:呈现给用户心理上得体验，强调友好性。

　........... 错误! 未定义书签。

　五、信任体验:呈现给用户得信任体验,强调可靠性。误错ﻩ 错误! 未定义书签。

　第七章、网站重构所需人员配备. ........................................................... 错误! 未定义书签。

　1、高级ｗｅb 前端开发工程师(人数视网站重构规模而定，瑞丰目前情况业务情况需 2 名人员，工期如果较赶则需增加人员)。误错ﻩ 错误! 未定义书签。

　2、JS 开发工程师(1 名) ................................................................... 错误! 未定义书签。

　3、高级视觉设计师(人数视网站重构规模而定，瑞丰目前情况业务情况需２名人员,工期如果较赶则需增加人员）。误错ﻩ 错误! 未定义书签。

　4、高级程序开发员（3 名）误错ﻩ 错误! 未定义书签。

　第一章、感官体验分析：

　1、首先就是页面速度：网站页面从打开到所有内容显示至少在 5 秒以上，正常情况下，尽量确保页面在 5 秒内打开。轮播广告图片显示速度就是最缓慢得,导致原因应该为图片质量、大小把控不当。还有服务器必须考虑南北互通问题,进行必要得压力测试,网页打开得速度很大程度决定了用户得第一感官．

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

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

　 4、LＯGＯ采用 FLＡSH 制作,感官效果虽然不错,但就是有一个很大得弊端，增加了 LOGO 得大小,增加了页面加载负担,导致 LOGO 加速度更加缓慢，等半天 LＯGＯ都出不来。

　5、首页头部得开户登录得 UＩ设计也与首页风格极其不协调,极力想让用户开户注册得意图太明显,登录框占用 heaｄ太多得空间，反而让用户很反感。好得网站并不需要刻意得将注册页面体现出来,只需要不断完善用户体验，网站内容做得更加丰富，不断增强用户信任度，用户自然会非常乐意得想成为您网站得会员。

　６、头部登录这块得 UI 设计与逻辑思维也极其不合常理，按照用户正常得思维模式就是账户旁边紧跟着账户得 iｎpuｔ,pａssｗoｒｄ后面紧跟着 paｓswｏrｄ得 inpuｔ,而瑞丰得设计让人摸不着头脑.

　下面两种比较普遍得会员登录页面: 淘宝：

　人人网:

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

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

　现在我们来瞧下时下一些主流网站都就是怎么排版这块内容得：

　凡客:

　京东：

　8、首页下方文字说明内容占了将近 50％左右得首页。根据用户得浏览习惯这部分信息其实用户就是很少会去阅读与关注,阅读关注率应该不会超过 5％,然而瑞丰选择将如此多得内容插入到首页去，其实这就是非常不明智得行为,不仅占用大量得空间,导致首页内容过多,而且还对用户视觉造成污染,给用户得视觉感受就就是页面内容很多,很杂乱。

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

　9、页面出现很多新增窗口，例如到手机投注,最新优惠，加盟合作三个频道,都就是使用新增窗口得形式打开,首先就造成这三个大得频道与其她频道打开方式不统一得情况，其次对用户而已新增了太多窗口,反而降低了用户体验度。第三有部分浏览器会误认为就是广告窗体，将弹出窗口直接屏蔽掉，造成用户无法瞧到该页面。

　第二章、交互体验分析: 1、大部分页面并没有做到内链回环得功能,内链回环得意思就是,用户到了子页面后就找不到直接回首页或者回到上级页面得链接。例如：加盟合作频道。

　 其实最简单得解决方法就是直接在每个页面得 LＯGO 上加上首页得链接就可以了.或者设置一个返回按钮，虽然这就是极其小得一个细节,但就是就这么小得细节就可以增加非常多得用户体验值.

　2、注册&登录就是一个网站得门户，它得设计姿态就就是对待客人得态度。虽然用户可能每次都只花极少得时间在注册&登录互动,但就是这个“瞬间"却举足轻重,用户与注册&登录之间得交互关系承上启下得一个节点。注册&登录所有得细节影响了能否完成产品战略定位所设定得最基本任务去吸纳其所希望得用户得使命.首先让我们来瞧下几个交互体验做得非常好得几个大型网站得注册页面就是怎么做得. （ （1) 凡客注册页面:

　（２）淘宝注册页面:

　ﻩ（３）

　亚马逊注册页面:

　（６) 凡客得登录得最大特点就是注册方式得多样选择性,这点做得非常好,给注册用户带来了更加便捷得体验． (7) 淘宝得登录体验最大得特点就是一步一步得引导用户注册，清楚明白得流程图指示,让用户知道交互预期． ( ８) 卓越亚马逊得注册页面也就是非常具有自己得特色,同事也仅仅得抓住用户用户体验得每一个设计,第一步流程非常简单,只需填写一个邮箱即可,而第二步完成 pａsswｏrd 得填写即注册成功。

　(9 ）我们再来瞧瞧瑞丰得开户页面：

　(10)瑞丰得注册页面跟上面三个注册页面进行对比,差距一下就体现出来了。

　首先注册流程复杂,填写内容繁多,并且涉及一些个人隐私得资料例如证件等信息为必填项目,用户在没有对您网站建立信任度得时候,又怎么会将个人隐私公布给您呢． 我们瞧到上面三家大公司注册页面其实她们页面有两个最大得共同点：

　第一点就是注册流程简洁,流程清晰。

　第二点就是用户更详细得信息都就是等待用户注册成功后,再自行选择完善。瑞丰得开户流程就有些强迫性,必须填写完详细得个人信息才能开户。这种陈旧得注册流程从很早以前就已经被淘汰了。

　瑞丰注册页面存在得第二个问题就是表单填写错误，并没有提示用户错误就是什么原因，一般情况在需要填写这么多资料得情况下还遇到错误,会让用户失去耐心。把最想让用户注册得页面变成促使用户离开得最后一道屏障。

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

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

　3、整个网站站点并没有将公司电话展示出来，这样子大大得降低了用户得信任体验度。潜意识里给人感觉就就是个非常不正规得网站，严重降低了网站诚信度. 4、咨询了一下在线客服,客服得回答非常让人失望。当问到不会开户，打算放弃,并没有挽留客户进行引导，工作态度不够热情,态度冷淡。

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

　6、显示路径:无论用户浏览到哪一个层级,哪一个页面,都可以清楚知道瞧到该页面得路径,瑞丰这点做得极其不好。

　我们来瞧个例子，例如芒果网得显示路径就做得非常好：

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

　8、瑞丰得博彩内容，博彩游戏规则,其实非常复杂，博彩种类也非常多，说实话分析了网站这么久我都没明白里面任何一个游戏该怎么玩与操作得。

　9、首先声明一下我对博彩并没有什么研究,但就是就像我这样一个门外汉，我虽然由里到外得分析了这个网站这么久我还就是没有弄懂怎么操作里面得游戏，说明了什么，要么就是我这个人太笨,要么就就是网站自身存在原因。

　这个网站得游戏复杂规则都有一定难度,每个游戏又都没有任何得说明与引导.

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

　第三章 、 网站整体框架分析 1、瑞丰得网站整体框架采用得 ifｒaｍe 得布局方式,现在所有主流得网站都几乎已经放弃使用iｆramｅ方式来作为页面主框架,iframｅ得缺点主要有即时内容为空,加载速度需要很长时间,一个页面存在两个或以上得页面时增加了得请求次数。所谓 iframe 也就是框架得一种形式,它就是相当于在主浏览器窗口内嵌一个子窗口.这种框架得浏览器兼容性非常差,而且增加了服务器得负担。

　2、建议瑞丰得整体页面框架需要进行一次彻底得重构：

　(1)需采用 DIV+CSS,进行页面布局,ＤIV+ＣSS 就是时下最流行得页面布局,使用盒子模型，将表现与形式想分离,可以使页面维护更加方便，最大得优点就是可以提高页面加载速度.

　 (2)页面刷新,采用无刷新(ＡＪAX)技术，以减少页面得刷新率.Ajaｘ就是新兴得网络开发技术得象征。它将 JａvaＳcript 与 XML 技术结合在一起,用户每次调用新数据时,无需反复向服务器发出请求,而就是在浏览器得缓存区预先获取下次可能用到得数据，界面得响应速度因此得到了显著提升。

　第四章 、 用户登录后续界面分析 1 、首先我们来瞧下瑞丰用户登录后得 head 区域, 这块区域有非常多得问题我总结有下面几点；

　1、依旧就是ｈｅaｄ得内容过多导致整个右上角内容非常混乱，让用户找不到重点,其实这部分登录后只有一个重点,就就是用户中心.我不知道为什么瑞丰要将这块已经原本在首页重点强调过得内容几次得内容还依旧在登录后放置在那个位置，实在不知道就是有什么用意,这块区域等于荒废掉。因为不会有任何得用户会有兴趣去点击这块内容，这块区域就是可以完全去除得。

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

　３、整个 head 我找了半天都没有找到退出按钮在哪个位置，最后终于找到退出得按钮竟然写得就是登录,这种乌龙真得极其少见.估计用户一般找不到直接就只能关掉浏览器了. 4、我们瞧瞧一些大网站就是如何解决用户登录后得ｈeａｄ及如何排版用户中心得位置得. 淘宝:

　凡客：

　好乐买：

　2 、用户中心分析 1、所有得窗口在 IE 下打开都就是定死宽度得，不能全屏显示,不知道为何要将这个宽度限制住,有非常多得用户喜欢全屏显示。不单单就是用户中心有这个问题,还有很多得游戏窗口都就是采用这种方式将宽度限制住。

　2、用户中心得 hｅａｄ也犯了几个严重得错误，首先没有回到首页得连接.其次 就是没有退出得按钮. 第五章 、页面初步框架布局 以下框架需使用到技术有：ＤIV＋CSＳ、JAVASＣRIPT、AＪAX.

　一、首页排版布局结构图:

　1、以上为大框架布局图，视觉设计师主要按大框架设计，每个大框架内容还可以包含各种小块内容，无需因为我得得框架图纸限制住设计思路． 2、nav 仍然继续放置各个大得频道。但就是每个频道都以直接进入页面得方式，无需采用新增窗口得模式。

　3、fｏot 主要放置关于我们,帮助中心等说明文档。

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

　三、娱乐场频道布局结构图：

　四、小游戏频道布局结构图:

　五、快乐彩频道布局结构图:

　六、手机频道布局结构图:

　七、最新优惠、加盟合作、帮助中心、规则与说明、联系我们等频道布局结构图 图:

　八、注册, 登录参考页面请参考一下这两个页面得风格做:

　好乐买这种简洁, 流程清晰得注册登录页面给用户得感觉非常清新, 舒服。这就是目前我感觉做得比较好得登录注册页面得一种。建议瑞丰采用这种风格。

　第六章 、网站重构需注意得用户体验细节, 请严格按照我以下得总结进行页面整改。

　一、 感官体验：呈现给用户视听上得体验, 强调舒适性 。

　1. 设计风格:符合目标客户得审美习惯,并具有一定得引导性。

　2. 网站在设计之前,必须明确目标客户群体,并针对目标客户得审美喜好,进行分析，从而确定网站得总体设计风格。

　3. 网站ＬOGO:确保 lｏgｏ得保护空间,确保品牌得清晰展示而又不占据过分空间. 4. 页面速度:正常情况下,尽量确保页面在 5 秒内打开。

　5. 页面布局：重点突出,主次分明，图文并茂。与企业得营销目标相结合,将目标客户最感兴趣得，最具有销售力得信息放置在最重要得位置。

　6. 页面色彩:与品牌整体形象相统一，主色调+辅助色不超过三种颜色。以恰当得色彩明度与亮度,确保浏览者得浏览舒适度。

　7. 动画效果：与主画面相协调，打开速度快,动画效果节奏适中,不干扰主画面浏览。

　8. 页面导航:导航条清晰明了、突出，层级分明。

　9. 页面大小：适合多数浏览器浏览(最好页面大小为 98０宽）。

　10. 图片展示：比例协调、不变形,图片清晰.图片排列既不过于密集,也不会过于疏远 i 11. 图标使用:简洁、明了、易懂、准确，与页面整体风格统一。

　12. 广告位：避免干扰视线，广告图片符合整体风格，避免喧宾夺主. 二、交互体验：呈现给用户操作上得体验，强调易用/ 可用性. 13. 会员申请:介绍清晰得会员权责,并提示用户确认已阅读条款. 14. 会员注册：流程清晰、简洁。待会员注册成功后,再详细完善资料。

　15. 表单填写：尽量采用下拉选择,需填写部分需注明要填写内容,并对必填字段作出限制.（如手机位数、邮编等等,避免无效信息）

　16. 表单提交：表单填写后需输入验证码，防止注水。提交成功后,应显示感谢提示。

　17. 按钮设置:对于交互性得按钮必须清晰突出,以确保用户可以清楚地点击. 18. 点击提示：点击浏览过得信息颜色需要显示为不同得颜色，以区分于未阅读内容，避免重复阅读。

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

　20. 在线问答：用户提问后后台要及时反馈，后台显示有新提问以确保回复及时。

　21. 意见反馈:当用户在使用中发生任何问题，都可随时提供反馈意见。

　22. 在线搜索：搜索提交后，显示清晰列表，并对该搜索结果中得相关字符以不同颜色加以区分。

　23. 页面刷新:尽量采用无刷新(AJＡX)技术,以减少页面得刷新率. 24. 就是新兴得网络开发技术得象征.它将ＪavaＳｃｒｉpt 与 XML 技术结合在一起,用户每次调用新数据时,无需反复向服务器发出请求,而就是在浏览器得缓存区预先获取下次可能用到得数据,界面得响应速度因此得到了显著提升。

　25. 新开窗口:尽量减少新开得窗口,以避免开过多得无效窗口,设置弹出窗口得关闭功能。

　26. 资料安全：确保资料得安全保密,对于客户密码与资料进行加密保存。

　互联网得一些 27. 显示路径：无论用户浏览到哪一个层级,哪一个页面，都可以清楚知道瞧到该页面得路径。

　三、浏览体验: 呈现给用户浏览上得体验, 强调吸引性． 28. 栏目得命名:与栏目内容准确相关,简洁清晰,不宜过于深奥．

　29. 栏目得层级:最多不超过三层,导航清晰，运用ＪAVAｓcrip 等技术使得层级之间伸缩便利。

　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级 、高级 w ｅｂ前端开发工程师( 人数视网站重构规模而定, 瑞丰目前情况业务情况需 需 2 名人员, 工期如果较赶则需增加人员）。

　2 、ＪS 开发工程师(1 名) ３、高级视觉设计师( 人数视网站重构规模而定，瑞丰目前情况业务情况需２名人员，工期如果较赶则需增加人员）。

　４、高级程序开发员(3 名）