写点什么

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

评论

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

深入react源码看setState究竟做了什么?

flyzz177

React

优化开发人员对 K8s 安全的影响

HummerCloud

Kubernetes DevSecOps 11月月更

从recat源码角度看setState流程

flyzz177

React

python的成员方法的简单介绍

乔乔

11月月更

APP“小动作”不断?HarmonyOS 3隐私中心可视化面板让它无处藏身

极客天地

高级前端一面常考手写面试题指南

helloworld1024fd

JavaScript

手写JavaScript常见5种设计模式

helloworld1024fd

JavaScript

全国信安标委杨建军秘书长一行莅临青藤,调研指导网络安全标准和产业工作

青藤云安全

网络安全 青藤云安全

前端vue多人写作开发技巧-路由配置

千锋IT教育

中高级前端开发需要掌握的vue知识点

bb_xiaxia1998

Vue

从源码角度看React-Hydrate原理

flyzz177

React

源码学习之Spring容器创建原理

京东科技开发者

xml spring 源码 容器 测试

GaiaX开源解读 | 跨端动态化模板引擎详解,看完你也能写一个

阿里巴巴文娱技术

开源 移动开发 移动端开发

手写现代前端框架diff算法-前端面试进阶

helloworld1024fd

JavaScript

河南数字经济产业创新研究院加入星策社区,携手推进企业智能化转型发展

星策开源社区

人工智能 开源 AI 企业转型 智能化

一个 SaaS 软件同本地部署 On-Premises 系统集成的实际项目案例分享

汪子熙

微服务 SaaS 系统集成 On-Premises 11月月更

前端手写面试题,看这一篇就够了

helloworld1024fd

JavaScript

5年匠心之作,云原生安全真经大公开!

青藤云安全

网络安全 青藤云安全 云原生安全

DTSE Tech Talk | 第10期:云会议带你入门音视频世界

华为云开发者联盟

云计算 后端 华为云 企业号十月 PK 榜

人工智能计算机视觉之OCR(光学字符识别)

XiaoChao_AI

人工智能 CV 计算机视觉 11月月更

一份vue面试考点清单

bb_xiaxia1998

Vue

FusionInsight MRS Flink DataStream API读写Hudi实践

华为云开发者联盟

大数据 华为云 数据读写 企业号十月 PK 榜

90 条简单实用的 Python 编程技巧,建议收藏

千锋IT教育

说说Vue响应式系统中的Watcher和Dep的关系-面试进阶

bb_xiaxia1998

Vue

为提高 SDLC 安全,GitHub 发布新功能|GitHub Universe 2022

SEAL安全

GitHub 安全

Flask框架:如何运用Ajax轮询动态绘图

华为云开发者联盟

JavaScript 前端 华为云 企业号十月 PK 榜

ShardingSphere + OpenSergo,共同提升微服务体系下数据库的性能与稳定

SphereEx

数据库 微服务 Apache ShardingSphere

学习MySQL必须掌握的13个关键字,你get了吗?

小小怪下士

Java MySQL 程序员

首个中文Stable Diffusion模型开源;TPU演进十年;18个PyTorch性能优化技巧 | AI系统前沿动态

OneFlow

人工智能 开源 深度学历 TPU

什么是Maven

莪是男神

Java maven 11月月更

clickhouse在风控-风险洞察领域的探索与实践

京东科技开发者

flink 数据 Clickhouse 风控 风险控制

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