这次！！！

不搞毒鸡汤了！！！

发自灵魂的拷问！！！

☝️：你通常做缺省页是怎么做的？

☝️：你做缺省页有深度思考过吗？

☝️：你想过缺省页能为用户带来什么吗？

☝️：你见过有多少种缺省页的表达形式？

☝️：缺省页只有常见的插图+文字表达方式吗？

缺省页用于指示在移动端APP界面中，加载错误、没有内容数据等视觉页面的补充，也可以理解是对零数据的情感化设计。但是呢，用页面中“空”来描述其实是不合理的，因为缺省页面中其实还有一些信息。

在用户进行，任务或事项被清空，用户主动促成的空状态界面，比如垃圾邮件、广告邮件列表，有些用户会有清空这些邮件的习惯，清空了之后自然而然就会出现一个空状态。其次就是，当用户进行检索或者筛选的时候，没有符合的结果，这样子沉陷出来就是空状态。

在用户初次使用一款产品的时候，特别是UGC应用的app，又是第一次打开，用户什么操作都没有，当然页面是空白啦～所以经常会出现无数据的页面，比如说空着的购物车，空着的聊天列表，这时新用户对产品本身也没有太多的了解，需要我们来告知引导用户接下来要怎么去使用产品，就像老师一样，降低用户的学习成本。

比如说在行动指令中给用户明确的操作目标，如去看看，点个赞，去逛逛等等。

空状态出现在异常流的时候。比如说，当网络错误的时候，可能就会出现空白状态。当然，这个原因也很简单。本来是要app里的一个新鲜的视频吸引你的注意力，突然你的手机欠费或者是WiFi路由器拔掉了，页面加载不出来了，所以当然就是空状态咯。

所以，一般来说，页面出现错误的时候也会有错误的提示描述。如果，只是有空洞的文案告诉我们因为你的客观原因导致你看不到这个界面，用户心里会感觉很不舒服的。在原本用户不富裕的心情上雪上加霜。所以，如果，只有两三行文案没有具体的引导告知用户如何进行操作，这种情况跟页面空白没什么太大的区别。

“将情感融入产品设计，将解决设计师们的长期困扰，即产品的实用性和视觉性的主要矛盾。”对于缺省页来说，增加兴奋、畅快 、情感和期待是在产品设计的过程中创造更好体验的方式。

产品表现不佳导致负面情绪，如操作复杂等设计问题，加载过慢、数据丢失等性能问题，搜索结果不足等内容问题，都容易让用户在操作过程中产生负面情绪，所以我们在缺省页设计也中也是如此，为了缓解用户因为等待所产生的绪，避免负面情绪产生是很必要的。所以我们就需要通过设计来缓解用户的负面情绪。

人的记忆分为短期记忆和长期记忆。大脑是记忆的宝库，人脑经历过的事物，思考过的问题，体验过的情感和情绪，练习过的动作，都是人们记忆的内容。比如说在上线新功能、新交互方式时，要在使用前或使用中给用户恰当的引导，以帮助用户学习使用产品。所以在设计中感情化设计可以帮助我们引导用户减轻用户的记忆负担。

既然在打开页面的时候影响到用户的体验，就把有趣的内容或者功能部分直观的填充在空白界面当中，这样就不是空空的界面了

对于信息浏览页面这是一个非常好的解决办法

增加产品对用户的吸引力，在整个使用的流程上用户路径不会轻易终止操作。

界面展示用户产生的内容时，用户并没有产生内容，需要我们来指引用户产生内容，可以有效激活用户操作，还可以解决用户在不知道生产内容的入口在哪里。

情感化设计是完善产品，提升用户体验的关键，比如说用活泼的插图+趣味性的文字，让用户根据目标引导设计，划定规则和目标路径，引导用户参与其中，让用户和产品之前的互动联系，产生情感互动。

板块隐藏也是在app里比较常见的一种手法，当页面各别某个板块内容信息为空的时候，可以考虑整个板块直接进行隐藏掉，能消除用户在这块信息获取的负面感知。

前面的几种方法，都是在弥补当前任务为空的时候而产生的差落感。但是，我们的操作行动中还处于当前页面。在当前页面中已经完成任务或者是没有任务，这时候就要考虑到新的办法了。比如说给用户提供新的任务，让他忘记原本的任务，自然而然就不会有挫败感了。

通常缺省页的引导模块都局限于解决当前任务。如果碰到没有解决的方案情况下，可以提供给用户具有情感共鸣的新任务，既能消除挫败感，又能转移注意力。例如：淘宝的购物车中，购物车里没有添加任何商品，界面当中除了会显示提示状态之外，还会显示你可能还喜欢的内容推荐，将缺省页和系统推荐相结合。

这是我无意当中发现针对缺省页面还有一种其他的解释，使用缓存的方法把之前的内容存储下来，在展示页面的时候先展示缓存的内容，再加载新内容，这样就非常简单地把空状态消灭了。现在大多数的资讯浏览类的页面都会采用这种方式，比如说朋友圈，淘宝等，以至于大家都习以为常了，其实这也是消灭空状态的一种方式。

根据产品特性来判断，工具类、金融类等同类型产品不适合使用缓存；因为用户交互操作的数据必须保持实时性与真实性。而内容型、电商类等类型产品适合使用缓存来代替缺省状态；缓存内容可以代替产品的缺省状态，安抚用户操作失败所带来跳出率过高的风险。

除了常规的元素（字体、按钮、图片等）需要对齐外，布局也需要满足这一点。大方向的布局过于统一会造成整齐感，当布局中的常规元素满足对齐这一规律后，布局与布局之间的对齐更是需要被考虑到的。

界面中通常包含多个布局，每个布局中的元素因为存在一定的关联性而被放置在一起，因此相似且有关联的元素可统一成为一个布局。

缺省页面中将信息层级通过这种方式罗列在用户眼前。让用户最近视角展示产品的核心信息。提炼出用户在场景中最为关注的诉求，解决用户的问题。

这样的对齐方式有个好处就是让浏览者的视线集中在该区块内容上，其次从样式上的不对称感可以增加界面的层次感和设计感，这样的排版可以比较灵活的开发适配。

由于有的APP中业务繁多场景复杂，有的存在多重信息导航，有的存在二级内容，有的甚至是在场景中间可能会出现异常，从而导致目前各个业务异常场景结构不一，这里是需要统一认知的。

通用场景规范适用于App中网络异常、限流等全局异常场景，这些场景中除了异常提示信息没有别的内容出现,文案可配置，相同场景统一为一种文案。

场景中第一级内容为空或者异常，并且只存在第一级的TitleBar，比如聊天为空等场景。

一级内容一般高度无法控制，故仍然需要设计师配合各自链路开发适配组件位置，例如他人信息，消息，关注等场景，图示给出场景示例：

很多人可能会忽略掉屏幕中各种场景，导致缺省图放置的位置偏上或偏下，导致视觉感官非常难受。

以下是可能出现的页面布局，设计时也需要考虑到各种场景的布局来进行设计。

记住啦～以后可不要犯这些错误啦～以下就是非常非常非常不合理运用对齐的视觉案例：

图标➕文本的形式是比较主流的空状态内容，优点是从视觉上传达信息帮助用户理解当前所遇到的问题或者是状态 ；缺点是没有配合用户所处场景的解决方案。

这类缺省设计形式一般应用于表达系统性无响应或初始空白态的缺省场景。视觉图案一般使用 app 吉祥物或主色调延展出的 icon 或插画来表示缺省状态；文字：通常为「标题」结构；描述文案则说明结束缺省状态的解决办法，如「请检查网络是否顺畅」 等等。

在图标➕文案的信息模块的基础上增加了一个操作按钮，目的是为了更快直白地告知用户此页【无】的状态，其二是根据产品的类型，可以使用按钮来指导用户，这些明确的行动指令会比其他文案更引导用户点击。

此类缺省设计形式一般运用于需要用户引导操作来达到业务目标的缺省场景。在视觉图案+文案的基础上加入引导模块，主要作用于避免用户在数据边界的状态下，会因为无法达到操作目的而提高的跳出率。

希克定律指出，【做出决定所需的时间会随着选择的数量和复杂性而增加。】当操作要求最多保持在一个或者两个时，用户可能会更快地采取行动。

缺省页的页面布局分为以上六种形式分别是：图标+单行标题，图标+单行标题+描述文案，图标+单行标题+按钮，图标+单行标题+描述文案，图标+单行标题+超链接，这6种结构的方式来展示。

「场景」在百度百科里的定义是：戏剧、电影中的场面，泛指情景。

情景又指

(1) 感情与景色。

(2) 情形；景象。

(3) 环境：假设是在这个情景。在戏剧或影视剧里，场景由人物，时空，事件（行为），环境（社会环境和自然环境）等要素构成。

把插画和场景很好的结合在一起，可以创造令人难忘的构图，拉近与用户的友好度。

2.5D矢量插画是这两年非常流行的一种插画风格，也叫2.5D轴侧等距插画，简单理解就是带有3D效果的二维画面。画风上看：

·   清新的色彩和集合线条搭建的色彩空间

·   渐变色来衬托背景空间，构造一个奇幻的空间。

·   同类色、互补色、类似色搭配出简单的几何形状，重构建筑空间。

扁平化风格是一种极具有设计感的表现风格，其最特殊的部分在于图像减法处理。扁平化插图的配色有一定的特带你，过于繁杂的配色会削弱图形的特点，从而造成视觉信息传递不够清晰简明。它并不是还原事物的真实性，而是应该提炼出事物特点，用简练概括的手法将事物直白地表现出来。

是来自 Dribbble 一位设计师 MBE，他的作品风格设计十分特别，简约、有趣、好看，这可以算是一种创新的风格，暂称为 MBE STYLE 吧，目前已有小部分追波设计师也开始绘制类似风格的设计作品，也许MBE 风格能像长阴影一样，成为一个小的设计趋势。

·   特粗的深色描线

·   Q 版化卡通形象，使其幼稚、可爱

·   圆滑的线条

·   鲜明的颜色配色

·   没有渐变颜色

·   能快速矢量绘制

线条分为两种基本形式：一种是实体的线，另外一种是感觉中存在的线。线与点、面相比具有极大的灵活性，它可以任意变换方向，形态，也可以始终保持自身不变；它即可以表现严谨的形象，也可以赋予形体以赋情性的动感。插画的基础就是线条，线条的样式能够表达作者所要传达的观点及作品的内容。我们需要把画面中线条的样式，完整地，有粗细的，有曲直，有长短，主次，有疏有密的表现粗来，并通过赋予形体以赋情性的动感。

在渐变的色彩当中，适当加入噪点，能够让原本柔和的插画当中信息量更大，让整体给人的感觉截然不同。噪点插画是将页面叠加了颗粒肌理的插画,也可叫作颗粒风插画。

噪点插画大部分被运用在大色块、画面元素简单、缺少细节性装饰元素的画面中。

噪点肌理常叠加在元素的高光及阴影处，通过颗粒感疏密的形式代替渐变的效果。

噪点常被用于商业插画中居多，且近几年越来越受到追捧。和2.5D风、流体渐变风等一样，噪点插画也具有+分独特的风格与优势。增加画面的细节感和质感，互联网快速迭代的生产方式不利于设计师慢慢描绘画面的细节。在时间不是很宽裕的情况下，在画面中添加噪点，可以增加图形的细节和整体的质感。

品牌价值作为用户潜意识层的影响因素，是一个需要持续发力的设计层面。成熟的产品团队都会结合自家产品特色，历史品牌建设来打造专属品牌形象，如钉钉的钉三多、飞猪的小飞猪等，一个形象打造好可以发挥极大地品牌价值，占领用户心智，从而间接提高市场占有率。打造专属品牌形象，与幽默风趣的主题插画配合，讲故事、谈理想、获取共鸣，强化品牌观一气呵成。而空状态界面正是其优质的载体，制作精良的品牌主题插画更可以缓解用户焦虑、张扬产品个性，与竞品构成差异化。

 

icon的一致性要做好（风格，视觉大小，粗细，圆角，复杂程度及特殊元素上要保持统一），线性图标要保证控制描边的端口、转折选择圆角或者直角的处理方式；面性图标；伪2.5d；3D；在不同形状下，各个统一区域各个尺寸icon视觉尺寸统一和谐。

图标的圆角，卡片的圆角，icon的风格与统一度，做好图标的一致性（风格，视觉大小，粗细，圆角，复杂程度及特殊元素上实现统一）

合理的运用不同程度颜色的规范，颜色与颜色之间的互补、颜色与颜色之间的对比，用色平衡度的规范，在视觉设计中的色彩的运用极其重要的。

灰色，是一种介于黑色和白色之间的颜色，总体可分为深灰色和浅灰色。而灰色的色值为(128,128,128)。它又称为无彩色系，即没有色相和纯度，只有明度。灰色给人的感觉是比较沉稳的，最常在文字、背景、边框、分割等场景中应用。在我们使用的过程当中要注意避免使用纯灰色，在纯灰色上加偏向产品的品牌色，整体色调视觉上会很统一。

灰色+彩色点缀运用了60％+ 30％+ 10％的比例是为了平衡颜色。因为它可以创造一种平衡感，让眼睛从一个焦点到另一个焦点舒适地移动。60％是你的主色调，30％是次要色，10％是强调色。用10%的强调色来吸引用户的设计情感，当然（主色、辅助色）给人的感觉也是大大不相同的。

在选择彩色的时候，我们可以选择品牌色作为我们的主色，因为色彩是设计当中很重要的一部分，在竞争激烈的互联网行业当中，好的品牌色能够帮助用户深入人心，想让色彩走入用户的心里，就要把品牌色和产品结合起来。同时品牌色是提现企业和产品品牌形象的文化理念重要元素，当然每一种颜色的寓意和文化带来的视觉感受也是不同的。

在质感上我们要注意界面的风格和产品的风格要统一再决定是扁平还是拟物风格；常用的质感是投影，阴影来源于现实生活的反映物体与物体之间距离的物理现象。在界面中，我们往往通过模拟元素的投影直截了当的来告诉用户，元素之间的高度距离与层次关系。

在做投影的时候从以下几个方面来思考：

阴影是由两个不同阶层的平面产生，且强度由两者之间的距离决定。所以物体的高度直接影响物体的阴影，对象离地面越远阴影越大，模糊值越高。

阴影的方向是由光源与物体的相对位置所决定的。假定光源所处高度不变，光源与物体的距离和物体与阴影的距离成正比。光源越远，则阴影距离物体越远。阴影的方向在界面里通常使用  坐标轴来表示。

综上可知。阴影由光照而产生。主要影响其值的是物体高度与光源位置：

在不同高度上时，投射出的阴影颜色、模糊度、面积都有所区分。离地面越远的物体，产生的阴影颜色越淡、模糊度越高、面积越大；反之则颜色更深、模糊度越低、面积越小；而投影的方向主要由光源与物体的相对位置决定。投影的位置可从阴影向下、阴影向上、阴影向左、阴影向右4个方面。

渐变

微质感

界面动效能加强用户认知且增加活力。“界面动画”事实上是更高等级的设计展现形式：表达界面元素在即时和非即时事件下的行为动作。

首先很重要的一点是，要区分“状态”和“行为”。用户体验中，状态是静态的，作为设计上的补充属性；而行为是基于时效和动态的。举个例子，一个元素能够被遮罩，这个遮罩可以是一种状态，也可以是一种行为。如果是行为，那么动效就可以加入，帮助提升可用性。

除此之外，所有的交互行为，从是时效性上，可以被分为即时发生和非即时发生。即时表示用户是直接与界面元素进行互动的；非即时表示界面元素的动作是在互动之后的：作为过渡，在用户操作之后才出现。

区分这两个概念很重要。

即时交互也可以被理解成“直接操作”，因为这种用户与界面元素的交互是直接而同时的。非即时交互通常在用户操作之后才发生，并且在过渡完成之前，都不允许用户进行其他交互。

语言是表达情感的主要载体，情感是语言传递的重要信息内容之一。“语言对于人们，不但只是表现他们的思想才有用，一样地为了表现他们的感情才是有用的。”如果在某一语言中缺乏影响人情感的成分。那么，这种语言只能属于教育活动的范畴。因此，了解语言的情感化，掌握和使用情感化的语言，就为了语言添增了“润滑剂”，使语言传递过程中，产生“情感效应”，大大提高语言交流的艺术感染力和信息传递的效果。

我们在界面中使用图形和色彩勾画故事，并用文案情感化表达来传递情感。我们设计的初衷很简单，就是想让界面表达可以更加有趣些。当用户看到故事和文案，能够会心一笑或者是吐个槽。

用户在用一款app的时候，就像两个人相识的过程。生活中，我们会通过一个人“言谈、举止、穿着、外貌”去认识他/她。然鹅在界面设计中，“图形➕色彩”就像是一个人的“穿着和外貌”，“交互”就好像人的“举止”，“文案”就像是人的“言谈”，就仿佛是软件对用户说的话。

以下是部分栗子    以上就是本篇文章【你真的觉得缺省页就只是缺省页吗？】的全部内容了，欢迎阅览 ！ 文章地址：http://lanlanwork.gawce.com/news/10393.html 
     资讯      企业新闻      行情      企业黄页      同类资讯      首页      网站地图      返回首页 阁恬下移动站 http://lanlanwork.gawce.com/mobile/ , 查看更多