LOGO-200LOGO-120x35LOGO-200LOGO-200
  • 首页
  • 课程
    • BIM全科高级综合班
      • BIM建筑与结构实战班
      • BIM机电管线实战班
      • BIM建筑装饰实战班
      • 全国BIM技能等级考试班
    • 室内设计就业高级综合班
    • 建筑园林景观表现班
    • 建筑参数化设计犀牛班
    • 工业产品设计犀牛高级班
    • 平面广告设计
    • 淘宝美工网页
    • AutoCAD专项
  • 教程
    • 视频教程
    • Auto CAD 课件
    • 室内设计课件
    • 建筑犀牛课件
    • BIM课程课件
    • 产品设计课件
    • 平面设计课件
    • 草图SketchUp 课件
    • Lumion 园林动画课件
    • 其他教程
      • 平面设计教程
      • 建筑犀牛教程
      • 网页设计教程
      • UI设计教程
      • 产品设计教程
      • 室内设计教程
      • 3D效果图教程
  • BIM技术
  • 经典
    • 建筑设计经典
    • 室内设计经典
    • 产品设计经典
    • 平面设计经典
    • 网页设计经典
    • UI设计经典
    • CG插画经典
    • 设计动态
  • 资源
    • 室内整体模型
    • 室内模型
    • BIM模型
    • SU草图模型
    • 建筑全模场景
    • 建筑园林素材
    • 产品设计素材
    • 平面网页素材
  • 软件
  • 作品
    • 室内设计作品
    • 建筑犀牛作品
    • 产品设计作品
    • 园林设计作品
    • 平面设计作品
  • 我们
    • 承接业务
    • 成功案例
    • 我们的风采
    • 最新动态
    • 合作企业
    • 招聘求职
    • 关于我们
  • 手机版
形式与功能 – 卡片式设计基础概念和运用方法

卡片式设计有什么优点?什么时候可以运用卡片式设计?最近腾讯设计师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

总结

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

Related posts

2018年9月25日

厦门中海熹凤台 PHOENIX MANSION of Xiamen COHL / PDS design 派澜设计事务所


Read more
2018年9月18日

水晶石教育 的“聪明” 招生方法,请问赚钱和品德那个重要?


Read more
2018年9月10日

草图大师 sketchup插件LAYOUT应用,施工图制作。


Read more
2018年9月3日

BIM技术和建筑参数化设计结合,GRASSHOPPER-ARCHICAD连接


Read more
2018年9月1日

CorelDraw X7 免费免破解绿色版下载


Read more
2018年8月28日

21世纪的筑建模设计分析


Read more
2018年8月28日

纽约的交通枢纽:城市合金塔


Read more
2018年8月21日

小高层商住楼 BIM模型 revit 模型 免费下载


Read more
2018年8月11日

BIM在建筑工程中的应用有哪些?有哪些优势?


Read more
2017年6月13日

朱彦桦作品集


Read more
2017年5月5日

2016现代后现代模型餐厅13套011


Read more
2017年5月3日

精选家具模型 1025


Read more
2017年5月2日

全景渲染图1105


Read more
2017年4月26日

建筑全景模型及渲染图2075


Read more
2017年4月26日

建筑全景模型及渲染图2056


Read more
2017年4月25日

【官网】建筑设计中4个极速作图技巧


Read more

搜索本站

最新文章

  • Keyshot 8.0 破解版下载 2019年1月19日
  • 电脑手绘作品 2019年1月7日
  • CorelDraw第十三节杂志内页排版 2018年12月17日
  • CorelDraw第十二节包装效果制作 2018年12月17日
  • CorelDraw第十一节宣传栏制作 2018年12月17日
  • CorelDraw第十节店招聘海报制作 2018年12月17日
  • CorelDraw第九节店铺圣诞促销海报制作 2018年12月17日
  • CorelDraw第八节店铺广告制作 2018年12月17日
  • CorelDraw第七节名片制作 2018年12月17日
  • CorelDraw第六节渐变颜色编辑鼠标 2018年12月17日

标签云

3DMax软件下载 AutoCAD软件下载 BIM技术 BIM技术经典 BIM教程 CG插画 CG插画经典 SU模型 UI设计 UI设计教程 UI设计素材 UI设计经典 Vray软件下载 产品设计作业 产品设计作品 产品设计教程 产品设计素材 产品设计经典 全模型建筑场景 合作企业求才 园林设计作业 室内家具模型 室内整体模型 室内设计作品 室内设计素材 室内设计经典 平面网页素材 平面设计 平面设计作业 平面设计教程 平面设计经典 平面软件 平面软件下载 建筑园林素材 建筑设计经典 异形建筑 我们的风采 技巧 摄影 摄影,技巧 最新动态 网页设计经典 苹果MAC软件下载 设计动态 设计动态经典
  • BIM建筑结构基础班-Revit
  • 室内设计3Dmax效果图精选实战班
  • 草图大师 Sketchup室内设计方案班
  • 【官网】建筑犀牛参数化设计综合班 | 犀牛 (Rhino)+ 参数化草蜢插件Grasshopper
  • 工业产品设计犀牛高级班-Rhino建模+keyshot渲染+高级实例
  • 【官网】AutoCAD施工图实战班-室内制图、建筑制图、园林制图

严老师 mike 电话和微信

手机:18902259698 020-85210826

晶网企业号

长按识别晶网企业号获得更多资源

点击企业QQ客服

晶网设计是广州建筑室内设计培训知名机构,拥有专业建筑犀牛课程,BIM培训,室内设计学习,园林景观,产品设计课程等完善的广州室内设计培训教学系统

地址:广州天河北路高科大厦A座3001室(地铁三号线华师站B 出口,前行20米左转就入A座大堂, 3号电梯上30楼)

©2018 晶网设计 粤ICP备10225019号-1