整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
前我主要深耕于B端設(shè)計(jì)中，深知B端表格設(shè)計(jì)與C端有很大的不同，無論是表格的展示形式以及承載內(nèi)容上都有非常大的差異。而現(xiàn)在網(wǎng)上有不少關(guān)于表格如何設(shè)計(jì)的文章，但要真正落到實(shí)處的少之又少，因此今天我們就來聊聊表格，探討一下B端表格究竟應(yīng)該如何設(shè)計(jì)。
由于表格組件類型復(fù)雜，因此分為上下兩篇，上篇主要講基礎(chǔ)知識(shí)點(diǎn)，下篇主要針對(duì)交流群中的20個(gè)問題進(jìn)行解答，歡迎持續(xù)關(guān)注～
在我們B端表格頁中，由導(dǎo)航、篩選、表格幾大模塊構(gòu)成，因?yàn)楸砀?/span>面積占比最大，頁面呈現(xiàn)最為重要，會(huì)直接影響用戶的使用體驗(yàn)。
在我們對(duì)表格的設(shè)計(jì)思考過程中，需要注意兩項(xiàng)原則：易讀與易用
前者是提升使用者在表格瀏覽時(shí)的體驗(yàn)，主要是從信息密度、色彩分隔、以及視覺節(jié)奏三個(gè)方面去理解；后者是使用表格時(shí)的操作感受，比如快捷操作、多數(shù)據(jù)編輯等方面去理解。無論是B端的任何頁面，表格都是必不可少的部分。
想要把這三種形式講透，需要將數(shù)據(jù)的形式結(jié)合起來說，我會(huì)從展示形式、數(shù)據(jù)結(jié)構(gòu)、前端標(biāo)簽 三個(gè)方面去解釋三者的區(qū)別。
表單擁有一對(duì)一的數(shù)據(jù)結(jié)構(gòu)，能夠讓用戶明白數(shù)據(jù)間的對(duì)應(yīng)關(guān)系。同時(shí)使用表單的門檻最低，擁有更合理的錄入形式，比如在常見的問卷調(diào)查、登陸注冊(cè)都是采取表單的形式。
在前端展示方面，表單采用的標(biāo)簽一般會(huì)包含：text、password、radio、checkbox、button、submit、reset、image、file等屬性，我們也要針對(duì)不同的屬性進(jìn)行相應(yīng)的設(shè)計(jì)區(qū)分。
列表能夠?qū)?shù)據(jù)在一列中井然有序的展示，保持?jǐn)?shù)據(jù)的有序與整潔。列表擁有一對(duì)多的數(shù)據(jù)結(jié)構(gòu)，能夠讓用戶理清一條數(shù)據(jù)下的多個(gè)對(duì)應(yīng)關(guān)系，并且多個(gè)對(duì)應(yīng)關(guān)系是相互并列。比如在常見地待辦事項(xiàng)、走查清單中里，就是使用單維度數(shù)據(jù)進(jìn)行排列。
在前端展示上，列表中的標(biāo)簽分為有序與無序。
? 有序列表：即有順序的列表，其各個(gè)列表項(xiàng)按照一定的規(guī)則排列定義，前端標(biāo)簽上采取<ol><li>的結(jié)構(gòu)。
通常有序列表一般為數(shù)字序號(hào)（1、2、3、4...）或者字母序號(hào)（a、b、c、d）
? 無序列表：無序列表的各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分，為并列關(guān)系。前端標(biāo)簽上采取<ul><li>的結(jié)構(gòu)。
在多維度的數(shù)據(jù)分析中，你是永遠(yuǎn)的逃離不了表格，使用多維度數(shù)據(jù)進(jìn)行統(tǒng)一的結(jié)構(gòu)化展示，讓用戶清晰的看到在同一主題下的多條數(shù)據(jù)的對(duì)比，使數(shù)據(jù)能夠進(jìn)行多維度的展示，保證數(shù)據(jù)的完整性。
在前端的方面，表格中都是采取 <table> 標(biāo)簽進(jìn)行展示，同時(shí)表格中的行與列分別用 <tr> 與 <td> 標(biāo)簽，我們通常說的表頭，則為 <th> 標(biāo)簽。但要注意，在前端眼中表格永遠(yuǎn)沒有列的概念，列都是每行拼接而成。
正式開始之前，我們先定義一下表格～
表格是一種常見的信息展現(xiàn)形式，它是所有B端組件中信息展示密度最高，同時(shí)涵蓋了B端的所有場(chǎng)景，因此是B端設(shè)計(jì)中的一個(gè)重要的組件。
在我們常見的B端產(chǎn)品改版中，除了對(duì)頁面流程調(diào)整以外，更多就是圍繞表格而展開的一系列優(yōu)化。因此表格的設(shè)計(jì)，做為B端設(shè)計(jì)師的基礎(chǔ)能力之一，也是檢驗(yàn)一個(gè)B端設(shè)計(jì)師是否合格的關(guān)鍵因素。
表格屬于形式十分單一的組件，對(duì)于沒有經(jīng)驗(yàn)的設(shè)計(jì)師來說，會(huì)認(rèn)為能夠調(diào)整的地方實(shí)在太少，往往在思考層面就會(huì)有所不足。對(duì)于一個(gè)B端表格來說，它需要具備數(shù)據(jù)瀏覽、數(shù)據(jù)新增、數(shù)據(jù)操作、數(shù)據(jù)統(tǒng)計(jì)，因此功能多而全，很難思考解決問題思路。
通常設(shè)計(jì)師設(shè)計(jì)單個(gè)組件，都會(huì)有較好的全量意識(shí)。而到了多組件的聯(lián)動(dòng)時(shí)，就會(huì)出現(xiàn)問題。
比如在表格中，除了表格本身，還會(huì)有搜索、篩選、視圖、分頁等操作，如果不對(duì)多組件的交叉使用進(jìn)行思考，也會(huì)缺少對(duì)于這些場(chǎng)景的設(shè)計(jì)。
在表格中，會(huì)承載多種多樣的字段類型，而每一個(gè)字段類型都會(huì)有相應(yīng)的差異。形式的不同落到表格上就會(huì)有不同的呈現(xiàn)形式，在關(guān)鍵數(shù)值的處理上，也會(huì)差強(qiáng)人意。因此看上去簡(jiǎn)單的一個(gè)表格，其實(shí)會(huì)有很多需要設(shè)計(jì)的點(diǎn)。
而深入到表格的內(nèi)部中，你會(huì)發(fā)現(xiàn)能做的遠(yuǎn)遠(yuǎn)不止于此，如果剛開始沒有對(duì)表格進(jìn)行梳理，那么你在設(shè)計(jì)的過程中，對(duì)于反復(fù)出現(xiàn)的表格將束手無策，為了讓大家能夠?qū)Ρ砀裼懈畹睦斫猓覍⒈砀襁M(jìn)行系統(tǒng)的拆解，結(jié)合實(shí)際案例，能夠讓表格更淺顯易懂。
首先問大家一個(gè)問題，你覺得表格一共有幾個(gè)部分組成，分別是什么？給大家五秒鐘時(shí)間思考～
5
4
3
2
1
～
在我看來，表格一共分為五部分：
概括整個(gè)表格的內(nèi)容信息，讓用戶一眼就知道該表格的用途是否符合自己心中的預(yù)期。
在實(shí)際場(chǎng)景中，除了通過標(biāo)題文字去的形式之外，你還可以為每一個(gè)表格去設(shè)計(jì)不同類型的圖標(biāo)，這樣能夠讓用戶看到圖標(biāo)就能聯(lián)想到內(nèi)容，這也是現(xiàn)在無代碼開發(fā)平臺(tái)常見的處理方式。
但在工具欄的排列方式會(huì)有非常多的講究，在市面上的操作區(qū)域一般可分為單行與雙行的狀態(tài)，可根據(jù)自身產(chǎn)品要求的特點(diǎn)進(jìn)行隨意的變化，會(huì)在文章后半部分具體講到工具欄的設(shè)計(jì)思路，這里就不再過多贅述。
概括每列的主要信息，在用戶使用表格中，起到數(shù)據(jù)解釋作用，讓數(shù)據(jù)能與之進(jìn)行匹配，使用戶能夠看懂?dāng)?shù)據(jù)。同時(shí)在表頭處會(huì)擁有一些操作，比如凍結(jié)、篩選、排序都會(huì)放置于此，因此需要進(jìn)行留意。
承載用戶的每一條數(shù)據(jù)，也是整個(gè)表格的核心。單元格的大小行高都會(huì)直接影響用戶使用表格的體驗(yàn)，單元格的設(shè)計(jì)上也會(huì)有很多設(shè)計(jì)思路，在后半部分也給他家提供了我自己的看法，與大家進(jìn)行探討，在這個(gè)就先按下不表。
嚴(yán)格意義上講，分頁是不屬于表格當(dāng)中，但當(dāng)數(shù)據(jù)超過用戶所設(shè)定的閾值時(shí)，就需要使用分頁拆解數(shù)據(jù)，所以分頁和表格是經(jīng)常聯(lián)系在一起的。分頁一共有：基礎(chǔ)型、迷你型、完整型三種類型。
而如何進(jìn)行跨頁的操作，一直都是分頁在B端中的難點(diǎn)，需要有好的思路與邏輯，在分頁模塊中與大家聊聊。
你知道表格類型的多少?zèng)Q定你了設(shè)計(jì)表格的下限。
雖然在大多數(shù)業(yè)務(wù)場(chǎng)景中都是使用基礎(chǔ)表格，但在B端產(chǎn)品中業(yè)務(wù)的多樣性使得很多特殊的表格有它獨(dú)特發(fā)揮的空間。
我發(fā)現(xiàn)在我的B端交流群都有著類似的問題，他們不知道表格還存在這么多的類型，這時(shí)候你與別人之間的認(rèn)知的差距就是你設(shè)計(jì)優(yōu)勢(shì)所在。
基礎(chǔ)表格是根基，是由行與列的單元格組成。在使用層面上能滿足用戶多維度查看數(shù)據(jù)的需求。因?yàn)榇蠹叶己苁熘谶@一章節(jié)并不是主角，我們就不做過多贅述。
當(dāng)表格中的數(shù)據(jù)為包含與被包含的結(jié)構(gòu)時(shí)，可采取樹形表格。
通過逐級(jí)大綱的形式來展現(xiàn)數(shù)據(jù)間的層級(jí)關(guān)系，讓整個(gè)信息結(jié)構(gòu)變得一目了然。這一表格形式常出現(xiàn)于項(xiàng)目管理工具中，比如 Teambition、Tapd、飛蛾都有這樣的設(shè)計(jì)。
作為騰訊最重要的項(xiàng)目管理工具，在產(chǎn)品設(shè)計(jì)之初，就考慮到類似情況，你能夠在Tpad單列數(shù)據(jù)編輯點(diǎn)擊入口，創(chuàng)建子數(shù)據(jù)，這樣在項(xiàng)目管理的場(chǎng)景下，有著較為友好的交互體驗(yàn)。
前段時(shí)間，Teambition正式成為阿里旗下的辦公套件，而釘釘?shù)脑漆斠惑w化，或許證明這樣龐大的市場(chǎng)仍然還要等待時(shí)間的挖掘。期待資本對(duì)于B端行業(yè)的更多動(dòng)作
我們回到設(shè)計(jì)上，Teambition在9月份經(jīng)歷的改版，變化很多，有機(jī)會(huì)可以總結(jié)一個(gè)改版分析分享給大家，作為一個(gè)項(xiàng)目管理軟件，Teambition也擁有樹形表格的這樣一共功能，它的添加入口出現(xiàn)在每個(gè)數(shù)據(jù)詳情頁的最下方，同時(shí)在視圖層面，也可以篩選展示為：所有任務(wù)、僅父任務(wù)、僅子任務(wù)四種場(chǎng)景，更能滿足用戶的需求～
當(dāng)一條主數(shù)據(jù)下有多條數(shù)據(jù)結(jié)構(gòu)不同的關(guān)聯(lián)數(shù)據(jù)進(jìn)行嵌套時(shí)，這時(shí)候就可以用子表格進(jìn)行創(chuàng)建。它能夠?qū)χ鲾?shù)據(jù)進(jìn)行更加細(xì)致的解釋，詳細(xì)的了解主數(shù)據(jù)中數(shù)據(jù)的含義。從表象上看，就是在一個(gè)表格中還能嵌套另一個(gè)表格。
比如在對(duì)某集團(tuán)對(duì)旗下子公司的銷售表格中，它能夠通過嵌套子表格的形式，將每一個(gè)子公司下的銷售人員的銷售記錄進(jìn)行記錄，從而能夠更加細(xì)的了解到每一個(gè)公司、每一個(gè)人員的具體情況。
在國(guó)外報(bào)表中，這類表格很少出現(xiàn)，而在中國(guó)的報(bào)表中，嵌套子表格算是一種不折不扣的中國(guó)式報(bào)表。
當(dāng)然這里我們依舊可以深入理解，比如在兩個(gè)表格之間，用戶是通過什么樣的方式建立一個(gè)父子的關(guān)系？表格中當(dāng)父數(shù)據(jù)刪除時(shí)，子數(shù)據(jù)如何處理？設(shè)計(jì)上對(duì)父子之間的關(guān)聯(lián)有著何種限制，這都是我們需要思考的，因?yàn)檫@里牽涉到業(yè)務(wù)實(shí)在太多，我也無法抽象出一個(gè)規(guī)律供大家學(xué)習(xí)，因此只有具體問題具體分析。
當(dāng)一個(gè)表格里面有多條數(shù)據(jù)在同一個(gè)小范圍的維度進(jìn)行展示時(shí)，它就是交叉表格。從表象上看，就是表頭有很多分組進(jìn)行區(qū)分，因此它也叫做表頭分組。
它能夠通過硬拆分將數(shù)據(jù)進(jìn)行切割，但是這樣數(shù)據(jù)的易讀性就是有很大的差距，比如在2010-2020公司年度收支表格中，需要同時(shí)展示每一年份的收入、支出與利潤(rùn)，使用交叉報(bào)表能夠讓用戶一眼就是看清數(shù)據(jù)，而基礎(chǔ)表格卻不行。交叉表格也算是中國(guó)式表格中的一種，能夠滿足具體業(yè)務(wù)上的需求。
當(dāng)一個(gè)表格里面有多種圖表數(shù)據(jù)進(jìn)行展示時(shí)，他就是圖表表格。
在對(duì)一些項(xiàng)目做定制化開發(fā)時(shí)，這是十分常見的場(chǎng)景。用戶點(diǎn)擊某一數(shù)據(jù)后，直接跳出數(shù)據(jù)的統(tǒng)計(jì)圖，方便用戶進(jìn)行對(duì)比。同時(shí)這一功能也可以通過儀表盤這樣的功能去解決，也就說到國(guó)內(nèi)最愛做的數(shù)據(jù)可視化。
這是很多人都會(huì)忽略的一個(gè)點(diǎn)，主要是大家對(duì)于表格的理解各不相同，也沒有具體的文章對(duì)于表格尺寸有個(gè)非常明確的限制，在這里分享一個(gè)我常用的數(shù)據(jù)點(diǎn)，用于判斷表格設(shè)計(jì)的優(yōu)劣：表占比。
表占比：表占比是指在1920x1080的屏幕大小下，表格占整個(gè)頁面的比例 即：表格面積 / 頁面面積 = 表占比
這里需要指出，這里的表格面積是指，表頭+單元格+分頁（不包含工具欄）
在我對(duì)十幾款主流B端軟件的總結(jié)分析中，驚奇的發(fā)現(xiàn)大多數(shù)產(chǎn)品「表占比」都是在65-70%之間，而一些不注重交互設(shè)計(jì)上的產(chǎn)品則會(huì)有所偏差。
那為何65-70%是一個(gè)更為合理的數(shù)據(jù)？
因?yàn)橹灰陧撁嬷谐霈F(xiàn)表格，就代表這個(gè)頁面一定是以表格作為核心。而表占比低于65%，代表頁面中的表格不處于內(nèi)容的核心，你需要重新審視這個(gè)頁面所需要傳達(dá)的功能。
如果表占比高于80 %，則代表表格出現(xiàn)面積過大，要考慮用戶是否能夠接受如此大的占比。
因此，設(shè)計(jì)的合理性來說，占比在65-70%之間能夠保證數(shù)據(jù)展示的合理性，同時(shí)這主要是針對(duì)CRM產(chǎn)品，大家可以使用這個(gè)占比去衡量自己設(shè)計(jì)的B端產(chǎn)品～
當(dāng)然這樣的情況并不是一塵不變的，B端最大的魅力便是業(yè)務(wù)邏輯，我們來看一個(gè)看起來像是反面的例子：在銷幫幫中，表占比為：61.2% ，看似是一個(gè)并不合格的成績(jī)，而且數(shù)據(jù)十分異常，讓我想要深挖，為何會(huì)如此的低。
通過進(jìn)一步的分析，發(fā)現(xiàn)銷幫幫是一款與釘釘生態(tài)深度綁定的產(chǎn)品，其產(chǎn)品只能通過釘釘軟件進(jìn)行使用，而釘釘本身默認(rèn)并不是1080px的寬度，用戶打開并且全屏的尺寸偏小。默認(rèn)尺寸大小的不同，最終讓銷幫幫選擇去滿足業(yè)務(wù)而犧牲表占比去換取更多的功能。
因?yàn)樵贐端的工具欄的設(shè)計(jì)中，市面上缺少思路與方法的指導(dǎo)，會(huì)出現(xiàn)非常多的問題，因此我展開講講工具欄的設(shè)計(jì)，就不出單獨(dú)系列進(jìn)行講解～
首先，對(duì)于工具欄，不同的產(chǎn)品，會(huì)對(duì)它有著不同的定義。比如在Apple MacOS 系統(tǒng)當(dāng)中經(jīng)常提到的Toolbars和Toolbar Items；又或者是Microsoft 產(chǎn)品中采取的Ribbon設(shè)計(jì)模式。在設(shè)計(jì)底層思路上截然不同，平臺(tái)級(jí)產(chǎn)品思路與定制化產(chǎn)品思路存在很多截然不同的做法，我們今天簡(jiǎn)單聊聊大家遇到過多的表格工具欄設(shè)計(jì)，不做深挖～
在表格工具欄的設(shè)計(jì)中，信息分區(qū)與頁面透氣是非常重要的兩個(gè)設(shè)計(jì)核心。
信息分區(qū)：
因?yàn)楣ぞ邫谑怯蓸?biāo)題、篩選、搜索、視圖、新建等操作組成，而功能間的區(qū)分是工具欄設(shè)計(jì)的一個(gè)關(guān)鍵。
當(dāng)一個(gè)工具欄中，需要將如此多的元素進(jìn)行組合排列時(shí)，必然會(huì)有其排序的規(guī)則，這時(shí)我們就可以通過親密性原則，對(duì)工具欄中的信息進(jìn)行相應(yīng)區(qū)分
在設(shè)計(jì)的親密性原則中，我們可以將功能相近的工具放在一起，比如：搜索與篩選都是數(shù)據(jù)過濾的操作，應(yīng)該放在同一分區(qū)；
同樣，工具欄也會(huì)存在一些功能點(diǎn)不太相近操作，我們就應(yīng)該通過分區(qū)將其間隔開，比如在下圖中，每個(gè)功能都將其用線條區(qū)分。
當(dāng)然，在信息的去區(qū)分上，也有強(qiáng)弱兩種不同的方式，一種是通過線條直接分割；另一種是將工具欄進(jìn)行空間上的區(qū)分。因此可以通過信息區(qū)分去檢查你的工具欄設(shè)計(jì)是否合理。
內(nèi)容呼吸：
在一個(gè)定制化項(xiàng)目中，設(shè)計(jì)師一定要讓自己的頁面具有呼吸感。在B端業(yè)務(wù)中，信息量本身就已經(jīng)足夠龐大，而頁面的中的疏密關(guān)系就顯得尤為重要。
通常列表都承載著繁雜、冗余的數(shù)據(jù)，是一個(gè)信息集中的密；工具欄作為與表格關(guān)聯(lián)的上部分，呼吸感便成為表格的重要因素。通常在表頭處要將空間盡量分散開，這樣才能滿足整體的疏密關(guān)系。
經(jīng)常看到一些十分冗雜的表頭，甚至它喪失了表頭的真正含義。在實(shí)際情況下，盡可能明確、簡(jiǎn)單的講出表頭的內(nèi)容，以免造成表格的宣兵奪主。當(dāng)然也會(huì)存在一些專業(yè)術(shù)語，這時(shí)候，給一個(gè)Tooltips再合適不過。
在表格中，單元格的行高是一直都是一個(gè)難以控制的變量，因?yàn)樾懈邥?huì)直接控制表格中的信息密度，而信息密度永遠(yuǎn)是一個(gè)無法量化的元素。而在我們?cè)O(shè)計(jì)過程中，需要采取盒子模型的方式，讓你的設(shè)計(jì)更加落地。
知識(shí)點(diǎn)補(bǔ)充：盒子模型
從前端開發(fā)而言，單元格是一個(gè)最為基礎(chǔ)的盒子模型。而HTML中的所有元素都可以看作是一個(gè)盒子。而我們所設(shè)計(jì)的頁面也正是由這個(gè)樣的原理去還原出來。
Margin(外邊距)：清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框)：圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距)：清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容)：盒子的內(nèi)容，顯示文本和圖像。
a.單元格內(nèi)容
內(nèi)容一般為文字、圖標(biāo)、頭像等等，而對(duì)于數(shù)據(jù)中你想要格外突出的內(nèi)容，這里稱為關(guān)鍵數(shù)據(jù)標(biāo)識(shí)別。從盒子模型的角度來看，它就是當(dāng)中的Connect，但單元格內(nèi)容中，一般會(huì)有一些處理技巧：
關(guān)鍵數(shù)據(jù)標(biāo)識(shí)：
用戶在使用表格時(shí)，會(huì)經(jīng)常去留意一些關(guān)鍵的數(shù)據(jù)。比如數(shù)據(jù)的狀態(tài)、變化的多少…
如果在系統(tǒng)中，你能夠很明確知道用戶想要了解的數(shù)據(jù)時(shí)，便可在關(guān)鍵數(shù)據(jù)上進(jìn)行標(biāo)識(shí)。這樣能夠幫助用戶快速定位到自己想要的信息，減少數(shù)據(jù)尋找所化的時(shí)間。但如果你對(duì)關(guān)鍵數(shù)據(jù)標(biāo)識(shí)出現(xiàn)誤判，這條數(shù)據(jù)便是一條十分干擾的數(shù)據(jù)，因此在這里的設(shè)計(jì)，需要慎重考慮。
比如在飛書的成員與部門中，對(duì)于賬號(hào)狀態(tài)就是一個(gè)關(guān)鍵數(shù)據(jù)的標(biāo)識(shí)，一方面用戶可以快速了解到已經(jīng)激活的成員，另一方面對(duì)于未激活狀態(tài)的進(jìn)行突出展示，同時(shí)給予用戶未激活后的再次發(fā)送提醒的操作，是對(duì)用戶使用的優(yōu)化提升。但，如果將不重要的數(shù)據(jù)進(jìn)行標(biāo)識(shí)，例如手機(jī)號(hào)，那么這將會(huì)是一個(gè)令人痛苦的設(shè)計(jì)。
人員角色展示
人員角色展示在表格中十分常見，通常會(huì)是以用戶名稱+頭像的形式展示。
但在真實(shí)場(chǎng)景的表格中，頭像需要給予默認(rèn)的形式，比如釘釘、飛書就是以用戶“姓”作為頭像的默認(rèn)值，而在多個(gè)人員角色展示時(shí)，就需要考慮特殊情況，無論是極值省略展示與獲取全量數(shù)據(jù)中，都需要我們進(jìn)行設(shè)計(jì)上的處理。
進(jìn)度條
進(jìn)度條是屬于關(guān)鍵數(shù)據(jù)的一種，它所涉及到的功能與圖表表格類似，能夠更直觀展示數(shù)據(jù)的占比，方便用戶對(duì)于多條數(shù)據(jù)間的值進(jìn)行判斷。進(jìn)度條常見于“容量、使用量”的數(shù)據(jù)中。
表格空白處理
表格中經(jīng)常出現(xiàn)空數(shù)據(jù)的情況，而表格的留白對(duì)于用戶而言會(huì)造成一些困擾，特別存在與頁面中的大面積留白，感覺像是數(shù)據(jù)沒有加載出。因此在表格空白數(shù)據(jù)處理上，可以使用“-”來進(jìn)行默認(rèn)展示。
b.單元格行高
單元格行高一般由：文字大小、文字行高、左右上下邊距共同組成。
從盒子模型的角度來看，它就是其中的Padding。因此行高的確定，是由上方四個(gè)條件共同組成。
文字大小：一般出現(xiàn)在表格中的文字大小都在12-16px之間，通常13、14px最為常見，建議大家設(shè)計(jì)也在此范疇內(nèi)。
文字行高： 行高是一行文本垂直方向的高度，這個(gè)高度和字高無關(guān)，文字內(nèi)容水平居中。可設(shè)置為字號(hào)的1.2-1.8倍，文字與分割線間距離可以設(shè)定為字號(hào)的1-1.5倍。
邊距（Padding）：表格中的邊距分為左上右下四個(gè)方向，而左上右下恰好就是對(duì)應(yīng)前端去編寫Padding代碼的順序，在對(duì)頁面驗(yàn)收時(shí)，便可采取這樣的形式。
單元格行高可配置：單元格行高直接影響著信息排列的密度，而在實(shí)際業(yè)務(wù)中，真正落地也有著不同的做法。
在對(duì)定制化項(xiàng)目的開發(fā)中，通常會(huì)設(shè)計(jì)一套設(shè)計(jì)師認(rèn)為更加合理的單元格高度，一般為32px-56px區(qū)間內(nèi)，而在很多通用化產(chǎn)品中，存在多個(gè)設(shè)備屏幕分辨率的差異，為了讓每一個(gè)分辨率下的產(chǎn)品都能夠有較好的展示效果，于是乎將選擇權(quán)交給用戶，在表格左下角會(huì)設(shè)置舒適、標(biāo)準(zhǔn)、緊湊三種高度來滿足需求，使得表格更加落地合理。
總結(jié)：整個(gè)單元格的行高，就是由這三部分組成，它們的嵌套與組合，所形成了單元格的行高
c.表格分割
在表格設(shè)計(jì)當(dāng)中，每一條線都有著它存在的意義。
當(dāng)表格中展示橫線；隱藏縱線。
用戶的橫向閱讀體驗(yàn)更佳，強(qiáng)調(diào)一條數(shù)據(jù)的完整性，能夠讓用戶進(jìn)行快速的對(duì)應(yīng)。
當(dāng)表格中展示縱線；隱藏橫線。
用戶的縱向閱讀體驗(yàn)更佳，強(qiáng)調(diào)數(shù)據(jù)上下間的對(duì)比，能夠讓用戶找到同一緯度數(shù)據(jù)下的對(duì)比。
比如在一個(gè)組織架構(gòu)的成員列表中，我相信大家都設(shè)計(jì)過類似頁面，同樣的設(shè)計(jì)方式，我一個(gè)采取展示橫線、一個(gè)展示縱線，結(jié)果明顯，我成員需要閱讀完整條數(shù)據(jù)，因此橫線會(huì)更加合理。
當(dāng)然，在我們?nèi)粘５脑O(shè)計(jì)中，展示橫線的場(chǎng)景顯然會(huì)更多，但我們?nèi)粘Ｊ褂脮r(shí)，數(shù)據(jù)對(duì)應(yīng)的場(chǎng)景還會(huì)更多這是需要有更強(qiáng)的設(shè)計(jì)形式：
d.行、列凍結(jié)
當(dāng)表格的行與列的數(shù)量過多時(shí)，會(huì)導(dǎo)致一屏展示不下，而表格中的關(guān)鍵信息與操作是需要在任何時(shí)候都展示，這是采取行、列凍結(jié)，能讓用戶快速觸達(dá)。
表頭凍結(jié)：通常出現(xiàn)在垂直滾動(dòng)時(shí)，通過固定表頭的信息，能夠讓用戶閱讀時(shí)對(duì)應(yīng)不同的數(shù)據(jù)，使用戶更好理解數(shù)據(jù)。
首尾凍結(jié)：通常出現(xiàn)在水平滾動(dòng)，通過固定首列的主屬性字段以及尾列的數(shù)據(jù)操作，來滿足用戶對(duì)于一列數(shù)據(jù)的認(rèn)知，從而使用戶進(jìn)行快速操作。
在對(duì)分頁設(shè)計(jì)的分析中，我們需要對(duì)分頁中的元素進(jìn)行拆解，才能明白分頁的類型所帶來的不同。
表格信息：會(huì)展示表格信息當(dāng)中的數(shù)據(jù)總量、更新時(shí)間、默認(rèn)排序方式等...
數(shù)據(jù)總量主要展示用戶需要瀏覽的內(nèi)容的總量；常見于管理后臺(tái)搜索、篩選符合條件的數(shù)據(jù)記錄時(shí)，搜索結(jié)果頁通常會(huì)展示這個(gè)信息，這讓銷售人員在操作時(shí)有心理預(yù)期。
更新時(shí)間主要是展示用戶當(dāng)前表格所操作時(shí)的日期時(shí)間；常見于金融類產(chǎn)品中，他們對(duì)于表格中數(shù)據(jù)的時(shí)效性尤為關(guān)注，這樣可以方便用戶對(duì)表格數(shù)據(jù)中的有效性進(jìn)行判斷
默認(rèn)排序方式主要是展示表格中是按照哪一個(gè)字段進(jìn)行的排序；通常這種做法多出現(xiàn)于表頭直接展示icon，但對(duì)于可配置化的產(chǎn)品而言，隨著列數(shù)的增多，你越來越找不到你想要的默認(rèn)排序方式，因此在表格的固定位置展示，就再好不過（記住，只針對(duì)特定場(chǎng)景）
頁面展示數(shù)量：結(jié)構(gòu)為「X條/頁」
它能控制每個(gè)頁面展示多少條數(shù)據(jù)；當(dāng)在系統(tǒng)中有很多數(shù)據(jù)時(shí)，你可以直接通過「頁面展示數(shù)據(jù) * 分頁總數(shù)」 直接算出整個(gè)表格的數(shù)據(jù)總和。
上一頁和下一頁翻頁：分頁中基本組成元素通過用戶點(diǎn)擊上一頁、下一頁的按鈕，實(shí)現(xiàn)表格的翻頁功能。翻頁通常會(huì)根據(jù)場(chǎng)景不同，去省略翻頁中的不同元素，比如在下面馬上那個(gè)講到的三種翻頁類型，但是上一頁和下一頁是絕對(duì)不可省略的。翻頁也如同你翻書一樣，可以進(jìn)行對(duì)數(shù)據(jù)的逐頁閱讀，遵從用戶之前的使用習(xí)慣。
當(dāng)前頁碼：當(dāng)前頁碼說明了頁面中數(shù)據(jù)當(dāng)前所處的位置，方便用戶進(jìn)行翻頁的操作。
相鄰頁碼展示：相鄰頁碼通常展示前后兩頁，比如你在第6頁時(shí)，頁面需要展示：4、5、6、7、8；但頁碼在第1頁時(shí)，就需要展示：1、2、3、4、5；頁尾同理。
更多分頁：當(dāng)表格數(shù)據(jù)過多時(shí)，就需要使用分頁，同樣，當(dāng)分頁過多時(shí)，我們需要進(jìn)行處理，就是省略，采用更多分頁，去展示多余的分頁情況，當(dāng)用戶需要查看更多的分頁，點(diǎn)擊更多圖標(biāo)即可。
總頁數(shù)：代表大概會(huì)有多少頁此類數(shù)據(jù)，通過使用總頁數(shù)才能讓用戶知道
總頁數(shù)說明了內(nèi)容一共有多少頁，就像一本紙質(zhì)書有總頁數(shù)，一本有聲書有總時(shí)長(zhǎng)；通過這個(gè)元素，用戶才能了解內(nèi)容的多少，對(duì)整理內(nèi)容有個(gè)把握。
頁碼跳轉(zhuǎn)：頁碼跳轉(zhuǎn)幫助用戶從當(dāng)前頁面跳轉(zhuǎn)到其他某個(gè)頁面；比如用戶在搜索了某件商品，按銷量排序，這時(shí)瀏覽到了第15頁，滿意度越來越低；于是打算從前5頁選一個(gè)，這時(shí)就能通過頁碼跳轉(zhuǎn)快速跳轉(zhuǎn)到第1-5頁了。
簡(jiǎn)潔型：
當(dāng)分頁數(shù)量較少時(shí)，通常在7頁以內(nèi)，就只有最基礎(chǔ)的展示：上一頁、分頁數(shù)量、下一頁。
迷你型：
當(dāng)頁面空間不足或者降低分頁的視覺影響時(shí)，可以采用迷你型，主要為當(dāng)前頁/總頁數(shù)，可以直接跳轉(zhuǎn)到某頁面。
完整型：
當(dāng)表格數(shù)據(jù)較多，為了滿足更多的用戶需求，可以根據(jù)需求選擇分頁類型。比較完整的分頁還包括如下功能：顯示總數(shù)、調(diào)整每頁顯示條數(shù)、直接跳轉(zhuǎn)到某頁。完整型的雖然滿足各種功能需求，但是所占空間較大，所以我們要根據(jù)自己的需求合理拆分使用。
分頁固定：
在表格中使用分頁，除了選擇合理的分頁類型外，我們還需要注意當(dāng)數(shù)據(jù)過多的時(shí)候，是否要固定分頁。這個(gè)需要根據(jù)需求來決定，如果用戶翻頁很頻繁，表格數(shù)據(jù)又特別長(zhǎng)，就可以考慮分頁固定在底部，免得每次用戶翻頁都要跑到表格的最底部才能分頁，還可以在表頭也放迷你型分頁。但通常在設(shè)計(jì)表格的時(shí)候就沒有固定，也很少使用表頭分頁，所以根據(jù)需求來定。同樣按鈕的設(shè)計(jì)也會(huì)存在類似的情況。
另外就是當(dāng)數(shù)量過少時(shí)，只有一頁或者無數(shù)據(jù)的時(shí)候，我們是不需要分頁的，這個(gè)時(shí)候最好去掉分頁，展示在這里沒有什么意義了。但很多時(shí)候我們?cè)O(shè)計(jì)沒有做區(qū)分，開發(fā)也就不管了。
老讀者都知道，我會(huì)反復(fù)去強(qiáng)調(diào)“場(chǎng)景”這一概念（比如在導(dǎo)航菜單、篩選、彈窗、圖標(biāo)中經(jīng)常提到這一詞），因?yàn)槟阒挥忻靼子脩粽嬲臉I(yè)務(wù)場(chǎng)景，才能夠真正的明白用戶的痛點(diǎn)。我們回到表格中，在表格的場(chǎng)景主要分為五類不同場(chǎng)景：數(shù)據(jù)瀏覽、數(shù)據(jù)新增、數(shù)據(jù)操作、數(shù)據(jù)統(tǒng)計(jì)與通用場(chǎng)景。我會(huì)通過不同場(chǎng)景的梳理分析我們?cè)诓煌瑘?chǎng)景中存在那些優(yōu)化點(diǎn)，可以進(jìn)行深入探討。
在數(shù)據(jù)瀏覽的場(chǎng)景中，本質(zhì)上是對(duì)大量數(shù)據(jù)進(jìn)行尋找與確認(rèn)。用戶需要在此場(chǎng)景下進(jìn)行高效準(zhǔn)確的數(shù)據(jù)查找。而伴隨著用戶的尋找，就需要使用表格當(dāng)中的工具進(jìn)行輔助查找，比如篩選、搜索，這些工具的出現(xiàn)，都能夠幫助用戶進(jìn)行數(shù)據(jù)的清洗，使得用戶想要的數(shù)據(jù)能夠快速的被找到。
比如：我們公司的銷售人員在每天早上，都需要去 check in 今天自己所要跟進(jìn)、回訪的客戶，銷售人員就會(huì)通過表格中的各種工具，去幫助銷售人員找到自己想要的那部分?jǐn)?shù)據(jù)。
常見行為及設(shè)計(jì)點(diǎn)：
數(shù)據(jù)篩選瀏覽：通過自己對(duì)數(shù)據(jù)的一定了解，結(jié)合各種篩選條件，配合得到用戶想要的篩選結(jié)果。
數(shù)據(jù)多選：用戶可以通過多選，為他尋找的數(shù)據(jù)進(jìn)行標(biāo)記，方便之后的操作。
數(shù)據(jù)新增本質(zhì)上是將復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，通過系統(tǒng)字段類型的相應(yīng)規(guī)則，錄入保存到系統(tǒng)中。這也就我們常說的增刪改查的“增”
比如：銷售人員在對(duì)新增的客戶進(jìn)行登記時(shí)，需要登記公司名稱，聯(lián)系人，聯(lián)系方式，跟進(jìn)記錄等等。且需要不斷更新跟進(jìn)記錄，因此銷售人員在表格上的新增是一個(gè)非常高頻操作～
數(shù)據(jù)操作分為對(duì)單個(gè)數(shù)據(jù)的操作、單行數(shù)據(jù)的操作、多行數(shù)據(jù)的操作三種情況
單個(gè)數(shù)據(jù)的操作，就是我們常見的快捷編輯，可以點(diǎn)擊快捷編輯按鈕，對(duì)單個(gè)數(shù)據(jù)進(jìn)行錄入，
為何需要快捷編輯，在銷售使用場(chǎng)景中，使用表格去編輯一條信息是一個(gè)循序漸進(jìn)的過程，比如在對(duì)客戶進(jìn)行溝通時(shí)，數(shù)據(jù)的不斷更改，跟進(jìn)內(nèi)容也在不停修改，導(dǎo)致用戶需要每次進(jìn)入用戶詳情點(diǎn)擊編輯之后才能進(jìn)行操作，而在表格內(nèi)進(jìn)行快捷編輯直接滿足實(shí)時(shí)編輯的需求，在交互層面上這是一個(gè)非常OK的需求
但落到開發(fā)層面上，就意味著要在用戶進(jìn)入表格中去判斷權(quán)限，才能讓用戶知道是否能夠點(diǎn)，點(diǎn)擊過后需要判斷字段屬性，明確該字段是與哪些字段進(jìn)行聯(lián)動(dòng)
單條數(shù)據(jù)主要通常會(huì)采取兩種路徑進(jìn)行操作：進(jìn)入用戶詳情頁界面，對(duì)一整列數(shù)據(jù)進(jìn)行編輯，這種情況通常都需要多個(gè)數(shù)據(jù)進(jìn)行處理，因此進(jìn)入編輯頁面更容易尋找，同時(shí)也是最為正常的一種做法
多行數(shù)據(jù)操作主要采取多選過后的操作方式：當(dāng)用戶想要對(duì)多條數(shù)據(jù)進(jìn)行操作時(shí)，就需要對(duì)多個(gè)數(shù)據(jù)進(jìn)行checkbox 的勾選，從而滿足多行操作的需求
數(shù)據(jù)統(tǒng)計(jì)主要針對(duì)用戶需要審查分析。目的是在通過大量的數(shù)據(jù)分析去得出自己的某一些結(jié)論，由于關(guān)注的數(shù)據(jù)會(huì)有主次之分，數(shù)據(jù)與數(shù)據(jù)之間也會(huì)有內(nèi)在聯(lián)系，用戶會(huì)更加跳躍地掃視頁面，而且會(huì)更加反復(fù)地審查數(shù)據(jù)。例如，銷售人員需要查閱本月的銷售情況，進(jìn)入到商品銷售明細(xì)表中，分析本月的經(jīng)營(yíng)狀況，若其中某些商品
了解了表格的使用場(chǎng)景過后，針對(duì)不同的場(chǎng)景，在設(shè)計(jì)上它的思路就會(huì)有所不同
使用上就會(huì)有不同的設(shè)計(jì)思路。由于篇幅原因，我們主要了解了表格的基本形態(tài)，如果對(duì)于表格的場(chǎng)景還不太清楚，我會(huì)在下篇中與大家通過20個(gè)問題，了解B端表格中究竟應(yīng)該如何設(shè)計(jì)～
我是CE青年
一個(gè)2 B行業(yè)的2B設(shè)計(jì)師
我們下篇文章再見
1、html標(biāo)簽是用來給文本添加語義的，而不是用來修飾文本的；
2、<meta charset="GBK">指定字符集（GB2312、UTF-8），html保存和指定字符一樣，才不會(huì)亂碼；
3、<!DOCTYPE html> DTD文檔申明告訴瀏覽器我用的什么協(xié)議來寫的，不是html標(biāo)簽；
4、webstorm快捷鍵大全：https://www.cnblogs.com/yeminglong/p/5995421.html
1、h、p 和 hr 標(biāo)簽
2、注釋：<!-- -->
3、圖片：<img src=" ">
4、換行：<br> 用于內(nèi)容未完的換行
5、跳轉(zhuǎn)：<a href=" "></a>
6、base 標(biāo)簽：<base target="_self ">
7、假鏈接：點(diǎn)擊不會(huì)跳轉(zhuǎn)
8、錨點(diǎn)：<a href="#id值"><\a>
1、無序列表（!）
2、有序列表（*）
3、定義列表
?
1、格式
?
2、屬性
（1）寬高
（2）水平和垂直對(duì)齊（align 和 valign）
（3）內(nèi)邊距和外邊距（cellpadding 和 cellspacing）
（4）細(xì)線表格
3、表格的其他標(biāo)簽
（1）caption：表格的標(biāo)題標(biāo)簽，必須寫在 table 內(nèi)而且需緊跟 table
（2）th：th 和 td 同級(jí)，th 有加粗的效果
4、表格的結(jié)構(gòu)
（1）組成：caption 標(biāo)題、thead 表頭、tbody 主體、tfoot 尾部
（2）說明：
5、單元格的合并
（1）水平方向：td 屬性 colspan = "2"；
（2）垂直方向：td 屬性 rowspan = "2"；
1、格式
?
2、input 標(biāo)簽
（1）type = text：
（2）password：
（3）radio：互斥要設(shè)置 name 相同；默認(rèn)選中 checked
（4）checkbox：選中 checked
（5）button：
（6）image：
（7）reset：value 修改標(biāo)題
（8）submit：
（9）hidden：
-----------------------------------------------------------------------------------------------------------------------
*相關(guān)標(biāo)簽：
?
3、非 input 標(biāo)簽
（1）select
?
（2）textarea
4、練習(xí)
（1）表單標(biāo)簽除了 button 外都可以用 value 來指定提交的值
（2）表單添加邊框可以在 form 中添加 fieldset 來實(shí)現(xiàn)
1、video 標(biāo)簽
（1）格式：<video src=" " autoplay="autoplay"></video>；
（2）屬性：controls（控制條）poster（海報(bào)）loop（循環(huán)）preload（預(yù)加載，與autoplay沖突）muted（靜音）width/height；
（3）另一種 video 格式：解決瀏覽器的兼容
?
（4）讓所有的瀏覽器支持 video 標(biāo)簽：通過 js 框架來實(shí)現(xiàn)
2、audio 標(biāo)簽
（1）使用基本和 video 一樣，屬性只有寬高和 poster 不能用，也是兩種格式
3、details 和 summary 標(biāo)簽
（1）格式：
?
4、marquee標(biāo)簽（跑馬燈效果）
（1）w3c 不推薦，但是瀏覽器的支持好
（2）屬性：direction（方向）scrollamount（滾動(dòng)的速度）loop（滾動(dòng)次數(shù)，默認(rèn)-1）behavior（滾動(dòng)類型 slide）
（3）廢棄的標(biāo)簽：<br><hr><font><b>加粗<u>下劃線<i>斜體<s>刪除線（無語義）
替代的標(biāo)簽：<strong><ins><em><del>（加入了語義）
5、字符實(shí)體
（1） ；空格 <；>； ©；版權(quán)符號(hào)
（2）理解：html 占用了的不顯示的特殊字符用另外的代替符號(hào)表示，使他們正常在 html 頁面上顯示
文介紹了制定產(chǎn)品設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)的重要性，也包括行業(yè)對(duì)于高級(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)平面化、簡(jiǎn)潔和直觀的設(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è)對(duì)于高級(jí)產(chǎn)品經(jīng)理的要求:
在講這篇內(nèi)容之前，先容許我把之前的幾篇文章給大家同步一下，感興趣的小伙伴或者遇到瓶頸的小伙伴一定要看，我相信會(huì)對(duì)你們的提升帶來很大的幫助，內(nèi)容很長(zhǎng)，建議先收藏。
我們先來簡(jiǎn)單的對(duì)規(guī)范標(biāo)準(zhǔn)有個(gè)概念，有很多小伙伴都總是會(huì)在這兩個(gè)詞進(jìn)行拉扯，但其實(shí)這兩個(gè)詞加起來就代表了準(zhǔn)則。而規(guī)范則是基于標(biāo)準(zhǔn)之下，如支付寶小程序，它的設(shè)計(jì)規(guī)范，對(duì)于我們來講，就是平臺(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ū)別為：意思不同、出處不同。
① 意思不同
② 出處不同
規(guī)范要求和標(biāo)準(zhǔn)的區(qū)別：
③ 成因不同
接下來，我們開始今天的主要內(nèi)容。小編會(huì)通過三個(gè)篇章，七個(gè)章節(jié)，給大家提供落地的方法。
倘若你目前剛好處在對(duì)于制定產(chǎn)品的規(guī)范標(biāo)準(zhǔn)無從下手的階段，以下內(nèi)容絕對(duì)能夠讓你按部就班的完成；假如你已經(jīng)為多個(gè)平臺(tái)制定過標(biāo)準(zhǔn)，也可以參考本篇內(nèi)容，思考下有沒有進(jìn)步的空間；假如你從來沒接觸也沒有機(jī)會(huì)制定，那么，這篇文章就是你的敲門磚。
小編總結(jié)了十點(diǎn)，先給大家介紹一下，我們?yōu)槭裁匆プ鲞@個(gè)事情，這個(gè)事情給我們帶來什么價(jià)值。
作為產(chǎn)品，我們必須要清楚一個(gè)原則在于：我們做的任何事情，都得有它的價(jià)值，要清楚它的目的再去做，拒絕為了做而做的行為，切勿讓自己變成了傳聲筒。
綜上所述，制定產(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)品，提高用戶滿意度和市場(chǎng)競(jìng)爭(zhēng)力。
產(chǎn)品設(shè)計(jì)的常識(shí)（Common Sense），很多時(shí)候都會(huì)被忽略，特別一些小型項(xiàng)目。研發(fā)人員會(huì)在初期嫌麻煩不對(duì)一些常識(shí)的問題進(jìn)行處理，最終導(dǎo)致的影響，往往是影響到產(chǎn)品的本身。
產(chǎn)品一定要把控好這個(gè)關(guān)卡，誰都可以不懂，產(chǎn)品一定要最清楚最基本的就是系統(tǒng)異常處理設(shè)計(jì)規(guī)范能夠有效解決且避免以下七點(diǎ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)端，有些頁面使用長(zhǎ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)對(duì)應(yīng)的去檢查是否有做到位。那么我相信你們吹來的作品，一定是具備一定的專業(yè)度，一致性以及可延展性的。
在入門篇開始之前，先給大家交個(gè)底。我們?cè)谥贫óa(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è)部門之間的摩擦。
相信大家應(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)扎根土地，茁壯成長(zhǎng)的階段。
相對(duì)比較穩(wěn)定的時(shí)候就會(huì)開始考慮這個(gè)問題，但并不代表說，交互設(shè)計(jì)不重要。交互設(shè)計(jì)對(duì)于產(chǎn)品來言，在做需求時(shí)，靠的是經(jīng)驗(yàn)，靠的是競(jìng)品分析，靠的是借鑒。
看到這里的小伙伴們，自動(dòng)自覺對(duì)號(hào)入座，往往一味的靠經(jīng)驗(yàn)，靠競(jìng)品，靠借鑒，只會(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í)候要注意什么？
2）如何理解模態(tài)框？
何時(shí)應(yīng)該使用模態(tài)框？模態(tài)框和阻斷框有什么區(qū)別？
模態(tài)對(duì)話框(Modal DialogueBox) ，阻斷(Blocking），可以用兩個(gè)比喻給大家解釋：
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ī)范
文章開頭也有提及到，忘記了請(qǐng)翻上去復(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á)布局對(duì)齊：
首先，我們要清楚，人的視覺是上下，左右的。所以我們會(huì)把要填寫的標(biāo)題，放在左邊，輸入的內(nèi)容放在右邊。這個(gè)原因也在于大部分都是右撇子，所以放在右面方便輸入，而在左邊提到的四點(diǎn)，各有千秋。
關(guān)鍵在于考慮的出發(fā)點(diǎn)是用戶的視覺，還是表單的體驗(yàn)，抑或者是信息是否足夠直觀。再者就是是否夠簡(jiǎ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)簽顯示訂單已完成，申請(qǐng)售后則有售后的標(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ī)范。
本章節(jié)我們以Web端為例，我們?cè)谠O(shè)計(jì)過程中，需要考慮我們基于什么樣的尺寸進(jìn)行基礎(chǔ)設(shè)計(jì)。劃分哪些區(qū)域需要固定尺寸、哪些需要做適配等。
據(jù)統(tǒng)計(jì)，使用中系統(tǒng)的用戶的主流分辨率主要為 1920、1440 和 1366。
設(shè)計(jì)思考，有如下幾點(diǎn)：
web頁面是按照Html的設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)進(jìn)行布局設(shè)計(jì)的，由以下三部分構(gòu)成:
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)簽可以和控件左對(duì)齊，對(duì)于橫向空間不足的情況是一種很好的方案。
豎列標(biāo)簽的使用場(chǎng)景思考：
表格的設(shè)計(jì)思考：
表格的設(shè)計(jì)規(guī)范的設(shè)計(jì)思考點(diǎn)如下：
表頭的文案，可遵循信息降噪的原則思考：
4）Progress bar（進(jìn)度條）
進(jìn)度條的設(shè)計(jì)思考：
加載中進(jìn)度條，存在加載中、成功、失敗三種狀態(tài)通過顏色去區(qū)分，進(jìn)度條長(zhǎng)度支持自定義。
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)的頁面。
為了緩解用戶面對(duì)這類情況產(chǎn)生焦慮情緒，設(shè)計(jì)師可以用一些插畫和文字的結(jié)合來引導(dǎo)用戶進(jìn)行下一步的操作。
產(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)換。
例：
在設(shè)計(jì)規(guī)范中，盡量把顏色的色值和 rgba 值都寫出來（這里是強(qiáng)迫癥患者要標(biāo)的，因?yàn)橛袝r(shí)候色值完全一樣，但 rgba 數(shù)值略有不同，雖然效果一樣，但是對(duì)于強(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ì)有對(duì)不齊像素的狀況發(fā)生。
字體顏色
字體顏色數(shù)量建議在 3~4 個(gè)，不宜過多，但是每個(gè)層級(jí)之間區(qū)分要大一些。
文本應(yīng)該保持至少 4.5:1 （基于亮度值計(jì)算）的對(duì)比度以保持文本清晰；最佳對(duì)比度為 7:1。
測(cè)試對(duì)比度的網(wǎng)站：https://contrast-ratio.com
WCAG 2.0 中將顏色對(duì)比等級(jí)分為 3 種，A級(jí)，AA級(jí)，AAA級(jí)，等級(jí)越高意味著顏色的對(duì)比度越高，呈現(xià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)階篇階段，我們不只是按照行業(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è)方面：
引導(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)是針對(duì)新用戶的，首次進(jìn)入產(chǎn)品的時(shí)候，我們要著重的把自己產(chǎn)品的亮點(diǎn)以及操作快速的介紹給新用戶，讓他用最短的時(shí)間上手我們的產(chǎn)品。
新手引導(dǎo)要言簡(jiǎn)意賅，并且如果非必要的話，盡量給用戶一個(gè)可以直接關(guān)閉的按鈕，讓用戶有選擇權(quán)。我就非常討厭有一些產(chǎn)品的新手引導(dǎo)，必須走完全部流程后才能關(guān)閉，惡心的不行。
2）Steps guide（步驟引導(dǎo)）
步驟引導(dǎo)一般用在有固定操作步驟的場(chǎng)景下，指引用戶一步一步的完成想要的結(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)一般用在在缺省頁，對(duì)用戶進(jìn)行一些操作指引，讓無信息的頁面變得更有價(jià)值。比如百度在一些缺省頁上就放了一些關(guān)于失蹤兒童的信息，就因?yàn)樽隽诉@個(gè)引導(dǎo)，幫助了千萬個(gè)家庭找到了失散的孩子。
這一章節(jié)在很多平臺(tái)里面，都會(huì)給忽略掉它的一個(gè)重要性，一個(gè)產(chǎn)品的延展性，通用性，易用性和親密性都離不開一個(gè)好的角色設(shè)計(jì)規(guī)范，角色設(shè)計(jì)的底層邏輯就是產(chǎn)品權(quán)限的制定。
目前的主流產(chǎn)品對(duì)于權(quán)限的制定都有一套規(guī)范標(biāo)準(zhǔn)，小編負(fù)責(zé)的產(chǎn)品也是通過借鑒主流產(chǎn)品權(quán)限的制定方式來設(shè)計(jì)，本章節(jié)主要是給大家分享下小編的方法。
我在做權(quán)限制定的對(duì)象是角色，而不是用戶，所以也點(diǎn)一下題，我們?cè)谧龅氖菍?duì)產(chǎn)品角色設(shè)計(jì)的規(guī)范，并不是對(duì)用戶權(quán)限去做控制，接下來我們先來梳理下在做權(quán)限制定的時(shí)候常見的問題。
1）權(quán)限制定的過程中常遇到的問題有。
我們可管理的權(quán)限（系統(tǒng)資源）分為功能權(quán)限、數(shù)據(jù)權(quán)限：
這些問題主要都是基于用戶作為權(quán)限主體的時(shí)候會(huì)出現(xiàn)的問題。傳統(tǒng)的方式就是A -> B -> C 這類型的用戶權(quán)限去對(duì)用戶進(jìn)行管理，對(duì)于業(yè)務(wù)的調(diào)整以及對(duì)功能模塊的拓展是不友好的。
因此，我對(duì)于權(quán)限管理的理解為權(quán)限是主體對(duì)客體遵循特定機(jī)制做出的行為，而本章節(jié)主要是給各位分享RBAC模型。
2）對(duì)RBAC模型中的關(guān)系描述 – 基于角色的訪問控制
RBAC（Role-Based Access Control）是一種訪問控制模型，用于管理系統(tǒng)中的用戶訪問權(quán)限。RBAC模型基于角色來定義和分配權(quán)限，通過將權(quán)限與角色關(guān)聯(lián)，然后將角色分配給用戶，實(shí)現(xiàn)對(duì)系統(tǒng)資源的訪問控制。
1. 角色與權(quán)限之間的關(guān)系：
2. 角色與用戶之間的關(guān)系：
這些關(guān)系形成了RBAC模型的基本結(jié)構(gòu)，通過這些關(guān)系的建立和管理，可以實(shí)現(xiàn)對(duì)用戶訪問權(quán)限的控制和管理。
3）對(duì)RBAC模型的分析
RBAC模型的優(yōu)點(diǎ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è)角色，以及對(duì)應(yīng)的權(quán)限：
1. 角色與權(quán)限之間的關(guān)系：
2. 角色與用戶之間的關(guān)系：
3. 在該實(shí)例中，RBAC模型的使用如下：
通過RBAC模型，該在線學(xué)習(xí)平臺(tái)實(shí)現(xiàn)了對(duì)不同角色的權(quán)限控制，確保每個(gè)用戶只能執(zhí)行其角色所允許的操作，從而提供了安全和可控的訪問控制機(jī)制。
5）最后，對(duì)本章節(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é)一下今天分享出來的內(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)：
本文由@樂少有話說 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
