重新设计StevePavlina.com网站 — 第4部分

此文是共有9部分的《重新设计StevePavlina.com网站》系列文章的第4部分。

细节规划

到了此时,我必须对网站做些细节规划。由于网站不可避免地要重新设计,多年来我一直在积累各种想法点子,分散记录在好几份文档里。它们包括我自己的点子,还有读者们的反馈建议。因为知道某天要处理这个设计项目,自己以后会需要那些想法点子,所以当它们出现时,我便将所有点子记了下来。现在是时候来做最后的整理工作了。

这项工作很可能用了好几天时间,因为那些想法点子有大概30来页,大多是以随意顺序做的记录。有些点子重复记录了不止一次。我花时间进行仔细整理,将它们安排在一个结构框架内,并做出优先排序。若以落实这些想法点子需要的时长做判断,我很可能至少有够忙一年的想法内容,所以自己知道,不可能真把它们全部探索完毕。有些点子还彼此冲突,我得做些取舍决定。

我使用Scrivener软件对整个项目进行管理组织和规划。在开始这个项目几周前,我在2015年7月买了Scrivener软件。对于管理组织我现有的全部想法,它似乎是很合适的工具。我也一直在用它处理其他工作项目,而且使用效果挺不错。这款软件功能丰富,有许多我都并未使用,但其核心功能与我曾用的名为ActionOutline的PC程序十分相像。遗憾的是,ActionOutline已经停止更新多年。从技术上讲,Scrivener是为帮助写作者创作书籍或剧本的一款程序,但我发现它在总体项目管理上也非常有用。

我开始把各种想法点子复制粘贴到Scrivener,并按照各个点子对应的网站不同部分,进行逻辑排序:包括总体设计、菜单、页眉、页脚、插件、管理、安全、维护、版面、颜色、搜索、存档、漏洞修补、博客文章、产品、活动、创建新页面、邮件列表、高级功能等。

随着编辑这份列表,我还想出其他一些点子,并把它们也加入不断进化完善的设计大纲里。

当最终完成项目大纲的初拟草稿时,我不禁感叹,并在脑中想:这真是好多工作啊!即使砍掉大部分可选功能,这个项目也明显要花数月才能实施完成。

不过当时是我处理这种大型项目的好时机,因为自己去年一直在努力提升个人耐心和毅力。2015年早些时候,我完成了一些艰难的个人项目,它们需要大量韧性才能实现。所以自己感觉做好了准备,接着处理一个面向公众的工作项目。

整个项目进展期间,我会不断回归参考在Scrivener里创作的大纲结构,删掉完成的项目,并加入后来出现的新待做事项。它并非一个按时间来排序工作项目的大纲,因为我拥有足够的时间灵活度,几乎能以任何顺序处理整个项目不同部分的工作。不过我可以根据大纲评估进程,跟踪了解自己仍需完成什么工作。它也非一份周密完善的大纲,但肯定足以让我开始动手工作。

或许这份大纲的最大好处,就是能让我免受分心干扰。无论何时想出与手头工作无关的想法点子,我都可以迅速将它们添加到大纲里,晚点再去考虑,然后回到当前正忙于处理的任务上。

菜单

我首先落实完成的事项之一,就是新的菜单结构。因为喜欢其他网站的下拉菜单功能,我知道自己也会在新网站上使用这项功能。由于下拉菜单在软件领域广泛存在,它也是种直觉设计。WordPress和Beaver Builder都支持这项功能,所以它并不需要任何特别的编程工作。唯一的实际挑战是,我得决定每个菜单里要放什么内容。

将菜单结构加入WordPress之前,我在Scrivener为它列出了提纲。我想要最多7个顶层菜单条目,不含我的名字(名字将直接链接回网站主页)和搜索图标。

这样做并不困难。我意识到此事不必追求完美,因为改换菜单结构非常容易。我猜甚至可以在发布网站后,自己再做些调整。

因为我早前导入了旧网站的数据库,所以新网站上已有博客文章。但网站还没有任何独立页面,那些网页必须重新在WordPress里创建,而非使用旧的HTML版本。对于还没有创建关联页面的菜单条目,我直接把它们全都链接到一个存根页面(stub page)。一旦关联页面创建完成后,我再更新相应链接。

在网站开发期间,我对菜单结构做过几次轻微改动,但很大程度上保留了原初设计。

这是挺棒的一步行动,它并未花费太长时间,而且完成此步给了我一种取得进展的感受。此时的新网站有了可用菜单,随后的工作目标之一,就是为所有菜单条目创建对应网页。

要不要侧边栏

下一个决定就是要不要使用侧边栏,比如我原始网站上使用的左侧边栏。它并非只是个设计元素。与自己起初意识到的相比,这个决定包含更多内容,还涉及理清我的总体经商哲学。在整个网站项目进行期间,我偶尔会遇到看起来琐碎和基本的设计决定,比如在两个选项间二选一,可一旦深入探究它们,我才意识到在继续行进前,还有要辨清的更深层事情。

我原本期望添加一个侧边栏,自认为它可能对生意有必要。另一方面,我也感觉若不加侧边栏,网站整体效果很可能会让阅读文章获得更愉悦的体验。我常发现即使没有动画效果,其他网站上的侧边栏也令人分心。但在一开始,我推想对于像自己这样的网站,拥有侧边栏可能很有必要。

使用侧边栏的主要原因之一,就是为了变现。它是放置广告、分销链接、新闻邮件注册窗,和其他推广内容的最好位置。对于达到这种变现目的,侧边栏也确实管用。这也许就是侧边栏如此流行的原因。

我知道可以利用侧边栏来提高新工作坊、新推广产品,以及网站最受欢迎文章的可见度。它在旧网站上所起的作用挺不错。干嘛不保留呢?

我最近读了本名为The Pumpkin Plan(《南瓜计划》)的好书,书中利用从种植巨型南瓜收获的经验教训,来类比在商业上如何取得成功。这本书强调,如果一份生意在服务其最佳客户(而非普通客户或非客户)上有更好表现,这份生意就能成长得更快。要想种出巨型南瓜,那个南瓜最终必将成为整个藤蔓上唯一的南瓜,这样它才会得到藤蔓的全部能量。这与我的经商哲学不谋而合,自己也想专注服务那些对个人成长有着明显兴趣的人们,而非要通过说服才相信其价值的人们。我不会追逐那些缺乏兴趣的客户。

我的最佳客户就是来参加我工作坊的人士。平均而言,这些人在参加他们的第一个活动前,已阅读我的作品大概4-5年。我难以想象他们中的大多数会需要或想要一个侧边栏。他们已非常熟悉网站内容,甚至面对新设计,他们也能迅速了解。他们中的许多人都渴望参加新工作坊,也不需要持续性的各种提醒。服务他们的更好方式,就是在干扰最小的情况下,让阅读文章更轻松容易。我真的没必要向他们推送任何东西,从而试图将其注意力从页面上的主要内容转移开。

我的最佳客户都非常忠于个人成长,假如一项特别服务让他们感觉合情合理,他们通常会用“一拍即合”的态度回应我。否则的话,若他们对某事不感兴趣,我反正也难以说服他们感兴趣。我能做的最好事情,就是提供与他们渴望和兴趣相一致的工作坊。当我在此事上做得不错时,许多人都会现身参加。

我也有同样的选择倾向。假如对某事感兴趣,我很快就能全身心投入其中。若不感兴趣的话,持续出现的提醒只会更显烦扰,而非更有说服力。虽然通过大量提醒可能说服额外人群,但考虑到这种做法同时会烦扰我的最佳客户许多次,它可以说是种糟糕交易。典型的销售和营销专家们也许认为,这就是个数字游戏,你必须大量开火才能多中目标。我却质疑这种做法。我不认为对自己生意而言,这是最佳的长期策略。我干嘛要为了额外推动某人促成一次销售,而把自己和如此多最佳客户的关系弄得紧张不堪?似乎应该存在比这更聪明的商业做法。

我期望的是,如果把网站做得更易使用,并有更少干扰元素,它就更易让人们享受免费内容,而且不会遭受分心和提醒事物的影响。然后这些人若想更全面地享受我的服务,他们可以注册新闻邮件,参加工作坊等。他们中的一些人确实会喜爱我提供的免费内容,最终想去查看工作坊和/或产品推荐信息。

这种做法让人感觉更和谐一致,因为它和我对感情关系的总体哲学也相互匹配。我对劝说人们去做各种事情毫无兴趣,也不喜欢追逐客户。我喜欢的是彼此兼容合拍。我喜欢花时间和能跟自己分享自然亲密体验的人们在一起。我也喜欢拥有一个能反映出这种生活哲学的网站。

我喜欢那些没有广告,让人阅读起来轻松容易的网站。不久前,我开始使用一款广告屏蔽软件,到现在它已阻拦了大概50多万次的广告展示。如果我的读者和我相似,我预想他们也会欣赏一个没有广告,整洁清爽的网站。而且我猜,若他们看到网站是为像自己一样的人士所设计,就可能认为我的工作坊也会如此(工作坊的确如此)。

我喜欢给出邀请,而非试图捕获销售机会。当提供的服务与接受服务的个体高度兼容合拍时,销售自然会发生。当兼容度虚弱时,我对放手那些潜在的销售机会并不介意。这也为我腾出了时间,去更好服务那些兼容度更高的人群,比如去做更多工作坊。

我也想让自己的生意经营起来充满乐趣。我越是享受工作,就越有动力去工作。当生意感觉像是苦役时,我就更可能拖延耽搁。试图说服和服务兼容度较低的客户便是种苦役,因为那种相互关系存在摩擦阻力。服务兼容度高的客户则充满喜悦;摩擦阻力会被乐趣、联系和成长所替代。

我所做推广最少的一次工作坊,就是上次在2015年举办的“清醒心灵工作坊”。那次工作坊也获得了最高评价,尤其是在社交联系方面。我认为其原因在于,所有参加者并非被推动或说服前来。这个工作坊没有预先决定的主题或话题,也没有明显的利益好处 — 它全程都是用一种灵感而发、即兴发挥和随其自然的方式完成 — 但大家依然愿意注册参加。之后一些参加者告诉我,他们愿意再来参加此类活动。

所以我看出促推式的销售并无必要,更加随性自然的营销风格似乎对自己很管用。它就像给人们发出邀请,然后尊重对方的自由决定那样简单。当想到此事,它其实也是我喜欢商家向自己推销的方式。请直接给我所有细节信息,如果产品合适,我自然会购买。偶尔提醒一下没有问题,但不要做得过分。

只是为确定无误,我最后对两个选项都做了测试,自己更喜欢没有侧边栏的设计。它让网站的每个页面看起来都更干净简洁。读者目光自然会吸引到主要内容上,而非被侧方的内容分心干扰。

我必须考虑的另一个因素是,更多人是通过移动设备访问我的网站(目前大概占总流量的40%),而侧边栏在较小的屏幕上显得毫无意义。

有趣的是,虽然这个决定是基于我感觉最佳客户会喜欢的选择,还有自己喜欢的选择所做出,我认为它也是适合随意访客的正确决定。通常源于搜索引擎或相关网站的推荐链接,大多数新访客会直接进入某篇文章。一旦他们来到我的网站,其选择主要是阅读文章,或点击返回按钮,直接离开。我喜欢为新访客提供这种简单选择,而非在页面中载入大量额外链接,希望对方最终点击些什么,或试图用某种免费福利贿赂对方,让其注册加入我的邮件列表。

起初要设计没有侧边栏的网站显得更困难,但我发现所有包含在侧边栏的信息,都可以很好地转换成其他内容形式。看完一直放在旧网站侧边栏里的信息内容后,我感觉其中大部分反正也显得多余。

另外,若大多数博客作者都使用侧边栏,那么不用侧边栏,会让我的网站更脱颖而出一点。众人会在网上其他地方面对大量侧边栏的分心干扰。我的网站则可以成为他们的一个庇护所。

在项目后期,我决定单独为工作坊页面和产品页面添加侧边栏,对于那些页面,侧边栏有着清晰服务目的,提升了网站的易用性。侧边栏能分享一些重要信息,比如工作坊的价格、订购按钮、举办地点、日期、时间安排,所以这些侧边栏内容与特定页面将严格相关。这个决定也是在测试期间做出。我试过两种选择,在此情形下,添加侧边栏会让页面更易使用。

目录

我想做的另一个改善设计,就是简化博客的分类目录。旧网站上有36个不同的分类目录,但它们的设计并不十分明智。这种目录结构是随着时间进化而来,自己开始写作一个新话题时,会偶尔添加一个新目录。这些目录都列在旧网站的侧边栏里,但没有侧边栏后,把36个目录塞进菜单条目里,将显得非常笨拙。

我花了数小时致力于解决此事,想出一个将旧目录重新划分到新目录的计划方案,划分方式如下:

  • 通知 <- 综合
  • 高产高效 <- 平衡,职业 & 工作,搞定事项,目标和目标设置,解决问题,高产高效,成功,技术,时间管理
  • 富足 <- 商业生意,创业,被动收入
  • 创造现实 <- 意识和觉悟,意念-显现,清醒梦,形而上学,灵媒发展,灵性
  • 情感 <- 勇气和恐惧,动力,激情
  • 健康 <- 健康,睡眠
  • 生活方式 <- 幽默,音乐,个人发展,公开演讲,旅行
  • 感情关系 <- 人际技巧,感情关系
  • 价值观 <- 制定计划,人生目的,自律

然后我必须找到一种途径,将这种重新划分方式应用到所有文章上。我本可用phpMyAdmin,通过在数据库里做些搜索和替换的方式完成此事。但找到一款满足自己确切需求的WordPress插件,其实轻松容易。我忘了具体使用的是哪款插件,但自己做的全部事情,就是安装插件,告诉它把所有博客文章,从每个旧目录重新分配到对应的新目录里,最后卸载插件,永远无需再使用它。

后来在项目里,我对.htaccess文件添加了重写规则,将所有旧目录页面重新指向新目录页面,这样指向旧目录页面的链接,便不会返回404“页面无法找到”错误。例如,下面就是将旧的“旅行”(travel)目录重新指向新的“生活方式”(lifestyle)目录的一行代码:

RewriteRule ^blog/category/travel/?(.*)$ /lifestyle/$1 [R=301,L]

我还将旧的“播客”目录重新指向新的“音频”页面。我在2009年停止了播客创作,因为自己要管理的媒体内容太多,不过所有播客音频仍可在“音频”页面上找到。

另外,我为网站添加了一个新的“最爱”区块。此部分内容看起来和其他任何目录一样,但它的实现方式和目录并不相同。我的播客内部其实没有“最爱”目录,它是我手工分配给Beaver Builder文章网格模块的文章集合,因此划分这个区块依赖于Beaver Builder页面生成器的一项特别功能。我本可通过添加一个新目录,来添加相同功能,但那样会花费更多时间,自己必须要为许多文章编辑目录(或调整数据库),才能将每篇文章添加到新的“最爱”目录里。而Beaver Builder能更快和更容易地添加这项功能。

新的“最爱”区块是旧网站侧边栏上“StevePavlina.com最佳作品”区块的进化版。它包含最受欢迎文章,基于读者反馈筛选的最有影响力文章,还有我个人最喜欢的文章。起初我计划把这些文章分类到不同的列表里,比如“最受欢迎文章”和“Steve最爱文章”,但自己没看出这种区分的意义。似乎更简单的做法,就是提供单个“最爱”目录。不然的话,那些列表里的文章会有大量重叠内容。

由于可供选择的可能性太多,想出好的目录名称并不轻松容易。其中许多目录都能采用不同的标签名称。最终我选择偏向个人发展主题的那些标签,而非在其他领域更常见的标签名称。这就是我为何使用“富足”,而没使用“商业”、“金钱”或“创业”名称的原因。我想让每个标签,与访问自己网站的读者的已有渴望和兴趣相一致。

我喜欢新目录的简洁性,而且大量文章从旧目录划分到新目录时,转换效果挺不错。对于那些感觉划分结果不太正确的文章,我手动进行了编辑整理。

写作新文章时,目录上的简化也让我的工作更轻松容易了些,因为自己不必再从36个不同目录,为新文章的分类做出选择。

颜色

作为一名色盲人士,我知道自己需要颜色领域的一些帮助。

色觉正常人士可以看到大概100万种颜色。我能看出大概25000种,或正常水平的2.5%。面对能看出比我多40倍颜色的人们,我该如何为其设计一个网站?

幸运的是,我女友Rachelle拥有正常色觉,所以在网站色彩方面,自己要严重依赖她的帮助。拥有一位能分辨红色和褐色差异的女友,简直令人惊叹。我真不知道她怎么做到的 — 简直就像魔力!

我想让网站偏向色彩的蓝色范围,因为那是我色觉最接近正常的部分。我认为更冷的颜色也能给网站一种放松氛围。像红色和橙色等暖色看起来并不合适。我还喜欢柔和,较不饱和的颜色。Rachelle也同意我的想法。

我对色彩理论做了些研究,摆弄了一些网上工具。自己到处学了些东西,但它们似乎都有点抽象,主要是因为我没法用自己的眼球验证许多想法点子。不过从这些研究中,我确实收获的一步好做法,就是要为网站选择一款调色板。调色板不必太大;共有五款颜色应该已经足够。同一个调色板里的颜色,搭配起来会非常协调,所以只要我把颜色选择限制在调色板范围内,最终设计效果应当就安全可靠。

很快我发现了Adobe色轮,它便是探索调色板颜色的绝佳工具。我最喜欢的功能是相机图标,这项功能会让我上传一张图片,然后基于图片里的颜色生成一个小的调色板。我试着上传了一堆不同照片,然后查看生成的调色板结果。

我将这个工具展示给Rachelle,她便去搜寻含有自己喜欢的颜色的图像。最终她碰上一张晶石照片,我俩都很喜欢其中的多层颜色。生成的调色板由一些轻松愉悦,毫不招摇的颜色构成。Rachelle用于形容它们的词汇是:青绿、鲜苔、浅薄荷、柠檬香茅和米白。搭配海军蓝的页眉和页脚时,这些颜色看起来非常美好。我们终于找到了想要的调色板。

因此新网站的颜色范围取自一块晶石 — 完全源于自然。我喜欢这种选择!

于是Rachelle和我开始从新的调色板,为网站上的各种元素分配颜色,比如各个链接和按钮。我们淡化了某些颜色,以便将其用作背景。我们还试验了轻微的颜色变化,并提出这种问题:9BBEA8号颜色是不是要比96BAA1号颜色更好看?我们还发现,当需要更多丰富性时,比如确定主页上的图标颜色,有限地轻微脱离调色板去选择颜色,也完全可以。

我俩很可能只是为用对颜色,就花了几天时间。我们还不断试验,直到两人都感觉满意高兴。有时在网站上添加更多页面后,我们会做更多几轮调整。

新网站在颜色的使用上相当节制,这也是有意设计。我不想让人们被颜色分心干扰,尤其在阅读文章时。但我也不想追求极简主义,只使用黑白两色。

和Rachelle一起致力于这个项目充满乐趣。我觉得两人像个团队那样配合得很棒。不过这种工作有时很耗费心力。我的大脑在那些日子结束时感到额外疲惫,好像一些神经回路出现过载情形,并未准备好承受如此活跃的使用。

查看原文