认识达内从这里开始

我们在设计网页的时候，为了能够重点突出主要内容，通常都会采用留白或者是对比的方式来进行表述。而今天我们就给大家介绍另外一种空状态的设计方法，一起来学习一下吧。

「空状态」之称乃立足于表现层之观察，其承载的实际是若干种场景，反馈「空」只是其中的一种也是后一种手段，条件允许的情况下，应当先考虑如何去引导用户。因本项目落地于空状态，上述其他设计策略不在此展开，下文将详述空状态的设计。

表现空状态

①空状态内容

空状态由两部分构成——反馈和引导。基于当前情境的反馈能让用户获悉所发生之事;在此基础之上，还需提供引导以帮助用户完成终的任务。

1)反馈

反馈通常由图像与文案组成，其风格应契合品牌调性，其内容除了基本的反馈信息外也应更多地考虑如何引导用户。

2)引导

此处的引导指的就是终根据实际情境提供的操作，如无可支持的功能，可以文案形式进行表达。

②空状态结构类型

针对安居客产品中的场景，除了完整的空状态结构，对于模块化的页面，由于模块本身的高度有限，在数据为空时，只取描述文案作为反馈，并在样式上弱化按钮使其在当前结构下保持原有的视觉权重，以其为另一种空状态结构。

③视图结构类型

空状态本身的结构和布局应当一致，但对于平台型产品，伴随着业务复杂性的是页面结构的多样性，这使得空状态呈现于不同容器中，为达到一致的视觉效果在视觉输出环节就需要针对性地定义布局逻辑。

而上述所谓的一致效果即为空状态模块应当居中展示于所有容器中，但由于空状态模块的重心并非在其物理中心上，因此为达到视觉居中的效果，在将其物理居中的基础上还需在垂直方向上作相应调整。

1)完整视图

视图的高度随设备而变化，因此使用相对定位，布局逻辑即为将空状态模块相对于视图中心垂直上移固定距离。

2)模块与列表

对于相近的模块，可统一其高度(无法通用的场景还需另外定义高度)，此时可使用绝对定位，布局逻辑即为空状态模块相对容器顶部保持固定距离。

对于列表，由于其高度不固定，在空状态时常规的处理方式是将空状态置于背景之上或cell之中，前者不适用于基于白色背景的空状态设计，而后者的形式与其实际层级关系不符，因此我们终选择了添加view来实现效果，如此就需定义高度来满足此种场景中的所有情况，其布局逻辑也就与模块中所应用的相同。

图示的设计策略

图示的设计策略核心在于其内容的的表达即意象的设定，常规的以空对象为意象的做法，无更多信息传达，亦无助于信息传达，是一种徒增冗余的可视化;以情绪为意象的做法由于其抽象程度和表意当应用于所有空状态，这种重复容易让用户厌烦且无趣;而近来越来越多见的场景化表现形式，设计者对于意象的设定依旧未脱离于上述范畴，更有甚者，一股脑钻进表现形式中不可自拔，竟无明确意象的设定。

基于上述分析，笔者认为更合适的做法是：内容上表现所引导的行为(如有)，形式上以场景的构筑间接表达意象。此作法更丰满地引导了行为，表达方式上也更具感染力。

根据场景笔者设定了三类意象：

平台无内容：虚无

用户无操作：行为

异常情况：环境

对于「虚无」的概念，即以写实的方式在空间层面描绘出来，并让人置身其中，营造出一种孤寂的氛围。

对于行为及环境，笔者将抽象的概念具象化，以其为意象。以「用户未曾对相关对象发表评论」为例，对事物进行主观或客观的阐述是一种抽象的概念，难以直接可视化，因此笔者将视角落在了行为的表达或实施形式上，从中选择了「书写」这一动作作为意象，同时在构建场景时，打破人和物的比例关系并夸张处理，形成一种趣味性的观感，进一步触发用户的共情。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。