企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

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

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

TAGS:网站设计

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

上面所说的形式功能的组织与呈现本来讲的是设计排版上的难题,当然对设计师排版功力也有相当的需求。这种排版优化的办法有很多种,我这里主要围绕卡片式设计的理论进行深入探讨,相信各位对卡片式设计已非常熟悉,虽然已流行了好多年,但是设计形式并不是随着使用年龄的增长而消失,芝加哥学派路易斯.H.沙利文提出过:“形式追随功能”就能说明这一点。近笔者在项目改版中也运用了相关卡片办法,发现效果不错,所以期望借在项目里的思考与尝试,抛出引子,供各位参考。Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片式设计的定义Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

在生活中,我们经常接触到各式各样的类似右图中的卡片,例如扑克牌、名片、机场和地铁的指示牌等等。Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片式设计1.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

如上图,各位可以看出,他们普遍具有以下优点:Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

一清晰直观,二简单易懂,三信息模块化。Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

例如扑克牌我们可以看出虽然只有一个图案,一组文字,但很清晰传达出这张牌所代表的含义;又例如机场和地铁的指示牌,采用了图标、字体元素,很清晰直观地引导乘客方向,这种由文字或图案组成的方块样式叫做“卡片式设计”。这种轻巧、简洁的实物设计也被慢慢应用到虚拟设计当中。Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

1469411755417781.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

如上图,如今卡片式设计的应用场景非常广泛,有代表性的是微软Win8、Win Phone 7的metro风格,他们也是采用了大量的卡片式设计,据说这种Metro的设计灵感也来自于机场、地铁指示牌。Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

另外google +、 google play等很多谷歌产品也同样采用了这种设计,如下图Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片式设计3.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

正是因为卡片式设计在微软、谷歌的产品界面的大量运用,很多互联网企业也纷纷采用这种设计,这是应用在PC端的界面,内容部分也都采用了卡片式设计,如下图:Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片式设计4.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

下图中的移动端的界面,模块中可点击部分也采用了卡片风格。Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片式设计5.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

这是印刷类的杂志界面,如下图杂志里的部分展示信息,也采用了这种卡片式风格。Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片设计6.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

1.增强点击感Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

这是诺基亚手机的win phone系统(下图),系统桌面的所有内容全是一个个小方块展示,类似一个块状类的按钮,让人联想到是可以点击的操作入口.Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片设计7.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

而且每一块入口全是有区域大小(下图),从而避免造成误点击。Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片设计8.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

2.排版整齐Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片设计9.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

例如下图,页面按5个单元进行栅格,利用卡片方块的展示,很轻松地计算并调整它的大小进行栅格布局Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片设计10.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

3.信息模块化Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

如下图,这是google now的一个界面,将信息、图像按维度分类整合到一个卡片里,能有效地避免信息散乱、同时避免信息分类不明确像这种模块化展示有效地减少客户思考的时间,能快速找到自己所需的信息。Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片设计11.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

4.响应式设计Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片方块的高度和宽度的大小全是可以调整的,正是因为这种特性很恰好用在响应式设计里,卡片在不同的平台展示,由于分辨率不同,卡片能自适应地展示,以上是卡片设计的优点。Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片设计12.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

项目实践Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片设计13.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

DNSPod管理控制台概览页Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

卡片设计14.jpgDga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

总结Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

在信息量大的页面中除了重视内容质量外,形式功能的组织与呈现也是同等重要,对提高客户获取有效信息的效率有着非常大的帮助,这时应用卡片式的设计方式是不错的选择。Dga上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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

原文地址:/i,72,6667,0.html

客户评价

更多+
  • 感谢特马资料qq群,系统提前完成,在整个项目周期内,特马资料qq群对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的特马资料qq群团队。

    潘涛

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

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的特马资料qq群(上海)科技有限公司,建站很不错的。

    陈曦

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

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

服务领域

  • 网站定制开发
  • PC网站设计
  • 域名邮箱
  • 网站维护
  • 网站二次开发
  • 响应式网站设计
  • 虚拟主机
  • 网站优化
  • 网站设计开发
  • 创意设计
  • 云主机
  • 项目合作

合作伙伴

All Rights Reserved.©2010-2016 特马QQ群|资料网站京公网安备 110105019435 京ICP备123124426号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:上海市辉瑞律师事务所。
嘿,我来帮您!