赞助商
立即赞助

春节专题!App 设计系列之应用市场截图设计原则

产品经验3年前 (2021)发布 流光
2.5K 0 0

篇文章要为大家析空白页的存在意义及设计技巧,希望对你有益。

一. 概念

空白页是什么?

空白页指的当页面内空白,或者当页面内错误、丢失,与原本跳转页面不相符的页面,一般以白色页面主,所以一般被称之空白页。

有人会问,为什不叫缺失页、404页,而叫做空页。因为空页不仅是色的页面,而且还包括了页面中的错误页、缺失页等等,还是不理解的可以继续往下。

二. 分类

以下就空页的类别、产生因、用户使用景解决方案为大家阐述空页的人性化计。

先给大看一张系图缕清他们各者之间的系:

春节专题!App 设计系列之应用市场截图设计原则

数据加载页

为什把加载页归结空页中,其实加载页经常会被人所忽略,这的加载页是指页面的正在加载。数据还未读取完成,页面肯定数据不齐全,那一加载页有种展示方式,这不涉及开发,仅说计展示方式:一种是全页式加载,一种是模块式加载。

产生原因:数据读取中。

使用场景:用户第打开应用时或刷新时,肯定会有个数据加载过程,于用户来说,这是品第印象。有时候数据加载速度常快可以忽略加载页存在,是考虑有些使用场景,用户是会看到加载页,像前体验款竞品,刚打开时候除了顶部导航栏和底部标签栏,所有东西都是空白,正好那时候是在网络环境常情况下,用户心理预期肯定觉这个品不是很靠谱。

春节专题!App 设计系列之应用市场截图设计原则

△ 有、简书、猫眼电影(全屏加载)

Null页(数据为空)

这个页应用较为广泛,在品多称为数据页,与以上服务异常页有所区,在上述页,服务法提供正常信息数据,是在null页里,是服务本身不存在相关数据,也是数据为空。

产生原因:无数据信息。

使用场景:使用产品时候,需用户创建与存储信息时,应该相关的提示引导内,当页面不存数据时,空白页面会让用户存失落感,怎么样引导这种失落感让用户创建与存储信息内呢?

例如使用抖音,在「」的页面中有个人作品、喜欢、故事等板块,如果你没有发布过任何作品,页面肯定是空的,但是在点击「作品」模块,其对应的「发布」按钮上方会有个窗提示,这对于用户来说比简的问题提示来得更加浅显易懂。但是要注,不是所有Null页都适这种做法,过多的动效、图形引导会让用户视觉疲劳,要并适可而止。

例:QQ、易信、same。

春节专题!App 设计系列之应用市场截图设计原则

推荐:抖音。

春节专题!App 设计系列之应用市场截图设计原则

网络异常页

网络异常情况可谓是有发生,在使用产品的过程中,碰这类情况的用户肯定也觉得莫名其妙。但是网络异常情况一只有种:

  • 断网弱网:完全网络环境,或者网络信弱无法传与加载数据。
  • 切换网络:例如在wifi情况下视频突然切换为移动数据网,就会存在。

产原因:断网弱网、切换网络。

使用景:用户正当浏览息,突然不开产品页面,呈现的是空页面,并没有什征兆,在续刷新了次之后还是一,用户不知道问题在哪,肯定会离开产品去使用另外同类的产品。断网弱网并不是产品能够解决的问题,但是产品如果不给予用户正确的息引导,用户必然会把问题归责于产品本身。

  • QQ:断网弱网。
  • 优酷:断网弱网。
  • bilibili:络切换。

春节专题!App 设计系列之应用市场截图设计原则

服务器/系统异常页

是当前在浏览页面时,服务器无法提供正常的信息数据,或者服务器无响应,且不道原因所返回的页面。一般在APP端比少见,但是也存在,无论是网页设计还是app设计,个页面的设计是必不少的。

产原因:服务器异常、系统异常、请求未响应。

使用景:对于用户来说,间是非常贵的,产品的目的是足用户需求,当用户无法足需求,不的情绪便会增加,积累了不的情绪有可能导致用户对产品失去赖,从而抛弃产品。

户的焦躁情绪很大分来自于对于当前页面的解,正如户在逛时,看到一件超级的商,想上询问格,老在,员工在,这时户从开始的疑惑,到离开时的烦躁,都是在没有得到相应信息的反馈情况产生的。

三. 解决方案

无数据或数据异常

无数据情况下,要引导用户行为。比如当前需要用户创作的页面,但是用户作品为空,可以适当添加「创作」按钮或者跳转,指引用户当前页面内容是可编辑可添加的。再比如社交中的关注标签,当用户还没有关注的话题,可以推话题让用户关注。

数据异时,户需要知道为么、怎么做,通过图和来为户解释当前情况,即你把务器存在的问题一一和户说明,但是户想知道的并是你务器中现的详细问题,户想知道是简单的问题与解决的方法。

春节专题!App 设计系列之应用市场截图设计原则

数据加载页

上面说了,当app第一次开,可以采用全页式加载或模块式加载。全屏加载页面要注的是,为用户传达页面正在运行的息,这候如果有动效画面能让用户有耐心停留当前页面,而不会因枯燥乏味的等待失去产品任。

模载可在刷的情况,够确切地告诉户还需要载多容,在络较慢时,可采占位符进行设计,但是如资讯类,闻类应就适宜使图案说明,页面会显得更复杂。

络情况

络情况存在的问题必须强调当前发生了么,要怎么做,这点和数据异是相似的,遵循「户会犯错」原则,如示案可为「当前络异」、「请检查当前络」、「无法连接到络」等。

可以按需添加个「击连」按钮,来规避为用户自身前网络不稳定或者网络切换导致读取问题。

以适当添加图案来为用户释当前问题,但是有页面不适合添加图案,比视频页面。但是,忌讳没有任何提示信息,里我指下微博的,首页在没有网络的情况下,刷下不,但是没有任何提示,能让用户感到困惑,不建议样的处理状况。

春节专题!App 设计系列之应用市场截图设计原则

四. 总结

针空白页设计可以见仁见智,不定是要按照特定设计样去解决自己品问题,是空白页设计是必要,它意义在于为用户解释说明,并引导用户为,可以说是常要,用户需要知自己现在所处位、所处环境,然后来判断接下来为,所以尽可能去引导用户快捷地完成操作,减轻用户认知负担,才不失为款好品。

者微信号:JJ865477301

欢迎关注作者的微信公众:「JAYGO」

春节专题!App 设计系列之应用市场截图设计原则

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

很多产品在设计之初,会有一个默认的基础设置,绝大多数的用户并不会主动去调整它们,这使得这些默认的设置参数,会影响用户...
Eugen Eşanu
一、微交互到底是什么? 微交互通常关注于单个事件或者单个任务,这些交互元素遍布于整个 APP 的各个角落。这些微交互存在的...
交互设计
在很多优秀的设计作品中,我们常常会看到一些英文的出现,形态上也各不相同。小到不仔细看就看不到、大到比产品还大。这也会...
中英文排版
UI 和 UX 设计师的工作归根到底还是满足用户的需求,解决问题。天马行空的脑洞最终还是要落实到实用的产品上的。即使在游戏当...
Tubik Studio
微信小程序推出的时间已经很长了,曾经还因为跳一跳这个小游戏火了一把。而针对微信小程序究竟能不能代替 APP,以及替代程度...
产品分析
之前我把交互设计师职业技能的第一部分——思维部分讲完了,之后我开始讲「眼界」这部分。老实说,我只是作为一个设计师在写些...
交互模型
原子设计系统(下均称为设计系统)这个词应该已经流行很久了,像蚂蚁金服最近出的 Ant Design 3.0 也说是基于「设计系统」进...
界面组件
《写给新手的APP结构指南:首页相关(上)》的功能盘点已经更新了一段时间了,希望对你有所帮助,今天跟大家继续分享的是首页...
APP UI