作者: Kier 发表日期: 2009-4-23 当我在 2001 年受雇于 Jelsoft 时，首先做的事情是对 vBulletin 2 的风格进行了清理，为它的第 4 个 Beta 版本发布扫清了障碍。但是很多设计元素已经就位，在微调 PHP 代码的前提下无法大规模的修改。 随着 vBulletin 3 提上议事日程，为其制作默认风格的任务再一次落在了我的身上。我的目标是简化布局，建立一致的设计规则，让常用的控件更加突出，而将不常用的按钮和链接放入弹出菜单、可折叠元素中等。 vB3 博客和 Project Tools 插件大部分也采用了我的界面设计，而对于这些产品，我开始尝试更比 vB 论坛深入的使用 tableless / CSS 设计。vBulletin 3.7 中心的个人资料页面、相册/照片系统和圈子系统完全采用了 CSS 布局。但是这也让我们发现，尝试在 vB3 风格的 CSS 系统中添加额外的 CSS 规则有很大的局限性，很难制作完全基于 CSS 的设计。 对于 vBulletin 4.0 最初的目标是建立一个全新的、CSS 布局的、采用语义 XHTML 标记的，完全重写且更加现代化的用户界面。所有这些都会在一个单一的 4.0 版本中发布，需要相对较长的项目时间。但是，由于我们切换到了一个快速周期性的开发策略，需要在较短时间内发布 4.0 版本，这意味着该目标在 vB 4.0 中不能完全达到。因此，在 4.0 的最初版本中，我们会采用一个使用语义 XHTML 和 CSS 的全新设计，该设计基于我们新开发的增强的风格变量系统和扩展的模板语法。更广的用户界面改进将会在 4.0 之后的版本中逐步实现。 制作此新风格除了要满足上述语义 XHTML/CSS 的需求外，还有一些独特的考虑: 它不能太复杂，导致新手管理员无法编辑模板 它必须充分灵活，允许任何技术层次的管理员都可以基于它制作新的风格 它必须能够适应界面元素根据不同的条件 (权限、选项等) 显示/隐藏，而不变形 我已经为此工作了一段时间，开发出了一个 CSS 框架，为制作新的模板创造了条件，并且制作了一些关键的页面以演示如何让这一切协同工作。 更多的人照亮道路... 现在的进展是，某些工作可以 (由于时间紧迫，必须) 让除了我的更多的人来做，以及时完成。因此，我认为现在是比较合适向大家演示目前的工作成果的时候了。 页眉、导航栏、面包屑、页面标题 让我们从页面顶部开始，包括页眉、导航栏、面包屑、页面标题。 首先需要说明: 导航栏中的标签当前还不能正常工作，在下面的链接仅是为了演示的占位之用。其中的实际内容还是待定的。 其次，您会注意到当前的配色和 vBulletin 3.x 的风格差异不是很大。这是有意识的决定，保留一些长期存在的以为大家所熟悉的视觉方案。 默认，我们在页眉显示一个非常小的 Logo，但是您可以使用一些相等或不同尺寸的图标来代替，与老版本的 vBulletin 类似。 在 Logo 下方，我们有 (且如果时间允许完成 PHP 代码，很有希望保留) 一系列的标签 (Tab)，允许访问者快速导航到系统的某个栏目，并知道现在所处的位置。再往下是一行类似于 vBulletin 导航栏下方的链接，但是这些链接根据标签选择的不同会相应的变化。 再下方便是面包屑 (Breadcrumb) 区域，它已经从传统的导航栏内移动到外面，使之有更宽的空间来显示内容，不会被小的浏览器窗口强迫换行。 面包屑下方便是页面标题。相对于 vBulletin 3 中使用的粗体 10pt 的标题字体，新的标题字体大得多，在页面中更加明显，以突出它的重要性。在其下方是可选的页面描述，内容可以是论坛的描述、帮助文本或是任何其他有用的东西。 这些内容所采用的 XHTML 代码相当简单... HTML: <div id="header"> <div><a href="forumhome.php" id="logo-image"><img src="images/logo.png" alt="" /></a></div> <div id="toplinks"> <a href="#">Kier</a> <a href="#">Settings</a> <a href="#">Log-out</a> </div> <hr /> </div> <div id="navbar"> <ul id="navtabs" class="floatcontainer"> <li><a class="navtab" href="#">Site</a></li> <li class="selected"><a class="navtab" href="#">Forum</a> <ul class="floatcontainer"> <li><a href="#">User CP</a></li> <li><a href="#">New Posts</a></li>a <li><a href="#">Today's Posts</a></li> <li><a href="#">Mark all Forums Read</a></li> <li><a href="#">Subscribed Threads</a></li> <li><a href="#">Private Messages</a></li> </ul> </li> <li><a class="navtab" href="#">Blog</a></li> <li><a class="navtab" href="#">Projects</a></li> <li><a class="navtab" href="#">Calendar</a></li> </ul> </div> <div id="breadcrumb"> <ul class="floatcontainer"> <li class="navbit"><a href="#" name="top">My Site</a></li> <li class="navbit"><a href="#">Forums</a></li> <li class="navbit"><a href="#">General</a></li> <li class="navbit"><a href="#">Off-Topic Stuff</a></li> <li class="navbit"><a href="#">The Forumdisplay Example Forum</a></li> </ul> <hr /> </div> <div id="pagetitle"> <h1>The New vBulletin Style Forums</h1> <p class="description" id="welcomemessage">Welcome to The New vBulletin Style Forums.</p> <p class="description" id="firstvisitmessage">If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.</p> </div> 论坛首页 论坛首页是我第一个完成的页面，现在回顾起来和我最近建立的页面有些不一致。现在它使用了与 vBulletin 3 相同的图标。但是我已经制作了新的，较大的并有 Alpha 透明效果的图像，使之更能够配合论坛的背景。 下面是论坛首页 forumbits 的外观: 您可以看到，forumbits 已经摆脱了 vB1、vB2 和 vB3 的表格状布局。新的设计看上去更加灵活，允许使用空格来暗示数据项目中的联系，而不是强制将它们封装在浓重的边框和背景中。 论坛版面标题和图标更大更显眼，因为它们是论坛的主要参考点。类似主题数、帖子数的信息移动到标题右上侧浮动，不会再和版面标题抢风头。最近发贴信息独占一行，长的主题标题便不会被浏览器强制换行 (这种情况在 vB3 中经常出现)。
论坛统计信息 页面底部，便是“论坛统计信息”。 该设计仍然使用了最少的 XHTML 标签 (它主要是一些 HTML 列表元素)，所有的布局和样式都使用 CSS 完成。 HTML: <div id="forum_info_options" class="block"> <h4 class="blockhead">Forum Information and Options</h4> <div class="blockbody floatcontainer"> <div id="forum_info_block_1"> <div id="forum_posting_rules"> <h5 class="blocksubhead">Posting Permissions</h5> <ul class="blockrow"> <li>You <strong>may</strong> post new threads</li> <li>You <strong>may</strong> post replies</li> <li>You <strong>may</strong> post attachments</li> <li>You <strong>may</strong> edit your posts</li> </ul> <ul class="blockrow"> <li><a href="#">BB code</a> is enabled</li> <li><a href="#">Smilies</a> is enabled</li> <li><a href="#">[IMG]</a> code is enabled</li> <li>HTML is disabled</li> </ul> </div> <div id="forum_moderators"> <h5 class="blocksubhead">Moderators of this Forum</h5> <ul class="blockrow commalist"> <li><a class="username" href="#">Mickey</a></li> <li><a class="username" href="#">Donald</a></li> <li><a class="username" href="#">Goofy</a></li> <li><a class="username" href="#">Pluto</a></li> <li><a class="username" href="#">Daisy</a></li> <li><a class="username" href="#">Minnie</a></li> <li><a class="username" href="#">Pete</a></li> </ul> </div> <div id="forum_icon_legend"> <h5 class="blocksubhead">Icon Legend</h5> <dl class="blockrow"> <dt><img src="images/statusicon/thread_new-16.png" alt="" /></dt><dd>Contains unread posts</dd> <dt><img src="images/statusicon/thread-16.png" alt="" /></dt><dd>Contains no unread posts</dd> <dt><img src="images/statusicon/thread_hot_new-16.png" alt="" /></dt><dd>Hot thread with unread posts</dd> <dt><img src="images/statusicon/thread_hot-16.png" alt="" /></dt><dd>Hot thread with no unread posts</dd> <dt><img src="images/statusicon/thread_lock-16.png" alt="" /></dt><dd>Thread is closed</dd> <dt><img src="images/statusicon/thread_dot-16.png" alt="" /></dt><dd>You have posted in this thread</dd> </dl> </div> </div> <div id="forum_info_block_2"> <div id="forum_onlineusers"> <h5 class="blocksubhead">Users Browsing this Forum</h5> <div class="blockrow"> <p>There are currently <a href="#wol">22 users browsing this forum</a>. <span class="shade">(9 members and 13 guests)</span></p> <ol class="commalist"> <li><a class="username" href="#">Kier</a></li> <li><a class="username" href="#">Altered</a></li> <li><a class="username" href="#">ArcVox</a></li> <li><a class="username" href="#">Bill Bickley</a></li> <li><a class="username" href="#">bonkerspr</a></li> <li><a class="username" href="#">BWJ</a></li> <li><a class="username" href="#">Christine</a></li> <li><a class="username" href="#">Mike Sullivan</a></li> <li><a class="username" href="#">Solar</a></li> </ol> </div> </div> <form id="forum_display_options" action="" method="post"> <h5 class="blocksubhead">Thread Display Options</h5> <div class="formcontrols"> <div class="blockrow"> <label for="sel_daysprune">Show threads from the...</label> <select class="primary" id="sel_daysprune" name="daysprune"> <option value="1">Last Day</option> <option value="2">Last 2 Days</option> <option value="7">Last Week</option> <option value="10">Last 10 Days</option> <option value="14">Last 2 Weeks</option> <option value="30">Last Month</option> <option value="45">Last 45 Days</option> <option value="60">Last 2 Months</option> <option value="75">Last 75 Days</option> <option value="100">Last 100 Days</option> <option selected="selected" value="365">Last Year</option> <option value="-1">Beginning</option> </select> <p class="description">Use this control to limit the display of threads to those newer than the specified time frame.</p> </div> <div class="blockrow"> <label for="sel_sort">Sort threads by:</label> <select class="primary" id="sel_sort" name="sort"> <option value="title">Thread Title</option> <option selected="selected" value="lastpost">Last Post Time</option> <option value="dateline">Thread Start Time</option> <option value="replycount">Number of Replies</option> <option value="views">Number of Views</option> <option value="postusername">Thread Starter</option> <option value="voteavg">Thread Rating</option> </select> <p class="description">Allows you to choose the data by which the thread list will be sorted.</p> </div> <div class="blockrow"> <p class="label">Order threads in...</p> <ul class="checkradio group"> <li><label for="radio_asc"><input type="radio" name="order" id="radio_asc" value="asc" /> Ascending order</label></li> <li><label for="radio_dsc"><input type="radio" name="order" id="radio_dsc" value="desc" checked="checked" /> Descending order</label></li> </ul> <p class="description">Note: when sorting by date, 'descending order' will show the newest results first.</p> </div> </div> <div class="blockfoot actionbuttons"> <div class="group"> <input type="submit" class="button" value="Show Threads" /> </div> </div> </form> </div> </div> </div> 版面显示 版面显示页面 threadbit 元素已经在我以前的 Blog 中揭示，因此我在这里便不再重复细节。但是该页面中的几个新的元素值得一看。 弹出菜单 首先，我们拥有了新的弹出菜单系统。vB4 的弹出菜单系统相比 vB3 有着显著的优点: 它不需要 Javascript 便可工作。在仅支持 CSS 的浏览器中菜单仍然可以工作，这样我们便无需为菜单内容提供非 Javascript 替代了。 另外，这些新菜单与其中的内容相关联，这意味着您无需四处寻找菜单的 XHTML 代码在何处。 HTML: <li class="popupmenu" id="imodsel"> <h6><a class="popupctrl" href="#">Inline Mod</a></h6> <ul class="popupbody popuphover"> <li><a href="#" id="imodsel:all">Select all</a></li> <li><a href="#" id="imodsel:none">Deselect all</a></li> <li><a href="#" id="imodsel:invert">Invert selection</a></li> <li><a href="#" id="imodsel:all:1">Select unapproved threads</a></li> <li><a href="#" id="imodsel:all:2">Select deleted threads</a></li> <li><a href="#" id="imodsel:all:4">Select threads with attachments</a></li> <li><a href="#" id="imodsel:all:8">Select threads from guests</a></li> </ul> </li> 若启用了 Javascript，菜单进入增强模式。这样菜单便不会显示在可视区域之外，点击该控件便可保持菜单的打开，直至您点击其他地方关闭菜单，而不只是 CSS 的鼠标移动在上面的时候打开的模式。 文本按钮 vBulletin 3 中的大按钮并不是很受欢迎。事实上它们的颜色是固定的，仅在默认的风格的背景颜色中才能反锯齿显示。这意味着它们不是很有灵活性，需要使用图像编辑器以及图像开发包来使之与背景色配合良好。 vBulletin 4 中，我放弃了基于图像的大按钮，而采用了完全 CSS 的标准文本超链接。基于 Gecko (Firefox) 和 Webkit (Safari, Chrome) 的浏览器可以获得 CSS 圆角效果，而所有流行的浏览器都可以使用 Alpha 透明的 PNG 按钮背景来获得非常漂亮的显示效果。 在某些情况下，按钮中仍然会使用图像，但是这些图像仅为了修饰按钮，而不是作为一整个按钮来使用。当这些图像被使用时，它们是 Alpha 透明的 PNG 图像，这样他们可以工作在任何颜色的按钮和背景中。这意味着在 vB4 中制作不同颜色的按钮和控件将变得更加容易。 快速管理高亮 在 vBulletin 3 中，有一个非常丑陋的 Javascript 函数来处理标记为需要管理的高亮显示的内容。它交换 alt1 和 alt2 背景色来显示需管理项目背景。vBulletin 4 省掉了这些复杂的代码，只是简单的将需要高亮的外部容器中添加了一个额外的 CSS 类。CSS 规则实现了这一实际可见的效果，您只需 (甚至无需) 为新的内容类型撰写高亮代码，不同的内容类型可以采用不同的方式来高亮显示。
论坛跳转 以往的版本，论坛跳转菜单总是一个 <select> 菜单，这导致它的风格不能被完全控制。对于 vB4，论坛跳转菜单使用了新的弹出菜单系统，这样他便更容易被风格化。菜单中的项目使用了标准的超链接，因此您可以很容易添加自己的链接 (vB3 中这需要您为每个新链接撰写 PHP 处理代码)。 关闭状态... 打开状态... 论坛信息和选项 原来凌乱的论坛选项现在都被封装到了一个单独的元素中，包括论坛规则、图标图例、显示选项、正在浏览的用户和版主列表。它们看上去比原来的 vBulletin 更加清晰。 显示主题 我认为这是论坛中最重要的部分。 帖子 该页的设计应当强调重点 - 阅读帖子。 研究显示如果人们可以一路下来不被无关内容打断，阅读内容会变得更容易。vB3 相对于 vB2 的一个巨大变动便是将 postbit 从左侧显示用户信息、右侧显示帖子内容更改为上面显示用户信息，下面显示帖子内容的布局。而根据这一研究，我们放弃了 vB3 的设计，帖子显示回归传统两列。 但是，我进一步的将一些无关帖子阅读的内容弱化。最显著的是，回复/引用/编辑控件现在显示非常不明显，除非浏览者将鼠标移动到某个帖子上。之后，这些控件变会显示为完整的图标+文本的式样。若访问者仅对帖子阅读感兴趣，那么便不会激活这些控件，使阅读体验更加流畅。 主题信息 与版面显示页面类似，主题显示页面底部许多额外的信息现在都集中在了单一的一个框中。 表单 自从 vBulletin 3 风格第一次呈现给大家时，许多不同的页面便各自为政，采用了不同的表单控件。一个例子便是用户控制面板中的“发表新 x”页面和“编辑选项”页面。随着时间的流逝，越来越多的人添加到这些表单，我们便失去了 (如果我们曾经拥有) 表单的一致性。 vBulletin 4 中，我制作了通用表单控件布局库，以矫正这一问题。所有的 vBulletin 表单便可基于此来重建。它们的 HTML 代码极其简单，但是相关联的 CSS 规则使之非常漂亮、易使用和交互。 下面是几个例子: 依赖控件 在研究 vB3 存在的一些表单时，我发现几个实例，在某些选项被选中时，另外显示出来的控件是无用的。一个例子便是帖子编辑页面中的“删除帖子”控件。这里，我们有三个单选框和一个文本框。只有在单选框设置为“软删除”的情况下，文本框才有意义。 为了解决这一问题，我开发了“依赖控件”系统，可以指定仅在某个父控件活跃或设置为某个状态时，子控件才可使用。下面是一个依赖控件的示例，vB4 版本的“删除帖子”控件。 依赖控件系统自身依赖于 Javascript，但是若 Javascript 被禁用，表单仍能正常工作，但是不会根据依赖情况自动禁用或启用控件。 下面是另外几个依赖控件的例子: 还有一件事... 还有更多时间来为大家展示我建立的其他页面。日历是我最近制作的，现在采用了标签界面，来在年、月、周和日视图中切换。 月视图 周视图 添加新事件 一如既往，我期望着阅读您对我今天发表的文章的评论。