新版样式测试

作者: 阮一峰

日期: 2010年4月 6日

腾讯课堂 NEXT 学院

我的网志要升级了,距离上一次升级已经过去了3年。

第一步,我打算启用新的样式。

下面是三个测试网页,请大家帮我测试,看看它们在不同浏览器、不同分辨率下的表现。

  * 网站首页

  * 网志首页

  * 文章页面

然后,请留言告诉我,你对新样式的看法,以及存在哪些问题。

谢谢。

===========================

UPDATE

已知问题汇总(根据留言不断更新)

  * 文章页面出现水平滚动条。(已解决)

  * 配色太淡,偏冷。

  * 字号偏大,间隔偏宽。

  * 某些部分的padding太小,导致文字与边界紧贴。

  * 首页的个人照片偏大。 

  ......

感想:我果然没有设计细胞......

(完)

留言(101条)

还没现在这浏览体验好

第一个感觉太简单,无法吸引我,而且还要再点层层连接去看我想要的。
第二个太杂,不知道该看哪个,而且博文很短,无法突出。
网志还行。
我的屏幕是22寸宽屏。

Opera10.1893 XP 1028*1024下正常。
感觉背景太苍白,没有现在的好。

p3.html 出现横向滚动条,使用 Firefox 3.6.3,分辨率为 1366X768。

现在的好

虽然说现在在用的界面并不是非常的好看,但是在阅读效果上我还是更喜欢现在的版面。
有时候我在看你博客的时候更多的想选择到你的网站里面来看,而不是Google reader。

新版界面的首页那张图片部分是故意留的右边距?还是不小心的?
文章页面的文章主体好像偏左了?
还有色调可以保留现在的(淡黄),看起来很舒服的。

一点点小意见。

网站首页头像太大了(更准确的说整个页面偏左,我是FireFox 1280*1024)。页面苍白(其他的颜色也都是冷色系,还偏淡)还是现在有点偏土黄的好,有点暖。
链接层次太多,感觉不舒服。可以先提供默认浏览方式,用户根据喜好,再选则其它方式。

感觉字体有点大,而且网志页面超过我的显示器的宽度了。测试浏览器:firefox3.6.2

第二个在win7 chrome下比第一个好看,字体也正好。

不好,现在的好

太素,太冷。
Firefox 3.6.3. 1280*800 显示正常

Google Chrome 1680x1050

底色深色会比较环保,省电。 :)

中文不适合做很大字体的,感觉还是原来的好.

1440x900 Opera10.51
显示正常.
新模板对宽屏利用得好一些了.但是还是觉得老模板素雅一些,好看.大概是看习惯了.

网站首页太简单,头像太大,而且功能好像和现在的差不多啊

网志首页有点杂了,看起来不精致

文章首页字体太大。

总体来说,改版的没有现在的好。

大家这么说楼主要伤心了,好吧,个么我来安慰楼主。不管怎么说相比那个看了老茧都要出来的鹅黄色(与天蓝色的搭配不和谐)旧版本,新的好

以下随便也几个意见,我的事chrome浏览器

1."要发表看法" 这几个字太大了。。

2.白色容器做成圆角可能更好看

3.footer高度需要增加,目前的太紧了

4.一如既往的素色,几个颜色的明度接近,搭配过关,如果加些鲜艳的颜色试试应该会更精彩,可以参考网上白色的wp模板

5.几个灰线的paddding要修改,和文字贴了太近

不知道lz这个是wp伐?其实讨巧的话可以找个不错的theme,然后做减法的修改。。

现在的看得眼睛比较舒服

现在好点,新版宽度太宽,在宽屏显示器上,阅读时需要稍微转向

前两个没有问题,最后一个文章页,我打开后产生了横向滚动条。
火狐用户报告。

新版颜色比较淡,看起来不太舒服,不适应

Chrome用户,12寸上网本

字体不太好看,希望圆滑一点,然后就是字体和间隔都大了

第三页文章页也产生了横向滚动条

页面对比度高了点,伤眼睛~

以上。

感觉背景太苍白,没有现在的好。现在的看得眼睛比较舒服,你的网志看起来是不美观,但是来这里看文章的都是被文章的内容锁吸引的,保留原来的吧,为了方便阮兄统计,建议弄个设计细则多项选择!

文章页里标题太大,RSS图标也太大。现在这个挺符合书生的气质!

感觉在色彩选择搭配上需要再琢磨琢磨;再者就是一些细节的地方,如线的长短,字体,整体版式。
拙见。

背景色布要用纯白比较好。。

。。上面写错了。应该是
背景色不要用纯白比较好。。

Chrome 4.1.249.1045 1280*1024
一各方面还行,就是照片质量太差看着闹心,强烈建议博主换张(或者干脆不贴,或贴张风景也行)
二也还可以,清爽简洁,布局不错,能不能让RSS图标的高度和旁边的搜索框保持一致啊,可能会更顺眼一些。
三的标题字体感觉稍稍大了一些,还有下方的我要发表看法也挺大的,填姓名,电子邮件的输入框也有点大,方便倒是挺方便,就是不太美观。另外每条评论的日期都向左突出了左侧的边框,文档信息的原文网址突出了右侧的边框。其他毛病没了。

IE8下,3张页面字体都偏大,对我14寸的本子来说,一个页面内看不了多少东西。。! 尤其是那个留言的对话框,有侵占整个屏幕的嫌疑。。!

单个文章页底色太浅了,还是现在这种比较好。

在我17寸显示器是总体效果还是原来好啊。

颜色不好看~~~左边的相片和右边的白色配在一起很难看。

1280×800 firefox用户

首页内容偏左

日志首页的各种字体可以调到更舒服的程度,这个问题在日志页更明显

有些wordpress的样式,很简明,广告什么的也都有,不是说超代码,那么多主题作者们的也都是又互相靠参考的吧。他们的一些参数应该还是有参考价值的

整个网页的背景色和主体部分背景色太接近。

主体内容并不居中(相对于那个白色背景)。第一个 之前相差大约 3em,之后(id 为 alpha 的层)则相差更多。不过好像相对于屏幕是居中的。

标题和正文字太大,一屏能显示的字数下降。

照片边框内的那个水平线看着不爽。

火狐 3.5.8 on Ubuntu Linux 9.04,1366×768,有 treestyletab 占据了屏幕左边 100 多像素空间,网页实际可用宽度约为 1150px。

建议还是用浅色背景,比如现在这种浅黄就很好。

其它方面感觉不错。

顺便再多嘴一句,每次看到您贴图片,对像素数没有最低只有更低的要求,都是有点崩溃

唉,老大伤心也得说,真的是现在的好。。。
但是也不排除纯粹是看习惯了。。
可是背景色太浅真的不好。。除非就是空白

现在的好

firefox下,搜索框的位置在第三个页面上看,感觉可以调整的和页面边缘一直

觉得这个看起来舒服些。

恩,觉得还在现在这个看起来比较好看,朴素一点……

现在的好

底色深点比较好,新版底色有点亮得刺眼。
标题和正文字体有点大,但也有可能是我习惯了现在的字体大小。
浏览器:Firefox3.6.2

厚,网站首页上你的照片哈大,吓死人了

从新版切换到旧版,明显感觉旧版更清晰,觉得很可能是网页背景色的关系;
感觉新版整体有一种苍白的感觉(有点像水洗牛仔裤),可能是你选择的颜色饱和度不够的关系(还有就是你的照片像素可能也造成这种感觉);
网志首页的文章预览感觉太短。


老版好
原因是我这种人基本不怎么在乎所谓的用户体验,况且现在就挺不错的。
估计长期来这的,或多或少有一定的网络知识,对于那些个好的版式设计都看得多了,我们是来看文章的,页面白白亮亮顶个鸟用啊

补充一下,如果阮先生执意要改版的话,建议页面的配色就按现在的吧,纯白底的太刺眼了。

首页的照片我觉得不大,如果页面布局能平衡一些就行了,现在有些右面重,左面轻

还有照片下面的
Taken on: 2005

on 这个词用在具体哪一天,比如说 taken on 10/1/2005
如果是一年,应该用 taken in

引用Idroj的发言:

Google Chrome 1680x1050

底色深色会比较环保,省电。 :)

这个说法只适用老式 CRT,现在的液晶显示器已经不是这样了,所有颜色的费电程度是一样的,可参看:

http://savingenergy.wordpress.com/2006/11/21/saving-energy-one-monitor-at-a-time/

配色太单调,白色的背景才刺眼,看起来眼睛不舒服
现在这个颜色挺舒服的

布局,版式我都无所谓。唯一的建议是,照照片的时候把下巴收一收效果可能更好,呵呵。

仍旧贯,如之何?何必改作!
现在的配色及格局非常舒服,我不止一次想过copy到自己的博客上去,怕你不同意,也怕麻烦,所以一直未行动。如果你放弃了,或许会有一天出现在我的博客上。
:-)

1152x864 Opera10.52

版式没有乱掉

但是,新的背景色,不如现在的看着舒服,不太适合阅读

建议还是不要换了,或者,可以让读者自己选择样式也可以

引用上次改版时的讨论:

UPDATE (2007年8月7日 23:00 晚上)
好像大多数网友都认为以前的样式更好,但是我还是不死心。因为我对那个样式中的一些地方很不满。


所以,作者要改版,是审美疲劳;读者反对,是审美惰性。
一点具体意见:单一文章页面的h2中,“相关文章”等h2应该比正文标题的h2字体要更小一些。

总体感觉和现在的版本变化不大,没有耳目一新的感觉。之前你不是写过文章如何制作CSS气泡吗,为什么不引进来呢?

背景颜色太刺眼了,不如现在的看着舒服。

现在的背景色看起来更舒服,而且新版的字太大

色调偏冷,现在的背景色很不错,字体大小也适中,整个版式不复杂

绝对现在的好~背景很舒服,不刺眼。而且整个版面很干净,能让人专心看文章而不是其它地方。

新版面貌似对高分辨率支持的不够好,显示的内容偏左,右边部分留的空间太大,我的电脑分辨率1920x1080,阮兄可以试试。

阮一峰, 其实您无需在RSS 上太费心,我们都是通过google reader 来拜读您的文章的。

白色背景的container 其实也可以用一下圆角,radius:10px 就可以了,不需要太圆,现在这样显得有些僵硬。另外背景可以用一个略带渐变的背景图片,而不是直接用单一背景色,具体请参考苹果官方网站吧,呵呵。

白色的背景看不习惯,不知道是看现在的blog看惯了还是怎么,还是旧的好

建议不要设置字体为宋体,只定义英文字体就好了,让用户的浏览器决定用什么中文,毕竟看着这么大号的点阵字真难受啊....

我觉得新版挺好的,为啥这么多人都喜欢老版本?哈哈哈,说起来站长的审美已经提高好多啦,大家是没有见过站长以前做网站时的配色和布局,哈哈,我只提一点小建议啊,确实首页的照片太大了,其实我想说的是,一个博客,不放照片也是可以的,放张个性图片也好啊,譬如站长最喜欢的某个图书馆的图~看久了不高兴还可以换,个人照片就没法老是换了换去了,被人说自恋呢,呵呵~

http://www.ruanyifeng.com/blog/2007/08/new_style_switched.html
PS:刚看了下以前站长改版的时候,下面也是一片不叫好呢!还是善用佳软说的对,看客是有审美惰性的!

firefox 1920*1080,在46寸的电视上看那么大字挺舒服的~
不过页面太亮会导致看长文字眼睛发酸

我用的是opera,字体太大,页面太素了,没有现在的好.

* 字号偏大,间隔偏宽。
* 某些部分的padding太小,导致文字与边界紧贴。

环境:Opera 10.10,Ubuntu 10.04
分辨率:1024*800
截图:http://www.jandown.com/link.php?ref=5wpULRxZcx

嗯,感觉不错啊,反正对我这个喜新厌旧的用户来说,还是新版看着舒服些,希望早点上线。
虽然我也做网站的,但是没提出半点意见,还希望包涵,^_^

怎么说呢,博客完全是私人的东西,自己喜欢就好。

几个写得好的博客,界面都不怎么样,人气一样很旺。

可惜我不会设计,否则我也给自己改版

我还是觉得旧版的好看.

但:
如果新版没这么冷,
如果新版的字体稍微小一点点,
如果新版有你的新照,

我会更喜欢.

不太懂设计,说说升级模板查看之后的感觉吧。色调有些冷,板面元素不是太紧凑,或许网志blog采用这块方式更合宜吧。个人之见,仅供参考.

也是偶尔看到您的文章,很是喜欢,基本现在是常客了,文学方面长了一些知识,英语功力不俗,呵呵,我现在写技术BLOG都尝试着,把思想或语言多多斟酌下,我想也是受您的影响吧。
我的小blog,知道您是一个技术方面的牛人,请多多建议,
http://space.itpub.net/9240380/

W XP Chrome 5beta版
背景太苍白太扎眼。而且因为空白很多,空的地方都是白色,耀眼。
正文背景字很大,背景又太白,看一会就晃动,睁不开眼

现在的看得眼睛比较舒服

chrome5 dev
搜索框在输入时,橙色高亮和灰色搜索框不匹配。。
其他的。。感觉字好大啊~~

都有点丑。另外,如果读者群不是老年人的话,没必要字体搞那么大吧

配色俺喜欢,将页面,文章和导航进行了区分,好看多了,
使用了圆角,也柔和多了;
建议:
- 最大的内容div 也圆角吧,小圆就好
- 引用的那个效果就不用了吧,简单的色框就好,前面的大粗兰边不用了...

字太大了,配色怪怪的,没有对比。

同上!

引用avenger的发言:

现在的好

同感

现在的黄色背景就很好,不要弄成黑字白底,刺眼

我觉得颜色太淡了吧,黑辽白底让你看了不太舒服噶。
建议再改改吧。

...以上评论无不一一对一峰来了个全垒打..^^

同意,还没现在的好@@

要是在现在基础上 再稍稍装饰得清新一下就好了 感觉现在的有点点沉闷哈

不过博主又要自己写 又要自己编程 又要管理上传 已经很不容易了^_^

这个留言页面的配色看的更舒服一些 反正是走简洁风格
那个白色 和 淡色搭配的页面看的我以为自己眼睛坏了

不论改了没改 都只能用简陋来形容 当然 有的人会说内容更加重要

借此地问,为什么页面上的“转帖公社”打不开了?

感想:我果然没有设计细胞……

阮兄,其实也还好,新的版本在我看来比现在有进步。顺便,我是设计师一枚。

在不犯比较“原则性”的错误的前提下,坚持自己的看法就好。

再罗嗦两句我认为值得改进的地方。

文章标题似乎太大了一点。正文字号没问题。

文章宽度太宽了点,比较适合的宽度是30个左右中文字符。

依然方便阅读!

引用loo2k的发言:
文章页面的文章主体好像偏左了?

同感,我有点水土不服。

我也是感觉现在的好,可能是看习惯的原因。

哈,已经有这么多留言了。下面是我的:
我的浏览器是Firefox3.5,装了IE插件,这样可以在一个浏览器里都给测试了。分辨率:1280*1024。我的图片会在你测试完成后删除。
1、网站首页。
ff截图:bbs.bosslink.com/zt/jianqing/shouye_ff.jpg
我觉得那两条线穿过照片的样子不很好看。而且大部分人都说的背景颜色太惨淡的问题,的确是不怎么好看。
IE截图:bbs.bosslink.com/zt/jianqing/shouye_ie.jpg
除了字变小以外,其他和ff里差不多,照片往下走了点。
2、网志首页。
ff截图:bbs.bosslink.com/zt/jianqing/shouye2_ff.jpg
恩,挺好看的。如果让“印刷厂”下面的线和右边“welcome”下面的线对齐,让“继续阅读”和右边的“日历”下面的线对齐,会不会更整洁些?
ie截图:bbs.bosslink.com/zt/jianqing/shouye2_ie.jpg
字太小,几乎看不清了。
3、文章页面。
ff截图(头部):bbs.bosslink.com/zt/jianqing/wenzhang1_ff.jpg
挺好的。
ie截图(头部):bbs.bosslink.com/zt/jianqing/wenzhang1_ie.jpg
字明显比ff里小了一大截,“分类:社会”那几个字几乎看不清了。
ff截图(留言部分):bbs.bosslink.com/zt/jianqing/wenzhang2_ff.jpg
我觉得那个“留言(15)条”和下面的线离太近了,“15”都过线了。
ie截图(留言部分):bbs.bosslink.com/zt/jianqing/wenzhang2_ie.jpg
上面“Feed订阅”后面的图片不能显示。中间google广告应该是平行放置的吧,现在是成了两个垂直广告了。这里的字的大小看着正合适啊,呵呵。

测试时间;2010年04月09日12:12。

哈,又发现了一个小问题。在IE里面,文章页面的最下面,留言部分被盖住了。截图:bbs.bosslink.com/zt/jianqing/wenzhang3_ie.jpg

注意:最左边。

补充一点,广告的地方同时方两个google的图片广告,真是难看啊~~不如一个图片广告,一个文字链广告吧。呵呵

网志首页--白而亮的的底色看着眼睛不舒服

感觉你设计还是不行啊,还是你的文章好看

我正准备参考阮兄现在版本,改成这样。。多好啊。改啥阿。没有的总是好的。

习惯了原来的底色,白色感觉刺眼。。。

就现在这样很好了,习惯了。

就是能不能多上传几张靓照啊??^_^

头像,应该面向文字,即使侧面照片眼睛也应该看一点镜头。

嗯,照片可以选一张更好看的。

白底的确不是很好看,但总比现在的黄底配蓝色强!除了字号太大了(您的文章往往很长,字再这么大,右边的滚动条就越缩越小,瞥一眼就不想往下看了),字体倒是很柔和,很喜欢(比现在的好看!)

另外首页照片分辨率太低了,给人一种粗糙的感觉,照片的框也太简单了就那么一条线。所有页面两侧采用的淡黄色和中间的白色色差太小,跟弄脏了一样,为什么不统一用文章内部作为背景的那种黄色呢?

最后一直有的疑惑:现在的版本也一样,为什么姓名lineEdit前面的label是“您的大名”呢?感觉有些不礼貌,想讽刺留言者一样。

颜色太过单调了。现在的淡黄色和蓝色搭配很刺眼,高亮度和高饱和度的结果是看着眼睛累,禁忌。不如将他们降为黑白调。或者字体用色改为70~80%之间的灰色,不要全黑。
整个界面排版对齐有点混乱。虽然我不是网页UI设计师,但我是游戏UI设计师从业快两年。
拜读贵博客快1年。第一次发言。
参考网站
http://www.pointui.com/
http://icondock.com/
http://workawesome.com/

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接