与 Material Design 相关的一些网站收集


部分引用来源:知乎


  • 读规范

      
       Google 官方规范原文(需要科学上网):
       https://material.io/guidelines/

       国内直连镜像站(算是官方 material.io 整站的直接复制,包括其它的资源):
       https://md.gl/guidelines/
 
       中文翻译 by Max Cheung:
       http://md.maxoxo.design/

  • 作品欣赏

      
       除了 Dribbble、Behance、站酷等设计社区网站外,额外推荐一个:
       https://www.uplabs.com/material
       MaterialUp 是由 UPlabs 提供支持的 Material Design 主题作品/素材收集站。


  • 资源


       Google 官方的部分资源是开放下载的,这些资源在前文提到的国内镜像站也能下载到,以下附官方链接。


国内直连镜像站的使用方式:把下面链接里面的 material.io 替换成 md.gl 即可连接
 
官方图标资源下载(适用于 Action Bar 等控件):
https://material.io/icons/
 
官方配色辅助工具:
https://material.io/color/
 
在规范的原文中也有一些资源(Resource 部分):
https://material.io/guidelines/resources/


      
       第三方图标生成工具 Android Asset Studio - by Roman Nurik:
       https://romannurik.github.io/AndroidAssetStudio/index.html
       主要适用于生成简单的 Launcher 图标、通知栏/Action Bar 所需图标,或修改 .9 图等资源,此在线工具实际上在 Holo 与 Android Design 时期就比较知名了,现在顺理成章过渡到了 Material Design 风格。

       第三方图标站 Material Design icons:
       https://materialdesignicons.com/
       主要提供 Action Bar 等控件适用的图标,提供 SVG 矢量格式,包含 Google 官方的图标资源与其它用户提供的内容,在该网站的搜索结果中如果该结果并非 Google 所提供,图标的边缘会显示红框,如下图。



       第三方配色工具  Material Design Color Palette:
       https://www.materialpalette.com/
       由 MaterialUp 提供,使用方法是在左侧选择两个颜色,右边就会出现预览以及所有可用颜色的 HEX 代码。


  • 知乎推荐关注(我不常用知乎,列表待更新)

 
      @NovaDNG(同时他也提供 Material Design 风格的 PSD UI 组件模板,在他的知乎专栏中可以找到下载以及 Changelog)
      @42Deals (我最近发现的)
 
      另外在酷安上有一些 Material Design 风格独立应用的开发者应该也可以找到,比如@陈星宇(没记错应该是 靓晒 的作者,该应用的主要功能是可以自行制作符合 Material Design 的图标,并建立桌面快捷方式)
 
      上面两位推荐关注的原因其实不在于他们在设计方面的经验以及水准多么出色,而是观念上对规范的遵守比较严格,其中 NovaDNG 在 Android Design 的时期就搬运翻译了大量的文章和资源(登载在锋客网、极客公园及其个人知乎专栏中),对正统 Android 设计在   国内的推广有不可忽略的贡献,并且我个人也一直在用他的 UI 组件 PSD 来试着做一些小玩意发到网上装一装,从这点就已经足够感谢他的所为了。
 
      PS:只是我的个人认知,并且没有得到上述用户的授权...
  • 瞎眼图

      
      我自己尝试做了一下论道 Android 客户端的预想图(现有的感觉不是很满意),懒癌晚期,所以就先放上来了:

 
没有什么设计感,主旨希望是优化信息排版以及更符合规范(例如 FAB 的展开形式体现为官方形式)。
工具为 Photoshop,目前阶段我会且仅会的唯一一个相关软件,自学水平。


之前的一些练习作品:http://www.zcool.com.cn/u/1606111
 
酷安 ID @WangMT

为此应用(个人开发者作品)提供过图标设计,目前仍在使用:
https://www.coolapk.com/apk/party.danyang.nationalgeographic


 
以上,算是分享的同时补充个自我介绍算了,但愿诸位能忍。
 
 
 
 
 

13 个评论

@夏墨 @Joey
补充 @孙傲之
颜色是那网站找的,其他精力有限就没仔细弄
- - 起码我码不出来...
然后颜色按照官方规范大概是这么回事,官方按照色系分类,每一个色系下面会分成 100-900 等数值,数值越大,颜色越深。另外可能 Sketch 之类的软件弄 UI 会好弄不少,可惜我没 Mac - -
辛苦了。
太感谢了!目前的试用版主要是夏墨同学的成果,我本来有在用react开发,但进度迟缓。对于设计我更是一窍不通。欢迎MT深入参与到APP设计中。事实上有位react牛人答应为论道开发APP,只要我们给出设计即可。MT有兴趣请随时联系我。现在还有IOS的没有开发。
过奖了,之所以这么做其实也和我唯一读过的成文规范基本只有 MD 有关(我自己对这方面感兴趣其实也是看锋客网文章开始的),说正经的我最多有把握的应该也只是图标。有可能把其它部分完成后作为参考或者个人意见另外开一篇。
总之,论道应该会逐渐开放出来让大家参与建设,我个人精力和能力均有限。非常欢迎你参加!
PS,求QQ啊,微信啊!!我的是2247058891
哇满满的干货,你太强了。
我一直觉得MD大法好,然而国内开发的APP似乎在扁平化的道路上一去不复返,悲伤……
旧版G+
https://github.com/zcyzcy88/SelfColle/issues/13
看到自己出镜吓了一跳Σ(っ °Д °;)っ
给你的稍微改了一下。感觉超多卡片很违和。。。。
http://i.imgur.com/o4q2G60.png

要评论文章请先登录注册