界面设计中的可延展性

背景

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

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

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

2、无内容时的考虑

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

4、按钮宽度的定义思考

5、按钮多状态的考虑

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


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

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

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

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

01


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

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

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

02


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

03


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

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

04


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

05


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


2、无内容时的考虑

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

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

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

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

图片来自网络


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

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

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

图片来自网络


4、按钮宽度的定义思考

按钮宽度自适应(设置两边最小间距),固定按钮宽度

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

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

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

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

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

图片来自网络


5、按钮多状态的考虑

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

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


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

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

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

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

图片来自网络


总结

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

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

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