本WIKI由NekoAzuki于2020年08月06日担任站长并维护更新,编辑权限开放如遇Chrome浏览器登陆后无法编辑点这里
黑潮WIKI反馈留言板   本WIKI更新计划

BWIKI图文排版进阶心得(不定期更新……)

来自黑潮深海觉醒WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
页面贡献者 :
IJN_Hibiki
本文由 粉彩画_pastel 原创。未经许可,请勿擅自修改,转载请注明出处并附带链接。


BWIKI图文排版进阶心得
本页面介绍的是作者自己从2018年秋至今在WIKI编辑中领悟的一些排版知识,希望对大家有所帮助。



何为排版

排版,是指将文字、图片、表格等各种页面元素进行重新组合、排列,调整它们的大小和位置,使元素错落有致,层次分明,整个页面易于阅读。
在WIKI中,排版并不是像Photoshop等办公软件一样通过操作工具来直观呈现,而是基于代码实现的,这就要求编辑者在对页面排版时需要有一定的WIKI编辑经验,通晓一些基础的HTML语言并能够运用CSS对一些网页元素进行修饰。

排版的原则

在办公软件上可以肆意发挥自己的才能,但在WIKI这个公共平台上则必须遵守规则。通过较长时间的编辑与探索,我总结了几条自己在WIKI排版的原则。我知道自己也常有双标的一面,所以也在藉此告诫,时刻遵守这几条规则。

第一条,其他人的原创页面是不可以随意改动的,如果觉得排版不合自己的心意时,务必在获得原作者允许的情况下再修改。这是维护WIKI良好创作环境的最重要的原则。
越接触排版设计这个领域,越觉得自己的观念跟不上时代。可能自己觉得完美的排版,在他人看来就是不妥的。我现在看自己在两年前所建立的页面,也会觉得以前的设计是那么的幼稚可笑。不要觉得自己的想法一定正确无误,学会尊重他人的想法,不将自己的意愿强加给对方,不要乱动他人的劳动成果,这才是我心目中WIKI编辑者的第一要义。在这个基础上,自己的排版才是有意义的。

第二条,不要在特殊的公共页面使用大规模的CSS样式以及复杂的代码进行个性化排版,应尽可能使用通用的简明样式。如果是自己是页面的主要贡献者则无所谓。海事局每次的活动专题和卫星页面,都会有大量的普通玩家来补充信息,如果使用过于复杂的代码,对看不懂代码的用户而言极不友好,他们很难快速理解和编辑页面;同时这种行为还可能导致页面加载速度变慢,影响用户体验。

第三条,添加内容时最好与页面整体的代码布局保持同步,让源代码本身也保持简洁。观察一个页面的源代码,如果采用按两次回车键来换行,那么添加内容时就用这个方法换行;如果页面采用<br>换行,我们也依此而行。如果页面普遍采用#有序列表而非*无序列表,那么我们也尽量不要添加*无序列表。

第四条,排版是重要的,但不是必须的。因为WIKI是资料站,而非推销网站。由于WIKI的特殊性质,在任何一个页面中,排版的重要性都不如文字。只有在文字量足够丰富的前提下才考虑使用排版增强易读性。我经过观察,发现大部分读者对于WIKI的排版要求并不高,就算一大段文字挤在一块儿,只要突出了有效信息,那么读者也会认可这个页面。
如果一味地追求极致的网页美观设计而忽略了内容的重要,导致文字匮乏,页面空虚,玩家们看完后什么信息也没获得,就等于舍本逐末。

层级

平时我们使用的多级标题就是层级的体现,通常==A==就是写着“A”的二级标题,===B===就是写着“B”的三级标题,也可以用<h2>A</h2><h3>B</h3>等来表示,这里不再赘述。
层级决定了读者在浏览页面时的顺序。页面的起始点、阅读顺序,阅读的优先度等等因素都由层级来影响。标题是正文的梗概,标题与正文要分开便于区分,这样读者才能快速了解正文的大致内容。上下级标题应用不同的尺寸和样式进行区分,例如,一级标题假设其文字大小为100,则二级标题的文字大小可设为60,以此类推。二级标题如果使用了字体加粗,那么三级标题可以取消字体加粗。以上方式都是在对不同层级进行一定的区分,以使读者更容易理解这个页面的阅读逻辑。如果说页面编辑是做菜,那么层级就是菜单,决定了读者先吃什么再喝什么。

手机端适配

我们WIKI是手机游戏资料WIKI,有大量的玩家通过手机查看页面,相较于用电脑浏览,手机浏览显得更加方便快捷。因此,页面排版的重心应该是小屏幕的显示效果。这里就需要提到一个概念,那就是“手机端适配”。由于学艺不精,我目前只能做到一些简单的适配,下面将自己的一点经验分享给大家。

最初我在编写页面的时候使用过一种很蠢很简单的方法,那就是为电脑和手机写两套不同的代码进行排版,然后用class="wiki_hide"有选择的隐藏相应的代码。这样做工作量超级大,费时费力;后来在网上学到了一些html知识,通过不断观察编辑组的编辑行为,逐渐学会了一些特殊的代码,懂得使用一套代码来实现自适应排版。
最为常用的是Bootstrap网格系统。<div class="col-md-x"></div>是比较常用的自适应网格。它可以将页面分为12等分,将每个元素都依照一定的规律安放在这些网格中,形成优美而规整的排版效果。当屏幕像素小于某个值时,元素会自动由横向排布变为竖向排布。
也可以通过CSS的一种响应式布局:@media screen and ( max-width: 像素值 ) {}来实现手机端适配。在不同的浏览器宽度下,通过监测宽度来选择CSS样式。如果当浏览器的可视区域小于980px时让页面字号变小,则可以这样写: @media screen and ( max-width: 980px ) {#content {font-size: 12px; }} CSS响应式布局简单又好用,而且可供挖掘的潜力很大,这种方法可以轻松地将一些样式做出区分。

文字属性

文字是我们浏览WIKI时首先关注的东西。文字象征信息,如何调整文字属性使其更容易阅读就是排版的工作。
首先说说字体颜色。一般来说我不推荐使用饱和度过高、明度过高或者过低的颜色,比如鲜红色纯绿色等,这些颜色太“明亮”了,给人以强烈的侵略感,就像一小部分激进分子,在安静的人群中显得格格不入。按照我的喜好,正文应该使用#404040色号,这种颜色是比较温和的深灰色,对于手机端浏览的用户,这种颜色可以保护他们的视力。所有颜色的饱和度都应该下降一个档次,避免出现刺目的情况。
第二,说说字体大小。普通的字体是14px,手机端我认为调到12.5至13px较为合适。注意,手机端不要含有超过1.5em,即21px的字体,否则过大的文字将会挤压页面,影响美观。
第三,文字间距。WIKI默认的字间距都是0,即紧密排列文字,最大化利用空间。使用letter-spacing可以控制字间距。在一个页面中我首次尝试调大一些字间距,结果发现效果很好,页面整体给人的感观上去了,看得很舒服。我推荐0.07em的字间距,0.05em以下的字间距效果甚微,0.12em的字间距我认为是极限,如果继续调大的话,就 会 变 得 很 奇 怪 了 。
第四,居中属性text-align:center不建议随便使用,不是所有文字都适合居中,居中适合的情景是重要的单行文字或者需要抒情的文字,对于普通的文字就默认靠左就好。
第五,不建议过多使用黑幕{{黑幕|遮挡的文字}},原因是一大块纯黑色块插在段落中,就像是作文上乱七八糟的圈圈涂改,很影响观感。说实话,把黑色改成类似于刮刮乐的灰色我的接受度能高一点,目前这种黑幕本人实在是欣赏不来。
第六,行高也是影响观感的重要因素。行高越大,文章的情感越强烈,反之,越倾向于保守。推荐的行高一般在1.5em至1.8em左右,字号越小,行高提升所带来的空气感越强。1.8em以就是诗歌才会用到的行高了,我们的WIKI页面很少用到。

class="row"

用row将所有的col包裹起来,就可以制作一个简单的响应式布局了。注意,container容器有15px的内边距,col也有15px的内边距,在电脑端无影响,但是在手机端,两者配合会导致内容和浏览器边框的距离拉宽,上下文就显得有些凹凸不平。事实上在Mediawiki:Common.CSS里也能发现,早期的管理员也注意到了这个问题,并设置了一个margin-left: -3px; margin-right: -3px来抵消边距,但是很遗憾,3px还不足以完全抵消row的边距,须是margin-left: -15px; margin-right: -15px才能完全抵消。

统一性

统一性是我认为WIKI排版最重要的一条思想之一,它指的是在排版的过程中,用到的所有元素样式都要有内在的共同点或者联系,让版面看上去整洁有序,风格统一,避免版式混乱。在实际应用中举例,标签<label>的样式做到宽度一致,字号一致;正文的分割思路相互联系;文字方向统一对齐;图片的大小做到一致,等等。
切忌使用使用不合氛围的样式,过度做变化会丧失排版的格调,使页面不易阅读。正确的做法是通过在单调沉静的页面中做出少量的变化,表现出静中有动。将图片按照一定的规律排列,展现律动的舒适感。

正面案例 反面案例
█ □ □ □ □ □ █
□ □ □ □ □ □ □
□ □ □ □ □ □ □
□ □ □ □ □ □ □
□ □ □ □ □ □ □
█ □ □ □ □ □ █
█ ● █ █ ☆ █ ◇
█ █ ☆ █ █ █ █
█ █ █ █ █ █ ◇
█ █ ▲ █ █ █ █
█ █ █ █ ● ● ○
█ █ █ █ █ ★ █

分割线的用法

<hr>可以迅速生成一道横向分割线。但是有个我想不通的问题是,有时候这道分割线会唐突变粗,与排版思路格格不入,刷新一下页面分割线又变细了。为避免这种情况出现,另一种思路是在div设置border-bottom,这样的分割线粗细不会改变。
分割线分为横向和竖向两种(斜线一般不考虑),最常用的是横向分割线,经过试验,我建议竖线不要在手机端使用,否则会产生令人厌恶的黑边;可以在电脑端适当使用竖线来强化区分感,营造报纸刊物的理性氛围。

留白的艺术

留白是什么:“留白是为了给文字以呼吸的空间。”
留白属于较为高级的排版,这是一类源远流长的艺术创想,精妙的留白可以让读者的视线集中到你所突出的文字上,留白越多,文字就越是明显,读者的注意力就越集中。而愚钝的留白只会增加无用的空白区域,犹如未修补的破洞让人烦躁。完全不留白则是对页面秩序的破坏,文字挤得满满当当,一点空白都不给,如同早班的地铁,给人拥挤的不适感。
普通的页面无需留白。手机端留白主要是注意容器两侧的边距,相当部分手机的屏幕边缘显示质量不如屏幕中心,为避免边缘文字看不清,因此需要在两侧留出至少5px的边距。除此之外,手机端刻意留白的作用不大,因为手机是从上而下阅读的,而通过<br><br>的换行方式也能做到分割的作用。留白的用处在WIKI上主要体现在电脑端阅读文字量、图片量巨大的页面。加入一定的空白,可使整个页面错落有致,并调节读者阅读页面的速度。
例如,表格文字较少时,可以设置成一半宽度style="width: 50%",不需要占满宽度,使表格显得紧密修长;在文本框设置内边距padding和外边距margin,保持合适的距离,划出几条人行道,引导视线平稳地穿过字里行间。

标签<label>

WIKI默认的span标签样式不好看,它的边距太小了,直接挤在文字边上,而且标签内文字又小,很难看清。我的习惯是用CSS将标签样式调整。

正面案例 反面案例

与文字有一定的间隔
与文字有一定的间隔这是一个标签与文字有一定的间隔

紧紧贴着文字
紧紧贴着文字这是一个标签紧紧贴着文字


黄金分割的误区

大家或多或少都对“黄金分割”这个概念有一定的了解,它是一个美学概念,这里不再赘述。请注意,WIK排版不要刻意使用黄金分割!!每个人的心中都有属于自己的美学秤杆,这个秤杆与黄金分割无关。不要迷信黄金分割。黄金分割是一个从众多实践经验中提炼出来的数字,而不是美的标准。
在WIKI排版中,适当避免将表格宽度设置成61.8%,或者将文字设置成0.618的倍数等等,因为太过刻意反而失却了黄金分割的内涵。你的排版应该展现给真正的人,而不是展示给机器。我的建议是,将黄金分割作为大众参考系的一种,依靠自己的眼睛去排版,去设计,遵循自己的直觉,展现天然。

滚动条

在WIKI,我们可以使用overflow属性单独为一个元素添加滚动条。元素需要设置宽度和高度,这样滚动条才会生效。
滚动条的适用情景有一定的区别。电脑端浏览通常会配一个鼠标,鼠标的滚轮很方便,所以电脑端页面上下滚动时难度很小,但是左右滚动时就需要用鼠标点击滚动条并拖拽,操作步骤要麻烦一些。手机端浏览依靠的是手指触摸,相较于电脑端,手机端的上下左右滚动都很方便。但是由于大多数页面是从上往下阅读的,如果在其中插入一段上下滚动的元素,那么跳过这个元素就变得麻烦,需要我们不触碰该元素来拖动页面。
综上,我得出几个结论:
一、手机端不要过多使用上下滚动条,否则会造成阅读体验下降。使用上下滚动条时需要在两侧留出边距,元素高度不要超过整个页面高度的50%,使读者更容易拖动页面;可以适当使用左右滚动条增强可读性;
二、电脑端需要克制使用左右滚动条,不要滥用,否则会增加鼠标操作量。可以充分利用上下滚动条增强可读性。