中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

一、工作流程

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

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

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

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

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

三、頁(yè)面尺寸

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

1. 屏幕尺寸

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

2. 頁(yè)面布局

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

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

3. 分頁(yè)

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

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

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

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

四、表單

1. 短文本

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

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

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

3. 選擇器

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

4. 長(zhǎng)文本

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

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

五、Tab

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

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

六、字體&顏色

1. 字體

2. 格式

3. 顏色

七、切圖樣式

八、控件組件

九、彈框樣式

1. Toast

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

2. 使用場(chǎng)景

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

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

3. alert?警示提示

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

4. 使用場(chǎng)景

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

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

5. dialog對(duì)話框

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

6. 使用場(chǎng)景

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

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

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

7. Notification通知提醒框

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

8. 使用場(chǎng)景

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

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

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

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

10. tooltip 文字提示

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

11. 使用場(chǎng)景

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

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

十、加載樣式

1. 菊花樣式

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

十一、命名規(guī)則

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

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

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