無論是2B產品，還是2C產品，用戶系統都是基礎。對于非互聯網產品從業者，2C用戶系統的場景和功能通過日常各類APP的使用，大家都非常熟悉。因此，筆者通過和2C產品的對比，談談2B SaaS產品的用戶系統設計。
2C產品面向的用戶是個人，用戶系統的核心是獲客，因此大多2C產品的用戶系統設計重點在于方便用戶注冊、登錄，能夠建立精準的用戶畫像，從而達到流量變現的目標。
2B產品面向的用戶是企業，用戶系統的核心是組織、員工精細化管理，提升人效，從而實現節約成本的目標。
2C產品的注冊主要用于個人用戶注冊場景，重點在于提供多種渠道的注冊方式，如賬號、手機、第三方社交應用（微信、微博等），其核心目標是既能方便用戶注冊，又能多渠道多平臺賬號打通。
2B產品的注冊分為兩部分：企業管理員代表企業注冊和企業員工注冊。
2B平臺型SaaS產品，和2C最大的區別在于產品需要用戶付費。因此，平臺方為企業（平臺租戶）提供了注冊入口，一方面需要方便租戶能夠通過其他渠道快速注冊試用產品，一方面需要驗證企業相關信息，識別該用戶確實為潛在用戶。
1）企業注冊：
當企業管理員代表企業注冊時，需要提供的注冊信息：管理員昵稱、手機號、郵箱、企業工商信息（名稱、組織機構代碼、地址、法人信息等）。
其中工商信息的完整度，不同的產品要求不一樣，需要根據具體產品而定。如果方便注冊拉新，盡量減少工商信息填寫要求，如果產品安全性要求較高，可以盡量要求工商信息填寫完整。
2）企業工商信息認證：
這部分并非強需求場景，取決于產品的安全性要求。一般安全性要求較高的平臺產品，會在企業注冊后，進入到企業工商信息認證環節。此環節要么是平臺管理員人工審核，要么通過第三方認證驗證企業工商信息是否合規。企業完成認證后，即可試用產品。
如非安全性要求較高的產品，可以直接跳過該環節，租戶通過注冊頁信息填寫完整后既注冊成功。
3）企業員工注冊：
登錄場景比較容易理解，目前B端產品相較C端產品仍然比較傳統，多采用郵箱/手機進行登錄。
未來也希望可以實現，B端產品能夠和更多C端產品平臺打通，可通過通用的第三方賬號進行登錄，實現業務與社交的連接。
用戶畫像是2C產品至關重要的內容，只有精準的用戶畫像，才能更精準的服務好用戶。無論是電商，還是資訊平臺，基于用戶畫像的精準營銷投放才是產品的核心。
2B的產品很少有講用戶畫像相關的內容，事實上對于2B產品而言，用戶畫像也至關重要。
筆者目前從事CRM產品相關工作，CRM核心要解決的問題就是幫助你的客戶獲客，那么如何去建立客戶的企業標簽，去按照企業標簽屬性，借助大數據分析，幫你的客戶找到他的客戶群，是筆者近期在研究的課題。
2C的產品從本質上來講不存在組織結構，個人用戶即為產品主體，但會存在群組/社群的概念。
2B產品的應用主體是企業，而組織結構是企業運營管理的必要手段和方式。因此組織結構管理是用戶系統的重要組成部分。
1）建立組織結構
組織的單元是部門，因此管理員需要能夠按照企業組織結構建立、調整（編輯、合并）、刪除部門。
2）部門樹結構
部門作為組織結構的單元，只是組織結構的分子，而要形成組織，就要按照企業的業務形態要求形成一定的層級體系。因此部門不僅僅只是簡單的信息描述，還需要有層級描述，這就需要我們在建立部門時按照層級結構建立部門，定義清楚所建立的部門是上級部門、下級部門。
3）通訊錄展示
管理員通過后臺創建完組織結構后，企業員工可通過前臺查詢按照部門結構展示的通訊錄。
角色管理是B端產品的特有功能，企業員工按其所負責的業務模塊劃分不同的崗位職責。
由于企業數據具有較高的安全性和私密性要求，按照崗位職責的不同，不同崗位的員工對于業務數據的操作/查看權限不同。
因此，我們設計了角色管理，該角色并非嚴格意義上的崗位職能角色，而為了區分不同的員工不同的系統權限所設計的系統角色，這就是RBAC設計。
1）建立角色
建立角色的主要目標即為建立一個用戶權限組，該權限組內的用戶具有相同的權限。
2）分配角色權限
基于角色分配系統權限，以實現不同的角色下的用戶擁有不同的權限。
員工管理是B端產品的特有功能，員工是企業組織的重要組成部分，員工也是產品真正的終端用戶。
B端產品從本質上是要能夠幫助企業員工提升工作效率，提高企業人效，以實現企業管理者降低運營成本的目標。
1）新建員工
前面提到的用戶注冊即為新建員工的過程。包括被動邀請和主動注冊兩種形態，主要目標是將員工信息注冊至系統，并建立員工和企業的關聯關系。
2）建立員工匯報關系結構
為了實現精細化管理，企業內部一般按照組織結構設定員工的匯報關系，因此從CEO到基層員工會形成組織關系樹，該結構可以和組織結構完全一一對應，即該部門下的所有員工均匯報給部門負責人，但也有部門內部分不同的小組，不同的人匯報給不同的小組負責人。
因此匯報關系和組織結構關系有一定關聯，但并不是完全一一對應，所以我們需要設計員工匯報關系功能。
3）員工離職設定
為了保證企業數據的安全，員工離職后，需凍結員工賬號，離職員工將不能以該企業員工的身份登錄系統，以確保企業數據的安全性。
至此，2B用戶系統的功能基本設計完整，其重難點在于組織結構、權限控制，需要重點關注。
文章來源：人人都是產品經理
當我們在談 SaaS 的時候，在談什么？
● 什么是 SaaS
● SaaS 產品的優缺點
● SaaS 產品的銷售模式
● SaaS 產品指標
● SaaS 業務指標
● SaaS 收入計算
一、什么是 SaaS
這個模式讓軟件變得和水電氣很相似，只需要每月繳納固定的費用即可享受服務。
——馬克·貝尼奧夫（salesforce 創始人）
訂閱模式
SaaS（software as a service），軟件即服務，是一種軟件交付和銷售方式——訂閱許可模式。
它基于云， 運行在遠程服務器上，集中托管。因此不需要獨立部署甚至物理分發來完成交付和使用，這意味著用戶通過網絡即可使用。
例如，過去你使用 office，需要買一張光盤或者在線下載，輸入序列號（一次性付費），進行本地使用。如果要更新你需要重新購買和下載版本。而 SaaS 只需在線登錄即可使用服務，無需安裝和手動升級，并根據使用時間付費（按月/年）。
規模化和復利
SaaS 采取訂閱付費（按月/年）模式，良好留存的情況下，當月/年的收入就是下個月/年的基礎，不斷累加下去（復合累積收益），形成良好的現金流。
也因此，SaaS 產品的收入具有了經常性、可預測性的特點。這使得，企業可以根據現金流進行規劃，甚至通過融資，提前獲取未來的收入，來進行產品的增長和擴張。
同時，對于訂閱者而言，無需購買硬件和中間件（前期成本），以及實施、維護、更新、運維和管理成本（后期持續投入成本），只需要連接網絡即可使用，致使決策和投入成本得到了大幅降低。同時，后期可根據業務的發展，升級套餐或增加數量，這些優勢致使 SaaS 軟件更容易擁有大量客戶，形成規模。
從復利性角度，SaaS 產品的估值是經常性收入的若干倍。因此，SaaS 產品的改進，不僅僅是提高下個月的或者長期的收入，而是整個企業的市值，可謂“一本萬利”。
開放和靈活
SaaS 會針對不同組織的訴求，提供多種套餐方案，通常在付錢前，用戶可以進行免費試用，從而更好的判斷是否滿足自身需求。
同時，SaaS 會開放自己的接口（API），方便與其他軟件集成，從而更好的滿足客戶業務。SaaS 廠商也會對接市場上跟產品業務相關的主流軟件，從而提供更加完善的解決方案。
例如，你使用 53KF 云客服進行在線服務，同時打通 CRM 和訂單系統，以及百度、騰訊、頭條、360 等流量渠道，從而提供更好的客戶支持和流量轉化。
先進生產力
SaaS 產品的發展，是不斷驗證市場需求（PMF）、優勝劣汰的過程，其成功就代表著某種先進生產力（工具、流程或方法）。
從更大價值角度考慮，SaaS 賣的不僅僅只是工具，而是解決方案，融入到生產制造中去，協助客戶獲取成功。同時，對于廠商而言，也是更有價值、更有競爭力、更長久存在的經營方式。
從市場而言，SaaS 是一種眾包模式，廠商覺得市場有大量的同類需求且長期存在，開發成產品進行運作。也真正有效的節省了同類訴求其社會資源的多次投入。
由于 SaaS 產品的有利可圖，促使市場的激烈競爭，也鍛造了廠商在其領域的專業化，提供更加有效的解決方案。
二、SaaS 產品的優缺點
優點/優勢
● 易于訪問。SaaS 通過網絡提供服務，用戶可隨時訪問，且數據儲存在云端，實時同步。
● 免費試用?？梢栽诟犊钋?，進行免費試用，進行多家對比，選擇最合適的。
● 費用便宜。使用訂閱模式，價格取決于用戶數量，訂閱者無需一次性支付大量費用，降低前期購置成本。
● 支付靈活。按月/年進行支付，此外，訂閱者可根據業務發展，增加或升級套餐，減少或降低套餐，甚至隨時停止使用。
● 良好支持。服務的好壞決定了客戶的訂閱，所以 SaaS 廠商會提供更加友好、高質量的客戶服務。
● 開放集成。開放的接口（API）可以與其他產品進行數據打通。
● 立即使用。無需安裝和部署，有網絡的地方即可使用。
● 無需維護。SaaS 統一運行在廠商的服務器上，由廠商統一維護、更新。
缺點/風險
● 數據安全。所有數據儲存在云端和軟件廠商的服務器上，可能會引發泄露等安全問題。SaaS 軟件廠商，通常非常注重數據的安全性，因為數據泄露對于 SaaS 廠商的企業經營而言是致命打擊。有些 SaaS 廠商也提供混合云服務，將敏感性數據儲存在客戶自己的服務器上。
● 網絡連接。沒有網絡，將無法使用 SaaS 產品。同時，網速深刻影響 SaaS 產品的運行速度。
● 服務中斷。軟件廠商的硬件故障、網絡攻擊等造成的服務中斷，會致使產品無法使用。
三、SaaS 產品的銷售模式
通常來說，SaaS 的銷售模式分為三種：
1、非接觸（no-touch）：自助服務
1、低接觸（low-touch）：交易型銷售
2、高接觸（high-touch）：顧問式銷售
非接觸（no-touch）：自助服務
理想的 SaaS 銷售模式是客戶自助完成整個服務，沒有銷售人員的介入。
這需要產品簡單、價值明顯、支付容易甚至售價便宜。同時，產品本身提供良好的支持（操作引導、使用說明、幫助中心以及反饋入口），從而允許客戶自助完成服務。
非接觸的 SaaS 產品，通過省去銷售團隊和支持性投入，采用低價，獲取大量客戶。同時，也因為價格便宜，無法支持銷售和支持性團隊的組建。
例如，某 SaaS 產品，10 月/月，一個銷售人員的底薪 4000 元/月 + 五險一金和辦公等費用，那么至少需要銷售 600 個客戶才能抵消成本，這是很難完成的。
低接觸（low-touch）：交易型銷售
低接觸的 SaaS 產品，通常采用免費試用的方式，進行獲客。然后，銷售人員通過在線咨詢服務（53KF 云客服）或者電話進行銷售轉化。
同時，產品在 onboarding 上需要投入大量的資源，從而降低用戶使用摩擦，使得用戶能夠成功的上手并獲取價值。
低接觸的 SaaS 產品通常采用按月訂閱的模式，其滿意度決定了持續收入。因此，低接觸的 SaaS 產品的銷售，需要同時兼任“客戶成功”的職能，提供良好的客戶支持，從而保證客戶持續的獲取產品價值而不斷續費。
高接觸（high-touch）：顧問式銷售
高接觸的 SaaS，通常需要大量的人力投入，招標、拜訪、出解決方案、商務談判等等。
高接觸的 SaaS 更多采用年度收費的模式。強銷售決定了年收入的上限。因此，高接觸的 SaaS 產品幾乎是圍繞銷售團隊的，市場營銷的主要工作是為銷售團隊獲得足夠多且合格的銷售線索；產品、開發更多的配合銷售團隊滿足客戶需求；客戶成功團隊接收后期服務、產品支持、關系維護以保證客戶續費。
從我個人接觸到的，低接觸、高接觸對于產品設計而言，在于主導權方面。
低接觸會考慮更多的價值面（通用的最大化價值），從而會拒接沒有未來（可能性和想象力）的單體訴求。
而高接觸，更多來自客戶傳導給銷售，銷售傳導給公司，公司傳導給產品的業績壓力。所以，高接觸一定是高單價，低單價的高接觸在一定層面掙得是辛苦錢，無競爭力的勞動輸出，而不是方案輸出。
四、SaaS 產品指標（SaaS Product Metrics）
PMF（Product-market fit） 產品市場匹配
SaaS 產品的早期，更多的是驗證產品與市場的匹配（Product-market fit，PMF），直白的說就是生產的產品是否具有市場價值，是否有人愿意花錢購買。
所以 PMF 是不斷確認這三點的過程：
1、目標客戶是誰
2、目標客戶的需求（痛點、爽點、癢點）
3、提供的解決方案是否能掙到錢
PMF 通過早期付費客戶來確定有利可圖的細分市場。和他們不斷交談，收集反饋來迭代產品。
并根據付費客戶特征，尋找客戶共性，從而更緊密的圍繞最佳客戶打造產品、從而更明確的找到目標客戶接觸途徑、從而更有效的設計市場營銷宣傳策略。
NPS（net promoter score） 凈推薦值
通過 NPS 進行客戶滿意度調查，衡量客戶體驗，預測未來業務增長以及預防客戶流失風險。
NPS 采用 10 分制，讓客戶進行打分。
打分者分類：
● 推薦者（dpromoter）：9-10 分，對服務非常滿意，愿意持續使用并向他人推薦，從而推動產品增長
● 中立者（passive）：7-8 分，對服務滿意，但忠誠度低不會主動對產品宣傳，容易受競爭對手影響
● 貶低者（detractor）：0-6 分，對服務不滿意，會對產品進行負面評價和傳播，從而阻礙產品增長
NPS=(推薦者數/總樣本數)×100%-(貶損者數/總樣本數)×100%
例如，有 100 客戶打了分，結果如下：
● 10 分：15 人
● 9 分：20 人
● 8 分：20 人
● 7 分：20 人
● 6 分：10 人
● 5 分： 10 人
● 4 分：5 人
忽略打 7-8 分的人數，9-10 分人數 35，6 分及以下 25 人，NPS=35%-25%=+10%
如果 NPS 是負值，那么業務收入可能將會減少，因為客戶在不斷流失。正值的 NPS，表明客戶滿意度高，未來具有可持續增長的潛力。
五、SaaS 業務指標（SaaS Sales Metrics）
單位經濟收益：CAC：LTV
SaaS 產品的成功與 PMF 高度匹配之外，還需要一個切實可行的商業模式，即客戶價值（LTV）大于獲取成本（CAC），健康的增長意味有效平衡兩者，從而確定這是一個有利可圖的市場。
CAC（Customer Acquisition Cost）
獲得客戶的平均成本。
CAC= 銷售和營銷費用之和 ÷ 新增客戶數量
LTV（Customer Lifetime Value）
客戶生命周期內（從注冊到流失）平均總價值。
LTV=（ARPA*毛利率%）÷ 客戶流失率
ROI（Return on investment）
客戶獲取的投資回報率。
ROI=LTV：CAC
Months to recover CAC
CAC 通過 MRR 收回的平均月份。
Months to recover CAC=CAC÷（ARPA*毛利率%）
ARPA：每個帳戶的平均收入，你的 MRR 除以客戶數量，即所有客戶的平均 MRR
毛利率=[（營收-成本）÷ 營收]×100%
David 在《SaaS Metrics 2.0–衡量和改進重要內容的指南》一文中指出，LTV：CAC ≥3，Months to recover CAC ≤12 月，通常被認為是良好的 SaaS 項目。同時也指出，很多健康 SaaS 在初期可能并不符合，但會在一段時間內通過改善業務逐漸接近這兩條準則。
經常性收入：MRR 和 ARR
經常性收入（Recurring Revenue）是未來持續可獲得的收入，就 SaaS 而言，經常性收入來自客戶的訂閱，具有穩定、可預測、高度確定的特點。
在 SaaS 業務中通常采用按月或按年合同：
● 主要按月合同及少量的年度合同，采用 MRR（Month Recurring Revenue 月度經常性收入）。MRR 用于衡量每月訂閱收入，如果有一些年度訂閱，除以 12，再分攤到每月來計算 MRR
● 按年合同及少量的多年合同 ，采用 ARR（Annual Recurring Revenue 年度經常性收入）。多年合同除以合同年限，再分攤到每年來計算 ARR
在 MRR/ARR 統計中，并不會計算一次性的收入。例如，定制功能費用。
經常性收入會不斷推動這 SaaS 廠商的發展，也是驗證產品是否具有可持續增長的指標。
流失（Churn）
SaaS 是訂閱模式，在高留存率下，隨著時間的推移，意味著更多的客戶、更多的訂閱，持續收入不斷復合累積。所以，流失率對 SaaS 廠商是非常重要的指標。
在 SaaS 中有兩種計算流失的角度：
● 客戶流失（Customer Churn），取消訂閱的客戶數量
● 收入流失（MRR/ARR Churn），取消訂閱的收入損失
那為什么會有兩種計算方式？
例如，53KF 云客服的業務，是按照坐席收費，50 元/月。假如我們有 200 個客戶，100 個大客戶（每個大客戶擁有 100 個坐席），100 個小客戶（每個小客戶擁有 10 個坐席）。
當月，我們流失了 10 個客戶，那么月客戶流失率為 5％。
如果，流失的客戶中，有 8 個是大客戶，2 個是小客戶，那么 MRR 流失 45000 元，MRR 流失率為 7.45%。
如果，流失的客戶中，有 2 個是大客戶，8 個是小客戶，那么 MRR 流失 14000 元，MRR 流失率為 2.55%。
所以，通過不同的計算方式，使得我們更加全面、準確的了解到業務中所發生的事情。
Customer Churn Rate
客戶流失率，客戶取消訂閱的比率。
Customer Churn Rate= 期間流失客戶數 ÷ 期初客戶數
MRR Churn Rate
月度經常性收入流失率，通過降級、取消而損失的 MRR 比率
MRR Churn Rate= 期間流失 MRR ÷ 期初 MRR
Net MRR/ARR Churn
凈 MRR/ARR 流失。
Net MRR/ARR＝期間新增 MRR/ARR 之和 - 期間流失和收縮 MRR/ARR 之和
Net MRR/ARR Churn Rate
凈 MRR/ARR 流失率。
Net MRR/ARR Churn Rate=（期間流失和收縮 MRR/ARR 之和-期間新增 MRR/ARR 之和）÷ 期初 MRR/ARR
當收入增長超過流失的損失，在這種情況下，凈 MRR/ARR 流失則為負值，稱之為負流失（Negative Churn），表現在財務表上的就是收入的不斷增長。
記住，在計算流失時，總是在特定的時間范圍內，例如上月客戶流失率是 5%。
六、SaaS 收入計算
確認收入（revenue recognition）
對于 SaaS 而言，確認收入是非常重要的財務知識，確認收入與合同金額、收款金額有很大的區別。
例如，按年收費的 SaaS 產品，年費 1200 元，那么：
● 合同金額是 1200 元
● 客戶一次性支付年費，收款金額是 1200 元
● 在合同期間的每個月的確認收入則為 100 元。剩下的 1100 元則為遞延收益
● 從企業資產負債表而言，剩下的 1100 元均為負債。因為服務還未完成，還需要投入 11 個月資源履行服務義務，甚至合同可能發生中止等情況，所以還不是確定的收入，需要通過后期的確認收入（損益表中的利潤）來減少資產負債表上的負債
* 遞延收益：指尚待確認的收入或收益。凡在期間內完成的服務所產生的收入，則為確認收入；反之，即使款項提前預收，但未在期間內完成服務，則不作為確認收入。
* 資產負債表：反映企業經營在一定時期內（月份、年度）財務狀況（兩個方面，一方資產、另一方負債和權益）的報表。
* 損益表：反映企業經營在一定時期內（月份、年度）利潤（收入）或虧損（支出）的報表
總結
通過梳理總結，談了談 SaaS，這是在我當前知識體系范圍內的總結，SaaS 是的龐大的體系，關乎個個層面：產品、營銷、銷售、客戶成功、增長、定價、渠道等等。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在電子商務界，你的網站設計就是一張在線名片。它能幫助你從擁擠不堪的海量信息中脫穎而出，同時也反映出你的可信度。這是你的用戶通過初次訪問來了解你品牌的地方。如果他們沒有找到自己喜歡的，幾乎80%的人都會選擇離開你的網站。
這就是為什么在構建和設計網站時，永遠不要低估用戶滿意度帶來的影響。
接下來要講的是如何設計一個無可挑剔的、以用戶為中心的網站，來使你的網站轉化率飛速上漲。
如果不能引導用戶完成最終購買，那么設計再精美的網站都是毫無意義的。用戶沒有選擇在你這里購買的一個主要原因是復雜的網站導航。記住，用戶不希望無休止的點擊和滑動鼠標后才能找到他們想要的產品。如果他們發現自己正將時間浪費在不必要的操作上，就會棄你而去，到你的競爭對手那里。
這也是你想要阻止發生的事情。
人們常說不能以貌取人，但我們卻一直都在這么做。在電商的世界中，你的主頁就是顏值。
研究表明，只需0.05秒，一個用戶就能判斷出你的網站是否能夠滿足他們的需求。而且，如果你不能讓他們相信你的網站是可靠的、安全的或足夠有價值的，他們就會在眨眼之間拋棄你的網站。
那么，一個令人驚艷的主頁包含哪些要素呢?
主頁是用來吸引用戶并與他們建立關系的。但當你想把一位訪客變成付費用戶時，體現產品詳情頁重要價值的時刻就到了。它們需要為用戶深度展示你的產品，激發他們的興趣，并讓他們產生點擊“立即購買”按鈕的欲望。那么，讓我們來一起看看產品詳情頁中最重要的元素都有哪些吧。
如果有用戶不確定是否要從你這里購買產品，那他很可能會在深思熟慮前就離開你的網站。你需要向他們證明這是一個錯誤的選擇，而這正是“常見問題“的切入點。
創建一個頁面去回答用戶最常問的問題，會讓用戶感到高興，將他們的購買焦慮降到，也能夠更快引導他們完成購買。這就是為什么，你需要積極地構建FAQ頁面，提供可操作和有用的技巧，甚至通過截圖和圖片的形式來讓答案容易被更多人理解。
一個可靠的FAQ頁面還可以提升SEO（搜索引擎排名優化），特別是在語音搜索SEO和本地化SEO盛行的時代。數據顯示，22%的搜索者會使用語音搜索在網上查找本地企業。因此，綜合考慮電商SEO實踐與本地化SEO服務，對你的電商網站至關重要。
這就是FAQ頁發揮首要作用的地方。也就是說，在不損害用戶體驗的情況下，它使你有機會針對搜索時高頻出現，及具有地區特征的關鍵詞，來優化FAQ頁面的問題和答案。此外，這也有助于提升你的網站在語音搜索中的排名，因為谷歌經常使用FAQ頁面作為語音搜索結果。
你已經通過種種努力讓令人驚艷的主頁贏得了用戶的信任，用產品詳情頁頁的優質文案提升了他們對產品的興趣，現在是時候激發他們去完成最后的購買流程了。你千萬不能搞砸了這個關鍵環節，因為購買流程是購物流程閉環的最后一步。
對于電商而言，用戶體驗至關重要。她會為你積累忠實的老用戶，激勵新訪客轉換為付費用戶，并有助于他們向親朋好友傳播關于你的正面口碑。Jeff Bezos對此有很好的詮釋：
“如果你的確建立了很好的體驗，用戶就會口口相傳?？诒牧α渴菬o比強大的?！?/span>
我希望以上的這些秘訣將可以成為你的堅實基礎，助力你在在電商領域取得成功。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
B端產品設計的6大挑戰
翻譯： alina Wong 審校：華姐 | UXRen翻譯組 #297 譯文
在VWO工作初期，我遇到的許多情況促使我想弄明白：企業類應用（B2B，后文中統稱為B端應用）真的和消費類應用（B2C）不一樣嗎？對于設計師和設計流程來說，這種區別有多重要？
這篇文章是我在過去幾年里的一些經驗梳理，希望能夠幫助那些想去或者已經在B端團隊工作的設計師們。
維基百科中的定義：B端應用是一種用來滿足企業而非個人用戶需求的計算機軟件系統。
這是一些大家可能用過或者見過的B端應用。
在現代社會，大多數B端應用都是復雜的任務關鍵型應用，具有可拓展、分布式和模塊化等特征。B端應用對大量復雜的數據進行展示、處理和存儲，并利用這些數據實現對業務流程的支撐及其自動化。
B端工具可以幫助構件你的產品，從而幫助企業和員工更好地完成工作。
注：雖然B2B和B端應用在定義上略有不同，在目前的軟件生態中，這些差別幾乎無關緊要，所以本文將它們視為一類。
為B端設計并無特殊之處，優秀設計的一切準則，在這里都適用。不過，設計B2B產品和B2C產品，確實存在一些差別。
試想一下，汽車制造vs.商用飛機制造。它們都是非凡的工業設計，把人們從A點運輸到B點。顯而易見，它們有很多的不同之處，比如使用場景、制造時間、測試&安全規范、用戶預期、購買以及所有權。所有這些不同之處都會影響設計及流程。
同樣對于B2B應用來說，不同之處在于其獨特挑戰和應對方法。
聲明：任何一款軟件設計都會面臨以下一些挑戰，但為B端設計時，這些挑戰更加突出。
由于數據多態、可視化選項多、管理操作、多用戶協作以及和其他軟件集成等諸多因素，B2B應用的復雜度普遍高于B2C應用。為了滿足一個需求而做出的一項設計決策，往往會影響其他許多需求，而其方式有時會難以預測。一項看似簡單的功能添加，都要進行全面檢查，考慮到各種極端情況。
Atlassian公司的Jira軟件界面：功能復雜的軟件案例。
解決方法：
解決復雜性的方法是什么？
當然是簡化。不要將這誤認為是簡化界面，或者現下流行的極簡UI。這是通過恰當的規劃和流程達到的簡化。無論項目周期多么緊張，都必須在設計開始之前投入時間思考，將收集到的需求和規范進行整理。實際上，這些是設計中非常重要的工作。
當你對設計方案確認無誤時，會直接進入Sketch、Figma或者PS階段，但這往往為時過早。抽點時間來厘清你將要設計的產品的背景和含義。通過研究和規劃，找出所有的可能性，處理所有的極端情況。確保準備萬無一失時，再進入界面設計階段。
“如果我有60分鐘來砍斷一棵樹，我會花40分鐘先磨好斧子， 20分鐘砍倒它?！薄獊喞?林肯
恰當的規劃和流程會在長期運行中展露優勢，帶來流暢無阻的產品體驗。
B端用戶的心理和行為模式與B2C的用戶的截然不同。B端用戶除了要完成本職工作之外，還要兼顧在組織內的其他方面，如職業發展，職業學習，職業成功。為在職人士設計時，需要充分了解清楚他們的工作背景、流程、環境、期望、問題以及當前的解決方案。
如何做：
設計B端應用時，理解用戶需求非常重要。不僅要了解產品相關的需求，還要了解用戶工作和職業相關的需求。與最終用戶深入交流，研究他們的領域，嘗試用他們當前的方法，這些都非常有助于培養對用戶的同理心。
此外，用戶太過于習慣現有的工作流程，這導致他們很難想像自己真正想要什么。他們可能會告訴你功能和選項，但卻無法提供產品創新之道。
用戶可能認為自己想要的只是更多的功能。
B端產品設計團隊的設計指導原則，是知道用戶目前遇到的困難是什么，然后設計出方案來解決這些困難。一旦真正理解用戶的長期目標是什么，設計師就可以有很多發揮的空間了。
“用戶購買產品是希望變成更好的自己。”—— JTBD理論
與其關注用戶說什么，不如關注他們實際做什么，并以此為創新的基點，構建精益原型，并與用戶一起進行測試。
一般來說，B端用戶習慣且滿意現有的工作流程，并沒有切換到另一種產品的需要。而且即便他們想換一個，也要層層審批。更不要說，現有數據的遷移對于公司和員工來說都是非常難的事情。所以同大眾消費者應用不同，B端應用的切換成本顯然要高得多。
解決方法：
說服企業換用你的軟件的兩大方法：
第二點才是設計中真正閃光之處。生產效率、工作流程是企業最關注的事情。仔細研究它們現在的方案，找到需要提升的地方?？紤]如何設計出更快的工作流程，如何提升效率并降低成本。在這幾方面上創新，往往會帶來可以說服企業作出改變的解決方案。
“衡量創新的唯一標準，就是看它是否改變了人們的行為”——Stewart Butterfield, Slack聯合創始人
不斷尋找機會，改變傳統的方法，使之更有效，更。
對于B端產品，新增功能幾乎總是比提升現有功能的體驗更優先。在產品啟動時，通常會有專門的設計沖刺階段。而一旦產品發布出去，用戶需求就開始涌入進來。付費客戶會不斷要求增加新的功能，產品團隊也制定繁忙的開發計劃。在這種情況下，設計師尤其很難說服有關人士投入時間和資源來提升設計和用戶體驗。
避免方法：
嘗試從這些相關人士的角度看待問題。他們經常認為，任何一段開發時間，無論是一周還是一個月，如果沒有用來開發新功能就基本等于舍棄了潛在的收入。這時，讓他們明白優化產品所帶來的好處就很重要了，要讓他們懂得優化遠比增加新功能可以帶來更多的收入。重點講講成功故事。直接和高管聊這件事，讓他們接受這種觀念。優化設計總是需要仔細分析痛點，檢驗新的想法，而這些都需要時間和創新。
“電燈不是通過不斷優化蠟燭發明出來的。”—奧倫·哈拉里（Oren Harari）
一旦你獲得了公司的信任，就要在有限的時間內取得一些小勝利，并且一直努力度量其影響。逐步建立起公司對設計團隊的信心，繼續嘗試更大的改進方案。
讓產品和開發團隊成員承諾確保優秀的用戶體驗，并幫助他們主認識到這不僅僅是設計團隊的任務。
來源：B端用戶體驗行業報告 2017-2018
最近，一項對3000多名B端產品設計師的調查顯示，對B端設計團隊來說，最大的挑戰是提高產品的用戶體驗一致性。不同于消費類應用，B2B產品通常有更長的產品周期且異步運行，很多時候都是分布式團隊合作設計。
每一名設計師都面對著與其他團隊類似的問題，很容易導致產品設計不一致，比如更改設計組件、更新樣式，甚至像顏色這樣的細節都會產生不同。這些問題隨著團隊的擴大或者產品的體量增加而變得更加嚴重。
解決方法：
許多公司開始建立設計規范來保持產品的一致性和可拓展性。設計規范包含可復用的組件集合、清晰的設計指導，可以幫助構建任何數量的產品。設計規范通常包括：
當B端設計團隊被問到是否建立了設計規范時，約55%的團隊回答是或正在創建中。這是很好的現象。需要指出的是，設計規范永遠不會100%完成，它著眼于長期，會隨著時間的推移不斷更新。
“設計每個元素時都應該考慮到其是否易于制作和修復。”?—Leo Fender
設計規范對于保證用戶體驗一致性具有里程碑意義。
以下是一些B端設計規范，可以給你一些靈感：Salesforce的Lightning設計規范, Intuit的Harmony設計規范。
不少設計師在做過一段時間B端應用設計后，發現它無聊單調。許多來自咨詢公司或者有B2C經驗的設計師覺得B端設計缺乏激情和多樣性。做那種酷炫的微交互和動畫（就是會發在dribbble上那種）的機會并常有。這樣，工作就變得乏味無趣，設計師們感受不到成就感，提不起勁來。
避免方法：
B端應用的用戶體驗旨在幫助用戶更好地完成工作。設計一個迷人的界面來吸引用戶，（盡管并無害處，卻）總是在被排在低優先級。標準化的、可預知的、所見即所得的用戶界面，最適合目標用戶。
我們的目標是讓用戶發出“哇！”的感嘆，不是因為絢麗的界面，而是因為產品能夠幫助他地完成工作。
組建B端應用設計團隊時，選擇目的和動機一致的設計師最為關鍵。設計師的動機，應該大量來自于解決復雜的問題，看到自己的設計如何幫助用戶完成他們的工作。
所以，在設計師加入團隊之前，評估他們的想法并設定正確的期望是非常必要的。
企業本身是在逐步發展的。B端應用不再是難用、無聊的產品，用戶期望B端用戶像消費類應用一樣有著優秀的體驗。他們喜歡漂亮的界面，不希望在使用前看說明文檔。下一代技術，例如VR、AI和聲音已經進入了我們的生活，也很快會應用到工作中。對B端應用來說，這令人興奮，而設計師所能做的，則是無限的。
做B端應用設計的三個指導原則：
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Fucking Young(簡稱 FY) 是一家專注于男性半球的年輕美學，我們自由使用和支配模特及藝術家合作，從而幫助自己與合作方達到合理的業務需求，建立一個擁有創造力的社區，贊助和發布這些驚艷的作品在我們的官網甚至手機產品上。帶來的作品有FY品牌官網與移動端設計，展示部分界面與交互動效，Gif輸出存在色差，實際情況以高保真視覺界面為準。
文章來源：UI中國
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
明修棧道C和暗渡陳倉B1. 初識B端產品和C端產品
C端 Consumer，表示為消費者、個人用戶或終端用戶設計，直接面向普通用戶提供服務來幫助他們實現個人需求。B端 Business，它面對商業和企業，是為幫助企業集團等實現商業目的而設計的軟件、工具或者平臺。
在我們日常生活中，在手機上使用的大多是 C 端產品，單一的 C 端產品通常是為了實現單一的需求。比如看網紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產品的核心功能。
而面向 B 端的產品，我個人稱之為「暗渡陳倉」，當個人用戶為實現個人需求產生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即 C 端產品的后臺產品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業、業務部門提供的企業級服務產品，以及面對企業或者個人提供的平臺級工具產品等。
雖說我們日常使用的更多是 C 端產品，但是 B 端產品對我們的影響也是時時刻刻存在著。C 端產品在明，逐漸改變著現代人的生活方式，B 端產品在暗，間接服務于用戶，讓一切流程化秩序化，并且具有多個主要功能點。
2. B端和C端產品的區別
在我看來，C 端產品以消費互聯網為主，B 端產品以產業互聯網為主，C 端更感性，而B 端更理性。
從使用者的角度來說：
從開發的角度來說：
3. 后臺產品常見分類
后臺產品按其作用可大致分為兩類，一是支撐前臺產品，二是管理各種資源。我認為后臺產品應當是囊括在 B 端產品的范圍之內的，常見的類型包括：
1. 初識后臺產品設計
說起后臺產品，很容易想到復雜、龐大、邏輯縝密，而作為設計師，則苦于競品短缺、架構復雜，設計的前期工作比設計本身要復雜得多等問題。
后臺產品不同于普通用戶所使用的 APP，它在用戶初次使用和短暫時間內的認知成本是較高的。當用戶用慣了一個音樂類的 app，再給他幾個其他的音樂 APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產品則不然。
對于后臺產品來說，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權限限制，一般來講很難像超級管理員一樣接觸到整體功能；其次，門檻之高，后臺產品的使用者一般都是在該行業沉淀了很久，所以要對后臺產品進行設計就需要同樣了解該行業，甚至更能洞察該行業，業務本身的復雜性質決定了后臺產品架構也會比較龐大；然后，無論是工廠商家的進銷存管理，還是政府醫院的工作流和業務流，乃至企業內部的產品，除了不同行業都有門檻外，對信息和產品也有「保密協議」的使命感，所謂「隔行如隔山」，在后臺產品更是如此；最后，后臺產品設計往往沒有固定的功能架構和商業模式，對于產品經理的邏輯思維能力要求更高，設計師不僅僅是做界面、優化流程，也要主動和產品經理溝通交流，并對產品進行思考和探索。
2. 后臺UI設計工作流程
后臺 UI 設計的工作，大體分為三個部分：需求分析、設計執行、數據分析。
在需求分析階段，要對產品本身和行業本身有一些基本的認知。要了解產品的基本情況，比如產品目標、用戶人群、產品定位、需求分析、功能模塊、主要競品和產品特色。做這個產品是為了解決什么問題？想實現什么目標？使用這個系統的用戶有哪些？不同角色的用戶有哪些具體的權限？是否需要對每一個用戶的行為都生成操作日志？產品有哪些主要的功能模塊？產品的業務流程是怎樣的？有哪些同類型的產品？和他們相比我們的產品有什么特色和特點？成功地做出大而全的后臺產品，是整個設計團隊和開發團隊能力的體現，而對很多小團隊來說，只能做一些大團隊不愿去做的產品，或另辟蹊徑在某些方面做專做精。
在設計執行階段，參照 PM 給出的功能清單做原型和流程的梳理，需要關注的有當前版本規劃、功能模塊、功能類型、功能描述、任務優先級、完成時間等，交互原型則伴隨著功能描述、規則判定條件、觸發條件等內容。原型設計完成，開始做 UI 視覺方面的設計，而這時后端同步構思需求的實現方案。UI 設計師向前端了解實現框架，方便交接和溝通。當界面實現，UI 設計師應該是最早進行測試的，力求視覺設計和代碼實現無誤差。在完成設計執行后，從信息層級、文字、圖標、圖片等方面進行設計走查，進行多次設計驗證與測試。
數據分析是產品優化迭代的重要依據。進行多番測試和評審后交付客戶（或內部）使用，根據產生的具體問題進行不斷迭代，且觀察產品能否通過準確的數據反映問題、體現能力，應虛心接納使用者的使用建議并嚴謹思考其合理性，用戶的使用和反饋是優化產品的重要途徑。只有達到了管理和運營的指標，后臺產品才是真正產生了價值。
3. 制定設計規范的作用
為后臺產品制定設計規范有哪些作用和好處呢？簡單來說就是對產品好、對自己好、對團隊好、對客戶好。
以下數值為參考，請結合特定產品靈活運用。
統一尺寸
據統計，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 來設計的話，向上適配或者向下適配誤差會比較小。
適配方案：面向多個客戶，后臺產品設計功能型頁面的尺寸統一為 1440*900，按照柵格系統原則向上或向下適配。展示型頁面以 1440*900 為主，同時設計出極端情況（寬度為 1280 以及寬度為 1920）的效果圖，力求實現前端實現效果和高保真設計圖誤差最小。面向公司內部的后臺系統，由于各個職工電腦屏幕是統一采購、統一尺寸，所以開發適配的分辨率可以統一尺寸進行設計，這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。
頁面框架
頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側菜單欄、主體內容三大區域，其中頂部菜單欄、左側菜單欄為固定結構，右側主體內容根據分辨率進行動態縮放；上下欄布局包括頂部菜單欄和主體內容兩大區域，其中頂部菜單欄為固定結構，主體內容進行動態縮放且需定義主體內容左右兩邊空白區域最小值；左右欄布局時，左側菜單可收縮展開，收縮狀態下固定寬度。
柵格布局
柵格系統的使用是為了解決自適應和響應式問題，從而更好地進行產品設計和產品開發。響應式柵格采用 24 列柵格系統實現，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進行動態縮放。
需要柵格化處理的內容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。
谷歌規定模塊和結構之間要以 8px 為基準，布局間相對間距可采用 8px 以及 8 的倍數，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準。柵格布局是為了輔助設計，靈活運用，不要被它所局限。
尺寸設定
一般在整體區域左上角放置產品 LOGO 及產品名稱，大部分系統頂部欄高度 48+8n，側邊欄寬度 200+8n。我常用的是頂部欄高度 56px，側邊欄寬度 200px，側邊欄收縮狀態寬度 56px，右側的側浮窗寬度 400px。
相對間隔
定義主體內容的上下左右邊距，定義主體區域內各模塊的邊距及安全寬度，超出內容區域的部分采用區域內滾動或整屏滾動，視情況固定導航欄。
顏色分為品牌色、輔助色、中性色。根據不同產品的不同需求，可能也會將統計圖、標簽等進行統一標準色設定。
品牌色即產品主色，產品主色的設定直接影響產品氣質和直觀感受，也是產品直接對外的形象。品牌色要根據產品特性、用戶使用場景、產品定位等進行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應用場景包括操作狀態、按鈕色、可操作圖標等。
輔助色用于提示其他場景，比如成功、失敗、警告、無效等。
中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現不同的層級結構。
其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。
后臺系統常用的字體：windows 系統，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；除此之外可以選擇的字體還有 segoe UI、思源黑體、Hiragino Sans GB等。
后臺系統中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。
行高設定，根據文字大小及使用場景設置行高，一般行高=文字大小+6px/8px。
圖標是 UI 設計中重要組成部分，一般分為功能圖標和應用圖標，以圖形的方式傳達概念，可以降低理解成本，使得界面更加協調美觀。在后臺產品中，圖標的功能則更偏向輔助性，輔助用戶對功能的認識。
除了某些常用的圖標，有一些專業性的操作和詞匯則需要設計師進行繪制，現在比較方便的方法是在 iconfont 提供的圖標模板上用 AI 繪制，畫板 1024*1024，提供圓形、正方形、矩形形狀。圖標尺寸按照 8 的倍數進行延展，繪制完成后生成 svg 格式文件，提交到阿里巴巴矢量圖標庫的項目組里，方便前端調用，調整大小和顏色更為方便，且能夠優化系統內存和性能。
5. 按鈕
按鈕是后臺產品進行交互設計是重要元素，提供給用戶進行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。
按鈕的交互狀態包括默認、懸停、點擊和不可用。
按鈕根據需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照 8 的倍數設定。如高度分別設定為 24、32、40px。
規范整理時要規定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態展現出來。
填充按鈕之間間距最小為 10px。
導航的類型有很多種，常用的比如頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等。
各類導航中的字體大小可進行統一設定。
頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。
側欄菜單為垂直導航菜單，可以內嵌子菜單。
下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種。
步驟條引導用戶按照流程來完成任務，一般步驟不得少于兩步。
分頁的高度設定為 24px、30px、32px，根據應用場景適當增減內容，比如設定每頁展示數據的條數、跳轉至指定頁等。
面包屑用于說明層級結構，使用戶明確當前所在位置，并且可以回到任一上級頁面。
徽標數用來通知用戶當前有未讀消息，一般出現在圖標的右上角或者跟在文字后面。
表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。
字段輸入框的標題和輸入框分布方式包括左右、上下、無標題。左右分布是常見的對齊方式，比較適合 PC 端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標題經常應用在登錄注冊，雖然減少了面積，但是增加了理解難度。
輸入框的交互狀態包括默認、輸入結果、提示錯誤、禁用、獲取焦點。
輸入框的尺寸可按照8的倍數進行設定，比如 24px、32px，也可根據系統實際情況進行設定，我常用的輸入框高度為 30px，寬度視情況而定，無圓角。上下布局的多個輸入框上下間距為 20px，有錯誤提示時候豎向增加 10px 或橫向顯示在輸入框右側（預留出位置）。
表單中標題文字左對齊，輸入框左對齊，標題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內正文字體 14px，文字和左右兩邊邊框的邊距 10px。
選擇器包括單選、多選、時間選擇、開關切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復選框多為方形。
搜索框和選擇框的高度為 30px 或按照 8 的倍數自行設定，通常和輸入框保持一致。搜索框距離右側按鈕 4px，內部文字 14px。
單選多選框尺寸 16*16px，多個選項橫向排列間距 16px，縱向排列間距 8px。
開關按鈕外框 40*20px，內部圓形 16*16px。
表格在后臺產品 UI 設計中占比非常大，用來展示數據、統一管理、作為詳情入口，是最清晰、的形式之一。在設計規范中需設定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標簽樣式。
表格主要分為五大區域：選擇搜索區、操作區、表頭、正文、底欄。選擇搜索區放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區指各種對表格內容進行增刪改查、批量處理、配置列的動作；表頭展示列標題，一般具有排序功能；正文主要展示各種各樣的數據，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內操作；底欄顯示分頁、總數統計等。
表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數據在第一列增加多選框。
行高
表格行高可設置為表格內字體高度的 2~3 倍，主表格會間隔顯示不同顏色，用于區分不同行數據、加強視覺流引導，展開單行的內置表格可采用純色，選中行應有視覺上的反饋。表頭要和表格內容有視覺上的區分。表格行高可采用 36、40、48、60 等。
行數
表格行數太多加載速度會降低，延長用戶等待時間；行數太少會導致用戶不斷翻頁，降低使用效率。比較合適的默認表格行數是 20 或 50，用戶可以根據自己需求選擇默認的行數。設定行數之后，如果每頁行數多于每屏行數，可在表格內引入滾動條，這時可以固定表頭滾動內容。
列寬
列寬根據內容字段長短需要有不同且合理的默認值，使得表格字段有良好的展示效果。列內容的長度固定時，列寬應大于固定寬度（比如時間、MD5、SHA1）；列內容不固定時，能預判最大寬度的按照最大寬度設定列寬（比如IP地址、MAC地址、姓名），不能預判最大寬度的設定列寬按照常用寬度，多于內容省略以「…」展示，鼠標懸停出現完整內容（比如詳情、描述）。
列數
表格列不應過多，列數比較多的情況下應該合理進行合并、隱藏、刪除或進行優先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動條，根據實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
對齊方式
表格內的文本應按照文本類型不同進行統一規范，如金額類數值保留相同位數小數，SHA1 雖然是一串數字但是其實那并不是數據而是一串編碼，所以可以像文本一樣左對齊。根據文本內容不同，對齊方式也應靈活調整，可采用文本左對齊、數據右對齊、金額小數點對齊的方式。數據前面有標簽的，將標簽前置對齊。類似 IP 地址、MD5、SHA1、域名這樣的信息，也可以根據產品需要在文本前面增加「復制」圖標，方便用戶調用。
詳情入口
表格內部數據的詳情入口，將能點擊下鉆查看詳情的內容以不同顏色表示，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。
包括彈框、側滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態等。分為模態框和非模態框，區別是是否會打斷用戶工作流。
彈框又稱對話框，是疊加在應用主窗口上的彈出式窗口，以對話的方式使用戶參與進來。
彈框
彈框出現時，主題內容增加一層遮罩 #000，透明度 50%，避免使用雙層彈框，可同時采用有關閉圖標的彈框和無關閉圖標的彈框，引導用戶對內容進行正確操作。如果設定系統內所有彈框均可以點擊彈框外區域關閉， 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框，或者再次進行交互梳理。
側滑框
側滑框又稱抽屜，出現在右側，固定寬度 400px，高度覆蓋在主題內容之上，點擊側滑框以外的區域則收起側滑框。
骨架屏
為某些特定數據提供數據加載等待時的占位圖形組合。
全局提示
建議停留時間 3s，可根據文字字數調整停留時間，文字內容限制在 30 以內。
警告提示
用不同顏色和樣式展示需要關注的信息。
通知提醒
消息通知和警告信息用通知提醒框，單個消息從頁面右側以抽屜的方式劃出，用戶可手動關閉，或停留 3s 后自動關閉。
繪制不同類型的情感化插畫表示缺省狀態，如404、500、暫時沒有數據、沒有新消息等。
頁面需要一個默認的底色，錯誤文字使用 14px，與情感化插畫間距 20px，與按鈕間距 30px。
數據可視化部分可能是后臺產品中對視覺設計要求較高的部分，使用情境為各類統計圖、大屏展示頁面等。
功能型頁面的數據可視化可以引入圖形化設計組件，Echarts、G2、d3等；展示型頁面的數據可視化則可以做得更有趣，比如立體的統計圖、粒子地球效果、靈活有趣的網絡拓撲圖等。
考慮到數據可視化可能會需要深色淺色不同的背景，在數據可視化統計圖的色彩搭配上要注意顏色的拓展性。
1. 設計前端一家親
2. 書籍推薦
3. 文章和作品推薦
不管是做 C 端產品還是 B 端產品，都是為了實現用戶的需求、幫用戶解決問題。
剛接觸后臺產品的時候，最希望能把產品做的炫酷、美觀，工作中慢慢地發現項目的背后思考更為重要，產出的設計成果也應該有理有據、支撐整個設計體系。網上供大家使用和學習的資源非常多，對一些公司來說、專門去制定一套自己的后臺設計規范不免顯得費時費力，合理引入 antdesign 和 element 等開源的設計組件，會使得設計師以及前端事半功倍，有助于設計師把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上。
在后臺產品的設計過程中，更應該把寶貴的時間用在更值得關注的事物上，讓設計師能夠輔助業務挖掘，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
常見的網頁設計、文章設計錯誤
本文來自阮一峰分享
1.內容未按邏輯分成塊
用戶可以根據邏輯塊輕易的獲取信息。
具體做法為：將padding設置為120px-180px，同時不同的邏輯塊使用不同的背景。
2.每個邏輯塊的空白大小不一致
對于每個邏輯塊，需要設置同等大小且適宜的空白。否則網頁看起來會很混亂，作者不會對每個邏輯塊同等對待。
3.Padding不能設置過小，否則用戶無法將內容分為邏輯塊
為了這點，插入大的空白（至少120px），以使內容按邏輯塊分開。
4.背景圖片和文字 應該對比鮮明
5.在一頁中，樣式過多
太多不同 的排版和樣式將會使得頁面不太專業以及難以閱讀。
解決的方法是，以字體為例，設置一種字體，字體為正?；虼煮w（保證在兩種不同樣式之內）
6.背景顏色塊過于狹窄
7. 在一個狹窄的列中，放入了過多的文字
這導致用戶閱讀需跳很多行，整體看起來也不行。推薦的做法為，減少列的數量，精煉文字。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
藍藍設計的小編 http://m.skdbbs.com
