50万奖金+官方证书,深圳国际金融科技大赛正式启动,点击报名 了解详情
写点什么

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

评论

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

数仓性能调优:大宽表关联MERGE性能优化

华为云开发者联盟

数据库 后端 华为云 华为云开发者联盟 企业号 7 月 PK 榜

人工智能促进知识的公平获取

澳鹏Appen

人工智能 翻译 nlp 数据标注 小语种

为什么说 ICMP 协议是网络最强辅助?

互联网工科生

ICMP

大型企业数智化的中国力量:用友BIP助力国产替代

用友BIP

国产替代

接口测试|Fiddler设置断点

霍格沃兹测试开发学社

接口测试|postman的介绍和安装

霍格沃兹测试开发学社

软件测试/测试开发丨面向对象编程学习笔记分享

测试人

Python 面向对象 软件测试

多端低代码开发平台魔笔:教你1小时搭建代办事项管理平台

移动研发平台EMAS

低代码开发 多端开发 降本增效 阿里云魔笔

最强优化指令大全 | 【Linux技术专题】「系统性能调优实战」终极关注应用系统性能调优及原理剖析(下册)

码界西柚

Java Linux 性能优化 JVM GC

IDC&用友联合发布《建设数字中国升级数智底座-企业数智化底座白皮书》

用友BIP

白皮书 数智底座

基于Surprise协同过滤实现短视频推荐

北桥苏

推荐系统 协同过滤 Surprise

支持目标打卡,活力三环让运动更有趣

HarmonyOS SDK

接口测试|Charles的界面介绍

霍格沃兹测试开发学社

为了快一点,所以我慢一点

树上有只程序猿

直播预告 | 博睿学院:深入解析nacos基础原理

博睿数据

云原生 nacos 智能运维 博睿数据 博睿学院

接口测试|Fiddler设置过滤

霍格沃兹测试开发学社

《面向分布式云的直播及点播云技术创新方案》获中国信通院“分布式云技术创新先锋案例”

阿里云CloudImagine

云计算 视频云 信通院

华为云河图KooMap 共筑数字孪生底座 共建产业标杆

华为云开发者联盟

华为云 华为云开发者联盟 企业号 7 月 PK 榜

软件测试/测试开发丨Python自动化测试学习笔记

测试人

Python 程序员 软件测试 自动化测试

用友BIP全球司库连续中标三大银行总行合作项目,共同推动企业数智转型

用友BIP

银行 全球司库

什么是低代码开发,为什么要使用低代码,选择低代码要注意什么?

优秀

低代码 低代码开发

App自动化测试|adb版本过低的报错提示

霍格沃兹测试开发学社

接口测试|postman发送POST请求

霍格沃兹测试开发学社

技术领先、结合AI,数智平台成为企业数字化转型的基石

用友BIP

数智平台

接口测试|Postman发送带参数的Get请求

霍格沃兹测试开发学社

使用Flutter开发微信小程序:构建简单的天气预报小程序

Onegun

flutter 小程序容器

选择香港云主机,让您的网站在全球范围内高速运行

一只扑棱蛾子

香港云主机

和鲸 × 于峻川丨以遥感领域为例,浅谈 AI for Science 科研范式改革

ModelWhale

人工智能 算力 遥感 AI for Science 协同科研

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