10 月 23 - 25 日,QCon 上海站即将召开,现在购票,享9折优惠 了解详情
写点什么

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

评论

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

程序员有哪些常用的技术网站呢?

小齐写代码

专为大模型训练优化,百度集合通信库 BCCL 万卡集群快速定位故障

百度Geek说

Golang微服务对接Spring-Cloud Gateway

于顾而言

golang Spring Cloud Gateway #微服务

Sharding-JDBC源码解析与vivo的定制开发

vivo互联网技术

源码解析 sharding-jdbc 定制开发

探索基于Stable Diffusion的智能绘画大模型

百度开发者中心

人工智能 大模型 绘画工具

探索AI绘画的无限可能:一站式集成大模型工具

百度开发者中心

人工智能 大模型 AI绘画

【技术探讨】无线通信模块拉距测试,是否一定要带笔记本电脑?

Geek_ab1536

浅谈漏洞扫描技术

于顾而言

网络安全 云安全 漏洞扫描 漏洞检测 web漏洞

简单聊聊租户隔离定义以及优势

行云管家

IT运维 租户 租户隔离

从原理到实践,拆解人工智能的神秘面纱

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

测试

京东JD商品详情API引领电商智能化新潮流

技术冰糖葫芦

API 接口

揭秘QQ的AI绘画大模型技术——QQGC深度解析

百度开发者中心

大模型 绘画

义乌等保测评公司有哪些?用哪款堡垒机好?

行云管家

等保 义乌

成功入选CVPR2024!毫末提出一种基于摄像头的4D占据网格预测的Cam4DOcc新方案

极客天地

读架构整洁之道的一些感悟

于顾而言

架构设计 架构设计原则 编程范式

速存,详细罗列香橙派AIpro外设接口样例大全(附源码)

华为云开发者联盟

开发 华为云 开发板 昇腾AI处理器 华为云开发者联盟

康士柏四驱版2000马力机,助你玩转改装界

极客天地

OpenTiny 妇女节限时特别活动来啦~

OpenTiny社区

开源 Vue 前端 低代码 组件库

智能便捷|AIRIOT智慧充电桩管理解决方案

AIRIOT

物联网平台 智慧系统 智慧充电桩

NineData与OceanBase携手完成产品兼容认证,共筑企业级数据库新生态

NineData

数据库 oceanbase 兼容 NineData 奥星贝斯

从原理到实践,大咖带你拆解人工智能的神秘面纱

霍格沃兹测试开发学社

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