写点什么

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

评论

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

HummerRisk 云原生安全平台

HummerCloud

云计算 云原生 云安全

大咖说·图书分享|深入集群:大型数据中心资源调度与管理

大咖说

编程 数据中心

多维数据库中的高效计算机制

元年技术洞察

智能多维数据库 专利解析

安利几款简单好用的帮助文档制作工具

Baklib

帮助文档

使用WIX 进行商业智能OEM打包

葡萄城技术团队

国庆数字游,融云都为您准备好了

融云 RongCloud

从React源码角度看useCallback,useMemo,useContext

goClient1992

React

软件测试 | 测试开发 | 做为测试,那些必须掌握的测试技术体系

测吧(北京)科技有限公司

测试

【导航】FreeRTOS学习专栏目录 【快速跳转】

矜辰所致

目录 FreeRTOS 9月月更

边缘计算落地提速 天翼云Serverless边缘容器加速深耕市场

极客天地

ReactDOM.render在react源码中执行之后发生了什么?

flyzz177

React

四个典型的车联网案例,给你数据架构升级思路

TDengine

tdengine 车联网 物联网

python安装包报错Microsoft Visual C++ 14.0 or greater is required

阿呆

pip

卫星通信,给手机市场带来了什么?

脑极体

云数据库技术行业动态@2022-09-30

数据库 数据复制 数据管理 数据备份 数据对比

2022-9-30

留白的艺术

嵌入式RTOS的 任务栈 和 系统栈

矜辰所致

嵌入式 9月月更 RTOS

开发者有话说|27岁暮年老人一生

百里丶落云

百草味上线“本味甄果”系列罐装坚果 打造高品质坚果新标准

E科讯

深度分析React源码中的合成事件

goClient1992

React

软件测试 | 测试开发 | 软件测试入门必会-流程管理平台

测吧(北京)科技有限公司

测试

【译】日志:每个软件工程师都应该了解实时数据的统一抽象【二】

Rae

kafka 架构 分布式 日志 原理

软件测试 | 测试开发 | 测试面试 | 某 BAT 大厂测试开发面试真题与重点解析

测吧(北京)科技有限公司

测试

【“玩物立志”-scratch少儿编程】亲手实现小猫走迷宫小游戏:其实挺简单

清风莫追

游戏 scratch 10月月更

软件测试 | 测试开发 | 一文带你了解测试流程的体系

测吧(北京)科技有限公司

测试

NFTScan 与 PANews 在 NFT 数据层面进行战略合作

NFT Research

API NFT 合作 MetaMask

Go runtime:带你了解Go语言的GMP模型与goroutine调度

董哥的黑板报

Go 线程 操作系统 协程 runtime

Tree-sitter入门

阿呆

Python tree-sitter py-tree-sitter

C语言太细了

清风莫追

c 10月月更

TDengine3.0流式计算引擎语法规则介绍

TDengine

数据库 tdengine 企业号九月金秋榜

软件测试 | 测试开发 | 软件项目管理与跨部门沟通协作

测吧(北京)科技有限公司

测试

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