剑客
关注科技互联网

产品类移动端web网站分析

项目前期的竞品分析,小虾米一个,多指点。

需要做一个产品类网站,又不知道从何下手。只能先找几个产品类有区别的网站进行分析,做参考了。完全不知道改怎么写,请大家多指教吧。

1.棒米移动端web官网

棒米移动端官网为其pc端官网的自适应版本,主页内容以产品介绍为主,并从“产品介绍视频”、“了解棒米基础体温计”、“下载棒米应用”和“了解更多知识”四个模块来对产品及相关APP进行推广和介绍。

并采用左侧栏的信息架构,整体的信息架构较为清晰,以棒米智能硬件推广为主,主页从4个模块介绍产品,并且单独提取了“产品介绍视频”作为主要介绍方式,侧栏分为“首页”、“基础体温计”、“手机应用”、“知识库”、“关于我们”共5个模块,其中“基础体温计”、“手机应用”、“知识库”3个模块为主页推广模块(与主页推广内容相同),“关于我们”模块则承载了底栏及多个子功能,让整体的信息架构很清晰。

产品类移动端web网站分析

总结

优点:信息架构清晰,主要围绕单个产品推广做文章,将公司信息架构放在“关于我们”模块,功能区块也比较清晰。主要取决于产品承载的信息量比较少,合理的取舍和分明的主次关系。行间距及字间距的合理控制信息呈现展示效果好。点击导航logo返回主页。

从设计角度讲,页面清晰干净,继承使用logo颜色,banner及信息图使用产品本身的彩色,大面积的留白和白色背景,正好衬托主体物的主要位置。整个产品的留白和适当的空隙让产品具有良好的呼吸感,用户体验好。

从交互角度讲,弥补侧栏的交互方式,将侧栏主要信息罗列在主页上,用户查看方式多样,不用局限于点击左上角导航,这样给不符合时宜的侧栏交互方式一个合理的解释。 产品类移动端web网站分析

缺点:因为追求精简的页面和信息架构,使得主页的展现力并没有很好的体现,例如手机第一屏只显示了一个产品和一个按钮,这样的空间利用,使 得页面信息展示很少,不够合理。主页的几个分类完全可以把里面的部分信息拿出来展示,而不是用图表的形式来代替,说服力和吸引力完全不够,浪费空间,用户浏览习惯并不是深层次了解,而是大概浏览的习惯,所以首页的展现力很重要。

产品类移动端web网站分析

从设计角度讲,可点击和不可点击的文字没有做合理的区分,若是按钮则需要做明显,否则用户不能判断是否可以点击,手机端于pc不一样的在于,pc端可以用鼠标去探测哪个是可以点击,哪个是不可以点击,但是手机端不可以,所以icon的设计并没有和文字进行区分,让用户产生误解。

从交互角度讲,当用户下滑页面,导航栏不会跟随,也就是说导航栏上的“侧栏选择”和“购买”两个功能按钮需要在首屏才可以点击(这是pc自适应手机端的结果,因为在pc端只有一屏显示),这样必然弱化了“购买”,及对侧栏内容的点击。并且随着大屏幕手机的出现和广泛应用,侧栏点击的交互并不是和合理,限制用户的使用场景。

参考价值

信息架构 85分      视觉设计  80分    交互设计  70分

2.苏泊尔移动端web官网

苏泊尔移动端官网是类pc端官网的再设计,及内容一样但是信息架构有所调整。这是一个苏泊尔多个产品销售推广展示的平台,主页分为banner、净化器、料理机、豆浆机、社会责任,5个模块来对苏泊尔产品和公司的介绍和推广。有主次和重点的展现形式让页面趋于模块化,信息架构清晰(棒米的展现形式和苏泊尔一致,为什么苏泊尔的好,而棒米的有异议,会在下文分析介绍)。

苏泊尔官网是以多产品为中心的网站,所以导航栏和主页都以产品为主,且采用左侧栏的方式,将部分推广品牌放在里面,说是左侧栏更应该说是“明星产品”的模块,导航栏除了左侧栏外,还有右侧购物车模块,右侧栏的购物车是苏泊尔所有商品的集合,是一个“超市”形式存在的模块。导航中间为苏泊尔的logo,logo的交互功能为回到主页。 产品类移动端web网站分析

类比(从主页模块和信息架构分析苏泊尔和棒米官网的差异)

上文提到的主页模块问题,苏泊尔和棒米用相同的模块分类的形式在主页进行堆砌,为什么说棒米的堆砌是浪费空间,没有合理利用。因为苏泊尔堆砌的四个模块都是其推广产品 的链接,而棒米是模块连接,简而言之,用户不能从棒米的主页模块图了解到点击进去的内容,或者说棒米没有为用户删选模块信息,例如“更多知识”模块,完全可以将优质的信息放在主页,让用户有一定了解,有兴趣之后再了解其他更全面的东西,而不是看到这个模块叫“了解更多知识”再点击进入看,并且配图表意不清。而苏泊尔的模块图就是推广产品的产品图,用户浏览时可以很快就决定是不是自己想了解的产品,进而点击进入了解详情,既起到了推广作用,也符合用户的浏览和使用习惯。

产品类移动端web网站分析

总结 

优点:苏泊尔官网是多个产品推广的平台,他并没有将所有产品堆砌在主页,而是对需要推广的产品进行了主次区分,进行了“主页”“左侧栏”“购物车”三个等级的划分,这样做让整个网站看起来不会那么臃肿,并且是删选过信息再呈现,这样也符合用户的使用习惯,为用户提供好的使用体验。主页还有“社会责任”模块,是和推广产品并起的模块,这也是网站对企业形象树立的罗列模块。

从设计角度出发,整个网站的设计风格是典型的设计类产品的网站风格,对于产品推广图的设计的参考价值比较大,多产品的表现形式和产品分类方式也值得学习。

从交互角度出发,因为没有做分类或者类似侧栏的模块切换的功能,所以将导航栏中间的logo做了返回首页的交互方式,也因为所有模块的链接入口都在主页可以找到,而减少了侧栏分模块的功能区块。

缺点:从设计角度出发,导航栏左右两侧为两个产品推广模块,但是iocn的识别和所表达的意思,并不是很到位,左侧栏的三条杠的形式为传统意义上的侧栏模块,虽说和现在的产品推广内容的意思可以说通,但是用户对这个icon的理解已经变成侧栏,而不是产品推广,所以这样的表达不清,会对其推广层级造成影响。右侧的购物车,同理,用户的认知是我已决定要购买的物件才放置购物车,而不是所有产品罗列模块。建议图标表达不清时直接用文字。

从交互角度出发,因为没有侧栏,导航栏中间logo返回主页的作用尤其重要,但是因为需要完全利用空间展示图片信息,所以全站页面下滑时,并没有导航栏跟随的功能。

参考价值

信息架构 85分      视觉设计  90分    交互设计  80分

3.脑白金移动端web官网

脑白金官网为pc端官网的自适应版本(且积分商城手机端为再设计页面,信息架构与pc端不一致),主页内容分为banner、脑白金、视频、精彩问答、健康金生,5个模块。他是一个以脑白金一个产品为主附带几个二类产品的网站,网站以公司形象推广和产品推广并起的信息架构形式。所以主页有知识问答类、视频推广类模块。

网站所承载的内容和功能很多,包括产品推广、广告视频、知识问答、产品购买、积分兑换、知识推广、公司文化等。所以页面层级很深,则导航栏上的分类在整个网站起到很重要的引导作用,此网站做了导航栏跟随的交互。 产品类移动端web网站分析

总结

优点:从信息架构来看,脑白金走的是产品和企业共推的产品目的。网站有“积分商城”模块,这是增加用户黏度的模块。

缺点:从设计角度出发,忽视消费群体的体验和审美,虽然品牌产品偏向中老年,但是互联网使用人群和潜在购买人群应该是偏年轻化的,视觉上用色很不讲究。从交互角度出发,内容层级很深,平台承载了太多东西,没有删选,不能让用户更好的了解内容,则有点物极必反的意思。

产品类移动端web网站分析

参考价值

信息架构 80分      视觉设计  70分    交互设计  75分

--------------不知道怎么写,也不知道怎么收尾。请大神指教了!

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址