文章最后更新时间：2022年08月16日已超过622天没有更新。
BWIKI图文排版进阶心得
何为排版
排版，是指将文字、图片、表格等各种页面元素进行重新组合、排列，调整它们的大小和位置，使元素错落有致，层次分明，整个页面易于阅读。提高页面的可读性是排版的核心思想。
在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，以此类推。二级标题如果使用了字体加粗，那么三级标题可以取消字体加粗。以上方式都是在对不同层级进行一定的区分，以使读者更容易理解这个页面的阅读逻辑。如果说页面编辑是做菜，那么层级就是菜单，决定了读者先吃什么再喝什么。
| 正面案例 | 反面案例 |
|---|---|
| 一、舰载机 1.1 水上机
| 舰载机 |
手机端适配
我们碧蓝航线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响应式布局简单又好用，而且可供挖掘的潜力很大，这种方法可以轻松地将一些样式做出区分。
浏览器适配
比手机端适配更为困难的是浏览器适配。浏览器厂商群雄并起，种类繁多，目前市面上占据主要份额的浏览器主要有360、火狐、谷歌、Opera、IE等。这些浏览器或使用不同的内核，或采用不同的CSS解释方法，导致其显示页面的方式也有着微妙的区别。这种差异让排版人士难以接受，却又无可奈何。
对于各浏览器的差异，我的看法是：火狐浏览器显示的图片色彩柔和，文字间距更大，scroll滚动条不敏感，动画效果比谷歌要差一些；谷歌浏览器的动画效果很好，非常流畅，图片色彩更鲜艳，文字间距较小，scroll滚动条敏感，但是谷歌有很多自己的“规矩”，兼容度不高，排版的自由度比火狐要低一些。background-attachment: fixed，这个CSS属性的作用是固定背景图像。在火狐浏览器，这个属性可以单独使用，不需要配合background-size；而到了谷歌浏览器，情况又出现了区别，background-attachment: fixed需要去掉，否则background-size将会失效。诸如此类的差别让人无所适从，让人深刻地意识到缺乏统一标准去行动是一件多么令人痛苦的事情。
如果要做到极致的排版，有必要通过CSS条件判断浏览器种类来选择合适的属性。@-moz-document url-prefix() {}是火狐浏览器的查询式，@media screen and (-webkit-min-device-pixel-ratio:0) {}是谷歌浏览器的查询式，如果要让某些代码在特定浏览器生效，可以使用这种方法。
当我们使用transfrom制作CSS动画的时候，webkit内核的谷歌浏览器和edge浏览器可能出现字体模糊发虚的问题，这是因为其独特的字体渲染引擎导致的。想要避免这个问题有点麻烦，目前我的解决方法是：将容器的opacity（透明度）调整为1。另外，将容器宽度和高度设置为偶数也有一定效果。
文字属性
文字是我们浏览WIKI时首先关注的东西。文字象征信息，如何调整文字属性使其更容易阅读就是排版的工作。
首先说说字体颜色。一般来说我不推荐使用饱和度过高、明度过高或者过低的颜色，比如鲜红色、纯绿色等，这些颜色太“明亮”了，给人以强烈的侵略感，就像一小部分激进分子，在安静的人群中显得格格不入。按照我的喜好，正文应该使用#404040色号，这种颜色是比较温和的深灰色，对于手机端浏览的用户，这种颜色可以保护他们的视力。所有颜色的饱和度都应该下降一个档次，避免出现刺目的情况。
第二，说说字体大小。普通的字体是14px，手机端我认为调到12.5至13px较为合适。注意，手机端不要含有超过1.5em，即21px的字体，否则过大的文字将会挤压页面，影响美观。
第三，文字间距。WIKI默认的字间距都是0，即紧密排列文字，最大化利用空间。使用letter-spacing可以控制字间距。在碧蓝航线Crosswave/主线剧情中我首次尝试调大一些字间距，结果发现效果很好，页面整体给人的感观上去了，看得很舒服。我推荐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％，使读者更容易拖动页面；可以适当使用左右滚动条增强可读性；
二、电脑端需要克制使用左右滚动条，不要滥用，否则会增加鼠标操作量。可以充分利用上下滚动条增强可读性。
| 手机端浏览双滚动条的情景模拟 |
|---|
空文字
空文字
空文字 |
小图标模板的一些思考
我们知道，小图标模板可以生成舰船和装备的图标，被广泛应用于各类页面中。通过观察模板代码可以发现，图片的大小被限制在30px，外框为带阴影的圆角矩形，图片留了2px的右边距。由于WIKI页面普遍使用的是1.5em的行间距，而1.5em = 21px < 30px，因此30px的图片会将行间距撑宽，同时多个小图标会紧贴在一起，影响排版。如果尝试将图片缩至行间距等宽大小，又会导致图片过于模糊，造成难以看清的问题。
所以，我的习惯是减少小图标模板的使用。如果必须使用小图标模板，我的建议是拉大行间距，同时设置CSS如下：span.xtb-image {padding: 2px; font-size:12.5px} 这样做是为了避免小图标破坏行间距的规整，上下文留出一定的空间。尤其是使用小图标2模板（装备）时，装备的长文本不断行显示会留下无用的空白，需要缩减文字大小以使页面更加紧凑。
锚点の痛
首先介绍锚点的定义。锚点是一种特殊的超链接，相当于快速定位器，设置锚点后页面就多一个标记，在长页面中可以设置多个锚点帮助读者快速定位需要的内容，提升用户体验。WIKI最常见的锚点就是目录，通过目录快速定位到某个具体的标题，尤为方便。
本页面主要讨论的是页面内的锚点访问，设置外链有更简便的用法，所以不做论述。锚点的设置需要“绳子”和“钉子”。“绳子”就是访问锚点的入口，“绳子”的写法是<a href="#123"></a>或者[[#123|]]，“钉子”的写法则是<a id="123"></a>或者<div id="123"></div>。锚点依靠id来识别，所以务必保证“绳子”与“钉子”的id一致，这样才能连通两者。需注意，id不能在同一页面重复，尽量不要用中文作为id。锚点设置完成后，当我们点击“绳子”，就会跳转到“钉子”所处的位置。
两类常用的锚点是：<a href="#top"></a>跳到页面顶部；<a href="#toc"></a>跳到目录。
使用锚点也有缺陷。当使用电脑端/平板端浏览WIKI时，在页面上方会出现悬浮导航栏（sidebar）。这个导航栏是用绝对定位实现的，它脱离了文档流，当我们使用锚点时，这个导航栏就会遮住标题内容，造成一定的不便。一种可行的方法是调整锚点的定位，将锚点上移，使标题恰好不被导航栏挡住。但是我并不赞成这种做法，因为会扰乱代码的规整。另一种做法是让所有锚点增加一个top属性，不过目前我还没有找出实现该思路的代码。
目录
目录（table of contents，TOC）是整合各章节锚点，引导、检索阅读的一种工具。当WIKI页面中的章节标题超过3个时，页面会在首个标题的顶部显示一个默认样式的目录。章节标题低于或等于3个则不会自动显示目录。使用__TOC__代码可以在页面中强制生成一个目录，并放置在__TOC__所处的位置上；__NOTOC__代码可以隐藏目录。若同时使用两者，则依然显示目录。
模板如果包含有目录，引用模板的页面并不会显示模板的目录。
使用广泛的是默认样式的目录，另外还有一种悬浮目录，前辈已经将其代码整合进模板{{悬浮目录}}供大家使用。这种目录隐藏在页面左边，通过鼠标移过可以使目录弹出。它的优点是契合长页面的浏览习惯，可以方便地跳转到某一章节。缺点是无法在手机端使用。我通过一点摸索，优化了悬浮目录的显示方式，使其在多平台都能正常显示。具体代码在碧蓝航线Crosswave/主线剧情可以找到。优化悬浮目录的要点在于：一、目录不能遮挡正文部分的正常显示；二、能够对不同层级的章节标题进行一定的样式区分；三、务必使用CSS对不同屏幕分辨率判定，重点优化手机端的目录显示；四、根据实际需求取消目录编号的显示，使目录更加清爽简洁。
密恐注意！
使用CSS代码可以让我们在页面中创建圆形图案：.point {display: block; color: #ff0; width: 20px; height: 20px; border-radius: 10px} 主要思路是先构建出一个边长为x的正方形，通过x/2的圆角修饰将其变为圆形。当我们在页面里大量加入圆形图案时，就会遇到一个有点别扭的问题：密集的圆形图案可能会给读者带来不适的阅读体验，也就是我们常说的“密集恐惧”。
举个例子，多个白底黑边的圆形容易让人联想到脓疮，黑色的边框如同坏死的结疤——作为人类，我们会先天性排斥这种图案，因为它象征着疾病和瘟疫。所以，我们在排版中需要注意以下几点：1. 避免过多圆形图案挤在一起；2. 使用其他图形，如正方形、三角形或者图片代替圆形，以消除或减轻读者的不适感；3. 将圆形的描边去掉，或者使用其他颜色代替。4. 减低图案的透明度，适当添加阴影，扭转人们的错误联想，引导到“图钉”、“贴纸”等中性的事物上。
动画正反馈
动画排版是眼睛的一道甜点。
通常而言，我们的排版工作都是以静态的文字和其他元素为主，但如果能够恰当地运用动画效果，有时候能发挥出画龙点睛之妙用，大幅提升页面整体的易用性和反馈度。
举个例子：
动态按钮在鼠标接触和点击的时候会产生变化，这就是“正反馈”。这些变化在视觉上给予读者一定的刺激，能够满足读者的控制欲。这些正反馈让读者收到了一个讯息“我按下了这个按钮并起到了应有的效果”，这很重要。反观另一个按钮，它是静态的，无论是点击还是移过都无法让按钮变化，后果是让读者无法了解这个按钮到底起没起到作用——“我按下它了吗？然后呢？什么都没发生？”焦躁和疑惑油然而生，这是排版的大忌。我们应当尽量避免。
表格
| 表格（右浮动示例） | |
|---|---|
| 文字 | 文字 |
| 文字 | 文字 |
对表格添加浮动样式float:left; float:right，可使表格向左/向右浮动。电脑端使用浮动可以让表格与文字形成和谐的对称布局，但要注意的是，手机端完全无法体现浮动带来的排版效果，反而会使表格错位，影响阅读。所以我们应该额外加上：@media only screen and (max-width:759px){
.wikitable {
width:100%;
float:none;
}在手机端清除表格浮动。
当表格的列数大于4或5，手机端的文字将会被挤压，影响观感（反面案例见页面：舰娘定位筛选）。用<div style="overflow-x:auto">将表格包裹起来</div>，同时为列设定一个最小宽度值（如 min-width:4em），可以让表格实现左右拖动，并保证足够的列宽，从而提升可读性。
举例代码如下：
<div style="overflow-x:auto">
{| class="wikitable"
! style="min-width:4em" | 表头1 !! style="min-width:4em" | 表头2
|-
| 内容1 || 内容2
|}
</div>关于折叠面板的新发现
先来看一段模板:折叠面板的代码：
{{折叠面板|开始}}
{{折叠面板|标题=A|选项=1|主框=1|样式=primary|展开=是}}
内容
{{折叠面板|内容结束}}
{{折叠面板|结束}}使用该模板可以构建简单的折叠栏，并允许用户在其中输入内容。
我在无意间发现，将外层框架代码{{折叠面板|开始}}{{折叠面板|结束}}删除，里面的代码保留，折叠功能和依然生效，呈现的外观也基本一致，只是在一些细节上出现了些许差异。删除外层框架前，点击多个折叠栏时不会同时打开，且折叠栏之间排布较为紧密；删除外层框架后，点击多个折叠栏时可以同时展开，且折叠栏之间排布较为宽松。除此之外没有其他功能上的差异。
由此引申出一个思考：外层框架是否需要删除，以及折叠栏是否需要展开，都需要视页面的实际情况而定。如果单个页面的折叠面板不超过3个，且折叠栏的内容量较少，那么就不删除外层框架。如果超过3个，且折叠栏的内容量较多，我建议删除外层框架。一个典型案例是影画相关，当点击第一个折叠栏，然后再点击最后一个折叠栏时，由于第一个折叠栏同步收起，会导致页面突然往下滑动，影响观感。删除外层框架后点击任意一个折叠栏时相对位置都是固定的，就能避免出现上述状况。
还没有评论，来说两句吧...