注重用户体验的 Drupal 企业网站案例分析
某公司企业网站建设项目,根据客户需求制作两个只提供有限管理权限和管理功能,但用户体验良好且方便管理的 Drupal 站点。
项目需求
- 网站分为主页和六个分类,各个分类页面的内容布局各不相同;
- 在每个页面上提供相应的管理链接(如排序、编辑、添加),使网站管理人员无需借助后台管理导航即可完成需要的管理工作;
- 每个分类页面使用此分类下的所有内容的标题作为左边栏菜单,网站管理员可以简单的通过拖拽对其进行排序;
- 网站管理员只具备有限的管理权限,但这些权限足够在限定的框架内方便的完成各种管理功能,如边栏菜单排序、内容添加/编辑、图片排序等等;
挑战
- 可排序的动态左边栏菜单:使用内容所属分类下的所有内容的标题作为左边栏菜单,网站管理员可以方便的调整菜单顺序、添加/删除菜单项;
- 幻灯片效果:使用幻灯片的形式展示产品分类下的多张产品图片,同时网站管理员需要可以随意添加、删除产品图片,以及调整产品图片的顺序;
- 不确定的设备属性列表:每个设备有不同的属性,如有的属性是长、宽、高,有的是马力、载重,有的是硬度、重量等等。网站管理员为各个设备随意添加、删除属性,并且可以随意对属性进行排序;
- 有限的管理权限,良好的管理体验:网站管理员无法访问以 admin 为路径前缀的管理页面,但可以完成针对各个分类下的内容添加/删除、以及菜单/图片/属性/联系人的添加/删除/排序;
- 功能复用:为客户的另一家公司制作一个功能相似、主题不同的企业网站,使网站的管理、升级和备份能够尽可能方便;
解决方案
- Views + Draggableviews – 结合 Views 和 Draggableviews 创建可排序的视图区块、视图列表和视图管理按钮;
- 创建一个视图区块sidebar_block,使用所在页面的节点类型作为参数,从而显示此内容类型下的所有节点的标题;
- 创建一个视图页面sidebar_order_page,为页面添加 Draggableviews:Order字段,并让视图通过 Draggableviews形式来显示。页面路径配置成 order/sidebar/%,其中的‘%’ 用于接收参数中传递进来的内容类型,如果是产品页面的边栏排序页面,完整路径就是 order/sidebar/product;
- 将视图区块 sidebar_block 的排序方式更改为按 Draggableviews:Order 进行顺序排序,从而实现通过视图页面 sidebar_order_page 对边栏菜单的排序进行管理;
- 创建一个视图区块 sidebar_admin,此视图接收节点ID和节点类型两个参数,并且生成两个管理链接。“编辑”链接连接到对应的边栏排序管理页面,并使用节点ID构造URL的 destination 参数,以保证网站管理员调整完顺序点击“保存排序”之后,能够自动跳回当前页面。“添加”链接接收节点类型参数,此链接连接到对应内容类型的创建内容页面;
- 新增内容类型 + Views Slideshow + DraggableViews – 新增一个带 ImageField 字段的“产品图片”内容类型,使用 Views Slideshow 实现产品幻灯片效果,使用 DraggableViews 实现产品幻灯片图片顺序的调整;
- 新增“设备属性”内容类型,通过 Node Reference 字段建立“设备属性”与“设备”之间的关联关系。创建使用节点ID作为参数的视图区块,实现在“设备”页面显示对应的“设备属性”列表;
- 通过创建各种可以接收节点信息作为参数的视图区块,使网站管理员可以通过页面上的各种链接直接访问到相应的“创建内容”或者排序管理等页面;
- 使用 Drupal 自带的多站点机制实现代码复用,使用 Features 模块制作的特性包实现网站功能复用。
结果
- 实现可动态调整的左边栏菜单项,网站管理员可以使用管理按钮/链接方便地调整边栏菜单顺序,以及添加和删除边栏菜单项;
- 实现每个产品页面对应一个产品幻灯片,网站管理员可以为产品添加无数张产品图片,当产品图片较多时,页面会提供一个横向拖动条,使用户具备良好的浏览体验。同时网站管理员可以使用管理按钮/链接方便地调整产品图片顺序,以及添加和删除产品图片;
- 实现为每个设备添加各种设备属性,并且每个设置可以具备不同数量和不同名称的各种属性,网站管理员可以像管理其它内容一样方便地对设备属性进行排序、添加和删除;
- 实现在每个页面为网站管理员提供方便实用的管理链接,使网站管理员无需接触网站后台导航即可完成针对本网站的主要管理工作;
- 使两个网站使用同一个 Drupal 代码库,使两个网站的管理、升级和备份等工作都集中在同一个 sites 目录下,节省了管理难度和维护成本;
其它
- 通过为 CCK 中的 textarea 字段进行设置,可以使用 textarea 字段应用富文本编辑器,如使用wysiwyg 和 ckeditor 模块提供的支持;
- imagefield_extend 模块可以为 imagefield 增加扩展字段,使用用户在添加图片的同时,能够为图片提供相应的文字信息。如使用 imagefield_extend 模块为图片添加标题和描述,非常适合用于制作相册;
- Wysiwyg 模块搭配 CKEditor 3.6.2 在有些浏览器下编辑器无法显示,改用 CKEditor 3.5.x 版本后正常
内容分类: