在日常的设计稿中，总觉得自己已经把各种状态想的很全面了，但是等到交付开发后，又经常遇到开发过来问我：『这个地方文字过多的时候怎么展示呢？』『最多展示几个字符呢？』『没有内容的时候展示什么呢？』

Oh，NO！为什么还有这么多情况没有考虑到？！

所以我总结了日常工作中在设计稿交付时，容易忽略的几种特殊状态。目前只总结了6种，后续发现新的再陆续补充到文章。

目录：1.自适应控件的极端情况2.页面特殊状态的展示：空状态，加载状态，无网状态3.页面头部上滑效果（有背景头图的情况）4.页面下拉效果5.页面底部6.图片展示方式

1.自适应控件的极端情况

对于尺寸不完全固定，长度根据内容多少而定的控件（内容越多，控件越长；内容越少，控件越短），需要考虑控件极端情况的展示效果，即控件最长展示到多长，如果内容超过最大长度如何处理。

最大长度是控件尺寸固定，还是根据屏幕的长度做自适应。

如下图一，是控件尺寸固定的效果，不管是正常屏幕还是长屏，都是固定的尺寸来做适配。

图二是控件尺寸距离屏幕顶端的距离固定，这样，屏幕越长，控件高度越高。

2.页面特殊状态的展示：空状态，加载状态，无网状态

空状态:一般的空状态是展示空状态图+说明文字，个别的可能会添加跳转连接。

加载状态：页面加载中的占位图

无网状态：与内容为空的状态比较类似，通常都是显示状态图+说明文字，并附加上提示用户无网络的解决办法。

3.页面头部上滑效果（有背景头图的情况）

对于有背景头图的页面，需要考虑页面上滑时头部的展示效果。通常处理方式有以下几种：

a.背景头图随内容上滑 / 被内容覆盖，导航渐变为白色

b.背景头图不动，内容在规定区域内展示（通常用在无顶部tab或者顶部tab位置固定的页面）

c.背景头图上滑一部分，内容在规定区域内展示（通常用在有顶部tab，上滑时导航栏隐藏，且顶部tab会随着滑动上移的页面）。这种情况还需要说明上滑位置是跟随手指滑动，还是到达一定阈值后自动上滑。

4.页面下拉效果

需要说明下拉时，哪些元素在顶部固定，哪些元素下拉。（通常导航固定，下方的内容随手势下拉）。还有下拉时的loading显示效果。

5.页面底部

页面底部通常的处理方式是：展示提示文字，类似于『已经到底了』（一级页面的底部有的也展示产品Logo）；或者规定最底部元素距离屏幕下方的距离，显示空白。不管采用哪一种方式都需要说明，否则开发可能不会单独处理这部分，导致最底部元素紧贴着屏幕底部。

6.图片展示方式

图片的处理有以下几点需要单独说明：

a.圆角。如果图片要做圆角处理，要单独说明，否则开发可能默认圆角是下发的图片自带的。

b.图片尺寸及后台下发图片异常的处理。通常我们会在效果图里展示图片最佳的展示效果，但这个尺寸是固定死的吗？如果后台下发的图片大于或小于效果图的尺寸时，前端该如何展示？宽度固定，高度按照下发图片的尺寸等比展示，还是进行裁切？这些都需要特殊说明。

c.遮罩蒙层的说明。当图片作为背景使用时，为了上方元素的清晰展示，通常会在上面添加黑色半透蒙层。对于蒙层最好做一下特殊说明，否则开发可能默认下发的图片就是自带遮罩层的。