個(gè)人信息頁(yè)在B端中是一種比較需要全局組織架構(gòu)意識(shí)的頁(yè)面，因?yàn)閭€(gè)人信息頁(yè)往往展示的字段眾多，分類不好或劃分不合理的話極為容易導(dǎo)致信息展示不夠清晰有邏輯。

此次我們改版的主題就是B端中的個(gè)人信息頁(yè)，不管是詳情頁(yè)中的個(gè)人信息，還是用戶自己的主頁(yè)，設(shè)計(jì)思路都是類似的，我們就借這次改版，梳理一下字段多的頁(yè)面改如何進(jìn)行排版。

我們先來(lái)看一下原設(shè)計(jì)。

在這個(gè)案例中，字段大致的塊分沒(méi)有問(wèn)題，但是一瀉而下的布局形式對(duì)整體信息的瀏覽邏輯過(guò)于單一，容易讓人感到疲乏；其次字段與字段之間的聯(lián)系并不那么緊密，字段間邏輯的跳躍性又太大，這無(wú)形中增加了閱讀和記憶位置的難度。

所以，重構(gòu)這個(gè)頁(yè)面時(shí)，優(yōu)先要做的并不是上手進(jìn)行設(shè)計(jì)，而是梳理字段間的邏輯。具體進(jìn)行設(shè)計(jì)實(shí)踐中，不需要百分之一百邏輯通順連貫，但大致上基本符合條理是需要的。

另外由于鄰近性和一致性原則，相互更靠近、間距保持一致的字段，會(huì)被大腦認(rèn)為是同一組的字段，所以考慮到這個(gè)因素，上下相關(guān)比左右相關(guān)更加自然、符合直覺(jué)（尤其是三列以上的時(shí)候）。

這里我將頁(yè)面原本的「預(yù)約信息」字段邏輯單獨(dú)摘出來(lái)，和稍加修改字段順序的版本進(jìn)行對(duì)比，大家可以體會(huì)一下其中閱讀體驗(yàn)上的細(xì)微區(qū)別。

進(jìn)行大模塊的劃分時(shí)，我們要明確一個(gè)目標(biāo)：這是一個(gè)用戶信息頁(yè)。用戶的信息不管是視覺(jué)上還是瀏覽動(dòng)線里都應(yīng)當(dāng)是重點(diǎn)，所以我把用戶信息與其余信息進(jìn)行瀏覽順序上的區(qū)別，做了三種不同的劃分。

此外，我還將費(fèi)用明細(xì)單獨(dú)摘出，因?yàn)橘M(fèi)用明細(xì)怎么看都不像是預(yù)約住院時(shí)會(huì)產(chǎn)生的信息，所以它出現(xiàn)在「預(yù)約信息」中是不符合流程邏輯的，這是原設(shè)計(jì)中比較大的設(shè)計(jì)錯(cuò)誤。

在細(xì)節(jié)排版上，第一版我按照原圖個(gè)人信息頂置的布局，僅進(jìn)行了一些微調(diào)，將年齡和性別作為標(biāo)簽放置在名字之后，將病史這個(gè)像對(duì)更重要的信息單獨(dú)成一行。

再之后將這種改法套用到個(gè)人信息左側(cè)豎置的布局中。

再之后，我嘗試進(jìn)行一些大的改動(dòng)，例如：為了更加充分地利用個(gè)人信息面板的空間，將預(yù)約信息和個(gè)人信息進(jìn)行合并，邏輯上將這兩者合并為「患者住院信息」；將頁(yè)面中可能比較關(guān)鍵的信息進(jìn)行提煉，在頭像下方進(jìn)行更加突出的顯示。

再之后，除此之外嘗試在對(duì)齊方式上做出一些區(qū)別，這是非破壞性的單純的布局改動(dòng)，例如將頭像和部分標(biāo)簽居中展示。

剩下的就是補(bǔ)充完成視覺(jué)設(shè)計(jì)了，視覺(jué)上我不再贅言，無(wú)非加色彩、加圖片、加圖標(biāo)，在B端設(shè)計(jì)中邏輯遠(yuǎn)遠(yuǎn)優(yōu)先于視覺(jué)，所以這里只是簡(jiǎn)單上個(gè)色。

另外，文案的字段也進(jìn)行了一定程度的權(quán)重對(duì)比，這樣能夠讓信息本身更加突出，并且一定程度上緩解閱讀大量文本時(shí)的疲勞感。

結(jié)尾

這次改版只是進(jìn)行了很小幅度的排版上的調(diào)整，我們主要的目的是厘清設(shè)計(jì)這種多字段頁(yè)面時(shí)的思路。

字段的排版一定是用來(lái)體現(xiàn)字段間的邏輯聯(lián)系的，盡管有時(shí)候字段的邏輯聯(lián)系可能會(huì)出現(xiàn)比較牽強(qiáng)的情況，但在大致上，如何排的正如你如何想的，有1才有2，這一點(diǎn)在進(jìn)行B端頁(yè)面設(shè)計(jì)時(shí)至關(guān)重要。

那么，我們下周的改版再賤！

B端產(chǎn)品設(shè)計(jì)課程早鳥(niǎo)預(yù)約中，課前預(yù)習(xí)和學(xué)員群都準(zhǔn)備好了，現(xiàn)在就預(yù)約變強(qiáng)！