写点什么

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

评论

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

不习惯的Vue3起步四 の 生命周期&provide/inject

空城机

Vue3 7月月更

RocketMQ之消费者启动与消费流程

vivo互联网技术

RocketMQ 中间件 ACK

查找——概念了解

乔乔

7月月更

Pro 单店版和多店版,你还傻傻分不清楚?

CRMEB

纯CSS实现四种方式文本反差色效果

南城FE

CSS 前端 css动画 7月月更 反差色

多传感器时间同步

秃头小苏

时间同步 7月月更

阿里云机器学习平台PAI论文高效大模型训练框架Whale入选USENIX ATC'22

阿里云大数据AI技术

深度学习 分布式训练 异构计算

5G NR RRC连接控制

柒号华仔

5G 7月月更

Java面向对象基础

五分钟学大数据

Java 7月月更

在线直播系统源码——开源源码

开源直播系统源码

软件开发 直播源码 开源源码 在线直播系统源码

新思科技助力提升开源治理水平

InfoQ_434670063458

开源 新思科技 软件供应链

大数据基础知识介绍

Lansonli

大数据 7月月更 大数据基础

Qt|字符排序以及转化问题

中国好公民st

qt 7月月更

适合初学者的 10 个JavaScript 代码整洁技巧

devpoint

JavaScript ES6 7月月更 数据操作

SLSA 框架与软件供应链安全防护

SEAL安全

SLSA 软件供应链安全

注意!软件供应链安全挑战持续升级

SEAL安全

安全 软件供应链

《看完就懂系列》聊聊CSS3的 calc() 函数

南极一块修炼千年的大冰块

7月月更

QT实现 文件夹复制

小肉球

qt 7月月更

TDesign 组件库技术方案指北

TDesign

开源 Vue React 组件库

老司机狂飙之路--EventBus原理简要分析

芝麻粒儿

android EventBus 7月月更

Qt | 串口通信 QSerialPort

YOLO.

通信 qt 串口 串口通信 7月月更

软件架构-概述

架构

6月月更开奖!速来领取你的奖品!

InfoQ写作社区官方

热门活动 6月月更

iOS 中的 Category

NewBoy

ios 前端 移动端 iOS 知识体系 7月月更

【LeetCode】奇数值单元格的数目Java题解

Albert

LeetCode 7月月更

自己搭建git服务器:linux自己Gitlab服务

zhoulujun

gitlab git私有参考 git部署 git服务端

Node.js异步编程之Promise

是乃德也是Ned

node.js 前端 7月月更

新思科技聚焦开源治理 助力提升中国开源产业安全及合规水平

InfoQ_434670063458

开源 软件 供应链 新思科技

GaussDB云数据库初步使用记录

DS小龙哥

7月月更

项目git commit时卡主不良代码:husky让Git检查代码规范化工作

zhoulujun

git husky lint-stated

面对裁员?焦虑?不如好好投资自己

沃德

程序员 7月月更

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