产品面面观前端开发视觉设计

超赞!不容错过的Material Design设计资源大合集

2019-04-04  本文已影响68人  我是一颗小小的雨花石

时下,Material Design总被设计同行们频频提及,它是谷歌在I/O 2014大会上发布的一门新设计语言,在近几年的各类设计趋势报告中也将它视为统一Android Mobile、Android Table、Desktop Chrome等全平台设计的语言规范。虽然Material Design是一种相对较新的理念,但它能让设计师颠覆性地重新思考网页设计或程序设计,现在不少网站也已经采用Material Design的文档资料做重新设计的方案。

那么,Material Design到底能解决什么问题呢?它更适用于什么场景?是怎么操作和使用的?怎么样运用于实际的设计中呢?下面将为大家做解答,希望对你们有帮助!

Material Design是什么?解决了什么问题?

Material Design(中文名材料/材质设计),是由谷歌设计团队创建的一种设计语言,旨在帮助设计从业人员创建易用性和实用性较强的网站和APP。MaterialDesign的设计规范包含很多封面,可以细分为大量的具体概念及处理办法,可以说是一套如何创建动画、样式、布局、部件、图层以及可用性的详细规范。其实这些规范都源于Material Design提出的对基本物理特性、形变特性和运动特点的理解,从美学角度来说,Material Design介于扁平与拟物之间。

杜瓦迪说,“不应该为不同的屏幕规格创建不同的产品,而是使用一种统一的设计方法开发一款可以跨多种屏幕的产品:桌面、智能手机、车载解决方案、智能手表。当人们整天都在所有这些不同的屏幕之间切换时,他们应该能够继续使用一个特定的程序。这点不仅适用于产品的视觉外观,也适用于其功能集。如果一个人开发了一个打车应用程序,而它能在7英寸的屏幕上运行,但不能在2英寸的屏幕上运行,这是不行的。

由此可见,Material Design是为了统一跨设备间的界面和交互,从而获得连贯的用户体验的一套规范。它规范了Android的运动元素,让卡片的滑入滑出、按钮的弹入弹出以及界面划动的方法,都是有序合理的;同时,还更倾向于用色彩来提示,就像往湖面扔了石头一样,按钮颜色像湖面的涟漪一样迅速发生变化。正如Material Design名字所暗示的,它是为了适应多尺寸的屏幕而创建的。

Material Design设计资源素材

现在,很多项目中都有运用到Material Design下面整理了一些比较常见及实用的模板供参考。

后台管理设计模板

Material Admin – Material Design Dashboard Template


MaterialAdminLTE


Mejor – Material Dashboard and UI Kit


个人简介设计模板

Altair


电子商务设计模板

E-commerce Product Page Template


Codebase


个人博客设计模板

Apex


Blog Homepage Template


更多资源…

在Google的Material Design设计指南页面中已经有一些素材分享,这里给大家挑选比较有用和具体的素材源文件供下载,文件格式为Adobe Illustrator:

·移动手机原型(Mobile Whiteframe)

·平板电脑原型(Tablet Whiteframe)

·桌面板原型(Desktop Whiteframe)

·调色板(Color palette)

·Roboto字体(Roboto font)

·布局结构元素(Structural elements)

·用户界面概念元素(More of individual UI concepts)

附:Material Design使用教程

相信很多做Android开发都有听说Material Design,甚至用过无数次了。Material Design是之后Android的主流设计风格,现在有越来越多的APP遵循Material Design的设计规范进行开发,可以说它是每个Android开发者必学的基础技术。这里附上Material Design相关教程供学习。

·Material Design - 官网

·Material Design - 中文版

·Android 5.0 - 文档

·Material Design - 开始学习

·Android Design Support Library - 概览(对MaterialDesign的常用控件有很详细的讲解)

·Android Material Design - 简单使用

·Material Design Library - 使用汇总

·Android Design Support Library - 代码实验

·Material Design - 资料汇总

·Android Material Design - 动画

·Material Design - 详解(动画篇)

Material Design Lite组件库

Material Design Lite(MDL)源于MaterialDesign的设计规范,它为Web开发者提供了一套组件库。不依赖任何JS框架,便于跨设备使用优化,并且能自动降低性能适配旧版浏览器。常用的组件如下:

· Badges徽章标记

· Buttons按钮

·  Cards卡片

·Dialogs提示框

·Layout布局

· Lists列表

·  Loading载入进度

·Menus菜单

·Sliders滑块

·Toggles开关

·Tables表格

·Text Fields文本框

·Tooltips工具提示

结语

其实,目前供我们选择、使用的网站或者移动APP用户界面的Material Design资源已经相当丰富,里面往往包含了一系列实用的UI元素(模板、图标、字体、功能部件以及色彩模式等等)。但“工欲善其事,必先利其器“,如果你想在项目投入设计和开发前能有一套展现网站或APP功能框架的演示原型、从而提高团队沟通效率与开发的进度,那么推荐使用摹客,更快、更简单地将你的想法转为原型和产品,从原型设计(摹客Mockplus)、UI设计规范管理(摹客DS)再到前端开发的标注/切图(摹客iDoc),Mockplus系列产品为你想得、做得更多!

上一篇下一篇

猜你喜欢

热点阅读