背景

在做项目时，不仅要做出产品需求中相对应的核心页面，也要做出细节的交互页面，同时也要考虑到页面出现极端情况时的展示方式，尤其是B端业务场景多样、逻辑复杂，更是要多方面考虑信息展示的可延展性问题。

列出了几种比较常见的情况，在做页面设计时需要考虑到的：

1、文字内容较多时的考虑

2、无内容时的考虑

3、背景图多样时内容信息凸显的考虑

4、按钮宽度的定义思考

5、按钮多状态的考虑

6、布局上的最大展示考虑

一、文字内容较多时的考虑

折行、最大限制省略、无相关内容信息时展示 无内容相关说明文案等

这是当时做的一个B端页面的列表，进度有色字体部分是可点击进行查看工单处理详情的。

但经过查看后台的线上数据，有些房源地址比较长，而且房源地址对于用户来说在页面列表中是一个重要的区分信息。比较重要。再一个问题描述有的也比较长，对于在页面列表中快速定位筛选有着重要的作用，所以也需要在列表中充分的展示出来。

介于这两个信息较长时的展示，有了以下形式

房源地址和问题描述超过一行时折行，一般情况下两行的内容足以显示全信息，就算特殊较极端的情况下没有展示全，那也足以能展示出关键信息用来区分列表其他信息。为防止极端情况下的信息展示，当超过两行时，内容以…省略展示。如果想要查看全部信息进入详情进行具体查看。

因为列表是做快速信息浏览的，着重的是展示出重点信息之间的差异化，用户能快速定位筛选出需要紧急去处理的那个。这就需要最大化精简，次要信息及详细信息不宜在列表做具体展示。

当处理了房源地址和问题描述信息的极端化展示方式后，又有了新的问题，就是工单编号位数不是固定的，有时候会特别长。再一个当处理人已经离职了，会在姓名后面展示该员工工号，这样，两个信息就会重叠到一块

经过跟产品经理沟通，工单编号在此列表中非必要重要信息，因为编号是系统自动给出的，对于用户来说为非重要信息，一般是以自己熟知的房源地址和问题描述为重要区分信息。工单编号对于用户在此列表中来说意义不大，可以考虑去掉。经与后端开发同学确认，工单编号和后面的处理进度是两个字端，可以做隐掉处理。就这样在列表中去掉了工单编号。

由于处理人离职后会展示其员工编号，字段会比较长，但对于用户来说员工的员工编号是没有意义的信息。但经与后端开发同学确认，这是同一个字端后端不好截取。所以就找前端开发同学在页面展示上做了展示限制（处理人与前面进度部分的最小间距为一个固定间距，当小于这个间距时，后面的处理人字段以…省略显示。

除此之外还有一种没有获取到进度信息时的情况，这种情况下是没有工单信息的，故也不能点击，所以就给出了一种“暂无处理进度”的文案提示，且文案颜色去掉彩色，隐喻不可点击。

看似简单的一个列表，背后可能隐藏着各种特殊的信息情况，只有在设计时考虑周全，结合用户场景给出限制和可扩展性定义，在上线后极端情况才能被掌控。不至于在遇到特殊情况时页面内容显示的 “面目全非”。

二、无内容时的考虑

页面无内容、搜索无内容、无网络、服务器错误等

在做项目需求的时候少不了一些缺省页的设计，一般有：页面无内容时、搜索无结果时、无网络时、服务器错误时等等。这都是非正常情况下出现的页面，出现的几率可能比较小，但不可避免会出现。缺省页的意义在于当出现非正常的情况时能缓解用户焦急的情绪。

同时要向用户说明当前出现的情况，以及引导用户可进行的操作。这样就不至于让用户陷在问题中，要帮助用户快速的从问题中走出来。故缺省页的设计很有必要，也有必要花一些心思（插图样式、文案内容及形式等）怎么能让用户“愉快”的度过“难关”，同时避免使用一些专业术语，尽量以幽默化、趣味化、委婉的方式来表达。

所以说缺省页在做页面设计时不可被忽略掉，比如每日优鲜的缺省页，插图场景和幽默的文案结合，加以引导按钮。体现出趣味性，更能让用户接受这样的“空白”。

三、背景图多样时内容信息凸显的考虑

深色背景下、浅色背景下内容的展示效果

在做需求时，经常遇到图片上需要显示文案的设计，尤其是一些例如产品图上显示信息的设计，这里的图不是固定的，而是拥有着不确定性，显示文案的位置可能是深色，也有可能是浅色。这个时候就需要较全面的考虑了。例如在文案下面加一个黑色渐变透明层，这样既和谐，又能保证不同背景下白色文字的显示效果。

四、按钮宽度的定义思考

按钮宽度自适应（设置两边最小间距），固定按钮宽度

在做页面的时候经常遇到一些选项标签，如果标签文案长度是已知的，基本上差不多长的文案，一般不超过4个字，这样的标签适合使用相同宽度的，且看起来比较整齐。

但如果标签上的文案是不确定的，文字数量也无法确定，这种情况下，为节省空间和灵活适应不同长度的文案，标签一般设置定义出文案两边的间距值。

是什么性质的标签？目前的数据是怎样的？未来可能会增加什么样的标签，这些都尽量了解清楚，因为这些因素决定着设计形式，标签的可扩展性。不至于说到线上才发现一些标签文案放不下了，再需要被动的改形式，这显然就是考虑的不够全面。

大多应用一般是筛选按钮标签使用固定宽度的标签，当然文字数量都是经过简化的，大多控制在2-4个字。这样的页面看起来比较整齐，用户在使用的时候比较容易浏览选择。

评价类的标签一般使用设定固定左右间距的方式，这样一是比较灵活，能适应较长的文案。二是比较节省空间，属于非重要模块类型。

五、按钮多状态的考虑

在做移动端按钮的设计时，至少至少要考虑到3种状态的显示方式：默认、点击、禁用。这是最基本的3种状态，不可缺少。在做的时候就要考虑到，及给出相应样式。而不是在开发时，开发童鞋再跑过来问你某种状态该怎么展示，或者开发童鞋直接按照自己的想法给出了一种形式，因为开发是具体执行的阶段，涉及的细节比较严谨、具体。

再一个就是业务形态比较复杂的场景下，需要考虑当点击了目前状态的某个操作按钮后，它会演变成什么功能的按钮，这与业务逻辑、任务流程密切相关，需要在做需求时了解清楚，然后给出展示。

六、布局上的最大展示考虑

尤其是一些列表中，按钮较多时，或者按钮是根据不同业务状态来展示的，这种情况下并不是要把所有的按钮都展示在页面上，而是要有个“度”，根据业务形态和用户使用场景来区分不同按钮的重要等级。

按钮较多时，非重要、使用不频繁的按钮可适当的隐藏起来，加以引导操作的元素来告诉用户。比如设定原则，页面上最多展示3个，超过3个时，某些按钮隐藏起来，用“更多”按钮的形式告诉用户点击可查看更多操作按钮。

再一个当一个模块的内容较多时，用户浏览起来比较累，且对于用户来说可以选择性的进行查看。这些非重要的详细内容可做适当的隐藏，加以“全部”或“更多”类型的按钮引导用户点击可查看更多内容。

总结

我们平时可能用过很多APP，很多时候用也就只是在“用”，只是跟随应用本身的逻辑和引导在完成我们的任务。在找不到某些功能或不清楚该怎么操作时，旁边人会告诉你应该这么做、步骤是怎样的。你不会操作，往往是因为你对应用的不熟悉，甚至自己会怀疑自己“我是不是智商有点问题？”。

但你往往忽略了一个重要的点：那就是不会跳出来思考，它为什么这么设计？有没有更好的方式？引导是不是有问题？等等……应该常总结、多思考，不同的应用可能有不同的业务模式和不同的展示方式，但设计模式和背后的设计原则是相通的。

最后希望你我都能拥有思考、分析、总结、解决问题的能力。

Powered by Froala Editor