設(shè)計(jì)尺寸一直都是設(shè)計(jì)師最熱衷討論的問(wèn)題，討論到最后結(jié)論總是一個(gè)死板的尺寸，很少有人去講也真正明白背后的邏輯。今天的設(shè)計(jì)雜談就帶大家來(lái)了解一下，設(shè)計(jì)尺寸背后的邏輯以及設(shè)計(jì)尺寸如何去定義。希望之后在大家的交流中不要再去糾結(jié)我的設(shè)計(jì)尺寸究竟應(yīng)該是多少？還是那句老話(huà)，耐心看完，你一定有所收獲～

我先說(shuō)結(jié)論，常見(jiàn) B 端設(shè)計(jì)稿尺寸建議采用 1440×820，因?yàn)槿コ秊g覽器頂部頁(yè)簽以及地址欄高度 80px，因此高度上為 820px 而不是大家常見(jiàn)的 900px

設(shè)計(jì)尺寸從何而來(lái)

相信很多 B 端產(chǎn)品設(shè)計(jì)師都是從 C 端產(chǎn)品中轉(zhuǎn)型而來(lái)。想要搞懂設(shè)計(jì)尺寸的基本邏輯，我們先搞清楚大家熟悉 C 端產(chǎn)品的情況。在移動(dòng)端設(shè)計(jì)尺寸上的定義，我們只需要考慮 iOS 設(shè)備與安卓設(shè)備之間分辨率的區(qū)別。而在目前，大多數(shù)移動(dòng)端設(shè)計(jì)稿都是采取 iPhone 12 尺寸即：375 x 812 的分辨率

（這里就不討論什么物理分辨率以及設(shè)計(jì)分辨率等內(nèi)容）

因?yàn)橐苿?dòng)端也會(huì)存在多個(gè)分辨率的情況，我們針對(duì)其他不同的尺寸，通常采取簡(jiǎn)單頁(yè)面一稿適配多端，只針對(duì)核心頁(yè)面進(jìn)行多分辨率的適配。上面我們算是理解了作為移動(dòng)端的分辨率的基本情況。而設(shè)計(jì)稿的尺寸是從何而來(lái)？大家想想，為什么我們?cè)谝苿?dòng)端設(shè)計(jì)稿的尺寸會(huì)從以前的 iPhone 8（375×667）轉(zhuǎn)移到 iPhone 12（375×812）呢？

我個(gè)人認(rèn)為會(huì)有以下幾點(diǎn)：

1. 主流性

由于 iPhone 12 類(lèi)的手機(jī)尺寸占比逐年增高，早期的 iPhone 8 的分辨率已經(jīng)不再合適現(xiàn)如今手機(jī)的屏幕尺寸。因此決定分辨率尺寸的第一個(gè)因素便是這個(gè)分辨率的市場(chǎng)占有率。由于手機(jī)全面屏?xí)r代的到來(lái)大多數(shù)手機(jī)的屏幕比例都演化成類(lèi) 16:9 的尺寸，因此參照 iOS 的生態(tài)下，我們的設(shè)計(jì)稿就會(huì)有如此的轉(zhuǎn)變

2. 兼容性

作為移動(dòng)端最為基準(zhǔn)的設(shè)計(jì)尺寸，它一定要具備兼容性才能成為基準(zhǔn)的尺寸。兼容性即能夠通過(guò)該尺寸進(jìn)行向上、向下的拓展，方便在一些主要頁(yè)面中多尺寸的設(shè)計(jì)，比如：iPhone X 的尺寸，可以進(jìn)行拓展成為 iPhone 8、iPhone 12 Pro Max 以及各類(lèi)安卓端產(chǎn)品。減少設(shè)計(jì)稿因分辨率所帶來(lái)的差異性

設(shè)備數(shù)據(jù)推導(dǎo)設(shè)計(jì)尺寸

搞清楚了移動(dòng)端的邏輯，我們?cè)偃ニ伎家幌伦烂?WEB 端的情況呢？

因?yàn)?B 端產(chǎn)品的特殊性，在互聯(lián)網(wǎng)中的分辨率數(shù)據(jù)只能作為一個(gè)輔助的參考（比如百度瀏覽研究院的數(shù)據(jù)），更多對(duì)于尺寸的定義還是來(lái)自你用戶(hù)使用的設(shè)備。比如我們?cè)谝粋€(gè)針對(duì)銷(xiāo)售的 CRM 系統(tǒng)中，銷(xiāo)售使用的場(chǎng)景有兩種：

• 一種是銷(xiāo)售需要經(jīng)常外出拜訪客戶(hù)，移動(dòng)辦公場(chǎng)景為主
• 另一種是在公司辦公，通過(guò)電話(huà)的方式對(duì)客戶(hù)進(jìn)行辦公，主要是固定位置進(jìn)行辦公

首先通過(guò)用戶(hù)訪談了解到大多數(shù)銷(xiāo)售都是采取移動(dòng)辦公的形式，因?yàn)殇N(xiāo)售需要對(duì)不同的企業(yè)進(jìn)行登門(mén)拜訪，拜訪完成會(huì)跟進(jìn)一些銷(xiāo)售記錄。因此對(duì)于電腦分辨率會(huì)相對(duì)較小。對(duì)其分辨率的數(shù)據(jù)埋點(diǎn)得知，分辨率以：1440×900、1366×768 兩種為主。第二種場(chǎng)景下，用戶(hù)以 1920×1080 分辨率為主，主要是市面上的辦公顯示器多為 24 寸即 1920×1080然后想要去尋找作為設(shè)計(jì)稿的尺寸也與移動(dòng)端一樣，需要滿(mǎn)足：主流性、兼容性?xún)煞N不同特性的需求。因此在我的設(shè)計(jì)稿中，會(huì)采用 1440×900 的尺寸，因?yàn)樗菀准嫒萸腋鼮橹髁?

OK，我再舉一個(gè)反例，在我之前做過(guò)的一個(gè)線(xiàn)下診所系統(tǒng)中，通過(guò)走訪我們了解到，幾乎所有的醫(yī)生都是配備的 24 寸顯示器，分辨率也都為 1920×1080。

因此在尺寸的選擇上就沒(méi)有必要去一味的選擇 1440 這一尺寸。

對(duì)于瀏覽器的適配

首先顯示器的分辨率并不能代表我們的實(shí)際設(shè)計(jì)尺寸，就像在 iPhone 的設(shè)計(jì)稿中，會(huì)有 StatusBar 的存在，會(huì)預(yù)留上半部分空間

因?yàn)槟壳?，大多?shù) B 端產(chǎn)品都是通過(guò)瀏覽器的方式進(jìn)行呈現(xiàn)，大家也都知道電腦的瀏覽器中（Chrome 瀏覽器為主），還會(huì)存在頁(yè)簽高度以及當(dāng)前網(wǎng)址、書(shū)簽欄（書(shū)簽欄大多數(shù)是隱藏的，因此不算進(jìn)內(nèi)），而想要真實(shí)了解設(shè)備中一屏的高度，就還需要對(duì)上面的分辨率尺寸進(jìn)行處理：

電腦分辨率 – 頁(yè)簽高度 – 網(wǎng)址欄 – 書(shū)簽欄 = 設(shè)計(jì)稿真實(shí)高度，即：1440×820 尺寸進(jìn)行設(shè)計(jì)

因此想要讓自己的設(shè)計(jì)稿被前端進(jìn)行完整還原，就必須將瀏覽器頁(yè)面當(dāng)中的很多因素考慮進(jìn)去。類(lèi)似于我們?nèi)ピO(shè)計(jì)移動(dòng)端的小程序，他也會(huì)有頂部固定的區(qū)域進(jìn)行展示。

文章來(lái)源：優(yōu)設(shè)   作者：CE青年

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

前言

對(duì)于一直做 C 端產(chǎn)品設(shè)計(jì)的同學(xué)來(lái)說(shuō)，面對(duì)復(fù)雜又陌生的 B 端業(yè)務(wù)，難免會(huì)有些頭“禿”，設(shè)計(jì)師該如何應(yīng)對(duì)？或者說(shuō)我們?nèi)绾胃玫赝瓿身?xiàng)目？并挖掘和發(fā)揮設(shè)計(jì)價(jià)值？B 端產(chǎn)品通常具有較高的業(yè)務(wù)門(mén)檻和業(yè)務(wù)深度，對(duì)于設(shè)計(jì)師也具有一定的挑戰(zhàn)性，本文根據(jù)自己的這一年的 B 端工作經(jīng)歷，總結(jié)了一些設(shè)計(jì)方法以及自己的經(jīng)驗(yàn)。希望會(huì)對(duì)處在這個(gè)領(lǐng)域感到迷茫的設(shè)計(jì)師有所指引和幫助。

B 端產(chǎn)品業(yè)務(wù)目的明確，業(yè)務(wù)邏輯和場(chǎng)景相對(duì)比較復(fù)雜，所以對(duì)設(shè)計(jì)師的要求更高，要更清晰理解 B 端業(yè)務(wù)，下面是我轉(zhuǎn) B 端產(chǎn)品設(shè)計(jì)時(shí)的一些思路：

轉(zhuǎn)變自己角色定位

針對(duì)之前一直做 C 端的我來(lái)說(shuō)轉(zhuǎn)戰(zhàn)到 B 端業(yè)務(wù)，也面臨著兩個(gè)端的設(shè)計(jì)反差，B C 端的商業(yè)屬性、產(chǎn)品定位、用戶(hù)人群、視覺(jué)呈現(xiàn)、業(yè)務(wù)邏輯/流程都不盡相同，這將是一場(chǎng)知識(shí)遷移的過(guò)程。

需要轉(zhuǎn)變自己之前的整個(gè)設(shè)計(jì)思路和角色定位，從之前被動(dòng)接需求做圖，只做執(zhí)行輸出設(shè)計(jì)稿，轉(zhuǎn)被動(dòng)為主動(dòng)。也深知設(shè)計(jì)和產(chǎn)品的配合就是互相成就，互相補(bǔ)位。面對(duì)之前不太熟悉的 B 端那些較為復(fù)雜的業(yè)務(wù)場(chǎng)景和邏輯，盡量讓自己在和產(chǎn)品需求對(duì)接時(shí)，提前介入，思維前置，全鏈路思考主動(dòng)提出對(duì)產(chǎn)品的一些想法，難點(diǎn)或疑惑點(diǎn)都可以，也可以幫助自己梳理需求，了解從根本要解決的問(wèn)題是什么，需求背后其核心是達(dá)到什么用途與目的，也想辦法去收集來(lái)自用戶(hù)、業(yè)務(wù)方的反饋，或主動(dòng)去進(jìn)行競(jìng)品調(diào)研，用戶(hù)調(diào)研，這樣不僅可以讓我們更清晰的了解用戶(hù)需求和業(yè)務(wù)場(chǎng)景，在這個(gè)過(guò)程中，往往也會(huì)更容易挖掘出需求的突破點(diǎn)，找到更好的解決方案和更有價(jià)值的驅(qū)動(dòng)點(diǎn)，為業(yè)務(wù)賦能。不再只做被動(dòng)接受的工具人，也會(huì)要求自己去做“項(xiàng)目推動(dòng)型設(shè)計(jì)師”，盡量讓自己全鏈路的參與其中，在每個(gè)環(huán)節(jié)尋找可挖掘和貢獻(xiàn)的價(jià)值點(diǎn)。

系統(tǒng)學(xué)習(xí)業(yè)務(wù)相關(guān)知識(shí)

轉(zhuǎn)變了自己的定位后，由于自己負(fù)責(zé)的 B 端項(xiàng)目，是之前沒(méi)有接觸過(guò)的業(yè)務(wù)，很多業(yè)務(wù)場(chǎng)景無(wú)法使用設(shè)計(jì) C 端產(chǎn)品時(shí)的同理心來(lái)對(duì)待，又有較高的業(yè)務(wù)門(mén)檻和業(yè)務(wù)深度的，首先我認(rèn)真系統(tǒng)的學(xué)習(xí)業(yè)務(wù)涉及到的一些相關(guān)知識(shí)，可以幫助了解自己手里的設(shè)計(jì)工作的業(yè)務(wù)細(xì)節(jié)，和產(chǎn)研團(tuán)隊(duì)多方面溝通產(chǎn)品的需求，弄清每個(gè)步驟的業(yè)務(wù)邏輯，不懂可以多問(wèn)多學(xué)，在產(chǎn)品評(píng)審需求的環(huán)節(jié)，一定要將業(yè)務(wù)邏輯理解透徹再考慮應(yīng)該如何進(jìn)行設(shè)計(jì)實(shí)現(xiàn)。要問(wèn)問(wèn)為什么業(yè)務(wù)流程是這樣，每一個(gè)頁(yè)面的跳轉(zhuǎn)每一個(gè)功能的用途以及業(yè)務(wù)含義是什么等等，多出幾版樣式進(jìn)行探討最優(yōu)方案。

分析洞察產(chǎn)品業(yè)務(wù)場(chǎng)景

設(shè)計(jì)工作的開(kāi)展前，首先需要分析產(chǎn)品的背景是什么，要做什么，要提供用戶(hù)什么服務(wù)？調(diào)研分析一下它的競(jìng)品狀況是怎樣的？現(xiàn)在是什么發(fā)展階段（一般 b 端的產(chǎn)品競(jìng)品是極少的），不管是網(wǎng)上查找還是書(shū)籍搜尋了解一些行業(yè)內(nèi)的資料，也可以找一些間接競(jìng)品吸取靈感。了解產(chǎn)品的目標(biāo)用戶(hù)群有哪些（用戶(hù)畫(huà)像）？不同角色的用戶(hù)會(huì)有哪些權(quán)限？以及分析業(yè)務(wù)存在哪些重要的流程，背后設(shè)計(jì)的意圖和產(chǎn)生的價(jià)值是什么，要解決用戶(hù)或業(yè)務(wù)上的哪些痛點(diǎn)。進(jìn)行了初步的業(yè)務(wù)分析以后，大致分析下使用場(chǎng)景，在需求分析階段，要對(duì)產(chǎn)品本身和行業(yè)本身有一些基本的認(rèn)知。

設(shè)計(jì)執(zhí)行&落地策略

B 端產(chǎn)品的邏輯較為復(fù)雜，在交互及體驗(yàn)上的要求也要更為謹(jǐn)慎。所以設(shè)計(jì)上需要更加克制和理性，B 端產(chǎn)品雖然視覺(jué)上交互上的整體要求沒(méi)有 C 端那么高，但是需要做到每一個(gè)功能點(diǎn)能夠清晰明確的展示，并且讓用戶(hù)知道每個(gè)功能按鈕或頁(yè)面的使用意圖。避免功能堆砌關(guān)系混亂。

在產(chǎn)品設(shè)計(jì)之初，需要全面考慮，把握產(chǎn)品設(shè)計(jì)的大方向與業(yè)務(wù)發(fā)展的一致，同步搭建頁(yè)面通用的設(shè)計(jì)框架，統(tǒng)一的視覺(jué)設(shè)計(jì)語(yǔ)言，通用的組件的規(guī)范，可快速?gòu)?fù)用提效設(shè)計(jì)，即可把更多的精力投入到梳理產(chǎn)品邏輯及交互方式和功能的視覺(jué)表現(xiàn)上。也要時(shí)刻與產(chǎn)研團(tuán)隊(duì)保持溝通，從技術(shù)和設(shè)計(jì)層面綜合考慮，哪種視覺(jué)呈現(xiàn)方式更合理，哪種方式更提效更穩(wěn)定，支持的場(chǎng)景更全面…確保當(dāng)前產(chǎn)品方案可行性。全面打造產(chǎn)品體驗(yàn)的一致性，實(shí)現(xiàn)有序、統(tǒng)一的操作體驗(yàn)，總之核心重點(diǎn)：界面清晰易懂，用戶(hù)的操作門(mén)檻低，能夠快速的使用產(chǎn)品，高效、專(zhuān)注完成任務(wù)。

復(fù)盤(pán)結(jié)果定期總結(jié)經(jīng)驗(yàn)

項(xiàng)目上線(xiàn)后，及時(shí)復(fù)盤(pán)總結(jié)也尤為重要，這也是我接下來(lái)要重點(diǎn)去做的事情，可以通過(guò)回顧和思考，來(lái)歸納分析自己做的成功與不足的地方，把那些對(duì)后續(xù)有幫助的、復(fù)用性高的經(jīng)驗(yàn)加以總結(jié)，沉淀自己的一套方法論。復(fù)盤(pán)是設(shè)計(jì)師自我提升的有效方式，也可以賦能團(tuán)隊(duì)為團(tuán)隊(duì)提效，提升自己的價(jià)值。

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

啰嗦說(shuō)了這么多，比較細(xì)碎，不乏邏輯凌亂的片段，但也算自己對(duì) B 端設(shè)計(jì)的一些想法吧～B 端產(chǎn)品承載的信息和邏輯比較復(fù)雜一些，所以需要對(duì)功能層級(jí)的劃分呈現(xiàn)多考慮一點(diǎn)，需要有清晰的邏輯，多站在企業(yè)用戶(hù)的角度去考慮，使任務(wù)能夠精準(zhǔn)化觸達(dá)，毫不拖泥帶水是設(shè)計(jì) B 端產(chǎn)品最重要的工作。

文章來(lái)源：優(yōu)設(shè)  作者：58UXD

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

收藏

收藏

轉(zhuǎn)自：站酷

作者：蒲公英在海上

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

那些關(guān)注用戶(hù)體驗(yàn)的人們經(jīng)常問(wèn)我一個(gè)問(wèn)題：什么是B端的用戶(hù)體驗(yàn)？它與C端的用戶(hù)體驗(yàn)有何不同？作為一名過(guò)去5年多主要從事B端IT產(chǎn)品的設(shè)計(jì)師，在這里給大家講述一些我的想法。

首先，B端產(chǎn)品通常有2種類(lèi)型：企業(yè)內(nèi)部產(chǎn)品（Internal Solutions）和企業(yè)對(duì)企業(yè)的服務(wù)產(chǎn)品（B2B）。

企業(yè)內(nèi)部產(chǎn)品的用戶(hù)體驗(yàn)設(shè)計(jì)有一些獨(dú)特性：

你的工作（可能）永遠(yuǎn)與你的作品集無(wú)緣

很遺憾，幾乎所有企業(yè)內(nèi)部產(chǎn)品或項(xiàng)目都被嚴(yán)格的保密協(xié)議（NDA）保護(hù)著。

絕大多B端項(xiàng)目都是為特定用戶(hù)提供的專(zhuān)門(mén)內(nèi)部流程。這意味著除了那些每天盯著它用的用戶(hù)，其他任何人都可能不會(huì)看到你的設(shè)計(jì)。即使你設(shè)法獲得了將其放入自己作品集的權(quán)限，也需要抹掉所有敏感的數(shù)據(jù)才行。

不過(guò)幸運(yùn)的是，大多數(shù)有足夠能力來(lái)構(gòu)建自己的定制IT解決方案的公司通常規(guī)模很大，而且它們的品牌可能帶有足夠的“影響力”，這樣，項(xiàng)目身價(jià)得以抬高，也能讓設(shè)計(jì)師進(jìn)入面試的下一步流程。

測(cè)試對(duì)象雖然意愿很高，但總是很忙

設(shè)計(jì)企業(yè)內(nèi)部所用產(chǎn)品的優(yōu)點(diǎn)：你的未來(lái)用戶(hù)將會(huì)是你的同事們。因此，在進(jìn)行可用性研究時(shí)，你無(wú)需擔(dān)憂(yōu)任何層面的法律問(wèn)題。另外，由于大多數(shù)內(nèi)部項(xiàng)目都是為了優(yōu)化和改進(jìn)現(xiàn)有的工作流程，你的用戶(hù)往往會(huì)非常愿意配合你的調(diào)研工作。因?yàn)樵O(shè)計(jì)不當(dāng)?shù)漠a(chǎn)品讓他們的工作飽受折磨，因此盡早獲得反饋對(duì)他們來(lái)說(shuō)是最有利的。

但這其中的弊端是，由于你的同事們需要平衡全職工作，你很可能無(wú)法占用他們的寶貴時(shí)間。如果你能解決這個(gè)問(wèn)題，他們通常會(huì)提供比您預(yù)期更多的反饋。

關(guān)于B2B的一些潛規(guī)則

您可能無(wú)法（完全）滿(mǎn)足最終用戶(hù)

對(duì)于C端產(chǎn)品，如果太丑或不好用，消費(fèi)者可以拒絕使用。而B(niǎo)端產(chǎn)品即使學(xué)習(xí)成本比較高，但企業(yè)仍然可以“命令”所有員工學(xué)習(xí)這些用于開(kāi)展業(yè)務(wù)的專(zhuān)用軟件。

B2B產(chǎn)品最終將出售給業(yè)務(wù)決策者，然后再推給（最終）用戶(hù)。他們更關(guān)心的是量化提升效率（efficiency）和安全性（security），同時(shí)預(yù)防錯(cuò)誤（preventing errors）。大多數(shù)組織都在尋找一種解決方案來(lái)替代和/或優(yōu)化現(xiàn)有流程。

這并不是說(shuō)企業(yè)軟件不應(yīng)以用戶(hù)友好為目標(biāo)，但通常情況下，只要能夠?qū)崿F(xiàn)某些被企業(yè)視為至關(guān)重要的目標(biāo)，其他能省則省。對(duì)底線(xiàn)（bottom line）的影響有時(shí)會(huì)成為最重要的因素。

全球各大企業(yè)的用戶(hù)體驗(yàn)設(shè)計(jì)領(lǐng)導(dǎo)者仍在爭(zhēng)奪一席之地，以證明優(yōu)質(zhì)設(shè)計(jì)的價(jià)值。不幸的是，許多企業(yè)的用戶(hù)體驗(yàn)設(shè)計(jì)師只能在滿(mǎn)足業(yè)務(wù)目標(biāo)、技術(shù)要求和用戶(hù)需求之間無(wú)奈徘徊。

像在大多數(shù)項(xiàng)目中一樣，在企業(yè)領(lǐng)域里，如果可以證明更好的用戶(hù)體驗(yàn)可以量化地提升生產(chǎn)率，比如可以節(jié)省金錢(qián)，這樣你就有了一個(gè)絕佳的機(jī)會(huì)和挑戰(zhàn)。

被“鯨魚(yú)用戶(hù)”左右

如果你在B2B領(lǐng)域工作，可能會(huì)很熟悉“鯨魚(yú)用戶(hù)（whales）”的概念。通常，他們是帶給我們最多收入的客戶(hù)，因此在某個(gè)特定產(chǎn)品的路線(xiàn)圖中擁有極大的影響力。由于較少的鯨魚(yú)用戶(hù)簡(jiǎn)化了需求收集和確認(rèn)過(guò)程，有時(shí)你的工作會(huì)非常順暢，但不幸的是，這也可能導(dǎo)致你忽視掉很大一部分用戶(hù)群體的意見(jiàn)。

我們見(jiàn)過(guò)諸多“被需要”的功能看起來(lái)并不適合大多數(shù)工作流程的案例（因?yàn)檫@是鯨魚(yú)用戶(hù)的特性）。通常，決策只是為了“去執(zhí)行”，因?yàn)殇N(xiāo)售團(tuán)隊(duì)已經(jīng)在下一個(gè)版本中承諾了這一點(diǎn)，而這個(gè)核心客戶(hù)占產(chǎn)品收入的40％。這通常會(huì)使得產(chǎn)品對(duì)于其他用戶(hù)而言就有些隨機(jī)且不合邏輯了。

通常而言，在設(shè)計(jì)師進(jìn)入管理層之前，他們很難影響到銷(xiāo)售團(tuán)隊(duì)等強(qiáng)大的利益相關(guān)者的決策。潛在的利益沖突無(wú)疑是需要整個(gè)設(shè)計(jì)團(tuán)隊(duì)共同去面對(duì)的，大家需要平衡產(chǎn)品的長(zhǎng)期愿景和立竿見(jiàn)影的“快速制勝”二者之間的沖突，以便為產(chǎn)品提供可拓展的設(shè)計(jì)和構(gòu)建道路。

企業(yè)總是在舊版系統(tǒng)上運(yùn)行

幾乎所有財(cái)富500強(qiáng)的公司都是通過(guò)并購(gòu)而成長(zhǎng)為龐然大物的。

每一次的并購(gòu)，都會(huì)將一個(gè)完全不同的系統(tǒng)和工作流程修補(bǔ)到現(xiàn)有的系統(tǒng)和工作流程中。很多開(kāi)發(fā)于90年代的軟件仍在諸多大型公司中運(yùn)行。盡管從概念上看，“整合一切（consolidate everything）”似乎很容易，但是協(xié)調(diào)數(shù)據(jù)庫(kù)和系統(tǒng)的過(guò)程著實(shí)很繁瑣，且需要足夠的時(shí)間。

B端用戶(hù)體驗(yàn)的大部分工作是將用戶(hù)從一套舊版（有時(shí)是手動(dòng)）的工作流程中解放出來(lái)的艱巨工作。這涉及到對(duì)用戶(hù)目標(biāo)及多個(gè)系統(tǒng)的深入了解，需要我們列出規(guī)劃，識(shí)別冗余和協(xié)同效應(yīng)，然后將其與邊緣案例相結(jié)合，以檢驗(yàn)它產(chǎn)出的結(jié)果是否與當(dāng)前操作模式的產(chǎn)出一致（如果不能優(yōu)化的話(huà)）。

盡管過(guò)程并非總是如此艱難，B端軟件依舊比C端復(fù)雜得多，因?yàn)榧词蛊涓拍钍恰皬?開(kāi)始做新系統(tǒng)”，其數(shù)據(jù)還是全部來(lái)自于一堆與之配套的舊系統(tǒng)。在系統(tǒng)級(jí)別上思考流程、提出正確的問(wèn)題并有效記錄文檔的能力是此類(lèi)項(xiàng)目中最有用的技能。

我不是開(kāi)發(fā)人員，所以我不知道我從Google里找的這張圖片是否是能夠準(zhǔn)確展示典型的后端體系結(jié)構(gòu)。

我所知道的是，對(duì)于每個(gè)項(xiàng)目來(lái)說(shuō)，開(kāi)發(fā)人員都會(huì)創(chuàng)建一個(gè)外觀相似的圖表，該圖表展示了數(shù)據(jù)的來(lái)源和去向，它非常復(fù)雜，并且在提取，存儲(chǔ)和推送數(shù)據(jù)時(shí)可能受到一系列限制。

條款和規(guī)則

大多數(shù)企業(yè)或組織需要遵循一套嚴(yán)格的政策法規(guī)，并且通常受到各種管理要求的約束。

常見(jiàn)的例子包括：法律/隱私要求（例如GDPR），國(guó)際化要求（例如日期格式，語(yǔ)言），無(wú)障礙（例如WCAG＆ARIA），安全性等等。

這些規(guī)則中的每一條都來(lái)自于某領(lǐng)域的專(zhuān)家、某類(lèi)別的檢查清單（checklist）抑或是一系列更為模糊情景下的最佳實(shí)踐（這些實(shí)踐基于特定的方案和用例）。C端APP監(jiān)管日漸常規(guī)化，同時(shí)，由于諸多企業(yè)或組織掌握的敏感數(shù)據(jù)極具貨幣價(jià)值，其受到的監(jiān)管和審查也在不斷增加。

當(dāng)然，這個(gè)問(wèn)題的答案顯而易見(jiàn)，你的確切問(wèn)題是存在第三方解決方案的，但是由于某些規(guī)則或規(guī)定，你可能根本無(wú)法使用它。

由于必須滿(mǎn)足很多這樣或那樣的標(biāo)準(zhǔn)，對(duì)于用戶(hù)來(lái)說(shuō)，最終的設(shè)計(jì)往往不太理想，雖然乍一看可能并不明顯，但這也是歷史上許多政府軟件的設(shè)計(jì)看起來(lái)很蠢的原因之一。

慢慢改進(jìn)

與上面的觀點(diǎn)類(lèi)似，B端產(chǎn)品用戶(hù)的獨(dú)特之處在于他們對(duì)變化的抗拒心理。這意味著你需要認(rèn)真思考工作流程改變后的結(jié)果，諸如使用不同的顏色，或是調(diào)整頁(yè)面內(nèi)某個(gè)按鈕的位置等簡(jiǎn)單變化。

我們甚至還沒(méi)有談及信息架構(gòu)。當(dāng)你開(kāi)始做信息架構(gòu)時(shí)，卡片分類(lèi)研究可能會(huì)告訴我們現(xiàn)有的導(dǎo)航設(shè)計(jì)是完全錯(cuò)誤的，或是導(dǎo)航里的某些分類(lèi)實(shí)際上應(yīng)該嵌套到其他地方。不過(guò)你很快就會(huì)發(fā)現(xiàn)，當(dāng)實(shí)際執(zhí)行這些變化時(shí)，你將面臨巨大壓力。

知道何時(shí)依賴(lài)自己的研究和專(zhuān)業(yè)知識(shí)，何時(shí)推進(jìn)，何時(shí)放慢步伐是很關(guān)鍵的，這樣你才可以避免疏遠(yuǎn)過(guò)多的用戶(hù)。畢竟對(duì)于這些用戶(hù)來(lái)說(shuō)，過(guò)去幾年的工作流程已經(jīng)根深蒂固，他們需要時(shí)間、資源和指導(dǎo)來(lái)學(xué)習(xí)或重新學(xué)習(xí)這些系統(tǒng)的使用。

盡管他們可能會(huì)拒絕改變，但這絕對(duì)不代表我們作為UX專(zhuān)業(yè)人士就無(wú)法引領(lǐng)他們擁抱變化，我們要做的便是了解他們的痛點(diǎn)并在設(shè)計(jì)時(shí)時(shí)刻考慮到用戶(hù)的最大利益。

信息密度

許多舊版的B端app產(chǎn)品都有一個(gè)共同點(diǎn)，那就是它們的信息密度非常高。

理想的解決方案也許是隱藏所有不必要的信息，僅顯示剛需的信息，但是“隱藏掉錯(cuò)誤內(nèi)容”的風(fēng)險(xiǎn)可能非常巨大，以致于不得不將其保留在不斷增加的的實(shí)體屏幕上。

這就容易導(dǎo)致打包的屏幕設(shè)計(jì)極大增加了用戶(hù)的認(rèn)知負(fù)擔(dān)。而這些負(fù)擔(dān)之所以被用戶(hù)“接受”，就是因?yàn)樗麄儽仨毲抑荒堋皩W(xué)習(xí)”如何使用該軟件來(lái)完成工作任務(wù)。

此外，對(duì)于許多管理或監(jiān)控類(lèi)的產(chǎn)品，用并別模式查看信息進(jìn)行比較和參考是非常重要的。復(fù)雜的非線(xiàn)性（Complex non-linear）的工作流使得界面設(shè)計(jì)更具挑戰(zhàn)性，因?yàn)樵S多選項(xiàng)都需要既可隨時(shí)訪問(wèn)又不能妨礙其他操作。

有個(gè)很好的例子：為什么Bloomberg（上圖）的UI看起來(lái)比Robinhood（下圖）復(fù)雜1000倍？

結(jié)論便是，B端產(chǎn)品的界面里，需要犧牲留白空間以展示更多信息的情況并不少見(jiàn)，因?yàn)橛脩?hù)經(jīng)常需要查看更多信息以便完成更復(fù)雜的任務(wù)。

你的機(jī)遇

隨著公司或組織越來(lái)越依賴(lài)技術(shù)，B端產(chǎn)品的用戶(hù)體驗(yàn)設(shè)計(jì)將成為許多公司的主要競(jìng)爭(zhēng)優(yōu)勢(shì)。

如果你具有擁抱復(fù)雜性、平衡多個(gè)利益相關(guān)方觀點(diǎn)，并在約束內(nèi)進(jìn)行創(chuàng)新的能力，你便能輕而易舉的殺入B端軟件設(shè)計(jì)領(lǐng)域。

隨著機(jī)器學(xué)習(xí)等諸多振奮人心的新技術(shù)出現(xiàn)，各種業(yè)務(wù)會(huì)帶著其龐大而雜亂的數(shù)據(jù)庫(kù)排隊(duì)等候。UX將站在如何產(chǎn)生有價(jià)值的見(jiàn)解的最前沿，以便弄清用戶(hù)想要從這些數(shù)據(jù)中獲取什么以及如何對(duì)其進(jìn)行操作和訪問(wèn)。

雖然在很長(zhǎng)一段時(shí)間里，dribbble（追波）上的精美視覺(jué)設(shè)計(jì)仍將占有一席之地，但更繁重的任務(wù)還會(huì)落在那些不起眼的B端設(shè)計(jì)師身上：比如設(shè)計(jì)電子表格、數(shù)據(jù)集、草圖原型、投入調(diào)查以及數(shù)小時(shí)與用戶(hù)和利益相關(guān)者的交談和測(cè)試。

最終出現(xiàn)在用戶(hù)面前的內(nèi)容可能并不完全整潔和簡(jiǎn)單，但請(qǐng)你相信，在成為備受矚目的明星B端產(chǎn)品前，其每一處基準(zhǔn)點(diǎn)都經(jīng)過(guò)了UX設(shè)計(jì)師的嚴(yán)格審查。我們的用戶(hù)已經(jīng)全力以赴地使用這些產(chǎn)品努力工作，我們的產(chǎn)品也通過(guò)清除一些障礙來(lái)減輕用戶(hù)的負(fù)擔(dān)，這已經(jīng)很不錯(cuò)了。

翻譯：April.H  審校：戴貓子 |   UXRen翻譯組 #366譯文
作者：Yichen He
原文標(biāo)題：《Designing for enterprise vs. designing for consumers》

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

在BAT、TMDJ等一線(xiàn)互聯(lián)網(wǎng)企業(yè)，決策平臺(tái)又稱(chēng)決策支持平臺(tái)、管理會(huì)計(jì)平臺(tái)。但實(shí)質(zhì)都是實(shí)現(xiàn)業(yè)財(cái)一體化后，提取業(yè)務(wù)、財(cái)務(wù)數(shù)據(jù)，自動(dòng)生成各種管理報(bào)表、財(cái)務(wù)報(bào)表，智能預(yù)警風(fēng)險(xiǎn)、預(yù)報(bào)業(yè)務(wù)前景，通過(guò)Dashboard或駕駛艙的形式展現(xiàn)給管理層、決策層，本文作者暫以管理會(huì)計(jì)平臺(tái)展開(kāi)討論。

一、定義與范圍

1. 何謂“管理會(huì)計(jì)”

管理會(huì)計(jì)，從定義來(lái)看有狹義與廣義之分。狹義的“管理會(huì)計(jì)”通常是指財(cái)務(wù)會(huì)計(jì)概念，包含“成本管理”和“管理控制系統(tǒng)”兩部分。

而廣義的“管理會(huì)計(jì)”則是指運(yùn)用一系列的分析手段，通過(guò)挖掘財(cái)務(wù)數(shù)據(jù)、業(yè)務(wù)報(bào)告等中潛在信息，對(duì)企業(yè)財(cái)務(wù)狀況、經(jīng)營(yíng)成果、現(xiàn)金流量和產(chǎn)品競(jìng)爭(zhēng)力進(jìn)行分析，輔助經(jīng)營(yíng)者進(jìn)行決策，指出業(yè)務(wù)、財(cái)務(wù)風(fēng)險(xiǎn)隱患，預(yù)測(cè)未來(lái)趨勢(shì)，賦能業(yè)務(wù)，以數(shù)據(jù)驅(qū)動(dòng)企業(yè)發(fā)展。本次討論的后者，即廣義的管理會(huì)計(jì)。

管理會(huì)計(jì)目標(biāo)的實(shí)現(xiàn)，不是簡(jiǎn)單的某一個(gè)系統(tǒng)或產(chǎn)品能承載的，需要設(shè)計(jì)一系列的產(chǎn)品矩陣，包括基礎(chǔ)的核算系統(tǒng)如ERP、成本結(jié)算系統(tǒng)、預(yù)算系統(tǒng)、報(bào)表系統(tǒng)，這個(gè)矩陣就是管理會(huì)計(jì)平臺(tái)（以下簡(jiǎn)稱(chēng)管會(huì)平臺(tái)）。

管會(huì)平臺(tái)的主體或用戶(hù)的不同使得所產(chǎn)出的管理報(bào)表（以下簡(jiǎn)稱(chēng)管報(bào)）指標(biāo)也有所不同。用戶(hù)一般分為外部和內(nèi)部2個(gè)大維度。

1）外部用戶(hù)

投資人偏向于分析企業(yè)的盈利能力和資本保值增值能力，如凈利潤(rùn)率、資本保值增值率等指標(biāo)；債權(quán)人則側(cè)重分析資產(chǎn)負(fù)債水平和償債能力，如資產(chǎn)負(fù)債率、利息保障倍數(shù)、權(quán)益乘數(shù)等指標(biāo)。

2）內(nèi)部用戶(hù)

應(yīng)收會(huì)計(jì)崗則側(cè)重應(yīng)收賬款的質(zhì)量、收入的趨勢(shì)，如應(yīng)收賬款周轉(zhuǎn)率、收入環(huán)比或同比、速動(dòng)比率等指標(biāo)；資產(chǎn)會(huì)計(jì)崗偏向于分析資產(chǎn)的利用率、所帶來(lái)的價(jià)值，如資產(chǎn)周轉(zhuǎn)率等指標(biāo)；而企業(yè)管理層或決策層會(huì)關(guān)注企業(yè)經(jīng)營(yíng)活動(dòng)和財(cái)務(wù)活動(dòng)的一切方面。

管會(huì)平臺(tái)在設(shè)計(jì)時(shí)應(yīng)考慮滿(mǎn)足這些不同用戶(hù)的需求，并通過(guò)權(quán)限、角色實(shí)現(xiàn)千人千面的效果，不同用戶(hù)展示不同指標(biāo)集和報(bào)表。

2. 意義

管理會(huì)計(jì)不僅屬財(cái)務(wù)一個(gè)分支，更是財(cái)務(wù)在企業(yè)管理中應(yīng)用的升華，財(cái)務(wù)的4個(gè)功能層次形象筑起管理會(huì)計(jì)的堅(jiān)實(shí)基礎(chǔ)：

• 【看得見(jiàn)】：是指基礎(chǔ)核算功能，經(jīng)濟(jì)業(yè)務(wù)活動(dòng)應(yīng)及時(shí)反映在財(cái)務(wù)數(shù)據(jù)中；
• 【說(shuō)得清】：強(qiáng)調(diào)數(shù)據(jù)的可靠性，財(cái)務(wù)是業(yè)務(wù)的反映，業(yè)務(wù)與財(cái)務(wù)是一個(gè)閉循環(huán)，不是憑空而來(lái)。結(jié)合業(yè)務(wù)，分析業(yè)務(wù)問(wèn)題所在；
• 【管得住】：則是預(yù)算系統(tǒng)在財(cái)務(wù)流程中的具現(xiàn)，并實(shí)現(xiàn)費(fèi)用控制；
• 【指得準(zhǔn)】：是指趨勢(shì)預(yù)測(cè)，通過(guò)管理會(huì)計(jì)平臺(tái)指明業(yè)務(wù)發(fā)展方向，實(shí)現(xiàn)賦能業(yè)務(wù)、數(shù)據(jù)驅(qū)動(dòng)的最高境界。

做好管理會(huì)計(jì)，核算是基礎(chǔ)，分析是關(guān)鍵，管控是抓手，賦能是核心。

分析不僅僅是傳統(tǒng)的報(bào)表分析，而是基于大數(shù)據(jù)、機(jī)器學(xué)習(xí)、AI等高科技手段，自動(dòng)化、準(zhǔn)確、智能的實(shí)現(xiàn)風(fēng)險(xiǎn)預(yù)警、趨勢(shì)預(yù)測(cè)，引領(lǐng)、驅(qū)動(dòng)企業(yè)發(fā)展。

舉個(gè)栗子：每月關(guān)賬后財(cái)務(wù)都要做財(cái)務(wù)分析，收集各種業(yè)務(wù)、財(cái)務(wù)數(shù)據(jù)，結(jié)合相關(guān)指標(biāo)，以發(fā)現(xiàn)業(yè)務(wù)中的問(wèn)題。如做杜邦分析法，分析凈資產(chǎn)收益率。

繼而計(jì)算總資產(chǎn)凈利率，權(quán)益乘數(shù)，銷(xiāo)售凈利率、總資產(chǎn)周轉(zhuǎn)率……通過(guò)實(shí)際與預(yù)測(cè)的橫向?qū)Ρ取⒒谂c歷史的縱向?qū)Ρ?，找出各種指標(biāo)異動(dòng)原因，實(shí)質(zhì)是分析企業(yè)的贏利能力、營(yíng)運(yùn)能力、償債能力。

但這些通用的指標(biāo)需結(jié)合企業(yè)實(shí)際情況、歷史數(shù)據(jù)，并體系化形成產(chǎn)品，才能分析出癥結(jié)點(diǎn)所在，這也是管理會(huì)計(jì)平臺(tái)建設(shè)的意義與努力的方向。

二、產(chǎn)品架構(gòu)

如何搭建管理會(huì)計(jì)平臺(tái)（以下簡(jiǎn)稱(chēng)管會(huì)平臺(tái)）呢？互聯(lián)網(wǎng)管理會(huì)計(jì)平臺(tái)，其實(shí)并不是一個(gè)單一的平臺(tái)，而是由眾多關(guān)聯(lián)子系統(tǒng)構(gòu)成，通過(guò)多個(gè)子系統(tǒng)間協(xié)同合作完成管理會(huì)計(jì)目標(biāo)的系統(tǒng)集。

從前端用戶(hù)的視角來(lái)看，獲取管理報(bào)表是一個(gè)很簡(jiǎn)單的動(dòng)作：查詢(xún)相關(guān)主體公司管理報(bào)表或分析結(jié)果即可，但從系統(tǒng)角度來(lái)說(shuō)，管理會(huì)計(jì)的建設(shè)過(guò)程實(shí)際涉及了眾多財(cái)務(wù)子系統(tǒng)的協(xié)同、及復(fù)雜的系統(tǒng)邏輯。

一個(gè)典型的財(cái)務(wù)產(chǎn)品架構(gòu)如下圖，涉及多個(gè)子系統(tǒng)。典型管理會(huì)計(jì)產(chǎn)品分為生產(chǎn)端與消費(fèi)端，架構(gòu)圖如下：

在簡(jiǎn)要介紹各子系統(tǒng)功能前，可以先看以下簡(jiǎn)化版的管會(huì)平臺(tái)產(chǎn)品架構(gòu)圖，典型的管會(huì)平臺(tái)產(chǎn)品架構(gòu)可以劃分為四層結(jié)構(gòu)：支撐層、數(shù)據(jù)層、核心層、應(yīng)用層：

1. 支撐層

用來(lái)支持管會(huì)平臺(tái)的基礎(chǔ)服務(wù)和基礎(chǔ)設(shè)施，包括容器云、安全服務(wù)、存儲(chǔ)服務(wù)、消息引擎、任務(wù)高度、短信服務(wù)、證書(shū)服務(wù)等。

2. 數(shù)據(jù)層

匯集業(yè)務(wù)、財(cái)務(wù)數(shù)據(jù)，以大數(shù)據(jù)或數(shù)據(jù)湖的形式承載基礎(chǔ)數(shù)據(jù)，包括ETL、BI、大數(shù)據(jù)等。

3. 核心層

管會(huì)平臺(tái)的核心模塊，分為清結(jié)算、財(cái)務(wù)中臺(tái)、ERP、預(yù)算、管報(bào)中心五大塊；

1）清結(jié)算

主要由計(jì)價(jià)、清分、結(jié)算、對(duì)賬組成，是業(yè)務(wù)活動(dòng)在財(cái)務(wù)的2個(gè)反映之一，解決互聯(lián)網(wǎng)業(yè)態(tài)中的成本費(fèi)用結(jié)算，與傳統(tǒng)企業(yè)的成本計(jì)量方法不同的是，一般是按個(gè)別計(jì)價(jià)法對(duì)不同時(shí)間段可以階段性、階梯性等復(fù)雜業(yè)態(tài)成本計(jì)量。

2）財(cái)務(wù)中臺(tái)

主要針對(duì)業(yè)務(wù)中非審批類(lèi)的收入、資產(chǎn)折舊、攤銷(xiāo)，自動(dòng)對(duì)賬、生成分錄，并傳遞至ERP，主要包括：入賬規(guī)則、數(shù)據(jù)校驗(yàn)、分錄生成、主數(shù)據(jù)等。

3）預(yù)算模塊

預(yù)算功能，包含預(yù)算編制、執(zhí)行等，結(jié)合BPM審批流，實(shí)現(xiàn)費(fèi)用控制。

4）ERP

財(cái)務(wù)核心入賬平臺(tái)，包括總賬、應(yīng)收、應(yīng)付、資產(chǎn)、財(cái)報(bào)等。

5）管報(bào)中心

管會(huì)平臺(tái)核心輸出層，包括生產(chǎn)端和消費(fèi)端2部分，生產(chǎn)端分為指標(biāo)集、規(guī)則引擎、模板、預(yù)處理、智能診斷等模塊。消費(fèi)端主要是管報(bào)產(chǎn)出結(jié)果的展示即駕駛艙、手工確認(rèn)或修正。

管報(bào)中心是核心中的核心，后面第三章會(huì)詳細(xì)展開(kāi)。

4. 應(yīng)用層

通過(guò)支撐層、數(shù)據(jù)層、核心層提供的服務(wù)組合起來(lái)，對(duì)最終用戶(hù)、運(yùn)營(yíng)管理人員提供的系統(tǒng)。在產(chǎn)品架構(gòu)層面體現(xiàn)為前端展示層、業(yè)務(wù)域和過(guò)程域。前端展示層主要是結(jié)果展示的形式，如PC端的web頁(yè)面、移動(dòng)端的APP或H5、小程序等。

業(yè)務(wù)域是上游的各業(yè)務(wù)系統(tǒng)，而過(guò)程域是管會(huì)平臺(tái)所依賴(lài)的流程工具、特征數(shù)據(jù)，如供應(yīng)商、ORG、BPM等。

三、管報(bào)中心

管報(bào)中心由生產(chǎn)端和消費(fèi)端組成：

• 生產(chǎn)端：諸如“成本費(fèi)用率”、“速動(dòng)比率”等指標(biāo)集實(shí)現(xiàn)可視化、配置式的增加、禁用，再關(guān)聯(lián)規(guī)則引擎的會(huì)計(jì)科目、計(jì)算規(guī)則，提供給預(yù)處理模塊消費(fèi)，并通過(guò)智能診斷產(chǎn)出相關(guān)指標(biāo)的因果解析或預(yù)警信息；
• 消費(fèi)端：以駕駛艙的形式將相關(guān)結(jié)果展示給用戶(hù)。如對(duì)結(jié)果疑義時(shí)，還可手工修正。

1. 生產(chǎn)端

生產(chǎn)端流程圖如下：

【指標(biāo)集】：配置各種指標(biāo)，如“速動(dòng)比率”、“產(chǎn)品成本費(fèi)用率”等。一旦配置不得刪除，只可修改或禁用。上游是科目與計(jì)算規(guī)則，但校驗(yàn)關(guān)系不在此模塊。

【模板】：指標(biāo)、預(yù)警或診斷信息的集合，可導(dǎo)入或手工增加。在預(yù)處理和結(jié)果展示時(shí)，將會(huì)調(diào)用此模板。

【規(guī)則引擎】：由“科目規(guī)則”、“計(jì)算規(guī)則”、“指標(biāo)規(guī)則”、“預(yù)警規(guī)則”四部分組成。

• 科目規(guī)則，依賴(lài)主數(shù)據(jù)的會(huì)計(jì)科目，在此設(shè)置科目間依賴(lài)關(guān)系、重分類(lèi)關(guān)系、借貸方向。如應(yīng)收賬款與，余額應(yīng)在借方；如果出現(xiàn)貸方，則可能是預(yù)付賬款，重分類(lèi)時(shí)應(yīng)放在預(yù)付賬款。如流動(dòng)資產(chǎn)由貨幣資金、銀行存款、短期投資、應(yīng)收票據(jù)、應(yīng)收賬款和存貨構(gòu)成。
• 計(jì)算規(guī)則，簡(jiǎn)單的如加減乘除、取模、求余等，復(fù)雜的如貝葉斯推理。后臺(tái)預(yù)設(shè)，前端界面可自定義設(shè)置各種指標(biāo)的計(jì)算規(guī)則。
• 指標(biāo)規(guī)則，指標(biāo)與指標(biāo)之間的邏輯關(guān)系，如“總資產(chǎn)凈利率 = 銷(xiāo)售凈利率 * 總資產(chǎn)周轉(zhuǎn)率”、“ 銷(xiāo)售凈利率 = 凈利潤(rùn)/主營(yíng)業(yè)務(wù)收入凈額”等等。
• 預(yù)警規(guī)則，包括觸發(fā)開(kāi)關(guān)、預(yù)警信息模板，預(yù)警條件、主因判定等。如下圖杜邦分析法對(duì)A公司進(jìn)行分析預(yù)警：

在每一層指標(biāo)中，有實(shí)際值、預(yù)測(cè)值，二者之間的偏離度，就是預(yù)警條件；“好”、“差”就是簡(jiǎn)單的信息模板，可把具體原因也納入進(jìn)來(lái)。

主因判定實(shí)質(zhì)是一個(gè)由上到下的遞歸過(guò)程，如此例中，A公司獲利能力（即資本報(bào)酬率）相對(duì)較差(3.08%<7.41%)，這是第1層判斷。

再往第2層，經(jīng)過(guò)分析可知這不是因?yàn)榭傎Y產(chǎn)凈利潤(rùn)差(2.55%>2.37%)，而是財(cái)務(wù)融資能力差(1.21<3.21)。如此類(lèi)推，直至分析至底層科目級(jí)指標(biāo)。

【預(yù)處理】分為“重分類(lèi)”、“平衡試算”、“定時(shí)任務(wù)”、“結(jié)果存儲(chǔ)”四部分，是報(bào)表產(chǎn)出的運(yùn)算過(guò)程。其中“平衡試算”屬前置數(shù)據(jù)校驗(yàn)，檢查數(shù)據(jù)是否達(dá)到報(bào)表可用程度。“定時(shí)任務(wù)”與“結(jié)果存儲(chǔ)”屬技術(shù)性過(guò)程，“重分類(lèi)”根據(jù)會(huì)計(jì)要求設(shè)置，具體由財(cái)務(wù)確定。

【智能診斷】是對(duì)具體的報(bào)表進(jìn)行分析，由“診斷開(kāi)始（數(shù)據(jù)準(zhǔn)備）”、“規(guī)則判斷”、“預(yù)警判斷”、“結(jié)果確認(rèn)”四部分。其中結(jié)果確認(rèn)包含結(jié)果展示、消息分發(fā)、手工修正等?！耙?guī)則判斷”與“預(yù)警判斷”是對(duì)【規(guī)則引擎】中的“指標(biāo)規(guī)則”、“預(yù)警規(guī)則”的具象應(yīng)用，實(shí)際應(yīng)用中可引入AI、TensorFlow(機(jī)器學(xué)習(xí))等技術(shù)手段提升診斷的準(zhǔn)確度。

2. 消費(fèi)端

在生產(chǎn)端準(zhǔn)確、及時(shí)生產(chǎn)出數(shù)據(jù)后，消費(fèi)端就不愁無(wú)米下鍋了。一般通過(guò)Dashboard或駕駛艙展示，這一塊通常需要BI或數(shù)倉(cāng)部門(mén)的協(xié)助，效果圖如下：

四、總結(jié)

綜合以上，管會(huì)平臺(tái)的每個(gè)子系統(tǒng)并非孤立的，通過(guò)產(chǎn)品架構(gòu)相互關(guān)聯(lián)。產(chǎn)品架構(gòu)與技術(shù)架構(gòu)相輔相成，產(chǎn)品架構(gòu)決定需求和設(shè)計(jì)，技術(shù)架構(gòu)決定技術(shù)框架和性能。包括AI在智能診斷上的應(yīng)用、數(shù)據(jù)域的實(shí)現(xiàn)等。

好的產(chǎn)品架構(gòu)將這些不同用途的功能進(jìn)行聚類(lèi)整合，因此，【才聽(tīng)途說(shuō)】建議將管會(huì)平臺(tái)拆分成多個(gè)子系統(tǒng)，明確業(yè)務(wù)邊界，減少系統(tǒng)間的耦合，提供優(yōu)質(zhì)、的管理決策支持服務(wù)。

并根據(jù)前端業(yè)務(wù)場(chǎng)景的需求隨時(shí)進(jìn)行調(diào)整變化以適應(yīng)業(yè)務(wù)的發(fā)展，如規(guī)則引擎部分基本可由前端配置即可，減少后端開(kāi)發(fā)與產(chǎn)品上線(xiàn)時(shí)間。

不同互聯(lián)網(wǎng)公司，業(yè)務(wù)體量甚至有成千上萬(wàn)倍的差距，如京東集團(tuán)內(nèi)不同BU的體量及發(fā)展速度造就其系統(tǒng)復(fù)雜度也差異巨大，高度復(fù)雜的管會(huì)平臺(tái)甚至需要數(shù)百人的技術(shù)團(tuán)隊(duì)來(lái)設(shè)計(jì)、開(kāi)發(fā)、維護(hù)。

不過(guò)，對(duì)于體量較小的互聯(lián)網(wǎng)公司來(lái)說(shuō)，幾人的團(tuán)隊(duì)即可搭建一套系統(tǒng)并維護(hù)日常運(yùn)營(yíng)。

互聯(lián)網(wǎng)企業(yè)作為金融科技業(yè)界引領(lǐng)者，建議在系統(tǒng)開(kāi)發(fā)前期（從0到1），以MVP形式，小步快跑，快速迭代，盡快上線(xiàn)、降低開(kāi)發(fā)成本，優(yōu)先開(kāi)發(fā)主要需求、及較重要的子系統(tǒng)，或并行實(shí)施幾個(gè)子系統(tǒng)，如ERP的實(shí)施、清結(jié)算的開(kāi)發(fā)、管報(bào)中心的開(kāi)發(fā)可以并行。再做次優(yōu)級(jí)子系統(tǒng)，逐步迭代。

隨著訂單量的提升及業(yè)務(wù)復(fù)雜度的增加，不同BU甚至不同BGBU的接入，管會(huì)平臺(tái)復(fù)雜度將指數(shù)及上升，系統(tǒng)處理起來(lái)會(huì)越來(lái)越吃力，若無(wú)良好的規(guī)劃，各子系統(tǒng)耦合度越來(lái)越高，雜糅在一起，系統(tǒng)靈活性越來(lái)越差，無(wú)法跟上業(yè)務(wù)的發(fā)展。

因此，管會(huì)平臺(tái)的中長(zhǎng)期發(fā)展（從1到100、到∞），極其考驗(yàn)我們的業(yè)務(wù)梳理能力，及對(duì)業(yè)務(wù)進(jìn)行拆分、產(chǎn)品架構(gòu)的能力。

特別是目前行業(yè)內(nèi)還沒(méi)有體系化的管會(huì)平臺(tái)建設(shè)經(jīng)驗(yàn)可參考時(shí)，更考驗(yàn)我們的綜合能力，包括財(cái)務(wù)專(zhuān)業(yè)知識(shí)、業(yè)務(wù)理解力、產(chǎn)品規(guī)劃能力。

但萬(wàn)事不要怕，只要抓住產(chǎn)品設(shè)計(jì)精髓，即設(shè)計(jì)的產(chǎn)品應(yīng)滿(mǎn)足邏輯完整、業(yè)務(wù)功能明確、可擴(kuò)展（發(fā)展方向明確但業(yè)務(wù)邊界清晰）、靈活（非耦合）等特點(diǎn)，一切將會(huì)迎刃而解。

收藏

收藏

收藏

收藏

收藏

收藏

收藏

收藏

收藏

收藏

轉(zhuǎn)自：站酷

作者：戲歡你

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

隨著大數(shù)據(jù)的興起，數(shù)據(jù)價(jià)值的不斷挖掘，圖表作為數(shù)據(jù)呈現(xiàn)與分析的有效手段，正扮演著越來(lái)越重要的角色。我們?cè)谶M(jìn)行 B 端平臺(tái)設(shè)計(jì)時(shí)也在思考：如何讓圖表清晰的傳達(dá)信息，同時(shí)帶來(lái)美觀的視覺(jué)感受。

為了達(dá)到清晰傳達(dá)和視覺(jué)美觀的目標(biāo)，我們結(jié)合實(shí)際項(xiàng)目，進(jìn)行大量探索及思考，梳理總結(jié)了一套適用于 B 端后臺(tái)類(lèi)產(chǎn)品的圖表設(shè)計(jì)思路及方法，涵蓋了曲線(xiàn)圖、柱狀圖、餅圖、雷達(dá)圖、漏斗圖等各類(lèi)常用圖表類(lèi)型。

圖表視覺(jué)層級(jí)

圖表能夠承載大量數(shù)據(jù)信息，同時(shí)視覺(jué)元素較多，如果只是憑借設(shè)計(jì)師的審美喜好進(jìn)行視覺(jué)設(shè)計(jì)，沒(méi)有整體信息讀取考量，可能會(huì)導(dǎo)致重要信息未能凸顯，降低用戶(hù)讀取效率。

為清晰傳達(dá)信息，進(jìn)一步提升讀取效率，我們采用元素重要程度與視覺(jué)強(qiáng)度相綁定的方法。依據(jù)元素重要程度，將圖表元素分為三類(lèi)，分別為“底層元素”、“中層元素”和“頂層元素”，并依據(jù)不同視覺(jué)強(qiáng)度分別設(shè)計(jì)三類(lèi)元素。底層元素最弱，頂層元素最強(qiáng)。通過(guò)這種方法，梳理圖表元素的前后關(guān)系，能夠清晰把握元素視覺(jué)層次，保證信息傳遞效率。

1. 底層元素設(shè)計(jì)

在各類(lèi)圖表中，我們把輔助說(shuō)明數(shù)據(jù)的軸線(xiàn)、刻度等定義為底層元素。為了減少視覺(jué)干擾，突出主圖形，底層元素全部使用淺灰色進(jìn)行設(shè)計(jì)。我們發(fā)現(xiàn)，當(dāng)元素與背景顏色的明度對(duì)比在 1.2:1 時(shí)，人眼較難看到元素；當(dāng)對(duì)比度在 2.0:1 時(shí)，視覺(jué)強(qiáng)度過(guò)強(qiáng)，易吸引用戶(hù)注意力。通過(guò)元素視覺(jué)強(qiáng)度的調(diào)研及視覺(jué)嘗試，最終確定元素與背景對(duì)比度在 1.6:1 左右，視覺(jué)強(qiáng)度偏弱但人眼能夠看清的程度。以保證元素視覺(jué)不突兀，只在需要查看時(shí)可以被發(fā)現(xiàn)。

2. 中層元素設(shè)計(jì)

中層元素的內(nèi)容包括數(shù)據(jù)圖形、數(shù)據(jù)線(xiàn)段等承載主要數(shù)據(jù)信息的元素，是圖表中表達(dá)數(shù)據(jù)的關(guān)鍵元素。與底層元素相比，中層元素采用更低明度與更高飽和度的數(shù)據(jù)色來(lái)表現(xiàn)，使元素從頁(yè)面中凸顯出來(lái)，保證可讀性。同時(shí)在樣式上適當(dāng)加入漸變、描邊等樣式，豐富視覺(jué)層次，帶來(lái)美觀的視覺(jué)感受。

3. 頂層元素設(shè)計(jì)

我們把頂層元素定義為圖表高亮信息，內(nèi)容包括懸停樣式、懸停后的詳細(xì)數(shù)據(jù)說(shuō)明等。在設(shè)計(jì)上為保證視覺(jué)樣式突出，使用深灰色、強(qiáng)調(diào)色等強(qiáng)對(duì)比度樣式，并輔以動(dòng)畫(huà)、投影等手法保證明顯的視覺(jué)強(qiáng)調(diào)效果，保證頂層信息最有效的傳達(dá)給用戶(hù)。

4. 最終效果

通過(guò)層級(jí)梳理，并綁定元素重要程度和視覺(jué)強(qiáng)度的方法，設(shè)計(jì)后圖表主次信息均按重要程度進(jìn)行對(duì)應(yīng)視覺(jué)強(qiáng)度的展示，讓用戶(hù)能夠在第一時(shí)間接收到最重要的信息，提升信息讀取效率。

圖表排版設(shè)計(jì)

圖表排版是指各元素在圖表中的尺寸及布局等，對(duì)于 B 端后臺(tái)類(lèi)產(chǎn)品來(lái)說(shuō)，不同排版對(duì)用戶(hù)使用體驗(yàn)造成較大影響。如何建立一套合理的規(guī)范保證用戶(hù)的使用體驗(yàn)？我們經(jīng)過(guò)大量討論推敲，梳理出一套針對(duì) B 端后臺(tái)類(lèi)產(chǎn)品的排版規(guī)則，力求保證用戶(hù)圖表的使用體驗(yàn)。

1. 圖表尺寸

圖表尺寸指圖表整體長(zhǎng)寬高。在項(xiàng)目中我們發(fā)現(xiàn)不同尺寸的圖表對(duì)數(shù)據(jù)展現(xiàn)效果影響巨大，例如巨量數(shù)據(jù)的圖表擠在名片大小的區(qū)域例顯示，這使得信息讀取的效率大打折扣。為此我們收集并提取出“全貌概覽”、“多角度環(huán)視”、“詳情分析”三類(lèi)典型場(chǎng)景，并制定了“迷你圖”、“中號(hào)圖表”、“大號(hào)圖表”三類(lèi)尺寸，針對(duì)不同尺寸優(yōu)化圖表的信息展示密度，以達(dá)到讀取信息的目的。

“迷你圖”尺寸最小，舍棄了 Y 軸等不必要信息，利用小面積展示最關(guān)鍵的圖表信息，并控制數(shù)據(jù)密度，保證信息讀取。

“中號(hào)圖表”尺寸受限，限制坐標(biāo)軸刻度數(shù)量和數(shù)據(jù)的密度，例如曲線(xiàn)圖數(shù)據(jù)點(diǎn)不高于每 4 像素 1 個(gè)數(shù)據(jù)點(diǎn)，Y 軸坐標(biāo)刻度不超過(guò) 5 個(gè)，以確保信息密度不過(guò)載，這類(lèi)圖表尺寸通常用在針對(duì)某大類(lèi)內(nèi)容進(jìn)行多方面檢視時(shí)。

“大號(hào)圖表”尺寸最大，不限制數(shù)據(jù)信息密度，給予最全最詳細(xì)的展示，這類(lèi)尺寸通常用在數(shù)據(jù)詳情頁(yè)等詳細(xì)分析場(chǎng)景中。

最后考慮到多圖表混合排列時(shí)，餅圖、地圖等大面積填色圖表，相較折線(xiàn)圖等描邊型圖表，視覺(jué)感受更加膨脹。我們縮小了填色類(lèi)圖表的實(shí)際高度，保證多種圖表混合排列時(shí)，視覺(jué)感受的均衡。

2. 坐標(biāo)軸

坐標(biāo)軸在圖表中出現(xiàn)的頻率較高，那么坐標(biāo)軸常見(jiàn)的設(shè)計(jì)問(wèn)題有哪些呢？

第一是橫縱坐標(biāo)軸的刻度出現(xiàn)過(guò)密情況。

如果坐標(biāo)軸所承載的是連續(xù)數(shù)據(jù)（連續(xù)數(shù)據(jù)指可量化的，連續(xù)不斷的，在區(qū)間內(nèi)可任意取值的數(shù)據(jù)，如時(shí)間、金額、人數(shù)等），設(shè)計(jì)師可自行增減刻度數(shù)量以保證視覺(jué)舒適度。如果承載是離散數(shù)據(jù)（離散數(shù)據(jù)指不可量化的，無(wú)關(guān)聯(lián)的，不可在區(qū)間內(nèi)任意取值的數(shù)據(jù)，如分類(lèi)、軟件版本、省份等），可采取增加坐標(biāo)軸縮放功能解決。

第二個(gè)常見(jiàn)問(wèn)題是刻度的說(shuō)明文字過(guò)長(zhǎng)。

如果是 X 軸（橫軸）文字過(guò)長(zhǎng)，除了在可控范圍內(nèi)減少刻度，還可采取文字傾斜 45°~90°的辦法(如文字全部為中文，可用豎排代替傾斜 90°)，緩解信息過(guò)密看不清的情況。

如果是 Y 軸（縱軸）文字過(guò)長(zhǎng)，需聯(lián)合研發(fā)一起調(diào)整數(shù)據(jù)的單位，比如把“元”調(diào)整為“百萬(wàn)元”。

如果不能調(diào)整，那就要根據(jù)所使用的圖表庫(kù)有針對(duì)性調(diào)整。例如常用的 Echarts 圖表、D3 圖表等開(kāi)源圖表庫(kù)，需要提前預(yù)估刻度文字長(zhǎng)度并預(yù)留出來(lái)，否則刻度文字可能會(huì)被頁(yè)面裁掉而不能完全顯示。如你是用的是 AntV 等可自適應(yīng)的圖表庫(kù)，則不必提前處理，圖表庫(kù)會(huì)自動(dòng)按刻度長(zhǎng)度進(jìn)行整體調(diào)整。

3. 圖例

圖例作為圖表中不可或缺的部分，在各類(lèi)圖表庫(kù)中位置不盡相同，由于不同圖表樣式差異很大，圖例的位置需整體考慮并適當(dāng)布局?jǐn)[放，但在同一產(chǎn)品或頁(yè)面內(nèi)，過(guò)于隨意的擺放圖例，會(huì)導(dǎo)致頁(yè)面統(tǒng)一性較差，同時(shí)增加用戶(hù)的瀏覽成本。我們團(tuán)隊(duì)所負(fù)責(zé)的 B 端商業(yè)產(chǎn)品矩陣，作為面向用戶(hù)的產(chǎn)品集合，產(chǎn)品間聯(lián)系非常緊密。過(guò)于靈活隨意的圖例擺放不利于用戶(hù)對(duì)于圖表的瀏覽。為解決此問(wèn)題，我們基于業(yè)務(wù)特點(diǎn)，針對(duì) B 端商業(yè)產(chǎn)品矩陣制定了圖例布局指導(dǎo)原則。

我們以提升屏幕信息密度為目標(biāo)，分析不同場(chǎng)景的頁(yè)面排布，制定了頂部和右側(cè)兩種較為寬松的指導(dǎo)原則，供設(shè)計(jì)師在沒(méi)有明確的更優(yōu)方案時(shí)選用。

當(dāng)圖表是左右兩端對(duì)齊的類(lèi)型，例如折線(xiàn)圖、柱狀圖時(shí)，建議將圖例放置在圖表頂部。這樣能結(jié)合標(biāo)題等其他元素進(jìn)行統(tǒng)一排布，減少占用空間。當(dāng)圖表本身左右都有空余空間時(shí)，例如餅圖，建議將圖例放置于圖表的右側(cè)。也能夠節(jié)省頁(yè)面的空間。

數(shù)據(jù)色板設(shè)計(jì)

色板作為常見(jiàn)的數(shù)據(jù)表達(dá)手段，能夠利用不同顏色明確體現(xiàn)分類(lèi)信息、數(shù)值高度、狀態(tài)信息等。但目前市面上鮮有專(zhuān)業(yè)用途圖表的配色工具。我們經(jīng)過(guò)大量探索嘗試，梳理總結(jié)出圖表色彩的兩個(gè)關(guān)鍵維度：辨識(shí)度與統(tǒng)一性。既需要顏色間突出強(qiáng)烈可清晰辨別，又需要顏色整體能形成統(tǒng)一風(fēng)格，以達(dá)到清晰傳遞和美觀的目標(biāo)。如何平衡辨識(shí)度與統(tǒng)一性，是我們遇到的難題。

1. 辨識(shí)度

辨識(shí)度在圖表中有兩方面：顏色與頁(yè)面底色的辨識(shí)度，各顏色之間的辨識(shí)度。對(duì)于第一種，我們采用控制顏色的明亮程度來(lái)確保色彩辨識(shí)度，尤其對(duì)于黃色、青色等本身較亮的顏色，降低顏色的明度，確保在淺色背景下顏色可辨識(shí)。

對(duì)于第二種也就是各顏色之間的辨識(shí)度，通過(guò)實(shí)驗(yàn)發(fā)現(xiàn)單純的顏色色相變化，例如紅色與橙色的區(qū)分，人眼不容易分辨。所以采用了色相變化+明度變化的方法，即深紅色與亮橙色，深藍(lán)色與亮紫色等，這樣用戶(hù)能在第一眼就明確分辨，保證顏色間的辨識(shí)度。最終把顏色映射到色彩空間的三維坐標(biāo)中，運(yùn)用歐幾里得距離公式測(cè)算顏色間的距離長(zhǎng)短，來(lái)衡量各顏色間色差數(shù)值。顏色間距離越遠(yuǎn)代表色差越大，利用數(shù)據(jù)輔助衡量辨識(shí)效果。

2. 統(tǒng)一性

色彩統(tǒng)一性的作用在于確保圖表整體風(fēng)格一致，色彩搭配舒適，從而帶來(lái)美觀、統(tǒng)一的視覺(jué)感受。為達(dá)目的，我們首先提煉商業(yè)產(chǎn)品設(shè)計(jì)風(fēng)格為明亮、強(qiáng)對(duì)比，其次把設(shè)計(jì)風(fēng)格轉(zhuǎn)化為色彩數(shù)值。經(jīng)過(guò)實(shí)驗(yàn)，把顏色明度限制在 50%-70%，把飽和度限制在 75%-85%，并在區(qū)間內(nèi)不斷波動(dòng)。這樣既保證了色彩視覺(jué)感受的統(tǒng)一，各顏色間又能夠有清晰的辨識(shí)度。

3. 顏色量化與工具

量化顏色，將色彩轉(zhuǎn)化為數(shù)值，利用數(shù)值來(lái)驗(yàn)證設(shè)計(jì)師的「感覺(jué)」，能夠保證方案合理性，保證設(shè)計(jì)質(zhì)量。但通過(guò)嘗試，我們常用的色彩模式均不能科學(xué)合理的量化顏色。通過(guò)查閱大量資料，我們最終決定以小眾的 HCL 色彩模式來(lái)衡量色彩。其中 H 表示色相、C 表示飽和度、L 表示明度。HCL 區(qū)別于傳統(tǒng)的 RGB 或 HSB 模式，它能夠?qū)⑷搜蹖?duì)顏色的感知的量化為數(shù)值，例如黃色相比藍(lán)色明度更高，都能如實(shí)的反饋到數(shù)值上。也由于此特性，HCL 模式在誕生距今不到 20 年間，已被一些先鋒設(shè)計(jì)師用于數(shù)據(jù)可視化的呈現(xiàn)中。

但是 HCL 作為小眾色彩模式，目前設(shè)計(jì)軟件鮮有支持，造成了 HCL 色彩不直觀、不方便調(diào)色等的問(wèn)題。為解決此問(wèn)題，我們已初步完成智能配色程序，只需輸入品牌色，就能自動(dòng)生成圖表色版，并在風(fēng)格上與品牌色匹配，達(dá)到整體色彩的統(tǒng)一。我們也將一套調(diào)配好的色板及 HCL 實(shí)用小工具附在文末，幫助大家直觀的查看和使用 HCL 模式顏色。

結(jié)語(yǔ)

數(shù)據(jù)價(jià)值就像不為人知的寶藏，隱藏在一條條枯燥晦澀的數(shù)據(jù)背后。而圖表則是開(kāi)啟寶藏的鑰匙，是發(fā)掘數(shù)據(jù)價(jià)值的強(qiáng)有力武器。通過(guò)對(duì)圖表的不斷探索優(yōu)化，我們希望能夠最大化數(shù)據(jù)的價(jià)值。通過(guò)圖表，讓數(shù)據(jù)最直觀的展現(xiàn)；通過(guò)圖表，讓其背后的規(guī)律浮出水面被人探知；通過(guò)圖表，讓 B 端不再有難懂的數(shù)據(jù)。

附：色板及 HCL 工具

• HCL 調(diào)色 Sketch 插件：https://github.com/petterheterjag/chromatic-sketch
• HCL 顏色生成器：http://medialab.github.io/iwanthue/

• 色彩可用性檢查工具：https://color.review/

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

數(shù)據(jù)查看

讓我們先來(lái)回顧一下表格的基本構(gòu)成，最上面的為表頭，橫為行，縱為列，內(nèi)容區(qū)每一組展示數(shù)據(jù)區(qū)域?yàn)閱卧瘛?

表格的設(shè)計(jì)，雖然看似簡(jiǎn)單，但是作為用戶(hù)最常用的組件之一，我們需要對(duì)視覺(jué)和交互的精準(zhǔn)把握，才能保證用戶(hù)在使用表格時(shí)更加。

這里我推薦表格的”四維自檢法“，對(duì)我們?cè)O(shè)計(jì)的表格是否合理，做出一個(gè)標(biāo)準(zhǔn)的判斷。

分別是：信息降噪、呼吸適中、易讀、詳情查看。

• 信息降噪：分別對(duì)表格內(nèi)容和視覺(jué)層面進(jìn)行重要性梳理，剝離不重要的元素，使表格輕量化；
• 呼吸適中：保持內(nèi)容和元素之間合適的間距，使表格頁(yè)擁有一個(gè)好的呼吸感，將給用戶(hù)營(yíng)造一個(gè)舒適的操作環(huán)境；
• 易讀：通過(guò)對(duì)需求內(nèi)容的解讀，對(duì)內(nèi)容形式加以分類(lèi)辨別，做出可讀性最強(qiáng)的樣式；
• 詳情查看：b端系統(tǒng)往往伴隨著表格數(shù)據(jù)類(lèi)目龐大的問(wèn)題，通常會(huì)采用另一種形式去展示全部信息。

1. 信息降噪

精簡(jiǎn)表格內(nèi)容

當(dāng)表格的字段非常重要時(shí)，一定要將字段全部展示出來(lái)讓用戶(hù)更清晰地了解數(shù)據(jù)。

如果你的用戶(hù)只需要了解部分字段，那么全部展示是沒(méi)有必要的，只需展示最重要的字段即可。

自定義字段展示

不同用戶(hù)想看的的信息側(cè)重不同，有時(shí)候我們無(wú)法準(zhǔn)確判斷用戶(hù)看重哪些字段，還可以讓用戶(hù)自定義展示字段。

精簡(jiǎn)字段名稱(chēng)

當(dāng)我們?nèi)ピO(shè)計(jì)表格的時(shí)候，通常會(huì)發(fā)現(xiàn)表格需要承載的信息量是非常大的，有時(shí)候?yàn)榱吮憩F(xiàn)出字段的準(zhǔn)確含義，在定義字段名稱(chēng)時(shí)往往會(huì)非常的長(zhǎng)。但是當(dāng)這些字段同時(shí)出現(xiàn)在一個(gè)表格里時(shí)，過(guò)長(zhǎng)的字段名稱(chēng)，又會(huì)顯得冗余，讓本就不大的頁(yè)面空間更加雜亂。

所以當(dāng)我們?cè)O(shè)計(jì)表格的時(shí)候，我們可以分析字段名稱(chēng)，對(duì)字段名稱(chēng)做精簡(jiǎn)，看看是不是少一個(gè)字用戶(hù)就無(wú)法理解字段的含義。

添加字段說(shuō)明

當(dāng)字段名稱(chēng)過(guò)長(zhǎng)，又必須展示，才能有效的理解字段含義時(shí)。我們可以定義一個(gè)專(zhuān)有名詞代替，并且在字段名稱(chēng)后使用添加字段說(shuō)明的形式，來(lái)對(duì)字段加以說(shuō)明。

這樣一來(lái)用戶(hù)既可以清晰的理解字段含義，又可以在有限的頁(yè)面空間下獲取到更多的數(shù)據(jù)信息。

簡(jiǎn)化表格樣式

早期表格的設(shè)計(jì)，出發(fā)點(diǎn)主要以擬物形式，以最接近現(xiàn)實(shí)表格的樣式去設(shè)計(jì)。

但是隨著互聯(lián)網(wǎng)的普及度加深，極簡(jiǎn)的表格設(shè)計(jì)，使界面更加輕盈，讓用戶(hù)更加專(zhuān)注于數(shù)據(jù)內(nèi)容。

去除縱向列的分割線(xiàn)，僅以淺色的橫向分割線(xiàn)區(qū)分行，但是要注意分割的顏色不能過(guò)于淺而缺乏辨識(shí)度，部分人群對(duì)顏色的辨識(shí)度會(huì)偏低，顯示器的硬件性能也會(huì)影響顏色的可辨識(shí)性。

減少不必要的顏色區(qū)分

表格設(shè)計(jì)中一定不要使用過(guò)多的顏色區(qū)做狀態(tài)或操作的區(qū)分，過(guò)多的顏色細(xì)分會(huì)使表格變得更加混亂，影響用戶(hù)體驗(yàn)。

對(duì)狀態(tài)的區(qū)分，僅用輕量的顏色區(qū)分即可，操作欄保持主色按鈕色。

2. 呼吸適中

如何定義單元格的高度

了解單元格的結(jié)構(gòu)，以及實(shí)現(xiàn)單元格的基本邏輯，有助于我們更好的去把控我們的設(shè)計(jì)。

單元格內(nèi)的可控尺寸包含：?jiǎn)卧窀叨?、文字字?hào)、文字/段落行高、文字上下間距。

我們基于視覺(jué)呼吸感，賦予各個(gè)元素合適的尺寸，我在這里給出一套參考方案：

• 文字字號(hào) = N
• 文字行高 = 1.5N
• 上下間距 = 1.2N
• 單元格高度 = 內(nèi)容高度 + 上間距 +下間距

如何定義列的間距

首先我們要了解列的兩種類(lèi)型，第一種是定寬列，第二種是自適應(yīng)列。

• 定寬列

顧名思義就是它的寬度是固定的，比如：第一列我們?cè)O(shè)置寬度為200px，第二列我們?cè)O(shè)置為300px，五六七列分別設(shè)為100px，那么我們這個(gè)列表的寬度就等于200 + 300 + 100*3 = 1100px，在任何分辨率尺寸下你的這個(gè)列表都會(huì)保持這個(gè)寬度不變。

• 自適應(yīng)列

就是列會(huì)隨著分辨率變化而產(chǎn)生寬度的變化，比如：列表有五列，我們定義列表的寬度為界面寬度的50%，假定界面寬度為1200px，那么列表寬度就為600px，而每一列的寬度則為120px。此時(shí)我們將界面的寬度縮小到600px時(shí)，那么列表的寬度就為300px，而每一列的寬度則為60px。

在實(shí)際設(shè)計(jì)案例中，我們往往會(huì)面臨由于每一列的內(nèi)容不同，所需要的寬度也就不同，我們希望在列不多時(shí)可以保持寬度自適應(yīng)，但是如果每一列都做成自適應(yīng)列的話(huà)，內(nèi)容多的列無(wú)法展示全內(nèi)容，內(nèi)容少的列空間又會(huì)很大。

所以，固定列 + 自適應(yīng)列的綜合運(yùn)用，可以讓我們更好的實(shí)現(xiàn)我們想要的設(shè)計(jì)方案。

• 列的結(jié)構(gòu)

然后，我們一起來(lái)了解列的結(jié)構(gòu)。每一列分為內(nèi)容區(qū)和左右間距區(qū)，在固定列里面內(nèi)容區(qū)和左右間距區(qū)都是保持不變的。但是在自適應(yīng)列卻不同，它的內(nèi)容區(qū)是隨界面分辨率變化而變化的，左右間距區(qū)的寬度是保持不變的（在代碼里間距區(qū)被叫做Padding）。

• 固定列

當(dāng)表格字段數(shù)量不確定時(shí)，通常我們會(huì)為自定義列的內(nèi)容區(qū)寫(xiě)一個(gè)最小值(min-width),以確保字段很少時(shí)可以自適應(yīng)寬度，字段較多時(shí)仍然能保證完整展示表格數(shù)據(jù)，不影響對(duì)內(nèi)容的閱讀。

當(dāng)表格的列過(guò)多又必須全部展示時(shí)，固定必需固定的列(如姓名、任務(wù)名稱(chēng)、操作項(xiàng)等)，其他字段橫向滾動(dòng)。

3. 呼吸適中

列的對(duì)齊方式

基于人的慣性瀏覽順序，設(shè)計(jì)每列合理的對(duì)齊方式，能夠輔助用戶(hù)更的完成工作。

• 標(biāo)題和內(nèi)容：一般采用左對(duì)齊，更的瀏覽順序；
• 有長(zhǎng)短不一的數(shù)字時(shí)(序號(hào)除外)：右對(duì)齊，方便比較 ;
• 操作項(xiàng)一般放在尾列：右對(duì)齊；

不留空白格

從心理學(xué)的角度講，人對(duì)未知事物會(huì)產(chǎn)出恐懼情緒。我們?cè)谠O(shè)計(jì)表格的時(shí)候，要考慮到表格的各種展示情況，非特殊情況不要出現(xiàn)單元格空白。

沒(méi)有數(shù)量用“0”表示，沒(méi)有該項(xiàng)內(nèi)容用“-”表示。

選擇合適的分頁(yè)器

表格是一種可以承載大量數(shù)據(jù)的組件，當(dāng)數(shù)據(jù)行數(shù)很多時(shí)我們通常會(huì)選擇分頁(yè)器，使用分頁(yè)器有哪些優(yōu)點(diǎn)：

• 快速查看：通過(guò)分頁(yè)數(shù)據(jù)加載緩解服務(wù)器壓力；
• 清晰易讀：由于界面的空間是有限的，通過(guò)分頁(yè)展示數(shù)據(jù)，有助于緩解用戶(hù)的閱讀壓力；
• 靈活便捷：如果客戶(hù)想在一頁(yè)展示很多數(shù)據(jù)，可以通過(guò)分頁(yè)器自行選擇，還可以了解到數(shù)據(jù)的總數(shù)目。

收起低頻的操作項(xiàng)

當(dāng)界面空間有限、表格列數(shù)很多時(shí)，如果表格的操作項(xiàng)過(guò)多，會(huì)占用很多頁(yè)面空間，需要有選擇的展示，將低頻操作項(xiàng)收起，用點(diǎn)擊更多按鈕去觸發(fā)選擇。

如果是1.0的產(chǎn)品，我們可以和產(chǎn)品經(jīng)理溝通，分析每個(gè)功能按鈕的優(yōu)先級(jí)。

如果是上線(xiàn)的產(chǎn)品，我們還可以通過(guò)按鈕點(diǎn)擊PV(頁(yè)面成功訪問(wèn)次數(shù))，來(lái)了解按鈕的使用頻率，做出按鈕優(yōu)化。

行的排序

如果產(chǎn)品沒(méi)有特殊需求，那么默認(rèn)最近創(chuàng)建的在最上面?？梢杂脦в信判虻谋眍^，讓用戶(hù)自定義排序。

4. 查看詳情

詳情入口

如果表格的內(nèi)容項(xiàng)很多，我們通常會(huì)在表格上只展示部分重要數(shù)據(jù)，而其余數(shù)據(jù)放在詳情頁(yè)面展示。

作為詳情頁(yè)面的入口，通常會(huì)有兩種設(shè)計(jì)方式：

• 將詳情按鈕放在操作項(xiàng)里
• 將首行的名稱(chēng)做成可點(diǎn)擊樣式，點(diǎn)擊跳轉(zhuǎn)至詳情

詳情頁(yè)的展開(kāi)形式

如果詳情內(nèi)容不多，沒(méi)有新開(kāi)頁(yè)面的必要，我們可以采用展開(kāi)行、彈窗、抽屜的形式，但是要注意盡量減少過(guò)多的樣式，給用戶(hù)增加疑惑感。如果詳情的內(nèi)容很多，而且有編輯的需求，建議采用新開(kāi)頁(yè)的形式。

建議根據(jù)詳情頁(yè)信息量的多少，以此采用展開(kāi)行、彈窗、抽屜、新開(kāi)頁(yè)的形式。

數(shù)據(jù)過(guò)濾

數(shù)據(jù)過(guò)濾是表格頁(yè)很重要的組成部分，包含搜索、篩選、標(biāo)簽頁(yè)。

這一部分的主要作用是幫助用戶(hù)，梳理表格數(shù)據(jù)信息，精準(zhǔn)定位所需的數(shù)據(jù)項(xiàng)。

1. 搜索

模糊搜索

模糊搜索是指在用戶(hù)搜索意圖不明確時(shí)，搜索引擎將用戶(hù)的查詢(xún)與待檢索的內(nèi)容進(jìn)行模糊匹配，找出與查詢(xún)相關(guān)的內(nèi)容。模糊搜索無(wú)法理解用戶(hù)的查詢(xún)意圖，返回的結(jié)果中可能包括了一大批用戶(hù)不想要的信息，所以在使用模糊搜索時(shí)一定要結(jié)合自己的實(shí)際場(chǎng)景，慎重使用。

• 優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會(huì)被檢索出來(lái)，減少了精準(zhǔn)搜索帶來(lái)的記憶負(fù)擔(dān)
• 缺點(diǎn)：容易把相關(guān)的信息也帶出來(lái)，例如檢索手機(jī)號(hào)，把相關(guān)編碼也匹配出來(lái)

搜索

搜索是指用戶(hù)在搜索時(shí)，針對(duì)某一數(shù)據(jù)字段搜索，來(lái)查找所需要的數(shù)據(jù)。根據(jù)業(yè)務(wù)場(chǎng)景不同，我們會(huì)查找某一字段，或者是用標(biāo)簽切換不同字段來(lái)查找。

• 優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高
• 缺點(diǎn)：每次只能對(duì)單一條件進(jìn)行搜索

2. 篩選

篩選器主要是針對(duì)內(nèi)容較少的字段進(jìn)行查找的一種方式， 通過(guò)篩選器的選擇可以快速定位所需的數(shù)據(jù)，取消用戶(hù)輸入的過(guò)程，提升查找效率。一般篩選有兩種形式，第一種是下拉篩選，第二種是平鋪式篩選。

下拉篩選

下拉篩選就是將需要篩選的內(nèi)容放置于選擇器當(dāng)中，通過(guò)點(diǎn)擊選擇器下拉，來(lái)選擇需要篩選的內(nèi)容。

• 優(yōu)點(diǎn)：空間利用率高，起到了很好的收納作用
• 缺點(diǎn)：無(wú)法直觀看到所有的篩選項(xiàng)

平鋪篩選

平鋪篩選就是將篩選項(xiàng)的內(nèi)容，直接展示于頁(yè)面之上，通過(guò)點(diǎn)擊選擇的方式直接進(jìn)行篩選?；蛘呖梢酝ㄟ^(guò)自定義內(nèi)容的篩選。

• 優(yōu)點(diǎn)：操作效率高，篩選項(xiàng)一目了然，支持輸入更多篩選條件
• 缺點(diǎn)：空間利用率低，不適合選項(xiàng)太多的情況

如何合理的使用篩選項(xiàng)

當(dāng)數(shù)據(jù)內(nèi)容需要的篩選類(lèi)目過(guò)多時(shí)，如何合理的擺放，才能提高用戶(hù)的使用效率。

• 信息排序：基于用戶(hù)使用場(chǎng)景，以目標(biāo)導(dǎo)向?yàn)橐罁?jù)，將高頻的篩選項(xiàng)排列到前面，低頻的篩選項(xiàng)置于后面
• 默認(rèn)折疊低頻篩選項(xiàng)：當(dāng)篩選項(xiàng)過(guò)多時(shí)，會(huì)極大的占用界面空間，使用戶(hù)在閱讀數(shù)據(jù)時(shí)產(chǎn)生非常不好的用戶(hù)體驗(yàn)，通過(guò)展示高頻篩選項(xiàng)、隱藏低頻篩選項(xiàng)，將更好的提升用戶(hù)體驗(yàn)。
• 所有篩選項(xiàng)都很低頻：以點(diǎn)擊高級(jí)篩選按鈕的形式觸發(fā)，將全部篩選項(xiàng)置于氣泡或者彈窗之中。

如何判定篩選項(xiàng)的使用頻率呢？通常會(huì)有兩種方式：

• 第一種是給篩選項(xiàng)增加數(shù)據(jù)埋點(diǎn)，這樣一來(lái)就可以通過(guò)對(duì)用戶(hù)點(diǎn)擊行為的分析了解到篩選項(xiàng)的使用頻率；
• 第二種是用戶(hù)調(diào)研，通過(guò)問(wèn)卷或者面談，了解到用戶(hù)的真實(shí)使用需求。

3. 標(biāo)簽頁(yè)

標(biāo)簽頁(yè)又叫選項(xiàng)卡，在組件中我們通常叫Tabs，指的是分隔內(nèi)容上有關(guān)聯(lián)但屬于不同類(lèi)別的數(shù)據(jù)集合。

默認(rèn)展示常用項(xiàng)

在使用標(biāo)簽頁(yè)時(shí)，有一點(diǎn)我們要特別注意，通常在B端設(shè)計(jì)中，我們會(huì)把標(biāo)簽頁(yè)的位置定位在最常用的一個(gè)選項(xiàng)。

增加數(shù)據(jù)條目

如果是訂單一類(lèi)的分頁(yè)，我們還可以將數(shù)據(jù)條數(shù)，展示在標(biāo)簽右側(cè)，用來(lái)幫助用戶(hù)快速了解到待辦數(shù)據(jù)量。

數(shù)據(jù)操作

1. 分類(lèi)

數(shù)據(jù)操作即對(duì)表格的數(shù)據(jù)進(jìn)行操作，首先我們對(duì)數(shù)據(jù)操作進(jìn)行分類(lèi)。

按控制范圍分:

• 單行操作
• 批量操作
• 全局操作

按操作屬性分：

• 新增數(shù)據(jù)
• 編輯數(shù)據(jù)
• 刪除數(shù)據(jù)
• 業(yè)務(wù)處理

2. 如何合理的設(shè)計(jì)數(shù)據(jù)操作

第一步，先判斷控制范圍

第二步，判斷擺放位置

第三步，優(yōu)化信息層級(jí)

以上是操作項(xiàng)和篩選項(xiàng)較多的情況，那么不多時(shí)，我們還是要合理利用空間，靈活設(shè)計(jì)

以上就是《如何設(shè)計(jì)表格？》的全部?jī)?nèi)容了，后續(xù)還會(huì)努力更新更多B端設(shè)計(jì)分享！與君共勉

文章來(lái)源：優(yōu)設(shè)   作者：三斤

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)