研究会考题04：这个新闻头条的设计有点问题[讨论结束]August 2nd 杨掌柜
每次到这个页面，看到头条新闻的设计，都要一阵困惑。
我知道web设计一直以来好像都是美工/web设计师在做，而其设计目标通常是美学角度，舒服养眼，清爽，简洁，漂亮，精致云云。今天我们的题目，不是想获得不好看不简洁之类笼统回答，而是试图用设计理论的指引，准确的把握到某些细节设计的不合理。（请到该网站去体验真实视觉感受）
希望各位可以慷慨发表，直抒己见，创造大家一个互相学习共同进步的机会。
作者：油茶研究会
谢谢很多读者热情的参与，有的虽然三言两语，但是点出了关键点，要特别谢谢格外用心的xorms, Evans Jia, soso, cindy, tiger和jameguilin。其实大家都已经看到了，只是在陈述问题时，还不能够理论化。下面是我对本题的一点拙见。
1。组织序列性：在头条新闻小小的版面内，明明运用了多种组织模式，却试图用排行榜来统称。这是大家都提到的问题。图片新闻自己滚自己的，前三名新闻采用的了焦点新闻形式，其相关新闻算不算排行榜呢？
2。组织的亲和关系：图片新闻与右侧明明是有关联的，本截图里面可以看到，图片滚到第三张，和右侧的第三大新闻，正好是一条。可是没有用任何视觉元素来表征其关系。右侧4－12的数字序列属于哪个阵列，交待含糊，很多人提出了困惑。
3。视觉的层次上：元素重量分配有误。这就是xorms一直在奇怪的序号问题，其重量盖过了新闻标题本身。
4。视觉交互上：前3的序号设计成button, 有误导用户误操作的倾向。
5。视觉的意义引导性上：图片新闻跟右侧的关系分裂，造成了意义的断点。这意味着用户的视线变得不知所措，没有引导的随意扫描，万一下一个扫描点不感兴趣，视线马上就会离开。
【最后更新】2007－08－19
ianliu
2007-08-02 21:22
应该是排序的混乱吧，还有序号的位置迷惑～ 以及那个大button的序号，不知道什么意思～，看来问题很多，值得批评一下， :em19:
ianliu
2007-08-02 21:24
可不可给经常来，而又回答正确的江湖人士一些“奖牌”～ 或者什么江湖通行证之类的东西～
Ryana
2007-08-02 22:24
ianliu，这个奖牌表彰的，我的确尝试着在弄。评论带奖牌鲜花沙发的。。不过PHP开发，缺人手现在。 :em05:
xorms
2007-08-03 0:52
总的看：有的有序号，有的没序号，这种不一致会让读者很困惑。
上半部分：
那些4、5、6之类的数字很大，比文字都大，而且所在的位置位于页面靠中间。加上它们与右侧文字用竖线分隔，会让人误以为他们是属于左半侧的行尾的一部分。
大的1、2、3中间有若干小的、没有标数字的文字。让人以为这些文字是上面对应大红字的子内容或内容简介。如果是这样，那谁是头条？
（刚才浏览的时候发现，只有1、2，没有3，然后直接就是4、5、6……了）。
下半部分：
带向上箭头的条目将板块分为两部分，这种视觉上的过度细分看上去比较杂乱。
向上的箭头加上1、2、3、4的数字，让人觉得带上箭头的文字是排位上升的意思。
有的条目不是带数字，但是用红色标注了。读者究竟是应该是看标数字的，还是关注红色字体的呢？
Ami
2007-08-03 9:53
我也碰到了只有1，2没有3的情况…
红色实在刺眼得很，这样的排列也不太符合习惯
Evans Jia
2007-08-03 22:54
啥时候请研究一下俺做的网站，www.anjuke.com。欢迎多拍砖啊！
Evans Jia
2007-08-03 23:09
纯粹从使用者的角度来看，这里很多设计有点为设计而设计的意思。
1.我不明白为什么要有数字排序。他们真的对读者很有意义吗？大字号的标题，刺眼的红色难道还不够强调吗？与其设计那么多花哨的数字序号，不如简单地Bullet Point就全搞定了。
2. 下面的栏目拖弋效果，我觉得纯粹是玩技术。这个页面有多少个性化的需要？用户真的很需要或者说感谢在这里提供这样的功能吗？另外，这个方框因为赶了一下潮流，设计得太淡雅了。在我的手提电脑显示器上显示得并不分辨栏目与栏目的区隔。
3. 照片下面的箭头是个非常奇怪的设计。设计角度来说，照片右边的空间，天然会被人觉得与照片有联系关系。如果读者需要寻找对照片的介绍的话，一定会去看那里。无论你把箭头设计得多么精巧，都无法改变这一用户习惯。建议不要在这里创新，宁可把1,2,3,4放到下面去。顺便说一下，我不理解这里的内容需要代表怎样一种排序规则，似乎也没有任何明示或暗示。
4. 不知道设计师是如何考虑的，对下面方框栏目内的空间利用到了极致，丝毫不肯有一点浪费。后面那总是不完整被吃掉很多字的标题真的那么重要吗？为什么不干脆把栏目高度整高一点？这种半句的标题很有效吗？
soso
2007-08-04 1:46
很久没考试了，哈哈！我也参加！看了大家的评论，其中不乏有用的见解~也不乏为了批评而批评的文字。我觉得要评价一个事物应该先深入了解一下该事物，这个网站我用过一段，有一些肤浅的了解。既然是讨论，我就直言不讳了，请大家不要见怪！我看得出来xorms，evans jia应该不慎了解该网站？在不了解的情况下，以上的文字应该是为了评价而做的评价。
to evans jia:
1，不知道你是不是网站的设计师，有大量数据可以证明，数字排序是一种有效的引导用户方式。
2，我赞成你的说法，这种技术没有多少价值。ps:这个网站是可以更换配色的。
3，这个我不太赞同，哪个“设计角度”提到照片右边的空间“天然会被人觉得与照片有联系”，您上sina的时候图片右边的文字都跟照片有关系吗？我的看法：文字在图片下面才是对图片最合理的解释，但是我同你一样觉得用箭头来提示用户是一种比较笨的做法。
4，这个就不多说了，再次请您了解一下该网站，并深入的从技术和设计的角度想一下该怎么排列标题？（呵呵，一不小心成考官了……）
TO xorms:您显然是为了评价而评价……呵呵
最后我说一下我的评价：
1，1，2，3是有必要的，但是这种botton风格一容易造成误操作，二是与整个网站风格不搭。
2，大面积绿色文字会造成用户视觉疲劳，与飘红文字搭配容易使人产生烦躁情绪。
3，标题排列有待思考，但是对于这种聚合海量数据的网站来说，标题的重编辑显然是不现实的，我还没有想到好的解决方法，不知博主有何高见？
最后，很想结识博主！谢谢~
soso
2007-08-04 2:28
刚才看了evans jia设计的网站，感觉很清新，在用户体验上也很下功夫，好！由于没太细致的浏览您设计的网站，不便发表过多的评论，只提两点：
1，个人不太喜欢用其他网站和网上搜来的素材做网站的装饰，首页的室内效果图显然是3d渲染器finalrander的宣传图片，该图片严格来说，是受保护的。（呵呵，搞得有点严肃了……）下面那个mm也是某韩国网站的设计；另外那个saleman没见过^-^。总之，页面装饰元素风格欠统一，稍稍欠专业。
2，小区点评板块有点淡薄，由于不了解贵网站的运营状况和用户参与度，不便多加评论。
Evans Jia
2007-08-04 21:18
多谢soso对我们网站的支持和宝贵意见。
我不是设计师，是做产品出身的，平时也经常使用抓虾，但这个页面基本上我不去的。
1. 有关数字排序引导，我在其他网站看到过，一般都是有一定的评选或数字支持的排序结果。但这里，是不是真的有必要？我持保留意见。
2. 很高兴找到知音。
3. 可能我的意见有偏颇之处。照片的下面也许比右边更自然一些。这个箭头的方式怪一点，可能文字和照片用某种设计元素使之联系更紧密会更好，例如左上角那种就很自然。但是在照片右边有内容，却要在照片下面用通栏的一条来注释照片，似乎比较难处理。我不是设计师，如果一定要提一种方案，也许我会把注释和照片用颜色框线包起来，或者干脆把注释放到照片右边第一条，用颜色连接起来，让注释和照片形成左上角那种整体的感觉。
4. 这个我也持保留意见。这些内容是设计师使劲想推给我看的。作为读者，我多看一些，少看一些，根本无所谓。没有这些|后面的切了一般的主题，我觉得一样很好。(一家之言）
关于anjuke.com，我们当中换过设计师，最近也在慢慢调整风格，所以很多页面都有不同的风格。需要一定的时间来调整。如果有易用性方面的问题，请多多拍砖。
xorms
2007-08-04 23:36
to SoSo：
诚然，我没有用过zhuaxia的产品，这个页面也是我头一次看到。如果你非要说我是为了评论而评论，我也无话可说。可是我提出的意见是在我看到这个页面后的第一直观印象。
在我看来，如果不能让用户在第一时间or很短的时间明白网页的设计意图，那就是有问题。正所谓习惯成自然。再烂的设计，要是用户用习惯了，他也就不觉得是问题了。
xorms
2007-08-04 23:53
在我看来，只有在很明确的规则或较窄的比较范围内，数字标识才有意义，而且人的阅读顺序是从上往下的，如果不是为了某种特殊目的，单纯的序号是没用的，还不如显示排序依据的分值。（哪个搜索引擎会给搜索结果加上序号？）
况且，有的有序号，有的没序号。是不是说有序号的就是前几位，没序号就是随机的？
下面各个分类的内容，每行都是用一个圆点开头的，而行内是用竖线分隔的。这样是不是说每行都是独立的内容，而行内是相关内容呢？（用过word的应该觉得那个圆点很像word里的项目符号）
Ryana
2007-08-05 11:32
:em32: 谢谢各位用心的评价。我们暂时只谈新闻头条中的12条新闻和左边的图片新闻。
从目前的讨论来看，问题纠结在数字名次在这个小版面里，表现的合理么？对用户有多少价值？对网站引导用户有多少价值。
另外就是图片新闻与其他新闻之间的关系问题。
jameguilin
2007-08-07 9:54
a: :em37: 新闻图片似乎与右边的1\2\3数字序号内容都不符合!
在图片下放置图片内容标题,同时由于标题文字有时过多,形成分割线的视觉效果.把1\2\3孤立.有的标题文字较少,浏览起来很混乱.
b:头条新闻,使用大红字体.以及左边的1\2大数字标题.确实枪眼过头了.给人感觉是广告大标题.不想去点它.
c:在每个新闻版快上添加一排虚点是否有必要.分散视觉.
d:子新闻版块的右上角的最小和关闭按钮是否在告诉用户来点击我,这确实是个好创意,但似乎过于炫耀,我要看的是新闻内容,而不是多余的操作负担.
F:嫩绿色是明度较高色,但着又是抓虾的形象色.所以怎么让色彩更协调还得再斟酌下.绿和红满屏幕跑累啊!
G:图形元素在使用上要再协调细腻些.现在有大的新闻线框\头条新闻的大灰色数字按钮\小数字标题\排序点\向上黑色箭头\灰色新闻标题分割线等等.这些是还是要用心设计下咯!
………………
cindy
2007-08-07 13:06
对于新闻头条中的12条新闻和左边的图片新闻，我也来发表一点浅见：）
1.首先4-12序号右侧的竖线及其容易让人疑惑：这些序号从视觉上来讲，比较像跟左边的内容关联；但是从逻辑上来看，与右侧标题的一一对应关系更清晰（因为左边的标题明显不都是同一个层级的亚）。那么它到底是标识哪边的内容呢？这时用户会进一步分析，左边的标题里面，有3个已经有了序号，看看那些没有序号的，噢，根据内容分析原来是属于有序号的那3个的子内容。这么看来，初步可以判断出序号是对右边标题的编号。因为一个分割线的设计给用户造成这么多困扰 -.- 如果我们把分割线放到序号的左边，是不是就清晰很多呢？
2.再来看最左边的图片新闻和中间文字部分的头3条。事实上，二者都有1、2、3的编号，那么究竟哪部分才是对应最右侧4-12条的那前3条呢？至少我是没有办法轻易判别的。如果说图片新闻是“正确”的前3条，那为什么中间会插入一段？如果说文字部分的头3条是“正确”的前3条，那为什么这3条（事实上我看到的也是只有2条）和右边4-12的形式不一样，有大标题和子标题这样的层次呢？如果后者是正解，那么左边图片新闻的1、2、3编号是否可以换个形式，比如a，b，c，是不是更容易和右边的头条撇清关系呢？而且1-12这些头条的编号，是不是应该在外观上更一致，让用户更容易直觉上就将它们看成是一个整体呢？。。。
2房
2007-08-08 9:57
逻辑上一体的东西.视觉上也改一起吧
tigershoo
2007-08-13 12:16
a/图片的123排序与中栏标题序号不一致；
b/中栏标序号的大标题与各自下方列出的无序号标题从视觉上看有主从级关系，但实际好像没有，无序号的只是平级的相关信息；
c/右栏数字后的竖线从视觉上把数字划到了中栏部分，但实际上是右栏的标题序号。
andol
2007-08-15 15:26
:em02:
我觉得各位的要求太多严苛了,
下面的模块弄个可以玩玩拉来拉去的也未必是不好.
之多也就是在顶上的新闻部分有些混乱而已,
另外再注意调整一下整体站点的配色,
应该是一个不错的站点啊. :em13:
Ryana
2007-08-19 11:33
谢谢各位的参与，结论已经公布了。
tigershoo，jameguilin，cindy，xorms，Evans Jia都答得挺好。对照本文后面的更新，可以找到你们发现的问题，做了新的陈述。
soso我得唠叨你两句 :em34: ，关于用户体验，必须要考虑的是context的前提，这是最基本的。不管是新用户还是老用户，他们都有不同的视觉体验，哪一种都是设计师要考虑的。xorms和Evans Jia都是很认真的在思考问题，而且答得很好。
对于数字排序很有效，是的，它是一种有效的引导方式，但凡是有效的都普遍适用么？ :em23:
andol，唉，你怎么没看本文标题 :em06: ，说的就是新闻头条的问题，大家就是在讨论的就是你说的“混乱”的部分啊。
2房你观点很一针见血 :em37: ，可惜，太惜墨如金了。
再次谢谢大家伙的参与，共同进步～