所有你需要知道的关于材料设计

2014-07-09    分类: 网站建设

虽然这是事实,材料设计是一种新的设计语言,由谷歌参考,它不仅仅是一个想法。

毫无疑问,这引起了设计师来检查他们的Web和应用程序设计的概念。事实上,许多网站已经应用材料设计方案通过谷歌。

材料设计的定义
材料设计是一种视觉语言通过谷歌设计团队制定。得出珠帮助设计师拿出了应用程序和网站,不仅是实用的和可用的而且是可访问的,太。一个是向公众提供活的文件,是什么激发了我的想法。资料定期更新,以便在其范围的变化和技术可以反映。

1
“材料设计的爱情和生活中的细节。不是每个人都会喜欢它,但它以自己的方式,应该得到尊重。然而,每当我们谈论美学和互动,我们应该谈一谈绩效,太。即使是高性能的动画可以证明一个巨大的瓶颈的时候,每一个DOM元素应该是,从一个国家到另一个动画和过渡。
性能问题比以往任何时候都要找到微妙的平衡之间的相互作用,得到平滑的内容给用户快速。更多的重量并不意味着更多的等待,所以我们可以将动画作为渐进增强,承认经验不会与大家的材料设计文化。
那时候响应动画的概念我们没有思考很多但也可能成为重要的(不被混淆与动画响应式设计,可以愉快的为好)。”

所有你需要知道的关于材料设计
目标
什么材料的设计是怎么实现?
材料设计的目标和原则
说实话,材料设计围绕一系列的目标和原则,比实施容易制定。然而,这不应该是一个问题,因为本质上是更多的思考和改进的设计。

材料设计的目标:
拿出一个视觉语言,融合了一个随着科学技术的进步和机会令人印象深刻的经典设计原则。
创建一个基本的系统,使不同平台和尺寸统一的经验,无论设备。移动原则是基本的,但触摸,声音,鼠标,键盘都fi的参与程序。
材料的设计原则:
1。材料的隐喻

对于被锚定在现实的视觉线索是很重要的。一个物质的隐喻是凝聚理论的一个合理的空间和一个系统的运动。材料是锚定在触觉现实,由纸张和油墨的影响研究。尽管如此,它是先进的技术和娱乐的魔法或想象。

常见的触觉功能的使用可以帮助用户快速理解的启示。然而,这种材料的柔韧性带来了新的启示,取代那些在物质世界,而无视物理规则。光的本质,表面和运动的传输重要物体如何移动,互动,和空间和彼此的关系存在。真实的照明显示层,分割空间,并提出运动部件。

2。大胆,图形,故意

视觉效果应该由设计的基本理论为指导,如颜色,图像,规模,类型,使用网格,和空间。他们给上升到层次,意义,和焦点。

测量颜色的选择,边缘到边缘的图像,大字体,和故意的白色空间做出了一个大胆的图形界面,将用户的体验。对用户行为的一个亮点使核心功能立即清除了用户点。

3。运动赋予意义

但不可否认的是,移动的物体或动作伟大的,它必须确保他们不中断任何用户体验。此外,必须有这些动画或移动图像和网站的本质之间的一致性。

运动方面,加强用户的主要动机。Prime用户行为调制点开始运动,在整体设计的全面转型的结果。所有的行动发生在一个单一的设置。对象提供给用户体验的连续性但不破坏和重组转型。运动是唤起和拟合功能,集中注意力,保证连续性。但不同的反馈抑制。尽管是有效的,它的转换是一致的。

30b9ddc0bd564351fd235a613d5e874c
“另一个关于材料设计令人惊奇的是它的奉献和灵感来自现实世界。合法的材料如何影响材料设计的创立和发展。(因此得名。)这是巨大的因为技术可以不再感觉像技术轨道的开始。因为我们的硬件越来越先进,数字世界现在可以慢慢开始模糊真实世界和数字世界之间的线。”
保拉–Borowska
材料设计与平面设计
有很多因素对材料设计的指导。然而,他们可以简化为一个广泛的具体思路和方法阵列。谷歌制定了一套规则如何制作动画,图案,款式,设计,可用性,和组件。你要注意,虽然,该材料应与现实,意味着物体可以在三维空间中发现,几乎…!

就美学而言,它的边界的借壳和平面设计规模之间。相反,平面设计,虽然,材料设计广泛利用所谓“纸影。这个影子是像一张纸躺在光亮的表面。它模仿一个数字对象的三维存在。也许,最著名的例子是Gmail图标,利用灯光效果使你想到一个有形的信封。

材料设计的颜色和字体
材料设计的色彩观念是非常鼓舞的扁平化设计趋势,这意味着其调色板不仅大胆而明亮,太。颜色是由色彩大胆陈述随着低沉的背景对比,现代建筑以暗示,标线带,道路标志,和运动场。它强调大胆的阴影和集锦因为它融合充满活力的和不寻常的颜色。是什么使材料设计有趣的色彩观念是鲜明的对比使用。

这个印刷术是基本准则因为它需要在同一平面的主题和简单的无衬线字体。它有各种各样的应用程序的默认字体,手机,这是一个下载链接和一个字体的使用梯子。

材料设计的布局和设计
基本的布局和材料设计项目的设计灵感来自于印刷设计概念结构。创建和使用基线网格和数学结构元素的适当位置是大力鼓励。布局进一步简化到地区推荐怎样把元素为最终用户交互。

此外,每一个想法都有一个可下载的Android的创建模板。然而,有一个设计师最终的设计可能过于俗套,风险或更糟的是,一个应用程序,这无疑是Android。毫无疑问,这可以在人喜欢iOS坏风度。

元素
让我们来看看哪些设计元素的描述材料的设计。
材料设计的共同元素
材料设计的所有元素的详细定义。当然,这是很难想象的东西是不存在的。

这里有一些材料设计的19个最常见的成分:

下表–是板材,自底向上滑动显示更多的内容。
–按按钮或者包含图像或文字或与你的应用程序的颜色。
卡–作为更多信息介绍
芯片–包含复杂的实体,如一个短标题字符串或照片
对话框–其内容从文本或UI控件
分频器–这个组件分离内容在页面布局和列表
网格–分离类似的数据,如图像和优化它的视觉理解
列出–目前类似的数据,如文本和图像,并优化他们的阅读理解
列表控件–这些图标发现列表的左侧或右侧
菜单–出现按钮,用来选择一个离散的行动或选择
采摘–工作以及在确认对话框中显示
进步和活动代表每个动作与一个单一的活动指标
滑块–让你选择从一系列的一个值
快餐店和面包–这些主要用于系统消息。
–旗标,特殊的瓷砖,描述不同的部分或表明在材料接缝
开关–也叫选择按钮和分为三种–复选框,单选按钮,等。
标签–帮助你探索应用程序和网站之间更容易
文本域–决定字符将被包含在字段的类型
提示–是出现在标签上盘旋
这是多么的可下载的组件看起来像。
这是多么的可下载的组件看起来像。
如果功能组件的目光落在了你的青睐,你可以甚至下载一个Adobe Illustrator或素描PS图象处理软件,文件提供的所有元素和Android系统图标。的贴纸来完成,包括符合推荐的网格样式。

约旦
“材料设计带来的视觉和体验性对谷歌产品跨设备,从而加强品牌最终公司作为一个整体,同时鼓励连续性原理。材料设计将使谷歌它的长期缺失的均匀性的产品。有明显的对比,在用户界面和用户体验的产品像Android,Chrome,和Gmail。”
-乔丹干瘪
材料设计的可用性和可访问性,互动,
不可否认的是,最成功的产品都可以到各种各样的消费者。这只可能是一个产品就可以访问到所有的人,无论他们的能力,只要他们能理解并帮助他们实现自己的目标。在材料设计文档的情况下,打开的网页设计师眼中的模式,可以提高可用性和可访问性,互动。

诚然,一些材料设计的审美特性显得非常基本和让经验丰富的设计人员提高他们的眉毛,不可否认,它的许多交互和可用性的想法是不可忽视的。毫无疑问,其互动模式的部分设计师是伟大的帮助。它指定一组概念为了使一些元素从一个到另一个通用设计。这些都是网络用户不只是想工作但工作的简单工具,也。这是一个明显的优势,毫无疑问。

一种材料的设计文档,并提供了有用的选项是可访问性。它提供了一个伟大的很多用户可能会在不影响颜色或声音设计互动的考虑,一些其他事情,可以吸引很多用户。

使用卡
与材料设计,内容总是在卡使用层次提供,背景图片和内容提供背景和较强的信息和观点的一个切入点。毫无疑问,卡工作因为他们是为了把信息足够数量在一个压缩的概述,这是改善和视觉元素的支持。有许多变化和卡,他们依靠你要填写的内容。然而,更多的往往不是,你将需要显示一个动作或一个内容块给一个信息。

资源
有材料设计资源在网上大量
10材料设计资源
材料设计的思想是伟大的,其方针是整洁的新。即使指南似乎是最有经验的设计师没有用的,因为它是最有可能的是,他们不需要这种级别的指导,不可否认,它仍然是令人敬畏的。说到这,它是不是真的奇怪为什么材料设计使它的存在感到越来越。你可以从谷歌下载一些东西,但是有许多资源,可以帮助你发现更多的材料的设计思想:

下面是一些有用的材料设计概念资源列表:

引导材料设计
谷歌的布局模板手机,平板电脑和台式机的框架
angular.js材料项目
聚合物的设计师
材料设计画廊
材料的相互作用
实现前端框架
材料的调色板
材料设计模板
在Android清单材料设计
网站和移动应用,应用材料的设计实例
在材料设计中提出的概念已经被许多网站和移动应用程序。

这里有五个例子,展示材料的设计原则,展示设计师可以使用和修改的想法:

创新互联设计文章推荐:

四川成都营销型网站建设
九江瑞昌网站制作_瑞昌网站制作公司

文章名称:所有你需要知道的关于材料设计
网页URL:https://www.cdcxhl.com/news15/20115.html

成都网站建设公司_创新互联,为您提供关键词优化网站收录App设计网站改版面包屑导航品牌网站制作

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

h5响应式网站建设