V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lihanfeifan
V2EX  ›  V2EX

Livid 有没有打算给 V2EX 换个 material design?

  •  
  •   lihanfeifan · 2014-11-28 03:36:31 +08:00 · 4235 次点击
    这是一个创建于 3630 天前的主题,其中的信息可能已经有所发展或是发生改变。
    23 条回复    2014-12-06 22:30:14 +08:00
    typcn
        1
    typcn  
       2014-11-28 07:20:07 +08:00
    我也觉得UI该升级了
    sanddudu
        2
    sanddudu  
       2014-11-28 07:20:38 +08:00 via iPhone   ❤️ 1
    在果粉论坛和管理员全是果粉的地方要他们换成安卓的设计风格
    我只能说
    你猜?
    abelyao
        3
    abelyao  
       2014-11-28 07:52:07 +08:00 via Android
    可以自定义 CSS 嘛
    razrlele
        4
    razrlele  
       2014-11-28 08:13:31 +08:00
    @sanddudu 那来个毛玻璃什么的也是好的嘛~
    Livid
        5
    Livid  
    MOD
       2014-11-28 08:20:19 +08:00   ❤️ 1
    最近因为等不及 OTA,在 N4 上刷了 Android L,确实很喜欢新设计的风格。接下来就等 SONY 赶快出 Z3 的 Android L 支持了。

    目前的 UI 设计确实还存在很多上代系统的痕迹,我计划在过年之前逐步调整完毕。
    1yndonn3u
        6
    1yndonn3u  
       2014-11-28 08:21:51 +08:00
    你觉得mac/ios开发者会同意么,233333


    #Bottom {
    box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);
    }

    #Main .box:nth-child(-2n+4):not(.transparent) {
    box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
    }

    #Search div {
    background-image:none!important;
    border-image-repeat:repeat;
    border-image-slice:27 27 27 50;
    border-image-source:url(https://v2ex.com/static/img/[email protected]);
    border-image-width:27px 27px 27px 50px;
    width:auto!important;
    }

    #Search input {
    transition:width .2s cubic-bezier(.4,0,.2,1);
    width:100px;
    }

    #Search input:focus {
    width:200px;
    }

    #Top {
    background-color:#607D8B;
    background-image:none;
    box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);
    width:100%;
    }

    #Top .content {
    width:100%;
    }

    #Top a {
    color:#fff;
    font-size:14px;
    font-weight:bold;
    outline:none;
    }

    #Top td:nth-child(1) {
    left:10px;
    position:absolute;
    }

    #Top td:nth-child(1) a {
    background-image:url("https://dn-cz-misc.qbox.me/v2ex/[email protected]");
    background-size:94px 30px;
    display:inline-block;
    height:30px;
    width:94px;
    }

    #Top td:nth-child(1) img {
    display:none;
    }

    #Top td:nth-child(2) {
    position:absolute;
    right:10px;
    top:7px;
    }

    #Top td:nth-child(3) {
    display:flex;
    margin:6px auto;
    text-align:left;
    width:970px;
    }

    #Wrapper {
    background-color:#ECEFF1;
    background-image:none;
    margin-top:10px;
    }

    .box,a.tab_current:link,a.tab_current:visited,a.tab_current:active,a.count_livid:link,a.count_livid:active,.vote:link,.vote:visited,.vote {
    border-radius:0;
    }

    .box:not(.transparent) {
    border-bottom:none;
    box-shadow:0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);
    }

    .cell {
    border-bottom:1px solid #e5e5e5;
    }

    .collapsed {
    display:block;
    }

    .mll {
    background-color:#f6f6f6;
    border-bottom:1px solid #e5e5e5!important;
    border-style:none none solid!important;
    margin-left:-10px;
    margin-top:-10px;
    padding:10px;
    width:660px;
    transition:background-color .2s cubic-bezier(.4,0,.2,1);
    }

    .mll,.ml,.mle {
    border-radius:0;
    box-shadow:none!important;
    resize:none!important;
    }

    .mll:focus {
    background-color:#fff;
    }

    #topic_form {
    margin: -10px;
    }

    #topic_form td {
    padding: 0;
    }

    #topic_form input[type=submit] {
    margin: 10px;
    }

    #topic_title, #topic_content {
    border:none;
    border-bottom: 1px solid #e5e5e5;
    width: 660px !important;
    padding: 10px;
    }

    .sl {
    border-radius:0;
    box-shadow:none!important;
    }

    .super.button {
    background-color:#78909c;
    background-image:none;
    border:none!important;
    border-radius:2px;
    box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
    color:#fff!important;
    display:inline-block;
    font-size:13px;
    font-weight:bold;
    height:32px;
    line-height:30px;
    outline:none;
    padding:0 16px;
    text-shadow:none!important;
    transition:box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1);
    }

    .super.button:focus {
    background-color:#546e7a;
    box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
    outline:none;
    transition:none;
    }

    .super.button:hover {
    background-color:#607d8b;
    box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    transition:none;
    }

    .tag:link,.tag:visited,img.avatar {
    border-radius:2px;
    }

    .topic_buttons {
    background:#eee;
    border-radius:0;
    }

    a.balance_area:link,a.balance_area:visited,.balance_area {
    background:none repeat scroll 0 0 #f5f5f5!important;
    border-radius:0!important;
    }

    a.tb:hover {
    background-color:#ccc;
    border-radius:0;
    }

    balance_area:hover {
    background:none repeat scroll 0 0 #f9f9f9;
    }

    body {
    background-color:#ECEFF1;
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important;
    min-width:1200px;
    }


    引用 http://www.v2ex.com/t/144409

    @aliuwr
    yyfearth
        7
    yyfearth  
       2014-11-28 08:23:10 +08:00
    觉得V2EX现在的Style
    除了一些渐变和圆角
    只要调整一下颜色 和Material Design差距不算大
    belin520
        8
    belin520  
       2014-11-28 09:00:09 +08:00 via Android
    在果粉论坛和管理员全是果粉的地方要他们换成安卓的设计风格
    我只能说
    你猜?

    我复制的
    hjc4869
        9
    hjc4869  
       2014-11-28 09:30:48 +08:00 via iPhone
    在果粉论坛和管理员全是果粉的地方要他们换成安卓的设计风格
    我只能说
    你猜?

    我复制的
    咋不问Metro风格?
    233
    linkiosk
        10
    linkiosk  
       2014-11-28 09:35:22 +08:00
    v2ex有好用的客户端吗?
    kokdemo
        11
    kokdemo  
       2014-11-28 09:35:48 +08:00
    @lyndonneu18 我试用了一下这个css,觉得似乎只是按钮的调整,阴影之类的,没有体现出material design 中突出内容的那种感觉……

    看来光靠css是不够的。
    palxex
        12
    palxex  
       2014-11-28 09:53:18 +08:00
    @kokdemo 已经把我惊艳到了……在用的手机L还要三个月才出,有啥体现这个设计的app推荐么?
    kokdemo
        13
    kokdemo  
       2014-11-28 10:01:41 +08:00
    @palxex ……不知道……

    我自己之前把我做的一个小东西改成这个风格的了……

    http://kokdemo.github.io/todo
    lincanbin
        14
    lincanbin  
       2014-11-28 10:01:46 +08:00




    https://github.com/lincanbin/Carbon-Forum
    我这个设计怎么样?
    pierrec
        15
    pierrec  
       2014-11-28 10:03:09 +08:00
    @lincanbin 位置太挤吧
    66beta
        16
    66beta  
       2014-11-28 10:03:32 +08:00
    github上有开源前端框架,拿过来用就行~
    lincanbin
        17
    lincanbin  
       2014-11-28 10:04:53 +08:00
    @pierrecpen 我觉得倒是刚刚好,这张皮是我上个星期花了一晚上搞的,给我自己论坛用的。
    lingyired
        18
    lingyired  
       2014-11-28 10:05:08 +08:00
    Material Design 很多东西不是只改 CSS 就能实现的。
    Taosky
        19
    Taosky  
       2014-11-28 10:16:27 +08:00 via Android
    palxex
        20
    palxex  
       2014-11-28 10:19:40 +08:00
    @kokdemo
    @Taosky
    谢谢!
    aliuwr
        21
    aliuwr  
       2014-11-28 10:25:36 +08:00
    @kokdemo 按照我的理解, Material Design 中内容的重要程度是通过高度来区分的. 由于屏幕是 2D 的平面, 只能通过阴影来表现高度.
    你没有感觉是因为没有炫丽的颜色, 平滑的动画等这些比较夺目的特点吧.

    这个样式里去掉了文本框的边框是我个人最喜欢的修改.
    kokdemo
        22
    kokdemo  
       2014-11-28 10:27:35 +08:00   ❤️ 1
    @aliuwr 阴影的高度是一方面,另一方面是不同内容的间隔,我觉得这也很重要。

    v2ex现在的css加载是在页面加载完成之后的二次加载……感觉不是太好
    kokdemo
        23
    kokdemo  
       2014-12-06 22:30:14 +08:00
    @lyndonneu18 发现这个css有个要命的问题……

    请访问nodejs节点看一下……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4220 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 05:31 · PVG 13:31 · LAX 21:31 · JFK 00:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.