AICon 上海站|90%日程已就绪,解锁Al未来! 了解详情
写点什么

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

评论

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

树莓派4B搭建Pytorch环境

IT蜗壳-Tango

IT蜗壳教学 4月日更

喜欢回忆过去的人,没有未来

小天同学

成长 自我思考 个人感悟 突破瓶颈 4月日更

初识GaussDB(for Cassandra)

华为云开发者联盟

数据安全 GaussDB 华为云数据库 GaussDB(for Cassandra) 分布式云数据库

超详细 PowerDesigner 入门教学(项目数据库设计标准)

若尘

数据库 数据库设计

工厂模式还不懂?看这里!

IT皮皮蟹

Java 设计模式

算法思考:红包金额生成

程序员架构进阶

Java 28天写作 算法解析 4月日更 微信红包

Zabbix Linux 下源码安装

耳东@Erdong

zabbix 4月日更

第一个 Go 程序

escray

学习 极客时间 Go 语言 4月日更 Go100

ES9的新特性:异步遍历Async iteration

程序那些事

JavaScript ecmascript 程序那些事 es9

GaussDB(for openGauss)让数据“存得下、算得快、算得准”

华为云开发者联盟

GaussDB(for openGauss) 华为云数据库 数据分布方式 计算下推 数据强一致

被应用商店下架的应用,该如何下载?

彭宏豪95

效率 App 苹果 4月日更

VueRouter源码解读:三大核心模块构成

梁龙先森

源码分析 大前端 vue-router

Python OpenCV 图像处理之直方图的应用,取经之旅第 26 天

梦想橡皮擦

Python OpenCV 4月日更

Linux pwd 命令

一个大红包

Linux linux命令 4月日更

中寰卫星导航卜钢采访:IT年轻人怎么工作、学习和生活(采访提纲)

老猿Python

学习 采访 IT年轻人

修电脑、脱发、格子衫?程序员拒绝标签化,这才是真正的他们

华为云开发者联盟

程序员 女朋友 标签 格子衫 单身狗

分页场景慢?MySQL迷惑行为解读~

Java架构师迁哥

算法突击营毕业总结

韩儿

他人方寸间,山海几千重

清秋

随笔 4月日更 1 周年盛典 我和写作平台的故事

数据库存取策略对比

小舰

4月日更

智慧公安重点人员管控系统搭建,实现重点人员动态管控

13828808769

智慧公安

openLooKeng V1.2.0 发布

LooK

大数据 数据 Bigdata

OCR 技术如何促进 PDF 文档的数字化转型

Geek_b33b8e

数字化转型 PDF OCR 文件操作

计算机原理学习笔记 Day5

穿过生命散发芬芳

计算机原理 4月日更

SQL 性能优化的几条建议

U2647

sql 4月日更

Github Star 11.5K项目再发版:AAAI 2021 顶会论文开源,80+多语言模型全新升级

百度大脑

飞桨

Spring Boot 启动时,让方法自动执行的 4 种方法!

Java小咖秀

springboot 启动方式

一加9pro联名哈苏了!这可能是你能买的平替哈苏

Geek_4a453c

【LeetCode】打家劫舍 II Java题解

Albert

算法 LeetCode 4月日更

C++系列:Visual Studio(VS)2019登录不上?

Bob

c++ 踩坑经历 编程经验 4月日更

区块链特色农产品溯源平台解决方案

13828808769

溯源 #区块链#

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