ux@me Theme V1.0 Released

// 更新记录 2011-04-17

// v2.0 发布, 建议所有下载安装了 1.0 版的朋友都升级到这个版本.

在众位仙家的热情催促下, 传说中的 ux@me 主题终于落地了. 虽然只是 1.0 版, 但已经初步实现了我期望的功能.

简单的介绍下主题的设计思路, 和一些功能实现. 方便想要使用的朋友, 同时也是为了给自己辛苦一周做个总结~

主题的灵感来自于强生的 blog. 刚开始做时本来打算全盘山寨过来, 但后来实施过程中发现很多细节不如我意, 因此又操刀全部重来.

一. 交互设计

主题总的交互思路和实现, 还是构建于 WordPress 已有的方式之上.

  • 信息架构:

    以 category 为基本的信息组织单位. 在这个基础上, 提供 tag 从不同唯度来描述信息.
    说到这里, 讲一讲我对于 WP 系统层级关系的看法. 在 3.0 版及以后的 WP 中提供了 ”自定义类目” 的功能, 允许用户建立”分类的分类”, 将多个不同唯度的分类再聚合起来.

    但我觉得这种分类方式, 曲解了”分类”的本身含义. 我理解的分类是”分门别类”, 分类和分类之间, 应该具有唯一的特性来区别. 所以, 不同的分类顶多也只能在层级结构中能从属于一个更高级别的父级目录, 但在内容或属性层面来说, 两个平级的分类之间是无法合并的.

    这也是我反对将一篇文章归属于两个分类的原因. 不要把 tag 与 category 的使用场景用混. 所以, 在我的主题中, 如果一篇文章从属于两个类目, 显示出来的效果是没有样式的, 这点请注意.

    在 category 和 tag 之外, 提供 Search, Archives(分为 by tag 和 by date)两种方式对全站文章进行筛选.

  • 交互元素:

    主题在常规的 WP 交互工具基础上, 增加了两个交互元素: 定位于页面右侧的快速导航入口, 和定位于页面底部的信息栏.

    • #### 快速导航入口: 主题右侧的快速导航入口
      当用户拖动滚动条至内容区域(即顶部导航栏不可见后), 该入口出现. 根据用户的实际位置不同, 提供不同导航入口.
    • 信息栏:

      主题底部的信息栏

      首先讲讲信息栏的位置, 为什么会在页面底部. 这是因为信息栏提供的功能和信息, 对于用户来说是次要的, 用户在浏览页面信息时, 顺序通常是自上而下, 当阅读完整篇文章后, 他才可能去注意到这块区域. 同时, 放在底部也是为了与页面顶部的导航工具相对应, 形成”工具 -> 信息”的流程环.

      其次, 可以看到整个信息栏由三部份组成: 面包屑导航, 页面缩略图和 Read again. 面包屑导航为用户提供路径功能, 标识着用户在网站中的位置. 由于 blog 自身的特点决定了其简单的信息架构, 所以这里的面包屑只提供路径导航, 对于不能准确产生路径的页面, 如首页, 搜索结果页, 就不会显示了.

      页面缩略图. 该功能只在文章页面才会显示, 它会试图从视觉上提醒用户当前文章的总长度, 以及自己正在阅读的部分, 以确认自己目前的进度.

      Read again. 本意是 “Back to top”, 但 “top” 的具体指向, 也一直是众说纷纭. 所以这里用更具语义的表达来告诉用户该元素的作用.

二. 视觉设计

我不是专业的视觉设计师, 对美感的保握也只是来源于平时看的网站的一些可怜的积累. 所以这里就不自卖自夸大谈视觉设计了. 总的思路, 就是想用大片的留白来让整个主题看上去更有呼吸的空间, 同时提供尽量少, 且单一的色彩, 争取用户将注意力放在正文内容上.

所以, 整个主题走的是极简风格, 为了映衬这一点, 整个主题文件本身没有用到一张图片(除 about 页面的头像外, 但那并不属于主题文件的范畴), 也算是一个小小的特色吧.

三. 前端开发

多亏有了强大的 jQuery, 让我在处理 DOM 元素时, 异常方便. 当然, 因为是第一次真正开始用 jQuery, 对它的很多 API 还不熟悉, 因此也用了一些土鳖的办法来实现功能. 这里要感谢 JS 牛人小如的不懈帮助.

更多的前端工作在于 dot 对象的诞生, 以及其第一个方法: kbdMgr() 的建立. 该方法用来管理全站的键盘事件, 及相应调用的函数. 目前开放的实例接口中, 用户可以选择使用 Enter 键或 ctrl+enter 组合键的方式来提交表单内容. 同时可以用 ESC 键来清除输入框内容. 在下一版中预计会加入更多键盘支持.
最后, 对 WP 的 comment-reply.js 做了修改, 以更好支持评论的嵌套功能. 我这里也提供了下载地址, 请覆盖: wordpress\wp-includes\js.

另外, 需要特别声明的是, 做为 web 标准的拥护者, 我直接摒弃了 IE6. 在 IE6 下将不能看到上述交互元素, 仅提供基本的信息浏览功能, 以实现降级.

四. 后台

以前也帮朋友们制作个几个 WP 主题. 但那大多是在 default theme 或前人的主题上面做的二次加工. 这次 ux@me 主题的制作, 认真学习了 PHP 的基本语法, 大部分时间基本上都花在了动物书 <学习 PHP 和 MySQL> 以及 Google 上. 最后, 除了页脚使用的 pageNavi 插件, 每一句代码都是自己写出来, 终于可以安心一点. 学习的过程很痛苦, 也很好玩. 以后会再写一篇日志来记录学到的东西.

顺便说一句, 虽然是老生长谈的废话, 但是互联网真的不能没有 Google~

最后总结一下, ux@me theme v1.0 feature list:

  1. 支持 wordpress 3.0.4 及以上系统
  2. 支持嵌套回复, widgets 功能
  3. 支持自定义快捷键操作(当前版本仅开放表单提交键)
  4. 对 IE6 进行降级处理, 仅提供基本功能
  5. 主题本身没有图片, 加快加载速度

再来一个我觉得没有做好的地方:

  1. 大部份 JS 中的匿名函数和 xHTML 结构耦合度太高, 不利于用户自由选择功能模块的取舍.
  2. kbdMgr() 方法支持的键盘还太少
  3. about 页面的各种头像应该在实例中提供接口, 以方便更换
  4. 对 PHP 和 WP 所知甚少, 还不能实现我想要的特殊功能

以上问题, 会在以后的版本中不断改善.

下载地址(请注意, 这里没有提供头像包, 如需使用请将头像上传至 avatar\): ux@me theme v1.0 from Box.net, 20.2KB, 7z file

2011-01-25 22:57305