成都app开发公司设计移动app时,移动界面中没有指针悬停(onHover)状态,所以要用另外一种交互方式来显示数据点的详细信息。在以下例子中,点击图表将显示已选择日期内页面浏览的详细信息。

成都app开发公司

Analytiks 和 NASDAQ QMX 应用

在来自 NASDAQ QMX 和 Yahoo! Finance 两个应用的例子中,数据点在图表底部的预览窗口中高亮显示。

成都app开发公司

Yahoo! Finance 应用

来自 Sencha Touch 图表库的示例使用模式对话框来显示数据点的详细信息,相比之下,在数据点周围显示详细信息的做法要更好一些。

来自 Sencha Touch 图表库的示例

Roambi 采用了一种可以通过点击“+”图标访问详细信息的“细节模式”。模式窗口和框架内有一个用以滚动到某个特定数据点的滚动条。 Roambi 的开发人员称为“viewtron”。

成都app开发公司

Rambi 应用

App开发的图表设计让人们形成了通过“指针悬停”操作查看细节的心理预期。你可以考虑通过“按下并持续”(onTap)操作来显示数据点的详细信息,提供用户所需的更多内容。

根据可用性最大化原则“有输入的地方就应该有输出。”用户期望通过触摸图表来查看详细信息。详细信息图和数据点细节图不能同时存在,你应该衡量这两者哪一个能最大程度地发挥价值,然后选择适当的模式。

我的设计团队设计了 Adobe Flex Sales Dashboard 应用,在第一幅图表中,利用工具栏显示详细的图表信息。显然,访问详细信息图的路径与整个页面,以及图表的标题融为了一体。在这个案例中,我们还为不同的操作系统设计了色调统一的详细信息图,当然,根据操作系统不同,可能需要在 UI 中设计一个“返回”按钮。

成都app开发公司

Adobe Flex Sales Dashboard 应用中的参考应用

在app设计的过程中应该利用视觉吸引(Invitation),以此鼓励第一次使用软件的用户触摸工具栏查看详细信息,Roambi 应用同样为“帮助文本”设计了文字提示“触摸工具栏以查看数据”。

Roambi 应用,按下信息栏查看数据吸引用户查看更多的数据。用面包屑式的导航(Breadcrumb)显示层级结构。

评论

电子邮件地址不会被公开。