网站设计

Website development

卡片式设计思考，形式与功能

发布时间：2016-07-25 09:40:52

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

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

卡片式设计的定义

在生活中，足球外围最靠谱的网站经常接触到各式各样的类似右图中的卡片，比如扑克牌、名片、机场和地铁的指示牌等等。

卡片式设计1.jpg

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

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

比如扑克牌足球外围最靠谱的网站可以看出虽然只有一个图案，一组文字，但很清晰传达出这张牌所代表的含义；又比如机场和地铁的指示牌，采用了图标、字体元素，很清晰直观地引导乘客方向，这种由文字或图案组成的方块样式叫做“卡片式设计”。这种轻巧、简洁的实物设计也被慢慢应用到虚拟设计当中。

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

另外google +、 google play等很多谷歌产品也同样采用了这种设计，如下图

卡片式设计3.jpg

正是因为卡片式设计在微软、谷歌的产品界面的大量运用，很多互联网企业也纷纷采用这种设计，这是应用在PC端的界面，内容部分也都采用了卡片式设计，如下图：

卡片式设计4.jpg

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

卡片式设计5.jpg

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

卡片设计6.jpg

1.增强点击感

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

卡片设计7.jpg

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

卡片设计8.jpg

2.排版整齐

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

卡片设计9.jpg

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

卡片设计10.jpg

3.信息模块化

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

卡片设计11.jpg

4.响应式设计

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

卡片设计12.jpg

项目实践

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

卡片设计13.jpg

DNSPod管理控制台概览页

卡片设计14.jpg

总结

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

原创不易，未经授权，严禁转载

原文地址：https://www.yzlink.cn/i,72,6667,0.html

上一篇：一个优秀的网站建设项目是如何炼成的

下一篇：互联网是流行定制的年代官方网站也可以定制

您还有可能感兴趣的内容

建站流程

Website development

网站需
求分析
网站策
划方案
页面风
格设计
程序设
计研发
资料录
入优化
确认交
付使用
后续跟
踪服务
+86 10 64758810
18510861135

热门标签

Website development

客户评价

更多+

感谢足球外围最靠谱的平台，系统提前完成，在整个项目周期内，足球外围最靠谱的平台对待足球外围最靠谱的网站并不像是对待客户，更像是朋友一样，每一次，都能以专业的角度向足球外围最靠谱的网站提出更合理、更有效的解决方案，并快速、细致地完成足球外围最靠谱的网站的每一个需求，再次感谢以至诚之心做事的足球外围最靠谱的平台团队。

潘涛
我是东方龙马集团，在云智家做了2个企业官网，服务态度超级好。如果想做网站，选择他家一定不后悔。性价比高，服务态度好。值得你的信赖！

谭娇
技术好，设计精良，操作便利，很专业！配套的服务和后续的服务都很好,网站封面堪称精品，运行方便，后台操作的简单。技术还会耐心教我,很好的足球外围最靠谱的网站，建站很不错的。

陈曦
不错，价格比较合适，重点是响应速度蛮快，有什么问题都会马上给你解决，公司很满意，因为他们都是针对每个项目建了相应的讨论组，有问题可以再里面提出，人员分工到位，解决问题很及时。

张经理