空数据之 l 缺省页—兼顾功能性与情感化设计指南

字数 1959阅读 970
缺省页面


一、定义

缺省页(Default Pages):无数据状态(Empty State)或操作出现异常状态下,给予用户反馈的提示页面。

类型

包括:初始状态、清空状态、出错状态、无匹配搜索结果状态

  1. 初始状态——初体验产品,门面担当
    常见简单的插画配合简洁的文案,必要时给出引导用户的操作按钮。


    购物车-未登录
  2. 清空状态\成功完成目标任务——积极鼓励
    删除或提交等操作清空了当前的页面内容,需要有明确的提示,告知用户如何处理。


    消息中心-无.png
  3. 出错状态——引导解决问题
    由于网络、服务器等原因无法加载内容,告知用户加载失败、出错原因以及如何恢复。


    网络-无
  4. 搜索无最佳匹配状态——相关推荐
    提供最佳匹配结果,应对拼写错误的查询,减少用户的挫败感;若无匹配结果,可推荐用户可能感兴趣的内容。


    搜索-无结果


二、作用

  1. 通过呈现插画或范例信息,吸引用户,丰富一无所有的页面,降低用户因空状态产生的挫败感,建立良好的第一印象,提升用户参与度和忠诚度;
  2. 明确解释并传达页面内容,帮助用户理解当前位置和上下文;
  3. 告知用户进行某种操作才会出现有效内容,鼓励用户迅速采取行动,走出空状态,教育用户,快速上手;
  4. 恰当的形式传达出品牌形象、定位、格调、特质;产品调性、核心价值等与业务相关的方面;
  5. 情感化设计激发用户积极情绪,让用户可以快速识别并感觉有趣、愉悦,以建立良好的互动关系;
  6. 个性化展示,提供符合特定用户需求或兴趣的内容

三、表现组成

1. 相关插画/图片(非交互式)
填充空界面内容,单纯视觉吸引或功能信息图示,背景营造微妙的气氛,以活泼的方式传达应用程序的功能。

2. 标题+解说文案
积极的语调,对界面中的功能或信息进行描述,告知用户当前处在体验流程的特定位置

3. 操作入口 CTA按钮或可点击文字、链接
快速诱导用户触发贡献内容或购买行为

购物车-为空

4. 指引线索
适用于新手指引,引导用户进行某项行为或感知某些信息,对于功能的教学和使用频率的提升有着重要作用
包括:1)指示性图案,如箭头,画圈图案等;2)指引性文字说明。


五、如何设计

i.指导原则:

动机(Motivate):给目标用户激励性的语言
劝说(Persuade):给用户带来的好处、利益点
直接(Direct):在一开始就向用户展示唯一且最优的路径
取悦(Please):有趣又易用,符合用户的心理预期
共鸣(Relatable):展示产品温暖、人性化、个性化的一面
品牌(On brand):介绍并强化品牌元素,通过恰当的方式、形式呈现
亮点(Different):有创意或幽默色彩,呈现形式新颖,体现专业同时创造正面情绪

ii.具体实现:

1. 明确目标

功能入口:提供相关功能的入口和动作按钮,解释服务的功能和优点,引导用户到其他页面查看内容
推荐数据:提供热门数据、个性化推荐数据让用户选择;如电商搜索无结果、购物车等页面,推荐用户感兴趣的商品,能有效地提升购买转化率
操作引导:提供相关操作的示意和引导,让用户能删除或替换内容
完成指导:送上任务达成的祝贺语,巩固用户的成就


暂无-收获地址
2. 确定场景化的情绪传达

产品所有能传递情绪的场景都应该与品牌情绪一致。采用负面情绪的空状态有一定风险,可能会起到消极作用。
用户更容易代入场景化的故事,产生情感共鸣。构思场景,需研究产品目标用户群的特质,设计他们的共同回忆,将有关的场景、片段、元素进行拼贴、组合、关联,再找到最能勾起情绪冲动的突破口,丰满场景。


选择优惠券-暂无
3. 选择表现元素的组合方式(即上文 三、表现组成)

将表现组成涵盖的元素进行选取与组合。
如网络不畅时,给出插画、文案提示和点击重试按钮;
在搜索无结果时,给出其他相关的内容或解决方案。


best match
4. 设计图案

设计专属吉祥物形象,对产品进行拟人化表达,避免极其复杂的插画,保障界面简洁明快;
功能性的表达更注重传达功能本身的含义,如icon线性插画,越轻量越简单越好,以免抢夺了文案信息。
由于插画不可交互,尽量与背景融合为一部分,避免使用明亮的色彩,误导用户点击。


暂无-订单
5. 设计文案

标题:说明当前状态,解释当前问题出现原因,介绍功能概要
解说文案:如何走出当前状态,如何解决当前问题,补充说明功能的属性
文字和图形一样,也是一种情绪的载体,注意文字的魅力,加注重文字的情绪表达,更易调动观者的心。

<1>避免命令的、指使的语气,尽量使用轻快的、戏谑的、娱乐式的语气,婉转传达用户可以去做什么;
<2>避免傻瓜式的叙述、空洞的铺陈,描述词风格应该匹配产品调性;
<3>如果出错了,提供一个解决办法
<4>反问开场,可以调动用户情绪,尝试错愕惊讶、夸张的口吻,会使情感更生动


评价-暂无
6. 设计引导线索

告诉用户该功能在哪里、如何使用,比如点击某个按钮,向右滑动等操作,可采用箭头、悬浮气泡、放大镜等隐喻的引导样式。

7. 评估传达效果

只通过静帧图片来传达复杂的故事,很难让用户快速领会,对每一个故事的可塑性进行评估,针对性地使用放大、夸张手法,放大局部效果

8. 更多想象的可能性

避免正面刻板的形象(一眼就能看到底的设计),尽可能简单有趣、不落俗套,让用户看到这个画面后可以有更多想象的空间,从而吸引用户,驱动用户的好奇心。



参考来源:
https://www.behance.net/gallery/54274335/_
https://material.io/guidelines/patterns/empty-states.html#empty-states-avoiding-completely-empty-states

推荐阅读更多精彩内容