产品设计

    今日:3| 主题:22992
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] 产品类移动端web网站分析

[复制链接]
一贱你就笑 发表于 2016-10-11 14:02:53
293 6
项目前期的竞品分析,小虾米一个,多指点。
  需要做一个产品类网站,又不知道从何下手。只能先找几个产品类有区别的网站进行分析,做参考了。完全不知道改怎么写,请大家多指教吧。
  1.棒米移动端web官网

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

产品类移动端web网站分析

产品类移动端web网站分析

   总结
   优点:信息架构清晰,主要围绕单个产品推广做文章,将公司信息架构放在“关于我们”模块,功能区块也比较清晰。主要取决于产品承载的信息量比较少,合理的取舍和分明的主次关系。行间距及字间距的合理控制信息呈现展示效果好。点击导航logo返回主页。
  从设计角度讲,页面清晰干净,继承使用logo颜色,banner及信息图使用产品本身的彩色,大面积的留白和白色背景,正好衬托主体物的主要位置。整个产品的留白和适当的空隙让产品具有良好的呼吸感,用户体验好。
   从交互角度讲,弥补侧栏的交互方式,将侧栏主要信息罗列在主页上,用户查看方式多样,不用局限于点击左上角导航,这样给不符合时宜的侧栏交互方式一个合理的解释。

产品类移动端web网站分析

产品类移动端web网站分析

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

产品类移动端web网站分析

产品类移动端web网站分析

  从设计角度讲,可点击和不可点击的文字没有做合理的区分,若是按钮则需要做明显,否则用户不能判断是否可以点击,手机端于pc不一样的在于,pc端可以用鼠标去探测哪个是可以点击,哪个是不可以点击,但是手机端不可以,所以icon的设计并没有和文字进行区分,让用户产生误解。
  从交互角度讲,当用户下滑页面,导航栏不会跟随,也就是说导航栏上的“侧栏选择”和“购买”两个功能按钮需要在首屏才可以点击(这是pc自适应手机端的结果,因为在pc端只有一屏显示),这样必然弱化了“购买”,及对侧栏内容的点击。并且随着大屏幕手机的出现和广泛应用,侧栏点击的交互并不是和合理,限制用户的使用场景。
  参考价值
  信息架构 85分      视觉设计  80分    交互设计  70分
  2.苏泊尔移动端web官网

  苏泊尔移动端官网是类pc端官网的再设计,及内容一样但是信息架构有所调整。这是一个苏泊尔多个产品销售推广展示的平台,主页分为banner、净化器、料理机、豆浆机、社会责任,5个模块来对苏泊尔产品和公司的介绍和推广。有主次和重点的展现形式让页面趋于模块化,信息架构清晰(棒米的展现形式和苏泊尔一致,为什么苏泊尔的好,而棒米的有异议,会在下文分析介绍)。
   苏泊尔官网是以多产品为中心的网站,所以导航栏和主页都以产品为主,且采用左侧栏的方式,将部分推广品牌放在里面,说是左侧栏更应该说是“明星产品”的模块,导航栏除了左侧栏外,还有右侧购物车模块,右侧栏的购物车是苏泊尔所有商品的集合,是一个“超市”形式存在的模块。导航中间为苏泊尔的logo,logo的交互功能为回到主页。

产品类移动端web网站分析

产品类移动端web网站分析

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

产品类移动端web网站分析

产品类移动端web网站分析

  总结

   优点:苏泊尔官网是多个产品推广的平台,他并没有将所有产品堆砌在主页,而是对需要推广的产品进行了主次区分,进行了“主页”“左侧栏”“购物车”三个等级的划分,这样做让整个网站看起来不会那么臃肿,并且是删选过信息再呈现,这样也符合用户的使用习惯,为用户提供好的使用体验。主页还有“社会责任”模块,是和推广产品并起的模块,这也是网站对企业形象树立的罗列模块。
  从设计角度出发,整个网站的设计风格是典型的设计类产品的网站风格,对于产品推广图的设计的参考价值比较大,多产品的表现形式和产品分类方式也值得学习。
  从交互角度出发,因为没有做分类或者类似侧栏的模块切换的功能,所以将导航栏中间的logo做了返回首页的交互方式,也因为所有模块的链接入口都在主页可以找到,而减少了侧栏分模块的功能区块。
   缺点:从设计角度出发,导航栏左右两侧为两个产品推广模块,但是iocn的识别和所表达的意思,并不是很到位,左侧栏的三条杠的形式为传统意义上的侧栏模块,虽说和现在的产品推广内容的意思可以说通,但是用户对这个icon的理解已经变成侧栏,而不是产品推广,所以这样的表达不清,会对其推广层级造成影响。右侧的购物车,同理,用户的认知是我已决定要购买的物件才放置购物车,而不是所有产品罗列模块。建议图标表达不清时直接用文字。
  从交互角度出发,因为没有侧栏,导航栏中间logo返回主页的作用尤其重要,但是因为需要完全利用空间展示图片信息,所以全站页面下滑时,并没有导航栏跟随的功能。
  参考价值
  信息架构 85分      视觉设计  90分    交互设计  80分
  3.脑白金移动端web官网

  脑白金官网为pc端官网的自适应版本(且积分商城手机端为再设计页面,信息架构与pc端不一致),主页内容分为banner、脑白金、视频、精彩问答、健康金生,5个模块。他是一个以脑白金一个产品为主附带几个二类产品的网站,网站以公司形象推广和产品推广并起的信息架构形式。所以主页有知识问答类、视频推广类模块。
   网站所承载的内容和功能很多,包括产品推广、广告视频、知识问答、产品购买、积分兑换、知识推广、公司文化等。所以页面层级很深,则导航栏上的分类在整个网站起到很重要的引导作用,此网站做了导航栏跟随的交互。

产品类移动端web网站分析

产品类移动端web网站分析

  总结

  优点:从信息架构来看,脑白金走的是产品和企业共推的产品目的。网站有“积分商城”模块,这是增加用户黏度的模块。
  缺点:从设计角度出发,忽视消费群体的体验和审美,虽然品牌产品偏向中老年,但是互联网使用人群和潜在购买人群应该是偏年轻化的,视觉上用色很不讲究。从交互角度出发,内容层级很深,平台承载了太多东西,没有删选,不能让用户更好的了解内容,则有点物极必反的意思。
   

产品类移动端web网站分析

产品类移动端web网站分析

  参考价值
  信息架构 80分      视觉设计  70分    交互设计  75分
  --------------不知道怎么写,也不知道怎么收尾。请大神指教了!
贾木 发表于 2016-10-15 11:39:47
能力就像瓜子仁,只有咬牙才能嗑出来。
回复 支持 反对

使用道具 举报

2113184132 发表于 2016-10-15 12:20:04
花生、瓜子预备着,我要准备坐沙发了!
回复 支持 反对

使用道具 举报

寂寞好了 发表于 2016-10-18 13:09:23
按“开始键”再按两下“U”可以找出windows的隐藏游戏.
回复 支持 反对

使用道具 举报

jay0239 发表于 2016-10-25 13:52:18
我承认我是因为标题才进来的
回复 支持 反对

使用道具 举报

黄悦 发表于 2016-11-3 16:41:59
我只是来看看的,这个世界还有太多的帖需要哥。哥祝楼主早日得到解答
回复 支持 反对

使用道具 举报

earlmiller 发表于 2016-11-7 02:32:14
楼主,笑一个,萌萌哒!
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表