UI设计中卡片化设计的运用方法

产品时间:2021-10-25 00:28

简要描述:

在互联网产物中除了内容型外一些功效型的产物信息内容也是相当庞大的特别是治理控制系统业务治理、功效操作、数据展示等。在信息量这么大的页面中除了重视内容质量外形式功效的组织与出现也是同等重要对提高用户获取有效信息的效率有着很是大的资助。 这是诺基亚手机的win phone系统(下图)系统桌面的所有内容都是一个个小方块展示类似一个块状类的按钮让人遐想到是可以点击的操作入口: 下图中的移动端的界面模块中可点击部门也接纳了卡片气势派头。...

推荐产品
详细介绍
本文摘要:在互联网产物中除了内容型外一些功效型的产物信息内容也是相当庞大的特别是治理控制系统业务治理、功效操作、数据展示等。在信息量这么大的页面中除了重视内容质量外形式功效的组织与出现也是同等重要对提高用户获取有效信息的效率有着很是大的资助。 这是诺基亚手机的win phone系统(下图)系统桌面的所有内容都是一个个小方块展示类似一个块状类的按钮让人遐想到是可以点击的操作入口: 下图中的移动端的界面模块中可点击部门也接纳了卡片气势派头。

华体会app官网登录

在互联网产物中除了内容型外一些功效型的产物信息内容也是相当庞大的特别是治理控制系统业务治理、功效操作、数据展示等。在信息量这么大的页面中除了重视内容质量外形式功效的组织与出现也是同等重要对提高用户获取有效信息的效率有着很是大的资助。

这是诺基亚手机的win phone系统(下图)系统桌面的所有内容都是一个个小方块展示类似一个块状类的按钮让人遐想到是可以点击的操作入口:

下图中的移动端的界面模块中可点击部门也接纳了卡片气势派头。

如下图将信息、图像归类整合到一个方块里清晰直观又制止页面因为信息多而散乱卡片的排列方式是按列或者行的方式举行对齐展示视线沿着横向或者纵向浏览能快速找到想要的信息此外这种牢固巨细的卡片方块也有利于栅格化排版。

一清晰直观二简朴易懂三信息模块化。

这是印刷类的杂志界面UI设计中卡片化设计的运用方法https://www.aaa-cg.com.cn/ui/2546.html?gpf如下图杂志里的部门展示信息也接纳了这种卡片式气势派头。

3. 信息模块化

如下图这是google now的一个界面将信息、图像按维度分类整合到一个卡片里能有效地制止信息散乱、同时制止信息分类不明确像这种模块化展示有效地淘汰用户思考的时间能快速找到自己所需的信息。

华体会app官网登录

如上图大家可以看出他们普遍具有以下特点:

上面所说的形式功效的组织与出现其实讲的是设计排版上的问题固然对设计师排版功力也有相当的要求。这种排版优化的方法有许多种我这里主要围绕卡片式设计的理论举行深入探讨相信大家对卡片式设计已很是熟悉虽然已盛行了很多多少年可是设计形式并不是随着使用年事的增长而消失今天AAA教育郭老师就针对UI设计中卡片化设计的运用方法举行简朴的说明。

1. 增强点击感

卡片式设计的界说

在信息量大的页面中除了重视内容质量外形式功效的组织与出现也是同等重要对提高用户获取有效信息的效率有着很是大的资助这时应用卡片式的设计方式是不错的选择。

卡片式设计的优点

2. 排版整齐

4. 响应式设计

好比扑克牌我们可以看出虽然只有一个图案一组文字但很清晰转达出这张牌所代表的寄义;又好比机场和地铁的指示牌接纳了图标、字体元素很清晰直观地引导搭客偏向这种由文字或图案组成的方块样式叫做“卡片式设计”。这种轻巧、简练的实物设计也被逐步应用到虚拟设计当中。

华体会app官网登录

总结

另外google +、 google play等许多谷歌产物也同样接纳了这种设计如下图

卡片方块的高度和宽度的巨细都是可以调整的正是因为这种特性很适适用在响应式设计里卡片在差别的平台展示由于分辨率差别卡片能自适应地展示以上是卡片设计的优点。

正是因为卡片式设计在微软、谷歌的产物界面的大量运用许多互联网企业也纷纷接纳这种设计这是应用在PC端的界面内容部门也都接纳了卡片式设计。

在生活中我们经常接触到林林总总的类似右图中的卡片好比扑克牌、手刺、机场和地铁的指示牌等等。

UI设计中的空状态设计指南UI设计中的图标设计指南UI设计中搜索设计的技巧2020年UI设计的10个小趋势UI设计中评论区设计指南。


本文关键词:设计,中,卡片,化,的,运用,方法,在,互联网,产,华体会体育

本文来源:华体会体育-www.cot88.com

产品咨询

留言框

  • 产品:

  • 您的单位:

  • 您的姓名:

  • 联系电话:

  • 详细地址:

  • 留言内容:

在线客服 联系方式 二维码

电话

050-20873696

扫一扫,关注我们