设计稿交付时容易忽略的几种特殊状态

小提示：您能找到这篇{设计稿交付时容易忽略的几种特殊状态}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的设计稿交付时容易忽略的几种特殊状态内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.页面下拉效果

5.页面底部

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

6.图片展示方式

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

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

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

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