- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
Materil Design设计方法及设计案例分析
Material Design设计方法及设计案例分析 【摘 要】Material Design及原质化设计,是Google在2015年推出的一种适用于电脑、手机等平台的崭新的视觉设计语言。这种设计方法以经典设计的原则为基础秉承了创新的设计理念、汲取了更多科技的力量,为用户创造了一种新的、符合时代的视觉语言。为现代设计的进步提供了新的方向,让设计方法变得更加生动和多元化。 中国论文网 /1/viewhtm 【关键词】material design设计方法 instagram 1 Material Design设计方法分析 1.1 Material Design设计方法 Material Design中文是指原质化设计,它是google在2015年推出的一种崭新的视觉设计语言,目的是为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。 1.2 Material Design视觉效果分析 这种设计语言在视觉效果呈现的优点中主要体现在这几个方面――视觉层级、色彩选择、界面排版,它正在用一种崭新的方法诠释了设计的意义。 在视觉层级的设计中,material design的表面和阴影起到了重要的作用,能够展示出界面的层级架构。精心选择色彩、图像、选择合乎比例的字体、留白,划分出导航栏与内容页,构建出合理的视觉层级结构,卡片式的简洁化设计也是其视觉层级中的一大特点。在色彩选择中,Material design的原则是“大胆、图形化、有意义”,在Material Design中,配色提倡一种主色,一种互补色。在区域较大部分的色彩采用主色色调,区域较小的部分例如状态栏采用深一点的色调。在界面排版中Material design对于界面的排版非常的重视。该设计方法中是按照基线的摆放位置来进行版式设计的,这样的界面会显得更加有序,而不是杂乱无章,我们可以看出,Material Design将第一基线放在距离边界16dp的地方,与文本项对齐的第二基线被摆放到距离左边界72dp的地方,这种对齐规则让用户更加快速阅读信息。 1.3 Material Design交互设计分析 Material design交互设计的优点主要体现其交互动画和响应式交互中,有意义的转场动画能够让人更加心旷神怡,而响应式交互设计则是满足了时代移动端发展的要求,这些交互形式都是基于用户体验和内容形式考虑而设计的。 Material design的动画的设计主要体现在一些按钮的动效和页面的切换动效中,其动画特征应用了视觉连贯性的特征,应用了淡出元素、通用元素、新入元素,使画面的整体感更加美观,而且这些动画是符合用户体验,服务于相应的功能的。 Material design的响应式设计不是简单的能在各种平台中适应屏幕,而是有了新的进步和发展,增添了元素响应和表层响应。元素响应是指屏幕中的每个元素本身也能做出交互响应,用户可以通过点击、拖动来生成、改变元素或者直接对元素进行处理。表层响应则是指可视化的图形在屏幕上会随着用户的点击或滑动产生相应的变化。 2 Material Design案例分析――app《Instagram》 2.1 《Instagram》产品定位及分析 该app产品定位为一款照片分享类软件,他是以一种快速、美妙和有趣的方式将你随时抓拍下的图片然后分享彼此的动态,它是一款基于碎片化时间的社区互动而产生的,人们可以随时随地把自己的心情表达通过图片、文字或视频的形式表达给世界各地的人,建立了一个很庞大的社区体系。 2.2 《Instagram》视觉设计 该app产品的视觉上应用了material design的设计方法,在颜色上选取了蓝色的主色调,并应用了浅蓝色的补色,将颜色进行图形化设计,在主页部分应用了卡片式的视觉设计方法,这样更加符合格式塔心理学,充分的将设计方式与内容形式结合起来,在视觉版式设计中也是有其标准,在两边的基线部分留有16dp的地方,这样的留白会让用户浏览起来更加有节奏感,会让用户更加快速的浏览文字以及图片。在产品导航栏icon设计中应用了无边框按钮设计,在激活状态下添加了阴影背景的变化,这样更加符合material design的设计方式。 2.3 《Instagram》交互设计 该app产品主要的交互是分享照片,而分享照片中包括用户发表状态,用户之间形成的评论,以及用户的分享这三种状态,浏览方式上主要是应用了超长页面的卡片式浏览模式,交互方式主要是点击与滑动,在交互模式上由分享、上传、评论等功能组成,其在交互设计上有独特的创新和发展。 3 Material Design设计潮流及未来趋势 该Material Design并不是
文档评论(0)