本文介紹了制定產(chǎn)品設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)的重要性，也包括行業(yè)對于高級(jí)產(chǎn)品經(jīng)理的要求，并以幾點(diǎn)詳細(xì)介紹，包括了制定標(biāo)準(zhǔn)的共同目標(biāo)、基礎(chǔ)要素、設(shè)計(jì)原則、規(guī)范制定的流程以及如何推動(dòng)規(guī)范的執(zhí)行等。適合產(chǎn)品崗位的你閱讀。

每一款產(chǎn)品，都會(huì)有它的產(chǎn)品設(shè)計(jì)規(guī)范。例如支付寶小程序，微信小程序，有它的設(shè)計(jì)風(fēng)格和交互的審核要求。

而適用于移動(dòng)應(yīng)用以及Web設(shè)計(jì)，可以參考Material Design（Google），強(qiáng)調(diào)直觀性、一致性和有意義的動(dòng)效設(shè)計(jì)。

如果你是ios產(chǎn)品，那首先就得去了解Human Interface Guidelines（Apple），再基于這個(gè)設(shè)計(jì)規(guī)范制定符合平臺(tái)的標(biāo)準(zhǔn)，最通用，最基礎(chǔ)的，就當(dāng)屬M(fèi)icrosoft Design Guidelines，適用于Windows平臺(tái)的設(shè)計(jì)規(guī)范，強(qiáng)調(diào)平面化、簡潔和直觀的設(shè)計(jì)風(fēng)格。

為什么要制定產(chǎn)品的規(guī)范標(biāo)準(zhǔn)？

制定產(chǎn)品的規(guī)范標(biāo)準(zhǔn)可以提高產(chǎn)品的一致性、可用性和用戶體驗(yàn)，幫助建立品牌形象、提升用戶滿意度，并為團(tuán)隊(duì)提供明確的指導(dǎo)，提高工作效率和協(xié)作效果。

行業(yè)對于高級(jí)產(chǎn)品經(jīng)理的要求:

1. 根據(jù)產(chǎn)品的戰(zhàn)略制定產(chǎn)品周期性的規(guī)劃。
2. 根據(jù)產(chǎn)品定位制定產(chǎn)品的設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)。
3. 項(xiàng)目管理能力。
4. 團(tuán)隊(duì)管理能力。

在講這篇內(nèi)容之前，先容許我把之前的幾篇文章給大家同步一下，感興趣的小伙伴或者遇到瓶頸的小伙伴一定要看，我相信會(huì)對你們的提升帶來很大的幫助，內(nèi)容很長，建議先收藏。

1. 【突破產(chǎn)品瓶頸】如何做有價(jià)值的產(chǎn)品：通過產(chǎn)品體系對功能進(jìn)行剖析，有利于挖掘用戶的痛點(diǎn)，保證每個(gè)功能都有價(jià)值
2. 【突破產(chǎn)品瓶頸】8年實(shí)戰(zhàn)經(jīng)驗(yàn)教你通過結(jié)構(gòu)化思維提升產(chǎn)品能力：通過對結(jié)構(gòu)化思維和邏輯思維的探討，用實(shí)例給大家介紹如何形成產(chǎn)品方法論
3. 【突破產(chǎn)品瓶頸】設(shè)計(jì)私域運(yùn)營工具做用戶增長：做產(chǎn)品經(jīng)理需要具備私域運(yùn)營底層邏輯的理解，針對性去做通用的工具
4. 【干貨系列】SaaS系統(tǒng)如何制定營銷中心，讓你把用戶牢牢掌握在手中：SaaS平臺(tái)兩大核心 – 數(shù)據(jù)驅(qū)動(dòng)，營銷中心，營銷中心則是賦能B端的武器

我們先來簡單的對規(guī)范標(biāo)準(zhǔn)有個(gè)概念，有很多小伙伴都總是會(huì)在這兩個(gè)詞進(jìn)行拉扯，但其實(shí)這兩個(gè)詞加起來就代表了準(zhǔn)則。而規(guī)范則是基于標(biāo)準(zhǔn)之下，如支付寶小程序，它的設(shè)計(jì)規(guī)范，對于我們來講，就是平臺(tái)的設(shè)計(jì)標(biāo)準(zhǔn)，我們基于這個(gè)標(biāo)準(zhǔn)下再去制定屬于自己產(chǎn)品的設(shè)計(jì)規(guī)范。

那我們現(xiàn)在來看看，標(biāo)準(zhǔn)和規(guī)范在文學(xué)上的區(qū)別為：意思不同、出處不同。

① 意思不同

• 標(biāo)準(zhǔn)：衡量事物的準(zhǔn)則。
• 規(guī)范：約定俗成或明文規(guī)定。

② 出處不同

規(guī)范要求和標(biāo)準(zhǔn)的區(qū)別：

• 標(biāo)準(zhǔn)：是為了在一定的范圍內(nèi)獲得最佳秩序，經(jīng)協(xié)商一致制定并由公認(rèn)機(jī)構(gòu)批準(zhǔn)，共同使用的和重復(fù)使用的一種規(guī)范性文件。
• 規(guī)范要求：對于某一工程作業(yè)或者行為進(jìn)行定性的信息規(guī)定。主要是因?yàn)闊o法精準(zhǔn)定量而形成的標(biāo)準(zhǔn)，所以，被稱為規(guī)范。

③ 成因不同

• 標(biāo)準(zhǔn)：是科學(xué)、技術(shù)和實(shí)踐經(jīng)驗(yàn)的總結(jié)。為在一定的范圍內(nèi)獲得最佳秩序，對實(shí)際的或潛在的問題制定共同的和重復(fù)使用的規(guī)則的活動(dòng)。
• 規(guī)范要求：可以由組織正式規(guī)定，也可以是非正式形成。

接下來，我們開始今天的主要內(nèi)容。小編會(huì)通過三個(gè)篇章，七個(gè)章節(jié)，給大家提供落地的方法。

倘若你目前剛好處在對于制定產(chǎn)品的規(guī)范標(biāo)準(zhǔn)無從下手的階段，以下內(nèi)容絕對能夠讓你按部就班的完成；假如你已經(jīng)為多個(gè)平臺(tái)制定過標(biāo)準(zhǔn)，也可以參考本篇內(nèi)容，思考下有沒有進(jìn)步的空間；假如你從來沒接觸也沒有機(jī)會(huì)制定，那么，這篇文章就是你的敲門磚。

一、基礎(chǔ)篇

1. 為什么要制定產(chǎn)品的規(guī)范標(biāo)準(zhǔn)

小編總結(jié)了十點(diǎn)，先給大家介紹一下，我們?yōu)槭裁匆プ鲞@個(gè)事情，這個(gè)事情給我們帶來什么價(jià)值。

作為產(chǎn)品，我們必須要清楚一個(gè)原則在于：我們做的任何事情，都得有它的價(jià)值，要清楚它的目的再去做，拒絕為了做而做的行為，切勿讓自己變成了傳聲筒。

1. 用戶體驗(yàn)（User Experience, UX）：產(chǎn)品設(shè)計(jì)應(yīng)關(guān)注用戶體驗(yàn)，確保產(chǎn)品易于使用、直觀、高效，并滿足用戶需求。包括界面設(shè)計(jì)、導(dǎo)航流程、信息架構(gòu)等方面。
2. 可用性（Usability）：產(chǎn)品設(shè)計(jì)應(yīng)注重可用性，確保用戶可以輕松理解和操作產(chǎn)品。包括可讀性、可理解性、易學(xué)性、易記性等方面。
3. 一致性（Consistency）：產(chǎn)品設(shè)計(jì)應(yīng)保持一致性，確保界面、交互和設(shè)計(jì)元素在不同功能模塊和平臺(tái)上的一致性。這有助于用戶熟悉和使用產(chǎn)品，并建立品牌形象。
4. 可訪問性（Accessibility）：產(chǎn)品設(shè)計(jì)應(yīng)考慮到不同用戶的需求，包括身體殘障、視覺障礙和聽覺障礙等。確保產(chǎn)品對所有用戶都具有可訪問性和可用性。
5. 反饋和提示（Feedback and Guidance）：產(chǎn)品設(shè)計(jì)應(yīng)提供明確的反饋和指導(dǎo)，讓用戶知道他們的操作是否成功，并提供幫助和提示信息。
6. 視覺設(shè)計(jì)（Visual Design）：產(chǎn)品設(shè)計(jì)應(yīng)注重視覺設(shè)計(jì)，包括色彩搭配、字體選擇、圖標(biāo)設(shè)計(jì)等，以確保產(chǎn)品界面美觀、吸引人，并符合品牌形象。
7. 簡潔性（Simplicity）：產(chǎn)品設(shè)計(jì)應(yīng)追求簡潔性，避免復(fù)雜和冗余的設(shè)計(jì)。簡潔的設(shè)計(jì)有助于用戶理解和操作產(chǎn)品，提高用戶滿意度。
8. 可擴(kuò)展性（Scalability）：產(chǎn)品設(shè)計(jì)應(yīng)考慮到未來的擴(kuò)展和升級(jí)，確保產(chǎn)品具有可擴(kuò)展性和靈活性，以滿足不斷變化的需求。
9. 安全性（Security）：產(chǎn)品設(shè)計(jì)應(yīng)注重安全性，確保用戶數(shù)據(jù)和隱私的保護(hù)。包括用戶身份驗(yàn)證、數(shù)據(jù)加密和安全的交互設(shè)計(jì)等方面。
10. 性能（Performance）：產(chǎn)品設(shè)計(jì)應(yīng)考慮性能因素，包括響應(yīng)時(shí)間、加載速度和系統(tǒng)穩(wěn)定性等。確保產(chǎn)品能夠快速、穩(wěn)定地運(yùn)行，并提供良好的用戶體驗(yàn)。

綜上所述，制定產(chǎn)品的設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)可以帶來許多益處，包括提升用戶體驗(yàn)、降低開發(fā)成本、增強(qiáng)品牌形象和改善團(tuán)隊(duì)協(xié)作。

規(guī)范的制定和執(zhí)行有助于打造出一致、優(yōu)質(zhì)的產(chǎn)品，提高用戶滿意度和市場競爭力。

2. 產(chǎn)品設(shè)計(jì)必須注意的常識(shí)問題

產(chǎn)品設(shè)計(jì)的常識(shí)（Common Sense），很多時(shí)候都會(huì)被忽略，特別一些小型項(xiàng)目。研發(fā)人員會(huì)在初期嫌麻煩不對一些常識(shí)的問題進(jìn)行處理，最終導(dǎo)致的影響，往往是影響到產(chǎn)品的本身。

產(chǎn)品一定要把控好這個(gè)關(guān)卡，誰都可以不懂，產(chǎn)品一定要最清楚最基本的就是系統(tǒng)異常處理設(shè)計(jì)規(guī)范能夠有效解決且避免以下七點(diǎn)：

1. 列表篩選項(xiàng)與表頭不對應(yīng)：這是很多產(chǎn)品設(shè)計(jì)會(huì)犯的錯(cuò)，列表的篩選項(xiàng)與表頭不一致的缺點(diǎn)在于用戶篩選操作之后沒法得到篩選結(jié)果是否符合篩選條件的反饋。舉個(gè)例子，訂單列表篩選項(xiàng)有個(gè)狀態(tài)篩選，包括待支付、待發(fā)貨、已發(fā)貨、已收貨、已完成等狀態(tài)。然而，如果列表沒有狀態(tài)這一列，那么用戶進(jìn)行完?duì)顟B(tài)篩選后無法通過列表確定訂單的狀態(tài)是不是和篩選的狀態(tài)一致。結(jié)果，用戶只能點(diǎn)擊訂單詳情去核實(shí)，增加了不必要的操作。
2. 沒有考慮列表為空的處理：對于列表為空，要給出明確的無數(shù)據(jù)指示。同時(shí)，對于需要用戶主動(dòng)添加才有的數(shù)據(jù)，應(yīng)當(dāng)給出明確的引導(dǎo)。此外，對于網(wǎng)絡(luò)錯(cuò)誤、無權(quán)限、找不到對應(yīng)資源、系統(tǒng)錯(cuò)誤等情況也應(yīng)該提供用戶體驗(yàn)友好的缺省頁面。
3. 表單沒有相應(yīng)占位文字：對于那些比較難理解的字段，建議是給出示例，而對于有特殊規(guī)則的字段也要給出說明，避免用戶填寫錯(cuò)誤，如輸入框里面的text 。
4. 表單不明確校驗(yàn)規(guī)則：文本類沒有明確字段長度范圍，導(dǎo)致輸入的文字過長，界面錯(cuò)亂或是由于數(shù)據(jù)庫長度限制導(dǎo)致報(bào)錯(cuò)。
5. 數(shù)值沒有設(shè)置常規(guī)校驗(yàn)和按規(guī)范糾正：數(shù)值類沒有明確正負(fù)數(shù)，數(shù)值范圍或者小數(shù)位數(shù)，結(jié)果導(dǎo)致程序出現(xiàn)各種數(shù)據(jù)統(tǒng)計(jì)問題。文件沒有明確大小限制，結(jié)果用戶上傳很大的文件占據(jù)服務(wù)器存儲(chǔ)資源。圖片沒有約定比例或尺寸，導(dǎo)致用戶界面看起來圖片變形，影響美觀。手機(jī)號(hào)、證件號(hào)碼、郵箱沒有校驗(yàn)對應(yīng)規(guī)則，導(dǎo)致錄入的數(shù)據(jù)錯(cuò)誤。唯一性數(shù)據(jù)沒有明確限制，導(dǎo)致系統(tǒng)查詢時(shí)出現(xiàn)多條數(shù)據(jù)的bug。
6. 表單不考慮親密性原則：進(jìn)行信息分組，將相關(guān)性強(qiáng)、同屬性、同本質(zhì)的內(nèi)容放在一起。在設(shè)計(jì)中，聯(lián)動(dòng)的元素、字段，相關(guān)性高的信息，按就近原則布局，可有效避免用戶視線的跳躍，避免用戶錯(cuò)過或忽略關(guān)鍵信息。
7. 錯(cuò)誤文案由開發(fā)自由發(fā)揮：曾經(jīng)在不少產(chǎn)品中見過出現(xiàn)類似“An error occurred”的英文報(bào)錯(cuò)信息，實(shí)際上這是程序運(yùn)行異常的報(bào)錯(cuò)信息。這種信息直接拋給用戶體驗(yàn)是非常糟糕的，用戶根本無法知道哪里出現(xiàn)了錯(cuò)誤。由于產(chǎn)品經(jīng)理沒有明確錯(cuò)誤提示文案，開發(fā)人員則根據(jù)自己的理解自行設(shè)定錯(cuò)誤提示，會(huì)出現(xiàn)很多對用戶不友好的錯(cuò)誤提示。
8. 違反一致性原則要求在相同或熟悉的功能和場景中，在一個(gè)（或一個(gè)品類）產(chǎn)品中使用一致的性能、操作和感覺。一致性的目的是降低用戶的學(xué)習(xí)成本、用戶的認(rèn)知成本和誤用的概率。

產(chǎn)品設(shè)計(jì)是否保持一致很容易反映出一個(gè)產(chǎn)品經(jīng)理做事情的嚴(yán)謹(jǐn)性。有不少產(chǎn)品經(jīng)理設(shè)計(jì)產(chǎn)品很隨意，抱著“能用就行”的態(tài)度做設(shè)計(jì)，結(jié)果就會(huì)出現(xiàn)整個(gè)產(chǎn)品的一致性非常差。

比如，列表的添加按鈕一會(huì)在頁面的右上角，一會(huì)在頁面的左上角，搞得用戶使用不同的頁面像是在玩“躲貓貓”游戲一般，學(xué)習(xí)成本非常高。

再比如移動(dòng)端，有些頁面使用長按刪除，有的使用向左滑動(dòng)刪除，還有的需要點(diǎn)擊“…”在彈層中點(diǎn)擊刪除……同一個(gè)產(chǎn)品，多種交互形式也會(huì)讓用戶困惑。

至此，產(chǎn)品的規(guī)范標(biāo)準(zhǔn)入門篇已經(jīng)跟大家介紹完了。大家在做任何一個(gè)項(xiàng)目的時(shí)候，都應(yīng)該注意入門篇的兩個(gè)章節(jié)，究竟有沒有做到位，有沒有制定規(guī)范標(biāo)準(zhǔn)同步到設(shè)計(jì)，研發(fā)。

入門篇基本滿足大部門從0-1的項(xiàng)目，或者是初中級(jí)的產(chǎn)品經(jīng)理所需要掌握的技能，建議大家收藏起來。如果遇到這類任務(wù)的時(shí)候，就可以以這篇文章，作為你們的任務(wù)List，一項(xiàng)一項(xiàng)對應(yīng)的去檢查是否有做到位。那么我相信你們吹來的作品，一定是具備一定的專業(yè)度，一致性以及可延展性的。

二、入門篇

在入門篇開始之前，先給大家交個(gè)底。我們在制定產(chǎn)品入門篇的規(guī)范標(biāo)準(zhǔn)時(shí)，有一個(gè)部門必須拉他們參與進(jìn)來，那就UI部。UI部門在入門篇的環(huán)節(jié)，起到了決定性的作用，由他們?yōu)橹鲗?dǎo)，我們?yōu)檩o助的方式，達(dá)成一致性的決定。

這一個(gè)環(huán)節(jié)，最重要的目的是讓產(chǎn)品與UI保持同頻，大家都在統(tǒng)一規(guī)范標(biāo)準(zhǔn)下進(jìn)行設(shè)計(jì)，為產(chǎn)品添磚加瓦。而且通常我們都會(huì)把這個(gè)環(huán)節(jié)以一個(gè)功能模塊級(jí)別的需求去做，也有這個(gè)需求的版本，持續(xù)優(yōu)化迭代。

當(dāng)然，需要優(yōu)化迭代的時(shí)候，那就應(yīng)該是由產(chǎn)品為主導(dǎo)，在原有的標(biāo)準(zhǔn)下，再去優(yōu)化規(guī)范，最終形成新一版的規(guī)范標(biāo)準(zhǔn)。

這個(gè)環(huán)節(jié)也是能夠讓產(chǎn)品在與UI溝通上的成本減少，在同頻基礎(chǔ)下工作也有利于減少兩個(gè)部門之間的摩擦。

1. 產(chǎn)品交互設(shè)計(jì)規(guī)范

相信大家應(yīng)該也聽說過交互設(shè)計(jì)師這個(gè)崗位，大多數(shù)在中小型企業(yè)很難有資源去匹配這個(gè)崗位，一般都是在成熟的互聯(lián)網(wǎng)公司會(huì)有這個(gè)崗位的需求。

通過這么個(gè)規(guī)律我們也可以發(fā)現(xiàn)：需要注重交互設(shè)計(jì)，往往到了產(chǎn)品已經(jīng)扎根土地，茁壯成長的階段。

相對比較穩(wěn)定的時(shí)候就會(huì)開始考慮這個(gè)問題，但并不代表說，交互設(shè)計(jì)不重要。交互設(shè)計(jì)對于產(chǎn)品來言，在做需求時(shí)，靠的是經(jīng)驗(yàn)，靠的是競品分析，靠的是借鑒。

看到這里的小伙伴們，自動(dòng)自覺對號(hào)入座，往往一味的靠經(jīng)驗(yàn)，靠競品，靠借鑒，只會(huì)讓產(chǎn)品的交互五花八門，沒有一個(gè)體系。單個(gè)功能抽出來可能是合理的，方便的；但全部湊在一起的時(shí)候，倘若需要用戶去適應(yīng)，那么就適得其反。

因此，我們產(chǎn)品就需要UI同學(xué)幫忙一起制定出產(chǎn)品交互設(shè)計(jì)規(guī)范，而產(chǎn)品本身，也應(yīng)該有一套自己的標(biāo)準(zhǔn)，把控好產(chǎn)品的交互，這樣才有利于產(chǎn)品的發(fā)展。

接下來，我會(huì)通過收集一些常見的交互問題，給大家用實(shí)例去介紹產(chǎn)品交互設(shè)計(jì)規(guī)范如何制定。

1）做一個(gè)頁面交互設(shè)計(jì)的時(shí)候要注意什么？

1. 我們現(xiàn)在看到移動(dòng)端，一般都是通過頭部，腰部，底部去進(jìn)行拆解，頭部一般都是搜索框，banner，中部是突出你產(chǎn)品的核心轉(zhuǎn)化內(nèi)容，底部是菜單欄，把你的產(chǎn)品模塊標(biāo)準(zhǔn)化體現(xiàn)出來。
2. 我們要注意要有距離感，距離核心轉(zhuǎn)化切忌太遠(yuǎn)。例如：比如一個(gè)卡券的功能，突出店鋪是沒意義的，店鋪本身帶不來轉(zhuǎn)化，要突出的主題是卡券。同樣，進(jìn)入某一個(gè)商品，默認(rèn)界面也應(yīng)該是卡券。
3. 要注意內(nèi)容的一致性以及歸屬。例如：我的卡券就應(yīng)該在我的，不應(yīng)該出現(xiàn)店鋪里面，地址，名稱，號(hào)碼就應(yīng)該統(tǒng)一在二級(jí)頁面。除了對用戶的隱私保護(hù)之外，也應(yīng)該在我的個(gè)人信息作為統(tǒng)一入口，首頁展示核心內(nèi)容時(shí)，要注意分類，只展示一級(jí)分類，二級(jí)分類跳轉(zhuǎn)，三級(jí)分類表單，四級(jí)分類彈窗，這么個(gè)交互原則去設(shè)計(jì)
4. 注意豐富產(chǎn)品的隱喻設(shè)計(jì)。隱喻設(shè)計(jì)是很考驗(yàn)一個(gè)產(chǎn)品的功力，通過產(chǎn)品語言去引導(dǎo)用戶，移動(dòng)端界面，屏幕空間較小，能用圖標(biāo)的地方，少用文字。并不是一定都要用圖標(biāo)，而是要把握好隱喻的尺度。

2）如何理解模態(tài)框？

何時(shí)應(yīng)該使用模態(tài)框？模態(tài)框和阻斷框有什么區(qū)別？

模態(tài)對話框(Modal DialogueBox) ，阻斷(Blocking），可以用兩個(gè)比喻給大家解釋：

1. 模態(tài)=管制刀具；阻斷=殺人兇器。管制刀具不一定是殺人兇器（可以用來切菜）；模態(tài)不一定是阻斷的（可以是非阻斷的強(qiáng)制提醒）；
2. 殺人兇器可以是管制刀具；阻斷可以由模態(tài)來完成；殺人兇器不一定是管制刀具（毒藥、板磚也可以）；阻斷不一定是模態(tài)（非模態(tài)、強(qiáng)制跳轉(zhuǎn)也可以）。

3）在具體設(shè)計(jì)一個(gè)產(chǎn)品的過程中，把握住哪些關(guān)鍵點(diǎn)才能讓整個(gè)產(chǎn)品有著一致的交互體驗(yàn)，或者交互模式？比如iOS端和android端，比如web端和移動(dòng)端？

一致性，在交互設(shè)計(jì)中非常重要！保持交互一致性，有兩個(gè)武器：原則和規(guī)范。

規(guī)范又有兩個(gè)層面：指南Guidelines和規(guī)格

原則

一些指導(dǎo)性的東西，在設(shè)計(jì)當(dāng)中要遵從。在整個(gè)產(chǎn)品（無論多少端，多少子產(chǎn)品）都要遵守的。

舉例：一個(gè)界面完成一個(gè)任務(wù)；表單超過10項(xiàng)必須分步驟；用戶必須隨時(shí)能回到主界面……這些原則可以由不同的形式來實(shí)現(xiàn)，但必須遵從這些原則。

規(guī)范

文章開頭也有提及到，忘記了請翻上去復(fù)習(xí)一下。

指南：圈定具體的交互模式、色彩搭配和設(shè)計(jì)禁忌。

在這個(gè)層面，一個(gè)[構(gòu)]可以有多個(gè)[形]，但某個(gè)形只能有一個(gè)[構(gòu)]，達(dá)到相同位置、相同外觀、相同操作。通過指南能夠讓各個(gè)端（IOS和安卓）看起來似曾相識(shí)，便于用戶學(xué)習(xí)和養(yǎng)成習(xí)慣。

舉例：在沒有左側(cè)導(dǎo)航的詳情界面，必須包含面包屑；面包屑只能出現(xiàn)在PC瀏覽器端，不允許出現(xiàn)在響應(yīng)式web界面中。

IOS和安卓的官方Guidelines就是這樣的東西，但也可視情況制定私有的指南，也就是各個(gè)公司自己的設(shè)計(jì)指南。

規(guī)格：規(guī)格非常具體的描述了每一個(gè)模式的每一個(gè)形態(tài)的具體尺寸、色彩、響應(yīng)，精確到數(shù)值。

舉例：一級(jí)標(biāo)題，字號(hào)為宋體 18pt；行高30pt；行上下外距為5pt；色值為#CC9300。

3）表單布局有什么規(guī)范要注意的？

這個(gè)問題是初級(jí)產(chǎn)品經(jīng)理最容易犯的問題，設(shè)計(jì)太隨意，看到別人的就想復(fù)制粘貼過來。這個(gè)問題正是可以解決很多初級(jí)產(chǎn)品常見錯(cuò)誤的問題，以及給大家提供一個(gè)思路。

這里分享四個(gè)常見的表達(dá)布局對齊：

1. Text靠左對齊，輸入框在右。
2. Text靠右對齊，輸入框在右。
3. Text靠左對齊，輸入框在下。
4. Text在輸入框里。

首先，我們要清楚，人的視覺是上下，左右的。所以我們會(huì)把要填寫的標(biāo)題，放在左邊，輸入的內(nèi)容放在右邊。這個(gè)原因也在于大部分都是右撇子，所以放在右面方便輸入，而在左邊提到的四點(diǎn)，各有千秋。

關(guān)鍵在于考慮的出發(fā)點(diǎn)是用戶的視覺，還是表單的體驗(yàn)，抑或者是信息是否足夠直觀。再者就是是否夠簡潔，都是可供選擇，關(guān)鍵在于選定一個(gè)就保持一致。

綜上所述我們可以知道，交互設(shè)計(jì)可以通過交互的顯性和交互的隱性去考慮。

交互顯性

交互顯性指的是用戶在頁面所有的點(diǎn)擊，滑動(dòng)，跳轉(zhuǎn)的操作，比如刷新方式有下拉、上滑、按壓點(diǎn)擊等方式。

這就是所謂的交互顯性的操作。要保持產(chǎn)品顯性操作的統(tǒng)一性，同類別的交互不可有不同的操作感受。同時(shí)交互顯性要符合大眾的認(rèn)知習(xí)慣，可創(chuàng)新但不可違背潛意識(shí)，比如說PC端的交互顯性是以點(diǎn)擊事件作為核心操作的，移動(dòng)端的交互顯性是以滑動(dòng)作為核心操作的。

交互隱性

交互隱性指的是用戶信息發(fā)生改變時(shí)的顯示。比如說訂單狀態(tài)的顯示，確認(rèn)收貨后，綠色的標(biāo)簽顯示訂單已完成，申請售后則有售后的標(biāo)簽，一些平臺(tái)還會(huì)以訂單的顏色區(qū)分去給用戶隱喻。

再舉個(gè)例子，消息有個(gè)小紅點(diǎn)，用戶就會(huì)知道去點(diǎn)，上文也有提到隱喻，很多時(shí)候，我們就是通過交互隱性的方式，來引導(dǎo)用戶，提示用戶，這樣的方式有利于讓用戶自發(fā)性去體驗(yàn)，感受平臺(tái)的功能，帶來舒適感。

歸根結(jié)底，產(chǎn)品的交互離不開創(chuàng)新，一致，符合規(guī)范。

2. 產(chǎn)品布局設(shè)計(jì)規(guī)范

本章節(jié)我們以Web端為例，我們在設(shè)計(jì)過程中，需要考慮我們基于什么樣的尺寸進(jìn)行基礎(chǔ)設(shè)計(jì)。劃分哪些區(qū)域需要固定尺寸、哪些需要做適配等。

據(jù)統(tǒng)計(jì)，使用中系統(tǒng)的用戶的主流分辨率主要為 1920、1440 和 1366。

設(shè)計(jì)思考，有如下幾點(diǎn)：

• 保證畫布尺寸的一致性原則。
• 統(tǒng)一的網(wǎng)格單位。
• 統(tǒng)一的柵格系統(tǒng)。
• 視覺元素的統(tǒng)一和對齊等。

web頁面是按照Html的設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)進(jìn)行布局設(shè)計(jì)的，由以下三部分構(gòu)成:

1. 頭部區(qū)域header。
2. 主體區(qū)域main。
3. 底部區(qū)域footer。

1）Margin（邊距）

為避免頁面元素緊貼邊沿的情況發(fā)生，WEB 頁面和其中的表格，應(yīng)設(shè)定邊距，最小邊距值為 “3px”。

一般粗細(xì)直角以1px，圓角為2px。

2）Button（按鈕）

按鈕一般有三種樣式：小、中、大。

按鈕是交互設(shè)計(jì)中必備的元素，它在用戶和系統(tǒng)的交互中承擔(dān)著非常重要的作用。

后臺(tái)中常見的按鈕類型分為線性按鈕、文字按鈕、圖標(biāo)按鈕等。

按鈕并列間距為：小間距8px，中間距16px，大間距24px

其中小中大的寬度分別為：58px，74px，96px

3）Table（表單）

常見表單是由多個(gè)列表項(xiàng)構(gòu)成的。而每一個(gè)列表項(xiàng)都是由最基本的標(biāo)簽和輸入框組成，常規(guī)的表單包括單選、多選、下拉選、輸入框、時(shí)間選擇、開關(guān)選擇等控件。

頂部標(biāo)簽是標(biāo)簽在控件的上方，標(biāo)簽可以和控件左對齊，對于橫向空間不足的情況是一種很好的方案。

豎列標(biāo)簽的使用場景思考：

• 當(dāng)?面的一級(jí)功能較多，且存在擴(kuò)展的需求時(shí)，可考慮使?豎列樣式。
• 當(dāng)?面的層級(jí)較多，為了避免縱向的tab過多，可考慮使?豎列樣式作為第一級(jí)tab；每個(gè)標(biāo)簽都有其優(yōu)缺點(diǎn)，根據(jù)自己的產(chǎn)品選擇一種最適合自己產(chǎn)品的方式，規(guī)范中確定標(biāo)簽的對齊方式，每個(gè)控件的寬度、高度。

表格的設(shè)計(jì)思考：

• 表格文字和數(shù)據(jù)，以左對齊為準(zhǔn)。 表格內(nèi)的內(nèi)容在左對齊時(shí)，盡量與左邊表格邊距保持至少 10px 的間距。
• 表格在后臺(tái)系統(tǒng)設(shè)計(jì)中大約占40%左右的比重。

表格的設(shè)計(jì)規(guī)范的設(shè)計(jì)思考點(diǎn)如下：

• 操作列按鈕：每個(gè)按鈕字?jǐn)?shù)不超過6個(gè)字。
• 列數(shù)太多：默認(rèn)展示范圍：3-8列，若出現(xiàn)更多，可固定重要列，剩余列滾動(dòng)條展示交互設(shè)計(jì)。
• 列表的寬度：寬度自適應(yīng)，但根據(jù)字段的重要性顯示，重要字段優(yōu)先完整顯示。
• 列標(biāo)題：表頭列標(biāo)題最多輸入 8 個(gè)字符。
• 滾動(dòng)條：表格內(nèi)容超過一屏需要顯示豎向滾動(dòng)條時(shí)，需要固定表頭。只需滾動(dòng)表格內(nèi)容就好。
• 空數(shù)據(jù)：表格某部分無數(shù)據(jù)時(shí)用 “-” 來填充顯示,對于數(shù)據(jù)為零的單元格，填上 0 即可。
• 標(biāo)題欄：標(biāo)題欄欄高為56PX。
• 內(nèi)容欄：準(zhǔn)欄高為56PX，大欄高為80px，內(nèi)容區(qū)和欄水平居中對齊。
• 垂直對齊方式：右對齊：金額、最右側(cè)操作列。左對齊：除金額、最右側(cè)操作列外其他的表格數(shù)據(jù)。
• 水平對齊方式：當(dāng)表格所的有欄高小于80px時(shí)，內(nèi)容水平居中對齊；當(dāng)表格欄高大于 80px（大欄）時(shí)，所有內(nèi)容都為頂對齊。
• 自適應(yīng)規(guī)則：表格中欄內(nèi)容組件是利用占比的方式實(shí)現(xiàn)，可以根據(jù)欄目字段的長短給予欄目所占的百分比。完成表格占比后，對于實(shí)現(xiàn)效果不理想的，可以根據(jù)具體字段做微調(diào)處理。

表頭的文案，可遵循信息降噪的原則思考：

4）Progress bar（進(jìn)度條）

進(jìn)度條的設(shè)計(jì)思考：

加載中進(jìn)度條，存在加載中、成功、失敗三種狀態(tài)通過顏色去區(qū)分，進(jìn)度條長度支持自定義。

5）Dialog（彈窗）

彈框主要分為兩個(gè)大類模態(tài)彈框和非模態(tài)彈框，他們最大的區(qū)別就是是否強(qiáng)制用戶交互。

常規(guī)狀態(tài)通常出現(xiàn)在頁面的上方，有普通信息、成功信息、失敗信息、警示信息四種icon。

6）Default（缺省狀態(tài)）：

缺省頁面是當(dāng)頁面沒有數(shù)據(jù)、用戶沒有建立資料或網(wǎng)絡(luò)連接不通暢的情況下所展現(xiàn)的頁面。

為了緩解用戶面對這類情況產(chǎn)生焦慮情緒，設(shè)計(jì)師可以用一些插畫和文字的結(jié)合來引導(dǎo)用戶進(jìn)行下一步的操作。

3. 產(chǎn)品風(fēng)格設(shè)計(jì)規(guī)范

產(chǎn)品風(fēng)格設(shè)計(jì)的形成一般通過以下幾點(diǎn)：顏色，字體，圖標(biāo)，尺寸決定的。

1）Color（顏色）

色彩內(nèi)容主要包含基礎(chǔ)色（如品牌色、黑色、白色）和功能色（如鏈接色、提醒色等），圖表配色為單獨(dú)的配色體系。

在前期制定顏色規(guī)范的時(shí)候，精益求精的設(shè)定顏色，切忌顏色過多。

顏色的狀態(tài)色盡量用原色進(jìn)行轉(zhuǎn)換，設(shè)置一個(gè)合理的變色公式，讓所有顏色的狀態(tài)色都根據(jù)這個(gè)公式進(jìn)行轉(zhuǎn)換。

例：

• Hover：H不變 S加10 B減5 。
• Click：H不變 S加20 B減10 。
• Disable：HSB均不變，不透明度 30% 。

在設(shè)計(jì)規(guī)范中，盡量把顏色的色值和 rgba 值都寫出來（這里是強(qiáng)迫癥患者要標(biāo)的，因?yàn)橛袝r(shí)候色值完全一樣，但 rgba 數(shù)值略有不同，雖然效果一樣，但是對于強(qiáng)迫癥的你來說，舒服嗎？）。

狀態(tài)色有 4 狀態(tài)色：Normal、Hover、Click、Disable。

在設(shè)定圖表顏色的時(shí)候，要考慮不同的使用樣式（柱狀圖、環(huán)形圖、餅圖等…），同時(shí)也要考慮他的延展性。比如你設(shè)定 12 個(gè) chart 色值，在使用的時(shí)候按著順序來使用，當(dāng)超過 12 個(gè)后可以為同一個(gè)顏色。

2）Font（文字）

設(shè)定統(tǒng)一的字體規(guī)范，使用非襯線字體在各個(gè)操作系統(tǒng)下都有最佳展示效果。

首先，要設(shè)置一個(gè)字體家族，保證產(chǎn)品界面的最優(yōu)展示。

例如（僅作為展示，不是建議）：font-family: “Chinese Quote”, -apple-system, BlinkMacSystemFont, “Segoe UI”, “PingFang SC”, “Hiragino Sans GB”, “Microsoft YaHei”, “Helvetica Neue”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;

字號(hào)

現(xiàn)在主流的產(chǎn)品中，主體字為 12px / 14px 的居多，可根據(jù)自身的產(chǎn)品定位以及用戶的習(xí)慣進(jìn)行設(shè)定。

字號(hào)不要出現(xiàn)奇數(shù)，否則在一些顯示器上會(huì)有對不齊像素的狀況發(fā)生。

字體顏色

字體顏色數(shù)量建議在 3~4 個(gè)，不宜過多，但是每個(gè)層級(jí)之間區(qū)分要大一些。

文本應(yīng)該保持至少 4.5:1 （基于亮度值計(jì)算）的對比度以保持文本清晰；最佳對比度為 7:1。

測試對比度的網(wǎng)站：https://contrast-ratio.com

WCAG 2.0 中將顏色對比等級(jí)分為 3 種，A級(jí)，AA級(jí)，AAA級(jí)，等級(jí)越高意味著顏色的對比度越高，呈現(xiàn)出來的視覺壓力越大。

• A級(jí)：對比度 3:1，是普通觀察者可接受的最低對比。
• AA級(jí)：對比度 4.5:1，是普通視力損失的人可接受的最低對比度。
• AAA級(jí)：對比度 7:1，是嚴(yán)重視力損失的人可接受的最低對比度。

3）icon（圖標(biāo)）

設(shè)定統(tǒng)一的圖標(biāo)使用規(guī)范，讓視覺效果更和諧。

icon大小

icon 的常用尺寸有很多，需要注意的是 icon 的大小中，相鄰的兩個(gè)尺寸至少相差 4px，否則你會(huì)在后期用的時(shí)候會(huì)有選擇困難癥。同時(shí)功能 icon 盡量貼邊或盡量貼邊繪制，保證展現(xiàn)的視覺統(tǒng)一性（操作 icon 除外）。

單獨(dú) icon 使用的時(shí)候，盡量不要太小，最小值建議為 12px。

icon 熱區(qū)

icon 的熱區(qū)經(jīng)常被設(shè)計(jì)師和開發(fā)所忽略，本身 icon 的尺寸一般就很小，再加上如果沒有設(shè)置熱區(qū)的話，操作體驗(yàn)極差。

所以一定一定要設(shè)置 icon 的熱區(qū)，設(shè)置的值我建議為 icon 大小的 2倍。例：icon 大小為 14 * 14px，則熱區(qū)大小為 28 * 28px。

4）size（尺寸）

頁面內(nèi)布局間、模塊間、模塊內(nèi)的各部件距離。

尺寸大部分規(guī)范中都用的是 8 的倍數(shù)，不用糾結(jié)，直接用就行。我這里有個(gè)公式：Sn = 8px * n，n為正整數(shù)。特殊：最小支持4px。

三、進(jìn)階篇

進(jìn)入進(jìn)階篇階段，我們不只是按照行業(yè)標(biāo)準(zhǔn)制定規(guī)范，也不是按照一些平臺(tái)標(biāo)準(zhǔn)以及常識(shí)問題，去為自己的產(chǎn)品制定規(guī)范標(biāo)準(zhǔn)。而是需要投入更多的精力，站在更高的角度去思考要為產(chǎn)品帶來什么價(jià)值。而價(jià)值的體現(xiàn)就在于轉(zhuǎn)化，管理，引導(dǎo)，復(fù)用，創(chuàng)新，切忌盲目動(dòng)手。

在進(jìn)階篇沒有唯一的標(biāo)準(zhǔn)，都需要各位結(jié)合自身產(chǎn)品的業(yè)務(wù)，產(chǎn)品定位，用戶畫像去制定。

接下來的內(nèi)容，也只是小編分享一下比較通用的方法，希望能夠幫助有緣人在迷茫的時(shí)候有個(gè)新思路。

在開始之前，再給大家補(bǔ)充三點(diǎn)，作為進(jìn)階篇學(xué)習(xí)之前，所需要結(jié)合著來學(xué)習(xí)的3個(gè)方面：

1. 深入了解產(chǎn)品管理和產(chǎn)品戰(zhàn)略。學(xué)習(xí)產(chǎn)品管理的最佳實(shí)踐、產(chǎn)品開發(fā)流程和產(chǎn)品策略，了解市場需求、用戶行為和競爭環(huán)境對產(chǎn)品的影響。
2. 增強(qiáng)技術(shù)背景和產(chǎn)品理解。深入了解產(chǎn)品所涉及的技術(shù)和行業(yè)知識(shí)，與工程團(tuán)隊(duì)合作，理解技術(shù)可行性和產(chǎn)品的技術(shù)架構(gòu)。
3. 探索產(chǎn)品創(chuàng)新和市場機(jī)會(huì)。主動(dòng)尋找產(chǎn)品創(chuàng)新和市場機(jī)會(huì)，發(fā)現(xiàn)用戶需求和行業(yè)痛點(diǎn)，并提出創(chuàng)新的產(chǎn)品解決方案。

1. 產(chǎn)品引導(dǎo)設(shè)計(jì)規(guī)范

引導(dǎo)分為 5 種：Newbie guide（新手引導(dǎo)）、Steps guide（步驟引導(dǎo)）、Help / Operation guide（幫助/操作引導(dǎo)）、New function guide（新功能引導(dǎo)）、Blank guide（空白頁引導(dǎo)）。

1）Newbie guide（新手引導(dǎo)）

新手引導(dǎo)是針對新用戶的，首次進(jìn)入產(chǎn)品的時(shí)候，我們要著重的把自己產(chǎn)品的亮點(diǎn)以及操作快速的介紹給新用戶，讓他用最短的時(shí)間上手我們的產(chǎn)品。

新手引導(dǎo)要言簡意賅，并且如果非必要的話，盡量給用戶一個(gè)可以直接關(guān)閉的按鈕，讓用戶有選擇權(quán)。我就非常討厭有一些產(chǎn)品的新手引導(dǎo)，必須走完全部流程后才能關(guān)閉，惡心的不行。

2）Steps guide（步驟引導(dǎo)）

步驟引導(dǎo)一般用在有固定操作步驟的場景下，指引用戶一步一步的完成想要的結(jié)果。常規(guī)的步驟引導(dǎo)建議在 3~5 步之間為合理。

3）Help/Operation guide（幫助/操作引導(dǎo)）

幫助/操作引導(dǎo)的展現(xiàn)方式是比較豐富多彩的，可以是提示語、輔助性文本、tooltips 等等，他的作用就是輔助用戶去了解并且知道如何操作這個(gè)功能。

這個(gè)也是在產(chǎn)品中使用頻率最高的，運(yùn)用好他，可以讓你的產(chǎn)品事半功倍。

4）New function guide（新功能引導(dǎo)）

他就是常用在新功能上線后，用戶第一次登陸相關(guān)頁面后做的一些引導(dǎo)，目的是為了告訴用戶我們做了新東西，你快來試試吧。

5）Blank guide（空白頁引導(dǎo)）

空白頁引導(dǎo)一般用在在缺省頁，對用戶進(jìn)行一些操作指引，讓無信息的頁面變得更有價(jià)值。比如百度在一些缺省頁上就放了一些關(guān)于失蹤兒童的信息，就因?yàn)樽隽诉@個(gè)引導(dǎo)，幫助了千萬個(gè)家庭找到了失散的孩子。

2. 產(chǎn)品角色設(shè)計(jì)規(guī)范

這一章節(jié)在很多平臺(tái)里面，都會(huì)給忽略掉它的一個(gè)重要性，一個(gè)產(chǎn)品的延展性，通用性，易用性和親密性都離不開一個(gè)好的角色設(shè)計(jì)規(guī)范，角色設(shè)計(jì)的底層邏輯就是產(chǎn)品權(quán)限的制定。

目前的主流產(chǎn)品對于權(quán)限的制定都有一套規(guī)范標(biāo)準(zhǔn)，小編負(fù)責(zé)的產(chǎn)品也是通過借鑒主流產(chǎn)品權(quán)限的制定方式來設(shè)計(jì)，本章節(jié)主要是給大家分享下小編的方法。

我在做權(quán)限制定的對象是角色，而不是用戶，所以也點(diǎn)一下題，我們在做的是對產(chǎn)品角色設(shè)計(jì)的規(guī)范，并不是對用戶權(quán)限去做控制，接下來我們先來梳理下在做權(quán)限制定的時(shí)候常見的問題。

1）權(quán)限制定的過程中常遇到的問題有。

• 配置不規(guī)范，系統(tǒng)基礎(chǔ)不穩(wěn)，拓展性差。
• 配置不靈活，用戶需求難滿足，體驗(yàn)差。
• 配置太靈活，邏輯會(huì)復(fù)雜，實(shí)施成本高。

我們可管理的權(quán)限（系統(tǒng)資源）分為功能權(quán)限、數(shù)據(jù)權(quán)限：

• 功能權(quán)限，管理API和頁面元素的可控與否、可見與否。
• 數(shù)據(jù)權(quán)限，管理數(shù)據(jù)表Key-Value的可控與否、可見與否。

這些問題主要都是基于用戶作為權(quán)限主體的時(shí)候會(huì)出現(xiàn)的問題。傳統(tǒng)的方式就是A -> B -> C 這類型的用戶權(quán)限去對用戶進(jìn)行管理，對于業(yè)務(wù)的調(diào)整以及對功能模塊的拓展是不友好的。

因此，我對于權(quán)限管理的理解為權(quán)限是主體對客體遵循特定機(jī)制做出的行為，而本章節(jié)主要是給各位分享RBAC模型。

2）對RBAC模型中的關(guān)系描述 – 基于角色的訪問控制

RBAC（Role-Based Access Control）是一種訪問控制模型，用于管理系統(tǒng)中的用戶訪問權(quán)限。RBAC模型基于角色來定義和分配權(quán)限，通過將權(quán)限與角色關(guān)聯(lián)，然后將角色分配給用戶，實(shí)現(xiàn)對系統(tǒng)資源的訪問控制。

1. 角色與權(quán)限之間的關(guān)系：

• 角色包含權(quán)限：每個(gè)角色可以包含一個(gè)或多個(gè)權(quán)限，表示該角色具有執(zhí)行這些權(quán)限所需的操作或訪問特定資源的能力。
• 權(quán)限屬于角色：每個(gè)權(quán)限都屬于一個(gè)或多個(gè)角色，表示這些角色被授予了執(zhí)行該權(quán)限的能力。

2. 角色與用戶之間的關(guān)系：

• 角色分配給用戶：每個(gè)用戶可以被分配一個(gè)或多個(gè)角色，表示該用戶具有這些角色所代表的權(quán)限和職責(zé)。
• 用戶屬于角色：每個(gè)角色可以有一個(gè)或多個(gè)用戶屬于該角色，表示這些用戶被賦予了該角色所具有的權(quán)限和職責(zé)。

這些關(guān)系形成了RBAC模型的基本結(jié)構(gòu)，通過這些關(guān)系的建立和管理，可以實(shí)現(xiàn)對用戶訪問權(quán)限的控制和管理。

3）對RBAC模型的分析

1. 角色：RBAC模型中的核心是角色，角色代表了一組具有相似職責(zé)和權(quán)限需求的用戶。角色可以根據(jù)用戶的職位、部門、職能等因素進(jìn)行定義。通過角色的定義，可以實(shí)現(xiàn)權(quán)限的集中管理和統(tǒng)一分配。
2. 權(quán)限：RBAC模型將權(quán)限與角色關(guān)聯(lián)起來。權(quán)限指的是用戶在系統(tǒng)中可以執(zhí)行的操作或訪問的資源。權(quán)限可以細(xì)分為功能權(quán)限和數(shù)據(jù)權(quán)限。功能權(quán)限控制用戶可以執(zhí)行的操作，如創(chuàng)建、編輯、刪除等；數(shù)據(jù)權(quán)限控制用戶可以訪問和操作的具體數(shù)據(jù)范圍。
3. 用戶：RBAC模型通過將角色分配給用戶來實(shí)現(xiàn)訪問控制。用戶可以根據(jù)其職位和職責(zé)被分配一個(gè)或多個(gè)角色。通過角色的分配，用戶可以繼承角色所具有的權(quán)限。
4. 授權(quán)：RBAC模型通過授權(quán)機(jī)制來管理用戶的訪問權(quán)限。授權(quán)是指將角色與權(quán)限進(jìn)行關(guān)聯(lián)，以確定哪些角色具有哪些權(quán)限。通過授權(quán)，系統(tǒng)管理員可以控制和管理用戶的訪問權(quán)限，以確保用戶只能訪問其所需的資源和功能。
5. 審計(jì)：RBAC模型提供了對系統(tǒng)訪問的審計(jì)功能。審計(jì)可以跟蹤和記錄用戶的操作行為和訪問權(quán)限的使用情況。審計(jì)日志可以用于安全審計(jì)、故障排查和合規(guī)性檢查等目的。

RBAC模型的優(yōu)點(diǎn)包括：

• 簡化權(quán)限管理。RBAC模型通過角色的抽象，簡化了權(quán)限的管理。通過分配角色，可以批量分配和修改權(quán)限，降低了管理成本和復(fù)雜性。
• 提高安全性。RBAC模型將權(quán)限與角色關(guān)聯(lián)，使得權(quán)限分配更加一致和規(guī)范化。這有助于減少權(quán)限濫用和錯(cuò)誤配置的風(fēng)險(xiǎn)，提高系統(tǒng)的安全性。
• 增加靈活性。RBAC模型的角色可以根據(jù)業(yè)務(wù)需求進(jìn)行定義和調(diào)整。當(dāng)用戶的角色或權(quán)限需求發(fā)生變化時(shí)，可以通過調(diào)整角色的分配來靈活適應(yīng)變化。
• 提升工作效率。RBAC模型可以根據(jù)用戶的角色和權(quán)限限制用戶訪問的范圍，減少了不必要的操作和冗余的權(quán)限申請，提高了工作效率。

然而，RBAC模型也存在一些挑戰(zhàn)，如角色爆炸問題（角色數(shù)量過多）、權(quán)限維護(hù)復(fù)雜、權(quán)限繼承問題等。在實(shí)施RBAC模型時(shí)，需要仔細(xì)設(shè)計(jì)角色和權(quán)限的結(jié)構(gòu)，平衡權(quán)限的粒度和靈活性，以及確保合理的權(quán)限繼承和分配策略。

4）分享一個(gè)使用RBAC模型的實(shí)例

假設(shè)有一個(gè)在線學(xué)習(xí)平臺(tái)，涉及學(xué)生、教師和管理員三個(gè)角色，以及對應(yīng)的權(quán)限：

1. 角色與權(quán)限之間的關(guān)系：

• 學(xué)生角色：可以查看課程、提交作業(yè)和參與討論。
• 教師角色：可以創(chuàng)建和管理課程、發(fā)布作業(yè)和評估學(xué)生作業(yè)。
• 管理員角色：可以管理用戶賬號(hào)、審核課程和處理投訴。

2. 角色與用戶之間的關(guān)系：

• 學(xué)生用戶A：被分配學(xué)生角色，擁有查看課程、提交作業(yè)和參與討論的權(quán)限。
• 教師用戶B：被分配教師角色，擁有創(chuàng)建和管理課程、發(fā)布作業(yè)和評估學(xué)生作業(yè)的權(quán)限。
• 管理員用戶C：被分配管理員角色，擁有管理用戶賬號(hào)、審核課程和處理投訴的權(quán)限。

3. 在該實(shí)例中，RBAC模型的使用如下：

• 當(dāng)學(xué)生用戶A登錄到平臺(tái)時(shí)，他只能查看課程、提交作業(yè)和參與討論，無法進(jìn)行其他教師或管理員特有的操作。
• 當(dāng)教師用戶B登錄到平臺(tái)時(shí)，他可以創(chuàng)建和管理課程、發(fā)布作業(yè)和評估學(xué)生作業(yè)，但無法進(jìn)行管理員特有的操作。
• 當(dāng)管理員用戶C登錄到平臺(tái)時(shí)，他可以管理用戶賬號(hào)、審核課程和處理投訴，但無法進(jìn)行教師或?qū)W生特有的操作。

通過RBAC模型，該在線學(xué)習(xí)平臺(tái)實(shí)現(xiàn)了對不同角色的權(quán)限控制，確保每個(gè)用戶只能執(zhí)行其角色所允許的操作，從而提供了安全和可控的訪問控制機(jī)制。

5）最后，對本章節(jié)進(jìn)行一個(gè)總結(jié)

在權(quán)限模型里面有兩個(gè)核心概念，第一個(gè)是靜態(tài)指責(zé)分離，第二個(gè)是動(dòng)態(tài)指責(zé)分離

靜態(tài)職責(zé)分離

互斥角色限制：有些特殊的崗位，同一個(gè)用戶在兩個(gè)互斥的角色中只能選擇一個(gè)。

比如財(cái)務(wù)和審計(jì)，不能既是運(yùn)動(dòng)員又做裁判。

基數(shù)限制：考慮容量、并發(fā)等的問題，一個(gè)用戶擁有的角色是有限的，一個(gè)角色擁有的權(quán)限也是有限的，一個(gè)角色下的用戶也是有限的。

比如微信公眾平臺(tái)做的限制：一個(gè)微信號(hào)可綁定并管理5個(gè)公眾號(hào)。

先決條件限制：用戶想要獲得高級(jí)別的角色，必須先獲得低級(jí)別的角色。

比如一個(gè)PMer需要先從專員做起，再升為產(chǎn)品經(jīng)理，再到產(chǎn)品總監(jiān)。

這種條件限制在人員規(guī)模比較大的團(tuán)隊(duì)就很常見了，人越多越需要嚴(yán)格且清晰的制度，避免個(gè)別的take a shortcut影響大局的穩(wěn)定。

動(dòng)態(tài)職責(zé)分離

動(dòng)態(tài)的限制用戶及其擁有的角色。

一個(gè)用戶可以擁有多個(gè)角色，但是運(yùn)行時(shí)只能激活一個(gè)角色。

常見就像招聘網(wǎng)站這種，用戶既可以招人也可以找工作，角色不同看到的信息完全不一樣，所以就只能激活其中一個(gè)角色。

四、結(jié)語

最后給大家總結(jié)一下今天分享出來的內(nèi)容，產(chǎn)品設(shè)計(jì)的規(guī)范標(biāo)準(zhǔn)，具體的規(guī)范還會(huì)根據(jù)產(chǎn)品的特點(diǎn)、行業(yè)要求和用戶需求而有所不同。

在制定產(chǎn)品設(shè)計(jì)規(guī)范時(shí)，需要綜合考慮用戶體驗(yàn)、技術(shù)可行性、業(yè)務(wù)目標(biāo)和品牌形象等因素，以確保產(chǎn)品能夠提供優(yōu)質(zhì)的用戶體驗(yàn)并達(dá)到預(yù)期的目標(biāo)。

歸納為以下8點(diǎn)：

1. 一致的用戶界面：確保產(chǎn)品在整個(gè)界面上保持一致的設(shè)計(jì)風(fēng)格、布局和交互模式，使用戶在不同的頁面和功能之間能夠輕松理解和導(dǎo)航。
2. 響應(yīng)式設(shè)計(jì)：確保產(chǎn)品能夠適應(yīng)不同設(shè)備和屏幕尺寸，提供一致的用戶體驗(yàn)，無論用戶使用手機(jī)、平板或電腦訪問產(chǎn)品。
3. 易用性和可訪問性：設(shè)計(jì)產(chǎn)品以滿足廣大用戶的使用需求，包括易用性、可訪問性和無障礙性，確保產(chǎn)品能夠被所有用戶輕松使用和理解。
4. 信息架構(gòu)和導(dǎo)航：設(shè)計(jì)清晰的信息架構(gòu)和導(dǎo)航體系，使用戶能夠快速找到所需的信息和功能，減少用戶的學(xué)習(xí)成本和迷失感。
5. 可視化設(shè)計(jì)和品牌一致性：使用合適的色彩、圖標(biāo)、排版和視覺元素，確保產(chǎn)品的可視化設(shè)計(jì)與品牌形象一致，提升產(chǎn)品的識(shí)別度和用戶體驗(yàn)。
6. 內(nèi)容布局和呈現(xiàn)：設(shè)計(jì)清晰、簡潔的內(nèi)容布局，使重要的信息和功能得到突出展示，避免信息過載和混亂的界面。
7. 用戶反饋和引導(dǎo)：提供及時(shí)、明確的用戶反饋和引導(dǎo)，使用戶能夠了解他們的操作結(jié)果、狀態(tài)和下一步的行動(dòng)。
8. 安全和隱私保護(hù)：考慮用戶數(shù)據(jù)的安全性和隱私保護(hù)，遵循相關(guān)的安全標(biāo)準(zhǔn)和法規(guī)，采取必要的措施保護(hù)用戶的個(gè)人信息和賬號(hào)安全。