浅谈-APP缺省页设计的重要性

近一年公司项目所谓是“五花八门”，

陆陆续续接触的缺省页类型大概也有几十种之多，

现就近一年设计中遇到的问题和解决思路举例说明分享给大家~

• 目录
  
  01. APP为什么要设计缺省页？
  02. 常见的缺省页类型、案例分析
  03. 缺省页设计的重要性
  

01.缺省页的作用

缺省页在整个APP设计过程中的顺序是一个比较靠后的位置，但并不能代表它就可以被“忽略”，每一张页面的存

在都是以解决某种问题而存在，而缺省页的存在简单来说就是在没有具体数据出现的时候，页面应该以什么样的方

式呈现给用户，从而缓解用户没有得到数据的情绪并借机来引导用户展现利益点。

• 何物（What）：解释当下页面在讲什么？

• 何地（Where）：告知用户当前所在位置，以及接下来的步骤应该怎么操作

• 何时（When）:  解释什么时候会出现有效数据

上图是之前学习过程中从一篇大佬文章中看到的一个小总结，修改精简推荐给大家，描述精确到位，浅显易懂，

接下来我将以我工作中的实际案例带大家领会其中的真谛：

02.案例剖析

案例一： 这是一款医美类产品缺省页，主页面简单干净，主流以中高端收入稳定的女性为主，配色选用比较

通透明亮的苹果色为主，宣扬健康安全，整体饱和度比较温和，给人身心愉悦之感，加上一点粉红的点缀大气时

尚，而不失优雅，所以我缺省页采用了原有页面的搭配手法，加入职场女性现实生活案例进行渲染，增加代入感，

提升用户体验，宣扬产品文化，插画描绘上也采用了比较精细的雕琢手法，来提升整体高度。

案例二： 同上所述下面这款医美类产品，不仅在针对用户层上还是主页面的表达上都和案例一极其相似，同

时间内UI风格微调的两款产品用于数据测试使用，下面我就讲解一下同一命题多种答案的画法，我在设计时的心

灵感触。

首先在画法设计上案例一，二我从人体比例上拉开了两个APP的风格差异，其次在选景上一个采用大外景，一个

选用家居局部图描绘，从本质意义上区分人物性格和场景描述，从而反映不同层面人物面临类似问题所产生的不

同反应，两个APP的统一性都在于现实场景还原，夸大趣味性主题，活跃画面，提升用户体验，缓解用户情绪，

使用户产生共鸣，从而起到指引性作用。

设计中需要注意的事：在很多时候大家设计中为了跟竞品产生差异会故意更改大色调，或夸大表现程度，这个出

发点是好的，但往往有时候用力过猛事半功倍，下图（图一）就是在绘制过程刚开始由于两版产品的主题色过于

相近，我采用了大面积反色处理，将补色用于主色系上大面积渲染，虽然在一定程度上加深了画面效果，但却忽

视了缺省页应该保留的基本，用色上过于鲜艳，如果是用于大面积插画无可厚非作用很好，但用于缺省页这种小

面积点缀插画则起到了反向作用，颜色的过于表达则不利于缓解用户情绪，所以随后修改为图二，整体给人温和

清爽之感，以此来缓和画面，所以我们不管在绘制页面插画还是缺省页插画时都要考虑主次，学会变换思维，勇

于取舍。

案例三： 这是一款类似与手机清理大师一样的清理类产品，主页面非常简洁干净，烘托产品文化，主色系以

市场常见的绿色系为主宣扬绿色，健康干净安全的精神。

页面表达上尽量以简洁为主，减低主色系透明度，采用小图标形式表现，首先这些图标在一定意义上提升传达信

息，稳固画面层级，引导用户的同时也避免了画面过于表现的弊端，整体轻松欢快，干净大气，是一种很利于工

具类产品的表现手法，大家同类型的问题都以可以参照此法来展现画面。

案例四：  这款产品与其他产品类型皆不相同，从下图大家可以看出我抛开了以往简洁干净的表现方式，画面

则表现丰富，层级分明，不同于国内一些APP的表现方法，还记得在这之前我给大家说过缺省页的另一作用就是

取悦用户，展现利益点吗？

那么在这之前我们首先要明白的就是我们要取悦的用户群是谁？从而选出更具说服力的表现手法。

这款产品是针对印尼市场开展的一款APP，产品以金融类产品为主，主色系蓝色调为主传达安全便捷之意，做之

前搜集大量素材做足功课，印尼大多产品以撞色系列为主，他们的缺省页更多的在于活跃画面气氛，传达画面信

息，透露利益点，激发群众欲望，加上这款产品本就和金融类相关，设计中加入大量金币或权威图标配色上黄蓝

安全色为主，工具性图标层次化划分，实时还原操作场景，带动整体画面走势，由于做之前UI画面以形成框架，

大家在今后设计中如有类似问题且画面表现空间够大的同时，可以加大表现层度，时间允许的情况下更可以以大

场景画面表现，更具说服力。

案例五：相信这款产品是当社会比较主流趋势的一款产品，追星达人的神秘武器，在这里面你可以随时随

地和你的爱豆聊天语音，更能实时查看爱豆行程，查看数据青少年学生群体比较居多，采用比较欢快讨喜的手

法表现，首先为APP设计一套爱豆IP，实时拟人化表现，拉近人文距离，IP形象调皮可爱利于青少年群体喜爱，

所以缺省页也采用比较讨喜的手法，加入IP形象生动传神，实时显现当下概况，缓解用户情绪，调节画面氛围，

提升用户体验。

案例六：下面是一款来电秀产品的缺省页，也是当今比较潮流的一个趋势，在来电铃声响起时候可以设置

自己比较喜欢的视频画面，或动感撩人或静谧优美，类似于抖音微视频等视频软件，内部载入各种娱乐类学习

类灵魂段子，更有各地独特风土人情和优美壁纸展现，主题色采用比较流行的抖音黑，增加绚丽洋气的玫红色

点缀，主体用户偏年轻化，构图时尚大气，撞色的抨击感更具市场说服力，沿用APP整体趋势，缺省页采用绚

丽多彩的色彩搭配，搭配沉稳内涵的灰黑背景，简洁直白的图形化构图，好比点睛之笔一般点亮画面，引导全

局。

案例七：比较常见的购物类APP，整体APP主色系以红色等刺激色为主，考虑购物类产品内部通常会加入

大量活动接口或消费引导，以此来刺激消费，所以呈现画面都比较活跃欢快，所以缺省页在里面的主导作用多

用于缓和画面，缓解用户情绪，给出动作指引，所以整体采用灰色调为主，降低画面躁点，缓解用户在购物时

没得到相应数据的焦虑感，图标采用比较常见易懂的购物图形，因为多数用户对待购物内心已经有了一些特定

元素，借用这种特定元素告知用户当前的位置以及接下来需要做的步骤，并在特定时段提供行动按钮等从而给

出指引，在用户与产品交互时，也可借机展示利益点。

案例八： GET社交，正如它的名字一样在当今网络盛行，整体画面轻松可爱，以苹果绿和玫红为主年轻

欢快，社交类产品本质上会在一定程度上缓解用户的孤独感，趣味性的设计更能缓解压力疏解情绪，提升自

身积极效应，所以在缺省页设计上我选择了比较有趣有爱的画面，以此来呼应APP的整体调性，从而也起到

了强化品牌效应，突出产品文化，在发挥创意性的同时也展现了产品温暖人性的一面。

案例九： 日历类APP，主导用户以中老年为主，内部元素多以古典传统文化为走势，中心内容更是以黄

历运势，星座星宿等为主，设计中要考虑保留年代感的同时又不能过于凸显陈旧而显得俗气，考虑用户识别

度问题，缺省页内容大多选用具有说服力的年代感效应元素。

例如：重大节日提醒的时候用铃铛搭配响铃使用，找不到日期的时候采用古典日历撕夜效应，和生日当天采

用古今都用的蜡烛烘托气氛，在选用元素上要保留古今都通用的文化效应，从而保证在原有用户的基础上也

符合年轻用户的使用，整体采用红色为主符合传统文化讨彩头讨吉利之说。

03.  缺省页设计的重要性

看了这么多案例，你们还感觉缺省页设计草草了之就可以了吗？

通常设计师们习惯用丰富的数据内容把页面设计得美观实用，考虑的都是界面展现的“理想状态”，往往却

忽略了没有内容的“缺省状态”，就因为这类页面或出现频率低，或显示时间短，所以很多人都是抱着“随

便搞搞”的心态，却因此大大降低了APP的整体美观度，甚至拉低之前的设计高度...

其实，好的缺省页设计真的很重要...

缺省页设计不光在操作异常状态下给予用户反馈，提示页面信息，安抚用户情绪；更重要的是用“空白”触

发用户的操作行为，营造良好的用户体验。

在设计方法上或简单明了或委婉或直接，或有趣或严肃。市场上大半的缺省页往往未经过精心设计内容枯燥

乏味，平平无奇，表现层面上错了就是错了，失败就是失败，没有就是没有，单向反馈结果，没有进一步的

指向性，从而降低了用户的使用体验，并可能给用户带来困扰，其实这个问题归根溯源就是很多人一开始就

对缺省页有错误的认知，认为他不具备重要性，换个角度想用户在购物时且会为了喜欢一个颜色而买一件价

值不菲的物品，但在页面展示上，整张大的页面又怎能被轻易忽视...

弱而不轻，少而不空

不要放过任何一个走进用户心里的机会

样式1：图案＋文字

样式2：图案＋文字+指引

样式3：图案＋文字+功能入口

从形式上1—3，用户体验好感是递增的，即1＜2＜3

上面一些案例都是近一年来设计中遇到的一些问题和个人的一些观点，希望能给遇到同等问题的小伙伴一点点帮助，

有人说我一个小美工操足了产品汪的心，乖乖按交互原型来不好吗，想这么多~

恩，是的，心好累，我只是个小美工~~却也想尽微薄之力去改变趋势~~

我很小但很韧，坚韧的韧~

梦想很大路程很远~我一直在路上~

~加油~~~

最后再说一句，好的缺省页设计真的很重要哦~~下次再见~谢谢支持~