浅谈Material Design设计文档的4条训示

qwerty528463

qwerty528463

2016-02-16 21:52

下面这个浅谈Material Design设计文档的4条训示教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

Material Design 是Google新发布的设计文档,尽管很多童鞋还不了解,但从今天分享的这4个细节上,你可以看到Google的设计师为其付出了多少努力。它对于设计师的价值更是无可估量,绝对是帮你进行设计的优质资源。

Material Design是Google打造的一套新的视觉语言,用来统一它的多种产品。Google发布material design的概念时,同时发布了一些文档,满足人们对于他们视觉指南的好奇心。

Material Design文档是一套关于如何进行设计的优质资源。

浅谈Material Design设计文档的4条训示,PS教程,图老师教程网

Google的文档,尤其适合那些想要向行业引领者学习创建视觉美学的设计新手。同时也让经验丰富的设计师了解Google的思想。这是一份编排精良、经过深思熟虑的文档,为我们带来了Google的设计师们的领悟。这份文档包含了大量的训示。我已经通读一遍,在此想向你分享一些其中的干货。

通过动效来建立有意义的关联

Material Design大量强调设计中的动效和动画。重要原因之一,是它可以让用户清楚看到自己的操作如何对界面产生影响。Google举了个向相册添加图片的例子。如果你看看下面的这个例子就会注意到,上方覆盖的层有淡入淡出效果。出于两个目的:清晰与愉悦。首先,它建立了一种视觉层级,用户认为它在界面的上方。尽管这是技术上实现,并非真实的,因为界面并不分层;但它使用户以一种更简单的方法理解界面。这就是清晰。

将它与第二个无过渡、界面突然出现的效果相比。它显得很突兀这就是建议使用淡入淡出的第二个原因它也没有建立任何视觉上的认知。新的界面突然出现,用户的操作和界面的视觉变化有何关联,它没有给出任何解释。错失了一个愉悦用户的机会。

例子:

With transition(有动效)

Without transition(没动效)

避免生硬的切换。生硬的切换很突兀,让用户花大量精力理解其中的过渡。视觉的连贯性(谷歌链接,自备梯子。同下)

密切关注字体

Material Design指南有大篇幅的字体章节。很明显,其中精髓是要我们注意字体运用,尽可能提供最佳的阅读体验。这可以提升整体的体验。如此众多的设计关注按钮这样的UI细节,但是有多少真正兼顾了字体的?这可是我们很少提及的东西。这字体的这个章节中,你可以看到Google的设计师为其付出了多少努力。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

浅谈Material Design设计文档的4条训示,PS教程,图老师教程网

与背景颜色相同的文字难以阅读,这点很好很理解。不太明显的一点是,反差太大的字体使人眼花缭乱,不易阅读。这点在深色背景上尤为显著。标准样式

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

像行高和颜色这类是需要特别定义的,为了尽可能给用户带来最佳体验。Roboto字体甚至也被重新定义了,来跨平台提升它的易读性。而且,一段文字呈现的方式至关重大,因为缺口和隔断使得阅读更困难。注意去除这些隔断文字,这大有帮助。

浅谈Material Design设计文档的4条训示,PS教程,图老师教程网

运用色彩

多数人对Material Design的第一印象,是它大胆明亮的配色方案。看看色彩章节,你会发现有这么多种颜色。这一点非常棒,有以下几点原因。首先,大胆的用色可以给Google的界面赋予个性化。创建一套非常妙的配色方案没什么不妥。这是一次很好的改变,因为iOS7问世时,它的主色是浅灰色系。而且,Google建立这套色彩指南的方式非常清晰,是使用颜色的极佳参考。

面对现实,当有太多色调可供选择时,颜色的确可以很吓人。虽然Google提供了广阔的颜色选择范围,它也提供了如何使用的指南。Google开篇显而易见地陈述了:限制你的颜色选择,有需要时使用多种深浅变化,并且明智地使用辅助色。

浅谈Material Design设计文档的4条训示,PS教程,图老师教程网

我们非常鼓励在界面中大面积、大胆地运用色彩。界面中不同元素承担配色的不同部分。工具栏和更大的色块会使用主色。这是APP的主要颜色。状态栏使用更深色调的主色。 UI配色应用

全部都归结为易用性

Material Design文档的最后章节似乎有着至高的重要性。易用性与可用性章节提及了大量问题,设计师在设计APP或界面时需要全面考虑。这章的作用在于,提醒你设计无论如何都要易用。

当所有人不论残疾与否都能够浏览、理解和使用一个产品来完成他们的目标时,这个产品就是可用的。真正成功的产品,对于尽可能广的用户群体都是可用的。可用性

这份文档向你提出了几个严肃的问题,你的产品没有声音、色彩或者屏幕时,如何做到可用。一个残疾用户能轻松使用你的产品吗?

文档的这一章探讨了导航、易读性、用户和反馈的一些细节,让你清楚了解你的产品的关注点应该在哪里。如果你通读一遍,你会发现刚才指出的那些问题显而易见,例如确保最小屏幕元素点击区域是48×48像素,不至于太小,使一般的人类手指可以对它进行操作。有一些则更具体,比如确保链接都有恰当且有意义的标题。

让链接有意义。每个链接的指向是否清晰?类似点击这里这样的常见链接文字,并不能解释链接指向何处。把目的地放入链接自身当中。对于点击这里有个更好的解决办法,是使用具体的链接,比如设备选项。有些无障碍模式让用户只看到链接,忽略其他内容,为了使导航更加有效。

随着科技产品用户人数的激增,关注易用性至关重要。看到material design文档贡献了一整章来探讨易用性和可用性,真是大快人心,它提醒我们,产品不论是什么对所有类型的用户都要是可用的。

结论

我支持你深入研究Material Design文档,这是免费的在线文档。其中有非常棒的建议和干货。对于设计新手和有兴趣学习界面设计的人来说,它是一件学习工具。对于经验丰富的、想要先睹为快行业引领者设计思维的设计师而言,它也在刷新着他们的理解。

展开更多 50%)
分享

猜你喜欢

浅谈Material Design设计文档的4条训示

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈Material Design设计文档的4条训示

详细解析Material Design引领的设计趋势

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析Material Design引领的设计趋势

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

谷歌设计师的Material Design实践心得

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
谷歌设计师的Material Design实践心得

Material Design图标设计有哪些不同的玩法

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
Material Design图标设计有哪些不同的玩法

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

Material Design的Android系统手机应用UI设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
Material Design的Android系统手机应用UI设计

Aviary设计师的Material Design改版实战

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
Aviary设计师的Material Design改版实战

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

25个漂亮的包装设计作品欣赏

25个漂亮的包装设计作品欣赏

网站风格指南在线生成工具:Stylify Me

网站风格指南在线生成工具:Stylify Me
下拉加载更多内容 ↓