资讯
欣赏
资源
服务
返回首页
MATERIAL DESIGN设计规范学习心得
作者:東門王三  来源:loaferwang  :

各种设计规范的逻辑

  每种系统的都期望构建一个合理的虚拟世界运行机制,而设计规范就是这个世界运行的准则,让无数的应用可在虚拟世界中的合理运行,让用户在使用中可以清晰理解。

Skeuomorphism Design(iOS1-6):

  拟物化的设计,在iOS1-6的演进中,一直备受推崇。这类设计风格的初衷是尽可能的去符合用户的心理模型,降低用户的认知成本。在这个状态下,手机就像是一个装着各种器物的箱子,而箱子中的器物就是各个完全拟物的app。拟物化的设计就是完全将现实层级的交互关系搬到手机上。

  比如iBooks在设计风格上就是完全拟物化现实中书架与书籍的逻辑,这样完全符合用户的心理预期,简单易懂容易上手:

MATERIAL DESIGN 设计规范 学习心得 谷歌
iBooks

  而下面这个豆瓣广播截图也充分反映了,拟物化设计在符合用户心理模型上的天生优势。

MATERIAL DESIGN 设计规范 学习心得 谷歌


豆瓣广播

  随着拟物化的发展,一些弊端也逐渐显现:

  现实的层级关系复杂,通过手机屏幕的二维空间没办法完全模拟;

  随着科技发展,部分物品已逐渐不为人所知,再执迷拟物,会出现反向的认知问题;

  又比如锤子时钟的秒表计时器,相信很多人是没见过实物的,更不清楚其实际的操作步骤。对于这类人使用该app的学习成本与摆上几个button的设计,区别是不大的。

MATERIAL DESIGN 设计规范 学习心得 谷歌
  锤子时钟APP

  拟物化对ui的要求极高,设计者的负担沉重,设计门槛也很高;

  拟物化的图标更适合鼠标点击操作,而随着触摸屏的普及,扁平化的大范围触碰操作更适合触摸屏的交互。

  Flat Design(iOS 7、8/WP):

至于近期火热的扁平化,iOS 7与WP尽管在视觉上看起来有些类似,但是在交互的隐喻上还是有很大的区别。

WP的Flat Design,除了在视觉上将图标拍扁,同时交互的逻辑层次上也呈现扁平化。之前的逻辑层次是“我的电脑—C/D/E盘—文件夹—各个文档软件”,而现在扁平化的逻辑层次是所有的均可在一个逻辑层次上,不去特意考虑模拟现实世界已有的逻辑,他即是全新的逻辑。这就像是被拆开打散排列放置的套娃,这时它只是排列的娃娃,而不能被称作“套娃”。

MATERIAL DESIGN 设计规范 学习心得 谷歌
Win8

  而iOS7、8的Flat Design,在视觉上与WP的设计风格类似,但是在交互上,iOS7、8通过大量的缩放、模糊、透视,用毛玻璃的风格打造了一个全新的具有位置纵深感的虚拟世界,它通过景深来控制交互的层级。同时也通过Z轴角度的变换,保证了层级的扁平。

Cards Design(webOS)、Material Design(Android):

  webOS中的卡片系统,把每个程序用卡片的形式作隐喻,在多任务的操作中配合手势区域的交互手势,让多任务操作非常便捷。同时在webOS 2.0时期,将卡片的隐喻继续发扬,在多任务中引入堆栈概念,把各个应用任务用扑克牌手牌似的形态堆叠。进一步提升了操作的体验。

MATERIAL DESIGN 设计规范 学习心得 谷歌
webOS

  谷歌在收掉webOS一票人后,Android也融入了一些卡片的理念。此次的Material Design个人的看法就是将卡片设计进一步的规范,并且扩展到整个系统层面。原来webOS是整个应用被隐喻成了卡片,而Material Design把系统内的各种设计都规范成了一种变形的纸片。然后,谷歌在套用现实中纸墨的物理模型进行交互——“既然没办法完全在手机上用app完全模拟现实世界的逻辑层次,我把app规范到纸片上,完全模拟纸片的逻辑交互层次,还不行吗?”

MATERIAL DESIGN 设计规范 学习心得 谷歌

  通过纸张的折痕来分区,尽管是两块不同的内容,在逻辑上这两块的关系还是很紧密的,在表现上仍是一张纸。

MATERIAL DESIGN 设计规范 学习心得 谷歌

  通过边线的阴影表达这是两张纸,逻辑上这两块的关系是独立的,上层的纸片联动肯定不会干扰下层的的纸片。

MATERIAL DESIGN 设计规范 学习心得 谷歌

  内容主体的纸片可以在工具栏纸片下部上下移动。

MATERIAL DESIGN 设计规范 学习心得 谷歌

  菜单栏是一张全新的小纸片,贴在现有的纸片层次之上。

MATERIAL DESIGN 设计规范 学习心得 谷歌

  浮动按钮,是一张圆形的纸片,贴在除了系统bar之外的所有的纸片层次之上。

MATERIAL DESIGN 设计规范 学习心得 谷歌

  以上是程序界面整体的逻辑层级关系,同时将这些层次区分出来的方式就是通过纸片边缘的阴影。

MATERIAL DESIGN 设计规范 学习心得 谷歌

Cards的阴影表现

MATERIAL DESIGN 设计规范 学习心得 谷歌

FAB的阴影表现

MATERIAL DESIGN 设计规范 学习心得 谷歌
Right Nav的阴影表现

  简而言之,Material Design的纸张设计首先是将界面集成到纸片上,再通过阴影来区分多层的纸张,最后进一步通过纸片的拼贴提供了多平台统一且多样的交互可能。

上一页  1 [2] 3  下一页
本文相关关键字: MATERIAL | DESIGN | 设计规范 | 学习心得 | 谷歌
继续阅读:
[转载请注明作者与出处 传播设计品牌影响力 汇聚中国设计力量 联络QQ:3319655717]  编辑:shx
推荐
广东工业设计行业...
OS X Mavericks与...
2014英国斯特林建...
Masquespacio挪威...
花边
用光画油画的摄影...
超HOT纹身的妩媚...
创意香皂大集合(...
永远的美丽 性感...
看这些纹身的女人...
Kim joon的“Bird...
排行
专题
  • 平面设计

  • 工业设计

  • CG插画

  • UI交互

  • 室内设计

  • 建筑环境

设计服务友情链接网站地图广告服务合作伙伴关于我们版权申明
中国设计之窗 © 版权所有 粤ICP备09030610号 
Tel:0755-21041837 客服:serve@333cn.com 资讯提交:3319655717@qq.com