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

1.棒米移动端web官网

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

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

总结     

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

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

从交互角度讲，弥补侧栏的交互方式，将侧栏主要信息罗列在主页上，用户查看方式多样，不用局限于点击左上角导航，这样给不符合时宜的侧栏交互方式一个合理的解释。

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

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

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

参考价值

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

2.苏泊尔移动端web官网

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

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

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

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

总结 

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

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

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

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

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

参考价值

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

3.脑白金移动端web官网

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

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

总结

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

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

参考价值

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

－－－－－－－－－－－－－－不知道怎么写，也不知道怎么收尾。请大神指教了！