之前公開(kāi)課的案例中，我有總結(jié)產(chǎn)品地圖和功能地圖，來(lái)分析對(duì)象的產(chǎn)品內(nèi)容和具體結(jié)構(gòu)。但是地圖的應(yīng)用中還有個(gè)比較重要的類(lèi)型，就是信息地圖，這在我們過(guò)去的分享中也有提及。

文章鏈接：從分析潮汐app，告訴你思維導(dǎo)圖應(yīng)該怎么用

因?yàn)楫a(chǎn)品和功能地圖做過(guò)不少演示，所以今天主要的對(duì)象就是被廣泛忽略的信息地圖了。這無(wú)論對(duì)產(chǎn)品經(jīng)理還是設(shè)計(jì)師都是非常重要的工具，決定了最終客戶(hù)端展示的具體信息。

對(duì)于絕大多數(shù)B端產(chǎn)品，就是一個(gè)對(duì)數(shù)據(jù)實(shí)現(xiàn)增、刪、改、查的平臺(tái)。只是數(shù)據(jù)的業(yè)務(wù)要求不同，需要使用的頁(yè)面樣式、交互就會(huì)有差異。

比如常見(jiàn)的 CRM、HRM、ERP等，都是對(duì)指定數(shù)據(jù)進(jìn)行收集，然后在系統(tǒng)中進(jìn)行查看、檢索、修改、刪除的數(shù)據(jù)管理系統(tǒng)。除了業(yè)務(wù)、產(chǎn)品分析以外，最重要的就是對(duì)數(shù)據(jù)進(jìn)行數(shù)據(jù)庫(kù)的建表和字段整理。比如用戶(hù)包含的字段信息，商品包含的字段信息，使用表格將它們整理出來(lái)。

專(zhuān)業(yè)的B端產(chǎn)品規(guī)劃的過(guò)程，就是應(yīng)該是數(shù)據(jù)字段都定義完，才進(jìn)入到頁(yè)面的規(guī)劃和原型設(shè)計(jì)。因?yàn)轫?yè)面本身的目標(biāo)就是管理和展示數(shù)據(jù)，數(shù)據(jù)都沒(méi)確定頁(yè)面要怎么構(gòu)建？就像烹飪的過(guò)程，食材都沒(méi)確定寫(xiě)的菜譜別名就叫 “離譜”。

換句話(huà)說(shuō)，前端顯示的所有字段，都是從數(shù)據(jù)庫(kù)的池子中直接或間接應(yīng)用的（數(shù)據(jù)二次處理），比如設(shè)計(jì)頁(yè)面原型，用戶(hù)有年齡這個(gè)數(shù)據(jù)就可以加，沒(méi)有的情況下加了也沒(méi)東西顯示。

所以限制本身就存在，要在頁(yè)面上放哪些信息就需要有一個(gè)單獨(dú)的工作流程來(lái)確定，而不是一邊畫(huà)原型一邊想頁(yè)面要放什么，這么做效率非常低下（C端還好B端完全不行）。所以這就是信息地圖的來(lái)源，在具體完成界面原型或設(shè)計(jì)之前，用思維導(dǎo)圖把里面要放的信息羅列一遍。

同時(shí)，信息地圖還有個(gè)作用，就是要做信息的歸類(lèi)和整理。雖然部分頁(yè)面中包含的數(shù)據(jù)量很多，但不是一口氣列出來(lái)的，而是要根據(jù)模塊、類(lèi)型對(duì)它們做出區(qū)分。

尤其是在詳情、表單等類(lèi)型的頁(yè)面，比如一個(gè)用戶(hù)詳情，可以包含了百八十個(gè)字段的展示，那么這些字段平鋪堆積起來(lái)肯定非常亂，所以要?dú)w類(lèi)分組。比如個(gè)人信息、職業(yè)信息、登錄信息、訪(fǎng)問(wèn)記錄的分類(lèi)等等，如果分類(lèi)太大還可以進(jìn)一步拆分，比如職業(yè)信息還能包含實(shí)習(xí)經(jīng)歷、過(guò)去經(jīng)歷、當(dāng)前就職的子分類(lèi)，每個(gè)分類(lèi)中再囊括相應(yīng)的字段。

這個(gè)整理的過(guò)程可以非常好的加深對(duì)信息字段的理解，這是我們之前很多改版案例中對(duì)字段布局做調(diào)整，權(quán)重做出對(duì)比的來(lái)源。

在缺乏足夠經(jīng)驗(yàn)的情況下，就建議初級(jí)設(shè)計(jì)師，能培養(yǎng)針對(duì)復(fù)雜頁(yè)面創(chuàng)建信息地圖的習(xí)慣。

信息地圖的創(chuàng)建首先要整理出頁(yè)面包含哪些字段信息，然后再對(duì)它們進(jìn)行歸類(lèi)。以之前改版案例中的千牛表單頁(yè)面舉例。

我是用字段表格來(lái)梳理頁(yè)面的信息內(nèi)容，雖然我自己經(jīng)驗(yàn)比較豐富用起來(lái)沒(méi)有問(wèn)題，但是對(duì)一般人看起來(lái)一定很蛋疼，因?yàn)閷蛹?jí)和歸類(lèi)非常的不直觀。

所以我們可以再用信息地圖的方式先對(duì)字端做一遍整理：

但是光把信息字段做好歸類(lèi)還不夠，可以進(jìn)一步整理對(duì)應(yīng)的類(lèi)型、要求，所以可以再在每個(gè)字端后補(bǔ)充一個(gè)對(duì)應(yīng)的字端類(lèi)型和要求進(jìn)去。

格式怎么放不重要，確保自己能看懂就行。比如：字段類(lèi)型，字?jǐn)?shù)限制，可選內(nèi)容……

這個(gè)操作過(guò)程是非常容易理解的，畫(huà)好的結(jié)果也很直觀，可以導(dǎo)出后貼進(jìn)設(shè)計(jì)文件內(nèi)，作為頁(yè)面設(shè)計(jì)中的參照對(duì)象。

如果還包含更多的邏輯，比如一些字段有關(guān)聯(lián)、繼承、不兼容的問(wèn)題，可以單獨(dú)將這些邏輯用文本的形式在畫(huà)布中另做補(bǔ)充，無(wú)需強(qiáng)行寫(xiě)到思維導(dǎo)圖中去。

雖然我們使用的是逆推的方法整理出來(lái)的，但對(duì)于專(zhuān)業(yè)的設(shè)計(jì)師應(yīng)該怎么完成相應(yīng)頁(yè)面的布局和設(shè)計(jì)已經(jīng)完事具備了。這也是前一篇分享提的，做完有效的需求分析以后 —— 忘記原版設(shè)計(jì)什么樣的，按你理解的正確的做法做出來(lái)。

最后就是根據(jù)信息地圖進(jìn)行具體表單頁(yè)面設(shè)計(jì)的過(guò)程了。信息地圖除了表示頁(yè)面要放什么外，還有兩個(gè)和設(shè)計(jì)強(qiáng)相關(guān)的內(nèi)容，就是層級(jí)和字段說(shuō)明。

字段說(shuō)明為什么重要就不用多解釋了，因?yàn)樗敲總€(gè)字段要使用哪種輸入類(lèi)型的指示，比如輸入框、多選、下拉單選、上傳按鈕等。

而層級(jí)分類(lèi)就是這些字段怎么歸類(lèi)的解釋?zhuān)闹匾砸恢北缓雎?。因?yàn)橐瓿烧麄€(gè)復(fù)雜表單頁(yè)面的設(shè)計(jì)，并不是把頁(yè)面從上到下依次設(shè)計(jì)過(guò)去，而是先把整體的頁(yè)面結(jié)構(gòu)、層級(jí)表現(xiàn)確定好，再開(kāi)始填充下級(jí)的內(nèi)容。

在本案例中，信息就包含了兩個(gè)級(jí)別，出現(xiàn)第二級(jí)的主要是圖問(wèn)描述中的 “基礎(chǔ)素材” 和 “導(dǎo)購(gòu)素材”。而基礎(chǔ)信息中的 “類(lèi)目屬性” 我并沒(méi)有把它當(dāng)成一個(gè)正式的二級(jí)分類(lèi)，原因就是正式的二級(jí)分類(lèi)是不應(yīng)該和基礎(chǔ)字段出現(xiàn)在同一級(jí)的。

所以，通過(guò)對(duì)分類(lèi)的理解，就可以將表單頁(yè)面的基本框架設(shè)計(jì)出來(lái)。

框架的設(shè)計(jì)，就是用于兼容字段的展示要求，能讓用戶(hù)輕易的識(shí)別這些信息和分類(lèi)，提升理解和操作的效率。而要表現(xiàn)出對(duì)應(yīng)的層級(jí)和結(jié)構(gòu)，樣式絕對(duì)不是只有一種，所以在沒(méi)有確定設(shè)計(jì)規(guī)范之前，就可以做出不同的樣式。

搭建完框架以后，就可以根據(jù)信息地圖進(jìn)一步設(shè)計(jì)下級(jí)的字段內(nèi)容。而字段同樣也要分析和理解其中的共性，搭建相應(yīng)的布局框架，比如下面這些通用類(lèi)型。

然后就可以根據(jù)這些邏輯，輸出最終的樣式了。

只要分析的過(guò)程合理，再加上界面設(shè)計(jì)的基本常識(shí)，就足夠輸出合理的設(shè)計(jì)稿，而不需要花大量時(shí)間四處找參考，在缺乏設(shè)計(jì)目標(biāo)的情況下找參考沒(méi)有意義，而且也很難找到和每次項(xiàng)目使用場(chǎng)景一致的參考圖。

這就是針對(duì)新手表單的建議，如果想要鞏固這些知識(shí)的話(huà)，可以針對(duì)下圖的案例，重新制作一份信息地圖，然后根據(jù)信息地圖（不看原圖）完成表單頁(yè)面的設(shè)計(jì)，看看對(duì)比原圖會(huì)有哪些提升。

結(jié)尾

B端設(shè)計(jì)有很多細(xì)節(jié)的能力掌握是需要通過(guò)這樣的專(zhuān)項(xiàng)練習(xí)來(lái)提升的，真想進(jìn)步，這些刻意練習(xí)就要做，持續(xù)進(jìn)行積累，才能在短期內(nèi)快速提升。完成的練習(xí)大家可以在我們的社群提交和交流。

我們下篇再賤~

新一期B端產(chǎn)品設(shè)計(jì)全能班即將十一放假結(jié)束就開(kāi)課了，有提升需要的同學(xué)記得聯(lián)系我～

一起變強(qiáng)！