寫在前面

近幾年云計算和大數據的興起，以及政府數據化戰略的升級，G端逐漸出現在大眾視野里，受到各大互聯網公司、IT廠商的青睞，BAT也在2018年宣布進軍G端市場，給信息化市場帶來了新的氣息。

由于工作需要，經常會和客戶溝通，總結出來G端客戶有一個特性是，他們大部分為高知人群，從學歷、社會地位、經濟收入、家庭背景等都占有相當的優勢，長期在政府部門工作，他們習慣于政令形式、層級森嚴的環境，會有工作任務固定、重復率高、失誤率低的需求。

與toB相比，toG產品項目的特點是——

1/ 客戶業務主導性強

調研對象政府相關部門的領導和科員，對業務主導性強

2/ 改變用戶行為難

原系統運行時間較長，形成了用戶習慣，接受新系統難度較大

3/ 項目工期短

部分toG項目要求工期緊，系統需求調研、開發時間較短

4/ 系統應用阻力大

涉及原系統、單位內部環境等問題，系統使用過程需要長期博弈

工作以來做了不少toB和toG的項目，這兩者相似卻又不同。

【相同點】

• 都是服務于用戶，需要站在用戶的角度分析用戶需求，為用戶解決問題

• 都是要把產品和項目做好，兼顧功能的同時，使用戶體驗更好，才能實現盈利

• 都是重功能、輕視覺，要符合產品的實際需求，并有效提升業務運營的效率

• ...

  
  

【不同點】

1/ 面對的客戶群體——

toB是面向企業客戶的，一般為企業內部人員使用，不向大眾公開。

toG是從toB衍生出來的一種特殊劃分，面向的企業是政府相關單位。

2/ 資金來源——

toB通常由企業撥出資金

toG通常由國家財政撥出預算，并非完全基于自身的組織或企業的資金。

3/ 決策機制——

toB一般為客戶、公司管理層

toG的話，不同層級的決策者有不同的考量，比如高層領導希望打造影響力來獲得政績，中層領導希望體現布局和價值，小領導希望解決自身申請項目和提升職稱等的需求，最終用戶能否用起來，反而不是很重要。所以解決方案要滿足不同層級和角色的需求。

4/ 產品需求——

toB滿足剛性需求并滿足一線使用者需求為主

toG非常多的產品功能非剛性，通常會讓研發人員難辦，因為比較難證明產品或研發價值，但在售前和控標階段，大而全的功能又會成為各產品之間的軍備競賽，最后將產品功能補齊，開啟同質化競爭。所以更多的是滿足非剛性、但有利于搞定決策人的、有價值的功能需求。

5/ 產品標準化——

toB面對中小型客戶，需求淺、沒有足夠的談判籌碼，不需要定制化；大客戶的話，需求更深入，定制化不可避免。

toG比較難實現標準化，因為toG本質上是重政績輕實用，這就導致相關決策人總希望做出不一樣的東西，不僅別人有的我要有，我的還要有特色。所以可以從兩方面入手，一是只做通用層能力，定制化找合作伙伴來做，保證渠道和底層能力的核心競爭力；一是自建定制化團隊，專做定制化需求，避免拖累正常的產品迭代。

6/ 視覺設計——

toB一般冷色系居多，整體簡潔

toG要根據客戶喜好來設計，最好能體現單位或地方特色；視覺方面，界面不能過于簡單，互聯網扁平化并不適用，要盡可能充實界面，但要把握「度」，不能太花哨，一般配色以紅&藍為主，莊重、大氣；內容方面，要遵循國家相關要求和當下政策環境，不可隨意亂造，最好是當前業務測試內容；交互方面，不可有過多的交互層級和特效，操作路徑要盡可能短一些，一般是一到兩個交互動作就可以完成任務，要考慮40-50歲人群的體驗習慣。

（這里可參考之前寫的一篇文章，詳細介紹了簡化操作路徑的案例，一站式解決問題，有需要的同學可以看看，鏈接如下https://www.zcool.com.cn/article/ZMTIxNDg4NA==.html）

7/ 產品迭代——

toB一般有一定的周期

toG產品項目，一般第一次上線之后，客戶會提出一系列問題，返工重新做的情況也是有的。所以toG很適合MVP(最小可行性產品)，因為政務用戶不同層級的需求和對需求的認知不同，造成了對統一功能不同用戶的意見有很大的不同，其實第一次上線運行就相當于一次內部測試，返工的時候不必太挫敗，只要做到核心業務流程和業務模塊完整即可。接下來再通過幾次的測試、收集意見反饋，討論決定最后的需求，這就是很多toG項目需要去客戶現場駐場的一個原因，采用小版本、多迭代、多溝通，及時解決問題。

PS: 關于去客戶現場，這里想多說幾句。

通常情況下，是產品經理和開發團隊駐場居多，但有時候設計方面常會遇到一種情況是，客戶需求不明確。通過產品經理在客戶和設計師之間來回轉達消息，效果也并不是很好，這個時候就需要設計師主動爭取機會去客戶現場。有一個典型的案例是，去年做GAB的項目，需要設計一個登錄界面。設計稿做了很多，客戶一直不滿意，于是我申請到客戶現場進行面對面溝通，去的時候會帶幾個有代表性的風格給客戶看，先把不想要的風格排除掉，然后把握大的設計方向。具體設計的時候同步表達自己的設計理念，一步步引導客戶，客戶中途一步步給意見建議，參與其中，這樣更容易明確需求，客戶也會覺得這是自己與設計師共同的成果，會更容易接受，做出雙方都滿意的設計，促進驗收，最后雙贏。

這就是那個「看起來平平無奇 · 但解決了實際問題 · 客戶很滿意」的登陸界面，如下圖：

8/ ...

很多toG的產品項目上線后造成的客戶影響不好，這個時候要調整好心態，只要你設身處地站在用戶的角度思考，分析場景和需求，用我們的專業技能來解決問題，當你經歷各種否定和困難最終得到客戶的認可，這種打磨過后的成就感真的難以言喻。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

互聯網行業，競品分析已不僅僅是產品經理的工作內容，對于UI設計師來說系統地分析競品并且做出有理有據地分析已經成為必不可少的技能了。

*文章中出現的工具名單以及網址出處，我會匯總到文章結尾，供大家學習使用。

一、競品分析的概念

競品分析（Competitive Analysis）一詞最早源于經濟學領域，是指對現有的或潛在的競爭產品的優勢和劣勢進行分析。

通過找尋市場上存在競爭關系，高品質的產品，把他們進行分類和對比，輸出結論為下一步決策提供正確的方向，它就像是武林中的吸星大法武功秘籍一樣，可以把各家的絕招都變成自己的武功招式。

他山之石，可以攻玉。競品分析是一個長時間定期持續積累，不斷挖掘和分析的一個過程，我理解它更像是一種解題公式。設計產品最終目標就是追溯用戶需求本身，解決用戶痛點，而競品分析就是解決用戶痛點這道大題的思路方法，就好比要解開一道復雜的數學題，需要用到很多公式，而競品分析就是一個環節中的一種公式而已。

二、競品分析的框架

一套完整的競品分析主要由以下七個模塊組成，因為企業資源的原因一般是不需要全部輸出出來的，需要根據具體需求進行重點分析，并不是每次競品分析都是面面俱到的。

正是因為企業為了適應小步快跑的產品迭代頻率，要求在做競品分析時候都會盡量地精簡化，比較有針對性，所以市面上就出現了三種不同表現形式的競品分析，分別是商業模式分析、交互體驗分析視覺體驗分析。

3.1 產品經理——商業模式分析

如果你以為產品經理只是拍腦袋想需求的這樣一個工作者的話，那你就大錯特錯了，其實在現實工作中產品經理有一半以上的時間是做競品分析的。

產品經理作為架構產品核心功能，排期產品迭代頻次的主要負責任人，考慮的多數是產品盈利問題。所以產品經理關注的是產品的商業模式的分析，多有對產品數據層、產品層、用戶層、盈利方式等維度的分析。

3.2 交互設計師——交互體驗分析

交互體驗的分析，顧名思義，就是對產品功能場景交互結構的分析。對于體量小一點的公司會把這項重任都交付給UI設計師了。

交互體驗分析可以分為三個層次的分析分別是：

·核心功能：對產品的基礎交互框架的分析。

·次核心功能：對產品易用性、提升效率、消除擔憂的功能點的分析。

·輔助功能：對產品情感化設計、特殊狀態處理、特定使用場景優化等交互功能的分析。

3.3 視覺設計師——視覺體驗分析

視覺體驗的分析，一般是由UI設計師和運營設計師兩個職業完成的工作：

·UI設計師：主要是對比競品中圖形、顏色、字體、頁面布局構成、質感、動態效果等元素。

·運營設計師：是近幾年剛剛興起的一個職業，主要負責設計風格、品牌影響力和內部運營渠道的分析。

*有人還會說要分析設計規范，我覺得沒必要，因為不可能看到競品的設計規范，另外與其說是看設計規范，倒不如說對比頁面的還原程度。

三、 競品分析的2個視角

3.1 宏觀視角——縱向分析

以宏觀的視角，根據不同的版本迭代，拉長戰線進行縱向的對比總結，這類做法雖然并不常見，但是可以提煉出很多競品的設計思路，在做產品規劃起到很好的借鑒作用，常用于產品定位、商業模式、運營思路模塊的分析中。

3.2 深入視角——橫向分析

以深入勘探的視角，通過在不同的產品上相同或者類似的功能（這類的相同的功能可以是一個功能或者是一組功能）上作比較。這種橫向的分析方法有助于在相對關鍵的場景中找到競品的功能亮點， 常用于產品體驗、產品功能、UI視覺等模塊的分析比較多。

3.3 競品分析&體驗報告的不同

值得一提的是，很多新手在制作競品分析的時候，上面就寫幾個競品分析的模板，也有同學直接上來就開始寫文檔，寫的和產品體驗報告，傻傻分不清楚。這里我就講解一下兩者區別。

我舉一個例子，如果有人問“這個男生怎么樣子，那就這就產品體驗；你看別人家的男朋友在看看你，這個就是競品分析?！?strong style="outline:0px;margin:0px;padding:0px;">競品分析比較強調“產品功能的對比”，即指兩款以上產品的差異化；而產品體驗則強調對“產品體驗的深度”。

四、為什么做競品分析

隨著互聯網的發展，競品分析被應用在互聯網產品發起項目或者改版初期階段，幫助我們摸清產品規律和對手弱點的一個工具。

4.1 競品分析的三個意義

對于產品經理而言：他是避開之前產品迭代功能坑的試金石，比如：有一天，老板覺得我競品的這個功能就不錯，想把這個功能弄到我們的產品上，我們沒有參考行業里面的競品，直接按照老板的意思實現了，效果應該不會理想。為什么會這樣，主要是因為在做新功能如果都是拍著腦袋想需求，是很缺乏經驗的一種表現，結果肯定不會特別理想。

對視覺設計師而言：競品分析其實可以作為一個設計決策的依據和支撐。比如說別人在質疑你設計風格或者是顏色選擇，兩方不能很好地達成一致觀點，這個時候你就可以說我這個東西是調查、分析過的，而不是“我認為”這種蒼白無力的表述，用專業的水平說服對方目前方案是最優方案。

對整個團隊而言：競品分析可以讓團隊更好地了解這個行業，了解對手，了解別人都在做什么，在和競爭企業PK中取得勝利。通過競品分析，確定其自己的產品的優勢和劣勢，并制定有效的產品策略或者設計策略。

五、競品分析的目的

通過關注競爭對手與自己的差異化，分析其設計背后的原因，取其精華，去其糟粕，發現自己的產品問題，為產品后期的迭代提供最為合適的方案。

競品分析有三個關鍵詞發現——分析——論證。一套完整的競品分析要具備了解、目的、競品、對比、分析、總結六個步驟。

一、 大視野了解信息

做競品分析最忌諱的就是直接找到競品進行對比，我們第一步應該做的是了解，比如在抖音的競品分析中就有對視頻行業的分析，如圖：

1.1 了解哪些維度信息

了解行業信息其實就是了解我們目前產品的生態環境，例如了解整個行業背景、競品的產品定位、現階段行業內發生了什么事件、新的功能玩法等等，這些信息都可以了解，這里提供四個了解信息的維度（以下內容不用全寫，挑幾項重要的即可）：

·產業鏈路圖：行業中產業鏈圖，從生產到服務之間的產業鏈條之間的關系是如何進行的。

·成員規模：公司內成員的規模和產品的核心目標以及在行業中的品牌影響力、企業價值、slogan等。

·盈利情況：季度、年度的盈利數值、各條產品線資金重點投入的信息，投資占比。

·用戶群體：用戶群體覆蓋面積、市場占有率、運營盈利模式、產品的注冊用戶量。

1.2 搜集信息的兩種渠道

很多人不知道從哪些渠道獲取行業或者市場的信息，可能在第一個步驟出了問題，這里我推薦兩個渠道進行信息搜集，一個是用戶的意見的渠道另一個是第三方平臺的行業信息報告。

·收集用戶意見渠道：如qq群、微信群、知乎、 微博、百度論壇（現在用比較少）、用戶訪談、在做可用性測試對用戶的詢問問題、看應用商店的評論等等。

·第三方平臺信息渠道：這類渠道市場上有很多，我推薦幾種如酷傳咨詢、易觀智庫、比達咨詢、企鵝智庫等找一些行業分析報告，通過這些報告了解目前行業發展現狀、國家政策的支持方向、競爭對手占有市場份額等。（下圖大家也可以收藏使用）

在競品分析上展示的了解的信息可以不具體，但是一定要有了解的過程，因為了解信息是競品分析是有科學依據的證明，所有不關注市場趨勢和行業現狀的競品分析都屬于功能性的競品分析，是沒有說服力的。

1.3 呈現形式案例借鑒

通過行業和市場的了解，為了梳理一個對自己產品和競品的認知、觀點，如下圖這樣表格的形式把自己的認知和觀點一一梳理出來。

或者可以梳理得更加精細一些，如把產品定位差異化、關鍵詞、產品特點都梳理出來。

再或者像是摩拜單車這種，以產品生命周期為橫向維度把每個階段的產品當時確定的戰略目標都書寫出來。

二、明確分析目標

目的決定一切，明確目標也是競品分析前最為關鍵的一個步，目標確立直接關系到后續競品選擇、分析思路和結論的輸出。

許同學在做競品分析的時候會被其他產品的某一個功能所吸引，導致后續在推導結論的過程中失去了方向。帶著問題，帶著目的去分析體驗競品，只有這樣才不會流于表面，學習到表象。所以我們在做競品分析之前就要想好我們想要得到什么，也就是做競品分析的目標。

2.1 不妨多問自己幾個問題

做之前不妨多問問自己幾個問題，希望通過競品分析，獲得什么？資訊or知識or行動方案？需要通過競品分析抄襲這個新功能嗎？不做行不行，為什么？這些新功能會和產品的其他模塊有什么聯系？等等。當我們以自我反省式的問法向自己提問時候，并給出答案時候，這個答案就是我們做競品分析的目標了。

2.2 三種常見的目標類型

在工作中做競品分析基本出于這三個目的，第一次做競品分析的同學可以按照我這三個目的找出自己項目的競品分析目標：

·了解市場動向：如果是“為了了解行業的動向，把確定下一個季度作為目標的話”，那分析側重點應該放在行業新聞領域，查閱一些行業競品的日活月活情況，盈利模式等宏觀層面上的信息。

·幫助做出決策：如果“為了敲定新功能是否上線的話作為目標的話”，那分析側重點應該圍繞有這個功能的競品的功能對比上，多思考新功能解決什么問題，新功能和其他模塊的功能有什么聯系，競品是怎么做這個新功能的等。

·借鑒競品優點：如果‘為了確定下一版本采用什么UI風格作為目標的話”，那分析側重點應該圍繞有視覺設計做得好的競品，對比分析競品的UI用了什么設計風格和設計元素等等。

2.3 不同階段目標側重點不同

眾所周知，每個產品都是具有周期的，分別是進入期、成長期、成熟期、衰退期（衰退期一般不做競品分析），產品所處的周期不同那產品所處的階段就不同，進去期的產品處于開拓階段、成長期的產品處于成長階段、成熟期的產品處于防守階段。

接下來聊一聊產品處于的階段不同，那產品的需要關注的問題不同，競品分析的目標（內容）也會有所不同。

·產品進入期——開拓階段：作為一個行業的新產品，活下去是最重要的事情，關注的問題應該是做什么產品？關注核心應該行業情況。

比如行業發展史、經營環境、市場規模及增長趨勢、產品發展史、目標客戶、業務流程、盈利模式等維度分析。

·產品成長期——成長階段：在成熟期的產品總會遇到自身的瓶頸，如何在激烈的市場提出創新性需求，更好地服務和其他競爭對手拉開差距這是成熟期要考慮的問題。

關注的側重點是我要做出什么樣子的產品？怎么實現？怎么去運營推廣？怎么和競品拉開差距？關注核心應該是競爭對手經營數據和經營策略，產品功能、用戶規模、研發技術成本、用戶體驗設計等維度。

·產品成熟期——防守階段：經歷了成長期后，可以證明產品在行業中是有一定的競爭優勢，產品需要考慮的問題就是如何守住原有的用戶，不被其他競爭對手侵占市場份額。

關注側重點是市場份額不被吞噬、侵占，關注核心應該是監控追趕競品的各項指標及行動舉措等維度。

為什么要講這個，很多時候我們接到的競品分析需求都是不明確的，我們可以結合自己產品所處的階段，更明確地分析出競品分析的目標。

三、尋找·劃分 ·挑選競品

明確了競品分析的目標，就可以進行第三步挑選競品了。對于不知道怎么選擇合適的競品的同學可以用“尋找——劃分——挑選”這三個步驟選出最合適的競品。

3.1 尋找·競品的三種方法

尋找好的競品無外乎就是考察自己的“搜商”能力，這里我推薦三種方法，幫助大家在搜索階段找到競品：

·習慣搜索方法：最常用的辦法就是通過“關鍵詞”在瀏覽器上進行搜索，注意的是這個“關鍵詞”不用太具體，比如自己產品是大學生咖啡，我在瀏覽器中搜索“大學咖啡”，是沒有這類競品的，那可以用瑞星咖啡來代替。

·資源搜索方法：除了在瀏覽器進行搜索，還可以去應用商店或者第三方平臺的“排行榜”找競品，這種方法我經常用，因為可以直觀地看到各個維度的競品分析數據指標，比較高效。

·推薦搜索方法：就是找公司的產品經理詢問相關競品，因為公司里面的員工比較了解公司業務說出來的競品會比較有針對性。也可以上脈脈這種平臺找行業大牛，問問他們的想法，唯一缺點就是在脈脈上等待回復的時間比較長，建議提前詢問。

*對資源搜索方法，我推薦四個可以查發布的時間、排行榜、版本號、注冊用戶量競品的網站，分別是酷傳咨詢、易觀分析、七麥數據、it橘子。

3.2 劃分·競品的三個種類

找尋到競品之后不用全部分析，工作量太大，可以按照競爭關系給競品劃分種類。競品大致分為直接關系的競品（核心競品）、間接關系的競品（重要競品）和其他關系（翹楚競品）這三類。

垂直競品：是指市場目標方向一致，用戶群體針對性較強，產品核心功能和用戶需求相似度較高的產品，如優酷和愛奇藝。

·間接競品：是指在功能需求方面互補的產品，用戶群體高度重合，先階段不是直接市場利益的競爭者，但是有可能成為潛在的競爭關系，如大眾點評和小紅書。

·翹楚競品：是指沒有直接的用戶群重合，在市場利益上也沒有競爭關系，但有高水準前瞻性的產品，如夸克和躺友。

3.3 挑選·競品的二八原則

競品的選擇不在量多，而在質優，接下來的重點在于“挑選”，在這個環節我建議可以通過二八原則挑選競品，其目的就是縮小競品范圍，比如在直接關系中挑選前1到2個算是頭部的直接競品來分析，然后挑選個別優秀的間接競品和翹楚競品中比較優秀的競品。

a 垂直競品找相似、差異化設計

垂直競品中因業務線高度吻合所以比較適合對比相似設計與差異化設計特點。

·所謂相似化設計，就是針對自己產品有相似的功能可以直接借鑒。比如在做優酷和愛奇藝兩款產品對比發現，視頻的固定比例16:9、彈幕功能都是在最左側，并且都會對新注冊的用戶進行VIP會員服務購買的指引，反觀自己的產品在做視頻播放功能也可以采用視頻的固定比例16:9，引導VIP服務購買指引的功能，不要出現3：4等其他尺寸影響用戶的慣性體驗。

·差異化的設計，就是考慮其相同功能，但是產品背景原因不同造成設計不同的樣式，比如快手和抖音兩款產品，都有關注功能，快手關注后會有標簽展示，而抖音卻沒有。分析后可以得出結論是兩款產品的頁面布局不同，抖音有底部tab欄而快手沒有，如果抖音關注后也有“已關注”的標簽展示，加上tab欄的高度有可能會遮擋住視頻畫面，影響用戶直觀感受，我們在設計類似視頻功能時候，是不是也要考慮一下有tab欄的設計樣式和沒有tab欄如何選擇呢。

b 間接競品找相同設計

通過間接競爭找相同設計和通過垂直競品找相似設計有些類似。間接競品因為用戶群體高度重合，業務領域或是核心功能上有類似的地方，是找相同的設計點很好的辦法，這些共同點都是我們需要借鑒和避免踩坑的地方。

比如大眾點評/小紅書都是種草社區的產品，在首頁Feed流推薦的功能上，卡片的設計上就可以找到相同的設計（ 圖片比例、內容布局、播放圖標樣式），降低用戶的學習成本，促成大眾點評用戶往小紅書產品上用戶流量的轉換。

c 翹楚競品找靈感設計

如果我們在做競品分析時候只挑選垂直類和間接類的產品進行分析，最后的結論只能是和競品很像很難走出“抄襲”的困境，在這個時候同類競品就派上用場了。

利用同類競品可以激發靈感創造更多可能性，比如自如的設計師可能借鑒了喜馬拉雅產品滑動Banner背景圖片更換的設計亮點，再加上騰訊動漫對主題形象破形的處理手法，形成了現在獨特的自如Banner表現形式。

當然他們的設計不僅如此，還增加了更有趣的設計亮點，Banner采取重力感應設計方式，圖片中的所有元素會實現x軸的位移。

當手握住手機左右搖晃的時候，可以感受Banner元素竟然會動，這不失為一種通過翹楚競品找尋靈感的設計案例。

四、需要對比什么

挑選出合適的競品之后，我們不可能把全部的競品功能都做對比，一般都會分析以下四個維度進行對比功能對比、價格對比、用戶體驗對比和服務對比，如圖：

五、需要分析什么

產品的分析是指對原始信息進行整理、歸納、推理，使信息轉化為有價值結論的過程，接下來我就以網上一個咸魚的競品分析案例，梳理一個產品大致可以從以下4個維度進行分析。

a 對產品屬性的分析

在了解行業信息那一個部分，我們講到通過第三方平臺查閱對行業、市場的研究報告，這個時候就派上了用場。

前面做的行業了解，都是為了進一步對自家產品的分析，比如我們就可以從七麥數據這個平臺，獲取一些咸魚和競品的數據。

b 對用戶畫像的分析

對用戶的分析可以從用戶的基礎屬性和用戶消費這兩個維度入手，看看彼此的目標用戶的需求上有哪些異同點，比如對核心用戶的分析（最忠誠的用戶群體是那類）; 對主流用戶的分析（占領最大的用戶群體是那些）; 用戶構成的分析（各類用戶群體的比例構成）。

基本屬性：姓名、性別、學歷、婚姻狀況、興趣愛好等。

用戶消費：從事行業、職業、收入水平、設備型號。

對用戶進行分析之后并沒有結束，最重要的是得出自己產品的用戶畫像，可以參考以下四個問題給予自己分析維度的思考：

·競品的目標用戶是誰？有哪些關鍵特征？與自己產品的目標用戶群一致嗎？

·競品的用戶數據，包括活躍用戶數、付費用戶數、ARPU值等。

·用戶對競品優、劣勢的看法。

·用戶喜歡產品的哪些功能？不喜歡產品的那些功能。

d 對功能對比的分析

另外就是對產品功能的對比分析，可以把競品的主要功能路徑畫出來，思考競品為什么做這個功能，做這個功能會給產品帶來什么好處，把自己認為重要的功能列舉出來，再看看哪些平臺有，哪些平臺沒有等等。

對競品功能對比分析并不是把功能簡單地羅列出來，最重要的是通過功能的對比，幫助梳理出用戶需求的痛點，發現自己產品的問題，尤其對后續的改版的方向都可以在對產品功能的解析中找到答案。

e 對功能數據的分析

對于數據的分析可以理解為對功能對比分析的升華，假設我們提案一個產品功能是否值得上線，這時就需要產品的數據增長波動，來佐證提案的可行性。

一般在進行產品數據收集的時候我們可以把目光鎖定在兩個數據維度——基礎數據和趨勢數據，我們需要用兩個維度的數據去判斷產品的體量和目前的階段狀態。

基礎數據的范圍有：產品的日活躍用戶數字、周/月活躍用戶數字、使用時長/下載次數、版本號/最后更新時間。

趨勢數據的范圍有：產品在一年內的用戶的增長情況或者固定周期的總注冊用戶量/下載量/有效轉化率的趨勢情況、產品平臺及官方的排名情況。這里再推薦兩個針對查詢產品數據趨勢比較好用的網站。

六、以終為始復盤總結

以上5步全部做完還是不夠的，最重要的還是競品分析的結論，也就回到了開篇那個問題，我們的目的是什么？達到了嗎？

很多同學的競品分析，就是為了分析而分析，并沒有總結出一個結論。沒有結論前面所有的分析豈不是就沒有任何的意義， 沒有結論的話又按照什么方向去迭代產品升級改版呢？所以說

·一定要有最后的結論：雖然結論很主觀但是也要有結論，沒有結論的競品分析是展示報告，是沒有意義的。

·結論要具有真實性：是推導出來的而不是硬加上去的，要知道一個錯誤的結論比沒有結論的后果更可怕。

文章很長，我們來做一個小練習吧～

有些同學們在做競品分析時候，先找到市面上的最火爆的直接競品，把自己的產品與直接競品一一對照，把設計亮點直接copy；或者是找到間接競品、翹楚競品找到與自家產品共有的功能，取一部分粘貼復制到自己產品身上。

這樣的做法并不是錯誤的，只會讓自己產品與競品相似度很高很難讓我們的設計改版具有創新性。為什么大家做競品分析相似度很高，我認為問題出在目標不夠明確和方法使用不正確這兩點上。

接下來我就用錘子和釘子的關系，向同學們一一說明，競品分析的十錘法則，希望大家在不同的競品分析目標面前用對競品分析方法。

一、對比表格法——最為直觀的對比工具

釘子：

常用于競品的橫向比較，比如想要全面地了解一個功能的概況?；蛘呤钱斘覀兯伎寄硞€功能元素是否需要保留，可使用對比表格法。

錘子：

對比表格法是競品分析最經常用到的一種分析方法，衍生的還有打勾比較法、評分比較法和描述比較法三種形式，常用于視覺競品分析里面。

打勾比較法通過與競品的功能一一對比打勾，有的話就在表格上對應位置打勾，不存在就空著。用這種方法來了解自己產品與競品在產品功能上的差異，全方位地了解競品的功能分布，為自己的產品是否加入這個功能規范做參考依據。

評分比較法多用于體驗設計中，把自家產品都有的功能得分列成一行作為一個標準，把競品的數據依次排列，可以直觀看到與競品之間數據的差異。

另外描述比較法這種方法比較的是競品的功能細節、界面的比較等功能，并且跟上自己的觀點和看法，在競品中也很常用，如圖。

二、用戶體驗地圖——發現用戶痛點的工具

釘子：

當自己不知道產品的問題是什么？或者想避免自己產品在產品體驗上犯同類錯誤的時候，可以使用用戶體驗地圖，算是一種尋找產品問題、用戶痛點的方法。

錘子：

用戶體驗地圖的意義是在于分析前模擬用戶的視角去發現用戶整個行為的痛點，發現用戶要的是什么，而不是說我們想在產品上放什么。

建立多張用戶體驗地圖可以對比不同的產品在流程中的不同，發現并記錄流程中的共同的問題來幫助設計師避免自己產品犯同類錯誤。

三、競品畫布—— 最小可行性方案

釘子：

當時間排氣不充足，但是需要快速出一份競品分析的場景交付到領導面前的場景時候，可以采用競品畫布的方法。

錘子：

競品畫布是提前避免不符合領導需求造成返工和浪費時間的工具，比如領導想讓你寫一份競品分析報告，先通過競品畫布快速地寫明分析的目標、挑選競品范圍等信息，再找領導確認是否符合領導要求，確認和領導所期望的目標一致后再投入大量精力做詳細的競品分析。

以下是我在網上找到的制作競品畫布的要點，建議大家收藏。

1、競品分析的目標要明確，最好能夠解決產品當前面臨的問題。

2、選擇競品時先發散后收斂，初選階段可以把眼界放寬，避免遺漏重要的競品；精選階段要收斂，聚焦到3個左右的競品做重點分析。

3、分析維度取決于分析目標，最好寫出分析維度的選擇理由。

4、搜集競品信息時，除了常規渠道，還可以考慮合法的非正式渠道。找不到關鍵信息時，可以嘗試在公司內部尋求幫助。

5、優勢、劣勢是企業內部的，最好不超過5個。

6、機會、威脅是外部環境，最好不超過5個。

7、建議總結要具體，不要泛泛而談，同時要考慮可操作性。

四、精益畫布 ——分析商業模式的工具

釘子：

精益畫布應用于以下兩個場景：

·想知道自己產品商業模式是否完成或者存在紕漏或者是想清楚競品在某一個功能上這樣做在商業上是怎么想的。

· 想判斷產品的商業模式、運營渠道等各個方面是否一致等問題。

錘子：

精益畫布常用于產品成熟階段的產品，做產品商業模式分析，建立產品全局觀，檢查產品商業功能清單來使用，一般產品經理或者是產品戰略者的角色會使用。比如OFO這種體量比較大的公司會用到精益畫布，制定產品戰略，如圖

以下是關于 精益畫布的模塊構成，需要的自行復制吧：

1、問題：目標用戶最需要解決的3個問題是什么？用戶有哪些痛點？

2、用戶細分：你的目標用戶是誰？這些用戶有哪些關鍵的特征？

3、獨特賣點：為什么用戶要選擇你的產品而不選競品？你能以清晰、獨特、令人印象深刻的方式說明為何你的產品更加優異或者卓爾不群嗎？

4、解決方案：你能為現存問題找到正確的解決方案嗎？

5、渠道：如何將產品或服務送到用戶手中，又如何收取用戶支付的款項？如何與用戶保持連接？

6、關鍵指標：哪些數據指標能讓你了解產品的真實狀況？

7、競爭壁壘：如何為產品構建“護城河”？無法被對手輕易復制或買去的競爭優勢有哪些？

8、成本分析：做這個產品的直接成本和間接成本都有哪些？

9、收入分析：產品如何賺錢？收入能大于成本嗎？何時能達到盈虧平衡？

五、PEST 模型 ——預測市場、大環境的工具

釘子：

屬于宏觀層面的分析，是一種想要了解市場大環境、市場趨勢，直觀地找出機會與威脅所在的方法。

比如2018年p2p網貸行業集體暴雷，因為政府的監管制度的完善，一大批不合法律法規的p2p平臺倒閉，預測未來p2p的市場份額將會減少。再比如，當今中國市場人口老齡化嚴重，年齡分布不均勻等情況屬于社會分類的范疇，預測未來適老化的產品可能會成為互聯網市場下一個風口。

錘子

在一張大白紙上畫出4個格子，團隊成員分別代表“政治、經濟、社會、技術”盡可能多地羅列關鍵詞填寫到4個格子中，最后集體投票，每個格子選出得票較高的3～5個點子作為PEST分析的結果。

六、競品雷達圖 ——不同競品功能對比的工具

釘子：

不知道自己產品的競品如何分類的，常用來對比多個產品或者同一產品的多個方面的非常好的工具。

錘子：

雷達圖起源于財務狀況的綜合評估方法，通過雷達圖的繪制可展現公司各項財務指標，后被人應用于互聯網行業，稱競品雷達圖（又叫蜘蛛圖）。

競品雷達一般選6個-9個維度分析，這9個維度參考尼爾森的十大可用性原則自行組合，進行產品分析。

七、四象限矩陣 ——區分競品類型的工具

釘子：

對自己產品的優勢、劣勢不明確，判斷現有的產品是否需要重新定位，并幫助我們重新找到合理的定位的場景的工具。

錘子：

矩陣分析法是一個場景的分析法，以四維矩陣的方式分析自己的產品與競品的定位、特色或優勢，最大的好處就是可以梳理清楚市場中存在的空白點。以下圖為例，在嚴肅和親民這個范圍領域就是沒有這個產品，企業是否可以在戰略層面上投入開發成本，開發這個空白領域的產品，搶占市場。

八、SWOT 模型 ——制定戰略規劃的工具

釘子：

SWOT是一種基于四個要素的戰略規劃方法，與PEST模型不同的是這個SWOT模型不僅可以幫助梳理產品優勢和劣勢，還可以制定企業的競爭策略和未來開發的計劃規劃，是一種既可以分析產品/公司內部（優勢、劣勢）外部（機會、威脅）競爭環境的工具。

錘子：

S、W 指產品內部有哪些優劣勢，O、T 指的是產品外部市場存在哪些機會和威脅。簡單地來說就是將與研究對象密切相關的各種主要內部優勢、劣勢和外部的機會和威脅，通過四個格矩陣排列出來，加以分析，從中得出一系列相應的結論，而這個結論是帶有一定決策性和預測性。

我自己使用的時候會把這個方法放到競品分析和總結的那部分，比如在競品分析前半部分把宏觀層分析完、競品的功能亮點對比完，最后進行輸出總結歸類到產品的優勢和劣勢，再預警一下現階段可能會出現的問題，預測一下以后的機會。

九、五層九緯度法

釘子：

對于做競品分析一點頭緒都沒有的同學，可以使用這個五層九緯度法（也叫用戶體驗五要素）。

錘子：

一套完整的競品分析其實和做產品思路一樣，將復雜的事物抽象成分層的模型，能讓人直觀、清晰地獲取其內在的邏輯，算是比較常規的方法了。

十、可用性測試 &用戶訪談

釘子：

使用場景分為兩個，第一個是針對競品分析前不知道競品哪個功能來說對用戶意義重要；第二個是競品分析后驗證自己產品中某個功能改版是否成功。

錘子：

可用性測試的意義在于如果不用競品的產品，自己可能不能真實地感受到競品好在哪里，就不能真實找到競品在體驗層面上值得我們借鑒的功能是什么。它除了可以還原競品功能對用戶真實的體驗之外，更是一個驗證功能改版是否成功的工具。之前講到了數據是有欺騙性，數據會受環境因素所影響，有些數據是代替不了可用性測試和用戶訪談的結論的真實性。

通過以上的講解，我相信大家對“競品分析”會有一個更為深入的認知，雖然大家較為清晰地知道了競品分析的概念、制作流程以及方法，但是在我實際工作中經常出現以下9個問題，值得注意。

一、要注重平時積累

人的認知是有局限性的，尤其是接受一個不太熟悉的觀點時候，就好比你讓雕刻工刻一個馬的扶手，因為描述不清楚的問題，他可能會刻成一個驢的扶手。

我們在論證一個觀點最好就是舉例論證，這樣才能做到有理有據，所以要注重平時的素材積累，有一定的知識儲備，做到觀點都有資料可以佐證避免假大空，不會出現低級錯誤。最好把競品分析當作一個產品來做，用產品思維（有邏輯性）做競品分析。

二、不要定過大的目標

競品分析絕對不是說找不同，競品分析方法千千萬，無論是在分析前，還是分析后，跟著目標走才能得出有價值的結論，最終做到產品設計人無我有，人有我優的終極目標。我梳理了兩類目標，供大家思考自己做競品分析的目標。

現在互聯網公司的發展相當快，已經沒有那么多時間讓我們做大而全的競品分析，對于初創公司來講，有可能做完競品分析公司都倒閉的尷尬局面。所以，小而精地分析、跟緊產品、業務的腳步才是企業需要的。

三、分清楚給誰看

知己知彼，百戰不殆。分清楚給誰看也是容易犯的一個錯誤，最好要問清楚最終呈現給誰看，因為同事、領導、老板的角度不同所以需要看的切入點就不同。

·老板的角度：競品在行業中的影響力、目前行業的經營狀況如何、自己產品的發展方向怎么樣，競爭對手的經營狀況怎么樣。

·團隊/領導的角度：競品的產品功能、交互設計、視覺的優點和缺點是什么；有沒有創新性的產品體驗點可以應用到產品迭代中去，決策是采納A方案啊，還是采納B方案或者是還有更好的C方案。

·自己/同事的角度：為了更好地執行領導們定的目標，自己或者團隊內部協調的同時，需要用到什么方法把任務完成好。

四、多用事實佐證結論

分析是一個嚴謹的過程，得有理有據讓人信服。在分析報告里面，發現很多分析的數據沒有標明來源，可信度真的不高。設想如果是把這樣一份數據來源不明確的報告遞到一個企業決策者辦公桌上，他敢作出決策嗎？我看很懸。

所以在分析報告中，事實一定是嚴謹可信的，是市場上認可的，這樣通過分析得出來的觀點才會不帶有主觀臆測的。

五、注重產品深度&上下文邏輯

正所謂，學我者生，像我者死！在與競品進行比較階段的時候，并不是什么情況下去模仿照搬，應該把關注點放到競品這么做的背后原因。一個上層建筑的高度和樣式必定由其底層地基決定，產品也是如此，雖然是一個簡單的功能，也可以從數據、產品定位、用戶群體、經營策略等層面，多注重自己產品與競品的對比，挖掘產品策略背后的原因，為后期迭代思考我們是否可以去優化做準備。

另外一點我想說的是注重邏輯，有些競品分析一會兒分析市場大環境，一會分析產品核心功能，看似面面俱到，但是分析的主線思路不清晰，缺乏邏輯關系，形式歸于表面。

六、選擇最為合適的分析方法

做競品分析常規的方式是先挑選3-5個競品，圍繞用戶體驗要素（戰略層、范圍層、結構層、框架層、表現層）對競品展開分析，我知道大家都是受了ajax之父jesse james garrett的經典之作《用戶體驗要素：以用戶為中心的產品設計》的影響，我最開始入行的時候也是我的啟蒙書。

但是大家要清楚“由于產品不同、受眾用戶不同、產品階段不同、分析目標不同競品分析最終呈現的樣子就會不同，”如果大家都用這五層去寫的話，避免不了有套模板的嫌疑。

這里列舉一個不恰當的例子，2015年時候互聯網很流行“互聯網+傳統行業”的創業概念，但互聯網+并不是適合所有行業，要認清自己產品適合“互聯網+傳統行業還是傳統行業+互聯網”，了解清楚自己產品的特長，清楚誰主導誰的，處于什么產品階段后再做決策，不要跟著主流輿論裹挾，盲目做選擇。

除了我所講的通過適合競品的方法來審視自己產品之外，還有一點值得大家注意的就是設計方案的合理性，尤其是在UI設計當中，并不能保證設計方案是一直對的，只能說在某一個產品階段或者應對某一個問題設計方案是最好的方案，更為精準的說法是設計方案沒有絕對的正確和錯誤，只能說那個設計方案更合適當前這個需求。

七、形式與內容同樣重要

我看了很多競品分析，內容深度很深，視角也很獨特，觀點也很鮮明有價值，只是其表現形式太難讓人閱讀下去。我們是設計師，競品分析的結論固然重要，但是精心包裝才能更好地傳遞競品分析的價值本身，這也是體現我們基礎設計師價值的一部分。

設計領域中的眼球理論也是如此，一份好的競品分析，務必在視覺包裝上下點功夫，通過合適的邏輯結構進行梳理，可以讓你的觀點更易于理解并接受，配上適當的圖文制作成PPT，保證文字信息可以高速清晰地進行傳達，讓讀者第一眼就有繼續閱讀的興趣。正所謂好的內容+好的設計形式=易于別人接受，才能發揮最大的效用。

八、務必要自我檢查

細節決定成敗，很多同學按照流程步驟一一分析了，得出了結論也是真實有效的，認為競品分析就完成了。

我們的目的不是交付100分的答卷，而是交付100+的答卷，自我檢查是提高自己的能力的好方法，如果工作周期允許的情況下，還是要從頭到尾，把競品分析查缺補漏，這樣也利于發現更有價值的信息。

九、持續跟蹤，保持節奏

競品分析不是一次性的事情，它對團隊來說是每時每刻的，因為市場和需求是不停地更新，做競品分析也是一個了解市場了解產品的手段，需要持續更新的。可以說它是貫穿整個產品迭代的始終的，把握節奏可以讓你更從容地應對市場的變化，建議至少半年更新一次。

總結

競品分析在不同的階段能給我們的產品帶來不同的效益，學習好競品分析也能避免走很多的彎路。

最后，感謝文章內容案例的作者，寫這篇文章著實不容易 ，查閱了大約40個競品分析，但編成系統方法寫出來真的很耗心神。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

導語：提起中后臺，除了高效、靈活和強大之外，不可忽視的還有它的海量數據。海量數據的篩選與呈現，直接決定決策人員的效率高低。本文作者主要是結合自己在實際工作中遇到的表格設計問題，針對Web端數據呈現方式之一，表格的設計進行探討。

表格，是一種常見的信息組織整理手段。常用來展示、保存、對比分析、排序、篩選 、歸納等，是最清晰、高效的數據展現形式之一，由內、外兩部分組成。

• 內部：由表頭、表體、表尾共3部分組成；
• 外部：由篩選區域、操作按鈕區、分頁區共3大類組成。

說完表格的組成，接下來將會從易讀性和易操作性兩個方面來分析下表格設計。

易讀性

1. 行與列

表格的組成，也可以看作行與列的自由組合，這種組合賦予了表格多樣性的特點。行與列構成了單元格的長與高，不同的長高會有疏密之分，充實與透氣之感。

B端中后臺通常會對應不同的角色及場景需求，根據目的及信息主體的不同，讓用戶根據自己的需求來定義表格的展示列及列的順序，也可以通過行與列的顯隱變化，來更好的滿足信息的傳達。

但需要注意的是系統應記住用戶上一次的自定義列設置，減少用戶重復操作。對于列的選擇，應盡量減少列的數量，既要展示用戶必要信息，又要避免出現用戶無關數據，以免信息冗余，影響信息閱讀效率性。對于用戶需要的非重點、輔助性信息可以通過入口提供的方式來解決。

默認排序，應從用戶目的出發，遵循用戶查看數據的習慣，尊重數據之間的關聯性，設計用戶查看、操作數據的路徑，而非隨機排列。

2. 數據展示

B端中后臺中的表格展示的數據多且雜，這就要為用戶先一步對數據進行梳理歸納，提高用戶獲取信息速度。

為便于對數據進行對比分析，一般需要在原始數據的基礎上給出差值、升降變化、平均值、總計等數據處理結果，減少用戶二次加工數據的過程，提升用戶閱讀信息的效率。

數據匯總展示

在表頭或者表尾分別提供了總計的數據，方便用戶進行快速查閱。

數據對齊展示

常用對齊方式有數字右對齊，文字左對齊，混合型文本左對齊，列標簽的對齊方式與數據的對齊方式保持一致。這樣能形成的視覺邊界線，便于視線的流動，從而快速提升數據的瀏覽、對比效率。

空數據展示

B端中后臺數據類型較多，對于空數據，切忌不要與數據為“０”進行混淆，對于空數據通用做法是用“－”表示，而不是什么都不顯示，會讓用戶誤以為是沒有數據還是“0”數據。

最好做法就是為空數據做出釋義，可以加在“列標簽”的名詞解釋文案中。

數據的關鍵屬性標識展示

對于用戶重點關注的數據狀態、上升和下降等，可以用符號進行標識，幫助用戶快速定位到目標信息。

3. 固定表頭、固定列和固定分頁

在有限屏幕內，有限的內容展示區域內，閱讀豐富且繁多的表格時，用戶不得不拖動橫向或縱向滾動條來閱讀信息。

固定表頭、固定列和固定分頁，能夠讓用戶明白當前單元格內信息的屬性而不至于不知道該信息的意思。

固定表頭

在固定的小區域內滾動會非常局促，而且區域滾動和全屏滾動同時存在時體驗也很不好。固定表頭可幫助用戶識別信息，在全屏滾動上去后固定表頭，有利于用戶向下翻屏時能夠便利的閱讀數據。

固定列

固定列的內容可視業務及目標用戶的訴求而定，一般采用方法是固定比較重要信息，方便用戶進行數據定位與對比，最好可以讓用戶自定義，滿足不同用戶訴求。

固定分頁

分頁處理目前有放在上部、下部或上下部均有，需要根據場景來選擇。分頁固定目的是為了省去用戶需要翻到頂部或底部進行操作的麻煩。

特別是可以自定義每頁的數量和需要橫向拖動數據查看，這就需要把分頁固定在底部，方便用戶橫向拖動滑條查看信息和進行翻頁操作。

4. 分頁

在Web端中的表格，涉及到跨頁的數據操作時，分頁會帶來不便。

但往往受限于數據加載的壓力，這種情況在大廠中尤其突出，加載數據都是億量級別的，在Web端和手機端都需要實時下載數據的終端，我們通常做法就是提供分頁展示數據來緩解服務器的壓力。

表格中的的數據內容超過一定“數量”時需要提供翻頁功能，而這個“數量”是由表頭的數據的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定。

原則上整張表不要超過一屏，考慮到每個用戶的使用習慣，我們一般提供可以讓用戶自定義每頁的顯示的數量，相比于跨屏翻頁而言，向下滾屏會更便利，也更符合瀏覽信息路徑。

5. 全屏查閱

表格全屏展示是非常有必要的：

• 特別是在小屏設備上，全屏模式下可以直接屏蔽掉左側導航欄、上方的報表區域和頂部的導航欄，可為用戶提供更多可視區域。
• 在大量數據前面，可為用戶提供沉浸式閱讀體驗，讓用戶更加專注，可減少與表格無關的視覺干擾。
• 用戶可通過ESC鍵或關閉按鈕隨時退出全屏模式，操作成本低。

易操作性

1. 篩選

在大量的表格信息中，如果沒有篩選查找信息簡直猶如大海撈針，而表格跟篩選是不分家的。

說到表格一定會說到篩選，篩選也就是數據過濾，常在數據量較大的場景中使用，其目的是通過關鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內容。

對于表格外部篩選，如果有時間會單獨出一篇詳情介紹。這里不展開詳細說。

篩選根據篩選功能的位置不同，可分為表外篩選和表內篩選。

• 表外篩選：篩選功能位于表格上方，與表內篩選的不同之處是過濾值可以不限“表格列”的內容、可單次進行多列的交叉篩選。
• 表內篩選：篩選功能位于表格內，也就是放置在列標簽上的篩選，受“表格列”內容的限制，僅能做單次單列的篩選。

2. 數據選擇

在信息列數較多的情況下，數據的選擇就尤為重要。當鼠標指針懸停在表格列或行時，給予視覺狀態的變化提示，可以讓用戶捕捉到所在的位置，而不至于視覺上的錯行，能夠降低人的心理壓力和增加掌控感。根據數據選擇功能分為單個選擇和批量選擇。

單個選擇

鼠標指針懸停在整行時應與默認態有所區分。當標識選中行或選中行的數量，選中行可操作的命令狀態須同步，明示當前行可操作的命令或反饋當前已選行的數量。

批量選擇

提供選擇當前頁部分行、選擇全部行、取消選擇全部行三種功能；狀態反饋分為半選態 、未選態、全選態共三種。

• 當用戶未進行選擇時，表頭的選擇框的狀態是未選態；
• 當用戶選擇一行數據時，此時表頭的選擇框的狀態切換為半選態，同時反饋此行的數量；
• 當用戶在表頭勾選“當前頁所有行”時，表頭的選擇框切換成了全選態，且給出了選擇“全部所有行”的操作。

3. 數據操作

對于數據的操作，主要針對表格內部來說。表格操作大體可分為顯性操作和隱形操作。

顯性操作

指操作選項顯示在行內，優點是明顯直觀，可以根據列表上的信息做出快速的判斷并且高頻發生的操作。

適用列數較少的列表。但弊端是信息過載，尤其是列數較多，可展示列數會隨操作數增加而減少，同時誤操作率較高。對于危險系數比較高的操作，也不建議采用這種設計。

隱性操作

當鼠標懸?；螯c擊時才顯示其他低頻、高危的操作選項，優點是界面簡潔明快，信息密度低，可以幫助頁面突出更加重要的信息，可減輕空間壓力，減少干擾。

弊端是增加用戶的點擊次數和提高了操作門檻。列數較少的表格不適用隱性操作。

4. 數據下載

為方便用戶對數據進行再次整合分析、統計分析等，可提供數據下載功能及多種下載格式。

5. 空表

對于B端中后臺來說，表格顯示最多就是兩種情況：一種就是表格有數據，這種最容易解決，有數據就顯示相應數據；還有一種表格是沒有數據，也就是空表狀態，這也是讓很多設計師容易忽略掉的頁面。

空表分兩種：可創建和純展示

可創建

是用戶有創建訴求，數據是由用戶或系統產生的，可創建分兩種：

• 比較輕量的方式，是直接示意用戶創建數據，無須給出表格樣式。
• 在表格的空白內容處加入創建的快捷入口，引導用戶新建。

純展示

沒有創建訴求的，數據是系統產生的，不是由用戶創建的，直接告之暫無數據。

寫在最后

看上去平淡無奇的數據表格，其實是非常重要的，通過合理的組織架構和呈現方式，使原本枯燥的數據呈現出生命力，這是一件很神奇的事。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

為什么了解網頁布局很重要？網頁布局在很大程度上決定了網站的訪問者將如何與網頁內容進行交互。

這里將介紹一些常見的網頁布局形式，例如卡片式、分屏布局、網格布局……一起來看看吧！

卡片式網頁布局

卡片式布局被Pinterest、臉書和推特等網站所使用，它非常適合在新聞網站和博客上使用，因為卡片式布局可以在頁面上放置大量內容，同時又保持每部分內容各不相同。

卡片式布局主要有兩種形式：

網頁中每個卡片的尺寸相同，卡片的排列非常標準，例如Dribbble的網頁布局；

使用不同尺寸的卡片組成頁面的布局，卡片間沒有固定的排序，例如Pinterest、花瓣的頁面布局。

分屏布局

當兩個元素在頁面上具有相等的權重時，分屏布局是一種流行的設計選擇，并且通常用于文本和圖像都需要突出顯示的設計中。

分屏設計特別適合電子商務網站上的產品頁面。產品圖片需要在頁面上突出顯示，但價格、規格、購物車按鈕等信息也要顯示。

大標題

隨著移動設計的盛行，大標題排版變得流行起來。大號字體在標題中特別流行，在一些網站的正文中也能看到。

較大的文本更具可讀性，可以改善使用體驗。另外它還提供了強大的視覺效果，因此這種布局在極簡主義設計中特別受歡迎。

個性化推薦

個性化算法推薦可以根據每個人的喜好量身定制數字體驗。人工智能技術的發展讓算法變得更易用，能精確分析用戶的喜好。

根據用戶之前的訂閱習慣，Netflix可以為用戶個性化推薦他們最有可能觀看的電影。

像Medium這樣的網站會基于用戶以前閱讀和喜歡的內容，向他們展示很多同類型的文章。

網格布局

網格為設計提了視覺上的平秩序感，以一種平衡且有組織的方式呈現內容，使內容更易于人們使用。

在網格設計中使用不同大小的內容可以在保持內容有序的同時增加視覺吸引力。

雜志版式布局

雜志和期刊的布局方式影響了網絡雜志的版面設計。這些網頁布局很適合有大量內容的網站，尤其是每天都需要更新內容的網站。

單頁布局

單頁布局將網站的所有主要內容放在一個網頁上，通過滾動完成導航，有時還使用視差滾動效果。

對于內容稀疏的網站，單頁布局是一個很好的解決方案。同時它也是內容敘事的完美選擇，比如交互式兒童讀物。

F型&Z型布局

F型和Z型布局是指用戶的視線如何在頁面上移動，即用戶如何掃描內容。F型布局有非常明確的視覺層次結構，因此適合內容更多的頁面。

Z型布局將視線吸引到頂部，然后沿對角線方向向下延伸到底部，然后再次延伸。

不對稱布局

在設計中，不對稱會產生動態化的視覺沖擊力。大多數情況下不對稱是由于圖像和文本間無法平衡而造成的。

由于不對稱會產生動態的、充滿活力的視覺印象，因此對那些想要傳達這種形象的品牌來說是非常有用的。

簡潔布局

這種布局的優點在于完全專注于內容，沒有視覺上的混亂。

干凈簡單的布局幾乎適用于任何類型的網站。許多優雅的網站都可以被認為是“簡潔的”，無論它們包含什么設計形式。

導航標簽

導航標簽適合用于包含少數項目的菜單，否則導航會顯得很混亂。

輪播

輪播內容包含圖像和文本，通常出現在網站的頂部，用來突出顯示內容。

總結

好的網頁設計具有很強的適應性并且對用戶來說始終是友好的。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

無論作為設計師還是普通瀏覽者，大家觀看一個網站時最先接觸到的就是網頁的頭部區域，這部分內容為網站的其他各個方面設定了基調，在網頁設計中起著非常關鍵的作用。

尤其是如今簡潔設計比較盛行，多數時候把頭部內容設計好就變成了吸引用戶眼球最好的辦法。網頁設計師在設計網站頭部時投入了大量精力，同時要兼顧創造力和實用性。根據一項Google的研究，用戶只需要短短數秒就可以形成對一個網站的看法，甚至有些觀點是在令人難以置信的1秒內形成的。用戶對品牌的了解就是從這么短的時間內開始的。

頭部區域在哪兒？

在通常網頁設計中，首頁上方的整個空間都被視為頭部區域。作為人們在加載網站后的最初幾秒內看到部分，頭部信息起到了一種邀請作用，它應該提供有關網站的基本信息，以便用戶能夠在幾秒內了解網站的主要內容。

如果以招聘活動站點為例，整個頭部區域設計要明確傳達企業形象，及本次招聘活動的特點。給瀏覽者一個強烈的視覺印象，企業已向你發出邀請，我們對人才十分渴求，等等信息… 如果有線上線下活動同時參與，那么在整體風格上盡量保持一致。

包含哪些內容與功能？

網頁頭部的任務是給用戶提供一些基本問題的答案：代表什么品牌，提供什么服務等等。如果我們在內容上引起了用戶情感上的共鳴，那么就是正確的設計。

那么主要元素通常包括：

• Logo 或品牌標識
• 交互指引
• 標題Slogan
• 導航要素
• 搜索功能

在設計網站頭部內容時，從思維層面來講沒有任何東西會限制你的創造力，它應該是令人難忘的、簡潔和兼具實用性的，是一個可以展示創造性的開放領域。

下面讓我們一起來看看頭部內容設計的一些技巧。

1. 關于尺寸

對于網頁頭部圖片的大小是沒有統一的答案。有時候設計師希望提供相對固定的數字，但網頁設計最大的難點之一是很難確保每個屏幕尺寸的有效性。即使兩個屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內容也不一定完全一樣。

因此，我們不要拘泥于精確的像素概念，最好遵循經驗積累的常識規則。

頭部的高度本著不干擾內容感知的基本原則。對于一些展示信息資源的頁面，較小的頭部區域是一個不錯的選擇，而對于落地頁或者企業客戶首頁，頭部區域可能會更大，而且多數大客戶會有主視覺單屏展示頁。

如果某些網頁，例如落地頁頭部內容較長的情況下，最好在首屏給下一屏內容露出一些空間，這樣用戶就可以意識到下一頁還有內容，引導用戶滾動。

2. Logo展現

當一個人發現自己在陌生網站上，總是習慣于從屏幕的左上角開始瀏覽網站。盡管設計師有時候認為打破常規的布局也可以帶來不錯的效果，但是多數用戶如果他們常規位置找不到預期的信息，將會不假思索地認為這個頁面是難用的和不規范的，需要花費很多的努力才能理解。這就要看你的設計目的和受眾群體能夠接受哪些程度的變化，我們今天主要說大多數受眾。

Logo ——與居中或右側放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側要低。

3. 吸頂導航欄

吸頂導航，換句話說就是「粘性標題」，當你滾動頁面時，導航區在頁面中跟隨，現在成為一個網頁設計標準。如果不違反網站整體設計理念，請將導航欄吸頂固定。無論是PC端還是移動端設計，這都是一個好的選擇：

• 例如長頁面展示、瀏覽內容同時客戶需要導航區總是在視線范圍內。
• 如有滾動信息，不斷提示客戶點擊，則可置頂或置底處理。

可根據頁面內容展示要求，向下滾動時調整導航背景透明度，盡量少的影響內容展示同時使頁面看起來更生動和通透。還可以在滾動時簡化導航欄樣式或高度，使用戶能找到但又不過于搶眼。

總之，固定導航欄有助于提升用戶體驗，保持用戶導向并給予了他們更多控制權。

3. 關于圖片的應用

頭部內容所用圖片可以選擇直接和要表達的業務相關性很強的，例如招聘類網站使用招聘場景圖片；也可以選擇中性感覺的例如辦公場景、城市風景類圖片進行虛化降低清晰度或明度來突出前景內容；

高質量圖片——攝影對于網頁設計師來說是一個強大的工具。它可以講述一個故事，喚起用戶的情感，并鼓勵訪問者進一步滾動。對于那些有強烈沖擊力的圖片的網站，試著做一個透明的標題，它可以更好地顯示圖像，并保留了主要鏈接。

輪播圖片——如果客戶給了幾張代表該企業業務的出色照片，這種方式就沒錯！企業希望用戶可以滾動瀏覽一組精美的高分辨率圖像。

插畫——網站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯系。如果圖片是獨特的且易于辨認，即使是從網站標題中剪切出來，效果也會很好，可以利用當今的插圖潮流來實現這一點。

4. 視頻或動畫

當然我們也不能只關注靜態圖片，添加視頻也是最有效的網站頭部創意之一。如果可能的話，嘗試著在頭部內容中添加主題視頻材料，很多網站利用在背景中添加短視頻來吸引用戶，盡可能以最好的方式展示他們的公司或產品。

△ 華夏幸福校招官網首頁動畫，撥云見日的效果加上中式剪紙風格的運用，將公司各業務線融合到幾個轉輪中，產生了故事性的動畫場景。

如果想要使設計更具吸引力、生動和令人難忘的另一種方法是添加動畫。它可以使網站頭部內容變得非?？帷Ｒ悦考拘@招聘企業站點為例，各大公司對應屆生群體的追逐，很大程度上體現在對該群體審美和喜好的迎合上，年輕有活力的動畫或視頻元素絕對是吸引眼球的不二之選。

當然不一定只有滿屏大型動畫，一般動畫越復雜面積越大占用流量越多，客戶打開延遲也影響觀感。這時候我們可以根據功能不同，設計一些交互性的動畫，去提升客戶使用感受，盡量不影響網頁打開速度。

5. 移動端頭部設計

網頁頭部不可能只顯示PC端的網頁上，還應該正確顯示在移動端的網頁上。因此，在近年的設計中，網頁必須具有響應性，并且能夠很好地適應各種移動設備，這樣才能帶給用戶完整的設計體驗。

移動設備的日常使用廣泛性早已影響網站設計，即使在PC中，也有一些細節看起來像是面向移動設備的網站設計。例如，Banner和漢堡包菜單都起源于移動設計。

移動端有著與PC端不同的屏幕尺寸和操作方式，很多時候需要設計師在一開始就考慮到兩種界面的適應情況，比如在PC上頂部一條的導航，到移動端就演變為一個漢堡包菜單。而原本PC頁面中展開顯示的內容，在移動端會向下層延伸，首層界面成為一個內容聚合頁。

寫在最后

網站是以頭部內容為先導的，它就像是一張獨特的名片。因此，我們在設計網站時，盡可能最大限度地關注該區域。

最后還要提醒大家，一定記得定期更新網站頭部內容哦！以校園招聘大客戶為例，大多數企業都會在每年春秋兩季的招聘旺季更新其招聘主題風格，以保持網站的新鮮感和時效性。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

用戶在操作系統時所看到的頁面框架其實就是系統布局，它是一個產品最外層的框架結構，一般包含了頂部導航、側邊導航欄、面包屑、圖文、卡片、內容等元素。

對于設計師而言，想要了解一個中臺，首先要了解它的系統布局，系統布局是頁面設計的基礎，它與頁面的關系，就如同建筑與地基的關系。日常完成需求時，UI 界面反復的調試頁面寬度與卡片比例會占用我們大量的時間。為了提高工作效率，并且把更多的時間放在業務、視覺創新等方面，我們就應該需要一套完整的布局規范。

對整個公司產品體系而言，內部員工與普通用戶使用的操作系統達到幾十甚至上百個，單一的頁面布局滿足不了各個子項目的使用場景。所以我們從前期的布局框架設計調研到產品業務的特性，定義了中臺界面的幾大類型，并且在我們的設計規范中定義了幾大類型系統布局方式，根據其布局方式定制好柵格，方便日后在各個業務場景中使用，從而能夠保持一致性、并且可擴展，方便快速迭代和維護。

了解布局

1. 布局方法論

視覺層次

對于中臺的 UI 設計師們而言，良好的理性思維相對比感性的視覺思維更加重要，因為在 UI 設計師設計頁面時需要把很多互不相關的元素有秩序的組織在一起，正確引導用戶操作與使用。亨利·亞當斯（Henry Adams）曾經說過：「混沌是自然法則，秩序是人類的夢想」。人們總是喜歡秩序，因為秩序可以讓事情變得更容易理解。這同樣適用于數字產品的用戶界面，當 UI 元素被有序組合和結構化時，人們可以輕松的使用應用程序和網站，并對產品感到滿意，所以設計頁面時需要結合視覺層次理論。視覺層次理論是設計過程的核心方法之一。最初是建立在格式塔原理的基礎上，它觀察到了用戶對相互關聯元素的視覺感知，并展示了人們如何將視覺元素歸為一類。那么什么是視覺層次呢？官方概括：視覺層次結構致力于一種用戶能夠理解的方式呈現產品的內容，以便用戶可以理解每個元素的重要性級別。它可以組織頁面內容，以便大腦可以根據物理差異例如：大小，顏色，對比度，樣式等區分對象。

蘋果的設計一直以來都是引領著設計趨勢，其設計被國內外用戶所認可，所以就以蘋果官網作為案例。其中，字重對比：蘋果官網在字重上給人眼前一亮的感覺，它采用 Medium+Bold 的字重使得標題與詳情內容產生強烈的大小對比，用戶進入官網的第一眼便能了解核心內容。顏色對比：在顏色上使用黑色背景承托產品和內容，強烈的黑白對比增強了信息傳播中的識別度和對比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁面層次感更加的豐富。如下圖：

格式塔理論

往往用戶打開頁面進行閱讀或者操作界面時視覺的第一感受是產品的整體效果，而并不會感知到一些較細節的元素。往宏觀來講當人們感知到一個物體由許多元素組成的復雜對象時，人們會采用有意識或無意識的方法將這些部分安排到整個組織的系統中，而不只是簡單的元素級。它適用于不同級別的感知，但是視覺部分似乎是設計師設計界面時最能體現價值的部分，這其實就是格式塔理論，格式塔（Gestalt）這個術語來自德語單詞 Gestalt，中文翻譯為「形狀，形式」。

格式塔心理學家庫爾特·科夫卡（Kurt Koffka）的一句話可以捕捉到這一運動背后的基本思想：「整體不是元素基因的總和」。官網概括：「在心理現象中，人們對客觀對象的感受源于整體關系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個統一的整體，部分之和不等于整體，因此整體不能分割」。格式塔理論中元素之知見的原則分別為臨近，相似，連續，封閉和連接。

在我們的現實生活中有很多自然規律都遵守了格式塔原則，比如說每到秋天，北方的嚴寒氣候不再適合大雁生存，這時候大雁便會飛往較暖和的南方，當人們看到天空正在南飛的大雁隊伍，它們組織鏈接得十分嚴密，并且群體在往同一個方向移動，所以隊伍的形狀在我們的大腦中將它們視為一個群組的一部分，產生人字形或一字形的圖形。

信息框架

剛剛我們也介紹了視覺層級結構和格式塔理論，接下來簡單介紹一下信息框架，它也是在系統布局中需要考慮的內容。信息框架是將信息內容進行組織分層，一個產品的信息框架取決于其特有的業務，他與業務強相關并且需要了解用戶群體目標。根據業務和用戶目標將內容組織搭建信息框架，形成系統布局的骨架，方便用戶在瀏覽或操作頁面時能夠快速找到重點內容，提升用戶使用效率。我們用今日頭條 Web 端和飛書 Web 端兩個線上產品作為案例分析吧，今日頭條和飛書屬于兩種完全不同類型的產品，那么其信息架構也完全不同。

今日頭條屬于門戶類新聞客戶端，主要是生產內容展現給用戶，首先進入到產品映入眼簾的是無窮式的信息流，它不需要用戶登錄/注冊作為身份門檻，而是直觀的把內容展示給用戶，推送用戶感興趣的內容，也不需要用戶決策任何選擇，用戶只需沉浸式的閱讀體驗即可，目的是方便第一時間抓取用戶、吸引用戶達到留住用戶的目的。當用戶產生興趣以后想要進入下一步操作如：點贊、評論時才會彈出登錄/注冊，一方面是獲取用戶的身份等信息，另一方面是間接性的把用戶留下來。從產品業務屬性來看，今日頭條的布局把重要的內容放入中間，并且占有整個布局的一半大小，其次放在內容兩側；

飛書屬于工具協作類產品，用戶第一次打開產品需要注冊才能使用。與新聞閱讀類產品不同的是工具類型產品用戶目的比較明確，所以首頁做成一個功能介紹頁面，作用是引導用戶了解產品核心功能從而轉化成產品的用戶。當然功能介紹頁也是一個網站的門面，首頁想要出彩，不僅需要在布局上做的合理還需要考慮網站的色彩、插圖等元素的統一性。在設計網站時，首頁的功能介紹頁一定要充分突出自身產品特色，強調出自身產品的優勢和亮點，如飛書首頁主要是想突出其產品能夠提高工作效率，所以直接把「在飛書，享高效」slogan 這句話放在了首頁的第一屏，輔助文案詳細的介紹了產品的核心功能，直接抓住用戶的痛點。用戶完成注冊以后，進入到功能頁面，如右下圖可以看出，其系統布局的模塊分成三份，占面積最大的模塊屬于產品最核心的部分也就是聊天窗口，較重要部分是聯系人部分，最小區域是功能 Tab 部分。

小結

所以對于設計師而言，在設計頁面時必須熟練掌握一些基本設計基礎知識，并且將這些知識靈活運用到實際的工作當中。比如設計師在搭建系統布局時需要熟知頁面視覺層次、格式塔理論、信息框架等知識才可創建合理的布局基礎。當然布局框架只是整個產品的基礎骨架，在骨架確定之后，設計師才可進行下一步的設計，如統一的視覺表達元素，清晰的功能操作，流暢的交互表達。

2. 布局的設計原則

系統布局規范，需要通過統一的設計元素和間距規范去引導使用者們（使用規范的設計師）跨平臺使用并且能夠適配不同屏幕尺寸，目的是達到一致性，可適配、可控性原則。

一致性：對于界面來講，界面中的元素和結構需要保持一致性，如：在使用布局時應當使用一致的網格，基準線和填充，在使用設計元素時配色、圖標、文本等需保持一致。

可適配：布局是可自適應的，根據用戶在不同的設計環境下能夠通過交互動效、界面樣式有效作出極致適配反應。用戶操作后需給出即時反應。

可控性：當用戶看到界面時應直觀有效傳遞內容，如界面中模塊區域明確、內容組織明確、表意明確都能使得用戶快速理解。界面需要簡單直白，讓用戶快速識別，減少用戶記憶負擔。

3. 適配方案

在設計過程中，為了減少設計師們的日常溝通和理解成本，在設計內部我們統一了一套設計畫板尺寸為 1280。經過我們官方調研得出在中臺系統中用戶使用的電腦屏幕主流分辨率分別為：1440*900、1366*768、1920*1080、1280*800，而1280 是主流分辨率中最小且最為保險的的一個尺寸，在設計頁面時設計師如果能夠在 1280 尺寸下，縮小寬度或拉升頁面寬度都能保證沒有遮擋或擠壓問題，那么設計是合理的。在我們的規范中頁面再小于 1280 時需要吊起系統的橫向滾動條。在中臺系統中考慮到用戶效率問題很少做響應式，所以常規情況下設計師會限定界面的一個最小值。如果設計師把畫板設置為 1440 或者 1366 時可能會存在其在畫板中頁面大小正好合適，但是頁面上線以后縮小瀏覽器可能會發生遮擋或擠壓的情況。所以我們建議設計師們使用 1280 寬度畫板畫圖。

4. 框架

首先先分析一下界面框架，我們將頁面的用戶操作行為進行層級區分。我們至下而上將元素進行層級分層，目的是把用戶界面模塊化。界面可分成背景區域、內容層、全局控制層、內容彈層，每一層都具備獨特性，將界面中所有的信息層級提取分類并且按結構屬性分層，目的是能夠使得頁面視覺和交互邏輯符合用戶的習慣認知。之前我們有提到過視覺層次、格式塔理論和信息框架，設計師在創建這一步的時候可以用來指導搭建一套合理的頁面信息層級，一個內容模塊都屬于一個容器，容器可以承載各種內容元素。

背景層

背景層樣式固定，在界面中永遠置于界面底部，并且一般會給予背景層中性色，作用是方便突出內容層和全局控制層。

內容層

視圖結構中最核心和復雜的一層，他與業務強相關，內容層的容器承載了業務場景的用戶需要獲取的核心信息以及輔助核心任務的操作。容器承載了內容，從 Material Design 中的 Elevation（海拔）概念中可以了解到，它屬于第二層級內容，基本布局結構有平行結構或者父子結構。如下圖卡片屬于容器，卡片中承載了數據圖表等內容，整個卡片+內容就屬于內容層。

全局控制層

全局控制層我們定義他在內容層之上，屬于頁面第三層級內容，一般在業務場景中對整個網站的控制以及導航功能如：Header menu、Sidebar menu 組件，如下圖中 Header menu 浮在內容層之上。

內容彈層

當前任務或者內容相關的臨時出現層，優先級高于內容層，一般承載當前需要臨時處理的任務或者需要進行內容補充說明等功能。如：Modal（Dialog 各個平臺叫法不一致）、Tooltip、Popover、Notification 等組件 。其中 Modal 是以滑出或者彈出的形式展現給用戶。Modal 它包括兩種類型，一種是模態內容層不可操控，被蒙版遮罩禁用，比如在業務中需要較為聚焦的分支流程操作時使用。另一種是非模態，吊起彈出層后不印象內容層操作。當然，Tooltip、Popover、Notification 都屬于非模態，反饋較輕，不干擾用戶使用界面。如下圖的頁面中的內容彈層使用了 Popover，在次頁面它的功能就是加以補充說明。

網格基礎

1. 單位

隨著科技高速發展，屏幕分辨率也越來越多樣化對于 UI/UX 設計師來講必須熟練的基本知識方便日常工作所需。首先我們先了解一下屏幕中的一些單位。

• 「PX」pixel，像素，大多數電子設備成像的基本單元，同樣尺寸的屏幕成像單元越細小、越密集的屏幕，分辨率就越高；
• 「PT」point，點，這個單位，就同時出現在 iOS、CSS、還有傳統的平面設計里，與 px 相比 px 是相對單位而 pt 絕對單位，如在設計稿中如果導出一倍圖 1px=1pt 那么導出二倍圖就是 2px=1pt，它是一個絕對長度，為1/72英寸；
• 「PPI」pixel per inch，每英寸像素數，決定電子設備的物理顯示尺寸，只有涉及到顯示才有意義。該值越高，則屏幕越細膩；
• 「DPI」dot per inch，與PPI一致，唯一區別是它表示每英寸多少點，該值越高，則圖片越細膩；
• 「DP」density-independent pixel，是安卓開發用的長度單位，1dp等于屏幕像素密度為 160ppi 時 1px 的長度，因此dp 在整個系統大小中是固定的。
• 「SP」scale-independent pixel，安卓開發用的字體大小單位，可以認為 SP=DP。

2. 像素密度

在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能導致開發實現稿的視覺不符合設計師心理預期，比如：相同像素尺寸的 UI 元素在低密度屏幕上顯得較模糊，而在高密度屏幕上則比較清楚。同一物理尺寸（肉眼所見尺寸）下，低密度顯示器的像素個數明顯小于高密度顯示器的像素個數。

其實像素是與密度沒有關聯，我們簡稱密度為 DP (讀作 DIP，英文全稱 Density-independent pixel )，它是可縮放的靈活單位，可在任何屏幕下現實相同的尺寸，如圖顯示，紅色網格為像素密度，被放大內容為 UI 元素物理尺寸。

所以我們可以得出，DP 可以自適應屏幕的密度，不管屏幕密度怎么變化，實際顯示的物理尺寸相同，DP 可以保證物理尺寸的一致性，所以 DP 是目前比較適合 UI 設計的單位。當屏幕的密度為 160 的一個物理像素時，1PD=1PX。要計算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。

3. 網格

關于網格

網格線(Grid Line)，網格線又稱布局分割線，它是構成網格結構的分界線。一般在布局中它們是由行網格線和列網格線組成。如下圖是模擬網格做了一個示意，其中橘黃色兩根線分別是行網格線和列網格線。

網格軌道(Grid Track)，兩個相鄰網格線之間的空間。你可以把它們想像成網格的行或列。如下圖橘黃色的行網格線和列網格線之間的空間既是網格軌道。

網格單元格(Grid Cell)，兩個相鄰的行網格線和兩個相鄰的列網格線之間的空間屬于網格單元格。這是網格系統的一個「單元」。如下圖橘黃色的行網格線和列網格線交叉處即是網格單元格。

網格區域(Grid Area)，由單個或多個網格單元格組成，它是可以用來擺放頁面元素。如下圖所示，橘黃色的行網格線和列網格線交叉處即是網格區域。

網格設置

在設計界面時可以通過網格定制能夠使界面更加有序、整齊、規范，網格的主要用途之一是保持設計元素對齊和排序。通過建立一個網格系統，設計師可以為自己創建一個結構來適配不同的屏幕寬度。

在我制定的規范中一般會把網格的基數設置為 4，它不僅符合偶數的思路同時也能夠匹配多數主流的顯示設備，如中臺系統的用戶主流分辨率用 1440*900、1366*768、1280*800。我們可以通過設置網格規范幫助設計師快速搭建頁面，使用有律可循的布局空間的設計給到開發減少溝通成本。下圖所示設計布局網格由三個元素組成：列寬，間距，邊距。

在 Sketch 中設置網格，在菜單欄中找「視圖」-「畫布」-「網格設置」-彈出浮層可設置網格大小，網格設置的基數設置成4，之后在設計界面時可按照網格基礎的倍數作為組件的大小和頁面元素間距分割，如下圖：

我們放大頁面局部大家可以看到，把網格基數設置成 4，每個網格單元格為 4*4 大小。同理，如果把網格基數設置成 8 以后，每個網格單元格大小為 8*8 大小。

定義布局模塊

界面框架內系統布局是頁面所有模塊的組合方式，我們定義一個頁面框架中基礎模塊和內容模塊的數量最好不超過 3 個。經過調研和歸納總結出 3 大布局類型，分別是上下布局、左右布局、T 字型布局。

1. 上下布局

上下布局布局是 Web 端運用最廣泛的布局方式之一，頁面內容區以 feed 流形式展現，一般用在 Web 端官網首頁。設計師普遍做法是對兩邊留白區域為內容區并進行最小值的定義，一般定義值為 1200 較多（具體寬度要設計師如何設置柵格，后面會講到如何設置柵格），當留白區域到達極小超過極限值之后需要對中間的內容區域進行動態縮放或遮擋，此邏輯需設計師根據業務所需而定。也有少部分設計師會設計成全屏布局，內容隨瀏覽器寬度自適應。

其優點是頁面結構清晰簡單，強突出內容區，但缺點是布局的規矩呆板，變化少。設計師如果不注意合理的視覺元素和色彩細節變化，用戶很容易感覺到乏味，此布局適用于層級較為簡單頁面。

巨量引擎（Ocean Engine）是字節跳動旗下的營銷服務品牌，整合了今日頭條、抖音短視頻、火山小視頻、西瓜視頻、懂車帝、Faceu 激萌、輕顏、穿山甲等產品的營銷能力，為全球廣告主提供綜合的數字營銷解決方案。我在設計此官網時正是采用了上下布局作為頁面布局，頂部導航整合了所有子頁面的內容，導航下方為主要內容區并且內容定寬，當時采用此布局原因第一是因為次官網層級較簡單只有三個層級內容，第二是官網更需要的是突出內容區，所有頁面使用次布局更為合適。

2. 左右布局

設計師在設計重內容，輕導航類型網站是常用左右布局作為基礎框架進行頁面設計。此布局把系統頁面分為兩大模塊，其中設計師常見的做法是將左側設置成導航欄模塊并且固定，常常用來控制全局內容。而右側區域設置成工作區域或內容區，內容區可進行動態縮放。

下圖為飛書溝通窗口截圖，由于關系到內部信息保密性我把內容進行了模糊，從外觀結構上看還是能大致了解飛書結構是采用了左右布局，整個布局結構清晰有理也是符合左右布局特點。從交互體驗分析左側屬于導航區，它承載了不同功能并且固定。飛書屬于即時溝通產品設計師考慮到瀏覽器窗口有限所以對導航設計成較小模塊，而右邊為聊天窗口對于業務屬性分析它更為重要，所以模塊較大。其導航欄固定，內容區可進行動態縮放。

3. T字型布局

T 字型布局常用在 Web 端的中臺系統中，因為中臺系統業務結構復雜、層級多，而 T 字型布局能夠解決復雜結構的問題。使用此結構能夠把頁面結構清晰化，主次更加分明。設計師常常的做法是將頂部作為一級導航欄方便控制全局，二左邊設計成是二級導航并且固定導航欄固定，右邊的內區域可進行動態縮放（一般會把其設計成柵格動態區域），內容隨瀏覽器寬度自適應。

下圖是 Material Design 設計文檔，首先簡單介紹一下 Material Design，它是由谷歌的設計團隊創建的一種語言，宗旨是幫助設計師們創建易用性和實用性較強的網站和應用程序，其設計理念是將現實中的物理學帶入進設計中。Material Design 設計文檔中的結構使用了 T 字型布局作為基礎布局。頁面分為了三個模塊，其中頂部導航作為頁面一級內容進行全局控制，接下來左邊為側邊導航作為二級內容控制頁面，右邊是內容區滿足用戶使用瀏覽。從放眼望去整個頁面架構清晰明了。

4. 小結

以上為 Web 最常見的三大布局，但是需要大家在實際的工作中靈活運用。設計師在日常工作中可能會遇到更為特殊的業務場景，設計師可以通過整理基礎模塊然后分析其業務的信息框架，將模塊進行相互組合、嵌套歸納可以總結出更多的 Web端布局框架并落地到業務中。

網頁柵格

剛剛在定義布局模塊中已經分析過了三大布局類型，接下要分享的是 UI 設計師更為關注內容「網頁柵格」。網頁柵格也是設計師口中常常提及的柵格系統。其實網頁柵格系統是從平面柵格系統中發展而來，它延續了平面設計的方法與風格，在網頁中使用柵格能夠使得網頁信息展現更加清晰明了、美觀易讀。

首先網頁柵格系統基本由是柵格總寬度/頁面總寬度（W）、一個柵格的寬度（a）、柵格與柵格之間的間隙（i）、一個單元的寬度（A）、外邊距（M）組成。

1. 列寬

一個柵格的寬度（a），我們稱之為列寬，一個列寬包涵了N個網格單元格（Grid Cell）我們也可以把它看成一個網格區域(Grid Area)，在上面我們已經講到過網格的內容，主要目的正是為柵格做鋪墊。其中我把一個網格單元格設置為4（原因在網格中也解釋過，如果忘記的同學可以爬樓看下）。由此可見列寬非固定值，這樣可以使內容自由適配任何屏幕尺寸。在柵格中列寬由屏幕尺寸決定。

2. 水槽

柵格與柵格之間的間隙（i），我們稱之為水槽，一個水槽寬度大于等于1個網格單元（Grid Cell）。在柵格中水槽為一個定值，寬度可以是N個網格單元，如網格單元格設置成4，那么水槽可以是4、8、12、16…N*4。

3. 柵格單元

1個列寬+1個水槽寬度即一個單元的寬度，一個柵格總寬是由N個柵格單元組成，次寬度不固定，由屏幕尺寸決定。

4. 柵格總寬

列寬+水槽再成以N即是一個柵格的總寬，公式為：W=(A*n)-i。

5. 柵格設置

經過調研我們得出常見的柵格分為 12 列柵格系統和 24 列柵格系統。其中 12 列柵格系統在流行的前端開發開源工具庫Bootstrap 與 Foundation 中廣泛使用，適用于業務信息分組較少、業務結構較簡，單個盒子內信息體積較大的中后臺頁面設計。24 等分的柵格系統適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的中后臺頁面設計；相對 12 柵格系統，24 柵格系統變化更加靈活，更適合內容比較多樣復雜的場景。如下圖分別是 12 柵格系統（左）和 24 柵格系統（右）。

6. 小結

在柵格系統結合布局結構和網格做了我做了一些知識結合，其實前面所講的網格版塊和布局版塊都是為柵格做一個鋪墊，利于同學們更加深入的了解網格、布局、柵格三者的關系。

寫在最后

系統布局只是網頁中的基礎部分，但也是核心內容，一個產品布局需要根據其業務屬性決定。布局搭的好相當地基打得好，但是同時在對美感的追求之上，還應當結合可用性來看待設計。在實際的工作中肯定還會遇到各種形形色色較奇葩的需求，所以希望這篇文章能夠做的不是限制而是啟發，大家可根據此次分享內容能夠進行舉一反三利用到實際的工作當中。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務