维基百科:2012年首页设计建议/方案优化/顶部设计

添加链接
维基百科，自由的百科全书
2012年首页设计建议
延伸阅读
查 · 论 · 编 · 历
当初改成蓝色是考虑到有整体色彩偏白的反馈，用色能和Vector皮肤一致。头部全宽的话左侧一栏可以不采用边框，当然如果需要还可以再调整头部样式。--Ericmetro（留言） 2013年2月8日 (五) 07:13 (UTC)[回复]
其实整合方案的顶部设计是否应该采用Kuailong兄的版本？因为Ericmetro兄的顶部设计在投票过程中曾作出重大改变，如果改版前投票的用户对此不知情，可能不太妥当。--Gakmo（留言） 2013年2月14日 (四) 04:50 (UTC)[回复]
我想首页设计可以根据讨论出的意见提出几个整合方案，再进行第二轮最终投票。在开始和结束的阶段实行民主（@Pearl），中间的渲染工作交由第一轮社群选出的设计团队执行会比较好。--Ericmetro（留言） 2013年2月14日 (四) 06:37 (UTC)[回复]
头部千万别改回改版之前的样子=_=…如果是因为哪点不喜欢，最好是直接说明。另外，我也觉得上面“开始和结束实行民主，中间阶段设计团队执行”比较好。--林卯留言? 2013年2月17日 (日) 16:02 (UTC)[回复]
(不知Ericmetro上次有没有看到，重贴一遍吧)1.首栏的底色、“参与维基百科”的底色，其过渡端的蓝色感觉有些涨，饱和度调低一些(可以到现有的50%)会比较好。2.社群信息那个板块的底色看起来有些突兀？…改成“参与维基百科”过渡端的蓝色(低饱和度)会不会比较好？--User:林卯 2013年2月6日 (三) 13:37 (UTC)[回复]

渐变效果的相容问题[编辑]

关于Ericmetro兄的方案，新版本的顶部（修改历史）很美观，但在IE浏览器看不见渐变效果。--Gakmo（留言） 2013年2月8日 (五) 09:59 (UTC)[回复]

可以考虑使用background-image？即将蓝色渐变效果做成图像，并以该图像作为底色，此举即可解决渐变问题，但就加重了载入所需的资源。－HW论 献 2013年2月8日 (五) 10:10 (UTC)[回复]
的确，可以试着做成一个宽仅有1px的细长图像背景平铺，应该只有几bytes大小。（Vector皮肤页面最上端的几个tab的渐变可以在ie下显示，通过load.css的DIV.vectorTabs感觉是利用了图像）--Ericmetro（留言） 2013年2月8日 (五) 12:31 (UTC)[回复]
这个？－HW论 献 2013年2月8日 (五) 14:41 (UTC)[回复]
是的 --Ericmetro（留言） 2013年2月8日 (五) 15:27 (UTC)[回复]
好像不能在页面直接使用，看了法文维基头部找到的方法是在MediaWiki:Common.css定义一个样式（globegris）定义background-image，随后指定class="globegris"即可横向平铺。--Ericmetro（留言） 2013年2月9日 (六) 06:54 (UTC)[回复]
故意的。防止用户在页面上引用站外图像。－HW论 献 2013年2月9日 (六) 08:08 (UTC)[回复]
可以采取渐进增强的做法，即目前比较流行的：没有必要让每一个浏览器的现实效果都相同（可能性低，且没有必要的耗功好时）使用支持性好的的浏览器既展示华丽的版本，低版本的浏览器设置为自动忽略不兼容的css内容，只需保证内容位置都能显示正确，背景颜色文字颜色不冲突是最好的。另外Gakmo最好能说明IE版本Victor.In（留言） 2013年2月16日 (六) 06:29 (UTC)[回复]
@Victor，我使用ie9观看。--Gakmo（留言） 2013年2月20日 (三) 01:39 (UTC)[回复]
我觉得没必要弄这种渐变效果。现在的网页设计趋势也已经开始放弃这种渐变效果了--百無一用是書生 (☎) 2013年2月17日 (日) 12:03 (UTC)[回复]
话说Vector皮肤的几个标签还是渐变的形式，这个皮肤的样式也局限了一些新风格不太容易融合到首页上... --Ericmetro（留言） 2013年2月19日 (二) 16:45 (UTC)[回复]
另外，头部的logo背景与左上角的logo过于重复了，如果非要用背景的话，也最好换一个别的图片。而且头部的链接颜色还不一样，最好还是用系统默认的，保持一致性--百無一用是書生 (☎) 2013年2月17日 (日) 12:06 (UTC)[回复]
呃…大小相近的情况下是会被视为重复，比如Ericmetro上个版本…但差距拉大并只截取局部就不至于了。实际上我也见过有mac软件主页有类似设计(我记得是mac软件，当然是因为那512平方大的图标了)。如果看起来有重复的感觉，不妨再大些。头部的链接颜色我想是故意不用默认的，原因不用说，换成默认链接色看看？--林卯留言? 2013年2月17日 (日) 16:16 (UTC)[回复]
如果使用background-image又不希望使用站外图像的话，可以考虑data URL：
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAB8CAIAAAAny03BAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHxJREFUeNpsikkSACEIxPj/f9k5jAguVc4h1TECEQE33oQXyz28brq5+971P9umb9yu9uPmYDZ8YO1nf1Adq6Cm561W7+HarnqQXEmXIl0ERGSvXO0fboazAD/wCxXECXUnIKJennBv9ge8F6dj7u44WQ3TV8O6nVT/BBgAwNhpPSXNub8AAAAASUVORK5CYII=);
--NiuXG（留言） 2013年2月18日 (一) 02:06 (UTC)[回复]
不是 url() 的东西就不能么。。。但是 linear-gradient 是可以的。。。此外，因为当前的唯一支持 gradients 的 IE 是 IE 10 而且我想用 Firefox 的人应该也都及时更新到最新版本我相信 -ms- or -moz- 的前缀是可以不要的。。。Sky.6t 2013年2月25日 (一) 05:31 (UTC)[回复]

头部的主要用途[编辑]

Ericmetro的头部设计能吸引读者，而Kuailong的设计重在吸引新人参与编辑，两者的思路显然不同。吸引更多的编者参与维基百科实乃当务之急，就这一点而言，Kuailong版更有助于中文维基百科的发展。

(！)意见坦白地将我觉得首页来吸引新人加入真的挺没用的, 我还是使用者时, 一直在心里的都是这样的念头,首页做成这个样子有何用?搜索框在右上角那么小, 弄得跟microsoft.com似的, 一点也不实用.我用维基百科查资料的时候的一大想法就是希望有朝一日能够看到google风格的维基百科首页. 我被吸引加入, 主要就是长期用他查资料--> 看到有个条目中文写的不好而英文不错-->萌生了翻译的念头-->注册-->看到别人的语法就学来, 连用户讨论页都不知道是什么.Bluedeck 2013年2月9日 (六) 11:17 (UTC)[回复]
(＋)支持，我也是搜索派。--Gqqnb（留言） 2013年2月11日 (一) 02:32 (UTC)[回复]

Ericmetro版的头部设计是从日文版借鉴来的，原方案在某些浏览器下会维基球会错位，兼容性不好。现在虽然修复了此问题，头部又不能和左边线对齐，看起来就比较奇怪。且维基百科页面从未有这种全宽的对象，风格不协调。－DeBit（留言） 2013年2月8日 (五) 14:59 (UTC)[回复]

(：)回应：其实是感觉三个链接要解决新手的障碍还不太够，故另外设置了一个“参与维基百科”的板块吸引新人参与编辑，内容设置可以参考下方。头部对齐是因为宽屏高版本浏览器下Vector皮肤会用@media调整边距从1em到1.25em，具体使用时可以在css里添加一句限定首页边距的语句。--Ericmetro（留言） 2013年2月8日 (五) 15:11 (UTC)[回复]

放分类还是提升参与的链接？[编辑]

.bluegradient {
  background-image: url("//upload.wikimedia.org/wikipedia/commons/0/0a/Zhwp_blue_banner.png");
}


  • 说到提高参与度，个人觉得仅仅把新手入门的链接从下面移到上面，或者把文字改成按钮，或许作用有限。因为这种设计的改进对象主要是那些因为不易在首页上找到参与链接而放弃参与的新手，但这个群体可能是非常有限的。在设计题头时要考虑的很重要的两点，一是使用首页的维基人的特点和习惯，二是一般情况下新手参与到维基百科的过程和习惯。
对于第一点，如果能有每日首页访问的数据，比如访问量和注册用户比例、通过首页链接访问新手页面的人数，对咱们设计首页、讨论优化都能很有帮助。
对于第二点，显然希望提高参与度是维基百科整体的、长期的任务，而非仅靠设计首页实现，因此需要弄清一般的维基人是怎么从新手变成老手的，针对这个再做设计。就我个人参与维基，过程大致是：多年查词条-某次发现问题想修改-注册-通过用户讨论页上的欢迎信息进入新手入门。假如我的过程是一个比较普遍的过程，那么提高参与度的设计就有必要针对这种习惯进行（比如通过顶部提示提醒未注册的查词条用户注册，加快他们变成老手的过程）。希望大家也能提供一些自己参与维基百科过程的例子。
-- Danielinblue（留言） 2013年2月9日 (六) 08:55 (UTC)[回复]
  • 赞同：我记得最早是从模仿入手的。感觉新手初接触编辑语法不太愿意阅读指引性文字，更愿意亲自动手模仿。可以用几个小例子和练习使新手在操作中掌握编辑方法。--Ericmetro（留言） 2013年2月9日 (六) 09:52 (UTC)[回复]
  • 是的，而且都是在开始写东西时才会想该怎么写，想着找范本或看入门，就像写文章不清楚某个词的用法才会想查词典，而不是从看词典开始然后没事找篇文章写一写..--Danielinblue（留言） 2013年2月9日 (六) 10:56 (UTC)[回复]
  • 说的对! 我是从条目评分工具中的您知道你能编辑这个页面吗来点击的立即编辑, 然后编辑界面一弹出来我就傻了, 心说"这哪里是在写百科这是在编辑脚本啊喂!" 我常用html所以上手不难, 但是完整的学习过程可是完全通过模仿他人编辑时使用的代码.我觉得可视化编辑器出现之前(又提到这个 - -#)想要吸引看到ml就头大的人来参与, 真是难度大大. 不知新手指引里是否有语法大全的页面呢>? Bluedeck 2013年2月9日 (六) 10:59 (UTC)[回复]
容我插个嘴：可视化编辑器常见的问题就是容易制造垃圾代码。对维基而言理想的，我觉得应该是即时对照预览(或者说“显示预览”即时化)。--林卯留言? 2013年2月17日 (日) 17:02 (UTC)[回复]
  • 同感，所以提高参与度有很多比首页上新手入门的位置更关键的障碍，回到首页顶栏设计上说，个人更倾向顶栏放portal（这样浏览百科的方式很亲切），但这仅仅是基于对首页浏览者的推测（看首页的大多并不是刚刚接触维基百科），因此觉得了解首页浏览的数据很重要，，--Danielinblue（留言） 2013年2月9日 (六) 11:25 (UTC)[回复]
另一个问题是很多人看不懂这句话:讨论完成后请签名,方式之一是留下~~~~,我刚刚看到这句话时就觉得它不知所云, 于是模仿别人的签名代码写出了[[User:Bluedeck|Bluedeck]]([[User_talk:Bluedeck|留言]])写了进去, 时间也是自己手敲, 还坚持了很长一段时间orz, 而且我发现不少新人同这样做呢, 是不是应该将帮助与指引的语言写的在通俗一点呢.Bluedeck 2013年2月9日 (六) 10:59 (UTC)[回复]
  • 当显示Ericmetro2的时候，宽高比不太协调时（浏览器上下的边比较窄，左右的边比较长），排版就会显得非常差劲。其他两个方案就没有太严重的这种问题。很担心显示在部分手机上或者平板上会出现问题。--Yanenming（留言） 2013年2月9日 (六) 12:55 (UTC)[回复]
您是指头部的排版吗，正文感觉不会有太大问题。头部今天添加了按钮，可能还需要一些调整。已调整边距为相对宽度并在移动设备上测试。--Ericmetro（留言） 2013年2月9日 (六) 13:12 (UTC)[回复]

Danielinblue认为仅仅把把新手入门的链接移到上面作用有限，我对此不能赞同。恰恰相反，链接的显眼程度才是第一要素。从页面浏览量就可以看出（以2013年1月为例）：

这几个链接都在首页上方最显眼的地方，每月上万次浏览量，而Wikipedia:新手入门不过一千多次而已，虽然欢迎模板中有前往新手入门的链接，又有多少人点击过呢？而且注册后才能被欢迎，很多人可能就在这个过程中被挡住了。Help:目录老手也有时候会去看吧，扣除这一部分，新手看得就更少了。

新手不愿意去接触指引性文字，是因为帮助目录太冗长、太繁杂，新手一看就怕了。当初我初次接触维基百科时也是从模仿起步的，实在是因为看不懂帮助内容（面对一堆链接不知道该点击哪个），结果修改一个内链花了半小时才搞懂格式。模仿虽然有效，但效率低，而且像版权、可供查证、中立观点等方针是不可能通过模仿知道的。像Bluedeck兄所说的签名问题（本人深有同感）岂就不是模仿的产物？那个Wikipedia:关于写的并不算“平易近人”，也有这么多点击，可见“地段”的重要性。--DeBit（留言） 2013年2月9日 (六) 14:55 (UTC)[回复]

(＊)提醒：页面浏览数据是按照资料库被存取的次数而显示，故出现下列情况：1) 未登入用户的浏览量有相当大部份被忽略 2) 重定向页面，浏览量归入该重定向页，不归入目标页面。
(＆)建议：上面提到有用户在我的用户讨论页上建议简化Wikipedia:新手入门信息，而这事情基本上会在短期内完成。既然如此，是否可以考虑完成该页的一些重要更改后，加强对该页的重要性？
(！)意见：移动设备有专用首页，我们现在研究的首页应该不太有关系吧。此外，是否应该考虑同时更改纯文字及简单版本首页，或是置之不理？－HW论 献 2013年2月9日 (六) 15:32 (UTC)[回复]
  • 想到也许可以用一张图片做题图，觉得如果能做出类似这种柔和的背景色调 [1]（可以适当加入一些Vector皮肤的淡蓝色），偏左有一些淡色的维基球上的文字元素，效果可能也不错。--Ericmetro（留言） 2013年2月10日 (日) 15:02 (UTC)[回复]

(＆)建议：实话说，我就是1月16日才注册维基帐号的“新手”，一开始便是通过“使用说明:编辑页面”和“沙盒”来熟悉维基编辑规则的！而两天后便提交了我的首页设计方案第一版（虽然之前的版本看似纯属抢位）。在此期间对我帮助最大的就是“使用说明:编辑页面”和“沙盒”这2个页面，而不是Portal页面！因此，希望顶部可以留下的是有用的连结而不是“主题分类”列表！也希望我的“维基初体验”经历可以给各位提供一个参考！--6teng（留言） 2013年2月10日 (日) 17:01 (UTC)[回复]

(！)意见，不太赞成使用clickable button。参见遴选结果，所有在顶部有clickable button的方案，得票都不太理想。--Gakmo（留言） 2013年2月10日 (日) 17:41 (UTC)[回复]

(＆)建议：另外关于维基Logo的使用：左上角不是已经有一个“维基球”了吗？那么一般认为在那么近的位子重复出现“维基球”便是设计上的禁忌了！例如Chrome浏览器的顶部标签上已经有一个favicon图示，那么在浏览器的网址列便不会有重复的favicon出现（早期的版本好像是重复使用的，后来减掉了地址列上面的）！如果一定要利用维基Logo才有效果，个人建议要从维基Logo里面提炼出汉字“维”的部分并做适当修正以适应顶部设计。这样便不会与左上角的维基主Logo产生重复，也能与其他语言的首页logo作以区分。--6teng（留言） 2013年2月10日 (日) 18:02 (UTC)[回复]

感谢，已针对ie利用css解决渐变问题。--Ericmetro（留言） 2013年2月14日 (四) 08:46 (UTC)[回复]

(！)意见：表示支持新手引导作为顶部内容，但是内容可以更亲和一点，比如“你也可以参与哦”目的不是为了让新手直接从链接进入而参与。告诉新手，他们可以直接参与。这就足够了。对于老用户（愿意在维基百科使用分类查找的用户，而一般新手通常是搜索到的）来说，用户黏性已经足够，不可能因分类位置稍有变动而不去寻找。因为本身有这种需求。而新手编辑的愿望是需要引导出来的Victor.In（留言） 2013年2月16日 (六) 06:29 (UTC)[回复]

顶部新设计[编辑]

顶部新设计示意

(＆)建议：试着尝试了一下较为流行的设计风格简单做了一张效果图：这些图案可以用svg的矢量图来完成，文件大小不会很大。我所设想的是一个透明球的内壁上放置一些文字和图案。左侧是维基球上的文字，中右侧可以有意思一些，放置一些不同知识的内容。比如示意图里放了一段千字文和拉丁语，还可以放一些程序代码、数学公式、乐谱等，投影在球上，给人有百科全书的感觉。首页最上部有一个蓝色渐变做背景，感觉可以靠css实现，蓝色渐变背景也可以衬托白色板块。--Ericmetro（留言） 2013年2月10日 (日) 19:17 (UTC)[回复]

近距离出现两个维基球可能是设计上的禁忌，但社群投票结果显示大家不太介意（而事实上，全部三个最多净支持票的方案均如是 囧rz……）。很欣赏Ericmetro兄的建议，但这设计与之前的完全不同，差不多等同于推倒先前经社群审阅的方案。建议回归到社群较悉熟的方案，通过微调，得出较佳设计，谢谢。--Gakmo（留言） 2013年2月10日 (日) 19:55 (UTC)[回复]

  • (：)回应：
    • @Gakmo: 既然{{Clickable button}}效果未获社群满意，或许可以不使用。偏离原有方案也不要紧，如果过份执著于原有方案，可能会把好的设计全部都放弃，反而效果没有这么好。建议完成设计后，再一次投票，问问社群是否赞成这个“整合方案”或是“二选一”：新方案 vs 原有方案。
    • @6teng:
    • @Ericmetro: ，这个设计不错，但顶部右方不应该放置一大段文字，我宁愿要几个连结都不要一大段文字。
    --HW论 献 2013年2月11日 (一) 02:44 (UTC)[回复]

(！)意见，新方案应该在“提交方案”时提出，现在是“优化方案”阶段，并非重新设计阶段。社群已经对一众设计方案提出意见，重新投票对其他方案不公平；为什么这个可以直接参与第二次投票？若要重新投票，只能够重回“提交方案”阶段，这将会使首页改版没完没了。--Gakmo（留言） 2013年2月11日 (一) 05:55 (UTC)[回复]

  • (！)意见：也许得票不太理想的几个方案有其他原因，不一定是Clickable button的缘故。默认的灰底绿字效果的确不佳，蓝底白字的按钮样式还比较现代（Google等网站使用较多）。--Ericmetro（留言） 2013年2月11日 (一) 06:57 (UTC)[回复]
  • (！)意见：头部应该多加入一些介绍的内容，像Danielinblue这样的头部，新手可能以为自己不能编辑维基百科。Qiyue2001 2013年2月11日 (一) 10:43 (UTC)[回复]
  • (：)回应：@Gakmo: 既然如此，不如先介定“优化”的定义，好让讨论能够有一个大方向。 @Ericmetro: 其实Clickable button也需要考虑对于不支援JavaScript浏览器的效果...－HW论 献 2013年2月11日 (一) 14:21 (UTC)[回复]

本主题全部或部分段落文字，已移动至Wikipedia talk:2012年首页设计建议/方案优化/顶部设计。执行人：HW论 献 2013年2月13日 (三) 02:54 (UTC)。[回复]

  • (＆)建议：我想设计优化阶段可能是根据第二阶段讨论结果提供的设计原则，提出若干方案供社群选择比较好。既然第一轮投票认同了几个方案的审美风格，在此基础上由设计者进行拓展应该并不失公允。--Ericmetro（留言） 2013年2月14日 (四) 06:53 (UTC)[回复]
  • 至少那些链接不要和底部的链接与左侧导航栏的链接重复。否则读者点来点去总是那几个链接，并不友好，也显得混乱。而且并不是给出很多帮助页面的链接就是好的，就能够增加点击率的，链接多了反而更分散注意力。而且，即使帮助说明等做得再好，10个人里有一个人会去看就已经非常好了，使用者的习惯就是直奔主题的，他在维基百科上主要的事情恐怕就是查资料、读文章，其次才是编辑和修改。只有少部分的用户才会在有问题的时候去找那些帮助文档看。因此有几个链接就足够了。总之：少、精、简、不重复--百無一用是書生 (☎) 2013年2月17日 (日) 12:17 (UTC)[回复]

搜索框实现键盘停顿效果[编辑]

本主题全部或部分段落文字，已移动至Wikipedia:互助客栈/技术。执行人：HW论 献 2013年2月13日 (三) 10:35 (UTC)。[回复]

顶部用色[编辑]

目前的顶部用色有几种选择：浅蓝色渐变，灰白色渐变以及白色带有背景图像。在进行下一步设计前，可以探讨一下顶部的颜色选择。

话说德国维基媒体的blog是仿Vector皮肤的，用了一个蓝色顶栏。--Ericmetro（留言） 2013年2月16日 (六) 06:43 (UTC)[回复]
能否不用渐变呢？--百無一用是書生 (☎) 2013年2月17日 (日) 12:20 (UTC)[回复]

顶部“维基百科”用字[编辑]

我此前有个想法，觉得还是发出来比较好：

不推荐用文字而要用图片的原因在于：现在的首页，“维基百科”4个大字，由于系统默认字体的差别、浏览器渲染字体、及字体配置方式不同，在不同的系统、不同的浏览器、甚至同一浏览器不同字体配置下的效果都是不一样的，需要考虑的变数非常多。而图片可以解决系统及浏览器的差异(如果不考虑IE6对透明png支持不良的话)。
我只是不推荐文字…如果因为技术限制还是别的原因只能用文字的话，那么这4个大字应当设为什么字体？这是不是应该讨论一下？--林卯留言? 2013年2月17日 (日) 16:51 (UTC)[回复]

虽然想法很好，但是我总觉得这意味着未来的某一天首页会变成图片表格排版……和CSS的目的背道而驰啊。 --达师 － 261 － 442 2013年2月17日 (日) 17:04 (UTC)[回复]
这不会，用图片就相当于文字式logo。…要不，就用CSS3的web字体。林卯留言? 2013年2月18日 (一) 11:07 (UTC)[回复]
不希望图片，可以用css3及html5完成构想的设计，无需完全兼容。可尝试采用开源的文泉驿的云字体。——VictorTalk 2013年2月21日 (四) 17:55 (UTC)[回复]
我也不希望图片。。。我的想法是，因为 @font-face 通常不会用来引用中文字体，中文字体文件太大。要不干脆 Microsoft YaHei, STXiHei, StHeiTi, sans-serif... 但是千万不要用 SimHei 作为 fallback 啊。。。至于繁体的 Microsoft JhengHei 也挺好看，貌似华康那些字体也不错啊。。。为什么一定要一样的字体呢。Sky.6t 2013年2月25日 (一) 05:35 (UTC)[回复]
如果要使用图片的话，用这里的字体作图如何？-- ──★──  2013年3月16日 (六) 13:11 (UTC)[回复]
反对用图片，没意义。楼主的主要理由是不同浏览器，不同配置，维基百科字样的显示略有不同。我请问，维基百科字样的显示略有不同又有什么关系？即使IE里两栏之间多了1像素，opera里字体是无衬线的，火狐里边框不支持圆角，safari里没有透明，哪又怎么了？只要不产生大问题，就可以了，何必强迫浏览器显示得“像素级相同”呢？要我说，默认字体即可。
  1. 我看维基希望缩放为140%，如文字用图片显示，必然会不清晰。
  2. 已知目前维基百科用h2标签包裹。浏览器基本都提供了自定义CSS的功能，不少人（包括我）会用CSS设置h2的文字都是2em，微软雅黑显示。如改用图片，这些人的设置会失效。

--Gqqnb（留言） 2013年3月17日 (日) 03:33 (UTC)[回复]

取自“https://zh.100ke.info/w/index.php?title=Wikipedia:2012年首頁設計建議/方案優化/頂部設計&oldid=60979547”