Wikia

Wikia中文

评论2

移动化讯息框如何改变社区样式

Cal-Boy 2016年8月1日 用户博客:Cal-Boy

转换到移动化讯息框最显著的一个特性就是它将让你的整个社区看上去非常不一样。听起来似乎让人有些费解,但是一旦开始使用,你将看到质的飞跃。作为大多数文章页上的主要元素,讯息框一般会最先抓住读者的眼球 - 它是体现一个社区设计的核心要素。

CSSLogo.png

你应该留意中间的那个“S”

你可能并不知道CSS中的一个字母“S”取自英文的“Style”(样式)缩写。这就像是购买一顶帽子时选颜色一样,样式都是非常随机的。特别是当使用讯息框时,如果你将所有系统(System)的设计元素进行统一,那就会变的异常简单。毕竟,用一把刷子随意地刷上一些颜色,并不能足以证明你就是一位艺术家。

对每个讯息框使用不同的颜色样式是一件非常有趣的事情。但是随着你的社区逐步发展,颜色代码的选取使用几率就变的逐渐减小。即便颜色代码具有无限多的选择,人眼能够感知到的或许也就只有那么几种而已。

所以,如果你希望能够选取某种特定的颜色代码,你应该使用一把更大的刷子。将这些颜色使用在有关一些重大的主题上,而不是一些微乎其微的主题中。比如,你应该对所有的食物使用一种颜色,而不是对肉类使用一种颜色,对蔬菜使用一种另颜色,对甜品再使用第三种颜色。

比如,英文的星球大战社区将6个讯息框统一群组在astro 主题下:

	/* Constellation, Galaxy, Nebula, Sector, System, Trade_route */
	.pi-theme-astro .pi-title { background-color: #004466; }
	.pi-theme-astro .pi-navigation { background-color: #004466; }
	.pi-theme-astro .pi-navigation a { color: white; }
	.pi-theme-astro .pi-header { background-color: #BBCCDD; }

在这里,将astro 主题用于描述所有星球大战的空间器,社区使用颜色代码#004466#BBCCDD来传递有效的信息。

设想一下。如果你使用同一种颜色在所有的讯息框上,你的编辑将会变的更加简单 - 如果你能够使用一种和导航栏颜色差不多的颜色那将是再好不过了。花很多时间在一个单一的讯息框样式上,长远来讲是得不偿失。

ColorEye.png

确定你选取的颜色可以让所有人识别

同样,你的讯息框必须具有可读性。但是如果你选择的背景颜色和字体颜色的对比非常不明显甚至是相近,就可能造成用户阅读困难。点击这里你可以查看一些颜色对比方面的知识。你也可以使用颜色对比分析器来帮助选取最佳的对比性颜色。

如果你在寻找设计灵感,或是编码方面的创意,最好的方法就是去一些已经使用卓越讯息框的社区进行模仿和学习。尝试阅读CSS并且有效地进行再次使用。你可以在你的沙盒社区中进行测试。然后,当你彻底掌握了如何更好地使用CSS编辑讯息框以后,再将其使用在你的社区中。即便用的不对,你也可以修改错误的地方。

定制化主题

最近,Wikia和两个社区共同对用户主题体验进行了一些尝试。我们的目标就是在变化之后,尽可能地贴近原有的主题样式。同时,我们还打破了原有的一些主题样式,重新构建了阅读性更强的标题栏。

重复构建已经存在的样式

行尸走肉社区就是其中的一个,我们重新对社区的讯息框进行调整,做到尽量和原有的讯息框实现匹配。这个社区上的一些讯息框是从其他社区直接复制过来的,并不和其他的讯息框匹配。然而,通过CSS建立新的主题之后,所有的讯息框都进行了自动调整 – 这避免了重写代码一个步骤。

Tyreese-nPI.png

非移动化讯息框

Tyreese-PI.png

移动化讯息框

进行一些更改

相比之下,Borderlands维基社区则是选用了Europa主题,它是我们预设的两种讯息框主题样式之一。它使用社区已经存在的主题颜色,不需要编写任何CSS代码就可以进行定制化。它在电脑桌面和手机的浏览器中都呈现最佳,对于新出现的一些手触式电子设备也同样适用。

当然,Europa可以通过CSS进行更改,Borderlands维基社区就在原有预设的主题样式上进行了更改。即便如此,社区本身并没有对Europa样式元素进行任何修改。

HB-nPI.png

非移动化讯息框

HB-PI.png

调整过的Europa样式

总结

你可以随意对每个讯息框的样式进行独立地调整,不过你可以更加灵活地使用它。尽量让你的讯息框样式具有统一性,这样做可以让每个独立的讯息框都能够适用。如果不这样做,你将面临非常复杂的CSS编写,终将会对今后的维护造成困难。这里就是一个非常复杂的主题样式 – 它拥有超过了2000行的代码编辑!

其实发生这种情况是可以理解的。随着社区的发展,越来越多的讯息框被不断地添加到社区中。在2009年帮助构建社区的人可能和现在构建社区的人完全具有不同的思路。就好像是在现代的社区中建造古老的建筑一样,你看到过去的建筑越多,就能够发现越多不同的样式。因此,使用移动化讯息框是对旧样式的一种革新,代替的是一种更加全新的、大胆的和统一的设计。否则,你面临的可能就是需要不断维护旧的讯息框,既费时间又费经历。

更多维基

随机维基