形式追随功能!聊聊卡片式亚博娱乐亚博注册的基础概念和运用方法 - 优设网 - UISDC

形式追随功能!聊聊卡片式亚博娱乐亚博注册的基础概念和运用方法

2016/07/21 9278评论区

card-design-conception-and-usage-1

编者按:卡片式亚博娱乐亚博注册有什么优点?什么时候可以运用卡片式亚博娱乐亚博注册?最近腾讯亚博娱乐亚博注册师leey?在项目改版中也运用了卡片式亚博娱乐亚博注册,发现效果不错,所以希望借在项目里的思考与尝试,抛出引子,供大家参考。

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

上面所说的形式功能的组织与呈现其实讲的是亚博娱乐亚博注册排版上的问题,当然对亚博娱乐亚博注册师排版功力也有相当的要求。这种排版优化的方法有很多种,我这里主要围绕卡片式亚博娱乐亚博注册的理论进行深入探讨,相信大家对卡片式亚博娱乐亚博注册已非常熟悉,虽然已流行了好多年,但是亚博娱乐亚博注册形式并不是随着使用年龄的增长而消失,芝加哥学派路易斯.H.沙利文提出过:“形式追随功能”就能说明这一点。最近笔者在项目改版中也运用了相关卡片方法,发现效果不错,所以希望借在项目里的思考与尝试,抛出引子,供大家参考。

卡片式亚博娱乐亚博注册的定义

在生活中,我们经常接触到各式各样的类似右图中的卡片,比如扑克牌、名片、机场和地铁的指示牌等等。

yj201607211

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

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

比如扑克牌我们可以看出虽然只有一个图案,一组文字,但很清晰传达出这张牌所代表的含义;又比如机场和地铁的指示牌,采用了图标、字体元素,很清晰直观地引导乘客方向,这种由文字或图案组成的方块样式叫做“卡片式亚博娱乐亚博注册”。这种轻巧、简洁的实物亚博娱乐亚博注册也被慢慢应用到虚拟亚博娱乐亚博注册当中。

yj201607212

如上图,现在卡片式亚博娱乐亚博注册的应用场景非常广泛,最有代表性的是微软Win8、Win Phone 7的metro风格,他们也是采用了大量的卡片式亚博娱乐亚博注册,据说这种Metro的亚博娱乐亚博注册灵感也来自于机场、地铁指示牌。

另外google +、 google play等很多谷歌产品也同样采用了这种亚博娱乐亚博注册,如下图

yj201607213

正是因为卡片式亚博娱乐亚博注册在微软、谷歌的产品界面的大量运用,很多互联网企业也纷纷采用这种亚博娱乐亚博注册,这是应用在PC端的界面,内容部分也都采用了卡片式亚博娱乐亚博注册,如下图:

yj201607214

下图中的移动端的界面,模块中可点击部分也采用了卡片风格。

yj201607215

这是印刷类的杂志界面,如下图杂志里的部分展示信息,也采用了这种卡片式风格。

yj201607216

卡片式亚博娱乐亚博注册的优点

1. 增强点击感

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

yj201607217

而且每一块入口都是有区域大小(下图),从而避免造成误点击。

yj201607218

2. 排版整齐

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

yj201607219

比如下图,页面按5个单元进行栅格,利用卡片方块的展示,很轻松地计算并调整它的大小进行栅格布局

yj2016072110

3. 信息模块化

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

yj2016072111

4. 响应式亚博娱乐亚博注册

卡片方块的高度和宽度的大小都是可以调整的,正是因为这种特性很适合用在响应式亚博娱乐亚博注册里,卡片在不同的平台展示,由于分辨率不同,卡片能自适应地展示,以上是卡片亚博娱乐亚博注册的优点。

yj2016072112

项目实践

去年做了DNSPod的项目改版,尝试新的风格探索。如官网和控制台改版中,为了能让信息更好的整合、更好地发挥不同信息的作用、发挥不同信息的功能,这次DNSPod官网改版中,banner、快捷入口,业务信息以及售卖模块,也运用了卡片式亚博娱乐亚博注册的方法。

yj2016072113

DNSPod管理控制台概览页

yj2016072114

总结

在信息量大的页面中除了重视内容质量外,形式功能的组织与呈现也是同等重要,对提高用户获取有效信息的效率有着非常大的帮助,这时应用卡片式的亚博娱乐亚博注册方式是不错的选择。

「优设七月份的交互亚博娱乐亚博注册好文」

画线框图之前要做哪些事?
《画线框图前,交互亚博娱乐亚博注册师要做的3件事》

网易云音乐亚博娱乐亚博注册师的教程:
《超全面!教你打造美观清晰易使用的交互文档》

为AR应用做亚博娱乐亚博注册有哪些要注意的?
《现在超火!为AR应用做交互亚博娱乐亚博注册时需要思考的3个问题(有彩蛋)》

原文地址:腾讯ISUX

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页亚博娱乐亚博注册师学习平台,专注分享网页亚博娱乐亚博注册、无线端亚博娱乐亚博注册以及PS教程。
【特色推荐】
亚博娱乐亚博注册师需要读的100本书:史上最全的亚博娱乐亚博注册师图书导航:http://hao.uisdc.com/book/
亚博娱乐亚博注册微博:拥有粉丝量160万的人气微博@优秀网页亚博娱乐亚博注册 ,欢迎关注获取网页亚博娱乐亚博注册资源、下载顶尖亚博娱乐亚博注册素材。
亚博娱乐亚博注册导航:全球顶尖亚博娱乐亚博注册网站推荐,亚博娱乐亚博注册师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/card-design-conception-and-usage

发表评论 加载中....

评论加载中....

yabo

评论区都快饿瘪了,看看我期盼的小眼神...

交互亚博娱乐亚博注册师 版式亚博娱乐亚博注册 界面亚博娱乐亚博注册 排版布局 职场 优设专访 亚博娱乐亚博注册师干货 优设大课堂 亚博娱乐亚博注册达人 配色 视觉亚博娱乐亚博注册 web前端开发 素材下载 AI教程 亚博娱乐亚博注册流程 亚博娱乐亚博注册理论 神器下载 字体下载 亚博娱乐亚博注册师专访 psd下载 亚博娱乐亚博注册规范 海报亚博娱乐亚博注册 亚博娱乐亚博注册趋势 用户体验亚博娱乐亚博注册 平面亚博娱乐亚博注册 动效亚博娱乐亚博注册 logo亚博娱乐亚博注册 图标亚博娱乐亚博注册 ICON 产品亚博娱乐亚博注册 神器推荐 App亚博娱乐亚博注册 字体亚博娱乐亚博注册 职场规划 酷站推荐 交互亚博娱乐亚博注册 ui亚博娱乐亚博注册 优秀网页亚博娱乐亚博注册 亚博娱乐亚博注册师职场 ps技巧 酷站 用户体验 PS教程 网页亚博娱乐亚博注册 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万亚博娱乐亚博注册师聚集地!优设网是极具人气的亚博娱乐亚博注册师平台
2012年成立至今,一直专注于亚博娱乐亚博注册师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学亚博娱乐亚博注册 优设网 在这里