用户体验设计:4399 VS 5173

木白:

1.目的


(1)分析4399和5173设计方案(以首页为主),总结产品战略对产品设计的影响。


(2)加强对用户体验的认识,加强对产品设计的认识,提高文档能力。


2.内容


(1)根据产品战略规划从表现、框架、结构3个方面分析4399和5173的设计方案。


(2)对相同的设计方案分析这样设计的好处?。


(3)对不同的设计方案做对比分析?如果对方采用此设计有什么好处或坏处?




3.产品战略


3.1.4399


(1)官方简介:4399游戏是最大的中文游戏平台。


(2)百度百科:4399是中国最早的和领先的在线休闲小游戏平台。


3.2.5173


(1)官方简介:中国网络游戏服务商。


(2)百度百科:5173是全中国最大的虚拟物品交易平台。


4.视觉表现


4.1.对比性


4.1.1.4399


(1)方案


a、文字:通过红色标记来引起用户注意。


b、按钮/图片:通过背景颜色的加深、变浅、改变来加强同周围的对比性。


c、分类:通过最新、热门、排名、专题分类布局来突出类目模块。


(2)为什么这样设计


a、因为4399是一个以类容为主的平台,虽然大多是图片,但是依然是信息平台类型,而信息过多就必须给用户眼球一个过滤的方案,采用差异性的对比,能使用户在无意识的瞬间内注意到差异的地方。


(3)优缺点


a、优点:能直接引导用户到突出表现的地方,对无目的访问的用户的有利。


b、缺点:如果用户有目的的访问,而需要的内容又不是突出的部分,这样的设计会打扰用户进行信息的查找。


4.1.2.5173


(1)方案


a、文字:主要以红色字表示热门的选项,提醒用户。


b、按钮/图片:通过背景颜色的的变化,达到醒目的效果。


c、分类:通过清晰的导航和全类目导航的形式,给用户提供一目了然的效果。


(2)为什么这么设计


a、因为5173是一个以功能为主的交易平台,用户大多目的性明确,清晰的导航能减少用户思考的时间和操作的次数。


(3)优缺点


a、优点:一目了然,减少思考,减少操作。


b、缺点:全类目导航中希望突出的内容过多。


4.1.3.比较


(1)相同点


a、在文字和图片背景的对比性设计理念相同,这样可以让用户下意识的去关注网站有意凸显的部分。


(2)异同点


a、在类目,框架对比性设计不同,4399是以类目条背景颜色做却别。5173是以字体大小、粗细作为区别。


b、模块上,4399是以边框和标题行的背景做区别,而5173是以框内背景或者标题背景和边框做区别。


c、4399可以减少自身颜色突出方案,逐步简化,可以参照5173全类目导航的设计方案,全白底和一些颜色的标记。


4.2.配色方案


4.2.1.4399


(1)方案


 


a、4399主要是以浅绿色为主,绿色为辅,配以其他的多种淡色系颜色作为区隔。


(2)为什么这么设计


a、简单的配色方案有利于保持整个网站的简洁,采用绿色的色调应该是和hao123有一定的联系。


(3)优缺点


a、优点:显示自己的风格特点,保持界面的一致性体验。


b、缺点:由于在网站色调之外,有各种游戏的图片,而游戏的图片又是五颜六色,应有竟有,所以显得网站的颜色又非常的多,有些杂乱的感觉,对网站整体的一致性体验起到了一个相反的作用,所以总体的一致性并不能给用户提供一个优良的视觉效果。


4.2.2.5173


(1)方案


  


a、5173是以蓝色为主,橘色为辅,配以浅蓝色和浅灰色,颜色较少,风格清新,页面干净。


(2)为什么这么设计


a、橙色蓝色搭配,表现出鲜亮明快、绚烂活泼的效果,给人舒适的感觉。 


b、简约设计,虽然是主色调,但是整体有颜色的部分不是特别多,感觉总体页面非常简洁明朗。


(3)优缺点


a、优点:界面显示一致性体验良好。


b、缺点:


4.2.3.比较


c、相同点:4399和5173在本身的颜色搭配设计上没什么区别的,主要思路就是用4种以下的颜色来达到一个优良的视觉效果。


d、异同点: 4399因为内容的特殊性,除了本身框架的颜色外,会有很多游戏图片的颜色,导致整个页面颜色非常的多,会给用户在视觉上造成一个眼花缭乱的感觉,对用户体验不利,可以尝试再减少网页本身的色彩的运用。而5173本身在配色和应用上都比较好,可以尝试在色彩的运用上多一些变化,观察用户的反应,然后对比效果。


4.3.字形字号


4.3.1.4399


a、圆体、宋体,主要是小号字。


4.3.2.5173


a、宋体,有大号和小号字。


4.3.3.比较


a、相同点:都以宋体和小字号为主,加强用户体验的一致性。


b、异同点:4399用了两种字体,但是字号和字形的变化上不如5173多,5173在变化上更多,产品的视觉效果更好,如果4399也能在字形的变化上产生更多的变化,可能会产生意想不到的效果。


5.框架(首页)


5.1.4399


(1)方案




(2)为什么这么设计


a、根据战略规划,4399是一个休闲的小游戏平台,给用户提供短时间的休息娱乐,所以希望用户在进入首页之后能在首页直接选择一款中意的游戏开始。


(3)优缺点


a、优点:可以在一个页面展示非常多的内容,如1000多个游戏。


b、缺点:首页太长,整体框架显得非常复杂,在首页上展示出来的分类和内容很多。1000多个游戏有近1000张图片要加载,每个图片从100毫秒到400毫秒不等的加载时间。如此多的游戏,用户选择的难度很大,对游戏本身的推广也相当不利。加载时间如下:




5.2.5173


(1)方案




(2)为什么这么设计


a、因为5173是一个功能为主的交易平台,用户目的性强,对导航要求高,所以网站提供多重导航,以供用户随时随地可以进入有需求的二级页面,且对常用功能进行拆分,以便用户更快捷方便的使用。


(3)优缺点


a、优点:导航模块多,用户可选择性强。


b、缺点:重绘的模块多,可能会给用户造成不好的印象,重合的模块或内容占用了首页的空间。加载时间如下:




5.3.比较


a、相同点:都有各自的大类目分类导航,都有大类目分类模块,减少用户行为判断,方便用户进行信息查找。


b、异同点:4399的内容多且杂,分类不是特别的清晰,重合比较多,且图片的尺寸不一,一致性体验受到影响。5173相比于4399在内容上显得简洁许多,而且有全类目导航,但是有一些重合的类目类容。在设计上5173更能帮助用户达到自己的目的,4399的用户可能会花费更多的思考和探索的时间。对于两者,我认为都可以做相应的减法,更加优化整个结构框架的展示,减少重合内容,提高一致性,减少用户的使用难度。


6.交互


6.1.4399


(1)方案




(2)为什么这么设计


a、尽可能的减少用户操作次数。


b、因为游戏很多都是收录的别人开发的游戏,有的游戏需要账号,有的游戏不需要账号。


(3)优缺点


a、优点:用户操作次数少,交互简单。


b、缺点:没有直接进入游戏的渠道,只能在详细页面点击开始游戏。账户体系不统一。另外推荐的内容模块较少。


6.2.5173


(1)方案




(2)为什么这么设计


a、功能选择必须按照明确的含义和分类给用户选择到最终的结果。


b、尽可能减少用户操作次数和用户思考时间。


c、根据产品的战略,作为交易性网站,应该要有统一的账户体系。


(3)优缺点


a、优点:类目清晰,操作简单。有统一的账户体系,对网站其他产品的推广有直接的好处。关联性设计较好,有利于提高转化率。


b、缺点:需要选择的内容较多,提高了使用的难度。


6.3.比较


a、相同点:交互层次清晰,逻辑性良好,减少用户操作次数,减少用户思考时间和自我探索时间。


b、异同点:从交互层面来说,4399的交互设计比5173要简洁,这是有产品战略决定的,因为4399不涉及交易上的问题,没有过多安全上的考虑,而5173必须要考虑交易过程中产生的各种安全情况。另外5173因为交易的目标明确,选项多,所以造成比4399的操作更加复杂,但是作为用户应该是有一定心理预期的,在惯性的思维之内,不会对用户造成太多的心理差异和影响。


7.总结


(1)产品战略和范围决定上层:交互、结构,表现。


(2)交互要尽可能的减少用户操作的次数,减少用户思考的时间,傻瓜式操作。


(3)结构要简洁明了,一目了然,分类明确,对各个框架的设计和排布要有明确的规划。


(4)表现要用最简单的方式去实现视觉上的冲击,减少色彩范围,运用最少的色彩和不同的字体字形来达到不一样的视觉效果,另外可以增加声音等其他的形式加强用户感知效果。

评论

热度(2)

  1. 4399_4399在线_4399在线资讯木白 转载了此文字
  2. 生化面包 互联网产品经理木白 转载了此文字