设计师推荐装备
WACOM 数位板
推荐阅读
版式设计基础教程 by 南云治嘉
版式设计全攻略 by 佐佐木刚士
kmvan
V2EX  ›  设计师

Material Design 设计在 PC 版网页上的例子有哪些?

  •  1
     
  •   kmvan · Nov 4, 2014 · 19254 views
    This topic created in 4217 days ago, the information mentioned may be changed or developed.
    感觉是大势所趋的设计风,但 gg 出来的几乎都是 mobile 上的图。
    所以问题来了,如果从 PC 上进行 MD 风格设计的网页,大家有哪些例子呢?
    给些网址参考参考?
    13 replies    2014-11-05 01:22:22 +08:00
    leer561
        2
    leer561  
       Nov 4, 2014   ❤️ 1
    在ipad上试验了一下,失败了,感觉在爪机上,尤其是竖向比较好
    scarlex
        3
    scarlex  
       Nov 4, 2014   ❤️ 1
    leer561
        4
    leer561  
       Nov 4, 2014   ❤️ 2
    Material Design的官网
    http://www.google.com/design
    国内一个翻译的
    http://design.1sters.com/
    huoshaolin
        5
    huoshaolin  
       Nov 4, 2014   ❤️ 4
    Material Design 风格的 Web 组件(附源代码):
    https://material.angularjs.org/#/demo/material.components.button
    GhostFlying
        6
    GhostFlying  
       Nov 4, 2014 via Android   ❤️ 1
    inbox
    Dibel
        7
    Dibel  
       Nov 4, 2014   ❤️ 2
    Polymer,里面有几个demo和guide https://www.polymer-project.org/
    jun4rui
        8
    jun4rui  
       Nov 4, 2014 via Android   ❤️ 1
    polaymer上有好多例子
    akfish
        9
    akfish  
       Nov 4, 2014   ❤️ 1
    Mark,正在用polymer的paper components对着Material Design的spec撸博客的新主题。目前的发现有:
    * 各种component并没有帮你实现所有细节,需要大量的自己调
    * 工作量很大,尤其是要做响应式设计的话,手机、平板和桌面三套layout都要做
    * Google自己都没能遵守一些spec
    * 还有不少内容是spec里没有而实际网站需要的,比如分页设计,spec里唯一提到的是在移动端用tab分页,这在pc端并不一定总是适用

    Material Design的Spec必看,非常详尽:
    http://www.google.com/design/spec/material-design/introduction.html
    serenader
        10
    serenader  
       Nov 4, 2014   ❤️ 2
    还有一个 Bootstrap 3 的主题:

    http://fezvrasta.github.io/bootstrap-material-design/
    kmvan
        11
    kmvan  
    OP
       Nov 4, 2014
    哇塞,原来内容这么丰富。。。3Q 米娜
    kmvan
        12
    kmvan  
    OP
       Nov 4, 2014
    囧,看了一下 Angular Material 的资源,发现有几个很大的问题啊。
    1:卡。在我的 PC 上,点击按钮显示出来的“涟漪”效果,往往都是闪一下就没了,肉眼看起来也就是 1~2 帧的样子。Firebug 打开想要看看具体 html 代码时,FB 直接把 FF 卡无响应了,恐怕是这种效果太耗 CPU 了吧。在手机(MX3 4.4.4)原生浏览器上看,也是各种不兼容,略卡,涟漪效果也没有。
    2:不够标准。特别是 HTML 代码,它没用 data-* 属性,而是直接 * 属性。
    3:适应性一般。图标都是 SVG 而不是 font,当字体大小改变,他没法跟着改变,因为他是用js控制大小的- -。在手机上,demo 的排版不堪入目。。

    虽然效果 Angular Material 效果很炫酷,不过我个人感觉略微有点华而不实 。个人看法,打脸轻点.
    wildplant
        13
    wildplant  
       Nov 5, 2014   ❤️ 1
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2760 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 67ms · UTC 12:53 · PVG 20:53 · LAX 05:53 · JFK 08:53
    ♥ Do have faith in what you're doing.