Html 关于安全产品GUI布局的建议

我们开发了一种安全产品，可以识别网络上某些类型的未经授权的流量。显示消息的界面是一个Javaservlet生成的页面

此时，页面是一个美化的控制台日志。有一个大的文本框，其中添加了几行文本，作为警告和消息的生成。有两个很酷的特性是，页面会使用反向ajax（DRW）自动更新，最新消息会显示在屏幕顶部

有没有办法让它看起来更酷？此外，我们希望以某种方式强调或强调某些更严重的警告

---

任何想法都欢迎

嗯，你需要某种类型的过滤系统。允许用户创建过滤器以过滤掉某些消息（忽略、突出显示等）

高级搜索也会很有用

通过让用户单击单词并从中搜索，或类似的方式添加鼠标交互

---

就我的.02美元。

嗯，你需要某种类型的过滤系统。允许用户创建过滤器以过滤掉某些消息（忽略、突出显示等）

高级搜索也会很有用

通过让用户单击单词并从中搜索，或类似的方式添加鼠标交互

---

仅我的.02美元。

使用已建立的GUI思想，特别是AV套件。如果您有任何方法对分析进行分级（从“良好”状态，通过“中等”风险/危险到“高风险”），则使用某种形式的颜色表示分级。理想情况下，根据增量，使用类似于

.all-well {background-color: #0c0; /* not using #0f0 because it's a little too bright, for me */
}
.slight-risk {background-color: #f90; 
}
.danger-will-robinson {background-color: #c00; /* again #f00 is just too much for my eyes */
}

---

如果没有应用程序的详细信息或屏幕截图，很难提出任何不象上述那样基本和通用的建议，对不起。如果您添加更多信息，我将尝试提供更好的建议。

使用已有的GUI想法，尤其是AV套件。如果您有任何方法对分析进行分级（从“良好”状态，通过“中等”风险/危险到“高风险”），则使用某种形式的颜色表示分级。理想情况下，根据增量，使用类似于

.all-well {background-color: #0c0; /* not using #0f0 because it's a little too bright, for me */
}
.slight-risk {background-color: #f90; 
}
.danger-will-robinson {background-color: #c00; /* again #f00 is just too much for my eyes */
}

---

如果没有应用程序的详细信息或屏幕截图，很难提出任何不象上述那样基本和通用的建议，对不起。如果您添加更多信息，我将尝试提供更好的建议。

我不知道“酷”，但功能布局取决于用户使用信息的方式。以下是一些随机的建议，每种建议的适当性取决于您的用户、任务和技术环境的限制：

• 消息表，与控制台类似，但具有单独的字段，允许用户根据各种条件（例如，时间戳、IP地址）对消息进行排序、查询、筛选和扫描。这将允许用户将消息分组在一起，以便查看指示单个问题的模式

• 事件表，在该表中，您的应用程序将相关消息智能地分组为用户的单个事件（例如，单个入侵），如果有大量消息，则任务更易于管理。用户可以单击或双击事件以查看更多详细信息（例如，相关消息的列表）

• 网络图，如果组件有相关消息（或事件），则突出显示或以其他方式以图形方式编码。这可能允许用户根据网络位置查看消息/事件之间的关系。用户还可以通过图表与网络交互直接干预

• 无论布局如何，都是一种“重放”时间段的方法，这样用户可以通过动画看到事件的发展过程，并及时将事件追溯到事件的起源

当然，这些选项可以组合起来支持不同的任务

为了突出显示更严肃的信息，很难比颜色编码（色调）更能让某些东西从人群中跳出来。但是，出于可访问性和黑白打印的目的，您应该至少对一个其他图形属性进行冗余编码。我建议使用亮度（例如，白色、琥珀色、红色，表示严重程度的增加）、大小（特别是如果你能量化严重程度的话）或数字（随着严重程度的增加，一到三个感叹号）。将此编码与可排序字段合并，以便用户可以按严重性以及其他字段进行排序。更多信息，请参阅

---

由于您的用户似乎是网络管理员，因此我将重点关注用于其他想法的AV套件的专业IT版本，而不是针对消费者/最终用户的AV程序，因为他们有非常不同的问题和知识水平。

我不知道“酷”，但功能布局取决于用户如何使用信息。以下是一些随机的建议，每种建议的适当性取决于您的用户、任务和技术环境的限制：

• 消息表，与控制台类似，但具有单独的字段，允许用户根据各种条件（例如，时间戳、IP地址）对消息进行排序、查询、筛选和扫描。这将允许用户将消息分组在一起，以便查看指示单个问题的模式

• 事件表，在该表中，您的应用程序将相关消息智能地分组为用户的单个事件（例如，单个入侵），如果有大量消息，则任务更易于管理。用户可以单击或双击事件以查看更多详细信息（例如，相关消息的列表）

• 网络图，如果组件有相关消息（或事件），则突出显示或以其他方式以图形方式编码。这可能允许用户根据网络位置查看消息/事件之间的关系。用户还可以通过图表与网络交互直接干预

• 无论布局如何，都是一种“回放”时间段的方法，这样用户可以通过动画看到事件的发展过程，并将事件追溯到