產品類移動端web網站分析

項目前期的競品分析，小蝦米一個，多指點。

需要做一個產品類網站，又不知道從何下手。只能先找幾個產品類有區別的網站進行分析，做參考了。完全不知道改怎么寫，請大家多指教吧。

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分

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