大多数的开发者或者管理者认为,用户体验(UX)不过是选择使用的颜色、字体或者是按钮的圆角之类的修饰,并不是那么重要。而窗口的圆角或者柔美的动画并不是用户体验(UX)的关键部分。我的同事软件传奇人物贝尔·霍利斯(Billy Hollis)称其为“装饰,而不是设计”。
整个程序的用户体验(UX)包含:其工作流,功能集以及所需要的输入的体验。程序的用户体验不是那些手工艺品专家将某些绚丽的内容添加到产品说明书里面。
用户体验会在起到装饰作用的同时决定这个程序的成功与失败。把你的程序想象成一件家具,例如一张桌子。而装饰则是这个桌子光洁的表面,如果说开发者错误的选择了糟糕的材料,即使是世界上最好的设计也会无法满足用户基本的需求。如果你的用户想要一个自然风格装修的客厅,选择木制材料进行修造将会让客户更加满意。而经常需要进行日常消毒的餐厅或厨房使用金属会更好一些。了解了这些之后,你会觉得单纯给用户一把椅子或一张桌子就可以解决他们的问题就可以了吗?
下面的这个示例就会演示怎么突破用户体验的限制来决策软件开发。我也在软件主题演讲中使用了它。
我在去瑞典讲学时浏览Google网站,它的服务器自动监测到我当前的国家/地区以及其应当使用的语言,如果图1所显示的瑞典语界面。通常情况下,对于大多数用户而且这样是正确的,偶尔会发现像我这样的特殊情况,也只需要在右下角进行一次单击就可以永久修复(使用永久型Cookie)问题了。而另外一个例子,在浏览UPS.com的时候如果你必须点击一个大约有30多个国家的列表来选择瑞典,而且它不会记住你的选择,在下一次访问的时候,你需要再次进行上面操作。这样浪费了客户的时间,也浪费了很多流量的成本。
UPS的设计师会遭到来自那些不能自动被检测到的国家用户的谴责。(这样的检测工作是非常容易做到的,只是一个简单的静态列表,每天更新一次,很容易)。他们要不就是蔑视他们的工资,要不就是故意选择浪费每位访问他们网站用户的时间。世界上没有任何的装饰可以掩盖这样的错误。
正如我之前所写的那样,Google明白这样做每月会节约数十亿美元的流量费用。其自动国家/地区检测,自动搜索建议,并自动获取搜索结构结合在一起,然后来解决用户的问题;付出最少的操作,在最短的时间内获得正确的结果。即使是世界上最糟糕的界面也不很难破坏这个网站。
偶尔,谷歌也会加入一些奇思妙想的标志。最近我看到过一个吉他,一个卓别林恶搞的视频,例如图1所示的月食。但是,Google从来没有让这些装饰妨碍它的功能,而且永远不打算做这样的改变。将它称为“Google Doodle”以区分其并非Google基本的功能。
客户经常会在产品完成的时候来要求我评价他们产品的功能。那些已经完成的功能、花掉预算以及僵化的设计,这时已经来不及改变什么了。当我看到我的客户坚持自己的意见的时候,我都想撕扯自己的头发。就像一个癌症外壳医生一样,我想尖叫:“你为什么不在一年前来找我,我可以帮助你的”。像外科医生一样,我可以提供任何保守治疗,像我宣扬的那样,在早期进行干预,而不是在痛苦而无法帮助的时候,再去寻求专家的帮助。
诚如我所言,用户体验设计是在项目在早期,而非结束的时候,感谢阅读。现在去做吧,在开始的时候来找我,而不是结束的时候。
主题可以让Orchard用户自定义站点显示界面,度身定制他们想要的站点风格。主题还可以有针对性的对Orchard模块所提供的任何模板进行样式重写、甚至是改变图像、布局等。
主题在哪
主题位于Orchard网站根目录下的Themes文件夹中。
TheThemeMachine(默认主题)
TheThemeMachine是Orchard默认提供的主题,我们可以通过分析这个主题来了解Orchard主题的功能。和其他任何一个主题一样,它也可以在Themes文件夹中找到。
TheThemeMachine被设计成为一个简洁但是确具有前瞻性的主题,它里面几乎包含了主题的各种功能。本文就通过分析这个主题,来介绍主题的相关知识。
分析一个主题
本节介绍了主题中一些必需的和可选的元素。
清单文件(Theme.txt)
每一个主题都必需有一个清单文件来描述该主题。此文件是一个文本文件,命名为Theme.txt,在相应主题文件夹的根目录下。下面是TheThemeMachine主题的清单文件:
Name: The Theme Machine
Author: jowall, mibach, loudej, heskew
Description: Orchard Theme Machine is a flexible m….
Version: 0.1
Tags: Awesome
Website: http://orchardproject.net
Zones: Header, Navigation, Featured, BeforeMain…
文件给出了主题的名称、描述、作者、标签等信息。区域(Zones)字段则描述了该主题所有可用的区域。区域里可以添加任何内容,最常见的是widgets。并不是所有的区域都需要在这里描述,只有那些需要添加widgets的区域才需要在这里进行描述。
此图显示了19个区域,这通常已经超过了你网站所需要的布局。这些区域包括页眉(Header)页脚(Footer),它们位于页面的最上面和最下面。有一个导航区域(Navigation),这里通常是显示导航菜单的。特色区域(Featured)你可能会放一个网站Banner。BeforeMain和AfterMain在你网站主要内容区域的前后。AsideFirst和AsideSecond在你网站主要内容区域的左右。在页面的中部有一个消息区域(Messages),可用于显示消息通知。其次还有BeforeContent和AfterContent也在主内容区域前后,但是却在两侧区域之间。TripelFirst,TripelSecond,TripelThird在页面的最底部,如你想实行三列布局效果,那么就可以用它们。
Orchard作为一个内容管理系统(CMS),内容管理部分当然是其中最核心的东西。在Orchard中的任何数据都可以把它理解为内容(Content)。页面是内容、博客是内容、文章也是内容。整个网站就是由这些不同类型的内容项(Content Item)构成的。对这些不同内容的类型定义就是内容类型(Content Type)。而内容类型则是通过若干个不同的内容部件(Content Part)组成。这些内容部件都是可以跨类型重用的东西,每一个内容部件都实现了从UI层到数据库层的完整封装。正是由于Orchard这种对内容的组织,我们可以很方便的构造出一种新的类型。如:我们需要做一个产品展示页面,只需要定义一个产品类型(Product Type)。在这个产品类型中我们只用定义一个产品特有内容部件(Product Part,包含价格、品牌等信息),并添加一个路由部件(Route Part,可指定相应产品的名称和详情页地址)、一个文本部件(Body Part,可提供一个富文本输入框,用做产品信息描述)即可。此外,我们还可以添加标签部件(Tags Part),评论部件(Comments Part)等来丰富此产品类型。一旦有了这个产品类型的存在,我就可以很方便的通过后台来维护产品内容了。
Orchard中内容组织结构图示意图
Orchard中博文类型的Part分解图
由上图就可以看出一片博文其实是由多个内容部件组成的。
Orchard中一些常用的内容部件
Route Part:路由部件,可为内容提供路由支持即可通过指定Url访问相应内容。
Body Part:文本部件,可提供一个富文本编辑器的功能。
Comment Part:评论部件,可提供评论功能。
Tags Part:标签部件,可提供内容的标签定义,实现全站的标签检索功能。
Common Part:通用部件,提供所有者信息。
Publish later Part:延迟发布部件,提供内容延迟发布功能。
参考文档:
Orchard中的基本概念:http://www.orchardproject.net/docs/Basic-Orchard-Concepts.ashx
整整看了一天关于Orchard的东西,总的感觉还是一头雾水,先整理了一些关键词记录下来,便于以后深入的学习和了解。
运行机制相关的概念:
Architecture:架构。见下图:
官网介绍地址:http://www.orchardproject.net/docs/How-Orchard-works.ashx
Orchard是配置在IIS服务器上的一个Web站点,它使用了.NET4.0和ASP.Net的技术。代码是C#编写的。是基于ASP.NET MVC3的Web开发框架上编写的一个应用。它使用到了Nhibernate(OR映射工具)、Autofac(依赖注入容器)、Castle(也是一个开源框架,好像说是用到了动态代理之类的东西,目前还没明白,等清楚了再说)等成熟的框架和类库。其实还有一些其他常用的类库,如:sharpziplib(压缩、解压)、log4net(日志)等。估计是太常用了所以并没有将其列在图上。在这些成熟的框架基础上,Orchard建立了一个自己的框架Orchard Framework,主要提供一些最基本的功能,如:视图引擎(我感觉Orchard对Razor进行了重写和扩充)、内容管理、用户认证等,我们可以把它理解为Orchard所要使用的基础类库。在Orchard Framework的基础上,Orchard提供了一个网站运行最核心的功能,这些功能可以被其他模块使用。如:feeds、navigation和routable。在Orchard Code之上就是模块了(Modules),Orchard自带了一些基础的模块,如:博客。另外一些后台的功能也是作为模块提供的,比如:模块管理,页面管理等。
Shell:外壳,可以理解为Orchard站点的运行基础。包括站点设置、可使用的模块列表、主题列表等等。
Tenant:直译为租户,其实是一个逻辑站点的意思。Orchard支持在一个物理的站点上建立多个逻辑的站点。每个逻辑站点都是独立,有自己的数据,自己的主题等。所以我觉得把它翻译成站点更好些。类似DNN中Portals的概念。
皮肤相关的概念:
Theme:主题。是网站皮肤的概念。可以自由的定义显示区域,而且在Orchard中页面上的任何一部分的Html代码都是可以控的。而且可以根据多种情况,对同一个模块进行不同的样式定义。如:不同的站点,不同的请求地址等。总之是一个非常灵活的东西。
Zone:区域。是皮肤上的区块划分。用于在页面上不同的地方呈现不同数据。关于自定义区域功能,好像是动态类型在这里发挥了巨大作用。具体实现,等深入了解后在详细描述。
Layer:层。这也是一个皮肤中的概念。它相当与把平面的东西立体化了。在原有的区域的基础上增加了一个权限和特定情况的维度。即可在某一区域上面根据不同的权限显示不同的数据。如:管理员可见的,注册用户可见的,匿名用户可见的,首页可见的等等。通过层的概念就很好的解决了不同权限显示不同内容的问题。并且层还可以自由定义,具体用法和实现还需要深入学习。
功能相关的概念:
Module:模块。这个定义的范围很广,几乎所有的功能都是由模块构成的。在Orchard的划分中 ContentType、Part、Field,Widget,等都可以称做模块。但我倾向于把一个完整的功能,叫做模块。比如:Blogs模块,商城模块等。其余的内容还是按照各自的属性去划分。
Widget:小部件。可以提供多种功能的东西,如:最近博文,Html内容,登录控件等等。你可以把这些小部件,添加到页面的任意一个区域中。至于小部件还能干什么,就看我们的想象力了。
ContentType:内容类型。这个可是Orchard中非常亮丽的一个功能了。比如:一个文本输入框是一个类型,我们可以定义它在显示的时候是什么样子的、编辑的时候是什么样子的、是如何存储的。也就是说每一种类型都实现了由数据库层到显示层的完整封装。更神奇的是,我们可以利用这些现有的类型组装出一个新的类型。比如:我们可以在后台中添加几个自定义字段、再加一个Body Part(图文编辑器)、再加一个Comment Part(评论),一个新的新闻类型就诞生了。可以想象这样的开发利用率有多高。而且它居然还有一个更更神奇的地方,就是每一种类型在其他新的类型中当作Part的时候,其显示样式都是可以重新定义的。这样将会极大的提高复用的灵活性。
Part:构成类容类型的一个组成部分。它可以是评论、可以是博客,它可以是你任何想表达的业务实体。是做作为显示和处理的基本单元。是Orchard中一个很关键的组成部分。我觉得暂时可以把它理解为组件,等有了深入了解后再做详细的论述。
Field:字段。我觉得可以理解为一种轻量级的内容部件,通常是一个文本框,或者是一个可选择日期的日期输入框。叫做输入控件也许更贴切些。
编程相关的概念:
Record:记录。是实际存储到数据库中的数据。我觉得也可以称它为数据实体。
ContentPart :内容部件。是呈现到UI上的数据,我觉得也可以称它为业务实体。
Repository:数据仓库。负责数据访问的对象,我们就叫它数据访问层吧。
Handler:处理器。负责定义数据存储的方式。
Driver:驱动器。负责处理部件或字段的呈现逻辑,类似于MVC中的Controller。
Shape:外形。是一个动态类型。它负责把业务数据组装起来在View层上面显示。我们叫它视图模型也许更好一些。
除非你一直在岩石下生活,否则你不会没听过HTML5。现在几乎到处都有HTML5的身影,这得益于苹果公司前CEO 乔布斯和很多开发人员的推广。Sonia Tracy 收集整理了15个令人振奋的HTML5实验。
1. Canvas Cycle
艺术家Mark Ferrari 和 编码师 Joseph Huckaby的共同合作,这是一幅华丽动人的自然风景画,如冬日的森林,海景和山脉。他们看着这美不胜收并具有音效的图片,心旷神怡。如果你想从工作中获得片刻的轻松,这些照片可以瞬间融化你的紧张感。
2. Google Gravity
另一个来自于Mr.Doob的惊人之作,这比第一个的互动少些但是仍然十分棒。它提供了谷歌搜索主页的基本的副本。但是当你点击光标让整个页面开始“下滑”直到底部。谷歌标志作为一个迅速刷新页面的链接,这对那些讨厌谷歌的大公司来说是个很有意思的游戏。
3. Canvas Trees
这是有Kenneth Jorgenson创制,这可能是唯一一个地方你能够看到这种句子“刷新会有更多美味的树”。正如所说:你可以点击网站,然后它会带你到一个白色的背景。当开始计算程序中有多少分支时,黑色墨水绘制的树开始成长。你可以不断地刷新,只要你愿意。
4. Magnetic
这是另外个有意思又可供你娱乐的小东西。你基本以一对“磁铁”开始,这可以在屏幕上拖动。些许微粒光束围绕着它,如果你移动它可以改变他们的形状。如果你想要更多的磁铁和微粒,只需双击并拖动他们到任意地方。是的,他们都是有关磁铁和微粒。
5. Celebrity Earnings Graph 名人赚钱图表
想知道一个电视名人每集节目赚多少?这是个很酷的小图能显示成堆的彩条,它们代表每一个特定特定的名人(或像 Charlie Sheen). 这是 Daniel Rapp诸多项目中的一个。
6. Canvas Ribbon
Paul Truong 开发了这个有趣的应用,能够让你通过不停地移动在屏幕上绘制多色彩条。它能使形状和设计都十分漂亮。你所需要做的只是在屏幕上拖动。
7. WebGL Water
这还有一个很酷的演示,使用了革命性的WebGL(基于Web的图形库),在谷歌chrome上效果最好。在演示中,你可以荡起水中的涟漪,或拖动球体移动它,然后按某些键盘键设置光线的方向和切换重力,所有的都是见证如何在环境中灵活地移动目标。
8. Chrysaora
另一个由WebGL提供的令人惊异的演示,在这你可以看到一群非常漂亮活泼的水母在水中游动,梦幻般的阳光洒向书面。见证HTML5和WebGL所带来的网络生活,最好用谷歌Chrome浏览。
9. Voxel [...]
据国外媒体报道,随着互联网的飞速发展,WebApps在人们的生活、学习和娱乐中扮演着重要角色。
相比传统桌面版应用程序,Web应用的优势在于无须耗时下载、安装、配置,不会占用本地存储资源,较少受操作系统版本影响,用户只要打开相关网站就能使用,十分方便。

