2025云栖大会,开启通往AGI的未来之旅 了解详情
写点什么

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

评论

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

Qt(C++)使用QChart动态显示3个设备的温度变化曲线

DS小龙哥

6 月 优质更文活动

Linux 文件传输利器:SCP 和 LRZSZ

左诗右码

Shell

一文读懂Partisia Blockchain的MPC方案,为医疗领域发展赋能

西柚子

淘宝商品评论数据采集丨淘宝商品评论数据接口Taobao.item_review

tbapi

淘宝商品评论数据接口 淘宝评论API接口 淘宝商品评论数据

软件测试学习笔记丨JUnit5嵌套测试

测试人

软件测试

大模型重塑软件开发,华为云AI原生应用架构设计与实践分享

华为云开发者联盟

人工智能 软件开发 华为云 华为云开发者联盟 企业号2024年6月PK榜

人工智能与物联网:融合创新驱动未来

天津汇柏科技有限公司

物联网 人工智能’

户外LED显示屏:用科技提升城市档次

Dylan

技术 LED LED显示屏 全彩LED显示屏 led显示屏厂家

轻松畅游VR世界,无需高配置|点量实时云渲染技术

点量实时云渲染

vr 云渲染平台 3D实时云渲染 VR虚拟现实 实时渲染云虚拟仿真

哈啰集团全面接入通义灵码,AI 生成代码占比 20%,研发提效 12%

阿里巴巴云原生

阿里云 云原生 通义灵码 哈啰

把飞书云文档变成HTML邮件:问题挑战与解决历程

得物技术

CSS JavaScript typescript web前端 企业号2024年6月PK榜

威士顿携手 TDengine,共同推动工业数据处理效率提升

TDengine

数据库 tdengine 时序数据库

抢占职场C位!全栈开发与测试开发定向就业班助你快速就业

测试人

软件测试

淘宝/天猫获得淘宝商品详情高级版 API

技术冰糖葫芦

api 网关 API Explorer api 货币化 API 文档 pinduoduo API

谷歌、Meta、Claude、Perplexity都在争取与苹果AI整合;阿里联合华东师大发布AI视频工具|AI日报

可信AI进展

#人工智能

7thonline第七在线受邀出席零售业卓越运营联盟(COER)2024

第七在线

MoneyPrinterPlus:AI自动短视频生成工具-腾讯云配置详解

程序那些事

工具 AIGC

基于 Native 技术加速 Spark 计算引擎

百度Geek说

spark 企业号 6 月 PK 榜

全新升级!昇腾AI原生创新算子挑战赛(S2赛季)等你来挑战

新消费日报

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