設計規範：後臺產品如何進行規範設計
本文簡要全面地介紹了後臺產品的設計規範，希望對大家有幫助！
為什麼突然會談到後談產品設計規範這個話題，一切起源於目前的工作環境。
先做個自我介紹吧：目前的我，是一家網際網路企業的後臺產品經理。
對於公司的產品來講，主要都是已技術驅動服務，為實現更個性的可配置化，往往面臨很多的複雜邏輯，當然還在參悟之中。但是由於快迭代的原因，導致後臺產品，在體驗上、視覺上非常的凌亂，且沒有統一的體驗感，所以才有了本次的想法。
另：本文會盡量保持精簡的態度進行呈現。
由於本人比較懶，文中圖片大多數來自，本人分享ppt的截圖。內容過多，但保持好耐心，會看到很全面的東西。
一、工作流程
在網上也看了一些文章，覺得還是從工作流程開始講起會比較好，先貼上一張感覺很有道理的盜圖。
- 原型圖之前，對於產品經理而言，往往還有很多大量的工作需要處理，這裡就不做具體講解；
- 圖中明確提到“設計規範”，可見我的出發點，不僅僅是我一個人的疑惑，那麼接下來，就開始我們的表演吧。
二、網站設計——Z軸內容層級
對於後臺產品經理而言，常常面對的是後臺網頁產品，所以本文也會圍繞著網頁產品進行談起。
- 底層：資料層、邏輯層
- 內容：各種功能彙總
- 導航：將內容進行整理
- 許可權：對使用者訪問資料、導航進行限制
- 全屏展示：按照產品設計，根據導航，展示對應內容
- 外掛：頁面點選、跳轉等互動
- 彈窗：頁面資訊反饋，與使用者之間的互動
三、頁面尺寸
既然是做產品，自然要清楚自己的產品到底有著什麼樣的底子。
1. 螢幕尺寸
可參考http://uiiiuiii.com/screen/computer.htm
2. 頁面佈局
同一個產品，佈局儘量保證統一，具體佈局可參考：https://zhidao.baidu.com/question/585199825.html
呈一份自己比較喜歡的網頁佈局：統一T型網站佈局，頁面主要內容，上下型框架，上下間距32px
3. 分頁
常見的分頁樣式：
分頁樣式一：滾動翻頁
分頁樣式二：常規分頁
分頁樣式三：常規分頁，用於頁數較小的場景
四、表單
1. 短文字
用於使用者文字輸入，並以字串的方式提交到資料庫。
2. 短文字聯想
使用者用於文字輸入，在輸入過程中會聯想匹配文字選項，並以字串的方式提交到資料庫。
3. 選擇器
使用者通過選擇列舉項，提交到伺服器。後端儲存為列舉項。
4. 長文字
使用者用於長文字輸入，並以文字的方式提交到資料庫。
常見的長文字，還有富文字、Markdown、JsonEditor。
五、Tab
- 常見Tab分三類，頂部tab、底部Tab、側邊欄Tab，其中側邊欄TaB分左側邊欄、右側邊欄
- 主要考慮各類tab的操作路徑，頁面風格統一佈局等問題
具體介面UI，根據各產品進行定義
六、字型&顏色
1. 字型
2. 格式
3. 顏色
七、切圖樣式
八、控制元件元件
九、彈框樣式
1. Toast
使用者產生操作，出現toast提示，一般2-3s消失；通過toast中的提示語告知使用者需要了解的資訊。讓使用者的行為在使用過程中得到反饋和幫助。
2. 使用場景
可提供成功、警告或錯誤等反饋資訊。
頂部居中顯示並自動消失，是一種不打斷使用者操作的輕量級提示方式。
3. alert 警示提示
當用戶進行某種操作時，網站會出現對應的警告資訊提示使用者，該提示資訊的狀態不會主動消失。
4. 使用場景
當某個頁面需要向用戶顯示警告的資訊時。
非浮層的靜態展現形式，始終展現，不會自動消失，有的元件使用者可以點選關閉。
5. dialog對話方塊
用於提示使用者當前操作，或是完成某個任務時需要的一些其他額外的資訊。對話方塊可以用確定/取消的簡單的應答模式，也可以是自定義複雜的模式，例如表單的填寫。
6. 使用場景
使用者在進行重要操作的時，需要進行二次確認。
用於重要的反饋提示，讓使用者知道資訊提示。
承載少量的表單填寫類，減少頁面的跳轉。
7. Notification通知提醒框
懸浮出現在網頁右上角，用於全域性的提醒式通知。常見於伺服器異常、操作失敗等。
8. 使用場景
較為複雜的通知內容。
帶有互動的通知，給出使用者下一步的行動點。
系統主動推送。
Notification通知提醒框出現在網頁右上角，一般4-5s消失，也可以點選叉號進行關閉。
10. tooltip 文字提示
簡單輕量的的文字提示。
11. 使用場景
滑鼠移入則立即顯示提示，移出則立即消失，不承載複雜文字和操作。
常用於解釋操作按鈕的文字說明。
十、載入樣式
1. 菊花樣式
2. 進度條樣式
十一、命名規則
內容到這裡就結束了，比較多比較雜，但是這肯定是最全的一份文章。
本文由 @ peter 翻譯釋出於人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基於 CC0 協議。