V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
设计师推荐装备
WACOM 数位板
推荐阅读
版式设计基础教程 by 南云治嘉
版式设计全攻略 by 佐佐木刚士
kmvan
V2EX  ›  设计师

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

  •  1
     
  •   kmvan · 2014-11-04 09:59:28 +08:00 · 15800 次点击
    这是一个创建于 3433 天前的主题,其中的信息可能已经有所发展或是发生改变。
    感觉是大势所趋的设计风,但 gg 出来的几乎都是 mobile 上的图。
    所以问题来了,如果从 PC 上进行 MD 风格设计的网页,大家有哪些例子呢?
    给些网址参考参考?
    13 条回复    2014-11-05 01:22:22 +08:00
    leer561
        2
    leer561  
       2014-11-04 10:08:50 +08:00   ❤️ 1
    在ipad上试验了一下,失败了,感觉在爪机上,尤其是竖向比较好
    scarlex
        3
    scarlex  
       2014-11-04 10:09:43 +08:00   ❤️ 1
    leer561
        4
    leer561  
       2014-11-04 10:15:10 +08:00   ❤️ 2
    Material Design的官网
    http://www.google.com/design
    国内一个翻译的
    http://design.1sters.com/
    huoshaolin
        5
    huoshaolin  
       2014-11-04 10:19:18 +08:00   ❤️ 4
    Material Design 风格的 Web 组件(附源代码):
    https://material.angularjs.org/#/demo/material.components.button
    GhostFlying
        6
    GhostFlying  
       2014-11-04 12:40:34 +08:00 via Android   ❤️ 1
    inbox
    Dibel
        7
    Dibel  
       2014-11-04 12:53:41 +08:00   ❤️ 2
    Polymer,里面有几个demo和guide https://www.polymer-project.org/
    jun4rui
        8
    jun4rui  
       2014-11-04 13:35:38 +08:00 via Android   ❤️ 1
    polaymer上有好多例子
    akfish
        9
    akfish  
       2014-11-04 14:14:52 +08:00   ❤️ 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  
       2014-11-04 15:03:21 +08:00   ❤️ 2
    还有一个 Bootstrap 3 的主题:

    http://fezvrasta.github.io/bootstrap-material-design/
    kmvan
        11
    kmvan  
    OP
       2014-11-04 16:41:15 +08:00
    哇塞,原来内容这么丰富。。。3Q 米娜
    kmvan
        12
    kmvan  
    OP
       2014-11-04 17:16:46 +08:00
    囧,看了一下 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  
       2014-11-05 01:22:22 +08:00   ❤️ 1
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5391 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 06:55 · PVG 14:55 · LAX 23:55 · JFK 02:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.