写点什么

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

评论

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

想会用synchronized锁,先掌握底层核心原理

华为云开发者联盟

开发 华为云 企业号十月 PK 榜

一种基于Prompt的通用信息抽取(UIE)框架

阿里技术

深度学习 信息抽取

react源码中的hooks

flyzz177

React

元宇宙场景技术实践|实现“虚拟人”自由

ZEGO即构

React组件复用的发展史

夏天的味道123

React

OpenHarmony移植案例: build lite源码分析之hb命令__entry__.py

华为云开发者联盟

鸿蒙 芯片 华为云 源代码 企业号十月 PK 榜

走进 Orca 架构及技术世界

KaiwuDB

数据库·

React组件复用的技巧

夏天的味道123

React

阿里云E-HPC+i4p大内存实例,加速寻因生物单细胞数据分析效率

阿里云弹性计算

HPC

写个JS深拷贝,面试备用

helloworld1024fd

JavaScript

最近面试经常被问到的js手写题

helloworld1024fd

JavaScript

重磅!涛思数据发布TDengine PI连接器

TDengine

数据库 tdengine 时序数据库

阿里云Imagine Computing创新技术大赛正式开启!

阿里云视频云

阿里云 技术大赛

深入浅出分布式,阿里大牛手写《分布式核心原理》Github一夜爆火

Java永远的神

分布式 程序人生 分布式计算 分布式系统 分布式存储

React性能优化的8种方式

xiaofeng

React

【web 开发基础】通过模拟地铁售票系统介绍PHP 自定义函数之函数的参数-PHP 快速入门 (26)

迷彩

记录函数参数和返回值 参数列表 PHP基础 11月月更 函数参数

react源码中的生命周期和事件系统

flyzz177

React

美团前端常考手写面试题(边面边更)

helloworld1024fd

JavaScript

动手实践丨使用华为云IoT边缘体验“边云协同”

华为云开发者联盟

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

React组件设计模式-纯组件,函数组件,高阶组件

xiaofeng

React

react源码中的协调与调度

flyzz177

React

聊聊前端开发中的 Ghost Design 设计思路

汪子熙

前端开发 angular web开发 SAP 11月月更

一本书,带你走出Spring新手村

博文视点Broadview

Oracle、MySQL等数据库故障处理优质文章分享 | 10月文章汇总

墨天轮

MySQL 数据库 oracle 性能优化 故障恢复

假如面试官要你手写一个promise

helloworld1024fd

JavaScript

React的5种高级模式

夏天的味道123

React

浅谈:数字资产永续合约交易所开发有什么好处?

W13902449729

合约交易所开发 区块链交易所开发

React核心工作原理

xiaofeng

React

音视频开发进阶|第六讲:色彩和色彩空间·下篇

ZEGO即构

音视频开发 色彩

共筑使能千行百业的数字底座 | HDC 2022松湖对话顺利召开

OpenHarmony开发者

OpenHarmony

CIO们开始将软件供应链升级为安全优先级top

SEAL安全

DevOps 开源软件 软件供应链 SBOM 软件供应链安全

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