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

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

我们先来看一下原设计。

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

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

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

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

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

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

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

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

结尾

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

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

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

​