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

IE9

浏览器

效果

84 条回复 • 1970-01-01 08:00:00 +08:00

1

Sunyanzi

2013-02-21 23:25:35 +08:00

船长好久不见啊 ... 感觉都好几个月没见过冒泡了 ...

总之球交往～

2

mkeith

2013-02-21 23:28:47 +08:00

春药姐好久没来了啊

3

flied

2013-02-21 23:40:27 +08:00

你应该看过qq浏览器哪个页面了，视察滚动一定要大，要刺激，要明显，要震撼。

大图标，打文字（少写点）。

现在这样居中显示还不如盖满屏幕，在用户注册或者登录之前，左侧导航和顶部导航除了干扰，没啥别的用途。

4

greenymora

OP

2013-02-21 23:46:38 +08:00

@flied 没看过什么qq的页面...就是这几年视差一直比较流行。然后我就在想干脆做个首页。

主要我们介绍有点多。太大了就太长了...
顶部导航开放注册以后还是可以连接到各模块的。
左侧导航确实没太大用处。不过有人反应还是有个清晰的框架比较好。因为我们内容本来就没有分太明显的导航

5

chihuo

2013-02-21 23:47:12 +08:00

界面太拥挤。。不协调！（老实讲，眼睛不知道往哪里放- -重点不够分明！）

PS:
药师常来光顾啊，不然不够热闹啊。

6

greenymora

OP

2013-02-21 23:51:10 +08:00

1

@chihuo

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

启维也有论坛了。我现在基本在那边的说。大家也可以过来玩玩~

7

liuhang0077

2013-02-21 23:52:16 +08:00

好久不见黄药师膜拜一下。

8

greenymora

OP

2013-02-21 23:56:15 +08:00

我怎么觉得@我自己是无链接的？

@greenymora

9

greenymora

OP

2013-02-21 23:56:37 +08:00

哦。正常。

10

wenbinwu

2013-02-22 00:01:20 +08:00

@greenymora http://cl.ly/image/330j2A2G091C 是不是字体太大了，显得有点挤

11

wenbinwu

2013-02-22 00:05:44 +08:00

@greenymora 特别是有个地方字特别多的那块 "摇滚乐火锅料配方"

12

greenymora

OP

2013-02-22 00:05:53 +08:00

@wenbinwu 可能是行距字距问题。你是27寸的显示器对吧。我换电脑测试一下

13

greenymora

OP

2013-02-22 00:06:46 +08:00

@wenbinwu 哦。那里是想要给用户造出很乱的感觉，然后看到下面的文字才会觉得更有道理=_= 设计师是这个逻辑来着

14

catfan

2013-02-22 00:12:02 +08:00

那个小鬼图案怎么和Catfan的默认头像这么似？╮(￣￣)╭

15

wenbinwu

2013-02-22 00:12:49 +08:00

@greenymora 23的

16

flied

2013-02-22 00:18:06 +08:00

@greenymora http://browser.qq.com/index_m.html

参考一下qq也不是啥坏事，这个页面做的就挺好，只是这个伪3d看起来有点山寨。

17

iYu

2013-02-22 00:20:20 +08:00

有时候滚半天变化很小。有时候滚很少变化很快。不知道是故意的么。

18

greenymora

OP

2013-02-22 00:20:26 +08:00

@flied qq这个滚动我是真的晕了....

@catfan 哪个小鬼图案..? 我们反正用的最标准的设计图标

19

greenymora

OP

2013-02-22 00:21:58 +08:00

@iYu 有些是故意的，需要给用户呈现一些效果，或者想要让他们看清楚一些。不过可能每个人还是有差异，包括你越到后面自己鼠标也会滚的越快，所以我们后面的间距都拉大了。

不过如果卡的话就是bug

20

greenymora

OP

2013-02-22 00:22:45 +08:00

@livid 怎么用户头像全是错误图片了....

21

greenymora

OP

2013-02-22 00:24:18 +08:00

@wenbinwu 好的谢谢。我再细细调大屏幕和windows了。目前主要在13寸和15寸测试的。主要每个px基本都得固定，调起来很麻烦...每个浏览器每台机子上都不一样

22

iYu

2013-02-22 00:24:53 +08:00

个人感觉说明的文字略多。滚动的畅快感来源图片变化的动画。文字多到要停下来看，就打断了滚动的乐趣了。

23

greenymora

OP

2013-02-22 00:27:02 +08:00

@iYu 嗯。文字的话。可能以后还能再推敲的精致一些。但是毕竟我们是介绍功能的滚动效果，图片特效都是辅助的。还是不能本末倒置

24

clowwindy

2013-02-22 00:33:26 +08:00

设计的很棒，赞一个。

25

thedevil5032

2013-02-22 01:27:08 +08:00

喜欢这样的设计. 不是设计师, 就不提建议了.

====
好久不见你的帖子.

26

hpowen

2013-02-22 01:49:16 +08:00

有种儿童出版物的感觉

27

txx

2013-02-22 03:42:38 +08:00 via iPad

ipad safari 成功崩溃一次。。。。

28

terry0824

2013-02-22 04:12:01 +08:00

1

用户的浏览器设置如果关闭了平滑滚动的话，看起来效果会差很多啊……我觉得是不是可以加入一些强制开启平滑滚动的设置，应该是可以的吧？
这个网站：
http://www.icheshang.com/
就会强制是平滑滚动。
我的平台是win7，Firefox和Chrome都是一样的效果。

29

EthanZhu

2013-02-22 05:27:59 +08:00

1

同感拥挤，感觉同个页面上的信息太多了，不知道看哪，顶上左边都有工具栏，中间还有滚动信息

30

greenymora

OP

2013-02-22 09:14:00 +08:00

@terry0824 哦这个确实可以~ 谢咯

31

greenymora

OP

2013-02-22 09:16:21 +08:00

@EthanZhu
@terry0824
@txx
@thedevil5032
@clowwindy
@iYu
@flied
@catfan
@liuhang0077
@chihuo

大家觉得左侧的导航有必要去掉么？

32

ipconfiger

2013-02-22 09:21:09 +08:00

@greenymora 看看我们搞的这个，windows无压力的 http://www.codoon.com

33

madao

2013-02-22 09:46:12 +08:00

@greenymora 太不流畅了，细节问题太多。元素太多，表示很杂。左边的导航栏是鸡肋

34

WarWithinMe

2013-02-22 09:53:39 +08:00

Idea很好。执行有些不连贯的感觉，比如中间那个人物换形象那一部分，我总觉得有时快有时慢，其实我觉得人物换肤的时候从右边滚到左边要比下边滚到上边要好一些。

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

@flied QQ浏览器这个页面，3D真心是个败笔。。

35

WarWithinMe

2013-02-22 09:56:15 +08:00

左边的导航没有起到作用。。。用户滚动到某个区域的时候，左边导航应该要高亮对应的区域。
第一次看的时候压根不知道你这个导航是和滚动一起的。。

36

zythum

2013-02-22 10:03:13 +08:00

船长好久不见啊好久都不理朱一了。

37

WarWithinMe

2013-02-22 10:42:21 +08:00

刚看到一个类似的网站 http://everylastdrop.co.uk/
这个网站的效果不错。

38

magicxqh

2013-02-22 10:53:14 +08:00

@greenymora 我觉得字体可以改一改。。。

39

xuan_lengyue

2013-02-22 11:03:27 +08:00

登陆，登陆，登陆！
多好一网站，就被这俩字毁了！

40

liliang13

2013-02-22 11:04:44 +08:00

有没有必要加一个向下滚动的提示呢，不至于让人在那儿愣半天不知道干什么。

我觉得有必要。 = =

41

Cadina

2013-02-22 11:19:36 +08:00

mbp retina + safari 有点卡

42

jiangplus

2013-02-22 11:34:12 +08:00

很漂亮啊，让我也有试试视差动画的想法

43

Zeove

2013-02-22 11:38:29 +08:00

一个字：乱。过分注重设计，适合广告公司使用。另外，对高大全的产品，都不太看好。加油吧！

44

rociiu

2013-02-22 11:40:59 +08:00

首页的progress bar 竟然从60%倒回到 50% 嗯。。

45

freewizard

2013-02-22 11:44:59 +08:00

滚动时CPU占用90%，顶配rMBP加独显都明显不流畅
字体像得了生化危机 http://d.rollingcode.org/gWJ2

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

最后，这个新设计的启维比之前的进步好多，加油吧少年。

47

andybest

2013-02-22 11:49:15 +08:00

@Sunyanzi 你是猫扑的那个sunyanzi?

48

reorx

2013-02-22 12:19:52 +08:00

友情帮船长姐姐顶一个～

49

Sunyanzi

2013-02-22 12:25:33 +08:00

@andybest 是的 ... 有何指教呢 ..?

50

zythum

2013-02-22 12:36:55 +08:00

@greenymora 船长。其实不需要随大流。随大流了就变成大流的网站了。

51

madao

2013-02-22 15:31:24 +08:00

@greenymora

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

2. 有点过度设计了，简洁和用色的部分值得商榷，至少强反差的色调变换，让我眼花而且有些许不适。

52

chone

2013-02-22 16:55:05 +08:00

每个部分都是相同的duration，所以好多地方感觉动画速度太快了。
另外我也感觉有一些地方有点过度设计。

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”的信息啊~
我也想用这个字体

54

paloalto

2013-02-22 18:11:08 +08:00

用百度找到了在这里 http://www.ztxz.org/zhongwenzitixiazai/qitazitixiazai/7320.html

55

wingoo

2013-02-22 18:53:30 +08:00

球个邀请码:)

wingogoo#gmail.com

56

Livid

MOD

2013-02-22 18:57:56 +08:00

@greenymora 之前我们的芝加哥服务器有点问题。

现在应该是好了。

57

greenymora

OP

2013-02-22 21:53:06 +08:00

@liliang13 嗯。这个是应该加的。我加上
@rociiu 那个进度条是我用js造的... 想不到特别方便的load进度，高人指点一下啊
@zxsky1 触发完整动画... 我在想怎么实现... 得研究一下
@madao 我大概设计今天做完，明天就写出来了... 因为时间很赶所以没办法好好看这个插件=_= 我也觉得很多地方确实用得不好，当是连说明都没看直接照着demo文件写得..
@paloalto 对于字体，小小的笑一下。那个字体是造字工坊的设计师专门做的字库。只有我们需要用的字，不然一个正常字库将近2M，网上下载的话太慢所以不可能用在网上的。

58

greenymora

OP

2013-02-22 21:54:22 +08:00

@zythum 朱一因为不守规矩玩消失。我已经早就解除你的契约了。那几天你应该特别倒霉，没注意到？

59

catfan

2013-02-22 22:39:31 +08:00

@greenymora 关键是背景的颜色也差不多...是用AAALogo弄的麽？虽然很早就注册了，但是怎么感觉域名经常换啊...

60

greenymora

OP

2013-02-22 22:49:45 +08:00

@catfan 不是。我现在没明白你具体说哪里...
域名这次最后一次换了！之前一直不太好

61

zythum

2013-02-23 01:09:42 +08:00

@greenymora 废话。倒霉死了。

62

greenymora

OP

2013-02-23 02:22:24 +08:00

@zythum 所以跟别人签了契约。就不能违约哦。违约的下场是很惨的。好在我没有当面立契，只是八字绑了一下而已。不过话说为什么不直接告诉我解约就好了啊=_=

63

leiz

2013-02-23 06:00:15 +08:00

1. 子产品太多太零散
2. 功能过多，繁杂，容易让用户无所适从
3. 看不出整个产品的重心在哪里
4. 界面太过花哨，不够简洁和清爽
5. 整个想法不错，不过有一口吃成胖子的味道

64

manoon

2013-02-23 10:24:06 +08:00

那几个立方体很喜欢！

65

Frannk

2013-02-24 13:51:18 +08:00

太帅了

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

去掉左侧导航了。
我打算过两天加上视频和一个开场的部分，然后再加载导航，这样显得更有代入感一些
到时候再给大家看看

67

FrankFang128

2013-02-24 13:59:07 +08:00

字太多，影响滑动速度，因为要花时间自习阅读。

68

cabinw

2013-02-24 14:00:20 +08:00

求邀请：[email protected]

69

Frannk

2013-02-24 14:24:39 +08:00

@greenymora 对，我才知道开场介绍很重要；让用户知道产品怎么使用，而不是站在开发者的角度，以为用户知道产品是什么。期待船长的开场视频。

70

greenymora

OP

2013-02-24 14:40:12 +08:00

1

@wingoo
@cabinw
嗯都邀请了

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

@Frannk
谢谢。其实功能还是最重要的。宣传只是其次了。最怕就是宣传到位，结果功能不到位。等加上视频我会第一时间再发上来让大家评价一下的:)

71

Epsil0n9

2013-03-08 09:07:58 +08:00

@liuhang0077 黄药师大亮~ ;)

72

tomyiyun

2013-03-09 00:06:23 +08:00

同好久没见船长了。
这个页面……太太太长了点。
有没有可能拆成几个板块？

73

Aether

2013-03-09 01:00:39 +08:00

很华丽的效果。
唯一的建议：只保留第一屏，把想表达的用一句话说清楚，其他都删掉。

74

greenymora

OP

2013-03-09 11:03:19 +08:00

@tomyiyun 我们马上就出新版首页了。然后如果想看这个介绍的话，要点一下才会出来，这样可以不用花这么长时间来了解我们这个网站，体验会好很多。

75

molinxx

2013-03-09 11:13:07 +08:00 via Android

@greenymora 期待新首页，等下去kibey刷个屏，顺便问一下药师姐，要不要加个私人存储空间什么的？

76

greenymora

OP

2013-03-13 15:27:45 +08:00

启维首页更新了喔~ 大家帮我看看效果，顺带测试测试不同机子
http://v2ex.com/t/62810

@Sunyanzi
@mkeith
@flied
@chihuo
@liuhang0077
@wenbinwu
@catfan
@iYu
@clowwindy
@thedevil5032
@hpowen
@txx
@terry0824
@EthanZhu
@ipconfiger
@madao
@WarWithinMe
@magicxqh
@xuan_lengyue
@liliang13
@Cadina
@jiangplus
@Zeove
@rociiu
@freewizard
@zxsky1
@andybest
@reorx
@zythum
@chone
@paloalto
@wingoo
@Livid
@leiz
@manoon
@Frannk
@FrankFang128
@cabinw
@Epsil0n9
@tomyiyun
@Aether

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向重复

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. 顶部的导航栏的广场按钮有变化

79

terry0824

2013-03-13 20:30:46 +08:00

firefox和chrome测试，滚到标签云那里的时候，最上边一行会被粗黑硬条挡住一部分

80

Sunyanzi

2013-03-15 12:34:00 +08:00

这个凶残的 at list 啊 ... 好吧我还蛮喜欢新首页的设计的 ...

技术谁都有 ... 但是设计就不是啦 ...

81

daxuelidelang

2013-03-15 12:46:24 +08:00

一句话：又长又臭。

82

49degree

2013-03-15 15:58:08 +08:00

建议增加翻页按钮，这么长，滚轮费劲啊

83

Part

2013-03-15 16:16:05 +08:00

.bottom_nav .buttons button 这一class建议加 cursor:pointer;

84

pazz7ven

2013-03-16 18:48:36 +08:00

太长了 +111111111111111111111111