写点什么

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

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

    阅读完需:约 3 分钟

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

价值点分析:卡片式设计的优点

1. 重塑空间利用价值

我们将卡片当做一个承载内容的容器,不同的内容被规划成不同的卡片,不同的卡片有着适合自己的尺寸。这个时候传统的框架被打破,卡片组成卡片集,空间利用上会得到极大的拓展,同时看起来也具有整体性。


卡片式设计配合以卡片相应的交互操作,可以让空间利用率更加合理。



在 iOS 系统下,appstore 将卡片式设计发挥的淋漓尽致,不同的内容被盛放到相应的卡片容器中。


1.【专题】卡片就像窗口,卡片内的信息可以平铺在一个很大的画布上,用户可以通过窗口滚动浏览信息,当点击的时候,窗口会展开变大,使用户专注于这个类目的浏览与选择;


2.不同的卡片之间采用常规竖向滚动与横向滚动相结合,使得卡片集的组合空间更大,并且可以在横向同类卡片与纵向不同栏目之间快速切换,方便快捷。

2. 内容前置,信息分级

卡片作为一个独立的容器,可以在内容上进行良好的布局组织,将信息分块,突出重点,让用户快速找到感兴趣的内容,避免在繁杂的信息集中浪费时间。



类似于电商中的商品类卡片,商品图片、商品名称、折扣信息、价格等被按重要性组织布局,组成一个友好且连贯的内容体,整齐简练。

3. 跨越终端,多元场景

正因为卡片是一个内容的盛放容器,所以它有一个特别重要的特性是它可以自由变换大小,这使得它在跨终端的响应中表现出色。


同时在不同的终端中,卡片的信息组织并不受影响,这也是保证跨终端体验一致的重要因素。



google 极度推行卡片式设计,正是为了保证各式各样的安卓机分辨率下的一致体验。

4. 拟物视觉,赏心悦目

人机界面交互是一门语言也是一门艺术,界面需要给用户呈现信息,也需要给用户心理感知。感知源于习惯,习惯源于现实,这就是拟物化设计,将用户在现实生活中的习惯与感知传承到界面交互中。



iOS 中的卡包在空间布局允许的情况下,使用卡片式的拟物化设计,将真实且亲切的感知带给用户,同时增加界面趣味性。


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


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


2019-12-31 14:47925

评论

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

KaiwuDB 1.0 - 时序数据库系列产品正式发布

KaiwuDB

数据库

先行试点,创新改造:中信期货关键业务系统自主可控的实践之路

OceanBase 数据库

神经网络基础部件-损失函数详解

嵌入式视觉

激活函数 Relu sigmoid tanh swish激活函数

LogicFlow自定义业务节点

小鑫同学

前端 vite Vue 3

《PyTorch 深度学习实战》学习笔记 --NumPy(上)

IT蜗壳-Tango

Dubbo-kubernetes 基于 Informer 服务发现优化之路

阿里巴巴中间件

阿里云 Kubernetes 云原生 dubbo

APISIX+Dubbo+Nacos 最佳实践

阿里巴巴中间件

阿里云 云原生 dubbo nacos APISIX

龙湖千丁基于 ACK@Edge 的云原生智慧停车系统架构实践

阿里巴巴中间件

阿里云 云原生

DevSecOps 与软件开发安全

飞算JavaAI开发助手

MASA Stack 1.0发布会正式官宣

MASA技术团队

MASA MASA Stack

阿里云计算巢 x GBase GCDW:自动化部署云原生数据仓库

云布道师

阿里云

TiDB 底层存储结构 LSM 树原理介绍

京东科技开发者

技术 算法 LSM树 TiDB 企业号 1 月 PK 榜

ClassIn:如何打造更稳定的Zabbix监控系统

OceanBase 数据库

oceanbase 数据库·

Flink 批作业的运行时自适应执行管控

Apache Flink

大数据 flink 实时计算

架构实战营4.1 数据库存储架构随堂练习

西山薄凉

「架构实战营」

Java高手速成 | 新增类Record的工作实例

TiAmo

新特性 Java’

面试题:为什么不建议在MySQL中使用UTF-8?

风铃架构日知录

Java MySQL 程序员 后端 IT

H5直播技术起航

京东科技开发者

音视频 编码 H5 flv 企业号 1 月 PK 榜

高并发中的atomic

Steven

DiT:Transformers 与扩散模型强强联手

Zilliz

AI 算法模型

mouseover 和 mouseenter 的区别

ModStart

JDK结构介绍

Steven

PHP 中命令行调用 escapeshellarg 函数中文问题

ModStart

为什么开发者这么看重SQL?看完这些应用场景你就明白了

雨果

sql 数据库管理工具 SQL开发工具

走进AI图像生成核心技术 - Diffusion

Baihai IDP

人工智能 AI AIGC Diffusion 扩散模型

2023-01-10:智能机器人要坐专用电梯把货物送到指定地点, 整栋楼只有一部电梯,并且由于容量限制智能机器人只能放下一件货物, 给定K个货物,每个货物都有所在楼层(from)和目的楼层(to),

福大大架构师每日一题

算法 rust Solidity 福大大

如何用「标准差」度量研发波动

feijieppm

项目管理 研发效能 技术管理 文化 & 方法 效能度量

马斯克收购推特后,亲自与员工探讨了……

博文视点Broadview

SeekBar(拖动条)

芯动大师

android SeekBar 拖动条

钉钉 IM 基于 RocketMQ 5.0 的云原生应用实践

阿里巴巴中间件

阿里云 RocketMQ 云原生

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