从博客园自定义设计浅谈人机交互的软件工程方法

这篇文章的内容和结构可能不那么正式，随笔成文仓促，还请见谅。

本学期的《软件工程》课程需要写一份文献综述报告，内容是“就如何利用面向对象的软件开发方法来开发软件，谈自己的心得体会”。我稍微想了想，现在已经不是求伯君那个程序员英雄主义年代了，软件开发更多地强调的是团队合作与工程系统化。作为一个没有实际软件开发经验的学生，让我看几篇理论文献后去谈理解，那不是扯犊子吗？《人月神话》、《代码大全2》、《代码整洁之道》等书都还没看过，因为毫无经验的新手开发者去看这些书就好像让一个刚学会C语言的朋友去看《算法导论》一样白痴，至少得熟悉各种数据结构了吧。难道这门课程又要耻辱地水一份期末作业便完事了吗？

再仔细想了想，还真有些与软件工程相关的东西可写。前段时间去琢磨了一下人机交互（Human-Computer Interaction，缩写：HCI）方向的东西——“交互”不就是软件工程中很重要的一个环节吗？如果一个客户服务系统写出来，后台的稳定性很好，但是用户的交互体验极差，谁还会愿意去使用它呢？我在《记忆是值得留下的东西》这篇博文中指出，博客设计是网站设计的一种，而网站其实就是一种软件。我们自己的个人博客，是需要与读者（包括自己在内）进行交互的，在确保博文内容质量达标的同时，读者的阅读体验很大一部分是由整个博客的界面与交互设计决定的。所以索性借此次机会，讲一下我在自己的博客设计中体现出的软件工程方法，当然重点会倾向于人机交互部分（设计原则；交互模式；可视化设计；交互式设计）。

与传统的软件工程从 0 至 1 进行开发的情况有所不同，用户在博客园（Cnblogs）使用的博客系统有着完整的后台数据库与管理员面板，而向用户开放的接口则是允许向自己的博客添加页面定制的 HTML/CSS/JS 代码。只要你基于某一原始的博客皮肤进行合理设计，就能够尽可能地实现想要的页面效果。所以问题无非变成了：“给你如下带有皮肤的博客，请你根据软件工程中的人机交互原则对其进行优化。”

上图是我在博客园中使用的皮肤 SimpleMemory 预览（并不是我的博客），选择这个皮肤的原因很简单，它原始的页面自定义元素不多，而且原始逻辑十分简单。调用开发者工具查看网页的HTML代码，整个网页的逻辑结构大致如下：网站的 body 部分主体是 id 为 home 的 div 层，所有的原生内容都在该容器内，一般来说不对 home 层进行全局修改。最上方是 header 层，里面包括 blogTitle 和 navigator 两部分，分别对应于博客标题与导航栏。在header 下方是 main 层，main 层的左侧部分是 mainContent 层，即主体内容，右侧是 sidebar 层，即侧边栏。最下方是 footer 层，一般用于显示作者和版权信息。学习过前端基础知识的人此时在脑海中应该有了一个初步的页面架构的轮廓，后续的修改则是需要以此为基础结构进行的（注意基础的 div 层内嵌套着更多的子层）。由于这些层的 id 属性大部分是雷打不动的，所以在进行 CSS 样式修改的时候也变得十分方便。在开始改造前先说好，这篇文章中只讲理论和方法，具体的代码怎么写就不贴出来了。

Robin Williams 在他的《The Non-Designer's Design Book》一书中提到了设计排版的四大原则：亲密性（Proximity）、对齐（Alignment）、重复（Repetition）和对比（Contrast）。这一概念如今被很多人认可，尤其是许多高手在制作精美幻灯片的时候会以此为设计准则，博客界面设计也不例外。我们不妨在改造时运用一下这四大原则。

亲密性指的是彼此相关的项应当靠近，归组在一起，这样他们就会成为一个视觉单元，而不是孤立的元素。在博客园的侧边栏中，类似于“随笔档案”的类目下，各项以列表 inline 的形式逐行排列，不但使用了很多空间，而且有很大比例的视觉区域被浪费，看起来会十分奇怪。

在上面的图片中，左侧主体的文章内容已经展示完毕，而由于“随笔档案”项目过多导致了网页的整体页面布局过长，十分不美观。一个比较好的改进策略是，根据亲密性原则，使它们以块结构 block 组织在一起，可以最大化地利用容器的宽度，减少高度空间上的占用，如下所示。

这张图也体现出了其它三个设计原则。对齐原则指的是每个元素应当与页面上的另一个元素有某种视觉联系，这样能建立一种清晰、精巧而清爽的外观。重复原则是使设计中的视觉元素在作品中重复出现，增加条理性和统一性。另外，你会发现博客页面中的柴犬图片部分（暖色调）与文字内容部分（冷色调）进行对比，这是为了避免页面上的元素太过相似。如果我将暖色调全部去除，整个视觉效果则失去了特点：

如果我将 Accepted Doge 中的 A 改为黑色字体，整个页面将变得更加单调了。颜色对比只是对比原则的实现方法之一，你会发现博文中的图片都添加了 shadow 效果，目的也是增强层次对比。在我的博客中，为了增强视觉对比效果，插入的代码统一采用黑色背景，这样更有利于突出重点：

而在页面排版设计时，页面的宽度，段落与字体的设置也是非常讲究的。有些人的博客喜欢将宽度设置得很大，这样其实不利于阅读。就像程序员写代码一样，一行的代码数量不易过多，不然在阅读时两行之间视觉焦点的移动过大，既不利于准确定位，也容易造成疲劳。读者长期盯着静态的页面进行阅读，也是很容易变得乏味的，因此可以在页面中添加一些动态的 canvas 背景，前提是不对阅读产生干扰。同时需要注意博客页面在不同设备上的呈现效果，采用响应式布局是一种很好的策略。

有不少博客园的文章讨论了博客园可以如何美化，却不清楚该去如何美化。这就犹如掌握了页面设计的 “术”，却没有掌握设计之 “道”。胡乱堆砌功能产生的界面绝对算不上是一种艺术。

以上提到的内容仅体现了博客设计的可视化设计方面，在实际情况中，我们还会因为一些需求而做一些交互式设计。讲到交互式设计，不得不承认很多人为了炫技而做了太多华而不实的页面交互，这又何必呢？在我的博客中，主要做了以下交互功能（完全基于 CSS/JS/jQuery 与一些库）：

1. 顶部多级导航栏功能（向下滚动时隐藏，向上移动时显示）；
2. 带有多级标题的博文，右侧可弹出自动生成的章节目录；
3. 返回顶部（右下方淡入淡出）与阅读进度显示功能（置于顶部）；
4. 夜间模式，晚上7点以后降低亮度（支持 Alt + Z / X / ↑ / ↓ 手动调整）；
5. 部分页面元素的浮动提示功能（直接显示的话太占用空间）；
6. 背景音乐功能，针对长篇文章阅读使用与其它用途；
7. 自定义鼠标指针，hover 超链接元素时自动变色作为视觉提示。

以上交互功能有一个很明显的特点，那便是只在需要时发生交互，最终目的是为了保持博客内容的简约，使人能够专注于主体内容的阅读。同时注意，在添加新功能时，要注意在不同设备上的兼容性，我这儿就有一个功能存在 Bug，自动生成的章节目录是在变为 hover 属性时自动向左弹出的，然而 iPad 并不支持这一功能。

我一直认为软件工程的首要目的是为了尽可能满足用户需求，但不仅仅是功能需求，如今交互的需求也变得如此重要，同时我们也需要注意很多的细节。譬如在加载背景音乐的时候，是每刷新一次页面就重新加载一次吗？这样会造成流量的浪费！如果同时打开了多个页面的音乐播放器，它们之间是否需要具有互斥属性呢？夜间模式的功能如果被用户手动调整了亮度值，如果在切换不同页面的时候保持这个属性？（提示：我的解决方法基于 Cookies）哪些功能是多余的，哪些功能是基于读者角度强烈需求的？太多功能的添加会减缓页面的加载速度，增加用户的等待时间... 如何进行轻量级加载？JS 脚本加载的优先级如何确定？为什么目录在右上角，而返回顶部图标在右下角？ 这些问题都需要多加考虑。

说到这里，你会发现我写了许多关于 “设计” 的内容，因为设计在生活中无处不在。至于现代软件工程中所体现出的面向对象的开发特性，我只能等积累了一定的开发经验后再来谈论自己的体会了。（毕竟学校用的教材大纲采用的是结构化方法，和面向对象方法有所不同。）如果你刚学会了一些前端的基础知识，苦于从零开始写一个页面太难，不妨试试将博客园的美化作为一个练手项目，考虑前面提到的设计原则，花时间打磨，一定会有很棒的收获！

顺便提一下，我去除了博客园中的广告显示 ，纯粹是为了改善阅读体验，主站管理员可以找我索取对应损失的广告费。

转载于:https://www.cnblogs.com/accepteddoge/p/CNBLOGS-and-Software-Engineering.html