爱意满满的作品展示区。
greenymora

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

  •  
  •   greenymora · Feb 21, 2013 · 9519 views
    This topic created in 5007 days ago, the information mentioned may be changed or developed.
    http://kibey.com

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

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

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


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

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

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

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

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

    PS:
    药师常来光顾啊,不然不够热闹啊。
    greenymora
    greenymora
    OP
    Feb 21, 2013❤️1
    6
    @chihuo

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

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

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

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


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

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


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

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

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

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

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

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

    左上角的语言切换部分:

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

    登录表单:

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

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

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

    2. 有点过度设计了,简洁和用色的部分值得商榷,至少强反差的色调变换,让我眼花而且有些许不适。
    chone
    chone
    Feb 22, 2013
    52
    每个部分都是相同的duration,所以好多地方感觉动画速度太快了。
    另外我也感觉有一些地方有点过度设计。
    paloalto
    paloalto
    Feb 22, 2013
    53
    @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”的信息啊~
    我也想用这个字体
    wingoo
    wingoo
    Feb 22, 2013
    55
    球个邀请码:)

    wingogoo#gmail.com
    Livid
    Livid
    MOD
    PRO
    Feb 22, 2013
    56
    @greenymora 之前我们的芝加哥服务器有点问题。

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

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


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

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

    When people published over 5 topics
    and all marked in a same tag
    这一块的背景图有点点y向重复
    Frannk
    Frannk
    Mar 13, 2013
    78
    测了Linux下的Chrome和Firefox都很正常

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

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

    技术谁都有 ... 但是设计就不是啦 ...
    daxuelidelang
    daxuelidelang
    Mar 15, 2013
    81
    一句话:又长又臭。
    49degree
    49degree
    Mar 15, 2013
    82
    建议增加翻页按钮,这么长,滚轮费劲啊
    Part
    Part
    Mar 15, 2013
    83
    .bottom_nav .buttons button 这一class建议加 cursor:pointer;
    pazz7ven
    pazz7ven
    Mar 16, 2013
    84
    太长了 +111111111111111111111111
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1483 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 103ms · UTC 16:02 · PVG 00:02 · LAX 08:02 · JFK 11:02
    ♥ Do have faith in what you're doing.