国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

本文簡要全面地介紹了后臺產(chǎn)品的設(shè)計規(guī)范，希望對大家有幫助！

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

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

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

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

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

一、工作流程

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

1. 原型圖之前，對于產(chǎn)品經(jīng)理而言，往往還有很多大量的工作需要處理，這里就不做具體講解；
2. 圖中明確提到“設(shè)計規(guī)范”，可見我的出發(fā)點，不僅僅是我一個人的疑惑，那么接下來，就開始我們的表演吧。

二、網(wǎng)站設(shè)計——Z軸內(nèi)容層級

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

• 底層：數(shù)據(jù)層、邏輯層
• 內(nèi)容：各種功能匯總
• 導航：將內(nèi)容進行整理
• 權(quán)限：對用戶訪問數(shù)據(jù)、導航進行限制
• 全屏展示：按照產(chǎn)品設(shè)計，根據(jù)導航，展示對應(yīng)內(nèi)容
• 插件：頁面點擊、跳轉(zhuǎn)等交互
• 彈窗：頁面信息反饋，與用戶之間的交互

三、頁面尺寸

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

1. 屏幕尺寸

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

2. 頁面布局

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

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

3. 分頁

常見的分頁樣式：

分頁樣式一：滾動翻頁

分頁樣式二：常規(guī)分頁

分頁樣式三：常規(guī)分頁，用于頁數(shù)較小的場景

四、表單

1. 短文本

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

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

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

3. 選擇器

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

4. 長文本

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

常見的長文本，還有富文本、Markdown、JsonEditor。

五、Tab

• 常見Tab分三類，頂部tab、底部Tab、側(cè)邊欄Tab，其中側(cè)邊欄TaB分左側(cè)邊欄、右側(cè)邊欄
• 主要考慮各類tab的操作路徑，頁面風格統(tǒng)一布局等問題

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

六、字體&顏色

1. 字體

2. 格式

3. 顏色

七、切圖樣式

八、控件組件

九、彈框樣式

1. Toast

用戶產(chǎn)生操作，出現(xiàn)toast提示，一般2-3s消失；通過toast中的提示語告知用戶需要了解的信息。讓用戶的行為在使用過程中得到反饋和幫助。

2. 使用場景

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

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

3. alert?警示提示

當用戶進行某種操作時，網(wǎng)站會出現(xiàn)對應(yīng)的警告信息提示用戶，該提示信息的狀態(tài)不會主動消失。

4. 使用場景

當某個頁面需要向用戶顯示警告的信息時。

非浮層的靜態(tài)展現(xiàn)形式，始終展現(xiàn)，不會自動消失，有的組件用戶可以點擊關(guān)閉。

5. dialog對話框

用于提示用戶當前操作，或是完成某個任務(wù)時需要的一些其他額外的信息。對話框可以用確定/取消的簡單的應(yīng)答模式，也可以是自定義復(fù)雜的模式，例如表單的填寫。

6. 使用場景

用戶在進行重要操作的時，需要進行二次確認。

用于重要的反饋提示，讓用戶知道信息提示。

承載少量的表單填寫類，減少頁面的跳轉(zhuǎn)。

7. Notification通知提醒框

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

8. 使用場景

較為復(fù)雜的通知內(nèi)容。

帶有交互的通知，給出用戶下一步的行動點。

系統(tǒng)主動推送。

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

10. tooltip 文字提示

簡單輕量的的文字提示。

11. 使用場景

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

常用于解釋操作按鈕的文字說明。

十、加載樣式

1. 菊花樣式

2. 進度條樣式

十一、命名規(guī)則

內(nèi)容到這里就結(jié)束了，比較多比較雜，但是這肯定是最全的一份文章。

本文由 @?peter 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。