10 月 23 - 25 日,QCon 上海站即将召开,现在购票,享9折优惠 了解详情
写点什么

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

评论

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

能否手写vue3响应式原理-面试进阶

helloworld1024fd

JavaScript

JS继承有哪些,你能否手写其中一两种呢?

helloworld1024fd

JavaScript

MyBatis 学习笔记之MyBatis入门开发

薛定谔的猫

mybatis 10月月更 mybatis入门

如何在 Linux 中删除超过 30 天的文件

wljslmz

Linux 10月月更

js事件循环与macro&micro任务队列-前端面试进阶

loveX001

JavaScript

怎样对react,hooks进行性能优化?

beifeng1996

React

Collections之 Arraylist源码解读(二)

知识浅谈

ArrayList 10月月更

什么是虚拟服务器?一共有多少种虚拟服务器?这篇文章带你扫盲!

wljslmz

10月月更 虚拟服务器

Linux操作系统——用户管理、实用指令

胖虎不秃头

Linux 10月月更

Vue3入门指北(六)列表渲染

Augus

Vue3 10月月更

2022-10-02:以下go语言代码能否通过编译?A: 能;B: 不能;C: 不知道。 package main import ( “fmt“ ) type worker interfa

福大大架构师每日一题

golang 福大大 选择题

Docker下,两分钟极速体验Nacos

程序员欣宸

Docker Spring Cloud 10月月更

Linux操作系统——日志管理

胖虎不秃头

Linux 操作系统 10月月更

Python基础(七) | 文件、异常以及模块详解

timerring

异常 Python Monad 10月月更

Python应用之计算阶乘

芯动大师

函数 10月月更 阶乘计算

使用 RxJs 实现一个支持 infinite scroll 的 Angular Component

汪子熙

前端开发 angular RXJS web开发 10月月更

【LeetCode】检查二进制字符串字段Java题解

Albert

LeetCode 10月月更

Linux操作系统——进程管理、RPM与YUM

胖虎不秃头

操作系统 Linux tar 10月月更

MyBatis 学习笔记之配置文件

薛定谔的猫

mybatis 10月月更 mybatis配置文件

用30分钟相中10倍工程师

愚夫一得

面试 技术管理 招聘 文化 & 方法

react的jsx和React.createElement是什么关系?面试常问

beifeng1996

React

【从0到1学算法】2.递归

Geek_65222d

10月月更

Linux操作系统——定时任务调度、磁盘分区与挂载、网络配置

胖虎不秃头

Linux 操作系统 10月月更

【一Go到底】第二天---你好,Go and GOROOT&GOPATH

指剑

golang Go入门 10月月更

大数据ELK(十一):Elasticsearch架构原理

Lansonli

elasticsearch 10月月更

面试官:vue2和vue3的区别有哪些?

bb_xiaxia1998

Vue

SAP 电商云 Spartacus UI 的响应式 UI 实现细节

汪子熙

前端 前端开发 web开发 10月月更 breakpoint

Linux操作系统——组管理和权限管理

胖虎不秃头

Linux 操作系统 10月月更

【SSM】Spring系列——IoC 控制反转

胖虎不秃头

spring ssm 10月月更

写过自定义指令吗,原理是什么?

bb_xiaxia1998

Vue

业务实时监控服务

穿过生命散发芬芳

10月月更 业务监控

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