写点什么

从列表式 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:471253

评论

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

给弟弟的信第23封|如何写一篇文章?

大菠萝

28天写作

2022年就要开始啦

搬砖的周狮傅

目标

构建安防视频云存,和传统安防视频业务的烦恼说再见!

亚马逊云科技 (Amazon Web Services)

IoT

Amazon ES现更名为Amazon OpenSearch Service并支持OpenSearch 1.0

亚马逊云科技 (Amazon Web Services)

IoT

这一期总结

张老蔫

28天写作

LabVIEW灰度图像操作与运算(基础篇—2)

不脱发的程序猿

机器视觉 图像处理 LabVIEW 灰度图像操作与运算

圣诞节

圣迪

圣诞节 圣诞老人 平安夜 尼古拉斯 长筒袜

【CSS 学习总结】第四篇 - CSS 选择器-伪类和伪元素

Brave

CSS 12月日更

Amazon IoT Core 服务成本优化

亚马逊云科技 (Amazon Web Services)

IoT

Servlet基础知识与新手常遇到的错及解决方法(01)

海拥(haiyong.site)

服务器 28天写作 12月日更

23《重学JAVA》--泛型

杨鹏Geek

Java25周年 28天写作 12月日更

收集、处理并监控设备数据——Amazon IoT SiteWise Edge“一网打尽”

亚马逊云科技 (Amazon Web Services)

IoT

Certificate Vending Machine – Amazon IoT 设备接入 Amazon IoT 平台解决方案

亚马逊云科技 (Amazon Web Services)

IoT

PassJava 开源 (六) :整合Spring Cloud Alibaba Nacos组件

悟空聊架构

28天写作 passjava 悟空聊架构 12月日更 naocs

设计千万级学生管理系统的考试试卷存储方案

drizzle

「架构实战营」

华为云GaussDB新产品特性亮相DTC2021,重磅新品开源预告

华为云开发者联盟

数据库 华为云 GaussDB 同城双集群 内存引擎

Capgemini 如何利用 Amazon IoT 通过农业洞察监控农田

亚马逊云科技 (Amazon Web Services)

IoT

使用模版自动化 Amazon IoT 设备创建及证书注册过程

亚马逊云科技 (Amazon Web Services)

IoT

物联网场景中灵活实施对设备的控制管理

亚马逊云科技 (Amazon Web Services)

IoT

左手自研,右手开源,技术揭秘华为云如何领跑容器市场

华为云开发者联盟

Docker 开源 Kubernetes 容器 云原生

前端CI/CD上如何保证依赖安装速度达到优解?

梁龙先森

前端 构建脚本

为什么要空投?(24/28)

赵新龙

28天写作

如何根据不同业务场景调节 HPA 扩缩容灵敏度

xcbeyond

Kubernetes 28天写作 12月日更

利用Amazon Lambda实现Amazon IoT设备证书的即时注册

亚马逊云科技 (Amazon Web Services)

IoT

圣诞节

Tiger

28天写作

【CSS 学习总结】第五篇 - CSS 变量 var

Brave

CSS 12月日更

JavaScript 中对象和映射之间的 6 个区别

devpoint

JavaScript map Object 12月日更

模块3作业

miliving

深圳买房记

hackstoic

房地产

利用 Cognizant APEx 2.0 和 Amazon IoT SiteWise Edge 提高产品质量

亚马逊云科技 (Amazon Web Services)

IoT

1个通用工具平台+多个热点场景工具套件,助力开发者快速构建应用

华为云开发者联盟

云计算 低代码 开发工具 devcloud 应用构建

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