如何设计交互缺省页

用户头像
杭州/UX设计师/5年前/1552浏览
如何设计交互缺省页

缺省状态属于交互的边缘状态,很容易被忽略,造成设计不完整。为了保证设计完整性,对缺省状态进行整理很有必要,以免缺漏。

大纲


  1. 缺省状态的出现原因和分类

  2. 缺省状态的组成

  3. 缺省状态的视觉样式

  4. 组件化与复用




缺省状态的出现原因和分类


UI界面上展示的信息可大致分为固定信息动态信息两类。所谓固定信息是指,不需要请求服务器的信息类型,例如底部标签栏的图标是以切片的形式存在于安装包中,总是可见。而动态信息是会随场景变化的,如下拉刷新操作一般都伴随着信息的实时更新,这类信息就属于动态信息。


以请求服务器是否成功为依据,缺省状态主要分类两大类:

  1. 请求失败:网络环境原因 或 设备原因

  2. 请求成功:数据正常且为空 或 数据异常


其中,数据正常且为空的状态,我们习惯性称其为空状态

除了空状态之外的其他缺省状态,可以认为是异常状态





缺省状态的组成


不同场景、不同产品,缺省页组成都可能不同。

为了便于讨论,拿电商产品的搜索无结果为例进行分析。


从组成上来看,淘宝和小红书进行了状态说明:根据当前关键词,无搜索结果,提示用户可以尝试更换关键词。而京东将状态提示压缩在很小的区域范围内,一句文案简单表意,使用了绝大多数屏幕空间来推荐其他商品。造作除了商品推荐之外,提供了行为引导。


不同的形式有不同的目标侧重,从体验的角度上来讲,淘宝和小红书状态更加清晰明确。而推荐商品更大程度上是为了促成交易。


产品层面,空状态也有可以发挥的空间,主要是引导用户行为和推荐相关内容。

行为引导,目的是让用户快速熟悉产品并产生使用记录,增加粘性。

内容推荐,不论是电商推荐商品或者社交平台推荐人,都是增加用户和产品之间联系的一个很好手段。




缺省状态的视觉样式


缺省状态的视觉表达样式有多种,不同的表达形式体现了不同的产品调性。

从简约克制到丰富的情感化表达,也是逐渐增加视觉元素的过程。




组件化与复用


当业务模块众多时,可能涉及到的空状态和异常状态对应的具体页面数量巨大,将所有情况遍历、梳理、归类为n种类型,再进行统一设计,不仅节约设计成本,更可以使产品群整体性更强,进一步突出专业性和品牌感。


以下是有道词典的案例。



结语:尽管缺省状态是边缘状态,但是很好体现了产品的质感、特性和细节,值得仔细打磨。







参考连接:

https://www.zcool.com.cn/article/ZMTEyNTA1Ng==.html

https://www.zcool.com.cn/article/ZMTAyMjg5Mg==.html

http://www.woshipm.com/pd/3600074.html


11
举报
|
44
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
拟物风质感写实UI卡片合集源文件
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】活动icon
【新年UI图标】积分icon
我的钱包-UI界面设计-app
新拟态风格 UI设计组件库
科技医疗透明柜UI界面设计
【新年UI图标】汽车icon
户外旅行飞机情侣假日出行
Security Camera UI kit
新能源APP应用UIKit
高级表盘系列UI源文件
【新年UI图标】礼物/活动icon
盲盒APP UI设计
【新年UI图标】体育icon
UI界面 组件
【新年UI图标】秒杀icon
高级感金属拟物 UI设计组件库
钱包ui模板
UI 登录界面设计模板包
APP/小程序商业项目UI模板|99个高保真UI+79个原型
手表表盘UI系列
UI通用设计素材1
你可能喜欢
相关收藏夹
大家都在看
登录注册