新版启维用视差滑动效果做了一个首页介绍, 请大家给点改善建议 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
greenymora
V2EX    分享创造

新版启维用视差滑动效果做了一个首页介绍, 请大家给点改善建议

  •  
  •   greenymora 2013-02-21 23:20:32 +08:00 8491 次点击
    这是一个创建于 4617 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://kibey.com

    目前测出来是windows台式机器可能会显示不出来
    (这种奇怪的原因我打算喝几锅人参汤补补脑再去改了)

    chrome和ff的效果都比较正常。
    我们不支持IE9以下的浏览器。IE9我自己没怎么测试过(想暂时逃避一下浏览器兼容这种问题)

    手机和ipad mini这种客户端就没有效果了,以后打算放视频介绍


    请大家多提点改善建议,我想在3月21号开放注册前做的完美些
    84 条回复    1970-01-01 08:00:00 +08:00
    Sunyanzi
        1
    Sunyanzi  
       2013-02-21 23:25:35 +08:00
    船长好久不见啊 ... 感觉都好几个月没见过冒泡了 ...

    总之球交往~
    mkeith
        2
    mkeith  
       2013-02-21 23:28:47 +08:00
    春药姐好久没来了啊
    flied
        3
    flied  
       2013-02-21 23:40:27 +08:00
    你应该看过qq浏览器哪个页面了,视察滚动一定要大,要刺激,要明显,要震撼。

    大图标,打文字(少写点)。

    现在这样居中显示还不如盖满屏幕,在用户注册或者登录之前,左侧导航和顶部导航除了干扰,没啥别的用途。
    greenymora
        4
    greenymora  
    OP
       2013-02-21 23:46:38 +08:00
    @flied 没看过什么qq的页面...就是这几年视差一直比较流行。然后我就在想干脆做个首页。

    主要我们介绍有点多。太大了就太长了...
    顶部导航开放注册以后还是可以连接到各模块的。
    左侧导航确实没太大用处。不过有人反应还是有个清晰的框架比较好。因为我们内容本来就没有分太明显的导航
    chihuo
        5
    chihuo  
       2013-02-21 23:47:12 +08:00
    界面太拥挤。。不协调!(老实讲,眼睛不知道往哪里放- -重点不够分明!)

    PS:
    药师常来光顾啊,不然不够热闹啊。
    greenymora
        6
    greenymora  
    OP
       2013-02-21 23:51:10 +08:00   1
    @chihuo

    界面拥挤这个...具体说明白点?我觉得现在界面还挺松的,有很多地方留空

    启维也有论坛了。我现在基本在那边的说。大家也可以过来玩玩~
    liuhang0077
        7
    liuhang0077  
       2013-02-21 23:52:16 +08:00
    好久不见 黄药师 膜拜一下。
    greenymora
        8
    greenymora  
    OP
       2013-02-21 23:56:15 +08:00
    我怎么觉得@我自己是无链接的?

    @greenymora
    greenymora
        9
    greenymora  
    OP
       2013-02-21 23:56:37 +08:00
    哦。正常。
    wenbinwu
        10
    wenbinwu  
       2013-02-22 00:01:20 +08:00
    @greenymora http://cl.ly/image/330j2A2G091C 是不是字体太大了,显得有点挤
    wenbinwu
        11
    wenbinwu  
       2013-02-22 00:05:44 +08:00
    @greenymora 特别是有个地方字特别多的那块 "摇滚乐火锅料配方"
    greenymora
        12
    greenymora  
    OP
       2013-02-22 00:05:53 +08:00
    @wenbinwu 可能是行距字距问题。你是27寸的显示器对吧。我换电脑测试一下
    greenymora
        13
    greenymora  
    OP
       2013-02-22 00:06:46 +08:00
    @wenbinwu 哦。那里是想要给用户造出很乱的感觉,然后看到下面的文字才会觉得更有道理=_= 设计师是这个逻辑来着
    catfan
        14
    catfan  
       2013-02-22 00:12:02 +08:00
    那个小鬼图案怎么和Catfan的默认头像这么似?( ̄  ̄)
    wenbinwu
        15
    wenbinwu  
       2013-02-22 00:12:49 +08:00
    @greenymora 23的
    flied
        16
    flied  
       2013-02-22 00:18:06 +08:00
    @greenymora http://browser.qq.com/index_m.html

    参考一下qq也不是啥坏事,这个页面做的就挺好,只是这个伪3d看起来有点山寨。
    iYu
        17
    iYu  
       2013-02-22 00:20:20 +08:00
    有时候滚半天变化很小。 有时候滚很少变化很快。 不知道是故意的么。
    greenymora
        18
    greenymora  
    OP
       2013-02-22 00:20:26 +08:00
    @flied qq这个滚动我是真的晕了....


    @catfan 哪个小鬼图案..? 我们反正用的最标准的设计图标
    greenymora
        19
    greenymora  
    OP
       2013-02-22 00:21:58 +08:00
    @iYu 有些是故意的,需要给用户呈现一些效果,或者想要让他们看清楚一些。不过可能每个人还是有差异,包括你越到后面自己鼠标也会滚的越快,所以我们后面的间距都拉大了。

    不过如果卡的话就是bug
    greenymora
        20
    greenymora  
    OP
       2013-02-22 00:22:45 +08:00
    @livid 怎么用户头像全是错误图片了....
    greenymora
        21
    greenymora  
    OP
       2013-02-22 00:24:18 +08:00
    @wenbinwu 好的谢谢。我再细细调大屏幕和windows了。目前主要在13寸和15寸测试的。主要每个px基本都得固定,调起来很麻烦...每个浏览器每台机子上都不一样
    iYu
        22
    iYu  
       2013-02-22 00:24:53 +08:00
    个人感觉说明的文字 略多。 滚动的畅快感来源图片变化的动画。 文字多到要停下来看,就打断了滚动的乐趣了。
    greenymora
        23
    greenymora  
    OP
       2013-02-22 00:27:02 +08:00
    @iYu 嗯。文字的话。可能以后还能再推敲的精致一些。但是毕竟我们是介绍功能的滚动效果,图片特效都是辅助的。还是不能本末倒置
    clowwindy
        24
    clowwindy  
       2013-02-22 00:33:26 +08:00
    设计的很棒,赞一个。
    thedevil5032
        25
    thedevil5032  
       2013-02-22 01:27:08 +08:00
    喜欢这样的设计. 不是设计师, 就不提建议了.


    ====
    好久不见你的帖子.
    hpowen
        26
    hpowen  
       2013-02-22 01:49:16 +08:00
    有种儿童出版物的感觉
    txx
        27
    txx  
       2013-02-22 03:42:38 +08:00 via iPad
    ipad safari 成功崩溃一次。。。。
    terry0824
        28
    terry0824  
       2013-02-22 04:12:01 +08:00   1
    用户的浏览器设置如果关闭了平滑滚动的话,看起来效果会差很多啊……我觉得是不是可以加入一些强制开启平滑滚动的设置,应该是可以的吧?
    这个网站:
    http://www.icheshang.com/
    就会强制是平滑滚动。
    我的平台是win7,Firefox和Chrome都是一样的效果。
    EthanZhu
        29
    EthanZhu  
      &nsp;2013-02-22 05:27:59 +08:00   1
    同感拥挤,感觉同个页面上的信息太多了,不知道看哪,顶上左边都有工具栏,中间还有滚动信息
    greenymora
        30
    greenymora  
    OP
       2013-02-22 09:14:00 +08:00
    @terry0824 哦这个确实可以~ 谢咯
    greenymora
        31
    greenymora  
    OP
       2013-02-22 09:16:21 +08:00
    @EthanZhu
    @terry0824
    @txx
    @thedevil5032
    @clowwindy
    @iYu
    @flied
    @catfan
    @liuhang0077
    @chihuo

    大家觉得左侧的导航有必要去掉么?
    ipconfiger
        32
    ipconfiger  
       2013-02-22 09:21:09 +08:00
    @greenymora 看看我们搞的这个,windows无压力的 http://www.codoon.com
    madao
        33
    madao  
       2013-02-22 09:46:12 +08:00
    @greenymora 太不流畅了,细节问题太多。元素太多,表示很杂。左边的导航栏是鸡肋
    WarWithinMe
        34
    WarWithinMe  
       2013-02-22 09:53:39 +08:00
    Idea很好。执行有些不连贯的感觉,比如中间那个人物换形象那一部分,我总觉得有时快有时慢,其实我觉得人物换肤的时候从右边滚到左边要比下边滚到上边要好一些。

    吐槽一下设计,感觉很多地方的阴影用的太重。而且里面有很多感觉不太搭的设计风格在里面。

    @flied QQ浏览器这个页面,3D真心是个败笔。。
    WarWithinMe
        35
    WarWithinMe  
       2013-02-22 09:56:15 +08:00
    左边的导航没有起到作用。。。用户滚动到某个区域的时候,左边导航应该要高亮对应的区域。
    第一次看的时候压根不知道你这个导航是和滚动一起的。。
    zythum
        36
    zythum  
       2013-02-22 10:03:13 +08:00
    船长好久不见啊 好久都不理朱一了。
    WarWithinMe
        37
    WarWithinMe  
       2013-02-22 10:42:21 +08:00
    刚看到一个类似的网站 http://everylastdrop.co.uk/
    这个网站的效果不错。
    magicxqh
        38
    magicxqh  
       2013-02-22 10:53:14 +08:00
    @greenymora 我觉得字体可以改一改。。。
    xuan_lengyue
        39
    xuan_lengyue  
       2013-02-22 11:03:27 +08:00
    登陆,登陆,登陆!
    多好一网站,就被这俩字毁了!
    liliang13
        40
    liliang13  
       2013-02-22 11:04:44 +08:00
    有没有必要加一个向下滚动的提示呢,不至于让人在那儿愣半天不知道干什么。

    我觉得有必要。 = =
    Cadina
        41
    Cadina  
       2013-02-22 11:19:36 +08:00
    mbp retina + safari 有点卡
    jiangplus
        42
    jiangplus  
       2013-02-22 11:34:12 +08:00
    很漂亮啊,让我也有试试视差动画的想法
    Zeove
        43
    Zeove  
       2013-02-22 11:38:29 +08:00
    一个字:乱。过分注重设计,适合广告公司使用。另外,对高大全的产品,都不太看好。加油吧!
    rociiu
        44
    rociiu  
       2013-02-22 11:40:59 +08:00
    首页的progress bar 竟然从60%倒回到 50% 嗯 。。
    freewizard
        45
    freewizard  
       2013-02-22 11:44:59 +08:00
    滚动时CPU占用90%,顶配rMBP加独显都明显不流畅
    字体像得了生化危机 http://d.rollingcode.org/gWJ2
    zxsky1
        46
    zxsky1  
       2013-02-22 11:46:06 +08:00
    目前的动画,随着滚动的位置逐步进行,在一些过渡的时候会看到不太舒适的画面。
    猜测一下,如果每次滑动后会触发一个完整的动画会不会好一些?

    点击左侧的导航,跳转的位置经常不正确。
    OSX Safari 6.0.2

    左上角的语言切换部分:

    - 这个三角部分下部阴影表达有点问题
    - 整体离「简」有点远

    登录表单:

    - 表单的文本标签「邮箱」、「密码」,这个视觉效果比右下角的「Login」更像个按钮
    - 表单的文本输入框,看着像是凸起来的而不是凹下去的,不习惯
    - 右下角的[Login],和其他位置一样的使用中文不是更好么
    - 好久没登录启维,真的忘记密码了,点哪个找回
    另外,「登陆」的确比较适合「诺曼底」或者大船。
    http://www.zdic.net/cd/ci/12/ZdicE7Zdic99ZdicBB193730.htm

    最后,这个新设计的启维比之前的进步好多,加油吧少年。
    andybest
        47
    andybest  
       2013-02-22 11:49:15 +08:00
    @Sunyanzi 你是猫扑的那个sunyanzi?
    reorx
        48
    reorx  
       2013-02-22 12:19:52 +08:00
    友情帮船长姐姐顶一个~
    Sunyanzi
        49
    Sunyanzi  
       2013-02-22 12:25:33 +08:00
    @andybest 是的 ... 有何指教呢 ..?
    zythum
        50
    zythum  
       2013-02-22 12:36:55 +08:00
    @greenymora 船长。其实不需要随大流。随大流了就变成大流的网站了。
    madao
        51
    madao  
       2013-02-22 15:31:24 +08:00
    @greenymora

    1. 看了一下脚本的实现然后看了下superscrollorama的源码,妹妹的代码用superscrollorama 实现的部分写得太不优雅了,大量的复制相同的代码还有就是代码中有些滚动的部分涉及的dom操作过多还有css3本身性能就差,在那些滚动区域就会显得尤其的卡顿。

    2. 有点过度设计了,简洁和用色的部分值得商榷,至少强反差的色调变换,让我眼花而且有些许不适。
    chone
        52
    chone  
       2013-02-22 16:55:05 +08:00
    每个部分都是相同的duration,所以好多地方感觉动画速度太快了。
    另外我也感觉有一些地方有点过度设计。
    paloalto
        53
    paloalto  
       2013-02-22 18:09:33 +08:00
    @font-face {font-family:"RTWS ShangYa"; src:url("../fonts/rtws_shangya.ttf") format("TrueType"),url("../fonts/rtws_shangya.eot") format("Embedded OpenType");}

    直接加载了一个字体包麽? google结果没有“RTWS ShangYa ttf”的信息啊~
    我也想用这个字体
    paloalto
        54
    paloalto  
       2013-02-22 18:11:08 +08:00
    wingoo
        55
    wingoo  
       2013-02-22 18:53:30 +08:00
    球个邀请码:)

    wingogoo#gmail.com
    Livid
        56
    Livid  
    MOD
    PRO
       2013-02-22 18:57:56 +08:00
    @greenymora 之前我们的芝加哥服务器有点问题。

    现在应该是好了。
    greenymora
        57
    greenymora  
    OP
       2013-02-22 21:53:06 +08:00
    @liliang13 嗯。这个是应该加的。我加上
    @rociiu 那个进度条是我用js造的... 想不到特别方便的load进度,高人指点一下啊
    @zxsky1 触发完整动画... 我在想怎么实现... 得研究一下
    @madao 我大概设计今天做完,明天就写出来了... 因为时间很赶所以没办法好好看这个插件=_= 我也觉得很多地方确实用得不好,当是连说明都没看直接照着demo文件写得..
    @paloalto 对于字体,小小的笑一下。那个字体是造字工坊的设计师专门做的字库。只有我们需要用的字,不然一个正常字库将近2M,网上下载的话太慢所以不可能用在网上的。
    greenymora
        58
    greenymora  
    OP
       2013-02-22 21:54:22 +08:00
    @zythum 朱一因为不守规矩玩消失。我已经早就解除你的契约了。那几天你应该特别倒霉,没注意到?
    catfan
        59
    catfan  
       2013-02-22 22:39:31 +08:00
    @greenymora 关键是背景的颜色也差不多...是用AAALogo弄的麽?虽然很早就注册了,但是怎么感觉域名经常换啊...
    greenymora
        60
    greenymora  
    OP
       2013-02-22 22:49:45 +08:00
    @catfan 不是。我现在没明白你具体说哪里...
    域名这次最后一次换了!之前一直不太好
    zythum
        61
    zythum  
       2013-02-23 01:09:42 +08:00
    @greenymora 废话。倒霉死了。
    greenymora
        62
    greenymora  
    OP
       2013-02-23 02:22:24 +08:00
    @zythum 所以跟别人签了契约。就不能违约哦。违约的下场是很惨的。好在我没有当面立契,只是八字绑了一下而已。不过话说为什么不直接告诉我解约就好了啊=_=
    leiz
        63
    leiz  
       2013-02-23 06:00:15 +08:00
    1. 子产品太多太零散
    2. 功能过多,繁杂,容易让用户无所适从
    3. 看不出整个产品的重心在哪里
    4. 界面太过花哨,不够简洁和清爽
    5. 整个想法不错,不过有一口吃成胖子的味道
    manoon
        64
    manoon  
       2013-02-23 10:24:06 +08:00
    那几个立方体很喜欢!
    Frannk
        65
    Frannk  
       2013-02-24 13:51:18 +08:00
    太帅了
    greenymora
        66
    greenymora  
    OP
       2013-02-24 13:56:06 +08:00
    @EthanZhu
    @terry0824
    @txx
    @thedevil5032
    @clowwindy
    @iYu
    @flied
    @catfan
    @liuhang0077
    @chihuo
    @manoon
    @Frannk
    @leiz
    @wingoo
    @paloalto
    @chone
    @madao
    @zxsky1

    去掉左侧导航了。
    我打算过两天加上视频和一个开场的部分,然后再加载导航,这样显得更有代入感一些
    到时候再给大家看看
    FrankFang128
        67
    FrankFang128  
       2013-02-24 13:59:07 +08:00
    字太多,影响滑动速度,因为要花时间自习阅读。
    cabinw
        68
    cabinw  
       2013-02-24 14:00:20 +08:00
    求邀请:[email protected]
    Frannk
        69
    Frannk  
       2013-02-24 14:24:39 +08:00
    @greenymora 对,我才知道开场介绍很重要;让用户知道产品怎么使用,而不是站在开发者的角度,以为用户知道产品是什么。期待船长的开场视频。
    greenymora
        70
    greenymora  
    OP
       2013-02-24 14:40:12 +08:00   1
    @wingoo
    @cabinw
    嗯都邀请了


    @FrankFang128
    谢谢建议,不过字的话不打算删了。因为主要还是介绍。不是用来看效果的。不能本末倒置

    @Frannk
    谢谢。其实功能还是最重要的。宣传只是其次了。最怕就是宣传到位,结果功能不到位。等加上视频我会第一时间再发上来让大家评价一下的:)
    Epsil0n9
        71
    Epsil0n9  
       2013-03-08 09:07:58 +08:00
    @liuhang0077 黄药师大亮~ ;)
    tomyiyun
        72
    tomyiyun  
       2013-03-09 00:06:23 +08:00
    同好久没见船长了。
    这个页面……太太太长了点。
    有没有可能拆成几个板块?
    Aether
        73
    Aether  
       2013-03-09 01:00:39 +08:00
    很华丽的效果。
    唯一的建议:只保留第一屏,把想表达的用一句话说清楚,其他都删掉。
    greenymora
        74
    greenymora  
    OP
       2013-03-09 11:03:19 +08:00
    @tomyiyun 我们马上就出新版首页了。然后如果想看这个介绍的话,要点一下才会出来,这样可以不用花这么长时间来了解我们这个网站,体验会好很多。
    molinxx
        75
    molinxx  
       2013-03-09 11:13:07 +08:00 via Android
    @greenymora 期待新首页,等下去kibey刷个屏,顺便问一下药师姐,要不要加个私人存储空间什么的?
    wenbinwu
        77
    wenbinwu  
       2013-03-13 16:11:14 +08:00
    哇塞,好长的list

    When people published over 5 topics
    and all marked in a same tag
    这一块的背景图有点点y向重复
    Frannk
        78
    Frannk  
       2013-03-13 17:04:21 +08:00
    测了Linux下的Chrome和Firefox都很正常

    http://kibey.com/circle/discuss http://kibey.com/square/freenote 两个页面切换的时候

    1. 内容背景有变化
    2. 顶部的导航栏的广场按钮有变化
    terry0824
        79
    terry0824  
       2013-03-13 20:30:46 +08:00
    firefox和chrome测试,滚到标签云那里的时候,最上边一行会被粗黑硬条挡住一部分
    Sunyanzi
        80
    Sunyanzi  
       2013-03-15 12:34:00 +08:00
    这个凶残的 at list 啊 ... 好吧我还蛮喜欢新首页的设计的 ...

    技术谁都有 ... 但是设计就不是啦 ...
    daxuelidelang
        81
    daxuelidelang  
       2013-03-15 12:46:24 +08:00
    一句话:又长又臭。
    49degree
        82
    49degree  
       2013-03-15 15:58:08 +08:00
    建议增加翻页按钮,这么长,滚轮费劲啊
    Part
        83
    Part  
       2013-03-15 16:16:05 +08:00
    .bottom_nav .buttons button 这一class建议加 cursor:pointer;
    pazz7ven
        84
    pazz7ven  
       2013-03-16 18:48:36 +08:00
    太长了 +111111111111111111111111
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     967 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 30ms UTC 22:37 PVG 06:37 LAX 15:37 JFK 18:37
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86