為什么突然會(huì )談到后臺產(chǎn)品設計規范這個(gè)話(huà)題，一切起源于目前的工作環(huán)境。

先做個(gè)自我介紹吧：目前的我，是一家互聯(lián)網(wǎng)企業(yè)的后臺產(chǎn)品經(jīng)理。

對于公司的產(chǎn)品來(lái)講，主要都是以技術(shù)驅動(dòng)服務(wù)，為實(shí)現更個(gè)性的可配置化，往往面臨很多的復雜邏輯，當然還在參悟之中。但是由于快迭代的原因，導致后臺產(chǎn)品，在體驗上、視覺(jué)上非常的凌亂，且沒(méi)有統一的體驗感，所以才有了本次的想法。

另：本文會(huì )盡量保持精簡(jiǎn)的態(tài)度進(jìn)行呈現。

由于本人比較懶，文中圖片大多數來(lái)自，本人分享ppt的截圖。內容過(guò)多，但保持好耐心，會(huì )看到很全面的東西。

在網(wǎng)上也看了一些文章，覺(jué)得還是從工作流程開(kāi)始講起會(huì )比較好，先貼上一張感覺(jué)很有道理的盜圖。

原型圖之前，對于產(chǎn)品經(jīng)理而言，往往還有很多大量的工作需要處理，這里就不做具體講解；

圖中明確提到“設計規范?#20445;?#21487;見(jiàn)我的出發(fā)點(diǎn)，不僅僅是我一個(gè)人的疑惑，那么接下來(lái)，就開(kāi)始我們的表演吧。

對于后臺產(chǎn)品經(jīng)理而言，常常面對的是后臺網(wǎng)頁(yè)產(chǎn)品，所以本文也會(huì )圍繞著(zhù)網(wǎng)頁(yè)產(chǎn)品進(jìn)行談起。

底層：數據層、邏輯層

內容：各種功能匯總

導航：將內容進(jìn)行整理

權限：對用戶(hù)訪(fǎng)問(wèn)數據、導航進(jìn)行限制

全屏展示：按照產(chǎn)品設計，根據導航，展示對應內容

插件：頁(yè)面點(diǎn)擊、跳轉等交互

彈窗：頁(yè)面信息反饋，與用戶(hù)之間的交互

既然是做產(chǎn)品，自然要清楚自己的產(chǎn)品到底有著(zhù)什么樣的底子。

1. 屏幕尺寸

可參考http://uiiiuiii.com/screen/computer.htm

2. 頁(yè)面布局

同一個(gè)產(chǎn)品，布局盡量保證統一，具體布局可參考：https://zhidao.baidu.com/question/585199825.html

呈一份自己比較喜歡的網(wǎng)頁(yè)布局：統一T型網(wǎng)站布局，頁(yè)面主要內容，上下型框架，上下間距32px

3. 分頁(yè)

常見(jiàn)的分頁(yè)樣式：

分頁(yè)樣式一：滾動(dòng)翻頁(yè)

分頁(yè)樣式二：常規分頁(yè)

分頁(yè)樣式三：常規分頁(yè)，用于頁(yè)數較小的場(chǎng)景

1. 短文本

用于用戶(hù)文本輸入，并以字符串的方式提交到數據庫。

2. 短文本聯(lián)想

用戶(hù)用于文本輸入，在輸入過(guò)程中會(huì )聯(lián)想匹配文本選項，并以字符串的方式提交到數據庫。

3. 選擇器

用戶(hù)通過(guò)選擇枚舉項，提交到服務(wù)器。后端存儲為枚舉項。

4. 長(cháng)文本

用戶(hù)用于長(cháng)文本輸入，并以文本的方式提交到數據庫。

常見(jiàn)的長(cháng)文本，還有富文本、Markdown、JsonEditor。

常見(jiàn)Tab分三類(lèi)，頂部tab、底部Tab、側邊欄Tab，其中側邊欄TaB分左側邊欄、右側邊欄

主要考慮各類(lèi)tab的操作路徑，頁(yè)面風(fēng)格統一布局等問(wèn)題

具體界面UI，根據各產(chǎn)品進(jìn)行定義

1. 字體

2. 格式

3. 顏色

1. Toast

用戶(hù)產(chǎn)生操作，出現toast提示，一般2-3s消失；通過(guò)toast中的提示語(yǔ)告知用戶(hù)需要了解的信息。?#23652;?#25142;(hù)的行為在使用過(guò)程中得到反饋和幫助。

2. 使用場(chǎng)景

可提供成功、警告或錯誤等反饋信息。

頂部居中顯示并自動(dòng)消失，是一種不打斷用戶(hù)操作的輕量級提示方式。

3. alert 警示提示

當用戶(hù)進(jìn)行某種操作時(shí)，網(wǎng)站會(huì )出現對應的警告信息提示用戶(hù)，該提示信息的狀態(tài)不會(huì )主動(dòng)消失。

4. 使用場(chǎng)景

當某個(gè)頁(yè)面需要向用戶(hù)顯示警告的信息時(shí)。

非浮層的靜態(tài)展現形式，始終展現，不會(huì )自動(dòng)消失，有的組件用戶(hù)可以點(diǎn)擊關(guān)閉。

5. dialog對話(huà)框

用于提示用戶(hù)當前操作，或是完成某個(gè)任務(wù)時(shí)需要的一些其他額外的信息。對話(huà)框可以?#20040;_定/取消的簡(jiǎn)單的應答模式，也可以是自定義復雜的模式，例如表單的填寫(xiě)。

6. 使用場(chǎng)景

用戶(hù)在進(jìn)行重要操作的時(shí)，需要進(jìn)行二次確認。

用于重要的反饋提示，?#23652;?#25142;(hù)知道信息提示。

承載少量的表單填寫(xiě)類(lèi)，減少頁(yè)面的跳轉。

7. Notification通知提醒框

懸浮出現在網(wǎng)頁(yè)右上角，用于全局的提醒式通知。常見(jiàn)于服務(wù)器異常、操作失敗等。

8. 使用場(chǎng)景

較為復雜的通知內容。

帶有交互的通知，給出用戶(hù)下一步的行動(dòng)點(diǎn)。

系統主動(dòng)推送。

Notification通知提醒框出現在網(wǎng)頁(yè)右上角，一般4-5s消失，也可以點(diǎn)擊叉號進(jìn)行關(guān)閉。

10. tooltip 文字提示

簡(jiǎn)單輕量的的文字提示。

11. 使用場(chǎng)景

鼠標移入則立即顯示提示，移出則立即消失，不承載復雜文本和操作。

常用于解釋操作按鈕的文字說(shuō)明。

1. 菊花樣式

2. 進(jìn)度條樣式

內容到這里就結束了，比較多比較雜，但是這肯定是最全的一份文章。