个人信息页在B端中是一种比较需要全局组织架构意识的页面，因为个人信息页往往展示的字段众多，分类不好或划分不合理的话极为容易导致信息展示不够清晰有逻辑。

此次我们改版的主题就是B端中的个人信息页，不管是详情页中的个人信息，还是用户自己的主页，设计思路都是类似的，我们就借这次改版，梳理一下字段多的页面改如何进行排版。

我们先来看一下原设计。

在这个案例中，字段大致的块分没有问题，但是一泻而下的布局形式对整体信息的浏览逻辑过于单一，容易让人感到疲乏；其次字段与字段之间的联系并不那么紧密，字段间逻辑的跳跃性又太大，这无形中增加了阅读和记忆位置的难度。

所以，重构这个页面时，优先要做的并不是上手进行设计，而是梳理字段间的逻辑。具体进行设计实践中，不需要百分之一百逻辑通顺连贯，但大致上基本符合条理是需要的。

另外由于邻近性和一致性原则，相互更靠近、间距保持一致的字段，会被大脑认为是同一组的字段，所以考虑到这个因素，上下相关比左右相关更加自然、符合直觉（尤其是三列以上的时候）。

这里我将页面原本的「预约信息」字段逻辑单独摘出来，和稍加修改字段顺序的版本进行对比，大家可以体会一下其中阅读体验上的细微区别。

进行大模块的划分时，我们要明确一个目标：这是一个用户信息页。用户的信息不管是视觉上还是浏览动线里都应当是重点，所以我把用户信息与其余信息进行浏览顺序上的区别，做了三种不同的划分。

此外，我还将费用明细单独摘出，因为费用明细怎么看都不像是预约住院时会产生的信息，所以它出现在「预约信息」中是不符合流程逻辑的，这是原设计中比较大的设计错误。

在细节排版上，第一版我按照原图个人信息顶置的布局，仅进行了一些微调，将年龄和性别作为标签放置在名字之后，将病史这个像对更重要的信息单独成一行。

再之后将这种改法套用到个人信息左侧竖置的布局中。

再之后，我尝试进行一些大的改动，例如：为了更加充分地利用个人信息面板的空间，将预约信息和个人信息进行合并，逻辑上将这两者合并为「患者住院信息」；将页面中可能比较关键的信息进行提炼，在头像下方进行更加突出的显示。

再之后，除此之外尝试在对齐方式上做出一些区别，这是非破坏性的单纯的布局改动，例如将头像和部分标签居中展示。

剩下的就是补充完成视觉设计了，视觉上我不再赘言，无非加色彩、加图片、加图标，在B端设计中逻辑远远优先于视觉，所以这里只是简单上个色。

另外，文案的字段也进行了一定程度的权重对比，这样能够让信息本身更加突出，并且一定程度上缓解阅读大量文本时的疲劳感。

结尾

这次改版只是进行了很小幅度的排版上的调整，我们主要的目的是厘清设计这种多字段页面时的思路。

字段的排版一定是用来体现字段间的逻辑联系的，尽管有时候字段的逻辑联系可能会出现比较牵强的情况，但在大致上，如何排的正如你如何想的，有1才有2，这一点在进行B端页面设计时至关重要。

那么，我们下周的改版再贱！

B端产品设计课程早鸟预约中，课前预习和学员群都准备好了，现在就预约变强！