写点什么

从列表式 UI 中升华探讨:卡片式 UI 有哪些创新点(三)

  • 2019-12-31
  • 本文字数:875 字

    阅读完需:约 3 分钟

从列表式UI中升华探讨:卡片式UI有哪些创新点(三)

场景探索:寻求卡片式设计的最佳案例

Dashboard(工作台)运用场景


工作台的设计源于仪表盘,而仪表盘的核心理念是直接、高效、准确地向用户展示最重要的信息。


对于工作台的设计,需要重注三个元素:场景、角色、内容;他们的关系是在相应场景下需要给某类角色提供最需要查看的内容,而这个内容往往是多类别的。


我们将卡片式设计代入,自由的布局方式可以带来每块区域的很好的展示方式,同时更加重要的是卡片集强大的分类功能,在工作台上做信息分类布局使得用户可以更高效浏览一类信息。


数据排布主要涉及到三个心理学小知识:格式塔原则、短时记忆和神奇的 X。

应用选择运用场景


对于应用选择,我们需要展示给用户的第一要素是『这是什么应用』,每个独立卡片中承载的图标和名称可以以最生动形象的感知传达给用户。


设计师往往注重功能化导向设计,而用户体验更需要让用户愉悦的完成任务,所以注重感知和情绪设计会让用户更加喜欢。


###卡片集运用场景



这类场景往往更注重对单个信息的关注,此时用户不需要进行对比,更需要对单个信息内容进行多远互动,我们将卡片进行信息分级设计,同时设计丰富的互动操作栏。


列表更倾向于对信息进行总览、比较、过滤筛选。


###图表类运用场景



在数据可视化领域有『数据深度分析』和『数据概览』,我们借助卡片承载简单的数据概览内容,展示数据趋势与核心指标,在保证数据价值的同时也使得数据可视化的运用场景得到拓充。


将图表卡片运用在报表页面,可以打造分析型报表的业务场景。

对话式 UI 运用场景


我们打破传统对话式 UI 的体验模式,将『图形化 UI』与『对话式 UI』相结合,此时卡片就是图形化元素最好的载体,各式各样的卡片丰富了对话式 UI 的交互方式,又与之完美融合,体验具有整体性。

结语

正是因为上述价值点使得卡片化设计快速流行起来,并且会使用越来越广泛。


卡片式设计并不是一种简单的样式设计,而是一种信息自由布局的设计语言,它使人机交互方式越来越丰富,相信会有越来越多的平台创造新的卡片式交互形式,以创造更加极致的用户体验。


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/vYfol56CZPMStx9JqxrCOg


2019-12-31 14:47963

评论

发布
暂无评论
发现更多内容

Go1.18泛型浅谈

CodeWithBuff

golang 泛型 新特性 Go 语言

无聊科技正经事周刊(第6期):纯粹的程序员与必然的中年危机

潘大壮

程序员 周刊 行业趋势 科技周刊

无形资产管理系统解决方案

低代码小观

资产管理 CRM 财务审核系统 CRM系统 企业管理软件

「码」力集结!他们用作品为FinClip黑客松打造出一道靓丽的风景线

Speedoooo

小程序 hackathon 黑客马拉松 黑客松 小程序容器

容器化 | 构建 RadonDB MySQL 集群监控平台

RadonDB

MySQL 数据库 容器化 RadonDB KubeSphere

有趣、实用、全面,是程序员心中理想人工智能教材的样子了

图灵教育

深度学习 PyTorch

还在写SQL做SAP二开?通过RFC调用NetWeaver,让HANA数据库操作更可靠

葡萄城技术团队

ERP 全套信息化系统 二开

当.Net撞上BI可视化,这3种“套路”你必须知道

葡萄城技术团队

看板 数据大屏 BI数据分析

拿起手中的键盘做公益侠客,让你的第一个低代码应用为公益发光发热!

InfoQ写作社区官方

低代码 公益 大学生 热门活动 码上公益

AIRIOT物联网低代码平台如何配置MQTT驱动?

AIRIOT

物联网 低代码平台 驱动配置

IO流详细解答,博主亲自手敲代码,快速上手

爱好编程进阶

Java 程序员 后端开发

“银行家算法”大揭秘!在前端表格中利用自定义公式实现“四舍六入五成双”

葡萄城技术团队

银行家算法 纯前端表格技术

企业文档爆炸,如何管?

小炮

企业文档管理工具

美哭了,一款开发者必备的接口管理工具!

Liam

Postman 开发工具 API API接口管理 接口管理工具

netty系列之:我有一个可扩展的Enum你要不要看一下?

程序那些事

Java Netty 程序那些事 5月月更

docker下kibana搭建

爱好编程进阶

Java 程序员 后端开发

ansible 模块:script

ghostwritten

ansible

ansible template jinja2 渲染

ghostwritten

ansible

IntelliJ IDEA开发最佳配置

爱好编程进阶

Java 程序员 后端开发

HIVE3 深度剖析 (上篇)

明哥的IT随笔

大数据 hie

等保三级全称是什么?是什么意思?

行云管家

网络安全 等级保护 等保三级 等保2.0

windows服务器是什么?运维管理用什么工具好?

行云管家

windows 服务器 自动化运维 服务器运维

如何开发 LAXCUS 分布式应用软件(三):编写终端软件

LAXCUS分布式操作系统

集群架构 并行计算 端边云 分布式操作系统 分布式应用软件

hive踩过的小坑

爱好编程进阶

Java 程序员 后端开发

萌新看过来,你还学不懂VScode插件吗?

葡萄城技术团队

报表

基于 FFI 的 PyFlink 下一代 Python 运行时介绍

Apache Flink

大数据 flink 编程 流计算 实时计算

Eclipse中查看源代码

爱好编程进阶

Java 程序员 后端开发

idea启动tomcat报错,org

爱好编程进阶

Java 程序员 后端开发

Apache DolphinScheduler 2.X保姆级源码解析,中国移动工程师揭秘服务调度启动全流程

白鲸开源

Apache 大数据 开源 DolphinScheduler workflow

ansible 模块:set_fact

ghostwritten

ansible

Hugging Face创始人亲述:一个GitHub史上增长最快的AI项目

OneFlow

人工智能 深度学习 nlp 开源社区

从列表式UI中升华探讨:卡片式UI有哪些创新点(三)_语言 & 开发_Think体验设计_InfoQ精选文章