设计规范 | 详解组件控件结构体系-空数据类

news2024/8/28 19:23:35

UI设计师或产品经理在设计产品原型时,大部分情况都是先设计主流程的主界面,然后设计其他各个场景的界面,最后设计异常界面、空数据界面等等。那么,空数据界面一共有哪几种类型呢?这篇文章我们来看一下设计规范中的空数据类型。

空数据类型一共有三类:

  1. 初始状态
  2. 清空状态
  3. 出错状态

依旧附上一张脑图,组件控件分类(如果单纯通过组件控件,难以满足功能划分的需求,所以我将这个范围扩大,分类里面不仅仅含有组件和控件,所以请不要在意细节。)

初始状态

定义:初始化状态,没有任何内容,需要用户进行某种操作才能产生内容的界面。

用途:提示用户需要进行某种操作才会出现内容,并不是没有内容。

例如京东App,当用户没有把商品加入购物车时,进入购物车界面,会给出提示购物车界面为空,给出用户提示后,给出相对应的入口按钮,引导用户操作。如果直接给出一个空白界面,那样的话用户可能以为该界面出bug了,不知所措。

Gmail直接用一个插画提示用户收件箱为空。

初始状态的组成部分:

  • 相关插画/图片
  • 解说文案
  • 操作入口按钮或可点击文字(非必须)

一般对于初始状态的设计,常规做法是简单的插画配合简洁的文案,必要的时候给出引导用户操作行为的按钮。

现在流行的设计趋势是插画越轻量越简单越好,以免抢夺了文案信息。

清空状态

定义:通过删除或其他用户操作,清空当前的页面内容,产生了空界面,这时候需要有明确的提示,且告知用户该如何处理。

用途:提示用户该界面为空数据的原因是用户删除了内容。

清空状态是对初始状态的进一步细化。清空状态的界面和初始状态设计很相似,唯一不同的是文案的提示。

清空状态的组成部分:

  • 相关插画/图片
  • 宣传解说文案的
  • 操作入口按钮或可点击文字(非必须)

有的产品设计直接把清空状态的界面按照初始状态来设计,这样也是可以的,缺点就是没有告知用户产生空状态原因是初始化还是清空所致。

出错状态

定义:由于网络、服务器或者没有找他其他结果等原因导致无法加载内容,产生了空界面,这时候需要有明确的提示,且告知用户该如何处理。用户操作反馈的无结果界面也可以用这样的思路来设计。

用途:告知用户当前产生的空界面是由于某些原因出错所致。

例如知乎在网络异常时,页面加载不出来,出现空数据页面,给出文案提示和点击重试按钮。微博国际版也给出文案提示,小插画和点击按钮

在对信息进行搜索,无法获取数据时,产生的空数据界面。例如iOS原生邮件在搜索不到内容时,产生的空数据状态界面。而网易考拉在搜索无结果时,给出新的解决方案。

原有界面内容被删除时,用户点击进入时出现的出错状态。例如QQ浏览器,通过新闻列表点击,进入新闻详情,由于文章被删除,会出现出错状态的提示。

相关文章:

《设计规范 | 详解组件控件结构体系-导航类》

《设计规范 | 详解组件控件结构体系-加载类》

《设计规范 | 详解组件控件结构体系-引导类》

《设计规范 | 详解组件控件结构体系-网络异常类》

作者:Echo(微信公众号:UEDC)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://bk.xjx100.cn/news/101881.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

最小可行性产品经理—第三章(开发篇)

【国外设计翻译 第33弹】 最小可行性产品经理(MVPM):掌握设计、商业、开发交叉的技能和知识可以使你成为一个高效的全才产品经理,几乎可以处理任何问题。之前我们讲了最小可行性产品经理的第一章-设计篇:包含设计模式,用户调研,如何把创意变为原型等相关知识。 也讲了最…

网页显示502 bad gateway错误怎么办?

解决“网页显示502 bad gateway错误”的解决方法有三种,一是关闭代理;二是关闭不必要的程序;三是无线网络的连接。以下用Windows 7系统华硕笔记本电脑给大家演示一下。关闭代理01可能是浏览器使用了代理服务器,点击右上角的“设置图标”,然后依次点击“工具——代理服务器…

支付宝大牌帮你还花呗怎么获得爱心?

操作方法01打开支付宝app,在下方的导航栏中点击“我的”,然后在该列表页上找到“花呗”并点击进入。02进入后会弹出一个大牌帮你还花呗的活动弹窗,点击上面的“去看看”按钮。03如果没有弹窗,点击在页面顶部的“去看看”按钮,或者直接点击页面中间的banner也是可以进入活动…

5个人像摄影经典构图

我们平时拍摄时,效果并不理想,你知道问题出在哪里么?其实问题很简单,就是构图。如何了解这些方位的特点?如何选择合适的方位构图?下面我们来介绍几种常用的构图方位。小贴士:能够清楚地展现出被摄对象正面的形象特征,让观众可以看到正面的全貌。小贴士:使用侧面构图,…

如何突破瓶颈成为人像外拍达人

每个人好像都需要经过这些历程,才能让自己不论是技术或眼界,逐渐提升到自由挥洒的创作境界。与其说是拍照遇到瓶颈,不如说是拍到即将进步,或是将要提升层级的前兆。 对于瓶颈这件事,把摄影当作单纯兴趣的Nova,似乎不太有压力,甚至许多时期的进步,还是外拍摄影的过程中,…

教你如何拍摄熟悉的场景

当你将目光投向世界,准备开始拍照时,一切事物都变得新奇而有趣。你对于周围的一切开始觉得陌生,用一种新的视角观察它们。邻居的花园、每天都经过的办公大楼,甚至很普通的东西,比如硬币或者钥匙扣——所有的一切都能拍成非常好的照片。高线公园,纽约市摄影:Diane Cook a…

全是宝!20款优质高效的在线协作工具任你挑,就是这么强大!

如今,互联网飞速发展,改变着我们生活方式的同时,也改变着我们的工作方式。尤其是对一些产品设计相关的公司机构或团体而言,网络不仅为其设计提供源源不断资源和灵感,而且也为成员之间的沟通协作提供了更大便利。事实上,在一款优质在线协作工具的帮助下,即使是来自世界不…

视觉设计文档的整理规范_KSOUEC设计经验分享

@金山办公用户体验中心 做出一份赏心悦目的设计文档是设计师进阶的必备能力,下面看看KSO UEC的文档整理规范吧!文章内规范了设计师工作文档及设计文件图的整理以及命名规则,希望可以帮助到大家的日常工作。UI中国 作者:金山办公用户体验中心_北京

如何解决电脑右键找不到属性选项

我们在电脑的使用中,经常会遇到右键选择属性的情况,若右键没有属性选项该怎么办呢?今天就跟大家介绍一下电脑右键找不到属性选项的具体解决方法。1. 首先按键盘上的win R组合键调出运行窗口,然后在运行窗口输入如图命令,确定或回车,打开本地组策略编辑器页面。2. 在打开的…

怎样解决电脑软件闪退问题

我们使用电脑,可能会遇上这么一种情况:电脑系统用着突然卡顿,正在运行的软件一下全都定在那里或者闪退了。如果是正在使用电脑办公的朋友,这时候一定会崩溃。无论是手机还是电脑,都会出现这种情况。其实是因为运行内存不够而造成的,只要我们主要一些事项就能减少这种情况。…

如何查询笔记本电脑中的wifi密码

使用笔记本电脑的用户,忘记了自己家的wifi密码,因此想要在笔记本电脑上查询wifi密码,但是却不知道如何查询,那么小编就来为大家介绍一下吧。具体如下:1. 第一步,点击桌面左下角的开始图标,接着点击箭头所指的控制面板选项。2. 第二步,来到下图所示的控制面板页面后,点…

中国移动网上营业厅的月账单如何查看

我们想要查看移动号码的月账单消费情况,该怎么操作呢?今天就跟大家介绍一下中国移动网上营业厅的月账单如何查看的具体操作步骤。1. 解锁手机后,找到桌面上的中国移动网上营业厅app,打开2. 在打开的页面,向左滑动常用栏,找到账单查询选项,点击。3. 如图,在打开的我的账单…

怎么在PR软件中创建遮罩

我们在使用pr软件进行视频编辑的时候,想要给视频添加遮罩来对视频部分区域进行覆盖,该怎么操作呢?今天就跟大家介绍一下怎么在PR软件中创建遮罩的具体操作步骤。1. 首先打开电脑上的Pr软件,进入主页面后,将我们想要编辑的视频素材导入软件中,然后将素材拖放到时间轴上。2…

手机QQ如何打开“坦白说”功能

有的 朋友在使用QQ时喜欢它最新推出的坦白说功能,那今天小编跟大家分享下手机QQ打开“坦白说”功能。具体如下:1. 首先我们需要在手机中打开QQ。2.输入账号和密码进行登录。3. 进入主界面之后我们再点击底部的“动态”。4. 然后在打开的动态界面中我们找到并点击“坦白说”。…

如何将wps内的只读模式取消

当我们在使用wps处理文档的时候,如果发现文档处于只读模式而无法进行编辑的话,应如何取消只读模式呢?接下来就由小编来告诉大家。具体如下:1.第一步,打开一个处于只读模式下的wps文档。2. 第二步,进入文档主页后,点击上方的审阅选项。3. 第三步,在审阅菜单中,点击右侧…

怎么在Photoshop中快速填充矩形的颜色

电脑版PS软件被很多人使用,用来编辑图片等,有的用户在使用该软件时,想要快速填充矩形的颜色,但是却不知道如何操作,那么小编就来为大家介绍一下吧。具体如下:1. 第一步,双击或者右击打开Photoshop软件。2. 第二步,来到下图所示的页面后,点击箭头所指的新建选项。3. 第…

如何更改电脑版PPT的放映方式为手动

电脑版PPT软件被很多人使用,用来制作幻灯片等,有的用户在使用该软件时,想要更改幻灯片的放映方式为手动,但是却不知道如何更改,那么小编就来为大家介绍一下吧。具体如下:1. 第一步,双击或者右击打开PPT软件,接着新建空白幻灯片,然后插入一张图片,并根据自己的需求,来…

win10系统下的qq开机自动启动如何关闭

今天给大家介绍一下win10系统下的qq开机自动启动如何关闭的具体操作步骤。1. 方法一,进入电脑桌面后,在任务栏空白处,右键,在打开的菜单中,选择任务管理器选项,打开。2. 在打开的任务管理器页面,上方切换到启动选项。3. 在启动列表中,找到qq图标,右键,在打开的菜单中…

如何连接多个路由器

有时候在连接路由器的无线网时可能由于距离受限导致信号变差,为了增强信号可以连接多个路由器,接下来小编就给大家介绍一下具体的操作步骤。具体如下:1. 首先第一步根据下图箭头所指,用网线分别将路由器的WAN口连接到主路由器LAN口。2. 第二步连接完成后,根据下图箭头所指…

如何在哔哩哔哩B站中进行首页推荐设置

今天给大家介绍一下如何在哔哩哔哩B站中进行首页推荐设置的具体操作步骤。1. 解锁手机后,找到桌面上的“哔哩哔哩”APP,打开。2. 登录进入主页面后,点击左上角的个人头像。3. 在打开的左侧菜单中,点击左下角的“设置”选项。4. 在打开的设置页面,我们就可以看到“首页推荐…