写点什么

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

评论

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

Go语言学习查缺补漏ing Day4

恒生LIGHT云社区

编程语言 Go 语言

12 张图 | 深入理解 Eureka三层缓存架构

悟空聊架构

缓存 Eureka 28天写作 悟空聊架构 12月日更

Flutter开发:TextField常用属性的使用

三掌柜

28天写作 12月日更

浅谈指标体系建设(二)

圣迪

指标体系 指标

保存并提交修改后的容器镜像

liuzhen007

28天写作 12月日更

拖延

Nydia

Prometheus Exporter (十九)Collectd Exporter

耳东@Erdong

Prometheus 28天写作 exporter 12月日更 Collectd

Git进阶(十一):Git 常用操作汇总

No Silver Bullet

git 12月日更

了解学习 JSX 的工作方式

devpoint

React JSX 12月日更

.NET 6新东西--nuget包验证

喵叔

28天写作 12月日更

聊聊 Kafka: 在 Linux 环境上搭建 Kafka

老周聊架构

签约计划第二季 2月月更

【LeetCode】截断句子Java题解

Albert

算法 LeetCode 12月日更

MySQL 连接数过多的处理方法合集 - ERROR 1040 Too many connections - 卡拉云

蒋川

MySQL MySQL 数据库

大厂算法面试之leetcode精讲24.其他类型题

全栈潇晨

算法 LeetCode

react源码解析18事件系统

buchila11

React React Hooks

【HarmonyOS 专题】01 基础 Mac 环境安装配置

阿策小和尚

HarmonyOS 28天写作 Android 小菜鸟 12月日更

从微服务架构的现状和未来看学习路径

博文视点Broadview

《重学Java高并发》手写一个生产者消费者线程模型

中间件兴趣圈

Java高并发 生产者消费者模型

有了六顶思考帽,从此告别无效争吵

Ian哥

项目管理 28天写作 项目管理工具 六顶思考帽

说说节奏感

Justin

方法论 28天写作

团队基建系列 - 组织知识传承 1

搬砖的周狮傅

团队成长

模块1作业

miliving

Flutter 动画【Flutter专题16】

坚果

flutter 28天写作 签约计划第二季 12月日更

大厂算法面试之leetcode精讲23.并查集

全栈潇晨

算法 LeetCode

LongAdder解析

程序员历小冰

28天写作 并发’ 12月日更

[Pulsar] F# client的ProtobufNativeSchema实现

Zike Yang

Apache Pulsar 12月日更

Spring中的事务Transactional,这样用真的对么?

xcbeyond

事务 28天写作 12月日更

模块一学习总结

whoami

「架构实战营」

react源码解析17.context

buchila11

React React Hooks

自我改变的意义

卢卡多多

28天写作 技术改变生活 12月日更

Prometheus Exporter (十八)Graphite Exporter

耳东@Erdong

Prometheus 28天写作 exporter 12月日更 Graphite

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