如何有效地搭建B端產品？在搭建設計策略時，也許你可以將產品看作一個“房子”，並從房屋打造的視角，來理解產品的整體設計思路。本篇文章裡，作者用相對具象化的方式，講述了他對B端產品設計的思考，一起來看看吧。
前言
前面幾篇文章主要講了關於產品知識的部分，從這篇開始就是回顧B端設計本身的設計知識。
如果說一個B端產品相當於是一個房子，每個1級頁面相當於一個小的房間。那接下來我就以產品具象化為房子進行講解，方便讀者理解。
一、設計圖紙——如何學習設計規範
1. 作用
設計規範常見的作用主要體現在3個部分。
1）保證設計的一致性
主要是從2個角度進行拆解。
對內角度：多設計師合作，依然能保證設計風格的統一。
對使用者：提高使用者體驗，加深對產品的記憶，提升操作效率。
2）提升開發效率
對於前端同學溝通的有效的工具，能夠提高設計的還原度，降低對接的成本。在開發側可以建立公共元件庫，可以有效地提高開發效率。在開發完成4分之3的時候，走查小組進行還原度測試的時候，能減少問題的發生。
3）方便產品迭代
隨著產品在不同的階段和業務的變化，能夠發現一些問題，或者最佳化使用者體驗的時候，可以一鍵修改，十分便捷與高效。
建立之後，設計規範的協作流程：先判斷是否需要進行設計？需要的話元件搭建頁面，新增元件交給開發，最後是有頁面開發。不需要的話可以直接進行到開發的流程，設計師不用參與。
這樣的話就會帶來一個問題：這樣的設計師會不會沒有存在感？
在元件庫完善的團隊裡確實是會出現這種情況，這就是我前面為什麼優先寫的是關於產品的知識、以及使用者調研之類的知識，要知道我們服務的是誰，來保證設計師的競爭力，這個才是成為體驗設計師的的根本。
筆者認為設計師比到最後一定不是設計，而是對於使用者和業務的理解深度。
2. 原則
常見的4個設計原則是：清晰，高效，友好，可控。
1）清晰：
親密，對比，對齊，重複。
2）高效：
通常會有的特徵是一致性，便捷性。高效性要求B端設計儘可能的較少跳轉（原位>展開>氣泡展示>抽屜>新建）。
3）友好：
友好原則涉及到了操作的前中後。
操作前：給到適時的幫助與引導，減輕使用者迷茫（例子：新手幫助、探照燈、幫助中心）。
操作中：透過介面樣式和互動動效讓使用者可以清晰地感知到自己的操作（例子：拖拽特效）。
操作後：透過頁面元素的清晰變化，展現當前流轉狀態（例子：跳轉詳情頁，輕提示）。
4）可控：
就是在時間和空間可以隨時進行控制。
時間上就是自由——使用者可以進行操作，包括：撤銷，回退和終止當前合作等等。
空間上說的是導航——讓使用者時刻了解到自己當前的位置並，可以透過導航輕鬆回到上一級，下一級。
3. 學習方法
學習方法有很多種，我就分享下我自己的學習方法：小到大，搭建順序與使用場景分類。
小到大（原子理論）：原子，分子，元件，模組，頁面。
搭建順序與使用場景：基礎元件，展示元件，錄入組建，反饋組建，反饋組建，頁面模式庫。
好了現在設計圖紙出來了，要進行施工了。那我們要完成通用元件（磚和水泥）以及佈局柵格導航（房梁和柱子）的搭建了。
二、房梁與柱子——佈局與柵格
1. 佈局分層
我們將整體佈局分為4層：
背景層：最底部的背景，通常指的是背景層。
全域性控制層：導航，也是就是能夠支撐整個產品的柱子。
內容層：承載內容的部分，柵格欄主要是用於這一層。
臨時層：彈窗，氣泡，文字提示輕提示等等。
有的後臺內容少，還採用版心佈局方式。這個時候應該怎麼處理？
在設計上，分為最小的頁邊距和自適應邊距，當螢幕開始縮小的時候，自適應頁面邊距的最小值。臨界值達到斷點之後，內容區發生變化，間距保持一致，水槽不變。另外說一點，設計師可以靈活定義式柵格範圍。
2. 房梁——柵格組成
柵格的組成：頁邊距，水槽，欄。
頁面距：左右2邊的邊距表示出內容區的範圍與其他（比如：擦邊導航欄），方便內容進行填充。
水槽：欄之間間距，主要是用於模組之間進行劃分。
欄：由水槽進行分割，基本數量=水槽數量+1。在進行高保真還原的場景，是按照相關的比例進行分割。
計算的欄的寬度：若頁面距取20，水槽取16。那每一欄的寬度=「內容區寬度-23*16-2*20」
柵格欄的好處：
柵格欄可以避免設計師憑著自己的感覺進行設計，設計團隊中多位設計師能夠做得更加的整齊規劃。
3. 柱子——導航元件
廣義定義/狹義定義：只要能夠跳轉的都是導航（例如：link）——狹義和廣義分類。
這裡我們使用的是廣義分類：全域性導航，區域性導航。主要是以控制範圍的大小來進行判斷。
1）全域性導航
① 頂部導航
常見的使用場景是：導航數量比較少，內容比較簡單，可以追求沉浸式的閱讀體驗。
優點：
佔用螢幕空間小，為內容留出更多的更大的空間；
對視覺的干擾小，符合上到下的閱讀習慣。
缺點也很明顯：
隨著業務的發展，拓展性變差；
二三級點選後隱藏，不方便使用者記憶。
② 側邊導航
常見的使用場景是：更加適用於更專注功能和快速操作的系統，大多數用於複雜的系統。
優點：
拓展性比較強；
層級清晰，1級2級3級導航可以按照流程展示；
操作效率高，使用者在操作和瀏覽中可以快速的進行定位，和切換當前的定位。
缺點也很明顯：
視覺分隔較為明顯，內容區沉浸感不是很強；
視覺動線左右來回移動，比頂部導航還要疲憊；
內容區的排版空間更小，需要考慮適配的問題。
③ 混合導航
常見的使用場景是：適用於功能架構特別複雜的，結構複雜的產品。
優點：
拓展性比較強。
缺點也很明顯：
操作難度上升，操作動線更加的複雜；
內容區的展現收到了更大的影響。
④ 總結
從頂部導航欄到混合導航欄之間的設計，發生了3個變化：
複雜度變高；
沉浸式體驗逐件變差；
內容區的適配性逐件變差。
2）區域性導航
① 麵包屑導航
常見的使用場景是：2級以上的層級，最好不要超過5級。
常見的位置：
麵包屑導航注意點：
麵包屑導航優先順序高於標籤欄導航；
麵包屑導航的中的每一次點選都必須有相應的頁面承載；
麵包屑導航層級過於複雜時候，中間層級顯示可以用“……”呈現。
② 標籤
標籤頁可以幫助使用者在同一個頁面快速地切換不同的型別內容，提高單個頁面的拓展性。一般和時間狀態扭轉相關。
常見的樣式：
③ 分頁
