“丰富友好”的缺省页设计_手机端

简介: “丰富友好”的缺省页设计_手机端

image.png

近一年的工作主要是移动端APP设计为主。在这期间我发现设计过程中大家很容易忽略的一个部分就是缺省页。大部分人习惯性是根据原型输出设计稿,然后切片...


但程序员哥哥们经常会问你,这个页面没有数据的时候我应该显示什么内容?所以做个小提醒:希望大家都不要忽略缺省页这个必要的存在。这是考验页面细节,提升页面友好度的重要环节!


缺省页:顾名思义就是出现在用户没有任何行为下的空白资料或者网络存在问题所展现的页面。通常我们在设计的时候习惯性用丰富的内容或者数据把页面设计得美观实用,考虑的都是界面展现的“理想状态”,往往会忽视没有内容的“缺省状态”。


事实上这几年用户对体验的舒适度要求越来越重视,这一小块的细节也备受关注。用户打开页面后会感到很糟心,通常会出现以下页面:

image.png

往往这样的页面让用户看到后都会有一种挫败感,那么什么样的方式才更友好呢?

1. 常规情况下用户可能是第一次使用你的APP,那在他第一次到访的情况下是不是应该用更简洁的方式告诉他这里应该是些什么。比如说:

image.png


2. 有一些页面我们也可以花点心思告诉用户为什么这么做,也就是隐形的页面介绍。可以加一些有情感的文案描述+图标:

image.png

3. 当然也可以是一种操作指引,在页面中提供最直接的按钮指导用户操作:

image.png

 

 

总结:缺省页是基于用户对这款APP的初次使用表达最友好的方式之一。可以是告知用户操作方式,也可以是让用户有被情感的交流。所有设计都应该知道:用户的耐心是设计的最好反馈。希望每一次设计大家都能把握住与用户对话的机会!


最简单直接的小tip,缺省页很重要!


目录
相关文章
解决使用-webkit-app-region后鼠标点击失败的问题
在开发中,如果我们想要实现窗口拖动的功能,可以通过给相应的元素设置 -webkit-app-region: drag 属性来实现。然而,这样做会引发一些问题,包括当前元素权级高于其他元素、无法触发鼠标相关事件以及双击全屏和还原窗口大小功能失效等。本文将介绍如何解决这些问题,实现既能拖动窗口又不影响窗口内部元素的需求。
2096 0
|
JavaScript vr&ar
vue3通过ref获取dom元素并修改样式
vue3通过ref获取dom元素并修改样式
1094 0
|
前端开发 应用服务中间件 nginx
Next.js 创建项目到服务器部署(目录结构介绍、项目结构Demo、开发细节注意)
Next.js 创建项目到服务器部署(目录结构介绍、项目结构Demo、开发细节注意)
1488 0
|
1月前
|
传感器 数据挖掘
为你的数据选择合适的分布:8个实用的概率分布应用场景和选择指南
面对真实数据不知该用哪种分布?本文精炼总结8个实战必备概率分布,涵盖使用场景、避坑指南与代码实现。从二元事件到计数、等待时间、概率建模,再到小样本处理,教你快速选择并验证合适分布,用对模型显著提升分析准确性。
228 10
|
Java Serverless
Serverless 实战 —— 快速搭建 SpringBoot 应用
前言 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。
14164 0
Flowable流程的挂起与激活详解
Flowable流程的挂起与激活详解
748 1
|
11月前
|
监控 Java 开发者
Java虚拟机(JVM)深度优化指南####
本文深入探讨了Java虚拟机(JVM)的工作原理及其性能优化策略,旨在帮助开发者通过理解JVM的内部机制来提升Java应用的运行效率。不同于传统的技术教程,本文采用案例分析与实战技巧相结合的方式,为读者揭示JVM调优的艺术。 ####
323 8
|
存储 缓存 JSON
ZoomEye-python工具使用详解(二)
ZoomEye-python工具使用详解(二)
191 0
|
JavaScript 前端开发 API
每个前端开发人员都必须知道的 7 个 Vue3 组件库!
每个前端开发人员都必须知道的 7 个 Vue3 组件库!
|
Linux
langchain 入门指南 - 使用提示词模板
langchain 入门指南 - 使用提示词模板
459 1