数据,界面,循环 – 数据模型对界面的影响

上文介绍了数据建模的过程,最终得出一个含有Dataset、Data Item以及Operation的图状数据结构,其特点在于对Operation的关注,而不关注于常见的数据的属性、关系。

在数据建模中大量关注Operation及其之间的关系,就是为了让数据的模型可以有效地影响和指导界面的设计,从而形成“环”的两个部分的一条通路。

因此本文就介绍数据的模型如何指导界面的设计,以及从数据模型导出界面设计的一种方案。

导出跳转关系

在数据模型中,已经定义了针对各个Dataset以及Data Item的操作,同时也有了各个操作之间的关系。

还是使用上文中最后的数据模型:

首先可以假设,每一个操作,我们需要一个独立的界面模块来进行处理,比如针对上文的数据模型的定义,可以得出部分模块:

  • 用户详情查看,User.R
  • 文章列表,PostSet.L
  • 文章详情查看,Post.R
  • 评论列表,CommentSet.L
  • 创建评论,Comment.C
  • 评论详情查看,Comment.R

而操作之间的有向线段,正好表现了各个界面模块之间的“跳转”关系,因此可以得出以下结论:

  • User.R模块应当能跳转到PostSet.L模块
  • Post.R模块应当能中转到CommentSet.L模块
  • Comment.C模块应当能跳转到Post.R模块
  • Comment.R模块应当能跳转到User.R模块

所谓“跳转”,是一种很重要的“交互”的手段,这也是数据模型对界面及交互设计的最基本的指导方式,从数据模型中可以快速、方便、直观地推导出跳转的方案,同时图状的展现方式也更便于理解和归档,省却了文字分析、理解、管理上不必要的麻烦。

增加权重

在导出了跳转关系之后,可以将数据模型进行下一步的进化,在这一步中,可以给Operation之间的关系加上权重,权重可以由1-10的数字表示,数字越大说明权重越高,进而说明该操作对终端用户越重要。

同时,可以用线条的颜色来表示不同的权重,一种比较粗略的分级方法是1-3为一级,4-7为一级,8-10为一级,分别用绿色、黄色、红色来表示。

在加上权重后,数据模型可能变成下图所示:

注意到图上的关联有向线段已经标识了权重,并用不同的颜色给予区分,可以比较明显地看出哪一些“跳转”关系是需要在设计过程中特别注重的。

同时,“跳转”仅仅是一个大的概念,并非鼠标点击更换页面、打开新页面等有限的方式。一般来说,根据用户使用便捷性由低到高,跳转也可以分为几种方案:

  1. 使用链接单击切换页面。
  2. 使用AJAX技术以弹出层的方式显示新内容。
  3. 使用AJAX技术,配合页面本身的局部修改,在不遮罩下层元素的情况下显示新的内容。
  4. 页面直接内联相关信息。

有了这样的分类,根据数据模型中的权重的高低,可以使用一些换算的方法,将其映射到对应的“跳转方案”上:

  • 在User.R模块中需要有“查看用户文章”功能,使用3号方案展现PostSet.L模块
  • 在Post.R模块中,以内联的方式直接显示CommentSet.L模块
  • 在Post.D模块中,需要提供“查看作者”功能,使用2号方案展现User.R模块

在此基础上,使用更详细、精确、人性化的语言表达,即可形成MRD:

  • 在用户详细信息页面,需要有“查看该用户所有文章”的标签,单击后,页面中特定区块会加载该用户所有文章的概要信息,以列表形式显示。
  • 在查看文章时,需要在文章尾部以列表的形式显示该文章的所有评论。
  • 在删除文章时,需要提供“查看作者信息”的标签,单击后,加载该作者的详细信息,并弹出模态层展示作者的相关信息。

至此,数据模型已经对界面和交互的设计有了深远的影响,在很大程度上指导着界面和交互的设计方案,并且提供了一种可量化的方式,使得选择数据展现方式更加直观、方便。