FANDOM


Wiki现代化:持续创新的设计


Content-is-like-water-1980

内容就如同流动的水一样在不同的设计中呈现出不同的形状

万物皆有变化。一些设计保持着经典,而另外一些却强调功能性的简化。在构建社区的时候,如何进行设计也是非常具有挑战性的。作为FANDOM的目标之一,就是希望将全球用户更多关注手机使用体验。无论是平板电脑或者是手机,用户都可以自由查阅他们感兴趣的娱乐或者游戏讯息。粉丝希望融入流行文化之中,了解他们感兴趣话题的方方面面。我们目前的页面浏览量有超过60%来自于手机上的访问。

如果需要对社区体验做长远的发展考虑,就必须让用户对设计更加满意,才能吸引越来越多的用户关注和参与到社区中来。任何人都知道电脑屏幕上所展示的内容并不能在一个小小的手机屏幕上全部呈现出来。而这篇文章,我们将讲解一些社区所喜欢使用的编辑习惯,而它是如何阻碍FANDOM社区用户体验的。

导航的作用

我们无法一贯使用水平列表是由于不同的社区代码运用并不相同,让一些导航框变得非常长。由于Mercury的使用以及替代方法的存在,导航框在手机上并不能正常显示。

这里为你提供一些适用规则:

  • 如果一组文章包含了某一篇文章,那么这篇文章的顺序并不是非常重要的。如果正确分类,文章就能够正确显示。Mercury和首页展示内容工具都支持分类,也适用于wiki代码。在Mercury中,分类可以通过类似文章的形式被展示,而搜索引擎也会通过群组文章中的链接对内容进行抓取,这样用户就可以查找到。
  • 如果一组文章中的一篇文章需要按照顺序进行呈现给读者,那么可以使用讯息框进行呈现。
  • 如果一篇文章只和另外一篇文章有关联,那么可以在移动讯息框中使用<navigation>标签比较合适。

在一些社区上,文章顶端的标签通过子文章页进行移动非常常见,但是对于界面设计来说就变得非常奇怪了。一些情况下,手机上的导航标签会失效,显示空白页。如上所说,在需要和一篇特定文章构建关系的时候,使用讯息框会更加实用。

标签使用

标签如果使用适当,将能够清晰地展示讯息的逻辑结构。但是一些社区并没有正确地使用它。请记住,大量使用定制化代码的社区可能无法有效地使用FANDOM的标签<tabber>功能,但是这些规则是通用的。

标签应该是简单的有效的,不应该互相嵌套。如果您的社区对图像使用标签功能, 特别是在讯息框中,应该考虑在整篇文章中或图片册<gallery>中发布这些图片。在电脑上, 你可以看到一个非常经典的滚动图片册;在手机上,你将看到一个横向滚动并且宽大的图像列,如果带有标题还能够点击进行放大。这样做就是为用户着想,确保使用其他工具比标签功能效果更好。

在内容中使用标签会导致在文章中插入多标签内容。如果将标签删除,标签下的内容应该不受任何影响。如果内容结构需要重新调整,将这部分放在文章章节下或许更实用一些。长文章没有问题,关键在于使用标签对内容进行隐藏是否有必要。

标签展示可以在一篇文章中展示不同的内容。在电脑浏览器中,用户可以自由跳转不同的内容。在手机上,它将展示为不同的内容链接。虽然同样可以查阅内容,搜索引擎一般只会抓取这些链接页面,而不是文章页面本身。正因此,我们建议所有通过标签展示嵌入内容的文章应该将所链接的文章页面作为主文章的子页面,它将会一直出现在文章标题栏的导航中。

数据

许多社区觉得他们的文章只有内容,并没有数据或者讯息框。但是FANDOM认为,如果一篇文章包含标题,一张或多张图片,以及插入一些数据内容,无论结构如何,都会被认为是讯息框。如此看来,不算手机上的移动讯息框,任何带有标题和图片的内容都可视为一种讯息框的表现形式,而导航<navigation>本身也被视为数据。

切分数据可以有效地维护主体框架。使用不同的讯息框模版来展示不同数据是一种非常有效的方式。就好比汽车和飞行器需要明显区分一样。当你的社区不断发展之后,你可能就需要更复杂的区分,比如运动型轿车和卡车,直升飞机和客机的区分一样。

单一的数据应该包含单一的内容。也就是说,不要让数和字或者不同的时间格式混合在一起。

在讯息框中罗列数值是非常常见的。从数据的角度来看,wiki文本列表要比使用逗号或者分号更好地展示不同内容。虽然创建横向列表的形式并没有固定的样式,FANDOM还是有推荐的方法可以使用。当条目同等重要时,列表的方式要比大量堆砌在一起有效的多。

也就是说,

| item1 = 苹果 | item2 = 香蕉

没有下面这样的格式好:

| item = 
* 苹果
* 香蕉

尽管视觉上看不出太大差异,但当你有大量数据需要展示的时候,系统脚本更喜欢罗列的方式,而在不同的装置上查看内容的时候,列表的方式也更加结构清晰。列表可以避免翻译和语言混淆等问题。当然,懂技术的设计者可以使用CSS语言更好地创建自己喜爱的方式。

图片使用

一些用户非常喜欢使用图片,所以就将大量的图片使用单一的图片册进行呈现。但是这样的效果并不好,它会影响阅读者对于有效信息的需求,无法通过一种组织框架结构来完成信息相关性的传达。

适当地对图片进行命名可以提高SEO排名。这样做可以让更多人在网上查找到你的社区。然后,即便是对所有图片命名,一个图片册如果含有大量的图片并不会解决信息有效传达的问题。如果你的单一图片册有一百张图片,命名只能起到一点帮助。那该如何解决这个问题呢?你可以不使用图片册,或者减少图片的使用。将图片直接插入到文章内容处,可以对文字起到辅助阅读的作用。它也可以帮助用户在手机上减少翻阅图片的疲劳感。

这里是关于使用图片的几点提示:

  • 单一的图片不能提高SEO排名,但是可以起到辅助作用。只有充满文字信息的文章内容对读者来说才是有价值的。充满大量图片而没有太多文字信息的网页会被搜索引擎视为低质量内容。
  • 通过图片册简单传达内容。请记住,一个图片册最好是传达一个主题内容,并且具有强烈的相关性。在创建图片册的时候,也可以直接和文章标题建立联系。比如,“食物”文章中建立“食物/图片册”内容。
  • 使用简单的语言命名图片。只有简单有效的文字才会被搜索引擎更好的识别,也才会让更多人查询到。
  • 花些时间撰写你的文章摘要。摘要部分的文字描述可以帮助搜索引擎了解图片和文字之间的相关性,就好比文字是用来描述图片的广告内容一样,这样才会让吸引更多用户点击查阅。

表格

表格在FANDOM上被频繁使用。只要使用恰当,就可以带来非凡的效果。但是请记住,手机狭窄的屏幕并不能让表格实现在电脑上同样的效果。

这里有几点需要注意:

  • 将表格视作为数据表。
  • 在手机上进行横向纵向试阅。
  • 使用表格最多不要超过4列,宽度最大为600px(超过这个范围,用户只能通过手指上下滑动才能查看全部内容)。
  • 不要使用colspanrowspan
  • 不要表格嵌套表格。
  • 表格可以根据“标题”取名。这样命名没有问题。
  • 当标题仅限于某行或者某列的时候,你可以使用scope="col"或者scope="row"
  • 你可以通过CSS调整表格样式。如果你希望用户可以在表格中简单编辑,你可能需要尽量减少"article-table", "WikiaTable", 以及"wikitable"在Wikia.css中的使用。
  • 你也可以使用"mw-collapsed", "mw-collapsible", "noprint", "nowraplinks", "plainlinks"和"sortable"等CSS代码结构。
  • 尽量不要在表格中使用图片,请尽量使用文字内容。如果你一定需要使用游戏中的某些图标,请尽量选择小的图标格式。或者调整它们为22X25像素。这样图片就不会占用太大空间,让表格变得更大。
  • 不要使用模版增减新的行数。因为这样会让服务器不知所措,无法正常显示表格在屏幕上的尺寸。
  • 如果你遵循这些规则,你的表格一般都会正常显示并且发挥作用。你还可以通过调整每行的颜色用来区分不同行的内容。

在FANDOM上的一些社区会大量使用表格。如果不是进行数据展示,请尽量减少表格的使用。这已经成为2004年以来最重要的一个互联网内容发布规则了。

想要构建持久的设计风格有时候需要一些前瞻性。任何社区在接下来的几年里都可以逐渐适应新的设计风格,让它有效地作用于各种装置平台,唯有这样才能吸引更多的用户参与到你的社区当中。将这些逐渐转化为社区的一种新的编辑规定可以帮助你的社区更长远地发展下去。


Chen

Chen Shen

Chen Shen于2013年加入FANDOM,目前任高级社区主管,主要负责英文和中文社区各项支持事务。在加入FANDOM之前,他在电视媒体和时尚行业工作多年。

您使用了广告屏蔽软件!


Wikia通过广告运营为用户提供免费的服务。我们对用户通过嵌入广告屏蔽软件访问网站进行了使用调整。

如果您使用了广告屏蔽软件,将无法使用我们的服务。请您移除广告屏蔽软件,以确保页面正常加载。