表格的設(shè)計(jì)遠(yuǎn)遠(yuǎn)沒(méi)有想象的那么簡(jiǎn)單，除了純粹的數(shù)據(jù)展示，現(xiàn)在的表格越來(lái)越兼顧到一些導(dǎo)航的功能在里面，不僅僅縱向展示數(shù)據(jù)，在橫向方面也做了相應(yīng)的擴(kuò)展。本文作者將來(lái)詳細(xì)聊一聊表格。

作為頁(yè)面布局的重要組成部分，表格的身影隨處可見(jiàn)。了解與熟知To B業(yè)務(wù)平臺(tái)軟件設(shè)計(jì)的工作人員都應(yīng)該知道，表格在平臺(tái)應(yīng)用中的重要性。表格出現(xiàn)的概率不是一般的多，內(nèi)容信息的排列布局、大量數(shù)據(jù)的展示、眾多功能操作的按鈕擺放，一般都會(huì)用到相應(yīng)的表格，而且表格的樣式類(lèi)別也是多種多樣。表格的設(shè)計(jì)也遠(yuǎn)遠(yuǎn)沒(méi)你想象中的那沒(méi)簡(jiǎn)單，可以說(shuō)要想設(shè)計(jì)出滿足業(yè)務(wù)需求、符合用戶心智模型的表格不是那么的輕而易舉。

本文就來(lái)詳細(xì)聊一聊表格。聊之前，我們應(yīng)該明確三個(gè)詞的概念：列表、表格、表單。

• 列表，英文釋義為L(zhǎng)ist。百度釋義為：以表格為容器，裝載著文字或圖表的一種形式，叫列表。如，班主任點(diǎn)名的花名冊(cè)，就是一個(gè)列表；QQ軟件的好友列表等等。
• 表格，英文釋義為T(mén)able，又稱為表，即是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段，主要承載數(shù)據(jù)的歸納、展示與對(duì)比的功能，是列表的一種。
• 表單，英文釋義為Form。表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能。如當(dāng)我們注冊(cè)某個(gè)網(wǎng)站的賬號(hào)時(shí)，填寫(xiě)個(gè)人信息的頁(yè)面，就是一個(gè)表單。

表格經(jīng)常和其他界面元素一起協(xié)同使用，用于展示和操作結(jié)構(gòu)化數(shù)據(jù)，并經(jīng)常用于詳情信息的入口。通常表格的組成元素以及相關(guān)元素會(huì)有多個(gè)部分，筆者根據(jù)自己設(shè)計(jì)表格的工作經(jīng)驗(yàn)將表格概括為篩選區(qū)、表頭、正文以及底欄等四個(gè)部分，其各個(gè)部分包含的相關(guān)元素如圖所示。

接下來(lái)，我們對(duì)表格的每一個(gè)部分進(jìn)行講解。

一、篩選區(qū)

篩選區(qū)可以看作表格的導(dǎo)航。篩選區(qū)主要包括兩部分，一是篩選，二是搜索。其目的相同，都是將操作者所關(guān)注的數(shù)據(jù)展示到前面，便于查看。

1、篩選 ?

篩選是將一類(lèi)數(shù)據(jù)展示出來(lái)，而將其他類(lèi)型的數(shù)據(jù)隱藏。當(dāng)表格數(shù)據(jù)的類(lèi)型多于兩種時(shí)，則考慮采用篩選條件。

（1）篩選案例1

篩選條件在頂部，共七個(gè)。因?yàn)楹Y選條件存在交叉，所以都展示在頂部。選擇條件以后，需點(diǎn)擊才能觸發(fā)篩選。

（2）篩選案例2

篩選條件在頂部，因?yàn)楹Y選條件不存在交叉，所以實(shí)時(shí)篩選。

（3）篩選設(shè)計(jì)建議

1. 對(duì)于篩選條件沒(méi)有交叉的場(chǎng)景，當(dāng)條件少于五個(gè)，制作成table切換；超過(guò)五個(gè)少于二十個(gè)，采用下拉選擇；多與二十五個(gè)，為下拉選擇添加模糊匹配設(shè)置，并配備實(shí)時(shí)刷新；
2. 對(duì)于篩選條件有交叉的場(chǎng)景，建議采用展開(kāi)形式，并配備手動(dòng)加載刷新。
3. 對(duì)于需輸入篩選條件的場(chǎng)景，如日期篩選條件，單獨(dú)處理，展示出來(lái)。

2、搜索

搜索是目的在于定點(diǎn)查看。搜索的使用場(chǎng)景是操作者要查看某一特定數(shù)據(jù)，輸入相應(yīng)的條件，進(jìn)行搜索，頁(yè)面對(duì)所搜索的數(shù)據(jù)進(jìn)行展示。

（1）搜索案例1

搜索框緊跟篩選條件，并配有確定搜索按鈕。

（2）搜索案例2

當(dāng)存在多個(gè)搜索輸入框時(shí)，用高級(jí)搜索打包收起，點(diǎn)擊展開(kāi)，同時(shí)，配備搜索與重置按鈕。點(diǎn)擊右上角的漏斗可以設(shè)置高級(jí)搜索條件的顯示與隱藏。

（3）搜索設(shè)計(jì)建議

1. 搜索輸入框盡量采用模糊搜索，不要讓用戶去辨認(rèn)、識(shí)別要輸入的內(nèi)容；
2. 對(duì)于多個(gè)搜索條件交叉搜索的場(chǎng)景，建議采用高級(jí)搜索按鈕，將其打包收起，并配置重置按鈕，便于一鍵清空所有搜索條件，便于接下來(lái)的搜索。

二、表頭

表頭是對(duì)表格數(shù)據(jù)的操作，包括行標(biāo)簽、操作工具等。有些簡(jiǎn)單表格，將表頭與篩選區(qū)合并，將篩選條件、搜索雜糅在一起。

1、固定

表頭固定，目的在于向下滾動(dòng)表格時(shí)，表頭出現(xiàn)在頁(yè)面頂部，時(shí)刻指示出該列數(shù)據(jù)的類(lèi)別屬性。

（1）固定案例1

該案例中每列數(shù)據(jù)具有明顯的差異，數(shù)據(jù)本身體現(xiàn)出了類(lèi)型，在不需要表頭情況下，用戶能夠清楚的知道數(shù)據(jù)類(lèi)型及意義，不會(huì)出現(xiàn)混淆，故沒(méi)有采用固定表頭的設(shè)計(jì)。

（2）固定案例2

表格中的數(shù)據(jù)列差異不大，用戶不能直觀的根據(jù)表格中的數(shù)據(jù)分辨出數(shù)據(jù)類(lèi)型，因此采用固定頂部表頭，指示出數(shù)據(jù)類(lèi)型。

（3）固定表頭設(shè)計(jì)建議

1. 在數(shù)據(jù)顯示超過(guò)40條時(shí)（電腦屏幕一屏無(wú)法完全顯示，需要滾動(dòng)查看時(shí)），且表格中的數(shù)據(jù)不能直觀的展示出數(shù)據(jù)類(lèi)型，建議采用固定表頭的形式，時(shí)刻顯示數(shù)據(jù)類(lèi)型；
2. 當(dāng)字段數(shù)量過(guò)多，需要橫向滾動(dòng)表格，且需要對(duì)比數(shù)據(jù)時(shí)，采用固定屬性列字段。

2、字段數(shù)量

（1）字段數(shù)量案例1

表格的字段過(guò)多，且數(shù)據(jù)分類(lèi)不明顯，因此采用橫向滾動(dòng)形式，將重要數(shù)據(jù)放在表格左側(cè)，次要數(shù)據(jù)放到表格右側(cè)。

（2）字段數(shù)量案例2

與案例1相同，字段過(guò)多，采用橫向滾動(dòng)形式。但相比案例一，在向右滾動(dòng)數(shù)據(jù)時(shí)，縱標(biāo)簽固定，指示數(shù)據(jù)類(lèi)型。第一列是時(shí)間需要進(jìn)行對(duì)比，固定了第一列使得閱讀起來(lái)存在一個(gè)基礎(chǔ)。

（3）字段數(shù)量案例3

對(duì)數(shù)據(jù)進(jìn)行分類(lèi)顯示，做成下拉選擇切換形式。將重點(diǎn)數(shù)據(jù)放置在默認(rèn)顯示頁(yè)面，次要數(shù)據(jù)放置在下拉選擇的類(lèi)別中。頁(yè)面簡(jiǎn)潔，功能完備且有序。

（4）字段數(shù)量案例4

相較于案例3，同樣對(duì)數(shù)據(jù)進(jìn)行分類(lèi)顯示，并制成table切換形式。數(shù)據(jù)的類(lèi)型較少，且不存在主次關(guān)系，僅進(jìn)行數(shù)據(jù)羅列展示。

（5）字段設(shè)計(jì)建議

1. 對(duì)于字段數(shù)據(jù)沒(méi)有明確分類(lèi)，或者有些數(shù)據(jù)不太重要，可以采用橫向滾動(dòng)條，進(jìn)而固定左側(cè)屬性列，便于數(shù)據(jù)對(duì)比；
2. 對(duì)于數(shù)據(jù)有類(lèi)別區(qū)分，可以采用分類(lèi)展示，切換button放在頂部或列表中。

3、字段

字段，為表頭中的行標(biāo)簽中的字段標(biāo)識(shí)。字?jǐn)?shù)多少以及傳達(dá)的意義是否明確，對(duì)于表格功能的表現(xiàn)至關(guān)重要。

（1）字段案例1

采用簡(jiǎn)單英文單詞、單詞縮寫(xiě)、詞組子母首拼等來(lái)傳達(dá)字段含義。同時(shí)，每個(gè)字段后面緊跟釋義標(biāo)識(shí)。鼠標(biāo)懸停，即可出現(xiàn)該字段的詳細(xì)解釋?zhuān)槙车臐M足了新手用戶、普通用戶以及專(zhuān)家用戶的需求。

（2）字段案例2

字段用意義明確的單詞、詞組來(lái)表示。字段數(shù)量較少時(shí)，用簡(jiǎn)潔的標(biāo)識(shí)字段數(shù)據(jù)，界面簡(jiǎn)潔、意義明確。

（3）字段設(shè)計(jì)建議

1. 字段在五個(gè)以下，且字段的類(lèi)型較為常見(jiàn)，或能夠用簡(jiǎn)短的文字描述清楚，可采用單詞或詞組來(lái)作為字段；
2. 若字段超過(guò)五個(gè)，或不常見(jiàn)字段類(lèi)型，或者簡(jiǎn)短文字不能闡述清楚，可以考慮使用縮寫(xiě)或者特殊單詞做字段，另附解釋文字。

4、排序

對(duì)表格中的數(shù)據(jù)進(jìn)行排序，是讓純粹以展示為目的的表格增添了活力，用戶可以改變數(shù)據(jù)的排序，豐富了數(shù)據(jù)展示形式。

（1）排序案例1

僅用單向箭頭指示出當(dāng)前的數(shù)據(jù)表格排序依據(jù)，并沒(méi)有指明排序的形式。在字段較多、且存在幫助標(biāo)識(shí)的情況下，僅僅指示出排序的依據(jù)，是比較合適的設(shè)計(jì)，畢竟排序的依據(jù)要比形式重要的多。

（2）排序案例2

上下箭頭指示排序，一般上下空心箭頭默認(rèn)，上箭頭為升序，下箭頭為降序，也有通過(guò)明確說(shuō)明來(lái)提示排序的方式。

（3）排序設(shè)計(jì)建議

1. 字段在五個(gè)以下，排序可以采用明確的排序類(lèi)型指向性明確的ICON；
2. 字段數(shù)量大于等于五個(gè)時(shí)，只顯示排序圖標(biāo)，而不顯示類(lèi)型。

三、正文

1、分割線

（1）分割線案例1

表格采用了同樣灰度與透明度的橫縱分割線，斑馬線以及懸停高亮底色能夠很好的引導(dǎo)用戶的視線，避免在閱讀時(shí)出現(xiàn)錯(cuò)行、迷失的情況。同時(shí)沒(méi)有強(qiáng)調(diào)單個(gè)數(shù)據(jù)，或者數(shù)據(jù)之間的關(guān)系，僅做純粹的數(shù)據(jù)展示，頁(yè)面客觀，避免各種錯(cuò)誤的引導(dǎo)。

（2）分割線案例2

采用獨(dú)立數(shù)據(jù)，弱化縱向分割線，采用懸浮高亮顯示，展示一條數(shù)據(jù)的完整性。

（3）分割線案例3

采用橫線構(gòu)架出行的視覺(jué)，數(shù)據(jù)信息均勻分布。同時(shí)，用縱向分隔線對(duì)數(shù)據(jù)進(jìn)行分類(lèi)，表達(dá)出數(shù)據(jù)之間的類(lèi)別關(guān)系，具有明確的數(shù)據(jù)類(lèi)別指向。

（4）分割線設(shè)計(jì)建議

1. 對(duì)于數(shù)據(jù)之間的關(guān)系緊密且有對(duì)比關(guān)系的，可以采用橫向與縱向分割線；
2. 對(duì)于較有獨(dú)立性的數(shù)據(jù)可強(qiáng)調(diào)橫向分割線，弱化縱向分割線；
3. 對(duì)于每條數(shù)據(jù)中的字段有分類(lèi)的表格，可以在強(qiáng)調(diào)橫向分割線的同時(shí)，弱化同類(lèi)數(shù)據(jù)的縱向分割線，而強(qiáng)調(diào)數(shù)據(jù)類(lèi)型之間的縱向分割線。

2、勾選框

在表格中，勾選框主要用于選擇條目并進(jìn)行批量操作。

（1）勾選框案例1

方案采用全選框與下拉選擇來(lái)實(shí)現(xiàn)全選的范圍。直接點(diǎn)擊全選框，默認(rèn)全選本頁(yè)的全部條目。點(diǎn)擊下拉箭頭，顯示不同的全選范圍類(lèi)型，可點(diǎn)擊選擇。

2）勾選框案例2

與案例1相同，指示全選的范圍有所不同，案例1是以頁(yè)面為單位進(jìn)行選擇，案例2是以數(shù)據(jù)類(lèi)型進(jìn)行選擇，同時(shí)包含了篩選與全選的功能。

（3）勾選框案例3

勾選放置在條目后面，便于用戶在查看完一條數(shù)據(jù)后，決定是否勾選。

（4）勾選框設(shè)計(jì)建議

1. 當(dāng)數(shù)據(jù)超過(guò)一頁(yè)時(shí)，對(duì)全選操作提供全選范圍；
2. 當(dāng)數(shù)據(jù)具有類(lèi)型時(shí)，可以考慮對(duì)數(shù)據(jù)的不同類(lèi)型進(jìn)行全選；
3. 對(duì)于逐條勾選的數(shù)據(jù)，若需要查閱數(shù)據(jù)后決定是否勾選，勾選框可以放在條目后面；當(dāng)不需要查閱數(shù)據(jù)就能確認(rèn)是否勾選，勾選框應(yīng)該放在條目前面。

3、對(duì)齊

在表格設(shè)計(jì)，對(duì)齊有兩方面的目的，一是便于數(shù)據(jù)對(duì)比；二是便于用戶閱讀，其分別對(duì)應(yīng)了數(shù)據(jù)與文字兩種類(lèi)型。

（1）對(duì)齊案例1

數(shù)據(jù)右對(duì)齊，便于數(shù)據(jù)的對(duì)比；文字左對(duì)齊，便于用戶閱讀。數(shù)據(jù)的單位及小數(shù)點(diǎn)后位數(shù)，保持一致。

（2）對(duì)齊案例2

將橫向的行內(nèi)信息再次擴(kuò)充就成了如同淘寶商品頁(yè)一樣的，行區(qū)分弱化的表格形式，既滿足了豐富信息的呈現(xiàn)，也能很快速的進(jìn)行與行之間的如同價(jià)格等關(guān)鍵信息的對(duì)比。

（3）對(duì)齊案例3

對(duì)于數(shù)據(jù)的小數(shù)點(diǎn)后面的位數(shù)不同的場(chǎng)景，采用以個(gè)位數(shù)字為基準(zhǔn)，居中對(duì)齊，便于對(duì)比。

（4）對(duì)齊設(shè)計(jì)建議

數(shù)據(jù)右對(duì)齊，文字左對(duì)齊，盡量保證數(shù)據(jù)的小數(shù)點(diǎn)后單位一致；若不能，則以個(gè)位數(shù)為基準(zhǔn)，居中對(duì)齊。

4、操作項(xiàng)

操作項(xiàng)是用戶對(duì)數(shù)據(jù)的操作處理，不同的數(shù)據(jù)類(lèi)型，其操作項(xiàng)的類(lèi)型、數(shù)量有較大差異，同時(shí)，還牽涉到數(shù)據(jù)批量操作與單項(xiàng)操作的頻率問(wèn)題。操作項(xiàng)一般存在于條目最后，以及表頭位置，分別對(duì)應(yīng)單條操作與批量操作的場(chǎng)景。

（1）操作項(xiàng)案例1

共兩個(gè)操作項(xiàng)，且放置在條目最后。因?yàn)榫庉?、刪除以及設(shè)置ICON的含義明確，且廣為人知，故僅用純ICON來(lái)表示，簡(jiǎn)潔醒目。

（2）操作項(xiàng)案例2

操作項(xiàng)在條目后面，多個(gè)操作動(dòng)作，放置在后面，折疊起來(lái)。在操作時(shí)，點(diǎn)擊下拉出現(xiàn)具體操作項(xiàng)。

（3）操作項(xiàng)案例3

操作項(xiàng)為ICON+文字，共兩個(gè)，放置在條目最后。對(duì)于圖形意義不太明確或者圖形的含義有較大變化，采用圖形+文字的形式，傳達(dá)意義更加明確清楚。

（4）操作項(xiàng)案例4

操作項(xiàng)為純文字，存在表格頂部的表頭，勾選所選條目以后點(diǎn)擊操作按鈕可用。文字按鈕，傳達(dá)的意義更加明確，辨識(shí)性強(qiáng)。

（5）操作項(xiàng)案例5

兩個(gè)操作項(xiàng)為按鈕形式，且放置在條目最后，提高了醒目性，引導(dǎo)用戶點(diǎn)擊操作。

（6）操作項(xiàng)設(shè)計(jì)建議

1. 對(duì)于單條數(shù)據(jù)操作頻繁的場(chǎng)景，操作項(xiàng)不操作三個(gè)時(shí)，操作項(xiàng)跟在條目后面，常見(jiàn)操作僅用ICON，不常見(jiàn)操作用ICON+文字，當(dāng)超過(guò)三個(gè)時(shí)，建議將操作折疊收起。
2. 對(duì)于數(shù)據(jù)批量操作頻繁的場(chǎng)景，建議將操作放到表格頂部，與勾選操作配合使用。

5、空單元格

作為表格中的特殊狀態(tài)，空單元格主要存在兩種情況，一是數(shù)據(jù)不存在，二是數(shù)據(jù)為零。

（1）空單元格案例1

對(duì)于不存在的數(shù)據(jù)，單元格不能空置，需要用短橫線代替，表示該項(xiàng)數(shù)據(jù)不存在，給用戶明確指示。

（2）空單元格案例2

對(duì)于數(shù)據(jù)為零的單元格，要填上0，且小數(shù)點(diǎn)后位數(shù)、單位，都要與上下單元格保持一致。

（3）空單元格設(shè)計(jì)建議

在任何情況下，單元格都不應(yīng)該空置出現(xiàn)，避免用戶的困惑。針對(duì)不存在的數(shù)據(jù)可以用其他占位符，告知用戶該單元格不存在數(shù)據(jù)；對(duì)于數(shù)據(jù)為零的單元格，與上下數(shù)據(jù)單位、小數(shù)點(diǎn)相同的0來(lái)表示。

6、行高

在表格設(shè)計(jì)中，行高是非常重要的參數(shù)，行高間距直接影響著閱讀的體驗(yàn)，同時(shí)還影響著一個(gè)頁(yè)面中數(shù)據(jù)的顯示量。

（1）行高案例1

該案例中，數(shù)據(jù)表格的內(nèi)容為單行顯示，行高較小。數(shù)據(jù)顯示緊湊、有序，同時(shí)，便于跨行之間的數(shù)據(jù)對(duì)比。

（2）行高案例2

該案例中，數(shù)據(jù)表格中的內(nèi)容存在多行顯示，行區(qū)分弱化的表格形式，既滿足了豐富信息的呈現(xiàn)，也能很快速的進(jìn)行行與行之間的關(guān)鍵信息對(duì)比。

（3）行高設(shè)計(jì)建議

對(duì)于單行顯示數(shù)據(jù)內(nèi)容的表格，建議行高約為字體高度的2.5倍到3倍；對(duì)于多行顯示數(shù)據(jù)的表格，建議行中內(nèi)容的最高點(diǎn)與最低點(diǎn)到行框的上下邊距略小于文字高度。

四、底欄

底欄緊跟在表格正文之后，主要展示正文中的數(shù)據(jù)量以及單頁(yè)數(shù)據(jù)條目，同時(shí)，兼具一些導(dǎo)航的功能，指示當(dāng)前所在頁(yè)面以及跳轉(zhuǎn)到指定頁(yè)面。

1、分頁(yè)

（1）分頁(yè)案例1

案例采用了整體頁(yè)碼平鋪的方式，分別展示出前、中、后點(diǎn)的若干頁(yè)碼，便于用戶順序查看。案例中的數(shù)據(jù)不具有特殊性，用戶很少會(huì)特定的查看某一頁(yè)的數(shù)據(jù)，因此沒(méi)有定點(diǎn)跳轉(zhuǎn)的功能。

（2）分頁(yè)案例2

分頁(yè)不僅僅要指出當(dāng)前數(shù)據(jù)所在整體數(shù)據(jù)的位置，同時(shí)還要指出數(shù)據(jù)量的多少，給用戶已明確的指示。

（3）分頁(yè)設(shè)計(jì)建議

分頁(yè)的設(shè)計(jì)是根據(jù)不同的場(chǎng)景進(jìn)行選擇最優(yōu)的設(shè)計(jì)方案。在不需要定點(diǎn)跳轉(zhuǎn)的場(chǎng)景，建議采用案例1或者案例2中的第兩種設(shè)計(jì)，刪除多于的功能，使頁(yè)面簡(jiǎn)潔、清爽。在需要定點(diǎn)跳轉(zhuǎn)的場(chǎng)景，采用案例2中的第一種和第三種設(shè)計(jì)，能夠節(jié)約用戶的大量時(shí)間，且設(shè)計(jì)相對(duì)簡(jiǎn)單，用戶很容易就明白設(shè)計(jì)意圖。

2、單頁(yè)條目顯示

（1）單頁(yè)條目顯示案例1

一般情況下，單頁(yè)條目顯示與分頁(yè)是一體的，分別位于底欄的左右兩側(cè)。案例一的單頁(yè)條目顯示僅僅作為單頁(yè)條目數(shù)量的顯示，而不具有設(shè)置功能，同時(shí)在表格頂部也做相應(yīng)的展示。

（2）單頁(yè)條目顯示案例2

案例不僅展示了當(dāng)前頁(yè)面顯示條目的數(shù)量，同時(shí)給出相應(yīng)的顯示數(shù)量自定義的設(shè)置功能。可增加單頁(yè)條目的顯示數(shù)量，便于更多數(shù)據(jù)放在一起對(duì)比分析。

（3）單頁(yè)條目顯示設(shè)計(jì)建議

對(duì)于單頁(yè)條目顯示的設(shè)計(jì)，建議采用頁(yè)面條目顯示數(shù)量自定義的設(shè)計(jì)方式，其設(shè)計(jì)可以豐富數(shù)據(jù)的對(duì)比范圍，在特定情況下會(huì)方便用戶的操作。

五、寫(xiě)在結(jié)尾

表格的設(shè)計(jì)遠(yuǎn)遠(yuǎn)沒(méi)有想象的那么簡(jiǎn)單，除了純粹的數(shù)據(jù)展示，現(xiàn)在的表格越來(lái)越兼顧到一些導(dǎo)航的功能在里面，不僅僅縱向展示數(shù)據(jù)，在橫向方面也做了相應(yīng)的擴(kuò)展。

言盡于此，表格還有一些其他的設(shè)計(jì)點(diǎn)尚未談及，如子母表、數(shù)據(jù)狀態(tài)、列寬、數(shù)據(jù)列表編輯等，以后有機(jī)會(huì)，再完善表格設(shè)計(jì)的剩余方面。

參考資料

1. http://www.uisdc.com/tips-of-data-table-design
2. http://www.uisdc.com/table-design
3. https://ux.stackexchange.com/questions/55847/extra-wide-tables-best-practices
4. http://designingwebinterfaces.com/ultimate-guide-to-table-ui-patterns
5. https://www.builditwith.me/
6. https://design.pega.com/

作者：弘毅道，微信公眾號(hào)：UIUX設(shè)計(jì)工作坊（UIUX-HUANG)， 希望與同行者多多交流。

本文由 @弘毅道 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。 未經(jīng)許可，禁止轉(zhuǎn)載。